/* ====================================================
   Global Base & Variables
   ==================================================== */
:root{
    /* Analogous Palette (Blue–Teal–Green) */
    --clr-primary:#008CFF;     /* Azul brillante */
    --clr-secondary:#00B7D9;   /* Turquesa */
    --clr-tertiary:#00D38D;    /* Verde esmeralda */
    --clr-accent:#FFC14D;      /* Dorado intenso para acentos */
    --clr-dark:#222222;
    --clr-light:#F8F9FA;
    --clr-muted:#6C757D;
    --radius-lg:20px;
    --radius-sm:8px;

    /* Shadows para “UI volumétrico” */
    --shadow-sm:0 2px 4px rgba(0,0,0,.08);
    --shadow-md:0 4px 12px rgba(0,0,0,.12);
    --shadow-lg:0 8px 24px rgba(0,0,0,.18);

    /* Tipografía */
    --ff-heading:"Montserrat",sans-serif;
    --ff-body:"Merriweather",serif;

    /* Transiciones & animaciones */
    --transition-fast:all .25s ease;
    --transition-slow:all .45s ease;
}

/* Reset complementario */
*,*::before,*::after{box-sizing:border-box;}
body{
    margin:0;
    font-family:var(--ff-body);
    color:var(--clr-dark);
    background:var(--clr-light);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:var(--clr-primary);transition:var(--transition-fast);}
a:hover,a:focus{color:var(--clr-tertiary);text-decoration:underline;}

.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}

/* ====================================================
   Typography
   ==================================================== */
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    color:var(--clr-dark);
    margin:0 0 .6em;
    line-height:1.2;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
}
p{margin:0 0 1em;}
.section-title{font-size:2rem;font-weight:800;}

/* ====================================================
   Layout Helpers
   ==================================================== */
.section-padding{padding:4rem 0;}
.alt-bg{background:#E9F7FF;}
.parallax{
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    position:relative;
}
.parallax::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
}
.parallax>.container{position:relative;z-index:1;}

.stats-grid,.cards-grid,.gallery-grid,.events-calendar{
    display:grid;
    gap:2rem;
}
/* Responsivo */
@media(min-width:768px){
    .stats-grid{grid-template-columns:repeat(3,1fr);}
    .cards-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-grid{grid-template-columns:repeat(3,1fr);}
}

/* ====================================================
   Header & Navigation
   ==================================================== */
.site-header{
    position:fixed;
    top:0;left:0;width:100%;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(8px);
    box-shadow:var(--shadow-sm);
    z-index:1000;
}
.header-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.75rem 0;
}
.logo{font-family:var(--ff-heading);font-weight:800;font-size:1.5rem;color:var(--clr-primary);}
.main-nav ul{display:flex;gap:1.5rem;list-style:none;padding:0;margin:0;}
.main-nav a{font-weight:600;}
.burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:0;
    cursor:pointer;
}
.burger span{width:24px;height:3px;background:var(--clr-dark);transition:var(--transition-fast);}

/* --- Mobile --- */
@media(max-width:991px){
    .main-nav{position:fixed;top:66px;right:-100%;width:70%;height:calc(100vh - 66px);background:#fff;transition:var(--transition-fast);box-shadow:var(--shadow-lg);padding:2rem;}
    .main-nav ul{flex-direction:column;gap:1rem;}
    .main-nav.open{right:0;}
    .burger{display:flex;}
    .burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
    .burger.active span:nth-child(2){opacity:0;}
    .burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}

/* ====================================================
   Buttons
   ==================================================== */
.btn,.btn-primary,button,input[type='submit']{
    display:inline-block;
    padding:.75rem 2rem;
    border-radius:var(--radius-sm);
    border:none;
    background:var(--clr-primary);
    color:#fff;
    font-family:var(--ff-heading);
    font-weight:600;
    cursor:pointer;
    position:relative;
    transition:var(--transition-fast);
    box-shadow:var(--shadow-sm);
}
.btn-primary:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-2px);
    background:var(--clr-secondary);
    box-shadow:var(--shadow-md);
}
.btn-primary:active{transform:translateY(0);}

/* ====================================================
   Hero
   ==================================================== */
.hero-section{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.hero-title,
.hero-subtitle{color:#fff;}
.hero-title{font-size:2.5rem;}
.hero-subtitle{font-size:1.1rem;margin-bottom:2rem;}

/* ====================================================
   Stats Widgets
   ==================================================== */
.stat-widget{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:2rem;
    text-align:center;
    box-shadow:var(--shadow-md);
    transition:var(--transition-fast);
}
.stat-widget:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.stat-number{font-size:2.5rem;font-weight:800;color:var(--clr-primary);}
.stat-label{display:block;color:var(--clr-muted);}

/* ====================================================
   Cards
   ==================================================== */
.card{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:var(--transition-fast);
    text-align:center;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card-image{
    width:100%;
    height:220px;
    overflow:hidden;
    flex-shrink:0;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ====================================================
   Event Calendar & Cards
   ==================================================== */
.events-calendar .event-card{
    background:#fff;
    padding:1.5rem;
    border-left:6px solid var(--clr-secondary);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);
    transition:var(--transition-fast);
}
.events-calendar .event-card:hover{
    border-color:var(--clr-tertiary);
    transform:translateX(4px);
}

/* ====================================================
   Workshops list
   ==================================================== */
.workshops-list{
    list-style:square inside;
    columns:2;
    column-gap:3rem;
    max-width:700px;
    margin:1.5rem auto 0;
}
.workshops-list li{
    padding:.25rem 0;
    font-weight:600;
}

/* ====================================================
   Gallery
   ==================================================== */
.gallery-item{
    overflow:hidden;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
}
.gallery-item img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:transform .6s ease;
}
.gallery-item:hover img{transform:scale(1.05);}

/* ====================================================
   Contact Form
   ==================================================== */
.contact-form{
    max-width:600px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.contact-form label{font-weight:700;}
.contact-form input,
.contact-form textarea{
    padding:.8rem 1rem;
    border-radius:var(--radius-sm);
    border:1px solid #dee2e6;
    font-family:var(--ff-body);
    transition:var(--transition-fast);
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--clr-primary);outline:none;box-shadow:0 0 0 4px rgba(0,140,255,.15);}

/* ====================================================
   Footer
   ==================================================== */
.site-footer{
    background:var(--clr-dark);
    color:#fff;
    padding:3rem 0 2rem;
    text-align:center;
}
.footer-links,
.social-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem;}
.site-footer a{color:#fff;font-weight:600;}
.site-footer a:hover{text-decoration:underline;color:var(--clr-tertiary);}
.copy{font-size:.875rem;color:#d1d1d1;}

/* ====================================================
   Page Specific Utilities
   ==================================================== */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
}
.legal-page{padding-top:100px;}

/* ====================================================
   Micro-Animations
   ==================================================== */
@keyframes floatY{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
}
.btn-primary,.stat-widget,.card,.event-card{animation:floatY 6s ease-in-out infinite;}

/* ====================================================
   Scroll Animations (simple) 
   ==================================================== */
[data-animate]{opacity:0;transform:translateY(40px);transition:var(--transition-slow);}
[data-animate].animate{opacity:1;transform:none;}

/* ====================================================
   Utility Classes
   ==================================================== */
.text-center{text-align:center!important;}
.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}
/* “Leer más” enlaces */
.read-more{
    display:inline-block;
    margin-top:1rem;
    font-weight:700;
    color:var(--clr-accent);
    position:relative;
}
.read-more::after{
    content:"→";
    margin-left:.35em;
    transition:var(--transition-fast);
}
.read-more:hover::after{transform:translateX(4px);}

/* ====================================================
   Icon-like Social Links (solo texto)
   ==================================================== */
.social-links a{
    position:relative;
    padding-left:1.3em;
}
.social-links a::before{
    content:"◆";
    position:absolute;
    left:0;top:0;
    color:var(--clr-accent);
    font-size:.75em;
    line-height:1.8;
}

/* ====================================================
   Media Queries tweaks
   ==================================================== */
@media(max-width:575px){
    .hero-title{font-size:2rem;}
    .workshops-list{columns:1;}
}