/* ============================================================
   GLOBAL THEME VARIABLES – Split-Complementary Palette
   ============================================================ */
:root{
    --clr-bg:#f2f4f8;
    --clr-surface:#ecf0f3;
    --clr-surface-dark:#d9dde3;

    --clr-primary:#0f8b8d;          /* Verde azulado */
    --clr-primary-dark:#0c6d6e;

    --clr-accent-1:#ff9f1c;         /* Naranja brillante */
    --clr-accent-1-dark:#cc7f17;

    --clr-accent-2:#e71d36;         /* Rojo magenta */
    --clr-accent-2-dark:#b31529;

    --clr-text:#212121;
    --clr-text-light:#ffffff;

    --radius-s:8px;
    --radius-m:14px;

    --shadow-inset:inset 8px 8px 15px rgba(0,0,0,0.08),
                   inset -8px -8px 15px rgba(255,255,255,0.7);
    --shadow-raised:8px 8px 15px rgba(0,0,0,0.1),
                    -8px -8px 15px rgba(255,255,255,0.8);

    --transition-fast:all .25s ease;
    --transition-med:all .5s cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */
html,body{
    margin:0;
    padding:0;
    background:var(--clr-bg);
    color:var(--clr-text);
    font-family:'IBM Plex Sans', sans-serif;
    scroll-behavior:smooth;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Inter',sans-serif;
    font-weight:700;
    color:var(--clr-text);
    line-height:1.25;
    text-shadow:1px 1px 3px rgba(0,0,0,0.05);
}
p{line-height:1.7;}

section{padding:4rem 0;}

a{color:var(--clr-primary);transition:var(--transition-fast);}
a:hover{color:var(--clr-accent-1-dark);}

/* ============================================================
   BUTTONS (GLOBAL .btn & native button/input)
   ============================================================ */
.btn,
button,
input[type='submit']{
    background:var(--clr-primary);
    color:var(--clr-text-light);
    border:none;
    border-radius:var(--radius-s);
    padding:.75rem 1.5rem;
    font-weight:600;
    cursor:pointer;
    box-shadow:var(--shadow-raised);
    transition:var(--transition-med);
}
.btn.is-accent-1{background:var(--clr-accent-1);}
.btn.is-accent-2{background:var(--clr-accent-2);}
button:hover,
input[type='submit']:hover,
.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 20px rgba(0,0,0,0.12);
}
button:active,
input[type='submit']:active,
.btn:active{
    transform:translateY(0);
    box-shadow:var(--shadow-inset);
}

/* ============================================================
   HEADER & NAV
   ============================================================ */
header{
    background:var(--clr-surface);
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
    position:sticky;
    top:0;
    z-index:50;
}
.menu-mobile a{display:block;padding:.75rem 0;}
.navbar-burger span{background:var(--clr-text);}

/* ============================================================
   HERO
   ============================================================ */
#hero{
    position:relative;
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
#hero .title,
#hero .subtitle{color:#ffffff;}
#hero .button{background:var(--clr-accent-1);}

/* ============================================================
   NEOMORPHIC CARD & IMAGE HANDLING
   ============================================================ */
.neo-card{
    background:var(--clr-surface);
    border-radius:var(--radius-m);
    box-shadow:var(--shadow-raised);
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:var(--transition-med);
}
.neo-card:hover{
    transform:translateY(-6px);
}
.card-image,
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
    border-top-left-radius:var(--radius-m);
    border-top-right-radius:var(--radius-m);
    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{text-align:center;padding:1.5rem 1.25rem;width:100%;}

/* Brutalist accent border */
.neo-card::after{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    border:3px solid transparent;
    border-radius:var(--radius-m);
    transition:var(--transition-fast);
    pointer-events:none;
}
.neo-card:hover::after{
    border-color:var(--clr-accent-2);
}

/* ============================================================
   TOGGLE SWITCH (Vision section)
   ============================================================ */
.switch:checked + label{
    color:var(--clr-accent-1-dark);
    font-weight:600;
}

/* ============================================================
   FAQ ACCORDION (basic) – Brutal lines
   ============================================================ */
#faq .card{
    border:2px dashed var(--clr-accent-1-dark);
}

/* ============================================================
   READ-MORE LINKS
   ============================================================ */
.read-more{
    font-weight:600;
    position:relative;
}
.read-more::after{
    content:'→';
    margin-left:.25rem;
    transition:var(--transition-fast);
}
.read-more:hover::after{margin-left:.5rem;}

/* ============================================================
   SOCIAL LINKS (TEXT-ONLY STYLES)
   ============================================================ */
footer a{
    color:var(--clr-accent-2);
    font-weight:600;
}
footer a:hover{color:var(--clr-accent-2-dark);}
.social-link{position:relative;padding-left:1rem;}
.social-link::before{
    content:'#';
    position:absolute;left:0;
    color:var(--clr-accent-1-dark);
}

/* ============================================================
   SUCCESS PAGE
   ============================================================ */
.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--clr-primary-dark),var(--clr-primary));
    color:#ffffff;
    flex-direction:column;
    text-align:center;
}

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

/* ============================================================
   ANIMATIONS – Non-linear motions
   ============================================================ */
@keyframes floatUp{
    0%{transform:translateY(20px);opacity:0;}
    50%{transform:translateY(-10px);}
    100%{transform:translateY(0);opacity:1;}
}
[data-animate]{
    opacity:0;
    animation:floatUp .9s cubic-bezier(.22,1,.36,1) forwards;
}
[data-animate="delayed"]{animation-delay:.3s;}
[data-animate="delayed-2"]{animation-delay:.6s;}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center{text-align:center!important;}
.mt-6{margin-top:6rem!important;}
/* Parallax placeholder */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
/* Glassmorphism util */
.glass{
    backdrop-filter:blur(12px);
    background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.3);
    border-radius:var(--radius-m);
}

/* ============================================================
   BULMA OVERRIDES
   ============================================================ */
.button.is-primary{background:var(--clr-primary);border:none;}
.button.is-link{background:var(--clr-accent-2);}

/* Ensure Bulma hero text contrast */
.hero .title,
.hero .subtitle{color:#ffffff;text-shadow:1px 1px 4px rgba(0,0,0,0.6);}
.menu-mobile, .navbar-burger{
    display: none;
}