/* ============================================================
   ITINERARIO / CRONOGRAMA / SEPARADOR / HERO  —  Ingrid y Juan
   Diseño portado desde la invitación de referencia (cards por
   evento, línea de tiempo del día, separador ornamental y
   difuminado del hero), ADAPTADO al sistema de v2:
     · fondo casi-blanco  var(--color-scheme-1--background)  #f9f9f7
     · texto oscuro       var(--color-scheme-1--text)        #33302e
     · acento café-oro    var(--color-scheme-1--heading)     #937852
     · borde sutil        var(--color-scheme-1--border)      #93785238
     · títulos en Butler  var(--_typography---font-styles--heading)
     · cuerpo Darker Grotesque var(--_typography---font-styles--body)
   Todo el CSS propio vive en este único archivo (un solo <link>)
   para mantenerlo aislado y portable.
   ============================================================ */

/* Desktop: las cards en una fila (grid de 3 columnas) para que todo el
   itinerario se vea de un vistazo, sin scroll excesivo. En ≤991px se
   apilan en una sola columna centrada. */
/* Fondo crema cálido para todo el bloque del itinerario, para que las cards
   blancas floten y resalten como en la referencia (antes era casi-blanco
   #f9f9f7, casi sin contraste). Enlaza sin costura con section-fecha (arriba,
   también #f2eee6). */
.iti-v2 {
  background-color: var(--_primitives---colors--brown);
}

.itinerario__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 28px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 991px) {
  .itinerario__cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 56px;
  }
}

/* Aire entre el h2 "itinerario" de v2 y la primera card. */
.iti-v2 > .heading-style-h3 {
  margin-bottom: 56px;
}

/* min-height + justify-content:center: las cards quedan a la misma
   altura y el contenido se centra verticalmente, así las de una línea
   de lugar no se ven más vacías que las de dos y el set se lee
   uniforme. (En móvil se desactiva.) */
.evento-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--_primitives---colors--white);
  /* Sin borde duro: la card blanca flota sobre el crema con solo la sombra,
     como la referencia. Un aro interior casi imperceptible da definición al
     canto sin que se lea como "borde". */
  border: none;
  border-radius: 2px; /* esquinas rectas, estilo papel/editorial como la referencia */
  padding: 44px 38px;
  /* Sombra desplazada (izq/abajo) igual que las cards de la referencia */
  box-shadow: -7.66px 6.43px 10px 1px rgba(0, 0, 0, .25);
}

/* Aparición en secuencia de las cards al hacer scroll: cada una sube con un
   fade, una tras otra. .itinerario__cards recibe la clase .is-in vía
   IntersectionObserver. Se desactiva si el usuario pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .evento-card {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
                transform .8s cubic-bezier(.22, .61, .36, 1);
  }
  .itinerario__cards.is-in .evento-card {
    opacity: 1;
    transform: none;
  }
  .itinerario__cards.is-in .evento-card:nth-child(1) { transition-delay: .10s; }
  .itinerario__cards.is-in .evento-card:nth-child(2) { transition-delay: .28s; }
  .itinerario__cards.is-in .evento-card:nth-child(3) { transition-delay: .46s; }
  .itinerario__cards.is-in .evento-card:nth-child(4) { transition-delay: .64s; }
}

/* Destellos dorados de lámina en esquinas (sup-izq / inf-der), como la referencia.
   Rotaciones idénticas a la referencia: A→90° arriba-izq, B→270° abajo-der.
   La caja cuadrada queda anclada a la esquina; solo rota el contenido (giro
   sobre el centro conserva el recuadro en su sitio). Opacidad baja para imitar
   el filtro "lighten" que aclara los destellos sobre la card blanca. */
.evento-card::before,
.evento-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: .6;
}
.evento-card::before {
  top: 0; left: 0;
  background-image: url('../images/card-destellos-a.png');
  transform: rotate(90deg);
}
.evento-card::after {
  bottom: 0; right: 0;
  background-image: url('../images/card-destellos-b.png');
  transform: rotate(270deg);
}

/* Slot de la ilustración (reusa los iconos de línea de v2:
   iglesia para la ceremonia, copas para la recepción) */
/* Slot para la ilustración detallada del recinto (line-art dorado, estilo
   referencia). Más alto que un ícono para que el dibujo tenga presencia;
   object-fit:contain se adapta a cualquier proporción del arte. */
.evento-card__ilustracion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 170px;
  margin-bottom: 0;
}

.evento-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Título en cursiva formal (Great Vibes), como el "Ceremonia" de la
   referencia. La misma fuente que usan los nombres en el loader.
   Las mayúsculas de Great Vibes traen swashes altos: line-height
   ajustado y sin letter-spacing (los scripts no se separan). */
/* Great Vibes trae swashes muy anchos en las mayúsculas: aunque el ancho
   de avance del texto cabe, el TRAZO se extiende más allá de la caja y el
   overflow:hidden de la card lo recortaría. Tamaño moderado + line-height
   apretado para que el trazo entre completo en la columna (desktop 3-up).
   Un título de dos palabras (p. ej. "Ceremonia Religiosa") se apila con
   un <br> para no desbordar a lo ancho. */
.evento-card__titulo {
  font-family: "Edwardian Script ITC", 'Great Vibes', cursive;
  color: var(--color-scheme-1--heading);
  font-weight: 400;
  font-size: 43px;
  line-height: 1.02;
  letter-spacing: 0;
  /* Los <h3> del template vienen en MAYÚSCULAS; en Great Vibes cada
     mayúscula es un swash enorme que desborda. Forzamos tipo oración
     ("Ceremonia") como la referencia. */
  text-transform: none;
  max-width: 100%;
  margin: 0 0 6px;
}

.evento-card__hora {
  font-family: var(--_typography---font-styles--heading);
  color: var(--color-scheme-1--heading);
  font-size: 23px;
  letter-spacing: 1px;
  margin: 0 0 22px;
}

.evento-card__divider {
  display: block;
  width: 80px;
  height: 1px;
  margin: 0 auto 22px;
  background-color: var(--color-scheme-1--heading);
  opacity: .35;
}

.evento-card__lugar {
  font-family: var(--_typography---font-styles--heading);
  color: var(--color-scheme-1--heading);
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size: 25px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.evento-card__direccion {
  font-family: var(--_typography---font-styles--body);
  color: var(--color-scheme-1--heading);
  opacity: .85;
  max-width: 320px;
  margin: 0 0 28px;
  font-size: 23px;
  line-height: 28px;
}

/* Los <br> de lugar y dirección solo aplican en móvil; en tablet/desktop el
   texto fluye natural (a mayor tamaño los saltos forzados quedan desbalanceados).
   Excepción: los <br class="br-keep"> sí se mantienen en todos los tamaños. */
@media screen and (min-width: 768px) {
  .evento-card__lugar br:not(.br-keep),
  .evento-card__direccion br:not(.br-keep) {
    display: none;
  }
  /* Menos espacio bajo la dirección en tablet/desktop. */
  .evento-card__direccion {
    margin-bottom: 15px;
  }
}

/* El botón "Ver mapa" reusa el componente de v2. En móvil el template
   le fija width:139px, lo que parte "Ver mapa" en dos líneas dentro de
   nuestra card centrada. Lo dejamos ajustarse al contenido. Además el
   componente trae margin-right:auto (y margin-left:0 en móvil) que lo
   empuja a la izquierda; con márgenes auto a ambos lados queda centrado. */
.evento-card .btn_main_wrap.itinerario__button {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.evento-card .btn_main_text {
  white-space: nowrap;
}

@media screen and (max-width: 991px) {
  .iti-v2 > .heading-style-h3 {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 767px) {
  /* El template oculta .iti-v2 en móvil y muestra el itinerario viejo
     (.section-itinerario, con contenido demo). Lo invertimos para que
     nuestras cards se vean también en móvil. */
  .iti-v2 {
    display: block;
    padding: 80px 24px 40px;
  }
  .section-itinerario {
    display: none;
  }
  .iti-v2 > .heading-style-h3 {
    margin-bottom: 30px;
  }
  .itinerario__cards {
    grid-row-gap: 64px;
    gap: 64px;
  }
  .evento-card {
    min-height: 0;
    padding: 40px 28px;
    border-radius: 2px;
  }
  .evento-card__ilustracion {
    height: 190px;
    margin-bottom: 0;
  }
  .evento-card__titulo {
    font-size: 46px;
  }
  .evento-card__hora {
    font-size: 20px;
  }
  .evento-card__lugar {
    font-size: 23px;
  }
  .evento-card__direccion {
    font-size: 20px;
    line-height: 22px;
  }
}

/* ============================================================
   DRESS CODE — ilustración pequeña bajo el texto "Riguroso formal".
   ============================================================ */
.dress__image {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  margin: 22px auto 0;
}

@media screen and (max-width: 767px) {
  .dress__image {
    max-width: 130px;
    margin-top: 18px;
  }
}

/* Nota bajo la ilustración: colores que se piden evitar. */
.dress__note {
  max-width: 430px;
  margin: 20px auto 0;
  font-family: var(--_typography---font-styles--body);
  font-size: 23px;
  line-height: 28px;
}

@media screen and (max-width: 767px) {
  .dress__note {
    max-width: 300px;
    margin-top: 16px;
    font-size: 20px;
    line-height: 22px;
  }

  /* El salto forzado es solo para desktop: a 300px el texto ya corta
     despues de "vestidos" por si mismo. */
  .dress__note br {
    display: none;
  }
}

/* ============================================================
   CRONOGRAMA — línea de tiempo del día
   Desktop: horizontal — iconos+nombres arriba, una línea, horas abajo.
   Móvil: vertical con línea central y eventos alternando lados.
   ============================================================ */
.cronograma {
  background-color: var(--_primitives---colors--brown);
  text-align: center;
  padding: 50px 144px 100px;
}

.cronograma__track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* línea horizontal (desktop), entre los nombres y las horas.
   top = altura fija de .cronograma__head, así la línea cae justo
   debajo de los nombres. */
.cronograma__track::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 132px;
  height: 1px;
  background-color: var(--color-scheme-1--heading);
  opacity: .35;
  z-index: 0;
}

.cronograma__item {
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cronograma__head {
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.cronograma__icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 14px;
}

.cronograma__nombre {
  margin: 0 0 26px;
  font-family: var(--_typography---font-styles--heading);
  color: var(--color-scheme-1--heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
}

.cronograma__hora {
  margin: 26px 0 0;
  font-family: var(--_typography---font-styles--body);
  color: var(--color-scheme-1--heading);
  font-size: 23px;
  letter-spacing: .5px;
}

@media screen and (max-width: 991px) {
  .cronograma {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ---- Animación de entrada del cronograma (al hacer scroll) ----
   La sección recibe la clase .is-in vía IntersectionObserver; a partir
   de ahí los eventos suben con un fade escalonado (izq→der) y la línea
   del tiempo se "dibuja". Se desactiva si el usuario pide menos motion. */
@media (prefers-reduced-motion: no-preference) {
  .cronograma__item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
                transform .8s cubic-bezier(.22, .61, .36, 1);
  }
  .cronograma.is-in .cronograma__item {
    opacity: 1;
    transform: none;
  }
  /* Aparición escalonada de izquierda a derecha */
  .cronograma.is-in .cronograma__item:nth-child(1) { transition-delay: .15s; }
  .cronograma.is-in .cronograma__item:nth-child(2) { transition-delay: .30s; }
  .cronograma.is-in .cronograma__item:nth-child(3) { transition-delay: .45s; }
  .cronograma.is-in .cronograma__item:nth-child(4) { transition-delay: .60s; }
}

/* La línea del tiempo se dibuja de izquierda a derecha (solo desktop:
   en móvil la línea es vertical y conserva su centrado). */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .cronograma__track::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1) .1s;
  }
  .cronograma.is-in .cronograma__track::before {
    transform: scaleX(1);
  }
}

/* Micro-interacción: el icono se eleva suavemente al pasar el mouse. */
@media (hover: hover) {
  .cronograma__icon {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1),
                filter .4s ease;
  }
  .cronograma__item:hover .cronograma__icon {
    transform: translateY(-6px) scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(147, 120, 82, .35));
  }
}

/* Móvil: vertical, línea central y eventos alternando lados (zigzag) */
@media screen and (max-width: 767px) {
  .cronograma {
    padding: 40px 20px 60px;
  }
  .cronograma__track {
    flex-direction: column;
    align-items: stretch;
    max-width: 360px;
    grid-row-gap: 30px;
    row-gap: 30px;
  }
  .cronograma__track::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    transform: translateX(-0.5px);
  }
  .cronograma__item {
    flex: none;
    width: 50%;
  }
  .cronograma__item:nth-child(odd) {
    align-self: flex-start;
    padding-right: 26px;
  }
  .cronograma__item:nth-child(even) {
    align-self: flex-end;
    padding-left: 26px;
  }
  .cronograma__head {
    height: auto;
  }
  .cronograma__icon {
    margin-bottom: 10px;
  }
  .cronograma__nombre {
    margin-bottom: 0;
    font-size: 18px;
  }
  .cronograma__hora {
    margin-top: 0;
    font-size: 20px;
  }
}

/* ============================================================
   SEPARADOR ornamental entre el cronograma y el dress-code.
   Centrado; el alto intrínseco del SVG lo hace una línea fina.
   ============================================================ */
.separador-ornamental {
  background-color: var(--_primitives---colors--brown);
  text-align: center;
  padding: 40px 20px 70px;
}

/* Separador entre la sección de fecha y el itinerario: el itinerario ya
   trae 120px de padding-top, así que reducimos el aire debajo del adorno
   para que quede balanceado con el de arriba. */
.separador-ornamental.separador-ornamental--fecha {
  padding: 0;
}
.separador-ornamental--fecha + .iti-v2 {
  padding-top: 100px;
}

/* En móvil el itinerario va con menos aire arriba (80px). Esta regla debe
   ir DESPUÉS de la de arriba y con la misma especificidad para ganarle
   dentro del breakpoint (si no, el padding-top:100px de arriba la pisa). */
@media screen and (max-width: 767px) {
  .separador-ornamental--fecha + .iti-v2 {
    padding-top: 80px;
  }
}

.separador-ornamental img {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  height: auto;
}

@media screen and (max-width: 767px) {
  .separador-ornamental {
    padding: 20px 20px 16px;
  }
  .separador-ornamental img {
    max-width: 300px;
  }
}

/* ============================================================
   HOSPEDAJE — No aparece en esta invitación (formulario: "no
   aparecerá en la invitación"). Se oculta sin borrar el markup.
   ============================================================ */
.section-hospedaje {
  display: none;
}

/* ============================================================
   REGALOS — El template oculta el botón "Ver mesa" (.div-block-13
   display:none) y el botón "gift" es crema sobre crema (texto
   ilegible). Lo mostramos, lo acercamos al texto "Evento" y dejamos
   el fondo crema original con el texto en café-dorado (legible).
   ============================================================ */
.section-regalo .regalo-card-paragraph {
  margin: 6px 0 0;
}
.section-regalo .div-block-13 {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.section-regalo .btn_main_wrap.itinerario__button {
  width: auto;
}
.section-regalo .btn_main_text.gift {
  color: var(--color-scheme-1--heading);
  white-space: nowrap;
}

/* En móvil el template apila las columnas con row-gap 50px y el título
   con margin-bottom 20px → huecos grandes. Lo compactamos para que el
   ritmo se parezca al ejemplo (título pegado a su texto, columnas con
   separación uniforme y menor). */
@media screen and (max-width: 767px) {
  /* Compactamos el ritmo en móvil para que se parezca al ejemplo:
     título pegado a su texto y columnas con menos separación. */
  .section-regalo .realo-titulo {
    margin-bottom: 0px;
    font-size: 23px;
    line-height: 1.2;
  }
  .section-regalo .regalo-column {
    min-width: 0;
  }
  .section-regalo .regalo-text-wrapper {
    grid-row-gap: 34px;
    row-gap: 34px;
    grid-column-gap: 34px;
    column-gap: 34px;
  }
}

/* ============================================================
   HERO — Difuminado inferior
   Funde la parte baja de la foto del hero hacia el crema de la
   sección siguiente (.section-fecha = #f2eee6) para una
   transición suave. Va por debajo del título (z-index 3) y por
   encima de la imagen y el gradiente superior (z-index 2).
   ============================================================ */
.section-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* evita una costura sub-pixel con la sección siguiente */
  height: 24%;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(to top,
      #f2eee6 0%,
      #f2eee6 10%,
      rgba(242, 238, 230, .5) 48%,
      rgba(242, 238, 230, 0) 100%);
}

@media screen and (max-width: 479px) {
  .regalo-bg.mobile {
    object-position: 50% 50%;
  }
}

/* ============================================================
   FOOTER — Monograma J&I debajo de la frase.
   Reusa el PNG del monograma y el filtro SVG #ij-tint (definido inline
   en index.html) para pintarlo en el azul #8fa7ce sobre la foto del footer.
   El arte es vertical (relación ~0.71 ancho/alto), por eso los anchos son
   menores que el alto resultante.
   ============================================================ */
.footer-monograma {
  display: block;
  width: 70px;
  height: auto;
  margin: 0 auto 44px;
  filter: url('#ij-tint');
}

@media screen and (max-width: 767px) {
  .footer-monograma {
    width: 58px;
    margin-bottom: 34px;
  }
}

/* En tablet y móvil el texto del footer fluye libre (sin el salto forzado
   que se usa en desktop para las 2 líneas). */
@media screen and (max-width: 991px) {
  .footer-text br {
    display: none;
  }
}

/* ============================================================
   BOTÓN "Confirmar asistencia" — CTA a WhatsApp, debajo del R.S.V.P.
   Reusa la estructura .btn_main y el color de botón del sitio
   (#937852 = --color-scheme-1--heading, igual que "Ver mapa" y el
   loader). Autocontenido para controlar padding/hover en todas las
   resoluciones. El wrapper centra el botón bajo el párrafo.
   ============================================================ */
.asistencia-cta__wrap {
  text-align: center;
  margin-bottom: 50px;
}

/* Junta el párrafo de bienvenida con el de "lugares reservados",
   que se leen como una sola idea antes del botón. */
.asistencia-paragraph.tight {
  margin-bottom: 14px;
}

.asistencia-cta {
  display: inline-block;
  border-radius: 90px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.asistencia-cta .btn_main_inner {
  background-color: var(--_primitives---colors--brown);
  color: var(--color-scheme-1--heading);
  border: 1.5px solid var(--_primitives---colors--brown);
  border-radius: 90px;
  padding: 15px 46px;
  justify-content: center;
  align-items: center;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  display: flex;
}

.asistencia-cta:hover .btn_main_inner {
  background-color: var(--color-scheme-1--heading);
  color: var(--_primitives---colors--light);
  border-color: var(--color-scheme-1--heading);
}

.asistencia-cta .btn_main_text {
  color: inherit;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .5px;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .asistencia-cta__wrap {
    margin-bottom: 30px;
  }

  .asistencia-cta .btn_main_inner {
    padding: 12px 34px;
  }

  .asistencia-cta .btn_main_text {
    font-size: 16px;
  }
}