/* =========================================================
   style.css  |  Visión Consulting
   Futurist + Biomorphic design system
   ========================================================= */

/* -------- Root Tokens -------- */
:root{
    --clr-primary: #ff6b00;          /* vibrante naranja */
    --clr-primary-dark: #c95100;
    --clr-accent:  #00c9ff;          /* complementario azul-cyan */
    --clr-accent-dark:#0092ba;
    --clr-bg-dark:#0b0d17;
    --clr-bg-light:#f5f7fa;
    --clr-text-light:#ffffff;
    --clr-text-dark:#222222;

    --radius-rounded:18px;
    --radius-pill:999px;

    --shadow-elev-1:0 4px 10px rgba(0,0,0,0.15);
    --shadow-elev-2:0 8px 24px rgba(0,0,0,0.20);

    --trans-fast:150ms ease-in-out;
    --trans-med:300ms cubic-bezier(.4,0,.2,1);
}

/* -------- Base Typography -------- */
html{
    box-sizing:border-box;
    scroll-behavior:smooth;
}
*,*:before,*:after{box-sizing:inherit;}

body{
    font-family:'Nunito',Helvetica,Arial,sans-serif;
    color:var(--clr-text-dark);
    background:var(--clr-bg-light);
    line-height:1.6;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
    font-family:'Oswald',Arial,sans-serif;
    font-weight:600;
    color:var(--clr-text-dark);
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* Section defaults */
section{
    padding:4rem 0;
}
section[data-dark="true"],
.hero{
    color:var(--clr-text-light);
}

/* =========================================================
   GLOBAL COMPONENTS
   ========================================================= */

/* ---- Buttons ---- */
.btn,
button,
input[type='submit']{
    font-family:'Oswald',sans-serif;
    display:inline-block;
    background:var(--clr-primary);
    color:var(--clr-text-light);
    border:none;
    border-radius:var(--radius-pill);
    padding:.75rem 2.5rem;
    cursor:pointer;
    transition:background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
    box-shadow:var(--shadow-elev-1);
    text-transform:uppercase;
    letter-spacing:.5px;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-primary-dark);
    box-shadow:var(--shadow-elev-2);
    transform:translateY(-2px);
}
.btn:active{
    transform:translateY(0);
}

/* Outline variant */
.btn--outline{
    background:transparent;
    border:2px solid var(--clr-primary);
    color:var(--clr-primary);
}
.btn--outline:hover{
    background:var(--clr-primary);
    color:var(--clr-text-light);
}

/* ---- Links ---- */
a{
    color:var(--clr-accent);
    text-decoration:none;
    transition:color var(--trans-fast);
}
a:hover{
    color:var(--clr-accent-dark);
    text-decoration:underline;
}

/* "Leer más" links */
.read-more{
    font-weight:700;
    position:relative;
}
.read-more::after{
    content:'→';
    margin-left:.4rem;
    transition:transform var(--trans-fast);
}
.read-more:hover::after{
    transform:translateX(4px);
}

/* ---- Navigation ---- */
.navbar{
    backdrop-filter:blur(12px);
    background:rgba(255,255,255,0.85);
    transition:background var(--trans-fast);
}
.navbar.is-transparent{
    background:transparent;
}
.navbar-item{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:.5px;
}
/* Active burger */
.navbar-burger span{
    background:var(--clr-primary);
}

/* ---- Hero ---- */
.hero{
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
.hero .title,
.hero .subtitle{
    color:var(--clr-text-light)!important;
}
.hero .button{
    margin-top:1.5rem;
}

/* ---- Cards ---- */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-radius:var(--radius-rounded);
    overflow:hidden;
    box-shadow:var(--shadow-elev-1);
    background:#fff;
    transition:transform var(--trans-fast), box-shadow var(--trans-fast);
}
.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-elev-2);
}
.card-image,
.image-container{
    width:100%;
    height:220px;
    overflow:hidden;
    position:relative;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ---- Statistics Boxes ---- */
.box{
    border-radius:var(--radius-rounded);
}
.box .title{
    margin-bottom:.25rem;
}

/* ---- Timeline (Bulma override) ---- */
.timeline .timeline-header .tag{
    border-radius:var(--radius-pill);
}

/* ---- Accordion ---- */
.message-header{
    cursor:pointer;
    user-select:none;
}
.toggle-accordion{
    background:transparent;
    border:none;
    color:inherit;
}

/* ---- Parallax Utility ---- */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}

/* ---- Glassmorphism Utility ---- */
.glass{
    background:rgba(255,255,255,0.25);
    backdrop-filter:blur(12px);
    border-radius:var(--radius-rounded);
}

/* =========================================================
   BIOMORPHIC MORPHING ANIMATIONS
   ========================================================= */
@keyframes blobMorph{
    0%   {border-radius:42% 58% 35% 65% / 50% 48% 52% 50%;}
    33%  {border-radius:55% 45% 60% 40% / 40% 60% 40% 60%;}
    66%  {border-radius:30% 70% 45% 55% / 60% 40% 60% 40%;}
    100% {border-radius:42% 58% 35% 65% / 50% 48% 52% 50%;}
}
.blob{
    width:320px;
    height:320px;
    background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent));
    animation:blobMorph 12s infinite linear;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.footer{
    background:var(--clr-bg-dark);
    color:var(--clr-text-light);
    padding:3rem 1.5rem;
}
footer a{
    color:var(--clr-accent);
}
footer a:hover{
    color:var(--clr-accent-dark);
}

/* Social links text style */
.social-link,
footer ul li a{
    display:inline-block;
    position:relative;
}
.social-link::after,
footer ul li a::after{
    content:'';
    position:absolute;
    left:0; bottom:-2px;
    width:0;
    height:2px;
    background:var(--clr-primary);
    transition:width var(--trans-fast);
}
.social-link:hover::after,
footer ul li a:hover::after{
    width:100%;
}

/* =========================================================
   PAGE-SPECIFIC ADJUSTMENTS
   ========================================================= */
body.success-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:linear-gradient(135deg,var(--clr-accent),var(--clr-primary));
    color:var(--clr-text-light);
    text-align:center;
}
body.legal-page{        /* privacy.html & terms.html */
    padding-top:100px;
}

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width:768px){
    section{padding:3rem 1rem;}
    .hero .title{font-size:2rem;}
}

/* =========================================================
   ANIMATIONS ON SCROLL (AOS Overrides)
   ========================================================= */
[data-aos]{
    will-change:transform,opacity;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.text-center{text-align:center!important;}
.mt-1{margin-top:1rem!important;}
.mb-1{margin-bottom:1rem!important;}
.pt-6{padding-top:6rem!important;}
.shadow-1{box-shadow:var(--shadow-elev-1);}
.shadow-2{box-shadow:var(--shadow-elev-2);}
.radius-rounded{border-radius:var(--radius-rounded);}