/* Beber Salud V2 · Movimiento (1.3, 03/11/2026)
   Estilo «nivel de agua»: las cosas suben y se asientan como el agua en un vaso. Sin rebotes, sin giros, sin parallax.
   Firma: las fotos se llenan de abajo arriba (clip-path), las líneas de la rejilla se dibujan de izquierda a derecha
   y los titulares suben línea a línea tras una máscara.
   Reglas: solo transform, opacity y clip-path; nada se oculta sin JS (html.bs-js); el héroe (LCP) nunca se oculta;
   con «reducir movimiento» todo aparece quieto. Lo activa js/motion.js. */

:root{
  --bs-ease-agua:cubic-bezier(.2,.8,.2,1);   /* la curva de la casa: entra decidida y se asienta despacio */
  --bs-ease-salida:cubic-bezier(.4,0,1,1);
  --bs-dur-fast:160ms;     /* hover y color */
  --bs-dur-base:280ms;     /* menús, paneles */
  --bs-dur-reveal:700ms;   /* aparición de bloques */
  --bs-dur-fill:1000ms;    /* fotos que se llenan, líneas que se dibujan */
  --bs-rise:16px;          /* cuánto suben los bloques */
  --bs-stagger:70ms;       /* escalonado entre hermanos (máx. 6) */
  --bs-line-stagger:80ms;  /* entre líneas de un titular */
}
@media (max-width:899.98px){:root{--bs-rise:10px;--bs-dur-reveal:600ms;--bs-dur-fill:850ms}}

/* 1 · Bloques que aparecen */
.bs-js [data-bs-reveal]{opacity:0;transform:translate3d(0,var(--bs-rise),0);transition:opacity var(--bs-dur-reveal) var(--bs-ease-agua),transform var(--bs-dur-reveal) var(--bs-ease-agua);transition-delay:var(--bs-d,0ms)}
.bs-js [data-bs-reveal].is-in{opacity:1;transform:none}

/* 2 · Fotos que se llenan (firma) */
.bs-js [data-bs-reveal="fill"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path var(--bs-dur-fill) var(--bs-ease-agua);transition-delay:var(--bs-d,0ms)}
.bs-js [data-bs-reveal="fill"] img{transform:scale(1.06);transition:transform calc(var(--bs-dur-fill) * 1.4) var(--bs-ease-agua)}
.bs-js [data-bs-reveal="fill"].is-in{clip-path:inset(0 0 0 0)}
.bs-js [data-bs-reveal="fill"].is-in img{transform:none}

/* 3 · Titulares línea a línea (el JS parte el texto en .bs-ln > .bs-ln__i) */
.bs-ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.bs-js [data-bs-reveal="lines"]{opacity:1;transform:none}
.bs-js [data-bs-reveal="lines"] .bs-ln__i{display:block;transform:translate3d(0,105%,0);transition:transform var(--bs-dur-fill) var(--bs-ease-agua);transition-delay:calc(var(--bs-i,0) * var(--bs-line-stagger))}
.bs-js [data-bs-reveal="lines"].is-in .bs-ln__i{transform:none}

/* 4 · Las líneas de la rejilla se dibujan */
.bs-js .bs-sechead[data-bs-reveal],.bs-js .bs-section--rule>.bs-wrap[data-bs-reveal]{opacity:1;transform:none}
.bs-js .bs-sechead[data-bs-reveal]{border-top-color:transparent;position:relative}
.bs-js .bs-sechead[data-bs-reveal]::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--bs-fg);transform:scaleX(0);transform-origin:left;transition:transform var(--bs-dur-fill) var(--bs-ease-agua)}
[data-surface="dark"] .bs-sechead::after{background:rgba(255,255,255,.35)}
.bs-js .bs-sechead[data-bs-reveal].is-in::after{transform:none}
.bs-js .bs-sechead[data-bs-reveal]>*{opacity:0;transition:opacity var(--bs-dur-reveal) var(--bs-ease-agua) 200ms}
.bs-js .bs-sechead[data-bs-reveal].is-in>*{opacity:1}
.bs-js .bs-section--rule>.bs-wrap[data-bs-reveal]::before{transform:scaleX(0);transform-origin:left;transition:transform var(--bs-dur-fill) var(--bs-ease-agua)}
.bs-js .bs-section--rule>.bs-wrap[data-bs-reveal].is-in::before{transform:none}

/* 5 · El héroe no se oculta nunca: solo se asienta al cargar */
@keyframes bs-asienta{from{opacity:.001;transform:translate3d(0,.3em,0)}to{opacity:1;transform:none}}
.bs-js .bs-hero-in>*{animation:bs-asienta 900ms var(--bs-ease-agua) both}
.bs-js .bs-hero-in>*:nth-child(2){animation-delay:80ms}
.bs-js .bs-hero-in>*:nth-child(3){animation-delay:160ms}
.bs-js .bs-hero-in>*:nth-child(n+4){animation-delay:240ms}

/* 6 · Microinteracciones */
.bs-btn{transition:background-color var(--bs-dur-fast) ease,color var(--bs-dur-fast) ease,border-color var(--bs-dur-fast) ease,transform var(--bs-dur-fast) var(--bs-ease-agua)}
.bs-btn:active{transform:scale(.98)}
:where(.bs p,.bs-prose li) a:where(:not(.bs-btn)){transition:color var(--bs-dur-fast) ease,text-decoration-thickness var(--bs-dur-fast) ease}
:where(.bs p,.bs-prose li) a:where(:not(.bs-btn)):hover{text-decoration-thickness:2px}
@media (hover:hover) and (pointer:fine){
  .bs-media img{transition:transform 1100ms var(--bs-ease-agua)}
  a:hover>.bs-media img,.bs-media--hover:hover img{transform:scale(1.03)}
  .bs-icon{transition:transform var(--bs-dur-base) var(--bs-ease-agua)}
  a:hover>.bs-icon,.bs-btn:hover .bs-icon{transform:translate3d(2px,0,0)}
}
.bs-chip{transition:background-color var(--bs-dur-fast) ease,color var(--bs-dur-fast) ease}

/* 7 · Transiciones entre páginas (View Transitions entre documentos: Chrome, Edge, Safari 18+; en el resto, carga normal) */
@view-transition{navigation:auto}
.bs-nav{view-transition-name:bs-cabecera}
::view-transition-old(root){animation:bs-vt-sale 200ms var(--bs-ease-salida) both}
::view-transition-new(root){animation:bs-vt-entra 420ms var(--bs-ease-agua) 60ms both}
@keyframes bs-vt-sale{to{opacity:0}}
@keyframes bs-vt-entra{from{opacity:0;transform:translate3d(0,8px,0)}}
::view-transition-group(*){animation-duration:520ms;animation-timing-function:var(--bs-ease-agua)}
/* Elemento compartido (la foto del producto vuela de la tarjeta a la ficha): style="view-transition-name:prod-<ID>" en las dos páginas */

/* 8 · Reducir movimiento: todo quieto y visible */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .bs-js [data-bs-reveal],.bs-js [data-bs-reveal] *,.bs-js .bs-hero-in>*{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}
  .bs-js .bs-sechead[data-bs-reveal]{border-top-color:var(--bs-fg)}
  .bs-js .bs-sechead[data-bs-reveal]::after{display:none}
  .bs-btn:active{transform:none}
}

/* Tema: la cabecera NO lleva view-transition-name: crearía una raíz de fondo y el megamenú de cristal no podría desenfocar la página. */