/* =======================================================
   TOKENS DE DISEÑO
   ======================================================= */
:root{
    --cherry:#FF4D6D;
    --tangerine:#FFA63D;
    --sunshine:#FFD93D;
    --grape:#8E44FF;
    --turquoise:#2EC4B6;
    --cream:#FFF6EA;
    --ink:#2B1B3D;

    --fuente-display:'Fredoka', sans-serif;
    --fuente-cuerpo:'Nunito', sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,217,61,.35), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(46,196,182,.3), transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(142,68,255,.25), transparent 50%),
        var(--cream);
    font-family:var(--fuente-cuerpo);
    color:var(--ink);
    overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* =======================================================
   CONFETI (canvas a pantalla completa, ignora clics)
   ======================================================= */
#confetti-canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:999;
}

/* =======================================================
   GLOBOS DE FONDO
   ======================================================= */
.fondo-decorado{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
.globo{
    position:absolute;
    font-size:3rem;
    opacity:.35;
    animation:flotar 9s ease-in-out infinite;
    filter:drop-shadow(0 10px 10px rgba(0,0,0,.08));
}
.globo-1{ left:6%; top:70%; animation-delay:0s; }
.globo-2{ left:88%; top:60%; animation-delay:1.5s; font-size:2.4rem; }
.globo-3{ left:20%; top:85%; animation-delay:3s; font-size:2rem; }
.globo-4{ left:75%; top:88%; animation-delay:4.5s; font-size:2.6rem; }

@keyframes flotar{
    0%,100%{ transform:translateY(0) rotate(-3deg); }
    50%{ transform:translateY(-40px) rotate(3deg); }
}

/* =======================================================
   ESTRUCTURA GENERAL
   ======================================================= */
main{ position:relative; z-index:1; }

.escena{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:60px 24px;
}

.escena-oculta{ display:none; }

.eyebrow{
    font-family:var(--fuente-cuerpo);
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:.8rem;
    color:var(--grape);
    margin:0 0 8px;
}

.titulo-grande{
    font-family:var(--fuente-display);
    font-weight:700;
    font-size:clamp(2.6rem, 8vw, 5rem);
    margin:0 0 50px;
    color:var(--ink);
    line-height:1;
}

.titulo-seccion{
    font-family:var(--fuente-display);
    font-size:clamp(1.6rem, 5vw, 2.4rem);
    margin:0 0 36px;
}

.pista{
    margin-top:42px;
    font-weight:700;
    color:var(--ink);
    opacity:.55;
    animation:pulso 2.2s ease-in-out infinite;
}

@keyframes pulso{
    0%,100%{ opacity:.35; }
    50%{ opacity:.75; }
}

/* =======================================================
   LA CAJA DE REGALO
   ======================================================= */
.caja{
    --w: 240px;
    --h: 170px;
    width:var(--w);
    height:var(--h);
    position:relative;
    cursor:pointer;
    perspective:800px;
}

.caja:focus-visible{
    outline:3px solid var(--grape);
    outline-offset:8px;
    border-radius:12px;
}

.caja-cuerpo{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:120px;
    background:linear-gradient(135deg, var(--cherry), #ff7a93);
    border-radius:10px;
    box-shadow:
        inset 0 -10px 20px rgba(0,0,0,.12),
        0 25px 40px -15px rgba(255,77,109,.55);
    transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}

.caja-tapa{
    position:absolute;
    top:18px;
    left:-10px;
    width:calc(100% + 20px);
    height:50px;
    background:linear-gradient(135deg, var(--tangerine), #ffc370);
    border-radius:10px 10px 4px 4px;
    box-shadow:0 10px 18px -8px rgba(255,166,61,.6);
    transform-origin:50% 100%;
    transition:transform .7s cubic-bezier(.34,1.56,.64,1), opacity .6s ease;
    z-index:2;
}

.cinta-vertical, .cinta-vertical-tapa{
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:26px;
    transform:translateX(-50%);
    background:var(--sunshine);
}
.cinta-horizontal{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:26px;
    transform:translateY(-50%);
    background:var(--sunshine);
}

.lazo{
    position:absolute;
    top:-26px;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:50px;
    z-index:3;
    transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
}
.lazo-asa{
    position:absolute;
    width:42px;
    height:34px;
    background:var(--sunshine);
    border-radius:50% 50% 50% 4px;
    top:0;
    box-shadow:inset 0 -4px 8px rgba(0,0,0,.1);
}
.lazo-asa-izq{ left:2px; transform:rotate(-18deg); }
.lazo-asa-der{ right:2px; transform:rotate(18deg) scaleX(-1); }
.lazo-nudo{
    position:absolute;
    width:22px;
    height:22px;
    background:#ffe27a;
    border-radius:50%;
    left:50%;
    top:18px;
    transform:translateX(-50%);
    box-shadow:0 3px 6px rgba(0,0,0,.15);
}

.caja-sombra{
    position:absolute;
    bottom:-22px;
    left:10%;
    width:80%;
    height:18px;
    background:radial-gradient(ellipse at center, rgba(43,27,61,.25), transparent 70%);
    border-radius:50%;
    transition:transform .5s ease, opacity .5s ease;
}

.caja:hover .caja-tapa{ transform:translateY(-4px) rotate(-2deg); }

/* Estado: caja abierta */
.caja.abierta .caja-tapa{
    transform:translate(-6px, -140px) rotate(-25deg);
    opacity:0;
}
.caja.abierta .lazo{
    transform:translate(40px, -180px) rotate(35deg);
    opacity:0;
}
.caja.abierta .caja-cuerpo{
    transform:scaleY(.92) translateY(4px);
}
.caja.abierta .caja-sombra{
    transform:scaleX(1.15);
    opacity:.6;
}

/* Rayo de luz al abrir */
.caja-cuerpo::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:10px;
    background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.55), transparent 60%);
    opacity:0;
    transition:opacity .4s ease;
}
.caja.abierta .caja-cuerpo::after{ opacity:1; }

/* =======================================================
   TARJETA DE MENSAJE
   ======================================================= */
.tarjeta-mensaje{
    max-width:560px;
    background:#fff;
    border-radius:24px;
    padding:48px 36px;
    box-shadow:0 30px 60px -20px rgba(43,27,61,.25);
    animation:aparecer .7s cubic-bezier(.2,.9,.3,1.2);
    position:relative;
}
.tarjeta-mensaje::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:24px;
    border:3px dashed rgba(142,68,255,.18);
    margin:10px;
    pointer-events:none;
}

@keyframes aparecer{
    from{ opacity:0; transform:translateY(40px) scale(.94); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.titulo-mensaje{
    font-family:var(--fuente-display);
    font-size:clamp(1.8rem, 5vw, 2.6rem);
    margin:0 0 18px;
    color:var(--cherry);
}
.cuerpo-mensaje{
    font-size:1.1rem;
    line-height:1.6;
    margin:0 0 22px;
}
.firma-mensaje{
    font-weight:800;
    color:var(--grape);
    margin:0 0 26px;
}

.boton-cta{
    font-family:var(--fuente-cuerpo);
    font-weight:800;
    font-size:1rem;
    color:#fff;
    background:linear-gradient(135deg, var(--grape), #b07bff);
    border:none;
    padding:14px 28px;
    border-radius:50px;
    cursor:pointer;
    box-shadow:0 14px 24px -10px rgba(142,68,255,.55);
    transition:transform .2s ease, box-shadow .2s ease;
}
.boton-cta:hover{ transform:translateY(-3px); box-shadow:0 18px 28px -10px rgba(142,68,255,.6); }
.boton-cta:active{ transform:translateY(0); }

/* =======================================================
   GALERÍA TIPO POLAROID
   ======================================================= */
.galeria{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:28px;
    max-width:1000px;
    width:100%;
}

.foto-polaroid{
    background:#fff;
    padding:14px 14px 22px;
    border-radius:8px;
    box-shadow:0 16px 30px -12px rgba(43,27,61,.2);
    cursor:pointer;
    transform:rotate(var(--giro, 0deg));
    transition:transform .25s ease, box-shadow .25s ease;
}
.foto-polaroid:hover{
    transform:rotate(0deg) scale(1.04) translateY(-4px);
    box-shadow:0 22px 36px -12px rgba(43,27,61,.3);
}
.foto-polaroid img{
    width:100%;
    height:190px;
    object-fit:cover;
    border-radius:4px;
    display:block;
    background:var(--cream);
}
.foto-polaroid .pie{
    margin:12px 2px 0;
    font-family:var(--fuente-display);
    font-size:.95rem;
    color:var(--ink);
    text-align:center;
}

.galeria-vacia{
    color:#9a8fb0;
    font-style:italic;
    font-size:1.05rem;
}

/* =======================================================
   LIGHTBOX
   ======================================================= */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(43,27,61,.92);
    z-index:1000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{
    max-width:min(90vw, 700px);
    max-height:70vh;
    border-radius:10px;
    box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.lightbox p{
    color:#fff;
    font-family:var(--fuente-display);
    margin-top:18px;
    font-size:1.1rem;
    text-align:center;
    max-width:80%;
}
.lightbox-cerrar{
    position:absolute;
    top:24px;
    right:24px;
    background:rgba(255,255,255,.15);
    border:none;
    color:#fff;
    width:44px;
    height:44px;
    border-radius:50%;
    font-size:1.2rem;
    cursor:pointer;
}
.lightbox-cerrar:hover{ background:rgba(255,255,255,.3); }

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width:480px){
    .caja{ --w:200px; --h:140px; }
    .tarjeta-mensaje{ padding:36px 24px; }
    .globo{ font-size:2.2rem; }
}