:root {
  --tropical-pink: #d63384;     /* Fucsia */
  --tropical-orange: #fd7e14;   /* Naranja */
  --tropical-yellow: #ffc107;   /* Amarillo */
  --tropical-dark: #2a2421;
  --font-serif: 'Playfair Display', serif;
  --font-garamond: 'Cormorant Garamond', serif;
  --font-sans: 'Montserrat', sans-serif;
  --font-script: 'Pinyon Script', cursive;
}

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

/* FONDO GENERAL REPETIDO CON 30% DE OPACIDAD */
body { 
    background-color: #fffaf0;
    color: var(--tropical-dark); 
    font-family: var(--font-garamond); 
    text-align: center; 
    overflow-x: hidden !important; 
    width: 100vw;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('img/fondo.png');
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center top;
    opacity: 0.30;
    pointer-events: none;
    z-index: 1;
}

.mobile-wrapper, #seccion-final, .video-deco-container, .bloque-fondo-tropical {
    position: relative;
    z-index: 2;
}

.mobile-wrapper {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    position: relative;
}

.bloque-fondo-tropical {
  width: 100%;
}

/* NOTIFICACIÓN TOAST */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--tropical-pink);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 1px;
  box-shadow: 0 10px 25px rgba(214, 51, 132, 0.3);
  z-index: 9999;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.section-pad { padding: 35px 16px; position: relative; }
.oculto { display: none !important; }

/* TARJETAS GLASS FINAS Y ELEGANTES */
.glass-card-tropical {
  background: rgba(255, 255, 255, 0.85);
  padding: 38px 22px;
  border-radius: 26px;
  max-width: 390px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(253, 126, 20, 0.25);
  box-shadow: 0 12px 35px rgba(214, 51, 132, 0.08);
}

.title-tropical {
  font-family: var(--font-serif);
  font-size: 1.9rem !important;
  color: var(--tropical-pink);
  margin-bottom: 12px;
  letter-spacing: 2px;
  font-weight: 600;
}

.subtitle-tropical {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--tropical-orange);
  margin-bottom: 8px;
  font-style: italic;
}

.quince-name-title {
  font-family: var(--font-script) !important;
  font-size: 3.8rem;
  color: var(--tropical-pink);
  line-height: 1.1;
  margin-top: 8px;
  font-weight: 400;
}

/* OVERLAY DE INTRO INICIAL */
#contenedor-principal {
  position: fixed; inset: 0; z-index: 5000; background: #000; transition: opacity 0.8s ease; cursor: pointer;
}
#videoSobre { width: 100%; height: 100%; object-fit: cover; display: none; }
#capa-boton { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 5001; width: 90%; max-width: 360px; }

.boton-tropical-inicio {
  background: linear-gradient(135deg, var(--tropical-pink), var(--tropical-orange));
  color: #fff;
  padding: 16px 28px;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 2px;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(214, 51, 132, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* PORTADA HERO VIDEO A ANCHO COMPLETO 100vw */
.video-deco-container { 
    width: 100vw; 
    height: 100vh; 
    position: relative; 
    overflow: hidden; 
    margin-left: calc(-50vw + 50%); 
    margin-right: calc(-50vw + 50%);
    background: #000; 
}
#videoDeco { width: 100%; height: 100%; object-fit: cover; }
.scroll-indicator-wrap { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 2; }
.desliza-tag { color: #fff; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 3px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.arrow-down { width: 1.5px; height: 35px; background: #fff; margin: 8px auto; animation: slideLine 2s infinite; }

@keyframes slideLine {
  0% { transform: scaleY(0); opacity: 0; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* ESTILOS MEJORADOS PARA CRONOGRAMA Y UBICACIONES */
.icon-circle-box {
  width: 50px;
  height: 50px;
  background: rgba(253, 126, 20, 0.15);
  border: 1.5px solid var(--tropical-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  color: var(--tropical-orange);
  font-size: 1.2rem;
}

.gold-icon {
  background: rgba(255, 193, 7, 0.15);
  border-color: #e0a800;
  color: #d39e00;
}

.text-body { font-family: var(--font-garamond); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: #495057; }
.instruction { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 1px; color: #6c757d; margin-bottom: 14px; }
.location-title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--tropical-dark); margin-bottom: 4px; font-weight: 600; }
.date-highlight { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 1.5px; font-weight: 700; color: var(--tropical-pink); margin-bottom: 4px; text-transform: uppercase; }
.address { font-family: var(--font-garamond); font-size: 1.05rem; color: #6c757d; margin-bottom: 14px; }

/* 3 CÍRCULOS SAVE THE DATE */
.circles-grid { display: flex; justify-content: center; gap: 15px; margin: 18px 0; }
.circle-btn {
  width: 65px; height: 65px; border-radius: 50%; border: 2px solid var(--tropical-pink);
  background: #fff; color: var(--tropical-pink); font-family: var(--font-serif); font-weight: bold; font-size: 1.1rem;
  cursor: pointer; transition: transform 0.4s ease, background 0.3s, color 0.3s;
  box-shadow: 0 5px 15px rgba(214, 51, 132, 0.15);
}
.circle-btn.revealed { background: linear-gradient(135deg, var(--tropical-pink), var(--tropical-orange)); border-color: transparent; color: #fff; transform: rotateY(360deg); }

.revealed-date-container { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.8s ease, max-height 0.8s ease; }
.revealed-date-container.show-revealed { opacity: 1; max-height: 400px; margin-top: 15px; }
.day-text { font-family: var(--font-serif); font-size: 1.2rem; color: var(--tropical-dark); font-weight: 600; margin-bottom: 12px; }

.countdown-grid { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.timer-box { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(214, 51, 132, 0.3); padding: 10px 4px; border-radius: 10px; min-width: 65px; display: flex; flex-direction: column; align-items: center; }
.timer-box span { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: var(--tropical-pink); }
.timer-box small { font-family: var(--font-sans); font-size: 0.55rem; color: #6c757d; margin-top: 3px; letter-spacing: 1px; text-transform: uppercase; }

.highlight-text { font-family: var(--font-serif); font-size: 1.6rem; letter-spacing: 3px; color: var(--tropical-orange); font-weight: 600; }
.alert-box { font-family: var(--font-sans); font-size: 0.82rem; background: rgba(255, 243, 205, 0.95); color: #856404; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffeeba; }

.btn-sm-tropical {
  display: inline-block; padding: 10px 20px; border-radius: 20px; background: linear-gradient(135deg, var(--tropical-orange), var(--tropical-yellow));
  color: #212529; text-decoration: none; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 1.5px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(253, 126, 20, 0.25);
}

.btn-tropical-action {
  width: 100%; padding: 14px; border-radius: 30px; background: linear-gradient(135deg, var(--tropical-pink), var(--tropical-orange));
  color: #fff; border: none; font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 2px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(214, 51, 132, 0.3);
  text-transform: uppercase;
}

.input-pro { width: 100%; padding: 12px 16px; border: 1px solid rgba(253, 126, 20, 0.3); border-radius: 12px; font-family: var(--font-garamond); font-size: 1rem; outline: none; background: rgba(255,255,255,0.95); }

.rsvp-card-highlight {
  background: linear-gradient(135deg, var(--tropical-pink), var(--tropical-orange)) !important;
  border: none !important;
  box-shadow: 0 15px 35px rgba(214, 51, 132, 0.35) !important;
}

.btn-whatsapp {
  background: var(--tropical-yellow); color: #212529; padding: 14px 26px; border-radius: 30px;
  font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 2px; text-decoration: none; font-weight: 700; display: inline-block;
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
  text-transform: uppercase;
}

/* REPRODUCTOR FLOTANTE */
.music-btn {
  position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px;
  background: var(--tropical-pink); color: #fff; border: 2px solid #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 4999; cursor: pointer; display: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

footer { padding: 40px 20px; font-family: var(--font-sans); font-size: 9px; letter-spacing: 3px; color: var(--tropical-dark); opacity: 0.75; }