@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');

/* =========================================
   ESTILOS GLOBALES Y RESET
========================================== */
* {
    box-sizing: border-box; /* Evita que los márgenes rompan la pantalla */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Fredoka', sans-serif;
    background-color: #fae1e6;
    color: #e35a4b;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    overflow-x: hidden;
}

/* =========================================
   FASE 1: FLORES INTERACTIVAS (Three.js)
========================================== */
.container-flores {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #000000; z-index: 100000; display: block; 
    transition: opacity 1s ease;
}

canvas { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

.name-flores {
    position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);
    color: white; text-align: center; font-size: 6vw; font-family: 'Fredoka', sans-serif;
    text-shadow: 0 0 10px #ff477e, 0 0 20px #ff0a54; pointer-events: none;
    z-index: 2; animation: latido 2s infinite; padding: 0 10px;
}

.controles-flores {
    position: absolute; bottom: 30px; left: 0; width: 100%;
    display: flex; justify-content: space-around; align-items: center; z-index: 3;
}

.clean-btn {
    font-family: 'Fredoka', sans-serif; font-size: 18px; color: white;
    text-shadow: 0 0 10px #000000; cursor: pointer; text-decoration: underline;
    background: rgba(0,0,0,0.5); padding: 10px; border-radius: 10px;
}

.btn-avanzar {
    background-color: #ff477e; color: white; border: 2px solid white;
    border-radius: 30px; padding: 12px 25px; font-size: 1.2em;
    font-family: 'Fredoka', sans-serif; font-weight: 600; cursor: pointer;
    transition: transform 0.3s, background-color 0.3s; box-shadow: 0 0 15px rgba(255, 71, 126, 0.8);
}
.btn-avanzar:hover { transform: scale(1.05); background-color: #ff0a54; }

/* =========================================
   PANTALLA DE CARGA
========================================== */
.pantalla-carga {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000000; display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999;
    transition: opacity 0.8s ease-in-out;
}
.loading-text {
    color: #ff477e; font-family: 'Fredoka', sans-serif; font-size: clamp(1.5em, 4vw, 2.5em);
    margin-bottom: 30px; text-shadow: 0 0 15px rgba(255, 71, 126, 0.8);
    animation: latido 1.5s infinite; text-align: center; padding: 0 20px;
}
.loading-bar-container {
    width: 80%; max-width: 400px; height: 25px; background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px; overflow: hidden; border: 2px solid #ff477e;
    box-shadow: 0 0 20px rgba(255, 71, 126, 0.4);
}
.loading-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #ff0a54, #ff477e, #ff99ac, #ff477e);
    background-size: 200% 200%; border-radius: 12px;
    animation: llenarBarra 4s cubic-bezier(0.4, 0, 0.2, 1) forwards, moverGradiente 2s linear infinite;
}
@keyframes llenarBarra { 0% { width: 0%; } 40% { width: 40%; } 70% { width: 80%; } 100% { width: 100%; } }
@keyframes moverGradiente { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* =========================================
   ESTILOS GENERALES (PANTALLAS)
========================================== */
.screen {
    display: none;
    width: 100%;
    max-width: 1000px;
    animation: fadeIn 0.8s ease-in-out;
    position: relative;
    z-index: 10;
    padding: 60px 15px 30px 15px; /* Espacio superior para que el botón regresar no tape el texto */
}
.screen.active { display: block; }

.titulo {
    font-size: clamp(2em, 5vw, 4em);
    margin-bottom: 15px;
    font-weight: 600;
    word-break: keep-all; /* Evita que corte palabras a la mitad */
}
.titulo-secundario { font-size: 1.8em; margin-top: 15px; }
.pregunta { font-size: 1.5em; margin-bottom: 20px; font-weight: 500; }
.mt-20 { margin-top: 20px; }

.imagen-central {
    height: 250px; width: auto; max-width: 100%; object-fit: contain;
    margin: 15px auto; display: block; mix-blend-mode: multiply;
}

.botones-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.btn {
    background-color: transparent; color: #e35a4b; border: 3px solid #e35a4b;
    border-radius: 30px; padding: 12px 40px; font-size: 1.3em;
    font-family: 'Fredoka', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease;
}
.btn:hover { background-color: #e35a4b; color: white; transform: scale(1.05); }

/* BOTÓN REGRESAR (SIEMPRE VISIBLE) */
.btn-regresar {
    position: fixed; /* Esto hace que te siga al bajar la pantalla */
    top: 15px; right: 15px;
    width: 45px; height: 45px; border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    color: #e35a4b; border: 2px solid #e35a4b;
    font-size: 1.5em; font-family: 'Fredoka', sans-serif; font-weight: bold;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    transition: all 0.3s ease; box-shadow: 2px 2px 0px #fca8ae;
    padding: 0; margin: 0; z-index: 9999; /* Siempre por encima de todo */
}
.btn-regresar:hover {
    transform: scale(1.1) rotate(-10deg); background-color: #fca8ae; color: white; border-color: #fca8ae; box-shadow: none;
}

/* MENÚ REGALOS */
.grid-regalos {
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 20px;
}
.btn-imagen { background: transparent; border: none; cursor: pointer; transition: transform 0.3s; padding: 0; }
.btn-imagen img { height: 150px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.btn-imagen:hover { transform: scale(1.1) translateY(-5px); }

/* VIDEO */
.layout-video {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    background-color: rgba(255, 255, 255, 0.5); padding: 20px; border-radius: 20px;
    border: 3px solid #e35a4b; margin-bottom: 20px; flex-wrap: wrap; position: relative; z-index: 10;
}
.video-container { flex: 1; min-width: 250px; border-radius: 15px; overflow: hidden; }
.video-container iframe { width: 100%; aspect-ratio: 16 / 9; }
.caja-texto {
    flex: 1; min-width: 250px; background-color: #fca8ae; color: white;
    padding: 20px; border-radius: 15px; font-size: 1.1em; line-height: 1.5;
}
.encabezado-cancion { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 10px; }
.snoopy-adorno { height: 50px; mix-blend-mode: multiply; }
.contenedor-principal-video { position: relative; display: flex; justify-content: center; margin-top: 30px; }
.snoopy-peeking { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); height: 60px; z-index: 10; mix-blend-mode: multiply; }

/* FLORES */
.layout-flores { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; }
.col-mensajes { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 500px; }
.col-centro { display: flex; flex-direction: column; align-items: center; width: 100%; }
.caja-mensaje {
    background-color: rgba(255, 255, 255, 0.8); border: 2px solid #e35a4b;
    border-radius: 15px; padding: 12px; font-size: 1.1em;
    box-shadow: 2px 2px 5px rgba(227, 90, 75, 0.2); transition: transform 0.3s;
}

/* PASTEL Y VELA */
.btn-vela { background: transparent; border: none; cursor: pointer; transition: transform 0.3s; outline: none; }
.btn-vela .imagen-central { height: 250px; }

/* MENSAJE FINAL */
.layout-mensaje-final { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; }
.caja-mensaje-largo {
    background: rgba(255, 255, 255, 0.9); border: 3px dashed #ff99ac;
    border-radius: 20px; padding: 25px; width: 100%; max-width: 600px;
    text-align: center; box-shadow: 0 5px 15px rgba(255, 71, 126, 0.1);
}
.caja-mensaje-largo h2 { color: #ff477e; margin-bottom: 15px; font-size: 1.4em; }
.caja-mensaje-largo p { font-size: 1.05em; line-height: 1.5; margin-bottom: 12px; color: #e35a4b; font-weight: 500; }
.imagen-lateral { max-width: 150px; mix-blend-mode: multiply; margin-bottom: -10px; }

/* =========================================
   GALERÍA DE FOTOS (FLEXBOX ANTI-ENCIMADO)
========================================== */
.contenedor-fotos-seguro {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 30px; width: 100%; max-width: 1100px; margin: 10px auto; padding: 10px; position: relative;
}
.foto-libre {
    position: relative; width: 160px; transition: transform 0.3s ease, z-index 0s;
    cursor: pointer; z-index: 10;
}
.foto-libre img { width: 100%; height: auto; display: block; }
.foto-libre:hover { transform: scale(1.1) rotate(0deg) !important; z-index: 100 !important; }

.f1 { transform: rotate(-6deg) translateY(5px); }
.f2 { transform: rotate(5deg) translateY(-5px); }
.f3 { transform: rotate(-8deg) translateY(10px); }
.f4 { transform: rotate(7deg) translateY(-5px); }
.f5 { transform: rotate(-4deg) translateY(5px); }
.f6 { transform: rotate(9deg) translateY(-10px); }
.f7 { transform: rotate(-7deg) translateY(5px); }
.f8 { transform: rotate(6deg) translateY(-5px); }

.sticker-snoopy { position: absolute; width: 60px; mix-blend-mode: multiply; z-index: 5; pointer-events: none; }
.ss-1 { top: 2%; left: 5%; transform: rotate(-15deg); }
.ss-2 { bottom: 2%; right: 5%; transform: rotate(20deg); }
.ss-3 { top: 50%; left: 10%; transform: rotate(10deg); }
.ss-4 { top: 30%; right: 10%; transform: rotate(-10deg); }

/* =========================================
   FONDO GLOBAL: SNOOPYS Y CORAZONES
========================================== */
.fondo-decoracion {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1; pointer-events: none;
}
.item-dec { position: absolute; opacity: 0.7; }
.img-dec { width: 65px; height: auto; mix-blend-mode: multiply; }
.corazon-dec { font-size: 28px; animation: latido 2.5s infinite ease-in-out; }

/* =========================================
   ANIMACIONES
========================================== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flotar { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
.anim-flotar { animation: flotar 3s ease-in-out infinite; }
@keyframes latido { 0% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
.anim-latido { animation: latido 1.5s infinite; }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.anim-entrada-video { animation: zoomIn 0.8s ease-out forwards; }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.anim-mensaje { opacity: 0; animation: slideUpFade 0.6s ease-out forwards; }
.letra-animada { opacity: 0; display: inline-block; transform: translateY(10px); animation: aparecerLetra 0.3s ease-out forwards; }
@keyframes aparecerLetra { to { opacity: 1; transform: translateY(0); } }

/* =========================================
   ADAPTACIÓN TOTAL PARA CELULARES (RESPONSIVE)
========================================== */
@media (max-width: 768px) {
    /* Ajustes de tipografía para evitar cortes de palabras */
    .titulo { font-size: 2.1rem; margin-bottom: 15px; }
    .titulo-secundario { font-size: 1.5rem; }
    .pregunta { font-size: 1.2rem; }
    .caja-texto, .caja-mensaje, .caja-mensaje-largo p { font-size: 1rem; }
    .btn { font-size: 1.1rem; padding: 10px 30px; }

    /* Ajuste de imágenes centrales */
    .imagen-central { height: 180px; margin: 10px auto; }
    .btn-vela .imagen-central { height: 200px; }
    .imagen-lateral { max-width: 120px; order: -1; margin-bottom: 0px; }

    /* Layout Menú */
    .grid-regalos { gap: 15px; }
    .btn-imagen img { height: 120px; }

    /* Layout Flores */
    .caja-mensaje { padding: 10px; margin: 0; }
    .col-mensajes { gap: 10px; }
    .col-centro { order: -1; }

    /* Layout Mensaje Final */
    .caja-mensaje-largo { padding: 20px 15px; border-width: 2px; }
    .caja-mensaje-largo h2 { font-size: 1.25rem; }

    /* Layout Video */
    .layout-video { padding: 15px; gap: 15px; }
    .caja-texto { padding: 15px; }
    .snoopy-adorno { display: none; } /* Ocultamos adornos laterales para dar espacio al título */

    /* Galería Flexbox móvil */
    .contenedor-fotos-seguro { gap: 15px; padding: 0; }
    .foto-libre { width: 42%; max-width: 140px; } /* Ajuste perfecto a 2 columnas */
    .sticker-snoopy { width: 40px; }

    /* Fondo Global más discreto en celular */
    .img-dec { width: 40px; opacity: 0.5; }
    .corazon-dec { font-size: 20px; opacity: 0.6; }
}