/* Somos Blueberry · estilos de las secciones (tokens, header, botones y hero están en critico.css).
   Sistema: contenedor de 1160 px, escala --esp-1…6, radios de 20 px, una sombra suave, bordes de 1 px en pastel.
   Fondos alternados y predecibles: crema, pastel, crema, pastel… y UNA sola sección oscura (Cómo llegar).
   Versión anterior: main.anterior.css. */

/* ---------- Base de sección ---------- */
.seccion{padding-block:var(--esp-5)}
@media (min-width:64em){.seccion{padding-block:var(--esp-6)}}
.seccion--banda{padding-block:var(--esp-4)}
.seccion__cabeza{margin-bottom:var(--esp-4);max-width:var(--medida)}
.seccion__cabeza h2{font-size:var(--t-h2);line-height:1.05}
.seccion__cabeza p{margin:var(--esp-2) 0 0;color:var(--suave)}
.rotulo .cifras{font-weight:500}
.intro{font-size:var(--t-grande);line-height:1.4;max-width:var(--medida)}
.nota-chica{font-size:.85rem;color:var(--suave);margin-top:var(--esp-2)}
.enlace{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:underline;text-decoration-color:var(--forest);text-decoration-thickness:2px}
.enlace:hover{text-decoration-color:currentColor}
.enlace--claro{color:var(--blanco);text-decoration-color:var(--pastel)}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fondo-pastel{background:var(--pastel);--rotulo:var(--navy);--suave:var(--navy);--foco:var(--navy)}
.oscuro{background:var(--navy);color:var(--blanco);--rotulo:var(--pastel);--suave:#D5E0E6;--foco:var(--pastel)}
.tarjeta{background:var(--blanco);border:1px solid var(--pastel);border-radius:var(--radio);overflow:hidden}
.arandano{width:2rem;height:2rem;flex:none}
.arandano circle{fill:var(--navy)}
.arandano path{fill:var(--pastel)}
.arandano--vacio{opacity:.22}

/* Los hijos de una grilla pueden encogerse (un carrusel adentro no debe ensanchar la columna) */
.que-es__grilla>*,.perros__grilla>*,.como-llegar__grilla>*,.faq__grilla>*,.casa-banda>*,.hero__grilla>*{min-width:0}

/* ---------- Fotos ---------- */
.marco{position:relative;overflow:hidden;border-radius:var(--radio);background:var(--pastel-claro)}
.marco picture{display:block;height:100%}
.marco img,.marco .foto-ph{width:100%;height:100%;object-fit:cover}

/* ---------- Revelado: un solo patrón, sin riesgo de contenido invisible ----------
   revelar.js pone .por-revelar solo en lo que NO estaba en pantalla al cargar y lo saca al entrar al viewport o,
   como máximo, a los 1500 ms. Sin JS no se oculta nada. */
.js [data-revelar]{transition:opacity .6s var(--curva),translate .6s var(--curva)}
.js .por-revelar{opacity:0;translate:0 16px}

/* ---------- 01 · Qué es ---------- */
.que-es__grilla{display:grid;gap:var(--esp-4);align-items:center}
.que-es__texto p{font-size:1.125rem;max-width:var(--medida)}
.que-es__cita{font:600 var(--t-grande)/1.2 var(--display);letter-spacing:-.01em;margin:var(--esp-3) 0 0}
.datos{display:grid;gap:var(--esp-3);margin:var(--esp-5) 0 0;padding:var(--esp-4) 0 0;border-top:1px solid var(--navy);list-style:none}
.dato{display:flex;align-items:flex-start;gap:var(--esp-2)}
.dato__icono{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;border-radius:999px;background:var(--blanco);color:var(--navy)}
.dato__icono .icono{width:1.35rem;height:1.35rem}
.dato h3{font:500 .78rem/1.3 var(--texto);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .25rem}
.dato p{margin:0;font-weight:500;line-height:1.4}
@media (min-width:48em){.datos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:64em){.que-es__grilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-5)}}

/* ---------- 02 · Lo que hay que probar ---------- */
.mesa{display:flex;gap:var(--esp-2);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--margen) * -1);padding:.25rem var(--margen) var(--esp-2);scroll-padding-inline:var(--margen);scrollbar-width:thin;list-style:none}
.prod{flex:0 0 78%;scroll-snap-align:start;display:flex;flex-direction:column}
.prod__foto{aspect-ratio:4/3;border-radius:0}
.prod__cuerpo{display:grid;gap:.35rem;padding:var(--esp-2) var(--esp-3) var(--esp-3)}
.prod__nombre{font-size:1.4rem;line-height:1.15}
.prod__precio{margin:0;font:500 1.05rem/1.3 var(--texto);color:var(--chocolate)}
.prod__linea{margin:0;color:var(--suave);font-size:.98rem}
.probar__pie{margin-top:var(--esp-3)}
@media (min-width:48em){
  .mesa{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));overflow:visible;margin-inline:0;padding:0}
}

/* ---------- 03 · Vitrina: una fila con scroll horizontal, sin autoplay ---------- */
.vitrina__fila{display:flex;gap:var(--esp-2);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--margen) * -1);padding:.25rem var(--margen) var(--esp-2);scroll-padding-inline:var(--margen);scrollbar-width:thin;list-style:none}
.vitrina__item{flex:0 0 min(15rem,68vw);scroll-snap-align:start}
.vitrina__item figure{margin:0}
.vitrina__foto{aspect-ratio:4/5}
.vitrina__item figcaption{margin-top:.6rem;font:500 1.15rem/1.2 var(--display)}
.vitrina__pie{margin-top:var(--esp-3)}
@media (min-width:64em){.vitrina__fila{margin-inline:0;padding-inline:0;scroll-padding-inline:0}}

/* ---------- 04 · Para quedarse: solapas + un panel de alto parejo ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--esp-3)}
.tab{min-height:44px;padding:0 1.35rem;border:1px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font:500 1rem/1 var(--texto);cursor:pointer;transition:background-color .2s var(--curva),color .2s var(--curva)}
.tab:hover{background:var(--pastel-claro)}
.tab[aria-selected=true]{background:var(--navy);color:var(--blanco)}
.panel-q{display:grid}
.panel-q[hidden]{display:none}
.panel-q__foto{aspect-ratio:4/3;border-radius:0}
.panel-q__texto{display:flex;flex-direction:column;justify-content:center;gap:var(--esp-2);padding:var(--esp-3)}
.panel-q__texto h3{font-size:1.75rem}
.panel-q__texto p{margin:0;font-size:1.125rem;max-width:44ch}
.servicios{margin-top:var(--esp-3)}
@media (min-width:48em){
  .panel-q{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .panel-q__foto{aspect-ratio:auto;min-height:22rem}
  .panel-q__texto{padding:var(--esp-4)}
}

/* ---------- 05 · Perros ---------- */
.perros__grilla{display:grid;gap:var(--esp-4);align-items:center}
.perros__texto p{font-size:1.125rem;max-width:36ch}
@media (min-width:64em){.perros__grilla{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--esp-5)}}

/* ---------- Carrusel (partials/carrusel.php) ---------- */
.carrusel{--ratio:4/5;--slide:80%;--gap:1rem;position:relative}
.carrusel--horizontal{--ratio:4/3}
.carrusel--uno{--slide:100%;--ratio:4/3}
.carrusel__pista{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--radio)}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__slide{flex:0 0 var(--slide);margin:0;scroll-snap-align:start}
.carrusel__slide .marco{aspect-ratio:var(--ratio)}
.carrusel__slide figcaption{margin-top:.6rem;font:500 1.15rem/1.25 var(--display);color:var(--navy)}
.carrusel__controles{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);margin-top:var(--esp-2)}
.carrusel--sin-puntos .carrusel__controles{justify-content:flex-end}
.carrusel--sin-puntos .carrusel__puntos{display:none}
.carrusel__flecha{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--navy);border-radius:50%;background:transparent;color:var(--navy);cursor:pointer;transition:background-color .2s var(--curva),color .2s var(--curva),opacity .2s}
.carrusel__flecha:hover:not(:disabled){background:var(--navy);color:var(--blanco)}
.carrusel__flecha:disabled{opacity:.35;cursor:default}
.carrusel__icono{width:1.4rem;height:1.4rem}
.carrusel__icono--atras{rotate:180deg}
.carrusel__puntos{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem;min-width:0}
.carrusel__punto{position:relative;width:24px;height:24px;border:0;background:none;cursor:pointer;padding:0}
.carrusel__punto::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgb(29 62 83 / .3);transition:background-color .2s,scale .2s var(--curva)}
.carrusel__punto[aria-current=true]::before{background:var(--navy);scale:1.4}
@media (min-width:48em){.carrusel{--slide:46%}.carrusel--uno{--slide:100%}}
@media (min-width:64em){.perros .carrusel{--slide:62%}}

/* ---------- 06 · Reseñas ---------- */
.resenas__cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--esp-3) var(--esp-4)}
.resenas__promedio{display:flex;align-items:center;gap:.5rem;margin:0}
.resenas__numero{font:600 clamp(2.5rem,2rem + 2vw,3.5rem)/.9 var(--display);letter-spacing:-.03em}
.resenas__estrella{width:2rem;height:2rem;color:var(--manteca)}
.resenas__total{font-weight:500;line-height:1.3}
.estrellas{display:inline-flex;gap:2px}
.estrella{width:1.05rem;height:1.05rem;color:rgb(29 62 83 / .18)}
.estrella--llena{color:var(--manteca)}
.libro{display:grid;gap:var(--esp-2);list-style:none}
.nota{display:flex;padding:var(--esp-3);background:var(--blanco);border:1px solid var(--pastel);border-radius:var(--radio)}
.nota figure{display:flex;flex-direction:column;gap:.75rem;width:100%;margin:0}
.nota blockquote{margin:0;font-size:1.1rem;line-height:1.55}
.nota blockquote p{margin:0}
.nota__autor{display:flex;align-items:center;gap:.5rem;font-weight:600}
.nota__autor img{width:2rem;height:2rem;border-radius:50%}
.nota__fecha{color:var(--suave);font-weight:400;font-size:.9rem;margin-left:auto}
.nota__mas{margin-top:auto;font-size:.9rem;color:var(--suave)}
.resenas__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2);margin-top:var(--esp-3)}
.resenas__atribucion{margin:0;font-size:.9rem;color:var(--suave)}
.google{font-weight:500;color:var(--navy)}
/* Franja baja: puntaje y cantidad de Maps, sin tarjetas */
.franja{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2) var(--esp-4);padding:var(--esp-3) var(--esp-4);border:1px solid var(--pastel);border-radius:var(--radio);background:var(--blanco)}
.franja .resenas__promedio{flex-wrap:wrap}
@media (min-width:48em){.libro{grid-template-columns:repeat(2,1fr)}}

/* ---------- 07 · De La Casa: una banda ---------- */
.casa-banda{display:grid;gap:var(--esp-3);padding:var(--esp-4);border:1px solid var(--pastel);border-radius:var(--radio);background:var(--pastel-claro)}
.casa-banda h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.casa-banda__texto p{margin:var(--esp-1) 0 0;max-width:var(--medida)}
.casa-banda__texto .ganas{margin:var(--esp-3) 0}
.ganas{display:grid;gap:var(--esp-2);margin:0;list-style:none}
.ganas li{display:flex;align-items:center;gap:var(--esp-2);font-weight:500;line-height:1.35}
.casa-banda .acciones{align-self:center}
@media (min-width:64em){
  .casa-banda{grid-template-columns:minmax(0,5fr) minmax(0,5fr) auto;align-items:center;gap:var(--esp-4)}
}

/* ---------- 08 · FAQ ---------- */
.faq__item{border-top:1px solid var(--navy)}
.faq__item:last-child{border-bottom:1px solid var(--navy)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);min-height:44px;padding:1rem 0;cursor:pointer;list-style:none;font:500 1.2rem/1.3 var(--display)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__mas{width:1.5rem;height:1.5rem;color:var(--navy);flex:none;transition:rotate .3s var(--curva)}
.faq__item[open] .faq__mas{rotate:45deg}
.faq__respuesta{padding:0 0 var(--esp-2);max-width:var(--medida)}
.faq__respuesta p:last-child{margin-bottom:0}
@media (min-width:64em){
  .faq__grilla{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--esp-3);align-items:start}
  .faq__cabeza{grid-column:1/5;margin-bottom:0}
  .faq__lista{grid-column:6/13}
}

/* ---------- 09 · Cómo llegar: la única sección oscura ---------- */
.direccion{font:600 var(--t-grande)/1.25 var(--display);display:grid;gap:.25rem;margin-bottom:var(--esp-2)}
.transporte{display:grid;gap:.5rem;margin:var(--esp-3) 0}
.transporte div{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem}
.transporte dt{font:500 .78rem/1.9 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--pastel)}
.transporte dd{margin:0}
.como-llegar .acciones{margin-top:var(--esp-3)}
.como-llegar__grilla{display:grid;gap:var(--esp-4);align-items:start}
.como-llegar__texto p{max-width:var(--medida)}
.mapa{position:relative;aspect-ratio:4/3;max-height:24rem;width:100%;border-radius:var(--radio);overflow:hidden;background:var(--navy);border:1px solid rgb(192 214 186 / .35)}
.mapa__ilustrado{width:100%;height:100%}
.mapa__fondo{fill:var(--navy)}
.mapa__calles path{fill:none;stroke:rgb(255 253 249 / .12);stroke-width:14;stroke-linecap:round}
.mapa__avenida{fill:none;stroke:rgb(192 214 186 / .5);stroke-width:9;stroke-linecap:round}
.mapa__plaza rect{fill:rgb(109 130 102 / .45)}
.mapa__halo{fill:rgb(192 214 186 / .3)}
.mapa__arandano{fill:#5B82A8}
.mapa__caliz{fill:var(--blanco)}
.mapa__boton{position:absolute;left:50%;bottom:1.25rem;translate:-50% 0}
.mapa__boton:hover{translate:-50% -2px}
.mapa__boton:active{translate:-50% 0}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa.es-cargado .mapa__boton{display:none}
.horarios{margin-top:var(--esp-3)}
.horarios .etiqueta{color:var(--pastel);text-align:left}
.horarios__tabla{width:100%;max-width:26rem;border-collapse:collapse}
.horarios__tabla th,.horarios__tabla td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid rgb(192 214 186 / .2);font-weight:400}
.horarios__tabla td{text-align:right}
.horarios__tabla tr.es-hoy{background:var(--pastel);color:var(--navy)}
.horarios__tabla tr.es-hoy th,.horarios__tabla tr.es-hoy td{font-weight:500;border-bottom-color:transparent}
.horarios__hoy{margin-left:.4rem;padding:.1rem .5rem;border-radius:999px;background:var(--navy);color:var(--blanco);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
@media (min-width:64em){.como-llegar__grilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-5)}}

/* ---------- Pie: compacto y claro ---------- */
.pie{--foco:var(--navy);background:var(--pastel-claro);color:var(--navy);padding:var(--esp-4) 0 var(--esp-3);font-size:.95rem;border-top:1px solid var(--pastel)}
.pie__interior{display:grid;gap:var(--esp-3);width:min(100% - 2 * var(--margen),var(--ancho));margin:0 auto}
.pie .etiqueta{color:var(--chocolate)}
.pie__logo{width:132px;height:auto;margin-bottom:var(--esp-2)}
.pie__nombre{font-weight:500;margin-bottom:.4rem}
.pie__nap{font-style:normal;display:grid;gap:.2rem}
.pie__nap a{display:inline-flex;align-items:center;min-height:44px}
.pie__links,.pie__plataformas{list-style:none;display:grid;gap:.1rem}
.pie__links a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;text-decoration:none}
.pie a:hover{text-decoration:underline;text-decoration-color:var(--forest);text-decoration-thickness:2px}
.pie__plataformas li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pie__plataforma{display:inline-flex;align-items:center;min-height:44px}
.pie__plataforma-nombre{font:500 1.2rem var(--display)}
.pie__credito{width:min(100% - 2 * var(--margen),var(--ancho));margin:var(--esp-3) auto 0;padding-top:var(--esp-2);border-top:1px solid var(--pastel);font-size:.8rem;color:var(--suave)}
@media (min-width:48em){.pie__interior{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.pie__marca{grid-column:span 2}}

/* ---------- Carta ---------- */
.pagina-carta main{padding-top:calc(var(--alto-cabecera) + 2.5rem)}
.carta__cabeza{margin-bottom:2rem}
.carta__cabeza h1{font-size:var(--t-h1);margin:0 0 1rem}
/* Sticky debajo del header; cuando el header se esconde (mobile), cabecera.js pone .cabecera-oculta en <html> */
.carta__indice{position:sticky;top:var(--alto-cabecera);z-index:10;background:rgb(255 253 249 / .94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block:1px solid var(--linea);margin-bottom:2.5rem;transition:top .35s var(--curva)}
.cabecera-oculta .carta__indice{top:0}
.carta__indice ul{display:flex;gap:.25rem;overflow-x:auto;width:min(100% - 2 * var(--margen),var(--ancho));margin:0 auto;scrollbar-width:none}
.carta__indice a{display:inline-flex;align-items:center;min-height:48px;padding:0 .8rem;white-space:nowrap;text-decoration:none;font-weight:500}
.carta__indice a:hover{text-decoration:underline;text-decoration-color:var(--forest);text-decoration-thickness:2px}
.carta__hoja{background:var(--crema);padding:clamp(1.5rem,5vw,4rem);border:1px solid var(--linea);border-radius:var(--radio-grande)}
.carta__categoria{break-inside:avoid;margin-bottom:2.75rem;scroll-margin-top:calc(var(--alto-cabecera) + 4.5rem)}
.carta__categoria h2{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);padding-bottom:.6rem;margin-bottom:1.1rem;border-bottom:2px solid var(--pastel)}
.carta__items{list-style:none;display:grid;gap:1rem}
.carta__linea{display:flex;align-items:baseline;gap:.5rem;margin:0;font:500 1.1rem/1.35 var(--texto)}
.carta__precio{font-variant-numeric:tabular-nums}
.carta__puntos{flex:1;min-width:1.5rem;border-bottom:1.5px dotted rgb(29 62 83 / .35);translate:0 -.3em}
.carta__desc{margin:.15rem 0 0;font-size:.95rem;color:var(--suave)}
.carta__etiquetas{display:flex;gap:.4rem;list-style:none;margin-top:.4rem}
.carta__etiquetas li{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:var(--pastel-claro);padding:.15rem .6rem;border-radius:999px}
.carta__nota{margin:0 0 1.1rem;font-size:.95rem;color:var(--suave)}
.carta__salida{margin-block:3rem 5rem}
@media (min-width:64em){.carta__hoja{columns:2;column-gap:4rem}}


/* ---------- 404 ---------- */
.error-404{padding:calc(var(--alto-cabecera) + 4rem) 0 6rem;min-height:70vh}
.error-404__isotipo{width:5rem;height:auto;aspect-ratio:558/503}
.error-404 h1{font-size:var(--t-h2);max-width:16ch;margin:1.25rem 0 1rem}


/* ---------- Barra de pendientes (solo dev) ---------- */
mark.pendiente{background:#FBE7B5;color:#4A3500;padding:0 .25em;border-radius:2px;font:500 .8em/1.4 var(--texto);letter-spacing:0;text-transform:none}
.barra-dev{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:90;max-height:45vh;overflow:auto;background:#FBE7B5;color:#3A2A00;border:1px solid #D9B45A;border-radius:var(--radio);font:400 .82rem/1.45 var(--texto);box-shadow:0 2px 8px rgb(0 0 0 / .15)}
.barra-dev summary{padding:.6rem .9rem;cursor:pointer;font-weight:500}
.barra-dev ul{padding:0 1rem .9rem 2rem}
.es-dev .pie{padding-bottom:5rem}


/* ====================== Ronda 4b: fotos con intención, microanimaciones con arándanos, club y WhatsApp ====================== */
:root{--berry:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Ccircle r='13' fill='%231D3E53'/%3E%3Cpath d='M0-9.5l1.2 2.6 2.8.2-2.2 1.8.8 2.7L0-3.7l-2.6 1.5.8-2.7-2.2-1.8 2.8-.2Z' fill='%23C0D6BA'/%3E%3C/svg%3E")}

/* Mini arándano (sprite ic-arandano): el color del cuerpo es currentColor y el cáliz sale de --caliz */
.mini-arandano{width:1.05em;height:1.05em;flex:none;color:var(--navy);--caliz:var(--manteca)}
.pie .mini-arandano,.faq__mas{--caliz:var(--pastel-claro)}
.fondo-pastel .faq__mas{--caliz:var(--pastel)}
.sello-arandano{position:absolute;z-index:2;right:.9rem;top:.9rem;width:2.4rem;height:2.4rem;color:var(--navy);--caliz:var(--pastel);rotate:14deg;filter:drop-shadow(0 2px 4px rgb(29 62 83 / .25));pointer-events:none}
.perros__fotos{position:relative}
.perros__fotos>.sello-arandano{top:-.9rem;right:-.2rem}
.hero__marco{position:relative}

/* ---------- Fotos: tratamiento común, formas y marcos ---------- */
.marco img,.hero__marco img,.sangre__foto img{filter:contrast(1.04) saturate(1.08) sepia(.04)}   /* unifica la luz de fotos distintas, sin que se note */
.hero__marco.marco--organico{border-radius:var(--radio) var(--radio) 96px var(--radio)}
.que-es__foto .carrusel__pista{border-radius:96px var(--radio) var(--radio) var(--radio)}
.polaroid{position:relative;width:min(100%,22rem);margin:0 auto;padding:12px 12px 38px;background:#fff;border:1px solid var(--pastel);border-radius:6px;box-shadow:var(--sombra)}
.polaroid--izq{rotate:-2deg}
.polaroid--der{rotate:1.6deg}
.polaroid .marco{aspect-ratio:1;border-radius:2px}
.panel-q .polaroid{width:min(100%,17rem)}
.contenedor-separador{grid-column:1/-1}
.perros .separador{margin-top:var(--esp-2)}
.panel-q__foto{display:grid;place-items:center;aspect-ratio:auto;min-height:0;padding:var(--esp-3);background:var(--pastel-claro)}
.carrusel--polaroid .carrusel__pista{padding:14px 10px 18px;gap:var(--esp-2)}
.carrusel--polaroid .carrusel__slide{padding:10px 10px 30px;background:#fff;border:1px solid var(--pastel);border-radius:6px;box-shadow:var(--sombra)}
.carrusel--polaroid .carrusel__slide:nth-child(odd){rotate:-1.5deg}
.carrusel--polaroid .carrusel__slide:nth-child(even){rotate:1.5deg}
.carrusel--polaroid .marco{border-radius:2px}
.vitrina__fila{align-items:flex-end}
.vitrina__item--0{flex-basis:min(15rem,68vw)}
.vitrina__item--1{flex-basis:min(14rem,62vw)}
.vitrina__item--2{flex-basis:min(19rem,78vw)}
.vitrina__item--0 .vitrina__foto{aspect-ratio:4/5}
.vitrina__item--1 .vitrina__foto{aspect-ratio:1}
.vitrina__item--2 .vitrina__foto{aspect-ratio:16/10}
.vitrina__item:nth-child(even) .vitrina__foto{border-radius:var(--radio) var(--radio) 64px var(--radio)}
/* Foto a sangre completa: el único lugar de la home */
.sangre{padding:0}
.sangre__figura{position:relative;margin:0}
.sangre__foto{height:clamp(14rem,34vw,26rem);overflow:hidden;background:var(--pastel-claro)}
.sangre__foto picture{display:block;height:100%}
.sangre__foto img{width:100%;height:100%;object-fit:cover}
.sangre__pie{position:absolute;left:var(--margen);bottom:var(--esp-2);margin:0;padding:.4rem 1.1rem;border-radius:999px;background:var(--blanco);color:var(--navy);font:500 1rem/1.3 var(--display)}

/* ---------- Botones, menú y contacto ---------- */
.boton--arandano{gap:.55rem}
.nav__llegar{display:none}
.solo-escritorio{display:none}
@media (min-width:24.01em){.nav__llegar{display:list-item}}
@media (min-width:56em){.solo-escritorio{display:inline}}
.nav__lista a:not(.boton){position:relative}
.nav__lista a:not(.boton)::after{content:"";position:absolute;left:50%;bottom:3px;width:10px;height:10px;background:var(--berry) center/contain no-repeat;opacity:0;translate:-50% -5px;transition:opacity .25s var(--curva),translate .3s var(--curva);pointer-events:none}
.nav__lista a:not(.boton):hover::after,.nav__lista a:not(.boton):focus-visible::after{opacity:1;translate:-50% 0}
.como-llegar{scroll-margin-top:calc(var(--alto-cabecera) + var(--esp-1))}
.contacto{display:grid;gap:.5rem;margin:var(--esp-2) 0 var(--esp-3);list-style:none}
.contacto li{display:flex;align-items:center;gap:.6rem}
.contacto .icono{color:var(--pastel);width:1.15rem;height:1.15rem}
.contacto__rotulo{font:500 .78rem/1.3 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--pastel);min-width:1.15rem}
.contacto a{text-decoration:underline;text-decoration-color:var(--pastel);text-underline-offset:.2em}
.faq__mas{width:1.4rem;height:1.4rem;color:var(--navy);transition:rotate .35s var(--curva)}
.faq__item[open] .faq__mas{rotate:180deg}
.prod{position:relative}
.prod::after{content:"";position:absolute;top:.7rem;right:.7rem;width:1.7rem;height:1.7rem;background:var(--berry) center/contain no-repeat;opacity:0;scale:.3;transition:opacity .3s var(--curva),scale .4s var(--curva);pointer-events:none}
.prod:hover::after{opacity:1;scale:1}

/* Separador: una línea con 3 mini arándanos que se enhebran al entrar a viewport */
.separador{display:flex;align-items:center;gap:.75rem;margin-top:var(--esp-4)}
.separador__linea{flex:1;height:1px;background:var(--navy);opacity:.3;transform-origin:left center}
.separador__arandano{width:1.1rem;height:1.1rem;color:var(--navy);--caliz:var(--pastel)}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{position:fixed;z-index:60;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--forest);color:var(--blanco);box-shadow:var(--sombra);text-decoration:none}
.wa-flotante .icono{width:28px;height:28px}
.wa-flotante:hover{background:var(--navy)}
.wa-flotante--sin-numero{opacity:.55}
.es-dev .wa-flotante{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.pie{padding-bottom:calc(var(--esp-3) + 64px)}

/* ---------- De La Casa: frasco con arándanos cayendo ---------- */
.casa-banda{grid-template-columns:minmax(0,1fr)}
.frasco__fondo{display:grid;place-items:center}
.frasco{width:min(60%,11rem);height:auto;overflow:visible;transform-box:fill-box;transform-origin:50% 100%}
.frasco__tapa{fill:var(--navy)}
.frasco__vidrio{fill:var(--blanco);stroke:var(--navy);stroke-width:2}
.frasco__brillo{fill:none;stroke:var(--pastel);stroke-width:3;stroke-linecap:round;opacity:.9}
.frasco__arandano circle{fill:var(--navy)}
.frasco__arandano path{fill:var(--pastel)}
@media (min-width:64em){.casa-banda{grid-template-columns:minmax(0,1fr) 14rem;gap:var(--esp-5)}}

/* ====================== Movimiento: solo con prefers-reduced-motion: no-preference ====================== */
@media (prefers-reduced-motion:no-preference){
  .marco img{transition:scale 1.4s var(--curva)}
  .marco:hover img{scale:1.04}
  .boton--arandano:hover .mini-arandano{animation:rebote .6s var(--curva) 1}
  @keyframes rebote{0%{translate:0 0}35%{translate:0 -.45em}65%{translate:0 .08em}100%{translate:0 0}}

  /* Separador: la línea crece y los arándanos entran uno por uno */
  .js .separador__linea{scale:0 1}
  .js .separador__arandano{scale:0;opacity:0}
  .js .separador.es-visible .separador__linea{scale:1 1;transition:scale .9s var(--curva)}
  .js .separador.es-visible .separador__arandano{scale:1;opacity:1;transition:scale .5s var(--curva),opacity .3s}
  .js .separador.es-visible .separador__arandano:nth-of-type(1){transition-delay:.35s}
  .js .separador.es-visible .separador__arandano:nth-of-type(2){transition-delay:.55s}
  .js .separador.es-visible .separador__arandano:nth-of-type(3){transition-delay:.75s}

  /* Frasco: los arándanos caen con rebote corto, se acumulan y el frasco hace un pequeño squish (una sola vez, menos de 2,5 s) */
  .js .frasco__arandano{transform:translateY(-175px);opacity:0}
  .js .frasco.es-visible .frasco__arandano{animation:caer .7s var(--curva) calc(var(--i) * 140ms) 1 both}
  .js .frasco.es-visible{animation:squish .45s var(--curva) 1.45s 1 both}
  @keyframes caer{0%{transform:translateY(-175px);opacity:0}15%{opacity:1}72%{transform:translateY(0)}86%{transform:translateY(-5px)}100%{transform:translateY(0);opacity:1}}
  @keyframes squish{0%{scale:1}45%{scale:1.04 .98}100%{scale:1}}

  /* Header: el logo hace un pequeño giro al terminar de cargar (una vez) */
  .logo img{transform-origin:20% 50%}
  html.cargada .logo img{animation:giro .9s var(--curva) .25s 1 both}
  @keyframes giro{0%{rotate:0deg}35%{rotate:-7deg}70%{rotate:3deg}100%{rotate:0deg}}

  /* WhatsApp: pulso suave cada 8 s, máximo 3 veces por visita (arandanos.js) */
  .wa-flotante.pulsa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--forest);animation:pulso 1.4s ease-out 1}
  @keyframes pulso{from{scale:1;opacity:.7}to{scale:1.6;opacity:0}}

  /* Móvil: leve parallax vertical (máx. 12 px) en las fotos grandes */
  @supports (animation-timeline:view()){
    @media (max-width:47.99em){
      .hero__marco img,.sangre__foto img{scale:1.08;animation:paralaje-m linear both;animation-timeline:view();animation-range:cover}
      @keyframes paralaje-m{from{translate:0 -6px}to{translate:0 6px}}
    }
  }
}

/* ---------- Política de privacidad ---------- */
.legal{padding:calc(var(--alto-cabecera) + var(--esp-4)) 0 var(--esp-5)}
.legal__interior{max-width:46rem}
.legal__cabeza h1{font-size:var(--t-h1);margin:0 0 var(--esp-2)}
.legal__fecha{font-size:.9rem;color:var(--suave);margin:0 0 var(--esp-2)}
.legal section{margin-top:var(--esp-4)}
.legal h2{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);margin-bottom:var(--esp-2)}
.legal h3{font:500 1.05rem/1.3 var(--display);margin:var(--esp-2) 0 .4rem}
.legal p,.legal li{max-width:var(--medida)}
.legal ul{padding-left:1.25rem;display:grid;gap:.4rem;margin:0 0 var(--esp-2)}
.legal a{text-decoration:underline;text-decoration-color:var(--forest);text-underline-offset:.2em}
.legal__pie{margin-top:var(--esp-5)}

/* ---------- Movimiento reducido: todo visible, sin transformaciones ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .js .por-revelar{opacity:1;translate:none}
  .carrusel__pista{scroll-behavior:auto}
}

/* ---------- Impresión: nada oculto ---------- */
@media print{
  .js .por-revelar{opacity:1;translate:none}
  .cabecera,.barra-dev{display:none}
}

/* =====================================================================================================
   Ronda 5 · pictogramas ic-*, vitrina propia, escenas de "Para quedarse", De La Casa, frasco, micro
   ===================================================================================================== */
.pic{width:1.5rem;height:1.5rem;flex:none;color:var(--navy)}
.oscuro .pic{color:var(--pastel)}
.ilustracion{width:7.5rem;height:7.5rem;flex:none;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.il-suelo{fill:rgb(29 62 83 / .12);stroke:none}
.il-lleno{fill:var(--pastel-claro)}
.il-det{stroke:var(--forest)}
.il-punto{fill:var(--navy);stroke:none}
.il-arandano{fill:var(--navy)}
.il-cal{fill:var(--manteca);stroke:none}
.il-vapor{stroke:var(--forest);opacity:.7}
.oscuro .ilustracion{stroke:var(--pastel)}
.oscuro .il-lleno{fill:rgb(192 214 186 / .14)}
.oscuro .il-arandano{fill:var(--manteca)}
.oscuro .il-cal{fill:var(--navy)}
.hero__taza{position:absolute;right:-.5rem;top:-1.5rem;width:5.5rem;height:5.5rem;opacity:.9;pointer-events:none}
.hero__texto{position:relative}
.orbita-caja{position:relative;display:inline-flex}
.orbita{position:absolute;inset:-6px;pointer-events:none;opacity:0}
.orbita__arandano{position:absolute;left:50%;top:-9px;width:.9rem;height:.9rem;margin-left:-.45rem;--caliz:var(--manteca)}

/* Cabeza de Cómo llegar con el pin */
.como-llegar__cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--esp-2)}
.como-llegar__pin{width:5.5rem;height:5.5rem}

/* Datos con pictograma */
.datos-pic,.atributos{display:grid;gap:.9rem;list-style:none;margin:var(--esp-3) 0 0;padding:0}
.datos-pic li,.atributos li{display:flex;align-items:flex-start;gap:.75rem;line-height:1.35}
.datos-pic address{display:grid;font-style:normal}
.datos-pic strong{font-weight:500;font-size:1.15rem}
.datos-pic a,.atributos span{text-underline-offset:.2em}
.atributos{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.7rem 1.25rem;padding-top:var(--esp-3);border-top:1px solid rgb(192 214 186 / .25)}
.horarios__finde th{padding-top:.9rem;font-weight:400}

/* ---------- Vitrina: carrusel propio ---------- */
.vit{position:relative}
.vit .vitrina__fila{scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding-block:1rem 1.25rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem,#000 calc(100% - 2.5rem),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem,#000 calc(100% - 2.5rem),transparent 100%);overscroll-behavior-x:contain}
.vit .vitrina__fila::-webkit-scrollbar{display:none}
.vit--ini .vitrina__fila{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent 100%)}
.vit--fin .vitrina__fila{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem);mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem)}
.vit--ini.vit--fin .vitrina__fila{-webkit-mask-image:none;mask-image:none}
.vit .vitrina__fila.arrastra{cursor:grabbing;scroll-snap-type:none}
.vit .vitrina__fila.arrastra a,.vit .vitrina__fila.arrastra img{pointer-events:none}
.vit .vitrina__fila img{-webkit-user-drag:none;user-select:none}
.vit .vitrina__fila:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:var(--radio)}
.vitrina__item figure{position:relative;transition:translate .35s var(--curva)}
.vitrina__item .vitrina__foto{transition:box-shadow .35s var(--curva)}
.vitrina__item figure::after{content:"";position:absolute;top:-.5rem;right:.6rem;width:1.6rem;height:1.6rem;background:var(--berry) center/contain no-repeat;opacity:0;translate:0 .6rem;transition:opacity .3s,translate .4s var(--curva)}
@media (hover:hover){
  .vitrina__item:hover figure{translate:0 -6px}
  .vitrina__item:hover .vitrina__foto{box-shadow:0 14px 28px -12px rgb(29 62 83 / .35)}
  .vitrina__item:hover figure::after{opacity:1;translate:0 0}
}
.vit__controles{display:flex;align-items:center;gap:var(--esp-2);margin-top:var(--esp-2)}
.vit__barra{flex:1;height:3px;border-radius:3px;background:rgb(29 62 83 / .15);overflow:hidden}
.vit__barra span{display:block;height:100%;border-radius:3px;background:var(--navy);transform-origin:left;transform:scaleX(.08);transition:transform .2s linear}
.vit__flecha{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid var(--navy);border-radius:50%;background:transparent;color:var(--navy);cursor:pointer;transition:background-color .2s,color .2s,scale .2s var(--curva)}
.vit__flecha:hover:not(:disabled){background:var(--navy);color:var(--blanco)}
.vit__flecha:active:not(:disabled){scale:.92}
.vit__flecha:disabled{opacity:.3;cursor:default}
.vit__flecha:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.vit__icono{width:1.3rem;height:1.3rem}
.vit__icono--atras{rotate:180deg}
.vit:not(.vit--listo) .vit__controles{display:none}

/* ---------- Para quedarse: escenas y servicios ---------- */
.escena{display:block;width:min(100%,15rem);height:auto;margin-bottom:var(--esp-1);overflow:visible;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.e-lleno{fill:var(--pastel-claro)}
.e-det{stroke:var(--forest)}
.panel-q{transition:opacity .25s var(--curva)}
.servicios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-2);margin:var(--esp-3) 0 0;list-style:none;padding:0}
.servicio{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border:1px solid var(--navy);border-radius:var(--radio);background:var(--blanco);font:500 1.05rem/1.2 var(--display)}
.servicio__pic{width:2.5rem;height:2.5rem}
@media (min-width:48em){.servicios{grid-template-columns:repeat(4,minmax(0,1fr))}.servicio{flex-direction:column;align-items:flex-start;padding:1.25rem}.servicio__pic{width:3rem;height:3rem}}

/* ---------- De La Casa: el bloque que más invita ---------- */
.casa-hero{position:relative;isolation:isolate;overflow:hidden;background-color:var(--manteca)}
.casa-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--berry) 0 0/64px 64px;opacity:.07;-webkit-mask-image:linear-gradient(135deg,#000,transparent 70%);mask-image:linear-gradient(135deg,#000,transparent 70%)}
.casa-hero__arriba{display:grid;gap:var(--esp-4);align-items:center}
.casa-hero__texto{position:relative}
.casa-hero h2{font-size:clamp(2.4rem,1.6rem + 4vw,4.5rem);line-height:1;letter-spacing:-.03em;max-width:14ch}
.casa-hero__bajada{font:500 var(--t-grande)/1.3 var(--display);max-width:32ch;margin:var(--esp-2) 0 var(--esp-3)}
.casa-hero__chico{margin:var(--esp-2) 0 0;font-size:.95rem}
.casa-hero .rotulo{color:var(--navy)}
.boton--enorme{min-height:68px;padding:1rem 2.2rem;font-size:1.25rem;box-shadow:0 8px 0 -2px rgb(29 62 83 / .25)}
.boton--enorme .boton__flecha{width:1.4rem;height:1.4rem}
.casa-hero .boton--arandano{background:var(--navy);color:var(--blanco);border-color:var(--navy)}
.casa-hero .boton--arandano .mini-arandano{--caliz:var(--manteca);color:var(--blanco)}
.sticker{position:absolute;top:-1.5rem;right:0;display:grid;place-items:center;width:5.2rem;height:5.2rem;border-radius:50%;background:var(--navy);color:var(--manteca);font:600 1.05rem/1 var(--display);text-align:center;rotate:12deg;padding:.5rem}
.casa-hero__frasco{display:grid;place-items:center}
.casa-hero__frasco .frasco-caja{width:min(70%,17rem)}
.casa-hero__abajo{display:grid;gap:var(--esp-4);margin-top:var(--esp-5);align-items:center}
.pasos-pic{display:grid;gap:var(--esp-2);list-style:none;padding:0;margin:0}
.paso{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:var(--radio);background:var(--blanco);border:1px solid var(--navy)}
.paso__n{position:relative;display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:none}
.paso__arandano{position:absolute;inset:0;width:100%;height:100%;--caliz:var(--manteca)}
.paso__n b{position:relative;color:var(--blanco);font-size:.95rem;margin-top:.15rem}
.paso__pic{width:2.6rem;height:2.6rem}
.paso div{display:grid;gap:.1rem}
.paso strong{font:500 1.15rem/1.2 var(--display)}
.paso span:not(.paso__n){font-size:.95rem}
.tarjeta-demo{justify-self:center;width:min(100%,22rem);padding:1.4rem;border-radius:var(--radio);background:var(--crema);border:2px solid var(--navy);rotate:-3deg;box-shadow:8px 10px 0 -1px rgb(29 62 83 / .2)}
.tarjeta-demo__titulo{margin:0 0 .75rem;font:600 1.3rem var(--display)}
.tarjeta-demo__fila{display:flex;gap:.5rem}
.tarjeta-demo__fila .arandano{width:2.6rem;height:2.6rem}
.tarjeta-demo__cuenta{margin:.8rem 0 0;font-size:.95rem}
@media (min-width:48em){
  .casa-hero__arriba{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
  .casa-hero__abajo{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
}

/* ---------- Frasco ---------- */
.frasco-caja{position:relative;display:grid;justify-items:center;gap:.4rem}
.frasco{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation;cursor:grab;-webkit-tap-highlight-color:transparent}
.frasco__sombra{fill:rgb(29 62 83 / .18)}
.frasco__vidrio{fill:rgb(255 253 249 / .55);stroke:var(--navy);stroke-width:2.4;stroke-linejoin:round}
.frasco__tapa{fill:var(--navy)}
.frasco__brillo{fill:none;stroke:var(--blanco);stroke-width:3;stroke-linecap:round;opacity:.8}
.fb path{fill:var(--manteca)}
.fb--vacio circle{stroke:var(--navy);stroke-width:1.4;stroke-dasharray:3 3;opacity:.45}
.fb--vacio path{display:none}
.frasco__pista{display:flex;align-items:center;gap:.4rem;margin:0;font:500 .9rem var(--texto);color:var(--navy);transition:opacity .4s}
.frasco__pista.oculta{opacity:0}
.casa__frasco-ilustrado{width:min(60%,10rem);margin:0 auto var(--esp-2)}
.casa__frasco-ilustrado .frasco__pista{display:none}

/* ---------- Pictogramas en FAQ, pie, separador, reseñas ---------- */
.faq__pregunta{display:flex;align-items:center;gap:.75rem}
.faq__pic{width:1.6rem;height:1.6rem;transition:rotate .3s var(--curva),scale .3s var(--curva)}
.pie__dato{display:inline-flex;align-items:center;gap:.5rem}
.pie__dato .pic{width:1.2rem;height:1.2rem;color:var(--pastel)}
.pie__arandanos{display:flex;justify-content:center;gap:.6rem;width:min(100% - 2 * var(--margen),var(--ancho));margin:var(--esp-3) auto 0;overflow:hidden}
.pie__bola{width:1rem;height:1rem;opacity:.55;--caliz:var(--pastel-claro)}
.separador__pic{width:1.3rem;height:1.3rem}
.estrellas--llenar{display:inline-flex;gap:2px}
.estrellas--llenar .estrella{width:1.5rem;height:1.5rem}
.estrella-i{display:inline-flex}
.rastro{position:fixed;z-index:60;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--berry) center/contain no-repeat;pointer-events:none;animation:rastro .9s ease-out both}

/* ---------- Animaciones (solo sin prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rastro{0%{opacity:.9;scale:1}100%{opacity:0;scale:.3;translate:0 14px}}
  @keyframes orbitar{0%{opacity:1;rotate:0deg}100%{opacity:0;rotate:360deg}}
  @keyframes vapor{0%{opacity:0;translate:0 6px}40%{opacity:.8}100%{opacity:0;translate:0 -10px}}
  @keyframes pop{0%{scale:0;opacity:0}70%{scale:1.15;opacity:1}100%{scale:1;opacity:1}}
  @keyframes cae{0%{translate:0 -30px;opacity:0}70%{translate:0 3px;opacity:1}100%{translate:0 0;opacity:1}}
  @keyframes crece{0%{scale:1 0;opacity:0}100%{scale:1 1;opacity:1}}
  @keyframes dibuja{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
  @keyframes balanceo{0%,100%{rotate:0deg}30%{rotate:-8deg}70%{rotate:6deg}}
  @keyframes brinda-i{0%{translate:-20px 0;rotate:-14deg}60%{translate:6px 0;rotate:6deg}100%{translate:0 0;rotate:0deg}}
  @keyframes brinda-d{0%{translate:20px 0;rotate:14deg}60%{translate:-6px 0;rotate:-6deg}100%{translate:0 0;rotate:0deg}}
  @keyframes destello{0%,100%{opacity:0;scale:.4}50%{opacity:.55;scale:1.3}}
  @keyframes enciende{0%{opacity:.1}100%{opacity:1}}
  @keyframes salta{0%,100%{translate:0 0}40%{translate:0 -10px}}
  @keyframes rebote-tile{0%{translate:0 0}40%{translate:0 -8px}70%{translate:0 2px}100%{translate:0 0}}
  @keyframes boca{0%,100%{rotate:0deg}50%{rotate:-4deg}}
  @keyframes pulsa-sticker{0%,100%{scale:1}50%{scale:1.08}}
  @keyframes cuenta-fila{from{scale:0}to{scale:1}}

  /* Escenas: estado inicial oculto solo con JS; arrancan al activar la solapa (.es-activa) y corren una vez */
  .js .panel-q .escena [class*="a-"]{opacity:0;transform-box:fill-box;transform-origin:center}
  .js .panel-q .escena .a-dibuja{opacity:1;stroke-dasharray:100;stroke-dashoffset:100}
  .js .panel-q.es-activa .escena .a-cae{animation:cae .5s var(--curva) calc(var(--i,0) * 90ms) both}
  .js .panel-q.es-activa .escena .a-sale{animation:cae .5s var(--curva) calc(var(--i,0) * 90ms) both,sale 1s ease-in-out .9s 1 both}
  @keyframes sale{50%{translate:6px 0}}
  .js .panel-q.es-activa .escena .a-balanceo{opacity:1;animation:balanceo 1.4s ease-in-out .6s 1 both;transform-origin:50% 0}
  .js .panel-q.es-activa .escena .a-dibuja{animation:dibuja .8s ease-out calc(var(--i,0) * 160ms) both}
  .js .panel-q.es-activa .escena .a-lapicera{opacity:1;animation:salta .9s ease-in-out .3s 2 both}
  .js .panel-q.es-activa .escena .a-enciende{opacity:1;animation:enciende .9s ease-out .6s both}
  .js .panel-q.es-activa .escena .a-fade{opacity:1}
  .js .panel-q.es-activa .escena .a-pop{animation:pop .45s var(--curva) calc(var(--i,0) * 90ms) both}
  .js .panel-q.es-activa .escena .a-crece{transform-origin:50% 100%;animation:crece .5s var(--curva) calc(var(--i,0) * 110ms) both}
  .js .panel-q.es-activa .escena .a-enchufa{opacity:1}
  .js .panel-q.es-activa .escena .a-destello{animation:destello 1.2s ease-in-out .7s 2 both}
  .js .panel-q.es-activa .escena .a-vapor{animation:vapor 2s ease-in-out calc(var(--i,0) * 300ms) 2 both}
  .js .panel-q.es-activa .escena .a-brinda-i{opacity:1;animation:brinda-i .8s var(--curva) both}
  .js .panel-q.es-activa .escena .a-brinda-d{opacity:1;animation:brinda-d .8s var(--curva) both}
  .js .panel-q.es-activa .escena .a-punto{animation:salta .8s ease-in-out calc(1s + var(--i,0) * 140ms) 2 both}
  .js .panel-q.es-activa .escena .a-punto{opacity:1}

  /* Ilustraciones */
  .il-vapor{animation:vapor 2.6s ease-in-out infinite}
  .il-vapor.v2{animation-delay:.5s}.il-vapor.v3{animation-delay:1s}
  .il-cola{transform-box:fill-box;transform-origin:0 100%;animation:boca 1.8s ease-in-out infinite}
  .il-pin{transform-box:fill-box;transform-origin:50% 100%;animation:salta 2.4s ease-in-out infinite}

  /* Hero */
  .orbita-caja:hover .orbita{animation:orbitar 1.1s ease-out 1}
  .boton{transition:translate .25s var(--curva),box-shadow .25s var(--curva),background-color .25s,color .25s}
  .boton:hover{translate:0 -2px}
  .boton:active{translate:0 1px}
  .boton--enorme:hover{box-shadow:0 12px 0 -2px rgb(29 62 83 / .25)}
  .hero__taza .il-vapor{animation-duration:3.2s}

  /* Servicios: tiles con rebote escalonado al revelarse */
  .js .servicios.es-visible .servicio__pic{animation:rebote-tile .7s var(--curva) calc(var(--i,0) * 90ms + .2s) both}
  .servicio{transition:translate .25s var(--curva),background-color .25s}
  .servicio:hover{translate:0 -3px;background:var(--pastel-claro)}

  /* Probar: tilt */
  [data-tilt]>*{transition:transform .25s var(--curva)}
  [data-tilt]>*:hover{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

  /* Vitrina: aparición escalonada */
  .js .vitrina__fila.es-visible .vitrina__item{animation:cae .6s var(--curva) calc(var(--i,0) * 70ms) both}

  /* De La Casa */
  .sticker{animation:pulsa-sticker 3s ease-in-out infinite}
  .js .pasos-pic.es-visible .paso__n{animation:pop .5s var(--curva) calc(var(--i,0) * 160ms + .2s) both}
  .js .tarjeta-demo{transition:rotate .5s var(--curva)}
  .tarjeta-demo:hover{rotate:0deg}
  .js .casa-hero.es-visible .tarjeta-demo__fila .arandano{animation:pop .4s var(--curva) both}

  /* Reseñas: estrellas que se llenan */
  .js .resenas__promedio.es-visible .estrella-i{animation:pop .4s var(--curva) calc(var(--i,0) * 110ms + .3s) both}

  /* FAQ */
  .faq__item[open] .faq__pic{rotate:-8deg;scale:1.15}
  .faq__item summary:hover .faq__pic{rotate:-6deg}

  /* Cómo llegar: filas de horarios que entran */
  .js .horarios.es-visible tr{animation:cae .5s var(--curva) calc(var(--i,0) * 70ms) both}
  .mapa__pin{transform-box:fill-box;transform-origin:50% 100%;animation:salta 2.6s ease-in-out infinite}

  /* Footer: la fila de arándanos rueda */
  .pie__bola{animation:salta 3s ease-in-out infinite;animation-delay:calc(var(--k,0) * 120ms)}
  .pie__bola:nth-child(odd){animation-delay:.6s}
  .pie__arandanos:hover .pie__bola{animation-duration:1.2s}

  /* Menú */
  .nav__lista a:not(.boton){transition:translate .25s var(--curva)}
  .nav__lista a:not(.boton):hover{translate:0 -2px}
}
@media (prefers-reduced-motion:reduce){
  .panel-q .escena [class*="a-"]{opacity:1}
  .panel-q .escena .a-dibuja{stroke-dasharray:none}
  .rastro,.orbita{display:none}
}
.horarios__tabla caption{display:flex;align-items:center;gap:.5rem;padding:0 0 .4rem;text-align:left}
.casa-hero::before{opacity:.05}
.paso__n b{margin-top:.5rem;font-size:.85rem}
@media (max-width:47.99em){.hero__taza{display:none}}

.volver-arriba{position:fixed;z-index:59;right:16px;bottom:calc(16px + 56px + 12px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:48px;height:48px;margin-right:4px;border:1px solid var(--navy);border-radius:50%;background:var(--blanco);color:var(--navy);cursor:pointer;box-shadow:var(--sombra);transition:background-color .2s,color .2s}
.volver-arriba[hidden]{display:none}
.volver-arriba:hover{background:var(--navy);color:var(--blanco)}
.volver-arriba__icono{width:1.3rem;height:1.3rem;rotate:-90deg}
.volver-arriba:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media print{.volver-arriba,.wa-flotante{display:none}}