/* ============================= */
/* 🎨 SISTEMA DE COLORES DINÁMICO */
/* ============================= */

:root {
  --color-principal: #d4af37;
  --color-fondo: #0f0f0f;
  --color-texto: #ffffff;
  --color-secundario: #1c1c1c;
  --color-gradiente: linear-gradient(to bottom, rgba(0,0,0,0.7), #0c0c0c);
}

/* ============================= */
/* BASE */
/* ============================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: 'Cormorant Garamond', serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  overflow-x:hidden;
}

/* ============================= */
/* HERO */
/* ============================= */

.hero{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.35;
  filter:grayscale(40%);
  transform:scale(1.1);
  animation:zoomCine 12s ease forwards;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--color-gradiente);
}

.hero-text{
  position:relative;
  z-index:2;
  opacity:0;
  transform:translateY(20px);
}

.hero h1{
  font-size:70px;
  font-weight:300;
  letter-spacing:6px;
  color:var(--color-principal);
}

.fecha{
  margin-top:20px;
  font-size:20px;
  letter-spacing:4px;
  color:var(--color-texto);
  opacity:0.7;
}

.mensaje{
  margin-top:30px;
  font-size:22px;
  font-style:italic;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  color:var(--color-texto);
  opacity:0.85;
}

/* ============================= */
/* CONTADOR */
/* ============================= */

.contador{
  margin-top:50px;
  display:flex;
  justify-content:center;
  gap:40px;
}

.contador span{
  font-size:34px;
  font-weight:300;
  color:var(--color-principal);
}

.contador small{
  display:block;
  font-size:12px;
  letter-spacing:3px;
  color:var(--color-texto);
  opacity:0.6;
}

/* ============================= */
/* SECCIONES */
/* ============================= */

.bloque{
  padding:140px 20px;
  max-width:900px;
  margin:auto;
  text-align:center;
}

h2{
  font-size:40px;
  font-weight:300;
  letter-spacing:4px;
  margin-bottom:60px;
  color:var(--color-principal);
}

p{
  font-size:22px;
  margin-bottom:20px;
  color:var(--color-texto);
  opacity:0.85;
  line-height:1.6;
}

/* ============================= */
/* BOTONES */
/* ============================= */

button{
  margin-top:30px;
  padding:14px 40px;
  background: var(--color-principal);
  color: var(--color-fondo);
  border:1px solid var(--color-principal);
  letter-spacing:3px;
  cursor:pointer;
  transition:0.4s;
}

button:hover{
  background: transparent;
  color: var(--color-principal);
}

/* ============================= */
/* ITINERARIO */
/* ============================= */

.evento{
  padding:25px;
  border-left:1px solid var(--color-principal);
  margin-bottom:30px;
  text-align:left;
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp 1.2s forwards;
}

.evento strong{
  color:var(--color-principal);
  font-weight:400;
}

/* ============================= */
/* RSVP */
/* ============================= */

.rsvp{
  border-top:1px solid var(--color-secundario);
  border-bottom:1px solid var(--color-secundario);
}

input, select, textarea{
  background:var(--color-secundario);
  border:1px solid var(--color-secundario);
  color:var(--color-texto);
  padding:14px;
  font-family:inherit;
  margin-bottom:15px;
}

textarea{
  height:100px;
  resize:none;
}

/* ============================= */
/* CARTA */
/* ============================= */

.carta-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:0.6s;
}

.carta-overlay.activo{
  opacity:1;
  pointer-events:auto;
}

.carta{
  background:var(--color-secundario);
  border:1px solid var(--color-principal);
  padding:50px;
  text-align:center;
  animation:fadeIn 1s ease;
}

.carta h3{
  color:var(--color-principal);
  font-size:28px;
  margin-bottom:20px;
}

/* ============================= */
/* BANNER FINAL */
/* ============================= */

.banner-final{
  height:60vh;
  background:var(--color-fondo);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.banner-final h2{
  font-size:36px;
  letter-spacing:5px;
  color:var(--color-principal);
}

/* ============================= */
/* INTRO CINEMATOGRÁFICO */
/* ============================= */

.intro-screen{
  position:fixed;
  inset:0;
  background:var(--color-fondo);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:1s ease;
}

.intro-screen.oculto{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.intro-content{
  text-align:center;
  animation:fadeIn 2s ease forwards;
}

.intro-content h1{
  font-size:60px;
  letter-spacing:8px;
  color:var(--color-principal);
  font-weight:300;
  margin-bottom:40px;
}

.abrir-btn{
  padding:15px 50px;
  background:transparent;
  border:1px solid var(--color-principal);
  color:var(--color-principal);
  letter-spacing:4px;
  cursor:pointer;
  transition:0.4s;
}

.abrir-btn:hover{
  background:var(--color-principal);
  color:var(--color-fondo);
}

/* ============================= */
/* ANIMACIONES */
/* ============================= */

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes introFadeIn{
  to{ opacity:1; }
}

@keyframes introFadeOut{
  to{
    opacity:0;
    visibility:hidden;
  }
}

@keyframes zoomCine{
  from{ transform:scale(1.15); }
  to{ transform:scale(1); }
}

@keyframes blurOut{
  to{ backdrop-filter:blur(8px); }
}

.music-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--color-principal);
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  opacity: 0.8;
  transition: 0.3s ease;
}

.music-btn.playing {
  transform: rotate(360deg);
}