/* ============================================================================
 *  PAGINAS  ·  el estilo particular de cada hoja del libro
 * ==========================================================================*/

/* ---------------------------------------------------------------------
 * 1 · PORTADA
 * -------------------------------------------------------------------*/
.pagina--portada .pagina__velo {
  background: linear-gradient(180deg,
    rgba(251,246,238,.9) 0%, rgba(247,238,226,.76) 45%, rgba(240,226,206,.92) 100%);
}
.pagina--portada .pagina__cuerpo {
  gap: var(--s1);
  justify-content: center;
  /* hueco abajo para que la pista "desliza para abrir" no pise al texto */
  padding-bottom: calc(var(--pw) * .128);
}

.portada__medallon {
  position: relative;
  width: 58%;
  aspect-ratio: 3 / 4;
  margin-block: var(--s1) var(--s2);
  flex: none;
}
.portada__foto {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% calc(var(--pw)*.01) calc(var(--pw)*.01) / 38% 38% calc(var(--pw)*.01) calc(var(--pw)*.01);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(107,53,36,.28);
}
.portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.portada__medallon::before,
.portada__medallon::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.portada__medallon::before {
  inset: calc(var(--pw) * -.024);
  border: 1.5px solid var(--dorado);
  border-radius: 50% 50% calc(var(--pw)*.014) calc(var(--pw)*.014) / 38% 38% calc(var(--pw)*.014) calc(var(--pw)*.014);
  opacity: .85;
}
.portada__medallon::after {
  inset: calc(var(--pw) * -.05);
  border: 1px solid var(--dorado-claro);
  border-radius: 50% 50% calc(var(--pw)*.018) calc(var(--pw)*.018) / 38% 38% calc(var(--pw)*.018) calc(var(--pw)*.018);
  opacity: .45;
}
.portada__rosa {
  position: absolute;
  z-index: 3;
  width: calc(var(--pw) * .155);
  height: calc(var(--pw) * .155);
  filter: drop-shadow(0 2px 4px rgba(120,70,45,.22));
}
.portada__rosa--izq { left: calc(var(--pw) * -.115); top: 42%; }
.portada__rosa--der { right: calc(var(--pw) * -.10); top: 20%; width: calc(var(--pw) * .13); height: calc(var(--pw) * .13); }

.portada__nombres {
  margin: 0;
  font-family: var(--f-script);
  font-weight: 400;
  line-height: .96;
  color: var(--terracota-oscura);
  font-size: var(--t-3xl);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.portada__nombres em {
  display: block;
  font-family: var(--f-libro);
  font-style: normal;
  font-size: .32em;
  color: var(--dorado-oscuro);
  margin-block: calc(var(--pw) * -.005) calc(var(--pw) * -.012);
  letter-spacing: .05em;
}
.portada__fecha {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--olivo-oscuro);
}
.portada__lugar {
  margin: 0;
  font-size: var(--t-xs);
  font-style: italic;
  letter-spacing: .08em;
  color: var(--tinta-tenue);
}

/* ---------------------------------------------------------------------
 * 2 · VERSICULO
 * -------------------------------------------------------------------*/
.pagina--versiculo .pagina__cuerpo { gap: var(--s3); }
.versiculo__texto {
  font-family: var(--f-libro);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.45;
  color: var(--terracota-oscura);
  margin: 0;
  text-wrap: balance;
}
.versiculo__cita {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--olivo-oscuro);
  margin: 0;
}
.versiculo__cruz { color: var(--dorado); opacity: .7; }
.versiculo__cruz .ico { width: calc(var(--pw) * .09); height: calc(var(--pw) * .09); stroke-width: 1; }

/* ---------------------------------------------------------------------
 * 3 · NUESTRA HISTORIA
 * -------------------------------------------------------------------*/
.pagina--historia .pagina__cuerpo {
  gap: var(--s2);
  text-align: left;
}
.historia__encabezado { width: 100%; text-align: center; }
.historia__capitular::first-letter {
  float: left;
  font-family: var(--f-script);
  font-size: 3.1em;
  line-height: .78;
  padding-right: .06em;
  margin-top: .06em;
  color: var(--terracota);
}
.historia__nota {
  display: flex;
  align-items: center;
  gap: var(--s1);
  width: 100%;
  padding: var(--s1) var(--s2);
  border-left: 2px solid var(--dorado);
  background: rgba(255,252,246,.55);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--tinta-suave);
  line-height: 1.5;
}
.historia__nota .ico {
  width: calc(var(--pw) * .07);
  height: calc(var(--pw) * .07);
  flex: none;
  color: var(--terracota);
}

/* ---------------------------------------------------------------------
 * 4 · CUENTA REGRESIVA
 * -------------------------------------------------------------------*/
.pagina--fecha .pagina__cuerpo { gap: var(--s2); }
.fecha__grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
}
.fecha__grande span { display: block; }
.fecha__dia {
  font-family: var(--f-libro);
  font-weight: 600;
  font-size: calc(var(--pw) * .175);
  line-height: .9;
  color: var(--terracota-oscura);
}
.fecha__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pw) * .012);
  padding-inline: var(--s1);
  border-inline: 1px solid rgba(193,154,92,.4);
}
.fecha__mes, .fecha__anio {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--olivo-oscuro);
}
.fecha__semana {
  font-family: var(--f-script);
  font-size: var(--t-xl);
  color: var(--terracota);
}

/* ---------------------------------------------------------------------
 * 5 y 6 · CEREMONIA Y RECEPCION
 * -------------------------------------------------------------------*/
.pagina--lugar .pagina__cuerpo { gap: var(--s2); }
.lugar__hora {
  font-family: var(--f-script);
  font-size: calc(var(--pw) * .17);
  line-height: 1;
  color: var(--terracota);
}
.lugar__nombre {
  font-family: var(--f-libro);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.2;
  color: var(--terracota-oscura);
  margin: 0;
  text-wrap: balance;
}
.lugar__ref {
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--tinta-tenue);
  line-height: 1.45;
  margin: 0;
}

/* ---------------------------------------------------------------------
 * 6b · CÓMO LLEGAR  ·  el mapa, rasgado por arriba y por abajo
 * -------------------------------------------------------------------
 *  Los lados quedan rectos y el borde de arriba y el de abajo van
 *  rasgados, como una foto arrancada de una tira de papel.
 * -------------------------------------------------------------------*/
.pagina--mapa .pagina__cuerpo { gap: var(--s2); }

.mapa {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: linear-gradient(160deg, #e9e2d2, #dcd3bf);
  /* el recorte de tira lo pone el JS en línea */
}
/* El papel claro que asoma por el rasgado, como en las hojas */
.mapa::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fffdf8;
  transform: scale(1.03);
}
.mapa__lienzo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Vista previa mientras el mapa aún no está puesto */
.mapa__previo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient( 36deg, rgba(255,255,255,.5) 0 2px, rgba(255,255,255,0) 2px 26px),
    repeating-linear-gradient(-52deg, rgba(255,255,255,.45) 0 2px, rgba(255,255,255,0) 2px 34px),
    radial-gradient(circle at 62% 30%, rgba(176,184,142,.5), rgba(176,184,142,0) 55%),
    linear-gradient(160deg, #eae3d3, #ddd4c0);
}
.mapa--cargado .mapa__previo { display: none; }
.mapa__pin {
  display: grid;
  place-items: center;
  width: calc(var(--pw) * .13);
  height: calc(var(--pw) * .13);
  color: var(--terracota-oscura);
  animation: latePin 2.2s ease-in-out infinite;
}
.mapa__pin .ico { width: 100%; height: 100%; stroke-width: 1.2; }
@keyframes latePin {
  0%, 100% { transform: translateY(0)     scale(1); }
  50%      { transform: translateY(-14%)  scale(1.06); }
}

/* Escudo: hasta que no se toca, el dedo sigue pasando páginas */
.mapa__escudo {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Arriba, no abajo: abajo tapaba justo el pin de la iglesia. */
  padding-top: calc(var(--pw) * .045);
  background: linear-gradient(0deg, rgba(52,28,16,0) 62%, rgba(52,28,16,.30) 100%);
}
.mapa--activo .mapa__escudo { display: none; }
.mapa__aviso {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .42em .9em;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crema);
  background: rgba(75,37,24,.9);
  border: 1px solid rgba(226,200,145,.42);
  white-space: nowrap;
}
.mapa__aviso .ico { width: 1.1em; height: 1.1em; }

.mapa__direccion {
  font-size: var(--t-xs);
  font-style: italic;
  letter-spacing: .06em;
  color: var(--tinta-tenue);
  margin: 0;
}

/* ---------------------------------------------------------------------
 * 7 · PADRES Y PADRINOS
 * -------------------------------------------------------------------*/
.pagina--familia .pagina__cuerpo {
    gap: 8px !important;
}
.familia__bloque { width: 100%; }
.familia__titulo {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--olivo-oscuro);
    margin: 0 0 2px;

}
.familia__nombre {
    font-family: var(--f-libro);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--terracota-oscura);
    margin: 0;
}
.familia__rol {
  display: block;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: var(--t-md);
  letter-spacing: 0;
  text-transform: none;
  color: var(--terracota);
  margin-bottom: -.12em;
}

/* ---------------------------------------------------------------------
 * 8 · GALERIA
 * -------------------------------------------------------------------*/
.pagina--galeria .pagina__cuerpo { justify-content: flex-start; gap: var(--s1); }
/* En el libro abierto la página es más ancha en proporción: caben cuatro
   columnas y el álbum entra entero, sin tener que desplazar nada. */
.libro-caja[data-modo="doble"] .galeria { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------------------
 * 9 · VESTIMENTA
 * -------------------------------------------------------------------*/
.pagina--vestimenta .pagina__cuerpo { gap: var(--s1); }
.vestimenta__codigo {
  font-family: var(--f-script);
  font-size: calc(var(--pw) * .105);
  line-height: 1.05;
  color: var(--terracota-oscura);
  white-space: nowrap;
  margin-bottom: 0 !important;
}
.vestimenta__par {
  display: flex;
  gap: var(--s2);
  width: 100%;
}
.vestimenta__lado {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pw) * .012);
}
.vestimenta__lado .ico {
  width: calc(var(--pw) * .115);
  height: calc(var(--pw) * .115);
  color: var(--terracota);
  stroke-width: 1.2;
}
.vestimenta__quien {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--olivo-oscuro);
}
.vestimenta__que {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------
 * TE INVITAMOS  ·  la hoja personal
 * -------------------------------------------------------------------
 *  Los nombres van uno por línea con la «y» dorada en medio, igual que
 *  los novios en la portada. El cuerpo se ajusta solo con clamp() porque
 *  aquí no se sabe de antemano lo largo que será el nombre: puede llegar
 *  un «Ana Ruiz» o un «María Fernanda de la Cruz Villanueva».
 * -------------------------------------------------------------------*/
.pagina--invitado .pagina__cuerpo { gap: var(--s2); }

.invitado__nombres {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-script);
  font-weight: 400;
  line-height: 1.02;
  color: var(--terracota-oscura);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  /* El cuerpo lo pone la hoja en línea, calculado según lo largo
     que venga el nombre (mira "medida" en 13-te-invitamos.js). */
  font-size: calc(var(--pw) * .125);
  text-wrap: balance;
  overflow-wrap: anywhere;   /* ni un apellido kilométrico se sale */
}
.invitado__nombre { display: block; }
/* Nombres muy largos: que no se salgan de la hoja */
.invitado__nombre:only-child { font-size: 1em; }

.invitado__y {
  display: block;
  font-family: var(--f-libro);
  font-style: normal;
  font-size: .3em;
  letter-spacing: .06em;
  color: var(--dorado-oscuro);
  margin-block: calc(var(--pw) * .004);
}

/* Versión general (sin nombre en el enlace): algo más discreta */
.invitado__nombres--general {
  font-size: calc(var(--pw) * .095);
  color: var(--terracota);
}

.invitado__texto {
  font-size: var(--t-md);
  line-height: 1.6;
  text-wrap: balance;
}
.invitado__firma {
  margin: 0;
  font-family: var(--f-script);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--terracota);
}

/* A nombre de quién va el pase */
.pase__anombre {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-tenue);
  font-style: italic;
}
.pase__anombre strong {
  display: inline-block;
  margin-top: calc(var(--pw) * .008);
  font-style: normal;
  font-weight: 600;
  font-size: calc(var(--t-md) * 1.05);
  color: var(--terracota-oscura);
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------------
 * COLOFÓN  ·  la hoja de reserva que cierra el libro en par
 * -------------------------------------------------------------------*/
.pagina--colofon .pagina__cuerpo { gap: var(--s3); }
.colofon__firma {
  margin: 0;
  font-family: var(--f-script);
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--terracota-oscura);
}
.colofon__hashtag {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--olivo-oscuro);
}

/* ---------------------------------------------------------------------
 * 10 · PASES Y NIÑOS
 * -------------------------------------------------------------------*/
.pagina--pases .pagina__cuerpo { gap: var(--s2); }
.pase__sello {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--pw) * .30);
  height: calc(var(--pw) * .30);
  border-radius: 50%;
  border: 1px dashed rgba(193,154,92,.6);
  color: var(--terracota-oscura);
}
.pase__sello::after {
  content: '';
  position: absolute;
  inset: calc(var(--pw) * .022);
  border-radius: 50%;
  border: 1px solid rgba(193,154,92,.35);
}
.pase__sello .pase__numero {
  font-family: var(--f-script);
  font-size: calc(var(--pw) * .14);
  line-height: 1;
}
.pase__leyenda {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--olivo-oscuro);
  margin-top: calc(var(--pw) * -.01);
}

/* ---------------------------------------------------------------------
 * 11 · MESA DE REGALOS
 * -------------------------------------------------------------------*/
.pagina--regalos .pagina__cuerpo { gap: var(--s2); }
.regalos__titular {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--tinta-tenue);
  font-style: italic;
}

/* ---------------------------------------------------------------------
 * 12 · CONFIRMACION
 * -------------------------------------------------------------------*/
.pagina--rsvp .pagina__cuerpo { gap: var(--s2); }
.rsvp__botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  width: 100%;
}

/* ---------------------------------------------------------------------
 * 13 · CIERRE
 * -------------------------------------------------------------------*/
.pagina--cierre .pagina__velo {
  background: linear-gradient(180deg,
    rgba(250,243,232,.82) 0%, rgba(244,232,216,.7) 40%, rgba(238,222,202,.94) 100%);
}
.pagina--cierre .pagina__cuerpo { gap: var(--s2); }
.cierre__frase {
  font-family: var(--f-script);
  font-size: var(--t-2xl);
  line-height: 1.18;
  color: var(--terracota-oscura);
  margin: 0;
  text-wrap: balance;
}
.cierre__firma {
  font-family: var(--f-script);
  font-size: var(--t-xl);
  color: var(--terracota);
  /* el ampersand de Great Vibes viene muy pegado: se le da aire */
  word-spacing: .2em;
}
.cierre__hashtag {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--olivo-oscuro);
}
.cierre__volver {
  margin-top: var(--s1);
}

/* ---------------------------------------------------------------------
 * VERSO ORNAMENTAL  ·  el dorso de las hojas en modo de una pagina
 * -------------------------------------------------------------------*/
.pagina--verso {
  background:
    radial-gradient(120% 90% at 80% 4%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
    linear-gradient(158deg, #f8f1e6 0%, #f2e8da 52%, #ebdfcc 100%);
}
.pagina--verso .pagina__cuerpo {
  justify-content: center;
  opacity: .34;
}
.pagina--verso .orn--rosa { width: 42%; height: auto; }

/* ---------------------------------------------------------------------
 * AJUSTES PARA PANTALLAS MUY BAJAS
 * -------------------------------------------------------------------*/
@media (max-height: 620px) {
  .pagina__cuerpo { padding-block: calc(var(--pw) * .075); }
  .portada__medallon { width: 48%; }
}