/* ===================================================================
   LA SUBASTA — moda de hombre en Burriana
   Papel crema, tinta negra, verde y cobre del rótulo real de la tienda
   (chapa verde, letras de cobre). Georgia y Arial, tipos de sistema:
   la página compone en el primer fotograma. Nada redondeado.
   La fotografía manda; la tipografía la acompaña.
   =================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:     #f1ede5;
  --paper-lo:  #e8e3d8;
  /* Fondo del recuadro de foto. Más tono que el papel a propósito: las
     prendas van recortadas y muchas son crema o beige, así que sobre el
     papel claro se diluían y no se les veía la silueta. Este arena las
     recorta sin oscurecer la página ni apagar las prendas oscuras. */
  --shot-bg:   #ded7c8;
  --ink:       #11100f;
  --ink-soft:  #4a4741;
  --ink-mute:  #5f5a52;   /* ~6:1 sobre el papel: se usa a 8-11px */
  --green:      #2e6a5c;
  --copper:     #a8703f;
  --line:      rgba(17,16,15,.16);
  --line-soft: rgba(17,16,15,.09);
  --on-dark:      #f1ede5;
  --on-dark-mute: rgba(241,237,229,.58);

  --display: Georgia, "Times New Roman", Times, serif;
  --ui:      Arial, "Helvetica Neue", Helvetica, sans-serif;
  --narrow:  "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;

  /* Cada sección lleva este relleno arriba Y abajo, así que entre dos
     secciones seguidas se suma el doble — por eso se queda corto a
     propósito frente a la referencia original (135px). */
  --pad-x: clamp(20px, 7vw, 90px);
  --pad-y: clamp(44px, 6.5vw, 84px);

  /* Ancho máximo del contenido. Sin esto, en un monitor grande la web se
     estiraba de borde a borde y los titulares quedaban a kilómetros del
     texto. El margen es el mayor de los dos: el de siempre en pantallas
     normales, y el que hace falta para centrar la columna en las grandes. */
  --col: 1240px;
  --gutter: max(var(--pad-x), (100% - var(--col)) / 2);

  /* Un solo ancho de lectura para todo el texto corrido. Antes había
     cinco (32/42/46/52/68ch) y cada párrafo terminaba en un sitio
     distinto: eso es lo que hacía que los bloques parecieran sueltos. */
  --measure: 58ch;

  /* Alto de la barra fija. Todo lo que tiene que empezar por debajo de
     ella (portadas, menú, filtros pegajosos) parte de aquí, en vez de
     llevar cada uno su número mágico como antes. */
  --nav-h: 72px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.is-locked{ overflow:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd,figure{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:400; }
button{ font:inherit; }

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
::selection{ background:var(--green); color:var(--paper); }

/* ---------- 3. Tipografía ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.95;
  text-wrap:balance;
}

.tag{
  font-family:var(--ui);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0;
}
.tag__n{ color:var(--green); }

/* Guion verde delante de los rótulos de sección: el detalle que repite el
   color del rótulo de la calle en cada bloque de la web. No se le pone a
   los rótulos que no encabezan nada (el "← Colección" de las fichas, el
   aviso de horario del menú o el copyright del pie). */
.say > .tag::before,
.nuevo .tag::before,
.split__body .tag::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:18px; height:1px;
  margin:-2px 11px 0 0;
  background:var(--green);
}
/* El guion se traza de izquierda a derecha cuando el rótulo entra, un
   pelo después que el filete de la sección. Es el remate pequeño del
   mismo gesto: primero se tira la línea larga del bloque, luego la corta
   del rótulo. Va con transform, que no recalcula la maquetación.
   El html.js es imprescindible: sin JavaScript nadie añade .is-in, y el
   guion se quedaría encogido para siempre. */
html.js .say > .tag::before,
html.js html.js html.js .nuevo .tag::before,
html.js .split__body .tag::before{
  transform:scaleX(0);
  transform-origin:left center;
}
html.js .say > .tag.is-in::before,
html.js .nuevo .tag.is-in::before,
html.js .split__body .tag.is-in::before{
  transform:scaleX(1);
  transition:transform .5s var(--ease) .12s;
}

.body-txt{
  font-size:.95rem;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:var(--measure);
}

/* La flecha de los botones va DIBUJADA, no escrita.

   Antes era el carácter ↗ (U+2197). Ese signo tiene variante de emoji, y
   cuando la fuente de texto no lo trae —cosa que pasa en Android— el
   teléfono tira de la fuente de emoji y lo pinta como un cuadradito azul
   de colores en medio del botón. En Windows salía bien, que es lo que lo
   hacía difícil de ver desde aquí.

   Un SVG no depende de ninguna fuente ni de ningún respaldo del sistema:
   se ve igual en todas partes. Hereda el color del texto (currentColor),
   así que sigue cambiando solo cuando el botón se llena de verde. */
.arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .45s var(--ease);
}
.arrow svg{
  display:block;
  width:1em; height:1em;
  fill:none;
  stroke:currentColor;
  /* Ni redondeado ni biselado: el trazo termina en escuadra, como todo
     lo demás de esta web. */
  stroke-width:1.5;
  stroke-linecap:square;
}

/* Botón cuadrado, como en la referencia */
.btn{
  position:relative;
  z-index:0;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border:1px solid currentColor;
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
/* El relleno ENTRA POR LA IZQUIERDA en vez de aparecer fundiendo el color
   de fondo. Es una lámina que barre el botón, como pasar un sello por la
   tinta, y se lee como un gesto en vez de como un cambio de estado.

   Va en un pseudo-elemento y con transform: un scaleX no toca la
   maquetación, mientras que animar background-color obliga a repintar
   todo el botón en cada fotograma.

   El z-index:-1 lo deja por detrás del texto pero por delante del fondo
   del propio botón; por eso .btn lleva z-index:0, que le crea su contexto
   de apilamiento y evita que la lámina se vaya detrás de la sección. */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.btn:active::before{ transform:scaleX(1); }
/* El de relleno ya nace verde: el suyo barre en tinta. */
.btn--fill::before{ background:var(--ink); }
/* Al pulsar/pasar, todos los botones van al verde del rótulo: es el gesto
   que más se repite en la web, así que es donde más se nota el color.

   :active además de :hover porque en un móvil no hay puntero — el ratón
   nunca "pasa por encima" de nada, así que con solo :hover el verde no
   aparecía jamás en el teléfono. :active se dispara con el dedo.
   El :hover va dentro de (hover:hover) para que el móvil no se quede con
   el botón verde pegado después de tocarlo, que es lo que hacen algunos
   navegadores táctiles cuando encuentran un :hover suelto. */
.btn:active,
.btn--light:active{ border-color:var(--green); color:var(--paper); }
.btn:active .arrow{ transform:translate(3px,-3px); }

.btn--light{ color:var(--on-dark); }

.btn--fill{ background:var(--green); border-color:var(--green); color:var(--paper); }
.btn--fill:active{ border-color:var(--ink); color:var(--paper); }

@media (hover:hover){
  .btn:hover,
  .btn--light:hover{ border-color:var(--green); color:var(--paper); }
  .btn:hover::before{ transform:scaleX(1); }
  .btn:hover .arrow{ transform:translate(3px,-3px); }
  .btn--fill:hover{ border-color:var(--ink); color:var(--paper); }
}

/* ---------- 4. Movimiento ---------- */
.mask{ display:block; overflow:hidden; padding-bottom:.1em; }
html.js .mask > [data-line]{ display:block; transform:translateY(106%); }
html.js .mask.is-in > [data-line]{ transform:translateY(0); transition:transform 1.15s var(--ease); }

html.js [data-rise]{ opacity:0; transform:translateY(16px); }
html.js [data-rise].is-in{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}

/* Apertura del encuadre */
.shot{ position:relative; overflow:hidden; background:var(--shot-bg); }

figcaption{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding-top:12px;
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- 5. Navegación ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px var(--gutter);
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--ease), background-color .45s ease,
             color .45s ease, border-color .45s ease, padding .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(241,237,229,.93);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line-soft);
  padding-block:13px;
}
.nav.is-hidden{ transform:translateY(-101%); }

/* Sobre una portada oscura */
.nav.is-over{ color:var(--on-dark); }
.nav.is-over .nav__logo-img{ background-color:var(--on-dark); }
.nav.is-over .nav__sub,
.nav.is-over .nav__links a,
.nav.is-over .nav__call,
.nav.is-over .nav__cart{ color:var(--on-dark); }
/* Sobre la foto, el subrayado verde de la pestaña activa se apaga y no se
   lee: encima de una portada oscura va en color papel. */
.nav.is-over .nav__links a::after{ background:var(--on-dark); }
.nav.is-over .burger{ border-color:rgba(241,237,229,.4); }
.nav.is-over .burger span{ background:var(--on-dark); }

/* ---- Logotipo ----
   El de la tienda, trazado del original. Va como MASCARA y no como <img>
   a proposito: asi toma el color de la web —cobre sobre el papel, crema
   sobre la portada— en vez de traer el suyo. Con un <img> harian falta
   dos archivos, uno por color, y cambiarlos con JavaScript.

   Lo que habia antes aqui era un apano: la corbata de mascara mas
   "LA SUBASTA" compuesto a mano en Arial Narrow, porque no habia
   logotipo. Ahora que lo hay, sobra: por eso desaparecen
   .nav__logo-mark, .nav__logo-text y .nav__logo-a.

   --logo-h es el alto de la CAJA entera, con la cola de la corbata
   incluida. Las letras ocupan 585 de los 744 del original, asi que a
   34px de caja las mayusculas miden 20px: lo mismo que median antes. */
.nav__logo{ --logo-h:36px; display:flex; align-items:flex-end; gap:12px; }
.nav__logo-img{
  flex:none;
  width:calc(var(--logo-h) * 1824 / 744);
  height:var(--logo-h);
  background-color:var(--copper);
  -webkit-mask:url(../img/logo-subasta.svg?v=d1bcf3ac) center / contain no-repeat;
          mask:url(../img/logo-subasta.svg?v=d1bcf3ac) center / contain no-repeat;
  transition:background-color .45s ease;
}
/* BURRIANA se alinea con la linea de base de las LETRAS, no con el fondo
   de la caja: la corbata baja 159 de 744 por debajo de ellas, y sin este
   margen el rotulo se iba a colgar de la punta. */
.nav__sub{
  align-self:flex-end;
  margin-bottom:calc(var(--logo-h) * 159 / 744);
  font-size:8.5px;
  letter-spacing:.34em;
  color:var(--ink-mute);
  transition:color .45s ease;
}

.nav__links{ display:flex; gap:clamp(16px,2.3vw,32px); }
.nav__links a{
  position:relative;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding-bottom:3px;
  transition:color .45s ease;
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.nav__end{ display:flex; align-items:center; gap:14px; }
.nav__call{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; transition:color .45s ease; }
.nav__call:hover .arrow{ transform:translate(3px,-3px); }

.nav__cart{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:color .45s ease;
}
/* El contador de la reserva, con forma de BOLSA.

   Antes era un cuadrado con un número dentro y no decía nada: podía ser
   un contador de cualquier cosa. Con el asa encima se lee de un vistazo
   como "lo que llevas apartado".

   La bolsa va DIBUJADA CON BORDES, no con un icono ni un carácter. Dos
   motivos: un 🛍 escrito como texto sale convertido en emoji de colores
   en Android —el mismo problema que ya dio la flecha de los botones— y
   además un borde hereda currentColor, así que la bolsa se vuelve crema
   sola cuando la barra pasa sobre la fotografía de portada, igual que el
   resto. Con un icono de color fijo habría que mantener dos.

   Y es una bolsa CUADRADA, con el asa en ángulo recto: en esta web no se
   redondea nada, y una bolsa de esquinas suaves aquí sería la única.

   El cuerpo es un pelo más alto que ancho —1,55 contra 1,6— porque una
   bolsa cuadrada del todo vuelve a parecer una caja. */
.nav__cart-count{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:21px;
  padding:0 .25em;
  border:1px solid currentColor;
  font-size:11px;
  /* ESTO ES LO QUE DESCENTRABA LA CIFRA, y costó verlo.

     .nav__cart lleva letter-spacing:.15em para que "RESERVA" respire, y
     el contador lo heredaba. El espaciado entre letras se añade DESPUÉS
     de cada carácter, también del último: con una sola cifra eso deja
     1,65px de aire muerto a su derecha, y al centrar el conjunto el
     número acaba desplazado casi un píxel a la izquierda.

     Un píxel sobre un cuerpo de 20 es un 4% del ancho. En un número
     pequeño y con un borde alrededor, se ve. */
  letter-spacing:normal;
  /* Sin esto hereda el 1.6 del cuerpo de la página y la caja de línea sale
     de 16px dentro de un hueco de 15px: se desborda. No movía el número
     —al centrarlo flex, el interlineado sobrante queda repartido y la
     cifra cae igual—, pero una caja de línea que no cabe es una bomba de
     relojería en cuanto alguien toque el alto o el tipo de letra. */
  line-height:1;
  font-variant-numeric:tabular-nums;
  transition:opacity .3s ease;
}
/* El asa: un rectángulo sin fondo y sin borde de abajo, para que se abra
   contra el borde superior del cuerpo y las dos líneas se junten.

   Va en posición absoluta y SOBRESALE por arriba, sin reservarle hueco a
   base de margen. Antes sí se lo reservaba, y eso empujaba el cuerpo 4,6px
   hacia abajo: el número quedaba por debajo de la línea de la palabra
   "Reserva" y se veía descolgado. Lo que se tiene que alinear con el texto
   es el CUERPO de la bolsa, que es donde está el número; el asa es un
   remate y puede salirse hacia arriba, que la barra no recorta nada. */
.nav__cart-count::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translateX(-50%);
  width:10px;
  height:6px;
  border:1px solid currentColor;
  border-bottom:0;
}
.nav__cart[data-cart-count="0"] .nav__cart-count{ opacity:.4; }

.burger{
  all:unset;
  display:none;
  cursor:pointer;
  width:38px; height:38px;
  place-items:center;
  border:1px solid var(--line);
}
/* Las dos rayas van en la MISMA celda de la rejilla. Sin esto caen en
   dos filas distintas, y al abrir el menú giran cada una en su sitio: en
   vez de la equis de cerrar salía un ">". La separación de la hamburguesa
   la dan los translateY de abajo, no la rejilla. */
.burger span{ grid-area:1 / 1; display:block; width:16px; height:1px; background:var(--ink); transition:transform .45s var(--ease), background-color .45s ease; }
.burger span:first-child{ transform:translateY(-3px); }
.burger span:last-child{ transform:translateY(3px); }
.nav.is-open .burger span:first-child{ transform:translateY(.5px) rotate(45deg); }
.nav.is-open .burger span:last-child{ transform:translateY(-.5px) rotate(-45deg); }

@media (max-width:900px){
  .nav__links,.nav__call{ display:none; }
  .burger{ display:grid; }
}

/* Menú */
.menu{
  position:fixed;
  inset:0;
  z-index:70;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:34px;
  padding:calc(var(--nav-h) + 32px) var(--pad-x) var(--pad-x);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease);
}
.menu[hidden]{ display:none; }
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__links{ display:flex; flex-direction:column; gap:2px; }
.menu__links a{
  font-family:var(--display);
  font-size:clamp(2.3rem,12vw,3.5rem);
  letter-spacing:-.05em;
  line-height:1.12;
}
.menu__links .mask > [data-line]{ transform:translateY(112%); transition:transform .8s var(--ease); }
.menu.is-open .mask > [data-line]{ transform:translateY(0); }
.menu__links a:nth-child(1) [data-line]{ transition-delay:.08s; }
.menu__links a:nth-child(2) [data-line]{ transition-delay:.14s; }
.menu__links a:nth-child(3) [data-line]{ transition-delay:.20s; }
.menu__links a:nth-child(4) [data-line]{ transition-delay:.26s; }
.menu__foot{
  padding-top:22px;
  border-top:1px solid var(--line-soft);
  opacity:0;
  transition:opacity .5s ease .4s;
}
.menu.is-open .menu__foot{ opacity:1; }
.menu__foot p:not(.tag){ font-size:.92rem; color:var(--ink-soft); margin-top:5px; }

/* ---------- 6. Portada ---------- */
.hero{
  position:relative;
  min-height:min(92vh, 820px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:calc(var(--nav-h) + 78px) var(--gutter) clamp(34px,4.5vw,58px);
  overflow:hidden;
  color:var(--on-dark);
  isolation:isolate;
}
/* vh en el movil NO es lo que se ve: mide la pantalla con la barra del
   navegador escondida, que es como queda solo despues de desplazarse. Al
   cargar la barra esta puesta, asi que un 92vh se pasa de alto y los
   botones -que van anclados abajo- caian justo en el borde o por debajo
   del pliegue. svh mide el viewport PEQUENO, el de verdad al entrar. Se
   deja el vh delante como red por si el navegador es viejo. */
@supports (height:100svh){
  .hero{ min-height:min(92svh, 820px); }
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
/* --focus reencuadra una foto vertical dentro del marco apaisado:
   por ejemplo style="--focus:50% 30%" para subir el recorte. */
.hero__media img{ object-position:var(--focus, center); }

/* Acercamiento lento de la foto. 28s y un 6% de recorrido: a esa
   velocidad no se ve moverse, se nota que la imagen "está viva". Va en
   scale, que la tarjeta gráfica compone sin repintar nada, y el
   transform-origin lo tira hacia el centro-bajo, donde está el fondo de
   la tienda.

   alternate en vez de reiniciar: así nunca hay un salto de vuelta al
   principio. El navegador con movimiento reducido la para (sección 14). */
@media (prefers-reduced-motion: no-preference){
  .hero__media img{
    animation:heroZoom 28s var(--ease) infinite alternate;
    transform-origin:50% 62%;
    will-change:transform;
  }
}
@keyframes heroZoom{
  from{ transform:scale(1); }
  to  { transform:scale(1.06); }
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(54% 56% at 32% 44%, rgba(12,11,10,.32) 0%, rgba(12,11,10,0) 100%),
    linear-gradient(90deg, rgba(14,13,12,.42) 0%, rgba(14,13,12,.22) 65%, rgba(14,13,12,.06) 92%),
    linear-gradient(180deg,
      rgba(14,13,12,.58) 0%,
      rgba(14,13,12,.34) 30%,
      rgba(14,13,12,.44) 58%,
      rgba(14,13,12,.82) 100%);
}

.hero__inner{ position:relative; }

/* El rótulo de la portada lleva el mismo guion verde que encabeza las
   secciones de abajo — aquí en claro para que se vea sobre la foto. El
   trazo lo dispara el propio .is-in del rótulo, igual que los otros. */
.hero .tag{ color:rgba(241,237,229,.72); }
.hero__eyebrow::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:18px; height:1px;
  margin:-2px 11px 0 0;
  background:var(--green);
}
/* El guion se traza al entrar, igual que los de las secciones de abajo.
   El .is-in se lo pone el propio data-rise del rotulo. */
html.js .hero__eyebrow::before{ transform:scaleX(0); transform-origin:left center; }
html.js .hero__eyebrow.is-in::before{ transform:scaleX(1); transition:transform .5s var(--ease) .12s; }
.hero__title{
  font-size:clamp(2.9rem, 8vw, 7.4rem);
  margin-top:clamp(16px,2.4vw,30px);
  text-shadow:
    0 0 2px rgba(0,0,0,.85),
    0 0 14px rgba(0,0,0,.8),
    0 0 34px rgba(0,0,0,.75),
    0 8px 30px rgba(0,0,0,.6);
}
/* La segunda mitad del titular, en cursiva. Georgia trae la suya de
   serie, así que esto no descarga ni una fuente más: es el mismo tipo
   inclinado. Le da el aire de portada de catálogo sin tocar la paleta. */
.hero__title em{ font-style:italic; letter-spacing:-.03em; }

.hero__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(24px,5vw,70px);
  margin-top:clamp(26px,4vw,48px);
  padding-top:26px;
  /* Línea neutra, no verde: un verde translúcido de dos metros de largo
     sobre una fotografía se ensucia con lo que tenga detrás y se ve
     apagado. En el hero manda la foto; el verde está en el botón. */
  border-top:1px solid rgba(241,237,229,.26);
}
.hero__lead{ font-size:1.02rem; line-height:1.7; color:rgba(241,237,229,.86); max-width:34ch; }

/* Los dos botones. El verde va delante en el orden de lectura y en el
   peso visual; el de contorno es la salida alternativa, no un empate. */
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; flex-shrink:0; }
.hero__actions .btn{ padding:17px 30px; }
/* El de contorno, sobre foto, necesita algo de fondo propio o el texto
   se pelea con lo que tenga detrás. Un velo oscuro difuminado basta y no
   añade ningún color nuevo. */
/* Se oscurece con backdrop-filter y no pintándole un fondo de color:
   .btn mete su lámina verde en un ::before que va por detrás, y un fondo
   translúcido encima le ensuciaría el verde al pasar. */
.hero__actions .btn--light{ border-color:rgba(241,237,229,.5); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero__actions .btn--light{
    -webkit-backdrop-filter:blur(8px) brightness(.6);
    backdrop-filter:blur(8px) brightness(.6);
  }
}
@media (hover:hover){
  .hero__actions .btn--light:hover{ border-color:var(--green); }
}

/* Las tres garantías. Filete vertical entre ellas y el punto verde
   delante: el mismo verde del rótulo de la calle, en la dosis mínima. */
.hero__marks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px clamp(18px,2.6vw,34px);
  margin-top:clamp(20px,2.6vw,30px);
}
.hero__marks li{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 0;
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(241,237,229,.82);
  white-space:nowrap;
}
.hero__marks li::before{
  content:"";
  width:5px; height:5px;
  background:var(--green);
  /* Cuadrado, como todo lo demás: aquí no se redondea nada. */
  flex:0 0 auto;
}
.hero__marks li + li::after{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(18px,2.6vw,34px) / 2);
  top:15%; bottom:15%;
  width:1px;
  background:rgba(241,237,229,.24);
}

/* Reclamo de bajar. Es un enlace de verdad al primer bloque, así que
   también sirve con el teclado, y el filete cae en bucle para señalar
   hacia dónde. Se esconde en pantallas bajas, donde no cabe. */
.hero__scroll{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(34px,4.5vw,58px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(241,237,229,.6);
  transition:color .4s var(--ease);
}
.hero__scroll-txt{ writing-mode:vertical-rl; }
.hero__scroll-line{
  position:relative;
  width:1px; height:54px;
  background:rgba(241,237,229,.22);
  overflow:hidden;
}
.hero__scroll-line::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:40%;
  background:var(--green);
}
@media (prefers-reduced-motion: no-preference){
  .hero__scroll-line::after{ animation:heroDrop 2.4s var(--ease) infinite; }
}
@keyframes heroDrop{
  0%  { transform:translateY(-100%); }
  60% { transform:translateY(250%); }
  100%{ transform:translateY(250%); }
}
@media (hover:hover){
  .hero__scroll:hover{ color:var(--on-dark); }
}

@media (max-width:900px){
  .hero__scroll{ display:none; }
}
@media (max-width:600px){
  .hero{ justify-content:flex-end; }
  .hero__row{ flex-direction:column; align-items:stretch; gap:22px; }
  .hero__lead{ max-width:none; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  /* A pantalla estrecha los botones van a ancho completo y centrados:
     es el gesto que se espera con el pulgar, y de paso el texto de
     dentro deja de quedar pegado al borde izquierdo. */
  .hero__actions .btn{ justify-content:center; }
  .hero__marks{ gap:8px 16px; }
  .hero__marks li{ font-size:9.5px; letter-spacing:.12em; }
  .hero__marks li + li::after{ left:-8px; }
}

/* Portada corta para páginas interiores: una sola columna, sin repartir
   título y texto en dos lados. Compacta para que no quede como un
   bloque vacío antes de que empiece el contenido de verdad. */
/* Sin línea de cierre: el aire de abajo ya separa la portada del
   contenido, y la raya quedaba cortando justo encima de los filtros. */
.head{
  padding:calc(var(--nav-h) + clamp(30px,5vw,60px)) var(--gutter) clamp(26px,3.4vw,42px);
}
.head .tag{ margin-bottom:clamp(12px,1.6vw,18px); }
.head .tag a:hover{ text-decoration:underline; }
.head__title{ font-size:clamp(2.2rem,5.4vw,4.9rem); }
.head__lead{ margin-top:clamp(16px,2.2vw,26px); max-width:var(--measure); font-size:1rem; line-height:1.7; color:var(--ink-soft); }
/* ---------- 7. Secciones ---------- */
/* Cada sección abre con una raya fina de margen a margen que empieza en
   verde. Es lo único que ocupa el ancho completo: da estructura a la
   página y hace que el texto se lea como una columna puesta a propósito,
   no como algo que se quedó arrinconado a la izquierda. */
.say{ padding:var(--pad-y) var(--gutter); }
.say::before{
  content:"";
  display:block;
  height:1px;
  margin-bottom:clamp(26px,3.4vw,44px);
  background:linear-gradient(to right, var(--green) 0 76px, var(--line-soft) 76px);
}
.say--dark::before{
  background:linear-gradient(to right, var(--green) 0 76px, rgba(241,237,229,.16) 76px);
}
/* El filete se TRAZA de izquierda a derecha al entrar la sección, en vez
   de estar puesto de antemano. Empieza por el tramo verde, así que el ojo
   ve salir primero el color del rótulo de la calle y detrás la raya fina.

   Es el movimiento principal de la página, y va aquí a propósito: en una
   tienda de ropa la que no se tiene que mover es la prenda. Que respire
   la estructura, no el producto.

   1.1s es largo para una transición de interfaz, pero esto no responde a
   un clic: es ambiente, y a menos de un segundo el trazo se lee como un
   parpadeo en vez de como una línea que se tira. */
html.js .say[data-rule]::before,
html.js .nuevo[data-rule]::before{
  transform:scaleX(0);
  transform-origin:left center;
}
html.js .say[data-rule].is-in::before,
html.js .nuevo[data-rule].is-in::before{
  transform:scaleX(1);
  transition:transform 1.1s var(--ease);
}
.say .tag{ margin-bottom:clamp(20px,3vw,38px); }
.say__title{ font-size:clamp(2rem,4.6vw,3.9rem); }
.say__cols{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.2vw,24px);
  max-width:var(--measure);
  margin-top:clamp(20px,3vw,34px);
}
/* Texto de sección un punto mayor que el corriente: con el titular ya
   más contenido, párrafo y título ocupan casi el mismo ancho y el bloque
   deja de leerse como una nota suelta al margen de un titular enorme. */
.say__cols .body-txt{ max-width:none; font-size:1.02rem; line-height:1.78; }

.say__title--spaced{ margin-bottom:clamp(30px,4vw,50px); }
.say__cta{ margin:clamp(30px,4vw,50px) 0 0; }

/* ---------- 7c. Opiniones de Google ----------
   El widget lo pinta una empresa de fuera y su diseño no se puede tocar
   casi nada: lo que SÍ controlo es el marco, así que el bloque se compone
   igual que el resto (filete arriba, rótulo, titular) y el widget queda
   dentro de la misma columna de lectura que todo lo demás.

   El contenedor va vacío y sin alto mientras no haya cuenta configurada:
   así no deja un agujero en la página. El alto lo reserva main.js justo
   antes de pedir el guion, para que al llegar no empuje hacia abajo lo
   que el visitante esté leyendo. */
/* OJO con esto: se esconde el contenedor SOLO mientras no haya cuenta
   configurada (data-resenas-src vacío), no por estar vacío a secas.
   Un display:none no se renderiza, y lo que no se renderiza no entra
   nunca en el campo de visión: si se escondiera también el contenedor ya
   configurado, el observador que carga el widget no se dispararía jamás
   y las reseñas no aparecerían nunca. Pasó, y no daba ningún error. */
.resenas__widget[data-resenas-src=""]:empty{ display:none; }
.resenas__widget{
  max-width:var(--measure);
  margin-top:clamp(4px,1vw,10px);
}
/* El widget suele traer su propio tipo y su propio blanco. No se puede
   rediseñar desde aquí —va en su propio árbol—, pero al menos se le pide
   que no se salga de la columna ni desborde a lo ancho en el móvil. */
.resenas__widget img,
.resenas__widget iframe{ max-width:100%; }
.resenas__widget > *{ max-width:100%; }

/* La columna de lectura se queda corta para una fila de tarjetas de
   reseña: a partir de tableta se le deja el ancho completo del bloque. */
@media (min-width:900px){
  .resenas__widget{ max-width:none; }
}


/* ---------- 7b. Portada: prendas ----------
   Sustituye a los dos bloques de texto que había. La cabecera reparte el
   titular a la izquierda y el botón a la derecha, alineados por la base;
   debajo, la rejilla de siempre. */
.nuevo{ padding:var(--pad-y) var(--gutter); }
.nuevo::before{
  content:"";
  display:block;
  height:1px;
  margin-bottom:clamp(26px,3.4vw,44px);
  background:linear-gradient(to right, var(--green) 0 76px, var(--line-soft) 76px);
}
.nuevo__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px,4vw,50px);
  margin-bottom:clamp(30px,4vw,52px);
}
.nuevo .tag{ margin-bottom:clamp(14px,2vw,20px); }
.nuevo__title{ font-size:clamp(2rem,4.6vw,3.9rem); }
.nuevo__cta{ flex:none; }
/* ".nuevo .cards" y no ".nuevo__cards": la regla base de .cards se
   define más abajo y, con la misma especificidad, ganaba ella y dejaba
   la portada en tres columnas. */
.nuevo .cards{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:1080px){
  .nuevo .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  /* El botón baja debajo del titular: al lado se quedaba sin sitio y
     partía el texto en dos líneas raras. */
  .nuevo__head{ flex-direction:column; align-items:flex-start; gap:clamp(18px,4vw,26px); }
  .nuevo .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  /* Solo en el teléfono las prendas dejan de ser rejilla y pasan a una
     fila que se arrastra de lado. En dos columnas salían pequeñas y
     obligaban a un scroll largo; así se ven grandes y se pasan con el
     dedo. En tableta no hace falta: ahí dos columnas se ven de sobra, y
     un carrusel escondería la mitad del contenido sin ninguna necesidad.
     Los márgenes negativos sacan la fila hasta el borde de la pantalla,
     para que se vea que hay más a la derecha, pero el relleno mantiene
     la primera alineada con el titular. */
  .nuevo .cards{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-inline:var(--gutter);
    /* Sin esto el enganche cuenta desde el borde del contenedor y no desde
       el relleno, así que al cargar se desplazaba solo unos píxeles y la
       primera tarjeta salía cortada por la izquierda. */
    scroll-padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--green) var(--paper-lo);
  }
  .nuevo .card{ flex:0 0 64vw; scroll-snap-align:start; }
}

/* Bloque invertido */
.say--dark{ background:#211f1b; color:var(--on-dark); }
.say--dark .tag{ color:var(--on-dark-mute); }
.say--dark .body-txt{ color:rgba(241,237,229,.66); }

/* Bloque partido: foto + datos */
.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-height:min(80vh,720px);
  border-top:1px solid var(--line-soft);
}
.split__media{ position:relative; overflow:hidden; background:var(--paper-lo); }
/* Variante para cuando la foto tiene que verse ENTERA. El bloque normal
   recorta con object-fit:cover para llenar su mitad de pantalla; aqui la
   celda adopta la forma de la foto (cuadrada) y asi no se pierde nada.
   Hay que quitarle el alto minimo al .split, o volveria a estirarla. */
.split--entera{ min-height:0; align-items:stretch; }
.split--entera .split__media{ aspect-ratio:1; }
.split--entera .split__media img{ position:static; object-fit:contain; }
/* Antes aquí hacía falta además anular el transform de la foto: nacía con
   scale(1.08) para la animación de entrada y ese 8% se perdía por los
   cuatro lados, así que la foto se veía recortada aunque el hueco tuviera
   su misma forma. Esa animación ya no existe y no hay nada que anular. */
.split__media img{ position:absolute; inset:0; }
.split__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(18px,2.4vw,30px);
  padding:var(--pad-y) var(--pad-x);
  align-items:flex-start;
}
.split__body .display{ font-size:clamp(2rem,4.6vw,3.6rem); }
.split__addr{ font-size:.98rem; line-height:1.75; color:var(--ink-soft); }
.split__actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split__media{ aspect-ratio:4/3; }
  .split__media img{ position:static; }
  /* En el movil tambien entera: la forma la sigue marcando la foto. */
  .split--entera .split__media{ aspect-ratio:1; }
}

/* ---------- 8. Tarjetas (marcas, prendas) ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,44px) clamp(14px,2vw,26px);
}
/* Rejilla que ocupa la página entera (ficha de marca o de categoría). */
/* Va siempre justo debajo de una portada .head, que ya trae su propio
   aire abajo: si arriba pusiera --pad-y entero se sumarían los dos y
   quedaría un hueco enorme antes de la primera prenda. */
.cards--page{ padding:clamp(22px,3vw,40px) var(--gutter) var(--pad-y); }
.card{ display:flex; flex-direction:column; gap:14px; }

/* La ficha entra subiendo un poco, y las de una misma fila entran
   ESCALONADAS: main.js le pone a cada una un --i de 0 a 3 que se traduce
   en un retardo de 80ms. Una fila que aparece de golpe es un parpadeo;
   escalonada se lee como una mano dejando prendas en el mostrador.

   El --i cicla de 0 a 3 en vez de crecer sin parar: con 19 prendas la
   última habría esperado un segundo y medio. Al ciclar, el escalón se
   reinicia en cada fila sea cual sea el número de columnas.

   Se mueve la FICHA entera, no la fotografía: la foto no se amplía ni se
   recorta, solo viaja con su tarjeta. */
html.js [data-card]{
  opacity:0;
  transform:translateY(18px);
}
html.js [data-card].is-in{
  opacity:1;
  transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:calc(var(--i, 0) * 80ms);
}
/* Sin recuadro: la prenda va recortada y se apoya directamente en el
   papel de la página. El hueco sigue midiendo 2/3 para que la rejilla
   mantenga su ritmo, pero no se pinta nada detrás. */
.card .shot{ aspect-ratio:2/3; background:transparent; }

/* ---- Las fotos de una prenda, en tira deslizable ----
   Están todas puestas una al lado de otra y se pasan arrastrando: la foto
   sigue al dedo y se engancha al soltar, como la galería de un teléfono.
   Lo hace el navegador con scroll-snap, sin JavaScript de por medio, así
   que va suave porque lo mueve el compositor.

   El carril que se desplaza es .shot__viewport y NO .shot, a propósito:
   el contador "1 / 3" va colocado en absoluto dentro de .shot, y si el
   que se desplazara fuera .shot, el contador se iría con las fotos en vez
   de quedarse quieto en su esquina. */
.shot__viewport{
  position:absolute;
  inset:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  /* La barra de desplazamiento sobra: aquí se arrastra, y una barra
     cruzando la prenda ensucia la rejilla entera. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.shot__viewport::-webkit-scrollbar{ display:none; }
.shot__track{ display:flex; height:100%; }
.shot__track img{
  flex:0 0 100%;
  width:100%; height:100%;
  object-fit:cover;
  scroll-snap-align:center;
  /* Sin esto, arrastrar con el ratón saca la miniatura fantasma del
     arrastre nativo del navegador. */
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}
.card__name{ transition:color .35s ease; }
.card:hover .card__name{ color:var(--green); }

/* flex:1 empuja el botón al fondo de la tarjeta: si un nombre ocupa dos
   líneas y el de al lado una, los "Añadir" de una misma fila siguen
   alineados en vez de quedar a alturas distintas. */
.card__meta{ position:relative; display:flex; flex-direction:column; gap:3px; flex:1; }
/* Al pasar por encima de una prenda se traza un hilo verde bajo sus
   datos. Sustituye al salto de 4px que daba la ficha antes: un elemento
   que se despega del papel es un gesto de interfaz, y una raya que se
   tira debajo de un nombre es un gesto de catálogo. Solo en ratón: en
   pantalla táctil no existe "pasar por encima". */
.card__meta::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-7px;
  height:1px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
@media (hover:hover){
  .card:hover .card__meta::after{ transform:scaleX(1); }
}
.card__n{ font-size:10.5px; letter-spacing:.15em; color:var(--green); font-variant-numeric:tabular-nums; }
.card__brand{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.card__name{ font-family:var(--display); font-size:clamp(1.1rem,1.7vw,1.4rem); letter-spacing:-.035em; line-height:1.15; }
.card__spec{ font-size:.85rem; color:var(--ink-mute); max-width:32ch; line-height:1.55; }
.card > .btn{ margin-top:4px; align-self:flex-start; }
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.cards__empty{
  /* El aviso vive DENTRO de la rejilla, asi que sin esto ocupa una sola
     celda: en el telefono, con dos columnas, se quedaba en una tira de
     cien pixeles y "Ninguna prenda coincide con esos filtros" bajaba
     partido en cinco lineas de dos palabras. Ocupa el ancho entero. */
  grid-column:1 / -1;
  margin:0;
  padding:clamp(40px,6vw,80px) 0;
  font-size:1rem;
  color:var(--ink-mute);
  border-top:1px solid transparent;
  border-image:linear-gradient(to right, var(--green) 0 76px, var(--line-soft) 76px) 1;
}

/* ---------- 8c. Colección: filtros + rejilla ---------- */
.shop{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:clamp(30px,4vw,56px);
  padding:0 var(--gutter) var(--pad-y);
  align-items:start;
}
.shop .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,40px) clamp(14px,2vw,22px); }

/* El botón de filtros del móvil. En escritorio no existe: el resumen se
   esconde y las casillas se enseñan aunque el <details> esté cerrado.

   Va como un botón de verdad —recuadro, 48px de alto, tinta negra— y no
   como el renglón de texto gris de 11px que era antes. Es el único modo
   de filtrar cuando se entra por el teléfono, y un rótulo del tamaño de
   un pie de foto no se lee como algo que se pueda pulsar. */
.filtros > summary{
  display:none;
  cursor:pointer;
  list-style:none;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--line);
  background:var(--paper-lo);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.filtros > summary::-webkit-details-marker{ display:none; }
/* El signo, en un tamaño que se vea: a 11px como el rótulo quedaba como
   una errata en vez de como el indicador de abrir y cerrar. */
.filtros > summary::after{
  content:"+";
  font-size:17px;
  line-height:1;
  color:var(--green);
}
.filtros[open] > summary{ border-color:var(--green); }
.filtros[open] > summary::after{ content:"−"; }
@media (max-width:900px){
  .filtros > summary{ display:flex; }
  .filtros[open] > .shop__filters{ padding-top:clamp(18px,3vw,24px); }
}

.shop__filters{
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  display:flex;
  flex-direction:column;
  gap:clamp(22px,2.6vw,28px);
}
.filters__group{ display:flex; flex-direction:column; gap:7px; }
/* display:flex gana a [hidden] si no se dice lo contrario: un grupo de
   filtro sin opciones (una sola marca, por ejemplo) seguiría viéndose. */
.filters__group[hidden]{ display:none; }
.shop--sin-filtros{ grid-template-columns:minmax(0,1fr); }
.shop--sin-filtros .shop__filters{ display:none; }
.filters__group .tag{ margin-bottom:6px; }
.filters__group label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:var(--ink-soft);
  cursor:pointer;
}
.filters__group input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  width:15px; height:15px;
  border:1px solid var(--line);
  background:var(--paper);
  position:relative;
  cursor:pointer;
}
.filters__group input[type="checkbox"]:checked{ background:var(--green); border-color:var(--green); }
.filters__group input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:4px; top:1px;
  width:4px; height:8px;
  border:solid var(--paper);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.filters__group input[type="checkbox"]:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
@media (max-width:900px){
  .shop{ grid-template-columns:1fr; }
  .shop__filters{ position:static; flex-direction:row; flex-wrap:wrap; gap:clamp(24px,5vw,48px); }
}
/* Cuántas prendas por fila en Colección. No es el mismo reparto que en
   una página suelta: aquí la barra de filtros se come 200px, así que la
   rejilla tiene menos sitio del que parece por el ancho de la ventana.
     > 1080  barra + 3 prendas
     900-1080 barra + 2  (con 3 salían a 163px, del tamaño de un sello)
     600-900  sin barra, ancho completo: vuelven a caber 3
     < 600    teléfono: 2 */
@media (max-width:1080px){ .shop .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){  .shop .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px){  .shop .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* El contador "1 / 3". Ya NO es un botón: es un rótulo que avisa de que
   la prenda tiene más fotos. Dejó de hacer falta que abriera nada cuando
   la prenda entera pasó a abrirse al tocarla, y un botón metido dentro de
   algo pulsable es una trampa para quien navega con teclado. */
.card__gallery{
  position:absolute;
  right:10px; bottom:10px;
  pointer-events:none;
  padding:6px 10px;
  background:rgba(17,16,15,.72);
  color:var(--paper);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* Aquí vivían las flechas del pase de fotos. Se han quitado: tapaban la
   prenda —en el móvil, con dos fichas por fila, cada una mide unos 168px
   y dos botones se comían un tercio de la foto— y además solo aparecían
   al pasar el ratón por encima, que en un teléfono no existe. Ahora las
   fotos se pasan ARRASTRANDO sobre la imagen, con el dedo o con el ratón.

   Lo que avisa de que hay más de una foto es el contador "1 / 3" de la
   esquina, que además abre la galería a pantalla completa. */

/* El puntero de arrastre se ha quitado: la tira la desplaza el navegador,
   no un arrastre nuestro, y con el ratón (sin panel táctil) no se puede
   arrastrar un carril nativo. Decir "agárrame" para algo que con el ratón
   no se agarra es mentir. La prenda es pulsable y su puntero es el de
   pulsar; para pasar fotos con el ratón está la ficha grande, que lleva
   flechas. */

/* La prenda entera se abre al tocarla, así que se comporta como un botón
   y lo dice el puntero. Sobre la foto, si tiene varias, manda la mano de
   arrastrar: ahí el gesto es pasar fotos. */
.card{ cursor:pointer; }
.card:focus-visible{ outline:2px solid var(--green); outline-offset:4px; }
/* El botón de apartar recupera su propio puntero: no abre la ficha. */
.card .add-to-cart{ cursor:pointer; }

/* Solo para lectores de pantalla: sirve para no saltar de h1 a h3. */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- 8b. Ficha de prenda ----------
   Antes esto era solo la foto a pantalla completa sobre un fondo negro:
   no decía de qué prenda era ni dejaba hacer nada con ella, había que
   cerrarla y volver a la rejilla. Ahora es la prenda entera: foto grande
   a un lado y sus datos al otro, con el botón de apartar dentro.

   Dos columnas en escritorio y apilada en el móvil, con la foto arriba,
   que es a lo que se viene. */
.ficha{
  border:1px solid var(--line);
  padding:0;
  background:var(--paper);
  color:var(--ink);
  width:min(1000px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  overscroll-behavior:contain;
}
.ficha::backdrop{ background:rgba(17,16,15,.86); }
.ficha[open]{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}

.ficha__media{
  position:relative;
  background:var(--shot-bg);
  display:grid;
  place-items:center;
  min-height:min(74dvh, 620px);
}
.ficha__img{
  width:auto; height:auto;
  max-width:100%;
  max-height:min(74dvh, 620px);
  object-fit:contain;
}
/* Las flechas aquí SÍ caben: la foto ocupa media pantalla, no una ficha
   de 168px. Van sobre la imagen, discretas, y desaparecen si la prenda
   tiene una sola foto. */
.ficha__nav{
  all:unset;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:44px; height:52px;
  cursor:pointer;
  background:rgba(17,16,15,.5);
  color:var(--paper);
  font-size:22px;
  line-height:1;
  transition:background-color .3s ease;
}
.ficha__nav--prev{ left:0; }
.ficha__nav--next{ right:0; }
.ficha__nav:hover,
.ficha__nav:active{ background:var(--green); }
.ficha__nav[hidden]{ display:none; }
.ficha__count{
  position:absolute;
  right:12px; bottom:12px;
  background:rgba(17,16,15,.72);
  color:var(--paper);
  padding:6px 10px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.ficha__count[hidden]{ display:none; }

.ficha__info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:clamp(26px,3.4vw,44px);
}
.ficha__brand{
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
}
.ficha__brand:empty{ display:none; }
.ficha__name{
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.3rem);
  letter-spacing:-.04em;
  line-height:1.1;
}
.ficha__spec{ font-size:.98rem; line-height:1.65; color:var(--ink-soft); }
.ficha__add{ margin-top:clamp(10px,1.6vw,18px); }
/* La nota que recuerda que esto no es una tienda online. Va al final y en
   pequeño: es una aclaración, no un argumento de venta. */
.ficha__nota{
  margin-top:auto;
  padding-top:18px;
  font-size:.84rem;
  line-height:1.6;
  color:var(--ink-mute);
  border-top:1px solid var(--line-soft);
}

.ficha__close{
  all:unset;
  position:absolute;
  top:10px; right:10px;
  z-index:3;
  cursor:pointer;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:20px;
  line-height:1;
}
.ficha__close:hover,
.ficha__close:active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- 9. Proceso ---------- */
.steps{ display:flex; flex-direction:column; }
.steps li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(16px,3vw,48px);
  padding:clamp(24px,3.4vw,42px) 0;
  border-top:1px solid var(--line-soft);
}
.steps li:last-child{ border-bottom:1px solid var(--line-soft); }
.steps__n{ font-family:var(--display); font-size:1.15rem; color:var(--green); font-variant-numeric:tabular-nums; }
.steps h3{ font-family:var(--display); font-size:clamp(1.3rem,2.3vw,1.85rem); letter-spacing:-.04em; margin-bottom:9px; }
.say--dark .steps li{ border-top-color:rgba(241,237,229,.18); }
.say--dark .steps li:last-child{ border-bottom-color:rgba(241,237,229,.18); }
.say--dark .steps__n{ color:var(--on-dark-mute); }

/* ---------- 10. Reserva ---------- */
.reserva{
  border:none;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  width:min(440px, calc(100vw - 40px));
  max-height:calc(100vh - 40px);
  overflow:auto;
}
.reserva::backdrop{ background:rgba(17,16,15,.62); }
.reserva[open] form{ display:flex; flex-direction:column; gap:14px; padding:clamp(26px,4vw,40px); position:relative; }
.reserva__close{
  all:unset;
  position:absolute;
  top:20px; right:20px;
  cursor:pointer;
  width:30px; height:30px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  font-size:18px;
  line-height:1;
}
.reserva__title{ font-size:clamp(1.5rem,4vw,2rem); margin-top:6px; }

.cart__list{ display:flex; flex-direction:column; gap:0; max-height:220px; overflow-y:auto; }
.cart__item{
  display:flex;
  /* Arriba, no centrado: el nombre puede ocupar dos o tres líneas y
     "Quitar" se quedaba flotando a media altura, sin alinearse con nada. */
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
/* min-width:0 deja que el nombre largo parta de línea en vez de
   ensanchar la fila y empujar el botón fuera del diálogo. */
.cart__item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cart__item-name{ font-size:.92rem; color:var(--ink); }
.cart__item-brand{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.cart__item-remove{
  all:unset;
  cursor:pointer;
  flex:none;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
  /* Zona de dedo: el texto solo mide 11px de alto y con el pulgar era
     imposible acertar sin darle a la prenda de al lado. */
  padding:6px 0 6px 12px;
  margin:-6px 0;
}
.cart__item-remove:hover,
.cart__item-remove:active{ color:#8a2c2c; }
.cart__empty{ font-size:.9rem; color:var(--ink-mute); }
#cartFields{ display:flex; flex-direction:column; gap:14px; }

/* Añadida = confirmada: en verde, que es el color de "hecho" en la web. */
.add-to-cart.is-added{ background:var(--green); border-color:var(--green); color:var(--paper); }

.reserva label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.reserva input,
.reserva textarea{
  font:inherit;
  font-size:.95rem;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:8px 0;
  resize:vertical;
}
.reserva input:focus-visible,
.reserva textarea:focus-visible{ outline:none; border-bottom-color:var(--green); }
.reserva__submit{ margin-top:6px; justify-content:center; }
.reserva__submit:disabled{ opacity:.5; cursor:default; }
.reserva__status{ font-size:.85rem; min-height:1.2em; }
.reserva__status.is-ok{ color:var(--green); }
.reserva__status.is-error{ color:#8a2c2c; }

/* La trampa para robots del formulario de reserva. Tiene que existir en la
   página y ser rellenable, pero no verse ni poder recibir el foco: un robot
   rellena todo lo que encuentra, una persona no puede tocarla. Si llega con
   algo escrito, FormSubmit descarta el envío.

   No vale display:none ni visibility:hidden: los robots que miran los
   estilos se saltan lo que está oculto así. Por eso se saca de la pantalla
   en vez de esconderse. */
.reserva__trampa{
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
/* El teléfono del mensaje de error, subrayado para que se vea que se puede
   pulsar: ahí el cliente ya ha tenido un fallo y no se le puede hacer
   adivinar que eso es un enlace. */
.reserva__status a{ color:inherit; text-decoration:underline; }

.ticker{ overflow:hidden; padding:clamp(22px,3vw,40px) 0; border-block:1px solid var(--line-soft); }
.ticker__track{ display:flex; width:max-content; will-change:transform; }
.ticker__set{
  display:flex;
  align-items:center;
  gap:26px;
  padding-right:26px;
  white-space:nowrap;
  font-family:var(--display);
  font-size:clamp(1.4rem,3.4vw,2.8rem);
  letter-spacing:-.045em;
}
.ticker__set i{ font-style:normal; color:var(--green); }

/* ---------- 12. Pie ----------
   Antes llevaba dos rayas horizontales con 80px de vacío entre medias.
   Se queda una sola, con el mismo arranque verde que las secciones. */
.foot{ padding:clamp(30px,4vw,48px) var(--gutter) clamp(26px,3vw,34px); }
/* Firma del pie: el logotipo grande cerrando la pagina, justo encima del
   filete que ya separaba los enlaces del copyright. Es el unico sitio
   donde la marca sale a tamano de verse, y cierra la pagina con la misma
   cara con la que empieza en la barra. */
.foot__firma{ --logo-h:clamp(56px,8vw,94px); margin-bottom:clamp(22px,3vw,34px); }
.foot__logo{
  display:block;
  width:calc(var(--logo-h) * 1824 / 744);
  height:var(--logo-h);
  background-color:var(--copper);
  -webkit-mask:url(../img/logo-subasta.svg?v=d1bcf3ac) left center / contain no-repeat;
          mask:url(../img/logo-subasta.svg?v=d1bcf3ac) left center / contain no-repeat;
}
.foot__bottom{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px 30px;
  flex-wrap:wrap;
  padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid transparent;
  border-image:linear-gradient(to right, var(--green) 0 76px, var(--line-soft) 76px) 1;
}
.foot__links{ display:flex; gap:clamp(14px,2.4vw,30px); flex-wrap:wrap; }
.foot__links a{
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .35s ease, border-color .35s ease;
}
.foot__links a:hover,
.foot__links a:active{ color:var(--ink); border-bottom-color:var(--green); }

/* ===================================================================
   13. Teléfono
   La mayoría de las visitas entran desde el móvil, así que esto no es
   un parche al final: es la vista principal. Todo lo de arriba ya se
   adapta solo (clamp, grid, --gutter); aquí van las decisiones que
   cambian de verdad cuando la pantalla es estrecha y se toca con el
   dedo en vez de apuntar con el ratón.

   TRES ANCHOS DE CORTE, y solo tres:

     1080px  densidad. Nada se recoloca: solo caben menos prendas por
             fila. Portada 4 -> 3, Colección barra + 3 -> barra + 2.

      900px  TABLETA. Aquí la página cambia de carácter, y lo hace
             ENTERA de una vez: el menú pasa a hamburguesa, el bloque
             de foto + datos se apila, la barra de filtros se pliega en
             un botón y las rejillas se reordenan.

      600px  TELÉFONO. Lo que cambia porque se toca con el dedo y no se
             apunta con el ratón: filtros como etiquetas, prendas de la
             portada en fila deslizable, ventanas a pantalla completa,
             campos de 16px para que iOS no amplíe.

      380px  no es un corte, es un retoque: en un teléfono pequeño el
             logotipo y los botones bajan un punto y ya está.

   Antes había nueve anchos distintos (380, 560, 620, 720, 760, 820,
   880, 900, 920) que se fueron añadiendo de uno en uno según iba
   apareciendo cada problema. El resultado es que entre 760 y 920 la
   página se recolocaba a trozos —el menú por un lado, las fotos por
   otro, los filtros por otro— y en esa franja no se veía terminada en
   ningún ancho. Por eso están juntos: no es orden por el orden, es que
   media docena de reordenaciones seguidas se ven como un fallo.
   =================================================================== */

/* ---- Tableta y móvil ancho ---- */
@media (max-width:900px){
  /* Nada de líneas huérfanas: con pocas palabras por línea, un titular
     de dos líneas puestas a mano puede partirse en cuatro. */
  .display{ letter-spacing:-.045em; }

  /* Los botones NO se estiran: mantienen el tamaño de la versión de
     escritorio, que es parte del aire de la página. Solo se permite que
     bajen de línea si no caben los dos (flex-wrap ya está puesto). */
  .split__actions{ gap:10px; }
}

/* ---- Teléfono ---- */
@media (max-width:600px){
  /* Los filtros pasan de lista vertical a etiquetas en línea: ocupaban
     media pantalla antes de que se viera la primera prenda. */
  .shop__filters{ gap:16px; }
  .filters__group{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
  .filters__group .tag{ width:100%; margin-bottom:0; }
  .filters__group label{
    min-height:40px;
    padding:0 14px;
    border:1px solid var(--line);
    background:var(--paper);
  }
  .filters__group label:has(input:checked){
    border-color:var(--green);
    color:var(--ink);
  }

  /* Dos prendas por fila: la ficha se hace pequeña, así que el texto
     baja de tamaño con ella o se come tres líneas por nombre. */
  .card__name{ font-size:1rem; }
  .card__spec{ font-size:.8rem; }
  .card > .btn{ padding:12px 16px; }


  .foot__links a{ padding-block:8px; }
  .nav__links a{ padding-block:6px; }
}

/* ---- Ventanas emergentes en el móvil ---- */
@media (max-width:600px){
  /* 100vh en el móvil cuenta la barra del navegador, que aparece y
     desaparece al desplazarse: el diálogo se salía por abajo. dvh mide
     lo que de verdad se ve en ese momento. */
  .reserva{
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
  }
  /* La ficha se apila: la foto arriba, que es a lo que se viene, y los
     datos debajo. A dos columnas en un teléfono no cabría ninguna de las
     dos. */
  .ficha{ width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .ficha[open]{ grid-template-columns:minmax(0,1fr); }
  .ficha__media{ min-height:0; }
  .ficha__img{ max-height:52dvh; }
  .ficha__nav{ width:40px; height:58px; }

  /* iOS Safari amplía la página entera al enfocar un campo de menos de
     16px. Con 16px justos no hace zoom y no hay que desactivarlo a la
     fuerza con maximum-scale, que rompe el pellizco para ampliar. */
  .reserva input,
  .reserva textarea{ font-size:16px; padding:10px 0; }
  .reserva label{ gap:8px; }
  .cart__list{ max-height:38dvh; }
}

/* ---- Teléfono pequeño ---- */
@media (max-width:380px){
  .nav__logo{ --logo-h:30px; }
  .nav__sub{ letter-spacing:.26em; }
  .card > .btn{ font-size:9.5px; letter-spacing:.1em; padding:11px 12px; }
  .btn{ padding:13px 18px; }
}

/* ---- Zonas de dedo ----
   Medido en un telefono de 390px: el boton de Reserva de la barra tenia
   18px de alto, el "← Coleccion" de las fichas 12px, y los enlaces del
   pie 34px. Con el pulgar eso no se acierta: 44px es el minimo.

   Se amplia el AREA PULSABLE, no el elemento. Si se le diera alto de
   verdad al boton de Reserva, la barra entera creceria y todo lo que
   arranca por debajo de ella (--nav-h) se descolocaria; y a los enlaces
   del pie se les iria el subrayado a 44px del texto, separado de lo que
   subraya. Con un pseudo-elemento transparente por encima, el dedo tiene
   sus 44px y a la vista no cambia nada. Es el mismo recurso que ya usan
   la pastilla de la galeria y el "Quitar" del carrito. */
.nav__cart,
.nav__logo,
.foot__links a,
.head .tag a{ position:relative; }
.nav__cart::after,
.nav__logo::after,
.foot__links a::after,
.head .tag a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  /* Hasta completar 44px de alto contando desde el centro del elemento. */
  top:50%; height:44px; transform:translateY(-50%);
}
/* La hamburguesa mide 38+2 de borde = 40. Le faltan dos por cada lado. */
.burger{ position:relative; }
.burger::after{ content:""; position:absolute; inset:-3px; }

/* Estos si pueden crecer: van en el flujo normal y nada depende de su
   alto. Las etiquetas de filtro estaban en 40 y el "Anadir" en 43. */
@media (max-width:600px){
  .filters__group label{ min-height:44px; }
  .card > .btn{ padding:14px 16px; }
}

/* En pantalla táctil no existe "pasar por encima": lo que solo se ve al
   hacer hover es, en la práctica, invisible. */
@media (hover:none){
  /* El resaltado azul del móvil al tocar rompe la paleta entera. */
  a,button,label,summary{ -webkit-tap-highlight-color:rgba(46,106,92,.18); }
}

/* ---------- 14. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    /* Los retardos también. Anular solo la duración deja las esperas en
       pie: el horario del menú, que entra con .4s de retardo, seguía
       tardando en aparecer aunque el usuario haya pedido nada de
       movimiento. Con esto sale a la vez que el resto. */
    animation-delay:.01ms !important;
    transition-delay:.01ms !important;
  }
  html.js .mask > [data-line]{ transform:none; }
  html.js [data-rise]{ opacity:1; transform:none; }
  /* Las fichas y los filetes nacen escondidos o encogidos: si alguien pide
     nada de movimiento hay que ENSEÑARLOS, no solo acortarles la
     transición, o se quedarían a medias. */
  html.js [data-card]{ opacity:1; transform:none; }
  html.js .say[data-rule]::before,
  html.js .nuevo[data-rule]::before,
  html.js .say > .tag::before,
  html.js   html.js   html.js .nuevo .tag::before,
  html.js .split__body .tag::before,
  html.js .hero__eyebrow::before{ transform:none; }
}

/* ---------- 15. Legal ---------- */
/* Aviso de cookies. Abajo y a lo ancho, sin tapar la página entera: no es
   un muro, es un aviso. Y los DOS botones son iguales a propósito —mismo
   tamaño, mismo peso, uno al lado del otro—: la guía de la AEPD pide que
   rechazar cueste lo mismo que aceptar, y el truco del botón grande verde
   contra el enlace gris diminuto es justo lo que está prohibido. */
.cookies{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:120;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(14px,2.4vw,32px);
  padding:clamp(16px,2.4vw,24px) var(--gutter);
  background:var(--paper);
  border-top:1px solid var(--line);
  box-shadow:0 -14px 40px rgba(17,16,15,.1);
}
.cookies[hidden]{ display:none; }
.cookies__texto{ flex:1 1 420px; font-size:.86rem; line-height:1.6; color:var(--ink-soft); }
.cookies__titulo{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:6px;
}
.cookies__texto a{ color:var(--green); text-decoration:underline; }
.cookies__botones{ display:flex; gap:10px; flex:0 0 auto; }
.cookies__botones .btn{ flex:1 1 auto; justify-content:center; }
@media (max-width:600px){
  .cookies{ flex-direction:column; align-items:stretch; }
  .cookies__botones .btn{ flex:1 1 0; }
}

/* El botón de "Configurar cookies" del pie: es un botón de verdad porque
   abre algo, pero tiene que leerse como un enlace más de la fila. */
.foot__cookies{
  all:unset;
  cursor:pointer;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-mute);
}
.foot__cookies:hover{ text-decoration:underline; }
.foot__cookies:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* Páginas legales. Texto largo y para leer: una sola columna estrecha,
   interlineado generoso y nada de florituras. */
.legal{ padding:0 var(--gutter) var(--pad-y); max-width:calc(var(--measure) + 12ch); }
.legal h2{
  font-family:var(--display);
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  letter-spacing:-.02em;
  margin:clamp(30px,4vw,44px) 0 12px;
  padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line-soft);
}
.legal h2:first-child{ border-top:none; padding-top:0; margin-top:0; }
.legal p{ margin-bottom:14px; font-size:.95rem; line-height:1.75; color:var(--ink-soft); }
.legal a{ color:var(--green); text-decoration:underline; }
.legal strong{ color:var(--ink); }
.legal__lista{ margin:0 0 16px; padding-left:18px; list-style:disc; }
.legal__lista li{ font-size:.95rem; line-height:1.7; color:var(--ink-soft); margin-bottom:7px; }

/* Los datos identificativos del aviso legal, en dos columnas: es lo que
   la ley obliga a enseñar y tiene que encontrarse de un vistazo. */
.legal__datos{ display:grid; grid-template-columns:auto 1fr; gap:8px 24px; margin:0 0 18px; }
.legal__datos dt{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); padding-top:3px; }
.legal__datos dd{ margin:0; font-size:.95rem; color:var(--ink); }
@media (max-width:600px){
  .legal__datos{ grid-template-columns:1fr; gap:2px 0; }
  .legal__datos dd{ margin-bottom:12px; }
}

.legal__tabla{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.88rem; }
.legal__tabla th{
  text-align:left; padding:9px 10px 9px 0;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); border-bottom:1px solid var(--line);
}
.legal__tabla td{ padding:11px 10px 11px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); line-height:1.6; vertical-align:top; }

.legal__aviso{ border-left:2px solid var(--copper); padding:12px 0 12px 16px; background:var(--paper-lo); }
.legal__fecha{ margin-top:clamp(30px,4vw,44px); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }

/* Los huecos que faltan por rellenar. En rojo y a la vista a propósito:
   una página legal con un dato sin poner NO cumple, y el único modo de que
   no se quede ahí meses es que cante cada vez que alguien la abre. */
.pendiente{
  background:#8a2c2c; color:var(--paper);
  padding:1px 7px; font-size:.82em; letter-spacing:.04em;
}

/* Mensajes de error de los campos de la reserva.

   En rojo Y con el borde del campo marcado: el color solo no vale, hay
   quien no distingue el rojo del gris. Y el texto dice QUÉ hacer, no solo
   que está mal — "revisa que tenga una arroba" sirve, "campo inválido" no.
   El mensaje va debajo del campo y enlazado con aria-describedby, para que
   un lector de pantalla lo lea al llegar ahí. */
.campo__error{
  display:block;
  margin-top:5px;
  font-size:11px;
  letter-spacing:.02em;
  text-transform:none;
  line-height:1.45;
  color:#8a2c2c;
}
.campo__error:empty{ display:none; }
.reserva label.is-mal input{ border-bottom-color:#8a2c2c; }

/* El texto de ejemplo dentro del campo, más flojo que lo que se escribe:
   tiene que leerse como una pista, no como algo ya rellenado. */
.reserva input::placeholder{ color:var(--ink-mute); opacity:.55; }