/* ============================================================
   WaterGo · portada 2026

   La portada pasó de 11 secciones y 14,6 pantallas a 7 secciones.
   Cada una dice UNA cosa y ofrece un botón para ampliarla en su
   página. Todo lo que se quitó no se ha borrado: vive en /truesip,
   /botellas, /mision, /personalizacion y /ayuda.

   Motivo y medidas en docs/AUDITORIA-GRAFICA.md

   ── Reglas de movimiento que gobiernan este archivo ──
   1. El contenido se ve SIEMPRE por defecto. La animación va detrás
      de @supports y es una mejora, nunca el estado base. Así, donde
      no llega el navegador, la sección se ve entera y quieta en vez
      de invisible.
   2. `animation-fill-mode: both`, NUNCA `forwards`: con forwards el
      elemento se queda congelado al hacer scroll hacia atrás.
   3. Solo se anima transform, opacity y clip-path. Los tres van en
      el compositor. Nada de width/height/top/left.
   4. La salida dura el 70 % de la entrada.
   5. Tres duraciones y tres curvas en toda la portada. Ni una más.
   ============================================================ */

:root {
  /* Las tres duraciones. --dur-micro (200 ms) y --dur-panel (260 ms)
     ya vienen de tokens.css; aquí solo falta la larga, la del
     revelado por máscara, que el catálogo de motion sitúa entre 600
     y 1200 ms para un "reveal dramático". */
  --dur-revelado: 900ms;

  /* Snappy con aterrizaje suave. Es la curva de la casa para todo lo
     que se expande o se revela: arranca rápido y frena largo, que es
     lo que hace que un movimiento se lea como caro y no como brusco.
     --ease-out y --muelle ya están en tokens.css. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   1 · RITMO DE SECCIÓN

   Con siete secciones en vez de once, cada una tiene que respirar
   más, no menos: el aire es lo que impide que "corto" se lea como
   "apretado". El padding inferior va un punto por encima del
   superior porque ópticamente el ojo lo pide.
   ============================================================ */

/* El aire de cada sección. Se afinó a la baja tras medir: con seis
   secciones, cada 10 px de padding son 120 px de scroll, y el ojo no
   los nota. Lo que sí se nota es bajar de aquí — y una página
   apretada se lee como barata, que es peor que una larga.
   El inferior va por encima del superior porque ópticamente el ojo
   lo pide. */
.tramo {
  padding-block: clamp(64px, 6.4vw, 100px) clamp(72px, 7.2vw, 116px);
  position: relative;
}

.tramo--pegado { padding-top: 0; }

/* Rótulo de sección: cintillo mono + titular. El cintillo numerado
   da sensación de recorrido corto y medible ("voy por la 3 de 6"),
   que es justo lo contrario de la sensación de scroll infinito. */
/* OJO con el max-width aquí: `30ch` se mide con la fuente de TEXTO
   heredada, no con la de display del titular, así que dejaba la
   columna en 263 px y partía «El acero tiene memoria» en cinco
   líneas. El límite va en cada hijo, con su propia fuente. */
.rotulo-tramo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.rotulo-tramo__paso {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

/* La rayita del cintillo crece con el scroll. Es el único adorno
   puramente decorativo de la portada y cuesta cero: es un
   pseudo-elemento con transform. */
.rotulo-tramo__paso::after {
  content: "";
  height: 1px;
  width: clamp(28px, 6vw, 72px);
  background: currentColor;
  opacity: .5;
  transform-origin: left;
}

.rotulo-tramo__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  max-width: 17ch;
  margin: 0;
}

.rotulo-tramo__nota {
  font-family: var(--f-body);
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--color-secondary);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}

/* El botón de ampliar. Va al final de cada sección y es la promesa
   que permite que la sección sea corta: aquí lo justo, y el resto
   en su página. */
.ampliar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: clamp(28px, 3.5vw, 44px);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-on-background);
  text-decoration: none;
  padding: 12px 4px;
  border-bottom: 1.5px solid var(--color-border-strong);
  transition: border-color var(--dur-micro) var(--ease-out),
              gap var(--dur-micro) var(--ease-out);
}

.ampliar:hover,
.ampliar:focus-visible {
  border-bottom-color: var(--color-on-background);
  gap: var(--e-4);
}

.ampliar__flecha {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-l);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: .8rem;
  /* El muelle solo en piezas pequeñas: en un panel grande el rebote
     se ve barato. */
  transition: transform var(--dur-panel) var(--muelle);
}

.ampliar:hover .ampliar__flecha { transform: translateX(3px); }


/* ============================================================
   2 · LA MÁSCARA DE RECORTE

   Un campo del color de la marca y, dentro, la foto real. La foto
   entra revelándose: la máscara se abre de abajo arriba mientras
   la sección sube por la pantalla, así que el color se ve primero
   y la fotografía aparece después.

   clip-path está compuesto en GPU (coste medio, no alto: no dispara
   reflow como width/height), y por eso el revelado es gratis aunque
   la imagen sea grande.

   Se usa --campo para el color, que se pone desde el HTML.
   ============================================================ */

.recorte {
  background: var(--campo, var(--nude));
  border-radius: var(--r-g);
  padding: clamp(12px, 1.6vw, 22px);
  /* El campo de color necesita un pelín de textura propia o se ve
     digital. Un radial muy suave hace de luz. */
  background-image: radial-gradient(120% 90% at 78% 8%,
                    rgba(255,255,255,.34), transparent 62%);
  overflow: hidden;
}

.recorte__ventana {
  display: block;
  border-radius: calc(var(--r-g) - 10px);
  overflow: hidden;
  /* Estado base: la ventana está ABIERTA. Si no hay soporte de
     scroll nativo o el usuario pidió menos movimiento, la foto se
     ve entera desde el principio. */
  clip-path: inset(0 0 0 0);
}

.recorte__ventana img {
  display: block;
  width: 100%;
  height: auto;
}

/* Variante alta: la foto llena un alto fijo y se recorta. Sirve
   para los dos macros de personalización, que vienen con
   proporciones distintas y si no descuadran la fila. */
.recorte--alto .recorte__ventana { aspect-ratio: 16 / 10; }
.recorte--alto .recorte__ventana img { height: 100%; object-fit: cover; }

/* Variante círculo: la regla de tres de la marca. El logotipo son
   tres círculos, así que el recorte circular no es decoración
   prestada, es la propia identidad. */
.recorte--disco { border-radius: var(--r-l); padding: clamp(10px, 1.2vw, 16px); }
.recorte--disco .recorte__ventana { border-radius: var(--r-l); aspect-ratio: 1; }
.recorte--disco .recorte__ventana img { height: 100%; object-fit: cover; }

/* El pie va DENTRO del campo de color, así que no puede usar el gris
   de la página: sobre un pastel se lava y se queda por debajo de AA.
   Es la tinta de marca al 72 %, que es lo que hace `.bano` para el
   mismo caso. */
.recorte__pie {
  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);
  margin: var(--e-4) 0 0;
  padding-inline: var(--e-2);
}


/* Banda de dos fotos con proporción DESIGUAL. La portada vieja
   encadenaba ocho retículas 50/50 alternando lado, y a partir de la
   tercera el ojo deja de mirar. 1,35 contra 1 es suficiente para
   que la fila se lea como una composición y no como dos huecos. */
.banda-fotos {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(12px, 1.8vw, 24px);
  align-items: start;
}

/* Las dos fotos son macros verticales de 1400×1738. A 700 px de ancho
   eso son 870 px de alto: una sola foto se comía una pantalla entera.
   Se recortan a apaisado, que además es lo que quiere un macro —lo que
   importa está en el centro— y devuelve media pantalla de scroll. */
.banda-fotos .recorte__ventana { aspect-ratio: 3 / 2; }
.banda-fotos .recorte__ventana img { height: 100%; object-fit: cover; }

/* La segunda foto baja un poco: alinear las dos por arriba es lo
   que hace que una fila parezca una tabla. */
.banda-fotos > :nth-child(2) { margin-top: clamp(24px, 4vw, 64px); }

@media (max-width: 720px) {
  .banda-fotos { grid-template-columns: 1fr; }
  .banda-fotos > :nth-child(2) { margin-top: 0; }
}

/* Dos columnas de texto para cerrar una sección sin alargarla: la
   misma cantidad de palabras ocupa la mitad de scroll. */
.par-texto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(28px, 3.5vw, 48px);
  max-width: 94ch;
}

.par-texto p {
  font-family: var(--f-body);
  font-size: 1.02rem;
  line-height: var(--lh-body);
  color: var(--color-secondary);
  margin: 0;
  text-wrap: pretty;
}

.par-texto strong { color: var(--color-on-background); }

@media (max-width: 720px) {
  .par-texto { grid-template-columns: 1fr; }
}

/* Los tres círculos del logotipo SON los tres tamaños. No es
   decoración prestada: la marca llevaba diciendo "tres" desde el
   principio. Van como dato, no como control, porque el tamaño se
   elige en la ficha. */
.tallas {
  display: flex;
  gap: clamp(22px, 3.4vw, 46px);
  align-items: flex-end;
  list-style: none;
  margin: 0 0 clamp(26px, 3.4vw, 44px);
  padding: 0;
}

.tallas li {
  display: flex;
  flex-direction: column;
  align-items: center;
  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);
}

.tallas__punto {
  width: var(--d);
  height: var(--d);
  border-radius: var(--r-l);
  background: var(--color-on-background);
  opacity: .88;
}


/* ============================================================
   3 · LAS TRES PIEZAS

   Tamaño + color + causa en un solo banner. Al pasar el ratón, al
   pulsar o al llegar con el tabulador, una pieza se expande y las
   hermanas se comprimen —el contra-movimiento que vende
   profundidad sin 3D— y la explicación entra 120 ms DESPUÉS que el
   panel, que es lo que le da peso físico.

   Se anima flex-grow. Sí, es una propiedad de layout, y la regla
   general dice que no se animan: pero aquí el reflow está acotado
   a un contenedor con tres hijos, no a la página. Animar el ancho
   de tres cajas es barato; animar el de un elemento en mitad del
   flujo del documento no lo es.
   ============================================================ */

.trio {
  display: flex;
  gap: 6px;
  border-radius: var(--r-g);
  overflow: hidden;
}

.pieza {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  isolation: isolate;
  background: var(--c);
  color: var(--tinta);
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  /* min-height en ch/rem, no en vh: en un móvil apaisado el vh
     convierte esto en una franja ridícula. */
  min-height: clamp(340px, 34vw, 440px);
  transition: flex-grow 420ms var(--ease-premium);
  -webkit-tap-highlight-color: transparent;
}

/* Contra-movimiento: cuando una crece, las otras dos ceden. El
   ratio es ~0,72, dentro del 20-30 % que recomienda el catálogo.

   ⚠️ El `:not()` no es cosmético, es obligatorio. Sin él,
   `.trio:has(.pieza[aria-expanded="true"]) .pieza` tiene más
   especificidad (0,4,0) que `.pieza[aria-expanded="true"]` (0,2,0)
   y le gana: las tres piezas se quedaban en 0,72 y el acordeón no
   se abría nunca. Excluyendo a la hermana abierta, las dos reglas
   ya no compiten por el mismo elemento. */
.trio:has(.pieza:hover) .pieza:not(:hover),
.trio:has(.pieza:focus-visible) .pieza:not(:focus-visible),
.trio:has(.pieza[aria-expanded="true"]) .pieza:not([aria-expanded="true"]) { flex-grow: .85; }

/* 2,4 y no 3,2: con 3,2 las dos cerradas bajaban a 179 px y ahí no
   cabe ni el nombre del acabado. Una caja cerrada tiene que seguir
   siendo legible — si no, no es un acordeón, es un botón. */
.pieza[aria-expanded="true"] { flex-grow: 2.4; }

/* El hover solo manda donde hay un puntero fino de verdad. En
   táctil el hover se queda "pegado" tras el toque y deja dos
   piezas abiertas a la vez. */
@media (hover: hover) and (pointer: fine) {
  .trio:hover .pieza:hover { flex-grow: 2.4; }

  /* La portada llega con una pieza ya abierta para que la sección
     no se vea vacía. Al entrar el ratón, esa cede el sitio a la
     que se está señalando: si no, se quedan dos abiertas a la vez
     y el acordeón parece averiado. */
  .trio:hover .pieza[aria-expanded="true"]:not(:hover) { flex-grow: .85; }
}

.pieza:focus-visible {
  flex-grow: 2.4;
  outline: 2px solid var(--tinta);
  outline-offset: -6px;
}

.pieza__cuerpo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e-3);
  padding: clamp(18px, 2.2vw, 30px);
}

/* Lo que se ve SIEMPRE, con la pieza cerrada: la talla en grande y
   el nombre del acabado. Es la información con la que se decide. */
.pieza__talla {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: .95;
  letter-spacing: var(--ls-display);
  margin: 0;
  /* Se escribe en vertical mientras está cerrada para que quepa en
     una columna estrecha sin partirse en sílabas. */
  white-space: nowrap;
}

.pieza__acabado {
  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) 74%, transparent);
  margin: 0;
  white-space: nowrap;
}

/* El ODS va arriba del todo, en una pastilla, y se ve cerrada:
   es la mitad del argumento de la sección. */
.pieza__ods {
  position: absolute;
  top: clamp(18px, 2.2vw, 30px);
  left: clamp(18px, 2.2vw, 30px);
  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;
  padding: 6px 12px;
  border-radius: var(--r-l);
  border: 1px solid color-mix(in srgb, var(--tinta) 26%, transparent);
  color: color-mix(in srgb, var(--tinta) 82%, transparent);
  white-space: nowrap;
}

/* La explicación: oculta hasta que la pieza se abre, y con 120 ms
   de retraso para que llegue DESPUÉS que el panel. Sin ese retraso
   el texto y el ancho se mueven a la vez y parece un salto. */
.pieza__mas {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-panel) var(--ease-premium),
              opacity 180ms var(--ease-out);
}

/* El truco de 0fr → 1fr solo funciona si el hijo puede encogerse a
   cero. Sin `min-height: 0` la fila se queda con su altura de
   min-content, el cuerpo (que va con justify-content: flex-end) se
   desborda por ARRIBA y el nombre del acabado acaba flotando fuera
   del panel, sobre el fondo de la sección.

   Va con `> *` y no con `> div`: el hijo es un <span>, porque esto
   vive dentro de un <button> y ahí no cabe contenido de flujo. */
.pieza__mas > * { display: block; overflow: hidden; min-height: 0; }

.pieza[aria-expanded="true"] .pieza__mas {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 120ms;
}

@media (hover: hover) and (pointer: fine) {
  .pieza:hover .pieza__mas,
  .pieza:focus-visible .pieza__mas {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 120ms;
  }

  /* La pieza que venía abierta cierra su texto sin retraso: la
     salida es más rápida y más sobria que la entrada. */
  .trio:hover .pieza[aria-expanded="true"]:not(:hover) .pieza__mas {
    grid-template-rows: 0fr;
    opacity: 0;
    transition-delay: 0ms;
  }
}

.pieza__texto {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--tinta) 86%, transparent);
  margin: var(--e-3) 0 0;
  max-width: 42ch;
  text-wrap: pretty;
}

.pieza__ong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .95rem;
  margin: var(--e-3) 0 0;
}

/* La botella de la pieza. Va con mix-blend-mode: multiply porque
   los PNG de producto traen fondo blanco y sobre un pastel se ven
   como un recorte pegado. OJO: no se le puede animar opacity ni
   transform, porque eso crea contexto de apilamiento y encierra el
   blend — vuelve a aparecer el rectángulo blanco. */
/* La botella va DENTRO del panel, sin asomar por el borde: el
   siguiente panel pinta su propio fondo encima y le cortaba el
   lado derecho, y a la última se la comía el overflow del trío.
   El PNG trae fondo blanco, así que multiply es lo que lo funde
   con el campo de color en vez de dejar un recorte pegado. */
.pieza__foto {
  position: absolute;
  right: 2%;
  /* Por debajo de la pastilla del ODS: a 6 % el asa de la botella
     se cruzaba con la palabra POBREZA en el panel cerrado. */
  top: 15%;
  width: 64%;
  max-width: 240px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* En móvil el acordeón horizontal no cabe: tres columnas de 100 px
   no enseñan nada. Se apila y cada pieza pasa a ser una tarjeta
   que se abre al pulsar. */
@media (max-width: 860px) {
  .trio { flex-direction: column; gap: 8px; }

  /* ⚠️ `flex: 0 0 auto` es obligatorio aquí, no es una preferencia.
     En columna, el `flex: 1 1 0` de la versión de escritorio fija
     `flex-basis: 0` sobre la ALTURA; con `flex-grow: 0` y
     `min-height: 0` las tres cajas se quedaban a cero de alto y el
     `overflow: hidden` del trío las borraba: en el móvil la sección
     entera desaparecía y quedaban el titular y el botón sueltos.
     En vertical manda el contenido. */
  .pieza,
  .trio:has(.pieza:hover) .pieza,
  .trio:has(.pieza:hover) .pieza:not(:hover),
  .trio:has(.pieza[aria-expanded="true"]) .pieza,
  .trio:has(.pieza[aria-expanded="true"]) .pieza:not([aria-expanded="true"]),
  .pieza[aria-expanded="true"] { flex: 0 0 auto; min-height: 0; }

  .pieza__cuerpo {
    position: static;
    padding-top: clamp(56px, 14vw, 72px);
    min-height: 190px;
  }
  /* Pequeña y arriba del todo: al 40 % bajaba hasta la altura del
     nombre del acabado y las primeras líneas del texto pasaban por
     debajo de la botella. */
  .pieza__foto { width: 27%; top: 5%; right: 4%; }
  .pieza__texto { max-width: none; }
}


/* ============================================================
   4 · LA TIENDA

   Producto, precio y una puerta de entrada. No es un carrito: la
   compra vive en la ficha de cada botella, que es donde están las
   variantes de color y de tapón. Prometer "añadir" aquí y luego
   pedir tres decisiones más es peor que no prometerlo.
   ============================================================ */

.tienda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Los dos tapones son accesorios y no compiten con las botellas:
   van en una fila propia, más baja y más ancha. */
.tienda--accesorios { grid-template-columns: repeat(2, 1fr); margin-top: clamp(12px, 1.6vw, 22px); }

.articulo-corto {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-m);
  background: var(--tinte, var(--tinte-nude));
  overflow: hidden;
  /* La sombra lleva la tinta de la marca, nunca negro puro: sobre
     una base cálida el gris neutro se ve sucio. */
  box-shadow: var(--sombra-s);
  transition: transform var(--dur-panel) var(--ease-premium),
              box-shadow var(--dur-panel) var(--ease-premium);
}

.articulo-corto:hover,
.articulo-corto:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-m);
}

.articulo-corto__foto {
  display: block;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 26px);
}

/* Los dos tapones son accesorios de 3 y 6 euros y no pueden ocupar lo
   mismo que una botella: en tarjeta cuadrada se llevaban media
   pantalla de scroll para vender un tapón. Van en fila, con la foto
   pequeña al lado del precio. */
.tienda--accesorios .articulo-corto {
  flex-direction: row;
  align-items: center;
  gap: var(--e-4);
}

.tienda--accesorios .articulo-corto__foto {
  aspect-ratio: 1;
  width: clamp(92px, 9vw, 124px);
  flex: none;
  padding: 10px;
}

.tienda--accesorios .articulo-corto__ficha {
  margin-top: 0;
  padding: var(--e-4) var(--e-5) var(--e-4) 0;
}

.articulo-corto__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: scale var(--dur-panel) var(--ease-premium);
}

.articulo-corto:hover .articulo-corto__foto img { scale: 1.035; }

.articulo-corto__ficha {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: 0 clamp(14px, 2vw, 22px) clamp(18px, 2.2vw, 24px);
  /* margin-top:auto empuja el precio al fondo: con nombres de
     distinto largo, los precios quedan alineados en una línea
     horizontal limpia en vez de a alturas aleatorias. */
  margin-top: auto;
}

.articulo-corto__et {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

.articulo-corto__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: -.01em;
  margin: 0;
}

.articulo-corto__nombre a { color: inherit; text-decoration: none; }

/* El enlace cubre la tarjeta entera: se pulsa donde se mira, que
   es la foto, no las siete letras del nombre. */
.articulo-corto__nombre a::after { content: ""; position: absolute; inset: 0; }

.articulo-corto__precio {
  font-family: var(--f-mono);
  font-size: 1.06rem;
  font-variant-numeric: tabular-nums;
  margin: var(--e-2) 0 0;
}

.articulo-corto__medalla {
  position: absolute;
  top: var(--e-4);
  left: var(--e-4);
  z-index: 2;
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--papel);
  padding: 5px 10px;
  border-radius: var(--r-l);
}

.tienda__nota {
  font-family: var(--f-body);
  font-size: var(--t-small);
  color: var(--color-muted);
  margin: var(--e-5) 0 0;
  max-width: 60ch;
}

@media (max-width: 860px) {
  .tienda { grid-template-columns: 1fr 1fr; }
  /* La 1L cae sola a la última fila y queda un hueco raro: que
     ocupe el ancho entero y se lea como el remate de la gama. */
  .tienda > li:nth-child(3) { grid-column: 1 / -1; }
  .tienda > li:nth-child(3) .articulo-corto__foto { aspect-ratio: 16 / 10; }
}

/* En móvil se MANTIENEN las dos columnas para las botellas. Pasarlas a
   una sola parecía lo correcto y medía fatal: tres tarjetas a ancho
   completo se llevaban 3,1 pantallas solo la tienda. A dos columnas la
   foto sigue siendo grande de sobra en un teléfono y la sección baja a
   la mitad. La 1L se queda a lo ancho, más apaisada, y hace de remate
   de la fila. */
@media (max-width: 520px) {
  .tienda { gap: 10px; }
  .tienda > li:nth-child(3) .articulo-corto__foto { aspect-ratio: 2 / 1; }
  .tienda--accesorios { grid-template-columns: 1fr; }
}


/* ============================================================
   5 · LAS DOS TÉCNICAS

   Solo las fotos y la diferencia en una línea. Todo lo demás
   —precios por unidades, plazos, el estudio en 3D— está en
   /personalizacion y en /personalizar.
   ============================================================ */

.tecnicas-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 34px);
}

.tecnica-corta__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h3);
  margin: var(--e-5) 0 var(--e-2);
}

.tecnica-corta__texto {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--color-secondary);
  margin: 0;
  max-width: 40ch;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .tecnicas-par { grid-template-columns: 1fr; }
}


/* ============================================================
   6 · CONTACTO

   Cuatro campos. El formulario largo vive en /contacto; aquí solo
   hace falta lo justo para que alguien pregunte un precio sin
   cambiar de página.
   ============================================================ */

.contacto-corto {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.contacto-corto__directo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.contacto-corto__directo a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--color-on-background);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-border);
  padding-bottom: 4px;
  width: fit-content;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.contacto-corto__directo a:hover { border-bottom-color: var(--color-on-background); }

.contacto-corto__et {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 860px) {
  .contacto-corto { grid-template-columns: 1fr; }
}


/* ============================================================
   7 · PIE CORTO

   Sin razón social ni CIF: teléfono, correo y los enlaces legales.
   La identificación fiscal completa sigue publicada en
   /legal/aviso-legal, que es donde la LSSI pide que esté
   accesible de forma permanente y directa — y el pie enlaza ahí.
   ============================================================ */

.pie-corto__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.pie-corto__directo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.pie-corto__directo a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-on-background);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.pie-corto__directo a:hover { border-bottom-color: currentColor; }

.pie-corto__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  align-items: center;
}

.pie-corto__legal a {
  font-family: var(--f-body);
  font-size: var(--t-small);
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.pie-corto__legal a:hover { border-bottom-color: currentColor; }

@media (max-width: 720px) {
  .pie-corto__rejilla { grid-template-columns: 1fr; }
}


/* ============================================================
   8 · ENTRADAS POR SCROLL

   Scroll nativo con animation-timeline: view(). Va en el
   compositor, sin IntersectionObserver y sin una sola línea de
   JavaScript: la web no carga ninguna librería de animación.

   Soporte real (verificado marzo 2026): Chrome 115+, Firefox 128+,
   Safari 18.4+ → ~90 % global. El 10 % restante ve el contenido
   quieto y entero, que es exactamente lo que tiene que pasar.

   OJO con dos cosas:
   · El atajo `animation` RESETEA animation-timeline, así que la
     propiedad va SIEMPRE después.
   · `both`, nunca `forwards`.
   ============================================================ */

@media not (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {

    /* Los rangos van atados a `entry`, NO a `cover`.
       Con `cover` el progreso depende del alto del viewport: en una
       pantalla muy alta, un elemento de la parte de arriba de la
       página se queda en el 10 % de su recorrido y la animación no
       termina nunca. Si esa animación es la que revela una foto, la
       foto no se ve. Con `entry 10% entry 100%` el recorrido acaba
       cuando el elemento ha entrado del todo, y para cualquier
       elemento que ya esté a la vista al cargar el progreso es 100 %:
       se ve entero, que es la regla. */

    /* Desplazamiento de 8-16 px: lo justo para que se lea como un
       fundido y no como un deslizamiento. Más que eso marea. */
    .entra {
      animation: entra-portada linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 88%;
    }

    @keyframes entra-portada {
      from { opacity: 0; translate: 0 14px; }
      to   { opacity: 1; translate: 0 0; }
    }

    /* Escalonado. El presupuesto total no pasa de 500 ms, así que
       con tres piezas el retraso es de 90 ms y con cinco, de 60. */
    .entra--2 { animation-range: entry 14% entry 94%; }
    .entra--3 { animation-range: entry 20% entry 100%; }

    /* El revelado de la máscara. La ventana se abre de abajo
       arriba mientras la sección sube, así que primero se ve el
       campo de color y la fotografía llega después. */
    .recorte__ventana {
      animation: abre-ventana linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 96%;
    }

    @keyframes abre-ventana {
      from { clip-path: inset(0 0 88% 0); }
      to   { clip-path: inset(0 0 0 0); }
    }

    /* Contra-movimiento dentro de la ventana: mientras la máscara
       se abre, la foto se desplaza en sentido contrario a un 25 %
       de la velocidad. Es el truco que da profundidad sin 3D. El
       recorrido total son 18 px, muy por debajo del tope de 100. */
    .recorte--parallax .recorte__ventana img {
      animation: deriva linear both;
      animation-timeline: view();
      animation-range: entry 10% exit 90%;
    }

    @keyframes deriva {
      from { translate: 0 -9px; }
      to   { translate: 0 9px; }
    }

    /* La rayita del cintillo se dibuja al entrar. */
    .rotulo-tramo__paso::after {
      animation: raya linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 85%;
    }

    @keyframes raya {
      from { scale: 0 1; }
      to   { scale: 1 1; }
    }
  }
}


/* ============================================================
   9 · MOVIMIENTO REDUCIDO

   tokens.css ya aplasta las duraciones a 1 ms. Aquí solo hay que
   asegurarse de que nada se queda a medio revelar: la máscara,
   abierta; las fotos, en su sitio.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .recorte__ventana { clip-path: inset(0 0 0 0) !important; }
  .recorte--parallax .recorte__ventana img { translate: 0 0 !important; }
  .entra { opacity: 1 !important; translate: 0 0 !important; }
}