/* ============================================================
   WaterGo · landing

   Tokens en tokens.css. Aquí no se define ni un color nuevo.
   Selectores planos de una sola clase. Móvil primero.

   ── v4 · auditoría con impeccable + soft-skill ──────────────
   Lo que se ha quitado, y por qué:

   · LOS SIETE CINTILLOS. La etiqueta diminuta en versalitas
     trackeadas encima de cada sección aparece en el 55-95 % de las
     webs generadas por IA. Era la marca de agua de la página. Un
     titular no necesita que le presenten.
   · EL FONDO CREMA. El casi-blanco cálido es el fondo por defecto
     de 2026; hasta el nombre del token (--papel) lo delata. Ahora
     la página se baña en el color del propio producto.
   · EL MISMO FADE-UP EN TODO. Una sola idea de movimiento,
     aplicada a pocos elementos, en vez del reflejo uniforme.
   · EL SEGUNDO BOTÓN FANTASMA del héroe. Un solo CTA.

   Tres técnicas nuevas que sostienen el conjunto:
   1. MULTIPLY. Las fotos de producto vienen sobre blanco. Con
      mix-blend-mode: multiply sobre el pastel, ese blanco
      desaparece y el producto queda IMPRESO sobre el color, no
      recortado encima. Es lo que más cambia por menos código.
   2. BAÑO DE COLOR. Cada causa es su color a sangre. La página
      viaja de un color a otro: eso es la marca.
   3. SCROLL NATIVO. animation-timeline: view(), en el compositor,
      sin IntersectionObserver. Detrás de @supports, así que donde
      no llega (Firefox) el contenido se ve quieto y entero.
   ============================================================ */

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

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

/* recorte del half-leading: alinea ópticamente los titulares con lo
   que tienen al lado. Donde no llega, espaciado normal. */
@supports (text-box: trim-both cap alphabetic) {
  h1, h2, h3, .titular, .heroe__titular, .causa__titular {
    text-box: trim-both cap alphabetic;
  }
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; top: -100px; left: var(--e-4);
  z-index: var(--z-toast);
  background: var(--tinta); color: var(--papel);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-l);
  text-decoration: none;
  transition: top var(--dur-micro) var(--ease-out);
}
.saltar:focus { top: var(--e-4); }


/* ---------- primitivas ---------- */

.limite {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.seccion {
  padding-block: var(--pad-seccion);
  background: var(--color-background);
  color: var(--color-on-background);
}

.dato {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  font-size: var(--t-dato);
}

/* El cintillo sobrevive SOLO para páginas interiores que aún lo
   usan. Fuera de la portada. Ver la nota de arriba. */
.cintillo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--e-5);
}

.reg { font-size: .55em; vertical-align: super; letter-spacing: 0; }

/* ---------- escala tipográfica ----------
   El contraste entre el titular (≈99 px) y el dato (11 px) es de 9:1.
   ESO es lo que se lee como caro; las plantillas se mueven en 2:1. */

.titular {
  font-size: var(--t-h2);
  letter-spacing: clamp(-0.038em, -0.018em - 0.28vw, -0.018em);
}
.titular--gigante { font-size: var(--t-hero); letter-spacing: -0.036em; }

.entradilla {
  margin-top: var(--e-6);
  font-size: var(--t-lead);
  color: var(--color-secondary);
  max-width: 46ch;
}
.entradilla--ancha { max-width: 58ch; }
.entradilla strong { color: var(--color-on-background); font-weight: 600; }

.parrafo {
  margin-top: var(--e-4);
  color: var(--color-secondary);
  max-width: 56ch;
}

.rotulo { max-width: 46ch; margin-bottom: var(--e-8); }
.rotulo__titulo { font-size: var(--t-h2); }
.rotulo__nota {
  margin-top: var(--e-4);
  color: var(--color-secondary);
  font-size: var(--t-lead);
  max-width: 52ch;
}

.panel {
  background: var(--color-surface);
  border-radius: var(--r-g);
  padding: clamp(20px, 3vw, 36px);
  box-shadow: var(--sombra-m);
  border: 1px solid color-mix(in srgb, var(--color-on-background) 5%, transparent);
}


/* ---------- tablas ----------
   Las usan la ficha de producto y /truesip. */

.tabla-scroll {
  margin-top: var(--e-6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.tabla-scroll:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-small); text-align: left; }
.tabla th, .tabla td {
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
  vertical-align: top;
}
.tabla thead th {
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: var(--color-muted); font-weight: 400;
}
.tabla tbody th { font-family: var(--f-body); font-weight: 400; color: var(--color-secondary); }
.tabla td { color: var(--color-muted); }
.tabla .si { color: var(--color-on-background); font-weight: 600; }

.marca-prov { color: var(--color-muted); font-family: var(--f-mono); }
.nota-tabla { margin-top: var(--e-4); font-size: var(--t-small); color: var(--color-muted); max-width: 62ch; }


/* ---------- botones ----------
   Muelle real con linear(): sustituye a una librería de animación
   para el 95 % de los casos. Solo en controles pequeños; el rebote
   de un panel grande se ve barato. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-3);
  min-height: var(--toque-min);
  padding: 0 6px 0 var(--e-6);
  border: 0; border-radius: var(--r-l);
  font-family: var(--f-display);
  font-weight: 600; font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: scale 420ms var(--muelle),
              background-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.btn:hover { scale: 1.03; }
.btn:active { scale: .985; transition-duration: 90ms; }

/* el disco del final: la flecha nunca va desnuda al lado del texto,
   va metida en su propio círculo, a ras del borde interior */
.btn__disco {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-on-primary) 22%, transparent);
  font-size: .95rem; line-height: 1;
  transition: translate var(--dur-micro) var(--ease-out);
}
.btn:hover .btn__disco { translate: 3px 0; }

.btn--primario {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 2px rgba(29,29,27,.10), 0 6px 20px rgba(29,29,27,.14);
}
.btn--ancho { width: 100%; }
.btn--suelto { margin-top: var(--e-7); }

.btn--texto {
  padding: 0 6px 0 var(--e-3);
  color: var(--color-on-background);
  background: transparent;
}
.btn--texto .btn__disco { background: color-mix(in srgb, var(--color-on-background) 10%, transparent); }


/* ---------- cinta · marquesina ----------
   Dos pistas idénticas y translate -100%. La máscara de degradado en
   los bordes es lo que separa esto de un banner de plantilla. */

.cinta {
  background: var(--tinta);
  color: #F7F3F0;
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  overflow: hidden;
  display: flex;
}
.cinta__cuerpo {
  /* la máscara va en la PISTA, no en la barra: puesta en .cinta
     desvanecía su propio fondo negro y dejaba una cuña gris */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  display: flex; flex: 0 0 auto; align-items: center;
  gap: var(--e-6);
  padding: var(--e-3) 0;
  padding-inline-end: var(--e-6);
  white-space: nowrap;
  animation: desliza 42s linear infinite;
}
.cinta:hover .cinta__cuerpo { animation-play-state: paused; }
.cinta__sep { opacity: .4; }

@keyframes desliza { to { translate: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .cinta { mask-image: none; justify-content: center; }
  .cinta__cuerpo { animation: none; flex-wrap: wrap; white-space: normal; padding-inline: var(--canal); }
  .cinta__cuerpo[aria-hidden] { display: none; }
}


/* ---------- cabecera · isla flotante ---------- */

.cabecera {
  position: sticky;
  top: var(--e-3);
  z-index: var(--z-cabecera);
  padding-inline: var(--canal);
  margin-top: var(--e-5);
  margin-bottom: calc(var(--e-9) * -1);
  /* La cabecera ocupa TODO el ancho aunque solo se vea la isla del
     centro. Sin esto, su banda transparente se traga los clics de lo
     que hay debajo y parece que la página "va cuando quiere". */
  pointer-events: none;
}
.cabecera__cuerpo,
.menu-movil { pointer-events: auto; }

.cabecera__cuerpo {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 7px 7px 7px var(--e-5);
  display: flex; align-items: center; gap: var(--e-3);
  min-width: 0;

  background: color-mix(in srgb, var(--blanco) 74%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent);
  border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(29,29,27,.04), 0 10px 34px rgba(29,29,27,.09);
  transition: max-width var(--dur-panel) var(--ease-out),
              box-shadow var(--dur-panel) var(--ease-out);
}
/* Opaca al bajar. Con fondo al 74 % y blur, un titular de 50 px que
   pasa por debajo no se lee como efecto: se lee como una mancha. */
.cabecera.esta-abajo .cabecera__cuerpo {
  max-width: 860px;
  background: var(--papel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(29,29,27,.05), 0 14px 44px rgba(29,29,27,.14);
}

.marca {
  display: inline-flex; align-items: flex-end; gap: var(--e-2);
  text-decoration: none; margin-right: auto; min-width: 0;
}
.marca__puntos {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding-bottom: 3px; flex: none;
}
.marca__puntos i { display: block; border-radius: 50%; background: currentColor; }
.marca__puntos i:nth-child(1) { width: 3px; height: 3px; }
.marca__puntos i:nth-child(2) { width: 7px; height: 7px; }
.marca__puntos i:nth-child(3) { width: 11px; height: 11px; }
.marca__texto {
  font-family: var(--f-display);
  font-weight: 700; font-size: 1.3rem;
  letter-spacing: -0.045em;
}

.nav { display: none; gap: var(--e-1); }
.nav a {
  font-family: var(--f-display); font-size: .93rem;
  text-decoration: none;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-l);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.nav a:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }

.cesta {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 44px; padding-inline: var(--e-4);
  background: var(--tinta); color: var(--papel);
  border: 0; border-radius: var(--r-l);
  font-family: var(--f-display); font-size: .9rem; font-weight: 600;
  cursor: pointer; flex: none;
  transition: scale 420ms var(--muelle);
}
.cesta:hover { scale: 1.04; }
.cesta:active { scale: .97; transition-duration: 90ms; }
.cesta__n {
  font-family: var(--f-mono); font-size: .68rem;
  font-variant-numeric: tabular-nums;
  min-width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--papel) 22%, transparent);
}

.menu-btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tinta) 5%, transparent);
  border: 0; border-radius: var(--r-l);
  cursor: pointer;
}
.menu-btn__barras,
.menu-btn__barras::before,
.menu-btn__barras::after {
  display: block; width: 16px; height: 1.5px; border-radius: 2px;
  background: var(--tinta);
  transition: transform var(--dur-panel) var(--ease-suave),
              opacity var(--dur-micro) var(--ease-out);
}
.menu-btn__barras { position: relative; }
.menu-btn__barras::before,
.menu-btn__barras::after { content: ""; position: absolute; left: 0; }
.menu-btn__barras::before { top: -5px; }
.menu-btn__barras::after  { top: 5px; }
.menu-btn.esta-abierto .menu-btn__barras { background: transparent; }
.menu-btn.esta-abierto .menu-btn__barras::before { transform: translateY(5px) rotate(45deg); }
.menu-btn.esta-abierto .menu-btn__barras::after  { transform: translateY(-5px) rotate(-45deg); }

.menu-movil {
  max-width: var(--ancho);
  margin: var(--e-2) auto 0;
  display: flex; flex-direction: column;
  padding: var(--e-3);
  background: color-mix(in srgb, var(--blanco) 90%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-l);
}
.menu-movil[hidden] { display: none; }
.menu-movil a {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 500;
  text-decoration: none;
  padding: var(--e-4);
  border-radius: var(--r-s);
  opacity: 0; transform: translateY(10px);
  animation: entra-menu 420ms var(--ease-out) forwards;
}
.menu-movil a:nth-child(1) { animation-delay: 40ms; }
.menu-movil a:nth-child(2) { animation-delay: 80ms; }
.menu-movil a:nth-child(3) { animation-delay: 120ms; }
.menu-movil a:nth-child(4) { animation-delay: 160ms; }
.menu-movil a:nth-child(5) { animation-delay: 200ms; }
.menu-movil a:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }

@keyframes entra-menu { to { opacity: 1; transform: translateY(0); } }


/* ══════════════════ 1 · HÉROE ══════════════════
   El corte prueba el titular: bajo el acero, la cámara de aislamiento
   y la cerámica blanca. Texto a la izquierda, corte a la derecha, sobre
   el MISMO greige que trae la imagen para que la botella se funda sin
   recuadro. La rejilla se apila en móvil (texto arriba, corte debajo). */

.heroe-corte {
  background: #E5D5D0;
  color: var(--tinta);
  padding-top: clamp(104px, 13vw, 172px);
  padding-bottom: clamp(36px, 6vw, 80px);
  overflow: hidden;
}

/* pistas flotantes que señalan las dos capas del corte */
.capa-pista {
  position: absolute;
  transform: translate(-100%, -50%);
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; pointer-events: none;
  animation: pista-entra 700ms var(--ease-out) both;
}
.capa-pista--ceramica { left: 51%; top: 41%; animation-delay: 500ms; }
.capa-pista--aislante { left: 58%; top: 64%; animation-delay: 700ms; }
@keyframes pista-entra { from { opacity: 0; transform: translate(-100%, -50%) translateX(8px); } to { opacity: 1; } }
.capa-pista__texto {
  font-family: var(--f-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tinta); line-height: 1.35; text-align: right;
}
.capa-pista__texto b {
  display: block; font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 10px;
  color: color-mix(in srgb, var(--tinta) 76%, transparent);
}
.capa-pista__linea { width: 30px; height: 1.5px; background: var(--tinta); flex: none; }
.capa-pista__punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--tinta);
  background: color-mix(in srgb, var(--papel) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) { .capa-pista { animation: none; } }
.heroe-corte__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}
.heroe-corte__titular {
  font-size: var(--t-hero);
  letter-spacing: clamp(-0.04em, -0.02em - 0.3vw, -0.02em);
}
.heroe-corte__entrada {
  margin-top: var(--e-5);
  font-size: var(--t-lead);
  color: color-mix(in srgb, var(--tinta) 78%, transparent);
  max-width: 38ch;
}
.heroe-corte__entrada strong { color: var(--tinta); font-weight: 600; }
.heroe-corte__acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-5);
  margin-top: var(--e-7);
}
.heroe-corte .btn--primario { background: var(--tinta); color: var(--papel); }
.heroe-corte .btn--texto { color: var(--tinta); }
.heroe-corte .btn--texto .btn__disco { background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.heroe-corte__figura { position: relative; margin: 0; justify-self: center; width: fit-content; }
.heroe-corte__figura img {
  display: block;
  width: 100%;
  max-width: clamp(240px, 52vw, 400px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 30px 44px rgba(29,29,27,.16));
}

@media (min-width: 900px) {
  .heroe-corte__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    gap: clamp(32px, 5vw, 72px);
    min-height: clamp(520px, 72vh, 740px);
  }
  .heroe-corte__figura { justify-self: end; }
}

/* las cifras: dato grande, etiqueta minúscula. El contraste de escala
   hace el trabajo que en las plantillas hacen los iconos. */
.cifras {
  margin: var(--e-9) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--e-5) var(--e-8);
}
.cifras div { display: flex; flex-direction: column-reverse; gap: 2px; }
.cifras dt {
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: color-mix(in srgb, var(--tinta) 72%, transparent);
}
.cifras dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700; letter-spacing: -0.03em;
  line-height: 1;
}


/* ══════════════════ 1b · EL FRÍO DE DENTRO (banda de vídeo) ══════════════════ */

.pelicula {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  overflow: hidden;
  background: var(--tinta);
}
.pelicula__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* la frase entra sola cuando el vuelo ya está dentro del mar de
   glaciares (lo marca el JS con .esta-en-frio, sincronizado con el
   tiempo real del vídeo). Sobre el azul oscuro del mar, texto claro. */
.pelicula__glosa {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: var(--canal);
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}
.pelicula.esta-en-frio .pelicula__glosa { opacity: 1; }
.pelicula__frase {
  margin: 0;
  max-width: 18ch; text-align: center;
  color: var(--papel);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 4rem);
  line-height: 1.03; letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 44px rgba(0,0,0,.42);
  transform: translateY(14px);
  transition: transform 900ms var(--ease-out);
}
.pelicula.esta-en-frio .pelicula__frase { transform: translateY(0); }
@media (max-width: 640px) {
  .pelicula { aspect-ratio: 4 / 5; }
}


/* ══════════════════ 2 · TRUESIP ══════════════════ */

/* Oscuro a propósito: es el primer corte de la página y evita que
   héroe, TrueSip y gama sean tres blancos casi iguales seguidos.
   Además, la sección va de lo que NO se ve —los poros del acero— y
   sobre negro la capa blanca del corte salta a la cara. */
.capa {
  background: var(--tinta);
  color: #F7F3F0;
  --color-on-background: #F7F3F0;
  --color-secondary: #C9C4BE;
  --color-primary: #F7F3F0;
  --color-on-primary: var(--tinta);
}
.capa__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* El macro del interior ya viene con fondo oscuro propio, así que no
   necesita marco: va directo sobre la sección negra y se funde. */
.capa__macro { margin: 0; }
.capa__macro img { width: 100%; border-radius: var(--r-g); }
.capa__macro figcaption {
  margin-top: var(--e-4);
  font-size: var(--t-small);
  color: var(--color-secondary);
}

/* doble bisel: carcasa teñida + núcleo blanco con radio concéntrico */
.capa__corte {
  margin: 0;
  background: linear-gradient(160deg, var(--tinte-azul) 0%,
              color-mix(in srgb, var(--tinte-azul) 30%, var(--blanco)) 100%);
  border-radius: var(--r-g);
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
  box-shadow: var(--sombra-l);
}
.capa__corte img { width: 100%; border-radius: calc(var(--r-g) - 14px); background: var(--blanco); }
.capa__corte figcaption {
  margin-top: var(--e-4); padding-inline: var(--e-2);
  font-size: var(--t-small); color: var(--color-secondary);
}


/* ══════════════════ 3 · LA GAMA ══════════════════ */

.gama__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* círculos llenos, como en el logotipo: con borde se leerían como
   botones de radio, que es justo lo que no son */
.puntos { display: flex; align-items: center; gap: var(--e-4); margin-top: var(--e-8); }
.punto {
  display: grid; place-items: center; gap: var(--e-2);
  width: 64px; min-height: var(--toque-min);
  padding: var(--e-2) 0;
  background: transparent; border: 0; border-radius: var(--r-m);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.punto:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.punto i {
  display: block; width: var(--d); height: var(--d);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tinta) 16%, transparent);
  transition: background-color var(--dur-micro) var(--ease-out),
              scale 420ms var(--muelle);
}
.punto:hover i { background: color-mix(in srgb, var(--tinta) 34%, transparent); scale: 1.1; }
.punto[aria-selected="true"] i { background: var(--tinta); }
.punto__et {
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); color: var(--color-muted);
}
.punto[aria-selected="true"] .punto__et { color: var(--color-on-background); }

.gama__panel { margin-top: var(--e-7); }
.gama__nombre {
  font-family: var(--f-display); font-size: var(--t-h3);
  font-weight: 700; letter-spacing: var(--ls-display);
}
.gama__frase { margin-top: var(--e-3); color: var(--color-secondary); max-width: 44ch; }

.gama__datos {
  margin: var(--e-6) 0 0;
  border-top: 1px solid var(--color-border);
  max-width: 420px;
}
.gama__datos div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.gama__datos dt { color: var(--color-secondary); font-size: var(--t-small); }
.gama__datos dd {
  margin: 0; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; font-size: .95rem;
}
.gama__panel .btn { margin-top: var(--e-7); }

.gama__escena { margin: 0; }
.gama__marco {
  background: linear-gradient(160deg, var(--tinte) 0%,
              color-mix(in srgb, var(--tinte) 30%, var(--blanco)) 100%);
  border-radius: var(--r-g);
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
  box-shadow: var(--sombra-l);
  transition: background var(--dur-panel) var(--ease-out);
}
.gama__botella {
  width: 100%;
  border-radius: calc(var(--r-g) - 12px);
  background: var(--blanco);
  transition: opacity var(--dur-panel) var(--ease-out);
}
.gama__escena.esta-cambiando .gama__botella { opacity: 0; }
.gama__pie { margin-top: var(--e-4); text-align: center; font-size: var(--t-small); color: var(--color-muted); }


/* ══════════════════ 4 · LAS CUATRO CAUSAS ══════════════════
   Color a sangre. La foto de producto va con MULTIPLY: su fondo
   blanco desaparece y la botella queda impresa sobre el color, no
   pegada encima. Nada de marco: aquí el color ES el fondo.

   Contrastes de la tinta, medidos:
   Nude 13,20:1 · Blue 11,23:1 · Pink 8,41:1 → los tres AAA. */

.causa { padding-block: clamp(56px, 7.5vw, 104px); }

/* La intro vive DENTRO del primer panel: tenerla en su propia sección
   nude, seguida de una causa nude, daba dos beiges idénticos seguidos
   y era medio scroll sin que pasara nada. */
/* nada de max-width en el contenedor: estrangulaba el titular gigante
   y lo partía en una palabra por línea */
.causa__entrada { margin-bottom: clamp(48px, 7vw, 88px); }
.causa__entrada .titular--gigante { max-width: 14ch; }
.causa__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.causa__ods {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3);
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--e-5);
}
.causa__ods b {
  font-weight: 500;
  color: var(--color-on-background);
  border: 1px solid color-mix(in srgb, var(--tinta) 26%, transparent);
  border-radius: var(--r-l);
  padding: 4px var(--e-3);
}

.causa__titular {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  letter-spacing: clamp(-0.038em, -0.018em - 0.3vw, -0.018em);
}
.causa__historia {
  margin-top: var(--e-5);
  font-size: var(--t-lead);
  color: var(--color-secondary);
  max-width: 46ch;
}
.causa .btn { margin-top: var(--e-7); }

/* Las botellas son fotografía de estudio generada a 4K y RECORTADA
   (fondo transparente). Eso quita de encima el mix-blend-mode que
   había antes y toda su fragilidad: la mezcla se rompía con cualquier
   contexto de apilamiento por encima —un isolation, un z-index, o
   simplemente animar la opacidad— y devolvía el rectángulo blanco.
   Con alfa de verdad, no hay nada que romper. */
.causa__foto { margin: 0; }
.causa__foto img {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  filter: drop-shadow(0 26px 34px rgba(29,29,27,.16));
}

/* la cuarta no tiene acabado: silueta, y sin multiply porque no hay
   blanco que quitar y el trazo tiene que verse */
/* La cuarta no tiene acabado. Poner otro blanco casi igual al resto
   la volvía invisible; sin luz se lee como lo que es: una ausencia.
   La silueta es traza oscura sobre blanco, así que se invierte —traza
   blanca, fondo negro— y screen se come ese negro. */
.causa--pendiente {
  background: var(--tinta);
  color: #F7F3F0;
  --color-on-background: #F7F3F0;
  --color-secondary: #C9C4BE;
  --color-muted: #ADA9A4;
}
.causa--pendiente .causa__ods b { color: #F7F3F0; border-color: color-mix(in srgb, #F7F3F0 34%, transparent); }
.causa--pendiente .btn--texto { color: #F7F3F0; }
.causa--pendiente .btn--texto .btn__disco { background: color-mix(in srgb, #F7F3F0 16%, transparent); }
.causa--pendiente .causa__foto img {
  mix-blend-mode: screen;
  filter: invert(1);
  opacity: .6;
}


/* ══════════════════ 5 · PERSONALIZACIÓN ══════════════════ */

.personalizar { background: var(--papel); }
.tecnicas__macro { margin: 0 0 var(--e-9); }
.tecnicas__macro img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r-g);
  box-shadow: var(--sombra-l);
}

.tecnicas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.tecnica {
  border-top: 1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  padding-top: var(--e-6);
}
.tecnica__nombre { font-size: var(--t-h3); }
.tecnica__texto { margin-top: var(--e-4); color: var(--color-secondary); max-width: 46ch; }
.tecnica__datos { margin: var(--e-6) 0 0; }
.tecnica__datos div {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.tecnica__datos dt {
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: var(--color-muted);
}
.tecnica__datos dd { margin: 0; font-size: var(--t-small); }


/* ══════════════════ 6 · SIMULADOR ══════════════════ */

.simulador { background: var(--tinte-nude); }
.simulador__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.campo { margin: var(--e-6) 0 0; padding: 0; border: 0; }
.campo__et {
  display: block; margin-bottom: var(--e-3); padding: 0;
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: var(--color-secondary);
}
.campo__caja {
  width: 100%; max-width: 420px;
  min-height: var(--toque-min);
  padding-inline: var(--e-4);
  font: inherit;
  color: var(--color-on-background);
  background: var(--blanco);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-l);
}
.campo__pista { margin-top: var(--e-2); font-size: var(--t-small); color: var(--color-muted); max-width: 46ch; }

.muestras-sim, .tintas { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.muestras-sim > div, .tintas > div {
  position: relative;
  min-width: var(--toque-min); min-height: var(--toque-min);
}
.muestras-sim input, .tintas input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.muestra-sim, .tinta {
  display: grid; place-items: center;
  width: var(--toque-min); height: var(--toque-min);
  border-radius: 50%;
  background: var(--m);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  transition: scale 420ms var(--muelle), box-shadow var(--dur-micro) var(--ease-out);
}
.muestras-sim input:hover + .muestra-sim,
.tintas input:hover + .tinta { scale: 1.07; }
.muestras-sim input:checked + .muestra-sim,
.tintas input:checked + .tinta {
  box-shadow: inset 0 0 0 1px var(--color-border-strong), 0 0 0 2px var(--tinta);
}
.muestras-sim input:focus-visible + .muestra-sim,
.tintas input:focus-visible + .tinta { outline: 2px solid var(--color-ring); outline-offset: 4px; }

/* control segmentado · lo comparten el simulador y la ficha */
.tapones {
  display: inline-flex; padding: 4px;
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--r-l);
  max-width: 100%; overflow-x: auto;
}
.tapones > div { position: relative; flex: none; }
.tapones input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tapon {
  display: grid; place-items: center;
  min-height: 40px; padding-inline: var(--e-4);
  border-radius: var(--r-l);
  font-family: var(--f-display); font-size: .92rem; font-weight: 500;
  color: var(--color-secondary); white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.tapones input:hover + .tapon { color: var(--color-on-background); }
.tapones input:checked + .tapon {
  background: var(--blanco); color: var(--color-on-background);
  box-shadow: var(--sombra-s);
}
.tapones input:focus-visible + .tapon { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.sim__escena { display: flex; align-items: stretch; gap: var(--e-4); justify-content: center; }
.sim__caja {
  flex: 0 1 auto; min-width: 0;
  background: linear-gradient(160deg, var(--tinte-azul) 0%,
              color-mix(in srgb, var(--tinte-azul) 30%, var(--blanco)) 100%);
  border-radius: var(--r-g);
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
  box-shadow: var(--sombra-l);
}
.sim__marco {
  position: relative;
  height: clamp(360px, 54vh, 560px);
  width: auto; margin-inline: auto;
  background: var(--blanco);
  border-radius: calc(var(--r-g) - 12px);
  overflow: hidden;
}
.sim__foto { position: absolute; max-width: none; transition: opacity var(--dur-micro) var(--ease-out); }
.sim__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.sim__altura { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); flex: none; }
.sim__altura .campo__et { margin: 0; }
.rango-vertical {
  writing-mode: vertical-lr; direction: rtl;
  width: var(--toque-min);
  height: clamp(300px, 46vh, 500px);
  accent-color: var(--tinta); cursor: ns-resize;
}

.zona {
  fill: color-mix(in srgb, var(--tinta) 4%, transparent);
  stroke: color-mix(in srgb, var(--tinta) 26%, transparent);
  stroke-width: .5; stroke-dasharray: 2 2;
}
.eje {
  stroke: color-mix(in srgb, var(--tinta) 38%, transparent);
  stroke-width: .4; stroke-dasharray: 3 2.5;
}

/* Se llama .grabado y no .marca porque .marca ya era el logotipo de
   la cabecera: la colisión hacía que querySelector devolviera el
   logo del header. */
.grabado__texto { font-family: var(--f-display); font-weight: 600; paint-order: stroke; }
.grabado[data-tecnica="laser"] .grabado__texto { fill: #8E8A85; }
.grabado[data-tecnica="laser"] image { filter: grayscale(1) brightness(1.35) opacity(.85); }
.grabado[data-tecnica="uv"] .grabado__texto { fill: currentColor; }

.cota__linea { stroke: var(--tinta); stroke-width: .45; marker-start: url(#punta); marker-end: url(#punta); }
.cota__guia { stroke: color-mix(in srgb, var(--tinta) 30%, transparent); stroke-width: .35; stroke-dasharray: 1.5 1.5; }
.cota__texto {
  font-family: var(--f-mono); font-size: 6px; fill: var(--tinta);
  paint-order: stroke; stroke: var(--tinte-nude); stroke-width: 2.4px; stroke-linejoin: round;
}

.sim__pie { margin-top: var(--e-5); text-align: center; }
.sim__medida { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--e-2) var(--e-4); }
.sim__medida b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.sim__medida span { font-size: var(--t-small); color: var(--color-secondary); }
.sim__nota { margin-top: var(--e-3); font-size: var(--t-small); color: var(--color-muted); }
.sim__nota--aviso { color: var(--color-warning); }

.campo__valor {
  float: right;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--color-on-background); letter-spacing: 0; text-transform: none;
}
.campo__rango { width: 100%; max-width: 420px; height: var(--toque-min); accent-color: var(--tinta); cursor: pointer; }
.campo__archivo {
  width: 100%; max-width: 420px; min-height: var(--toque-min);
  padding: var(--e-3) var(--e-4);
  font: inherit; font-size: var(--t-small);
  background: var(--blanco);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--r-m); cursor: pointer;
}
.campo__archivo::file-selector-button {
  margin-right: var(--e-4);
  min-height: 34px; padding-inline: var(--e-4);
  font: inherit; font-size: var(--t-small); font-weight: 600;
  font-family: var(--f-display);
  color: var(--color-on-primary); background: var(--color-primary);
  border: 0; border-radius: var(--r-l); cursor: pointer;
}

.logo-cargado {
  display: flex; align-items: center; gap: var(--e-3);
  margin-top: var(--e-4); padding: var(--e-3);
  background: var(--blanco);
  border: 1px solid var(--color-border);
  border-radius: var(--r-m);
  max-width: 420px;
}
.logo-cargado[hidden] { display: none; }
.logo-cargado img {
  width: 44px; height: 44px; flex: none; object-fit: contain;
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
  border-radius: var(--r-s);
}
.logo-cargado__nombre {
  flex: 1; min-width: 0;
  font-family: var(--f-mono); font-size: var(--t-dato);
  color: var(--color-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logo-cargado__quitar {
  flex: none; min-height: 36px; padding-inline: var(--e-4);
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
  border: 0; border-radius: var(--r-l);
  font-family: var(--f-display); font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.logo-cargado__quitar:hover { background: color-mix(in srgb, var(--tinta) 12%, transparent); }


/* ══════════════════ 7 · EMPRESAS ══════════════════ */

.empresas__rejilla {
  display: grid; gap: var(--e-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.empresas__datos { margin: 0; border-top: 1px solid var(--color-border); }
.empresas__datos div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.empresas__datos dt { color: var(--color-secondary); font-size: var(--t-small); }
.empresas__datos dd {
  margin: 0; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase; letter-spacing: var(--ls-dato);
  font-size: var(--t-dato);
}


/* ══════════════════ 8 · PREGUNTAS ══════════════════ */

.faq { background: var(--tinte-nude); }
.faq__cabeza { margin-bottom: var(--e-8); }
.faq__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
}
.faq__item {
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-5) 0;
  /* el foco por teclado tiene que verse; el summary es el control */
  outline-offset: 4px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* el signo +, dibujado con dos trazos para poder girarlo */
.faq__mas {
  position: relative; flex: none;
  width: 22px; height: 22px;
}
.faq__mas::before, .faq__mas::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--tinta);
  transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out);
}
.faq__mas::after { transform: translateY(-50%) rotate(90deg); }
.faq__mas::before { transform: translateY(-50%); }
.faq__item[open] .faq__mas::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__r {
  padding: 0 0 var(--e-6);
  max-width: 62ch;
}
.faq__r p { color: var(--color-secondary); }
.faq__r a { color: inherit; text-underline-offset: 3px; }
/* al abrir, la respuesta entra en vez de aparecer de golpe */
@media not (prefers-reduced-motion: reduce) {
  .faq__item[open] .faq__r { animation: faq-abre 480ms var(--ease-out) both; }
  @keyframes faq-abre {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ══════════════════ PIE ══════════════════ */

.pie { background: var(--tinta); color: #F7F3F0;
  border-top: 1px solid rgba(247,243,240,.14); padding-block: var(--e-9) var(--e-7); }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
.pie__empresa { margin-top: var(--e-5); font-size: var(--t-small); color: #ADA9A4; line-height: 1.7; }
.pie__col { display: flex; flex-direction: column; align-items: flex-start; }
.pie__et {
  margin: 0 0 var(--e-3);
  font-family: var(--f-mono); font-size: var(--t-dato);
  letter-spacing: var(--ls-dato); text-transform: uppercase;
  color: #ADA9A4; font-weight: 400;
}
.pie__col a { padding: var(--e-2) 0; font-size: var(--t-small); text-decoration: none; color: #F7F3F0; }
.pie__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__nota {
  margin-top: var(--e-8); padding-top: var(--e-5);
  border-top: 1px solid #38352F;
  font-size: var(--t-small); color: #ADA9A4;
}


/* ══════════════════ MOVIMIENTO ══════════════════
   Una sola idea, aplicada a pocos elementos. El fade-up idéntico en
   cada sección es el reflejo por defecto: lo contrario de bold.

   Scroll nativo con animation-timeline: view(). Va en el compositor,
   sin IntersectionObserver. OJO: el atajo `animation` resetea
   animation-timeline, así que la propiedad va DESPUÉS. Y detrás de
   @supports, para que donde no llega el contenido se vea quieto y
   entero en vez de invisible. */

@media not (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    /* OJO: la foto de la causa NO entra aquí. Animar opacity (o
       transform) crea un contexto de apilamiento, y eso encierra el
       mix-blend-mode del producto: el blanco del PNG deja de fundirse
       con el color del panel y reaparece el rectángulo blanco. La
       botella se queda quieta y solo llega el texto; además queda
       más tranquilo. */
    .causa__texto,
    .capa__corte,
    .gama__escena {
      animation: entra-suave linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
    @keyframes entra-suave {
      from { opacity: 0; translate: 0 2.2rem; }
      to   { opacity: 1; translate: 0 0; }
    }
  }

  /* el héroe entra a la carga, no al scroll: ya está en pantalla */
  .heroe__titular { animation: sube-titular 900ms var(--ease-out) both; }
  .heroe__entrada { animation: sube-titular 900ms var(--ease-out) 120ms both; }
  .heroe__acciones { animation: sube-titular 900ms var(--ease-out) 200ms both; }
  .cifras { animation: sube-titular 900ms var(--ease-out) 280ms both; }
  @keyframes sube-titular {
    from { opacity: 0; translate: 0 1.4rem; }
    to   { opacity: 1; translate: 0 0; }
  }
}


/* ══════════════════ TRANSICIÓN ENTRE PÁGINAS ══════════════════
   El sitio es multipágina estático: la View Transitions API lo cose
   sin una sola línea de JavaScript. Donde no llega (Firefox), la
   navegación es la de siempre. */

@view-transition { navigation: auto; }

::view-transition-group(*) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root) { animation: vt-sale 150ms both; }
::view-transition-new(root) { animation: vt-entra 260ms both; }
@keyframes vt-sale  { to   { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; translate: 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}


/* ══════════════════ PUNTOS DE RUPTURA ══════════════════ */

@media (min-width: 700px) {
  .tecnicas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
  .empresas__rejilla { grid-template-columns: 1.15fr .85fr; }
  .pie__rejilla { grid-template-columns: 1.5fr .75fr .75fr; }
}

@media (min-width: 860px) {
  .nav { display: flex; }
  .menu-btn { display: none; }
  .menu-movil { display: none; }
}

@media (min-width: 900px) {
  /* El héroe sangra por la derecha: el texto respeta el límite del
     sitio, la foto no.

     El truco está en la primera columna. Antes el texto era un
     .limite dentro de su propia mitad, así que se centraba en la
     COLUMNA y no en la PÁGINA: a 1920 px arrancaba en 285 mientras el
     resto de secciones arrancaba en 368. Ahora la primera columna
     reproduce exactamente el margen izquierdo de .limite —
     max(canal, (ancho de página - 1280)/2 + canal) — y el titular cae
     a plomo con todos los titulares de abajo. */
  .heroe {
    --sangria: max(var(--canal), (100% - var(--ancho)) / 2 + var(--canal));
    grid-template-columns: var(--sangria) minmax(0, 1fr) minmax(0, .82fr);
    min-height: clamp(620px, 88vh, 940px);
    /* gap: 0 a propósito. Un column-gap se aplica TAMBIÉN entre la
       columna del margen y la del texto, y empujaba el titular medio
       gap a la derecha: a 1280 px arrancaba en 107 en vez de en 56.
       El aire entre texto y foto lo pone el padding del texto. */
    gap: 0;
    padding-block: clamp(128px, 13vw, 184px) clamp(56px, 7vw, 104px);
  }
  .heroe__texto {
    grid-column: 2;
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: clamp(32px, 4vw, 64px);
    padding-bottom: clamp(56px, 7vw, 96px);
  }
  .heroe__botella { grid-column: 3; }

  .gama__rejilla { grid-template-columns: .95fr 1.05fr; }
  .capa__rejilla { grid-template-columns: 1.05fr .95fr; }
  .simulador__rejilla { grid-template-columns: 1.15fr .85fr; }

  /* las causas alternan lado: rompe el ritmo de las cuatro seguidas */
  .causa__rejilla { grid-template-columns: 1.05fr .95fr; }
  .causa:nth-of-type(even) .causa__texto { order: 2; }
}

/* la banda del logotipo ya grabado: zona prohibida, no decoración */
.logo-banda {
  fill: color-mix(in srgb, var(--tinta) 7%, transparent);
  stroke: color-mix(in srgb, var(--tinta) 22%, transparent);
  stroke-width: .4;
  stroke-dasharray: 1.5 1.5;
}
.logo-banda__et {
  font-family: var(--f-mono); font-size: 4.6px;
  letter-spacing: .1em;
  fill: color-mix(in srgb, var(--tinta) 55%, transparent);
}

/* En pantalla estrecha el marco del simulador manda por ANCHO, no por
   altura. Dimensionarlo con 54vh ignora el ancho disponible: a 320 px
   pedía 260 px de marco más 48 de la barra más el aire, y desbordaba
   la página 11 px. Con width:100% y aspect-ratio, el alto lo calcula
   solo y siempre cabe. */
@media (max-width: 760px) {
  .sim__marco { height: auto; width: 100%; }
  .sim__caja  { flex: 1 1 auto; min-width: 0; }
  .rango-vertical { height: clamp(240px, 40vh, 360px); }
}