/* ==========================================================================
   GLOBAL THEME VARIABLES ― Creative + Neo-Brutalism (Tetrad Palette)
   ========================================================================== */
:root{
    /* Core Tetrad Palette */
    --clr-primary: #ff6b35;        /* Naranja vivo */
    --clr-secondary: #0455bf;      /* Azul intenso */
    --clr-tertiary: #36b300;       /* Verde lima */
    --clr-accent: #b8008a;         /* Magenta profundo */

    /* Neutral & Utility */
    --clr-dark: #222222;
    --clr-light: #f8f9fa;
    --clr-white: #ffffff;
    --clr-muted: #6c757d;

    /* Gradients */
    --gradient-dark: linear-gradient(135deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 100%);
    --gradient-primary: linear-gradient(145deg, var(--clr-primary) 0%, var(--clr-accent) 100%);

    /* Shadows & Elevations (Neo-Brutal) */
    --shadow-sm: 4px 4px 0 rgba(0,0,0,.25);
    --shadow-lg: 8px 8px 0 rgba(0,0,0,.35);

    /* Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    /* Radius */
    --radius-sm: 6px;
    --radius-lg: 12px;

    /* Transitions */
    --transition-fast: .25s ease;
    --transition-slow: .6s cubic-bezier(.19,1,.22,1);
}

/* ==========================================================================
   BASE RESET & TYPOGRAPHY
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family:var(--font-body);
    color:var(--clr-dark);
    background-color:var(--clr-light);
    line-height:1.6;
    scroll-behavior:smooth;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    font-weight:800;
    letter-spacing:-.5px;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
section{padding:72px 0;}              /* Unified vertical rhythm */
a{text-decoration:none;color:var(--clr-secondary);transition:color var(--transition-fast);}
a:hover{color:var(--clr-primary);}

/* ==========================================================================
   NAVBAR ― Fixed Brutalist Bar
   ========================================================================== */
.navbar{
    background:var(--clr-dark) !important;
    box-shadow:var(--shadow-sm);
}
.navbar-brand{font-weight:800;letter-spacing:1px;}
.nav-link{
    font-family:var(--font-heading);
    font-weight:600;
    text-transform:uppercase;
    color:var(--clr-white) !important;
    position:relative;
}
.nav-link::after{
    content:'';
    position:absolute;
    width:0;height:2px;
    bottom:0;left:0;
    background:var(--clr-primary);
    transition:width var(--transition-fast);
}
.nav-link:hover::after{width:100%;}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
#hero{
    color:var(--clr-white);
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
    perspective:1000px;         /* 3D context */
}
#hero .container-lg{
    transform:translateZ(40px);
}
.text-shadow{text-shadow:2px 2px 8px rgba(0,0,0,.65);}
#hero .btn{box-shadow:var(--shadow-lg);}

/* ==========================================================================
   GLOBAL BUTTONS
   ========================================================================== */
.btn{
    font-family:var(--font-heading);
    font-weight:600;
    border:none;
    border-radius:var(--radius-sm);
    padding:.75rem 1.75rem;
    transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary{
    background:var(--gradient-primary);
    color:var(--clr-white);
}
.btn-outline-light{
    border:2px solid var(--clr-white);
}
.btn:hover{
    transform:translateY(-3px) scale(1.03) rotateX(5deg);
    box-shadow:0 12px 15px rgba(0,0,0,.25);
}

/* ==========================================================================
   CARDS ― Universal Centered Layout
   ========================================================================== */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-radius:var(--radius-sm);
    overflow:hidden;
    background:var(--clr-white);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover{
    transform:translateY(-6px) rotateY(-3deg);
    box-shadow:var(--shadow-lg);
}
.card-image{
    width:100%;
    height:240px;
    overflow:hidden;
    position:relative;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content{padding:1rem 1.25rem;}

/* ==========================================================================
   READ-MORE LINKS
   ========================================================================== */
.read-more{
    display:inline-block;
    font-weight:600;
    position:relative;
    padding-right:24px;
}
.read-more::after{
    content:'→';
    position:absolute;
    right:0;top:0;
    transform:translateX(4px);
    transition:transform var(--transition-fast);
}
.read-more:hover::after{transform:translateX(8px);}

/* ==========================================================================
   EXTERNAL RESOURCE LIST
   ========================================================================== */
.list-group-item{
    border:none;
    padding:1rem 0;
    font-size:1rem;
}
.list-group-item a{font-weight:700;}
.list-group-item p{color:var(--clr-muted);margin-top:.25rem;font-size:.9rem;}

/* ==========================================================================
   GALLERY ― Responsive Grid
   ========================================================================== */
#gallery .row{gap:1rem;}
#gallery .card{background:var(--clr-tertiary);} /* punchy bg */
#gallery .card-image::after{
    content:'';
    position:absolute;inset:0;
    background:rgba(0,0,0,.15);
}

/* ==========================================================================
   TEAM SECTION
   ========================================================================== */
#team .card-image{height:380px;}
#team .card{background:var(--clr-secondary);color:var(--clr-white);}
#team .card-content small{color:var(--clr-light);}

/* ==========================================================================
   WEBINAR CARD
   ========================================================================== */
#webinars .card{
    background:var(--clr-primary);
    color:var(--clr-white);
}
#webinars .badge{background:var(--clr-dark);}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */
form .form-control{
    border:2px solid var(--clr-secondary);
    border-radius:var(--radius-sm);
}
form .form-control:focus{
    border-color:var(--clr-primary);
    box-shadow:0 0 0 .25rem rgba(255,107,53,.25);
}
.form-check-input:checked{
    background-color:var(--clr-primary);
    border-color:var(--clr-primary);
}

/* ==========================================================================
   SOCIAL LINKS (FOOTER)
   ========================================================================== */
footer a{
    color:var(--clr-light);
    font-weight:700;
    position:relative;
}
footer a::after{
    content:'';
    position:absolute;left:0;bottom:-2px;height:2px;width:0;
    background:var(--clr-accent);
    transition:width var(--transition-fast);
}
footer a:hover::after{width:100%;}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */
footer{
    background:var(--clr-dark);
    color:var(--clr-light);
    box-shadow:inset 0 8px 0 var(--clr-primary);
}

/* ==========================================================================
   3D HOVER ANIMATION UTILITIES
   ========================================================================== */
@media (hover:hover){
    .tilt-3d{
        transition:transform var(--transition-slow);
        transform-style:preserve-3d;
    }
    .tilt-3d:hover{
        transform:rotateY(-6deg) rotateX(4deg) scale(1.02);
    }
}

/* ==========================================================================
   PARALLAX PLACEHOLDER (simple illusion)
   ========================================================================== */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}

/* ==========================================================================
   SUCCESS PAGE
   ========================================================================== */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-primary);
    color:var(--clr-white);
    text-align:center;
}

/* ==========================================================================
   LEGAL PAGES (Privacy | Terms)
   ========================================================================== */
.legal-page{padding-top:100px;}

/* ==========================================================================
   COOKIES POPUP
   ========================================================================== */
#cookiePopup{
    backdrop-filter:blur(4px);
    font-family:var(--font-body);
    font-size:.9rem;
}
#acceptCookie{
    cursor:pointer;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media (max-width:992px){
    h1{font-size:2.25rem;}
    section{padding:56px 0;}
    .card-image{height:200px;}
}
@media (max-width:576px){
    .navbar-brand{font-size:1.25rem;}
    #hero .display-3{font-size:2.5rem;}
}