/* ==========================================================================
   Global Variables & Base
   ========================================================================== */
:root{
    /* Bright Palette */
    --primary            : #ff6b6b;
    --primary-dark       : #d94f4f;
    --secondary          : #4ea8ff;
    --secondary-dark     : #2675d7;
    --accent             : #ffd93d;
    --accent-dark        : #e5bf00;
    --neutral-light      : #f1f5f9;
    --neutral            : #e2e8f0;
    --neutral-dark       : #1e293b;
    --text-dark          : #222222;
    --text-light         : #ffffff;

    /* Neomorphism Shadows */
    --shadow-inset       : inset 6px 6px 12px rgba(0,0,0,0.12),
                           inset -6px -6px 12px rgba(255,255,255,0.6);
    --shadow-out         : 6px 6px 12px rgba(0,0,0,0.12),
                           -6px -6px 12px rgba(255,255,255,0.6);

    /* Transition */
    --base-ease          : cubic-bezier(.4,.0,.2,1);
    --base-dur           : .3s;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Lato',sans-serif;
    color:var(--text-dark);
    background:var(--neutral-light);
    line-height:1.6;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,h2,h3,h4,h5,h6{
    font-family:'Roboto',sans-serif;
    color:var(--text-dark);
    margin:0 0 .5em;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
p{margin-bottom:1rem;}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.container-center{
    display:flex;
    justify-content:center;
    align-items:center;
}
.text-center{text-align:center;}
.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}
.mb-5{margin-bottom:3rem!important;}
.pt-100{padding-top:100px!important;} /* For privacy & terms pages */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn,button,input[type="submit"]{
    font-family:'Roboto',sans-serif;
    background:var(--primary);
    color:var(--text-light);
    padding:.75rem 2rem;
    border:none;
    border-radius:1.75rem;
    cursor:pointer;
    transition:all var(--base-dur) var(--base-ease);
    box-shadow:var(--shadow-out);
}
.btn.secondary{background:var(--secondary);}
.btn:hover,
button:hover,
input[type="submit"]:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,0.15);
}
.btn.secondary:hover{background:var(--secondary-dark);}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-inset);}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar{
    backdrop-filter:blur(8px);
    background:rgba(255,255,255,0.8);
}
.navbar.is-fixed-top{box-shadow:0 2px 6px rgba(0,0,0,.1);}
.navbar-item{font-weight:700;color:var(--text-dark)!important;}
.navbar-burger span{background:var(--text-dark);}

/* ==========================================================================
   Hero Section
   ========================================================================== */
#hero{
    position:relative;
    color:var(--text-light);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
#hero .title,
#hero .subtitle{color:var(--text-light);}
#hero::after{
    /* biomorphic overlay */
    content:'';
    position:absolute;
    bottom:-60px;left:50%;
    width:120%;
    height:120px;
    background:var(--neutral-light);
    border-radius:50%;
    transform:translateX(-50%);
    z-index:1;
}

/* Toggle Demo */
#colorToggle{accent-color:var(--accent);transform:scale(1.2);}

/* ==========================================================================
   Section Generic
   ========================================================================== */
section{
    padding:4rem 1rem;
    position:relative;
    background:var(--neutral-light);
}
section:nth-child(even){background:var(--neutral);}
section[data-prompt]{background-size:cover;background-repeat:no-repeat;}

/* ==========================================================================
   Cards & Gallery
   ========================================================================== */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--neutral-light);
    border-radius:1.25rem;
    padding:1.5rem;
    margin-bottom:2rem;
    box-shadow:var(--shadow-out);
    transition:transform var(--base-dur) var(--base-ease);
    text-align:center;
}
.card:hover{transform:translateY(-5px);}
.card-image{
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:1rem;
    margin-bottom:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}

/* ==========================================================================
   Workshops Grid
   ========================================================================== */
#workshops .columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}

/* ==========================================================================
   Partners Logos
   ========================================================================== */
#partners .card-image{height:140px;}
#partners .card-content{font-size:.9rem;}

/* ==========================================================================
   Awards Section
   ========================================================================== */
#awards .columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
#awards img{border-radius:.75rem;}

/* ==========================================================================
   Contact Form
   ========================================================================== */
#contacto form{
    max-width:650px;
    margin:0 auto;
    border-radius:1.5rem;
    background:var(--neutral-light);
    box-shadow:var(--shadow-out);
}
#contacto .input,
#contacto .textarea{
    background:var(--neutral);
    border:none;
    border-radius:1rem;
    box-shadow:var(--shadow-inset);
    color:var(--text-dark);
}
#contacto .input:focus,
#contacto .textarea:focus{outline:none;box-shadow:0 0 0 3px var(--accent-dark);}

/* ==========================================================================
   Links “Leer más”
   ========================================================================== */
.read-more{
    font-weight:700;
    color:var(--secondary);
    position:relative;
    transition:color var(--base-dur) var(--base-ease);
}
.read-more::after{
    content:'';
    position:absolute;
    left:0;bottom:-2px;
    height:2px;width:100%;
    background:var(--secondary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--base-dur) var(--base-ease);
}
.read-more:hover{color:var(--secondary-dark);}
.read-more:hover::after{transform:scaleX(1);}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
    color:var(--text-light);
    font-size:.9rem;
}
.footer a{
    color:var(--accent);
    margin:0 .25rem;
    text-decoration:none;
    font-weight:700;
}
.footer a:hover{color:var(--accent-dark);text-decoration:underline;}
.footer p{margin:.25rem 0;}
/* Social text icons */
.footer a::before{
    font-family:'Roboto',sans-serif;
    font-weight:900;
    display:inline-block;
    margin-right:.25em;
}
.footer a[href*="facebook.com"]::before{content:'f';}
.footer a[href*="x.com"]::before{content:'x';}
.footer a[href*="instagram.com"]::before{content:'¡';}

/* ==========================================================================
   Success Page
   ========================================================================== */
.page-success{
    min-height:100vh;
}
.page-success .wrapper{
    height:100%;
}

/* ==========================================================================
   Privacy & Terms
   ========================================================================== */
.page-legal{
    padding-top:100px;
}

/* ==========================================================================
   High-Energy Mode (Demo Toggle)
   ========================================================================== */
body.high-energy{
    --primary:#ff9f1c;
    --primary-dark:#d97f00;
    --secondary:#2ec4b6;
    --secondary-dark:#159988;
    --accent:#ffbf69;
    background:#fffaf0;
    transition:background var(--base-dur) var(--base-ease);
}

/* ==========================================================================
   Animation Helpers
   ========================================================================== */
.fade-in{
    opacity:0;
    transform:translateY(20px);
    animation:fadeUp .8s forwards;
}
@keyframes fadeUp{
    to{opacity:1;transform:none;}
}

/* ==========================================================================
   Parallax Background (container must have data-prompt attr in HTML)
   ========================================================================== */
.parallax{
    background-attachment:fixed;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:768px){
    .navbar-menu{background:rgba(255,255,255,0.95);}
    h1{font-size:2rem;}
    section{padding:3rem 1rem;}
}

figure {
    width: 100%;
}