/* =====================================================================
   GLOBAL VARIABLES  |  Corporate + Dynamic Gradients (Neutral Scheme)
===================================================================== */
:root{
    /* Gray Scale ----------------------------------------------------------------- */
    --clr-dark-900:#111111;
    --clr-dark-700:#222222;
    --clr-dark-500:#333333;
    --clr-dark-300:#555555;
    --clr-light-100:#FAFAFA;
    --clr-light-50:#FFFFFF;

    /* Brand & Accent ------------------------------------------------------------- */
    --clr-brand:#4FC3F7;               /* Azul corporativo */
    --clr-brand-dark:#039BE5;
    --clr-accent:#FFB74D;              /* Naranja acento   */
    --clr-accent-dark:#FF9800;

    /* Gradients ------------------------------------------------------------------ */
    --gradient-brand:linear-gradient(135deg,var(--clr-brand) 0%,var(--clr-brand-dark) 100%);
    --gradient-accent:linear-gradient(135deg,var(--clr-accent) 0%,var(--clr-accent-dark) 100%);
    --gradient-neutral:linear-gradient(135deg,#ECEFF1 0%,#CFD8DC 100%);

    /* Typography ----------------------------------------------------------------- */
    --ff-heading:'Montserrat',sans-serif;
    --ff-body:'Merriweather',serif;

    --fs-h1:clamp(2.2rem,5vw,3.5rem);
    --fs-h2:clamp(1.8rem,4vw,2.5rem);
    --fs-h3:1.4rem;
    --fs-body:1rem;

    /* Shadows -------------------------------------------------------------------- */
    --shadow-soft:0 4px 12px rgba(0,0,0,.08);
    --shadow-medium:0 8px 24px rgba(0,0,0,.12);

    /* Radius --------------------------------------------------------------------- */
    --radius:8px;

    /* Elastic Animation Timing --------------------------------------------------- */
    --ease-elastic:cubic-bezier(0.68,-0.6,0.32,1.6);
}

/* =====================================================================
   BASE
===================================================================== */
html{scroll-behavior:smooth;}
body{
    font-family:var(--ff-body);
    color:var(--clr-dark-700);
    line-height:1.6;
    background:var(--clr-light-100);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    color:var(--clr-dark-900);
    line-height:1.2;
    margin:0 0 .5em;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}

p{margin:0 0 1.25rem;font-size:var(--fs-body);}
a{color:var(--clr-brand-dark);text-decoration:none;transition:color .3s;}
a:hover,a:focus{color:var(--clr-accent-dark);}

.container{
    width:min(90%,1200px);
    margin-inline:auto;
}

/* =====================================================================
   BUTTONS  (GLOBAL)
===================================================================== */
.btn,
button,
input[type='submit']{
    display:inline-block;
    padding:.75rem 2rem;
    border-radius:var(--radius);
    font-family:var(--ff-heading);
    font-weight:600;
    font-size:clamp(.9rem,2.5vw,1rem);
    cursor:pointer;
    transition:all .4s var(--ease-elastic);
    border:none;
    text-align:center;
}
.btn.primary{background:var(--gradient-brand);color:var(--clr-light-50);}
.btn.outline{
    background:transparent;
    color:var(--clr-brand-dark);
    border:2px solid var(--clr-brand-dark);
}
.btn.primary:hover,
.btn.primary:focus{
    transform:translateY(-3px);
    box-shadow:var(--shadow-medium);
}
.btn.outline:hover,
.btn.outline:focus{
    background:var(--gradient-brand);
    color:var(--clr-light-50);
    transform:translateY(-3px);
}

/* Link estilo 'Leer más' */
.read-more{
    font-weight:600;
    position:relative;
}
.read-more::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:2px;
    background:var(--clr-accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s var(--ease-elastic);
}
.read-more:hover::after{transform:scaleX(1);}

/* =====================================================================
   HEADER
===================================================================== */
.main-header{
    position:sticky;top:0;z-index:1000;
    background:var(--clr-light-50);
    box-shadow:0 2px 4px rgba(0,0,0,.06);
}
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.75rem 0;
}
.logo{
    font-family:var(--ff-heading);
    font-weight:800;
    color:var(--clr-dark-900);
    font-size:1.4rem;
}
.nav-links{
    display:flex;
    gap:1.5rem;
    list-style:none;
}
.nav-links a{font-weight:600;}
.burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
}
.burger span{
    width:24px;height:3px;background:var(--clr-dark-700);border-radius:2px;
}

/* Responsive Nav */
@media (max-width:900px){
    .nav-links{position:fixed;inset:0 0 0 40%;background:var(--clr-light-50);
        flex-direction:column;padding-top:5rem;transform:translateX(100%);transition:transform .5s;}
    .nav-links.open{transform:translateX(0);}
    .burger{display:flex;}
}

/* =====================================================================
   HERO
===================================================================== */
.hero{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6rem 0;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    position:relative;
}
.hero::before{ /* glass overlay */
    content:'';
    position:absolute;
    inset:0;
    /* Gradient overlay for readability */
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
}
.hero-content{
    position:relative;
    z-index:1;
    text-align:center;
    color:#FFFFFF;
}
.hero-title{color:#FFFFFF;margin-bottom:1rem;}
.hero-subtitle{color:#E0E0E0;margin-bottom:2rem;}

/* =====================================================================
   SECTIONS
===================================================================== */
section{padding:4rem 0;}
.stats-grid,
.pricing-cards,
.news-grid,
.resources-links,
.partners-logos{
    display:grid;
    gap:2rem;
}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center;}
.pricing-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.news-grid,
.resources-links{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.partners-logos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:center;}

/* =====================================================================
   CARD STYLE
===================================================================== */
.card{
    background:var(--clr-light-50);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:transform .4s var(--ease-elastic),box-shadow .4s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-medium);}
.card-image,
.image-container{
    width:100%;
    height:220px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img,
.image-container img{
    width:100%;height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content{padding:1.5rem;}

/* =====================================================================
   STATISTICS
===================================================================== */
.stat-number{
    font-family:var(--ff-heading);
    font-size:2.5rem;
    color:var(--clr-brand-dark);
    display:block;
}
.stat-label{font-weight:600;}

/* =====================================================================
   TIMELINE + CALENDAR
===================================================================== */
.timeline{
    border-left:3px solid var(--clr-brand-dark);
    margin:2rem auto;
    max-width:700px;
}
.timeline-item{
    position:relative;
    padding-left:2rem;
    margin-bottom:1.5rem;
}
.timeline-item::before{
    content:'';
    position:absolute;
    left:-10px;top:0;
    width:15px;height:15px;
    background:var(--clr-brand-dark);
    border-radius:50%;
}
.timeline-date{font-weight:700;color:var(--clr-dark-500);margin-bottom:.25rem;}

.calendar{margin-top:3rem;}
.calendar-header{
    background:var(--gradient-brand);
    color:var(--clr-light-50);
    padding:.75rem;border-radius:var(--radius) var(--radius) 0 0;
    font-family:var(--ff-heading);font-weight:700;text-align:center;
}
.calendar-table{
    width:100%;border-collapse:collapse;
}
.calendar-table th,
.calendar-table td{
    border:1px solid var(--clr-dark-300);
    padding:.5rem;
    text-align:center;
}
.event-day{background:var(--clr-accent);color:var(--clr-light-50);font-weight:700;}

/* =====================================================================
   FAQ
===================================================================== */
details{background:var(--clr-light-50);border-radius:var(--radius);padding:1rem;margin-bottom:1rem;
    box-shadow:var(--shadow-soft);cursor:pointer;}
details[open]{animation:drop .5s var(--ease-elastic);}
summary{font-weight:700;list-style:none;}

/* Elastic dropdown */
@keyframes drop{
    from{transform:scaleY(0);}
    to{transform:scaleY(1);}
}

/* =====================================================================
   CONTACT FORM
===================================================================== */
.contact-section form{
    max-width:600px;
    margin:2rem auto;
    display:grid;
    gap:1rem;
}
.form-group{display:flex;flex-direction:column;}
input[type='text'],
input[type='email'],
textarea{
    padding:.75rem 1rem;
    border:1px solid var(--clr-dark-300);
    border-radius:var(--radius);
    font-family:var(--ff-body);
    resize:vertical;
    transition:border-color .3s;
}
input:focus,
textarea:focus{
    outline:none;
    border-color:var(--clr-brand-dark);
}

/* =====================================================================
   FOOTER
===================================================================== */
.main-footer{
    background:var(--clr-dark-900);
    color:var(--clr-light-50);
    padding:2.5rem 0;
    font-size:.9rem;
}
.footer-content{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
}
.footer-column{flex:1 1 200px;}
.footer-column h3{color:var(--clr-light-50);margin-bottom:.5rem;text-align:left;}
.main-footer a{color:var(--clr-brand);text-decoration:none;}
.main-footer a:hover{color:var(--clr-accent);text-decoration:underline;}

/*  Social link underline effect */
.main-footer a{position:relative;}
.main-footer a::after{
    content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;
    background:currentColor;transform:scaleX(0);transition:transform .3s;
}
.main-footer a:hover::after{transform:scaleX(1);}

/* =====================================================================
   PAGE SPECIFIC
===================================================================== */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--gradient-neutral);
}
.legal-page{/* privacy & terms */
    padding-top:100px;
}
.hero-privacy, .hero-terms{/* ensure readable banner for legal pages if used */
    background-size:cover;background-repeat:no-repeat;
}
.parallax{
    background-attachment:fixed;
}
.glass{
    background:rgba(255,255,255,.2);
    box-shadow:0 8px 32px rgba(31,38,135,.37);
    backdrop-filter:blur(7px);
}

/* =====================================================================
   MEDIA QUERIES
===================================================================== */
@media (max-width:600px){
    h1{font-size:1.8rem;}
    h2{font-size:1.5rem;}
    .hero{padding:4rem 0;}
}

/* =====================================================================
   UTILITIES
===================================================================== */
.text-center{text-align:center;}
.mb-0{margin-bottom:0;}
.mt-2{margin-top:2rem;}
.pt-6{padding-top:6rem;}
/*  etc. */

.gallery-grid img {
    width: 100%;
    object-fit: cover;
}