/* ───────────────────────── style.css ───────────────────────── */
/* ===================================================================
   Global Variables – Corporate Triad Palette + Typography
   =================================================================== */
:root{
    /* Core Triad Colors */
    --color-primary:#0057ff;            /* Azul corporativo */
    --color-secondary:#ff7a00;          /* Naranja de acento */
    --color-tertiary:#00b38f;           /* Verde dinámico */

    /* Dark / Light Variants */
    --color-primary-dark:#003bb3;
    --color-secondary-dark:#c25d00;
    --color-tertiary-dark:#008066;
    --color-light:#f5f7fa;
    --color-dark:#1a1a1a;

    /* Gradients */
    --gradient-primary:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
    --gradient-overlay:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55));

    /* Shadows & Borders */
    --shadow-soft:0 4px 14px rgba(0,0,0,0.08);
    --radius:8px;

    /* Timings */
    --transition-fast:0.2s;
    --transition-medium:0.35s;

    /* Fonts */
    --font-heading:'Inter',sans-serif;
    --font-body:'IBM Plex Sans',sans-serif;
}

/* ===================================================================
   Reset / Base
   =================================================================== */
html{scroll-behavior:smooth;}

body{
    font-family:var(--font-body);
    color:var(--color-dark);
    background-color:#ffffff;
    line-height:1.6;
}

/* Bulma Overrides – headings */
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    font-weight:700;
    color:#222222;
    text-align:center;
    margin-bottom:1rem;
    text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}

/* Utility Classes */
.text-center{text-align:center!important;}
.mt-6{margin-top:4rem!important;}
.pt-header{padding-top:100px!important;}/* for privacy & terms */

.bg-light{background-color:var(--color-light) !important;}
.bg-dark{background-color:var(--color-dark)!important;color:#ffffff!important;}

/* ===================================================================
   Buttons – Global
   =================================================================== */
.btn,
button,
input[type='submit']{
    display:inline-block;
    font-family:var(--font-heading);
    background:var(--gradient-primary);
    color:#ffffff;
    border:none;
    border-radius:var(--radius);
    padding:.75rem 2rem;
    cursor:pointer;
    transition:transform var(--transition-fast),box-shadow var(--transition-fast);
    box-shadow:var(--shadow-soft);
    text-decoration:none;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.btn:active,
button:active{
    transform:translateY(0);
}

/* “Leer más” Links */
.read-more{
    font-weight:600;
    color:var(--color-secondary);
    position:relative;
    transition:color var(--transition-fast);
}
.read-more::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:2px;
    background:var(--color-secondary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--transition-fast);
}
.read-more:hover{color:var(--color-secondary-dark);}
.read-more:hover::after{transform:scaleX(1);}

/* ===================================================================
   Navigation
   =================================================================== */
.navbar{
    background:#ffffff;
    box-shadow:var(--shadow-soft);
    position:sticky;
    top:0;
    z-index:990;
}
.navbar-item,
.navbar-burger{font-family:var(--font-heading);}
.navbar-burger span{background:var(--color-dark);}
.navbar-item.is-active,
.navbar-item:hover{color:var(--color-primary);}

/* ===================================================================
   Hero Section
   =================================================================== */
.hero{
    position:relative;
    overflow:hidden;
}
.hero .hero-body{
    position:relative;
    z-index:2;
}
.hero .title,
.hero .subtitle{color:#ffffff;}
.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gradient-overlay);
    z-index:1;
}

/* ===================================================================
   Cards & Flex Alignment (Strict Requirements)
   =================================================================== */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#ffffff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
    transition:transform var(--transition-medium),box-shadow var(--transition-medium);
}
.card:hover,
.item:hover,
.testimonial:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(0,0,0,.14);
}

/* Image Container – fixed height */
.card-image,
.image-container{
    width:100%;
    height:230px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ===================================================================
   Sections – Asymmetric Balance Helpers
   =================================================================== */
section.section:not(.hero){
    padding-top:4rem;
    padding-bottom:4rem;
}
section.section:nth-of-type(even){
    clip-path:polygon(0 0,100% 3%,100% 100%,0 97%); /* ligero ángulo para asimetría */
}
section.section:nth-of-type(odd){
    clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);
}
@media(max-width:1024px){
    section.section:nth-of-type(even),
    section.section:nth-of-type(odd){clip-path:none;}
}

/* ===================================================================
   Micro-Animations
   =================================================================== */
[data-aos]{transition:opacity .6s ease,transform .6s ease;}
/* Hover Lift for interactive panels */
.lift-on-hover:hover{transform:translateY(-6px);}

/* ===================================================================
   FAQ Accordion 
   =================================================================== */
.message{cursor:pointer;}
.message-header{background:var(--color-primary);color:#fff;}
.message-body{background:#ffffff;}
.message.is-info .toggle{margin-left:auto;background:transparent;border:none;color:#ffffff;}

/* ===================================================================
   Statistics Boxes
   =================================================================== */
.box{
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    background:#ffffff;
}
.box .title{color:var(--color-primary-dark);}
.box:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.10);}

/* ===================================================================
   Contact Form
   =================================================================== */
textarea.input,
textarea.textarea,
input.input{
    border:1px solid #d7dce1;
    border-radius:var(--radius);
    transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
input.input:focus,
textarea.textarea:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 2px rgba(0,87,255,0.15);
}

/* ===================================================================
   Footer
   =================================================================== */
.footer{
    padding:3rem 1.5rem;
}
.footer a{color:var(--color-light);}
.footer a:hover{color:var(--color-secondary);}
.footer .social-link{
    font-weight:600;
    margin:0 .5rem;
}

/* ===================================================================
   Success Page
   =================================================================== */
.hero.is-fullheight{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ===================================================================
   Background Helpers
   =================================================================== */
.bg-cover{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
.has-overlay::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gradient-overlay);
    z-index:0;
}

/* ===================================================================
   Parallax (simple)  */
.parallax{
    background-attachment:fixed;
}
@media(max-width:1024px){.parallax{background-attachment:scroll;}}

/* ===================================================================
   Glassmorphism Utility
   =================================================================== */
.glass{
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:var(--radius);
}

/* ===================================================================
   Responsive Grid Helpers
   =================================================================== */
@media (max-width:768px){
    .columns .column.is-two-thirds{flex:0 0 100%;max-width:100%;}
}

/* ===================================================================
   Scrollbar Styling (Webkit)
   =================================================================== */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:#f0f0f0;}
::-webkit-scrollbar-thumb{background:var(--color-primary-dark);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--color-primary);}

/* ===================================================================
   Animaciones Motion-One (ejemplo)
   =================================================================== */
@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.03);}
    100%{transform:scale(1);}
}
.pulse-animation{animation:pulse 8s ease-in-out infinite;}
.navbar-burger{
    display: none;
}