/*==================================================================
    GLOBAL DESIGN TOKENS
==================================================================*/
:root{
    /*----  Triadic Palette  ----*/
    --clr-primary:#2CA8C9;   /* Cian vibrante */
    --clr-secondary:#C92C6D; /* Magenta intenso */
    --clr-tertiary:#F5A623;  /* Naranja radiante */

    /*----  Darker Variants  ----*/
    --clr-primary-dark:#1D6A83;
    --clr-secondary-dark:#8A1F4C;
    --clr-tertiary-dark:#B36E13;

    /*----  Neutral  ----*/
    --clr-text:#222222;
    --clr-muted:#666666;
    --clr-light:#f2f4f7;
    --clr-white:#ffffff;

    /*----  Shadows (Neumorphism)  ----*/
    --neu-shadow:9px 9px 16px rgba(0,0,0,.15),
                 -9px -9px 16px rgba(255,255,255,.8);
    --neu-inset:inset 6px 6px 10px rgba(0,0,0,.2),
                inset -6px -6px 10px rgba(255,255,255,.7);

    /*----  Radius & Spacing  ----*/
    --radius:12px;
    --gutter:clamp(1rem,2vw,2rem);

    /*----  Typography  ----*/
    --ff-heading:'Raleway',sans-serif;
    --ff-body:'Open Sans',sans-serif;
}

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

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

body{
    font-family:var(--ff-body);
    color:var(--clr-text);
    background:var(--clr-light);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

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

.is-two-thirds{width:66%;}

.main-content section{padding:4rem 0;}

.section-title{
    font-family:var(--ff-heading);
    font-size:clamp(1.8rem,4vw,2.5rem);
    text-align:center;
    margin-bottom:2.5rem;
    text-shadow:1px 1px 3px rgba(0,0,0,.5);
}

/*==================================================================
    TYPOGRAPHY
==================================================================*/
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    color:var(--clr-primary-dark);
    font-weight:800;
    text-align:center;
}

p{margin-bottom:1rem;font-size:clamp(.95rem,1.5vw,1.05rem);}

/*==================================================================
    GLOBAL BUTTONS
==================================================================*/
.btn,
button,
input[type='submit']{
    display:inline-block;
    padding:.75rem 2rem;
    border:none;
    border-radius:var(--radius);
    background:var(--clr-secondary);
    color:var(--clr-white);
    font-weight:600;
    font-family:var(--ff-heading);
    cursor:pointer;
    box-shadow:var(--neu-shadow);
    transition:transform .3s cubic-bezier(.34,1.2,.68,1);
}
.btn-primary{background:var(--clr-secondary);}
.btn:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-4px) rotate(-1deg);
    box-shadow:0 6px 20px rgba(0,0,0,.2);
}

/*==================================================================
    HEADER
==================================================================*/
.header{
    position:fixed;
    top:0;left:0;width:100%;
    background:var(--clr-white);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    z-index:1000;
}
.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.8rem var(--gutter);
}
.logo{
    font-family:var(--ff-heading);
    font-size:1.4rem;
    font-weight:800;
    color:var(--clr-secondary-dark);
    text-decoration:none;
}
.nav ul{display:flex;gap:1.5rem;list-style:none;}
.nav a{
    text-decoration:none;
    color:var(--clr-text);
    font-weight:600;
}
.nav a:hover{color:var(--clr-secondary);}
.burger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:.25rem;
    background:none;
}
.burger span{
    width:24px;height:3px;
    background:var(--clr-text);
    transition:.3s;
}

/*===  Responsive Navigation  ===*/
@media(max-width:900px){
    .nav{position:fixed;inset:0 0 0 40%;background:var(--clr-white);transform:translateX(100%);transition:.4s;padding-top:5rem;}
    .nav.open{transform:translateX(0); margin-top: 60px;}
    .nav ul{flex-direction:column;align-items:flex-start;margin-left:var(--gutter);}
    .burger{display:flex;}
}

/*==================================================================
    HERO
==================================================================*/
.hero-section{
    min-height:80vh;
    display:flex;
    align-items:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
    color:var(--clr-white);
}
.hero-section::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
}
.hero-section .container{
    position:relative;
    z-index:1;
}
.hero-title{font-size:clamp(2rem,6vw,3.5rem);margin-bottom:1rem;color:#ffffff;}
.hero-text{color:#ffffff;margin-bottom:2rem;}

/*==================================================================
    SECTION LAYOUTS
==================================================================*/
.section-alt{background:var(--clr-white);}

.cards-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

/*==================================================================
    CARD
==================================================================*/
.card{
    background:var(--clr-light);
    border:3px solid var(--clr-primary);
    border-radius:var(--radius);
    box-shadow:var(--ne u-shadow);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:transform .4s cubic-bezier(.34,1.2,.68,1);
}
.card:hover{transform:translateY(-8px) rotate(1deg);}
.card-image{
    width:100%;
    height:200px;
    overflow:hidden;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
.card-content{padding:1.5rem;}

/*==================================================================
    TIMELINE
==================================================================*/
.timeline{
    list-style:none;
    position:relative;
    margin:2rem 0;
    padding-left:2rem;
}
.timeline::before{
    content:'';
    position:absolute;left:20px;top:0;bottom:0;
    width:4px;background:var(--clr-tertiary);
}
.timeline li{
    margin-bottom:2rem;
    position:relative;
}
.timeline-date{
    display:inline-block;
    background:var(--clr-tertiary);
    color:var(--clr-white);
    padding:.25rem .75rem;border-radius:var(--radius);
    font-weight:700;
    margin-bottom:.5rem;
}
.timeline-content{background:var(--clr-white);padding:1rem;border-radius:var(--radius);box-shadow:var(--neu-shadow);}

/*==================================================================
    SWITCHES
==================================================================*/
.switch{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-weight:600;
    margin-right:1.5rem;
}
.switch input{display:none;}
.switch .slider{
    width:46px;height:24px;
    background:var(--clr-muted);
    border-radius:12px;
    position:relative;
    cursor:pointer;
    transition:.3s;
}
.switch .slider::before{
    content:'';
    position:absolute;top:3px;left:3px;
    width:18px;height:18px;border-radius:50%;
    background:var(--clr-white);
    transition:.3s;
    box-shadow:var(--neu-shadow);
}
.switch input:checked + .slider{
    background:var(--clr-primary);
}
.switch input:checked + .slider::before{
    transform:translateX(22px);
}

/*==================================================================
    ACCORDION
==================================================================*/
details.accordion{
    margin-bottom:1rem;
    background:var(--clr-light);
    border:2px solid var(--clr-primary-dark);
    border-radius:var(--radius);
    box-shadow:var(--neu-shadow);
    padding:1rem;
}
details[open]{box-shadow:var(--neu-inset);}
details summary{
    font-weight:700;
    cursor:pointer;
    list-style:none;
    outline:none;
}
details p{margin-top:1rem;}

/*==================================================================
    FORMS
==================================================================*/
.contact-form{
    max-width:600px;
    margin:0 auto;
    display:grid;
    gap:1rem;
}
.form-row{display:flex;flex-direction:column;}
input,select,textarea{
    padding:.75rem 1rem;
    border-radius:var(--radius);
    border:2px solid var(--clr-muted);
    background:var(--clr-white);
    font-family:var(--ff-body);
}
input:focus,select:focus,textarea:focus{border-color:var(--clr-primary);outline:none;box-shadow:0 0 0 3px rgba(44,168,201,.25);}

/*==================================================================
    FOOTER
==================================================================*/
.footer{
    background:var(--clr-primary-dark);
    color:var(--clr-white);
    padding:3rem 0 2rem;
    text-align:center;
}
.footer-nav ul{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;}
.footer-nav a{
    color:var(--clr-white);
    text-decoration:none;
    font-weight:600;
}
.footer-nav a:hover{text-decoration:underline;}
.social a{
    color:var(--clr-tertiary);
    text-decoration:none;
    font-weight:700;
}
.social a:hover{color:var(--clr-white);}

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

/*==================================================================
    STATIC PAGES (PRIVACY / TERMS)
==================================================================*/
.page-static{padding-top:100px;}

/*==================================================================
    LINKS 'Leer más'
==================================================================*/
a.read-more{
    color:var(--clr-secondary);
    font-weight:700;
    text-decoration:none;
    position:relative;
}
a.read-more::after{
    content:'';
    position:absolute;left:0;bottom:-2px;
    width:100%;height:2px;background:var(--clr-secondary);
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s;
}
a.read-more:hover::after{transform:scaleX(1);}

/*==================================================================
    IMAGES & BACKGROUNDS
==================================================================*/
.bg-cover{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
.bg-dark-overlay{
    position:relative;
}
.bg-dark-overlay::before{
    content:'';
    position:absolute;inset:0;
    background:rgba(0,0,0,.5);
}

/*==================================================================
    NON-LINEAR MOTION ANIMATIONS
==================================================================*/
@keyframes floatNonLinear{
    0%{transform:translate(0,0) rotate(0deg);}
    25%{transform:translate(10px,-8px) rotate(1deg);}
    50%{transform:translate(-6px,14px) rotate(-1deg);}
    75%{transform:translate(8px,4px) rotate(0deg);}
    100%{transform:translate(0,0) rotate(0deg);}
}
.animate-float{
    animation:floatNonLinear 6s ease-in-out infinite;
}

/*==================================================================
    TRANSITIONS & EFFECTS
==================================================================*/
img, .card, .btn, input, textarea, select{
    transition:all .35s cubic-bezier(.25,.8,.25,1);
}

/*==================================================================
    SOCIAL ICONS PLACEHOLDER (TEXT ONLY)
==================================================================*/
.social a{
    position:relative;
    padding:.25rem .5rem;
}
.social a::before{
    content:'#';
    margin-right:.25rem;
    opacity:.5;
}

/*==================================================================
    MEDIA QUERIES
==================================================================*/
@media(max-width:600px){
    .section-title{text-align:left;margin-left:var(--gutter);}
    .timeline{padding-left:1rem;}
    .timeline::before{left:10px;}
    .footer-nav ul{flex-direction:column;gap:.75rem;}
}