/* =========================
   Variables (colores/espacios)
   ========================= */
:root{
  --crema:#EBE4DA;
  --verde:#203E2D;
  --dorado:#A58F49;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 40px;
  --space-6: 56px;
  --space-7: 72px;
  --space-8: 96px;

  /* Semialtura visual de la tarjeta de foto (mitad del alto + sombra) */
  --foto-overlap: clamp(140px, 18vw, 210px);
}

/* =========================
   Base / Reset mínimo
   ========================= */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--crema);
  color:var(--verde);
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  text-align:center;
}
img{ max-width:100%; height:auto; display:block; margin:0 auto }

.body--lock{ overflow:hidden }

/* =========================
   Secciones
   ========================= */
.block{
  padding-block: clamp(80px, 10vw, 120px);
  padding-inline: 16px;
}
.block--crema{ background:var(--crema) }
.block--verde{ background:var(--verde); color:#fff }

.block > * + *{ margin-top: var(--space-4); }
.block--verde > * + *{ margin-top: var(--space-5); }

/* Helpers de ancho controlado */
.blk{ display:block }
/* ¡Nos Casamos!: escala fluida y límite de ancho */
.blk-nos{
  width: min(92vw, 960px);
  max-width: 960px;
  margin-inline: auto;
}

/* otros helpers usados en el documento */
.blk-venis{ max-width:560px }
.blk-small{ max-width:220px }
.blk-tight{ max-width:220px; margin-top:6px }
.blk-mini{ max-width:180px; margin-top:6px }
.gracias-img{ margin-top: var(--space-4); }

/* =========================
   HERO VIDEO — RESPONSIVE DE VERDAD
   ========================= */
.hero-video{
  position:relative;
  width:100%;
  height:100dvh;               /* alto pantalla móvil real */
  background:var(--crema);
  overflow:hidden;
}
.hero-video video{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100%; height:100%;
  object-fit:cover;            /* por defecto llenamos */
  object-position:center;
  background:var(--verde);
}
@media (max-aspect-ratio: 3/4){
  .hero-video video{ object-fit:contain; }
}
@media (min-aspect-ratio: 21/9){
  .hero-video video{ object-fit:contain; }
}
.hero-video video.fit-contain{ object-fit:contain !important; }

/* =========================
   Countdown (responsive)
   ========================= */
.countdown{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; /* celdas + : */
  align-items:end;
  justify-items:center;
  gap: clamp(10px, 2vw, 18px);
  max-width:920px;
  margin: clamp(16px, 3vw, 28px) auto 0;
  font-family:'Playfair Display',serif;
}
.countdown .cell{
  display:flex; flex-direction:column; align-items:center;
}
.countdown .num{
  color:var(--dorado);
  /* Escala fluida: 28–44px aprox */
  font-size: clamp(28px, 6vw, 44px);
  line-height:1; font-weight:700;
}
.countdown .label{
  margin-top:6px;
  /* 10–12px aprox con tracking */
  font-size: clamp(10px, 2.5vw, 12px);
  letter-spacing: 1.6px;
  color:var(--verde);
}
.countdown .col{
  color:var(--dorado);
  font-size: clamp(24px, 6vw, 38px);
  line-height:.9;
  margin-bottom:8px;
}

/* MODO COMPACTO (móvil muy estrecho) -> quitamos “:” y usamos 4 columnas */
.countdown.compact{
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2.2vw, 14px);
}
.countdown.compact .col{ display:none; }
.countdown.compact .cell .num{ font-size: clamp(22px, 6.2vw, 30px); }
.countdown.compact .cell .label{ font-size: clamp(9px, 2.8vw, 11px); }

/* =========================
   Foto entre secciones
   ========================= */
.encabezado{
  padding-bottom: calc(var(--foto-overlap) + 116px);
}
.foto-superpuesta{
  position: relative;
  height: 0;
  overflow: visible;
  padding: 0;
  background: var(--crema);
}
.foto-contenedor{
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -50%);
  max-width: 680px;
  width: min(92vw, 680px);
  z-index: 5;
}
.foto{
  width:100%;
  border-radius:14px;
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}
.block--verde.is-rsvp{
  padding-top: calc(var(--foto-overlap) + 116px);
}

/* =========================
   Ceremonia + Dress Code (alineación)
   ========================= */
.ceremonia-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:min(8vw, 80px);
  align-items:center;          /* centra verticalmente ambos grupos */
}
.cer-item{
  display:grid;
  grid-template-rows:auto auto auto; /* icono / título / subtítulo */
  justify-items:center;
  align-items:center;
  row-gap: 16px;
}
.cer-ico{   width:min(84px, 18vw) }
.cer-title{ max-width:280px }
.cer-sub{   max-width:220px }

/* =========================
   Resto de elementos
   ========================= */
.ico-regalo{ width:86px; margin-bottom:12px }

.logo-final{
  max-width: min(90vw, 540px);
  display:block;
}
.logo-final.grande{
  margin-block: clamp(var(--space-5), 5vw, var(--space-7));
}

.mapa{
  width:240px; max-width:60vw;
  border-radius:50%;
  border:6px solid var(--verde);
  margin: var(--space-4) auto var(--space-3);
}

/* Botones (SVG) */
.btn-svg img{
  display:block;
  margin-top: var(--space-5);
  max-width: min(90vw, 520px);
}

/* =========================
   Modales (IMG / PDF)
   ========================= */
.modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
}
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }

.modal__dialog{
  position:relative;
  background:var(--verde);
  color:#fff;
  width:min(94vw, 860px);
  margin:clamp(40px, 6vh, 80px) auto;
  padding: clamp(16px, 2vw, 24px);
  border-radius:14px;
  max-height: calc(100vh - 2 * clamp(40px, 6vh, 80px));
  overflow:auto;
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
}
.modal__close{
  position:sticky; top:0; right:0;
  margin-left:auto;
  display:block;
  border:0; background:#ffffff20; color:#fff;
  font-size:20px; line-height:1; padding:8px 10px;
  border-radius:8px; cursor:pointer;
}
.modal__img{
  display:block; width:100%; height:auto;
  border-radius:10px; background:#fff;
}
.modal__doc{
  display:block; width:100%; height:min(78vh, 820px);
  border:0; background:#fff; border-radius:10px; overflow:hidden;
}
.modal__actions{
  display:flex; gap:12px; justify-content:center; align-items:center;
  margin-top:16px; flex-wrap:wrap;
}
.modal__download{
  display:inline-block; padding:12px 18px; border-radius:24px;
  background:var(--dorado); color:#fff; text-decoration:none; font-weight:700;
}
.modal__download--ghost{
  background:#ffffff22; border:1px solid #ffffff44;
}

/* =========================
   Responsive extra
   ========================= */
@media (max-width:900px){
  .blk-nos{ width:min(94vw, 760px); }
}
@media (max-width:768px){
  .block{ padding-block: clamp(64px, 9vw, 96px); }
  .block > * + *{ margin-top: var(--space-3); }
  .block--verde > * + *{ margin-top: var(--space-4); }
  .ceremonia-grid{ grid-template-columns:1fr; gap:40px; }
  :root{ --foto-overlap: clamp(120px, 22vw, 180px); }
}
@media (max-width:480px){
  .block{ padding-block: clamp(56px, 10vw, 80px); }
}

/* ===== Evita que el video tape el countdown ===== */
@media (max-width: 768px) {
  .hero-video {
    height: auto;                 /* deja que se ajuste al contenido real */
  }

  .hero-video video {
    position: static;             /* elimina el posicionamiento absoluto */
    transform: none;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}


/* ===== Ajuste responsivo de la foto entre secciones ===== */
/* ===== Ajuste definitivo: la foto no tapa nada ===== */
@media (max-width: 768px) {
  /* 1️⃣ la sección reserva altura (ya no queda en 0) */
  .foto-superpuesta {
    position: relative;
    height: auto;
    padding: 40px 0; /* espacio arriba y abajo para respirar */
  }

  /* 2️⃣ la foto se comporta como bloque, centrada y más chica */
  .foto-contenedor {
    position: relative;
    transform: none;
    left: auto; top: auto;
    width: min(90vw, 520px);
    margin: 0 auto;
    z-index: 1;
  }

  /* 3️⃣ los bloques contiguos ya no necesitan padding extra */
  .encabezado {
    padding-bottom: 60px;
  }

  .block--verde.is-rsvp {
    padding-top: 60px;
  }
}

@media (max-width: 480px) {
  .foto-contenedor {
    width: min(92vw, 420px);
  }
}


/* ===== Modal Bancario con fondo verde oscuro y texto blanco ===== */
.modal__banco-texto {
  background: rgb(46, 69, 53);
  color: #fff;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 12px;
  text-align: center;
  font-size: clamp(15px, 2.8vw, 18px);
  line-height: 1.6;
  font-weight: 400;
}

.modal__banco-texto strong {
  color: #fff;
  font-weight: 700;
}

.modal__banco-texto p {
  margin: 12px 0;
}