/* Estilos para Baby Shower - Temática Winnie Pooh del Bosque */

/* Familias de Fuentes */
.font-dancing {
    font-family: 'Dancing Script', cursive;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

.font-fredoka {
    font-family: 'Fredoka', cursive;
}

/* Variables de Color para Winnie Pooh - Paleta Bosque con Azules Vibrantes */
:root {
    --color-primary: #f5c681;      /* Miel/Honey - Color principal */
    --color-secondary: #60a5fa;    /* Azul brillante vibrante */
    --color-accent: #fdffcd;       /* Crema/Amarillo claro */
    --color-text: #1e293b;         /* Slate oscuro */
    --color-bg: #ffffff;           /* Fondo blanco */
    --color-gradient-start: #f5c681; /* Miel */
    --color-gradient-end: #60a5fa;   /* Azul brillante */
    --color-honey: #f5c681;        /* Miel dorado */
    --color-sage: #60a5fa;         /* Azul brillante */
    --color-forest: #a5d8ff;       /* Azul pastel claro */
    --color-cream: #fdffcd;        /* Crema claro */
    --color-brown: #8B4513;        /* Marrón Pooh */
    --color-amber: #d97706;        /* Ámbar */
    --color-blue-dark: #3b82f6;    /* Azul royal oscuro */
}

/* Desplazamiento Suave */
html {
    scroll-behavior: smooth;
}

/* Asegurar que no haya scroll-snap ni comportamiento de scroll independiente */
html, body {
    scroll-snap-type: none;
    overscroll-behavior: auto;
}

/* Todas las secciones deben permitir scroll continuo */
section {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    overscroll-behavior: none;
    overflow: visible;
    touch-action: auto;
}

/* Asegurar que los títulos y divs no intercepten scroll */
h1, h2, h3, h4, h5, h6, div, p {
    touch-action: auto;
    overscroll-behavior: none;
}

/* Fondo del Hero para Winnie Pooh */
.pooh-bg {
    background-image: url('images/principal.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Fallback para móviles */
@media (max-width: 768px) {
    .pooh-bg {
        background-attachment: scroll;
    }
}

/* Patrón de Fondo Winnie Pooh - Bosque */
.pooh-pattern {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(245, 198, 129, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(132, 182, 244, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(196, 218, 250, 0.1) 0%, transparent 70%),
        radial-gradient(circle at 20% 80%, rgba(253, 255, 205, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 198, 129, 0.1) 0%, transparent 50%);
}

/* Botones de Radio Personalizados para Winnie Pooh */
.radio-custom-baby {
    transition: all 0.3s ease;
}

input[type="radio"]:checked + .radio-custom-baby {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
}

input[type="radio"]:checked + .radio-custom-baby > div {
    display: block !important;
}

/* Galería Winnie Pooh - Bosque */
.baby-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 1.5rem;
    height: 700px;
}

.gallery-item {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(245, 198, 129, 0.2);
    transition: all 0.4s ease;
}

.gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(141, 158, 124, 0.3);
}

/* Distribución específica de la galería Winnie Pooh */
.baby-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.baby-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

.baby-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.baby-4 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.baby-5 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.baby-6 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.baby-7 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

/* Responsive Design para Galería Winnie Pooh */
@media (max-width: 1024px) {
    .baby-gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 180px);
        gap: 1rem;
        height: 780px;
    }
    
    .baby-1 { grid-column: 1 / 3; grid-row: 1 / 2; }
    .baby-2 { grid-column: 3 / 4; grid-row: 1 / 2; }
    .baby-3 { grid-column: 1 / 2; grid-row: 2 / 3; }
    .baby-4 { grid-column: 2 / 4; grid-row: 2 / 3; }
    .baby-5 { grid-column: 1 / 2; grid-row: 3 / 4; }
    .baby-6 { grid-column: 2 / 3; grid-row: 3 / 4; }
    .baby-7 { grid-column: 3 / 4; grid-row: 3 / 4; }
}

@media (max-width: 768px) {
    .baby-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 160px);
        gap: 0.75rem;
        height: 680px;
    }
    
    .baby-1 { grid-column: 1 / 2; grid-row: 1 / 2; }
    .baby-2 { grid-column: 2 / 3; grid-row: 1 / 2; }
    .baby-3 { grid-column: 1 / 2; grid-row: 2 / 3; }
    .baby-4 { grid-column: 2 / 3; grid-row: 2 / 3; }
    .baby-5 { grid-column: 1 / 2; grid-row: 3 / 4; }
    .baby-6 { grid-column: 2 / 3; grid-row: 3 / 4; }
    .baby-7 { grid-column: 1 / 3; grid-row: 4 / 5; }
}

@media (max-width: 480px) {
    .baby-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, 140px);
        gap: 0.5rem;
        height: 980px;
    }
    
    .baby-1, .baby-2, .baby-3, .baby-4, .baby-5, .baby-6, .baby-7 {
        grid-column: 1 / 2;
    }
    
    .baby-1 { grid-row: 1 / 2; }
    .baby-2 { grid-row: 2 / 3; }
    .baby-3 { grid-row: 3 / 4; }
    .baby-4 { grid-row: 4 / 5; }
    .baby-5 { grid-row: 5 / 6; }
    .baby-6 { grid-row: 6 / 7; }
    .baby-7 { grid-row: 7 / 8; }
}

/* Animaciones Winnie Pooh - Bosque */
@keyframes baby-bounce {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.8;
    }
    50% { 
        transform: translateY(-20px) rotate(10deg); 
        opacity: 1;
    }
}

@keyframes baby-fall {
    0% { 
        opacity: 1;
        transform: translateY(-100px) rotate(0deg);
    }
    100% { 
        opacity: 0;
        transform: translateY(100vh) rotate(360deg);
    }
}

@keyframes pooh-glow {
    0%, 100% { 
        filter: hue-rotate(0deg) brightness(1);
    }
    50% { 
        filter: hue-rotate(10deg) brightness(1.05);
    }
}

@keyframes baby-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Efectos de Hover Winnie Pooh */
.hover-baby {
    transition: all 0.3s ease;
}

.hover-baby:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(245, 198, 129, 0.3);
}

/* Efectos de Cristal Winnie Pooh */
.glass-baby {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-baby-dark {
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradientes Winnie Pooh - Bosque */
.gradient-baby {
    background: linear-gradient(135deg, #f5c681, #84b6f4, #c4dafa);
}

.gradient-baby-soft {
    background: linear-gradient(135deg, #fdffcd, #f5c681, #84b6f4);
}

.gradient-honey-forest {
    background: linear-gradient(135deg, #f5c681, #84b6f4);
}

.gradient-forest-cream {
    background: linear-gradient(135deg, #c4dafa, #fdffcd);
}

.gradient-warm-forest {
    background: linear-gradient(135deg, #f5c681, #c4dafa);
}

/* Sombras Winnie Pooh */
.shadow-baby {
    box-shadow: 
        0 4px 6px -1px rgba(245, 198, 129, 0.15),
        0 2px 4px -1px rgba(132, 182, 244, 0.08);
}

.shadow-baby-lg {
    box-shadow: 
        0 20px 25px -5px rgba(245, 198, 129, 0.2),
        0 10px 10px -5px rgba(132, 182, 244, 0.1);
}

.shadow-baby-xl {
    box-shadow: 
        0 25px 50px -12px rgba(245, 198, 129, 0.3);
}

/* Animaciones de Entrada Festivas */
@keyframes slideInFromTop {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInScale {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Utilidades de Animación Winnie Pooh */
.animate-baby-bounce {
    animation: baby-bounce 2s ease-in-out infinite;
}

.animate-baby-fall {
    animation: baby-fall 3s linear infinite;
}

.animate-pooh-glow {
    animation: pooh-glow 2s ease-in-out infinite;
}

.animate-baby-pulse {
    animation: baby-pulse 1.5s ease-in-out infinite;
}

.animate-slide-top {
    animation: slideInFromTop 0.8s ease-out;
}

.animate-slide-bottom {
    animation: slideInFromBottom 0.8s ease-out;
}

.animate-fade-scale {
    animation: fadeInScale 0.6s ease-out;
}

/* Efectos de Partículas Winnie Pooh */
.particles-baby::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(245, 198, 129, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(132, 182, 244, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(196, 218, 250, 0.1) 0%, transparent 50%);
    animation: baby-bounce 6s ease-in-out infinite;
}

/* Estilos de Notificación Winnie Pooh */
.notification-baby {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 198, 129, 0.2);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(245, 198, 129, 0.15);
    animation: slideInFromBottom 0.5s ease-out;
}

.notification-success {
    border-left: 4px solid #10b981;
}

.notification-error {
    border-left: 4px solid #ef4444;
}

.notification-info {
    border-left: 4px solid #ec4899;
}

/* Responsive Design Mejorado para Winnie Pooh */
@media (max-width: 768px) {
    .pooh-bg {
        background-attachment: scroll;
    }
    
    .baby-gallery {
        gap: 0.5rem;
    }
    
    .glass-baby {
        backdrop-filter: blur(5px);
    }
    
    .font-fredoka {
        font-size: 2.5rem;
    }
    
    /* Reducir padding de secciones para dar espacio a personajes */
    section .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ajustar ancho máximo de tarjetas */
    section .max-w-6xl,
    section .max-w-5xl,
    section .max-w-4xl,
    section .max-w-3xl {
        max-width: 88%;
    }
    
    /* Reducir padding horizontal de tarjetas en móvil */
    .rounded-3xl,
    .rounded-2xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Mejorar visibilidad de personajes laterales */
    .pooh-side-left,
    .pooh-side-right {
        width: 85px !important;
        opacity: 0.9 !important;
        left: -20px !important;
    }
    
    .pooh-side-right {
        right: -20px !important;
        left: auto !important;
    }
}

@media (max-width: 480px) {
    .baby-gallery {
        height: auto;
        grid-template-rows: repeat(7, 120px);
    }
    
    /* Reducir más el padding en móviles pequeños */
    section .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Ajustar ancho de tarjetas en móvil pequeño */
    section .max-w-6xl,
    section .max-w-5xl,
    section .max-w-4xl,
    section .max-w-3xl {
        max-width: 82%;
    }
    
    /* Padding aún más reducido en tarjetas */
    .rounded-3xl,
    .rounded-2xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Personajes más visibles en móvil pequeño */
    .pooh-side-left,
    .pooh-side-right {
        width: 65px !important;
        opacity: 0.85 !important;
        left: -10px !important;
    }
    
    .pooh-side-right {
        right: -10px !important;
        left: auto !important;
    }
}

/* Optimizaciones para Impresión */
@media print {
    .pooh-bg {
        background: linear-gradient(135deg, #f5c681, #84b6f4);
    }
    
    .glass-baby,
    .glass-baby-dark {
        background: white;
        backdrop-filter: none;
        border: 1px solid #fdffcd;
    }
    
    .baby-gallery {
        display: none;
    }
}

/* Modo de Alto Contraste */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #f5c681;
        --color-secondary: #84b6f4;
        --color-text: #000000;
        --color-bg: #ffffff;
    }
    
    .glass-baby,
    .glass-baby-dark {
        background: #ffffff;
        border: 2px solid #f5c681;
    }
}

/* Movimiento Reducido */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .pooh-bg {
        background-attachment: scroll;
    }
}

/* Focus Visible para Accesibilidad */
*:focus-visible {
    outline: 2px solid #f5c681;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Estilos para Estados de Carga Festivos */
.loading-party {
    background: linear-gradient(90deg, #fef3c7 25%, #fde68a 50%, #fef3c7 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* Efectos de Hover para Botones Festivos */
.btn-party {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-party::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn-party:hover::before {
    left: 100%;
}

/* Efectos de Scroll Reveal Festivos */
.reveal-up-party {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.reveal-up-party.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left-party {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}

.reveal-left-party.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right-party {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease;
}

.reveal-right-party.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Utilidades de Espaciado Festivas */
.space-y-party > * + * {
    margin-top: 2rem;
}

.space-y-party-sm > * + * {
    margin-top: 1rem;
}

.space-y-party-lg > * + * {
    margin-top: 3rem;
}

/* Efectos de Borde Festivos */
.border-party {
    border: 2px solid rgba(236, 72, 153, 0.2);
}

.border-party-thick {
    border: 4px solid rgba(236, 72, 153, 0.3);
}

/* Efectos de Texto Winnie Pooh */
.text-gradient-baby {
    background: linear-gradient(135deg, #f5c681, #84b6f4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-shadow-baby {
    text-shadow: 0 2px 4px rgba(245, 198, 129, 0.15);
}

.text-shadow-baby-lg {
    text-shadow: 0 4px 8px rgba(245, 198, 129, 0.2);
}

/* Estilos Especiales para Emojis Winnie Pooh */
.emoji-baby {
    display: inline-block;
    animation: baby-bounce 3s ease-in-out infinite;
}

.emoji-baby-fall {
    display: inline-block;
    animation: baby-fall 2s ease-in-out infinite;
}

.emoji-pooh {
    display: inline-block;
    animation: pooh-glow 2s ease-in-out infinite;
}

/* Animación de Winnie Pooh Asomándose - Hero Principal */
.pooh-peeking-container {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 370px;
    overflow: visible;
    pointer-events: none;
    z-index: 15;
}

.pooh-peeking {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 300px;
    height: auto;
    animation: pooh-peek-bounce 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 1.8s;
    opacity: 0;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

@keyframes pooh-peek-bounce {
    0% {
        transform: translateX(-50%) translateY(120%) rotate(0deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) translateY(20%) rotate(-3deg);
    }
    50% {
        transform: translateX(-50%) translateY(-5%) rotate(2deg);
    }
    65% {
        transform: translateX(-50%) translateY(5%) rotate(-2deg);
    }
    80% {
        transform: translateX(-50%) translateY(-2%) rotate(1deg);
    }
    100% {
        transform: translateX(-50%) translateY(0%) rotate(0deg);
        opacity: 1;
    }
}

/* Winnies laterales en las secciones */
.pooh-side-left,
.pooh-side-right {
    position: absolute;
    width: 150px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
    z-index: 5;
}

.pooh-side-left {
    left: -60px;
    transform: rotate(45deg);
}

.pooh-side-right {
    right: -60px;
    transform: rotate(330deg);
}

/* Animaciones activadas por AOS */
.pooh-side-left[data-aos="fade-right"].aos-animate {
    opacity: 0.9;
}

.pooh-side-right[data-aos="fade-left"].aos-animate {
    opacity: 0.9;
}

/* Asegurar que las secciones muestren overflow adecuado */
section.overflow-hidden {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Prevenir scroll independiente en cualquier contenedor */
.rounded-3xl,
.rounded-2xl,
.container,
.text-center,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl {
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    overscroll-behavior: none !important;
}

/* Animaciones mejoradas para móvil y desktop */
@keyframes pooh-peek-left {
    0% {
        transform: translateX(-100%) rotate(45deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(45deg);
        opacity: 0.9;
    }
}

@keyframes pooh-peek-right {
    0% {
        transform: translateX(100%) rotate(330deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(330deg);
        opacity: 0.9;
    }
}

/* Transición suave para personajes que aparecen con scroll */
.pooh-side-left,
.pooh-side-right {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Personajes en position absolute necesitan posicionamiento relativo en el contenedor */
.max-w-6xl {
    position: relative;
}

/* Asegurar posicionamiento relativo en secciones para personajes absolute */
#detalles .max-w-6xl {
    position: relative;
}

/* Ajuste de z-index para tarjetas en sección de bebé */
#bebe .rounded-3xl {
    position: relative;
    z-index: 15;
}

/* Tamaño más grande para Winnie y Piglet en sección de agradecimiento */
.pooh-thanks-large {
    width: 200px !important;
}

/* Responsive para tablet */
@media (max-width: 1024px) {
    .pooh-peeking-container {
        width: 280px;
        height: 330px;
        bottom: -50px;
    }
    
    .pooh-peeking {
        width: 260px;
    }
    
    .pooh-side-left,
    .pooh-side-right {
        width: 120px;
    }
    
    /* Tamaño ajustado para personajes grandes en tablet */
    .pooh-thanks-large {
        width: 160px !important;
    }
}

/* Responsive para móvil */
@media (max-width: 768px) {
    .pooh-peeking-container {
        width: 220px;
        height: 270px;
        bottom: -40px;
    }
    
    .pooh-peeking {
        width: 200px;
    }
    
    .pooh-side-left,
    .pooh-side-right {
        width: 100px;
        opacity: 0.85 !important;
    }
    
    .pooh-side-left {
        left: -25px;
    }
    
    .pooh-side-right {
        right: -25px;
    }
    
    /* Tamaño ajustado para personajes grandes en móvil */
    .pooh-thanks-large {
        width: 130px !important;
    }
}

@media (max-width: 480px) {
    .pooh-peeking-container {
        width: 180px;
        height: 220px;
        bottom: -30px;
    }
    
    .pooh-peeking {
        width: 160px;
    }
    
    .pooh-side-left,
    .pooh-side-right {
        width: 70px;
        opacity: 0.8 !important;
    }
    
    .pooh-side-left {
        left: -15px;
    }
    
    .pooh-side-right {
        right: -15px;
    }
    
    /* Ajustar personajes en position absolute para móvil pequeño */
    img[style*="position: absolute"].pooh-side-right {
        width: 80px !important;
        right: -30px !important;
    }
    
    img[style*="position: absolute"].pooh-side-left {
        width: 80px !important;
        left: -30px !important;
    }
    
    /* Tamaño ajustado para personajes grandes en móvil pequeño */
    .pooh-thanks-large {
        width: 100px !important;
    }
}

/* Efectos de Cinta Deportiva */
.ribbon-football {
    position: relative;
    background: linear-gradient(135deg, #10b981, #3b82f6);
    color: white;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
}

.ribbon-football::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #3b82f6;
}

/* Efectos de Trofeo Deportivo */
.trophy-football {
    position: relative;
    display: inline-block;
}

.trophy-football::before {
    content: '🏆';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 0.8em;
    animation: football-pulse 2s ease-in-out infinite;
}

/* Efectos de Balón Deportivo */
.ball-football {
    position: relative;
    display: inline-block;
}

.ball-football::before {
    content: '⚽';
    position: absolute;
    top: -5px;
    left: -5px;
    font-size: 0.6em;
    animation: football-bounce 2s ease-in-out infinite;
}

/* Efectos de Portería */
.goal-football {
    position: relative;
    display: inline-block;
}

.goal-football::before {
    content: '🥅';
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 0.7em;
    animation: football-bounce 4s ease-in-out infinite;
}

/* Efectos de Pastel */
.cake-football {
    position: relative;
    display: inline-block;
}

.cake-football::before {
    content: '🎂';
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 0.8em;
    animation: football-pulse 3s ease-in-out infinite;
}

/* Efectos de Regalos */
.gift-football {
    position: relative;
    display: inline-block;
}

.gift-football::before {
    content: '🎁';
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 0.7em;
    animation: football-bounce 2.5s ease-in-out infinite;
}

/* Efectos de Celebración */
.celebration-football {
    position: relative;
    display: inline-block;
}

.celebration-football::before {
    content: '🏆';
    position: absolute;
    top: -8px;
    left: -8px;
    font-size: 0.6em;
    animation: football-fall 2s ease-in-out infinite;
}

/* Efectos de Deportes */
.sports-football {
    position: relative;
    display: inline-block;
}

.sports-football::before {
    content: '⚽';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 0.8em;
    animation: sports-glow 3s ease-in-out infinite;
}

/* Efectos de Corredor */
.runner-football {
    position: relative;
    display: inline-block;
}

.runner-football::before {
    content: '🏃‍♂️';
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 0.9em;
    animation: sports-glow 4s ease-in-out infinite;
}

/* ============================================================================
   MODAL DE INFORMACIÓN BANCARIA
   ============================================================================ */

#bank-info-modal {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#bank-info-modal[style*="display: flex"] {
    animation: fadeIn 0.3s ease-in-out forwards;
}

#bank-info-modal > div {
    animation: scaleIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive para el modal bancario */
@media (max-width: 640px) {
    #bank-info-modal > div {
        max-width: 95%;
        padding: 1.5rem;
    }
    
    #bank-info-modal h3 {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   VIDEO CIRCULAR DEL BEBÉ
   ============================================================================ */

.video-circular {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    transform: scale(1.05); /* Pequeño zoom para asegurar que llene el círculo */
}

/* Ajustes responsivos para el video */
@media (max-width: 768px) {
    .video-circular {
        transform: scale(1.1);
    }
}