/*--------------------------------------------------------------
# Hispabelgo-Homes — custom theme layer
# Palette: sea teal #0b7285 · deep navy #0f3247 · sun #f5a524
#          coral #e8654f · pale sea #f0f7f8 · sand #fbf3e4
--------------------------------------------------------------*/
:root {
  --hb-teal: #0b7285;
  --hb-teal-dark: #085e6e;
  --hb-navy: #0f3247;
  --hb-sun: #f5a524;
  --hb-coral: #e8654f;
  --hb-sea-pale: #f0f7f8;
  --hb-sand: #fbf3e4;
}

body { font-optical-sizing: auto; }

h1, h2, h3, h4, .sitename { letter-spacing: -0.01em; }

/* ===== Header / brand ===== */
.header .logo .hb-mark { width: 40px; height: 40px; margin-right: 10px; flex-shrink: 0; }
.header .logo h1.sitename { font-size: 22px; font-weight: 600; color: var(--hb-navy); margin: 0; }
.header .logo .sitename em { font-style: normal; color: var(--hb-teal); }
/* The frosted-glass effect lives on a pseudo-element, not on .header itself:
   backdrop-filter (like transform/filter) turns its element into the
   containing block for position:fixed descendants, and the mobile menu
   (#navmenu, fixed full-screen when open) is one of those descendants. Put it
   on .header directly and the open mobile menu gets clipped to the header
   bar's own height instead of covering the viewport. */
.header { box-shadow: 0 2px 18px rgba(15, 50, 71, 0.06); position: relative; }
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  z-index: -1;
}

.btn-getstarted { background: var(--hb-coral) !important; }
.btn-getstarted:hover { background: #d5563f !important; }

/* language switcher */
.lang-switch a { font-weight: 600; font-size: 13px; letter-spacing: 0.06em; }
.lang-switch .lang-current { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid color-mix(in srgb, var(--hb-teal), transparent 60%); border-radius: 50px; color: var(--hb-teal); }
.navmenu .lang-switch ul li a.lang-active { color: var(--hb-teal); font-weight: 700; }

/* ===== Hero (Mediterranean horizon) ===== */
.hb-hero { position: relative; padding: 120px 0 0; overflow: hidden; background: linear-gradient(180deg, #eaf6f8 0%, #f6fbfc 45%, #ffffff 100%); }
.hb-hero .hero-badge .badge { background: #fff; color: var(--hb-teal-dark); border: 1px solid color-mix(in srgb, var(--hb-teal), transparent 75%); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 50px; letter-spacing: 0.02em; }
.hb-hero h1 { font-family: var(--heading-font); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.12; color: var(--hb-navy); margin: 22px 0 18px; }
.hb-hero h1 .sun-word { color: var(--hb-sun); }
.hb-hero h1 .sea-word { color: var(--hb-teal); }
.hb-hero p.lead { font-size: 1.1rem; max-width: 560px; color: #40566b; }
.hb-hero .hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.hb-hero .btn-primary { background: var(--hb-teal); border: none; padding: 13px 28px; border-radius: 50px; font-weight: 600; display: inline-flex; align-items: center; }
.hb-hero .btn-primary:hover { background: var(--hb-teal-dark); }
.hb-hero .btn-outline { border: 1.7px solid var(--hb-navy); color: var(--hb-navy); padding: 12px 26px; border-radius: 50px; font-weight: 600; display: inline-flex; align-items: center; background: transparent; }
.hb-hero .btn-outline:hover { background: var(--hb-navy); color: #fff; }

.hb-hero .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 46px; }
.hb-hero .chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3edf0; border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--hb-navy); box-shadow: 0 4px 14px rgba(15,50,71,0.05); }
.hb-hero .chip i { color: var(--hb-coral); font-size: 15px; }
.hb-hero .chip:nth-child(2) i { color: var(--hb-sun); }
.hb-hero .chip:nth-child(3) i { color: var(--hb-teal); }

.hb-hero .hero-scene { width: 100%; height: auto; display: block; margin-bottom: -6px; }
@media (max-width: 991px) { .hb-hero { padding-top: 90px; } }

/* ===== Section headers ===== */
.section-badge { display: inline-block; background: color-mix(in srgb, var(--hb-teal), transparent 90%); color: var(--hb-teal-dark); font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 16px; border-radius: 50px; margin-bottom: 16px; }
.section-title-line { font-family: var(--heading-font); color: var(--hb-navy); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }

/* ===== About ===== */
.hb-about .content-wrapper p.lead { font-size: 1.02rem; }
.hb-about .bridge-visual { position: relative; background: linear-gradient(160deg, var(--hb-navy) 0%, #14526b 100%); border-radius: 22px; padding: 40px 34px; color: #eaf6f8; overflow: hidden; }
.hb-about .bridge-visual::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hb-sun), transparent 20%), transparent 70%); opacity: 0.55; }
.hb-about .bridge-flags { display: flex; align-items: center; gap: 18px; font-size: 34px; margin-bottom: 18px; }
.hb-about .bridge-flags .bi-arrow-left-right { font-size: 24px; color: var(--hb-sun); }
.hb-about .bridge-visual h3 { color: #fff; font-family: var(--heading-font); font-weight: 600; font-size: 1.45rem; }
.hb-about .bridge-visual .promise { border-left: 3px solid var(--hb-sun); padding-left: 14px; margin-top: 20px; font-size: 0.98rem; color: #cfe6ec; }
.hb-about .feature-item { display: flex; gap: 15px; margin-top: 22px; }
.hb-about .feature-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px; background: color-mix(in srgb, var(--hb-teal), transparent 90%); color: var(--hb-teal); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.hb-about .feature-item:nth-child(2) .feature-icon { background: color-mix(in srgb, var(--hb-sun), transparent 87%); color: #c07f10; }
.hb-about .feature-item:nth-child(3) .feature-icon { background: color-mix(in srgb, var(--hb-coral), transparent 88%); color: var(--hb-coral); }
.hb-about .feature-content h4 { font-size: 1.02rem; font-weight: 700; color: var(--hb-navy); margin-bottom: 4px; }
.hb-about .feature-content p { font-size: 0.93rem; margin: 0; color: #51677c; }
.hb-about .tagline { margin-top: 28px; font-family: var(--heading-font); font-size: 1.08rem; color: var(--hb-teal-dark); font-weight: 600; }

/* ===== Pillars (services) ===== */
.hb-pillars { background: var(--hb-sea-pale); }
.pillar-card { background: #fff; border-radius: 20px; padding: 34px 30px; height: 100%; border: 1px solid #e6eff1; border-top: 5px solid var(--pillar-color, var(--hb-teal)); box-shadow: 0 10px 30px rgba(15,50,71,0.05); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; }
.pillar-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,50,71,0.1); }
.pillar-card.pillar-sales { --pillar-color: var(--hb-teal); }
.pillar-card.pillar-new { --pillar-color: var(--hb-sun); }
.pillar-card.pillar-rent { --pillar-color: var(--hb-coral); }
.pillar-card .pillar-icon { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; background: color-mix(in srgb, var(--pillar-color), transparent 88%); color: var(--pillar-color); }
.pillar-card h3 { font-family: var(--heading-font); font-size: 1.3rem; font-weight: 600; color: var(--hb-navy); margin-bottom: 12px; }
.pillar-card p { font-size: 0.95rem; color: #51677c; flex-grow: 1; }
.pillar-card .pillar-link { font-weight: 700; color: var(--pillar-color); display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; margin-top: 8px; }
.pillar-card .pillar-link:hover { gap: 11px; }
.pillar-card .pillar-link i { transition: 0.2s; }

/* ===== Why us ===== */
.hb-why .why-card { background: #fff; border: 1px solid #e6eff1; border-radius: 18px; padding: 28px 24px; height: 100%; box-shadow: 0 6px 22px rgba(15,50,71,0.04); }
.hb-why .why-num { font-family: var(--heading-font); font-size: 15px; font-weight: 700; color: var(--hb-coral); letter-spacing: 0.08em; margin-bottom: 12px; }
.hb-why .why-card i { font-size: 28px; color: var(--hb-teal); margin-bottom: 14px; display: block; }
.hb-why .why-card h4 { font-size: 1.03rem; font-weight: 700; color: var(--hb-navy); }
.hb-why .why-card p { font-size: 0.92rem; color: #51677c; margin: 0; }

/* ===== Page hero (subpages) ===== */
.page-hero { position: relative; padding: 130px 0 70px; background: linear-gradient(160deg, var(--hb-navy) 0%, #11455d 60%, #0b7285 130%); color: #eaf6f8; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; right: 6%; top: 26%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--hb-sun) 0%, color-mix(in srgb, var(--hb-sun), transparent 40%) 55%, transparent 72%); opacity: 0.85; }
.page-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C 180 46 360 2 540 18 C 720 34 900 44 1080 28 C 1260 12 1380 20 1440 26 L 1440 46 L 0 46 Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; }
.page-hero .section-badge { background: rgba(255,255,255,0.13); color: #ffd98a; }
.page-hero h1 { font-family: var(--heading-font); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: 16px; }
.page-hero p.lead { max-width: 640px; color: #cfe6ec; font-size: 1.05rem; }
.page-hero .breadcrumb-lite { font-size: 13.5px; margin-bottom: 14px; color: #9fc6d1; }
.page-hero .breadcrumb-lite a { color: #cfe6ec; }
.page-hero .breadcrumb-lite a:hover { color: var(--hb-sun); }

/* ===== Content blocks on subpages ===== */
.check-list { list-style: none; padding: 0; margin: 22px 0 0; }
.check-list li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 0.98rem; color: #40566b; }
.check-list li i { color: var(--hb-teal); font-size: 19px; flex-shrink: 0; margin-top: 1px; }
.check-list.sun li i { color: var(--hb-sun); }
.check-list.coral li i { color: var(--hb-coral); }

.audience-card { background: var(--hb-sea-pale); border-radius: 18px; padding: 28px 24px; height: 100%; border: 1px solid #e0edf0; }
.audience-card i { font-size: 30px; color: var(--hb-teal); display: block; margin-bottom: 14px; }
.audience-card h4 { font-weight: 700; color: var(--hb-navy); font-size: 1.05rem; }
.audience-card p { font-size: 0.93rem; color: #51677c; margin: 0; }

.step-row { display: flex; gap: 18px; margin-bottom: 26px; }
.step-row .step-dot { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--hb-sun); color: var(--hb-navy); font-weight: 800; font-family: var(--heading-font); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(245,165,36,0.35); }
.step-row h4 { font-size: 1.02rem; font-weight: 700; color: var(--hb-navy); margin-bottom: 4px; }
.step-row p { font-size: 0.93rem; color: #51677c; margin: 0; }

.cta-band { background: linear-gradient(120deg, var(--hb-teal) 0%, #0d8a9c 100%); border-radius: 24px; padding: 48px 40px; color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,0.09); }
.cta-band h2 { font-family: var(--heading-font); color: #fff; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-band p { color: #d8f0f4; max-width: 620px; }
.cta-band .btn-light-cta { background: #fff; color: var(--hb-teal-dark); font-weight: 700; border-radius: 50px; padding: 13px 30px; display: inline-flex; align-items: center; gap: 8px; }
.cta-band .btn-light-cta:hover { background: var(--hb-sand); }
.cta-band .btn-ghost-cta { border: 1.6px solid rgba(255,255,255,0.7); color: #fff; font-weight: 600; border-radius: 50px; padding: 12px 28px; display: inline-flex; align-items: center; gap: 8px; }
.cta-band .btn-ghost-cta:hover { background: rgba(255,255,255,0.12); }

/* ===== Contact ===== */
.hb-contact .info-card { background: #fff; border: 1px solid #e6eff1; border-radius: 18px; padding: 26px 24px; display: flex; gap: 16px; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(15,50,71,0.04); }
.hb-contact .info-card i { width: 50px; height: 50px; flex-shrink: 0; border-radius: 14px; background: color-mix(in srgb, var(--hb-teal), transparent 90%); color: var(--hb-teal); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.hb-contact .info-card h4 { font-size: 1rem; font-weight: 700; color: var(--hb-navy); margin-bottom: 3px; }
.hb-contact .info-card p { font-size: 0.93rem; color: #51677c; margin: 0; }
.hb-contact .php-email-form { background: #fff; border: 1px solid #e6eff1; border-radius: 20px; padding: 34px 30px; box-shadow: 0 10px 30px rgba(15,50,71,0.05); }
.hb-contact .php-email-form input, .hb-contact .php-email-form textarea { border: 1.5px solid #dfeaee; border-radius: 12px; padding: 12px 16px; font-size: 0.95rem; color: var(--hb-navy); background: #fbfdfe; width: 100%; }
.hb-contact .php-email-form input:focus, .hb-contact .php-email-form textarea:focus { border-color: var(--hb-teal); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-teal), transparent 85%); }
.hb-contact .php-email-form button[type="submit"] { background: var(--hb-coral); color: #fff; border: none; border-radius: 50px; padding: 13px 34px; font-weight: 700; }
.hb-contact .php-email-form button[type="submit"]:hover { background: #d5563f; }

/* ===== Footer ===== */
.footer { background: var(--hb-navy); color: #b8d3dc; }
.footer .sitename { color: #fff; }
.footer .sitename em { font-style: normal; color: var(--hb-sun); }
.footer h4 { color: #fff; font-size: 1rem; font-weight: 700; }
.footer a { color: #b8d3dc; }
.footer a:hover { color: var(--hb-sun); }
.footer .social-links a { border: 1px solid rgba(255,255,255,0.25); color: #dceef2; }
.footer .social-links a:hover { background: var(--hb-teal); border-color: var(--hb-teal); color: #fff; }
.footer .copyright { border-top: 1px solid rgba(255,255,255,0.12); color: #8fb2be; }

/* focus visibility + reduced motion */
a:focus-visible, button:focus-visible { outline: 3px solid var(--hb-sun); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}