*{box-sizing:border-box;margin:0;padding:0}:root{--rosa:#c7658e;--vino:#68404f;--texto:#4d3d43;--blanco:rgba(255,252,251,.94);--borde:rgba(199,101,142,.23);--sombra:rgba(80,45,59,.14)}html,body{min-height:100%;scroll-behavior:smooth}body{min-height:100vh;font-family:Georgia,"Times New Roman",serif;color:var(--texto);background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.9),transparent 30%),radial-gradient(circle at 85% 85%,rgba(233,190,210,.35),transparent 28%),linear-gradient(135deg,#fff7fa,#f8e7ef 50%,#efe7f0);overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}#app{position:relative;z-index:5;width:100%;min-height:100vh}.pantalla{display:none;width:100%;min-height:100vh;align-items:center;justify-content:center;padding:35px 18px}.pantalla.activa{display:flex;animation:aparecer .65s ease}.tarjeta{position:relative;width:min(720px,94vw);padding:48px 42px;text-align:center;background:var(--blanco);border:1px solid var(--borde);border-radius:28px;box-shadow:0 20px 55px var(--sombra);backdrop-filter:blur(10px)}.tarjeta-historia{width:min(850px,95vw)}.portada{width:min(560px,94vw)}h1,h2{color:var(--vino);font-family:Georgia,"Times New Roman",serif;font-weight:400}h1{font-size:clamp(50px,9vw,78px);margin:10px 0 16px}h2{font-size:clamp(32px,5vw,48px);line-height:1.2;margin-bottom:25px}.eyebrow{color:#a05e79;font:600 11px Arial,sans-serif;letter-spacing:3px;margin-bottom:12px}.ornamento{color:var(--rosa);font-size:32px;margin-bottom:8px}.ornamento.grande{font-size:65px;animation:latido 2s ease-in-out infinite}.linea{width:90px;height:1px;margin:0 auto 22px;background:rgba(199,101,142,.4)}.texto{max-width:700px;margin:0 auto}.texto p{color:#59474f;font-size:17px;line-height:1.95;margin-bottom:20px;text-align:left}.intro{max-width:440px;margin:0 auto 28px;color:#604b55;font-size:17px;line-height:1.8;text-align:center}.acceso{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}#password{width:180px;padding:13px 16px;border:1px solid rgba(199,101,142,.4);border-radius:25px;background:#fff;color:var(--texto);outline:none;text-align:center;letter-spacing:.12em}#entrar,.boton-principal,.boton-elegante,.boton-si,.boton-no,.boton-secundario{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:26px;padding:12px 28px;font:600 14px Arial,sans-serif;line-height:1;text-align:center;white-space:nowrap;appearance:none;outline:none}.boton-principal,.boton-si{border:none;color:#fff;background:linear-gradient(135deg,#cb6a95,#b4527d);box-shadow:0 8px 20px rgba(180,82,125,.18)}.boton-elegante{min-width:185px;margin:8px auto 0;border:1px solid rgba(199,101,142,.35);color:#7f3f59;background:linear-gradient(135deg,#fff7fa,#f1d1df);box-shadow:0 7px 18px rgba(80,45,59,.08)}.boton-secundario,.boton-no{border:1px solid rgba(199,101,142,.3);background:#fff;color:#874d66}.boton-principal:hover,.boton-elegante:hover,.boton-si:hover,.boton-secundario:hover,.boton-no:hover{transform:translateY(-3px)}#error-password{min-height:22px;margin-top:12px;color:#ae496e;font:13px Arial,sans-serif}.historia-contenido{position:relative;z-index:4;max-width:700px;margin:0 auto;text-align:left}.historia-contenido p{margin-bottom:21px;color:#59474f;font-size:17px;line-height:1.95;text-align:left}.navegacion,.respuestas{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}.media{position:relative;z-index:6;width:100%;margin:28px auto;text-align:center}.media img,.media video{display:block;width:100%;max-height:480px;object-fit:contain;margin:0 auto;border-radius:20px;box-shadow:0 15px 35px rgba(80,45,59,.12)}.lluvia-carta{position:absolute;inset:0;overflow:hidden;border-radius:28px;pointer-events:none;opacity:0;transition:opacity .5s;z-index:1}.lluvia-carta.activa{opacity:.58}.lluvia-gota{position:absolute;top:-35px;width:1px;height:32px;background:rgba(95,125,165,.48);animation:caer linear infinite}.lluvia-carta~.navegacion,.lluvia-carta~.media{position:relative}.sobre{position:relative;width:190px;height:128px;margin:0 auto 28px;background:#e8afc6;border-radius:6px;box-shadow:0 14px 30px rgba(80,45,59,.13)}.sobre span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:31px;z-index:3}.firma{max-width:700px;margin:30px auto;text-align:center;line-height:1.7}.firma span,.firma strong{display:block}.firma strong{color:var(--vino);font-size:23px;font-weight:400}.tarjeta-final label{display:block;text-align:center;font:13px Arial,sans-serif;color:#765563}.nombre-input{display:block;width:min(280px,85vw);margin:10px auto 12px;padding:13px 16px;border:1px solid rgba(199,101,142,.38);border-radius:25px;text-align:center}.mensaje-final{margin-top:22px;padding:18px;border-radius:18px;background:rgba(248,225,235,.7);line-height:1.8;text-align:center}#corazones-fondo,#flores-fondo,#estrellas-fondo{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}#corazones-fondo{z-index:1}#flores-fondo,#estrellas-fondo{z-index:2}.corazon{position:absolute;left:0;bottom:-60px;display:block;color:rgba(199,101,142,.48);line-height:1;white-space:nowrap;pointer-events:none;animation:subir linear forwards}.flor{position:absolute;opacity:.3;animation:flotar 6s ease-in-out infinite}.estrella{position:absolute;color:rgba(177,103,137,.35);animation:brillo 3s ease-in-out infinite}.musica-control{position:fixed;right:18px;bottom:18px;z-index:30;width:46px;height:46px;border:1px solid rgba(199,101,142,.3);border-radius:50%;background:rgba(255,255,255,.92);color:var(--rosa);cursor:pointer;box-shadow:0 7px 18px rgba(80,45,59,.1)}@keyframes aparecer{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes subir{from{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.5}to{transform:translateY(-115vh) rotate(18deg);opacity:0}}@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes brillo{0%,100%{opacity:.15}50%{opacity:.7}}@keyframes caer{to{transform:translateY(110vh) translateX(-20px)}}.oculto{display:none!important}
/* =========================================================
   MARCO ROMÁNTICO PARA FOTO + VIDEO
========================================================= */

.media {
    position: relative;
    width: min(720px, 100%);
    margin: 34px auto 22px;
    padding: 22px 20px 24px;
    border: 1px solid rgba(199, 101, 142, .24);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,246,250,.96));
    box-shadow:
        0 18px 42px rgba(80,45,59,.11),
        inset 0 0 0 1px rgba(255,255,255,.8);
    overflow: hidden;
}

.media::before {
    content: "♡      ✦      ♡";
    display: block;
    text-align: center;
    color: rgba(199,101,142,.62);
    font-family: Georgia, serif;
    font-size: 17px;
    letter-spacing: 7px;
    margin-bottom: 12px;
}

.media::after {
    content: "UN RECUERDO PARA NOSOTROS";
    display: block;
    text-align: center;
    margin-top: 14px;
    color: #8b5269;
    font: 600 10px Arial, sans-serif;
    letter-spacing: 2.4px;
}

/* Filete decorativo interior para que no parezca un marco básico. */
.media > img,
.media > video {
    position: relative;
    z-index: 2;
}

.media-completo {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.media-completo img,
.media-completo video,
.media-solo-foto img,
.media-solo-video video {
    display: block;
    width: min(640px, 96%);
    margin: 0 auto;
    object-fit: contain;
    border: 9px solid #fff;
    border-radius: 17px;
    box-shadow:
        0 12px 28px rgba(80,45,59,.14),
        0 0 0 1px rgba(199,101,142,.12);
    background: #fff;
}

.media-completo img {
    max-height: 430px;
}

.media-completo video {
    max-height: 360px;
}

.media-solo-foto img {
    max-height: 480px;
}

.media-solo-video video {
    max-height: 430px;
}

/* Pequeños adornos de esquina */
.media-completo::after,
.media-solo-foto::after,
.media-solo-video::after {
    content: "✦";
    position: absolute;
    right: 18px;
    top: 18px;
    color: rgba(199,101,142,.55);
    font-size: 16px;
    z-index: 3;
}


/* Pista visual de la fecha: solo guía, las barras no se escriben. */
.fecha-pista {
    margin-top: 9px;
    color: rgba(104,64,79,.48);
    font: 600 10px Arial,sans-serif;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(104,64,79,.18);
}

#error-password {
    transition: opacity .2s ease;
}

.password-error {
    animation: sacudirPassword .4s ease;
    border-color: #c7658e !important;
    box-shadow: 0 0 0 4px rgba(199,101,142,.10) !important;
}

@keyframes sacudirPassword {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-4px); }
}

/* Marco especial de recuerdo final, estilo matrimonio. */
#celebracion-final .foto-final {
    position: relative;
    width: min(460px, 82vw);
    max-height: 48vh;
    padding: 14px;
    background: #fff;
    border: 7px solid #fff;
    outline: 2px solid rgba(199,101,142,.38);
    outline-offset: 7px;
    border-radius: 12px;
    box-shadow:
        0 18px 45px rgba(80,45,59,.18),
        0 0 0 12px rgba(248,225,235,.72),
        0 0 0 14px rgba(199,101,142,.18);
}

#celebracion-final::before,
#celebracion-final::after {
    position: absolute;
    z-index: 2;
    color: #c7658e;
    font-size: 30px;
    text-shadow: 0 0 12px rgba(199,101,142,.35);
}

#celebracion-final::before {
    content: "❀  ❧";
    top: 8%;
    left: 8%;
    transform: rotate(-10deg);
}

#celebracion-final::after {
    content: "❧  ❀";
    right: 8%;
    bottom: 8%;
    transform: rotate(10deg);
}

#celebracion-final .celebracion-titulo {
    max-width: 820px;
    margin-top: 28px;
}
@media (max-width: 650px) {
    .media {
        margin-top: 28px;
        padding: 16px 13px 18px;
        border-radius: 24px;
    }

    .media::before {
        font-size: 14px;
        letter-spacing: 5px;
    }

    .media-completo {
        gap: 13px;
    }

    .media-completo img,
    .media-completo video,
    .media-solo-foto img,
    .media-solo-video video {
        width: 96%;
        border-width: 6px;
        border-radius: 13px;
    }

    .media-completo img {
        max-height: 330px;
    }

    .media-completo video {
        max-height: 250px;
    }

    .media-solo-foto img,
    .media-solo-video video {
        max-height: 340px;
    }
}

/* =========================================================
   BLOQUE DE CONTRASEÑA — GUÍA DENTRO DEL CAMPO
========================================================= */
.password-area{align-items:flex-start;}
.password-box{position:relative;width:190px;}
.password-input-wrap{position:relative;width:100%;}
.password-box #password{width:100%;padding-right:44px;}
.ver-password{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:#a05e79;font:600 15px Arial,sans-serif;cursor:pointer;z-index:2;}
.ver-password:hover{background:rgba(199,101,142,.08);transform:translateY(-50%);}
.password-box .fecha-pista{margin-top:6px;color:rgba(104,64,79,.55);font:600 10px Arial,sans-serif;letter-spacing:3px;text-align:center;text-shadow:0 2px 10px rgba(104,64,79,.18);}
#nombre.password-error{animation:sacudirPassword .4s ease;border-color:#c7658e !important;box-shadow:0 0 0 4px rgba(199,101,142,.10) !important;}
@media (max-width:650px){.password-area{align-items:center}.password-box{width:185px}}

/* =========================================================
   AJUSTES VISUALES FINALES — CONTRASEÑA Y MARCOS
========================================================= */
.password-box{width:210px;position:relative}
.password-input-wrap{position:relative;width:100%;}
.password-input-wrap #password{width:100%;padding-right:46px;padding-left:18px;text-align:center;}
.password-input-wrap #password::placeholder{color:rgba(104,64,79,.34);letter-spacing:3px;font-weight:600;}
.password-input-wrap #password.escribiendo-fecha::placeholder{color:transparent}
.ver-password{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:0;background:transparent;color:#a05e79;font:600 14px Arial,sans-serif;cursor:pointer;z-index:5}
.ver-password:hover{color:#c7658e;background:rgba(199,101,142,.08);border-radius:50%;}

/* Marco individual de cada foto y cada video */
.media{padding:24px 20px 24px;}
.media::before{content:"♡  ✦  ❀  ♡";letter-spacing:8px;color:rgba(199,101,142,.72);font-size:18px;}
.media-frame{position:relative;width:min(650px,96%);margin:0 auto;padding:12px 12px 17px;border:1px solid rgba(199,101,142,.32);border-radius:22px;background:linear-gradient(145deg,#fff,#fff7fb);box-shadow:0 10px 26px rgba(80,45,59,.12),inset 0 0 0 2px rgba(255,255,255,.8);overflow:hidden}
.media-frame::before{content:"❀  ♡  ❀";position:absolute;top:7px;left:50%;transform:translateX(-50%);color:rgba(199,101,142,.62);font-size:13px;letter-spacing:5px;z-index:4;white-space:nowrap}
.media-frame::after{content:"";position:absolute;inset:7px;border:1px solid rgba(199,101,142,.13);border-radius:17px;pointer-events:none;z-index:3}
.media-frame img,.media-frame video{position:relative;z-index:2;display:block;width:100%;margin:18px auto 0;border:6px solid #fff;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(80,45,59,.12);object-fit:contain}
.media-frame.foto-frame img{max-height:430px}
.media-frame.video-frame video{max-height:330px}
.media-frame.video-frame{padding-bottom:20px}
.media-frame.video-frame::before{content:"✦  ♥  ✦"}
.media::after{content:"";display:block;height:2px;margin:18px auto 0;width:74%;background:linear-gradient(90deg,transparent,rgba(199,101,142,.3),transparent)}

/* Marco final — más grande, luminoso y floral */
#celebracion-final{position:fixed;inset:0;z-index:9997;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;text-align:center;background:rgba(255,248,251,.96);backdrop-filter:blur(5px);overflow:auto}
#celebracion-final .foto-final{display:block;width:min(600px,88vw);max-height:56vh;height:auto;object-fit:contain;border:8px solid #fff;border-radius:18px}
#celebracion-final .final-photo-frame{position:relative;width:min(650px,92vw);padding:18px 18px 62px;border-radius:26px;background:linear-gradient(145deg,#fff,#fff8fb);box-shadow:0 0 0 2px rgba(199,101,142,.28),0 0 0 8px rgba(248,225,235,.9),0 0 22px rgba(199,101,142,.28),0 24px 55px rgba(80,45,59,.18);isolation:isolate}
#celebracion-final .final-photo-frame::before{content:"";position:absolute;inset:7px;border:2px solid rgba(199,101,142,.45);border-radius:21px;box-shadow:inset 0 0 16px rgba(199,101,142,.11);pointer-events:none;z-index:1}
#celebracion-final .foto-final{position:relative;z-index:2;box-shadow:0 12px 28px rgba(80,45,59,.16),0 0 0 1px rgba(199,101,142,.15)}
.final-rose-vines{position:absolute;left:12px;right:12px;top:4px;color:#c7658e;font-size:24px;letter-spacing:11px;text-shadow:0 0 9px rgba(199,101,142,.36);z-index:4;white-space:nowrap;overflow:hidden}
.final-tulip-base{position:absolute;left:8px;right:8px;bottom:5px;height:62px;display:flex;align-items:flex-end;justify-content:center;gap:2px;font-size:27px;letter-spacing:-4px;z-index:4;filter:drop-shadow(0 0 4px rgba(199,101,142,.2))}
#celebracion-final .celebracion-titulo{margin-top:24px;max-width:850px;color:#68404f;font:400 clamp(27px,4vw,43px) Georgia,"Times New Roman",serif;position:relative;z-index:5}
#celebracion-final .celebracion-subtitulo{margin-top:8px;color:#8b5269;font:600 15px Arial,sans-serif;letter-spacing:.5px;position:relative;z-index:5}

@media(max-width:650px){
  .password-box{width:205px}
  .media-frame{width:98%;padding:10px 9px 15px;border-radius:19px}
  .media-frame img,.media-frame video{margin-top:16px;border-width:5px;border-radius:13px}
  .media-frame.foto-frame img{max-height:330px}
  .media-frame.video-frame video{max-height:240px}
  #celebracion-final .final-photo-frame{width:94vw;padding:13px 12px 58px}
  #celebracion-final .foto-final{width:88vw;max-height:52vh}
  .final-tulip-base{font-size:22px;height:54px}
  .final-rose-vines{font-size:19px;letter-spacing:7px}
}

/* =========================================================
   FOTO FINAL — UN SOLO MARCO + CAMPO DE TULIPANES EXTERIOR
========================================================= */
#celebracion-final .final-photo-frame{
    position:relative;
    width:min(620px,90vw);
    margin:28px auto 0;
    padding:16px;
    background:#fff;
    border:2px solid rgba(199,101,142,.48);
    border-radius:24px;
    box-shadow:
        0 0 0 3px rgba(248,225,235,.9),
        0 0 18px rgba(199,101,142,.30),
        0 22px 48px rgba(80,45,59,.18);
    overflow:visible;
}
#celebracion-final .final-photo-frame::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(199,101,142,.28);
    border-radius:18px;
    pointer-events:none;
    z-index:1;
}
#celebracion-final .foto-final{
    position:relative;
    z-index:2;
    display:block;
    width:min(580px,84vw);
    max-width:100%;
    max-height:58vh;
    height:auto;
    object-fit:contain;
    margin:0 auto;
    border:none;
    border-radius:16px;
    box-shadow:0 10px 26px rgba(80,45,59,.16);
}
#celebracion-final .final-rose-vines{
    position:absolute;
    left:18px;
    right:18px;
    top:-16px;
    z-index:4;
    text-align:center;
    color:#c7658e;
    font-size:20px;
    letter-spacing:8px;
    text-shadow:0 0 12px rgba(199,101,142,.38);
    white-space:nowrap;
    overflow:visible;
}
#celebracion-final .final-tulip-field{
    width:min(720px,94vw);
    min-height:86px;
    margin:-2px auto 2px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 2px;
    padding:0 6px;
    overflow:hidden;
    position:relative;
    z-index:4;
}
#celebracion-final .final-tulip-field span{
    display:inline-block;
    font-size:calc(24px * var(--s));
    transform:translateY(8px) rotate(calc((var(--s) - 1) * 8deg));
    filter:drop-shadow(0 2px 2px rgba(80,45,59,.12));
    animation:tulipFloat 3.6s ease-in-out var(--d) infinite;
}
@keyframes tulipFloat{
    0%,100%{transform:translateY(8px)}
    50%{transform:translateY(2px)}
}
#celebracion-final .celebracion-titulo{
    margin-bottom:4px;
}
#celebracion-final .celebracion-subtitulo{
    margin-top:10px;
}

@media(max-width:650px){
    #celebracion-final .final-photo-frame{
        width:94vw;
        padding:12px;
        margin-top:22px;
    }
    #celebracion-final .foto-final{
        width:88vw;
        max-height:50vh;
    }
    #celebracion-final .final-tulip-field{
        width:96vw;
        min-height:72px;
    }
    #celebracion-final .final-tulip-field span{
        font-size:calc(20px * var(--s));
    }
}