/* =========================================================
  BASE THEME VARIABLES : CORPORATE + NEO-BRUTALISM (TETRADA)
========================================================= */
:root{
    /* 4-point Tetrad Palette */
    --clr-primary:#004AAD;     /* Azul corporativo */
    --clr-secondary:#FF6B00;   /* Naranja vibrante  */
    --clr-accent-1:#00C49A;    /* Verde agua       */
    --clr-accent-2:#D8005F;    /* Magenta fuerte   */

    /* Neutral */
    --clr-dark:#111111;
    --clr-light:#FAFAFA;
    --clr-gray:#666666;

    /* Typography */
    --font-heading:'Manrope',sans-serif;
    --font-body:'Rubik',sans-serif;

    /* Shadows – estilo neo-brutalista */
    --shadow-neo:4px 4px 0 var(--clr-dark);
    --transition:.3s cubic-bezier(.25,1.25,.5,1.1); /* Up-spring */
}

/* =========================================================
  RESET & GENERIC
========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    color:var(--clr-dark);
    background:var(--clr-light);
    line-height:1.6;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:var(--clr-primary);transition:color .2s ease;}
a:hover{color:var(--clr-secondary);}
.container{width:90%;max-width:1200px;margin-inline:auto;}
.section-title{
    font-family:var(--font-heading);
    font-size:clamp(1.8rem,3vw,2.4rem);
    text-align:center;
    margin-bottom:2rem;
    position:relative;
    color:var(--clr-dark);
    text-shadow:1px 1px 3px rgba(0,0,0,.2);
}
/* =========================================================
  HEADER
========================================================= */
.header{
    position:sticky;top:0;z-index:1000;
    background:var(--clr-primary);
    color:#fff;
    box-shadow:var(--shadow-neo);
}
.logo{font-family:var(--font-heading);font-size:1.5rem;color:#fff;}
.nav{display:flex;justify-content:end;align-items:center;gap:2rem;}
.nav-list{display:flex;gap:1.5rem;list-style:none;}
.nav-list a{color:#fff;font-weight:500;}
.nav-list a:hover{color:var(--clr-secondary);}
.burger{display:none;background:none;border:none;flex-direction:column;gap:.3rem;cursor:pointer}
.burger span{width:24px;height:3px;background:#fff}

/* Responsive Nav */
@media(max-width:768px){
   .nav-list{position:fixed;inset:0 0 0 30%;flex-direction:column;padding-top:5rem;background:var(--clr-primary);transform:translateX(100%);transition:var(--transition)}
   .nav-list.open{transform:translateX(0)}
   .burger{display:flex}
}

/* =========================================================
  BUTTONS (GLOBAL)
========================================================= */
.btn,.btn-primary,.btn-secondary,button,input[type='submit']{
    display:inline-block;
    font-family:var(--font-heading);
    padding:.8rem 1.6rem;
    border:2px solid var(--clr-dark);
    background:var(--clr-secondary);
    color:#fff;
    cursor:pointer;
    box-shadow:var(--shadow-neo);
    transition:var(--transition);
}
.btn-primary{background:var(--clr-secondary);}
.btn-secondary{background:var(--clr-accent-1);}
button:hover,.btn:hover,input[type='submit']:hover{
    transform:translateY(-3px) scale(1.03);
}
/* Micro-interacción: Presionado */
button:active{transform:translateY(0);box-shadow:none}

/* =========================================================
  HERO
========================================================= */
.hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6rem 1rem 8rem;
    color:#fff;
    text-align:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
.hero-title{font-family:var(--font-heading);font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:1rem;}
.hero-text{max-width:720px;margin-inline:auto 2rem 2rem;font-size:1.1rem}
.hero-cta{margin-top:1.5rem}

/* =========================================================
  STATS
========================================================= */
.stats{padding:4rem 0}
.stats-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.stat-card{
    background:var(--clr-accent-1);
    color:#fff;
    padding:2rem;
    text-align:center;
    border:2px solid var(--clr-dark);
    box-shadow:var(--shadow-neo);
    border-radius:8px;
}
.stat-icon{font-size:2rem;display:block;margin-bottom:.5rem}
.stat-number{font-family:var(--font-heading);font-size:2rem;font-weight:700}

/* =========================================================
  PORTFOLIO
========================================================= */
.portfolio{padding:4rem 0}
.portfolio-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card{
    display:flex;flex-direction:column;align-items:center;
    background:var(--clr-light);
    border:2px solid var(--clr-dark);
    box-shadow:var(--shadow-neo);
    transition:var(--transition);
    text-align:center;
}
.card:hover{transform:translateY(-6px)}
.image-container{width:100%;height:260px;overflow:hidden}
.image-container img{width:100%;height:100%;object-fit:cover;margin:0 auto}
.card-content{padding:1.2rem}
.card-content h3{font-family:var(--font-heading);margin-bottom:.6rem;color:var(--clr-primary)}

/* =========================================================
  NEWS
========================================================= */
.news{padding:4rem 0;background:var(--clr-accent-2);color:#fff;}
.news-item{max-width:720px;margin:0 auto 2rem;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1rem}
.news-item h3{font-family:var(--font-heading);margin-bottom:.5rem}
.read-more{display:inline-block;margin-top:.5rem;color:var(--clr-accent-1);}
.read-more:hover{text-decoration:underline}

/* =========================================================
  RESOURCES
========================================================= */
.resources{padding:4rem 0}
.resource-list{display:grid;gap:1.5rem}
.resource-item{
    border:2px solid var(--clr-dark);padding:1rem 1.5rem;background:#fff;
    box-shadow:var(--shadow-neo);transition:var(--transition)
}
.resource-item:hover{background:var(--clr-secondary);color:#fff}

/* =========================================================
  METHODOLOGY
========================================================= */
.methodology{
    padding:4rem 0;
    color:#fff;
    background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
    text-align:center;
}
.methodology p{max-width:800px;margin-inline:auto 2rem}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.modal.active{opacity:1;pointer-events:auto}
.modal-content{background:#fff;padding:2rem;border:2px solid var(--clr-dark);box-shadow:var(--shadow-neo);max-width:480px}
.modal-close{margin-top:1rem}

/* =========================================================
  CLIENTELE
========================================================= */
.clientele{padding:4rem 0;background:var(--clr-primary);color:#fff;}
.clientele-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:center}
.client-logo{font-family:var(--font-heading);font-size:1.2rem;padding:1rem 0;border:2px solid #fff;box-shadow:var(--shadow-neo);background:rgba(255,255,255,.1)}

/* =========================================================
  CONTACT
========================================================= */
.contact{padding:4rem 0}
form{max-width:600px;margin:0 auto;display:grid;gap:1.2rem}
.form-group{display:flex;flex-direction:column}
label{font-weight:500;margin-bottom:.3rem}
input,textarea{
    padding:.8rem 1rem;border:2px solid var(--clr-dark);border-radius:4px;
    font-family:var(--font-body);
}
input:focus,textarea:focus{outline:none;border-color:var(--clr-secondary)}

/* =========================================================
  FOOTER
========================================================= */
.footer{
    background:var(--clr-dark);color:#fff;padding:2rem 0;text-align:center;
}
.footer a{color:var(--clr-accent-1);margin:0 .3rem}
.footer a:hover{color:var(--clr-secondary)}

/* Social text “icons” emphasis */
.footer-col:last-child a{font-weight:700}
.footer-col{margin-bottom:1rem}

/* =========================================================
  UTILITY
========================================================= */
.parallax{background-attachment:fixed}
.mt-2{margin-top:2rem}
.text-center{text-align:center}

/* =========================================================
  SUCCESS PAGE
========================================================= */
.page-success{
    min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
    background:var(--clr-accent-1);color:#fff;text-align:center;padding:2rem;
}
.page-success h1{font-family:var(--font-heading);font-size:2.5rem;margin-bottom:1rem}

/* =========================================================
  LEGAL PAGES (privacy / terms)
========================================================= */
.page-legal{padding-top:100px;padding-inline:1rem;max-width:900px;margin-inline:auto}

/* =========================================================
  ANIMATIONS – CUSTOM BOUNCE IN
========================================================= */
@keyframes bounce-in{
    0%{transform:scale(.5);opacity:0}
    60%{transform:scale(1.05);opacity:1}
    80%{transform:scale(.95)}
    100%{transform:scale(1)}
}
.animate-bounce-in{animation:bounce-in .8s var(--transition) both}

/* =========================================================
  MEDIA QUERIES
========================================================= */
@media(max-width:600px){
    .hero{padding:4rem 1rem 6rem}
    .section-title{font-size:1.6rem}
}
.burger{
    display: none;
}