/* =======================================================
   CONSULTORÍA+ • style.css
   Bright Neumorphic System  •  Curved Grids + Elastic UX
   ======================================================= */

/* ---------------------------- FONTS ---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Work+Sans:wght@300;400;500&display=swap');

/* ---------------------------- ROOT ----------------------------- */
:root{
 /* COLOR PALETTE — Bright & Accessible */
 --clr-primary: #00e676;          /* Lime / Main Accent */
 --clr-primary-dark: #00c46a;     /* Darker accent for hover */
 --clr-secondary: #ff4081;        /* Pink / Contrast Accent */
 --clr-secondary-dark:#d7376d;
 --clr-bg: #f0f4ff;               /* App background */
 --clr-surface: #e7ecff;          /* Card / surface */
 --clr-surface-alt:#ffffff;       /* Alternate surface */
 --clr-shadow-light: rgba(255,255,255,.7);
 --clr-shadow-dark: rgba(0,0,0,.12);
 --clr-text: #1b1e3c;
 --clr-text-muted:#526075;
 --clr-text-inverse:#ffffff;

 /* TYPOGRAPHY  */
 --ff-heading:'Poppins',sans-serif;
 --ff-body:'Work Sans',sans-serif;
 --fs-h1:clamp(2rem,6vw,3.5rem);
 --fs-h2:clamp(1.5rem,4vw,2.5rem);
 --fs-body:1rem;

 /* RADIUS & SHADOWS (Neumorphism) */
 --radius:16px;
 --shadow-elev: 9px 9px 15px var(--clr-shadow-dark),
               -9px -9px 15px var(--clr-shadow-light);
 --shadow-inset: inset 6px 6px 10px var(--clr-shadow-dark),
                 inset -6px -6px 10px var(--clr-shadow-light);

 /* SPACING */
 --space-1:.5rem;
 --space-2:1rem;
 --space-3:2rem;
}

/* ------------------------ GLOBAL RESET ------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
 font-family:var(--ff-body);
 font-size:var(--fs-body);
 color:var(--clr-text);
 background:var(--clr-bg);
 line-height:1.6;
 overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:var(--clr-primary);transition:color .25s ease}
a:hover{color:var(--clr-secondary)}
h1,h2,h3,h4,h5{font-family:var(--ff-heading);font-weight:700;line-height:1.2;color:var(--clr-text)}

/* -------------------------- UTILITIES -------------------------- */
.container{
 width:min(90%,1200px);
 margin-inline:auto;
}
.is-two-thirds{width:min(100%,760px)}
.text-center{text-align:center}
.mt-2{margin-top:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)}

/* ------------------------- NAVIGATION -------------------------- */
.header{
 position:fixed;top:0;left:0;width:100%;z-index:900;
 background:var(--clr-surface);box-shadow:0 3px 8px rgba(0,0,0,.05);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0}
.logo{font-family:var(--ff-heading);font-size:1.25rem;font-weight:700;color:var(--clr-primary)}
.burger{
 width:2rem;height:2rem;background:none;border:0;cursor:pointer;display:none;position:relative
}
.burger::before,.burger::after,.burger span{
 content:'';position:absolute;left:0;width:100%;height:3px;background:var(--clr-text);transition:.3s}
.burger::before{top:0}
.burger span{top:50%;transform:translateY(-50%)}
.burger::after{bottom:0}
.menu{display:flex;gap:1.5rem;list-style:none}
@media(max-width:768px){
 .burger{display:block}
 .menu{position:fixed;inset:0 0 0 auto;
        flex-direction:column;padding:4rem 2rem;background:var(--clr-surface);
        transform:translateX(100%);transition:.4s ease}
 .menu.open{transform:none}
}

/* -------------------------- SECTIONS --------------------------- */
.section{padding:5rem 0;position:relative}
.section.curved{
 background:var(--clr-surface);
 clip-path: ellipse(100% 70% at 50% 0%);
}
/* default heading alignment */
.section h2{text-align:center;font-size:var(--fs-h2);margin-bottom:var(--space-3)}

.hero{
 display:flex;align-items:center;justify-content:center;
 background-size:cover;background-repeat:no-repeat;background-position:center;
 color:var(--clr-text-inverse);
 padding:6rem 0;min-height:70vh; /* natural >=70vh not fixed pixel */
 text-align:center;position:relative;isolation:isolate;
}
.hero::after{
 content:'';position:absolute;inset:0;
 background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
 z-index:-1
}
.hero h1{font-size:var(--fs-h1);margin-bottom:var(--space-2);color:#fff}
.hero p{color:#fff;margin-bottom:var(--space-3)}
[data-motion]{opacity:0;transform:translateY(40px)}
/* elastic reveal */
@keyframes elasticIn{0%{opacity:0;transform:translateY(40px)}60%{transform:translateY(-10px)}100%{opacity:1;transform:none}}
[data-motion].active{animation:elasticIn .8s cubic-bezier(.6, -0.28, .735, .045) forwards}

/* ----------------------- BUTTONS GLOBAL ------------------------ */
.btn,.btn-primary,button,input[type='submit']{
 display:inline-block;padding:.75rem 2rem;border-radius:var(--radius);
 font-family:var(--ff-heading);font-size:1rem;font-weight:600;
 border:none;cursor:pointer;transition:.3s transform ease, .3s box-shadow ease;
 background:var(--clr-primary);color:var(--clr-text-inverse);box-shadow:var(--shadow-elev)
}
.btn-secondary{background:var(--clr-secondary)}
.btn:hover,.btn-primary:hover,button:hover,input[type='submit']:hover{
 transform:translateY(-2px);box-shadow:0 12px 20px -6px rgba(0,0,0,.25);
 background:var(--clr-primary-dark)
}
.btn-secondary:hover{background:var(--clr-secondary-dark)}

/* ------------------------- ACCORDION --------------------------- */
.accordion{margin-top:var(--space-2)}
.acc-btn{
 width:100%;padding:1rem;border:none;background:var(--clr-surface-alt);color: #000;
 border-radius:var(--radius);margin-bottom:var(--space-1);
 text-align:left;font-weight:600;box-shadow:var(--shadow-elev);cursor:pointer;
 transition:background .3s ease
}
.acc-btn:hover{background:var(--clr-surface)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 var(--space-2)}
.acc-panel p{padding:var(--space-1) 0}

/* ------------------------ PROGRESS BAR ------------------------- */
.progress-group{margin-top:var(--space-3)}
.label{font-weight:500;margin:var(--space-1) 0}
.progress{
 background:var(--clr-surface-alt);height:10px;border-radius:20px;overflow:hidden;
 box-shadow:inset 2px 2px 4px rgba(0,0,0,.06)
}
.progress span{
 display:block;height:100%;background:var(--clr-primary);
 animation:grow-bar 2s cubic-bezier(.68,-0.55,.27,1.55)
}
@keyframes grow-bar{from{width:0}}

/* --------------------------- CARDS ---------------------------- */
.card-grid{display:grid;gap:2rem;margin-top:3rem;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
 display:flex;flex-direction:column;align-items:center;
 background:var(--clr-surface);border-radius:var(--radius);
 box-shadow:var(--shadow-elev);padding:var(--space-2);text-align:center;
 transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s
}
.card:hover{transform:translateY(-6px) rotateX(3deg);box-shadow:0 14px 25px -6px rgba(0,0,0,.22)}
.card-image{width:100%;height:240px;overflow:hidden;border-radius:var(--radius)}
.card-image img{
 width:100%;height:100%;object-fit:cover;margin:0 auto;
 display:block
}
.card-content h3{margin-top:var(--space-2);font-size:1.25rem}
.card-content p{font-size:.95rem;color:var(--clr-text-muted);margin-top:.5rem}

/* ---------------------------- FORMS --------------------------- */
.form{
 display:grid;gap:var(--space-2);max-width:500px;margin-inline:auto;
 background:var(--clr-surface);padding:var(--space-3);border-radius:var(--radius);
 box-shadow:var(--shadow-inset)
}
input,textarea{
 width:100%;padding:.75rem;border:none;border-radius:var(--radius);
 background:var(--clr-surface-alt);box-shadow:var(--shadow-inset);
 font-family:var(--ff-body);resize:vertical
}
input:focus,textarea:focus{outline:2px solid var(--clr-primary)}

/* --------------------------- FOOTER --------------------------- */
.footer{
 background:var(--clr-surface-alt);padding:3rem 0;margin-top:var(--space-3);
 box-shadow:inset 0 5px 15px -8px rgba(0,0,0,.15)
}
.footer p{text-align:center;margin-bottom:var(--space-2);color:var(--clr-text-muted)}
.footer nav, .social{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.footer a{color:var(--clr-text);font-weight:500;position:relative}
.footer a::after{
 content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
 background:var(--clr-secondary);transition:.3s}
.footer a:hover::after{width:100%}

/* Social text links styled */
.social a{
 color:var(--clr-primary);font-weight:600
}
.social a:hover{color:var(--clr-secondary)}

/* -------------------- SUCCESS PAGE (full center) -------------- */
.center{
 min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
 text-align:center;padding:0 1rem
}

/* -------------------- PRIVACY & TERMS PADDING ----------------- */
body.page-simple main{padding-top:100px}

/* ----------------------- READ-MORE LINK ----------------------- */
.read-more{
 display:inline-block;margin-top:var(--space-1);color:var(--clr-secondary);
 font-weight:600;position:relative;padding-right:1.2rem
}
.read-more::after{
 content:'→';position:absolute;right:0;top:0;transition:transform .3s
}
.read-more:hover::after{transform:translateX(4px)}

/* ---------------------- IMAGE UTILITY ------------------------- */
.image-cover{
 background-size:cover;background-repeat:no-repeat;background-position:center
}

/* ----------------------- MOTION SCRIPT ------------------------ */
@media(prefers-reduced-motion:no-preference){
 constEls=document.querySelectorAll('[data-motion]');
 constEls.forEach(el=>{el.classList.add('active')})
}

/* ----------------------- RESPONSIVE TWEAKS -------------------- */
@media(max-width:576px){
 .nav .menu{gap:1rem}
 .section{padding:3.5rem 0}
 .hero{padding:4rem 0}
}

/* ----------------------- ACCORDION JS HOOK -------------------- */
/* (Keeps CSS self-contained for graceful degradation) */
.acc-btn[aria-expanded="true"]+.acc-panel{max-height:500px}

/* ------------------------- END FILE --------------------------- */

[data-motion] {
  opacity: 1;
  transform: none;
}