/* =========================================================
   GLOBAL THEME — VARIABLES
   ========================================================= */
:root{
    /* Primary Gradient */
    --c1:#1f75fe;      /* Azul vibrante   */
    --c2:#6f42c1;      /* Púrpura intenso */
    --c3:#ff416c;      /* Fucsia          */
    --c4:#ff4b2b;      /* Naranja vivo    */

    /* Glassmorphism */
    --glass-bg:rgba(255,255,255,0.15);
    --glass-brd:rgba(255,255,255,0.4);
    --glass-blur:18px;

    /* Neutrals */
    --text-dark:#222222;
    --text-light:#ffffff;
    --bg-body:#f6f7fb;
    --shadow:0 8px 24px rgba(0,0,0,0.15);

    /* Typography */
    --h-font:'Roboto', sans-serif;
    --t-font:'Lato',   sans-serif;
}

/* =========================================================
   BASIC RESET & TYPOGRAPHY
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--t-font);
    color:var(--text-dark);
    background:var(--bg-body);
    line-height:1.6;
}
h1,h2,h3,h4,h5,h6{font-family:var(--h-font); font-weight:700; color:var(--text-dark);}
.section{padding:4rem 1.5rem;}
.section .title{text-shadow:1px 1px 3px rgba(0,0,0,.15);}
a{color:var(--c2);transition:color .3s ease;}
a:hover{color:var(--c1);text-decoration:underline;}
.read-more{font-weight:600;position:relative;}
.read-more::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background:linear-gradient(90deg,var(--c1),var(--c3)); transition:width .3s ease;
}
.read-more:hover::after{width:100%;}

/* =========================================================
   GRADIENT BACKGROUNDS
   ========================================================= */
.gradient-bg{
    background:linear-gradient(135deg,var(--c1),var(--c3) 50%,var(--c2));
    color:var(--text-light);
}
.section-gradient{
    background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);
    color:var(--text-light);
}

/* =========================================================
   GLASSMORPHISM UTILITY
   ========================================================= */
.glass{
    background:var(--glass-bg);
    border:1px solid var(--glass-brd);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    box-shadow:var(--shadow);
    border-radius:18px;
}

/* =========================================================
   HERO
   ========================================================= */
#hero{position:relative;}
#hero .title,#hero .subtitle{color:var(--text-light);}
#hero .button{box-shadow:var(--shadow);}
@media screen and (max-width:768px){
    #hero .title{font-size:2rem;}
    #hero .subtitle{font-size:1rem;}
}

/* =========================================================
   NAVBAR (GLASS + GRADIENT BORDER )
   ========================================================= */
.navbar{
    background:var(--glass-bg);
    border-bottom:1px solid var(--glass-brd);
    backdrop-filter:blur(15px);
}
.navbar-item,.navbar-link{font-weight:600;color:var(--text-light);}
.navbar.is-transparent{background:linear-gradient(135deg,rgba(31,117,254,.9),rgba(111,66,193,.9));}
@media(max-width:1023px){.navbar-menu{background:var(--glass-bg);}}

/* =========================================================
   BUTTONS  (GLOBAL)
   ========================================================= */
.button,.btn,input[type="submit"]{
    font-family:var(--h-font);
    font-weight:600;
    border:none;
    border-radius:8px;
    transition:transform .25s ease,box-shadow .25s ease;
}
.button:hover,.btn:hover,input[type="submit"]:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,.18);
}

/* Custom Gradient Button */
.button.is-primary{
    background:linear-gradient(135deg,var(--c3),var(--c4));
    color:var(--text-light);
}
.button.is-primary:hover{background:linear-gradient(135deg,var(--c4),var(--c3));}

/* =========================================================
   CARD  (STRICT CENTERING)
   ========================================================= */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:none;
    box-shadow:var(--shadow);
    border-radius:16px;
    overflow:hidden;
    transition:transform .3s ease;
}
.card:hover{transform:translateY(-6px);}
.card-image,
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
}
.card-image img,
.image-container img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}

/* =========================================================
   PORTFOLIO  (GRID)
   ========================================================= */
#portfolio .columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:2rem;}
.carousel-item img{width:100%;height:400px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);}

/* =========================================================
   PRICING SECTION
   ========================================================= */
#pricing .card{background:linear-gradient(145deg,rgba(255,255,255,0.8),rgba(250,250,250,0.8));}
#pricing .card .title{color:var(--c2);}
#pricing .card ul{list-style:none;padding:1rem 0;}
#pricing .card ul li{padding:.3rem 0;}

/* =========================================================
   ACCOLADES, INSTRUCTORS  (GRID / FLEX)
   ========================================================= */
#accolades .columns,
#instructors .columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:2rem;}

/* =========================================================
   EVENTS  (MESSAGE COMPONENT OVERRIDES)
   ========================================================= */
.message{box-shadow:var(--shadow);}
.message-header{background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--text-light);}
.message-body{background:#fff;}

/* =========================================================
   CONTACT FORM
   ========================================================= */
#contact .box{
    padding:2.5rem;
    border-radius:18px;
}
input.input,textarea.textarea{
    border-radius:10px;
    border:1px solid rgba(0,0,0,.1);
    background:rgba(255,255,255,.8);
    transition:border-color .3s ease;
}
input.input:focus,textarea.textarea:focus{border-color:var(--c1);}

/* =========================================================
   FOOTER
   ========================================================= */
footer.footer{
    padding:3rem 1.5rem;
    background:linear-gradient(135deg,var(--c2),var(--c1));
}
footer a{color:var(--text-light);font-weight:600;}
footer a:hover{text-decoration:underline;color:#e0e0e0;}

/* =========================================================
   SOCIAL ICON STYLE (TEXT-ONLY)
   ========================================================= */
footer a::before{
    content:'→ ';
    font-weight:700;
    transition:transform .3s ease;
}
footer a:hover::before{transform:translateX(3px);}

/* =========================================================
   SUCCESS PAGE
   ========================================================= */
.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(135deg,var(--c1),var(--c3));
    color:var(--text-light);
}

/* =========================================================
   PRIVACY & TERMS PAGES (AVOID HEADER OVERLAP)
   ========================================================= */
.page-legal{padding-top:100px;}

/* =========================================================
   DRAWN ANIMATION (SCRIBBLE UNDERLINE)
   ========================================================= */
@keyframes scribble{
    0%{stroke-dashoffset:1000;}
    100%{stroke-dashoffset:0;}
}
.scribble-path{
    stroke:var(--c4);
    stroke-width:4;
    stroke-dasharray:1000;
    animation:scribble 2s ease forwards;
}

/* =========================================================
   PARALLAX (HERO IMAGE)
   ========================================================= */
@media(min-width:769px){
    #hero{background-attachment:fixed;}
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.text-center{text-align:center;}
.mb-1{margin-bottom:1rem;}
.mt-1{margin-top:1rem;}
.w-100{width:100%;}
/* Smooth Section Fade */
[data-aos]{opacity:0;transition-property:opacity,transform;}
[data-aos].aos-animate{opacity:1;}