/* ============================================================
   San Benedetto — Panadería Artesanal, Mar del Plata
   Sistema visual sacado de la marca: naranja del logo, la
   condensada de "BENEDETTO" (Oswald) y el script de "San"
   (Yellowtail). El verde queda reservado SOLO para WhatsApp.
   ============================================================ */

:root{
  /* --- marca (los 4 tonos verificados contra fondo, no adivinados) --- */
  --accent:#F26C00;        /* el naranja del logo: fills, filetes, display */
  --accent-ink:#A84A00;    /* 5,49:1 sobre papel — el único que puede llevar texto chico */
  --accent-bright:#FFA85C; /* 9,02:1 sobre el marrón — para fondos oscuros */
  --accent-dark:#2B1608;   /* marrón de horno: bandas oscuras y velos */
  --accent-wash:rgba(242,108,0,.07);

  --papel:#FDF9F3;
  --papel-alt:#F6EADA;
  --tinta:#2B1608;
  --tinta-soft:#6E5748;
  --linea:rgba(43,22,8,.12);

  --star:#F5B301;
  --wa:#25D366;
  --wa-ink:#0a2e1a;

  --display:'Oswald',Impact,system-ui,sans-serif;
  --script:'Yellowtail',cursive;
  --body:'Switzer',system-ui,-apple-system,sans-serif;

  --ancho:1180px;
  --banda:54vh;            /* alto de las bandas de foto: lo usan el layout y el keyframe */
  --deriva:.4;             /* cuánto del scroll se corre la foto de la banda. 0 = clavada, pero en
                              Safari clavada se siente pegajosa: corre la animación en el hilo
                              principal y queda atrasada, y el atraso solo se nota si la foto
                              debería estar quieta. Con .4 se mueve lo justo para taparlo. */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 1rem/1.65 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.02;
  text-transform:uppercase;letter-spacing:.005em}
p{margin:0}
.wrap{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:1.5rem}
.seccion{padding:clamp(3.5rem,8vw,6.5rem) 0}
/* Cuánto aire reserva arriba una sección cuando la traés con un link del header.
   El header bajado mide 60px, y acá van 40: la sección entra 20px por detrás del
   header, así que del bloque anterior no se ve NADA y se come un pedacito del
   aire de arriba de la sección, que igual mide más de 100px. Con los 8rem que
   había antes sobraban ~68px y asomaba el final de la sección anterior — la
   banda oscura, en el caso de encargos y opiniones. */
.seccion[id]{scroll-margin-top:2.5rem}
/* Dos excepciones a mano, las dos a pedido de Ciro:
   - productos: los 8rem dejan ver la tira de la carta que pasa justo arriba, y
     eso invita a seguir bajando.
   - encargos: entra más adentro todavía, porque el bloque tiene la foto grande a
     la derecha y con 40px asomaba el borde de arriba de la foto sin contexto. */
#productos{scroll-margin-top:8rem}
#encargos{scroll-margin-top:.5rem}

/* el guiño al logo: script arriba, condensada abajo */
.script{display:block;font-family:var(--script);font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--accent-ink);line-height:1.15;
  font-size:clamp(1.35rem,3vw,1.9rem);margin-bottom:.1em}
.titulo{font-size:clamp(1.9rem,4.6vw,3.1rem);margin-bottom:1.4rem}
.bajada{max-width:56ch;color:var(--tinta-soft);font-size:1.05rem}
.centrado{text-align:center}
.centrado .bajada{margin-inline:auto}

/* ---------- botones de WhatsApp: TODOS iguales ---------- */
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--wa);color:var(--wa-ink);text-decoration:none;
  font:700 1.02rem/1 var(--body);padding:1.05rem 1.6rem;border-radius:.6rem;
  animation:latido 2.6s var(--ease) infinite;transition:transform .18s var(--ease)}
.btn-wa svg{width:1.3rem;height:1.3rem;fill:var(--wa-ink);flex:none}
.btn-wa:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn-wa:hover{animation-play-state:paused;transform:translateY(-2px)}}
@keyframes latido{
  0%,100%{transform:scale(1);box-shadow:0 6px 20px rgba(37,211,102,.32)}
  50%{transform:scale(1.035);box-shadow:0 12px 32px rgba(37,211,102,.52)}
}
.wa-float{position:fixed;right:1.15rem;bottom:max(1.25rem,env(safe-area-inset-bottom));
  z-index:60;width:3.5rem;height:3.5rem;border-radius:999px;padding:0;gap:0}
.wa-float svg{width:1.7rem;height:1.7rem}
.wa-float::after{content:"";position:absolute;inset:-6px;border-radius:999px;
  border:2px solid var(--wa);opacity:.65;animation:anillo 2.6s var(--ease) infinite}
@keyframes anillo{0%{transform:scale(.9);opacity:.65}70%,100%{transform:scale(1.35);opacity:0}}

/* ---------- header ----------
   Arriba de todo es invisible: flota sobre la foto del hero, que así llega
   hasta el borde de la pantalla. Recién al bajar toma el fondo papel. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(253,249,243,0);border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .3s,box-shadow .3s}
/* velo suave de arriba: garantiza que el logo y los links blancos se lean
   sobre cualquier foto, sin que se note como una barra */
.site-header::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(43,22,8,.5),rgba(43,22,8,0));
  transition:opacity .35s var(--ease)}
.site-header.scrolled{background:rgba(253,249,243,.86);backdrop-filter:blur(12px);
  border-bottom-color:var(--linea);box-shadow:0 6px 24px rgba(43,22,8,.06)}
.site-header.scrolled::before{opacity:0}
/* al bajar, la barra se comprime. Animar el padding acá no reflowea la página:
   el header está `fixed`, así que el cambio de alto se queda adentro del header. */
.header-in{position:relative;z-index:1;display:flex;align-items:center;gap:1rem;
  padding-block:.7rem;transition:padding-block .35s var(--ease)}
.scrolled .header-in{padding-block:.58rem}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
/* el logo achica de verdad (width/height), no con `scale`: el scale es solo
   visual y dejaba la barra igual de alta, que era justamente lo que se buscaba
   bajar. Vale la misma excusa que el padding: el header está `fixed`. */
.marca img{width:46px;height:46px;border-radius:999px;background:#fff;
  transition:width .35s var(--ease),height .35s var(--ease)}
.scrolled .marca img{width:40px;height:40px}
.marca b{display:block;font-family:var(--display);font-weight:700;font-size:1.12rem;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;color:#fff;transition:color .3s}
.marca>span span{display:block;font-size:.76rem;color:rgba(255,255,255,.8);
  letter-spacing:.02em;transition:color .3s}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:#fff;
  padding-block:.2rem;border-bottom:2px solid transparent;
  transition:color .3s,border-color .2s}
.scrolled .marca b,.scrolled .nav a{color:var(--tinta)}
.scrolled .marca>span span{color:var(--tinta-soft)}
@media (hover:hover){.nav a:hover{border-bottom-color:var(--accent)}}
/* el botón acompaña el achique. No se puede usar `scale` acá: el latido del
   botón ya está animando el transform y le ganaría a la transición. */
.site-header .btn-wa{padding:.72rem 1.05rem;font-size:.92rem;
  transition:padding .35s var(--ease),font-size .35s var(--ease)}
.site-header.scrolled .btn-wa{padding:.62rem .98rem;font-size:.9rem}

/* ---------- iconos sociales (header y pie) ----------
   El color va por `currentColor` en el link, no por `fill` en el svg: el de
   Instagram es el logo real, que es de contorno (stroke) y no macizo, así que
   los dos iconos necesitan tomar el color del mismo lugar. */
.soc{display:flex;gap:.3rem;align-items:center}
.nav .soc{padding-left:.9rem;border-left:1px solid rgba(255,255,255,.28);transition:border-color .3s}
.scrolled .nav .soc{border-left-color:var(--linea)}
.soc a{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:999px;
  color:#fff;transition:background-color .2s,color .3s,transform .2s var(--ease)}
.soc svg{width:1.15rem;height:1.15rem;fill:currentColor}
.soc svg.ig{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.scrolled .nav .soc a{color:var(--accent-ink)}
@media (hover:hover){
  .soc a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
  .scrolled .nav .soc a:hover{background:var(--accent-wash)}
}
/* fuera del flujo: el header ya no ocupa lugar, así que este centinela
   tampoco puede empujar la foto hacia abajo */
#top-sentinel{position:absolute;top:0;width:1px;height:1px}
/* en el celular el header queda solo con la marca: el botón de WhatsApp del
   header competía con el flotante, que ya está siempre a mano */
@media (max-width:979px){.nav,.site-header .btn-wa{display:none}}

/* ---------- HERO: pase de fotos a pantalla completa ---------- */
/* Ocupa la pantalla entera, pero con techo: el bloque de texto mide siempre lo
   mismo (~660px), así que en un monitor grande el 100svh solo agregaba aire
   muerto arriba y abajo. Con el tope, el aire es el mismo en cualquier pantalla
   y abajo asoma la tira de la carta, que invita a seguir bajando. */
.hero{position:relative;min-height:min(100svh,820px);display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--accent-dark);text-align:center}
/* el alto de más es el margen que necesita el parallax para no dejar el borde
   al descubierto; va siempre, porque cambiarlo desde el JS movía la foto y
   eso cuenta como salto de layout (CLS) */
.hero-fotos{position:absolute;inset:-7% 0}
.hero-fotos picture{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease-in-out}
.hero-fotos picture.activa{opacity:1}
.hero-fotos img{width:100%;height:100%;object-fit:cover;object-position:center 58%;
  animation:kenburns 21s ease-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.01)}to{transform:scale(1.07)}}
.hero-velo{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(43,22,8,.62) 0%,rgba(43,22,8,.52) 40%,rgba(43,22,8,.78) 100%),
  radial-gradient(90% 62% at 50% 48%,rgba(43,22,8,.34) 0%,rgba(43,22,8,.62) 100%)}
/* el padding de arriba deja pasar al header, que flota encima de la foto */
.hero-in{position:relative;z-index:2;width:100%;max-width:820px;
  padding:6.5rem 1.5rem 3.5rem;color:#fff}
.hero .script{color:var(--accent-bright);font-size:clamp(1.7rem,3.9vw,2.7rem);margin-bottom:.28em}
.hero h1{color:#fff;font-size:clamp(2.35rem,9.2vw,6.2rem);line-height:.93;
  letter-spacing:-.012em;margin-bottom:1.5rem}
.hero h1 .acc{color:var(--accent-bright)}
.hero-filete{width:112px;height:4px;background:var(--accent);margin:0 auto 1.7rem;border-radius:2px}
.hero-lead{margin:0 auto 1.15rem;max-width:46ch;font-size:clamp(1.12rem,1.85vw,1.34rem);
  line-height:1.6;color:#fff}
.hero-meta{margin:0 auto 2.3rem;font-size:1rem;color:rgba(255,255,255,.86)}
/* el botón crece con el resto del hero, que quedó sin la chapita de puntuación */
.hero-in>.btn-wa{font-size:1.12rem;padding:1.2rem 1.9rem}
.hero-dots{display:flex;gap:.25rem;justify-content:center;margin-top:2.2rem}
/* el punto se ve chico pero el área de toque es de 24px: a 9px no se puede tocar con el pulgar */
.hero-dots button{width:40px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.hero-dots button::before{content:"";width:9px;height:9px;border-radius:999px;
  background:rgba(255,255,255,.38);transition:transform .3s var(--ease),background .3s}
.hero-dots button[aria-current="true"]::before{transform:scaleX(2.9);background:var(--accent-bright)}

/* ---------- marquee de la carta ---------- */
.marquee{overflow:hidden;padding:1.35rem 0;background:var(--accent-dark);
  border-block:1px solid rgba(255,255,255,.08)}
.marquee-track{display:flex;gap:1.9rem;width:max-content;min-width:0;
  animation:marq 38s linear infinite;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.5rem);letter-spacing:.02em;color:rgba(255,255,255,.9)}
.marquee-track .dot{color:var(--accent-bright)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}

/* ---------- grilla de productos ---------- */
/* dos columnas ya en el celular: en una sola, ocho tarjetas eran 10.000px de scroll */
.prod-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);margin-top:2.4rem}
@media (min-width:760px){.prod-grid{gap:1.1rem;grid-template-columns:repeat(4,1fr)}}
.prod{margin:0;position:relative;overflow:hidden;border-radius:.9rem;background:var(--accent-dark);
  aspect-ratio:4/5;box-shadow:0 8px 26px rgba(43,22,8,.10)}
.prod img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.prod figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem .8rem .8rem;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.85rem,2.6vw,1.02rem);
  letter-spacing:.02em;color:#fff;
  background:linear-gradient(to top,rgba(43,22,8,.9),rgba(43,22,8,0))}

/* ---------- banda: la foto queda quieta y la página pasa por encima ----------
   La foto mide una pantalla de alto adentro de una banda que mide menos, así
   que la banda funciona como una ventana. Con la animación de abajo la foto se
   corre justo lo que se corre la banda, y el efecto es que está clavada.
   Sin la animación (navegador viejo o movimiento reducido) queda quieta y
   centrada, que es una foto normal: no se rompe nada. */
/* `clip` y no `hidden`: hidden convierte a la banda en un contenedor de scroll y
   entonces la animación de abajo se mide contra la banda, que no scrollea nunca.
   Con eso la foto quedaba pegada a la página en vez de quieta. */
.banda{position:relative;height:var(--banda);overflow:clip;
  display:grid;place-items:center;text-align:center;background:var(--accent-dark)}
.banda-img{position:absolute;top:0;left:0;width:100%;height:100vh;object-fit:cover;
  transform:translateY(calc((var(--banda) - 100vh) / 2))}
.banda::after{content:"";position:absolute;inset:0;background:rgba(43,22,8,.55)}
.banda-txt{position:relative;z-index:1;color:#fff;padding-inline:1.5rem}
.banda-txt .script{color:var(--accent-bright)}
.banda-txt h2{font-size:clamp(1.8rem,5vw,3rem);text-shadow:0 2px 24px rgba(43,22,8,.45)}
/* en el celular 62vh era media pantalla para un bloque que no vende nada */
@media (max-width:760px){:root{--banda:42vh}}

/* ---------- bloque de encargos (el de conversión) ---------- */
.encargos{background:var(--papel-alt)}
.encargos-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){.encargos-grid{grid-template-columns:1fr 1fr}}
.encargos-foto{border-radius:1rem;overflow:hidden;box-shadow:0 16px 40px rgba(43,22,8,.16)}
.lista{list-style:none;margin:1.5rem 0 1.9rem;padding:0;display:grid;gap:.8rem}
.lista li{display:flex;gap:.7rem;align-items:flex-start;font-size:1.02rem}
.lista svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.28rem;stroke:var(--accent-ink);
  fill:none;stroke-width:2.2}
.micro{margin-top:.85rem;font-size:.9rem;color:var(--tinta-soft)}

/* ---------- pasos ---------- */
.pasos{display:grid;gap:1.6rem;margin-top:2.6rem;grid-template-columns:1fr}
@media (min-width:820px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{position:relative;padding-left:3.6rem}
@media (min-width:820px){.paso{padding-left:0;text-align:center}}
.paso .num{position:absolute;left:0;top:0;width:2.6rem;height:2.6rem;border-radius:999px;
  display:grid;place-items:center;background:var(--accent);color:var(--accent-dark);
  font-family:var(--display);font-weight:700;font-size:1.15rem}
@media (min-width:820px){.paso .num{position:static;margin:0 auto .9rem}}
.paso h3{font-size:1.15rem;margin-bottom:.45rem}
.paso p{color:var(--tinta-soft);font-size:.98rem}

/* ---------- nosotros ---------- */
.nos-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.nos-grid{grid-template-columns:.85fr 1.15fr}}
.nos-foto{border-radius:1rem;overflow:hidden;box-shadow:0 16px 40px rgba(43,22,8,.18)}
.datos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:2rem;
  background:var(--linea);border:1px solid var(--linea);border-radius:.8rem;overflow:hidden}
@media (min-width:620px){.datos{grid-template-columns:repeat(4,1fr)}}
.datos div{background:var(--papel);padding:1.1rem .9rem;text-align:center}
.datos b{display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;
  color:var(--accent-ink);line-height:1}
.datos span{display:block;margin-top:.3rem;font-size:.82rem;color:var(--tinta-soft)}

/* ---------- opiniones: fichas con formato de Google ---------- */
.opiniones{background:var(--accent-wash)}
/* la chapa de puntaje: es lo que hace que se lean como reseñas reales y no
   como testimonios inventados */
.g-resumen{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  width:fit-content;margin:2rem auto 0;padding:1rem 1.5rem;background:var(--papel);
  border:1px solid var(--linea);border-radius:.9rem;box-shadow:0 6px 20px rgba(43,22,8,.06)}
.g-logo{width:1.5rem;height:1.5rem;flex:none}
.g-resumen .puntaje{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1}
.estrellas-fijas{color:var(--star);letter-spacing:.06em;font-size:1.02rem}
.estrellas-fijas .vacia{color:rgba(43,22,8,.2)}
.g-resumen small{display:block;color:var(--tinta-soft);font-size:.86rem}
.g-resumen a{margin-left:.4rem;font-weight:600;font-size:.92rem;color:var(--accent-ink);
  text-decoration:none;border-bottom:1px solid currentColor}
@media (hover:hover){.g-resumen a:hover{color:var(--tinta)}}

.op-viewport{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin-top:1.8rem;padding-bottom:.5rem}
.op-viewport::-webkit-scrollbar{display:none}
/* en desktop deja de ser carrusel: si no, las últimas fichas no se ven nunca */
@media (min-width:900px){
  .op-viewport{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
    overflow:visible;margin-top:2.2rem;padding-bottom:0}
}
.op{flex:0 0 min(340px,84vw);scroll-snap-align:center;background:var(--papel);
  border:1px solid var(--linea);border-radius:.9rem;padding:1.4rem;
  display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.op-cab{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem}
.op-ava{width:2.5rem;height:2.5rem;flex:none;border-radius:999px;display:grid;place-items:center;
  color:#fff;font:700 .88rem/1 var(--body);letter-spacing:.02em}
.op-cab div{margin-right:auto;min-width:0}
.op .estrellas{color:var(--star);letter-spacing:.08em;font-size:1rem}
.op .estrellas span{display:inline-block}
.op p{margin:.6rem 0 0;font-size:.98rem;color:var(--tinta)}
.op cite{display:block;font-style:normal;font-weight:600;font-size:.92rem;line-height:1.3}
.op small{display:block;color:var(--tinta-soft);font-size:.8rem}
.pista{display:flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-size:.85rem;color:var(--tinta-soft)}
.pista svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;
  animation:desliza 1.6s ease-in-out infinite}
@keyframes desliza{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (min-width:900px){.pista{display:none}}

/* ---------- mosaico ---------- */
/* sin título arriba, la banda respira con menos aire propio */
.seccion--fotos{padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.mosaico{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.mosaico{grid-template-columns:repeat(3,1fr)}}
.mosaico img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;border-radius:.7rem}

/* ---------- dónde ---------- */
.donde-grid{display:grid;gap:clamp(1.6rem,4vw,2.8rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.donde-grid{grid-template-columns:1fr 1.1fr}}
.mapa{border:0;width:100%;aspect-ratio:4/3;border-radius:1rem;
  box-shadow:0 14px 36px rgba(43,22,8,.14)}
.horarios{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--linea)}
.horarios li{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid var(--linea);font-size:.98rem}
.horarios b{font-weight:600}
.dir{font-size:1.05rem;font-weight:500}
/* botón secundario: existe para el que quiere ir al local, y se nota que es el
   segundo en importancia (sin relleno, sin latido) para no competir con el WhatsApp */
.btn-ghost{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.5rem;
  padding:.85rem 1.35rem;border:1.5px solid var(--linea);border-radius:.6rem;
  text-decoration:none;font:600 .95rem/1 var(--body);color:var(--tinta);
  transition:border-color .2s,background .2s,transform .18s var(--ease)}
.btn-ghost svg{width:1.2rem;height:1.2rem;flex:none;fill:none;stroke:var(--accent-ink);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost:active{transform:scale(.97)}
@media (hover:hover){.btn-ghost:hover{border-color:var(--accent);background:var(--accent-wash)}}

/* ---------- cierre drenched + footer ---------- */
.cierre{background:var(--accent-dark);color:#fff;text-align:center;
  padding:clamp(3.5rem,9vw,6rem) 0}
.cierre h2{color:#fff;font-size:clamp(2rem,5.4vw,3.4rem);margin-bottom:1.1rem}
.cierre h2 .acc{color:var(--accent-bright)}
.cierre .script{color:var(--accent-bright)}
.cierre p{max-width:46ch;margin:0 auto 2rem;color:rgba(255,255,255,.85)}
.site-footer{background:var(--accent-dark);color:rgba(255,255,255,.66);
  border-top:1px solid rgba(255,255,255,.10);padding:clamp(2.8rem,6vw,4rem) 0 1.8rem;
  font-size:.95rem;line-height:1.9}
.footer-cols{display:grid;gap:2.4rem;grid-template-columns:1fr}
/* la columna de marca era 1.5fr con un texto de 30ch adentro: sobraba medio
   ancho de pantalla vacío entre ella y la lista del medio */
@media (min-width:820px){.footer-cols{grid-template-columns:1.15fr 1fr 1.2fr;gap:2.6rem}}
/* logo y nombre en el mismo renglón: apilados, la columna quedaba el doble de
   alta que las otras dos y el pie se llenaba de aire */
.footer-id{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.footer-marca img{width:62px;height:62px;border-radius:999px;background:#fff;flex:none}
.footer-marca b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.3rem;line-height:1.1;letter-spacing:.01em;color:#fff}
.footer-marca p{max-width:32ch}
.footer-marca .soc{margin-top:1.1rem}
.footer-marca .soc a{border:1px solid rgba(255,255,255,.18);color:var(--accent-bright)}
.footer-col h3{font-size:1.05rem;color:#fff;margin-bottom:.9rem;letter-spacing:.02em}
.footer-col a{display:block;text-decoration:none;color:rgba(255,255,255,.66);
  width:fit-content;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
@media (hover:hover){.footer-col a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-bright)}}
.footer-pie{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.10);font-size:.88rem;color:rgba(255,255,255,.5)}
/* la firma: discreta, no compite con nada del cliente, pero está y linkea.
   El subrayado tenue va SIEMPRE, no solo en hover: un link dentro de un renglón
   de texto no puede distinguirse solo por el color (Lighthouse lo marca como
   `link-in-text-block` y baja la accesibilidad de 100 a 96). En hover se
   enciende, que es lo que se buscaba. */
.firma a{text-decoration:none;color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.3);transition:color .2s,border-color .2s}
@media (hover:hover){.firma a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-bright)}}

/* ============================================================
   MOVIMIENTO
   Regla que vale para todo lo de abajo: los estados ocultos viven
   SIEMPRE bajo .js-anim, que solo se agrega si el JS corre y el
   visitante no pidió menos movimiento. Sin JS la página se ve
   completa y quieta. Todo anima transform/opacity (y clip-path,
   que también es de compositor): nada que dispare layout.
   ============================================================ */

/* ---------- entrada del hero: el titular sube desde atrás del renglón ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
@keyframes sube{from{transform:translateY(112%)}to{transform:none}}
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes filete{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
.js-anim .hero .ln>span{display:block;animation:sube .95s var(--ease) both}
.js-anim .hero .ln:nth-child(2)>span{animation-delay:.14s}
.js-anim .hero .ln:nth-child(3)>span{animation-delay:.28s}
.js-anim .hero h1 .script,
.js-anim .hero-lead,
.js-anim .hero-meta,
.js-anim .hero-dots{animation:entra .75s var(--ease) both}
.js-anim .hero h1 .script{animation-delay:.06s}
.js-anim .hero-filete{animation:filete .8s var(--ease) .5s both}
.js-anim .hero-lead{animation-delay:.6s}
.js-anim .hero-meta{animation-delay:.7s}
.js-anim .hero-dots{animation-delay:.95s}
/* el botón entra y recién después arranca el latido: si se pisan, el latido
   gana el transform y la entrada no se ve */
.js-anim .hero-in>.btn-wa{animation:entra .6s var(--ease) .8s both,
  latido 2.6s var(--ease) 1.5s infinite}

/* ---------- el hero se aleja al scrollear (donde el navegador lo soporta) ---------- */
@supports (animation-timeline:scroll()){
  @keyframes parallax{to{transform:translateY(7%)}}
  @keyframes heroSale{to{opacity:0;transform:translateY(-26px)}}
  .js-anim .hero-fotos{animation:parallax linear both;
    animation-timeline:scroll();animation-range:0 100vh}
  .js-anim .hero-in{animation:heroSale linear both;
    animation-timeline:scroll();animation-range:25vh 88vh}
}

/* ---------- la foto de la banda queda casi quieta mientras la banda pasa ----------
   Casi, no del todo: se corre un 15% de lo que se corre el scroll (`--deriva`).
   Congelada del todo el efecto es más puro pero se SIENTE trabado — en 62vh de
   pantalla el ojo no recibe ninguna señal de movimiento y lee que el scroll se
   enganchó, aunque los frames sean 60 clavados (medido). Alvear hace lo mismo:
   arriba del `background-attachment:fixed` le suma una deriva de 100px.

   De dónde salen los dos valores, que son una cuenta y no prueba y error. Con
   `v` = dónde está el borde de arriba de la banda en la pantalla, la foto tiene
   que ir a `t(v) = -v(1 - deriva) - deriva * (100vh - banda) / 2`. El primer
   término es el que la mantiene quieta (con deriva 0 es -v, o sea clavada); el
   segundo recentra el recorrido para que la foto no descubra el borde de la
   banda en ninguno de los dos extremos. Y `v` va de `100vh` (la banda recién
   asoma por abajo) a `-banda` (terminó de salir por arriba), que son justo el
   0% y el 100% del `view()`. */
@supports (animation-timeline:view()){
  /* el reloj lo marca la BANDA, no la foto: la foto mide una pantalla de alto y
     con `view()` a secas el recorrido se medía sobre esos 100vh, así que la foto
     terminaba yendo más lento que el scroll en vez de quedarse quieta */
  .banda{view-timeline-name:--banda;view-timeline-axis:block}
  @keyframes bandaFija{
    from{transform:translateY(calc(-100vh * (1 - var(--deriva))
      - var(--deriva) * (100vh - var(--banda)) / 2))}
    to{transform:translateY(calc(var(--banda) * (1 - var(--deriva))
      - var(--deriva) * (100vh - var(--banda)) / 2))}
  }
  .js-anim .banda-img{animation:bandaFija linear both;animation-timeline:--banda}
}

/* el título del cierre repite el gesto del hero, pero disparado al llegar */
.js-anim .cierre h2[data-reveal]{opacity:1;transform:none}
.js-anim .cierre .script{opacity:0}
.js-anim .cierre .ln>span{display:block;transform:translateY(112%)}
.js-anim .cierre h2.visible .script{opacity:1;transition:opacity .6s var(--ease)}
.js-anim .cierre h2.visible .ln>span{transform:none;transition:transform .9s var(--ease)}
.js-anim .cierre h2.visible .ln:nth-child(3)>span{transition-delay:.13s}

/* ---------- bloques que entran al scroll ---------- */
.js-anim [data-reveal]{opacity:0;transform:translateY(22px)}
.js-anim [data-reveal].visible{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* títulos: la palabra sube enmascarada, una atrás de la otra */
.titulo .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em}
.js-anim [data-reveal] .titulo .w>span{display:inline-block;transform:translateY(115%)}
.js-anim [data-reveal].visible .titulo .w>span{transform:none;
  transition:transform .85s var(--ease);transition-delay:calc(var(--i)*.055s)}
/* si el bloque tiene título animado, el bloque entero deja de moverse:
   la entrada la lleva el título y lo demás lo sigue */
.js-anim [data-reveal].tit-anim{opacity:1;transform:none}
.js-anim [data-reveal].tit-anim>*:not(.titulo){opacity:0;transform:translateY(16px)}
.js-anim [data-reveal].tit-anim.visible>*:not(.titulo){opacity:1;transform:none;
  transition:opacity .65s var(--ease) .25s,transform .65s var(--ease) .25s}

/* hijos que entran de a uno */
.js-anim [data-reveal="stagger"]{opacity:1;transform:none}
.js-anim [data-reveal="stagger"]>*{opacity:0;transform:translateY(26px)}
.js-anim [data-reveal="stagger"].visible>*{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
.js-anim [data-reveal="stagger"].visible>*:nth-child(2){transition-delay:.07s}
.js-anim [data-reveal="stagger"].visible>*:nth-child(3){transition-delay:.14s}
.js-anim [data-reveal="stagger"].visible>*:nth-child(4){transition-delay:.21s}
.js-anim [data-reveal="stagger"].visible>*:nth-child(5){transition-delay:.28s}
.js-anim [data-reveal="stagger"].visible>*:nth-child(6){transition-delay:.35s}
.js-anim [data-reveal="stagger"].visible>*:nth-child(7){transition-delay:.42s}
.js-anim [data-reveal="stagger"].visible>*:nth-child(8){transition-delay:.49s}

/* fotos grandes que se destapan de arriba a abajo */
.js-anim [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0 round 1rem)}
.js-anim [data-reveal="clip"].visible{clip-path:inset(0 0 0 0 round 1rem);
  transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
.js-anim [data-reveal="clip"] img{transform:scale(1.12)}
.js-anim [data-reveal="clip"].visible img{transform:none;transition:transform 1.5s var(--ease)}

/* ---------- detalles por sección ---------- */
/* la foto del producto arranca un toque más cerca y se acomoda al entrar;
   el zoom del hover viaja en otra variable para que no se pisen */
.prod img{transform:scale(calc(var(--z,1) * var(--zh,1)))}
.js-anim .prod-grid[data-reveal] .prod img{--z:1.12}
.js-anim .prod-grid[data-reveal].visible .prod img{--z:1;transition:transform 1.3s var(--ease)}
@media (hover:hover){.prod:hover img{--zh:1.06}}

/* mosaico: además de entrar escalonado, ahora hace zoom al pasar el mouse */
.js-anim .mosaico[data-reveal]>img{opacity:0;transform:translateY(26px) scale(var(--zh,1))}
.js-anim .mosaico[data-reveal].visible>img{opacity:1;transform:scale(var(--zh,1));
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
@media (hover:hover){.mosaico img:hover{--zh:1.05}}

/* los pasos: la línea se traza y los números pican */
@media (min-width:820px){
  .pasos{position:relative}
  .pasos::before{content:"";position:absolute;top:1.3rem;left:17%;right:17%;height:2px;
    background:var(--linea)}
  .js-anim .pasos[data-reveal]::before{transform:scaleX(0);transform-origin:left}
  .js-anim .pasos[data-reveal].visible::before{transform:scaleX(1);
    transition:transform 1s var(--ease) .2s}
  .paso .num{position:relative;z-index:1}
}
@keyframes pica{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}
.js-anim .pasos[data-reveal].visible .paso:nth-child(1) .num{animation:pica .55s cubic-bezier(.34,1.56,.64,1) .2s both}
.js-anim .pasos[data-reveal].visible .paso:nth-child(2) .num{animation:pica .55s cubic-bezier(.34,1.56,.64,1) .33s both}
.js-anim .pasos[data-reveal].visible .paso:nth-child(3) .num{animation:pica .55s cubic-bezier(.34,1.56,.64,1) .46s both}

/* el lift del hover pelea con el transform de la entrada, así que va con el
   mismo peso que ella o no se ve */
@media (hover:hover){
  .js-anim .op-viewport[data-reveal].visible .op:hover,
  .op:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(43,22,8,.10)}
}

/* las estrellas de cada opinión aparecen de a una */
.js-anim .op-viewport[data-reveal].visible .estrellas span{
  animation:pica .45s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(.35s + var(--i)*.06s)}

/* el párrafo de "nosotros" se enciende palabra por palabra */
.apagado .pal{opacity:.32;transition:opacity .55s linear}
.encendido .pal{opacity:1;transition-delay:calc(var(--i)*.03s)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .js-anim [data-reveal],
  .js-anim [data-reveal] *{opacity:1!important;transform:none!important;
    clip-path:none!important;transition:none!important}
  .hero-fotos picture{transition:none}
}