/* ============================================================
   Nuestro Enlace · sistema de diseño base
   Extraído de la web original (PROYECTO.md §10) y reescrito.
   Esto NO cambia entre maquetas. Lo que cambia va en mN-*.css
   ============================================================ */

:root{
  /* --- los 8 tokens del sistema, más el de error que faltaba --- */
  --blanco:#FFFFFF;
  --nieve:#F7F6F4;
  --tinta:#14130F;
  --gris:#45433E;
  --gris-cl:#67645E;
  --linea:#D8D5CE;
  --acento:#5E6C4E;
  --acento-d:#46523A;
  --error:#9B3A2E;           /* en la web original era un #9B3A2E suelto */

  /* --- lo que el tema puede cambiar --- */
  --fondo:var(--blanco);     /* la maqueta 4 lo rompe a propósito */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --max:1000px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--fondo);
  color:var(--gris);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Para que el arte pueda colgarse del FINAL DEL DOCUMENTO y no del
     borde de la ventana. Sin un ancestro posicionado, un `bottom:0`
     absoluto se resuelve contra el bloque inicial —el alto de la
     ventana— y la banda acababa a media página. Ver m-clasica.css. */
  position:relative;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;          /* nunca bold: es la firma del sistema */
  line-height:1.14;
  color:var(--tinta);
}

a{color:inherit}

/* ---------- texto pequeño: siempre mayúsculas y tracking ---------- */

.eyebrow{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gris-cl);
}

/* ---------- retícula ---------- */

section{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(2.2rem,5.5vw,3.6rem) clamp(1.3rem,5vw,2rem);
}
section.estrecha{max-width:700px}

.sec-head{text-align:center;margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.sec-head h2{font-size:clamp(1.8rem,5.5vw,2.5rem);margin-top:.35rem}
.sec-head p{max-width:560px;margin:.7rem auto 0;font-size:.98rem}

/* ---------- el filete de 1px, en sus tres mecánicas ---------- */

/* a) retícula sin filetes dobles: el contenedor pinta arriba e izquierda,
      cada celda pinta derecha y abajo. Nunca se suman 2px. */
.tarjetas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linea);
  border-left:1px solid var(--linea);
}
/* La retícula es de 3, pero la sección no siempre trae 3. Con 2 o 1, el
   filete del contenedor seguía cruzando la columna vacía y quedaba
   colgando en el aire. Se cuentan las celdas y se ajusta.

   VAN DENTRO DE UNA MEDIA QUERY A PROPÓSITO. Sueltas, `:has()` toma la
   especificidad de su argumento más específico, así que
   `.tarjetas:has(>:last-child:nth-child(2))` pesa (0,3,0) y le ganaba a
   `.tarjetas{grid-template-columns:1fr}` (0,1,0) del bloque de 900 px:
   una sección de dos tarjetas —el autobús con parada, o una agenda a la
   que le han borrado una— se quedaba en DOS COLUMNAS de 170 px en un
   móvil de 390. Las medias no suman especificidad; limitar el alcance
   sí resuelve. */
@media (min-width:901px){
  .tarjetas:has(>:last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
  .tarjetas:has(>:last-child:nth-child(1)){grid-template-columns:1fr}
}
/* Sin ninguna tarjeta no hay retícula que pintar: el filete de arriba y
   el de la izquierda seguían dibujándose sobre una caja de 1 px y la
   sección se leía como «un encabezado y un hueco debajo» (pasaba en
   «Cómo ir y volver» sin parada y en la ceremonia sin lugar). Es el
   mismo arreglo que ya llevaba `.fichas:has(.ficha)`. */
.tarjetas:not(:has(.tarjeta)){display:none}
.tarjeta{
  border-right:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding:2rem 1.4rem 1.9rem;
  text-align:center;
}
/* Estas cuatro no llevan el contenedor en el selector a propósito: la
   plantilla del clima usa .k y .sub dentro de .ch, y hay .pie sueltos
   dentro de <section>. Escopadas a .tarjeta y a footer solo funcionaban
   en un sitio. Quien necesite otra medida la pisa con un selector más
   específico (ver .ch .k en secciones.css). */
.k{
  display:block;
  font-size:.69rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gris-cl);
  margin-bottom:.5rem;
}
.v{
  font-family:var(--serif);
  font-size:clamp(1.4rem,4vw,1.75rem);
  line-height:1.25;
  color:var(--tinta);
}
.sub{display:block;font-size:.88rem;color:var(--gris-cl);margin-top:.4rem}

/* b) separador entre hermanos: solo se pinta si hay algo delante */
.bloque{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:1.2rem;
  padding:1.5rem 0;
  max-width:620px;
  margin:0 auto;
}
.bloque+.bloque{border-top:1px solid var(--linea)}
.bloque h3{font-size:1.45rem;margin-bottom:.3rem}
.bloque p{font-size:.96rem}

.ideas{list-style:none;max-width:620px;margin:0 auto}
.ideas li{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--tinta);
  padding:.5rem 0;
}
.ideas li+li{border-top:1px solid var(--linea)}

/* c) filete izquierdo de 2px en acento = aviso o destacado */
.nota,.clima{
  border-left:2px solid var(--acento);
  background:var(--nieve);
  padding:1.2rem 1.4rem;
  max-width:620px;
  margin:1.6rem auto 0;
  font-size:.95rem;
}

/* ---------- iconos de línea ---------- */

.ic{
  width:34px;height:34px;
  fill:none;
  stroke:var(--acento);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- dress code ---------- */

.tags{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:1rem}
.tag{
  border:1px solid var(--linea);
  border-radius:100px;        /* una de las 3 excepciones al radio 0 */
  padding:.3rem .9rem;
  font-size:.75rem;
  white-space:nowrap;
}
.tag.no{color:var(--gris-cl);text-decoration:line-through}

.duo{display:grid;grid-template-columns:repeat(2,1fr);max-width:620px;margin:1.6rem auto 0}
.duo>div{padding:1.2rem}
.duo>div+div{border-left:1px solid var(--linea)}
.duo h4{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris-cl);font-weight:500;margin-bottom:.6rem;text-align:center;
}

/* ---------- botón ---------- */

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.6rem;
  border:1px solid var(--tinta);
  background:var(--tinta);
  color:var(--blanco);
  font-family:var(--sans);
  font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.btn:hover{background:var(--acento-d);border-color:var(--acento-d)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:17px;height:17px;stroke:currentColor}

.btn.ghost{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn.ghost:hover{background:var(--nieve);border-color:var(--tinta)}

/* Un botón deshabilitado tiene que PARECERLO. «Bloquear regalo» se
   deshabilita desde el JS y se veía negro y clicable.

   Se hacía con `opacity:.32`, y la opacidad apaga el fondo y la letra a
   la vez: blanco sobre tinta al 32 % daba 2,89:1 medido, o sea que el
   botón principal de la página —el que dice lo que va a pasar cuando se
   pueda pulsar— no se leía en ninguna de las cuatro maquetas. Se
   apaga con colores, no con opacidad: caja de nieve, filete de línea y
   letra en gris claro, que son 5,1:1. Parece inactivo y se lee. */
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--nieve);
  border-color:var(--linea);
  color:var(--gris-cl);
  cursor:not-allowed;
}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{
  background:var(--nieve);border-color:var(--linea);
}

/* ---------- regalos ---------- */

.regalo{
  display:grid;
  grid-template-columns:96px 1fr 200px;
  grid-template-areas:"foto info stepper";
  gap:1.2rem;
  align-items:center;
  padding:1.2rem 0;
}
.regalo+.regalo{border-top:1px solid var(--linea)}
.regalo .foto{grid-area:foto;width:96px;height:96px;background:var(--nieve);border:1px solid var(--linea)}
.regalo .info{grid-area:info}
.regalo h3{font-size:1.3rem}
.regalo .destino{
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);display:block;margin-bottom:.25rem;
}
.regalo p{font-size:.92rem;margin-bottom:.6rem}

.barra{height:3px;background:var(--linea);overflow:hidden}
.barra span{display:block;height:100%;background:var(--acento)}
.progreso{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.8rem;color:var(--gris-cl);margin-top:.4rem;
}
.progreso b{color:var(--acento-d);font-weight:500}


/* ---------- navegación ----------
   Vivía en la hoja de la maqueta clásica, así que las otras tres se
   quedaban sin ella: el menú se pintaba invisible. El nav es compartido;
   lo que cada maqueta ajusta es dónde va y de qué color, no si existe.

   Ojo al nombre: `.barra` a secas es la barra de progreso de los regalos.
   Este selector lleva siempre el elemento delante (`nav.barra`), que es lo
   que los mantiene separados. */

nav.barra{
  position:sticky;top:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  /* Menos relleno y más hueco entre la marca y los enlaces, sumando lo
     mismo: la barra sigue midiendo los 92px de siempre. El reparto
     importa porque las áreas táctiles de 44px de la marca y de los
     enlaces se solapaban —sus centros quedaban a 33px— y la de abajo,
     por ir después en el documento, se comía la mitad de la de arriba:
     la marca se quedaba en 33px de alto efectivo. Así los centros
     quedan a 45px y cada uno tiene los suyos. */
  gap:1.1rem;
  min-height:92px;              /* sin esto, Edge headless lo colapsa a 33px */
  padding:.55rem 1.3rem;
  /* `--fondo`, no blanco: en la maqueta editorial el fondo es crema y
     un blanco fijo dejaba una franja clarísima cruzando la página. */
  background:var(--fondo);
  border-bottom:1px solid var(--linea);
}
nav.barra .marca{
  font-family:var(--serif);font-size:1.15rem;color:var(--tinta);
  letter-spacing:.26em;padding-left:.26em;text-decoration:none;
  position:relative;
}
nav.barra .links{display:flex;gap:1.6rem}
nav.barra a.link{
  font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris-cl);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  position:relative;
}
nav.barra a.link[aria-current="page"]{color:var(--tinta);border-color:var(--acento)}

/* ---------- el dedo mide 44px ----------
   Los enlaces del menú medían 22px de alto y la marca 31: en un móvil se
   falla el toque y se acaba pulsando el de al lado. El área se agranda
   con un pseudo-elemento en vez de con `padding` porque el subrayado del
   enlace activo es un `border-bottom`: con padding se despegaba del texto
   y cruzaba la barra entera. Solo crece en vertical, así que dos enlaces
   contiguos no se pisan el área (el `gap` es horizontal). */
nav.barra a.link::after,
nav.barra .marca::after{
  content:"";
  position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%);
}
/* La marca va primero en el documento, así que el área del enlace de
   debajo se pinta encima y le recorta el último píxel: se le da holgura
   hacia arriba, que ahí no hay nada con lo que competir (la barra está
   pegada al borde). Medido: 47 px efectivos. */
nav.barra .marca::after{height:48px}

@media (max-width:640px){
  nav.barra .links{gap:1rem;flex-wrap:wrap;justify-content:center}
}

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

footer{
  border-top:1px solid var(--linea);
  text-align:center;
  padding:clamp(2rem,5vw,3rem) 1.3rem;
  margin-top:clamp(2rem,6vw,4rem);
}
footer .firma{font-family:var(--serif);font-size:1.6rem;color:var(--tinta)}
footer .firma .amp{font-style:italic;color:var(--acento)}
.pie{font-size:.72rem;color:var(--gris-cl);margin-top:.6rem}
/* 74×16 px: el único enlace que sale en todas las páginas y el canal de
   captación del producto, y era el objetivo táctil más pequeño de la web.
   Igual que en el menú, el área se agranda por fuera para no separar el
   texto del resto del pie. */
.pie a{position:relative;display:inline-block}
.pie a::after{content:"";position:absolute;inset:-14px -10px}

/* ---------- responsive: 700 y 900, consolidados ---------- */

@media (max-width:900px){
  .tarjetas{grid-template-columns:1fr}
}
@media (max-width:700px){
  .duo{grid-template-columns:1fr}
  .duo>div+div{border-left:0;border-top:1px solid var(--linea)}
  .bloque{grid-template-columns:1fr;text-align:center;justify-items:center}
  .regalo{grid-template-columns:72px 1fr;grid-template-areas:"foto info" "stepper stepper"}
  .regalo .foto{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}