/* ==========================================================================
   Peptáre · componentes.css
   ========================================================================== */

/* El ritmo no es uniforme: la sección de análisis de lote, que es el argumento
   de la marca, tiene más aire que el resto. Un espaciado idéntico en las seis
   secciones se lee como plantilla. */
.seccion { padding-block: var(--e-8); }

/* --------------------------------------------------------------------------
   ORIGEN
   Tres pilares: icono, título y un párrafo corto. El ámbar vuelve a marcar lo
   verificable —el origen y el certificado—, y el envío se queda en gris porque
   es un servicio, no una credencial. Es la misma regla que en la sección de
   confianza: si el ámbar se reparte, deja de significar.
   -------------------------------------------------------------------------- */

.pilares {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  list-style: none;
  padding-inline: 0;
}

.pilar { display: grid; align-content: start; gap: var(--e-3); }

.pilar__icono {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--tinte);
  color: var(--texto-tenue);
}
.pilar[data-credencial] .pilar__icono {
  background: var(--acento-suave);
  color: var(--acento);
}

.pilar__titulo {
  font-size: var(--t-cuerpo-g);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.pilar__texto {
  font-size: var(--t-menor);
  line-height: 1.6;
  color: var(--texto-tenue);
  max-inline-size: 42ch;
}

@media (min-width: 40rem) {
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); }
}

/* --------------------------------------------------------------------------
   CABECERA DE SECCIÓN
   Titular e intro, uno al lado del otro.
   Antes iban apilados y el párrafo se cortaba a 62 caracteres, así que bajo un
   titular de 1200px quedaba un hueco de 680px justo encima de un bloque que sí
   ocupa todo el ancho. Eso es lo que se lee como "todo corrido a un lado".
   Alargar el párrafo no es opción —a 1200px no se lee—, así que se reparte el
   ancho entre los dos.
   -------------------------------------------------------------------------- */
.cabecera {
  margin-bottom: var(--e-6);
  /* Una sola medida para marcador, titular y párrafo. Antes cada uno decidía
     su ancho —el titular llegaba a 800px, el párrafo se cortaba en 623— y los
     tres bordes derechos distintos seguidos se leen como desaliño. Con una
     medida común, el aire de la derecha pasa a ser deliberado. */
  max-inline-size: 46rem;
}
/* Los hijos mandan sobre su propio ancho; aquí lo pone la cabecera. */
.cabecera > .titulo-seccion,
.cabecera > .entrada {
  max-inline-size: none;
  margin-bottom: 0;
}
#lote { padding-block: var(--e-9); }

/* --------------------------------------------------------------------------
   BARRA
   Píldora flotante, con el radio y la sombra de la referencia. Es lo primero
   que fija el parecido, porque enmarca toda la página.
   -------------------------------------------------------------------------- */

.barra {
  position: sticky;
  top: var(--e-4);
  z-index: 40;
  inline-size: min(100% - 2.5rem, var(--contenedor));
  margin-inline: auto;
  margin-block-start: var(--e-4);
}

.barra__interior {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--superficie);
  border-radius: var(--r-pill);
  box-shadow: var(--sombra-nav);
  padding: 0.55rem 0.55rem 0.55rem var(--e-5);
}

.logo { display: block; text-decoration: none; flex: none; margin-inline-end: auto; }
.logo img { inline-size: clamp(5.25rem, 7.5vw, 6.5rem); block-size: auto; }

.nav { display: flex; gap: var(--e-1); }
.nav a {
  font-size: var(--t-menor);
  font-weight: 500;
  text-decoration: none;
  color: var(--texto-tenue);
  padding: 0.5rem var(--e-3);
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--curva), background-color var(--dur) var(--curva);
}
.nav a:hover { color: var(--tinta); background: var(--tinte); }

.idioma {
  display: flex; gap: 2px;
  background: var(--tinte);
  border-radius: var(--r-pill);
  padding: 2px; flex: none;
}
.idioma button {
  border: 0; background: transparent; font: inherit;
  font-size: var(--t-marcador); font-weight: 600;
  color: var(--texto-tenue);
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}
.idioma button[aria-pressed='true'] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1); }

.carrito-cuenta {
  display: inline-grid; place-items: center;
  min-inline-size: 1.35rem; block-size: 1.35rem;
  padding-inline: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--acento); color: #fff;
  font-size: 0.75rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.carrito-cuenta[hidden] { display: none; }

/* El carrito va solo con icono y contador: el nombre accesible sigue en
   aria-label. Se mantiene el área táctil mínima aunque no lleve texto. */
.boton--carrito {
  min-inline-size: var(--toque);
  min-block-size: var(--toque);
  padding-inline: var(--e-3);
}

@media (max-width: 62rem) { .nav { display: none; } }
@media (max-width: 40rem) {
  /* El mismo canal que .contenedor: si la barra va a 12px y el texto a 14px,
     los dos ejes se ven y la página parece mal montada. */
  .barra { inline-size: min(100% - var(--gutter), var(--contenedor)); top: var(--e-2); margin-block-start: var(--e-2); }
  .barra__interior { padding-inline-start: var(--e-4); gap: var(--e-2); }
}

/* --------------------------------------------------------------------------
   BOTONES
   El principal es negro, no del color de marca. Es lo que mantiene la página
   monocroma y lo que hace la referencia.
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  font-family: var(--sans);
  font-size: var(--t-menor);
  font-weight: 600;
  line-height: 1;
  padding: 1rem var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--curva),
              border-color var(--dur) var(--curva),
              color var(--dur) var(--curva),
              transform var(--dur) var(--curva);
}

.boton--primario { background: var(--accion); color: #fff; }
.boton--primario:hover { background: var(--accion-hover); }

.boton--secundario { background: var(--superficie); border-color: var(--linea); color: var(--tinta); }
.boton--secundario:hover { border-color: var(--tinta); }

.boton--pequeno { padding: 0.65rem var(--e-4); font-size: var(--t-marcador); }
.boton--ancho { inline-size: 100%; }
.boton:active { transform: translateY(1px); }

.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Acceso directo a WhatsApp: segunda vía, más corta que el carrito. */
.enlace-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding-block: var(--e-2);
  font-size: var(--t-marcador);
  font-weight: 500;
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--curva);
}
.enlace-whatsapp:hover { color: var(--tinta); }
.enlace-whatsapp svg { flex: none; }

/* A 390px los dos botones del hero caben en una fila (342px de 362 útiles), así
   que apilarlos a partir de 480px era adelantarse: se comía 59px de alto justo
   donde el presupuesto vertical es más escaso y empujaba los botones bajo el
   pliegue. A partir de 22rem se envuelven solos gracias al flex-wrap. */
@media (max-width: 22rem) {
  .grupo-botones { flex-direction: column; align-items: stretch; }
  .grupo-botones .boton { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* Una sola columna: el texto y, debajo, el vídeo a su proporción natural.
   El vídeo ya no es la capa de fondo de nada, así que no hay velo ni solape. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  /* Mismo relleno inferior que .seccion, para que el hueco hasta la sección
     siguiente sea el de la serie. Tenía uno propio más corto, resto de cuando
     el vídeo iba a sangre y el hero se sostenía solo. */
  padding-block: var(--e-3) var(--e-8);
}

.hero__texto {
  padding-inline: calc(var(--gutter) / 2);
}

.hero__titulo { margin-bottom: var(--e-4); }
.hero__entrada { margin-bottom: var(--e-5); }
.hero__acciones { animation: aparecer var(--dur-aparicion) var(--curva) both; animation-delay: 420ms; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.hero__linea { display: block; overflow: hidden; }
.hero__linea > span {
  display: block;
  animation: revelar-linea var(--dur-linea) var(--curva) both;
  animation-delay: calc(100ms + var(--i) * 130ms);
}
@keyframes revelar-linea { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* El vídeo, a la proporción del material (1920x1080). La caja y el contenido
   comparten proporción, así que object-fit no recorta NADA: se ve el plano
   entero. Es lo contrario de lo que hacía antes, cuando la caja era vertical
   y el 16:9 se recortaba a un 42% de su anchura. */
.hero__video {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--tinte);
}

@media (min-width: 62rem) {
  /* Dos columnas. Apilado, el 16:9 a ancho de contenedor mide 675px de alto y
     el hero se va a 1250: con un monitor de 1000 se veía menos de la mitad del
     vídeo. En dos columnas el vídeo mide ~350 de alto, o sea que el hero entero
     cabe en pantalla y no hay que bajar para verlo.
     El texto se queda con algo menos de la mitad porque su titular a 72px
     necesita ~440px para no partirse en tres líneas. */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: var(--e-8);
    row-gap: 0;
    inline-size: min(100% - var(--gutter), var(--contenedor));
    margin-inline: auto;
    /* Igual que .seccion, para que el ritmo vertical no se rompa tras el hero. */
    padding-block: var(--e-7) var(--e-8);
  }

  /* Colocación explícita: el texto a la izquierda y el vídeo a la derecha,
     sin depender del orden del DOM (donde el vídeo va primero, que es lo
     correcto en móvil). */
  .hero__texto { grid-column: 1; grid-row: 1; padding-inline: 0; }
  .hero__envase { grid-column: 2; grid-row: 1; }

  .hero__video { border-radius: var(--r-grande); }

  .hero__entrada { max-inline-size: 52ch; }
}

/* --------------------------------------------------------------------------
   CONFIANZA
   Cuatro bloques: icono, cifra y dos palabras. El mando lo tiene la cifra, que
   es la prueba; el rótulo la acompaña pegado a ella, formando una sola unidad,
   y el icono queda arriba separado.

   El ámbar —que en este sistema significa "esto pasó por un laboratorio"— va en
   el filete superior y en el icono de las dos credenciales verificables: la
   pureza y el certificado por lote. Las otras dos llevan el filete en gris, así
   que la serie se lee como una regla continua con dos tramos encendidos.
   -------------------------------------------------------------------------- */

/* La sección va sobre una placa de tinte, a sangre. Es el único tramo de la
   página que no es blanco, y por eso se lee como una parada y no como un
   bloque más. */
.confianza { background: var(--tinte); }

.confianza .titulo-seccion { margin-bottom: 0; }

.indicadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--e-5);
  margin-block-start: var(--e-7);
  list-style: none;
  padding-inline: 0;
}

.indicador {
  display: grid;
  align-content: start;
  /* El filete superior es la estructura de la serie. En la credencial va en
     acento y más grueso: es lo único de la sección que el visitante puede
     comprobar, y tiene que ser lo primero que ve. */
  border-block-start: 2px solid var(--linea);
  padding-block-start: var(--e-5);
}
.indicador[data-credencial] { border-block-start-color: var(--acento); }

.indicador__icono {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--r-pill);
  /* Blanco y no --tinte: sobre la placa de tinte, un aro del mismo color
     desaparece y el icono queda flotando sin soporte. */
  background: var(--lienzo);
  color: var(--texto-suave);
  margin-block-end: var(--e-5);
}
.indicador[data-credencial] .indicador__icono {
  background: var(--acento-suave);
  color: var(--acento);
}
.indicador__icono svg { inline-size: 1.125rem; block-size: 1.125rem; }

/* La cifra manda. Es lo único de la sección que no es texto corrido. */
.indicador__cifra {
  display: block;
  font-size: clamp(2.5rem, 4.2vw, 3.5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* Pegado a la cifra, no separado: los dos forman un solo bloque de lectura. */
.indicador__rotulo {
  display: block;
  margin-block-start: var(--e-2);
  font-size: var(--t-cuerpo);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.confianza__cobertura {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  /* Sin el tope de 62 caracteres que hereda de `p`: el filete de arriba tiene
     que medir lo mismo que la regla de los indicadores, o quedan dos reglas de
     largos distintos en la misma sección. */
  max-inline-size: none;
  margin-block-start: var(--e-7);
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linea);
  font-size: var(--t-menor);
  color: var(--texto-tenue);
}
.confianza__globo { display: grid; place-items: center; color: var(--texto-suave); }

@media (min-width: 40rem) {
  .indicadores {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;   /* sin hueco: los cuatro filetes forman una sola regla */
  }
  .indicador:not(:first-child) { padding-inline-start: var(--e-6); }
  .indicador:not(:last-child) { padding-inline-end: var(--e-6); }
}

/* --------------------------------------------------------------------------
   FRANJA
   El vídeo ocupa el ancho completo: la sección no lleva canal lateral, solo el
   relleno vertical del ritmo general, así que llega de borde a borde. La caja
   tiene la proporción del material, de modo que object-fit no recorta nada.
   -------------------------------------------------------------------------- */

/* Dentro del contenedor y con esquinas, no a sangre. A ancho completo el 16:9
   mide 810px en un monitor de 1440 y se come la pantalla entera; contenido son
   675 y, sobre todo, deja de leerse como un muro para leerse como una pieza.
   Alineado con el texto de arriba y de abajo, que es lo que ata la página. */
/* El marco mide lo que el vídeo y centra el eje: el botón de sonido se ancla a
   su esquina, no a la de la sección. */
.franja__marco {
  position: relative;
  inline-size: min(100% - var(--gutter), var(--contenedor));
  margin-inline: auto;
}

/* Botón de sonido. El vídeo arranca solo, y un navegador no deja arrancar solo
   un vídeo con sonido: por eso empieza en silencio y el sonido queda a un
   toque. Va abajo a la derecha, la esquina que el vídeo deja libre. */
.franja__sonido {
  position: absolute;
  inset-block-end: var(--e-4);
  inset-inline-end: var(--e-4);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: var(--toque);
  block-size: var(--toque);
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color var(--dur) var(--curva);
}
.franja__sonido:hover { background: rgba(10, 10, 10, 0.75); }
.franja__sonido:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.franja__icono { display: grid; place-items: center; grid-area: 1 / 1; }
.franja__icono--on { display: none; }
.franja__sonido[aria-pressed='true'] .franja__icono--off { display: none; }
.franja__sonido[aria-pressed='true'] .franja__icono--on { display: grid; }

.franja__video {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-grande);
  background: var(--tinte);
}

/* Servicio. Cuatro promesas, no credenciales: por eso van SIN ámbar —ese color
   significa "pasó por un laboratorio"— y con el icono en blanco elevado sobre
   la placa de tinte. Destacan por contraste, no gastando el acento. */
.servicios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--e-4);
  margin-block-start: var(--e-7);
  padding-block-start: var(--e-6);
  border-block-start: 1px solid var(--linea);
  list-style: none;
  padding-inline: 0;
}

/* Pila vertical, igual que los indicadores de arriba. En fila, el icono se
   centraba contra un bloque de altura distinta en cada item —el primero lleva
   nota de dos líneas y los otros no— y los rótulos quedaban a saltos. */
.servicio {
  display: grid;
  align-content: start;
  gap: var(--e-2);
}

.servicio__icono {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-pill);
  background: var(--lienzo);
  color: var(--tinta);
  box-shadow: var(--sombra-1);
}

.servicio__rotulo {
  font-size: var(--t-menor);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.servicio__nota {
  font-size: var(--t-marcador);
  color: var(--texto-tenue);
}

@media (min-width: 40rem) {
  .servicios { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .servicio + .servicio {
    padding-inline-start: var(--e-4);
    border-inline-start: 1px solid var(--linea);
  }
}

/* --------------------------------------------------------------------------
   CUESTIONARIO
   -------------------------------------------------------------------------- */

.cuestionario__rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-4);
}

.necesidad {
  /* Columna y no rejilla: el enlace de acción se ancla abajo con
     `margin-block-start: auto`. Con rejilla, los cuatro enlaces caían a
     alturas distintas porque cada beneficio ocupa un número de líneas
     diferente, y la fila de enlaces quedaba escalonada. */
  display: flex; flex-direction: column; gap: var(--e-3);
  text-align: start;
  padding: var(--e-5);
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  font-family: var(--sans);
  color: var(--texto);
  cursor: pointer;
  transition: box-shadow var(--dur) var(--curva),
              border-color var(--dur) var(--curva),
              transform var(--dur) var(--curva);
}
.necesidad:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); }
.necesidad[aria-pressed='true'] { box-shadow: var(--sombra-2), inset 0 0 0 2px var(--acento); }

.necesidad__mecanismo { color: var(--acento); block-size: 2rem; }
.necesidad__nombre { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--tinta); line-height: 1.25; }
.necesidad__detalle { font-size: var(--t-menor); line-height: 1.5; color: var(--texto-tenue); }
.necesidad__accion { font-size: var(--t-marcador); font-weight: 500; color: var(--texto-tenue); margin-block-start: auto; }

@media (max-width: 62rem) { .cuestionario__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .cuestionario__rejilla { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   TARJETAS DE PRODUCTO
   -------------------------------------------------------------------------- */

.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e-5);
}

/* Cuatro productos, media anchura cada uno: dos filas de dos. Con el reparto
   anterior —dos a media y el resto a un tercio— las dos últimas dejaban dos
   columnas vacías al final de la fila. */
/* Profundidad 3D al pasar el puntero. La tarjeta se inclina y sus piezas se
   separan en planos: la foto flota por delante, el texto se queda atrás. El
   volumen lo produce esa separación, no el giro. Las variables las escribe
   profundidad.js; sin JavaScript valen 0 y la ficha se ve plana y correcta. */
.tarjeta {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); }

.tarjeta[data-atenuada='true'] { opacity: 0.4; }
.tarjeta[data-destacada='true'] { box-shadow: var(--sombra-2), inset 0 0 0 2px var(--acento); }

/* La caja no impone altura: la pone el hijo. Cuadrado el hijo, cuadrada la
   caja. Antes el SVG traía su propia altura (248px) y la foto la suya (540), y
   en una misma fila las tarjetas quedaban a saltos. */
.tarjeta__media {
  /* El plano de delante. 26px es lo justo para que se note el escalón sin que
     la foto se salga de la tarjeta al inclinarse. */
  transform: translateZ(26px);
  display: grid; place-items: center;
  background: var(--tinte);
  border-radius: var(--r-media);
  margin: var(--e-3) var(--e-3) 0;
  padding: var(--e-3);
}

.tarjeta__foto {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
}

.tarjeta__foto {
  display: block;
  /* `block-size: auto` es imprescindible: los atributos width/height del HTML
     son una pista de presentación y el `height="656"` ganaba al aspect-ratio,
     así que la imagen se pintaba 540x656 y `cover` le recortaba los lados. Los
     atributos se quedan porque reservan el hueco antes de que cargue y evitan
     el salto de maquetación; el que manda en el tamaño es el CSS. */
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* Vídeo de producto. La ficha enseña la FOTO por defecto —no cuesta nada y es
   lo que vende— y el vídeo aparece encima solo cuando alguien lo pide. Así el
   catálogo no pierde el producto de vista y nadie descarga 5 MB sin querer. */
.tarjeta__media { position: relative; }

.tarjeta__video {
  position: absolute;
  inset: var(--e-3);
  inline-size: calc(100% - var(--e-3) * 2);
  block-size: calc(100% - var(--e-3) * 2);
  object-fit: cover;
  border-radius: var(--r-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-l) var(--curva);
}
.tarjeta__media[data-video='activo'] .tarjeta__video { opacity: 1; }

.tarjeta__reproducir {
  position: absolute;
  inset-block-end: calc(var(--e-3) + var(--e-2));
  inset-inline-end: calc(var(--e-3) + var(--e-2));
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: var(--toque);
  block-size: var(--toque);
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color var(--dur) var(--curva), opacity var(--dur) var(--curva);
}
.tarjeta__reproducir:hover { background: rgba(10, 10, 10, 0.78); }
.tarjeta__reproducir:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.tarjeta__icono { display: grid; place-items: center; grid-area: 1 / 1; }
.tarjeta__icono--pausa { display: none; }
.tarjeta__reproducir[aria-pressed='true'] .tarjeta__icono--play { display: none; }
.tarjeta__reproducir[aria-pressed='true'] .tarjeta__icono--pausa { display: grid; }

/* Con el vídeo en marcha el botón se queda, para poder pararlo, pero baja de
   peso: el texto de la ficha no compite con él. */
.tarjeta__media[data-video='activo'] .tarjeta__reproducir { background: rgba(10, 10, 10, 0.42); }

/* Columna flexible con el gancho ocupando el sobrante: así el distintivo, el
   precio y el botón quedan alineados entre tarjetas de la misma fila. */
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); }
.tarjeta__gancho { flex: 1 1 auto; }

.tarjeta__linea { font-size: var(--t-marcador); font-weight: 600; color: var(--texto-suave); }
.tarjeta__nombre { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--tinta); }
.tarjeta__gancho { font-size: var(--t-menor); line-height: 1.5; color: var(--texto-tenue); }

.tarjeta__precio {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.tarjeta__precio small { font-size: var(--t-menor); font-weight: 500; color: var(--texto-suave); }

.tarjeta__acciones { display: grid; gap: var(--e-2); margin-block-start: var(--e-1); }

@media (max-width: 62rem) {
  .rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta { grid-column: span 1; }
}
@media (max-width: 40rem) { .rejilla-productos { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   DISTINTIVO DE ANÁLISIS
   El acento, usado una sola vez por tarjeta y en tamaño pequeño. Es el papel
   que en la referencia cumple el violeta.
   -------------------------------------------------------------------------- */

/* Marca de analizado. Antes era una caja con fondo y borde que se repetía
   cinco veces y convertía el acento en ruido. Ahora es una línea: el color
   queda solo en el icono, que es lo que significa "pasó por un laboratorio". */
.insignia {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-marcador);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}
.insignia__marca { color: var(--acento); flex: none; }

/* --------------------------------------------------------------------------
   BIORUTINA
   Los cuatro productos con su imagen, y debajo la suma con el descuento. El
   descuento va en tinta: el ámbar sigue reservado a las credenciales de
   laboratorio, que aquí aparecen una por producto.
   -------------------------------------------------------------------------- */

.biorutina { display: grid; gap: var(--e-5); }

.biorutina__productos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
}

.biorutina__producto {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: var(--r-media);
  box-shadow: var(--sombra-1);
  padding: var(--e-3);
}

.biorutina__media {
  display: grid;
  place-items: center;
  background: var(--tinte);
  border-radius: var(--r-md);
  padding: var(--e-3);
}

.biorutina__foto {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
}

.biorutina__cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-2) var(--e-1);
}

.biorutina__nombre { font-size: var(--t-cuerpo); font-weight: 600; color: var(--tinta); }
.biorutina__detalle { font-size: var(--t-marcador); line-height: 1.5; color: var(--texto-tenue); }
.biorutina__producto .insignia { align-items: flex-start; line-height: 1.45; }
.biorutina__producto .insignia__marca { margin-block-start: 0.12em; }
.biorutina__precio {
  margin-block-start: auto;
  padding-block-start: var(--e-2);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.biorutina__resumen {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  padding: var(--e-6) var(--e-5);
  background: var(--tinte);
  border-radius: var(--r-tarjeta);
  text-align: center;
}
.biorutina__antes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-1) var(--e-2);
  align-items: baseline;
  font-size: var(--t-menor);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}
.biorutina__antes del { color: var(--texto-suave); }
.biorutina__fila { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e-3); }
.biorutina__ahora {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.biorutina__descuento {
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--tinta);
  font-size: var(--t-marcador);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.biorutina__ahorro {
  font-size: var(--t-cuerpo-g);
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.biorutina__resumen .boton { margin-block-start: var(--e-2); min-inline-size: 18rem; }
.biorutina__resumen .enlace-whatsapp { margin-block-start: var(--e-1); }
.biorutina__nota {
  max-inline-size: 54ch;
  font-size: var(--t-menor);
  line-height: 1.5;
  color: var(--texto-tenue);
}
.biorutina__aviso {
  max-inline-size: 62ch;
  font-size: var(--t-marcador);
  line-height: 1.5;
  color: var(--texto-tenue);
}

@media (min-width: 40rem) {
  .biorutina__productos { gap: var(--e-5); }
  .biorutina__producto { padding: var(--e-4); }
  .biorutina__cuerpo { padding: var(--e-4) var(--e-2) var(--e-1); }
}

@media (max-width: 40rem) {
  .biorutina__productos { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .biorutina__producto { flex-direction: row; align-items: center; gap: var(--e-3); }
  .biorutina__media { flex: none; inline-size: 7.5rem; }
  .biorutina__cuerpo { padding: 0; }
  .biorutina__precio { margin-block-start: var(--e-1); padding-block-start: 0; }
  .biorutina__resumen { padding: var(--e-5) var(--e-4); }
  .biorutina__resumen .boton { inline-size: 100%; min-inline-size: 0; }
}

@media (min-width: 75rem) {
  .biorutina__productos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   LIBRO DE LOTES
   -------------------------------------------------------------------------- */

.lote__panel {
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
  padding: var(--e-5) var(--e-5) var(--e-4);
}

.lote__cabecera, .lote__fila {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--e-4);
  align-items: center;
}
.lote__cabecera {
  font-size: var(--t-marcador); font-weight: 600; color: var(--texto-suave);
  padding-block-end: var(--e-3);
  border-block-end: 1px solid var(--linea);
}
.lote__libro { list-style: none; padding: 0; }
.lote__fila { padding-block: var(--e-4); border-block-end: 1px solid var(--linea-suave); }
.lote__fila:last-child { border-block-end: 0; }
.lote__marca { color: var(--acento); }
.lote__producto { font-weight: 600; font-size: var(--t-menor); color: var(--tinta); }
.lote__sub { display: block; font-size: var(--t-marcador); font-weight: 400; color: var(--texto-suave); }
.lote__dato { font-size: var(--t-menor); color: var(--texto); font-variant-numeric: tabular-nums; }
.lote__estado { font-size: var(--t-marcador); font-weight: 500; color: var(--texto-tenue); }
.lote__etiqueta { display: block; font-size: var(--t-marcador); font-weight: 400; color: var(--texto-suave); }

@media (min-width: 62.0625rem) {
  .lote__etiqueta { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 62rem) {
  .lote__cabecera { display: none; }
  .lote__fila { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--e-2) var(--e-4); align-items: start; padding-block: var(--e-4); }
  .lote__marca { grid-column: 1; grid-row: 1; }
  .lote__fila > div:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .lote__fila > div:nth-of-type(n + 2) { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   FICHA DESPLEGABLE
   -------------------------------------------------------------------------- */

.ficha {
  background: var(--superficie);
  border-radius: var(--r-media);
  box-shadow: var(--sombra-1);
  padding-inline: var(--e-5);
}
.ficha + .ficha { margin-block-start: var(--e-3); }

.ficha__resumen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding-block: var(--e-5); cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-cuerpo); color: var(--tinta);
  transition: color var(--dur) var(--curva);
}
.ficha__resumen::-webkit-details-marker { display: none; }
.ficha__resumen:hover { color: var(--acento); }

.ficha__signo { position: relative; inline-size: 0.8rem; block-size: 0.8rem; flex: none; }
.ficha__signo::before, .ficha__signo::after {
  content: ''; position: absolute; inset-inline: 0;
  inset-block-start: calc(50% - 1px); block-size: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--curva);
}
.ficha__signo::after { transform: rotate(90deg); }
.ficha[open] .ficha__signo::after { transform: rotate(0deg); }

.ficha__contenido { padding-block-end: var(--e-5); }
.ficha[open] .ficha__contenido { animation: desplegar var(--dur-l) var(--curva) both; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .ficha::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--dur-l) var(--curva), content-visibility var(--dur-l) allow-discrete;
  }
  .ficha[open]::details-content { block-size: auto; }
}

.datos { display: grid; gap: 0; margin: 0; }
.datos__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--e-4); padding-block: var(--e-3);
  border-block-end: 1px solid var(--linea-suave); font-size: var(--t-menor);
}
.datos__fila:last-child { border-block-end: 0; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; color: var(--texto); font-variant-numeric: tabular-nums; }
@media (max-width: 34rem) { .datos__fila { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); } }

/* --------------------------------------------------------------------------
   RESULTADOS
   Carrusel de desplazamiento nativo: anclaje de scroll, sin JavaScript. En
   móvil se asoma la siguiente tarjeta, que es lo que invita a arrastrar.
   -------------------------------------------------------------------------- */

/* El carrusel va a sangre por la derecha para que el asomo se vea, así que la
   primera tarjeta se alinea con el contenedor con este relleno. */
.metricas {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--e-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* El canal va en `padding` Y en `scroll-padding`: sin lo segundo, el anclaje
     alinea la primera tarjeta con el borde del scrollport y se come el canal
     —el carrusel amanecía desplazado 104px—. */
  padding-inline: calc(var(--gutter) / 2);
  scroll-padding-inline: calc(var(--gutter) / 2);
  margin-block-start: var(--e-6);
}
.metricas::-webkit-scrollbar { display: none; }

.metrica {
  scroll-snap-align: start;
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  padding: var(--e-6);
}

.metrica__nombre {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin-block-end: var(--e-5);
}

.metrica__filas { display: grid; gap: var(--e-3); }

.metrica__fila {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--e-4);
}

.metrica__etiqueta { font-size: var(--t-marcador); color: var(--texto-suave); }

.metrica__pista {
  display: block;
  block-size: 0.75rem;
  border-radius: var(--r-pill);
  background: var(--tinte-2);
  overflow: hidden;
}

.metrica__relleno {
  display: block;
  block-size: 100%;
  inline-size: var(--v, 0%);
  border-radius: var(--r-pill);
  background: var(--linea);
}

/* El después es el dato que importa: va en acento. Ésa es la lectura que este
   color tiene en el sitio. */
.metrica__fila--despues .metrica__relleno { background: var(--acento); }

.metrica__valor {
  font-size: var(--t-cuerpo-g);
  font-weight: 600;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  text-align: end;
  min-inline-size: 4rem;
}
.metrica__fila--despues .metrica__valor { color: var(--tinta); }

.metrica__mejora {
  margin-block-start: var(--e-5);
  padding-block-start: var(--e-4);
  border-block-start: 1px solid var(--linea-suave);
  font-size: var(--t-menor);
  color: var(--texto-tenue);
}
.metrica__mejora strong {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  margin-inline-start: var(--e-2);
}

@media (min-width: 40rem) {
  .metricas { grid-auto-columns: 46%; }
}
@media (min-width: 62rem) {
  .metricas {
    grid-auto-columns: 31%;
    /* El carrusel va a sangre para que la cuarta tarjeta asome por la derecha,
       así que la primera tiene que arrancar donde arranca el titular: el canal
       del contenedor, calculado sobre el ancho real. */
    padding-inline: calc((100% - min(100% - var(--gutter), var(--contenedor))) / 2);
    scroll-padding-inline: calc((100% - min(100% - var(--gutter), var(--contenedor))) / 2);
  }
}

/* --------------------------------------------------------------------------
   TESTIMONIOS
   -------------------------------------------------------------------------- */

/* Rejilla, no carrusel. Con cuatro testimonios caben los cuatro de una vez, y
   dos carruseles seguidos —resultados y testimonios— se leían como la misma
   sección repetida. El arrastre se queda donde aporta: comparar métricas. */
.testimonios__rejilla {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  padding-inline: 0;
  margin-block-start: var(--e-6);
}
@media (min-width: 40rem) {
  .testimonios__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.testimonio {
  display: flex; flex-direction: column; gap: var(--e-4);
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  padding: var(--e-6);
  box-shadow: var(--sombra-1);
}
.testimonio__cita { font-size: 1.0625rem; line-height: 1.55; color: var(--texto); flex: 1 1 auto; }
.testimonio__ficha { display: grid; gap: 0.15rem; font-size: var(--t-menor); color: var(--texto-suave); }
.testimonio__autor { color: var(--tinta); font-weight: 600; }
.testimonio__declaracion {
  justify-self: start; font-size: var(--t-marcador); font-weight: 500;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   DESCARGO
   Página propia, con el mismo sistema. Numeración visible porque el aviso cita
   sus propias secciones, y medida de lectura corta: es texto legal, se lee de
   arriba abajo y sin adornos.
   -------------------------------------------------------------------------- */

.legal__encabezado {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tinta);
  max-inline-size: 30ch;
  margin-block-end: var(--e-4);
}

.legal__intro { max-inline-size: 62ch; margin-block-end: var(--e-8); }

.legal__secciones {
  list-style: none;
  padding-inline: 0;
  display: grid;
  gap: var(--e-7);
  max-inline-size: 62ch;
}

.legal__seccion { display: grid; gap: var(--e-3); }

.legal__titulo {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.legal__lista {
  list-style: none;
  padding-inline: 0;
  display: grid;
  gap: var(--e-3);
}

.legal__lista li {
  position: relative;
  padding-inline-start: var(--e-4);
  font-size: var(--t-menor);
  line-height: 1.65;
  color: var(--texto-tenue);
}
.legal__lista li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--linea);
}

.legal__texto {
  font-size: var(--t-menor);
  line-height: 1.65;
  color: var(--texto-tenue);
  max-inline-size: none;
}
.legal__texto strong { color: var(--tinta); font-weight: 600; }

.legal__volver {
  margin-block-start: var(--e-8);
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linea);
  max-inline-size: none;
  font-size: var(--t-menor);
}

/* --------------------------------------------------------------------------
   PAGO
   -------------------------------------------------------------------------- */

.pago__rejilla { display: grid; gap: var(--e-5); align-items: start; }

.pago__metodo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  background: var(--superficie);
  border-radius: var(--r-media);
  box-shadow: var(--sombra-1);
  padding: var(--e-5);
}

.pago__etiqueta { font-size: var(--t-marcador); font-weight: 600; color: var(--texto-suave); }
.pago__titulo { font-size: var(--t-cuerpo-g); font-weight: 600; color: var(--tinta); }
.pago__texto { font-size: var(--t-menor); line-height: 1.6; color: var(--texto-tenue); }
.pago__nota { font-size: var(--t-marcador); line-height: 1.5; color: var(--texto-tenue); }

.pago__datos { display: grid; gap: 0; margin: 0; }
.pago__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-1) var(--e-3);
  align-items: center;
  padding-block: var(--e-3);
  border-block-end: 1px solid var(--linea-suave);
}
.pago__fila:last-child { border-block-end: 0; padding-block-end: 0; }
.pago__fila dt { font-size: var(--t-marcador); color: var(--texto-suave); }
.pago__fila dd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.pago__copiar {
  min-inline-size: 4.25rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--tinte);
  color: var(--texto-tenue);
  font-size: var(--t-marcador);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}
.pago__copiar:hover { background: var(--tinte-2); color: var(--tinta); }
.pago__copiar[data-copiado='true'] { background: var(--tinte-2); color: var(--tinta); }

.pago__cierre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  margin-block-start: var(--e-5);
  text-align: center;
}

@media (min-width: 48rem) {
  .pago__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .pago__fila { grid-template-columns: minmax(0, 1fr); }
  .pago__fila dd { justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   PIE
   -------------------------------------------------------------------------- */

.pie { padding-block: var(--e-9) var(--e-6); border-block-start: 1px solid var(--linea); }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--e-6); padding-block-end: var(--e-6); }
.pie__logo { inline-size: 6.5rem; block-size: auto; margin-bottom: var(--e-4); }
.pie__titulo { font-size: var(--t-marcador); font-weight: 600; color: var(--texto-suave); margin-bottom: var(--e-3); }
.pie__lista { list-style: none; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-menor); }
.pie__lista a { color: var(--texto-tenue); text-decoration: none; }
.pie__lista a:hover { color: var(--tinta); text-decoration: underline; }
/* Centrado y en gris de apoyo: es un bloque legal, no una columna de lectura.
   Alineado a la izquierda competía con las columnas de arriba. */
.pie__legal {
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linea);
  display: grid; gap: var(--e-3);
  font-size: var(--t-marcador);
  color: var(--texto-apagado);
  text-align: center;
  max-inline-size: none;
  margin-inline: auto;
}
.pie__legal p { max-inline-size: 74ch; margin-inline: auto; }
.pie__legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.pie__legal a:hover { color: var(--texto-tenue); }
@media (max-width: 56rem) { .pie__rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); } }

/* --------------------------------------------------------------------------
   CAJÓN DEL CARRITO
   -------------------------------------------------------------------------- */

.velo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-l) var(--curva);
}
.velo[data-abierto='true'] { opacity: 1; pointer-events: auto; }

.cajon {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 70;
  inline-size: min(26rem, 100%);
  background: var(--lienzo);
  display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%);
  /* visibility y no solo el desplazamiento. Con el cajón fuera de pantalla
     seguía en el árbol de accesibilidad y sus botones recibían foco, y con
     movimiento reducido la hoja anula las transformaciones: el cajón volvía a
     su sitio y tapaba un tercio de la página. */
  visibility: hidden;
  transition: transform var(--dur-l) var(--curva), visibility var(--dur-l) step-end;
  box-shadow: var(--sombra-cajon);
}
.cajon[data-abierto='true'] { transform: translateX(0); visibility: visible; transition: transform var(--dur-l) var(--curva), visibility 0s; }

.cajon__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5); border-block-end: 1px solid var(--linea);
}
.cajon__titulo { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.cajon__cerrar {
  border: 0; background: var(--tinte); color: var(--tinta);
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-pill);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.cajon__cerrar:hover { background: var(--tinte-2); }

.cajon__lista { list-style: none; padding: var(--e-4) var(--e-5); overflow-y: auto; display: grid; gap: var(--e-3); align-content: start; }
.cajon__vacio { padding: var(--e-6) 0; color: var(--texto-suave); font-size: var(--t-menor); }

.renglon {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3);
  align-items: center;
  background: var(--superficie); border: 1px solid var(--linea-suave);
  border-radius: var(--r-md); padding: var(--e-4);
}
.renglon__nombre { font-size: var(--t-menor); font-weight: 600; color: var(--tinta); }
.renglon__precio { font-size: var(--t-marcador); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.renglon__cantidad { display: flex; align-items: center; gap: var(--e-2); }
.renglon__cantidad button {
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
  inline-size: 1.85rem; block-size: 1.85rem; border-radius: var(--r-pill);
  font: inherit; font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.renglon__cantidad button:hover { border-color: var(--tinta); }
.renglon__cantidad span { font-size: var(--t-menor); font-variant-numeric: tabular-nums; min-inline-size: 1.2rem; text-align: center; }

.cajon__pie { padding: var(--e-5); border-block-start: 1px solid var(--linea); display: grid; gap: var(--e-3); }
.cajon__total { display: flex; justify-content: space-between; font-size: var(--t-cuerpo-g); font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }

.cajon__pago { display: grid; gap: var(--e-1); }
.cajon__pago-titulo { font-size: var(--t-marcador); font-weight: 600; color: var(--texto-suave); }
.cajon__pago-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.cajon__pago-opciones .boton { padding: 0.7rem var(--e-3); font-size: var(--t-marcador); }
.cajon__pago-nota { font-size: var(--t-marcador); line-height: 1.45; color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   ASISTENTE
   Mismo sistema que la página: blanco, un solo acento, radio de tarjeta,
   sombra grande y difusa, botones negros. Nada de burbujas con cola ni de
   avatares: los mensajes del asistente son texto limpio, como la nota de un
   concierge, y los del visitante van en un bloque gris a la derecha.
   -------------------------------------------------------------------------- */

.asistente__abridor {
  position: fixed;
  /* Flota POR ENCIMA del cromo inferior, no sobre el contenido. Con el
     inset-block-end suelto se montaba encima del párrafo del hero y del último
     botón: el pulgar apunta ahí y el texto quedaba ilegible. --tab-alto vale 0
     en escritorio, así que allí vuelve solo a su sitio. */
  inset-block-end: calc(var(--tab-alto) + var(--safe-abajo) + var(--e-4));
  inset-inline-end: calc(var(--safe-der) + var(--e-4));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.9rem var(--e-5);
  background: var(--accion);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--t-menor);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sombra-2);
  transition: background-color var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.asistente__abridor:hover { background: var(--accion-hover); transform: translateY(-2px); }
.asistente__abridor:active { transform: translateY(0); }

.asistente {
  position: fixed;
  inset-block-end: calc(var(--e-5) + 3.75rem);
  inset-inline-end: var(--e-5);
  z-index: 50;
  inline-size: min(26rem, calc(100vw - 2rem));
  max-block-size: min(38rem, calc(100vh - 8rem));
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--superficie);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
  overflow: hidden;

  /* Oculto con visibility y no solo desplazado: cerrado no debe recibir foco
     fuera de pantalla, y con movimiento reducido una transformación anulada
     lo devolvería a su sitio. Es el mismo fallo que tuvo el cajón. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transform-origin: 100% 100%;
  transition: opacity var(--dur-l) var(--curva),
              transform var(--dur-l) var(--curva),
              visibility var(--dur-l) step-end;
}
.asistente[data-abierto='true'] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-l) var(--curva), transform var(--dur-l) var(--curva), visibility 0s;
}

.asistente__cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-block-end: 1px solid var(--linea-suave);
}
.asistente__titulo { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--tinta); }
/* La honestidad también es diseño: el subtítulo dice que no hay una persona. */
.asistente__subtitulo { font-size: var(--t-marcador); color: var(--texto-suave); margin-block-start: 0.1rem; }
.asistente__cerrar {
  margin-inline-start: auto;
  flex: none;
  inline-size: 2rem; block-size: 2rem;
  border-radius: var(--r-pill);
  background: var(--tinte);
  color: var(--tinta);
  font-size: 0.95rem; line-height: 1;
  cursor: pointer;
}
.asistente__cerrar:hover { background: var(--tinte-2); }

.asistente__hilo {
  overflow-y: auto;
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  scroll-behavior: smooth;
}

.asistente__mensaje { font-size: var(--t-menor); line-height: 1.55; }
.asistente__mensaje p + p { margin-block-start: var(--e-3); }

.asistente__mensaje--bot { color: var(--texto); max-inline-size: 92%; }

.asistente__mensaje--usuario {
  align-self: flex-end;
  max-inline-size: 80%;
  background: var(--tinte);
  color: var(--tinta);
  border-radius: var(--r-md);
  padding: var(--e-3) var(--e-4);
}

.asistente__escribiendo {
  font-size: var(--t-marcador);
  color: var(--texto-suave);
  animation: latir 1.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.asistente__chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.asistente__chip {
  padding: 0.55rem var(--e-4);
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  font-size: var(--t-marcador);
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur) var(--curva), background-color var(--dur) var(--curva);
}
.asistente__chip:hover { border-color: var(--tinta); }

.asistente__pie {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  border-block-start: 1px solid var(--linea-suave);
  background: var(--superficie);
}
.asistente__campo {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-menor);
  color: var(--texto);
  padding-block: var(--e-3);
}
.asistente__campo::placeholder { color: var(--texto-suave); }
.asistente__campo:focus { outline: none; }

.asistente__enviar {
  flex: none;
  inline-size: 2.5rem; block-size: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accion);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--curva);
}
.asistente__enviar:hover { background: var(--accion-hover); }

@media (max-width: 40rem) {
  .asistente {
    inset-inline: var(--e-3);
    inset-block-end: var(--e-3);
    inline-size: auto;
    max-block-size: calc(100vh - 5.5rem);
  }
  .asistente__abridor { inset-block-end: var(--e-3); inset-inline-end: var(--e-3); }
}

/* --------------------------------------------------------------------------
   WHATSAPP FLOTANTE
   Sustituye al asistente. Una sola acción, siempre en el mismo sitio: el chat
   de ventas. Píldora negra con el icono; en móvil queda solo el icono para no
   tapar contenido ni el pulgar.
   -------------------------------------------------------------------------- */
.whatsapp {
  position: fixed;
  /* --tab-alto vale 0 en escritorio y 3.5rem en móvil: así no pisa el cromo
     inferior ni el último botón de la página. */
  inset-block-end: calc(var(--tab-alto) + var(--safe-abajo) + var(--e-4));
  inset-inline-end: calc(var(--safe-der) + var(--e-4));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.85rem var(--e-5);
  background: var(--accion);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--t-menor);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: var(--sombra-2);
  transition: background-color var(--dur) var(--curva),
              transform var(--dur) var(--curva);
}
.whatsapp:hover { background: var(--accion-hover); transform: translateY(-2px); }
.whatsapp:active { transform: translateY(0); }
.whatsapp__icono { flex: none; }

@media (max-width: 40rem) {
  .whatsapp {
    inset-block-end: calc(var(--tab-alto) + var(--safe-abajo) + var(--e-3));
    inset-inline-end: calc(var(--safe-der) + var(--e-3));
    padding: 0.85rem;
  }
  .whatsapp__texto { display: none; }
}