/* ======================================================
   STYLE.CSS  –  FinanBrut  |  Diseño Minimal + Neo-Brutal
   ====================================================== */

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    font-family:'Lato',Arial,Helvetica,sans-serif;
    line-height:1.6;
    color:#222;
    background:#fafafa;
    overflow-x:hidden;
}

/* ---------- THEME VARIABLES ---------- */
:root{
    /* Bright Palette */
    --clr-primary:#FF006E;        /* Fucsia intenso */
    --clr-primary-dark:#C30055;
    --clr-secondary: #dc6f6f;      /* Verde neón */
    --clr-secondary-dark: #07b4f5;
    --clr-accent:#3A86FF;         /* Azul vivo */
    --clr-accent-dark:#2B60C7;
    --clr-light:#FFFFFF;
    --clr-dark:#000000;
    --clr-grey:#F2F2F2;

    /* Typography */
    --ff-heading:'Roboto', sans-serif;
    --ff-body:'Lato', sans-serif;

    /* Shadows */
    --shadow-card:0 8px 14px rgba(0,0,0,.12);
    --shadow-btn:0 4px 9px rgba(0,0,0,.14);

    /* Transition */
    --transition-fast:.25s ease;
}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    font-weight:900;
    line-height:1.2;
    text-align:center;
    color:#111;
    text-shadow:1px 1px 3px rgba(0,0,0,.05);
    margin-bottom:.75em;
}

p{
    margin-bottom:1em;
    max-width:65ch;
}

.text-white{color:var(--clr-light);}
.text-center{text-align:center;}

/* ---------- GLOBAL LAYOUT HELPERS ---------- */
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.full-height{
    min-height:100vh;
}

.bright-section{
    background:var(--clr-light);
    padding:4rem 0;
}

.bright-bg-alt{
    background:var(--clr-grey);
    padding:4rem 0;
}

/* ---------- HEADER ---------- */
.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:var(--clr-light);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    z-index:1000;
    padding:.75rem 0;
}

.logo{
    font-family:var(--ff-heading);
    font-size:1.5rem;
    font-weight:900;
    color:var(--clr-primary);
    text-decoration:none;
}

.main-nav ul{
    display:flex;
    gap:1.5rem;
    list-style:none;
}

.main-nav a{
    color:#444;
    text-decoration:none;
    font-weight:700;
    position:relative;
}

.main-nav a::after{
    content:'';
    position:absolute;
    bottom:-3px;
    left:0;
    width:0;
    height:2px;
    background:var(--clr-primary);
    transition:width var(--transition-fast);
}

.main-nav a:hover::after{width:100%;}

/* Burger */
.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
}
.burger span{
    width:24px;
    height:3px;
    background:var(--clr-dark);
    transition:all .3s ease;
}

/* ---------- HERO ---------- */
.hero-section{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-size:cover;
    background-repeat:no-repeat;
    color:var(--clr-light);
    padding:0 1rem;
    position:relative;
}

.hero-title{
    font-size:clamp(2rem,5vw,4rem);
    margin-bottom:1rem;
}

.hero-sub{
    font-size:clamp(1rem,2vw,1.5rem);
    margin-bottom:2rem;
    color:#f7f7f7;
}

/* ---------- BUTTONS ---------- */
.btn-primary,
.btn-secondary,
button,
input[type='submit']{
    font-family:var(--ff-heading);
    padding:.9rem 2.25rem;
    border:none;
    cursor:pointer;
    border-radius:6px;
    font-size:1rem;
    font-weight:800;
    transition:transform var(--transition-fast), box-shadow var(--transition-fast);
    display:inline-block;
}

.btn-primary{
    background:var(--clr-primary);
    color:var(--clr-light);
}

.btn-secondary{
    background:var(--clr-accent);
    color:var(--clr-light);
}

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-btn);
}

/* Micro-interaction (simple scale) */
.micro-interaction:active{transform:scale(.96);}

/* ---------- CARDS & GRIDS ---------- */
.carousel,
.cards-wrapper,
.workshop-grid,
.stats-grid,
.resources-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.card,
.stat-card,
.resource-card,
.event-item,
.accolades-list li{
    background:var(--clr-light);
    padding:2rem 1.5rem;
    border:3px solid var(--clr-dark);
    box-shadow:var(--shadow-card);
    transition:transform var(--transition-fast);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.card:hover,
.stat-card:hover,
.resource-card:hover{
    transform:translateY(-6px);
}

/* Card Image Container */
.card-image,
.image-container{
    width:100%;
    height:220px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:1rem;
}

.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}

/* ---------- STATISTICS ---------- */
.stats-grid .stat-number{
    font-size:2.5rem;
    font-family:var(--ff-heading);
    color:var(--clr-primary);
}
.stats-grid .stat-label{font-weight:700;}

/* ---------- GALLERY ---------- */
.carousel[data-carousel="galeria"]{
    scroll-snap-type:x mandatory;
    overflow-x:auto;
    padding-bottom:1rem;
}
.carousel[data-carousel="galeria"] .card{
    min-width:280px;
    scroll-snap-align:start;
}

/* ---------- MODAL ---------- */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(4px);
    z-index:2000;
    align-items:center;
    justify-content:center;
    padding:1rem;
}
.modal-content{
    background:var(--clr-light);
    max-width:600px;
    padding:2rem;
    position:relative;
    border:4px solid var(--clr-dark);
}
.close-modal{
    position:absolute;
    top:.5rem;
    right:.75rem;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
    color:var(--clr-primary);
}

/* ---------- EVENTS ---------- */
.event-list{
    display:grid;
    gap:1.5rem;
}
.event-item h3{color:var(--clr-accent);}

/* ---------- MEDIA MENTIONS ---------- */
.media-mentions p{
    margin-bottom:1.5rem;
    font-style:italic;
}

/* ---------- ACCOLADES ---------- */
.accolades-list{
    list-style:none;
    display:grid;
    gap:1rem;
    padding:0 1rem;
}
.accolades-list li{
    background:var(--clr-secondary);
    color:var(--clr-dark);
    font-weight:700;
}

/* ---------- FORMS ---------- */
.contact-form{
    display:grid;
    gap:1.5rem;
}
.form-group{
    display:flex;
    flex-direction:column;
}
.form-group label{
    font-weight:700;
    margin-bottom:.5rem;
}
input[type="text"],
input[type="email"],
textarea{
    padding:.75rem 1rem;
    border:2px solid var(--clr-dark);
    border-radius:4px;
    font-family:var(--ff-body);
    resize:vertical;
}
input:focus,
textarea:focus{
    outline:none;
    border-color:var(--clr-primary);
}

/* ---------- FOOTER ---------- */
.site-footer{
    background:var(--clr-dark);
    color:var(--clr-light);
    padding:3rem 0 1rem;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:2rem;
    margin-bottom:2rem;
}

.site-footer nav ul{
    list-style:none;
    text-align:center;
}

.site-footer a{
    color:var(--clr-secondary);
    text-decoration:none;
    font-weight:700;
}

.site-footer a:hover{color:var(--clr-light);}

.copy{
    text-align:center;
    font-size:.85rem;
    color:#ccc;
}

/* ---------- SOCIAL LINKS ---------- */
.social-links a{
    font-weight:900;
    margin:0 .25rem;
    position:relative;
}
.social-links a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-3px;
    width:0;
    height:2px;
    background:var(--clr-secondary);
    transition:width var(--transition-fast);
}
.social-links a:hover::after{width:100%;}

/* ---------- RESPONSIVE NAV ---------- */
@media(max-width:900px){
    .burger{display:flex;}
    .main-nav{
        position:fixed;
        top:70px;
        right:-100%;
        background:var(--clr-light);
        width:70%;
        height:calc(100vh - 70px);
        flex-direction:column;
        align-items:center;
        padding:2rem 0;
        transition:right .4s ease;
    }
    .main-nav.open{right:0;}
    .main-nav ul{
        flex-direction:column;
        gap:1rem;
    }
}

/* ---------- MORPHING ANIMATION ---------- */
@keyframes blob{
    0%{border-radius:42% 58% 63% 37%/45% 51% 49% 55%;}
    33%{border-radius:59% 41% 41% 59%/62% 33% 67% 38%;}
    66%{border-radius:46% 54% 70% 30%/57% 53% 47% 43%;}
    100%{border-radius:42% 58% 63% 37%/45% 51% 49% 55%;}
}
.morph{
    animation:blob 18s ease-in-out infinite;
}

/* ---------- PARALLAX BACKGROUND (simple) ---------- */
[data-parallax]{
    background-attachment:fixed;
}

/* ---------- SUCCESS PAGE ---------- */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
}

/* ---------- PRIVACY & TERMS PAGES ---------- */
.legal-page{
    padding-top:100px;
    padding-inline:1rem;
}

/* ---------- LINKS “Leer más” ---------- */
.open-modal{
    background:none;
    color:var(--clr-primary);
    border:2px solid var(--clr-primary);
}
.open-modal:hover{
    background:var(--clr-primary);
    color:var(--clr-light);
}

/* ---------- IMAGES ---------- */
section[style*="background-image"]{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

img{display:block;max-width:100%;height:auto;}

/* ---------- UTILITIES ---------- */
.d-none{display:none;}
.is-two-thirds{width:66.66%;}

/* ---------- SCROLL REVEAL PLACEHOLDER ---------- */
[data-sr]{visibility:hidden;}
.burger{
    display: none;
}