/* =====================================================
   4 MESES · DÍA DE LA NOVIA
   Paleta kawaii-gótica inspirada en Kuromi
   ===================================================== */

:root{
  --noche:   #14061f;
  --uva:     #22093a;
  --uva-2:   #2f1150;
  --morado:  #6d28d9;
  --lila:    #b57bff;
  --lila-claro:#d9bcff;
  --neon:    #ff5fa2;
  --hueso:   #f6ecff;
  --negro:   #0b0410;

  --sombra-neon: 0 0 18px rgba(255,95,162,.55);
  --sombra-lila: 0 0 24px rgba(181,123,255,.45);
  --radio: 26px;

  --f-display: 'Bagel Fat One', cursive;
  --f-mano: 'Caveat', cursive;
  --f-cuerpo: 'Quicksand', sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--noche);
  color: var(--hueso);
  font-family: var(--f-cuerpo);
  font-weight:500;
  overflow-x:hidden;
  background-image:
    radial-gradient(900px 500px at 15% -5%, rgba(109,40,217,.45), transparent 60%),
    radial-gradient(700px 500px at 95% 10%, rgba(255,95,162,.20), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(109,40,217,.35), transparent 60%);
  background-attachment: fixed;
}

::selection{ background: var(--neon); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--negro); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--lila), var(--neon));
  border-radius:10px;
}

.oculto{ display:none !important; }

/* =====================================================
   MASCOTA / SVG COMPARTIDO
   ===================================================== */
.capucha{ fill:#1b0a2b; stroke:var(--lila); stroke-width:3; }
.capucha-punta{ fill:#1b0a2b; stroke:var(--lila); stroke-width:3; }
.ojo{ fill:#0b0410; }
.brillo{ fill:#fff; }
.boca{ fill:none; stroke:#0b0410; stroke-width:3; stroke-linecap:round; }
.cachete{ fill:var(--neon); opacity:.55; }
.mono{ fill:var(--neon); }
.nudo{ fill:#ff86bd; }
.sombra{ fill:rgba(0,0,0,.35); }
.aguja{ fill:var(--neon); }

/* =====================================================
   PANTALLA DE CARGA
   ===================================================== */
#cargando{
  position:fixed; inset:0; z-index:2000;
  background: var(--negro);
  display:grid; place-items:center;
  transition: opacity .6s ease, visibility .6s ease;
}
#cargando.fuera{ opacity:0; visibility:hidden; }
.calavera-loader{ text-align:center; }
.calavera-loader svg{ animation: latido 1.1s ease-in-out infinite; }
.calavera-loader p{
  margin-top:18px; color:var(--lila);
  font-family:var(--f-mano); font-size:1.5rem; letter-spacing:.5px;
}

/* =====================================================
   SOBRE / INTRO
   ===================================================== */
#sobre-pantalla{
  position:fixed; inset:0; z-index:1500;
  display:grid; place-items:center;
  background:
    radial-gradient(800px 500px at 50% 30%, rgba(109,40,217,.5), transparent 70%),
    var(--negro);
  transition: opacity .8s ease, transform .8s ease;
  overflow:hidden;
}
#sobre-pantalla.se-va{ opacity:0; transform: scale(1.15); pointer-events:none; }

.sobre-caja{ text-align:center; padding:24px; max-width:560px; position:relative; z-index:2; }
.sobre-eyebrow{
  text-transform:uppercase; letter-spacing:.35em; font-size:.7rem;
  color:var(--neon); margin-bottom:26px;
  animation: parpadeo 2.2s ease-in-out infinite;
}
.sobre{
  width:190px; height:130px; margin:0 auto 30px;
  position:relative; cursor:pointer;
  animation: flotar 3.2s ease-in-out infinite;
}
.cuerpo-sobre{
  position:absolute; inset:0;
  background: linear-gradient(160deg, var(--uva-2), var(--uva));
  border:3px solid var(--lila); border-radius:12px;
  box-shadow: var(--sombra-lila);
  display:grid; place-items:center;
}
.solapa{
  position:absolute; top:-3px; left:-3px; right:-3px; height:78px;
  background: linear-gradient(160deg, var(--morado), var(--uva-2));
  border:3px solid var(--lila);
  border-radius:12px 12px 60% 60% / 12px 12px 100% 100%;
  transform-origin: top center;
  transition: transform .7s cubic-bezier(.6,-0.3,.3,1.4);
  z-index:3;
}
.sobre.abierto .solapa{ transform: rotateX(180deg); }
.sello{ font-size:2.4rem; filter: drop-shadow(var(--sombra-neon)); }

.sobre-titulo{
  font-family:var(--f-display); font-size: clamp(2rem, 6vw, 3.2rem);
  color:var(--hueso); margin:0 0 10px; line-height:1.1;
  text-shadow: 0 0 22px rgba(181,123,255,.6);
}
.sobre-texto{ color:var(--lila-claro); margin-bottom:28px; font-size:1.05rem; }
.sobre-texto strong{ color:var(--neon); }

/* =====================================================
   BOTONES
   ===================================================== */
.btn-kuromi{
  position:relative; display:inline-block;
  padding:15px 38px; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--morado), var(--neon));
  color:#fff; font-family:var(--f-cuerpo); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; font-size:.85rem;
  border-radius:999px; text-decoration:none;
  box-shadow: 0 10px 26px rgba(109,40,217,.5);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  overflow:hidden;
}
.btn-kuromi::after{
  content:''; position:absolute; top:0; left:-120%;
  width:60%; height:100%; transform:skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition: left .6s ease;
}
.btn-kuromi:hover{ transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 34px rgba(255,95,162,.55); color:#fff; }
.btn-kuromi:hover::after{ left:130%; }
.btn-kuromi:active{ transform: translateY(-1px) scale(.99); }
.btn-sm-kuromi{ padding:11px 26px; font-size:.75rem; }

.btn-fantasma{
  padding:14px 34px; cursor:pointer;
  background:transparent; color:var(--lila-claro);
  border:2px solid var(--lila); border-radius:999px;
  font-family:var(--f-cuerpo); font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.06em;
  transition: all .25s ease;
}
.btn-fantasma:hover{
  background:var(--lila); color:var(--negro);
  box-shadow: var(--sombra-lila); transform: translateY(-3px);
}

:focus-visible{ outline:3px dashed var(--neon); outline-offset:4px; }

/* =====================================================
   NAV
   ===================================================== */
.nav-kuromi{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px clamp(16px, 5vw, 48px);
  background: rgba(20,6,31,.72);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(181,123,255,.25);
  transition: padding .3s ease, background .3s ease;
}
.nav-kuromi.compacta{ padding-top:8px; padding-bottom:8px; background: rgba(11,4,16,.9); }
.nav-marca{
  font-family:var(--f-display); font-size:1.15rem;
  color:var(--hueso); text-decoration:none; white-space:nowrap;
}
.nav-marca:hover{ color:var(--neon); }
.nav-links{
  display:flex; gap:22px; list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  color:var(--lila-claro); text-decoration:none; font-size:.9rem; font-weight:600;
  white-space:nowrap; position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: linear-gradient(90deg, var(--neon), var(--lila));
  transition: width .3s ease;
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ width:100%; }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative; min-height: 92vh;
  display:flex; align-items:center;
  padding: 70px 0 100px; overflow:hidden;
}
.luna{
  position:absolute; top:8%; right:8%;
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #f4e6ff, #c9a4ff 55%, #8b5cf6);
  box-shadow: 0 0 90px rgba(181,123,255,.6);
  opacity:.28; animation: flotar 7s ease-in-out infinite;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.3em; font-size:.72rem;
  color:var(--neon); font-weight:700; margin-bottom:14px;
}
.hero-titulo{
  font-family:var(--f-display);
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height:1.02; margin:0 0 22px;
  text-shadow: 0 6px 30px rgba(0,0,0,.55);
}
.degradado{
  background: linear-gradient(100deg, var(--neon), var(--lila), #fff, var(--neon));
  background-size: 300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: mover-degradado 6s linear infinite;
}
.hero-sub{
  color: var(--lila-claro); font-size:1.08rem; line-height:1.75;
  max-width: 520px; margin-bottom:34px;
}
.hero-sub strong{ color:#fff; }
.hero-botones{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
@media (min-width: 992px){ .hero-botones{ justify-content:flex-start; } }

.mascota{ position:relative; display:inline-block; }
.mascota-svg{
  width: clamp(200px, 46vw, 320px);
  filter: drop-shadow(0 18px 34px rgba(255,95,162,.35));
  animation: flotar 4s ease-in-out infinite;
}
.orbita{
  position:absolute; font-size:1.7rem;
  animation: orbitar 9s linear infinite;
}
.orbita-1{ top:6%;  left:-6%;  animation-duration: 8s; }
.orbita-2{ bottom:12%; right:-8%; animation-duration: 11s; animation-direction: reverse; }
.orbita-3{ top:52%; left:-12%; animation-duration: 13s; }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mano); font-size:1.25rem; color:var(--lila);
  animation: rebotar 2s ease-in-out infinite;
}

/* =====================================================
   SECCIONES
   ===================================================== */
.seccion{ padding: clamp(70px, 10vw, 120px) 0; position:relative; }
.seccion-alt{
  background: linear-gradient(180deg, transparent, rgba(34,9,58,.75) 12%, rgba(34,9,58,.75) 88%, transparent);
}
.titulo-seccion{
  font-family:var(--f-display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  margin:0 0 14px; line-height:1.12;
  text-shadow: 0 0 26px rgba(181,123,255,.35);
}
.sub-seccion{
  color:var(--lila-claro); max-width:620px; margin:0 auto 54px; font-size:1.02rem;
}

/* Aparición al hacer scroll */
.reveal{ opacity:0; transform: translateY(38px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible{ opacity:1; transform:none; }

/* =====================================================
   CONTADOR
   ===================================================== */
.contador{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(6px, 2vw, 20px); flex-wrap:wrap; margin: 34px 0 18px;
}
.contador-item{
  min-width: clamp(76px, 19vw, 132px);
  padding: 20px 10px;
  background: linear-gradient(160deg, rgba(109,40,217,.5), rgba(20,6,31,.9));
  border:2px solid rgba(181,123,255,.45);
  border-radius: var(--radio);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 30px rgba(181,123,255,.12);
  text-align:center;
}
.contador-item span{
  display:block; font-family:var(--f-display);
  font-size: clamp(1.9rem, 6.5vw, 3.1rem); line-height:1;
  color:#fff; text-shadow: var(--sombra-neon);
}
.contador-item small{
  display:block; margin-top:8px; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.22em; color:var(--lila);
}
.contador-sep{ font-family:var(--f-display); font-size:2rem; color:var(--neon); animation: parpadeo 1s steps(2) infinite; }
.contador-nota{ font-family:var(--f-mano); font-size:1.5rem; color:var(--lila-claro); }

.mini-card{
  height:100%; text-align:center; padding:30px 22px;
  background: rgba(34,9,58,.55);
  border:1px solid rgba(181,123,255,.3);
  border-radius: var(--radio);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mini-card:hover{ transform: translateY(-8px); border-color:var(--neon); box-shadow: 0 18px 40px rgba(255,95,162,.22); }
.mini-emoji{ font-size:2rem; }
.mini-card h3{ font-family:var(--f-display); font-size:2.2rem; margin:10px 0 4px; color:var(--lila); }
.mini-card p{ margin:0; font-size:.92rem; color:var(--lila-claro); }

/* =====================================================
   LÍNEA DE TIEMPO (4 MESES)
   ===================================================== */
.linea-tiempo{ position:relative; max-width:900px; margin:0 auto; padding: 10px 0; }
.linea-tiempo::before{
  content:''; position:absolute; top:0; bottom:0; left:26px; width:3px;
  background: linear-gradient(180deg, var(--neon), var(--lila), transparent);
  border-radius:3px;
}
.hito{ position:relative; padding-left:76px; margin-bottom:46px; }
.hito-punto{
  position:absolute; left:6px; top:4px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(140deg, var(--morado), var(--neon));
  border:3px solid var(--noche);
  box-shadow: var(--sombra-neon);
  font-family:var(--f-display); font-size:1.1rem; color:#fff;
}
.hito-tarjeta{
  background: rgba(20,6,31,.75);
  border:1px solid rgba(181,123,255,.3);
  border-radius: var(--radio);
  padding: 26px 28px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hito-tarjeta:hover{ transform: translateX(8px); border-color:var(--neon); box-shadow: -8px 14px 34px rgba(109,40,217,.35); }
.hito-mes{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.24em;
  color:var(--neon); font-weight:700;
}
.hito-tarjeta h3{ font-family:var(--f-display); font-size:1.5rem; margin:8px 0 10px; color:#fff; }
.hito-tarjeta p{ margin:0; color:var(--lila-claro); line-height:1.7; font-size:.98rem; }

@media (min-width: 768px){
  .linea-tiempo::before{ left:50%; transform:translateX(-50%); }
  .hito{ width:50%; padding-left:0; padding-right:52px; }
  .hito:nth-child(even){ margin-left:50%; padding-right:0; padding-left:52px; }
  .hito-punto{ left:auto; right:-22px; }
  .hito:nth-child(even) .hito-punto{ right:auto; left:-22px; }
  .hito:nth-child(even) .hito-tarjeta:hover{ transform: translateX(-8px); }
}

/* =====================================================
   RULETA
   ===================================================== */
.ruleta-zona{
  position:relative; width: min(90vw, 460px);
  margin: 0 auto; aspect-ratio:1;
}
.ruleta-marco{
  position:absolute; inset:0; border-radius:50%;
  padding:14px;
  background: linear-gradient(140deg, var(--lila), var(--neon), var(--morado));
  box-shadow: 0 0 60px rgba(181,123,255,.4), inset 0 0 30px rgba(0,0,0,.4);
}
.ruleta-luces{
  position:absolute; inset:0; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.85) 0deg 1.4deg, transparent 1.4deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 92%, #000 92% 100%);
          mask: radial-gradient(circle, transparent 0 92%, #000 92% 100%);
  animation: girar-luces 12s linear infinite;
  opacity:.7; pointer-events:none;
}
.ruleta{
  position:absolute; inset:14px; border-radius:50%;
  background: var(--noche);
  transition: transform 5s cubic-bezier(.14,.85,.19,1);
  will-change: transform;
}
.gajo{
  position:absolute; inset:0; border-radius:50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%);
}
.opcion{
  position:absolute; top:50%; left:50%;
  width: 30%; aspect-ratio:1;
  margin:-15% 0 0 -15%;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  background: linear-gradient(140deg, var(--morado), var(--neon));
}
.opcion img{ width:100%; height:100%; object-fit:cover; display:block; }
.ruleta-centro{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:27%; aspect-ratio:1; border-radius:50%;
  border:4px solid #fff; cursor:pointer;
  background: linear-gradient(140deg, var(--neon), var(--morado));
  color:#fff; font-family:var(--f-display); font-size: clamp(.75rem, 2.6vw, 1.05rem);
  letter-spacing:.05em;
  box-shadow: 0 0 26px rgba(255,95,162,.7);
  transition: transform .25s ease, box-shadow .25s ease;
  z-index:5;
}
.ruleta-centro:hover{ transform:translate(-50%,-50%) scale(1.08); box-shadow: 0 0 44px rgba(255,95,162,.95); }
.ruleta-centro:disabled{ opacity:.6; cursor:not-allowed; }
.ruleta-centro.girando{ animation: latido .6s ease-in-out infinite; }

.puntero{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  z-index:10; filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
  transition: transform .15s ease;
}
.puntero.moviendo{ animation: golpecito .12s linear infinite; }
.ruleta-contador{ margin-top:40px; color:var(--lila); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; }

/* =====================================================
   RAZONES (tarjetas que giran)
   ===================================================== */
.tarjeta-flip{ perspective: 1200px; cursor:pointer; }
.tarjeta-inner{
  position:relative; width:100%; aspect-ratio: 1/1.05;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.4,.2,.2,1);
}
.tarjeta-flip.volteada .tarjeta-inner{ transform: rotateY(180deg); }
.cara{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius: var(--radio);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:18px; text-align:center;
  border:2px solid rgba(181,123,255,.4);
}
.cara-frente{
  background: linear-gradient(160deg, rgba(109,40,217,.55), rgba(20,6,31,.95));
}
.cara-frente .numero{
  font-family:var(--f-display); font-size:2.4rem; color:var(--neon);
  text-shadow: var(--sombra-neon);
}
.cara-frente small{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--lila); }
.cara-atras{
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--neon), var(--morado));
  color:#fff;
}
.cara-atras p{ margin:0; font-family:var(--f-mano); font-size:1.35rem; line-height:1.35; }
.tarjeta-flip:hover .cara{ border-color: var(--neon); }

/* =====================================================
   CARTA
   ===================================================== */
.carta-papel{
  max-width:760px; margin:0 auto; padding: clamp(30px, 6vw, 56px);
  background:
    linear-gradient(160deg, rgba(246,236,255,.97), rgba(226,209,255,.94));
  color:#2b0f45; border-radius: var(--radio);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
  position:relative; min-height:280px;
  border: 3px solid var(--lila);
}
.carta-papel::before{
  content:'💜'; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:2.2rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.carta-texto{
  font-family:var(--f-mano); font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  line-height:1.65; white-space: pre-wrap; margin:0;
}
.cursor-escritura{
  font-family:var(--f-mano); font-size:1.6rem; color:var(--morado);
  animation: parpadeo .8s steps(2) infinite;
}
.carta-firma{
  margin-top:26px; text-align:right;
  font-family:var(--f-mano); font-size:1.5rem; color:var(--morado);
  opacity:0; transition: opacity .8s ease;
}
.carta-firma.visible{ opacity:1; }

/* =====================================================
   PIE
   ===================================================== */
.pie{ text-align:center; padding:60px 20px 80px; color:var(--lila); }
.pie-linea{
  width:140px; height:3px; margin:0 auto 26px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
}
.pie p{ margin:4px 0; font-size:.92rem; }
.pie-firma{ font-family:var(--f-display); font-size:1.3rem; color:#fff; }

/* =====================================================
   MODAL
   ===================================================== */
.modal-kuromi{
  background: linear-gradient(165deg, var(--uva-2), var(--noche));
  border:2px solid var(--lila); border-radius: var(--radio);
  box-shadow: 0 0 60px rgba(181,123,255,.4);
  color:var(--hueso); position:relative;
}
.modal-kuromi .modal-body{ padding: 34px 28px 30px; }
.btn-cerrar-modal{
  position:absolute; top:12px; right:14px; z-index:5;
  width:36px; height:36px; border-radius:50%;
  border:2px solid var(--lila); background:transparent; color:var(--lila);
  font-size:1rem; line-height:1; cursor:pointer; transition: all .2s ease;
}
.btn-cerrar-modal:hover{ background:var(--neon); border-color:var(--neon); color:#fff; }
.modal-foto-marco{
  width:170px; height:170px; margin:0 auto 20px; border-radius:50%;
  overflow:hidden; border:4px solid var(--neon);
  box-shadow: var(--sombra-neon);
}
.modal-foto-marco img{ width:100%; height:100%; object-fit:cover; }
#modal-titulo{ font-family:var(--f-display); font-size:1.6rem; margin-bottom:12px; color:#fff; }
#modal-texto{ color:var(--lila-claro); line-height:1.7; margin-bottom:24px; }

/* =====================================================
   MÚSICA
   ===================================================== */
.btn-musica{
  position:fixed; bottom:22px; right:22px; z-index:950;
  width:56px; height:56px; border-radius:50%;
  border:2px solid var(--lila); cursor:pointer;
  background: rgba(20,6,31,.9); color:#fff; font-size:1.3rem;
  box-shadow: var(--sombra-lila);
  transition: transform .25s ease, background .25s ease;
}
.btn-musica:hover{ transform: scale(1.12); background: var(--morado); }
.btn-musica.sonando{ animation: latido 1.4s ease-in-out infinite; border-color:var(--neon); }

/* =====================================================
   PARTÍCULAS
   ===================================================== */
#capa-corazones{ position:fixed; inset:0; pointer-events:none; z-index:1200; overflow:hidden; }
.corazon-flotante{
  position:absolute; font-size:1.6rem; user-select:none;
  animation: subir linear forwards;
}
.estrellitas{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.estrellita{
  position:absolute; border-radius:50%; background:#fff;
  animation: titilar ease-in-out infinite;
}

/* =====================================================
   MENSAJE FLOTANTE
   ===================================================== */
.mensaje-flotante{
  position:fixed; top:50%; left:50%; z-index:1400;
  transform: translate(-50%, -50%) scale(.75);
  padding: 20px 42px; border-radius:999px;
  background: linear-gradient(135deg, var(--morado), var(--neon));
  color:#fff; font-family:var(--f-display);
  font-size: clamp(1.2rem, 4.5vw, 2rem); text-align:center;
  box-shadow: 0 0 60px rgba(255,95,162,.7);
  opacity:0; pointer-events:none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,1.4,.4,1);
}
.mensaje-flotante.visible{ opacity:1; transform: translate(-50%,-50%) scale(1); }

/* =====================================================
   ANIMACIONES
   ===================================================== */
@keyframes flotar{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }
@keyframes latido{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.09); } }
@keyframes parpadeo{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } }
@keyframes rebotar{ 0%,100%{ transform: translate(-50%, 0); } 50%{ transform: translate(-50%, 12px); } }
@keyframes mover-degradado{ 0%{ background-position: 0% 50%; } 100%{ background-position: 300% 50%; } }
@keyframes girar-luces{ to{ transform: rotate(360deg); } }
@keyframes golpecito{ 0%,100%{ transform: translateX(-50%) rotate(0deg);} 50%{ transform: translateX(-50%) rotate(-9deg);} }
@keyframes titilar{ 0%,100%{ opacity:.15; transform:scale(.7);} 50%{ opacity:1; transform:scale(1.25);} }
@keyframes orbitar{
  from{ transform: rotate(0deg) translateX(14px) rotate(0deg); }
  to{   transform: rotate(360deg) translateX(14px) rotate(-360deg); }
}
@keyframes subir{
  0%{ transform: translateY(0) rotate(0deg) scale(.6); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateY(-110vh) rotate(var(--giro, 240deg)) scale(1.2); opacity:0; }
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
    scroll-behavior:auto !important;
  }
  .ruleta{ transition-duration: 1.2s !important; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 991px){
  .luna{ width:120px; height:120px; top:4%; right:4%; }
  .hero{ text-align:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
}
@media (max-width: 575px){
  .nav-links{ gap:14px; }
  .nav-links a{ font-size:.8rem; }
  .contador-sep{ display:none; }
  .contador-item{ flex:1 1 40%; }
  .modal-foto-marco{ width:135px; height:135px; }
}