/* ==========================================
   FULIMA - Fundación Líderes del Mañana
   Main Stylesheet
   Brand Colors:
   - Dark Blue: #003366 (Primary)
   - Gold: #FFD700 (Accent)
   - Light Blue: #29ABE2
   - Green: #7BC043
   - Red: #E32636
   - Cream/White: #F8F7F4
   
   Fonts:
   - Headings: Fredoka Medium
   - Body: Nunito S
   ========================================== */

/* ===== TAILWIND CUSTOM CONFIGURATION ===== */
/* This config extends Tailwind with our brand colors */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    --color-dark-blue: #003366;
    --color-gold: #FFD700;
    --color-light-blue: #29ABE2;
    --color-green: #7BC043;
    --color-red: #E32636;
    --color-cream: #F8F7F4;
    --color-white: #FFFFFF;
    
    --font-heading: 'Fredoka', sans-serif;
    --font-body: 'Nunito', sans-serif;
    
    --transition-speed: 0.3s;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
}

/* ===== LINK STYLES (eliminar azul y subrayado predeterminados) ===== */
a {
    text-decoration: none;
    color: inherit;
}

/* Enlaces del footer en fondo oscuro */
.footer-link {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition-speed) ease;
    text-decoration: none;
}

.footer-link:hover {
    color: var(--color-gold);
}

/* ===== BASE STYLES ===== */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-body);
    color: #333;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    background-color: var(--color-white);
}

/* ===== GLOBAL OVERFLOW FIX ===== */
* {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Excluir elementos del navbar y videos del límite global de max-width */
#navbar *,
#navbar img,
#navbar .logo-nav {
    max-width: none;
}

img, iframe {
    max-width: 100%;
    height: auto;
}

/* Los videos necesitan su propio control para que los controles nativos funcionen correctamente */
video {
    max-width: 100%;
    height: auto;
}

/* El logo del navbar tiene su propio control de tamaño */
#navbar img.logo-nav {
    max-width: none;
    height: auto;
}

/* Font Classes */
.font-fredoka {
    font-family: var(--font-heading);
}

.font-nunito {
    font-family: var(--font-body);
}

/* ===== CUSTOM TAILWIND EXTENSIONS ===== */
/* These classes are used alongside Tailwind */

/* Text Colors */
.text-fulima-dark-blue { color: var(--color-dark-blue); }
.text-fulima-gold { color: var(--color-gold); }
.text-fulima-light-blue { color: var(--color-light-blue); }
.text-fulima-green { color: var(--color-green); }
.text-fulima-red { color: var(--color-red); }
.text-fulima-cream { color: var(--color-cream); }

/* Background Colors */
.bg-fulima-dark-blue { background-color: var(--color-dark-blue); }
.bg-fulima-gold { background-color: var(--color-gold); }
.bg-fulima-light-blue { background-color: var(--color-light-blue); }
.bg-fulima-green { background-color: var(--color-green); }
.bg-fulima-red { background-color: var(--color-red); }
.bg-fulima-cream { background-color: var(--color-cream); }

/* Custom opacity helpers for branding colors */
.bg-fulima-dark-blue\/95 { background-color: rgba(0, 51, 102, 0.95); }
.bg-fulima-dark-blue\/92 { background-color: rgba(0, 51, 102, 0.92); }
.bg-fulima-dark-blue\/80 { background-color: rgba(0, 51, 102, 0.80); }
.bg-fulima-dark-blue\/65 { background-color: rgba(0, 51, 102, 0.65); }
.bg-fulima-dark-blue\/60 { background-color: rgba(0, 51, 102, 0.60); }
.bg-fulima-dark-blue\/40 { background-color: rgba(0, 51, 102, 0.40); }
.bg-fulima-dark-blue\/10 { background-color: rgba(0, 51, 102, 0.10); }
.bg-fulima-gold\/30 { background-color: rgba(255, 215, 0, 0.30); }
.bg-fulima-gold\/20 { background-color: rgba(255, 215, 0, 0.20); }
.bg-fulima-gold\/5 { background-color: rgba(255, 215, 0, 0.05); }
.bg-fulima-light-blue\/10 { background-color: rgba(41, 171, 226, 0.10); }
.bg-fulima-light-blue\/5 { background-color: rgba(41, 171, 226, 0.05); }
.bg-fulima-green\/10 { background-color: rgba(123, 192, 67, 0.10); }
.bg-fulima-red\/10 { background-color: rgba(227, 38, 54, 0.10); }

.border-fulima-gold\/30 { border-color: rgba(255, 215, 0, 0.30); }
.shadow-fulima-gold\/20 { box-shadow: 0 20px 50px rgba(255, 215, 0, 0.20); }

/* Border Colors */
.border-fulima-dark-blue { border-color: var(--color-dark-blue); }
.border-fulima-gold { border-color: var(--color-gold); }
.border-fulima-light-blue { border-color: var(--color-light-blue); }
.border-fulima-green { border-color: var(--color-green); }
.border-fulima-red { border-color: var(--color-red); }

/* ===== ANIMATIONS ===== */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes floatDelayed {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-float-slow {
    animation: floatSlow 4s ease-in-out infinite;
}

.animate-float-delayed {
    animation: floatDelayed 3.5s ease-in-out infinite 1s;
}

.animate-pulse-custom {
    animation: pulse 2s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ===== NAVIGATION ===== */
#navbar {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-speed) ease;
}

/* ===== LOGO NAV - RESPONSIVE ===== */
.logo-nav {
    filter: none;
    transition: filter var(--transition-speed) ease;
    display: block;
    /* max-height controla el logo en todas las resoluciones sin pisar las clases Tailwind */
    max-height: 44px;
    width: auto;
    object-fit: contain;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Asegurar que la imagen del logo no sea limitada por el selector global * { max-width } */
#navbar img.logo-nav {
    max-width: none;
}

@media (min-width: 640px) {
    .logo-nav {
        max-height: 48px;
    }
}

@media (min-width: 1024px) {
    .logo-nav {
        max-height: 56px;
    }
}

@media (min-width: 1280px) {
    .logo-nav {
        max-height: 60px;
    }
}


.nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    color: var(--color-dark-blue);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition-speed) ease;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-gold);
}

.mobile-nav-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-dark-blue);
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all var(--transition-speed) ease;
    text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: rgba(0, 51, 102, 0.05);
    color: var(--color-gold);
}

/* Language Switcher */
.lang-btn {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-body);
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 51, 102, 0.2);
    background: transparent;
    color: var(--color-dark-blue);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.lang-btn:hover,
.lang-btn.active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-dark-blue);
}

.lang-btn-mobile {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-body);
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 51, 102, 0.2);
    background: transparent;
    color: var(--color-dark-blue);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.lang-btn-mobile:hover,
.lang-btn-mobile.active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-dark-blue);
}

/* Donate Nav Button */
.btn-donate-nav {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: var(--color-gold);
    color: var(--color-dark-blue);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.btn-donate-nav:hover {
    background: var(--color-dark-blue);
    color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.btn-donate-mobile {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    background: var(--color-gold);
    color: var(--color-dark-blue);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
}

/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    min-height: 100vh;
    background: var(--color-white);
}

.hero-section .hero-bg {
    filter: brightness(0.45) saturate(0.95);
}

/* ===== SECTION STYLES ===== */
.section-padding {
    padding: 5rem 1rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 6rem 2rem;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding: 7rem 2rem;
    }
}

.section-label {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: rgba(0, 51, 102, 0.08);
    color: var(--color-dark-blue);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== FORM STYLES ===== */
.form-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-dark-blue);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--color-dark-blue);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

.form-input:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--color-dark-blue) 0%, #004080 100%);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #004080 0%, var(--color-dark-blue) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 51, 102, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

/* ===== RESPONSIVE FORM ===== */
@media (max-width: 640px) {
    .form-input {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
    }
    
    .btn-primary {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .form-label {
        font-size: 0.9rem;
    }
}

/* Form submission states */
.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-primary.loading {
    position: relative;
    color: transparent;
}

.btn-primary.loading::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}