/* ===============================================================
   DOMS — sistema de diseño. Un solo fichero (`01-DISENO.md`).

   Principio rector: **que no parezca hecho con IA**. En la práctica,
   cinco reglas duras que se pueden comprobar leyendo esta hoja:

     · cero `border-radius` salvo dos excepciones justificadas
     · cero `box-shadow`
     · cero degradados
     · dos familias tipográficas y ninguna más
     · el aire entre secciones es DESIGUAL a propósito

   Las fuentes son propias, no de Google. Enlazar la hoja de
   fonts.googleapis.com obligaba a abrir `style-src` en la CSP a un
   tercero, y además manda la IP de cada visitante a Google en cada
   carga — lo que rompe la política de cookies, que dice que el único
   tercero es Stripe. Los ficheros son OFL y se pueden servir.
   =============================================================== */

/* ---------------------------------------------------------------
   1. Tipografía
   --------------------------------------------------------------- */

/* Hanken Grotesk es variable: un fichero por subconjunto cubre 400-700. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-var-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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-var-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;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-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;
}

/* ---------------------------------------------------------------
   2. Fichas
   --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Familias. Las sustitutas importan: evitan el salto de maquetación. */
  --fuente-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --fuente-texto: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida. Ni una media query para el tamaño de letra. */
  --t-hero: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --t-d1:   clamp(2.1rem, 1.4rem + 3.1vw, 3.75rem);
  --t-d2:   clamp(1.7rem, 1.25rem + 2vw, 2.75rem);
  --t-d3:   clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  --t-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-base: 1.0625rem;
  --t-sm:   0.9375rem;
  --t-xs:   0.8125rem;
  --t-micro: 0.6875rem;

  /* Color. Monocromo estricto: el único color del sitio es el de las fotos. */
  --negro:       #0A0A0A;
  --tinta:       #16150F;
  /* Era #8A8580, que sobre hueso da 3.23:1 — no llega ni al 3:1 holgado que
     pide el texto grande y se queda muy lejos del 4.5:1 del texto pequeño.
     `.producto-desc` va a 15 px con este color, así que incumplía. #6E6963
     da 4.80:1 y vale para cualquier tamaño. */
  --piedra:      #6E6963;
  /* El único fondo oscuro del sitio: la sección de gimnasios. Hueso encima da
     15.87:1. No es un color de marca, es profundidad. */
  --carbon:      #171713;
  --piedra-clara: #A9A39A;   /* el equivalente de --piedra sobre carbón: 7.18:1 */
  --hueso:       #F5F0EB;
  --hueso-alto:  #FBF8F4;
  --linea:       #DED7CC;
  --linea-suave: #EBE5DC;
  --exito: #2E6B4E;
  --error: #9E3226;
  --aviso: #8A6A22;

  /* Espaciado base 4 px, escala NO lineal: los saltos grandes son grandes. */
  --e-1: 0.25rem; --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 5rem;    --e-10: 6rem;   --e-11: 9rem;

  --ancho-max: 74rem;
  --ancho-texto: 34rem;
  --margen-lateral: clamp(1.25rem, 5vw, 4rem);

  --transicion: 140ms cubic-bezier(.2, 0, .2, 1);
}

/* En móvil todo lo de --e-9 en adelante baja un escalón. */
@media (max-width: 48rem) {
  :root { --e-9: 3.5rem; --e-10: 4.5rem; --e-11: 6rem; }
}

/* ---------------------------------------------------------------
   3. Base
   --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font: 400 var(--t-base)/1.65 var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
}

/* El scroll suave se apaga con prefers-reduced-motion, más abajo. */
html { scroll-behavior: smooth; }

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

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 400;           /* Instrument Serif solo tiene 400. Nunca negrita. */
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--t-d1);   line-height: 1.02; letter-spacing: -0.02em; }
h3 { font-size: var(--t-d2);   line-height: 1.12; letter-spacing: -0.01em; }
h4 { font-size: var(--t-d3);   line-height: 1.12; letter-spacing: -0.01em; }

p { margin: 0 0 var(--e-4); max-width: var(--ancho-texto); }
p:last-child { margin-bottom: 0; }

/* Titular → párrafo: --e-4. Los titulares no llevan margen propio para poder
   ajustar cada transición; esta es la que se repite en todas las secciones. */
h1 + p, h2 + p, h3 + p, h4 + p,
h1 + ul, h2 + ul, h3 + ol, h2 + ol { margin-top: var(--e-4); }

/* Un enlace de texto se subraya SIEMPRE. Al pasar por encima el subrayado
   desaparece, nunca al revés: un enlace sin subrayar es un enlace que no se ve. */
a { color: var(--negro); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration: none; }

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

ul, ol { margin: 0 0 var(--e-4); padding-left: 1.2em; }
li { margin-bottom: var(--e-2); }

/* Enlace de salto: existe para el teclado, se ve solo cuando tiene el foco. */
.saltar {
  position: absolute; left: -9999px;
  background: var(--negro); color: var(--hueso);
  padding: var(--e-3) var(--e-4);
}
.saltar:focus { left: var(--e-4); top: var(--e-4); z-index: 60; }

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

/* ---------------------------------------------------------------
   4. Retícula
   --------------------------------------------------------------- */

.contenedor {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.texto { max-width: var(--ancho-texto); }

/* El ritmo vertical entre secciones NO es uniforme. Aquí es donde se nota si
   hay criterio: unas secciones respiran vez y media lo que respiran otras. La
   proporción --e-10 : --e-11 es lo que hay que conservar; los valores
   absolutos bajaron un 25 % el 2026-09-03 porque la home medía 7.300 px y
   había bloques de tres líneas ocupando 800. */
.seccion   { padding-block: var(--e-10); }
.seccion-aire { padding-block: var(--e-11); }
/* Para lo que es un dato, no una sección: envío, garantías, procedencia. */
.seccion-compacta {
  padding-block: var(--e-6);
  border-top: 1px solid var(--linea);
}

.etiqueta {
  font: 600 var(--t-micro)/1.2 var(--fuente-texto);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--piedra);
  margin: 0 0 var(--e-4);
  display: block;
}
.etiqueta-negra { color: var(--negro); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--piedra);
}

.sm { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
/* --piedra sobre --hueso da 4.80:1: vale a cualquier tamaño. Ver `01-DISENO.md` §3.1. */
.apagado { color: var(--piedra); }

/* ---------------------------------------------------------------
   5. Botones y campos
   --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  min-height: 3rem;
  padding: 0 var(--e-6);
  font: 600 var(--t-sm)/1 var(--fuente-texto);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--negro);
  color: var(--hueso);
  border: 1px solid var(--negro);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.btn:hover { background: transparent; color: var(--negro); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover, .btn[aria-busy="true"]:hover { background: var(--negro); color: var(--hueso); }

.btn-2 { background: transparent; color: var(--negro); }
.btn-2:hover { background: var(--negro); color: var(--hueso); }

.btn-ancho { width: 100%; }

/* Un botón que en realidad es un enlace: para POST que no son la acción
   principal de la página (salir, quitar una línea). */
.como-enlace {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.como-enlace:hover { text-decoration: none; }

label {
  display: block;
  font: 500 var(--t-sm)/1.4 var(--fuente-texto);
  color: var(--tinta);
  margin-bottom: var(--e-2);
}
label .apagado { font-weight: 400; }

.campo, input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--e-3) var(--e-4);
  font: 400 var(--t-base)/1.4 var(--fuente-texto);
  color: var(--tinta);
  background: var(--hueso-alto);
  border: 1px solid var(--linea);
  border-radius: 0;
  appearance: none;
}
.campo:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 0;
  border-color: var(--negro);
}
[aria-invalid="true"] { border-color: var(--error); }

.pila { display: flex; flex-direction: column; margin: 0 0 var(--e-5); }
.pila > button, .pila > .btn { margin-top: var(--e-3); align-self: flex-start; }

/* Un campo con lo suyo: etiqueta, input, ayuda y error. El aire va ENTRE
   campos, no entre una etiqueta y su propio input, que es lo que pasaba al
   apilarlos sueltos: todo quedaba a la misma distancia y no se veía dónde
   acababa uno y empezaba el siguiente. */
.campo-bloque + .campo-bloque { margin-top: var(--e-5); }
.campo-bloque .pista { margin-top: var(--e-2); }

/* Agrupar campos SIN dibujar una caja. Un `<fieldset>` con su borde por
   defecto parece un formulario aparte —dos cajas seguidas se leen como dos
   formularios—, así que lo que separa los grupos es un titular y aire. */
.grupo-campos { border: 0; padding: 0; margin: 0 0 var(--e-8); min-width: 0; }
.grupo-campos > legend {
  padding: 0;
  font: 500 var(--t-base)/1.3 var(--fuente-texto);
  color: var(--tinta);
}
.grupo-campos > .pista-grupo { margin: var(--e-3) 0 var(--e-6); max-width: 46ch; }
.grupo-campos > .campo-bloque:first-of-type { margin-top: var(--e-5); }

.pista { font-size: var(--t-sm); color: var(--piedra); margin: 0; }

/* El cupón del checkout es una fila más del resumen, entre subtotal y envío.
   Sin cupón, esa fila es el resorte que despliega el campo; con cupón, la
   línea de descuento de siempre. El `<summary>` se pinta como `.resumen-fila`
   y pierde el triángulo: tiene que parecer una fila, no un acordeón. */
.cupon-plegable > summary { cursor: pointer; list-style: none; }
.cupon-plegable > summary::-webkit-details-marker { display: none; }
.cupon-abrir { text-decoration: underline; text-underline-offset: 0.2em; }
.cupon-plegable > summary:hover .cupon-abrir { text-decoration: none; }
.cupon-plegable[open] > summary .cupon-abrir { color: var(--piedra); }
.cupon-plegable > summary:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }
.cupon-plegable .cupon-campos { margin: var(--e-3) 0 var(--e-4); }

/* En una columna de resumen, el alto de 3 rem de los campos y botones del
   checkout —pensado para acertarlos con el dedo— queda enorme para algo
   opcional.

   Van con `height` fija y no con `min-height`: con mínimos, el campo crecía
   por su cuenta —tipo a 1.4 de interlínea más relleno vertical, contra el 1
   sin relleno del botón— y quedaba más alto que "Aplicar". Dos alturas fijas
   e idénticas no se pueden descuadrar. `min-height: 0` desarma el de `.btn`,
   que si no gana por ser más grande. */
.cupon-plegable input,
.cupon-plegable .btn {
  min-height: 0;
  height: 2.25rem;
  font-size: var(--t-sm);
  line-height: 1;
}
.cupon-plegable input { padding: 0 var(--e-3); }

/* El `margin-top: 0` es el que faltaba. Este bloque vive dentro de `.resumen`,
   y ahí `.resumen .btn` le separa 1,5 rem por arriba —pensado para despegar el
   botón de pagar del total—. Con eso, "Aplicar" caía casi un renglón por
   debajo del campo aunque los dos midieran lo mismo. */
.cupon-plegable .btn { padding: 0 var(--e-4); margin-top: 0; }

.resumen-descuento .como-enlace { margin-left: var(--e-2); color: var(--piedra); }

.cupon { margin: var(--e-6) 0; max-width: 24rem; }
.cupon-campos { display: flex; gap: var(--e-3); align-items: stretch; }
.cupon-campos input { flex: 1; }
.cupon-campos .btn { white-space: nowrap; }

.fila-campos { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .fila-campos { grid-template-columns: 1fr 1fr; } }

.error-campo {
  display: block;
  color: var(--error);
  font-size: var(--t-sm);
  margin-top: var(--e-2);
}

.casilla {
  display: flex; align-items: flex-start; gap: var(--e-3);
  line-height: 1.5; margin: var(--e-4) 0;
  font-size: var(--t-sm);
}
.casilla input {
  width: 1.15rem; height: 1.15rem; min-height: 0;
  margin: 0.2rem 0 0; flex: none;
  accent-color: var(--negro);
}
.casilla label { margin: 0; font-weight: 400; }

/* Cuando la propia `<label>` es la casilla —como en las pantallas de cuenta—
   el texto y los enlaces son hijos directos, y con `display: flex` cada uno se
   convierte en un elemento con su hueco: salía «He leído la  política de
   privacidad  .» con separaciones donde no toca. Con la casilla posicionada,
   el texto vuelve a fluir como texto. */
label.casilla {
  display: block; position: relative;
  padding-left: 1.9rem; gap: 0;
}
label.casilla input {
  position: absolute; left: 0; top: 0.2rem; margin: 0;
}

/* El código de acceso se lee en una pantalla y se teclea en otra. */
input.codigo {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Selector de cantidad: tres cajas pegadas, área táctil de 44 px. */
.cantidad { display: inline-flex; border: 1px solid var(--linea); background: var(--hueso-alto); }
.cantidad button {
  width: 2.75rem; min-height: 2.75rem;
  border: 0; background: none; cursor: pointer;
  font: 400 var(--t-lead)/1 var(--fuente-texto);
  color: var(--negro);
}
.cantidad button:hover { background: var(--linea-suave); }
.cantidad input {
  width: 2.75rem; min-height: 2.75rem;
  padding: 0; text-align: center;
  border: 0; border-inline: 1px solid var(--linea);
  background: none;
  -moz-appearance: textfield;
}
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------
   6. Avisos. Borde izquierdo de 3 px, sin icono y sin emoji.
   --------------------------------------------------------------- */

.aviso {
  padding: var(--e-3) var(--e-4);
  background: var(--hueso-alto);
  border-left: 3px solid var(--piedra);
  margin: 0 0 var(--e-5);
  font-size: var(--t-sm);
}
.aviso p { max-width: none; }
.aviso-exito { border-left-color: var(--exito); }
.aviso-error { border-left-color: var(--error); color: var(--error); }
.aviso-ojo   { border-left-color: var(--aviso); }

/* ---------------------------------------------------------------
   7. Cabecera y pie
   --------------------------------------------------------------- */

/* NO es fija. En una one-page con secciones altas una barra pegada roba
   altura en móvil y es otra de las marcas del aspecto de plantilla. */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e-4) var(--e-5);
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--linea-suave);
}
/* El wordmark nunca va subrayado, esté donde esté: en la cabecera de la
   tienda, en la del checkout o en el pie. La regla general subraya todos los
   enlaces —y así tiene que seguir siendo— pero un logotipo no es un enlace de
   texto. */
.marca {
  font: 400 1.35rem/1 var(--fuente-display);
  letter-spacing: 0.22em;
  text-decoration: none;
  color: var(--negro);
}
.marca:hover { text-decoration: none; }
.cabecera nav { display: flex; align-items: center; gap: var(--e-5); }

/* En un móvil estrecho el logo y los tres enlaces más el botón del carrito no
   caben en una línea: sumaban 438 px en una pantalla de 390 y la PÁGINA ENTERA
   se desplazaba de lado. No hay menú hamburguesa —son tres enlaces— así que la
   barra pasa a dos filas y siguen viéndose todos. */
@media (max-width: 34rem) {
  .cabecera nav { width: 100%; justify-content: space-between; gap: var(--e-2); }
}
.cabecera nav a, .cabecera nav button {
  font-size: var(--t-sm);
  color: var(--tinta);
  text-decoration: none;
}
.cabecera nav a:hover { text-decoration: underline; }

.boton-carrito {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 2.75rem; padding: 0 var(--e-3);
  border: 1px solid var(--negro); background: none;
  font: 600 var(--t-xs)/1 var(--fuente-texto);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--negro); cursor: pointer;
}
.boton-carrito:hover { background: var(--negro); color: var(--hueso); }
.cuenta-carrito:empty { display: none; }

/* Botón flotante: solo en móvil, solo con el carrito lleno, y solo tras
   bajar una pantalla y media. Lo enciende el JS con la clase `.se-ve`. */
.carrito-flotante {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 30;
  display: none;
  min-height: 3.25rem; padding: 0 var(--e-5);
  align-items: center; gap: var(--e-2);
  background: var(--negro); color: var(--hueso);
  border: 1px solid var(--negro);
  font: 600 var(--t-xs)/1 var(--fuente-texto);
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 48rem) { .carrito-flotante.se-ve { display: inline-flex; } }

/* El aviso de que estás viendo una tienda que el público no ve. Deliberadamente
   feo y arriba del todo: si se pareciera al resto del sitio, se olvidaría. */
.aviso-vistazo {
  padding-block: var(--e-3);
  background: var(--aviso);
  color: #FFFFFF;
  font-size: var(--t-sm);
}
.aviso-vistazo a { color: #FFFFFF; }
.aviso-vistazo strong { font-weight: 600; }

/* La franja de "vienes de parte de X". Era versalita con `letter-spacing`,
   que vale para dos palabras y no para dos frases: en mayúsculas esto se leía
   como un aviso legal y no como lo que es, una buena noticia. Ahora es una
   frase normal, sobre fondo propio para que se distinga de la cabecera. */
.aviso-centro {
  padding-block: var(--e-3);
  background: var(--linea-suave);
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-sm);
  color: var(--tinta);
}
.aviso-centro strong { font-weight: 600; }

.pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--e-8) var(--e-6);
  margin-top: var(--e-10);
}
.pie-columnas {
  display: grid; gap: var(--e-7);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .pie-columnas { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie h2 { font-family: var(--fuente-texto); font-size: var(--t-micro);
          letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
          color: var(--piedra); margin-bottom: var(--e-4); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: var(--e-3); }
.pie a { font-size: var(--t-sm); }
.pie-legal {
  border-top: 1px solid var(--linea-suave);
  margin-top: var(--e-7); padding-top: var(--e-5);
  font-size: var(--t-xs);
  color: var(--piedra);
}
.pie-legal p { max-width: 52rem; }

/* ---------------------------------------------------------------
   8. Home
   --------------------------------------------------------------- */

/* El hero, a sangre y con el texto encima de la foto.
   =================================================
   Esto rompe la regla de `02-ESTRUCTURA.md` §2.2 —«el texto nunca va encima de
   la imagen»— y hay que saber por qué. La regla que IMPORTA es la de al lado,
   `01-DISENO.md` §7: «si una foto necesita un velo oscuro para que se lea el
   texto encima, es que el texto no debería ir encima». Esa se respeta entera,
   porque **aquí no hay velo ni degradado**: la foto de escritorio tiene el 45 %
   izquierdo deliberadamente vacío y oscuro. Si algún día se cambia la foto por
   otra que no cumpla eso, el texto vuelve a su columna: no se añade un
   degradado para taparlo.

   Medido otra vez el 2026-09-16 al añadir la coletilla del hero: con una línea
   más la caja llega al 74 % y sigue dando 8,12:1; con dos, 7,20:1. Hay margen,
   pero la regla no cambia — si crece más, se vuelve a medir.

   ⚠️ **La caja de texto está medida, y por eso está sujeta.** Al mudar aquí el
   bloque de la fragancia (2026-09-09) el texto pasó de un párrafo a dos, y una
   caja centrada crecía hasta el 83 % de la altura — justo donde está el brillo
   del mostrador, que contra el hueso da **2,5:1**. La caja que sí vale es
   **5-55 % de ancho y 8-70 % de alto: 8,12:1 contra el píxel más claro**, muy
   por encima del 4,5:1 de AA. De ahí las tres reglas de abajo, que no son
   estética: el bloque se ancla ARRIBA en vez de centrarse, la altura mínima
   sube para que el texto ocupe menos fracción, y los párrafos llevan tope de
   ancho. Si se añade un tercer párrafo, hay que volver a medir.

   En móvil el texto NO va encima. La franja superior de la foto vertical da
   4,16:1 contra su píxel más claro, que vale para un titular grande pero no
   para el párrafo, así que ahí el bloque de texto va sobre hueso y la foto
   debajo, entera.

   La altura va atada al ANCHO, no a la altura de la ventana: `100vh` —y `svh`,
   que es lo mismo con otro nombre— es la firma de plantilla que evita §2.2. */
.hero { display: grid; gap: var(--e-7); padding-block: var(--e-9); }
.hero h1 { max-width: 20ch; }
.hero .lead { margin-top: var(--e-5); }
.hero-texto p { max-width: 42ch; }
/* "Y para sus atletas." va pegada al titular, no separada como un párrafo más:
   es el final de la frase, no una idea aparte. */
.hero-coletilla {
  margin-top: var(--e-2);
  font: 400 var(--t-lead)/1.3 var(--fuente-titulo);
  color: var(--piedra);
}
.hero .btn { margin-top: var(--e-6); }
.hero-fondo img { width: 100%; }

@media (max-width: 63.999rem) {
  /* El texto primero, la foto entera debajo y a sangre. */
  .hero { padding-block: var(--e-9) 0; }
  .hero-texto { order: -1; }
  .hero-fondo { margin-top: var(--e-7); }
}

@media (min-width: 64rem) {
  .hero {
    position: relative; isolation: isolate;
    /* Arriba, no centrado: centrar empujaba el segundo párrafo al brillo del
       mostrador. Ver la medición del comentario de arriba. */
    display: flex; align-items: flex-start;
    min-height: clamp(34rem, 52vw, 56rem);   /* 544–896 px, según el ancho */
    padding-block: var(--e-9);
    background: var(--carbon);   /* por si la foto tarda: el texto ya es hueso */
  }
  .hero-fondo {
    position: absolute; inset: 0; z-index: -1;
  }
  .hero-fondo img {
    width: 100%; height: 100%;
    /* El producto está en el tercio derecho: cuando la pantalla es más
       estrecha que 16:9 se recorta por la izquierda, que es lo que sobra. */
    object-fit: cover; object-position: right center;
  }
  .hero-texto { width: 100%; }
  .hero-texto .etiqueta { color: var(--piedra-clara); }
  .hero-texto h1 { color: var(--hueso); }
  .hero-texto .hero-coletilla { color: var(--piedra-clara); }
  /* Todos los párrafos, no solo el `.lead`: el segundo se quedaba en tinta
     oscura sobre la foto oscura, o sea invisible. */
  .hero-texto p { color: var(--hueso); }
  /* El botón principal es negro sobre hueso; sobre la foto oscura no se veía. */
  .hero-texto .btn {
    background: var(--hueso); color: var(--negro); border-color: var(--hueso);
  }
  .hero-texto .btn:hover { background: transparent; color: var(--hueso); }
  .hero-texto :focus-visible { outline-color: var(--hueso); }
}

/* El bloque de marca va muy sobrado de aire. El contraste de ritmo con lo que
   viene antes y después es intencionado. */
.marca-texto { max-width: var(--ancho-texto); }
.marca-texto p + p { margin-top: var(--e-4); }

/* Una escena a sangre con el texto encima, como el hero y con su misma regla:
   **ni velo ni degradado**. Solo vale con una foto que tenga una zona vacía y
   oscura de verdad, y eso se mide antes. `sala-noche` da 7,63:1 contra el
   hueso en su píxel más claro dentro de la mitad izquierda; `post-entreno`
   daba 1,14:1 y por eso no sirvió.

   En móvil el texto NO va encima: la foto es 16:9 y al estrecharse no queda
   zona vacía. Va debajo, sobre carbón. */
.escena { background: var(--carbon); color: var(--hueso); }
.escena-fondo img { width: 100%; display: block; object-fit: cover; }
.escena-texto { padding-block: var(--e-8); }
.escena-texto h2, .escena-texto p { color: var(--hueso); }
.escena-texto .etiqueta { color: var(--piedra-clara); }
.escena-texto p { max-width: 42ch; }
.escena-texto p + p { margin-top: var(--e-4); }

/* La de `/pro` lleva un h1 largo y un botón: necesita más aire que la de la
   home, que solo tiene dos frases. */
.escena-pro .escena-texto h1 { font-size: var(--t-d1); max-width: 22ch; }
.escena-pro .escena-texto .lead { margin-top: var(--e-5); }
.escena-pro .escena-texto .btn { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }

@media (min-width: 64rem) {
  .escena {
    position: relative; isolation: isolate;
    display: flex; align-items: center;
    min-height: clamp(26rem, 38vw, 42rem);
  }
  .escena-pro { min-height: clamp(30rem, 44vw, 48rem); }
  .escena-fondo { position: absolute; inset: 0; z-index: -1; }
  .escena-fondo img { height: 100%; object-position: right center; }
  .escena-texto { width: 100%; padding-block: var(--e-9); }
}

/* Cinco productos en tres columnas dejaban una última fila huérfana de dos, y
   los cinco pesaban lo mismo. Con doce columnas caben 6+6 arriba (difusor y
   pack Full Cycle, que es lo que interesa vender) y 4+4+4 abajo (recarga,
   pack doble y varillas). El orden lo pone `productos.orden`, no el CSS: así
   sigue siendo el mismo sin hoja de estilos y para un lector de pantalla.

   Si algún día se agota un producto y quedan cuatro, la segunda fila deja un
   hueco a la derecha. Es feo pero no está roto, y es preferible a una regla
   con `:has()` que nadie sabría leer dentro de seis meses. */
.rejilla-productos {
  display: grid; gap: var(--e-7) var(--e-5);
  grid-template-columns: 1fr;
  margin-top: var(--e-7);
}
@media (min-width: 40rem) { .rejilla-productos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .rejilla-productos { grid-template-columns: repeat(12, 1fr); }
  .rejilla-productos > * { grid-column: span 4; }
  .rejilla-productos > *:nth-child(-n+2) { grid-column: span 6; }
}

/* Ni sombra ni caja: a la tarjeta la separan del fondo una línea de 1 px
   arriba y el espaciado. */
.producto { border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.producto-foto {
  aspect-ratio: 4 / 5;
  background: var(--hueso-alto);
  margin-bottom: var(--e-4);
  overflow: hidden;
}
.producto-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 220ms cubic-bezier(.2, 0, .2, 1);
}
/* Muy leve y solo con ratón: es un acuse de recibo, no una animación. */
@media (hover: hover) {
  .producto:hover .producto-foto img { transform: scale(1.02); }
}
/* Hueco honesto para el producto que todavía no tiene foto: no se inventa
   una, ni se recicla la de otro artículo. */
.producto-foto-vacia {
  display: grid; place-items: center;
  border: 1px solid var(--linea-suave);
  color: var(--piedra);
  font: 600 var(--t-micro)/1.2 var(--fuente-texto);
  letter-spacing: 0.18em; text-transform: uppercase;
}
/* El nombre del producto es interfaz de catálogo, no un mensaje editorial. En
   Instrument Serif a 2rem competía con los `h2` de sección y además partía mal
   («Recarga Cool Down 200 ml» en una columna de cuatro). La serif se reserva
   para los titulares; así vuelve a destacar cuando aparece. */
.producto h3 {
  font-family: var(--fuente-texto);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}
.producto-desc { font-size: var(--t-sm); color: var(--piedra); margin: var(--e-2) 0 var(--e-4); }
.producto-precio {
  font: 600 var(--t-lead)/1 var(--fuente-texto);
  margin: 0 0 var(--e-4);
  display: flex; align-items: baseline; gap: var(--e-3);
}
/* Sin tachado a propósito: `antes_cent` es la suma de las piezas por separado,
   no un precio que se haya cobrado antes. Un número tachado se lee como un
   anuncio de reducción de precio, y el art. 20.1 LGDCU (RD 348/2021) exige que
   ese precio anterior haya estado aplicado 30 días. Aquí nunca lo estuvo. */
.producto-antes { font-weight: 400; font-size: var(--t-sm); color: var(--piedra); }
.producto-acciones { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.producto-agotado { font-size: var(--t-sm); color: var(--piedra); }

.pasos { display: grid; gap: var(--e-7); grid-template-columns: 1fr; margin-top: var(--e-7); }
.nota-seguridad {
  margin-top: var(--e-7);
  max-width: var(--ancho-texto);
  font-size: var(--t-sm);
  color: var(--piedra);
}
@media (min-width: 48rem) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso-num {
  font: 400 var(--t-d1)/1 var(--fuente-display);
  color: var(--piedra);
  display: block; margin-bottom: var(--e-3);
}
.paso h3 { font-size: var(--t-d3); margin-bottom: var(--e-3); }
.paso p { font-size: var(--t-sm); }

/* La vía profesional no es la misma tienda: es otro comprador, con otro precio
   y otro trato. Se separa con lo único que se puede usar aquí sin romper el
   monocromo, que es el fondo. Y de paso corta 7.000 px seguidos de hueso.
   Es el ÚNICO bloque oscuro de la página; en cuanto haya dos deja de separar
   nada. */
.seccion-oscura {
  background: var(--carbon);
  color: var(--hueso);
}
.seccion-oscura h2, .seccion-oscura h3 { color: var(--hueso); }
.seccion-oscura .lead,
.seccion-oscura .etiqueta,
.seccion-oscura .paso-num { color: var(--piedra-clara); }
.seccion-oscura strong { color: var(--hueso-alto); }
/* El botón secundario es negro sobre transparente: sobre carbón no se veía. */
.seccion-oscura .btn-2 { color: var(--hueso); border-color: var(--hueso); }
.seccion-oscura .btn-2:hover { background: var(--hueso); color: var(--negro); }
.seccion-oscura :focus-visible { outline-color: var(--hueso); }

/* Era una galería: tres fotos con una etiqueta encima y ningún argumento.
   Ahora cada foto lleva su porqué debajo, que es lo que faltaba en toda la
   página. Tres columnas iguales: aquí lo que manda es que las tres razones
   pesen lo mismo, no la asimetría. */
/* Cada público con su bloque. Separa por CLIENTE, no por habitación: el centro
   que compra para su local y el atleta que compra para su casa no tienen las
   mismas dudas ni el mismo precio.
   En pantalla ancha van uno al lado del otro y con una línea entre medias: en
   vertical, y con las fotos del centro arriba, el segundo bloque se leía como
   una continuación del primero en vez de como otro público. */
/* El desmentido honesto del bloque de la fragancia. Más pequeño y en piedra:
   es una nota al pie de la afirmación de arriba, no otra afirmación. */
.matiz { font-size: var(--t-sm); color: var(--piedra); }

/* Las dos vías, una al lado de otra, con la cifra grande: es el número que
   decide si un centro abre la cuenta o cierra la pestaña. */
.comparativa { display: grid; gap: var(--e-6); margin: var(--e-7) 0; }
@media (min-width: 40rem) { .comparativa { grid-template-columns: repeat(2, 1fr); } }
.comparativa-caso { border-top: 2px solid var(--negro); padding-top: var(--e-4); }
.comparativa .cifra {
  font: 400 var(--t-d1)/1 var(--fuente-display);
  letter-spacing: -0.02em; margin: 0;
}
.comparativa .rotulo {
  font: 600 var(--t-micro)/1.2 var(--fuente-texto);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--piedra); margin: var(--e-2) 0 var(--e-3);
}
.comparativa .detalle { font-size: var(--t-sm); margin: 0; max-width: none; }

.publicos { display: grid; gap: var(--e-8); margin-top: var(--e-7); }
@media (min-width: 64rem) {
  .publicos { grid-template-columns: 1.6fr 1fr; gap: var(--e-9); }
  .publicos > .publico + .publico {
    padding-left: var(--e-9);
    border-left: 1px solid var(--linea);
  }
}
.publico + .publico { margin-top: 0; }
.publico > h3 { margin: 0 0 var(--e-3); }
.publico > p { max-width: var(--ancho-texto); }
.publico .pagina-cta { margin-top: var(--e-6); }
.sitios { display: grid; gap: var(--e-7) var(--e-5); grid-template-columns: 1fr; margin-top: var(--e-7); }
@media (min-width: 48rem) { .sitios { grid-template-columns: repeat(3, 1fr); } }
/* El bloque del centro lleva dos fotos y el del particular una. Va después de
   la regla de tres columnas a propósito: si fuera antes, la pisaría. */
@media (min-width: 48rem) {
  .sitios-dos { grid-template-columns: repeat(2, 1fr); }
  .sitios-uno { grid-template-columns: 1fr; }
}
.sitio { margin: 0; }
.sitio img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.sitio figcaption { margin-top: var(--e-4); }
.sitio h4 {
  font-family: var(--fuente-texto); font-size: 1.125rem; font-weight: 500;
  line-height: 1.3; letter-spacing: 0; margin-bottom: var(--e-2);
}
.sitio p { font-size: var(--t-sm); max-width: none; }

/* Preguntas frecuentes. Una lista de definiciones porque eso es lo que es:
   nada de acordeones. Un acordeón esconde justo la respuesta que alguien está
   buscando y obliga a un clic para leer cinco líneas. */
.preguntas { margin: var(--e-7) 0 0; max-width: 44rem; }
.preguntas dt {
  font-weight: 600; font-size: var(--t-base);
  border-top: 1px solid var(--linea); padding-top: var(--e-5); margin-top: var(--e-5);
}
.preguntas dt:first-child { margin-top: 0; }
.preguntas dd { margin: var(--e-3) 0 0; font-size: var(--t-sm); color: var(--tinta); }

.pagina-cta { margin-top: var(--e-6); }

/* «Hecho en España» ocupaba una sección entera —casi una pantalla— para dos
   líneas que son un dato de servicio, no un argumento. Aquí abajo, en una sola
   franja con el envío y el pago, dice lo mismo y no interrumpe nada. El `h2`
   sigue existiendo para el índice de encabezados, pero solo lo ve un lector de
   pantalla: sobre la franja sería un titular sin nada debajo. */
.franja {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  font: 600 var(--t-micro)/1.2 var(--fuente-texto);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--piedra);
}
.franja li { margin: 0; }

/* La foto de recepción va aquí y no en la galería: es donde dice algo, porque
   el visitante de esta sección es justo quien tiene un mostrador. */
.pro-cabecera { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 64rem) {
  .pro-cabecera { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
}
.pro-foto img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* Eran tres vías y ahora son dos (N-12 reordenado): con `repeat(3, …)` la
   segunda quedaba a media fila y sobraba un hueco a la derecha. */
.bloques-pro { display: grid; gap: var(--e-7); grid-template-columns: 1fr; margin-top: var(--e-8); }
@media (min-width: 48rem) { .bloques-pro { grid-template-columns: repeat(2, 1fr); } }
.bloques-pro .paso img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; margin-bottom: var(--e-5); }
.bloques-pro .paso p { max-width: none; }

/* `.pro-portada` era la versión a dos columnas de la portada de `/pro`. Se
   retiró: con un titular largo la columna de texto crecía y la foto de al lado
   quedaba minúscula al lado. Ahora es una escena a sangre, `.escena-pro`. */

/* ---------------------------------------------------------------
   9. Panel del carrito
   --------------------------------------------------------------- */

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 10, 10, .35);
  border: 0; padding: 0; margin: 0;
}
.velo[hidden] { display: none; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(26rem, 100vw);
  display: flex; flex-direction: column;
  background: var(--hueso-alto);
  border-left: 1px solid var(--linea);
  transform: translateX(100%);
  transition: transform 180ms cubic-bezier(.2, 0, .2, 1);
}
.panel.abierto { transform: translateX(0); }
.panel[hidden] { display: none; }

.panel-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-5); border-bottom: 1px solid var(--linea-suave);
}
.panel-cabecera h2 { font-size: var(--t-d3); }
.cerrar {
  background: none; border: 0; cursor: pointer;
  font: 400 1.5rem/1 var(--fuente-texto);
  color: var(--tinta);
  width: 2.75rem; height: 2.75rem;
}
.panel-cuerpo { flex: 1; overflow-y: auto; padding: var(--e-5); }
.panel-pie { border-top: 1px solid var(--linea-suave); padding: var(--e-5); }

.linea {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: var(--e-4);
  padding-bottom: var(--e-5); margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--linea-suave);
}
.linea:last-child { border-bottom: 0; margin-bottom: 0; }
.linea-foto { aspect-ratio: 4 / 5; background: var(--hueso); overflow: hidden; }
.linea-foto img { width: 100%; height: 100%; object-fit: cover; }
.linea-nombre { font-size: var(--t-sm); font-weight: 500; margin: 0 0 var(--e-2); }
.linea-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-3); }
.linea-precio { font-weight: 600; font-size: var(--t-sm); }
.linea-quitar { font-size: var(--t-xs); color: var(--piedra); }

.resumen { font-size: var(--t-sm); }
.resumen-fila { display: flex; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-2); }
/* El importe no se parte: con el nombre largo de un producto, «29,90 €» se
   quedaba con el símbolo en la línea de abajo. */
.resumen-fila > span:last-child, .resumen-total > span:last-child { white-space: nowrap; flex: none; }
.resumen-total {
  display: flex; justify-content: space-between; gap: var(--e-4);
  border-top: 1px solid var(--linea); margin-top: var(--e-3); padding-top: var(--e-3);
  font-weight: 600; font-size: var(--t-lead);
}
.resumen .btn { margin-top: var(--e-5); }
.seguir { display: block; text-align: center; margin-top: var(--e-4); font-size: var(--t-sm); }

/* Cuando el panel está abierto el fondo no se desplaza. */
body.sin-scroll { overflow: hidden; }

/* ---------------------------------------------------------------
   10. Checkout
   --------------------------------------------------------------- */

/* Página propia y sin navegación: cada enlace en un checkout es una salida. */
.checkout-cabecera {
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--linea-suave);
  margin-bottom: var(--e-7);
}
.checkout {
  display: grid; gap: var(--e-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--e-9);
}
@media (min-width: 64rem) {
  .checkout { grid-template-columns: 1.4fr 1fr; gap: var(--e-8); align-items: start; }
  /* El resumen se queda a la vista mientras se rellena el formulario. */
  .checkout-resumen { position: sticky; top: var(--e-5); }
}
.checkout fieldset { border: 0; padding: 0; margin: 0 0 var(--e-7); }
.checkout legend {
  font: 600 var(--t-micro)/1.2 var(--fuente-texto);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--piedra);
  padding: 0; margin-bottom: var(--e-4);
}
.checkout-resumen {
  background: var(--hueso-alto);
  border: 1px solid var(--linea);
  padding: var(--e-5);
}
.checkout-resumen h2 { font-size: var(--t-d3); margin-bottom: var(--e-4); }
#pago-stripe { margin-bottom: var(--e-5); min-height: 4rem; }

.gracias { max-width: var(--ancho-texto); padding-block: var(--e-9); }
.gracias h1 { margin-bottom: var(--e-5); }
.gracias dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-5); font-size: var(--t-sm); }
.gracias dt { color: var(--piedra); }
.gracias dd { margin: 0; }

/* ---------------------------------------------------------------
   11. Páginas de texto (legales, cuenta)
   --------------------------------------------------------------- */

.documento { max-width: var(--ancho-texto); padding-block: var(--e-8); }
.documento h1 { font-size: var(--t-d1); margin-bottom: var(--e-6); }
.documento h2 { font-size: var(--t-d3); margin: var(--e-7) 0 var(--e-4); }
.documento h3 { font-size: var(--t-lead); font-family: var(--fuente-texto); font-weight: 600;
                margin: var(--e-6) 0 var(--e-3); letter-spacing: 0; }
.documento ul { margin-bottom: var(--e-4); }
.documento table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-bottom: var(--e-5); }
.documento th, .documento td { border-bottom: 1px solid var(--linea-suave); padding: var(--e-3) var(--e-3) var(--e-3) 0; text-align: left; vertical-align: top; }
.documento th { font-weight: 600; }

/* Los huecos sin rellenar de un texto legal en borrador. Se ven de lejos a
   propósito: publicar un aviso legal con "[PENDIENTE: tomo, folio…]" dentro es
   peor que no publicarlo. */
.pendiente { color: var(--error); }

/* Marca de estado junto a un enlace del pie: solo la ve quien está dentro. */
.etiqueta-en-linea {
  font: 600 var(--t-micro)/1 var(--fuente-texto);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--aviso);
}

.indice { border-left: 1px solid var(--linea); padding-left: var(--e-4); margin-bottom: var(--e-7); }
.indice ul { list-style: none; padding: 0; margin: 0; }
.indice li { margin-bottom: var(--e-2); font-size: var(--t-sm); }

.estrecho { max-width: var(--ancho-texto); }

main { padding-bottom: var(--e-8); }
.pagina { padding-block: var(--e-8); }
.pagina h1 { font-size: var(--t-d1); margin-bottom: var(--e-5); }

/* ---------------------------------------------------------------
   Pantallas de cuenta y de centro.

   Se maquetaron contra la hoja provisional, que prometía sustituirse
   «sin tocar el HTML». Esta sección cumple esa promesa: las clases
   que usan aquellas plantillas —`.estrecho`, `.pila`, `.tarjeta`,
   `.tabla`, un `<button>` a secas— siguen valiendo, ahora con el
   sistema de diseño de verdad.

   Reescribir doce plantillas para renombrar clases habría sido más
   trabajo, más riesgo y cero diferencia en pantalla.
   --------------------------------------------------------------- */

/* `.estrecho` es el bloque de lectura de esas pantallas, y va suelto dentro de
   `<main>` sin contenedor. El margen lateral se lo pone `main` para no tener
   que envolver cada una.

   El `:not(.contenedor)` no es cosmético. El checkout es el único `<main>` que
   ya trae contenedor propio, y sin esta exclusión sus avisos heredaban de aquí
   un `padding-block` de arriba y un ancho de texto centrado: el mensaje salía
   estrecho, descolocado respecto al formulario y con el texto pegado al borde
   de abajo, que es todo lo que se veía del recuadro. */
main:not(.contenedor) > .estrecho,
main:not(.contenedor) > .tarjeta,
main:not(.contenedor) > .tabla-envoltorio,
main:not(.contenedor) > .aviso {
  max-width: var(--ancho-texto);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
  padding-block: var(--e-8) 0;
  box-sizing: content-box;
}
main:not(.contenedor) > .estrecho h1 { font-size: var(--t-d1); margin-bottom: var(--e-4); }

/* Un `<button>` sin clase, dentro de una de esas pantallas, es el botón
   principal de su formulario. Aquí NO se estiliza `button` en general: el
   selector de cantidad y el cierre del panel tienen los suyos. */
main .pila > button,
main .tarjeta button:not(.como-enlace):not(.cerrar),
main > .estrecho form > button:not(.como-enlace) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 var(--e-6);
  font: 600 var(--t-sm)/1 var(--fuente-texto);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--negro); color: var(--hueso);
  border: 1px solid var(--negro); border-radius: 0;
  cursor: pointer; align-self: flex-start;
  transition: background var(--transicion), color var(--transicion);
}
main .pila > button:hover,
main .tarjeta button:not(.como-enlace):not(.cerrar):hover,
main > .estrecho form > button:not(.como-enlace):hover {
  background: transparent; color: var(--negro);
}
.secundario-boton { background: transparent !important; color: var(--negro) !important; }
.secundario-boton:hover { background: var(--negro) !important; color: var(--hueso) !important; }
.peligro-boton {
  background: transparent !important; color: var(--error) !important;
  border-color: var(--error) !important;
}
.peligro-boton:hover { background: var(--error) !important; color: var(--hueso) !important; }

/* `.pila` en estas plantillas es etiqueta-campo-error en cadena, sin envoltorio
   por campo: el aire va entre pares, no uniforme. */
main .pila > label { margin-top: var(--e-4); }
main .pila > label:first-child { margin-top: 0; }

/* `.aviso error` y `.aviso exito` son los nombres viejos; los nuevos son
   `.aviso-error` y `.aviso-exito`. Valen los dos. */
.aviso.error { border-left-color: var(--error); color: var(--error); }
.aviso.exito { border-left-color: var(--exito); }

/* Las tarjetas de la zona de cuenta: sin sombra, solo línea. */
.tarjeta {
  background: var(--hueso-alto);
  border: 1px solid var(--linea);
  padding: var(--e-5);
  margin: 0 0 var(--e-5);
}
.tarjeta h2 { font-size: var(--t-d3); margin-bottom: var(--e-4); }
.tarjeta p:last-child { margin-bottom: 0; }

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

/* Una tabla ancha se desplaza DENTRO de su caja. Sin esto, en un móvil se
   desplaza la página entera de lado. */
.tabla-envoltorio { overflow-x: auto; margin: 0 0 var(--e-5); }
.tabla { width: 100%; border-collapse: collapse; background: var(--hueso-alto); }
.tabla th, .tabla td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linea-suave);
  text-align: left; white-space: nowrap;
}
.tabla th { font-weight: 600; font-size: var(--t-sm); color: var(--piedra); }
.tabla th.derecha, .tabla td.derecha { text-align: right; }
.tabla tfoot .total td { font-weight: 600; border-bottom: 0; }

.derecha { text-align: right; }
.grande { font-size: var(--t-lead); }
.secundario { color: var(--piedra); font-size: var(--t-sm); }
.peligro { color: var(--error); }
.direccion { color: var(--tinta); font-style: normal; }
form.en-linea { display: inline; }
.btn-peligro { border-color: var(--error); color: var(--error); background: transparent; }
.btn-peligro:hover { background: var(--error); color: var(--hueso); border-color: var(--error); }

/* ---------------------------------------------------------------
   12. Movimiento
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}