/* ==========================================================================
   GLOBAL THEME : Brutalismo + Curved Grids + 3-D
   ========================================================================== */

:root{
    /* Triadic Palette */
    --clr-primary:#ff5a5f;          /* Rojo coral */
    --clr-primary-dark:#cc484d;
    --clr-primary-light:#ff8a8e;

    --clr-secondary:#008489;        /* Verde azulado */
    --clr-secondary-dark:#00656a;
    --clr-secondary-light:#00a8ae;

    --clr-tertiary:#febb2c;         /* Amarillo cálido */
    --clr-tertiary-dark:#cfa021;
    --clr-tertiary-light:#ffd86f;

    --clr-bg:#fafafa;
    --clr-text:#222222;
    --clr-muted:#555555;

    --radius-lg:40px;
    --radius-md:20px;
    --radius-sm:8px;

    --transition-fast: .25s ease;
    --transition-slow: .6s cubic-bezier(.25,.8,.25,1);

    --shadow-3d:0 10px 30px rgba(0,0,0,.25);
    --shadow-soft:0 4px 15px rgba(0,0,0,.10);
}

/* ==========================================================================
   RESET & BASE (Modern-Normalize complement)
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
body{
    font-family:"Open Sans",sans-serif;
    color:var(--clr-text);
    background:var(--clr-bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
    font-family:"Raleway",sans-serif;
    font-weight:800;
    color:var(--clr-text);
    text-align:center;
    margin:0 0 .75em;
    text-wrap:balance;
}
p{margin:0 0 1.25em;color:var(--clr-muted);}
img{display:block;max-width:100%;height:auto;}

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.wrapper,.container{width:90%;max-width:1200px;margin-inline:auto;}
section{padding:4rem 0;}
.curved-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;border-radius:var(--radius-lg);}
.flex-center{display:flex;align-items:center;justify-content:center;}
.text-center{text-align:center;}
/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
    position:fixed;top:0;left:0;width:100%;z-index:900;
    background:#fff;border-bottom:4px solid var(--clr-primary);
    box-shadow:var(--shadow-soft);
}
.logo{font-family:"Raleway",sans-serif;font-weight:800;font-size:1.5rem;color:var(--clr-primary);text-decoration:none;}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.75rem 0;}
.menu{display:flex;gap:1.25rem;list-style:none;margin:0;}
.menu a{color:var(--clr-text);text-decoration:none;font-weight:600;position:relative;}
.menu a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:3px;background:var(--clr-secondary);transition:width var(--transition-fast);}
.menu a:hover::after{width:100%;}
/* Burger */
.burger{display:none;background:transparent;border:none;cursor:pointer;flex-direction:column;gap:4px;padding:4px;}
.burger .line{width:24px;height:3px;background:var(--clr-text);border-radius:2px;transition:transform var(--transition-fast);}
@media(max-width:768px){
    .burger{display:flex;}
    .menu{position:fixed;inset:70px 0 auto 0;flex-direction:column;background:#fff;
        max-height:0;overflow:hidden;transition:max-height var(--transition-slow);padding:0 1rem;box-shadow:var(--shadow-soft);}
    .menu.open{max-height:80vh;padding:1rem;}
}
/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
    min-height:80vh;
    background-size:cover;background-repeat:no-repeat;background-position:center;
    display:flex;align-items:center;justify-content:center;position:relative;
    perspective:1000px;             /* 3D context */
}
.hero-inner{transform:translateZ(60px);text-align:center;color:#fff;max-width:760px;padding:2rem;}
.hero .lead{font-size:1.2rem;margin-bottom:2rem;color:#f0f0f0;}
/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn,.btn-hero,button,input[type='submit']{
    appearance:none;border:none;cursor:pointer;
    display:inline-block;padding:.85rem 2.2rem;margin:.25rem;
    background:var(--clr-primary);color:#fff;font-weight:700;font-family:"Open Sans",sans-serif;
    border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px;
    transition:transform var(--transition-fast),box-shadow var(--transition-fast);
}
.btn-hero{background:var(--clr-tertiary);color:#222;}
.btn:hover,.btn-hero:hover,button:hover,input[type='submit']:hover{
    transform:translateY(-3px) scale(1.03) rotateX(7deg);
    box-shadow:var(--shadow-3d);
}
/* ==========================================================================
   PROGRESS
   ========================================================================== */
progress{width:100%;height:14px;border:none;border-radius:var(--radius-sm);background:#ddd;}
progress::-webkit-progress-bar{background:#ddd;border-radius:var(--radius-sm);}
progress::-webkit-progress-value{background:var(--clr-secondary);border-radius:var(--radius-sm);}
/* ==========================================================================
   SLIDER – WorkShops
   ========================================================================== */
.slider{position:relative;overflow:hidden;}
.slide{scroll-snap-align:center;flex:0 0 100%;padding:1rem;}
.slider-prev,.slider-next{
    position:absolute;top:50%;transform:translateY(-50%);background:var(--clr-tertiary);
    border:none;color:#222;font-size:2rem;width:46px;height:46px;border-radius:50%;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.slider-prev{left:10px;} .slider-next{right:10px;}
/* ==========================================================================
   CARD COMPONENT
   ========================================================================== */
.card{
    background:#fff;border:4px solid var(--clr-secondary);border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:center;
    overflow:hidden;transition:transform var(--transition-fast);
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}
.card:hover{transform:translateY(-8px) rotateX(4deg);}
.card-image{width:100%;height:280px;overflow:hidden;}
.card-image img{width:100%;height:100%;object-fit:cover;margin:0 auto;}
.card-content{padding:1.25rem;text-align:center;}
/* ==========================================================================
   MEDIA SECTION
   ========================================================================== */
.media{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;color:#fff;}
.media h2{text-shadow:1px 1px 3px rgba(0,0,0,.6);color:#fff;}
.media .card{border-color:var(--clr-tertiary);}
/* ==========================================================================
   ACCOLADES
   ========================================================================== */
.award-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;}
/* ==========================================================================
   PRESS
   ========================================================================== */
.press{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;color:#fff;}
.press article{max-width:800px;margin:0 auto 2rem;border-left:6px solid var(--clr-primary);padding:1rem 1.5rem;
    background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;}
.contact label{display:flex;flex-direction:column;font-weight:600;color:var(--clr-text);}
.contact input,.contact textarea{
    padding:.75rem 1rem;border:2px solid var(--clr-secondary);border-radius:var(--radius-sm);font-family:inherit;
}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--clr-primary);}
.btn-submit{align-self:center;}
/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:#111;color:#eee;padding:2.5rem 0;text-align:center;}
.footer-menu{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 1rem;}
.footer-menu a{color:#eee;text-decoration:none;transition:color var(--transition-fast);}
.footer-menu a:hover{color:var(--clr-tertiary);}
.social a{color:var(--clr-primary-light);text-decoration:none;font-weight:700;}
.social a:hover{color:var(--clr-tertiary-light);}
.footer p{margin-top:1rem;color:#888;}
/* ==========================================================================
   LINKS “Leer más”
   ========================================================================== */
a.read-more{display:inline-block;margin-top:.5rem;font-weight:700;color:var(--clr-primary);
    position:relative;padding-bottom:2px;}
a.read-more::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--clr-primary);
    transform:scaleX(0);transform-origin:left;transition:transform var(--transition-fast);}
a.read-more:hover::after{transform:scaleX(1);}
/* ==========================================================================
   SUCCESS PAGE
   ========================================================================== */
.success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page{padding-top:100px;}
/* ==========================================================================
   PARALLAX / 3-D UTILITIES
   ========================================================================== */
.parallax{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;}
.fade-in-up{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease;}
.fade-in-up.visible{opacity:1;transform:translateY(0);}
.rotate-y{transform:rotateY(15deg);transition:transform var(--transition-slow);}
.rotate-y:hover{transform:rotateY(0deg);}
/* ==========================================================================
   RESPONSIVE & CURVED GRID ADJUST
   ========================================================================== */
@media(max-width:992px){
    .curved-grid{border-radius:var(--radius-md);}
}
@media(max-width:576px){
    h1{font-size:1.75rem;}
    h2{font-size:1.5rem;}
    section{padding:3rem 0;}
}
/* ==========================================================================
   BURGER INTERACTION
   ========================================================================== */
.burger[aria-expanded="true"] .line:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] .line:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] .line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* ==========================================================================
   GLASSMORPHISM EFFECT (subtle)
   ========================================================================== */
.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:var(--radius-md);
}
/* ==========================================================================
   UTILS
   ========================================================================== */
.hidden{display:none !important;}