/* -------------------------------------------------
   VARIABLES – PALETA COMPLEMENTARIA + NEUROMORPH
------------------------------------------------- */
:root{
    --primary:#4EA8DE;
    --primary-dark:#3A7AB0;
    --secondary:#DE914E;
    --secondary-dark:#B56D2D;
    --bg:#F1F5FA;
    --surface:#E8ECF3;
    --text-dark:#222222;
    --text-light:#FFFFFF;
    --shadow-light:rgba(255,255,255,0.7);
    --shadow-dark:rgba(0,0,0,0.15);
    --radius:18px;
    --transition:0.3s ease;
}

/* -------------------------------------------------
   RESETEO & TIPOGRAFÍA
------------------------------------------------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:'Work Sans',sans-serif;
    background:var(--bg);
    color:var(--text-dark);
    line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    color:var(--text-dark);
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:var(--primary-dark);transition:color var(--transition);}
a:hover{color:var(--secondary-dark);}
.container{width:90%;max-width:1200px;margin:0 auto}

/* -------------------------------------------------
   UTILIDADES
------------------------------------------------- */
.flex{display:flex}
.space-between{justify-content:space-between}
.align-center{align-items:center}
.center{justify-content:center;align-items:center;text-align:center}
.column{flex-direction:column}
.wrap{flex-wrap:wrap}
.section{padding:60px 0}
.section-title{margin-bottom:40px;font-size:2.2rem}
.btn,
button,
input[type='submit']{
    display:inline-block;
    padding:12px 28px;
    border:none;
    border-radius:var(--radius);
    background:var(--primary);
    color:var(--text-light);
    font-weight:600;
    cursor:pointer;
    box-shadow:3px 3px 6px var(--shadow-dark),-3px -3px 6px var(--shadow-light);
    transition:background var(--transition),transform var(--transition);
}
.btn.secondary{background:var(--secondary);}
.btn.tertiary{background:var(--secondary-dark);}
.btn:hover,
button:hover,
input[type='submit']:hover{transform:translateY(-3px);background:var(--primary-dark)}
.btn.secondary:hover{background:var(--secondary-dark);}
.btn.tertiary:hover{background:var(--secondary);}
.switch{position:relative;display:inline-block;width:50px;height:26px;margin-left:10px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--surface);transition:var(--transition);border-radius:34px;box-shadow:inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light)}
.slider:before{position:absolute;content:'';height:20px;width:20px;left:3px;bottom:3px;background:var(--primary);transition:var(--transition);border-radius:50%}
input:checked + .slider{background:var(--secondary)}
input:checked + .slider:before{transform:translateX(24px);background:var(--secondary-dark)}

/* -------------------------------------------------
   NEUROMORPH CONTAINERS
------------------------------------------------- */
.neuromorph{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
}

/* -------------------------------------------------
   HEADER
------------------------------------------------- */
.header{
    position:sticky;top:0;left:0;width:100%;z-index:1000;
    background:var(--bg);padding:10px 0;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary-dark)}
.nav-links{display:flex;gap:20px;list-style:none}
.nav-links a{font-weight:500;color:var(--text-dark)}
.nav-links a:hover{color:var(--secondary-dark)}
.burger{display:none;flex-direction:column;cursor:pointer;gap:4px}
.burger span{width:25px;height:3px;background:var(--text-dark);border-radius:3px}

/* -------------------------------------------------
   HERO
------------------------------------------------- */
.hero{
    position:relative;
    height:85vh;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
    color:var(--text-light);
    text-align:center;border-radius:0 0 80px 80px;
}
.hero-content{max-width:700px;padding:20px}
.hero h1{font-size:3rem;color:var(--text-light)}
.hero p{font-size:1.1rem;margin:20px 0;color:var(--text-light)}

/* -------------------------------------------------
   CURVED GRID (Services)
------------------------------------------------- */
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    border-radius:60px 0 60px 0;
    overflow:hidden;
}

/* -------------------------------------------------
   CARD COMPONENT
------------------------------------------------- */
.card{
    display:flex;flex-direction:column;align-items:center;
    background:var(--surface);
    border-radius:var(--radius);
    text-align:center;
    box-shadow:6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
    transition:transform var(--transition);
}
.card:hover{transform:translateY(-6px)}
.card-image{width:100%;height:250px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.card-image img{width:100%;height:100%;object-fit:cover;margin:0 auto}
.card-content{padding:20px}
.card-content h3{margin-bottom:10px}
.card-content p{font-size:0.95rem}

/* -------------------------------------------------
   STATISTICS
------------------------------------------------- */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:20px;
}
.stat-widget{
    background:var(--surface);
    border-radius:var(--radius);
    padding:30px 20px;
    box-shadow:inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    text-align:center;
}
.stat-number{
    display:block;
    font-size:2.5rem;
    color:var(--primary-dark);
    margin-bottom:5px;
}

/* -------------------------------------------------
   PRESS & ACCOLADES
------------------------------------------------- */
.press-item,.accolades-list li{
    background:var(--surface);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:20px;
    box-shadow:3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
}
.external-links li{margin:8px 0;list-style:disc inside}

/* -------------------------------------------------
   EVENTS
------------------------------------------------- */
.events-wrapper{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    justify-content:center;
}
.event-item{
    padding:20px 25px;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    text-align:center;
    min-width:260px;
}

/* -------------------------------------------------
   CONTACT FORM
------------------------------------------------- */
.contact-form{
    gap:20px;
    max-width:600px;
    margin:0 auto;
}
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px 18px;
    border:none;
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text-dark);
    box-shadow:inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    font-family:'Work Sans',sans-serif;
    resize:none;
}
.contact-form input:focus,
.contact-form textarea:focus{outline:2px solid var(--primary)}
.switch-container{display:flex;align-items:center;gap:10px;margin:10px 0}

/* -------------------------------------------------
   FOOTER
------------------------------------------------- */
.footer{
    background:var(--surface);
    padding:40px 0;
    border-radius:80px 80px 0 0;
    box-shadow:inset 0 8px 12px rgba(0,0,0,0.05);
}
.footer-col{margin-bottom:30px;min-width:220px}
.footer-col h4{margin-bottom:15px;color:var(--primary-dark)}
.footer-col ul{list-style:none}
.footer-col ul li{margin:6px 0}
.footer a{color:var(--secondary-dark);font-weight:500}
.footer a:hover{color:var(--primary-dark)}

/* -------------------------------------------------
   SOCIAL TEXT LINKS
------------------------------------------------- */
.footer-col ul li a::before{
    content:'› ';
    color:var(--primary);
    font-weight:700;
    transition:color var(--transition);
}
.footer-col ul li a:hover::before{color:var(--secondary)}

/* -------------------------------------------------
   BURGER MENU (RESPONSIVE)
------------------------------------------------- */
@media(max-width:900px){
    .burger{display:flex}
    .nav-links{
        position:fixed;top:0;right:-100%;width:60%;height:100vh;
        flex-direction:column;align-items:center;
        padding-top:120px;
        background:var(--surface);
        transition:right var(--transition);
    }
    .nav-links.open{right:0}
}

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

/* -------------------------------------------------
   PRIVACY & TERMS PADDING
------------------------------------------------- */
.page-legal{padding-top:100px}

/* -------------------------------------------------
   PARALLAX BACKGROUND HELPERS
------------------------------------------------- */
.bg-parallax{
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

/* -------------------------------------------------
   MICRO-ANIMACIONES
------------------------------------------------- */
@keyframes float{
    0%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
    100%{transform:translateY(0)}
}
.btn.primary:hover{animation:float 2s ease-in-out infinite alternate}

/* “Leer más” enlaces */
a.read-more{display:inline-block;margin-top:10px;font-weight:600;position:relative;padding-right:24px}
a.read-more::after{
    content:'»';
    position:absolute;right:0;top:0;
    transition:transform var(--transition);
}
a.read-more:hover::after{transform:translateX(4px)}

/* -------------------------------------------------
   CURVED DECORATIONS (pseudo) 
------------------------------------------------- */
.section.curved-grid::before,
.section.curved-grid::after{
    content:'';
    position:absolute;width:120%;height:100px;left:-10%;background:var(--bg);z-index:-1;
}
.section.curved-grid::before{top:-80px;border-radius:0 0 50% 50%}
.section.curved-grid::after{bottom:-80px;border-radius:50% 50% 0 0}

/* -------------------------------------------------
   RESPONSIVE TYPOGRAPHY
------------------------------------------------- */
@media(max-width:600px){
    .hero{height:70vh}
    .hero h1{font-size:2.2rem}
    .section{padding:40px 0}
}
.burger{
    display: none;
}