/* =====================================================================
   Global Theme Variables – Pastel Neuromorphism + Curved Grids
===================================================================== */
:root{
    /* Palette */
    --clr-bg          : #F7F9FC;
    --clr-surface     : #ECEFF4;
    --clr-surface-dark: #DDE3EE;
    --clr-primary     : #8AB6F9;
    --clr-primary-dark: #5D8AE8;
    --clr-accent      : #FAB6C4;
    --clr-accent-dark : #F58A9F;
    --clr-text        : #333333;
    --clr-text-light  : #FFFFFF;
    /* Shadows */
    --shadow-neuro-in : inset 4px 4px 8px rgba(0,0,0,0.05),
                        inset -4px -4px 8px rgba(255,255,255,0.8);
    --shadow-neuro-out: 4px 4px 10px rgba(0,0,0,0.08),
                        -4px -4px 10px rgba(255,255,255,0.9);
    /* Grid curve */
    --curve-size: 60px;
    /* Typography */
    --font-head: 'Inter', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    /* Animation */
    --anim-draw: 1.6s cubic-bezier(.5,0,.5,1) forwards;
}
/* =====================================================================
   Basic Reset & Typography
===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--clr-bg);}
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--clr-text);
    line-height:1.6;
    background:var(--clr-bg);
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-head);
    font-weight:700;
    color:var(--clr-text);
    margin-bottom:.75rem;
    text-align:center;
}
p{margin-bottom:1.25rem;}
/* Prevent content overlap under fixed header */
.page-static-padding{padding-top:100px;} /* add to privacy.html & terms.html body */

/* =====================================================================
   Utility Classes
===================================================================== */
.curved-top{
    position:relative;
    padding-top:var(--curve-size);
}
.curved-top::before{
    content:'';
    position:absolute;
    top:0;left:0;width:100%;height:var(--curve-size);
    background:inherit;
    clip-path:ellipse(75% 100% at 50% 0%);
}
.curved-bottom{
    position:relative;
    padding-bottom:var(--curve-size);
}
.curved-bottom::after{
    content:'';
    position:absolute;
    bottom:0;left:0;width:100%;height:var(--curve-size);
    background:inherit;
    clip-path:ellipse(75% 100% at 50% 100%);
}
/* Glassmorphism helper */
.glassy{
    background:rgba(255,255,255,0.25);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:12px;
    box-shadow:var(--shadow-neuro-out);
}

/* =====================================================================
   Hero Section
===================================================================== */
#hero{
    position:relative;
    color:var(--clr-text-light);
}
#hero .title,#hero .subtitle{color:#ffffff;text-shadow:1px 1px 4px rgba(0,0,0,0.5);}
#hero .button{margin-top:1.5rem;}

/* =====================================================================
   Global Button Styles
===================================================================== */
.btn,
button,
input[type='submit']{
    font-family:var(--font-head);
    background:var(--clr-primary);
    color:var(--clr-text-light);
    border:none;
    padding:.75rem 1.5rem;
    border-radius:8px;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:var(--shadow-neuro-out);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-primary-dark);
    transform:translateY(-2px);
}
.btn:active,
button:active,
input[type='submit']:active{
    box-shadow:var(--shadow-neuro-in);
    transform:translateY(0);
}

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

/* =====================================================================
   Cards & Image Containers
===================================================================== */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--clr-surface);
    border-radius:16px;
    padding:1rem 1rem 1.5rem;
    box-shadow:var(--shadow-neuro-out);
    transition:transform .4s ease, box-shadow .4s ease;
}
.card:hover{
    transform:translateY(-6px);
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}
.card-image,
.image-container{
    width:100%;
    height:240px;
    overflow:hidden;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:1rem;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* =====================================================================
   Section Specific Enhancements
===================================================================== */
section.section{
    position:relative;
    padding:4rem 1.5rem;
}
#services{background:var(--clr-bg);}
#webinars{background:var(--clr-surface);}
#community{background:var(--clr-bg);}
#media{background:var(--clr-surface);}
#stories{background:var(--clr-bg);}
#contact{background:var(--clr-surface);}

/* Webinars progress overlap fix */
.progress{box-shadow:none;height:.6rem;border-radius:6px;}
.progress::-webkit-progress-value{background:var(--clr-accent);}
.progress::-moz-progress-bar{background:var(--clr-accent);}

/* =====================================================================
   Footer
===================================================================== */
footer.footer{
    background:var(--clr-surface-dark);
    color:var(--clr-text);
    padding:3rem 1rem;
}
footer a{color:var(--clr-primary-dark);transition:color .25s;}
footer a:hover{text-decoration:underline;color:var(--clr-accent-dark);}
footer .social-link{
    margin:0 .5rem;font-weight:600;
}

/* =====================================================================
   Drawn (Hand-Written) Animation
===================================================================== */
@keyframes drawn-line{
    from{stroke-dashoffset:1000;}
    to{stroke-dashoffset:0;}
}
.drawn-path{
    stroke:var(--clr-primary-dark);
    stroke-width:3;
    fill:none;
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:drawn-line var(--anim-draw);
}

/* =====================================================================
   Success Page Styles
===================================================================== */
.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    background:var(--clr-bg);
}
.page-success h1{color:var(--clr-primary-dark);}
.page-success .btn{margin-top:2rem;}

/* =====================================================================
   Responsiveness & Grid Helpers
===================================================================== */
@media(max-width:1024px){
    .columns.is-variable>.column.is-two-thirds{flex:0 0 100%;}
}
@media(max-width:768px){
    header.navbar{padding:1rem;}
    h1{font-size:1.75rem;}
    h2{font-size:1.5rem;}
}

/* =====================================================================
   Parallax & Background Helpers
===================================================================== */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
/* Ensure all background images behave correctly */
[data-prompt][style*="background-image"]{
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    position:relative;
}

/* =====================================================================
   Bulma Overrides / Harmony
===================================================================== */
.navbar{
    background:var(--clr-bg) !important;
    box-shadow:var(--shadow-neuro-out);
}
.navbar-item.button{
    padding-right:0;
}
.navbar-burger span{background:var(--clr-primary) !important;}

/* Form styling harmony */
.box{
    border-radius:16px;
    box-shadow:var(--shadow-neuro-out);
    background:var(--clr-surface);
}
.input,.textarea{
    border:none;
    border-radius:8px;
    padding:0.75rem;
    background:var(--clr-bg);
    box-shadow:var(--shadow-neuro-in);
    transition:box-shadow .3s ease;
}
.input:focus,.textarea:focus{
    outline:none;
    box-shadow:0 0 0 2px var(--clr-primary-dark);
}

/* =====================================================================
   Animations on Scroll (classes used by ScrollReveal)
===================================================================== */
[data-sr]{visibility:hidden;}
html.sr .scroll-reveal{visibility:visible;}
/* ScrollReveal will handle visibility itself, but keep placeholder */

/* =====================================================================
   Hover Accent for Cards Links
===================================================================== */
.card a:not(.button){
    color:var(--clr-primary-dark);
    font-weight:600;
}
.card a:not(.button):hover{color:var(--clr-accent-dark);}
    .columns:not(.is-desktop) {
        display: flex
;
        justify-content: center;
    }
    .navbar-burger{
        display: none;
    }