/* ============================================
   INVITACIÓN XV AÑOS — RIHANA NICOL
   Tema: Acuarela Celeste & Plata (Mariposas y Flores)
   Optimizado para Gama Baja (J2 Prime)
   ============================================ */

:root {
  --celeste-light: #E8F4FD;
  --celeste-mid: #87CEEB;
  --celeste-dark: #3498DB;
  
  --pink-light: #FCE4EC;
  --pink-mid: #F8BBD0;

  --silver-light: #F8F9FA;
  --silver-mid: #DEE2E6;
  --silver-dark: #ADB5BD;

  --gold: #D4AF37;

  --text-primary: #333333;
  --text-secondary: #555555;
  
  --card-bg: rgba(248, 249, 250, 0.98); /* Blanco mate */
  --card-border: rgba(135, 206, 235, 0.4);

  --font-script: 'Great Vibes', 'Dancing Script', cursive;
  --font-elegant: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { 
  scroll-behavior: smooth; 
  overflow-x: hidden; 
  font-size: 14px; /* Fallback para navegadores antiguos */
  font-size: clamp(11px, 3.5vw, 16px); 
}
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  background: #FFFFFF;
}

.bg-anim {
  position: fixed; top: -5%; left: -5%; width: 110%; height: 110%;
  background: url('fondo_floral.webp') no-repeat center center;
  background-size: cover;
  z-index: -2;
  animation: bgPan 30s ease-in-out infinite alternate;
}

@keyframes bgPan {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.05) translate(-1%, 1%); }
  100% { transform: scale(1.1) translate(1%, -1%); }
}

img, svg { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { color: inherit; text-decoration: none; }

#particles-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0.6; /* Partículas muy sutiles, las mariposas son las protagonistas */
}

/* MARIPOSAS FLOTANTES (CSS puro, súper ligero) */
.butterflies-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4; overflow: hidden;
}
.butterfly-anim {
  position: absolute;
  width: 40px; height: 40px;
  opacity: 0.7;
  filter: drop-shadow(0 4px 6px rgba(135,206,235,0.4));
  animation: fly linear infinite;
}
.b1 { top: 20%; left: -50px; animation-duration: 25s; animation-delay: 0s; }
.b2 { top: 70%; left: -50px; animation-duration: 20s; animation-delay: 5s; width: 30px; }
.b3 { top: 40%; left: -50px; animation-duration: 28s; animation-delay: 12s; width: 50px; }

@keyframes fly {
  0% { transform: translate(0, 0) rotate(15deg) scale(0.8); }
  25% { transform: translate(30vw, -15vh) rotate(-10deg) scale(1.1); }
  50% { transform: translate(60vw, 5vh) rotate(20deg) scale(0.9); }
  75% { transform: translate(90vw, -10vh) rotate(-15deg) scale(1.2); }
  100% { transform: translate(120vw, 0) rotate(10deg) scale(0.8); }
}

.screen {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  z-index: 10;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Landing */
#landing-screen {
  background: radial-gradient(circle at center, #0B2447 0%, #001233 100%); /* Azul Reflejo */
  z-index: 20;
}
.landing-content { text-align: center; padding: 2rem; position: relative; z-index: 2; }
.xv-mark {
  font-family: var(--font-elegant);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 300;
  background: linear-gradient(135deg, #E8F4FD, #FFFFFF, #87CEEB);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
  filter: drop-shadow(0 0 20px rgba(135,206,235,0.6));
  margin-bottom: 0.5rem;
}
.landing-subtitle {
  font-family: var(--font-script);
  font-size: 4rem; color: #FFFFFF;
  text-shadow: 0 0 15px rgba(135,206,235,0.8);
  margin-bottom: 3rem;
  opacity: 0; animation: fadeInUp 1s ease 0.5s forwards;
}
.start-btn {
  font-family: var(--font-elegant); font-size: 1.1rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #FFFFFF; padding: 1.2rem 3rem;
  border: 1px solid rgba(255,255,255,0.6); border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 20px rgba(135,206,235,0.3);
  transition: all 0.4s ease;
  opacity: 0; animation: fadeInUp 1s ease 1s forwards, pulse-btn 3s ease-in-out 2s infinite;
}
.start-btn:active { transform: scale(0.95); }

/* Envelope */
#envelope-screen {
  background: radial-gradient(circle at center, #0B2447 0%, #001233 100%); /* Azul Reflejo */
  z-index: 15;
}
.envelope-container { text-align: center; perspective: 1000px; }
.envelope {
  width: clamp(260px, 70vw, 340px); height: clamp(180px, 48vw, 240px);
  margin: 0 auto 2rem; position: relative; cursor: pointer;
  animation: float 4s ease-in-out infinite; transition: transform 0.3s ease;
  opacity: 0; filter: blur(20px);
}
.envelope.materialized { opacity: 1; filter: blur(0); transition: opacity 1.5s ease, filter 1.5s ease; }
.envelope-body {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0B2447, #C0C0C0, #001233, #E8F4FD, #0B2447); /* Azul reflejo con destellos plateados */
  background-size: 300% 300%;
  animation: shimmer 6s ease infinite;
  border-radius: 8px; box-shadow: 0 15px 40px rgba(135,206,235,0.4);
  display: flex; align-items: center; justify-content: center;
  position: relative; border: 1px solid rgba(255,255,255,0.2); overflow: hidden;
}
.envelope-flap {
  position: absolute; top: -1px; left: 0; width: 100%; height: 55%;
  background: linear-gradient(180deg, #1A365D, #0B2447);
  clip-path: polygon(0 0, 50% 85%, 100% 0); z-index: 2;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.5));
}
.envelope-seal {
  position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  background: radial-gradient(circle, #0B2447, #001233);
  border: 2px solid #ADB5BD;
  border-radius: 50%; z-index: 3;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.envelope-crown { width: 35px; height: 35px; fill: #E8F4FD; filter: drop-shadow(0 1px 2px rgba(255,255,255,0.8)); margin-bottom: -5px; }
.envelope-seal-text { font-family: 'Great Vibes', 'Dancing Script', cursive; font-size: 2.2rem; color: #E8F4FD; text-shadow: 0 0 5px rgba(255,255,255,0.5); font-weight: normal; line-height: 1; margin-top: -2px; }
.envelope-xv { font-family: var(--font-elegant); font-size: 4rem; color: var(--celeste-mid); z-index: 1; opacity: 0.3; }
.envelope-instruction { font-family: var(--font-elegant); font-size: 1.2rem; color: #FFFFFF; text-shadow: 0 0 5px rgba(0,0,0,0.5); opacity: 0; animation: fadeInUp 1s ease 2.5s forwards; }
.envelope.opening { animation: envelopeOpen 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes envelopeOpen {
  0% { transform: scale(1) rotateY(0deg); }
  50% { transform: scale(1.15) rotateY(90deg); opacity: 0.8; filter: brightness(1.2); }
  100% { transform: scale(1.4) rotateY(180deg); opacity: 0; filter: brightness(1.5); }
}

/* Main Content */
#main-invitation {
  position: relative; z-index: 5; display: none; padding-bottom: 4rem;
  overflow-x: hidden; width: 100vw; max-width: 100%;
}
#main-invitation.visible { 
  display: block; 
  animation: materialize 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; 
}

@keyframes materialize {
  0% { opacity: 0; transform: scale(0.95) translateY(20px); filter: blur(10px); }
  50% { filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.section { 
  width: 100%; 
  margin: 0 auto; 
  padding: 2rem 0; /* Horizontal padding handled by card width */
  position: relative; 
  box-sizing: border-box; 
  overflow: visible;
}

.card {
  position: relative;
  width: 90% !important; /* Fallback súper robusto */
  max-width: 520px !important; /* Fallback súper robusto */
  width: min(90vw, 520px) !important; /* Navegadores modernos */
  margin: 0 auto; /* Centra la tarjeta */
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0; 
  padding: 2.5rem 1.2rem; /* Fallback seguro */
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 1.5rem); /* Altura y espaciado dinámico */
  box-shadow: none;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.35));
  opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;
}
.card.visible { opacity: 1; transform: translateY(0); }

/* Fondo blanco mate compatible con TODOS los celulares (sin clip-path) */
.card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -2;
  background:
    /* Esquinas recortadas transparentes */
    linear-gradient(135deg, transparent 25px, #F8F9FA 25.5px) top left / 51% 51% no-repeat,
    linear-gradient(-135deg, transparent 25px, #F8F9FA 25.5px) top right / 51% 51% no-repeat,
    linear-gradient(45deg, transparent 25px, #F8F9FA 25.5px) bottom left / 51% 51% no-repeat,
    linear-gradient(-45deg, transparent 25px, #F8F9FA 25.5px) bottom right / 51% 51% no-repeat,
    /* Rellenos centrales para evitar la línea/cruz oscura de solapamiento */
    linear-gradient(#F8F9FA, #F8F9FA) center center / calc(100% - 52px) 100% no-repeat,
    linear-gradient(#F8F9FA, #F8F9FA) center center / 100% calc(100% - 52px) no-repeat;
}

/* Marco Geométrico Plateado (ahora usa ::after para no cortar las mariposas) */
.card::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: -1;
  background:
    /* Borde Exterior del Hexágono (Plateado) - Responsivo a 25px */
    linear-gradient(to right, #A8A8AD, #A8A8AD) top 0 left 25px / calc(100% - 50px) 1.5px no-repeat,
    linear-gradient(to right, #A8A8AD, #A8A8AD) bottom 0 left 25px / calc(100% - 50px) 1.5px no-repeat,
    linear-gradient(to bottom, #A8A8AD, #A8A8AD) top 25px left 0 / 1.5px calc(100% - 50px) no-repeat,
    linear-gradient(to bottom, #A8A8AD, #A8A8AD) top 25px right 0 / 1.5px calc(100% - 50px) no-repeat,
    
    /* Esquinas Diagonales Exteriores */
    linear-gradient(135deg, transparent 24px, #A8A8AD 24px, #A8A8AD 25.5px, transparent 25.5px) top left / 51% 51% no-repeat,
    linear-gradient(-135deg, transparent 24px, #A8A8AD 24px, #A8A8AD 25.5px, transparent 25.5px) top right / 51% 51% no-repeat,
    linear-gradient(45deg, transparent 24px, #A8A8AD 24px, #A8A8AD 25.5px, transparent 25.5px) bottom left / 51% 51% no-repeat,
    linear-gradient(-45deg, transparent 24px, #A8A8AD 24px, #A8A8AD 25.5px, transparent 25.5px) bottom right / 51% 51% no-repeat,
    
    /* Líneas Intersectadas (Efecto geométrico sobrepuesto) */
    linear-gradient(to right, #C0C0C0, #C0C0C0) top 10px left 15px / calc(100% - 30px) 1px no-repeat,
    linear-gradient(to right, #C0C0C0, #C0C0C0) bottom 10px left 15px / calc(100% - 30px) 1px no-repeat,
    linear-gradient(to bottom, #C0C0C0, #C0C0C0) top 15px left 10px / 1px calc(100% - 30px) no-repeat,
    linear-gradient(to bottom, #C0C0C0, #C0C0C0) top 15px right 10px / 1px calc(100% - 30px) no-repeat,
    
    /* Esquinas Diagonales Interiores */
    linear-gradient(135deg, transparent 16px, #C0C0C0 16px, #C0C0C0 17px, transparent 17px) top left / 51% 51% no-repeat,
    linear-gradient(-135deg, transparent 16px, #C0C0C0 16px, #C0C0C0 17px, transparent 17px) top right / 51% 51% no-repeat,
    linear-gradient(45deg, transparent 16px, #C0C0C0 16px, #C0C0C0 17px, transparent 17px) bottom left / 51% 51% no-repeat,
    linear-gradient(-45deg, transparent 16px, #C0C0C0 16px, #C0C0C0 17px, transparent 17px) bottom right / 51% 51% no-repeat;
}

/* Capa Externa Expansiva para las Mariposas Reales (Evita cortes / chutas) */
.card-inner-frame {
  position: absolute; 
  top: -50px; right: -50px; bottom: -50px; left: -50px; /* Expande la caja 50px en todas direcciones */
  pointer-events: none; z-index: 10;
  border: none;
  background:
    url('mariposa.webp') top 35px left 35px / 60px 60px no-repeat,
    url('mariposa.webp') bottom 40px right 35px / 75px 75px no-repeat,
    url('mariposa.webp') bottom 105px right 25px / 45px 45px no-repeat;
}

/* Títulos y Elementos */
.section-divider { 
  width: 80px; height: 1.5px; 
  background: linear-gradient(90deg, transparent, #A8A8AD, transparent); 
  margin: 1.5rem auto; 
}
.section-icon { 
  display: flex; justify-content: center; margin-bottom: 1.2rem; 
  filter: drop-shadow(0 2px 4px rgba(135,206,235,0.4));
}
/* Íconos con gradiente arcoiris/celeste simulado usando CSS fill */
.crystal-icon { fill: url(#crystal-grad); width: 50px; height: 50px; }

.section-title { 
  font-family: var(--font-elegant); font-size: 2.2rem; text-align: center; 
  background: linear-gradient(135deg, #7F7F7F, #595959); /* Plomo al 75% */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1rem; letter-spacing: 0.05em; text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}
.section-text { font-family: var(--font-elegant); font-size: 1.2rem; color: var(--text-secondary); text-align: center; line-height: 1.6; }

/* Tiara y Vestido */
.tiara-icon { width: 80px; margin: 0 auto 1rem; fill: url(#crystal-grad); filter: drop-shadow(0 2px 5px rgba(255,255,255,0.8)); }
.dress-silhouette { width: 140px; margin: 1.5rem auto; filter: drop-shadow(0 10px 15px rgba(135,206,235,0.4)); }

/* Tipografía Script Elegante */
.script-text {
  font-family: var(--font-script);
  font-size: 3.5rem;
  background: linear-gradient(135deg, #7F7F7F, #595959); /* Plomo al 75% */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(255,255,255,0.8));
  line-height: 1.2;
}

/* Header */
.header-section { text-align: center; padding-top: 4rem; }
.header-name { 
  font-family: var(--font-script); font-size: 3.5rem; 
  background: linear-gradient(135deg, #7F7F7F, #595959); 
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
  margin-bottom: 1.5rem; text-transform: none; letter-spacing: normal; filter: drop-shadow(0 2px 4px rgba(255,255,255,0.8)); 
}
.header-phrase { font-family: var(--font-elegant); font-size: 1.4rem; color: #333333; font-style: italic; line-height: 1.8; font-weight: 500; text-shadow: 0 0 1px rgba(255,255,255,0.8); }

.parents-names { 
  font-family: var(--font-elegant); 
  font-size: 1.5rem; 
  color: var(--text-primary); 
  text-align: center; 
  font-weight: 500; 
  word-wrap: break-word; 
  overflow-wrap: break-word; 
}
.parents-and { font-family: var(--font-script); font-size: 2.5rem; color: var(--celeste-mid); display: block; margin: 0.2rem 0; }

.date-day { font-family: var(--font-elegant); font-size: 6rem; background: linear-gradient(135deg, var(--gold), #F0D78C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; text-align: center; filter: drop-shadow(0 4px 8px rgba(212,175,55,0.2)); }
.date-month-year { font-family: var(--font-elegant); font-size: 1.5rem; color: var(--text-primary); text-align: center; text-transform: uppercase; letter-spacing: 0.25em; margin-top: 0.5rem; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 1.5rem; }
.countdown-item { 
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8); 
  border-radius: 12px; padding: 0.8rem 0.5rem; text-align: center;
  box-shadow: 0 4px 10px rgba(135,206,235,0.1);
}
.countdown-number { font-size: 2.2rem; color: var(--celeste-dark); font-family: var(--font-elegant); font-weight: 500; line-height: 1; }
.countdown-unit { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; font-family: var(--font-body); margin-top: 0.3rem; letter-spacing: 0.1em; }

.btn-maps {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  width: 100%; max-width: 300px; margin: 1.5rem auto 0; padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--celeste-mid), var(--celeste-dark)); 
  color: #FFF; border-radius: 50px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 0.9rem;
  box-shadow: 0 5px 15px rgba(135, 206, 235, 0.4);
  transition: all 0.3s ease;
}
.btn-maps:active { transform: scale(0.95); }
.btn-maps svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }

.dresscode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.dresscode-item { 
  text-align: center; background: rgba(255, 255, 255, 0.6); 
  border-radius: 12px; padding: 1.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 10px rgba(135,206,235,0.1);
}
.dresscode-icon { display: flex; justify-content: center; margin-bottom: 0.8rem; }
.dress-image {
  width: 100%; max-width: 250px; margin: 1rem auto;
  border-radius: 10px; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
  filter: drop-shadow(0 10px 15px rgba(135,206,235,0.3));
}
.dresscode-image {
  width: 100%; max-width: 280px; margin: 0 auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 80%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 80%);
  filter: contrast(1.1) drop-shadow(0 5px 15px rgba(135,206,235,0.3));
}

.color-swatch-row { 
  display: flex; align-items: center; gap: 1rem; padding: 0.8rem; 
  background: rgba(255, 255, 255, 0.6); border-radius: 12px; margin-bottom: 0.8rem; 
  border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 2px 5px rgba(135,206,235,0.05);
}
.color-swatch { width: 35px; height: 35px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.1); border: 2px solid #FFF; }

.quiz-option { 
  width: 100%; padding: 1rem; background: #FFF; 
  border: 1px solid var(--celeste-mid); border-radius: 12px; margin-bottom: 0.8rem; 
  font-family: var(--font-elegant); font-size: 1.2rem; color: var(--text-primary); 
  transition: all 0.3s; cursor: pointer;
}
.quiz-option:hover { background: var(--celeste-light); }
.quiz-option.correct { background: #D4EDDA; border-color: #28A745; color: #155724; }
.quiz-option.incorrect { background: #F8D7DA; border-color: #DC3545; color: #721C24; }

.qr-box { padding: 1.5rem; background: #FFF; border-radius: 20px; display: inline-block; box-shadow: 0 10px 30px rgba(135,206,235,0.2); border: 1px solid var(--celeste-mid); }

.playlist-form { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; width: 100%; }
.playlist-input {
  width: 100%; box-sizing: border-box; padding: 0.8rem; border: 1px solid var(--card-border);
  border-radius: 20px; font-family: var(--font-body); font-size: 1rem;
  background: rgba(255,255,255,0.8); color: var(--text-primary);
}
.playlist-input:focus { outline: none; border-color: var(--celeste-mid); background: #FFF; }
.btn-add {
  align-self: center; padding: 0.8rem 2rem; background: var(--celeste-mid); color: #FFF;
  border: none; border-radius: 20px; font-family: var(--font-elegant); font-size: 1.1rem;
  cursor: pointer; transition: all 0.3s ease;
}
.btn-add:hover { background: var(--celeste-dark); transform: scale(1.05); }
.success-msg { color: #27AE60; font-family: var(--font-body); font-size: 0.9rem; margin-bottom: 1rem; display: none; font-weight: 500; text-align: center; }
.playlist-item { padding: 0.8rem 1rem; background: #FFF; border-radius: 10px; margin-bottom: 0.5rem; border: 1px solid var(--card-border); font-family: var(--font-elegant); font-size: 1.1rem; color: var(--text-primary); }

.final-script { font-size: 5rem; margin-bottom: 1rem; }

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
@keyframes pulse-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(135,206,235,0); } 50% { box-shadow: 0 0 0 12px rgba(135,206,235,0.3); } }

* { animation-play-state: running !important; }