/* =========================================================
   Invitación de boda — Iván & Gabi
   Paleta: verde oliva, blanco cálido, dorado suave
   ========================================================= */

:root {
  --olive: #6B7A4E;
  --olive-light: #8C9B6A;
  --olive-dark: #4F5A38;
  --cream: #F7F5EF;
  --gold: #C8B27A;

  --font-serif: "Playfair Display", "Georgia", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Alex Brush", cursive;

  --text-xs: 0.75rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.4rem;
  --text-xl: clamp(1.6rem, 4vw, 2.2rem);
  --text-2xl: clamp(2.2rem, 5vw, 3rem);
  --text-hero: clamp(3rem, 10vw, 5rem);

  --section-padding-y: clamp(4.5rem, 9vw, 7rem);
  --section-padding: var(--section-padding-y) 1.5rem;
}

/* ---------- Reset básico ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Evita scroll horizontal por la rama flotante que sobresale un poco
     del borde de la tarjeta (ver .eucalipto-flotante) */
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--olive-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Fondo verde oliva: hace de "marco" detrás de la hoja blanca */
  background: radial-gradient(circle at 50% 0%, var(--olive-light) 0%, var(--olive) 55%, var(--olive-dark) 100%);
  background-attachment: fixed;
}

img, svg {
  max-width: 100%;
  display: block;
}

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

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.container--narrow {
  max-width: 640px;
}

/* ---------- Utilidades ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--olive);
  opacity: 0.85;
  text-align: center;
  margin-bottom: 0.75rem;
}

.eyebrow--dark {
  color: var(--olive);
}

/* Animación de aparición al hacer scroll */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación de entrada y salida al hacer scroll (se repite en ambos sentidos) */
.fade-inout {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-inout.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.btn--whatsapp {
  padding-bottom: 2px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--olive-dark);
  border-bottom: 1px solid var(--gold);
  transition: color 0.3s ease;
}

.btn--whatsapp svg {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

.btn--whatsapp:hover {
  color: var(--gold);
}

/* ---------- Hero (portada y mensaje final) ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: transparent;
  padding: var(--section-padding-y) 1.5rem;
}

#portada {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero--final {
  padding: var(--section-padding-y) 1.5rem;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

/* Título en script y nombres: solo en la portada */
.hero__script {
  font-family: var(--font-script);
  font-size: var(--text-hero);
  font-weight: 400;
  color: var(--olive-dark);
  line-height: 1;
}

.hero__names {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--gold);
  margin-top: 0.4rem;
  letter-spacing: 0.05em;
}

/* Cuenta regresiva estilo "flip clock" */
.flipcount {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 0.85rem);
  margin-top: clamp(4.5rem, 10vw, 6.5rem);
}

.flipcount__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.flipcount__number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 12vw, 68px);
  height: clamp(52px, 12vw, 68px);
  background: linear-gradient(180deg, var(--olive) 0%, var(--olive-dark) 100%);
  color: var(--cream);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  border-radius: 10px;
  border: 1px solid rgba(200, 178, 122, 0.4);
  box-shadow: 0 10px 20px rgba(79, 90, 56, 0.22);
  overflow: hidden;
}

.flipcount__number::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 55%);
}

.flipcount__number::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}

.flipcount__label {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-dark);
  opacity: 0.75;
}

.flipcount__colon {
  height: clamp(52px, 12vw, 68px);
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--gold);
  opacity: 0.8;
}

/* ---------- Secciones genéricas ---------- */
.section {
  padding: var(--section-padding);
}

.section--cream {
  background: transparent;
}

.section--olive-light {
  background: transparent;
  text-align: center;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  text-align: center;
  color: var(--olive-dark);
}

.section__title--light {
  color: var(--olive-dark);
}

.section__hoja {
  width: 26px;
  height: 40px;
  color: var(--gold);
  margin: 1.5rem auto 0;
}

.section__hoja--light {
  margin: 0 auto 1.5rem;
  color: var(--gold);
}

/* ---------- Detalles del evento ---------- */
.event-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3.5rem;
}

.event {
  max-width: 420px;
  text-align: center;
  padding-bottom: 2.75rem;
  margin-bottom: 2.75rem;
  border-bottom: 1px solid rgba(200, 178, 122, 0.35);
  transition: transform 0.4s ease;
}

.event:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.event:hover {
  transform: translateY(-3px);
}

.event__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--olive-dark);
  margin-bottom: 1rem;
}

.event__row {
  font-size: var(--text-sm);
  color: var(--olive-dark);
  margin-bottom: 0.4rem;
  opacity: 0.9;
}

.event__map {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--olive);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.3s ease;
}

.event__map:hover {
  color: var(--gold);
}

.event-list__notice {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--gold);
  margin: -0.75rem 0 2.75rem;
}

.dresscode {
  text-align: center;
  max-width: 480px;
  margin: 3.5rem auto 0;
}

.dresscode__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--olive-dark);
  margin-bottom: 0.6rem;
}

.dresscode p {
  color: var(--olive-dark);
  opacity: 0.85;
}

/* ---------- RSVP ---------- */
.rsvp__text {
  color: var(--olive-dark);
  max-width: 460px;
  margin: 0 auto 2.5rem;
  opacity: 0.85;
}

.rsvp__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

/* ---------- Mensaje final ---------- */
.final__message {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--olive-dark);
  line-height: 1.5;
}

.final__names {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--gold);
  margin-top: 2rem;
  letter-spacing: 0.05em;
}

.final__date {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  color: var(--olive);
  opacity: 0.75;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .event-list__notice {
    text-align: center;
  }

  /* Evita que quede una línea suelta con pocas palabras al final
     del párrafo: reparte el texto en líneas de largo parejo */
  .dresscode p,
  .rsvp__text {
    text-wrap: balance;
  }

  .rsvp__buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn--whatsapp {
    width: 100%;
    max-width: 320px;
  }

  .flipcount {
    gap: 0.5rem;
  }
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .fade-in {
    transition: none;
  }
}

/* =========================================================
   Pantalla inicial: sello de lacre y cintas sobre fondo
   desenfocado de la propia invitación
   ========================================================= */

/* Mientras la intro está en pantalla, se bloquea el scroll de fondo */
body.intro-active {
  overflow: hidden;
  height: 100vh;
}

#intro-screen {
  position: fixed;
  /* El ancho/alto se fija en píxeles por JS (ver ajustarTamañoIntro en
     script.js). Chrome no pinta el contenido de elementos posicionados
     en la esquina inferior derecha cuando el tamaño del contenedor
     fixed se define con %, vw o vh en una página larga (bug
     verificado); con píxeles explícitos pinta correctamente. */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  overflow: hidden;
  /* Sin display:flex acá: combinado con position:fixed en una página
     larga, le impide a Chrome pintar el contenido de las hojas de
     las esquinas (bug verificado). El botón central se centra con
     position:absolute + transform en su propia regla (más abajo). */
  opacity: 1;
  visibility: visible;
  /* Espera a que las cintas terminen de abrirse antes de desvanecerse */
  transition: opacity 0.6s ease 0.6s, visibility 0.6s ease 0.6s;
}

#intro-screen.is-opening {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Vidrio esmerilado: desenfoca la invitación real que queda detrás */
.intro__blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(247, 245, 239, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Botón central: sello sobre cintas cruzadas.
   Centrado con position:absolute + transform (no flex en el padre
   fixed, ver nota en #intro-screen). */
.intro__seal-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background: transparent;
  border: none;
  padding: 2rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.intro__seal-wrap:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 10px;
}

.intro__seal-area {
  position: relative;
  width: 100px;
  height: 100px;
}

/* Cintas: foto real de soga trenzada a cada lado del sello */
.ribbon {
  position: absolute;
  top: 50%;
  width: 40vw;
  max-width: 300px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  transition: transform 0.85s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.8s ease 0.15s;
  filter: drop-shadow(0 3px 3px rgba(43, 42, 38, 0.35));
}

.ribbon--left {
  right: 100%;
  justify-content: flex-end;
  overflow: hidden;
}

.ribbon--right {
  left: 100%;
  justify-content: flex-start;
  overflow: hidden;
}

.ribbon__strand {
  display: block;
  width: 120%;
  height: auto;
  flex-shrink: 0;
}

.ribbon--left .ribbon__strand {
  transform: translateX(20%) rotate(-2deg);
}

.ribbon--right .ribbon__strand {
  transform: translateX(-20%) rotate(2deg);
}

/* Sello de lacre: foto real con fondo transparente */
.seal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(43, 51, 26, 0.4));
  transition: transform 0.6s ease 0.2s, opacity 0.5s ease 0.3s;
}

.intro__hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-dark);
  opacity: 0.85;
  text-align: center;
  max-width: 220px;
  transition: opacity 0.3s ease;
  animation: intro-pulse 2.4s ease-in-out infinite;
}

@keyframes intro-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* Estado "abriendo": las cintas se sueltan de un tirón y el sello cae */
#intro-screen.is-opening .ribbon--left {
  transform: translateY(-50%) translateX(-130%) rotate(-20deg);
  opacity: 0;
}

#intro-screen.is-opening .ribbon--right {
  transform: translateY(-50%) translateX(130%) rotate(20deg);
  opacity: 0;
}

#intro-screen.is-opening .seal {
  transform: scale(0.45) translateY(36px) rotate(-25deg);
  opacity: 0;
}

#intro-screen.is-opening .intro__hint {
  opacity: 0;
  animation: none;
}

/* Contenedor auxiliar: le da a la rama flotante un ancestro
   position:relative cercano (no la raíz del documento), necesario
   para que Chrome la pinte bien en una página larga. */
.card-frame {
  position: relative;
}

/* =========================================================
   La "hoja": tarjeta blanca que contiene toda la invitación,
   flotando sobre el fondo verde oliva del sobre
   ========================================================= */
#invitation-content {
  width: calc(100% - 2rem);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(1.5rem, 6vw, 4rem);
  margin-bottom: clamp(1.5rem, 6vw, 4rem);
  border-radius: 14px;
  overflow: hidden;
  /* Sombra ambiente (sin offset) para que se note en todos los bordes,
     no solo abajo, más las sombras direccionales para dar profundidad */
  box-shadow:
    0 0 90px rgba(15, 18, 8, 0.8),
    0 40px 90px rgba(15, 18, 8, 0.7),
    0 10px 30px rgba(15, 18, 8, 0.45);
  /* Textura de papel: grano fino generado en SVG, sin imágenes externas */
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.75'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
}

@media (max-width: 480px) {
  #invitation-content {
    width: calc(100% - 1.25rem);
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon,
  .seal,
  .intro__hint,
  #intro-screen,
  #invitation-content {
    transition: none;
    animation: none;
  }
}

/* =========================================================
   Rama de eucalipto flotante: vive fuera de la tarjeta a
   propósito, para poder superponerse entre el verde y la
   tarjeta blanca. Se posiciona por JS (ver ajustarEucaliptoFlotante
   en script.js) tomando como referencia la esquina de la tarjeta,
   así que no depende de números fijos ni rompe el overflow:hidden
   que redondea las esquinas de #invitation-content.
   ========================================================= */
.eucalipto-flotante {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  height: auto;
  pointer-events: none;
  /* Oculta hasta que script.js calcule su posición real; usa
     visibility (no opacity) para que no dependa de una transición
     que podría capturarse a mitad de camino. La imagen ya trae su
     propia sombra incorporada, así que no lleva filter:drop-shadow
     (ese filtro impedía que Chrome la pintara en este entorno). */
  visibility: hidden;
}

.eucalipto-flotante.is-listo {
  visibility: visible;
}

/* Rama 1: esquina superior izquierda de la portada. Tamaño con clamp
   para que escale de forma continua con el ancho de pantalla, sin
   saltos entre breakpoints; misma rotación en todos los tamaños. */
.eucalipto-flotante--1 {
  width: clamp(90px, 22vw, 235px);
  transform-origin: top left;
  transform: rotate(29deg);
}

/* Rama 3: borde izquierdo, a la altura del mensaje final.
   Mismo tamaño/ubicación que la rama 1, pero rotada en sentido
   contrario para que quede en diagonal tipo "\" en vez de "/". */
.eucalipto-flotante--3 {
  width: clamp(90px, 22vw, 235px);
  transform-origin: top left;
  transform: rotate(-10deg);
}