/* RESET Y BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: linear-gradient(160deg, #bfe8ff 0%, #92d8ff 55%, #7cc8ff 100%); overflow: hidden; height: 100vh; width: 100vw; font-family: 'Segoe UI', system-ui, sans-serif; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

/* INTRO */
#intro-screen { position: absolute; inset: 0; background: linear-gradient(160deg, #bfe8ff 0%, #92d8ff 55%, #7cc8ff 100%); display: flex; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.8s ease-out; }
.intro-content { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 20px; width: 100%; }
.sunflower-icon { font-size: clamp(4rem, 15vw, 5rem); animation: rotateBounce 3s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)); }
@keyframes rotateBounce { 0%,100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-15px) rotate(10deg); } }
.intro-content h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); color: #1a1a1a; font-weight: 800; }
.intro-content p { font-size: clamp(1rem, 4vw, 1.1rem); color: #333; margin-bottom: 8px; }
#start-btn { background: linear-gradient(135deg, #f9a825, #e65100); color: #fff; border: none; padding: 15px 35px; font-size: clamp(1rem, 5vw, 1.2rem); font-weight: 800; border-radius: 50px; cursor: pointer; outline: none; box-shadow: 0 6px 20px rgba(230,81,0,0.4); transition: transform 0.1s; }
#start-btn:active { transform: scale(0.95); }

/* MENSAJES TEXTO RESPONSIVO */
.message-container { position: absolute; top: 8%; width: 100%; text-align: center; z-index: 200; padding: 0 15px; pointer-events: none; display: flex; justify-content: center; }
.msg { 
    position: absolute; width: 100%; left: 0; 
    font-size: clamp(1.1rem, 5vw, 1.35rem); 
    font-weight: 700; color: #1a1a1a; 
    line-height: 1.4; 
    text-shadow: 0 2px 14px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,0.8); 
    opacity: 0; transform: translateY(15px); 
    transition: opacity 1.2s ease, transform 1.2s ease; 
    padding: 0 15px; 
}
.msg.visible { opacity: 1; transform: translateY(0); }
.msg.fade-out { opacity: 0; transform: translateY(-15px); }
.final-msg { font-size: clamp(1.3rem, 6.5vw, 1.7rem); color: #c62828; font-weight: 900; }

/* CONTENEDOR DEL RAMO (ESCALADO PARA VERLO COMPLETO) */
.bouquet-container { 
    position: absolute; bottom: 0; left: 50%; 
    width: 340px; height: 500px; margin-left: -170px; 
    transform-origin: bottom center; /* Escala desde abajo para no cortar el pico */
    transform: translateY(600px) scale(1); 
    transition: transform 2.5s cubic-bezier(0.1, 0.9, 0.2, 1), filter 2s ease, opacity 2s ease; 
    will-change: transform, filter, opacity; 
    animation: floatRamo 4s ease-in-out infinite alternate; animation-delay: 2.5s; 
}
.bouquet-container.bloom { transform: translateY(-15px) scale(0.85); }
.bouquet-container.bloom.reading { transform: translateY(-5px) scale(0.7); /* Se achica para dar espacio arriba SIN cortarse abajo */ }
.bouquet-container.bloom.reading.blur-bg { filter: blur(8px) brightness(0.6); transform: translateY(0px) scale(0.65); }

/* Adaptación extra para pantallas muy chicas */
@media (max-height: 660px), (max-width: 380px) {
    .bouquet-container.bloom { transform: translateY(-10px) scale(0.75); }
    .bouquet-container.bloom.reading { transform: translateY(0px) scale(0.6); }
    .bouquet-container.bloom.reading.blur-bg { transform: translateY(0px) scale(0.55); }
}
@keyframes floatRamo { 0% { margin-bottom: 0px; } 100% { margin-bottom: 12px; } }

/* PAPEL KRAFT */
.kraft-back, .kraft-front { position: absolute; bottom: 0; left: 50%; margin-left: -100px; width: 200px; height: 300px; background: #a17855; clip-path: polygon(10% 0, 90% 0, 100% 20%, 65% 100%, 35% 100%, 0 20%); }
.kraft-back { background: #7a583c; z-index: 1; transform: scale(1.05) translateY(-10px); }
.kraft-front { background: linear-gradient(to right, #8a6345, #b88a65 30%, #b88a65 70%, #8a6345); z-index: 50; clip-path: polygon(0 0, 100% 0, 65% 100%, 35% 100%); box-shadow: 0 -5px 15px rgba(0,0,0,0.3); }

/* GIRASOLES */
#flowers-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.stem { position: absolute; width: 8px; background: linear-gradient(to right, #2e7d32, #4caf50); transform-origin: top center; border-radius: 4px; z-index: 11; box-shadow: inset 2px 0 4px rgba(0,0,0,0.2); }
.stem-leaf { position: absolute; top: 30%; left: 4px; width: 35px; height: 18px; background: #388e3c; border-radius: 0 18px 0 18px; box-shadow: 1px 2px 4px rgba(0,0,0,0.2); transform-origin: left bottom; transform: rotate(30deg); }
.stem-leaf.right { left: -35px; transform-origin: right bottom; border-radius: 18px 0 18px 0; transform: rotate(-30deg); }
.flower { position: absolute; width: 0; height: 0; z-index: 20; }
.flower-scale { position: absolute; transform: scale(0); transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.petal { position: absolute; bottom: 50%; left: 50%; margin-left: -10px; width: 20px; height: 60px; border-radius: 50% 50% 20% 20% / 100% 100% 20% 20%; transform-origin: bottom center; box-shadow: 1px 1px 4px rgba(0,0,0,0.15); }
.petal.layer1 { background: linear-gradient(to bottom, #ffee58, #fbc02d); }
.petal.layer2 { background: linear-gradient(to bottom, #fdd835, #f9a825); height: 52px; width: 18px; margin-left: -9px; }
.core { position: absolute; width: 50px; height: 50px; border-radius: 50%; left: -25px; top: -25px; background: #3e2723; background-image: radial-gradient(#2d1714 15%, transparent 16%), radial-gradient(#2d1714 15%, transparent 16%); background-size: 6px 6px; background-position: 0 0, 3px 3px; box-shadow: inset 0 0 12px #111, 0 2px 8px rgba(0,0,0,0.4); z-index: 25; }

/* LAZO */
.bow-container { position: absolute; bottom: 150px; left: 50%; margin-left: -20px; z-index: 60; }
.bow-knot { position: absolute; width: 40px; height: 40px; background: radial-gradient(circle, #e53935, #b71c1c); border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.3); }
.bow-loop { position: absolute; top: 5px; width: 60px; height: 30px; background: linear-gradient(to right, #f44336, #c62828); border-radius: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.loop-left { left: -50px; transform: rotate(-15deg); }
.loop-right { right: -50px; background: linear-gradient(to left, #f44336, #c62828); transform: rotate(15deg); }
.ribbon-tail { position: absolute; top: 30px; width: 25px; height: 100px; background: linear-gradient(to bottom, #d32f2f, #b71c1c); border-radius: 0 0 10px 10px; box-shadow: 2px 4px 6px rgba(0,0,0,0.3); }
.tail-left { left: 0; transform-origin: top center; transform: rotate(20deg); }
.tail-right { right: -5px; transform-origin: top center; transform: rotate(-20deg); }
.tag { position: absolute; top: 50px; left: 35px; background: #fffde7; color: #4e342e; font-size: 11px; font-weight: bold; padding: 4px 8px; border-radius: 4px; box-shadow: 1px 2px 5px rgba(0,0,0,0.2); transform: rotate(-10deg); border: 1px solid #d7ccc8; white-space: nowrap; }

/* CANVAS (Pétalos) */
#petals-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* MAGIA: GALERÍA POLAROID RESPONSIVA */
#photo-gallery { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 150; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
#photo-gallery.show { opacity: 1; }
.polaroid { background: #fff; padding: 12px 12px 40px 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); border-radius: 4px; width: 85vw; max-width: 320px; transform: scale(0.7) translateY(40px); opacity: 0; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease; will-change: transform, opacity; }
.polaroid.active { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
.polaroid img { width: 100%; height: auto; max-height: 55vh; object-fit: cover; border-radius: 2px; border: 1px solid #eee; }
.polaroid-caption { text-align: center; font-family: 'Segoe UI', cursive, sans-serif; font-size: clamp(1.1rem, 5vw, 1.3rem); color: #444; margin-top: 15px; font-weight: 700; }