/* =====================================================
   Optima Asesoría Empresarial · style.css
   Diseño: Futurista + Asimétrico · Esquema: Pastel
   Tipografías: Roboto (headings) / Lato (body)
   ===================================================== */

/* -------------------- CSS Variables ------------------ */
:root {
    /* Brand Pastel Palette */
    --clr-primary: #7DDCD3;          /* pastel aqua */
    --clr-primary-dark: #3EBBB0;
    --clr-secondary: #F9C49A;        /* pastel peach */
    --clr-secondary-dark: #E79A63;
    --clr-accent: #B4A7FF;           /* pastel lilac */
    --clr-accent-dark: #8C7BFF;
    --clr-neutral-100: #FFFFFF;
    --clr-neutral-900: #222222;
    --clr-text: #333333;
    --clr-muted: #666666;
    --gradient-overlay: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4));

    /* Shadows & Blur (Glassmorphism) */
    --glass-bg: rgba(255,255,255,0.2);
    --glass-blur: 15px;

    /* Spacing */
    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 24px;

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

    /* Font Sizes */
    --fs-h1: clamp(2rem, 5vw + 1rem, 3.75rem);
    --fs-h2: clamp(1.75rem, 3vw + 1rem, 2.5rem);
    --fs-h3: 1.5rem;
    --fs-body: 1rem;
}

/* -------------------- Global Resets ------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: var(--fs-body);
    color: var(--clr-text);
    background-color: var(--clr-neutral-100);
    line-height: 1.6;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
    margin: 0 0 var(--space-sm);
    font-family: 'Roboto', sans-serif;
    line-height: 1.2;
    color: var(--clr-neutral-900);
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,.15);
}
.section-title { font-size: var(--fs-h2); margin-bottom: var(--space-md); }

/* -------------------- Layout Helpers ----------------- */
.container {
    width: min(1200px, 90%);
    margin-inline: auto;
}
.flex          { display: flex; }
.align-center  { align-items: center; }
.justify-between{ justify-content: space-between; }
.grid          { display: grid; gap: var(--space-md); }
.is-two-thirds { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }

/* -------------------- Header & Nav ------------------- */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    padding: var(--space-sm) 0;
}
.logo { font-weight: 700; color: var(--clr-neutral-900); text-decoration: none; }
.main-nav { transition: var(--transition-fast); }
.nav-list { list-style: none; margin:0; padding:0; display:flex; gap: var(--space-sm); }
.nav-list a {
    text-decoration: none; color: var(--clr-neutral-900); padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}
.nav-list a:hover,
.nav-list a:focus { background: var(--clr-primary); color: var(--clr-neutral-100); }

/* Burger (mobile) */
.burger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:4px;}
.burger-line { width:24px; height:3px; background:var(--clr-neutral-900); transition:var(--transition-fast);}

/* -------------------- Buttons ------------------------ */
.btn,
button,
input[type='submit'] {
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    padding: .75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight:500;
    transition: var(--transition-fast);
}
.btn-primary  { background: var(--clr-primary); color: var(--clr-neutral-100); }
.btn-secondary{ background: var(--clr-accent);  color: var(--clr-neutral-100); }
.btn-primary:hover,
.btn-primary:focus { background: var(--clr-primary-dark); }
.btn-secondary:hover,
.btn-secondary:focus { background: var(--clr-accent-dark); }

/* -------------------- Hero --------------------------- */
.hero-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    color: var(--clr-neutral-100);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.hero-content {
    width:100%;
    text-align:center;
    padding: var(--space-lg) var(--space-sm);
    max-width: 800px;
    margin: 0 auto;
}
.hero-slider {
    position:absolute; inset:0;
    z-index:-1;
}
.slide {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    animation: slideFade 20s infinite ease-in-out;
    opacity:0;
}
.slide:nth-child(1){animation-delay:0s}
.slide:nth-child(2){animation-delay:6.7s}
.slide:nth-child(3){animation-delay:13.4s}

@keyframes slideFade {
    0%{opacity:0;}
    8%,30%{opacity:1;}
    38%,100%{opacity:0;}
}

/* -------------------- About Us ----------------------- */
.about-section p { text-align: justify; max-width: 720px; margin: 0 auto var(--space-md); }
.gallery { display:grid; gap:var(--space-sm); grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.image-container {
    height: 250px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.image-container img{
    width:100%; height:100%; object-fit:cover; display:block; margin:0 auto;
}

/* -------------------- Statistics --------------------- */
.stats-section {
    padding: var(--space-lg) 0;
    background: var(--clr-secondary);
    background-image: var(--gradient-overlay), url('../image/stats-background.jpg');
    background-size: cover; background-repeat: no-repeat;
}
.stats-grid {
    display:grid;
    gap:var(--space-md);
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}
.stat-number { font-size:2.5rem; font-weight:700; color:var(--clr-neutral-100); }
.stat-card {
    display:flex; flex-direction:column; align-items:center;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    padding:var(--space-sm);
    border-radius:var(--radius-lg);
    color:var(--clr-neutral-100);
    text-align:center;
}
.stat-card img { width:120px; height:120px; object-fit:cover; border-radius:50%; margin-bottom:var(--space-sm); }

/* -------------------- Webinars ----------------------- */
.webinars-section .carousel {
    display:grid; gap:var(--space-md);
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}
.card {
    display:flex; flex-direction:column; align-items:center;
    background: var(--clr-neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    text-align:center;
}
.card:hover { transform:translateY(-6px); box-shadow:0 8px 24px rgba(0,0,0,.08);}
.card-image{ width:100%; height:200px; overflow:hidden; border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);}
.card-image img{ width:100%; height:100%; object-fit:cover; margin:0 auto;}
.card-content{ padding: var(--space-sm); display:flex; flex-direction:column; gap:var(--space-sm);}
.switch{
    align-self:center;
    background:transparent;
    padding:.5rem 1rem;
    border:2px solid var(--clr-accent);
    color:var(--clr-accent-dark);
    border-radius:var(--radius-sm);
}
.switch:hover{background:var(--clr-accent);color:var(--clr-neutral-100);}

/* -------------------- Events Calendar ---------------- */
.events-section{
    background-size:cover; background-repeat:no-repeat; background-attachment:fixed;
    color:var(--clr-neutral-100);
    padding: var(--space-lg) var(--space-sm);
    text-align:center;
}
#calendar{
    margin-top:var(--space-md);
    display:grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
    gap:var(--space-xs);
}
#calendar div{
    padding:var(--space-xs);
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-sm);
    height: 80px;
}

/* -------------------- External Resources ------------- */
.resources-grid {
    display:grid; gap:var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
}
.resources-section .card-content a{
    color:var(--clr-primary-dark);
    font-weight:600;
    text-decoration:none;
}
.resources-section .card-content a:hover{ text-decoration:underline; }

/* -------------------- Contact ------------------------ */
.contact-section{
    padding:var(--space-lg) var(--space-sm);
    background:var(--clr-neutral-100);
}
.contact-form{
    margin-top:var(--space-md);
    display:grid;
    gap:var(--space-sm);
    max-width:600px;
    margin-inline:auto;
}
.form-group { display:flex; flex-direction:column; }
label{ margin-bottom:var(--space-xs); font-weight:600; }
input,textarea{
    padding:var(--space-xs);
    border:2px solid var(--clr-primary);
    border-radius:var(--radius-sm);
    font-family:'Lato',sans-serif;
    transition:border var(--transition-fast);
}
input:focus,textarea:focus{ outline:none; border-color:var(--clr-primary-dark); }

/* -------------------- Footer ------------------------- */
.site-footer{
    background: var(--clr-primary-dark);
    color: var(--clr-neutral-100);
    padding: var(--space-lg) var(--space-sm);
}
.footer-grid{ display:grid; gap:var(--space-md); grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.site-footer a{
    color: var(--clr-neutral-100);
    text-decoration:none;
    transition: color var(--transition-fast);
}
.site-footer a:hover{color: var(--clr-secondary);}
.copy{ text-align:center; margin-top:var(--space-md); font-size:.875rem; }

/* Social Links (text only) */
.footer-column ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-xs);}
.footer-column h3{ color:var(--clr-secondary);}

/* -------------------- Utility ------------------------ */
.bg-cover{ background-size:cover; background-repeat:no-repeat; }
.parallax{ background-attachment:fixed; }
.read-more{
    display:inline-block; margin-top:var(--space-xs);
    color:var(--clr-accent-dark); font-weight:600; text-decoration:none;
    position:relative; padding-right:1.25rem;
}
.read-more::after{
    content:'➜'; position:absolute; right:.25rem; top:0; transition:transform var(--transition-fast);
}
.read-more:hover::after{ transform:translateX(4px); }

/* -------------------- Success Page ------------------- */
.success-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:var(--space-sm);
    text-align:center;
}

/* -------------------- Stand-alone Pages -------------- */
.legal-page{
    padding-top:100px;
    padding-inline: var(--space-sm);
    max-width: 900px;
    margin-inline:auto;
}

/* -------------------- Media Queries ------------------ */
@media (max-width: 992px){
    .burger{ display:flex; }
    .main-nav{ position:fixed; top:0; right:-100%; height:100%; width:280px; flex-direction:column;
        background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); padding:var(--space-lg) var(--space-md);}
    .main-nav.active{ right:0; }
    .nav-list{ flex-direction:column; gap:var(--space-md); }
}

/* -------------------- Non-linear Motion Animations --- */
@keyframes floatY {
    0%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}
@keyframes tilt {
    0%{transform:rotate(0deg);}
    50%{transform:rotate(2deg);}
    100%{transform:rotate(0deg);}
}
.card:hover{ animation:floatY 3s ease-in-out infinite; }
.image-container img:hover{ animation:tilt 4s ease-in-out infinite; }