/* --- CONFIGURACIÓN GENERAL --- */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f8f9fa;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.pt-20 {
    padding-top: 3rem !important;
}

/* --- BANNER DE COOKIES --- */
#cookie-banner {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 9999;
    max-width: 80%;
}
.cookie-hidden {
    transform: translateY(150%); 
}
.cookie-visible {
    transform: translateY(0);
}

/* Estilos Liquid Crystal (Glassmorphism) */
.glass-banner {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* --- HERO SECTION --- */
.hero-bg {
    position: relative;
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f1f4f9 100%);
    overflow: hidden;
    border-bottom: 1px solid #e8eaed;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marketing-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; 
    height: 100%;
    opacity: 0.05;
    pointer-events: none;
    display: flex;
    align-items: center;
    animation: scroll-left 50s linear infinite;
}

.pattern-group {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 100px; 
    padding: 20px;
    width: 50%;
}

.pattern-group svg {
    width: 80px;
    height: 80px;
}

/* --- MASONRY LAYOUT --- */
.masonry-wrapper {
    column-count: 1;
    column-gap: 12px;
    padding: 12px;
}
@media (min-width: 640px) { .masonry-wrapper { column-count: 2; } }
@media (min-width: 1024px) { .masonry-wrapper { column-count: 3; column-gap: 24px; } }
@media (min-width: 1280px) { .masonry-wrapper { column-count: 4; } }

.masonry-card {
    break-inside: avoid;
    margin-bottom: 24px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8eaed;
    transition: all 0.3s ease;
}
.masonry-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}
.card-image { width: 100%; height: auto; display: block; }

/* --- SECCIÓN HAPPY SKY --- */
.happy-section {
    position: relative;
    background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
    overflow: hidden;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* El Sol */
.sun-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.the-sun {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 40px #FFD700, 0 0 80px #FF8C00, inset -10px -10px 20px rgba(255, 140, 0, 0.5);
    top: 15%;
    animation: sun-move-linear 80s linear infinite;
}
@keyframes sun-move-linear {
    from { left: -150px; }
    to { left: 100%; }
}

/* Nubes */
.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.cloud {
    position: absolute;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 8px 5px rgba(0,0,0,0.05);
    animation: cloud-float linear infinite;
    opacity: 0.9;
}
.cloud::after, .cloud::before {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}
.cloud::after { width: 50px; height: 50px; top: -25px; left: 25px; }
.cloud::before { width: 40px; height: 40px; top: -15px; left: 60px; }

.c1 { width: 140px; height: 45px; top: 15%; animation-duration: 35s; animation-delay: -5s; }
.c2 { width: 100px; height: 35px; top: 40%; animation-duration: 25s; opacity: 0.7; }
.c3 { width: 180px; height: 60px; top: 10%; animation-duration: 45s; animation-delay: -15s; opacity: 0.8; }
.c4 { width: 120px; height: 40px; top: 60%; animation-duration: 30s; animation-delay: -2s; opacity: 0.6; }

@keyframes cloud-float {
    from { left: -200px; }
    to { left: 100%; }
}

/* --- COLORES Y UTILIDADES GOOGLE --- */
.g-blue { color: #4285F4; }
.g-red { color: #DB4437; }
.g-yellow { color: #F4B400; }
.g-green { color: #0F9D58; }

.bg-g-blue { background-color: #4285F4; }
.bg-g-red { background-color: #DB4437; }
.bg-g-yellow { background-color: #F4B400; }
.bg-g-green { background-color: #0F9D58; }

.border-g-blue { border-color: #4285F4; }
.border-g-red { border-color: #DB4437; }
.border-g-yellow { border-color: #F4B400; }
.border-g-green { border-color: #0F9D58; }

/* Animación Pulse */
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(66, 133, 244, 0); }
    100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
}
.btn-pulse { animation: pulse-blue 2s infinite; }

/* Animación Dots */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.dot-bounce { animation: bounce 0.6s infinite ease-in-out; }
.dot-delay-1 { animation-delay: 0.1s; }
.dot-delay-2 { animation-delay: 0.2s; }
.dot-delay-3 { animation-delay: 0.3s; }

/* Utilidades Navegación */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.menu-tag {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.6rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}
.menu-tag-blue { background-color: #4285F4; color: white; }
.menu-tag-red { background-color: #DB4437; color: white; }
.menu-tag-yellow { background-color: #F4B400; color: white; }
.menu-tag-green { background-color: #0F9D58; color: white; }
.menu-tag:hover { opacity: 0.85; }