/* ==========================================================================
   VETERINARIA — Veterinaria y peluquería canina · tu zona
   --------------------------------------------------------------------------
   PLAN DE DIRECCIÓN DE ARTE (decidido antes de escribir CSS)
   1. COLOR   verde moño #167A5E (foto del perrito blanco con moño verde),
              verde profundo #0C3F33 (la sombra de ese mismo moño), oro #F2B632
              (los moños de glitter dorado del caniche negro y del gato),
              blanco pelo #FBFAF6 (el pelaje recién peinado), estuco #ECE8DD
              (la pared rugosa del local) y tinta #0F2A24 para el texto.
   2. TIPO    Bricolage Grotesque (titulares: pesada, con "hombros", simpática
              sin ser infantil) + Figtree (texto: redonda, legible en celular).
   3. LAYOUT  Bandas de ancho completo que alternan verde profundo, blanco pelo
              y estuco; filas con filetes en vez de cajas; sólo las reseñas,
              la calculadora y los formularios son "objetos" con borde.
   4. GOLPE   El hero: titular enorme en dos bloques y la foto del perrito del
              moño verde a sangre por la derecha, saliéndose del contenedor.
              Todo lo demás queda quieto alrededor.
   ========================================================================== */

:root{
  /* ---- color (todo sale de las fotos) ---- */
  --c-ink:#0F2A24;
  --c-ink-2:#3E554E;
  --c-verde:#167A5E;
  --c-verde-osc:#0C3F33;
  --c-oro:#F2B632;
  --c-pelo:#FBFAF6;
  --c-estuco:#ECE8DD;
  --c-error:#B3261E;            /* rojo de la mesa de la peluquería, oscurecido para AA */
  --c-pelo-80:rgb(251 250 246 / .8);
  --c-pelo-20:rgb(251 250 246 / .22);
  --c-ink-16:rgb(15 42 36 / .16);
  --c-ink-90:rgb(15 42 36 / .9);
  --c-oro-glow:rgb(242 182 50 / .4);
  --c-ink-sombra:rgb(15 42 36 / .14);

  /* ---- espaciado (única escala) ---- */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px;
  --s48:48px; --s64:64px; --s96:96px; --s128:128px;
  --gutter:20px;
  --sec-y:var(--s64);
  --hdr-h:calc(var(--s64) + var(--s12));

  /* ---- tipografía ---- */
  --f-title:"Bricolage Grotesque","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-text:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fs-0:.8rem; --fs-1:.9rem; --fs-2:1rem; --fs-3:1.15rem;
  --fs-4:1.4rem; --fs-5:1.75rem; --fs-6:2.25rem; --fs-7:3rem;
  --fs-8:4.5rem;                /* display: sólo el h1 del hero (el golpe) */

  /* ---- forma ---- */
  --r-card:24px;
  --r-btn:14px;
  --bw:1px;
  --sh-1:0 1px 2px var(--c-ink-sombra), 0 8px 24px var(--c-ink-sombra);
  --sh-2:0 16px 40px var(--c-ink-sombra), 0 0 0 4px var(--c-oro-glow);
  --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--s96)}
body{margin:0;font-family:var(--f-text);font-size:var(--fs-2);line-height:1.6;color:var(--c-ink);background:var(--c-pelo);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3{font-family:var(--f-title);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(var(--fs-6),5.4vw,var(--fs-8))}
h2{font-size:clamp(var(--fs-5),5vw,var(--fs-7))}
h3{font-size:var(--fs-4);line-height:1.15}
p{margin:0 0 var(--s16);max-width:65ch}
ul,ol{margin:0;padding:0}
.lead{font-size:var(--fs-3);line-height:1.55}
.eyebrow{font:700 var(--fs-1)/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--s16);max-width:none;display:flex;align-items:center;gap:var(--s8)}
.muted{color:var(--c-ink-2)}
.small{font-size:var(--fs-1)}
:focus-visible{outline:3px solid var(--c-ink);outline-offset:3px;border-radius:var(--s4)}
.bg-dark :focus-visible,.hdr :focus-visible,.foot :focus-visible,.nav :focus-visible{outline-color:var(--c-oro)}
.skip{position:absolute;left:var(--s16);top:calc(var(--s48) * -2);background:var(--c-oro);color:var(--c-ink);padding:var(--s12) var(--s16);border-radius:var(--r-btn);font-weight:700;z-index:100}
.skip:focus{top:var(--s16)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.lock{overflow:hidden}

/* ---------- íconos ---------- */
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor;stroke:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y);position:relative;overflow-x:clip}
.bg-pelo{background:var(--c-pelo);color:var(--c-ink)}
.bg-estuco{background:var(--c-estuco);color:var(--c-ink)}
.bg-dark{background:var(--c-verde-osc);color:var(--c-pelo)}
.bg-dark p,.bg-dark .muted{color:var(--c-pelo-80)}
.sec-head{display:grid;gap:var(--s16);margin-bottom:var(--s48)}
.sec-head p{margin:0}
.grid-2{display:grid;gap:var(--s32);align-items:center}
@media(min-width:900px){
  :root{--sec-y:var(--s96)}
  .grid-2{grid-template-columns:1fr 1fr;gap:var(--s64)}
  .grid-2.flip>:first-child{order:2}
}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);min-height:var(--s48);padding:var(--s12) var(--s24);border-radius:var(--r-btn);border:2px solid transparent;font:700 var(--fs-2)/1.1 var(--f-text);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:center}
.btn-wa{background:var(--c-oro);color:var(--c-ink);border-color:var(--c-ink)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-sm{min-height:var(--s48);padding:var(--s8) var(--s16);font-size:var(--fs-1)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s12);align-items:center}
.btns .note{flex-basis:100%;margin:0;font-size:var(--fs-1)}

/* ---------- placeholders ("FALTA") ---------- */
.falta{display:inline-block;border:2px dashed currentColor;border-radius:var(--r-btn);padding:var(--s4) var(--s12);font-size:var(--fs-1);font-weight:600;line-height:1.4;background:transparent}
.falta::before{content:"A completar: ";font-weight:800}
.ph-hole{display:grid;place-content:center;gap:var(--s8);text-align:center;min-height:var(--s128);padding:var(--s24);border:2px dashed currentColor;border-radius:var(--r-card);font-size:var(--fs-1);font-weight:600;width:100%}
.ph-hole b{font-size:var(--fs-2)}
.ph-hole span{max-width:40ch;margin-inline:auto}

/* ---------- fotos ---------- */
.ph{margin:0;border-radius:var(--r-card);overflow:hidden;position:relative;background:var(--c-estuco)}
.ph img{width:100%;height:100%;object-fit:cover}
.ar-34{aspect-ratio:3/4}.ar-11{aspect-ratio:1/1}.ar-43{aspect-ratio:4/3}.ar-32{aspect-ratio:3/2}
.ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s48) var(--s16) var(--s12);background:linear-gradient(to top,var(--c-ink-90),transparent);color:var(--c-pelo);font-size:var(--fs-1);font-weight:600}

/* ---------- cards (sólo donde hace falta un objeto) ---------- */
.card{background:var(--c-pelo);color:var(--c-ink);border:2px solid var(--c-ink-16);border-radius:var(--r-card);padding:var(--s24);box-shadow:var(--sh-1);transition:transform .2s,border-color .2s,box-shadow .2s}
.bg-pelo .card{background:var(--c-estuco)}
.card:hover,.card.visible:hover{transform:translateY(calc(var(--s4) * -1));border-color:var(--c-oro);box-shadow:var(--sh-2)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr-h);color:var(--c-pelo)}
.hdr-bg{position:absolute;inset:0;background:var(--c-ink-90);-webkit-backdrop-filter:blur(var(--s12));backdrop-filter:blur(var(--s12));opacity:0;transform:translateY(0);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.hdr.scrolled .hdr-bg{opacity:1;transform:translateY(calc(var(--s12) * -1))}
.hdr-in{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.logo,.hdr-cta,.nav-list{transition:transform .3s var(--ease)}
.hdr.scrolled .logo,.hdr.scrolled .hdr-cta{transform:translateY(calc(var(--s4) * -1.5))}
.logo{display:inline-flex;align-items:center;gap:var(--s8);text-decoration:none;font:800 var(--fs-3)/1 var(--f-title);letter-spacing:-.01em;white-space:nowrap}
.logo .i{width:var(--s32);height:var(--s32);color:var(--c-oro)}
.logo b{font-weight:800;color:var(--c-oro)}
.logo-mark{display:grid;place-items:center;width:var(--s48);height:var(--s48);border-radius:var(--r-btn);background:var(--c-verde)}
.logo-mark .i{width:var(--s24);height:var(--s24);color:var(--c-pelo)}
.nav-list{list-style:none;display:flex;gap:var(--s4)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:var(--s48);padding:var(--s8) var(--s12);text-decoration:none;font-weight:600;font-size:var(--fs-1)}
.nav-list a::after{content:"";position:absolute;left:var(--s12);right:var(--s12);bottom:var(--s8);height:3px;background:var(--c-oro);border-radius:var(--s4);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:800}
.hdr-cta{display:none;align-items:center;gap:var(--s8)}
.hdr-call{display:inline-grid;place-items:center;width:var(--s48);height:var(--s48);border-radius:var(--r-btn);border:2px solid var(--c-pelo-20);color:var(--c-pelo)}
.hdr-call:hover{border-color:var(--c-pelo)}
.burger,.nav-close{display:inline-grid;place-items:center;width:var(--s48);height:var(--s48);border-radius:var(--r-btn);border:2px solid var(--c-pelo-20);background:transparent;color:var(--c-pelo);cursor:pointer}
.burger .i,.nav-close .i{width:var(--s24);height:var(--s24)}

/* menú mobile = panel completo */
.nav{position:fixed;inset:0;z-index:10;background:var(--c-ink);color:var(--c-pelo);padding:var(--s16) var(--gutter) var(--s32);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s24);visibility:hidden;opacity:0;transform:translateY(calc(var(--s16) * -1));transition:opacity .3s,transform .3s var(--ease),visibility 0s .3s}
.nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .3s var(--ease),visibility 0s}
.nav-top{display:flex;justify-content:space-between;align-items:center;min-height:var(--s48)}
.nav-list{flex-direction:column;gap:0}
.nav-list li{border-bottom:var(--bw) solid var(--c-pelo-20)}
.nav-list a{width:100%;font:800 var(--fs-5)/1.1 var(--f-title);padding:var(--s16) 0}
.nav-list a::after{left:0;right:auto;width:var(--s48);bottom:var(--s8)}
.nav-cta{display:flex;flex-wrap:wrap;gap:var(--s12)}
.nav-cta .btn{flex:1 1 auto}
.nav-hours{font-size:var(--fs-1);color:var(--c-pelo-80);margin:0}
@media(min-width:961px){
  .burger,.nav-close,.nav-top,.nav-cta,.nav-hours{display:none}
  .hdr-cta{display:flex}
  .nav{position:static;inset:auto;z-index:auto;background:transparent;padding:0;overflow:visible;flex-direction:row;visibility:visible;opacity:1;transform:none;transition:none}
  .nav-list{flex-direction:row}
  .nav-list li{border:0}
  .nav-list a{width:auto;font:600 var(--fs-1)/1 var(--f-text);padding:var(--s8) var(--s12)}
  .nav-list a[aria-current="page"]{font-weight:800}
  .nav-list a::after{left:var(--s12);right:var(--s12);width:auto}
  .hdr.scrolled .nav-list{transform:translateY(calc(var(--s4) * -1.5))}
}
@media(min-width:961px) and (max-width:1100px){.nav a{padding-inline:var(--s8)}.hdr-wa-txt{display:none}}

/* barra de progreso de lectura */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:var(--c-verde);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ==========================================================================
   HERO (el golpe) y cabeceras de página
   ========================================================================== */
.hero,.page-head{background:var(--c-verde-osc);color:var(--c-pelo);position:relative;overflow-x:clip}
.hero{padding-top:calc(var(--hdr-h) + var(--s32))}
.hero-copy{padding-bottom:var(--s48)}
.hero h1{margin-bottom:var(--s24)}
.hero h1 em,.page-head h1 em{font-style:normal;background:var(--c-verde);padding:0 var(--s8);border-radius:var(--s8);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lead{margin-bottom:var(--s32);color:var(--c-pelo-80)}
.hero-ph{position:relative;margin:0 calc(var(--gutter) * -1);aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0}
.hero-ph .px{position:absolute;inset:-8% 0;will-change:transform}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.status{display:inline-flex;align-items:center;gap:var(--s8);margin-top:var(--s24);padding:var(--s8) var(--s16);border:2px solid var(--c-pelo-20);border-radius:var(--r-btn);font-size:var(--fs-1);font-weight:600}
.status::before{content:"";width:var(--s12);height:var(--s12);border-radius:50%;background:var(--c-pelo-80)}
.status.is-open::before{background:var(--c-oro)}
.bg-pelo .status,.bg-estuco .status{border-color:var(--c-ink-16)}
.bg-pelo .status.is-open::before,.bg-estuco .status.is-open::before{background:var(--c-verde)}
@media(min-width:900px){
  .hero{min-height:40rem;padding-bottom:0}
  .hero .wrap{position:static}
  .hero-copy{width:50%;padding-right:var(--s32);padding-bottom:var(--s96);padding-top:var(--s32)}
  .hero-ph{position:absolute;left:calc(50% + var(--s32));right:0;top:var(--hdr-h);bottom:0;margin:0;aspect-ratio:auto;border-radius:var(--r-card) 0 0 0}
}
.page-head{padding:calc(var(--hdr-h) + var(--s48)) 0 var(--s64)}
.page-head h1{max-width:18ch;font-size:clamp(var(--fs-6),6vw,var(--fs-7));margin-bottom:var(--s24)}
.page-head .lead{max-width:56ch;color:var(--c-pelo-80);margin-bottom:var(--s24)}
@media(min-width:900px){.page-head{padding-bottom:var(--s96)}.page-head h1{max-width:22ch}}

/* ---------- marquee ---------- */
.marq{background:var(--c-verde);color:var(--c-pelo);overflow:hidden;padding-block:var(--s16);font:800 var(--fs-3)/1 var(--f-title);position:relative}
.marq-track{display:flex;flex-wrap:wrap;gap:var(--s16) var(--s32);width:100%;padding-inline:var(--gutter)}
.js .marq-track{flex-wrap:nowrap;width:max-content;padding-inline:0;gap:0;animation:marq var(--dur,40s) linear infinite}
.js .marq-item{margin-right:var(--s32)}
.js .marq:hover .marq-track{animation-play-state:paused}
.marq-item{display:inline-flex;align-items:center;gap:var(--s32);white-space:nowrap}
.marq-item .i{width:var(--s24);height:var(--s24);color:var(--c-pelo)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- tira de números ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s32) var(--s24);list-style:none}
.stat{border-left:3px solid var(--c-verde);padding-left:var(--s16)}
.stat-n{display:block;font:800 clamp(var(--fs-6),9vw,var(--fs-7))/1 var(--f-title);letter-spacing:-.03em;color:var(--c-verde);font-variant-numeric:tabular-nums}
.stat-t{display:block;margin-top:var(--s8);font-size:var(--fs-1);color:var(--c-ink-2);font-weight:600;line-height:1.35}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- filas de servicios (sin cajas) ---------- */
.rows{list-style:none;border-bottom:var(--bw) solid var(--c-ink-16)}
.row{display:grid;grid-template-columns:var(--s48) 1fr;gap:var(--s8) var(--s16);padding-block:var(--s24);border-top:var(--bw) solid var(--c-ink-16)}
.row-n{font:800 var(--fs-4)/1.1 var(--f-title);color:var(--c-verde)}
.row h3{grid-column:2}
.row p{grid-column:2;margin:0;color:var(--c-ink-2)}
.row .more{grid-column:2;font-weight:700;color:var(--c-verde);text-decoration:none;display:inline-flex;gap:var(--s8);align-items:center;min-height:var(--s48)}
.row .more:hover{text-decoration:underline}
.row .more .i{width:var(--s16);height:var(--s16)}
.bg-dark .row,.bg-dark .rows{border-color:var(--c-pelo-20)}
.bg-dark .row-n{color:var(--c-oro)}
.bg-dark .row p{color:var(--c-pelo-80)}
@media(min-width:760px){
  .row{grid-template-columns:var(--s64) minmax(0,.8fr) minmax(0,1.2fr) auto;align-items:baseline;gap:var(--s24)}
  .row h3,.row p,.row .more{grid-column:auto}
  .row .more{grid-column:4}
}

/* ---------- listas con ticks ---------- */
.ticks{list-style:none;display:grid;gap:var(--s12)}
.ticks li{display:grid;grid-template-columns:var(--s24) 1fr;gap:var(--s12);align-items:start}
.ticks .i{width:var(--s24);height:var(--s24);color:var(--c-verde);margin-top:var(--s4)}
.bg-dark .ticks .i{color:var(--c-oro)}
.nos .i{color:var(--c-error)}
.cols-2{display:grid;gap:var(--s24)}
@media(min-width:760px){.cols-2{grid-template-columns:1fr 1fr;gap:var(--s32)}}
.cols-3{display:grid;gap:var(--s24)}
@media(min-width:760px){.cols-3{grid-template-columns:repeat(3,1fr)}}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16)}
.gal .wide{grid-column:1 / -1}
@media(min-width:900px){.gal{grid-template-columns:repeat(3,1fr)}.gal .wide{grid-column:auto}}

/* ---------- calculadora de vacunas ---------- */
.vac{display:grid;gap:var(--s24)}
.vac form{display:grid;gap:var(--s16)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);border:0;padding:0;margin:0}
.seg legend{font-weight:700;padding:0;margin-bottom:var(--s8)}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.seg span{display:flex;align-items:center;justify-content:center;gap:var(--s8);min-height:var(--s48);border:2px solid var(--c-ink-2);border-radius:var(--r-btn);font-weight:700;background:var(--c-pelo);color:var(--c-ink)}
.seg input:checked + span{background:var(--c-verde-osc);border-color:var(--c-verde-osc);color:var(--c-pelo)}
.seg input:focus-visible + span{outline:3px solid var(--c-ink);outline-offset:3px}
.age{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
.vac-res{border-top:var(--bw) solid var(--c-ink-16);padding-top:var(--s24)}
.vac-res[hidden]{display:none}
.vac-now{background:var(--c-verde-osc);color:var(--c-pelo);border-radius:var(--r-card);padding:var(--s24);margin-bottom:var(--s24)}
.vac-now h3{margin-bottom:var(--s12)}
.vac-now p{color:var(--c-pelo-80)}
.vac-now li{margin-bottom:var(--s8)}
.vac-next{list-style:none;display:grid;gap:var(--s16);margin-bottom:var(--s24)}
.vac-next li{display:grid;grid-template-columns:var(--s12) 1fr;gap:var(--s16);align-items:start}
.vac-next li::before{content:"";width:var(--s12);height:var(--s12);margin-top:var(--s8);border-radius:50%;background:var(--c-verde)}
.vac-note{font-size:var(--fs-1);color:var(--c-ink-2)}

/* ---------- tabla de calendario ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-1)}
.tbl caption{text-align:left;font:800 var(--fs-4)/1.2 var(--f-title);padding-bottom:var(--s16)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:var(--s12) var(--s12) var(--s12) 0;border-top:var(--bw) solid var(--c-ink-16)}
.tbl thead th{font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.tbl td:first-child{font-weight:800;white-space:nowrap}
.tbl-wrap{overflow-x:auto}
.tbl-wrap .tbl{min-width:34rem}

/* ---------- reseñas ---------- */
.rev-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16) var(--s32);margin-bottom:var(--s32)}
.rev-avg{display:flex;align-items:center;gap:var(--s16)}
.rev-num{font:800 var(--fs-7)/1 var(--f-title);color:var(--c-verde);font-variant-numeric:tabular-nums}
.stars{display:inline-flex;gap:var(--s4);color:var(--c-verde)}
.stars .i{width:var(--s16);height:var(--s16)}
.rev-scroller{display:flex;gap:var(--s24);overflow-x:auto;overflow-y:hidden;padding:var(--s12) max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter))) var(--s48);margin:0 0 calc(var(--s32) * -1);scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab}
.rev-scroller::-webkit-scrollbar{display:none}
.rev-scroller.drag{cursor:grabbing;user-select:none}
.rev{flex:0 0 min(86vw,24rem);display:flex;flex-direction:column;gap:var(--s12);margin:0}
.rev-head{display:flex;align-items:center;gap:var(--s12)}
.rev-av{display:grid;place-items:center;flex:none;width:var(--s48);height:var(--s48);border-radius:50%;background:var(--c-verde-osc);color:var(--c-pelo);font:800 var(--fs-3)/1 var(--f-title)}
.rev-name{font-weight:800;line-height:1.2;display:block}
.rev-date{font-size:var(--fs-0);color:var(--c-ink-2)}
.rev blockquote{margin:0}
.rev blockquote p{margin:0;font-size:var(--fs-1);line-height:1.55}
.rev-more{background:none;border:0;padding:var(--s8) 0;margin-top:var(--s4);font:700 var(--fs-1)/1 var(--f-text);color:var(--c-verde);cursor:pointer;text-decoration:underline;min-height:var(--s48);align-self:flex-start}
.rev-reply{margin:var(--s8) 0 0 var(--s16);padding:var(--s12) var(--s16);background:var(--c-pelo);border-left:3px solid var(--c-verde);border-radius:0 var(--r-btn) var(--r-btn) 0;font-size:var(--fs-1)}
.rev-reply b{display:block;font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2);margin-bottom:var(--s4)}
.rev-reply p{margin:0;font-size:var(--fs-1)}
.rev-link{margin-top:var(--s48);position:relative}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;max-width:52rem}
.faq details{border-top:var(--bw) solid var(--c-ink-16)}
.faq details:last-child{border-bottom:var(--bw) solid var(--c-ink-16)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s16);padding:var(--s24) 0;font:800 var(--fs-3)/1.25 var(--f-title);min-height:var(--s48)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform .25s var(--ease);width:var(--s24);height:var(--s24);color:var(--c-verde)}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq .ans{padding-bottom:var(--s24)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- formularios ---------- */
.form{display:grid;gap:var(--s16)}
.form-grid{display:grid;gap:var(--s16)}
@media(min-width:600px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1 / -1}}
.field{display:grid;gap:var(--s4);align-content:start}
.field label,.field .lbl{font-weight:700;font-size:var(--fs-1)}
.field input[type=text],.field input[type=number],.field select{width:100%;min-height:var(--s48);padding:var(--s8) var(--s16);border:2px solid var(--c-ink-2);border-radius:var(--r-btn);font:500 var(--fs-2)/1.2 var(--f-text);color:var(--c-ink);background:var(--c-pelo)}
.field select{appearance:auto}
.field [aria-invalid="true"]{border-color:var(--c-error)}
.err{margin:0;color:var(--c-error);font-size:var(--fs-1);font-weight:700;min-height:0}
.err:empty{display:none}
.check{display:flex;gap:var(--s12);align-items:center;font-weight:700;min-height:var(--s48)}
.check input{width:var(--s24);height:var(--s24);accent-color:var(--c-verde)}
.form-note{font-size:var(--fs-1);color:var(--c-ink-2);margin:0}

/* ---------- urgencias ---------- */
.big-tel{display:inline-flex;align-items:center;gap:var(--s12);font:800 clamp(var(--fs-5),8vw,var(--fs-7))/1 var(--f-title);text-decoration:none;letter-spacing:-.02em}
.alert-note{display:flex;gap:var(--s12);align-items:flex-start;border:2px solid var(--c-ink);border-radius:var(--r-btn);padding:var(--s16);background:var(--c-oro);color:var(--c-ink);font-weight:600;max-width:65ch}
.alert-note .i{width:var(--s24);height:var(--s24);margin-top:var(--s4)}
.alert-note p{margin:0;color:var(--c-ink)}
.bg-dark .alert-note p{color:var(--c-ink)}
.signs{list-style:none;display:grid;gap:0;border-bottom:var(--bw) solid var(--c-ink-16)}
.signs li{display:grid;grid-template-columns:var(--s32) 1fr;gap:var(--s12);padding-block:var(--s16);border-top:var(--bw) solid var(--c-ink-16);font-weight:600}
.signs .i{color:var(--c-error);width:var(--s24);height:var(--s24)}

/* ---------- contacto ---------- */
.info{display:grid;gap:var(--s24)}
.info-item{display:grid;grid-template-columns:var(--s32) 1fr;gap:var(--s12)}
.info-item .i{width:var(--s24);height:var(--s24);color:var(--c-verde);margin-top:var(--s4)}
.info-item h3{font-size:var(--fs-3);margin-bottom:var(--s4)}
.info-item p{margin:0}
.hours{list-style:none;display:grid;gap:var(--s4)}
.hours li{display:flex;justify-content:space-between;gap:var(--s16);border-bottom:var(--bw) dotted var(--c-ink-16);padding-bottom:var(--s4)}
.map{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--c-estuco);border:2px solid var(--c-ink-16)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-fb{position:absolute;inset:0;display:grid;place-content:center;gap:var(--s12);padding:var(--s24);text-align:center;font-weight:600}

/* ---------- CTA final ---------- */
.cta-band{display:grid;gap:var(--s24)}
.cta-band h2{max-width:20ch}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--c-ink);color:var(--c-pelo);padding:var(--s64) 0 var(--s128);position:relative;overflow-x:clip}
.foot-grid{display:grid;gap:var(--s32)}
.foot h2{font:800 var(--fs-2)/1.2 var(--f-text);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s12);color:var(--c-oro)}
.foot p,.foot address{margin:0 0 var(--s8);font-style:normal;color:var(--c-pelo-80);font-size:var(--fs-1)}
.foot ul{list-style:none;display:grid;gap:var(--s4)}
.foot li a,.foot p a{display:inline-flex;align-items:center;min-height:var(--s32);font-size:var(--fs-1)}
.foot-brand{font:800 var(--fs-4)/1.1 var(--f-title);margin-bottom:var(--s12);display:block}
.foot-legal{margin-top:var(--s48);padding-top:var(--s24);border-top:var(--bw) solid var(--c-pelo-20);font-size:var(--fs-0);color:var(--c-pelo-80)}
.foot .falta{color:var(--c-pelo-80);font-size:var(--fs-0)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s48)}.foot{padding-bottom:var(--s64)}}

/* ---------- botón flotante (mobile) ---------- */
.fab{position:fixed;right:var(--s16);bottom:calc(var(--s16) + env(safe-area-inset-bottom,0px));z-index:40;display:grid;gap:var(--s12);justify-items:center;opacity:0;transform:translateY(var(--s24));pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab a{display:grid;place-items:center;border-radius:50%;border:2px solid var(--c-ink);position:relative;text-decoration:none}
.fab .fab-call{width:var(--s48);height:var(--s48);background:var(--c-pelo);color:var(--c-ink)}
.fab .fab-wa{width:var(--s64);height:var(--s64);background:var(--c-oro);color:var(--c-ink)}
.fab .fab-wa .i{width:var(--s32);height:var(--s32)}
.fab .fab-wa::after{content:"";position:absolute;inset:calc(var(--s4) * -1);border-radius:50%;border:3px solid var(--c-oro);animation:pulse 2s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media(min-width:961px){.fab{display:none}}

/* ==========================================================================
   ANIMACIONES — sólo transform y opacity
   ========================================================================== */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv.visible{opacity:1;transform:translateY(0)}
.js .rv.rv-done{transition:transform .2s,border-color .2s,box-shadow .2s,opacity .2s;transition-delay:0s}
.js .split .w{display:inline-block;opacity:0;transform:translateY(.5em)}
.js .split.visible .w{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--wi,0) * 60ms)}

/* ==========================================================================
   "REDUCIR MOVIMIENTO" — DESACTIVADO A PROPÓSITO
   El sitio muestra siempre sus animaciones (en main.js, FORZAR_ANIMACIONES = true).
   Para respetar la preferencia del sistema operativo:
     1) poné FORZAR_ANIMACIONES = false en main.js, y
     2) descomentá el bloque de abajo.
   @media (prefers-reduced-motion: reduce){
     *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
     .js .rv,.js .split .w{opacity:1 !important;transform:none !important}
   }
   ========================================================================== */

/* ---------- ajustes ---------- */
.sec.tight{padding-block:var(--s48)}
.bg-dark .card p,.bg-dark .card .muted,.bg-dark .card .vac-note{color:var(--c-ink-2)}
.bg-dark .card .vac-now p{color:var(--c-pelo-80)}
.logo-in{display:inline-flex;align-items:center;gap:var(--s8)}
.bg-dark .card h3{color:var(--c-ink)}
.bg-dark .card .vac-now h3{color:var(--c-pelo)}
.card .ticks,.card h3{color:var(--c-ink)}
.tile{display:grid;gap:var(--s12);align-content:start}
.tile .i{width:var(--s32);height:var(--s32);color:var(--c-verde)}
.tile p{margin:0;color:var(--c-ink-2)}
.stack{display:grid;gap:var(--s24)}
.bigtel-wrap{display:grid;gap:var(--s16);margin-bottom:var(--s24)}

.foot-legal{max-width:none}
.rev-avg>div{display:grid;gap:var(--s4)}

/* AA: verde sobre estuco pasa a verde profundo */
.bg-estuco .row .more,.bg-estuco .row-n,.bg-estuco .faq summary .i,.bg-estuco .ticks .i,.bg-estuco .tile .i,.card .rev-more,.card .ticks .i{color:var(--c-verde-osc)}
