/* ==========================================================================
   SISTEMA VISUAL — Fraija Fotografía (v2, 2026)
   No depende de Bootstrap ni de styles.css.

   EL COLOR NO VIVE AQUÍ. Vive en paleta.css, que hay que cargar antes que
   esta hoja. Los nombres --nata / --arena / --sinu / --tinta / --niebla
   que se usan a lo largo del archivo son alias declarados allí y apuntan
   a los roles (--fondo, --superficie, --cta-fondo, --texto, --texto-suave).
   NO USARLOS EN CÓDIGO NUEVO: usar los roles directamente.

   TIPOGRAFÍA: Cormorant para titular, Instrument Sans para leer.
   Todo lo tipográfico vive en el bloque --fuente-* / --titulo-* del :root.
   ========================================================================== */

:root {
  /* --- Escala tipográfica fluida — ratio 1.333, body 16→18px --- */
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.33rem, 1.25rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.78rem, 1.62rem + 0.78vw, 2rem);
  --step-3: clamp(2.37rem, 2.1rem + 1.35vw, 2.66rem);
  --step-4: clamp(3.16rem, 2.7rem + 2.3vw, 3.55rem);
  --step-5: clamp(4.21rem, 3.5rem + 3.6vw, 4.73rem);
  --step-6: clamp(2.8rem, 0.8rem + 9.5vw, 9rem); /* nombres del índice */
  /* Titular de página: los sitios de referencia lo llevan a ~110px y
     centrado. Por encima de --step-5, que se queda para el resto. */
  --step-titulo: clamp(2.75rem, 1rem + 7.6vw, 6.5rem);
  /* Capítulo: grande, pero por debajo de los 80px del nombre de la pareja
     para no competir con la apertura */
  --step-capitulo: clamp(2.37rem, 1.5rem + 3.6vw, 4.25rem);

  /* --- Espaciado: grid de 8pt, gaps grandes fluidos --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: clamp(3rem, 2rem + 4vw, 6rem);
  --sp-7: clamp(4.5rem, 2.5rem + 8vw, 10rem);

  --borde: clamp(1.25rem, 0.5rem + 3vw, 4rem); /* margen lateral de página */
  --medida: 62ch; /* measure de lectura */
  /* La columna de la pagina. Antes cada seccion se inventaba la suya
     (80, 56, 84 y 72rem) y las aristas izquierdas caian en 46, 185, 0 y
     103px: nada alineaba al bajar. */
  --medida-pagina: 80rem;

  /* --- TIPOGRAFÍA ------------------------------------------------------
     Dos familias: una serif para los titulares y una sans para leer.
     PARA CAMBIAR LA TIPOGRAFÍA DEL SITIO SÓLO SE TOCA ESTE BLOQUE.

     Ojo: no basta con cambiar el nombre de la familia. Cada tipografía
     tiene su propia altura de x, su propio grosor y su propio ritmo, así
     que peso, tracking, interlínea y factor de tamaño también son
     variables. Cormorant a 100px pesa mucho menos en pantalla que una
     grotesca a 100px: por eso --titulo-ajuste existe. */
  --fuente-titulo: "Cormorant", Georgia, "Times New Roman", serif;
  --fuente-texto: "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* Peso del titular. Cormorant sólo baja hasta 300; en una grotesca
     este valor rondaría 400–500 */
  --titulo-peso: 300;
  /* Peso para titulares pequeños, donde 300 se queda anémico */
  --titulo-peso-medio: 500;
  /* Las serif no quieren tracking negativo; una grotesca pide -0.035em */
  --titulo-tracking: -0.005em;
  /* Las etiquetas en mayúsculas siempre piden aire, sea cual sea la
     familia. Los rótulos y metadatos del sitio usan esta medida; la
     navegación (0.06em) y el número de capítulo (0.2em) se salen a
     propósito, por tamaño. */
  --tracking-mayus: 0.14em;
  /* Interlínea de los titulares. Las referencias del sector la llevan muy
     por debajo del cuerpo de letra: bellephoto.com.au usa 70px de
     interlínea para una letra de 115px */
  --titulo-interlinea: 0.88;
  /* Factor de tamaño de los titulares: sube o baja TODOS a la vez */
  --titulo-ajuste: 1.15;
  /* Cuánto más pequeña va la segunda parte del titular, la que va en
     cursiva. El recurso está copiado de bellephoto.com.au */
  --titulo-eco: 0.66em;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--step-0);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Los botones no heredan color en ningun navegador: el UA les pone el suyo
   (negro puro). El de la lupa de las galerias solo envuelve una foto, asi
   que no se veia, pero deja un negro fuera de paleta en el arbol. */
button {
  color: inherit;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Foco de teclado visible en todo el sistema — piso de calidad, no opcional */
:focus-visible {
  outline: 2px solid var(--sinu);
  outline-offset: 4px;
  border-radius: 2px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--fondo-oscuro);
  color: var(--nata);
  padding: var(--sp-2) var(--sp-3);
}

.salta-al-contenido:focus {
  left: var(--borde);
  top: var(--sp-2);
}

/* Bloques de descanso en pastel — se usan con moderación, dos por página */
.bloque-arena {
  background: var(--arena);
}

/* El único bloque de color fuerte del sitio: la llamada a la acción.
   Es el 10% del reparto haciendo su trabajo. */
.bloque-acento {
  background: var(--sinu);
  color: var(--nata);
}

.bloque-acento a,
.bloque-acento .cierre__texto,
.bloque-acento .siguiente__etiqueta {
  color: var(--nata);
}

/* 0.85 y no menos: la opacidad rebaja el contraste real. A 0.78 el texto
   caía a 4.35:1 sobre el verde y dejaba de cumplir. A 0.85 da 4.82. */
.bloque-acento .cierre__texto,
.bloque-acento .siguiente__etiqueta {
  opacity: 0.85;
}

.bloque-acento a:hover,
.bloque-acento a:focus-visible {
  color: var(--nata);
  opacity: 0.82; /* 4.62:1, el mínimo que aún cumple */
}

.bloque-acento :focus-visible {
  outline-color: var(--nata);
}

/* ==========================================================================
   MENU OFF-CANVAS - OMAR FRAIJA 2026
   Barra fija con el monograma OF a la izquierda (no hay hamburguesa),
   enlaces en linea al centro y Contacto a la derecha. El OF abre un panel
   lateral oscuro, del mismo tono que el pie.

   Los tokens se declaran dentro del bloque, no en un :root, para que las
   dos copias (styles.css y bodas.css) sean identicas y no dependan del
   :root de cada hoja. Igual que el footer.
   ========================================================================== */

.menu {
  --men-claro: var(--texto-inverso);
  --men-oscuro: var(--fondo-oscuro);
  --men-tenue: var(--texto-suave-inverso);
  --men-linea: var(--linea);
  --men-alto: 4.5rem;
  --men-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  font-family: var(--fuente-texto);
}

/* --- Barra superior --- */
.menu__barra {
  position: relative;
  z-index: 2;
  min-height: var(--men-alto);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  color: var(--men-oscuro);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--men-ease),
    border-color 0.35s var(--men-ease);
}

/* Al bajar, la barra se apoya en el fondo: sobre fotografia clara el texto
   suelto deja de leerse. */
.menu--solida .menu__barra {
  background-color: var(--men-claro);
  border-bottom-color: var(--men-linea);
}

/* Las paginas que abren con fondo llevan la barra apoyada desde arriba, con
   su linea de separacion. Las que abren con fotografia a sangre no: alli la
   barra flota sobre la foto y una linea la partiria por la mitad.

   El gancho es la seccion de apertura, que separa los dos tipos sin tener
   que marcar cada pagina a mano:
     .hero      portafolio, precios, portfolio-bodas, portfolio-prebodas
     .apertura  las 4 bodas y las 4 prebodas

   La linea va a --linea-fuerte y no al --men-linea del menu porque es la
   misma que ya tiene index.html, donde la pone la regla `header` de
   styles.css. Jairo la queria igual que en inicio. */
body:has(.hero) .menu__barra {
  border-bottom-color: var(--linea-fuerte);
}

/* --- Disparador del panel: la hamburguesa ---
   Fue el monograma OF hasta que Jairo trajo la referencia de bellephoto en
   movil, donde el disparador es una hamburguesa y la barra no lleva nada
   mas. El gancho del JS es [data-menu-abrir], no esta clase. */
.menu__abrir {
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  /* El trazo mide 17px de alto, pero la caja de pulsacion llega a 44:
     por debajo de eso el dedo falla en movil. */
  height: 44px;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.menu__abrir span {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.menu__abrir:hover {
  opacity: 0.55;
}

.menu__abrir:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

/* --- Enlaces en linea --- */
.menu__linea {
  justify-self: center;
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.menu__linea a {
  position: relative;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  padding-bottom: 3px;
}

.menu__linea a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--men-ease);
}

.menu__linea a:hover::after,
.menu__linea a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu__linea a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --- Velo --- */
.menu__velo {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: var(--velo);
  opacity: 0;
  transition: opacity 0.42s var(--men-ease);
}

.menu--abierto .menu__velo {
  opacity: 1;
}

/* --- Panel --- */
.menu__panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 3;
  width: min(27.5rem, 88vw);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  background-color: var(--men-oscuro);
  color: var(--men-claro);
  transform: translateX(-100%);
  transition: transform 0.42s var(--men-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu--abierto .menu__panel {
  transform: translateX(0);
}

.menu__cerrar {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--men-tenue);
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.menu__cerrar:hover {
  color: var(--men-claro);
}

.menu__cerrar:focus-visible {
  outline: 1px solid var(--men-claro);
  outline-offset: 4px;
}

/* --- Lista del panel ---
   Sin numeración: los enlaces respiran por el gap, no por el interlineado.
   En móvil es la navegación principal, así que se le da aire de sobra. */
.menu__lista {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 2.6vh, 1.35rem);
  margin: clamp(2rem, 6vh, 3.5rem) 0 auto;
}

.menu__lista a {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: clamp(1.75rem, 5.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--men-claro);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.menu__lista a:hover {
  opacity: 0.55;
}

/* --- Pie del panel --- */
.menu__pie {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--linea-inversa-tenue);
  font-size: 0.85rem;
}

.menu__pie a {
  color: var(--men-tenue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.menu__pie a:hover {
  color: var(--men-claro);
}

/* La pagina no se desplaza por detras del panel */
.menu-bloqueado,
.menu-bloqueado body {
  overflow: hidden;
}

/* --- Responsive ---
   El corte es 768: de ahi hacia arriba manda la navegacion en linea y la
   hamburguesa desaparece; de ahi hacia abajo (tablet y movil) al reves.
   Antes el corte estaba en 900 y la hamburguesa no se ocultaba nunca, asi
   que entre 900 y arriba convivian los dos disparadores. */
@media (min-width: 768px) {
  .menu__abrir {
    display: none;
  }

  /* Al sacar la hamburguesa del flujo, la navegacion caeria en la primera
     columna de la rejilla y dejaria de estar centrada. Se la coloca a mano
     en la segunda, que es la suya. */
  .menu__linea {
    grid-column: 2;
  }
}

@media (max-width: 767.98px) {
  /* Debajo de 768 los enlaces en linea no caben sin apelotonarse: el panel
     se encarga, que para eso esta. La barra queda solo con la hamburguesa. */
  .menu__linea {
    display: none;
  }

  .menu__barra {
    grid-template-columns: auto 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu__barra,
  .menu__velo,
  .menu__panel,
  .menu__linea a::after {
    transition-duration: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  padding: calc(var(--sp-7) + 3rem) var(--borde) var(--sp-6);
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
}

.hero__titulo {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(var(--step-titulo) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
  max-width: 18ch;
  text-wrap: balance;
}

/* Titular a dos velocidades: la primera parte grande y la segunda menor y
   en cursiva, con las líneas casi tocándose. Es el gesto de
   bellephoto.com.au, que mezcla 115px y 85px dentro de la misma frase. */
.titular__eco {
  display: block;
  font-size: var(--titulo-eco);
  font-style: italic;
  letter-spacing: 0;
}

/* Bajo el titular, en columna y centrado: primero la frase, después el
   dato corto. Antes iban en extremos opuestos de la misma línea. */
.hero__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-1);
}

.hero__texto {
  /* 48ch, no 56: a 56 la medida se iba a 80 caracteres por linea en la
     entradilla de prebodas, el techo de WCAG. Con 48 se queda en ~68,
     dentro del rango comodo (45-75) y a tono con el resto del sitio. */
  max-width: 48ch;
  color: var(--niebla);
}

.hero__conteo {
  /* mayúsculas pequeñas: la serif se deshace a este tamaño */
  font-family: var(--fuente-texto);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--sinu);
  white-space: nowrap;
}

/* Palabras del split reveal */
.palabra {
  display: inline-block;
  vertical-align: top;
  /* SIN overflow: hidden. Lo llevaba cuando el titular subia desde abajo y
     habia que recortar la palabra fuera de su caja. Ahora entra desde la
     izquierda y desenfocada, y el overflow cortaba las dos cosas: el
     desplazamiento horizontal y el halo del blur, que se salen de la caja.

     El padding con su margen negativo se queda: suman cero en la
     maquetacion y le dan aire a las descendentes largas y a la cursiva de
     Cormorant, que se salen de la linea. */
  padding: 0 0.08em 0.16em 0;
  margin: 0 -0.08em -0.16em 0;
}

.palabra > span {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   ELEMENTO FIRMA — el índice como "acta de bodas"
   Lista tipográfica; al pasar el cursor, la fotografía de esa boda entra
   a pantalla completa detrás del tipo, teñida en el pastel de fondo.
   -------------------------------------------------------------------------- */
.acta {
  position: relative;
  z-index: 1;
  padding-bottom: var(--sp-7);
}

.acta__fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* sin fondo propio: es transparente y el lavado pastel lo produce la
     opacidad de la foto sobre el nata del body. Un fondo opaco aquí taparía
     el hero, porque .acta crea contexto de apilamiento */
}

/* El fondo de Alejandra & Said cambia de foto por ancho y va en un
   <picture>; sin esto el <picture> inline se interpondría en el marco. */
.acta__fondo picture {
  display: contents;
}

.acta__fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.6s var(--ease), transform 1.2s var(--ease);
}

/* 0.38 sobre el fondo nata deja la foto lavada en pastel y mantiene
   el texto en tinta por encima de 6:1 de contraste */
.acta__fondo img.activa {
  opacity: 0.38;
  transform: scale(1);
}

.acta__fila {
  display: block;
  padding: clamp(var(--sp-4), 3vw, var(--sp-6)) var(--borde);
  transition: opacity 0.4s var(--ease);
}

/* Al enfocar una boda, las demás se apagan — la atención va a una sola */
.acta:has(.acta__fila:hover) .acta__fila:not(:hover),
.acta:has(.acta__fila:focus-visible) .acta__fila:not(:focus-visible) {
  opacity: 0.4;
}

.acta__nombres {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(var(--step-6) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
  transition: transform 0.5s var(--ease), font-weight 0.5s var(--ease),
    color 0.5s var(--ease);
}

.acta__fila:hover .acta__nombres,
.acta__fila:focus-visible .acta__nombres {
  transform: translateX(clamp(0.5rem, 1.5vw, 1.75rem));
  font-weight: 600;
}

.acta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--niebla);
}

.acta__meta .ver {
  margin-left: auto;
  color: var(--sinu);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.acta__fila:hover .ver,
.acta__fila:focus-visible .ver {
  opacity: 1;
  transform: translateX(0);
}

/* Miniatura solo en táctil/móvil, donde no existe el hover. En el móvil en
   vertical va 4:5 (como las fotos de las demás secciones); el 16:10 de antes
   las dejaba demasiado bajas. NADA de max-height aquí: con un aspect-ratio
   fijo, Chrome le encoge el ancho para conservar la proporción y la deja
   pegada a la izquierda. */
.acta__mini {
  display: none;
  margin-top: var(--sp-3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

/* La foto de Alejandra & Said cambia por ancho y va en un <picture>; sin
   esto el <picture> inline se interpondría entre el marco y la foto. */
.acta__mini picture {
  display: contents;
}

.acta__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: none), (max-width: 720px) {
  .acta__mini {
    display: block;
  }

  .acta__fondo {
    display: none;
  }

  .acta:has(.acta__fila:hover) .acta__fila:not(:hover) {
    opacity: 1;
  }

  .acta__meta .ver {
    display: none;
  }
}

/* En cuanto hay ancho de sobra (tablet, portátil táctil: ahí también aparece
   la miniatura porque el dispositivo no tiene hover), el 4:5 vertical se
   haría gigante de alto y pegado a la izquierda. Se vuelve al apaisado, que
   ocupa casi todo el ancho sin pasarse de alto — como estaba antes en
   portátil. Por debajo de 520px (móvil en vertical) NO entra: el móvil
   se queda con el 4:5 de arriba. */
@media (min-width: 520px) {
  .acta__mini {
    aspect-ratio: 16 / 10;
  }
}

/* Vale & Victor: unica excepcion. Es la foto mas alta del indice y con
   cualquier proporcion fija se le van los pies, asi que va entera con su
   propia forma. Las demas siguen con el 4:5 / 16:10 de arriba. Va despues
   del bloque de 520px para ganarle. */
.acta__fila[data-boda="vale-victor"] .acta__mini {
  aspect-ratio: auto;
}

.acta__fila[data-boda="vale-victor"] .acta__mini img {
  height: auto;
}

/* David & Monica: la foto es 2:3 y con el recorte 4:5 centrado se le va la
   cabeza al novio, que arranca muy arriba del encuadre. Se ancla el recorte
   al borde superior: lo que se pierde entonces es suelo. Las demas siguen
   centradas, que es como estan bien. */
.acta__fila[data-boda="david-monica"] .acta__mini img {
  object-position: 50% 0;
}

/* --------------------------------------------------------------------------
   PORTAFOLIO — las dos puertas: bodas y prebodas
   -------------------------------------------------------------------------- */
.puertas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--sp-3);
  padding: 0 var(--borde) var(--sp-7);
}

.puerta {
  position: relative;
  display: block;
  overflow: hidden;
  /* se ve sólo mientras carga la fotografía */
  background: var(--arena);
  aspect-ratio: 4 / 5;
}

.puerta:nth-child(even) {
  background: var(--arena);
}

.puerta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease), filter 0.6s var(--ease);
}

.puerta:hover img,
.puerta:focus-visible img {
  transform: scale(1.04);
}

.puerta__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--p-oscuro-rgb), 0.68) 0%,
    rgba(var(--p-oscuro-rgb), 0.16) 45%,
    rgba(var(--p-oscuro-rgb), 0) 70%
  );
}

.puerta__texto {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  color: var(--nata);
}

.puerta__nombre {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(var(--step-4) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
}

.puerta__nota {
  margin-top: var(--sp-1);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.puerta__nota .flecha {
  transform: translateX(-6px);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.puerta:hover .flecha,
.puerta:focus-visible .flecha {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   ADICIONALES — un bloque contenido, no una lista a todo el ancho
   A todo el ancho el nombre quedaba en un extremo y el precio en el otro,
   con medio metro de vacío en medio. Aquí la caja sí ayuda: es un bloque
   único, no tres opciones compitiendo entre sí.
   -------------------------------------------------------------------------- */
.adicionales {
  max-width: var(--medida-pagina);
  margin: 0 auto var(--sp-7);
  padding: clamp(var(--sp-5), 4vw, var(--sp-6)) var(--borde);
  /* Sin caja: debajo de las tarjetas habia tres superficies arena
     seguidas y la pagina se aplanaba en un beige unico. Aqui basta un
     filete arriba y abajo. */
  border-block: 1px solid var(--linea);
  display: grid;
  gap: var(--sp-4);
}

.adicionales .rotulo {
  padding: 0;
}

.adicionales__nota {
  font-size: var(--step--1);
  color: var(--niebla);
  text-align: center;
  margin-top: calc(var(--sp-3) * -1);
}

/* Tres columnas, no tres filas: con el nombre a un lado y el precio al
   otro quedaban 400px de vacío en medio aunque estuvieran dentro de la
   caja. Apilados y centrados, el precio pertenece a su nombre. */
.adicionales__lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4) var(--sp-3);
}

.adicionales__item {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  text-align: center;
}

.adicionales__nombre {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso-medio);
  font-size: var(--step-1);
  letter-spacing: var(--titulo-tracking);
  line-height: 1.15;
}

.adicionales__detalle {
  display: block;
  font-family: var(--fuente-texto);
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: 0;
  color: var(--niebla);
  margin-top: 0.2rem;
}

.adicionales__valor {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: var(--titulo-tracking);
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .adicionales__lista {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   APERTURA — el nombre solo sobre el fondo, y la fotografía que se abre
   sola desde el centro al cargar (automática, sin scroll; ver
   animarApertura() en bodas.js) hasta ocupar la pantalla.
   El recorte va con clip-path (compositable) en vez de height, que
   dispararía recálculo de layout en cada frame.
   -------------------------------------------------------------------------- */
.apertura {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Una sola línea horizontal. 80px es el tope, igual que la referencia;
   el clamp lo baja en móvil, donde a 80px el nombre no cabe */
.apertura__nombres {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.28em;
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(clamp(2.25rem, 1rem + 5.6vw, 5rem) * var(--titulo-ajuste));
  line-height: 0.85;
  letter-spacing: var(--titulo-tracking);
  text-align: center;
  padding-inline: var(--borde);
}

/* El & de Cormorant es de los mejores que hay: se le da aire y su color */
.apertura__nombres .amperson {
  font-weight: var(--titulo-peso);
  font-style: italic;
  color: var(--sinu);
}

.apertura__foto {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* estado inicial: cerrada en la línea del centro.
     Las cuatro componentes van con unidad explícita: con ceros sin unidad
     GSAP no las empareja y el telón se abre torcido */
  clip-path: inset(50% 0%);
  will-change: clip-path;
}

/* Cuando la apertura cambia de foto por ancho, la imagen va dentro de un
   <picture>. Sin esto el <picture> es inline y no tiene alto, así que el
   height:100% del <img> se resolvería contra nada. */
.apertura__foto picture {
  display: contents;
}

.apertura__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apertura__meta {
  position: absolute;
  z-index: 1;
  left: var(--borde);
  right: var(--borde);
  bottom: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--sinu);
}

.apertura__meta a:hover {
  color: var(--tinta);
}

/* Sin JS o con movimiento reducido la foto se muestra abierta,
   nunca escondida */
.no-js .apertura__foto,
.apertura__foto.abierta {
  clip-path: inset(0% 0% 0% 0%);
}

@media (prefers-reduced-motion: reduce) {
  .apertura__foto {
    clip-path: inset(0% 0% 0% 0%);
  }
}

/* --------------------------------------------------------------------------
   PÁGINA DE UNA BODA
   -------------------------------------------------------------------------- */
.boda__cabecera {
  padding: var(--sp-7) var(--borde) var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
}

/* Cuando la cabecera va después de la apertura no hay barra fija que
   esquivar arriba */
.apertura + .boda__cabecera {
  padding-top: var(--sp-7);
}

.volver {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--niebla);
  transition: color 0.3s var(--ease);
}

.volver:hover {
  color: var(--sinu);
}

.boda__nombres {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(clamp(2.8rem, 1.2rem + 7vw, 7rem) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
}

.boda__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sinu);
  padding-top: var(--sp-1);
}

/* El párrafo de apertura es la voz de la boda: va grande, casi a escala
   de titular, y es lo único que acompaña al nombre */
.boda__intro {
  max-width: 30ch;
  /* clamp propio: en móvil un --step-2 fijo se come dos pantallas */
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .boda__intro {
    max-width: 38ch;
  }
}

/* --------------------------------------------------------------------------
   CAPÍTULOS — el texto que separa las etapas de la boda
   Sin líneas: la separación la hacen el espacio y el salto de escala.
   -------------------------------------------------------------------------- */
.capitulo {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-7) 0 var(--sp-5);
  justify-items: center;
  text-align: center;
  /* que el salto desde el índice no deje el título debajo de la barra fija */
  scroll-margin-top: 5rem;
}

.capitulo__numero {
  font-family: var(--fuente-texto);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--sinu);
}

.capitulo__titulo {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(var(--step-capitulo) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
}

.capitulo__nota {
  max-width: 46ch;
  color: var(--niebla);
}

/* --------------------------------------------------------------------------
   FILAS JUSTIFICADAS
   Cada fila llena el ancho exacto sin recortar ninguna foto: los anchos se
   reparten proporcionales a la relación de aspecto (--ar), así todas las
   fotos de una fila acaban con la misma altura. Se calcula al generar la
   página, con las medidas reales de cada archivo — sin JS ni saltos.
   -------------------------------------------------------------------------- */
.fila {
  display: flex;
  gap: var(--sp-2);
}

.fila > .foto {
  flex: var(--ar) 1 0;
  aspect-ratio: var(--ar);
  min-width: 0;
}

.fila > .foto .lupa,
.fila > .foto img {
  height: 100%;
}

.fila > .foto img {
  width: 100%;
  object-fit: cover;
}

/* Momento a sangre: una sola foto rompiendo los márgenes de página */
.fila--sangre {
  margin-inline: calc(var(--borde) * -1);
}

@media (max-width: 720px) {
  .fila {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .fila > .foto {
    flex: none;
  }
}

/* Secuencia editorial: ritmo alternado, nunca una grilla uniforme.
   max-width: sin tope, en un monitor de 27" una fila de 3 verticales pasa de
   1100px de alto y una de 2 de 1800 — no cabe ni una foto en pantalla. Con el
   tope (~1800px, calculado para verticales de ~840px de alto) la galería se
   centra y en portátiles normales (≤1900px) no cambia nada. Las filas a
   sangre siguen rompiendo hasta el borde de esta caja. */
.secuencia {
  display: grid;
  gap: var(--sp-6);
  max-width: 1800px;
  margin-inline: auto;
  padding: 0 var(--borde) var(--sp-7);
}

.foto {
  overflow: hidden;
  position: relative;
  /* se ve sólo mientras carga la fotografía */
  background: var(--arena);
}

.foto img {
  width: 100%;
  transition: transform 0.8s var(--ease);
}

.foto figcaption {
  margin-top: var(--sp-1);
  font-size: var(--step--1);
  color: var(--niebla);
  letter-spacing: 0.06em;
}

.lupa {
  cursor: zoom-in;
  border: 0;
  padding: 0;
  background: none;
  display: block;
  width: 100%;
  overflow: hidden;
}

.lupa:hover img {
  transform: scale(1.02);
}

/* Siguiente boda */
.siguiente {
  padding: var(--sp-6) var(--borde) var(--sp-6);
}

.siguiente a {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}

.siguiente__etiqueta {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--niebla);
}

.siguiente__nombres {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(var(--step-4) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
  transition: color 0.3s var(--ease);
}

.siguiente a:hover .siguiente__nombres {
  color: var(--sinu);
}

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(var(--p-oscuro-rgb), 0.92);
  opacity: 0;
  visibility: hidden;
  /* visibility se interpola de forma discreta: se retrasa al cerrar y se
     aplica al instante al abrir, para que el fundido de opacity sí se vea */
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}

.visor[data-abierto="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0s;
}

.visor img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
}

.visor__cerrar {
  position: absolute;
  top: var(--sp-3);
  right: var(--borde);
  background: none;
  border: 0;
  color: var(--nata);
  font-family: var(--fuente-titulo);
  font-size: var(--step-1);
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.visor__cerrar:focus-visible {
  outline-color: var(--nata);
}

/* --------------------------------------------------------------------------
   FOOTER  OMAR FRAIJA 2026
   Identico al de styles.css: es el mismo footer en las 19 paginas.
   Si se toca aqui, hay que tocarlo alli.
   -------------------------------------------------------------------------- */

.footer {
  --pie-fondo: var(--fondo-pie);
  --pie-texto: var(--texto-inverso);
  --pie-tenue: var(--texto-suave-inverso);
  --pie-acento: var(--texto-acento-inverso);
  --pie-linea: var(--linea-inversa);

  background-color: var(--pie-fondo);
  color: var(--pie-texto);
  font-family: var(--fuente-texto);
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem) 0;
}

/* --- Bloque superior: marca | navegacion --- */
.footer__top {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  /* La referencia no pega el nav al borde derecho: arranca sobre el 59%
     del ancho y deja aire a su derecha. Con "1fr auto" el nav se iba al
     extremo y el hueco central se disparaba al 44%. */
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem 4rem;
  align-items: start;
}

/* Monograma */
.footer__monograma {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--pie-texto);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* Lema a dos lineas, en serif como la referencia */
.footer__lema {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.35;
  color: var(--pie-texto);
  margin: 0;
}

/* Contacto directo, discreto bajo el lema */
.footer__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
}

/* Correo y telefono son lo unico accionable del pie: se llevan el acento.
   6.01:1 sobre --fondo-oscuro, medido en paleta.css. */
.footer__datos a {
  color: var(--pie-acento);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__datos a:hover {
  color: var(--pie-texto);
}

/* --- Navegacion: dos columnas serif --- */
.footer__nav {
  /* Las dos columnas terminan al mismo nivel: asi el hueco hasta el
     wordmark es el mismo por la izquierda y por la derecha. */
  align-self: end;
  /* Ocupa toda su columna en vez de encogerse al ancho del texto: asi el
     borde derecho del bloque superior llega donde llega el wordmark.
     La primera columna va algo mas ancha para empujar la segunda. */
  justify-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0 1rem;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
}

.footer__nav a {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.75;
  /* La navegacion es secundaria y estaba al mismo brillo que el lema: el
     pie entero iba a 13.14:1 y no habia jerarquia. En tenue da 5.66 y el
     hover sube a crema entera. El hover por opacidad se cambia por color
     porque a 0.6 el contraste real se caia por debajo de AA. */
  color: var(--pie-tenue);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.footer__nav a:hover {
  color: var(--pie-texto);
}

/* --- Wordmark gigante, completo --- */
.footer__wordmark {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  /* El trazo tiene que ir a ras con la columna de arriba y con la barra
     de creditos: si entra por dentro, el bloque de la izquierda parece
     descolgado porque lo de abajo no le sigue la linea. */
  font-size: clamp(2.5rem, 13.5vw, 14.7rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  /* A 172.8px sobre crema puro era el elemento mas grande y mas contrastado
     del sitio: mas que cualquier H1 (el mayor es el de about-me, 89.6px).
     Es decorativo -va con aria-hidden-, asi que baja a tenue y hace de
     filigrana en vez de gritar. */
  color: var(--pie-tenue);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  margin: clamp(2rem, 5.9vw, 4.7rem) 0 clamp(2rem, 4vw, 3rem);
}

/* --- Barra de creditos --- */
.footer__bar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pie-tenue);
}

/* La autoria se destaca: el nombre completo, subrayado y en color de texto */
.footer__autoria a {
  color: var(--pie-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--pie-linea);
  padding-bottom: 0.15em;
  transition: border-color 0.2s ease;
}

.footer__autoria a:hover {
  border-bottom-color: var(--pie-texto);
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer__monograma {
    margin-bottom: 1.75rem;
  }
}

@media (max-width: 600px) {
  .footer__nav {
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0 2.5rem;
  }

  /* En movil el wordmark va a todo el ancho de pantalla, como en la
     referencia: se cancela el padding lateral del footer. Sigue entero. */
  .footer__wordmark {
    margin-left: calc(-1 * clamp(1.5rem, 5vw, 5rem));
    margin-right: calc(-1 * clamp(1.5rem, 5vw, 5rem));
    font-size: 15vw;
  }

  .footer__datos {
    flex-direction: column;
  }

  .footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   COLECCIONES — los paquetes.
   Patrón que usan los estudios de bodas de EE.UU.: tres colecciones, la del
   medio destacada, el precio visible y los extras aparte. Aquí sin tablas ni
   líneas: cada colección es un bloque de color pastel y el precio es
   tipografía, no una etiqueta de tienda.
   -------------------------------------------------------------------------- */
.rotulo {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--sinu);
  text-align: center;
  padding: 0 var(--borde) var(--sp-4);
}

.colecciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Siete filas: foto, horas, nombre, precio, resumen, lista y enlace.
     Cada colección hereda esta rejilla con subgrid, así los renglones
     casan entre columnas aunque un resumen ocupe una línea más. */
  grid-template-rows: repeat(7, auto);
  row-gap: var(--sp-2);
  column-gap: clamp(var(--sp-3), 3vw, var(--sp-6));
  align-items: start;
  padding: 0 var(--borde) var(--sp-7);
}

/* Sin fondo, sin borde y sin sello: lo que hacía que las tarjetas leyeran
   como tabla de precios de software era la caja de color, no la columna.
   Tres columnas separadas sólo por aire comparan igual de bien y no
   parecen un plan de suscripción. */
.coleccion {
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  align-content: start;
  text-align: left;
}

.coleccion__foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--arena);
  margin-bottom: var(--sp-1);
}

.coleccion__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coleccion__horas {
  font-family: var(--fuente-texto);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--sinu);
}

.coleccion__nombre {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(var(--step-3) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
}

/* El precio va arriba, junto al nombre: es lo primero que se busca y lo
   que se compara entre columnas. Pequeño para que no grite, pero alto
   para que se encuentre sin bajar. */
.coleccion__precio {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: var(--titulo-tracking);
  margin-bottom: var(--sp-1);
}

.coleccion__resumen {
  font-size: var(--step--1);
  color: var(--niebla);
  margin-bottom: var(--sp-1);
}

.coleccion__lista {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* Marca de viñeta: un punto, nunca una raya */
.coleccion__lista li {
  position: relative;
  padding-left: 1.1rem;
}

.coleccion__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sinu);
}

.coleccion__lista li strong {
  font-weight: 500;
}

.coleccion__enlace {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso-medio);
  font-size: var(--step-1);
  letter-spacing: var(--titulo-tracking);
  margin-top: var(--sp-2);
  justify-self: start;
  transition: color 0.3s var(--ease);
}

.coleccion__enlace:hover,
.coleccion__enlace:focus-visible {
  color: var(--sinu);
}

@media (max-width: 900px) {
  /* En una columna no hay nada que alinear: se apaga el subgrid */
  .colecciones {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--sp-6);
  }

  .coleccion {
    grid-row: auto;
    grid-template-rows: none;
    gap: var(--sp-2);
  }

  .coleccion__foto {
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   CONMUTADOR — solo fotografía / fotografía y video.
   Son seis paquetes en total y enseñar los seis a la vez satura: se muestran
   tres cada vez. Hecho con radios y selectores de hermano, así que funciona
   sin una línea de JavaScript.
   -------------------------------------------------------------------------- */
.conmutador {
  display: block;
  text-align: center;
}

/* El radio sigue siendo enfocable con el teclado: se esconde recortándolo,
   no con display:none */
.conmutador__radio {
  /* Va oculto pero presente para el lector de pantalla. El color es para que
     no quede un negro de fabrica suelto en el arbol; no se ve. */
  color: inherit;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tiene que parecer pulsable: dos etiquetas sueltas con un punto quedaban
   elegantes pero nadie sabía que se podían tocar. Con la pastilla se ve el
   control; el verde marca cuál está activo sin lugar a dudas. */
.conmutador__botones {
  display: inline-flex;
  gap: 2px;
  background: var(--arena);
  padding: 3px;
  margin: 0 var(--borde) var(--sp-6);
}

.conmutador__boton {
  padding: 0.65rem var(--sp-3);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--niebla);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.conmutador__boton:hover {
  color: var(--tinta);
}

#modo-fotos:checked ~ .conmutador__botones [for="modo-fotos"],
#modo-video:checked ~ .conmutador__botones [for="modo-video"] {
  background: var(--sinu);
  color: var(--nata);
}

#modo-fotos:focus-visible ~ .conmutador__botones [for="modo-fotos"],
#modo-video:focus-visible ~ .conmutador__botones [for="modo-video"] {
  outline: 2px solid var(--sinu);
  outline-offset: 3px;
}

.modo {
  display: none;
}

#modo-fotos:checked ~ .modo--fotos,
#modo-video:checked ~ .modo--video {
  display: block;
}

@media (max-width: 520px) {
  .conmutador__botones {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .conmutador__boton {
    text-align: center;
    padding-inline: var(--sp-1);

    /* "FOTOGRAFIA Y VIDEO" se partia en dos lineas y "SOLO FOTOGRAFIA" no:
       la pastilla quedaba coja y de 63px de alto. Con el cuerpo un paso mas
       abajo y la mitad de prosa entre letras las dos etiquetas caben en una
       linea dentro de los 164px que tiene cada mitad a 375. */
    /* La escala no baja de --step--1; 0.75rem es el paso siguiente
       (razon 1.125) y solo vive aqui. */
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* La duración del cubrimiento, bajo el nombre de la colección */
.coleccion__horas {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--sinu);
  margin-top: calc(var(--sp-3) * -1 + 0.25rem);
}

/* Las líneas que sólo trae esta colección y las de abajo no */
.coleccion__lista li strong {
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   EL PROCESO — cuatro pasos, con banda propia
   La cifra va enorme y en tinta muy diluida: hace de fantasma detrás del
   título y deja leer la secuencia sin líneas ni flechas.
   -------------------------------------------------------------------------- */
.proceso {
  padding: var(--sp-7) 0;
  margin-bottom: var(--sp-7);
}

.proceso .rotulo {
  padding-bottom: var(--sp-6);
}

.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6) clamp(var(--sp-3), 3vw, var(--sp-5));
  padding: 0 var(--borde);
  max-width: var(--medida-pagina);
  margin-inline: auto;
}

.paso {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  justify-items: center;
  text-align: center;
  /* La cifra mide 80px de alto: sin este hueco pisa el titulo */
  padding-top: clamp(5rem, 7vw, 6.5rem);
}

.paso__numero {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: clamp(4.5rem, 8vw, 7rem);
  line-height: 0.78;
  letter-spacing: var(--titulo-tracking);
  /* Tinta al 25%: sigue siendo fantasma, pero ya se lee sobre --arena.
     En el color del fondo (--nata) desaparecía. */
  color: rgba(var(--p-tinta-rgb), 0.25);
  pointer-events: none;
  user-select: none;
}

.paso__titulo {
  position: relative;
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso-medio);
  font-size: calc(var(--step-2) * var(--titulo-ajuste));
  line-height: 1.1;
  letter-spacing: var(--titulo-tracking);
}

.paso__texto {
  color: var(--niebla);
  font-size: var(--step--1);
  max-width: 34ch;
  margin-inline: auto;
}

/* Franja intermedia: con 4 columnas los textos quedaban muy estrechos.
   De 781 a 980 van en 2x2. */
@media (min-width: 781px) and (max-width: 980px) {
  .pasos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  .pasos {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .paso {
    /* La cifra mide 56px de alto aqui: 2.5rem (40px) la hacia pisar
       el titulo 16px */
    padding-top: 4.25rem;
  }
}

/* --------------------------------------------------------------------------
   PREGUNTAS — acordeón nativo (<details>), sin JS y sin líneas
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0;
  padding: 0 var(--borde) var(--sp-7);
  /* Mas estrecha que el resto y centrada: una pregunta de una linea
     estirada a 1172px no se lee, se recorre. Es la unica seccion que se
     sale de --medida-pagina, y lo hace centrada para que se vea querido. */
  max-width: 58rem;
  margin-inline: auto;
  width: 100%;
}

.faq__item {
  /* Filete en vez de caja: es un acordeon, no una lista de tarjetas */
  border-bottom: 1px solid var(--linea);
  padding: var(--sp-4) 0;
}

.faq__item:first-of-type {
  border-top: 1px solid var(--linea);
}

.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso-medio);
  font-size: var(--step-1);
  letter-spacing: var(--titulo-tracking);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:focus-visible {
  outline: 2px solid var(--sinu);
  outline-offset: 4px;
}

.faq__mas {
  flex: none;
  color: var(--sinu);
  font-size: var(--step-1);
  line-height: 1;
  transition: transform 0.3s var(--ease);
}

.faq__item[open] .faq__mas {
  transform: rotate(45deg);
}

.faq__respuesta {
  color: var(--niebla);
  max-width: var(--medida);
  padding-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   COLECCIONES APILADAS — un panel por colección
   La fotografía NO llega al borde: flota dentro del panel con margen por
   los cuatro lados, y el conjunto respira. Así lee como página impresa y
   no como banda de web. El lado de la foto alterna en cada colección.
   -------------------------------------------------------------------------- */
.colecciones--apiladas {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  row-gap: var(--sp-3);
  max-width: 80rem;
  margin-inline: auto;
}

.colecciones--apiladas .coleccion {
  grid-row: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(6, auto);
  column-gap: clamp(var(--sp-5), 6vw, var(--sp-7));
  row-gap: 0;
  align-content: center;
  align-items: center;
  /* Las tres iguales: la de doce horas lista un ítem más y sin esto
     quedaba más alta que las otras dos */
  min-height: 39rem;
  background: var(--arena);
  /* El margen del panel: es lo que separa la fotografía del filo */
  padding: clamp(var(--sp-5), 5vw, var(--sp-7)) clamp(var(--sp-5), 6vw, var(--sp-7));
  overflow: hidden;
}

/* Retrato de tamaño fijo, centrado en su mitad y sin tocar ningún borde.
   El tamaño lo manda el ALTO, no el ancho de la columna: si lo mandara el
   ancho, la foto cambiaría de tamaño cada vez que alterna de lado y las
   tres tarjetas acabarían con alturas distintas. */
.colecciones--apiladas .coleccion__foto {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  aspect-ratio: 4 / 5;
  height: clamp(22rem, 34vw, 30rem);
  width: auto;
  min-height: 0;
  justify-self: center;
  align-self: center;
  margin: 0;
  background: none;
}

/* La imagen va absoluta: si se deja en flujo, una foto vertical impone su
   alto y estira el panel */
.colecciones--apiladas .coleccion__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.colecciones--apiladas .coleccion:hover .coleccion__foto img {
  transform: scale(1.04);
}

.colecciones--apiladas .coleccion > *:not(.coleccion__foto) {
  grid-column: 1;
}

/* El lado alterna, como en las láminas */
.colecciones--apiladas .coleccion:nth-child(even) > .coleccion__foto {
  grid-column: 1;
}

.colecciones--apiladas .coleccion:nth-child(even) > *:not(.coleccion__foto) {
  grid-column: 2;
}

/* Jerarquía dentro del panel */
.colecciones--apiladas .coleccion__horas {
  color: var(--niebla);
  padding-bottom: var(--sp-2);
}

.colecciones--apiladas .coleccion__nombre {
  font-size: calc(var(--step-3) * var(--titulo-ajuste));
  padding-bottom: var(--sp-2);
}

/* El precio sube un escalón: es el segundo dato de la tarjeta, después
   del nombre. Antes empataba con el enlace, que además iba más pesado. */
.colecciones--apiladas .coleccion__precio {
  font-size: var(--step-2);
  padding-bottom: var(--sp-4);
}

/* La frase con carácter sube a cuerpo de lectura; la lista de abajo se
   queda en el escalón pequeño. Antes medían las dos lo mismo. */
.colecciones--apiladas .coleccion__resumen {
  display: block;
  font-size: var(--step-0);
  max-width: 40ch;
  padding-bottom: var(--sp-3);
}

.colecciones--apiladas .coleccion__lista {
  gap: 0.6rem;
}

/* Un enlace no puede pesar más que el precio. Baja a versalitas pequeñas
   y se queda con el verde: el acento marca lo accionable, no la etiqueta. */
.colecciones--apiladas .coleccion__enlace {
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--sinu);
  padding-top: var(--sp-4);
}

/* La flecha se adelanta al pasar el cursor por cualquier parte del panel */
.colecciones--apiladas .coleccion__enlace::after {
  content: "→";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.4s var(--ease);
}

.colecciones--apiladas .coleccion:hover .coleccion__enlace::after {
  transform: translateX(0.35em);
}

/* --------------------------------------------------------------------------
   CIERRE  dos fotografias a sangre con el mensaje encima
   Antes era una banda verde plana. Las fotos se eligieron midiendo: baja
   saturacion (12.3 y 10.2) y luminosidad media, para que el velo no tenga
   que ser tan oscuro que las mate.
   -------------------------------------------------------------------------- */
.cierre {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(28rem, 55vh, 40rem);
  padding: clamp(var(--sp-6), 8vw, var(--sp-7)) var(--borde);
  text-align: center;
  color: var(--nata);
  overflow: hidden;
}

.cierre__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Sin fila explicita, el alto intrinseco de la foto manda: las imagenes
     salian a 949px dentro de una caja de 495 y el cover recortaba por
     abajo en vez de centrar. */
  grid-template-rows: 100%;
}

.cierre__fondo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/* Velo suave: no es para el contraste del texto (eso lo resuelve el panel),
   sino para que las fotos retrocedan y el panel no parezca pegado encima. */
.cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--velo-foto);
}

/* El texto va sobre superficie propia, no sobre la fotografia. Medido: justo
   debajo del titulo hay manchas al 87.8% de luminosidad (un vestido blanco).
   Para que --nata pasara 4.5:1 encima de eso haria falta un velo del 82%, que
   deja las fotos en negro. Con panel solido el contraste es 13.14 y las fotos
   se ven enteras a los lados. */
.cierre__contenido {
  max-width: min(46rem, 100%);
  background: var(--fondo-oscuro);
  padding: clamp(var(--sp-5), 5vw, var(--sp-6)) clamp(var(--sp-4), 5vw, var(--sp-6));
}

.cierre__titulo {
  font-family: var(--fuente-titulo);
  font-weight: var(--titulo-peso);
  font-size: calc(var(--step-4) * var(--titulo-ajuste));
  line-height: var(--titulo-interlinea);
  letter-spacing: var(--titulo-tracking);
}

.cierre__texto {
  font-size: var(--step-0);
  max-width: 42ch;
  margin-inline: auto;
  padding-top: var(--sp-3);
}

.cierre__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-5);
}

.cierre__enlace {
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--linea-inversa-tenue);
  transition: border-color 0.3s var(--ease);
}

.cierre__enlace:hover,
.cierre__enlace:focus-visible {
  border-bottom-color: var(--nata);
}

@media (max-width: 620px) {
  /* En movil una sola fotografia: dos mitades de 187px no son fotografia,
     son dos tiras. */
  .cierre__fondo {
    grid-template-columns: 1fr;
  }

  .cierre__fondo img:last-child {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Color de las tres colecciones
   Jairo: "que no se vean tan iguales". Antes las tres iban en --arena y
   eran tres bandas identicas. Ahora la del medio manda.

   Los colores NO estan aqui: son la CAPA 3 de paleta.css (--pack-1-*,
   --pack-2-*, --pack-3-*). Para recolorear los paquetes se toca alli.
   -------------------------------------------------------------------------- */
.colecciones--apiladas .coleccion:nth-child(1) {
  background: var(--pack-1-fondo);
  color: var(--pack-1-texto);
}

.colecciones--apiladas .coleccion:nth-child(2) {
  background: var(--pack-2-fondo);
  color: var(--pack-2-texto);
}

.colecciones--apiladas .coleccion:nth-child(3) {
  background: var(--pack-3-fondo);
  color: var(--pack-3-texto);
}

/* --- La oscura invierte todo su texto ---------------------------------- */
.colecciones--apiladas .coleccion:nth-child(2) .coleccion__horas,
.colecciones--apiladas .coleccion:nth-child(2) .coleccion__resumen {
  color: var(--pack-2-suave);
}

.colecciones--apiladas .coleccion:nth-child(2) .coleccion__nombre,
.colecciones--apiladas .coleccion:nth-child(2) .coleccion__precio,
.colecciones--apiladas .coleccion:nth-child(2) .coleccion__lista {
  color: var(--pack-2-texto);
}

.colecciones--apiladas .coleccion:nth-child(2) .coleccion__lista li::before,
.colecciones--apiladas .coleccion:nth-child(2) .coleccion__enlace {
  color: var(--pack-2-acento);
  background: var(--pack-2-acento);
}

/* El ::before es un punto (usa background) y el enlace es texto (usa color):
   la regla de arriba les da los dos, aqui se corrige cada uno. */
.colecciones--apiladas .coleccion:nth-child(2) .coleccion__enlace {
  background: none;
}

/* El video de la coleccion con video ocupa el mismo marco que las fotos.
   Va mudo, en bucle y con preload="none": el archivo son 661 KB, pero no
   tiene sentido bajarlo hasta que el modo con video esta a la vista. */
.colecciones--apiladas .coleccion__foto--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 820px) {
  .colecciones--apiladas .coleccion {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
    padding: var(--sp-4);
    row-gap: 0;
  }

  /* Hay que repetir el :not() de la regla de escritorio: el argumento de
     :not() suma especificidad, así que sin él la regla de arriba gana, el
     texto se queda en la columna 2 y la rejilla crea una columna implícita
     que deja la foto en 0px */
  .colecciones--apiladas .coleccion > *,
  .colecciones--apiladas .coleccion > *:not(.coleccion__foto),
  .colecciones--apiladas .coleccion:nth-child(even) > *:not(.coleccion__foto) {
    grid-column: 1;
    grid-row: auto;
  }

  /* En una columna el tamaño lo manda el ancho, no el alto: con el
     height fijo del escritorio la foto salía a 469px en una pantalla
     de 375 y el panel se la comía */
  .colecciones--apiladas .coleccion__foto {
    /* Retrato suave en vez del 4/3 apaisado de antes: en movil son fotos
       verticales y en apaisado se les iba medio cuerpo. En una pantalla de
       375 la foto pasa de 251 a 402px de alto. Se paso por 6/5 y por 1/1 y
       las dos veces se quedaba baja. De paso el recorte afloja: el marco
       deja ver el 80% del alto original en vez del 67% que dejaba el
       cuadrado, asi que las parejas entran con mas aire. */
    aspect-ratio: 5 / 6;
    width: auto;
    height: auto;
    justify-self: stretch;

    /* EXCEPCION al "la foto no toca el borde" del escritorio: en movil el
       panel solo tiene 375px y con el margen por los cuatro lados la foto
       se quedaba en 271, demasiado estrecha para ser el gancho de la
       tarjeta. Aqui sale a sangre por arriba y por los lados hasta el filo
       del panel (271 -> 319) y solo conserva el margen de abajo, contra el
       texto. En escritorio no cambia nada. */
    margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   Reveal base — el contenido es visible si el JS no carga
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
}


/* --------------------------------------------------------------------------
   Revelado de foto — el marco se destapa y el interior deshace su escala
   para que la fotografía no se deforme. Los dos los crea bodas.js: sin JS,
   sin movimiento reducido o fuera de las páginas del portafolio, estas
   reglas no llegan a aplicarse a nada.
   -------------------------------------------------------------------------- */
.foto-marco,
.foto-marco__interior {
  display: block;
  width: 100%;
  height: 100%;
}

/* La ventana. El interior queda hasta seis veces más ancho que ella mientras
   se abre, y esto es lo único que lo mantiene dentro. */
.foto-marco {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD: prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
  }
}

/* ==========================================================================
   INVITACION - el bloque de llamada a la accion del sitio.

   Foto vertical a un lado, titular grande + rotulo en versalitas + dos
   botones al otro. Va al final de cada historia y de cada listado: es la
   salida hacia el formulario para quien acaba de ver el trabajo.

   Los tokens se declaran DENTRO del bloque, no en un :root, para que las
   dos copias (styles.css y bodas.css) sean identicas y no dependan del
   :root de cada hoja. Mismo criterio que .menu y .footer.

   CONTRASTE medido sobre --superficie (#eae4d7), que es la superficie
   clara mas oscura del sistema:
     titular  --texto          11.31
     rotulo   --texto-acento    5.11
     boton    --cta-texto sobre --cta-fondo   5.94
   ========================================================================== */

.invitacion {
  --inv-fondo: var(--superficie);
  --inv-texto: var(--texto);
  --inv-acento: var(--texto-acento);
  --inv-cta-fondo: var(--cta-fondo);
  --inv-cta-texto: var(--cta-texto);
  --inv-cta-hover: var(--cta-fondo-hover);
  --inv-linea: var(--cta-linea);
  --inv-borde: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --inv-alto: clamp(4rem, 2rem + 7vw, 8rem);
  --inv-ancho: 80rem;
  --inv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --inv-fuente-titulo: "Cormorant", Georgia, "Times New Roman", serif;
  --inv-fuente-texto: "Instrument Sans", system-ui, -apple-system, sans-serif;

  background: var(--inv-fondo);
  color: var(--inv-texto);
  font-family: var(--inv-fuente-texto);
  padding: var(--inv-alto) var(--inv-borde);
}

/* Dos columnas y dos filas. La foto ocupa las dos filas, asi que es ella
   la que fija el alto: el titular queda pegado por abajo al centro y el
   pie por arriba, y el bloque de texto sale centrado contra la foto sin
   necesidad de alturas fijas. */
.invitacion__inner {
  /* fit-content y no un ancho fijo: con la columna de texto en 1fr la
     rejilla ocupaba los 1172px de la pagina pero el texto acababa en el
     1067, y el bloque se veia descolgado a la izquierda (46px de aire a
     un lado, 198 al otro). Midiendo lo que ocupa de verdad, el auto de
     los margenes lo centra: unos 120px iguales a cada lado. */
  width: fit-content;
  max-width: min(var(--inv-ancho), 100%);
  margin-inline: auto;
  display: grid;
  /* La foto, fija en unos 390px: es la proporcion de la referencia sobre
     1280 y deja el bloque entero por debajo de 900px de alto, que cabe en
     una pantalla de portatil. */
  grid-template-columns: clamp(15rem, 30vw, 24.5rem) minmax(0, auto);
  grid-template-areas:
    "foto titulo"
    "foto pie";
  /* La fila separa el titular del rotulo. La referencia deja ahi un hueco
     grande: pegados, el rotulo parece un subtitulo del titular y no la
     linea que lleva al boton. */
  gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 6vw, 6rem);
}

.invitacion__foto {
  grid-area: foto;
  margin: 0;
}

/* 2/3 es la proporcion nativa de todas las fotos elegidas: con
   aspect-ratio no se recorta nada y no hay salto de layout al cargar. */
.invitacion__foto img {
  width: 100%;
  /* height:auto anula el atributo height del <img>, que si no se queda
     como alto usado y deja sin efecto al aspect-ratio. bodas.css ya lo
     hace en su regla global de img; styles.css no, y alli la foto salia
     a 1600px de alto. Va en el componente para que las dos copias sean
     iguales y no dependan de la hoja que las aloja. */
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  /* B/N: la paleta es pastel y una foto a color saturado se le pelea.
     Mismo tratamiento que las fotos de about-me. */
  filter: grayscale(1) contrast(1.02);
}

.invitacion__titulo {
  grid-area: titulo;
  align-self: end;
  font-family: var(--inv-fuente-titulo);
  font-weight: 300;
  font-size: clamp(2.45rem, 1.6rem + 3.6vw, 4.1rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
}

.invitacion__titulo span {
  display: block;
}

.invitacion__pie {
  grid-area: pie;
  align-self: start;
}

.invitacion__rotulo {
  /* Proporcion medida en la referencia: el rotulo va a algo mas de la
     mitad del titular (48/27). A 1.6rem contra un titular de 4.1rem se
     quedaba en un tercio y no sostenia el bloque. */
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.9rem);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--inv-acento);
}

.invitacion__acciones {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.invitacion__cta {
  display: inline-block;
  padding: 1.0625rem 2.5rem;
  background: var(--inv-cta-fondo);
  color: var(--inv-cta-texto);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: background-color 0.3s var(--inv-ease),
    color 0.3s var(--inv-ease);
}

.invitacion__cta:hover,
.invitacion__cta:focus-visible {
  background: var(--inv-cta-hover);
  color: var(--inv-cta-texto);
}

/* Secundario: solo linea, como el boton de la referencia. El borde va en
   box-shadow y no en border para que los dos botones midan igual de alto
   sin tener que restar el grosor al padding. */
.invitacion__cta--linea {
  background: transparent;
  color: var(--inv-acento);
  box-shadow: inset 0 0 0 1px var(--inv-linea);
}

.invitacion__cta--linea:hover,
.invitacion__cta--linea:focus-visible {
  background: var(--inv-cta-fondo);
  color: var(--inv-cta-texto);
}

/* En vertical se apila en el orden en que se lee: pregunta, foto,
   respuesta. La referencia monta el titular ENCIMA de la foto y ahi el
   texto se pierde sobre las zonas claras; aqui no se solapan. */
@media (max-width: 56rem) {
  .invitacion__inner {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titulo"
      "foto"
      "pie";
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }

  .invitacion__foto img {
    max-height: 70vh;
  }
}