/* ===================================================
   Estilos globales — Terracota Silvestre
   =================================================== */

:root {
  --color-primario:   #8E563F;
  --color-secundario: #74815C;
  --color-textos:     #1E271D;
  --color-bg1:        #F6E9E1;
  --color-blanco:     #FFFFFF;

  /* Familias tipográficas — cambia la fuente aquí y se aplica en todo */
  --fuente-display: 'Cinzel', serif;                      /* h1, fecha (día/año) */
  --fuente-serif:   'Inria Serif', serif;                 /* h2 */
  --fuente-cuerpo:  'Bricolage Grotesque', sans-serif;    /* h3, h5, p, li, botones… */
  --fuente-script:  'Birthstone', cursive;                /* h4, fecha (mes) */
  --fuente-sello:   'Bpmf Zihi Kai Std', 'Cinzel', serif; /* iniciales M&P */
  --fuente-cita:    'Rouge Script', cursive;              /* cita bíblica */

  /* Tamaños de texto — cambia SOLO estos valores base (mobile).
     En desktop se les suma automáticamente el incremento de abajo. */
  --h1-size: 55px;
  --h2-size: 35px;
  --h3-size: 18px;
  --h4-size: 44px;
  --h5-size: 20px;
  --h6-size: 20px;
  --p-size:  20px;

  /* Incremento de tamaños — 0 en mobile; en desktop se suman (ver @media) */
  --inc-titulo-h1-h2:   0px;   /* solo h1 y h2 */
  --inc-titulo-general: 0px;   /* h3 a h6 */
  --inc-p:              0px;
}

/* Fondo y color de texto del body (el reset base vive en eventos.css) */
body {
  background-color: #F6E9E1;
  color: var(--color-textos); /* 1E271D — texto en general */
}
/* Textura del fondo: deco_0 en mosaico a .3 de opacidad */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url(../media/deco_0.webp) top left repeat;
  opacity: .3;
  pointer-events: none;
}

.contenededor_principal {
  width: 100%;
  overflow: hidden;
}

/* Selección de texto (color de marca) */
::-moz-selection { color: #fff; background: #53210f; }
::selection      { color: #fff; background: #53210f; }

h1 {
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: var(--h1-size);
}

h2 {
  font-family: var(--fuente-serif);
  font-weight: 400;
  font-size: var(--h2-size);
}

h3 {
  font-family: var(--fuente-cuerpo);
  font-weight: 200; /* Extra Light */
  font-size: var(--h3-size);
  letter-spacing: 0.06em; /* 6% */
}

h4 {
  font-family: var(--fuente-script);
  font-weight: 400;
  font-size: var(--h4-size);
}

h5 {
  font-family: var(--fuente-cuerpo);
  font-weight: 400; /* Regular */
  font-size: var(--h5-size);
  letter-spacing: 0.06em; /* 6% */
}

/* P Largo / Párrafo general (por defecto) */
p,
li,
.parrafo_general {
  font-family: var(--fuente-cuerpo);
  font-weight: 200; /* Extra Light */
  font-size: var(--p-size);
  letter-spacing: 0;
}

/* Párrafo resaltado */
.parrafo_resaltado {
  font-family: var(--fuente-cuerpo);
  font-weight: 400; /* Regular */
  font-size: var(--p-size);
}

@media (min-width: 767px) {
  h1 {
    font-size: calc(var(--h1-size) + var(--inc-titulo-h1-h2));
  }

  h2 {
    font-size: calc(var(--h2-size) + var(--inc-titulo-h1-h2));
  }

  h3 {
    font-size: calc(var(--h3-size) + var(--inc-titulo-general));
  }

  h4 {
    font-size: calc(var(--h4-size) + var(--inc-titulo-general));
  }

  h5 {
    font-size: calc(var(--h5-size) + var(--inc-titulo-general));
  }
  p,
  li,
  .parrafo_general,
  .parrafo_resaltado {
    font-size: calc(var(--p-size) + var(--inc-p));
  }
}



/* ===================================================
   Layout — inner de secciones (toda <section> lleva uno)
   =================================================== */
.inner {
  max-width: 850px;
  margin: 0 auto;
  padding: 80px 20px;
}
.inner--full {          /* anula el inner: a sangre, sin padding. Solo cuando se indique */
  max-width: none;
  padding: 0;
}

/* ===================================================
   Botones (primario y secundario)
   =================================================== */
/* Botón secundario (pill con borde) */
.btn-secundario {
  display: inline-block;
  padding: 10px 25px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 40px;
  background: transparent;
  color: var(--color-blanco);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--fuente-cuerpo);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .1em;
  transition: background .2s, color .2s;
}
.btn-secundario:hover {
  background: var(--color-bg1);
  color: var(--color-primario);
}

/* Botón primario (pill relleno) — estilo de todos los botones primarios */
.btn-primario {
  display: inline-block;
  padding: 10px 25px;
  border: 2px solid var(--color-primario);
  border-radius: 40px;
  background: var(--color-primario);
  color: var(--color-blanco);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--fuente-cuerpo);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: filter .2s;
}
.btn-primario:hover { filter: brightness(1.06); }

/* Botones más pequeños en mobile */
@media (max-width: 767px) {
  .btn-primario,
  .btn-secundario { font-size: 18px; }
}

/* Imagen a sangre en mobile (compensa el padding lateral del inner) */
@media (max-width: 767px) {
  .img-sangre {
    margin-left: -30px !important;
    margin-right: -30px !important;
    width: calc(100% + 60px) !important;
    min-width: calc(100% + 60px) !important;
  }
}

/* ===================================================
   INTRO — Sobre de boda
   =================================================== */
#introCTN.intro {
  background: #9B644F;
  overflow: hidden;
}

/* Solapas del sobre — 4 divs cuadrados rotados 45° desde el centro,
   recortados por el overflow del contenedor (sin clip-path, con bordes reales) */
.sobre-flaps {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #9B644F;
}
.sobre__flap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  transform-origin: 0 0;              /* gira desde la esquina que toca el centro */
  box-sizing: border-box;
  background: url(../media/bg-sobre.webp) top left / auto repeat;
}
/* Laterales: cuñas de 90° (van al fondo) */
.sobre__flap--right  { transform: rotate(-45deg); }
.sobre__flap--left   { transform: rotate(-225deg); }
/* Superior: es la solapa de cierre — baja su punta por debajo del centro para pisar
   la inferior, va encima de todas, con esquinas redondeadas y borde interno 20px negro 0.2 */
.sobre__flap--top {
  transform: translateY(8vh) rotate(-150deg) skewX(-30deg);
  border-radius: 40px;
  box-shadow:
    inset 0 0 0 40px rgba(0, 0, 0, .05),
    0 0 4px rgba(0, 0, 0, .5);
}
/* Inferior (cierre): cuña más ancha (120°), la de más arriba, + overlay transparente → negro 0.1 */
.sobre__flap--bottom {
  transform: rotate(30deg) skewX(-30deg);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, .2) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .2);
}

/* Sombra general del sobre, en espacio de pantalla, sobre TODAS las solapas
   (por debajo del sello). Al ser screen-space coincide en cualquier proporción. */
.sobre-sombra {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right, transparent, #000000);
  mix-blend-mode: multiply;   /* color-burn reventaba el contraste en iOS (círculos duros) */
  opacity: .4;
}

/* Papel interior: mismo contorno que la solapa de cierre, detrás de ella.
   Cerrado queda tapado; al abrir la solapa, asoma. */
.sobre-papel {
  position: absolute;
  inset: 0;
  z-index: 1;              /* detrás de la solapa de cierre, delante del fondo */
  overflow: hidden;
  pointer-events: none;
}
.sobre__flap--papel {
  transform: translateY(8vh) rotate(-150deg) skewX(-30deg); /* mismo footprint que la de cierre */
  background: #E7D6C0;     /* papel */
  border-radius: 40px;
  box-shadow: inset 0 8px 20px rgba(60, 28, 14, .18);
}

/* Solapa de cierre (se anima) — recortada en triángulo */
.tapa-cierre {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}
/* Grupo del sello + CTA: encima de la sombra, se anima igual que la solapa */
.tapa-sello {
  position: absolute;
  inset: 0;
  z-index: 4;              /* por encima de la sombra (3): el sello queda limpio */
  transform-origin: 50% 0; /* misma bisagra que la solapa */
}
/* Sello pegado a la punta de la solapa de cierre (centro + el translateY de la solapa) */
.tapa-sello .intro__sello {
  position: absolute;
  left: 50%;
  top: calc(50% + 8vh);
  margin-left: -80px;  /* mitad del ancho (160px) para centrar */
  margin-top: -80px;
}

/* Iniciales sobre el cuerpo del sobre (por debajo de la sombra, se oscurecen igual) */
.intro__contenido {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: calc(58vh + 100px) 24px 24px 24px; /* debajo del sello (que está en la punta de la solapa) */
  box-sizing: border-box;
}

.intro__sello {
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  width: 160px;
  filter: drop-shadow(0 14px 24px rgba(55,22,8,.42));
  transition: transform .35s ease;
}
.intro__sello:hover { transform: scale(1.04); }
.intro__sello:active { transform: scale(.98); }
.intro__sello img { width: 100%; height: auto; display: block; }

.intro__iniciales {
  font-family: var(--fuente-sello);
  font-weight: 400;
  font-size: 34px;
  color: #74452f;
  text-shadow: 0 1px 0 rgba(255,236,224,.13), 0 -1px 1px rgba(45,18,8,.3);
  margin: 0;
  animation: sello-in 1.1s ease both;
}

.intro__cta {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + -2vh - 118px);
  text-align: center;
  font-family: var(--fuente-cuerpo);
  font-weight: 200;
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5d2a19;
  text-shadow: 0 1px 0 rgba(255,236,224,.13), 0 -1px 1px rgba(45,18,8,.3); /* mismo efecto que las iniciales */
  margin: 0;
  animation: sello-in 1.3s ease both;
}

@keyframes sello-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── Desktop ── */
@media (min-width: 768px) {
  /* Desktop: solo se cambian los incrementos; los tamaños base no se tocan. */
  :root {
    --inc-titulo-h1-h2:   5px;   /* h1 y h2 */
    --inc-titulo-general: 1px;   /* h3 a h6 */
    --inc-p:              2px;
  }
  .intro__iniciales { font-size: 40px; }
  .hero__and { width: 280px; }
  /* Fotos con esquinas redondeadas solo en desktop */
  .padres__foto,
  .rsvp__foto { border-radius: 20px; }
}

/* ── Mobile: oscurecidos más suaves ── */
@media (max-width: 767px) {
  .sobre-sombra { opacity: .3; }
}

/* ===================================================
   APERTURA — al hacer clic en el sello (.inConAudio)
   1s: la solapa de cierre se abre ligeramente y luego se difumina todo
   =================================================== */
#introCTN { perspective: 1400px; }

#introCTN.abriendo .tapa-cierre,
#introCTN.abriendo .tapa-sello {
  transform-origin: 50% 0;                 /* bisagra arriba */
  animation: tapa-abrir 2s ease forwards;
}
#introCTN.abriendo {
  animation: intro-salida 2s ease forwards;
}

@keyframes tapa-abrir {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(62deg); }      /* abre hacia afuera hasta ver un poco el papel */
  100% { transform: rotateX(62deg); }
}
@keyframes intro-salida {
  0%   { opacity: 1; filter: blur(0); }
  25%  { opacity: 1; filter: blur(0); }   /* a los 0.5s (25% de 2s) empieza a desaparecer */
  100% { opacity: 0; filter: blur(12px); } /* se difumina todo */
}

/* ===================================================
   HERO
   =================================================== */
.hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 64px 24px 56px;
  overflow: hidden;
}

/* Fondo del hero: div propio, más grande que el contenedor, siempre hero_bg_desktop,
   repetido en X e inclinado (se aprecia sobre todo en desktop) */
.hero__bg {
  position: absolute;
  bottom: calc(50% - 150px);
  left: -100%;
  width: 300%;
  height: 1110px;
  z-index: 0;
  pointer-events: none;
  background: url(../media/hero_bg_desktop.webp) top left repeat-x;
  transform: rotate(-19deg);
  transform-origin: center bottom;
}

/* Flor decorativa */
.hero__deco {
  position: absolute;
  right: -12px;
  top: 32%;
  width: 42%;
  max-width: 240px;
  height: auto;
  pointer-events: none;
}

/* Nombres */
.hero__nombres { position: relative; z-index: 1; width: 100%; }
.hero__pretitulo {
  font-family: var(--fuente-cuerpo);
  font-weight: 200;
  font-size: 16px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-blanco);
  margin: 0 0 10px;
}
.hero__nombre {
  color: var(--color-blanco);
  margin: 0;
  line-height: 1.05;
}
.hero__and {
  display: block;
  width: 220px;
  max-width: 90%;
  height: auto;
  margin: 4px auto;
}

/* Fecha */
.hero__fecha {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .9;
}
.hero__dia  { font-family: var(--fuente-display);      font-weight: 400; font-size: 80px; color: var(--color-primario); line-height: 0.6; }
.hero__mes  { font-family: var(--fuente-script); font-weight: 400; font-size: 80px; color: var(--color-secundario); }
.hero__anio { font-family: var(--fuente-display);      font-weight: 400; font-size: 40px; color: var(--color-primario); }

/* Divisor floral (deco_2) */
.divisor {
  display: block;
  width: 200px;
  max-width: 150px;
  height: auto;
  margin: 40px auto;
}

/* ===================================================
   PADRES
   =================================================== */
.padres { text-align: center; padding-bottom: 10px; }
.padres__inner { padding-bottom: 0; }
.padres__texto { padding: 0 0 8px; }

.padres__pretitulo {           /* tipografía base = h3; aquí solo ajustes */
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-secundario);
  line-height: 1.5;
  margin: 0 0 6px;
}
.padres__titulo {           /* h2 = Inria Serif 35px */
  color: var(--color-primario);
  margin: 0 0 26px;
}
.padres__rol {           /* tipografía base = h4; aquí solo ajustes */
  color: var(--color-secundario);
  margin: 0 0 6px;
}
.padres__nombres {
  font-family: var(--fuente-cuerpo);
  font-weight: 200;
  font-size: 18px;
  color: var(--color-textos);
  line-height: 1.5;
  margin: 0;
}
.padres__amp {
  display: block;
  width: 40px;
  height: auto;
  margin: 16px auto;
}
.padres__foto {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 32px;
}

/* ===================================================
   RSVP / Confirmación
   =================================================== */
.rsvp { position: relative; }
.rsvp__inner { padding-top: 0; }
.rsvp__foto { display: block; width: 100%; height: auto; }

.rsvp__card {
  position: relative;
  background: #FFFFFF;
  border-radius: 22px;
  max-width: 600px;
  margin: -60px auto 0;              /* solapa la foto, centrada */
  padding: 34px 26px 30px;
  box-shadow: 0 12px 30px rgba(60, 28, 14, .10);
  text-align: center;
}

.rsvp__pretitulo {           /* tipografía base = h3; aquí solo ajustes */
  text-transform: uppercase;
  color: var(--color-textos);
  line-height: 1.5;
  margin: 0 0 14px;
}
.rsvp__invitado {                    /* h2 = Inria Serif 35px */
  color: var(--color-primario);      /* 8E563F — solo el nombre del invitado */
  line-height: 1.2;
  margin: 0 0 10px;
}
.rsvp__pases {
  font-family: var(--fuente-cuerpo);
  font-weight: 200;
  font-size: 16px;
  color: #66775A;                    /* cantidad de pases */
  margin: 0;
}
.rsvp__dedicatoria {
  font-size: 18px;
  margin-top: 20px;
}
.rsvp__sep {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
  margin: 24px 0;
}
.rsvp__titulo {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-textos);
  line-height: 1.5;
  margin: 0 0 20px;
}
.rsvp__titulo span { font-weight: 200; }

.rsvp__label {
  display: block;
  width: 100%;
  font-family: var(--fuente-cuerpo);
  font-weight: 200;
  font-size: 15px;
  color: var(--color-textos);
  text-align: center;
  margin: 0;
}

.rsvp__opciones { border: 0; padding: 0; margin: 0 0 18px; }
.rsvp__opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 5px 0;
  border-radius: 10px;
  background: #F8F8F8;
  cursor: pointer;
  /* mismos estilos que p */
  font-family: var(--fuente-cuerpo);
  font-weight: 200;
  font-size: calc(var(--p-size) + var(--inc-p));
  letter-spacing: 0;
  color: var(--color-textos);
  transition: color .2s;
}
.rsvp__opcion:has(input:checked) {
  color: var(--color-primario);
}
/* Radio custom: cuadradito redondeado, blanco, borde textos; activo = primario */
.rsvp__opcion input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--color-textos);
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.rsvp__opcion input[type="radio"]:checked {
  background: var(--color-primario);
  border-color: var(--color-primario);
}

.rsvp__input {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 8px;
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  text-align: center;
  box-sizing: border-box;
}

.rsvp__btn { margin-top: 8px; }   /* solo ajuste; el estilo es .btn-primario */

.rsvp__deco {
  display: block;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  width: 50%;
}

/* ===================================================
   Estilos de texto (Figma)
   =================================================== */
/* H3 resaltado — Bricolage Grotesque Regular 20px, +8% (texto en negrita dentro de un h3) */
h3 bold {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: calc(var(--h3-size) + var(--inc-titulo-general));
  letter-spacing: 0.08em;
}
/* Botones — Bricolage Grotesque Light 20px, line-height 30, +8% */
.botones {
  font-family: var(--fuente-cuerpo);
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.08em;
}

/* ===================================================
   LUGARES (consejo + recepción)
   =================================================== */
.lugares__inner { max-width: 600px; padding-bottom: 120px; }

.lugares {
  position: relative;
  text-align: center;
  color: var(--color-bg1);                 /* texto claro sobre fondo oscuro */
  background: url(../media/trama.webp) top left repeat;
  background-color: #613120;
}

.lugares__anillos {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto 24px;
}

.lugares__titulo {                          /* h3 */
  text-transform: uppercase;
  margin: 0 0 36px;
}

.lugares__bloque { margin-top: 80px; }

.lugares__label {
  opacity: .85;
  margin: 0 0 10px;
}
.lugares__nombre {                          /* h2 */
  color: var(--color-blanco);
  line-height: 1.15;
  margin: 0 0 16px;
}
.lugares__dir {                            /* h3 */
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.6;
  opacity: .9;
  margin: 0 0 22px;
}
/* Nota con líneas a los lados */
.lugares__nota {
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: .85;
  margin-top: 80px;
}
.lugares__nota::before,
.lugares__nota::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #C9954C;
  min-width: 30px;
}
.lugares__nota-mini {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: .08em;
  opacity: .85;
  margin: 0 0 20px;
}

.lugares__sep {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  width: 60%;
  margin: 30px auto;
}

.lugares__deco {
  position: absolute;
  left: 0;
  bottom: -90px;
  width: 130px;
  height: auto;
  pointer-events: none;
}


/* ===================================================
   ITINERARIO
   =================================================== */
.itinerario { text-align: center; }
.itinerario__inner { padding-top: 120px; }

.itinerario__pretitulo {          /* h3; aquí solo ajustes */
  text-transform: uppercase;
  color: var(--color-textos);
  line-height: 1.5;
  margin: 0 0 40px;
}
.itinerario__titulo {             /* h2 */
  color: var(--color-primario);
  margin: 0 0 10px;
}

/* Línea de tiempo — fuera del inner, con scroll horizontal si no entra */
.timeline {
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;             /* centra el track cuando sí entra */
  padding: 30px 0 40px;
  /* Barra de scroll: pulgar primario, fondo transparente */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primario) transparent;
}
.timeline::-webkit-scrollbar { height: 8px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb {
  background: var(--color-primario);
  border-radius: 50px;
}
.timeline__track {
  display: inline-flex;
  gap: 30px;
  padding: 0 30px;
  position: relative;
}
/* Línea punteada continua */
.timeline__track::before {
  content: "";
  position: absolute;
  top: 175px;
  left: 30px;
  right: 30px;
  border-top: 1px dashed #C9954C;
}
.timeline__item {
  flex: 0 0 auto;
  width: 160px;
  position: relative;
  text-align: center;
}
/* Corazón sobre la línea */
.timeline__item::before {
  content: "\2665";                       /* ♥ */
  position: absolute;
  top: 175px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-primario);
  font-size: 25px;
  line-height: 1;
}
.timeline__top {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}
.timeline__icono {
  max-width: 150px;
  height: auto;
  display: block;
}
.timeline__hora {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--color-textos);
}
.timeline__label {
  margin-top: 45px;
  color: var(--color-textos);
  line-height: 1.4;
}

/* Nota (tarjeta blanca) */
.itinerario__nota {
  position: relative;
  background: var(--color-blanco);
  border-radius: 22px;
  padding: 40px 30px;
  box-shadow: 0 12px 30px rgba(60, 28, 14, .08);
}
.itinerario__nota p { margin: 0 0 18px; }
.itinerario__nota p:last-of-type { margin-bottom: 0; }
.itinerario__nota-deco {
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 120px;
  height: auto;
  pointer-events: none;
}

/* Foto a sangre (sin inner) */
.foto-completa {
  display: block;
  width: 100%;
  height: auto;
}

/* ===================================================
   CÓDIGO DE VESTIMENTA
   =================================================== */
.vestimenta { position: relative; text-align: center; }
.vestimenta__titulo { color: var(--color-primario); margin: 0 0 14px; }
.vestimenta__nivel {                 /* h3 */
  text-transform: uppercase;
  color: var(--color-textos);
  margin: 0 0 24px;
}
.vestimenta__ilustracion {
  display: block;
  width: 70%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 28px;
}
.vestimenta__nota { margin: 0 0 18px; }
.vestimenta__nota:last-of-type { margin-bottom: 30px; }
.vestimenta__tonos {
  display: block;
  width: 180px;
  max-width: 60%;
  height: auto;
  margin: 0 auto;
}
/* Decos florales de esquina */
.vestimenta__deco { position: absolute; height: auto; pointer-events: none; z-index: 1; }
.vestimenta__deco--top  { top: -90px;    right: 0;  width: 120px; }
.vestimenta__deco--left { bottom: -90px; left: 0;   width: 60px; }

/* ===================================================
   REGALOS
   =================================================== */
.regalos { text-align: center; }
.regalos__titulo { color: var(--color-primario); margin: 0 0 22px; }
.regalos__inner p { margin: 0 0 18px; }
/* Botones de Regalos: apilados uno debajo del otro */
.regalos__botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
/* La foto de Regalos se muestra solo en mobile */
@media (min-width: 768px) {
  .regalos .foto-completa { display: none; }
}

/* ===================================================
   MODAL — Cuentas de banco
   =================================================== */
.cuentas__titulo { color: var(--color-primario); margin: 0 0 24px; }
.cuentas__grupo { margin: 0 0 20px; line-height: 1.6; }
.cuentas__grupo:last-child { margin-bottom: 0; }

/* Ícono de copiar (junto a las cuentas) */
.grph-copy__ic { color: var(--color-primario); flex-shrink: 0; }

/* ===================================================
   BUENOS DESEOS + LA PLAYLIST (fondo oscuro)
   =================================================== */
.deseos,
.playlist {
  position: relative;
  text-align: center;
  color: var(--color-bg1);
  background: url(../media/trama.webp) top left repeat;
  background-color: #613120;
}
.deseos__titulo,
.playlist__titulo { color: var(--color-blanco); margin: 0 0 22px; }
.deseos__inner > p,
.playlist__inner > p { margin: 0 0 20px; }

/* Decos de esquina */
/* Cuadro del deseo: decos detrás, asomando en 2 esquinas */
.deseos__cuadro { position: relative; }
.deseos__deco { position: absolute; height: auto; pointer-events: none; z-index: 0; } /* detrás del cuadro */
.deseos__deco--left  { top: -56px;    left: 0; width: 110px; }
.deseos__deco--right { bottom: -46px; right: 0; width: 140px; }
/* Desktop: decos hacia afuera */
@media (min-width: 768px) {
  .deseos__deco--right { bottom: -25px; right: -4%; pointer-events: none; }
  .deseos__deco--left  { top: -25px;    left: -4%; pointer-events: none; }
}

/* ── Slider de deseos ── */
.deseos__slider { margin: 34px 0; position: relative; z-index: 1; } /* cuadro blanco por encima de los decos */
.deseo-card {
  max-width: 88%;   /* mobile */
  margin: 0 auto;
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 44px 26px;
  color: var(--color-textos);
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.deseo-card__msg { margin: 0 0 22px; }
.deseo-card__autor { font-family: var(--fuente-serif); margin: 0; }

/* ── Flechas del slider — 2 variantes (light / black) ── */
.flechas-light .grph-slider__prev,
.flechas-light .grph-slider__next,
.flechas-black .grph-slider__prev,
.flechas-black .grph-slider__next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border-style: solid;
  border-width: 8px;
}
.flechas-light .grph-slider__prev::before,
.flechas-light .grph-slider__next::before,
.flechas-black .grph-slider__prev::before,
.flechas-black .grph-slider__next::before {
  content: "";
  width: 9px;
  height: 9px;
  background: none;
  border-right: 2px solid;
  border-bottom: 2px solid;
}
.flechas-light .grph-slider__prev::before,
.flechas-black .grph-slider__prev::before { transform: rotate(135deg); margin-left: 4px; }
.flechas-light .grph-slider__next::before,
.flechas-black .grph-slider__next::before { transform: rotate(-45deg); margin-right: 4px; }

/* light: borde #5d3020, bg blanco, flecha primario */
.flechas-light .grph-slider__prev,
.flechas-light .grph-slider__next { border-color: #5d3020; background: var(--color-blanco); }
.flechas-light .grph-slider__prev::before,
.flechas-light .grph-slider__next::before { border-color: var(--color-primario); }

/* black: borde bg1, bg primario, flecha bg1 */
.flechas-black .grph-slider__prev,
.flechas-black .grph-slider__next { border-color: var(--color-bg1); background: var(--color-primario); }
.flechas-black .grph-slider__prev::before,
.flechas-black .grph-slider__next::before { border-color: var(--color-bg1); }

/* Modal de deseo (form) */
.deseo-form__titulo { color: var(--color-primario); margin: 0 0 20px; }
.deseo-form .rsvp__input { margin-bottom: 14px; }
.deseo-form .btn-primario { margin-top: 4px; }

/* ── La Playlist ── */
.playlist__pregunta { margin: 4px 0 22px; }
.playlist__form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  padding: 6px 6px 6px 22px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 40px;
}
.playlist__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--color-bg1);
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
}
.playlist__input::placeholder { color: rgba(255, 255, 255, .6); }
.playlist__enviar {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 40px;
  background: transparent;
  color: var(--color-bg1);
  padding: 9px 18px;
  text-transform: uppercase;
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.playlist__enviar:hover { background: var(--color-bg1); color: var(--color-primario); }

/* ===================================================
   HISTORIA
   =================================================== */
.historia { text-align: center; }
.historia__inner { max-width: 650px; }
.historia__inner > p { margin: 0 0 18px; }

/* Slider de fotos (center-mode) */
.historia__slider { margin: 80px 0 40px; }   /* 80px de separación con el texto superior */
.historia__slider img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Cita */
.historia__cita {                  /* cita bíblica en Rouge Script */
  font-family: var(--fuente-cita);
  color: var(--color-secundario);
  font-size: 50px;
  line-height: 1.2;
  margin: 0 0 16px;
}
.historia__ref { color: var(--color-textos); margin: 0; }

/* ===================================================
   FINAL — cuenta regresiva
   =================================================== */
.final { position: relative; overflow: hidden; text-align: center; }

/* Fondo tipo hero, invertido (floral hacia abajo) */
.final__bg {
  position: absolute;
  bottom: 400px;
  left: -100%;
  width: 300%;
  height: 1110px;
  z-index: 0;
  pointer-events: none;
  background: url(../media/hero_bg_desktop.webp) top left repeat-x;
  transform: rotate(165deg);
  transform-origin: center bottom;
}
.final__deco {
  position: absolute;
  left: -80px;
  bottom: 230px;
  width: 63%;
  max-width: 230px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.final__inner {
  position: relative;
  z-index: 1;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Monograma M & P — escalonado: M arriba-izq, & grande al centro, P abajo-der */
.final__monograma {
  position: relative;
  width: 230px;
  height: 170px;
  margin: 0 auto;
}
.final__amp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-65%, -50%);
  width: 70px;
  height: auto;
}
.final__ini {
  position: absolute;
  width: 50%;
  font-family: var(--fuente-display);
  font-size: 92px;
  line-height: 1;
  color: var(--color-primario);
}
.final__ini--1 { top: 0;    left: 24px; }
.final__ini--2 { bottom: 0; right: 24px; }

/* Cuenta regresiva */
.final__nosvemos {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-blanco);
  margin: 0 0 20px;
}
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}
.countdown__item { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.countdown__num {
  font-family: var(--fuente-display);
  font-size: calc(48px + var(--inc-titulo-general));  /* +incremento general en desktop */
  line-height: 1;
  color: var(--color-blanco);
}
.countdown__lbl {
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
  color: var(--color-bg1);
  margin-top: 8px;
}
.countdown__sep {
  font-family: var(--fuente-display);
  font-size: 38px;
  line-height: 1;
  color: var(--color-blanco);
  padding-top: 4px;
}

/* ===================================================
   MOVILIDAD
   =================================================== */
.movilidad { text-align: center; }
.movilidad__titulo { color: var(--color-primario); margin: 0 0 20px; }
.movilidad__icono {
  display: block;
  width: 120px;
  max-width: 45%;
  height: auto;
  margin: 0 auto 20px;
}
.movilidad__pasaje { margin: 0 0 14px; }
.movilidad__nota { max-width: 420px; margin: 0 auto 28px; }

/* Respuesta del RSVP (reemplaza al formulario al enviar) */
.rsvp__respuesta { text-align: center; }
.rsvp__respuesta p { margin: 0 0 16px; font-size: 19px; }
.rsvp__respuesta p:last-child { margin-bottom: 0; }
.rsvp__respuesta .parrafo_resaltado { display: block; margin-bottom: 20px; color: var(--color-primario); }

/* ===================================================
   Animación de texto — palabra por palabra (blur → nítido)
   =================================================== */
.anim-palabras .palabra {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  will-change: opacity, filter;
}
.anim-palabras.anim-in .palabra {
  animation: palabra-in .6s ease both;
  animation-delay: var(--d, 0s);
}
@keyframes palabra-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

/* h2: variante más lenta, las palabras suben desde abajo */
h2.anim-palabras .palabra {
  filter: none;
  transform: translateY(45px);
}
h2.anim-palabras.anim-in .palabra {
  animation: palabra-sube 1.1s ease both;
  animation-delay: calc(var(--d, 0s) * 1.6);
}
@keyframes palabra-sube {
  from { opacity: 0; transform: translateY(45px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* h3: fade lento de entrada */
.anim-fade {
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity;
}
.anim-fade.anim-in {
  opacity: 1;
}

/* .deseo-card en desktop */
@media (min-width: 768px) {
  .deseo-card { max-width: 94%; }
}

/* ***************************************************
   MODAL — Lista de regalos
   *************************************************** */
.regalos-modal { max-width: 520px; text-align: left; }
.regalos-modal__titulo { text-align: center; color: var(--color-primario); margin-bottom: 12px; }
.regalos-modal__intro { text-align: center; margin: 0 auto 22px; }

.regalos-modal__lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Card de cada regalo ── */
.regalo-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "img titulo"
    "foot foot";
  align-items: center;
  gap: 10px;
  background: var(--color-blanco);
  border: 1px solid #EFE6DF;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
  padding: 15px;
}
.regalo-item__img {
  grid-area: img;
  width: 100px;
  max-width: 38vw;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.regalo-item__titulo {
  grid-area: titulo;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  color: var(--color-secundario);
  line-height: 1.15;
  font-size: 18px;
  margin: 0;
}
.regalo-item__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.regalo-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--color-textos);
}
.regalo-item__sep {
  width: 1px;
  height: 22px;
  background: #D9CFC8;
}
.regalo-item__disp { font-size: 16px; }
.regalo-item__precio { font-weight: 700; font-size: 16px; }
.regalo-item__btn {
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 13px;
}

/* ── Vista de detalle / confirmación ── */
.regalos-modal__label { margin-bottom: 10px; }
.regalo-sel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #EFE6DF;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
  padding: 14px;
  margin-bottom: 24px;
}
.regalo-sel__img {
  width: 90px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.regalo-sel__titulo {
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  color: var(--color-secundario);
  line-height: 1.15;
}
.regalo-sel__precio { font-weight: 700; }
.regalo-sel__check {
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--color-primario);
  font-size: 20px;
  line-height: 1;
}
.regalos-modal__paso { margin: 6px 0 14px; }
.regalos-modal__cuentas { margin: 0 0 22px; }
.regalos-modal__cuentas,
.regalos-modal__cuentas p { margin-bottom: 12px; }
.regalos-modal__volver {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: 0;
  color: var(--color-textos);
  font-family: var(--fuente-cuerpo);
  text-decoration: underline;
  cursor: pointer;
}

/* ***************************************************
   ANIMACIÓN — fotos entran con fade lento de B/N a color
   (la clase la agrega el JS; las del slider quedan excluidas)
   *************************************************** */
.foto-fade {
  filter: grayscale(100%);
  opacity: 0;
  transition: filter 1.8s ease, opacity 1.8s ease;
  will-change: filter, opacity;
}
.foto-fade.foto-fade--in {
  filter: grayscale(0%);
  opacity: 1;
}

/* Mensajito de confirmación tras enviar un formulario */
.form-gracias {
  margin-top: 12px;
  font-size: 16px;
  color: var(--color-secundario);
}