/* ============================================================
   Self-hosted fonts (variable woff2, latin + latin-ext). Replaces the
   render-blocking fonts.googleapis.com chain. font-display: swap paints
   in the fallback immediately, then swaps to the real font.
   ============================================================ */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================================================================
   DESIGN TOKENS — primary navy with modern polish
   ========================================================================= */
:root {
  /* Brand colors — primary navy + emphasis red */
  --navy:      #1F4391;   /* logo navy — primary brand */
  --navy-deep: #142E66;
  --navy-soft: #2C5BB8;
  --red:       #ED1C24;   /* logo red — emphasis */
  --red-deep:  #C8141B;
  --red-soft:  #FEE8EA;

  /* American flag red (Old Glory Red) — used for every hover state */
  --flag-red:      #B22234;
  --flag-red-deep: #8E1B29;
  --flag-red-soft: #F7E3E5;

  /* Blue scale (for tints / supportive blue moments) */
  --blue-50:   #EEF3FB;
  --blue-100:  #D9E4F4;
  --blue-200:  #B5CAEA;
  --blue-400:  #5E83C7;
  --blue-500:  #3C68B4;
  --blue-600:  #1F4391;   /* maps to navy — primary actions */
  --blue-700:  #142E66;
  --blue-800:  #0E1F45;
  --blue-900:  #08152F;

  /* Neutrals */
  --ink:    #0A1230;
  --char:   #1F2A44;
  --mute:   #5B6577;
  --line:   #E2E8F0;
  --line-2: #EEF1F6;
  --bg:     #FFFFFF;
  --bg-soft:#F8FAFC;
  --bg-tint:#F2F6FE;

  /* Accents */
  --yellow: #FFB31A;
  --green:  #1FA875;

  /* Type */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Geist', system-ui, sans-serif;

  /* Spacing */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10, 18, 48, 0.04), 0 1px 3px rgba(10, 18, 48, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 18, 48, 0.06), 0 2px 4px rgba(10, 18, 48, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(10, 18, 48, 0.18), 0 8px 16px -8px rgba(10, 18, 48, 0.08);
  --shadow-blue: 0 20px 40px -16px rgba(27, 94, 224, 0.35);
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--char);
  background: var(--bg);
  line-height: 1.55;
  font-size: 16px;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Accessible keyboard focus — on-brand navy ring, never on mouse click */
:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Anchor targets clear the 72px sticky header */
:target { scroll-margin-top: 88px; }
[id] { scroll-margin-top: 88px; }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .container { padding: 0 40px; }
}

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--blue-600);
  display: block;
}
.eyebrow--light { color: var(--blue-200); }
.eyebrow--light::before { background: var(--blue-200); }

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.035em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -0.02em; }
h4 { font-size: 1.125rem; letter-spacing: -0.015em; }
/* Why-point card title — retagged from h4 to h3 for a valid outline; this class
   reproduces the original h4 size so the look is unchanged. */
.why-point-title { font-size: 1.125rem; letter-spacing: -0.015em; }

.lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--char); line-height: 1.55; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn--primary {
  background: var(--blue-600);
  color: white;
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover { background: var(--flag-red); transform: translateY(-1px); box-shadow: 0 24px 48px -16px rgba(178, 34, 52, 0.45); }
.btn--ghost {
  border: 1.5px solid var(--line);
  background: white;
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--flag-red); color: var(--flag-red); }
.btn--dark {
  background: var(--ink);
  color: white;
}
.btn--dark:hover { background: var(--flag-red); }
.btn--lg { padding: 16px 28px; font-size: 15px; }
.btn--icon::after { content: " →"; font-weight: 400; transition: transform 0.18s; }
.btn--icon:hover::after { transform: translateX(3px); }
/* Tactile press feedback */
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: 0.06s; }

/* =========================================================================
   HEADER
   ========================================================================= */
/* Floating, detached pill header — the bar itself is the rounded glass
   container; the wrapper is just a transparent sticky positioner. */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 100;
  margin-top: 14px;
  padding: 0 24px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 0 24px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--body);
  text-decoration: none;
}
.brand-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  line-height: 1;
  width: fit-content;
  text-decoration: none;
}
.brand-logo .brand-name {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.brand-logo .brand-tagline {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: 8.25px;
  color: var(--flag-red);
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  width: 100%;
}
.footer-brand-block .brand-logo .brand-name { font-size: 24px; }
.footer-brand-block .brand-logo .brand-tagline { font-size: 9.75px; }
/* Official SVG logos (header: stacked wordmark + "INSURANCE"; footer:
   single-line wordmark). Height-driven; width scales with the aspect ratio. */
.brand-mark { display: block; height: 27px; width: auto; }
.footer-brand-block .brand-mark { height: 30px; }
.brand-tag {
  display: none;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.3;
}
.brand-tag strong { display: block; color: var(--navy); font-weight: 700; letter-spacing: 0.08em; }
@media (min-width: 768px) { .brand-tag { display: block; } }
.footer-brand-block .brand-logo { width: fit-content; }
.footer-brand-block .brand-tag { display: block; padding-left: 16px; }
.nav {
  display: none;
  gap: 28px;
  align-items: center;
  align-self: stretch;
}
@media (min-width: 1024px) {
  .nav { display: flex; }
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--char);
  transition: color 0.18s;
  position: relative;
}
.nav a:hover { color: var(--flag-red); }
/* Home nav link rendered as a house icon (replaces the Inicio/Home text) */
.nav a.nav-home { display: inline-flex; align-items: center; }
.nav a.nav-home svg { display: block; }
/* Animated red underline (grows left-to-right) on hover and for the active
   page. Uses ::before so it owns the underline; no dot. */
.nav a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  border-radius: 1px;
  background: var(--flag-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.nav a:hover::before,
.nav a.active::before { transform: scaleX(1); }
/* Active page: red text + red underline. */
.nav a.active { color: var(--flag-red); }

/* Service "Seguros" dropdown. By default the wrapper + menu are display:contents
   so the 5 service links flow as normal nav items (flat inline at >=1321px,
   stacked in the <=1023px hamburger panel). Only the 1024-1320px band collapses
   them under a hover dropdown. */
.nav-dropdown, .nav-dropdown-menu { display: contents; }
.nav-dropdown-toggle { display: none; background: none; border: 0; font: inherit; padding: 0; }
@media (min-width: 1024px) and (max-width: 1320px) {
  .nav-dropdown { display: inline-flex; position: relative; align-items: center; }
  .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--char);
    cursor: pointer;
    transition: color 0.18s;
  }
  .nav-dropdown:hover .nav-dropdown-toggle,
  .nav-dropdown:focus-within .nav-dropdown-toggle,
  .nav-dropdown:has(a.active) .nav-dropdown-toggle { color: var(--flag-red); }
  .nav-chevron { transition: transform 0.2s ease; }
  .nav-dropdown:hover .nav-chevron,
  .nav-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }
  .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 220px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line-2);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  /* Transparent bridge so the cursor can cross the gap without losing hover. */
  .nav-dropdown-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-dropdown-menu a { padding: 9px 14px; border-radius: 10px; white-space: nowrap; }
  .nav-dropdown-menu a:hover { background: var(--bg-soft); color: var(--flag-red); }
  .nav-dropdown-menu a::before { display: none; }
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
}
.lang-toggle button {
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  color: var(--mute);
  transition: all 0.18s;
}
.lang-toggle button.active { background: var(--ink); color: white; }
.phone-link {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
@media (min-width: 768px) { .phone-link { display: inline-flex; } }
.phone-link svg { color: var(--blue-600); }

/* Call-now pill — phones only (where the desktop number text is hidden). The tap
   fires a tel: call, which Google Ads can track as a call conversion (desktop
   users read/dial the number manually, which isn't trackable — accepted). */
.btn--call { display: none; }
@media (max-width: 767px) {
  /* Show the Call Now pill; hide the header quote button to make room (the hero
     keeps a prominent "Cotización gratis" button). Compact the bar so the
     hamburger + logo + language toggle + Call Now fit on small phones. */
  .btn--call { display: inline-flex; padding: 9px 15px; font-size: 13px; }
  .header-actions a[href*="#quote"] { display: none; }
  .header-actions { gap: 8px; }
  .site-header { padding: 0 12px; }
  .header-inner { gap: 12px; padding: 0 12px; }
  .lang-toggle button, .lang-toggle a { padding: 5px 9px; }
}

/* Hamburger toggle — hidden on desktop, shown left of the logo below 1024px. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-soft);
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.header-inner.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-inner.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.header-inner.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .header-inner { position: relative; }
  /* Keep the toggle + logo grouped on the left, actions pushed to the right. */
  .brand { margin-right: auto; }
  /* The existing nav becomes a dropdown panel under the header pill. */
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    padding: 10px;
    box-shadow: var(--shadow-lg);
  }
  /* Two-column dropdown: home spans the top, the 5 services fill column 1,
     and Nosotros/Contacto sit in column 2 aligned to the first two rows. */
  .header-inner.menu-open .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-content: start;
  }
  .menu-open .nav .nav-home {
    grid-column: 1 / -1;
    grid-row: 1;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
    padding-bottom: 12px;
  }
  .menu-open .nav .nav-dropdown-menu a { grid-column: 1; }
  .menu-open .nav .nav-dropdown-menu a:nth-child(1) { grid-row: 2; }
  .menu-open .nav .nav-dropdown-menu a:nth-child(2) { grid-row: 3; }
  .menu-open .nav .nav-dropdown-menu a:nth-child(3) { grid-row: 4; }
  .menu-open .nav .nav-dropdown-menu a:nth-child(4) { grid-row: 5; }
  .menu-open .nav .nav-dropdown-menu a:nth-child(5) { grid-row: 6; }
  .menu-open .nav > a:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .menu-open .nav > a:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  .nav a { padding: 11px 14px; border-radius: 12px; font-size: 15px; }
  .nav a:hover { background: var(--bg-soft); }
  .nav a::before { display: none; }
}
@media (max-width: 767px) {
  /* Center the logo in the space between the hamburger and the right-side
     actions (the ≤1023px rule already sets margin-right: auto). */
  .brand { margin-left: auto; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 80px;
  background:
    radial-gradient(circle at 100% 0%, var(--blue-50) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, var(--blue-50) 0%, transparent 40%),
    var(--bg);
}
@media (min-width: 768px) {
  .hero { padding: 80px 0 120px; }
}
/* Photo heroes (homepage + service pages, both use .hero-bg): pull them up
   under the floating header so the image covers to the very top and the nav
   pill sits over it. The top padding keeps the content clear of the pill.
   (Service pages carry their breadcrumb inside the hero, over the photo.) */
.hero:has(.hero-bg), .hero--panel {
  margin-top: -78px;
  padding-top: 134px;
}
@media (min-width: 768px) {
  .hero:has(.hero-bg), .hero--panel { padding-top: 158px; }
}
/* Homepage hero: trim the excess space below the estimate card so the carrier
   ribbon sits closer to the CTA. Applied to the whole hero (every slide keeps
   the same reduced height), so nothing moves as slides rotate — zero CLS.
   Scoped via .hero-dots so only the homepage hero is affected. */
.hero:has(.hero-dots) { padding-bottom: 44px; }
@media (min-width: 768px) {
  .hero:has(.hero-dots) { padding-bottom: 72px; }
}
/* Text-only heroes (Nosotros/Contacto) have no photo layer. Give them the SAME
   inset:0 fill layer the product-page .hero-bg provides — pinned to all four
   edges of the hero box so it physically reaches up behind the pill (no top
   gap) — but a brand-blue gradient instead of a vehicle photo. Sits at z0,
   below the agent (z1) and the breadcrumb/text (z2). NOT .hero:has(.hero-bg),
   so no mobile white scrim (Contacto must not wash out). The breadcrumb moves
   INSIDE the hero (matching product pages) so nothing sits between the header
   and the hero to push the pull-up short. */
.hero-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 100% 0%, var(--blue-100) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, var(--blue-50) 0%, transparent 50%),
    linear-gradient(160deg, #DFE9F8 0%, #EFF4FC 55%, #F9FBFE 100%);
}
.hero--panel .breadcrumb { position: relative; z-index: 2; padding-top: 0; }

/* Agent cutout on the Nosotros hero: right-anchored & height-contained on
   desktop (mirrors the product-page .hero-bg vehicle), faded behind the copy
   below 1024px so the heading stays legible (mirrors the ≤1023px scrim). */
.hero-agent {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .hero-agent { opacity: 0.16; object-position: center bottom; }
}
/* Breadcrumb sitting inside a photo hero — lift it above the scrim, drop its
   default top padding (the hero's padding-top already clears the header). */
.hero:has(.hero-bg) .breadcrumb { position: relative; z-index: 2; padding-top: 0; }

/* Decorative grain */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Hero background photo — per-service, swapped by the slider. Sits behind all
   hero content. Static: background color + image only, no decorative animation.
   (The only transition here is the slider crossfade — opacity on slide change.) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Homepage first paint = the agent slide (slide 1 of 6). Service pages set
     their own image inline, so this default only reaches the two homepages.
     The mobile variant is swapped in below the 1024px breakpoint. */
  background-image: url("/images/hero/one-agent.webp");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  /* Per-service right-half inset (vehicle slides) is applied as padding-left
     with the background painted into the content box — NOT by moving `left`.
     The element's border-box stays pinned at inset:0 on every slide, so it
     never repositions in layout: the framing change is a background repaint,
     not a layout shift (zero CLS). Same rendered result as a 50vw-wide box. */
  background-origin: content-box;
  transition: opacity 0.18s ease;
}
.hero-bg.is-switching { opacity: 0; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  position: relative;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
  }
}
.hero-text { position: relative; z-index: 2; }

/* Stacked (responsive) hero: below 1024px the layout is single-column, so the
   right-anchored .hero-bg cutout sits behind the headline / chips / CTA. Lay a
   white scrim over the photo (above the image at z0, below the content at z2)
   so the dark text stays legible. Non-region heroes only — region heroes have
   their own dark overlay (.hero--region::after) and use .hero-region-bg. */
@media (max-width: 1023px) {
  .hero:has(.hero-bg)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
  }
  /* Stacked layout: let the hero photo span the full screen width (centered),
     overriding the desktop right-anchored cutout sizing and the per-service
     inset the slider writes inline (hence !important). */
  .hero-bg {
    background-size: 100% auto !important;
    background-position: center !important;
    left: 0 !important;
    /* Neutralize the desktop right-half inset on mobile/tablet: the JS writes
       padding-left:50vw inline for vehicle slides, but here the photo spans the
       full width, so reset it (content box = full box). */
    padding-left: 0 !important;
  }
  /* Homepage agent slide (slide 1): serve the ~800px mobile variant below the
     breakpoint — the desktop file is the default above it. Scoped to the slider
     hero (only the homepages carry .hero-dots) so service-page .hero-bg
     images are untouched. Paired with the media-scoped <link rel=preload>, so
     mobile fetches only the small file, never the large desktop source. */
  .hero:has(.hero-dots) .hero-bg {
    background-image: url("/images/hero/one-agent-responsive.webp");
  }
  /* Agent slide fill (mobile/tablet): on the agent slide the pricing card is
     hidden but its layout box stays reserved, which would leave a blank gap
     below the copy. Fill that reserved area by scaling the agent image up to
     cover the full hero height (anchored top so her head/torso stay in frame),
     so she reads as a soft full-height presence behind the copy instead of
     blank white. Scoped to the agent slide via the hidden card; it changes only
     the background paint, so the layout box never moves and the carrier ribbon
     stays put — zero new CLS. (She sits behind the existing 85% white scrim, so
     the effect is intentionally faded.) Vehicle slides keep the 100%-wide photo. */
  .hero:has(.policy-card.is-hidden) .hero-bg {
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* Region (city) hero: a wide, full-bleed cover photo behind the banner text.
   Pulled up under the floating header so the photo covers to the very top; a
   dark gradient overlay keeps the white text legible over any photo. The image
   is set inline per page (style="background-image:url(...)"). */
.hero--region {
  /* Pull up by the header's full footprint (pill 64px + its 14px top gap +
     14px top offset) so the photo covers the very top of the screen, behind
     and above the floating pill. Padding-top keeps the content below the pill. */
  margin-top: -92px;
  padding-top: 120px;
}
@media (min-width: 768px) {
  .hero--region { padding-top: 144px; }
}
/* Full-bleed cover photo on its own layer so it can zoom independently of the
   text. Image set inline per page. Plays a one-time zoom-out on load (settles
   from 1.12 to 1) — not infinite, so it doesn't keep re-blurring the glass
   header that floats over it. */
.hero-region-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  animation: heroZoomOut 7s ease-out both;
}
@keyframes heroZoomOut {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-region-bg { animation: none; transform: none; }
}
/* Optional hero video (Florida umbrella): covers the hero on desktop, sitting
   over the poster image. Hidden below 1024px, where the poster shows instead —
   and JS only sets its src on desktop, so phones never download it. */
.hero-region-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}
@media (min-width: 1024px) {
  .hero-region-video { display: block; }
}
.hero--region::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(12, 20, 40, 0.82) 0%,
    rgba(12, 20, 40, 0.55) 45%,
    rgba(12, 20, 40, 0.25) 100%
  );
}
/* Lift all hero content (breadcrumb + text) above the overlay. */
.hero--region .container { position: relative; z-index: 2; }
/* White banner text + eyebrow dash over the photo. */
.hero--region .eyebrow,
.hero--region .hero-text h1,
.hero--region .hero-text .lede { color: #fff; }
.hero--region .eyebrow::before { background: #fff; }
.hero--region .hero-cta-divider { color: rgba(255, 255, 255, 0.85); }
.hero--region .hero-cta a.phone { color: #fff; }
/* Breadcrumb now sits over the photo — make it white. */
.hero--region .breadcrumb { padding-top: 0; color: rgba(255, 255, 255, 0.85); }
.hero--region .breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.hero--region .breadcrumb a:hover { color: #fff; }
.hero--region .breadcrumb .sep { color: rgba(255, 255, 255, 0.45); }
.hero--region .breadcrumb [aria-current] { color: #fff; }

.hero h1 { margin-bottom: 24px; animation: fadeUp 0.6s ease-out 0.1s both; }
.hero h1 .accent {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-variation-settings: "opsz" 96, "wdth" 90;
  /* italic glyphs overhang their box; pad right so background-clip:text
     doesn't clip the final letter's slanted edge */
  padding-right: 0.12em;
}
.hero .lede { color: var(--char); max-width: 540px; margin-bottom: 36px; animation: fadeUp 0.6s ease-out 0.2s both; }

/* Hero carousel dashes — expanding-pill indicators, one per HERO_ORDER slide
   (the agent slide + the 5 services). Inactive = short blue pill (~22px), active
   = ~2x-longer red pill (~48px), same ~5px thickness and fully rounded caps.
   The active pill animates its layout WIDTH so it occupies its own space and the
   flex gaps stay even at every position (a transform/scaleX on a fixed box can't
   give even tight gaps — it would leave wide gaps or overlap the neighbours).
   The row is left-aligned; only the growing active pill reflows, so the layout-
   shift it contributes is negligible (see dash-CLS measurement in the report). */
.hero-dots {
  display: flex;
  align-items: center;
  gap: 10px;                    /* tight, EVEN spacing between every pill */
  margin-bottom: 36px;
  animation: fadeUp 0.6s ease-out 0.3s both;
}
/* Each dash's flex item is the visible pill itself, so the active pill occupies
   its own layout width and the 10px flex gaps stay even at every position (the
   longer active pill never shrinks or overlaps a neighbour's gap). The 44px
   keyboard/touch target is an invisible ::before overlay, so enlarging the hit
   area does NOT widen the visible spacing. */
.hero-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero-dot::before {             /* 44x44 hit / focus target; no layout footprint */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.hero-dot-bar {
  display: block;
  width: 22px;                  /* inactive length */
  height: 5px;
  border-radius: 999px;         /* fully rounded pill caps */
  background: var(--blue-600);  /* inactive = brand blue */
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, opacity 0.18s ease;
}
.hero-dot.active .hero-dot-bar {
  width: 48px;                  /* active length (~2x), occupies its own space */
  background: var(--flag-red);  /* active = brand red */
}
.hero-dot:hover .hero-dot-bar { opacity: 0.7; }
.hero-dot:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  /* Snap the expand/contract (no animation) for reduced-motion users. */
  .hero-dot-bar { transition: none; }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  animation: fadeUp 0.6s ease-out 0.4s both;
}
.hero-cta-divider {
  color: var(--mute);
  font-size: 14px;
}
.hero-cta a.phone {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  transition: color 0.18s;
}
.hero-cta a.phone:hover { color: var(--flag-red); }

/* Hero visual — policy card */
.hero-visual {
  position: relative;
  z-index: 2;
  animation: fadeUp 0.8s ease-out 0.3s both;
}

.bento {
  position: relative;
}

/* Main policy card */
.policy-card {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, rgba(20, 46, 102, 0.95) 0%, rgba(8, 21, 47, 0.95) 100%);
  border-radius: var(--r-lg);
  padding: 20px 28px;   /* trimmed vertical only; horizontal kept at 28px so the
                           label/meta wrap points are unchanged (no per-slide
                           reflow as the text swaps between slides) */
  color: white;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Fade the whole card in/out with the slide crossfade (same 0.18s as the
     hero background) so it toggles in lockstep with the rotation. */
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
/* Agent slide: remove the pricing card from layout flow (display:none) so its
   space collapses and the carrier ribbon rises up close to the CTA. This makes
   the hero shorter on the agent slide and taller on the vehicle slides, so the
   ribbon moves as slides rotate — an accepted trade to kill the CTA->ribbon gap
   (see the CLS numbers in the report). Toggled off currentHeroService === 'agent'
   in renderHeroSlide, in sync with the crossfade. */
.policy-card.is-hidden {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  /* Match the hero's reduced-motion behavior: no crossfade, instant swap. */
  .policy-card { transition: none; }
}
/* Narrow the card by 25% on desktop and keep it to the right, so more of the
   hero photo shows around it. */
@media (min-width: 1024px) {
  .policy-card { width: 90%; margin-left: auto; }
}
/* Responsive: estimate card at half the screen width (it cycles through all 5
   service estimates via the slider). */
@media (max-width: 1023px) {
  .policy-card { width: 50%; }
}
/* Phones (not tablet+): center the hero copy, service chips and primary CTA,
   drop the "o llama al (786) 568-7450" line, and let the estimate card span
   the full width. */
@media (max-width: 767px) {
  /* Flex column lets us reorder the CTA above the service pills without
     touching the desktop DOM order. */
  .hero-text { text-align: center; display: flex; flex-direction: column; }
  .hero h1 { order: 1; font-size: clamp(3rem, 13vw, 3.75rem); }
  .hero .lede { order: 2; margin-left: auto; margin-right: auto; }
  .hero-cta { order: 3; justify-content: center; margin-bottom: 72px; }
  .hero-dots { order: 4; justify-content: center; margin-bottom: 0; }
  .hero-cta-divider,
  .hero-cta a.phone { display: none; }
  .policy-card { width: 100%; }
  /* Hero photo spans the full screen width, anchored to the top. */
  .hero-bg {
    background-size: 100% auto !important;
    background-position: top right !important;
  }
}
.policy-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--blue-400) 0%, transparent 70%);
  opacity: 0.4;
  border-radius: 50%;
}
.policy-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}
.policy-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue-200);
}
.policy-card-tag {
  font-family: var(--body);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;   /* keep the tag on one line so the card head can't
                            change height as the (variable-length) label swaps
                            between slides — avoids a per-slide reflow / CLS */
  flex-shrink: 0;
}
.policy-card-price {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin-bottom: 4px;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.policy-card-price sub {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--blue-200);
  vertical-align: baseline;
  margin-left: 4px;
}
.policy-card-meta {
  font-size: 13px;
  color: var(--blue-200);
  margin-bottom: 20px;
  position: relative;
}
/* Hero slider crossfade — the slider-owned fields fade out/in on switch. */
.policy-card-label,
.policy-card-amount,
.policy-card-meta {
  transition: opacity 0.18s ease;
}
.policy-card.is-switching .policy-card-label,
.policy-card.is-switching .policy-card-amount,
.policy-card.is-switching .policy-card-meta {
  opacity: 0;
}
.policy-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}
.policy-card-foot-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-200);
  margin-bottom: 4px;
}
.policy-card-foot-value {
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================================
   CARRIERS
   ========================================================================= */
.carriers {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 32px 0;
}
.carriers-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.carriers-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  flex-shrink: 0;
}
.carriers-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.carriers-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--char);
}
.carriers-track > * { padding: 6px 22px; }
.carriers-track span { white-space: nowrap; opacity: 0.6; }
.carriers-track img.carrier-logo { height: 32.5px; width: auto; display: block; }
/* JS clones the list and adds is-marquee to enable a seamless single-line scroll */
.carriers-track.is-marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: carriers-scroll 42s linear infinite;
  will-change: transform;
}
.carriers-marquee:hover .carriers-track.is-marquee { animation-play-state: paused; }
@keyframes carriers-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .carriers-track.is-marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* =========================================================================
   QUICK QUOTE BANNER
   ========================================================================= */
.quick-quote {
  padding: var(--sp-7) 0;
}
.quick-quote-card {
  background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-800) 100%);
  border-radius: var(--r-xl);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
  /* visible so the headphones graphic can poke past the top/bottom edges;
     the decorative glow is clipped by the rounded .qq-bg layer instead. */
  overflow: visible;
  color: white;
}
@media (min-width: 768px) {
  .quick-quote-card {
    grid-template-columns: 1.4fr 1fr;
    padding: 64px;
    align-items: center;
  }
}
/* Rounded, clipped background layer: holds the decorative glow so it stays
   inside the card even though the card itself is overflow: visible. */
.qq-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.qq-bg::before {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--blue-400) 0%, transparent 60%);
  opacity: 0.3;
}
/* Headphones graphic: sits above the blue card but below the white price
   cards, anchored right and reaching past the card's centre, poking a little
   past the top/bottom edges. Hidden on mobile (single-column card). */
.qq-headphones {
  position: absolute;
  top: -20px;
  right: 8%;
  height: calc(100% + 40px);
  width: auto;
  z-index: 1;
  pointer-events: none;
  display: none;
  transform: scale(1.1); /* +10%, grown from the right edge */
  transform-origin: right center;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.32));
}
@media (min-width: 768px) {
  .qq-headphones { display: block; }
}
/* Keep the copy above the headphones so the headline stays readable. */
.qq-copy { position: relative; z-index: 2; }
.quick-quote-card h2 { color: white; font-size: clamp(1.75rem, 3.5vw, 2.75rem); margin-bottom: 14px; max-width: 540px; }
.quick-quote-card p { font-size: 16px; color: var(--blue-200); margin-bottom: 28px; max-width: 460px; }
/* Responsive: white body text for stronger contrast on smaller screens. */
@media (max-width: 1023px) {
  .quick-quote-card p { color: #fff; }
}
.quick-quote-card .btn--ghost { background: white; color: var(--ink); border-color: transparent; }
.quick-quote-card .btn--ghost:hover { background: var(--flag-red); color: #fff; }

/* Quick quote visual */
.quick-quote-visual {
  position: relative;
  height: 200px;
  display: none;
  z-index: 2;
}
@media (min-width: 768px) {
  .quick-quote-visual { display: block; }
}
.qq-card {
  position: absolute;
  background: white;
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.qq-card-1 {
  top: 0;
  right: 60px;
  width: 200px;
  transform: rotate(-4deg);
}
.qq-card-2 {
  top: 70px;
  right: 0;
  width: 200px;
  transform: rotate(3deg);
}
.qq-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--mute); text-transform: uppercase; margin-bottom: 4px; }
.qq-value { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.qq-value sub { font-family: var(--body); font-size: 11px; font-weight: 500; color: var(--mute); vertical-align: baseline; }

/* =========================================================================
   SERVICES (bento grid)
   ========================================================================= */
.services {
  padding: var(--sp-8) 0;
}
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { color: var(--mute); font-size: 17px; max-width: 580px; }

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; }
}

.service {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.service:hover {
  border-color: var(--flag-red);
  background: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Faint hero-image background per card (set via --svc-img); replaces the icon */
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--svc-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.service > * { position: relative; z-index: 1; }
.service-num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--display);
  font-size: 13px;
  color: var(--mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.service-icon {
  width: 48px;
  height: 48px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 56px;
}
.service:hover .service-icon { background: var(--flag-red-soft); border-color: var(--flag-red); }
.service h3 { margin-bottom: 10px; }
.service p { color: var(--mute); font-size: 14px; margin-bottom: 24px; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.service-link::after { content: "→"; transition: transform 0.2s; }
.service:hover .service-link { color: var(--flag-red); }
.service:hover .service-link::after { transform: translateX(3px); }

/* Featured (Auto) — spans larger area */
.service--featured {
  grid-column: 1 / -1;
  background: var(--ink);
  color: white;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 40px;
  border-color: var(--ink);
}
@media (min-width: 640px) {
  .service--featured {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (min-width: 1024px) {
  .service--featured {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    grid-template-rows: 1fr auto;
  }
}
/* On hover the featured card turns white (like the other 4): red outline,
   black title/description, and the nested colors flip to the light scheme. */
.service--featured:hover { background: white; border-color: var(--flag-red); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.service--featured .service-num { color: var(--blue-200); }
.service--featured h3 { color: white; font-size: 2rem; letter-spacing: -0.035em; }
.service--featured p { color: var(--blue-200); font-size: 15px; max-width: 380px; }
.service--featured .service-icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.service--featured .service-link { color: white; }
.service--featured .service-link::after { color: var(--blue-400); }
.service--featured:hover h3 { color: var(--ink); }
.service--featured:hover p { color: var(--ink); }
.service--featured:hover .service-num { color: var(--mute); }
.service--featured:hover .service-icon { background: var(--flag-red-soft); border-color: var(--flag-red); }
.service--featured:hover .service-link,
.service--featured:hover .service-link:hover { color: var(--flag-red); }
.service--featured:hover .service-link::after { color: var(--flag-red); }
.service--featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.service--featured-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.2);
}

/* =========================================================================
   WHY US (numbered stack)
   ========================================================================= */
.why {
  padding: var(--sp-8) 0;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) {
  .why-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
  }
}
.why-points {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.why-point {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.why-point:last-child { border-bottom: 1px solid var(--line); }
.why-point-num {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-600);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.why-point h4 { margin-bottom: 8px; font-size: 1.25rem; }
.why-point p { font-size: 14px; color: var(--mute); }

/* =========================================================================
   STATS
   ========================================================================= */
.stats {
  padding: var(--sp-8) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.stat {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px;
}
.stat-num {
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: 8px;
}
.stat-num small { font-family: var(--body); font-size: 0.4em; font-weight: 600; color: var(--blue-600); margin-left: 4px; vertical-align: super; }
.stat-label { font-size: 14px; color: var(--mute); }
.stat-name { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 16px; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testimonials {
  padding: var(--sp-8) 0;
  background: var(--bg-soft);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.testimonial-stars { color: var(--yellow); letter-spacing: 2px; font-size: 14px; margin-bottom: 14px; }
.testimonial-quote {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.testimonial-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.testimonial-meta { font-size: 12px; color: var(--mute); }

/* =========================================================================
   QUOTE / CTA SECTION
   ========================================================================= */
.cta-final {
  padding: var(--sp-8) 0;
  background: var(--ink);
  color: white;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -5%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle, var(--blue-700) 0%, transparent 60%);
  opacity: 0.4;
}
.cta-final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ink);
  opacity: 0.9;
  pointer-events: none;
}
.cta-final-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .cta-final-inner { grid-template-columns: 1.2fr 1fr; gap: 80px; }
}
.cta-final h2 {
  color: white;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-bottom: 24px;
}
.cta-final h2 .accent {
  background: linear-gradient(135deg, #FF6B6B, var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-final p { font-size: 17px; color: var(--blue-200); max-width: 540px; margin-bottom: 32px; }
.cta-final .btn--primary { background: white; color: var(--ink); box-shadow: 0 24px 48px -16px rgba(255, 255, 255, 0.2); }
.cta-final .btn--primary:hover { background: var(--flag-red); color: #fff; }
/* The quote form's submit sits inside a white card, so the white-on-dark CTA
   treatment above washes it out. Keep it solid blue with white text; red on hover. */
.cta-final .cta-form .btn--primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); }
.cta-final .cta-form .btn--primary:hover { background: var(--flag-red); color: #fff; }

.cta-form {
  background: white;
  border-radius: var(--r-lg);
  padding: 32px;
  color: var(--char);
  box-shadow: var(--shadow-lg);
}
.cta-form-head { margin-bottom: 24px; }
.cta-form-head h3 { color: var(--ink); margin-bottom: 6px; }
/* Contact-page form heading — retagged from h3 to h2 (it follows the page h1
   directly) for a valid outline; this class reproduces the original h3 look. */
.cta-form-head-title { font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -0.02em; margin-bottom: 6px; }
.cta-form-head p { color: var(--mute); font-size: 14px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  background: white;
  transition: border-color 0.18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-600);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
  padding: 72px 0 32px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 32px;
  }
}
.footer-brand-block { max-width: 320px; }
.footer-brand-block p { font-size: 14px; color: var(--mute); margin-top: 20px; margin-bottom: 24px; }
/* Franchise disclosure — sits directly beneath the footer logo, above the
   tagline. Two classes so it outranks `.footer-brand-block p` (0,1,1) on
   specificity, not source order: it must override that rule's 14px font,
   20px top and 24px bottom margins, not inherit them. Subordinate to the
   tagline (12px vs 14px), muted, not bold, not letterspaced, not brand red/navy. */
.footer-brand-block .footer-franchise { font-size: 12px; font-weight: 400; color: var(--mute); margin: 8px 0 0; line-height: 1.35; letter-spacing: 0; }
/* Franchise line sized to span the fixed-width (~199px) footer logo. "UniVista
   Insurance" is bold (see markup), which widens the line, so these sizes are
   tuned on the bold-included text. ES and EN strings differ in length, so each
   language gets its own size to land on the same logo width — intended. */
html[lang="es"] .footer-brand-block .footer-franchise { font-size: 12.96px; }
html[lang="en"] .footer-brand-block .footer-franchise { font-size: 13.4px; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-contact a { font-size: 14px; color: var(--char); font-weight: 500; transition: color 0.18s; }
.footer-contact a:hover { color: var(--flag-red); }
.footer-contact a.big { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
/* Footer social icons — outbound links, muted glyph matching footer link
   colours (var(--mute) -> var(--flag-red) on hover, same 0.18s as other footer
   links). 44x44 box gives the min touch target around a 22px glyph; no hover
   transform, so nothing for prefers-reduced-motion to suppress. */
.footer-social { display: flex; gap: 6px; margin-top: 20px; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--mute);
  transition: color 0.18s;
}
.footer-social a:hover { color: var(--flag-red); }
.footer-social a:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; border-radius: 4px; }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* Footer column heading — retagged from h5 to h2 for a valid outline; this class
   reproduces the original small uppercase label look. */
.footer-heading {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--char); transition: color 0.18s; }
.footer-col a:hover { color: var(--flag-red); }

.footer-foot {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mute);
}
.footer-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mute);
  /* Span the full footer width (no narrow cap) so the line uses the
     available width instead of wrapping early. */
  max-width: none;
  margin-bottom: 20px;
  text-align: center;
}
.footer-license { font-size: 12px; color: var(--mute); }
.phone-hours { font-size: 13px; color: var(--mute); line-height: 1.5; margin-top: 8px; max-width: 380px; }
/* Mobile: center the copyright + license so they match the centered
   disclaimer above (the block is stacked here). Desktop keeps its
   space-between row untouched. */
@media (max-width: 767px) {
  .footer-foot { text-align: center; }
}
@media (min-width: 768px) {
  .footer-foot { flex-direction: row; align-items: center; }
}

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal — applied only when JS is active (class added to <html>),
   so content is always visible without JS. Motion is motivated: it guides
   the eye down the page section by section. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Respect users who prefer reduced motion: drop all entrance/scroll motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   SERVICE / LOCATION PAGES — static content, reuses the homepage design
   system. Only the long-form prose, FAQ, breadcrumb, and link-style
   language toggle are new here.
   ========================================================================= */
/* Language toggle rendered as a link (no JS toggle on static pages) */
.lang-toggle a {
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  color: var(--mute);
  transition: all 0.18s;
}
.lang-toggle a:hover { color: var(--flag-red); }

/* Breadcrumb */
/* Breadcrumb takes over the (now removed) hero eyebrow's look: uppercase, blue.
   Region heroes override the colors to white below for contrast over the photo. */
.breadcrumb { padding: 24px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-600); }
.breadcrumb a { color: var(--mute); }
.breadcrumb a:hover { color: var(--flag-red); }
.breadcrumb .sep { margin: 0 8px; color: var(--blue-400); }
.breadcrumb [aria-current] { color: var(--blue-600); font-weight: 600; }
/* Hide the hero eyebrow site-wide — it duplicated the breadcrumb. Section and
   CTA eyebrows (outside .hero) are unaffected. */
.hero .eyebrow { display: none; }

/* Generic content section + long-form prose */
.page-section { padding: 64px 0; }
.prose { max-width: 760px; }
.prose > * + * { margin-top: 20px; }
.prose p { color: var(--char); font-size: 17px; line-height: 1.75; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.prose li {
  position: relative;
  padding-left: 28px;
  color: var(--char);
  font-size: 16px;
  line-height: 1.6;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue-500);
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--blue-600); font-weight: 500; }
.prose a:hover { color: var(--flag-red); }

/* FAQ */
.faq { max-width: 760px; }
.faq-item { border-top: 1px solid var(--line); padding: 26px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.faq-item p { color: var(--mute); font-size: 16px; line-height: 1.7; }

/* Centered single-column CTA band (service/location pages, no form) */
.cta-final--center .cta-final-inner { grid-template-columns: 1fr; }

/* Legal / long-form static pages (privacy, terms) */
.page-content { max-width: 760px; margin: 0 auto; padding: 64px 0; }
.page-content h1 { font-size: clamp(2.25rem, 4vw, 3rem); margin-bottom: 8px; }
.page-content h2 { font-size: clamp(1.4rem, 2.5vw, 1.875rem); margin-top: 44px; margin-bottom: 12px; }
.page-content p { color: var(--char); font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
.page-content ul { list-style: none; display: grid; gap: 12px; margin: 8px 0 16px; }
.page-content li { position: relative; padding-left: 28px; color: var(--char); font-size: 16px; line-height: 1.6; }
.page-content li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue-500);
}
.page-content a { color: var(--blue-600); font-weight: 500; }
.page-content a:hover { color: var(--flag-red); }
.page-content strong { color: var(--ink); }
/* Click-to-call button used on the thank-you / confirmation pages */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
}
.page-content a.btn-call { background: var(--blue-600); color: #fff; }
.page-content a.btn-call:hover { background: var(--flag-red); color: #fff; }
.page-content .effective-date { color: var(--mute); font-size: 14px; margin-bottom: 32px; }

/* Cookie notice — dismissible, informational (not a consent wall) */
.cookie-notice {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  line-height: 1.5;
}
.cookie-notice__text { margin: 0; max-width: 640px; }
.cookie-notice a { color: #fff; text-decoration: underline; }
.cookie-notice__btn {
  flex: 0 0 auto;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--body);
  font-weight: 600;
  background: #fff;
  color: var(--ink);
  transition: all 0.18s;
}
.cookie-notice__btn:hover { background: var(--flag-red); color: #fff; }
.cookie-notice[hidden] { display: none; }
@media (max-width: 480px) {
  .cookie-notice { flex-direction: column; align-items: flex-start; }
}

/* About page */
.about-grid { display: grid; gap: 40px; }
@media (min-width: 880px) {
  .about-grid { grid-template-columns: 320px 1fr; align-items: start; gap: 56px; }
}
.portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-900));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 72px;
  letter-spacing: -0.03em;
  box-shadow: var(--shadow-lg);
}
.about-license {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  font-size: 14px;
  color: var(--mute);
}
.about-license strong { color: var(--ink); }

/* Contact page */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 880px) {
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; }
}
.contact-list { display: grid; gap: 22px; margin-top: 8px; }
.contact-list .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 4px; }
.contact-list .val { font-size: 18px; color: var(--ink); font-weight: 600; }
.contact-list a.val { transition: color 0.18s; }
.contact-list a.val:hover { color: var(--flag-red); }
.map-embed { margin-top: 40px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 380px; border: 0; display: block; }

/* 404 */
.notfound { padding: 96px 0; text-align: center; }
.notfound .code { font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 12vw, 8rem); color: var(--blue-600); line-height: 1; letter-spacing: -0.04em; }
.notfound p { color: var(--mute); font-size: 18px; margin: 16px auto 32px; max-width: 480px; }
.notfound .nf-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }




/* =========================================================================
   WHATSAPP FLOATING ACTION BUTTON (FAB)
   Own inline SVG glyph — no icon font, no CDN, no third-party widget.
   Markup is hardcoded per page before </body> (language-matched); this is
   the single home for its styling.
   ========================================================================= */
#wa-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(var(--wa-fab-bottom, 1rem) + env(safe-area-inset-bottom));
  z-index: 90;                  /* above content (0-2), below header/menu (100) & cookie notice (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;                  /* exceeds 44px min touch target */
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, bottom .25s ease;
}
#wa-fab svg { width: 30px; height: 30px; fill: currentColor; display: block; }
#wa-fab:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
#wa-fab:focus-visible { outline: 3px solid #128C7E; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #wa-fab { transition: none; }
  #wa-fab:hover { transform: none; }
}

/* FAB vs. cookie notice overlap (responsive-only fix).
   Below 1024px the cookie notice renders as a full-width bottom card that
   would otherwise cover the FAB on first visit. While the notice is visible
   (it drops its [hidden] attr when shown) raise the FAB just above the card's
   top edge; the general-sibling selector reads the notice's own state, so when
   the existing "Entendido" handler sets [hidden] again the rule stops matching
   and the FAB drops back to its 1rem corner (transitioned via `bottom` above).
   Values clear the measured card height per width band (tallest card + a small
   gap). At >=1024px none of these apply, so desktop is untouched: there the
   notice is a centred inset bar and the FAB already sits cleanly beside it.
   Ordered widest -> narrowest so the narrowest matching band wins. */
@media (max-width: 1023px) {
  #cookie-notice:not([hidden]) ~ #wa-fab { --wa-fab-bottom: 6.5rem; }  /* card top ~90px */
}
@media (max-width: 899px) {
  #cookie-notice:not([hidden]) ~ #wa-fab { --wa-fab-bottom: 10rem; }   /* card top ~147px */
}
@media (max-width: 480px) {
  #cookie-notice:not([hidden]) ~ #wa-fab { --wa-fab-bottom: 11.5rem; } /* card top ~168px */
}
@media (max-width: 359px) {
  #cookie-notice:not([hidden]) ~ #wa-fab { --wa-fab-bottom: 13rem; }   /* card top ~189px */
}