/* ============================================================
   Nuestro Enlace · reglas de SECCIÓN
   Portadas desde la web original (c:/tmp/boda-web/style.css) y desde
   su evolución tokenizada (c:/tmp/nuestroenlace/app/static/style.css).
   base.css trae el sistema (tokens, retícula, filete, botón, tarjeta);
   esto trae lo que cada sección necesita encima.

   Reglas de la casa:
     · solo los tokens de base.css
     · ni un box-shadow: la separación es el filete de 1px
     · border-radius 0 salvo la píldora del dress code (en base.css) y
       los dos círculos de aquí: botones del stepper y check del regalo
   ============================================================ */

/* ═══ PORTADA ══════════════════════════════════════════════
   El arte (las ramas difuminadas del original) NO se porta aquí: en
   este producto el slot de arte lo pone cada maqueta (.arte-lat,
   .split .lado .arte, .hero .arte). Duplicarlo daría dos ilustraciones.
   ========================================================== */

.portada{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(3rem,9vh,5rem) 1.3rem clamp(2rem,5vh,3rem);
  overflow:hidden;
}
.portada>*{position:relative;z-index:1}

.portada .sobre{
  font-size:.7rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--gris-cl);
}
.portada .nombres{
  font-family:var(--serif);
  font-size:clamp(3.2rem,13vw,7rem);
  line-height:.98;
  color:var(--tinta);
  margin-top:1.5rem;
}
/* Solo el italic y el acento. Que el "&" caiga en su propia línea y a
   qué tamaño lo decide CADA maqueta (m-clasica lo quiere en línea,
   m-editorial en bloque), así que eso no baja a la capa compartida. */
.portada .nombres .amp{font-style:italic;color:var(--acento)}
.portada .fecha{
  font-size:clamp(.72rem,2.6vw,.82rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  margin-top:.3rem;
}
.portada .lugar{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,3.4vw,1.3rem);
  color:var(--gris);
  margin-top:.45rem;
}

/* filete corto y centrado: un separador, no una caja */
.rule{width:40px;height:1px;background:var(--tinta);margin:1.5rem auto;opacity:.22}

/* ── cuenta atrás ── */
.cd{display:flex;justify-content:center;gap:clamp(1.4rem,6vw,3rem);margin-top:2.4rem}
.cd .u{text-align:center}
.cd .u .n{font-family:var(--serif);font-size:clamp(1.5rem,5vw,2rem);line-height:1;color:var(--tinta)}
.cd .u .l{
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gris-cl);
  margin-top:.45rem;
}

/* ── los accesos de la portada ──
   Filete arriba y abajo en el contenedor; entre puertas, solo el
   izquierdo de la segunda en adelante. Nunca se suman 2px. */
.puertas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(620px,100%);
  margin-top:clamp(2.4rem,7vh,3.6rem);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.puertas.una{grid-template-columns:minmax(0,1fr)}
.puertas.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.puerta{display:block;padding:1.7rem 1rem;text-decoration:none;transition:background .3s}
.puerta+.puerta{border-left:1px solid var(--linea)}
.puerta:hover{background:var(--nieve)}
.puerta .ic{display:block;margin:0 auto .7rem}
.puerta .t{
  font-family:var(--serif);
  font-size:clamp(1.3rem,4.4vw,1.6rem);
  color:var(--tinta);
  transition:color .25s;
}
.puerta:hover .t{color:var(--acento-d)}

/* La marca del plan gratuito. Discreta a propósito: una insignia
   chillona hace que no compartan la web, y eso mata el embudo. */
.marca-ne{margin-top:1.6rem;font-size:.7rem;letter-spacing:.12em;color:var(--gris-cl);opacity:.75}
.marca-ne a{border-bottom:0;color:inherit;text-decoration:none}
.marca-ne a:hover{color:var(--gris)}

/* ═══ CABECERA DE PÁGINA INTERIOR ══════════════════════════ */

.cabecera{
  position:relative;
  text-align:center;
  padding:clamp(3rem,9vw,5rem) 1.3rem clamp(1.4rem,4vw,2.2rem);
  max-width:880px;
  margin:0 auto;
}
.cabecera>*{position:relative;z-index:1}
.cabecera h1{font-size:clamp(2.5rem,8.5vw,4.2rem);margin-top:.9rem}
.cabecera .bajada{color:var(--gris);max-width:840px;margin:1.3rem auto 0;font-size:1.06rem}
/* Cuando la cabecera no lleva bajada, el texto que va debajo queda
   demasiado suelto: se pega el título a lo que sigue. */
.cabecera.compacta{padding-bottom:.2rem}
/* La primera sección va pegada a la cabecera: si no, queda un hueco
   enorme entre la entradilla y las tres tarjetas. */
.cabecera+section{padding-top:clamp(.6rem,2vw,1.2rem)}

/* ═══ MAPA ═════════════════════════════════════════════════
   line-height:0 mata el hueco que deja el iframe por ser inline; sin
   eso queda una banda blanca de 4-5px dentro del filete. */

.mapa-caja{border:1px solid var(--linea);line-height:0}
.mapa-caja iframe{display:block;width:100%;height:330px;border:0;filter:grayscale(.4)}

/* ═══ CLIMA ════════════════════════════════════════════════
   No es una sección con titular propio: es el dato que decide el
   tejido, y por eso va anidado dentro de "Qué ponerse". */

.clima{
  max-width:560px;
  margin:2.2rem auto 0;
  background:var(--nieve);
  border:0;
  border-left:2px solid var(--acento);
  padding:1.5rem 1.5rem 1.4rem;
  text-align:center;
  font-size:1rem;
}
.clima-fila{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(2.5rem,10vw,5rem);
  margin-top:1.2rem;
}
.ch{display:flex;flex-direction:column;align-items:center}
.ch .clima-ic{display:block}
.ch .clima-ic .ic{width:30px;height:30px;display:block;margin:0 auto}
.ch .grados{
  font-family:var(--serif);
  font-size:clamp(2rem,6vw,2.4rem);
  line-height:1.1;
  color:var(--tinta);
  margin-top:.45rem;
}
/* .k y .sub vienen de base.css con la medida de la tarjeta: aquí son
   más pequeñas y sin el margen inferior de aquélla. */
.ch .k{
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris-cl);
  margin:.15rem 0 0;
}
.ch .sub{font-size:.86rem;color:var(--gris);margin-top:.3rem}

.clima-cierre{margin-top:1.3rem;border-top:1px solid var(--linea);padding-top:.95rem}
.clima-cierre p{font-size:.82rem;color:var(--gris-cl)}
.clima-cierre .chal{margin-top:.35rem;color:var(--gris)}

/* ═══ CÓMO LLEGAR ══════════════════════════════════════════ */

.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.copiado{
  font-size:.76rem;
  color:var(--acento-d);
  min-height:1.4em;
  margin-top:.8rem;
  letter-spacing:.04em;
  text-align:center;
}

/* ═══ TRANSPORTE ═══════════════════════════════════════════
   Lista sencilla: el contenedor pinta arriba, cada ficha abajo. */

/* Sin salidas no hay lista, y un filete suelto no es un separador: el
   de arriba solo se pinta si hay algo que separar. (:empty no vale, la
   plantilla deja un salto de línea dentro del contenedor.) */
.fichas{max-width:720px;margin:0 auto}
.fichas:has(.ficha){border-top:1px solid var(--linea)}
.ficha{border-bottom:1px solid var(--linea);padding:1.2rem .3rem;text-align:left}
.ficha h3{font-size:1.2rem;margin-bottom:.25rem}
.ficha p{font-size:.95rem;color:var(--gris)}
.cuando{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--acento);
  font-weight:500;
}
.ficha a{color:var(--acento-d)}

/* ═══ RÓTULOS DE BLOQUE ════════════════════════════════════
   Un eyebrow que etiqueta lo que viene justo debajo: «Ese día no» encima
   de las prendas tachadas, «¿Cuántos venís?» encima de los botones.

   Iban escritos con `style="text-align:center"` dentro de la plantilla, y
   un estilo inline no lo puede cambiar ninguna maqueta: en la partida,
   donde la columna entera va alineada a la izquierda, el rótulo se
   quedaba centrado encima de una lista pegada al margen. */

.no-titulo{text-align:center;margin-top:1.8rem}
.pregunta-personas{text-align:center;margin-bottom:.9rem}

/* ═══ REGALOS · EL TOPE ════════════════════════════════════ */

.aviso-previo{
  max-width:620px;
  margin:0 auto 1.4rem;
  text-align:center;
  font-size:.9rem;
  color:var(--acento-d);
  background:var(--nieve);
  border-left:2px solid var(--acento);
  padding:.8rem 1.1rem;
}

/* ═══ REGALOS · ¿CUÁNTOS VENÍS? ════════════════════════════ */

.personas{
  display:flex;
  justify-content:center;
  gap:0;
  margin:0 auto clamp(1.6rem,4vw,2.2rem);
  border:1px solid var(--linea);
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;
}
.pers{
  background:var(--fondo);
  border:0;
  border-radius:0;
  padding:.85rem 1.5rem;
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--gris);
  cursor:pointer;
  transition:background .2s,color .2s;
}
.pers+.pers{border-left:1px solid var(--linea)}
.pers span{
  display:block;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris-cl);
  margin-top:.2rem;
}
.pers:hover{background:var(--nieve)}
.pers.activo{background:var(--tinta);color:var(--blanco)}
/* el original usaba rgba(255,255,255,.65); no hay token para un blanco
   translúcido, así que se consigue con --blanco y opacidad */
.pers.activo span{color:var(--blanco);opacity:.65}

/* ═══ REGALOS · LA LISTA ═══════════════════════════════════ */

.regalos-grid{border-top:1px solid var(--linea)}
.regalo{
  position:relative;
  background:var(--fondo);
  border-bottom:1px solid var(--linea);
  gap:1.5rem;
  padding:1.4rem .4rem;
  text-align:left;
  transition:background .25s;
}
/* base.css pinta el filete con `.regalo + .regalo`; aquí lo pinta cada
   ficha por abajo y el contenedor por arriba. Se apaga el otro para que
   entre dos regalos nunca se sumen 2px. */
.regalo+.regalo{border-top:0}
.regalo:hover{background:var(--nieve)}
.regalo .foto{display:grid;place-items:center;object-fit:cover}
.regalo .info{min-width:0}
.regalo h3{margin:.15rem 0 .35rem}
.regalo .barra{margin-top:.8rem}
.regalo .barra span{transition:width .6s ease}
.regalo .progreso{gap:.6rem;margin-top:.5rem;font-size:.78rem}
.progreso .cifras{color:var(--gris)}
.progreso .pct{font-weight:500;color:var(--acento-d)}

/* El original declara `.regalo.elegido::after` DOS veces con efectos
   incompatibles (filete izquierdo de 2px y, más abajo, recuadro
   completo). En cascada ganaba el segundo: solo se porta ése. */
.regalo.elegido{background:var(--nieve)}
.regalo.elegido::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--acento);
  pointer-events:none;
}
.regalo.elegido .importe{color:var(--acento-d)}

/* el check: una de las tres excepciones al radio 0 */
.regalo .check{
  position:absolute;top:1.1rem;right:1.1rem;
  width:20px;height:20px;
  border:1px solid var(--linea);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:.64rem;
  color:transparent;
  transition:background .25s,border-color .25s,color .25s;
}
.regalo[aria-pressed="true"] .check{
  background:var(--acento);
  border-color:var(--acento);
  color:var(--blanco);
}

.regalo.shake{animation:shake .38s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* ── cuánto pongo yo en este regalo ──
   `grid-area:stepper` faltaba en el original: .regalo declara
   grid-template-areas:"foto info stepper" y nadie ocupaba esa área, así
   que el stepper se colocaba por flujo automático. */
.stepper{
  grid-area:stepper;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.8rem;
}
/* los dos círculos: segunda y tercera excepción al radio 0.
   Medían 34px. Son los dos únicos botones con los que se elige el importe
   —o sea, con los que este producto cobra— y en un móvil 34px se falla:
   el mínimo de un objetivo táctil es 44. Caben: la columna del stepper
   mide 200px y con 44+44+72 y los dos huecos suman 186. */
.stepper button,
.stepper .menos,
.stepper .mas{
  width:44px;height:44px;
  border:1px solid var(--linea);
  border-radius:50%;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s,color .2s,opacity .2s;
}
.stepper button:hover:not(:disabled){border-color:var(--acento);color:var(--acento-d)}
.stepper button:disabled{opacity:.28;cursor:default}
.stepper .importe{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--tinta);
  min-width:72px;
  text-align:center;
}

/* ── barra de total, pegada abajo ──
   El original la velaba con rgba(255,255,255,.96); no hay token para
   ese velo, así que va opaca sobre --fondo.

   Y NO va pegada siempre. Medido en un móvil de 390 con un solo regalo:
   la barra se clavaba en el borde inferior (768-844) justo encima del
   stepper (784-824), o sea que nada más abrir «Regalos» los dos únicos
   botones con los que se elige cuánto se pone estaban tapados y había
   que adivinar que bajando aparecían. Con una lista corta la sección
   entra casi entera en pantalla y el `sticky` no aporta nada: solo
   estorba. A partir de cuatro regalos sí hay lista que recorrer, y ahí
   se queda pegada —con un hueco debajo de la rejilla para que el último
   stepper se pueda subir por encima de ella—. */
.regalos-grid{margin-bottom:1.6rem}
[data-bloque="regalos"]:has(.regalo:nth-child(4)) .regalos-grid{margin-bottom:5rem}
[data-bloque="regalos"]:has(.regalo:nth-child(4)) .total-bar{position:sticky}
.total-bar{
  position:static;bottom:0;z-index:50;
  background:var(--fondo);
  /* Antes `border-top:0`, porque la barra iba pegada al filete de abajo
     de la lista y se habrían sumado 2px. Ya no van pegadas, y sin filete
     arriba la barra parecía derramarse sobre lo que tapaba al estar
     clavada. */
  border:1px solid var(--linea);
  padding:.95rem 1.3rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem;
}
.total-bar .sum{display:flex;align-items:baseline;gap:.5rem}
.total-bar .sum .n{font-family:var(--serif);font-size:1.8rem;line-height:1;color:var(--tinta)}
.total-bar .sum .cap{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gris-cl);
}
/* ── panel de confirmación ── */
.panel-bloqueo{
  max-width:460px;
  margin:2rem auto 0;
  border:1px solid var(--linea);
  padding:clamp(1.6rem,5vw,2.2rem);
  text-align:center;
  background:var(--fondo);
}
.panel-bloqueo h3{font-size:1.7rem;margin:.5rem 0}
.panel-bloqueo input{
  width:100%;
  margin-top:1.2rem;
  padding:.8rem 1rem;
  border:1px solid var(--linea);
  border-radius:0;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--tinta);
  background:var(--fondo);
  text-align:center;
}
.panel-bloqueo input:focus{outline:none;border-color:var(--acento)}
.resumen{margin:1.3rem 0;border-top:1px solid var(--linea)}
.resumen .linea{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem .2rem;
  border-bottom:1px solid var(--linea);
  font-size:.92rem;
  text-align:left;
}
.resumen .linea b{font-weight:500;white-space:nowrap}
.resumen .linea.suma{border-bottom:0;font-size:1.05rem}
.resumen .linea.suma b{color:var(--acento-d)}
/* el original llevaba un #9B3A2E suelto; ya hay token */
.error{color:var(--error);font-size:.88rem;min-height:1.3em;margin-top:.8rem}

.bloqueo-hecho{
  max-width:460px;
  margin:2rem auto 0;
  border:1px solid var(--acento);
  background:var(--nieve);
  padding:clamp(1.5rem,4vw,2rem);
  text-align:center;
}
.bloqueo-hecho h3{font-size:1.6rem;margin-bottom:.5rem}
.bloqueo-hecho p{color:var(--gris);font-size:.95rem}

/* ═══ PAGO ═════════════════════════════════════════════════ */

.bizums .numero{font-size:clamp(1.6rem,6vw,2.1rem);letter-spacing:.05em;word-break:break-word}
/* app.js mete cada método de pago como `.tarjeta` dentro del `.duo`, y
   las dos mecánicas de filete se pisaban: entre dos métodos se sumaban el
   borde derecho de la tarjeta y el izquierdo del `.duo` —2px, justo lo
   que el sistema prohíbe— y al último le quedaba un filete colgando por
   fuera, sin nada que separar. Aquí el reparto lo lleva el `.duo`. */
.duo>.tarjeta{border-right:0;border-bottom:0}
/* Los números los pide el cliente a `api/pago`: si esa petición no
   vuelve —o no hay JavaScript—, «Dónde mandarlo» se queda con su título
   y un hueco, que es exactamente el fallo silencioso del §4.7. El aviso
   solo sale si el contenedor SIGUE vacío pasados seis segundos: en el
   caso normal app.js ya ha metido la primera tarjeta y `:empty` deja de
   casar, así que no parpadea. Misma red de seguridad que `.reveal`. */
.bizums:empty::before{
  content:"No hemos podido cargar los datos para el Bizum. Recargad la página y, si sigue igual, decídnoslo.";
  grid-column:1/-1;
  display:block;
  text-align:center;
  font-size:.92rem;
  color:var(--gris-cl);
  opacity:0;
  animation:revelar .4s ease 6s forwards;
}
/* .nota-pago no existe en ninguna de las dos fuentes: la plantilla la
   pide y nadie la estilaba. Se escribe con el patrón del sistema para
   un pie de sección: pequeña, centrada y en gris claro. */
.nota-pago{
  max-width:620px;
  margin:1.2rem auto 0;
  text-align:center;
  font-size:.86rem;
  color:var(--gris-cl);
}

/* ═══ REGLAS ═══════════════════════════════════════════════ */

.reglas{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;text-align:center}
.regla h3{font-size:1.25rem;margin:.8rem 0 .45rem}
.regla p{font-size:.95rem;color:var(--gris)}
.regla .ic{display:block;margin:0 auto}

/* ═══ REVEAL ═══════════════════════════════════════════════
   El contenido arranca invisible y JavaScript le pone .in al entrar en
   pantalla. app.js llevaba una red de seguridad (revelarlo todo a los
   2,5 s) porque si el observador no se dispara la página se queda en
   blanco — y sin app.js, en blanco para siempre. Aquí esa red vive en
   CSS: una animación con el mismo retardo y con un solo fotograma, el
   final, así que arranca del valor que el elemento tenga en ese momento
   y no parpadea en lo que ya se había revelado. */

.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s ease,transform .8s ease;
  animation:revelar .8s ease 2.5s forwards;
}
.reveal.in{opacity:1;transform:none}
@keyframes revelar{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;animation:none}
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */

@media (max-width:820px){
  .reglas{grid-template-columns:1fr}
}
@media (max-width:720px){
  .regalo{gap:1rem;align-items:start;padding:1.3rem .2rem 1.5rem}
  .stepper{justify-content:center;margin-top:.3rem}
}
@media (max-width:640px){
  .puertas,.puertas.tres{grid-template-columns:1fr}
  .puerta+.puerta{border-left:0;border-top:1px solid var(--linea)}
  .mapa-caja iframe{height:270px}
}

/* ═══ LAS CINCO PIELES · LO COMPARTIDO ═════════════════════
   Las cinco tienen hero propio y NO incluyen la sección `portada`:
   pintar las dos daba los nombres dos veces y con textos distintos
   (§20). Esto es lo que comparten las cinco; lo que cambia —si hay
   foto, dónde va, de qué color es el fondo y qué tamaño tiene la
   letra— vive en `m-<piel>.css`, que carga después.

   Las cuatro maquetas heredadas que tienen `.hero` propio (scroll,
   editorial) lo pisan desde su hoja por el mismo motivo: va después.

   El envoltorio se llama `.pagina` y no `.cuerpo` a propósito: la
   maqueta partida heredada ya usa `.split .cuerpo` para la columna de
   su panel, y una medida global sobre ese nombre le rompía la
   pantalla dividida. */

.pagina{
  max-width:var(--medida,1000px);
  margin:0 auto;
  padding:0 clamp(1.3rem,5vw,2rem);
}
/* Dentro de `.pagina`, la sección ya no pone su propia medida ni su
   sangría lateral: las pone el envoltorio, y así todas las pieles
   cambian de ancho tocando una sola variable. */
.pagina > section,
.pagina > section.estrecha{max-width:none;padding-left:0;padding-right:0}
.pagina > .cabecera{max-width:none;padding-left:0;padding-right:0}

.hero{position:relative;overflow:hidden}
.hero .sobre{
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gris-cl);
}
.hero .nombres{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.9rem,9vw,5.4rem);line-height:.98;
  color:var(--tinta);margin:1.1rem 0 0;
}
.hero .nombres .amp{font-style:italic;color:var(--acento);margin:0 .1em}
.hero .filete{width:42px;height:1px;background:var(--acento);opacity:.5;margin:1.6rem auto}
.hero .lugar{
  font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gris);
}
.hero .cd{margin-top:clamp(1.6rem,4vh,2.4rem)}

/* Las puertas ocupan la medida entera, no 620 px sueltos.

   `.puertas` nació dentro de la sección `portada`, que es un flex
   centrado, así que el ancho fijo le bastaba para quedar en el eje.
   Aquí viven dentro de `.pagina`, que es un bloque: con `width:620px`
   y sin márgenes automáticos se pegaban a la IZQUIERDA mientras los
   nombres seguían centrados. Medido: puertas en x=254, nombres
   centrados en 632. Pasaba en las cinco. */
.piel .puertas{
  width:100%;
  margin-left:0;margin-right:0;
  align-self:stretch;
}

/* La barra, en una fila. La pila centrada de 92px es de la maqueta
   clásica, no del sistema.

   OJO AL `min-height`: `base.css` lo lleva con el comentario «sin
   esto, Edge headless lo colapsa a 33px», y es verdad. Al ponerlo a 0
   en una barra nueva, la caja se quedó en 36px con 35,2 de relleno
   dentro y los enlaces salían CORTADOS POR LA MITAD, medido. Se
   declara y no se deduce. */
.piel > nav.barra{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:1.5rem;
  min-height:64px;
  /* El filete de abajo va a TODO LO ANCHO —es el borde de la ventana—
     pero la marca y los enlaces se alinean con la columna de
     contenido. Con el relleno suelto, la barra ocupaba los 1.265 px de
     la ventana y `.pagina` era una columna de 820 centrada: la marca
     quedaba doscientos píxeles a la izquierda de todo lo demás, y en
     una ventana ancha eso no parece una decisión, parece roto.
     Medido: marca en x=32, contenido en x=254. */
  padding-block:.6rem;
  padding-inline:max(
    clamp(1.3rem,5vw,2rem),
    calc(50% - var(--medida,1000px) / 2 + clamp(1.3rem,5vw,2rem))
  );
}
.piel nav.barra .marca{font-size:1rem}
.piel nav.barra .links{flex-wrap:wrap;justify-content:flex-end;gap:1.5rem}
@media (max-width:640px){
  /* Apilada mide el doble: sin subir el mínimo, los enlaces salen
     cortados (ver la nota de arriba). */
  .piel > nav.barra{flex-direction:column;align-items:center;gap:.9rem;min-height:96px}
  .piel nav.barra .links{justify-content:center}
}

/* Las fotos de la pareja. Por defecto no se ven: cada piel decide
   cuántas usa y cómo. Que el marcado sea el mismo en las cinco es lo
   que permite cambiar de piel sin volver a pedirle nada a la pareja. */
.galeria{display:none}
.galeria figure{margin:0;overflow:hidden}
.galeria img{display:block;width:100%;height:100%;object-fit:cover}

/* De borde a borde dentro de un envoltorio centrado. */
.a-sangre{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.hero .sitio{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,3vw,1.3rem);
  color:var(--gris);margin-top:.35rem;
}

/* ═══ CONFIRMACIÓN DE ASISTENCIA ═══════════════════════════
   Lo mínimo que NO existía ya. El selector de sí/no reutiliza
   `.personas`/`.pers` —el mismo control segmentado de la página de
   regalos— y los botones son los `.btn` de siempre: aquí solo está la
   forma del formulario, que no la tenía nadie.

   Sin filete doble (§10.1), sin `box-shadow` y con el relieve en
   `--nieve`, como el resto. */

/* Centrado, como todo lo demás de la página y como el `.panel-bloqueo`,
   que es el único otro formulario que ve un invitado. Lo tuve con las
   etiquetas a la izquierda y los botones centrados —`.personas` los
   centra— y en una página que es toda centrada eso no se lee como una
   decisión, se lee como un fallo. */
.rsvp{max-width:34rem;margin:0 auto;text-align:center}
.rsvp-campo{padding:1.1rem 0}
.rsvp-campo+.rsvp-campo{border-top:1px solid var(--linea)}
.rsvp-campo .eyebrow{display:block;margin-bottom:.55rem}

/* La misma entrada que `.panel-bloqueo input`, que es la única que
   había en la web del invitado. Alineada a la izquierda y no centrada:
   aquí se escribe un nombre, no una cifra. */
.rsvp input[type="text"],
.rsvp input[type="number"]{
  width:100%;
  padding:.8rem 1rem;
  border:1px solid var(--linea);
  border-radius:0;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--tinta);
  background:var(--fondo);
  text-align:center;
}
.rsvp input:focus{outline:none;border-color:var(--acento)}
.rsvp-corto{max-width:7rem;margin:0 auto;display:block}
.rsvp-pista{margin:.45rem 0 0;font-size:.8rem;color:var(--gris-cl)}

/* El sí/no. `.pers` ya trae el fondo, el filete y el tamaño; aquí solo
   se esconde el radio de verdad —sin quitarlo del foco ni del lector de
   pantalla— y se pinta el estado marcado.

   El `:has()` va acotado dentro de `.rsvp` a propósito: §4.32 —hereda
   la especificidad de su argumento— y sin acotarlo le ganaría a las
   reglas de `.pers` de la página de regalos, que no tiene radios. */
.rsvp .personas{flex-wrap:wrap}
.rsvp .pers{
  display:inline-flex;align-items:center;
  min-height:44px;                      /* objetivo táctil (§20) */
  cursor:pointer;
}
.rsvp .pers input{
  position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;
}
.rsvp .pers:has(input:checked){background:var(--tinta);color:var(--blanco)}
/* El foco del teclado tiene que verse: el radio está oculto, así que si
   no se pinta aquí, quien navega con tabulador no sabe dónde está. */
.rsvp .pers:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:-2px}

.rsvp-hecho{max-width:34rem;margin:0 auto;text-align:center;
  border:1px solid var(--linea);border-left:2px solid var(--acento);
  background:var(--nieve);padding:1.5rem 1.3rem}
.rsvp-hecho p{margin:0 0 1rem}

@media (max-width:640px){
  /* Dos opciones a lo ancho no caben con este texto: se apilan y el
     filete rota de eje, no desaparece (§10.2). */
  .rsvp .personas{flex-direction:column}
  .rsvp .pers+.pers{border-left:0;border-top:1px solid var(--linea)}
}

/* ═══ Nuestra historia ════════════════════════════════════════════
   La única sección que no es información práctica. Se lee de arriba
   abajo: la foto, las fechas y quiénes son.

   Sin `box-shadow` y sin esquinas redondeadas, como todo lo demás: lo
   que separa aquí es el filete de 1px. Que ésta sea la sección
   «emotiva» no es excusa para romper el sistema — si se pareciera a
   otra web, se notaría que está pegada. */

.historia-foto{margin:0 0 clamp(1.8rem,4vw,2.6rem)}
/* La proporción la pone la pareja y aquí NO se recorta: se le da el
   ancho y la altura sale sola. Un `aspect-ratio` fijo le cortaría la
   cabeza a alguien en la mitad de las fotos, y ésta es la foto de los
   dos. */
.historia-foto img{display:block;width:100%;height:auto}

/* Los hitos. Es una lista ordenada de verdad (`<ol>`): son fechas en
   orden y quien use un lector de pantalla tiene que oír que van
   seguidas. Los números de la lista se quitan porque la fecha ya
   ordena mejor que un «1.». */
.hitos{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--linea)}
.hito{padding:clamp(1rem,2.5vw,1.4rem) 0;
  border-bottom:1px solid var(--linea)}
.hito-que{margin:0;font-family:var(--serif);
  font-size:clamp(1.15rem,3vw,1.4rem);line-height:1.25}
/* La fecha en la tipografía de los rótulos y en versalita, como las
   etiquetas de la tarjeta del día: es el mismo tipo de dato y tiene
   que leerse igual en las dos pantallas. */
.hito-cuando{margin:.3rem 0 0;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-cl)}
.hito-nota{margin:.55rem 0 0;color:var(--gris)}

/* Los dos. Hereda la retícula de `.duo` y solo añade cómo se lee cada
   uno: el nombre arriba, en versalita, y la línea debajo. */
.duo.ellos{margin-top:clamp(1.8rem,4vw,2.6rem);gap:0}
.duo.ellos .uno{padding:1.1rem 1.2rem}
/* El filete entre los dos, no alrededor: una caja por persona los
   convertiría en dos fichas de producto. */
.duo.ellos .uno+.uno{border-left:1px solid var(--linea)}
.duo.ellos .quien{margin:0 0 .35rem;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-cl)}
.duo.ellos .que{margin:0}

@media (max-width:640px){
  /* Dos columnas de texto a 320px son dos columnas de una palabra.
     Se apilan y el filete rota de eje, no desaparece (§10.2). */
  .duo.ellos{grid-template-columns:1fr}
  .duo.ellos .uno+.uno{border-left:0;border-top:1px solid var(--linea)}
}