/*
 * Kimufest – Global Design Tokens
 * Font: Outfit | Colors: Orange palette | Feel: Summer Glassmorphism
 * Loaded FIRST – everything else inherits from here
 */

@font-face {
    font-family: 'Outfit';
    src: url('../assets/fonts/outfit-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
}


/* ═══════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════ */
:root {
    /* — Font — */
    --font-base:    'Outfit', sans-serif;
    --font-display: 'Outfit', sans-serif;

    /* — Blue Palette (Kimufest 2026) — */
    --clr-primary:       #40CEF3;   /* pool cyan – main accent */
    --clr-primary-light: #72DEFF;   /* light cyan – hover/tint */
    --clr-primary-pale:  #E6F9FF;   /* very light cyan – bg tints */
    --clr-primary-dark:  #1AAFD0;   /* deep cyan – pressed/active */
    --clr-secondary:     #023682;   /* navy blue – complementary/CTAs */
    --clr-cta:           #023682;   /* navy – CTA button background */

    /* — Neutrals — */
    --clr-black:   #023682;   /* navy blue instead of black */
    --clr-dark:    #1E1E1E;
    --clr-muted:   #5B6270;
    --clr-light:   #9BA3AF;
    --clr-border:  rgba(64, 206, 243, 0.18);   /* cyan-tinted border */
    --clr-border-n: #E8ECF0;                    /* neutral border */
    --clr-bg:      #EEF8FF;                     /* pale cyan background */
    --clr-bg-alt:  #EEF8FF;                     /* pale cyan background */
    --clr-paper:   #FFFFFF;

    /* — Glassmorphism — */
    --glass-bg:     rgba(255, 255, 255, 0.72);
    --glass-bg-d:   rgba(20, 20, 20, 0.65);    /* dark glass */
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-border-d: rgba(255,255,255,0.10);
    --glass-blur:   saturate(160%) blur(20px);
    --glass-blur-d: saturate(140%) blur(24px);

    /* — Shadows — */
    --shadow-xs: 0 2px 8px rgba(2, 54, 130, 0.08);
    --shadow-sm: 0 4px 20px rgba(2, 54, 130, 0.10);
    --shadow-md: 0 10px 40px rgba(2, 54, 130, 0.14);
    --shadow-lg: 0 20px 60px rgba(2, 54, 130, 0.18);
    --shadow-neutral: 0 4px 20px rgba(0, 0, 0, 0.06);

    /* — Radius — */
    --r-sm:  10px;
    --r-md:  10px;
    --r-lg:  10px;
    --r-xl:  10px;
    --r-pill: 999px;

    /* — Spacing — */
    --section-py:  100px;
    --section-py-sm: 60px;

    /* — Max widths — */
    --max-w: 1600px;
    --max-w-content: 900px;

    /* — Transitions — */
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --dur: 0.35s;
    --transition: var(--dur) var(--ease);

    /* Legacy aliases (keep existing code working) */
    --bg-color:       var(--clr-bg);
    --primary-red:    #40CEF3;   /* remapped to cyan */
    --primary-orange: var(--clr-primary);
    --text-dark:      var(--clr-black);
    --text-light:     #ffffff;
    --border-radius:  var(--r-sm);
}

/* ═══════════════════════════════════════
   GLOBAL RESET / BASE
   ═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
optgroup,
textarea {
    font-family: var(--font-base) !important;
    color: var(--clr-black);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base) !important;
    font-weight: 800;
    line-height: 1.15;
    color: var(--clr-black);
    margin-top: 0;
}

p { line-height: 1.7; }

/* ═══════════════════════════════════════
   WRAPPER  (max 1600px, consistent padding)
   ═══════════════════════════════════════ */
.wrapper,
.wrapper-lg {
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}

.wrapper-sm {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}

/* ═══════════════════════════════════════
   CTA BUTTON SYSTEM
   ═══════════════════════════════════════ */

/* Primary: Navy #023682 bg, white text → cyan hover */
.btn,
.btn-primary,
.btn-hero-large,
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    font-family: var(--font-base) !important;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: var(--r-pill);
    text-decoration: none;
    border: 2px solid var(--clr-cta);
    background: var(--clr-cta);
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(2, 54, 130, 0.20);
    white-space: nowrap;
}

.btn:hover,
.btn-primary:hover,
.btn-hero-large:hover,
.btn-cta:hover {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Ghost (secondary): transparent + navy border → cyan fill on hover */
.btn-ghost,
.btn-outline,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 34px;
    font-family: var(--font-base) !important;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: var(--r-pill);
    text-decoration: none;
    border: 2px solid var(--clr-cta);
    background: transparent;
    color: var(--clr-cta);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-ghost:hover,
.btn-outline:hover,
.btn-secondary:hover {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

/* On dark bg: white ghost → orange fill on hover */
.dark-section .btn-ghost,
.dark-section .btn-outline,
section.dark .btn-ghost {
    border-color: rgba(255,255,255,0.6);
    color: #fff;
}

.dark-section .btn-ghost:hover {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
}

/* On dark bg: cyan fill → deepen on hover */
.btn-orange,
.dark-section .btn-primary {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #023682;  /* dark text on light cyan for readability */
}

.btn-orange:hover {
    background: var(--clr-primary-dark);
    border-color: var(--clr-primary-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Text link button style */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--clr-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: var(--transition);
}

.btn-text:hover {
    border-bottom-color: var(--clr-primary);
    gap: 14px;
}

/* ═══════════════════════════════════════
   GLASSMORPHISM UTILITY CLASSES
   ═══════════════════════════════════════ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.glass-dark {
    background: var(--glass-bg-d);
    backdrop-filter: var(--glass-blur-d);
    -webkit-backdrop-filter: var(--glass-blur-d);
    border: 1px solid var(--glass-border-d);
}

.glass-orange {
    background: rgba(255, 116, 38, 0.10);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 116, 38, 0.20);
}

/* ═══════════════════════════════════════
   CARD BASE (glass variant)
   ═══════════════════════════════════════ */
.card-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 116, 38, 0.15);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
}

.card-glass:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 116, 38, 0.35);
}

/* ═══════════════════════════════════════
   SECTION SYSTEM
   ═══════════════════════════════════════ */
section {
    position: relative;
}

.section-py { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-py-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }

.py-5 {
    padding-top: var(--section-py-sm) !important;
    padding-bottom: var(--section-py-sm) !important;
}

.bg-warm     { background: var(--clr-bg); }
.bg-pale     { background: var(--clr-bg-alt); }
.bg-dark     { background: var(--clr-dark); }
.bg-black    { background: var(--clr-black); }
.bg-white    { background: #fff; }

/* ═══════════════════════════════════════
   FORM INPUTS (global)
   ═══════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
    font-family: var(--font-base) !important;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--clr-border-n) !important;
    padding: 10px 16px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background: var(--clr-paper) !important;
    color: var(--clr-black) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 116, 38, 0.15) !important;
}

/* ═══════════════════════════════════════
   TYPOGRAPHY HELPERS
   ═══════════════════════════════════════ */
.text-orange  { color: var(--clr-primary); }
.text-muted   { color: var(--clr-muted); }
.text-light-c { color: var(--clr-light); }
.text-white   { color: #fff; }

.label-tag {
    display: inline-block;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: var(--r-sm);
    background: rgba(255, 116, 38, 0.12);
    color: var(--clr-primary-dark);
    border: 1px solid rgba(255, 116, 38, 0.25);
}

/* ═══════════════════════════════════════
   OVERRIDES: custom.css legacy tokens
   ═══════════════════════════════════════ */

/* Wrapper override — keep legacy class working */
.wrapper {
    max-width: var(--max-w);
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}

/* Body bg - White for clarity */
body {
    background-color: #ffffff !important;
}

/* ═══════════════════════════════════════
   HEADING SCALE (unified)
   clamp(min, fluid, max) — fluid across viewport
   ═══════════════════════════════════════ */

/* — Size tokens — */
:root {
    --fs-h1: clamp(2rem, 5vw, 3.5rem);      /* Responsive 32px to 56px */
    --fs-h2: clamp(1.9rem,   4vw,    2.5rem);      /* 30px → 40px  */
    --fs-h3: clamp(1.4rem,   2.8vw,  2rem);      /* 22px → 32px  */
    --fs-h4: clamp(1.15rem,  2vw,    1.5rem);    /* 18px → 24px  */
    --fs-h5: clamp(1rem,     1.5vw,  1.2rem);    /* 16px → 19px  */
    --fs-h6: clamp(0.875rem, 1.2vw,  1rem);      /* 14px → 16px  */

    --lh-heading: 1.15;
    --lh-subheading: 1.25;
    --mb-heading: 0.6em;   /* bottom margin as proportion of font-size */
}

/* — Base heading styles (light bg) — */
h1 {
    font-family: var(--font-base) !important;
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--clr-black);
    margin-top: 0;
    margin-bottom: var(--mb-heading);
    letter-spacing: -0.02em;
}

h2 {
    font-family: var(--font-base) !important;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: var(--lh-heading);
    color: var(--clr-black);
    margin-top: 0;
    margin-bottom: var(--mb-heading);
    letter-spacing: -0.01em;
}

h3 {
    font-family: var(--font-base) !important;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: var(--lh-subheading);
    color: var(--clr-black);
    margin-top: 0;
    margin-bottom: var(--mb-heading);
}

h4 {
    font-family: var(--font-base) !important;
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: var(--lh-subheading);
    color: var(--clr-black);
    margin-top: 0;
    margin-bottom: var(--mb-heading);
}

h5 {
    font-family: var(--font-base) !important;
    font-size: var(--fs-h5);
    font-weight: 700;
    line-height: 1.35;
    color: var(--clr-muted);
    margin-top: 0;
    margin-bottom: var(--mb-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

h6 {
    font-family: var(--font-base) !important;
    font-size: var(--fs-h6);
    font-weight: 700;
    line-height: 1.4;
    color: var(--clr-light);
    margin-top: 0;
    margin-bottom: var(--mb-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Context: heading on dark/orange bg ── */
/* Any heading inside a dark section auto-becomes white */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.page-header-premium h1,
.page-header-premium h2,
.activities-header h1,
.ludoteca-header h1,
.colaboradores-header h1,
.documentos-header h1,
.card-dark h2,
.card-dark h3,
.logistics-card h3,
.home-colabs-fullwidth:not(.bg-light) h2,
section[style*="background:#14"],
section[style*="background: #14"],
.bg-dark h1,  .bg-dark h2,  .bg-dark h3,
.bg-dark h4,  .bg-dark h5,  .bg-dark h6,
.bg-black h1, .bg-black h2, .bg-black h3,
.bg-black h4, .bg-black h5, .bg-black h6,
.card-unete h1, .card-unete h2, .card-unete h3 {
    color: #ffffff;
}

/* Headings inside orange/gradient cards */
.capacity-card h3,
.card-accent h3 {
    color: #ffffff;
}

/* Section subheadings (eyebrow labels) */
.section-heading .pre-title {
    font-family: var(--font-base) !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--clr-primary);
    display: block;
    margin-bottom: 10px;
}

/* Display heading variant (heavy Outfit) */
.heading-display,
.heading-display-soft,
h1.display,
h2.display {
    font-family: var(--font-base) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* ── Utility modifiers ── */
.heading-xl { font-size: var(--fs-h1) !important; font-weight: 700 !important; }
.heading-sm { font-size: var(--fs-h5) !important; }
.heading-muted { color: var(--clr-muted) !important; }
.heading-orange { color: var(--clr-primary) !important; }
.heading-white  { color: #fff !important; }

/* ── Responsive: reduce spacing on mobile ── */
@media (max-width: 768px) {
    :root {
        --section-py:    60px;
        --section-py-sm: 40px;
        --mb-heading:    0.5em;
    }

    h1 { letter-spacing: -0.01em; }
    h2 { letter-spacing: 0; }
}

@media (max-width: 480px) {
    :root {
        --fs-h1: clamp(2rem,   8vw,  2.8rem);
        --fs-h2: clamp(1.5rem, 6vw,  2rem);
        --fs-h3: clamp(1.2rem, 5vw,  1.5rem);
    }
}