:root {
  --bg: #0b0911;
  --grad-hero: radial-gradient(circle at 50% 35%, #231a32 0%, #161222 55%, #100c18 85%);
  --grad-overlay: linear-gradient(to bottom, rgba(255,95,156,0.08), transparent 60%);
  --text: #f6e9f1;
  --text-soft: #d5c9d2;
  --accent: #ff4f8a;
  --accent-mid: #ff72a3;
  --accent-light: #ff9fc4;
  --accent-pale: #ffc9dd;
  --focus: #ff9bc7;
  --radius: 22px;
  font-family: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin:0; padding:0; }
html, body {
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; min-height:100vh; }

/* Canvas */
#particles {
  position: fixed;
  inset: 0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:40;
  opacity:0;
  transition: opacity .7s ease;
}
body.entered #particles { opacity:1; }

/* Intro */
#intro {
  position: fixed; inset:0;
  background: var(--grad-hero);
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1.2rem;
  z-index:999;
  opacity:1;
  transition: opacity .6s ease;
}
#intro::before {
  content:""; position:absolute; inset:0;
  background: var(--grad-overlay); pointer-events:none;
}
body.entered #intro { opacity:0; pointer-events:none; }

.intro-inner {
  max-width:640px;
  background: linear-gradient(140deg, rgba(255,79,138,0.14), rgba(255,79,138,0.035));
  border:1px solid rgba(255,156,195,0.18);
  backdrop-filter: blur(8px) saturate(140%);
  padding:2.2rem 1.6rem 2.5rem;
  border-radius:44px;
  box-shadow:0 6px 24px -10px rgba(0,0,0,0.55);
  text-align:center;
  animation: introFade .9s ease;
}
@keyframes introFade { from {opacity:0; transform: translateY(20px) scale(.96);} to {opacity:1; transform:translateY(0) scale(1);} }

.intro-title {
  font-family:'Pacifico', cursive;
  font-size: clamp(2.4rem,6vw,3.5rem);
  line-height:1;
  color: var(--accent-light);
  margin-bottom:.9rem;
  display:flex; gap:.6rem; justify-content:center; align-items:center;
  text-shadow:0 0 8px rgba(255,121,173,.4), 0 4px 18px rgba(0,0,0,.6);
}
.intro-icon {
  font-size: clamp(2rem,5vw,3rem);
  animation: floatIcon 6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,121,173,.55));
}
@keyframes floatIcon { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-8px);} }

.intro-msg {
  font-size:.95rem;
  color:var(--text-soft);
  line-height:1.55;
  max-width:480px;
  margin:0 auto 2rem;
}

.intro-btn {
  cursor:pointer;
  background: linear-gradient(145deg,var(--accent),var(--accent-mid) 55%,var(--accent-light));
  color:#1b0f17;
  font-family:'Pacifico', cursive;
  font-size:1.05rem;
  padding:.85rem 2.6rem;
  border:none;
  border-radius:46px;
  box-shadow:
    0 6px 22px -8px rgba(255,79,138,.65),
    0 2px 10px -4px rgba(255,79,138,.45),
    inset 0 2px 5px -2px rgba(255,255,255,.6);
  transition: transform .4s, box-shadow .4s, filter .4s;
  letter-spacing:.4px;
}
.intro-btn:hover, .intro-btn:focus {
  transform: translateY(-4px);
  filter: brightness(1.05);
  box-shadow:
    0 12px 30px -10px rgba(255,79,138,.75),
    0 4px 14px -4px rgba(255,79,138,.55),
    inset 0 3px 7px -3px rgba(255,255,255,.7);
}
.intro-btn:active { transform: translateY(1px) scale(.96); }
.intro-btn:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }

/* Ocultar contenido hasta entrar */
body.locked .hero,
body.locked main,
body.locked .footer {
  opacity:0; transition: opacity .65s ease .1s;
}
body.entered .hero,
body.entered main,
body.entered .footer {
  opacity:1;
}

/* Hero */
.hero {
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:2.4rem 1.4rem 3rem;
  background: var(--grad-hero);
  text-align:center;
  overflow:hidden;
}
.hero .content { max-width:820px; animation: heroIn .9s ease; }
@keyframes heroIn { from {opacity:0; transform:translateY(18px);} to {opacity:1; transform:translateY(0);} }

h1 {
  font-size: clamp(2.1rem,5vw,3.1rem);
  line-height:1.15;
  margin-bottom:1rem;
  font-weight:600;
  color: var(--accent-light);
  text-shadow:0 0 10px rgba(255,79,138,.28), 0 3px 14px rgba(0,0,0,.55);
}
.frase {
  font-size: clamp(1rem,2.1vw,1.22rem);
  line-height:1.55;
  margin:0 auto 1.8rem;
  color: var(--text-soft);
}
.scroll-hint {
  margin-top:2rem;
  font-size:.8rem;
  letter-spacing:2px;
  opacity:.6;
  text-transform:uppercase;
  animation: hintPulse 3.4s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100% {opacity:.35; transform:translateY(0);} 50% {opacity:.9; transform:translateY(-5px);} }

/* Botones generales */
.btn-primario, .btn-secundario {
  cursor:pointer;
  border:none;
  font-size:1rem;
  padding:.8rem 1.5rem;
  border-radius:44px;
  font-weight:600;
  transition: background .35s, transform .3s, box-shadow .35s;
  letter-spacing:.3px;
}
.btn-primario {
  background: linear-gradient(145deg,var(--accent),var(--accent-mid));
  color:#fff;
  box-shadow: 0 6px 18px -8px rgba(255,79,138,.6);
}
.btn-primario:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 26px -8px rgba(255,79,138,.7);
  background: linear-gradient(145deg,var(--accent),var(--accent-light));
}
.btn-secundario {
  background:#1d1627;
  color: var(--accent-light);
  border:1px solid rgba(255,156,195,.35);
  box-shadow:0 4px 14px -8px rgba(0,0,0,.6);
}
.btn-secundario:hover {
  background: var(--accent);
  color:#1b0f17;
  transform:translateY(-3px);
  border-color:var(--accent);
}

/* Carta */
.carta {
  position:relative;
  padding: clamp(3rem, 8vw, 5.2rem) 1.2rem 4.6rem;
  background: linear-gradient(to bottom,#171322 0%, #120e19 65%, #0e0a13 100%);
}
.carta-inner {
  max-width:820px;
  margin:0 auto;
  background: linear-gradient(160deg,#20182b,#191322 60%);
  padding:clamp(2rem,4vw,3rem);
  border-radius: var(--radius);
  border:1px solid rgba(255,156,195,.18);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.7), 0 4px 18px -8px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}
.carta-inner::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 25%,rgba(255,79,138,.15),transparent 60%),
    radial-gradient(circle at 20% 75%,rgba(255,156,195,.18),transparent 65%);
  mix-blend-mode:screen; opacity:.55; pointer-events:none;
}
.carta h2 {
  font-size: clamp(1.9rem,4.2vw,2.5rem);
  margin-bottom:1.2rem;
  color: var(--accent-light);
  font-weight:600;
  text-align:center;
  text-shadow:0 0 10px rgba(255,79,138,.35);
}
.carta p {
  font-size:1.02rem;
  line-height:1.62;
  margin-bottom:1.15rem;
  color: var(--text-soft);
}
.carta p.firma {
  text-align:right;
  font-style:italic;
  margin-top:2rem;
  font-size:1.05rem;
  color: var(--accent-pale);
}

/* Footer */
.footer {
  text-align:center;
  padding:2rem 1rem;
  font-size:.8rem;
  color:#a98da0;
  background:#0e0a13;
  border-top:1px solid #1d1522;
}

::selection { background: var(--accent-mid); color:#1b0f17; }

@media (max-width:680px) {
  .intro-inner { padding:1.9rem 1.2rem 2.1rem; }
  .intro-msg { font-size:.85rem; }
  .carta-inner { padding:1.9rem 1.3rem; }
  h1 { font-size:clamp(2rem,7vw,2.55rem); }
  .frase { font-size:1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
  #particles { display:none; }
}