/* =====================================================================
   Veterinario a Domicilio Montevideo — hoja de estilos única
   Sin dependencias externas: cero fuentes remotas, cero frameworks.
   Orden: tokens → reset → utilidades → componentes → secciones → media
   ===================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root{
  /* Color — muestreados del logo oficial (assets/logo-*.webp):
     el teal es #016E65 y la tinta del texto #061915. */
  --ink:      #061915;
  --ink-2:    #3B534F;
  /* #6B807C (el gris del logo) da 3.96:1 sobre el fondo crema y no llega a
     AA. Este tono mantiene el matiz y sube a 4.76:1. */
  --muted:    #5F736F;

  --brand:    #016E65;
  --brand-600:#015A53;
  --brand-700:#01463F;
  --brand-50: #E6F3F1;

  --accent:   #F0A202;
  --accent-50:#FFF5E0;

  --wa:       #25D366;
  --wa-600:   #1DA851;

  --bg:       #FFFFFF;
  --bg-soft:  #FBF8F3;
  --line:     #E7E2D9;
  --line-2:   #D8D2C6;

  /* Forma */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Sombra */
  --sh-sm: 0 1px 2px rgba(16,32,30,.06), 0 2px 8px rgba(16,32,30,.05);
  --sh:    0 4px 14px rgba(16,32,30,.07), 0 12px 30px rgba(16,32,30,.06);
  --sh-lg: 0 10px 24px rgba(16,32,30,.10), 0 28px 60px rgba(16,32,30,.10);

  /* Layout */
  --container: 1160px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 78px;
  --topbar-h: 38px;
  --mobilebar-h: 60px;

  /* Tipografía */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  color-scheme: light;
}

/* ── 2. Reset ──────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  margin:0 0 .5em;
  color:var(--ink);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.05rem, 1.35rem + 3.1vw, 3.5rem); }
h2{ font-size:clamp(1.65rem, 1.2rem + 2vw, 2.55rem); }
h3{ font-size:clamp(1.08rem, 1rem + .35vw, 1.25rem); letter-spacing:-.012em; }
p{ margin:0 0 1rem; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
a{ color:var(--brand-600); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; height:auto; display:block; }
button{ font:inherit; }
strong{ color:var(--ink); font-weight:700; }

:where(a,button,summary,input,select):focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

/* Iconos de línea */
.ico{
  width:1.15em; height:1.15em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ── 3. Layout ─────────────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:820px; }

/* Texto corrido de las páginas legales. Los encabezados necesitan aire
   arriba: sin esto quedan pegados al párrafo anterior y no se distingue
   dónde empieza cada apartado. */
.prose h2{ margin-top:2.5em; }
.prose h2:first-of-type{ margin-top:1.75em; }
.prose h2 + p{ margin-top:0; }

.section{ padding:clamp(3.5rem, 2rem + 7vw, 6.5rem) 0; }
.section--alt{ background:var(--bg-soft); border-block:1px solid var(--line); }

.section__head{ max-width:720px; margin:0 auto clamp(2rem,1rem + 3vw,3.25rem); text-align:center; }
.section__sub{ font-size:1.075rem; color:var(--ink-2); }
.section__foot{ margin-top:clamp(2rem,1rem + 3vw,3rem); text-align:center; }

.grid{ display:grid; gap:1.25rem; }
/* Tope de 3 columnas: con auto-fit puro entrarían 4 y los 9 servicios
   quedarían en filas de 4+4+1. */
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(275px, 1fr)); }
@media (min-width:1000px){ .grid--3{ grid-template-columns:repeat(3, 1fr); } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 0 1rem;
  font-size:.8125rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--brand-600);
}
.eyebrow .dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--accent); flex:none;
}
.eyebrow--light{ color:#8CE0D6; }

/* ── 4. Botones ────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.8rem 1.35rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:var(--r-pill);
  font-weight:700; font-size:.975rem; line-height:1.2;
  text-decoration:none; cursor:pointer;
  box-shadow:var(--sh-sm);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:1.2em; height:1.2em; }

.btn--sm{ padding:.55rem 1rem; font-size:.9rem; }
.btn--lg{ padding:1rem 1.75rem; font-size:1.05rem; }
.btn--block{ width:100%; }

/* El texto se mantiene oscuro también en hover: blanco sobre verde WhatsApp
   da ~3.4:1 y no llega a AA para texto de este tamaño. */
.btn--wa{ --btn-bg:var(--wa); --btn-bd:var(--wa); --btn-fg:#08281A; }
.btn--wa:hover{ --btn-bg:var(--wa-600); --btn-bd:var(--wa-600); --btn-fg:#08281A; }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-2); box-shadow:none; }
.btn--ghost:hover{ --btn-bd:var(--brand); --btn-fg:var(--brand-600); }

.btn--dark{ --btn-bg:var(--ink); --btn-bd:var(--ink); }
.btn--light{ --btn-bg:rgba(255,255,255,.1); --btn-bd:rgba(255,255,255,.4); --btn-fg:#fff; }
.btn--light:hover{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }

/* ── 5. Topbar ─────────────────────────────────────────────────────── */
.topbar{ background:var(--brand-700); color:#C2E8E3; font-size:.85rem; }
.topbar__in{
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; min-height:38px; flex-wrap:wrap;
}
.topbar__item{ display:inline-flex; align-items:center; gap:.4rem; }
.topbar__phone{ color:#fff; font-weight:700; }
.topbar__phone:hover{ color:var(--accent); text-decoration:none; }

/* ── 6. Header ─────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:var(--sh-sm); }
.site-header__in{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h);
}

.brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--brand); margin-right:auto; }
.brand:hover{ text-decoration:none; }

/* Logo horizontal completo (header). Alto fijo y ancho automático para
   respetar el ratio 3.42:1 del archivo. */
.brand__logo{ height:56px; width:auto; }

.brand__mark{ width:42px; height:auto; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__txt strong{ font-size:1.02rem; color:var(--ink); letter-spacing:-.02em; }
.brand__txt small{ font-size:.76rem; color:var(--muted); letter-spacing:.11em; text-transform:uppercase; }
.brand--light{ color:#6FD5C9; }
.brand--light .brand__txt strong{ color:#fff; }
.brand--light .brand__txt small{ color:#8FA8A3; }

.nav__list{ display:flex; align-items:center; gap:.25rem; }
.nav__list a{
  display:block; padding:.5rem .7rem;
  color:var(--ink-2); font-size:.94rem; font-weight:600;
  border-radius:var(--r-sm);
}
.nav__list a:hover{ color:var(--brand-600); background:var(--brand-50); text-decoration:none; }
.nav__list a.is-active{ color:var(--brand-600); }

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:10px;
  background:none; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer;
}
.nav-toggle span{
  display:block; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle span + span{ margin-top:5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── 7. Inicio: hero + métricas en la primera pantalla ─────────────── */
/* .intro fija la altura de la primera pantalla (descontando topbar y
   header) y el hero se estira para ocupar lo que sobra, de modo que la
   franja de métricas quede siempre visible al pie, sin scrollear.
   svh (small viewport height) evita el salto por la barra del navegador
   en mobile; vh queda de fallback para navegadores viejos. */
.intro{ display:flex; flex-direction:column; }

/* La primera pantalla se fuerza SOLO si hay alto suficiente para que el
   hero, el formulario y las métricas entren sin apretujarse. Por debajo de
   700px de viewport (ventanas chicas, portátiles de 768px con barra de
   direcciones) forzarlo empujaba la franja de métricas fuera de la pantalla:
   se veía peor que dejarla fluir. */
@media (min-width:1001px) and (min-height:700px){
  .intro{
    min-height:calc(100vh - var(--header-h) - var(--topbar-h));
    min-height:calc(100svh - var(--header-h) - var(--topbar-h));
  }
}
.hero{
  position:relative; overflow:hidden;
  flex:1;
  display:flex; align-items:center;
  padding:clamp(2rem, 1rem + 3vw, 3rem) 0;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(14,124,107,.13), transparent 62%),
    radial-gradient(700px 420px at 4% 8%, rgba(240,162,2,.11), transparent 60%),
    linear-gradient(180deg, #FBF8F3 0%, #FFFFFF 78%);
}
/* El bloque de confianza es hermano del copy (no hijo) para poder sacarlo
   del pliegue en mobile. En desktop vuelve debajo del texto con áreas. */
.hero__in{
  display:grid;
  column-gap:clamp(2rem, 1rem + 4vw, 3.5rem);
  row-gap:1.6rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:
    "copy  card"
    "trust card";
  align-items:center;
}
.hero__copy{ grid-area:copy; }
.hero__in > .trust{ grid-area:trust; }
.hero__card{ grid-area:card; }
.hero h1{ margin-bottom:1.1rem; }
.hero h1 .hl{
  color:var(--brand);
  background:linear-gradient(180deg, transparent 68%, rgba(240,162,2,.35) 68%);
}
.lead{ font-size:clamp(1.08rem, 1rem + .45vw, 1.28rem); color:var(--ink-2); max-width:48ch; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }

.trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .85rem;
  margin:0; padding:0;
  font-size:.9rem; color:var(--muted);
}
.trust li{ display:inline-flex; align-items:center; gap:.35rem; }
/* Separador sutil entre señales, en vez de tres cápsulas con borde */
.trust li + li::before{
  content:""; width:4px; height:4px; margin-right:.5rem;
  border-radius:50%; background:var(--line-2); flex:none;
}
.stars{ color:var(--accent); letter-spacing:.1em; margin:0; }

.hero__card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  padding:clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
}
.hero__card-title{
  font-size:1.15rem; margin-bottom:1.15rem; padding-bottom:.95rem;
  border-bottom:1px solid var(--line);
}

/* Formulario rápido */
.quickform{ display:grid; gap:.8rem; }
.field{ display:grid; gap:.3rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.field label{ font-size:.85rem; font-weight:700; color:var(--ink); }
.field input,.field select{
  width:100%; padding:.7rem .85rem;
  font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--bg-soft);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .18s ease, background-color .18s ease;
}
.field input:focus,.field select:focus{ background:#fff; border-color:var(--brand); outline:none; }
.field input[aria-invalid="true"]{ border-color:#C0392B; background:#FDF1EF; }
.field input::placeholder{ color:#A9B5B2; }
.quickform__note{ margin:0; font-size:.78rem; color:var(--muted); text-align:center; }

/* Pantallas de escritorio bajas (portátiles de 768px y menos, o cualquier
   ventana no maximizada). El min-height del .intro no puede comprimir la
   tarjeta del formulario, así que sin esto la franja de métricas se cae
   por debajo del pliegue. Acá se compacta todo lo que ocupa alto. */
@media (min-width:1001px) and (max-height:900px){
  .hero{ padding:1.5rem 0; }
  .hero h1{ font-size:clamp(2rem, 1.1rem + 2.2vw, 2.9rem); margin-bottom:.8rem; }
  .lead{ font-size:1.05rem; }
  .hero__cta{ margin-top:1.35rem; }
  .hero__in{ row-gap:1.1rem; }

  .hero__card{ padding:1.35rem; }
  .hero__card-title{ font-size:1.05rem; margin-bottom:.85rem; padding-bottom:.7rem; }
  .quickform{ gap:.6rem; }
  .field-row{ gap:.6rem; }
  .field label{ font-size:.8rem; }
  .field input,.field select{ padding:.55rem .75rem; font-size:.9rem; }
  .btn--block{ padding:.7rem 1.35rem; }
  .quickform__note{ font-size:.74rem; }

  .stats__in{ padding-block:1.1rem; gap:1rem; }
  .stat__n{ font-size:1.9rem; }
  .stat__l{ font-size:.82rem; }
}

/* ── 8. Métricas ───────────────────────────────────────────────────── */
.stats{ background:var(--brand-700); color:#C2E8E3; }
.stats__in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.25rem;
  /* Compacto a propósito: comparte la primera pantalla con el hero. */
  padding-block:clamp(1.35rem, 1rem + 1.4vw, 2rem);
  text-align:center;
}
.stat__n{
  display:block;
  font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); font-weight:800;
  color:#fff; letter-spacing:-.03em; line-height:1;
}
.stat__l{ display:block; margin-top:.35rem; font-size:.875rem; }

/* ── 9. Cards de servicio ──────────────────────────────────────────── */
.card{
  padding:1.6rem 1.5rem;
  background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--brand-50); }
.card__ico{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:1rem;
  background:var(--brand-50); color:var(--brand); border-radius:14px;
}
.card__ico svg{
  width:26px; height:26px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.card p{ font-size:.955rem; margin:0; }
.card--soft .card__ico{ background:var(--accent-50); color:#B87700; }

/* ── 10. Split (texto + imagen) ────────────────────────────────────── */
.split{
  display:grid; gap:clamp(2rem,1rem + 4vw,4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.split--rev .split__media{ order:-1; }
.split__media{ margin:0; }
.split__media--sm{ max-width:340px; margin-inline:auto; }
.split__media figcaption{ margin-top:.85rem; font-size:.85rem; color:var(--muted); text-align:center; }
.illus{ width:100%; border-radius:var(--r-lg); box-shadow:var(--sh); }
.illus--round{ border-radius:50%; }

.checks{ display:grid; gap:.7rem; margin-top:1.5rem; }
.checks li{ position:relative; padding-left:2rem; font-size:.97rem; }
.checks li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

.vet__role{
  display:inline-block; margin-bottom:1rem; padding:.35rem .85rem;
  background:var(--brand-50); color:var(--brand-600);
  border-radius:var(--r-pill); font-size:.875rem; font-weight:700;
}
.creds{ display:grid; gap:.6rem; margin:1.5rem 0 1.75rem; }
.creds li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; }
.creds .ico{ color:var(--wa-600); margin-top:.28em; }

/* ── 11. Pasos ─────────────────────────────────────────────────────── */
.steps{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  counter-reset:step;
}
.step{
  position:relative;
  padding:2.25rem 1.5rem 1.6rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.step__n{
  position:absolute; top:-22px; left:1.5rem;
  display:grid; place-items:center;
  width:44px; height:44px;
  background:var(--brand); color:#fff;
  border:4px solid #fff; border-radius:50%;
  font-weight:800; font-size:1.05rem;
  box-shadow:var(--sh-sm);
}
.step p{ font-size:.955rem; margin:0; }
.steps{ margin-top:2rem; }

/* ── 12. Precios ───────────────────────────────────────────────────── */
.pricing{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
  align-items:start;
}
.price{
  position:relative;
  padding:1.75rem 1.6rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.price--feat{
  border:2px solid var(--brand);
  box-shadow:var(--sh-lg);
}
.price__tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:.28rem .9rem;
  background:var(--accent); color:#3A2600;
  border-radius:var(--r-pill);
  font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.price__v{
  margin:.35rem 0 .75rem;
  font-size:2.15rem; font-weight:800; color:var(--brand);
  letter-spacing:-.03em; line-height:1;
}
.price__d{ font-size:.94rem; }
.price__list{ display:grid; gap:.5rem; margin:1.1rem 0; padding-top:1.1rem; border-top:1px solid var(--line); }
.price__list li{ position:relative; padding-left:1.5rem; font-size:.9rem; }
.price__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.pricing__note{
  max-width:760px; margin:2rem auto 0;
  font-size:.875rem; color:var(--muted); text-align:center;
}

/* ── 13. Zonas ─────────────────────────────────────────────────────── */
/* Lista única de barrios, en columnas que fluyen según el ancho */
.barrios{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:.6rem 1.25rem;
  padding:clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.barrios li{ position:relative; padding-left:1.15rem; font-size:.95rem; }
.barrios li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}

/* ── 14. Testimonios ───────────────────────────────────────────────── */
.quote{
  margin:0; padding:1.6rem 1.5rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.quote > p:nth-of-type(2){ font-size:.97rem; color:var(--ink-2); }
.quote footer{ display:flex; flex-direction:column; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.quote footer strong{ font-size:.94rem; }
.quote footer span{ font-size:.85rem; color:var(--muted); }

/* ── 15. FAQ ───────────────────────────────────────────────────────── */
.faq{ display:grid; gap:.75rem; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
.faq__item[open]{ border-color:var(--brand-50); box-shadow:var(--sh); }
.faq__item summary{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.35rem;
  cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary h3{
  margin:0; flex:1;
  font-size:1.02rem; font-weight:700;
}
.faq__item summary::after{
  content:""; flex:none;
  width:1.5rem; height:1.5rem;
  background:var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C6B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/.9rem no-repeat;
  border-radius:50%;
  transition:transform .25s ease;
}
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__item summary:hover h3{ color:var(--brand-600); }
.faq__a{ padding:0 1.35rem 1.25rem; }
.faq__a p{ font-size:.955rem; margin:0; }

/* ── 16. CTA final ─────────────────────────────────────────────────── */
.cta{
  position:relative;
  padding:clamp(3.5rem,2rem + 6vw,5.5rem) 0;
  background:
    radial-gradient(700px 380px at 15% 0%, rgba(240,162,2,.16), transparent 60%),
    linear-gradient(135deg, var(--brand-700) 0%, #012E29 100%);
  color:#C2E8E3; text-align:center;
}
.cta__in{ max-width:720px; }
.cta h2{ color:#fff; }
.cta p{ font-size:1.075rem; }
.cta__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.75rem; }
.cta__micro{ margin-top:1.25rem; font-size:.875rem; color:#79BDB4; }

/* ── 17. Footer ────────────────────────────────────────────────────── */
.footer{ background:var(--ink); color:#9BB0AC; font-size:.925rem; }
.footer a{ color:#C7D5D2; }
.footer a:hover{ color:#fff; }
.footer__in{
  display:grid; gap:2.25rem;
  grid-template-columns:1.6fr 1fr 1fr 1.15fr;
  padding-block:clamp(2.75rem,2rem + 3vw,4rem);
}
.footer__desc{ margin-top:1rem; font-size:.9rem; max-width:38ch; }
.footer__t{ margin-bottom:1rem; font-size:.85rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.footer__col ul{ display:grid; gap:.15rem; }
.footer__col li{ font-size:.9rem; }
/* Área táctil de al menos 24px de alto (WCAG 2.5.8): con solo el texto
   los enlaces quedaban en 20px y son difíciles de acertar en mobile. */
.footer__col li a{ display:inline-block; padding-block:.3rem; }
.footer__social{ display:flex; gap:.6rem; margin-top:1.25rem; }
.footer__social a{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid #2A3D3A; border-radius:50%;
  color:#9BB0AC;
}
.footer__social a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.footer__social .ico{ width:19px; height:19px; }
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem;
  /* El padding inferior extra evita que el botón flotante de WhatsApp
     tape los enlaces legales cuando el usuario llega al final. */
  padding-top:1.25rem;
  padding-bottom:5.5rem;
  border-top:1px solid #22322F;
  font-size:.82rem;
}
.footer__bottom p{ margin:0; }

/* ── 18. CTA flotantes ─────────────────────────────────────────────── */
.fab{
  position:fixed; right:18px; bottom:20px; z-index:70;
  display:flex; align-items:center; gap:.6rem;
  color:#fff;
}
/* Aparece recién al dejar la primera pantalla: sobre el hero tapaba las
   métricas y duplicaba el CTA de WhatsApp que ya está ahí arriba.
   El prefijo .js mantiene el botón visible si el JS no llega a correr. */
.js .fab{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.js .fab.is-shown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
}
.fab:hover{ text-decoration:none; }
.fab__bubble{
  padding:.55rem .9rem;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.875rem; font-weight:700; white-space:nowrap;
  box-shadow:var(--sh);
}
.fab__ico{
  position:relative;
  display:grid; place-items:center;
  width:58px; height:58px;
  background:var(--wa); border-radius:50%;
  box-shadow:0 8px 22px rgba(37,211,102,.42);
  transition:transform .2s ease;
}
.fab:hover .fab__ico{ transform:scale(1.07); }
.fab__ico svg{
  width:29px; height:29px;
  fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.fab__ico::after{
  content:""; position:absolute; inset:0;
  border-radius:50%; border:2px solid var(--wa);
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
  pointer-events:none;
}
@keyframes ping{ 0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(1.7);opacity:0} }

.mobile-bar{ display:none; }

/* ── 19. Animación de aparición ────────────────────────────────────── */
/* Se ocultan SOLO si el JS está vivo (clase .js puesta en el <head>).
   Sin JS, el contenido se ve normal: nada queda invisible. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* ── 20. Responsive ────────────────────────────────────────────────── */
@media (max-width:1000px){
  /* Apilado, el conjunto ya no entra en una pantalla: el 100vh de mobile lo
     define .hero__copy más abajo, no el .intro. */
  .hero{ padding-bottom:2.5rem; }
  .hero__in{
    grid-template-columns:1fr;
    grid-template-areas: "copy" "trust" "card";
  }

  /* La primera pantalla llega hasta el botón de WhatsApp: el copy ocupa el
     alto útil (descontando topbar, header, el padding del hero y la barra
     fija de contacto) y el resto queda debajo del pliegue.

     dvh y no svh: svh usa el alto MÍNIMO del viewport, así que al ocultarse
     la barra de direcciones del navegador la pantalla crecía y el bloque
     dejaba de llenarla. dvh se recalcula en vivo y siempre llena.
     vh queda de fallback para navegadores sin soporte. */
  .hero__copy{
    display:flex; flex-direction:column; justify-content:center;
    min-height:calc(100vh  - var(--header-h) - var(--topbar-h) - var(--mobilebar-h) - 3.25rem);
    min-height:calc(100dvh - var(--header-h) - var(--topbar-h) - var(--mobilebar-h) - 3.25rem);
  }

  /* Apilado el texto queda centrado: alineado a la izquierda dejaba un
     bloque angosto pegado a un borde, con mucho aire desbalanceado. */
  .hero__copy{ text-align:center; align-items:center; }
  .hero h1{
    font-size:clamp(2.5rem, 1.65rem + 3.6vw, 3.4rem);
    letter-spacing:-.03em;
    line-height:1.08;
  }
  .lead{ max-width:34ch; margin-inline:auto; }
  .hero__cta{ justify-content:center; width:100%; }
  .hero__in > .trust{ justify-content:center; }

  .hero__card{ max-width:520px; margin-inline:auto; }
  .split, .split--rev{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .footer__in{ grid-template-columns:1fr 1fr; }
  .footer__col--brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .topbar__item--hide{ display:none; }

  .nav-toggle{ display:block; }
  .site-header__cta{ display:none; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    display:none;
    padding:.75rem var(--gutter) 1.25rem;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:var(--sh);
  }
  .nav.is-open{ display:block; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav__list a{ padding:.8rem .75rem; font-size:1rem; }

  .cta{ padding-bottom:calc(clamp(3.5rem,2rem + 6vw,5.5rem) + 60px); }
  /* Sin FAB en mobile, solo hay que esquivar la barra fija. */
  .footer__bottom{ padding-bottom:calc(1.5rem + var(--mobilebar-h)); }

  /* Barra fija de contacto en mobile */
  .mobile-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:75;
    display:grid; grid-template-columns:1fr;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(16,32,30,.10);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:1rem .5rem;
    color:var(--ink); font-weight:700; font-size:.95rem;
  }
  .mobile-bar a:hover{ text-decoration:none; }
  .mobile-bar__wa{ background:var(--wa); color:#08281A !important; }

  /* En mobile la barra fija ya ofrece WhatsApp: el FAB sería un segundo
     botón para lo mismo, y encima tapaba el primer campo del formulario. */
  .fab{ display:none; }
}

@media (max-width:560px){
  /* El topbar tiene que entrar en una sola línea: dejamos solo el teléfono. */
  .topbar__item:not(.topbar__phone){ display:none; }

  /* Al hacer wrap, el separador quedaba huérfano al principio de la línea. */
  .trust{ gap:.35rem 1rem; }
  .trust li + li::before{ display:none; }

  .field-row{ grid-template-columns:1fr; }
  .barrios{ grid-template-columns:1fr 1fr; gap:.5rem .75rem; }
  .barrios li{ font-size:.9rem; }
  .hero__cta .btn{ width:100%; }
  .cta__btns .btn{ width:100%; }
  .footer__in{ grid-template-columns:1fr; gap:1.75rem; }
  /* Tres métricas en dos columnas dejaban la última suelta a la izquierda. */
  .stats__in{ grid-template-columns:repeat(3, 1fr); gap:.75rem; }
  .stat__n{ font-size:1.6rem; }
  .stat__l{ font-size:.75rem; line-height:1.35; }
}

/* ── 21. Accesibilidad y print ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

@media print{
  .topbar,.site-header,.fab,.mobile-bar,.hero__card,.section__foot{ display:none !important; }
  body{ color:#000; }
  .cta,.stats,.footer{ background:#fff !important; color:#000 !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}