/* ===========================================================
   INVITACIÓN XV — MARIANA  ·  Estilos
   Base clara/editorial (estructura tipo kit.baliniz.com) +
   acentos de pergamino mágico medieval en el sello de apertura.
   =========================================================== */

:root{
  /* Paleta de acento (marca / pergamino) */
  --pergamino:   #E7D1A2;
  --papel:       #D9C193;
  --oro:         #C69C3A;
  --oro-claro:   #E8C765;
  --bronce:      #7A5838;
  --vino:        #7A1834;
  --madera:      #4A3428;
  --texto:       #2B1B12;
  --luz:         #FFE8B0;

  /* Paleta vino → negro (secciones de acento) */
  --vino-1:  #8B0000;
  --vino-2:  #6B0000;
  --vino-3:  #4A0505;
  --vino-4:  #300505;
  --vino-5:  #1A0303;
  --vino-negro: #0A0505;

  /* Paleta base clara (fondo del sitio) */
  --crema:   #F8F1E4;
  --crema2:  #EFE1C8;
  --crema3:  #E4D2AC;

  /* Tipografías */
  --f-titulo: "Cinzel", serif;
  --f-texto:  "Cormorant Garamond", serif;
  --f-nombre: "Great Vibes", cursive;

  --maxw: 640px;

  /* Marco ornamentado (border-image) — sólo para el sello de apertura */
  --marco-v: clamp(42px, 11vw, 74px);
  --marco-h: clamp(13px, 3.6vw, 22px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{
  font-family:var(--f-texto);
  color:var(--madera);
  background:var(--crema);
  width:100%; max-width:100%;
  overflow-x:hidden; overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- Fondo global claro y cálido ---------- */
/* El fondo es EXACTAMENTE el último frame del video (mismo encuadre cover/centrado),
   para que al terminar el intro el pergamino no cambie de tamaño.
   Altura fijada a 100lvh (viewport grande, estable): así NO se re-escala cuando
   el navegador móvil oculta/muestra la barra de direcciones al hacer scroll. */
#fondo{
  position:fixed; top:0; left:0; width:100%;
  height:100vh; height:100lvh; z-index:-2;
  background:
    url('../assets/images/intro-fondo.jpg') center center / cover no-repeat,
    var(--crema);
}
#niebla{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, rgba(255,232,176,.18), transparent 58%);
  animation:niebla 16s ease-in-out infinite alternate;
}
@keyframes niebla{ from{opacity:.2} to{opacity:.5} }

/* Canvas de partículas doradas */
#particulas{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ================= LOADER ================= */
#loader{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--crema); gap:1.4rem;
  transition:opacity .8s ease;
}
#loader.oculto{ opacity:0; pointer-events:none; }
.loader-corona{ font-size:2.6rem; color:var(--vino); filter:drop-shadow(0 0 10px rgba(198,156,58,.35)); animation:flotar 3s ease-in-out infinite; }
.loader-txt{ font-family:var(--f-nombre); font-size:2.4rem; color:var(--bronce); }
.loader-barra{ width:180px; height:2px; background:rgba(122,24,52,.15); border-radius:2px; overflow:hidden; }
.loader-barra span{ display:block; height:100%; width:40%; background:linear-gradient(90deg,transparent,var(--oro),transparent); animation:cargar 1.3s ease-in-out infinite; }
@keyframes cargar{ 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }
@keyframes flotar{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ================= INTRO / SELLO DE APERTURA ================= */
/* ===== INTRO: primer frame del video (estático) + CTA ===== */
.corona{
  font-size:2.4rem; color:var(--oro-claro); margin-bottom:.1rem;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.75));
  animation:flotar 4s ease-in-out infinite;
}
.video-cta{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:5.5rem 1.3rem calc(clamp(30px,7vh,64px) + env(safe-area-inset-bottom)); text-align:center;
  background:linear-gradient(to top, rgba(10,5,5,.82), rgba(10,5,5,.38) 52%, transparent);
  transition:opacity .45s ease, transform .45s ease;
}
.video-cta.oculto{ opacity:0; transform:translateY(12px); pointer-events:none; }
.video-cta-sub{
  font-family:var(--f-titulo); letter-spacing:.32em; text-transform:uppercase;
  font-size:.74rem; color:#f0dcae; text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.btn-abrir{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; margin-top:.2rem;
  font-family:var(--f-titulo); letter-spacing:.16em; text-transform:uppercase;
  font-size:.9rem; padding:1rem 2.2rem; border-radius:999px;
  color:#2b1206; border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(180deg,#f3d98a,#e8c765 55%,#c69c3a);
  box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  animation:pulso-btn 2.6s ease-in-out infinite;
}
.btn-abrir:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 16px 36px rgba(0,0,0,.55); }
.btn-abrir-ic{ color:#7a1834; font-size:.9rem; }
@keyframes pulso-btn{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* ================= INTRO VIDEO ================= */
.video-intro{
  position:fixed; top:0; left:0; width:100%;
  /* Altura PEQUEÑA (barras visibles): garantiza que el CTA y "Saltar" queden
     siempre dentro del área visible en móvil (no tapados por la barra de Safari).
     Durante el intro no hay scroll, así que esta altura no cambia. */
  height:100vh; height:100svh; z-index:90;
  display:none; align-items:center; justify-content:center;
  background:#0b0705;
  opacity:0; transition:opacity .6s ease;
}
.video-intro.activo{ display:flex; }
.video-intro.visible{ opacity:1; }
.video-intro video{
  width:100%; height:100%; object-fit:cover; background:#0b0705;
}
.video-saltar{
  position:absolute; bottom:calc(clamp(18px,5vw,34px) + env(safe-area-inset-bottom)); right:clamp(18px,5vw,34px);
  z-index:4; cursor:pointer;
  background:rgba(11,7,5,.42); color:var(--luz);
  border:1px solid rgba(232,199,101,.5); border-radius:999px;
  padding:.5rem 1.15rem; font-family:var(--f-titulo); letter-spacing:.18em;
  font-size:.7rem; text-transform:uppercase;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .25s ease, transform .25s ease;
}
.video-saltar:hover{ background:rgba(122,24,52,.6); transform:translateY(-1px); }

/* ================= CONTENIDO ================= */
#contenido{ position:relative; z-index:2; }
.seccion{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:4.5rem 1.4rem; position:relative;
}
.seccion.compacta{ padding:2.5rem 1.4rem; }

/* Panel = tarjeta pergamino translúcida para que el texto contraste
   sobre la textura del fondo. */
.panel{
  width:100%; max-width:var(--maxw); position:relative;
  background:rgba(249,243,229,.82);
  border:1px solid rgba(198,156,58,.3);
  border-radius:14px; padding:2rem 1.5rem;
  box-shadow:0 16px 40px rgba(26,3,3,.22);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

.label-top{
  display:block; font-family:var(--f-titulo); letter-spacing:.32em;
  text-transform:uppercase; font-size:.74rem; font-weight:600;
  color:var(--vino); margin-bottom:.7rem;
}

/* ===== Secciones de acento vino → negro ===== */
.seccion.oscura{
  background:linear-gradient(165deg, var(--vino-2), var(--vino-4) 55%, var(--vino-negro));
  box-shadow:inset 0 12px 30px rgba(0,0,0,.45), inset 0 -12px 30px rgba(0,0,0,.45);
}
.seccion.oscura .panel{
  background:transparent; border:none; box-shadow:none; backdrop-filter:none;
  -webkit-backdrop-filter:none; padding:1rem 0;
}
.seccion.oscura .label-top{ color:var(--oro-claro); }
.seccion.oscura .parrafo{ color:#f3e6c8; }
.seccion.oscura .fecha-grande .dia,
.seccion.oscura .reloj .num{ color:#f3d98a; }
.seccion.oscura .fecha-grande .mes,
.seccion.oscura .reloj .lbl{ color:var(--oro-claro); }
.seccion.oscura .fecha-grande .anio{ color:#f3e6c8; }
.seccion.oscura .reloj .u{ background:rgba(255,255,255,.06); border-color:rgba(232,199,101,.45); }
h2.titulo{
  font-family:var(--f-titulo); color:var(--vino);
  font-size:clamp(1.3rem,4.6vw,1.9rem); letter-spacing:.06em; margin-bottom:1rem;
}
.nombre-grande{
  font-family:var(--f-nombre); font-size:clamp(2.6rem,11vw,4.2rem); color:var(--vino);
  line-height:1;
}
.parrafo{ font-size:clamp(1.1rem,4vw,1.35rem); line-height:1.65; color:var(--madera); }
.deco-oro{ width:110px; height:1px; margin:1.1rem auto; background:linear-gradient(90deg,transparent,var(--oro),transparent); }
.icono{ font-size:2.1rem; color:var(--vino); margin-bottom:.6rem; }
.familia .rol{ font-family:var(--f-titulo); letter-spacing:.15em; font-size:.78rem; color:var(--vino); text-transform:uppercase; margin-top:1.1rem; }
.familia .nom{ font-size:1.2rem; color:var(--madera); }

/* ---------- Foto en arco (estilo referencia) ---------- */
.foto-arco{
  width:min(78vw,320px); aspect-ratio:3/4; margin:0 auto 1.4rem;
  border-radius:50% 50% 6px 6px / 32% 32% 6px 6px;
  overflow:hidden; box-shadow:0 22px 40px rgba(74,52,40,.22);
  background:var(--crema3);
}
.foto-arco img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

/* Zoom lento (Ken Burns) para las fotos.
   Pivote arriba-centro + encuadre arriba: la cara (parte superior del retrato)
   se mantiene y el zoom crece hacia abajo, sin cortar el rostro. */
@keyframes zoom-lento{ from{ transform:scale(1); } to{ transform:scale(1.14); } }
.foto-arco img, .foto-rect img, .marco img{
  transform-origin:center top;
  animation:zoom-lento 16s ease-in-out infinite alternate;
}
.marco img{ object-position:center top; }
.foto-arco.vacia{ display:flex; align-items:center; justify-content:center; color:var(--bronce); font-family:var(--f-titulo); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; padding:1rem; text-align:center; }

/* ---------- Foto con marco dorado ornamentado (arco) ---------- */
.foto-marco{
  position:relative; margin:0 auto 1.5rem;
  /* Ancho relativo al panel (no al viewport) para que NO se desborde y quede
     centrado dentro de la tarjeta. */
  width:min(100%,320px); aspect-ratio:1801 / 2815;
  filter:drop-shadow(0 20px 34px rgba(26,3,3,.42));
}
/* El HUECO recorta la foto a la forma del arco y contiene el zoom
   (overflow:hidden). La foto sangra bajo el marco para que no haya costura. */
/* El hueco se recorta con una máscara generada del propio marco → calza EXACTO
   con la abertura a cualquier tamaño (sin desajustes en móvil). */
.foto-marco-hueco{
  position:absolute; left:12.66%; top:12.97%; width:74.18%; height:76.66%;
  overflow:hidden; z-index:1;
  -webkit-mask:url('../assets/images/marco-hueco-mask.png') center / 100% 100% no-repeat;
  mask:url('../assets/images/marco-hueco-mask.png') center / 100% 100% no-repeat;
}
/* Retrato principal: más zoom + pivote arriba → la cara baja y no choca con el
   adorno colgante del arco. */
@keyframes zoom-retrato{ from{ transform:scale(1.2); } to{ transform:scale(1.34); } }
.foto-marco-hueco img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transform-origin:center top;
  animation:zoom-retrato 16s ease-in-out infinite alternate;
}
/* El BORDE (marco dorado) va encima, SIN recortarse, tapando los bordes de la foto. */
.foto-marco-borde{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url('../assets/images/marco-oro.png') center / 100% 100% no-repeat;
}
.foto-marco-hueco.vacia{
  display:flex; align-items:center; justify-content:center;
  color:var(--bronce); font-family:var(--f-titulo); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:1rem;
}

/* ---------- Foto rectangular (secciones evento) ---------- */
.foto-rect{
  width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--crema3);
}
.foto-rect img{ width:100%; height:100%; object-fit:cover; }
.foto-rect.vacia{ display:flex; align-items:center; justify-content:center; color:var(--bronce); font-family:var(--f-titulo); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Bloque de cita (full-bleed) ---------- */
.bloque-cita{
  width:100%; color:var(--pergamino);
  background:linear-gradient(160deg, var(--vino-1), var(--vino-3) 52%, var(--vino-negro));
  padding:4rem 1.5rem; text-align:center; position:relative;
  box-shadow:inset 0 14px 34px rgba(0,0,0,.4), inset 0 -14px 34px rgba(0,0,0,.4);
}
.bloque-cita .comillas{ font-family:var(--f-titulo); font-size:4rem; color:var(--oro); opacity:.5; line-height:1; margin-bottom:.5rem; }
.bloque-cita p{ font-family:var(--f-texto); font-style:italic; font-size:clamp(1.2rem,4.4vw,1.6rem); max-width:640px; margin:0 auto; line-height:1.6; }
.bloque-cita .firma-cita{ margin-top:1.4rem; font-family:var(--f-titulo); letter-spacing:.15em; font-size:.85rem; text-transform:uppercase; color:var(--oro-claro); }

/* ---------- Tarjeta de evento (ceremonia / recepción) ---------- */
.tarjeta-evento{
  width:100%; max-width:420px; margin:0 auto; text-align:center;
  background:#fffaf0; border:1px solid rgba(122,88,56,.2); border-radius:4px;
  overflow:hidden; box-shadow:0 18px 36px rgba(74,52,40,.15);
}
.tarjeta-evento .cuerpo{ padding:1.8rem 1.4rem 2rem; }
.tarjeta-evento h3{
  font-family:var(--f-titulo); color:var(--vino); letter-spacing:.1em;
  text-transform:uppercase; font-size:1.15rem; margin-bottom:.9rem;
}
.tarjeta-evento .linea{ width:70px; height:1px; background:var(--oro); margin:0 auto 1.1rem; }
.fila-dato{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:.55rem 0; font-size:1.05rem; color:var(--madera);
}
.fila-dato .ic{ color:var(--oro); font-size:1rem; flex:none; }
.tarjeta-evento .btn{ margin-top:1.2rem; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem;
  font-family:var(--f-titulo); letter-spacing:.12em; font-size:.8rem; text-transform:uppercase;
  padding:.75rem 1.5rem; border-radius:3px; cursor:pointer; border:none;
  background:var(--vino); color:var(--pergamino);
  box-shadow:0 8px 18px rgba(122,24,52,.25);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); background:#5c1128; }
.btn.whats{ background:#1f9c50; color:#fff; }
.btn.grande{ font-size:.9rem; padding:.9rem 2rem; }
.btn.fantasma{ background:transparent; border:1px solid var(--vino); color:var(--vino); box-shadow:none; }

/* Botones de navegación (Maps + Waze) */
.btns-nav{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.3rem; }
.btns-nav .btn{ margin-top:0; }

/* Countdown / reloj */
.reloj{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem;
}
.reloj .u{
  min-width:72px; padding:.9rem .6rem; border-radius:6px;
  background:var(--crema2);
  border:1px solid rgba(198,156,58,.4);
}
.reloj .num{ font-family:var(--f-titulo); font-size:1.7rem; color:var(--vino); line-height:1; }
.reloj .lbl{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bronce); margin-top:.3rem; }

/* Fecha grande */
.fecha-grande .dia{ font-family:var(--f-titulo); font-size:clamp(3.6rem,18vw,6rem); line-height:1; color:var(--vino); }
.fecha-grande .mes{ font-family:var(--f-titulo); letter-spacing:.3em; text-transform:uppercase; color:var(--bronce); font-size:.85rem; }
.fecha-grande .anio{ font-size:1.3rem; color:var(--madera); }

/* Itinerario */
.itinerario{
  display:flex; flex-direction:column; align-items:center;
  margin-top:1.2rem; position:relative;
}
.itinerario .paso{
  display:flex; flex-direction:column; align-items:center;
  padding:.85rem 0; position:relative;
}
.itinerario .paso:not(:last-child)::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:0; height:1.3rem; border-left:1px dotted var(--bronce);
}
.itinerario .paso .ic{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1rem; margin-bottom:.4rem;
  background:var(--crema2);
  border:1px solid var(--oro);
}
.itinerario .paso .txt{
  font-family:var(--f-texto); font-style:italic; font-weight:600;
  font-size:1.3rem; color:var(--madera); letter-spacing:normal;
}
.itinerario .paso .hora{
  font-family:var(--f-titulo); letter-spacing:.14em; font-size:.82rem;
  color:var(--vino); margin-top:.15rem;
}
.seccion.oscura .itinerario .paso .txt{ color:#f7ecd2; }
.seccion.oscura .itinerario .paso .hora{ color:var(--oro-claro); }
.seccion.oscura .itinerario .paso:not(:last-child)::after{ border-left-color:rgba(232,199,101,.5); }
.seccion.oscura .itinerario .paso .ic{ background:rgba(255,255,255,.08); border-color:var(--oro-claro); }

/* Galería */
.galeria-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-top:1rem; }
.marco{
  position:relative; overflow:hidden; aspect-ratio:3/4;
  background:var(--crema3);
  box-shadow:0 8px 18px rgba(74,52,40,.18);
}
.marco img{ width:100%; height:100%; object-fit:cover; }
.marco.vacio{ display:flex; align-items:center; justify-content:center; color:var(--bronce); font-size:.85rem; text-align:center; padding:1rem; }

/* Baúl regalos */
.regalos-links{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1rem; }

/* Badge circular (RSVP) */
.badge-circular{
  width:min(46vw,180px); aspect-ratio:1; margin:1.6rem auto 0; position:relative; display:block;
}
.badge-circular svg{ width:100%; height:100%; animation:girar-lento 16s linear infinite; }
.badge-circular svg text{ font-family:var(--f-titulo); letter-spacing:2px; fill:var(--bronce); }
.badge-circular-centro{
  position:absolute; inset:0; margin:auto; width:38%; height:38%;
  border-radius:50%; background:var(--vino); color:var(--pergamino);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  box-shadow:0 8px 18px rgba(122,24,52,.35);
}
@keyframes girar-lento{ to{ transform:rotate(360deg) } }

/* Música (botón flotante) */
#musica-btn{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:50px; height:50px; border-radius:50%; border:1px solid rgba(122,24,52,.3);
  background:var(--crema2);
  color:var(--vino); font-size:1.2rem; cursor:pointer;
  box-shadow:0 8px 18px rgba(74,52,40,.2); display:none; align-items:center; justify-content:center;
}
#musica-btn.visible{ display:flex; }
#musica-btn.sonando{ animation:girar 6s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg) } }

/* Botón compartir */
.compartir-btn{
  position:fixed; left:20px; bottom:20px; z-index:61;
  width:48px; height:48px; border-radius:50%;
  background:var(--crema2); border:1px solid rgba(122,24,52,.2);
  color:var(--vino); font-size:1.1rem; cursor:pointer;
  box-shadow:0 4px 12px rgba(74,52,40,.15);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.compartir-btn:hover{ background:var(--crema3); transform:scale(1.05); }

/* Despedida */
.firma{ font-family:var(--f-nombre); font-size:clamp(2.4rem,11vw,3.6rem); color:var(--bronce);
  background:linear-gradient(180deg,#8a6a2a,#c69c3a 60%,#7a5838);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Aviso de pendientes en config (solo dev) */
.pendiente{ opacity:.75; font-style:italic; }

/* Reveal (animación de entrada por scroll) */
.reveal{ opacity:0; transform:translateY(36px); }

@media (min-width:640px){
  .galeria-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
}