/* Generado por tools/fuentes.mjs. No editar a mano.
   Fraunces e Instrument Sans, SIL Open Font License 1.1. */

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fuentes/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fuentes/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fuentes/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fuentes/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fuentes/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fuentes/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fuentes/instrument-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fuentes/instrument-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   MICHARLAB — sistema de diseño
   Los valores vienen de DESIGN.md. No cambiar aquí sin actualizar allá.
   ========================================================================== */

:root {
  /* Color: muestreado del packaging real */
  --petroleo: #04605e;
  --petroleo-hondo: #023b3a;
  /* #0A8A86 daba 3.87:1 sobre hueso y no pasaba AA en hover de enlaces. */
  --petroleo-claro: #077875;
  --terracota: #b4331a;
  --hueso: #f8f5f0;
  --arena: #ede7de;
  --arena-honda: #d9d0c3;
  --tinta: #1a1917;
  --tinta-suave: #5c574f;
  --blanco: #fffdfa;
  /* Menta del logo oficial (Pantone A9D6CF). Se usa tal cual sobre fondos
     oscuros, donde da 7.82:1. Sobre el fondo hueso da 1.46:1 y el signo
     desaparece a 34px, así que ahí va la versión honda del mismo matiz. */
  --menta: #a9d6cf;
  --menta-honda: #479287;

  /* Tipografía */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;

  /* Espaciado, base 8 */
  --e-2xs: 4px;
  --e-xs: 8px;
  --e-sm: 12px;
  --e-md: 16px;
  --e-lg: 24px;
  --e-xl: 40px;
  --e-2xl: 64px;
  --e-3xl: 96px;
  --e-4xl: 144px;

  /* Estructura */
  --ancho: 1240px;
  --radio-sm: 2px;
  --radio-md: 4px;
  --radio-lg: 8px;
  --borde: 1px solid var(--arena-honda);

  /* Motion */
  --ent: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-micro: 120ms;
  --t-corta: 220ms;
  --t-media: 320ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Las tarjetas son flex, y `display:flex` gana sobre el display:none implicito
   del atributo hidden. Sin esto los filtros del catalogo no ocultan nada. */
[hidden] {
  display: none !important;
}

a {
  color: var(--petroleo);
  text-decoration-color: color-mix(in srgb, var(--petroleo) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t-micro) var(--ent);
}

a:hover {
  color: var(--petroleo-claro);
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--petroleo-claro);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- utilidades */

.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-lg);
}

.etiqueta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}

.cifra {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--terracota);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.medida {
  max-width: 62ch;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: var(--e-md);
  top: -100px;
  z-index: 100;
  background: var(--petroleo);
  color: var(--blanco);
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--radio-md);
  transition: top var(--t-corta) var(--ent);
}

.saltar:focus {
  top: var(--e-md);
  color: var(--blanco);
}

/* ------------------------------------------------------------------ botones */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  font-family: var(--texto);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--radio-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-corta) var(--ent), color var(--t-corta) var(--ent),
    border-color var(--t-corta) var(--ent), transform var(--t-micro) var(--ent);
}

.btn:active {
  transform: translateY(1px);
}

.btn-solido {
  background: var(--petroleo);
  color: var(--blanco);
}

.btn-solido:hover {
  background: var(--petroleo-hondo);
  color: var(--blanco);
}

.btn-linea {
  background: transparent;
  color: var(--petroleo);
  border-color: var(--petroleo);
}

.btn-linea:hover {
  background: var(--petroleo);
  color: var(--blanco);
}

.btn-claro {
  background: transparent;
  color: var(--hueso);
  border-color: color-mix(in srgb, var(--hueso) 45%, transparent);
}

.btn-claro:hover {
  background: var(--hueso);
  color: var(--petroleo-hondo);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ------------------------------------------------------------ modo revisión */
/* Solo aparece en la copia que revisa el cliente: evita que confunda los datos
   de ejemplo con los definitivos y que pruebe un WhatsApp que no existe. */

.barra-revision {
  background: var(--terracota);
  color: var(--blanco);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 9px var(--e-lg);
  position: relative;
  z-index: 60;
}

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--hueso) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--borde);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  gap: var(--e-xl);
  min-height: 76px;
}

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--tinta);
  flex: none;
}

/* Cuadrado y molécula: el signo del logo, en el mismo tono. */
.marca-signo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--menta-honda);
}

.marca-cuadro {
  width: 11px;
  height: 11px;
  background: currentColor;
}

.marca svg {
  width: 34px;
  height: auto;
  color: inherit;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.marca-nombre {
  font-family: var(--texto);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
}

.marca-nombre span {
  font-weight: 400;
}

.marca-sub {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 3px;
}

/* El eslogan cierra el lockup. En la cabecera se oculta: una quinta línea
   pasaría de los 76px de alto y empujaría el menú. */
.marca-lema {
  display: none;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-suave);
  margin-top: 6px;
}

.pie .marca-lema {
  display: block;
  color: color-mix(in srgb, var(--hueso) 80%, transparent);
}

.nav {
  display: flex;
  gap: var(--e-md);
  margin-left: auto;
  align-items: center;
}

.nav a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--tinta);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-corta) var(--ent), color var(--t-corta) var(--ent);
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--petroleo);
  border-bottom-color: var(--petroleo);
}

/* `.nav a` (0,1,1) le ganaba a `.btn-solido` (0,1,0) y el botón salía con texto
   oscuro sobre petróleo: 2:1 de contraste. Hay que igualar la especificidad. */
.nav a.btn-solido,
.nav a.btn-solido:hover {
  color: var(--blanco);
  border-bottom-color: transparent;
}

.nav-btn {
  display: none;
  background: none;
  border: var(--borde);
  border-radius: var(--radio-md);
  padding: 9px 11px;
  margin-left: auto;
  cursor: pointer;
  color: var(--tinta);
}

.nav-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* -------------------------------------------------------------------- hero */

.hero {
  padding-block: clamp(var(--e-2xl), 9vw, var(--e-4xl)) var(--e-3xl);
  border-bottom: var(--borde);
  overflow: hidden;
}

.hero-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--e-2xl);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  margin-block: var(--e-md) var(--e-lg);
}

.hero h1 em {
  font-style: italic;
  color: var(--petroleo);
}

.hero-texto {
  font-size: 1.1875rem;
  color: var(--tinta-suave);
  max-width: 52ch;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
  margin-top: var(--e-xl);
}

.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Pie de foto, no tarjeta: el cliente leyó el porcentaje flotante como un
   descuento y además tapaba los frascos. Aquí el producto es el protagonista y
   el dato acompaña, en cuerpo pequeño y debajo. */
.hero-nota {
  margin-top: var(--e-lg);
  padding-top: var(--e-sm);
  border-top: var(--borde);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 44ch;
  align-self: center;
}

.hero-nota .etiqueta {
  display: block;
  font-size: 0.6875rem;
  margin-bottom: 2px;
}

.hero-nota b {
  color: var(--terracota);
  font-weight: 600;
}


/* Segunda tarjeta flotante: da la sensación de capas del hero de lobby360. */
.hero-chip {
  position: absolute;
  top: 6%;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--blanco) 82%, transparent);
  backdrop-filter: blur(10px) saturate(160%);
  border: var(--borde);
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--petroleo);
  box-shadow: 0 10px 24px rgb(26 25 23 / 0.08);
  animation: cabecear 6.8s ease-in-out infinite -3s;
  will-change: transform;
}

.hero-chip svg {
  width: 17px;
  height: 17px;
  flex: none;
}

@keyframes cabecear {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* Halo cálido detrás del hero: es lo que quita la frialdad de laboratorio sin
   necesitar fotografía de estilo de vida, que la marca todavía no tiene. */
.hero {
  position: relative;
}

.hero-halo {
  position: absolute;
  inset: -20% -10% 0 24%;
  pointer-events: none;
  z-index: 0;
}

/* Tres orbes a la deriva, cada uno con su propio ciclo, para que el fondo nunca
   repita exactamente la misma composición. Muy baja saturación: la calidez es
   ambiente, no protagonista. */
.hero-halo::before,
.hero-halo::after,
.hero-halo span {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

.hero-halo::before {
  inset: 4% 26% 40% 8%;
  /* 16% leía rosa genérico; a 10% queda como calidez de fondo, no como color. */
  background: color-mix(in srgb, var(--terracota) 10%, transparent);
  animation: deriva 30s ease-in-out infinite;
}

.hero-halo::after {
  inset: 34% 4% 6% 38%;
  background: color-mix(in srgb, var(--petroleo) 14%, transparent);
  animation: deriva 38s ease-in-out infinite reverse;
}

.hero-halo span {
  inset: 18% 12% 24% 22%;
  background: color-mix(in srgb, var(--arena-honda) 62%, transparent);
  animation: deriva 34s ease-in-out infinite 4s;
}

@keyframes deriva {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(4%, -6%) scale(1.09);
  }
  66% {
    transform: translate(-4%, 4%) scale(0.94);
  }
}

/* Sin z-index a propósito: un z-index aquí crea un contexto de apilamiento y el
   multiply de los frascos dejaría de ver el halo que está detrás, mostrando el
   rectángulo blanco de la foto. Con z-index auto sigue pintándose sobre el halo
   por orden del DOM, y la mezcla alcanza el fondo. */
.hero .env {
  position: relative;
}

.hero-sellos {
  list-style: none;
  padding: var(--e-lg) 0 0;
  margin: var(--e-xl) 0 0;
  border-top: var(--borde);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-md) var(--e-lg);
}

.hero-sellos li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.875rem;
  color: var(--tinta-suave);
  line-height: 1.35;
}

.hero-sellos svg {
  width: 22px;
  height: 22px;
  color: var(--petroleo);
}

/* Trío de frascos: el central manda, los laterales se hunden y retroceden. */
.hero-trio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Separados, no encimados: recortados de verdad ya no necesitan solaparse
     para tapar el borde blanco de la foto de al lado. */
  gap: clamp(6px, 2%, 22px);
}

/* Cada frasco flota con su propio desfase: el conjunto respira en vez de
   moverse en bloque, que es lo que delata una animación barata. */
/* Sin multiply: estos van recortados sobre alfa real. Por eso aquí sí se puede
   usar drop-shadow, que sigue el contorno del frasco y no un rectángulo. */
.hero-frasco {
  width: auto;
  filter: drop-shadow(0 22px 26px rgb(26 25 23 / 0.16));
  animation: flotar 7s ease-in-out infinite;
  will-change: transform;
}

.hero-frasco-centro {
  max-height: 318px;
  z-index: 2;
  animation-duration: 6.4s;
}

.hero-frasco-lado {
  max-height: 224px;
}

.hero-frasco-lado:first-child {
  --giro: -4deg;
  animation-delay: -2.2s;
}

.hero-frasco-lado:last-child {
  --giro: 4deg;
  animation-delay: -4.6s;
}

@keyframes flotar {
  0%,
  100% {
    transform: rotate(var(--giro, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--giro, 0deg)) translateY(-14px);
  }
}

/* ------------------------------------------------------------------- tira */

.tira {
  overflow: hidden;
  padding-block: var(--e-lg);
  border-block: var(--borde);
  background: var(--arena);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* El multiply va en la pista, no en cada imagen: la pista se anima con
   `transform`, eso crea un contexto de apilamiento y la mezcla de los hijos
   quedaba atrapada dentro, mostrando el rectángulo blanco de cada foto. */
.tira-pista {
  display: flex;
  align-items: center;
  gap: var(--e-2xl);
  width: max-content;
  animation: desfile 90s linear infinite;
  mix-blend-mode: multiply;
}

.tira:hover .tira-pista {
  animation-play-state: paused;
}

.tira img {
  height: 96px;
  width: auto;
}

@keyframes desfile {
  to {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------------------- ritual */

/* Titular a la izquierda, bajada y enlace a la derecha: el bloque de texto no
   compite con la fila de fotos que va debajo. */
.ritual-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-2xl);
  align-items: end;
  margin-bottom: var(--e-2xl);
}

.ritual-cabeza h2 {
  margin-top: var(--e-xs);
  max-width: 14ch;
}

.ritual-cabeza p {
  color: var(--tinta-suave);
  max-width: 42ch;
  margin-bottom: var(--e-lg);
}

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

/* Cada paso se ve, no solo se lee: la foto es de alguien haciendo justo eso. */
.ritual-foto {
  margin: 0 0 var(--e-md);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.ritual-foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform var(--t-media) var(--ent);
}

.ritual li:hover .ritual-foto img {
  transform: scale(1.03);
}

.ritual-num {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--terracota);
  letter-spacing: 0.08em;
}

.ritual h3 {
  font-size: 1.25rem;
  margin-block: var(--e-xs) var(--e-2xs);
}

.ritual p {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------- fundadora */

.fundadora-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e-2xl);
  align-items: center;
}

.fundadora-cita blockquote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.25;
  color: var(--petroleo);
  margin: var(--e-md) 0 var(--e-lg);
  max-width: 18ch;
}

.fundadora-firma {
  font-weight: 600;
  display: grid;
  padding-left: var(--e-md);
  border-left: 2px solid var(--terracota);
}

.fundadora-firma span {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ cierre */

.cierre {
  padding-block: 0 var(--e-3xl);
}

.cierre-caja {
  background: var(--arena);
  border-radius: var(--radio-lg);
  padding: clamp(var(--e-xl), 5vw, var(--e-3xl));
  text-align: center;
}

.cierre-caja h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  margin-block: var(--e-xs) var(--e-sm);
  margin-inline: auto;
  max-width: 22ch;
}

.cierre-caja > p:last-of-type {
  color: var(--tinta-suave);
  margin-inline: auto;
  max-width: 42ch;
  margin-bottom: var(--e-xl);
}

/* ------------------------------------------------------------------ franjas */

.franja {
  padding-block: clamp(var(--e-2xl), 7vw, var(--e-3xl));
}

.franja-arena {
  background: var(--arena);
}

.franja-honda {
  background: var(--petroleo-hondo);
  color: var(--hueso);
}

.franja-honda h2,
.franja-honda h3 {
  color: var(--hueso);
}

.franja-honda .etiqueta {
  color: color-mix(in srgb, var(--hueso) 62%, transparent);
}

.franja-honda .cifra {
  color: var(--blanco);
}

.franja-titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-lg);
  flex-wrap: wrap;
  margin-bottom: var(--e-xl);
}

.franja-titulo h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: var(--e-xs);
}

.franja-titulo p {
  color: var(--tinta-suave);
  max-width: 46ch;
}

/* ------------------------------------------------------- tarjetas producto */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--e-lg);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-corta) var(--ent), transform var(--t-corta) var(--ent),
    box-shadow var(--t-corta) var(--ent);
}

.tarjeta:hover {
  border-color: var(--petroleo);
  box-shadow: 0 18px 38px rgb(26 25 23 / 0.11);
  color: inherit;
}

/* Tilt 3D: el JS escribe --rx/--ry/--mx/--my. Sin JS o sin puntero fino, la
   tarjeta simplemente se levanta. */
.tilt {
  position: relative;
  transform-style: preserve-3d;
}

.tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-corta) var(--ent);
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--petroleo) 12%, transparent),
    transparent 58%
  );
}

.tilt:hover::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
      translateY(var(--alza, 0px));
  }
}

.tarjeta-foto {
  position: relative;
  background: var(--arena);
  aspect-ratio: 3 / 4;
  /* Sin isolation: aísla el grupo de mezcla y el multiply de la foto deja de
     ver este mismo fondo, con lo que el producto desaparece. Verificado. */
}

/* La imagen va absoluta: un max-height en porcentaje contra una altura derivada
   de aspect-ratio se resuelve como indefinida y la foto desborda la tarjeta.
   multiply: el fondo blanco del estudio desaparece sobre la arena sin recortar
   nada, y los tapones transparentes dejan ver la tarjeta, como en la realidad. */
.tarjeta-foto img {
  mix-blend-mode: multiply;
  position: absolute;
  inset: var(--e-lg);
  width: calc(100% - var(--e-lg) * 2);
  height: calc(100% - var(--e-lg) * 2);
  object-fit: contain;
  transition: transform var(--t-media) var(--ent);
}

.tarjeta:hover .tarjeta-foto img {
  transform: scale(1.04);
}

.tarjeta-linea {
  position: absolute;
  top: var(--e-sm);
  left: var(--e-sm);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--hueso);
  color: var(--tinta-suave);
  padding: 5px 9px;
  border-radius: var(--radio-sm);
}

.tarjeta-cuerpo {
  padding: var(--e-md) var(--e-md) var(--e-lg);
  display: flex;
  flex-direction: column;
  gap: var(--e-2xs);
  flex: 1;
}

.tarjeta-cuerpo h3 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.tarjeta-sub {
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.tarjeta-activos {
  margin-top: auto;
  padding-top: var(--e-sm);
  font-size: 0.8125rem;
  color: var(--petroleo);
  border-top: 1px dashed var(--arena-honda);
}

.tarjeta-precio {
  display: flex;
  align-items: baseline;
  gap: var(--e-xs);
  margin-top: var(--e-xs);
}

.tarjeta-precio b {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.tarjeta-precio span {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

.ficha-precio {
  display: flex;
  align-items: baseline;
  gap: var(--e-sm);
  flex-wrap: wrap;
  margin-top: var(--e-md);
}

.ficha-precio b {
  font-family: var(--display);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ficha-precio span {
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------- preocupaciones */

.preocupaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-md);
}

.preocupacion {
  display: block;
  padding: var(--e-lg);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
  border-top: 3px solid var(--acento, var(--petroleo));
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-corta) var(--ent), box-shadow var(--t-corta) var(--ent);
}

.preocupacion {
  position: relative;
}

.preocupacion:hover {
  box-shadow: 0 18px 38px rgb(26 25 23 / 0.11);
  color: inherit;
}

.preocupacion h3 {
  font-size: 1.25rem;
  margin-bottom: var(--e-xs);
}

.preocupacion p {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

.preocupacion-cuenta {
  display: inline-block;
  margin-top: var(--e-md);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--acento, var(--petroleo));
}

/* ------------------------------------------------------------------ pilares */

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-xl);
}

.pilar {
  border-top: 1px solid color-mix(in srgb, var(--hueso) 28%, transparent);
  padding-top: var(--e-md);
}

.pilar .cifra {
  font-size: 2.75rem;
  display: block;
  margin-bottom: var(--e-xs);
}

.pilar h3 {
  font-size: 1.0625rem;
  font-family: var(--texto);
  font-weight: 600;
  margin-bottom: var(--e-2xs);
}

.pilar p {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--hueso) 72%, transparent);
}

/* --------------------------------------------------------- ficha producto */

.ficha {
  padding-block: var(--e-2xl) var(--e-3xl);
}

.miga {
  font-size: 0.875rem;
  color: var(--tinta-suave);
  margin-bottom: var(--e-xl);
}

.miga a {
  color: var(--tinta-suave);
}

.ficha-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--e-2xl);
  align-items: start;
}

/* La columna entera se queda fija, no solo la foto de estudio: las fotos de
   uso viajan con ella mientras se lee la ficha. */
.ficha-galeria {
  position: sticky;
  top: 108px;
  display: grid;
  gap: var(--e-sm);
}

/* Miniaturas: la de estudio y las del producto en uso. Sin JavaScript se ven
   igual, solo que pequeñas; el clic que las agranda es el extra. */
.ficha-miniaturas {
  display: flex;
  gap: var(--e-2xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.ficha-miniaturas::-webkit-scrollbar {
  display: none;
}

.miniatura {
  flex: 0 0 auto;
  width: 72px;
  height: 90px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  background: var(--arena);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--t-corta) var(--ent), border-color var(--t-corta) var(--ent);
}

.miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La de estudio viene sobre blanco: se funde con el fondo como en la escena. */
.miniatura[data-estudio='true'] img {
  object-fit: contain;
  mix-blend-mode: multiply;
}

.miniatura:hover,
.miniatura:focus-visible {
  opacity: 1;
}

.miniatura.activa {
  opacity: 1;
  border-color: var(--petroleo);
}

.ficha-foto {
  position: relative;
  min-height: clamp(380px, 44vw, 588px);
  background: var(--arena);
  border-radius: var(--radio-lg);
  padding: var(--e-2xl);
  display: grid;
  place-items: center;
}

.ficha-foto img {
  max-height: 460px;
  width: auto;
  mix-blend-mode: multiply;
}

/* Con una foto de ambiente en la escena no hay fondo blanco que fundir: la
   foto llena el marco. Posición absoluta y object-fit, no max-height, que
   contra una altura derivada no resuelve. */
.ficha-foto.es-ambiente {
  padding: 0;
  overflow: hidden;
}

.ficha-foto.es-ambiente img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  mix-blend-mode: normal;
}

.ficha h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-block: var(--e-xs) var(--e-sm);
}

.ficha-sub {
  font-size: 1.25rem;
  color: var(--tinta-suave);
  font-family: var(--display);
  font-style: italic;
}

.ficha-resumen {
  font-size: 1.125rem;
  margin-top: var(--e-lg);
  max-width: 56ch;
}

.ficha-cifra {
  margin-top: var(--e-xl);
  padding: var(--e-md) 0 var(--e-md) var(--e-lg);
  border-left: 2px solid var(--terracota);
}

.ficha-cifra-frase {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.35;
  margin-top: var(--e-2xs);
  max-width: 34ch;
}

.ficha-cifra-fuente {
  font-size: 0.75rem;
  color: var(--tinta-suave);
  margin-top: var(--e-xs);
}

.ficha-cifra-frase .cifra {
  font-size: 2rem;
  font-weight: 600;
}

.bloque {
  margin-top: var(--e-xl);
}

.bloque > .etiqueta {
  padding-bottom: var(--e-xs);
  border-bottom: var(--borde);
  margin-bottom: var(--e-md);
}

.activos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.activos li {
  font-size: 0.875rem;
  background: var(--arena);
  border-radius: var(--radio-sm);
  padding: 6px 12px;
}

.beneficios {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-md);
}

.beneficios li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--e-sm);
}

.beneficios svg {
  width: 22px;
  height: 22px;
  color: var(--petroleo);
  margin-top: 2px;
}

.beneficios strong {
  display: block;
  font-weight: 600;
}

.beneficios span {
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}

.lista-simple {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-xs);
}

.lista-simple li {
  position: relative;
  padding-left: var(--e-md);
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}

.lista-simple li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--petroleo);
}

.variantes {
  display: grid;
  gap: var(--e-sm);
}

.variante {
  border: var(--borde);
  border-radius: var(--radio-md);
  padding: var(--e-md);
}

.variante strong {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
}

.variante span {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

.aviso {
  background: color-mix(in srgb, var(--terracota) 6%, var(--hueso));
  border-left: 3px solid var(--terracota);
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
  padding: var(--e-md) var(--e-lg);
}

.aviso .lista-simple li::before {
  background: var(--terracota);
}

.notas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.notas li {
  font-size: 0.8125rem;
  color: var(--petroleo);
  border: 1px solid color-mix(in srgb, var(--petroleo) 30%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
}

.pedido {
  margin-top: var(--e-xl);
  padding: var(--e-lg);
  background: var(--arena);
  border-radius: var(--radio-lg);
}

.pedido p {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
  margin-bottom: var(--e-md);
  max-width: 44ch;
}

/* --------------------------------------------------------------- catálogo */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
  margin-bottom: var(--e-xl);
  padding-bottom: var(--e-lg);
  border-bottom: var(--borde);
}

.filtro {
  font-family: var(--texto);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 9px 18px;
  border: var(--borde);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--t-corta) var(--ent), border-color var(--t-corta) var(--ent),
    color var(--t-corta) var(--ent);
}

.filtro:hover {
  border-color: var(--petroleo);
  color: var(--petroleo);
}

.filtro[aria-pressed='true'] {
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: var(--blanco);
}

.sin-resultados {
  padding: var(--e-2xl) 0;
  text-align: center;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ prosa */

.prosa {
  max-width: 68ch;
}

.prosa h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: var(--e-xl);
  margin-bottom: var(--e-sm);
}

.prosa p + p {
  margin-top: var(--e-md);
}

.prosa p {
  color: var(--tinta-suave);
}

.destacado {
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--petroleo);
  border-left: 2px solid var(--terracota);
  padding-left: var(--e-lg);
  margin-block: var(--e-xl);
}

/* ------------------------------------------------------------------ rutinas */

.rutina-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e-2xl);
  align-items: start;
}

.rutina-momento {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-lg);
}

.rutina-cabeza {
  padding-bottom: var(--e-md);
  border-bottom: var(--borde);
  margin-bottom: var(--e-lg);
}

.rutina-cabeza h2 {
  font-size: 1.5rem;
  margin-top: var(--e-2xs);
}

.pasos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-lg);
  counter-reset: paso;
}

.paso {
  display: grid;
  grid-template-columns: 28px 76px 1fr;
  gap: var(--e-md);
  align-items: center;
}

.paso-num {
  font-family: var(--display);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--terracota);
  text-align: center;
}

.paso-foto {
  display: block;
  background: var(--arena);
  border-radius: var(--radio-md);
  aspect-ratio: 3 / 4;
  position: relative;
}

.paso-foto img {
  mix-blend-mode: multiply;
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
}

.paso-texto {
  min-width: 0;
  overflow-wrap: break-word;
}

.paso-texto h3 {
  font-size: 1.0625rem;
  margin-block: 2px 4px;
}

.paso-texto h3 a {
  text-decoration: none;
  color: var(--tinta);
}

.paso-texto h3 a:hover {
  color: var(--petroleo);
}

.paso-texto p {
  font-size: 0.875rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------- faq */

.buscador {
  position: relative;
  max-width: 52ch;
  margin-bottom: var(--e-sm);
}

.buscador input {
  width: 100%;
  font-family: var(--texto);
  font-size: 1.0625rem;
  color: var(--tinta);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-md);
  padding: 15px 48px 15px 50px;
  transition: border-color var(--t-corta) var(--ent), box-shadow var(--t-corta) var(--ent);
  /* La cruz nativa de Safari y Chrome duplicaría el botón de limpiar. */
  appearance: none;
}

.buscador input::-webkit-search-cancel-button {
  display: none;
}

.buscador input::placeholder {
  color: color-mix(in srgb, var(--tinta-suave) 68%, transparent);
}

.buscador input:focus {
  outline: none;
  border-color: var(--petroleo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petroleo) 16%, transparent);
}

.buscador-lupa {
  position: absolute;
  left: 17px;
  top: 50%;
  translate: 0 -50%;
  color: var(--petroleo);
  pointer-events: none;
  display: flex;
}

.buscador-lupa svg {
  width: 20px;
  height: 20px;
}

.buscador-limpiar {
  position: absolute;
  right: 9px;
  top: 50%;
  translate: 0 -50%;
  background: none;
  border: 0;
  padding: 7px;
  cursor: pointer;
  color: var(--tinta-suave);
  display: flex;
  border-radius: var(--radio-md);
  transition: color var(--t-micro) var(--ent), background var(--t-micro) var(--ent);
}

.buscador-limpiar:hover {
  color: var(--tinta);
  background: var(--arena);
}

.buscador-limpiar svg {
  width: 17px;
  height: 17px;
}

.buscador-conteo {
  font-size: 0.875rem;
  color: var(--tinta-suave);
  min-height: 1.4em;
  margin-bottom: var(--e-xl);
}

.faq-vacio {
  max-width: 52ch;
  padding: var(--e-xl);
  background: var(--arena);
  border-radius: var(--radio-lg);
}

.faq-vacio h2 {
  font-size: 1.5rem;
  margin-block: var(--e-xs) var(--e-sm);
}

.faq-vacio > p:last-of-type {
  color: var(--tinta-suave);
  margin-bottom: var(--e-lg);
}

.faq-vacio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
}

/* Producto sin foto de estudio: espacio vacío con la marca muy tenue, para que
   se lea como pendiente y no como imagen rota. */
.sin-foto {
  display: grid;
  place-items: center;
}

.sin-foto .marca-agua {
  display: flex;
  color: var(--menta-honda);
  opacity: 0.18;
  width: 34%;
  max-width: 120px;
}

.sin-foto .marca-agua svg {
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------- formulario */

.preguntar-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--e-2xl);
  align-items: start;
}

.formulario {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-xl);
  display: grid;
  gap: var(--e-lg);
}

/* Trampa antispam: invisible para personas, tentadora para robots. */
.campo-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.campo {
  display: grid;
  gap: var(--e-xs);
}

.campo label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.campo label span {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: color-mix(in srgb, var(--tinta-suave) 72%, transparent);
}

.campo textarea,
.campo select,
.campo input {
  width: 100%;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--hueso);
  border: var(--borde);
  border-radius: var(--radio-md);
  padding: 13px 15px;
  transition: border-color var(--t-corta) var(--ent), box-shadow var(--t-corta) var(--ent);
}

.campo textarea {
  resize: vertical;
  min-height: 96px;
}

.campo textarea::placeholder,
.campo input::placeholder {
  color: color-mix(in srgb, var(--tinta-suave) 62%, transparent);
}

.campo textarea:focus,
.campo select:focus,
.campo input:focus {
  outline: none;
  border-color: var(--petroleo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petroleo) 16%, transparent);
}

/* Dos campos cortos en la misma fila cuando hay espacio. */
.campo-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-md);
}

.campo-ayuda {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

.formulario button {
  justify-self: start;
}

.faq {
  display: grid;
  gap: var(--e-2xl);
  max-width: 78ch;
}

.faq-grupo h2 {
  font-size: 1.5rem;
  padding-bottom: var(--e-xs);
  border-bottom: 2px solid var(--petroleo);
  margin-bottom: var(--e-xs);
}

.faq-item {
  border-bottom: var(--borde);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--e-md) var(--e-xl) var(--e-md) 0;
  font-weight: 600;
  position: relative;
  transition: color var(--t-corta) var(--ent);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--petroleo);
}

.faq-item summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--petroleo);
  border-bottom: 1.5px solid var(--petroleo);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-corta) var(--ent);
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq-item p {
  padding-bottom: var(--e-lg);
  color: var(--tinta-suave);
  max-width: 68ch;
}

/* -------------------------------------------------------------------- legal */

.legal h2 {
  font-size: 1.25rem;
  margin-top: var(--e-xl);
}

.legal ul {
  margin: var(--e-md) 0 0;
  padding-left: var(--e-lg);
  color: var(--tinta-suave);
  display: grid;
  gap: var(--e-2xs);
}

.legal-fecha {
  font-size: 0.875rem;
  color: var(--tinta-suave);
  padding-bottom: var(--e-md);
  border-bottom: var(--borde);
}

.pendiente {
  background: color-mix(in srgb, var(--terracota) 12%, var(--hueso));
  color: var(--terracota);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--radio-sm);
  border: 1px dashed color-mix(in srgb, var(--terracota) 45%, transparent);
}

/* -------------------------------------------------------------- whatsapp */

.wa-flotante {
  position: fixed;
  right: var(--e-lg);
  bottom: var(--e-lg);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  background: var(--petroleo);
  color: var(--blanco);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgb(2 59 58 / 0.3);
  transition: background var(--t-corta) var(--ent), transform var(--t-corta) var(--ent);
}

.wa-flotante:hover {
  background: var(--petroleo-hondo);
  color: var(--blanco);
  transform: translateY(-2px);
}

/* Anillo que late detrás del botón, como en bookza. */
.wa-flotante::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--petroleo);
  z-index: -1;
  animation: latido 2.6s ease-out infinite;
}

@keyframes latido {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.45;
  }
  55% {
    transform: scale(1.16);
    opacity: 0;
  }
}

.wa-flotante svg {
  width: 19px;
  height: 19px;
}

/* ------------------------------------------------------------------- pie */

.pie {
  background: var(--petroleo-hondo);
  color: color-mix(in srgb, var(--hueso) 78%, transparent);
  padding-block: var(--e-2xl) var(--e-xl);
  font-size: 0.9375rem;
}

.pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--e-xl);
}

.pie h4 {
  font-family: var(--texto);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hueso);
  margin-bottom: var(--e-md);
}

.pie ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-xs);
}

.pie a {
  color: color-mix(in srgb, var(--hueso) 78%, transparent);
  text-decoration: none;
}

.pie a:hover {
  color: var(--hueso);
}

.pie .marca {
  color: var(--hueso);
}

.pie .marca-signo {
  color: var(--menta);
}

.pie .marca-sub {
  color: color-mix(in srgb, var(--hueso) 60%, transparent);
}

.pie-lema {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--hueso);
  margin-top: var(--e-md);
  max-width: 30ch;
}

.pie-base {
  margin-top: var(--e-2xl);
  padding-top: var(--e-md);
  border-top: 1px solid color-mix(in srgb, var(--hueso) 18%, transparent);
  display: flex;
  justify-content: space-between;
  gap: var(--e-md);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--hueso) 60%, transparent);
}

/* ------------------------------------------------------------- animación */

/* Entrada escalonada: los hijos aparecen en cascada, no el bloque de golpe.
   El JS numera cada hijo en --i. */
/* Se anima `translate`, no `transform`: las tarjetas también llevan tilt 3D en
   `transform` y una propiedad pisaba a la otra. Las propiedades individuales
   (translate/rotate/scale) se componen con transform en vez de competir. */
[data-anima] > * {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 520ms var(--ent), translate 520ms var(--ent);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-anima].visible > * {
  opacity: 1;
  translate: none;
}

/* Para elementos sueltos (títulos, párrafos) que no son contenedores. */
.revelar {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 520ms var(--ent), translate 520ms var(--ent);
}

.revelar.visible {
  opacity: 1;
  translate: none;
}

/* ---------------------------------------------------------------- móvil */

/* El corte se calcula midiendo lo que la cabecera necesita de verdad, no a ojo.
   Con seis elementos en el menú empieza a partirse en dos renglones a 1030px:
   por eso el hamburguesa entra a 1040 y no antes. Unificar el quiz y las
   rutinas en una sola entrada casi no movió ese número, porque lo que manda es
   "Quiero ser distribuidora" más el botón de WhatsApp. Si se agrega o quita un
   elemento del menú, hay que volver a medir. */
@media (max-width: 1040px) {
  .nav-btn {
    display: block;
  }

  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--hueso);
    border-bottom: var(--borde);
    padding: var(--e-xs) var(--e-lg) var(--e-lg);
  }

  .nav.abierto {
    display: flex;
  }

  .nav a {
    padding-block: var(--e-sm);
    border-bottom: var(--borde);
  }

  .nav .btn {
    margin-top: var(--e-sm);
    justify-content: center;
  }

  .cabecera-fila {
    position: relative;
  }

}

@media (max-width: 960px) {
  .hero-rejilla,
  .ficha-rejilla,
  .preguntar-rejilla {
    grid-template-columns: 1fr;
  }

  /* Apilado: primero el titular, luego el producto. El mensaje de marca gana
     la primera pantalla, no los frascos. */
  .hero-frasco-centro {
    max-height: 300px;
  }

  .hero-frasco-lado {
    max-height: 215px;
  }

  .hero-halo {
    inset: -10% -20% 40% -20%;
  }

  .ficha-galeria {
    position: static;
  }

  .ficha-foto {
    padding: var(--e-xl);
  }

  .pie-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  /* El chip deja de flotar sobre los frascos: en pantalla angosta se encimaba
     y el producto tiene que verse limpio. */
  .hero-chip {
    position: static;
    align-self: center;
    margin-bottom: var(--e-md);
  }


  .rejilla {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--e-md);
  }

  .pie-rejilla {
    grid-template-columns: 1fr;
    gap: var(--e-lg);
  }


  .wa-flotante span {
    display: none;
  }

  .wa-flotante {
    padding: 15px;
  }

  .hero-sellos,
  .ritual {
    grid-template-columns: 1fr;
  }

  .formulario {
    padding: var(--e-lg);
  }

  .campo-par {
    grid-template-columns: 1fr;
  }

  .tira img {
    height: 74px;
  }
}

@media (max-width: 560px) {
  /* A 375px la columna de texto del paso se quedaba sin ancho y los nombres
     largos se salian de la tarjeta. */
  .rutina-momento {
    padding: var(--e-md);
  }

  .paso {
    grid-template-columns: 20px 56px 1fr;
    gap: var(--e-sm);
  }

  .paso-num {
    font-size: 1rem;
  }

  .paso-texto h3 {
    font-size: 0.9375rem;
  }

  .paso-texto p {
    font-size: 0.8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  [data-anima] > *,
  .revelar {
    opacity: 1;
    translate: none;
  }

  /* Las animaciones en bucle no deben acelerarse a 0.01ms: se apagan. */
  .tira-pista,
  .hero-halo::before,
  .hero-halo::after,
  .hero-halo span,
  .hero-frasco,
  .hero-chip,
  .wa-flotante::before {
    animation: none;
  }

  .tira {
    overflow-x: auto;
  }

  .tilt {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------- quiz */
/* Un recorrido guiado, no un cuestionario: una pregunta por pantalla, avance
   por puntos y salto automático al elegir. La primera pregunta va en tarjetas
   grandes porque es la que decide todo el protocolo. Iconos de línea, nunca
   emojis. El resultado es una rutina real con precios, no un kit prearmado. */

.quiz-cabeza {
  max-width: 64ch;
  margin-bottom: var(--e-xl);
  text-align: center;
  margin-inline: auto;
}

/* Barra superior: volver a la izquierda, dónde estoy al centro. */
.quiz-tope {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-bottom: var(--e-md);
}

.quiz-atras {
  position: absolute;
  left: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--t-corta) var(--ent);
}

.quiz-atras:hover {
  background: var(--arena);
}

.quiz-atras svg {
  width: 22px;
  height: 22px;
}

.quiz-seccion {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}

/* Avance por puntos: se entiende de un vistazo cuánto falta. El punto va
   primero y la línea después, para que la fila empiece en un punto y no en un
   tramo suelto. */
.quiz-puntos {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 auto var(--e-2xl);
}

.quiz-puntos li {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--arena-honda);
  display: grid;
  place-items: center;
  transition: background var(--t-corta) var(--ent), scale var(--t-corta) var(--ent);
}

.quiz-puntos li:not(:last-child) {
  margin-right: clamp(40px, 12vw, 64px);
}

.quiz-puntos li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  translate: 0 -50%;
  width: clamp(40px, 12vw, 64px);
  height: 2px;
  background: var(--arena-honda);
  transition: background var(--t-corta) var(--ent);
}

.quiz-puntos li svg {
  width: 9px;
  height: 9px;
  color: var(--blanco);
  opacity: 0;
  transition: opacity var(--t-corta) var(--ent);
}

.quiz-puntos li.activo {
  background: var(--petroleo);
  scale: 1.25;
}

.quiz-puntos li.hecho,
.quiz-puntos li.hecho::after {
  background: var(--petroleo);
}

.quiz-puntos li.hecho svg {
  opacity: 1;
}

.quiz-paso {
  border: 0;
  padding: 0;
  margin: 0;
}

.quiz-pregunta {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  text-align: center;
  margin: 0 auto var(--e-xs);
  max-width: 22ch;
}

.quiz-ayuda {
  color: var(--tinta-suave);
  text-align: center;
  margin: 0 auto var(--e-xl);
  max-width: 46ch;
  font-size: 0.9375rem;
}

.quiz-opciones {
  display: grid;
  gap: var(--e-sm);
  max-width: 34rem;
  margin-inline: auto;
}

/* Tarjetas de la primera pregunta: icono grande y color de la preocupación. */
.quiz-tarjetas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quiz-tarjeta {
  --acento: var(--petroleo);
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--e-2xs);
  padding: var(--e-lg) var(--e-md);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
  cursor: pointer;
  transition: border-color var(--t-corta) var(--ent), transform var(--t-corta) var(--ent),
    box-shadow var(--t-corta) var(--ent);
}

.quiz-tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--tinta) 60%, transparent);
}

.quiz-tarjeta input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Todas las opciones llevan icono, no solo las de la primera pregunta: es lo
   que hace que se lean de un vistazo en vez de tener que leerlas. */
.quiz-icono {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: var(--acento, var(--petroleo));
  background: color-mix(in srgb, var(--acento, var(--petroleo)) 10%, transparent);
}

.quiz-tarjeta .quiz-icono {
  width: 54px;
  height: 54px;
  margin-bottom: var(--e-2xs);
}

.quiz-tarjeta .quiz-icono svg {
  width: 28px;
  height: 28px;
}

.quiz-renglon .quiz-icono {
  width: 42px;
  height: 42px;
}

.quiz-renglon .quiz-icono svg {
  width: 22px;
  height: 22px;
}

.quiz-tarjeta b {
  font-weight: 600;
  line-height: 1.25;
}

.quiz-tarjeta span:last-child {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  line-height: 1.35;
}

.quiz-tarjeta:has(input:checked) {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}

/* Renglones del resto de las preguntas. */
.quiz-renglon {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  padding: var(--e-md) var(--e-lg);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
  cursor: pointer;
  transition: border-color var(--t-corta) var(--ent), background var(--t-corta) var(--ent);
}

.quiz-renglon:hover {
  border-color: var(--menta-honda);
}

.quiz-renglon input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quiz-renglon-texto {
  display: grid;
  gap: 2px;
}

.quiz-renglon-texto b {
  font-weight: 600;
}

.quiz-renglon-texto span {
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.quiz-marca {
  margin-left: auto;
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--arena-honda);
  border-radius: 50%;
  color: transparent;
  transition: background var(--t-corta) var(--ent), border-color var(--t-corta) var(--ent),
    color var(--t-corta) var(--ent);
}

.quiz-marca svg {
  width: 13px;
  height: 13px;
}

.quiz-renglon:has(input:checked) {
  border-color: var(--petroleo);
  background: color-mix(in srgb, var(--petroleo) 4%, var(--blanco));
}

.quiz-renglon:has(input:checked) .quiz-marca {
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: var(--hueso);
}

.quiz-tarjeta:has(input:focus-visible),
.quiz-renglon:has(input:focus-visible) {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
}

/* Pantalla de espera antes del resultado. */
.quiz-cargando {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: var(--e-2xl);
}

.quiz-barra {
  height: 3px;
  background: var(--arena-honda);
  border-radius: 3px;
  overflow: hidden;
  margin-block: var(--e-lg) var(--e-xl);
}

.quiz-barra span {
  display: block;
  height: 100%;
  background: var(--petroleo);
}

.quiz-chequeo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-sm);
}

.quiz-chequeo li {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  color: var(--tinta-suave);
  opacity: 0.45;
  transition: opacity var(--t-media) var(--ent), color var(--t-media) var(--ent);
}

.quiz-chequeo li svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--arena-honda);
  transition: color var(--t-media) var(--ent);
}

.quiz-chequeo li.hecho {
  opacity: 1;
  color: var(--tinta);
}

.quiz-chequeo li.hecho svg {
  color: var(--petroleo);
}

@media (max-width: 480px) {
  .quiz-tarjetas {
    grid-template-columns: 1fr;
  }

  .quiz-tarjeta {
    grid-template-columns: 54px 1fr;
    justify-items: start;
    text-align: left;
    align-items: center;
    column-gap: var(--e-md);
    padding: var(--e-md);
  }

  .quiz-tarjeta .quiz-icono {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------ resultado */

.quiz-resumen {
  max-width: 62ch;
  margin-bottom: var(--e-2xl);
}

.quiz-resumen h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  margin-block: var(--e-xs) var(--e-md);
}

.quiz-resumen p {
  color: var(--tinta-suave);
}

.quiz-rutina {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-sm);
  max-width: 68ch;
}

.quiz-rutina li {
  display: grid;
  grid-template-columns: 30px 72px 1fr auto;
  gap: var(--e-md);
  align-items: center;
  padding: var(--e-md);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
}

.quiz-num {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--terracota);
  text-align: center;
}

.quiz-foto {
  display: block;
  position: relative;
  background: var(--arena);
  border-radius: var(--radio-md);
  aspect-ratio: 3 / 4;
}

.quiz-foto img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  mix-blend-mode: multiply;
}

.quiz-texto {
  min-width: 0;
}

.quiz-texto h3 {
  font-size: 1.0625rem;
  margin-block: 2px 2px;
}

.quiz-texto h3 a {
  text-decoration: none;
  color: var(--tinta);
}

.quiz-texto h3 a:hover {
  color: var(--petroleo);
}

.quiz-sub {
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.quiz-nota {
  font-size: 0.8125rem;
  color: var(--petroleo);
  margin-top: var(--e-2xs);
}

.quiz-precio {
  text-align: right;
  white-space: nowrap;
}

.quiz-precio b {
  display: block;
  font-family: var(--display);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

.quiz-precio span {
  font-size: 0.75rem;
  color: var(--tinta-suave);
}

.quiz-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-md);
  max-width: 68ch;
  margin-top: var(--e-md);
  padding: var(--e-md) var(--e-lg);
  background: var(--arena);
  border-radius: var(--radio-lg);
}

.quiz-total-cifra {
  font-family: var(--display);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.quiz-aviso {
  max-width: 68ch;
  margin-top: var(--e-md);
}

.quiz-aviso p {
  font-size: 0.9375rem;
}

.quiz-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
  margin-top: var(--e-xl);
}

@media (max-width: 640px) {
  .quiz-rutina li {
    grid-template-columns: 24px 56px 1fr;
    row-gap: var(--e-xs);
  }

  .quiz-precio {
    grid-column: 2 / -1;
    text-align: left;
  }

  .quiz-precio b {
    display: inline;
    margin-right: var(--e-xs);
  }
}

/* -------------------------------------------------------- foto de ambiente */
/* Fotografía con fondo real: no lleva multiply ni recorte, solo un encuadre
   consistente con el resto del sistema. */

.hero-foto {
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px rgb(26 25 23 / 0.14);
}

.hero-foto img {
  width: 100%;
  height: auto;
  display: block;
}

.foto-ambiente {
  margin: 0 0 var(--e-xl);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.foto-ambiente img {
  width: 100%;
  display: block;
}

/* El retrato es muy alto para una columna: se encuadra al rostro. */
.foto-retrato img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
}

.foto-equipo {
  margin-block: var(--e-2xl) var(--e-xl);
}

.foto-ambiente figcaption {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  padding-top: var(--e-xs);
}

/* ---------------------------------------------------- carrusel de ambiente */
/* Todas las fotos comparten altura y conservan su proporción: el ancho de cada
   una lo calcula el CSS a partir de --proporcion, que el build escribe con las
   medidas reales del archivo. Así conviven retratos y apaisadas sin recortar a
   nadie, y esa variación de ancho es lo que lo hace ver como galería.
   Al llegar fotos nuevas no hay que tocar nada de esto. */

.galeria {
  padding-block: var(--e-2xl) var(--e-3xl);
  --alto-foto: clamp(280px, 42vh, 440px);
}

.galeria-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-lg);
  margin-bottom: var(--e-lg);
}

.galeria-cabeza h2 {
  margin-top: var(--e-xs);
  max-width: 20ch;
}

/* Cinta continua, no saltos: la misma técnica que la tira de productos. Las
   fotos van dos veces y la animación recorre la mitad, así que el bucle no
   tiene costura. */
.galeria-pista {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.galeria-cinta {
  display: flex;
  align-items: flex-start;
  gap: var(--e-md);
  width: max-content;
  padding-bottom: var(--e-xs);
  animation: desfile 70s linear infinite;
}

.galeria-cinta .foto-ambiente {
  flex: 0 0 auto;
  margin: 0;
  overflow: visible;
  width: calc(var(--alto-foto) * (var(--proporcion)));
}

.galeria-cinta .foto-ambiente img {
  height: var(--alto-foto);
  width: 100%;
  object-fit: cover;
  border-radius: var(--radio-lg);
}

.galeria-cinta figcaption {
  padding-inline: var(--e-2xs);
}

/* Sin movimiento la cinta se queda quieta y se recorre con el dedo o la rueda. */
@media (prefers-reduced-motion: reduce) {
  .galeria-cinta {
    animation: none;
  }

  .galeria-pista {
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .galeria {
    --alto-foto: 260px;
  }
}

/* Paso opcional de una rutina: el que necesita valoración previa. Se separa a
   propósito, porque un paso que se ve igual que los demás se lee obligatorio. */
.paso-opcional {
  border: 1px dashed var(--arena-honda);
  border-radius: var(--radio-md);
  padding: var(--e-sm);
  margin-left: calc(var(--e-sm) * -1);
  margin-right: calc(var(--e-sm) * -1);
}

.paso-opcional .paso-num {
  color: var(--menta-honda);
}

.paso-opcional .paso-texto .etiqueta {
  color: var(--menta-honda);
}

/* Entrada al quiz desde el índice de rutinas. Es la otra puerta al mismo
   contenido: quien no sabe cuál rutina es la suya, empieza aquí. */
.rutinas-quiz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-xl);
  align-items: center;
  background: var(--arena);
  border-radius: var(--radio-lg);
  padding: var(--e-xl);
  margin-bottom: var(--e-2xl);
}

.rutinas-quiz h2 {
  font-size: 1.5rem;
  margin-block: var(--e-2xs) var(--e-xs);
  max-width: 24ch;
}

.rutinas-quiz p:last-of-type {
  color: var(--tinta-suave);
  max-width: 54ch;
  margin: 0;
}

@media (max-width: 760px) {
  .rutinas-quiz {
    grid-template-columns: 1fr;
    gap: var(--e-lg);
  }
}

/* --------------------------------------------------------- avisos sanitarios */
/* Números de registro ante COFEPRIS. Van discretos pero legibles: son un
   requisito regulatorio, no letra chica que se pueda esconder. */

.aviso-sanitario {
  padding-block: var(--e-lg) var(--e-2xl);
}

.aviso-sanitario p,
.aviso-sanitario-linea {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.aviso-sanitario-linea {
  margin-top: var(--e-2xl);
  padding-top: var(--e-md);
  border-top: var(--borde);
}

@media (max-width: 960px) {
  .ritual-cabeza {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--e-lg);
  }

  .ritual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ritual {
    grid-template-columns: 1fr;
    gap: var(--e-xl);
  }

  .ritual-foto img {
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------- ventana del quiz */
/* El quiz en una ventana emergente, para contestarlo sin salir de la página.
   La página propia sigue existiendo: es el respaldo sin JavaScript. */

.quiz-modal {
  width: min(680px, calc(100vw - 2 * var(--e-lg)));
  max-height: min(88vh, 940px);
  padding: 0;
  border: none;
  border-radius: var(--radio-lg);
  background: var(--hueso);
  color: var(--tinta);
  box-shadow: 0 32px 80px -24px color-mix(in srgb, var(--petroleo) 55%, transparent);
  overflow: hidden;
}

.quiz-modal[open] {
  display: flex;
  flex-direction: column;
}

.quiz-modal::backdrop {
  background: color-mix(in srgb, var(--petroleo) 62%, transparent);
}

.quiz-modal-cuerpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-2xl) var(--e-xl) var(--e-xl);
}

/* Flota sobre el contenido que se desplaza debajo. */
.quiz-cerrar {
  position: absolute;
  top: var(--e-sm);
  right: var(--e-sm);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: var(--borde);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background var(--t-corta) var(--ent), color var(--t-corta) var(--ent);
}

.quiz-cerrar:hover {
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: var(--hueso);
}

.quiz-cerrar svg {
  width: 18px;
  height: 18px;
}

/* Dentro de la ventana el quiz es más compacto que en su página. */
.quiz-modal .quiz-cabeza {
  padding-right: var(--e-2xl);
}

.quiz-modal .quiz-cabeza .medida {
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: no-preference) {
  .quiz-modal[open] {
    animation: quiz-entra 0.26s var(--ent);
  }

  .quiz-modal[open]::backdrop {
    animation: quiz-fondo 0.26s var(--ent);
  }
}

@keyframes quiz-entra {
  from {
    opacity: 0;
    translate: 0 12px;
    scale: 0.98;
  }
}

@keyframes quiz-fondo {
  from {
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .quiz-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto auto 0;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  }

  .quiz-modal-cuerpo {
    padding: var(--e-xl) var(--e-lg) var(--e-lg);
  }
}

/* Un solo botón entre dos franjas: no necesita el aire de una sección completa. */
.franja-laboratorio {
  padding-block: var(--e-2xl);
  text-align: center;
}

/* Las tarjetas del quiz cuando viven en el inicio: cinco en fila, no dos. */
.quiz-tarjetas-inicio {
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e-md);
}

.franja-pie {
  margin-top: var(--e-xl);
  text-align: center;
}

/* El desplegable lleva su propia flecha: la nativa cambia en cada navegador. */
.campo select {
  appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%),
    linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.campo select:invalid {
  color: color-mix(in srgb, var(--tinta-suave) 62%, transparent);
}

/* ------------------------------------------------- retrato detrás del trío */
/* La modelo va recortada, sin fondo ni marco: se integra con el fondo del sitio
   igual que los frascos, que es lo que pidió el cliente. El desvanecido de
   abajo esconde el corte del encuadre, donde su cuerpo llega al borde. */

.hero-retrato {
  position: relative;
  margin: 0 auto;
  width: 96%;
}

.hero-retrato img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 6%;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
}


/* Posicionado y después en el DOM: así se pinta encima del retrato sin
   necesidad de z-index, que cortaría la mezcla de los frascos. El margen
   negativo los sube sobre la mitad baja de la foto —la que lleva el velo— en
   vez de apilarlos debajo, que estiraba el hero fuera de la primera pantalla.
   Nada de `transform` aquí: crearía un contexto de apilamiento y los frascos
   saldrían con su rectángulo blanco (ver DESIGN.md). */
.hero-trio {
  position: relative;
  margin-top: -50%;
}

/* La molécula del logo como marca de agua del hero: asoma por detrás del
   retrato. Va en menta honda y muy tenue, porque los frascos se funden con
   multiply y cualquier trazo oscuro debajo los mancharía. */
.hero-molecula {
  position: absolute;
  top: 4%;
  left: -20%;
  width: 44%;
  color: var(--menta-honda);
  opacity: 0.22;
  pointer-events: none;
  animation: flotar 11s ease-in-out infinite;
  will-change: transform;
}

.hero-molecula svg {
  display: block;
  width: 100%;
  height: auto;
}