/* =========================================================
   CertiLab Academia — Builder Ready Template
   Estructura CSS pensada para futuro builder:
   01 Tokens 02 Base 03 Layout 04 Header 05 Components
   06 Sections 07 Pages 08 Utilities 09 Responsive
   ========================================================= */

/* 01. Design tokens */
:root{
  --cl-lime:#a8e600;
  --cl-lime-dark:#7fc400;
  --cl-ink:#171a21;
  --cl-muted:#636b78;
  --cl-soft:#f3f5f8;
  --cl-soft-2:#e9edf3;
  --cl-white:#ffffff;
  --cl-black:#1f1f1f;
  --cl-dark:#272727;
  --cl-border:#dfe5ee;
  --cl-blue:#4f9dff;
  --cl-purple:#a66cff;
  --cl-orange:#ff9800;
  --cl-red:#ff626c;
  --cl-green:#25d366;
  --cl-radius-sm:12px;
  --cl-radius-md:18px;
  --cl-radius-lg:26px;
  --cl-shadow-sm:0 10px 28px rgba(20,24,30,.08);
  --cl-shadow-md:0 18px 50px rgba(20,24,30,.12);
  --cl-container:min(1180px,92vw);
  --cl-font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cl-display:Impact,"Arial Black",sans-serif;
}

/* 02. Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f8fafc 0%,#f2f5f8 55%,#fff 100%);color:var(--cl-ink);font-family:var(--cl-font);line-height:1.48}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}img{max-width:100%;display:block}.site-shell{min-height:100vh;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 03. Layout primitives */
.container{width:var(--cl-container);margin-inline:auto}.section{padding:86px 0}.section--white{background:var(--cl-white)}.section--dark{background:var(--cl-dark);color:var(--cl-white)}.section--soft{background:var(--cl-soft)}.section--compact{padding:56px 0}.layout-split{display:grid;grid-template-columns:1.04fr .96fr;gap:72px;align-items:center}.layout-center{text-align:center}.grid{display:grid;gap:24px}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex{display:flex;gap:16px}.flex--wrap{flex-wrap:wrap}.flex--center{align-items:center}.flex--between{justify-content:space-between}

/* 04. Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(219,226,236,.92);box-shadow:0 8px 30px rgba(20,24,30,.08)}
.header-inner{width:min(1220px,94vw);margin-inline:auto;padding:12px 0;display:flex;align-items:center;gap:18px;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;min-width:210px}.brand-mark{width:52px;height:52px;border-radius:16px;background:var(--cl-lime);display:grid;place-items:center;font-weight:1000;color:#111;box-shadow:0 12px 26px rgba(168,230,0,.28)}.brand-title{font-weight:1000;font-size:24px;line-height:1}.brand-title span{color:var(--cl-lime-dark)}.brand-title small{font-size:.7em}.brand-subtitle{font-size:11px;letter-spacing:.18em;font-weight:900;color:#8891a0;margin-top:5px;text-transform:uppercase}.main-nav{display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:#f6f8fb;border:1px solid var(--cl-border)}.nav-link{padding:13px 15px;border-radius:999px;font-size:14px;font-weight:900;color:#333847;white-space:nowrap;transition:.22s ease}.nav-link:hover,.nav-link.active{background:#171b24;color:#fff;box-shadow:inset 0 -4px 0 var(--cl-lime)}.header-actions{display:flex;align-items:center;gap:10px}.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--cl-border);background:#fff;border-radius:14px;font-size:22px;font-weight:900;cursor:pointer}.header-cta{white-space:nowrap}

/* 05. Components */
.kicker{display:inline-flex;gap:10px;align-items:center;padding:7px 15px;border-radius:999px;border:1px solid rgba(126,196,0,.35);background:rgba(168,230,0,.13);color:#699900;font-size:12px;font-weight:1000;letter-spacing:.13em;text-transform:uppercase}.kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cl-lime)}.title-xl,.title-lg{font-family:var(--cl-display);text-transform:uppercase;letter-spacing:-.03em;margin:18px 0 24px}.title-xl{font-size:clamp(54px,7vw,112px);line-height:.88}.title-lg{font-size:clamp(36px,4.5vw,72px);line-height:.95}.lime{color:var(--cl-lime-dark)}.lead{font-size:20px;color:var(--cl-muted);max-width:680px}.section--dark .lead{color:#c6cbd2}.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn-row--center{justify-content:center}.btn{border:1px solid var(--cl-border);border-radius:13px;padding:15px 22px;font-weight:1000;background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.22s ease;text-align:center}.btn:hover{transform:translateY(-2px);box-shadow:var(--cl-shadow-sm)}.btn--primary{background:var(--cl-lime);border-color:var(--cl-lime);color:#111;box-shadow:0 14px 30px rgba(168,230,0,.26)}.btn--dark{background:#171b24;color:#fff;border-color:#171b24}.btn--ghost{background:transparent}.btn--full{width:100%}.card{background:#fff;border:1px solid var(--cl-border);border-radius:var(--cl-radius-md);padding:30px;box-shadow:0 12px 35px rgba(20,24,30,.05)}.card--accent{border-top:5px solid var(--cl-lime)}.card--dark{background:#292929;border-color:#3b3b3b;color:#fff}.card--blue{border-top-color:var(--cl-blue)}.card--purple{border-top-color:var(--cl-purple)}.card--orange{border-top-color:var(--cl-orange)}.card--red{border-top-color:var(--cl-red)}.card--green{border-top-color:var(--cl-green)}.icon-badge{width:46px;height:46px;border-radius:14px;background:#efffc8;display:grid;place-items:center;margin-bottom:20px;font-weight:900}.tag{display:inline-block;background:#f0ffd0;color:#719e00;padding:7px 12px;border-radius:8px;font-weight:1000;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.pill{display:inline-block;padding:7px 12px;border-radius:999px;background:#f3f4f6;border:1px solid var(--cl-border);font-size:11px;font-weight:900;color:#727a86;margin:4px 6px 4px 0}.price{font-family:var(--cl-display);font-size:38px;color:var(--cl-lime-dark);margin:24px 0 16px}.list-check{list-style:none;padding:0;margin:24px 0}.list-check li{margin:12px 0;color:#5f6672}.section--dark .list-check li{color:#d5d9df}.list-check li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cl-lime);color:#111;font-weight:1000;margin-right:10px}.info-row{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid #e2e7ef}.info-row:last-child{border-bottom:0}.info-icon{width:48px;height:48px;border-radius:14px;background:var(--cl-lime);display:grid;place-items:center;font-weight:1000}.notice{border-radius:16px;border:1px solid rgba(168,230,0,.35);background:rgba(168,230,0,.09);padding:18px;color:#425000}.form-card{background:#fff;border:1px solid var(--cl-border);border-radius:22px;padding:38px;box-shadow:var(--cl-shadow-md)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:16px}.field--full{grid-column:1/-1}.field label{display:block;font-weight:1000;color:#69717d;letter-spacing:.11em;font-size:12px;text-transform:uppercase;margin-bottom:8px}.field input,.field textarea,.field select{width:100%;border:1px solid #d9dfe8;border-radius:13px;padding:15px;background:#fff}.form-message{margin-top:14px;font-weight:800;color:#5b7d00}

/* 06. Sections */
.hero{padding:76px 0 86px}.hero-panel{background:#292929;color:#fff;border-radius:20px;border-top:5px solid var(--cl-lime);padding:34px;box-shadow:var(--cl-shadow-md)}.hero-panel small{color:var(--cl-lime);font-weight:1000;letter-spacing:.16em;text-transform:uppercase}.hero-panel h2{font-size:30px;line-height:1.1}.hero-panel p{color:#b9bec6}.panel-link{display:flex;justify-content:space-between;align-items:center;background:#343434;border:1px solid #454545;border-radius:12px;padding:14px 16px;color:#ddd;margin-top:10px;font-weight:800}.ticker,.band{overflow:hidden;white-space:nowrap}.ticker{height:50px;background:var(--cl-lime);display:flex;align-items:center;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.08);font-family:var(--cl-display);letter-spacing:.16em;font-size:14px;text-transform:uppercase}.ticker-track,.band-track{display:flex;gap:40px;animation:marquee 35s linear infinite}.ticker span:after,.band span:after{content:"◆";margin-left:36px;color:#5d8e00}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}.band{background:#2b2b2b;color:#fff;font-family:var(--cl-display);font-size:24px;text-transform:uppercase;letter-spacing:.15em;padding:19px 0}.band span:after{color:var(--cl-lime)}.stats{display:flex;gap:40px;margin-top:42px;border-top:1px solid #e3e7ee;padding-top:26px}.stat strong{display:block;color:var(--cl-lime-dark);font-family:var(--cl-display);font-size:30px}.stat small{color:#838b96}.page-hero{padding:86px 0 55px;text-align:center}.page-hero--left{text-align:left}.course-card,.package-card{min-height:100%;display:flex;flex-direction:column}.card-actions{margin-top:auto;padding-top:22px}.step{background:#303030;border:1px solid #454545;border-radius:16px;padding:26px;text-align:left}.step-num{width:34px;height:34px;border-radius:50%;background:var(--cl-lime);color:#111;display:grid;place-items:center;font-weight:1000;margin-bottom:18px}.footer{background:#1f1f1f;color:#878d96;padding:68px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer h4{color:#fff;letter-spacing:.16em;font-size:12px;text-transform:uppercase}.footer a{display:block;margin:11px 0;color:#8c939d}.footer .brand-title{color:#fff}.footer-bottom{border-top:1px solid #343434;margin-top:38px;padding-top:20px;font-size:13px;color:#777}

/* 07. Page-specific */
.login-shell{min-height:calc(100vh - 92px);display:grid;place-items:center;padding:70px 0}.login-card{width:min(480px,92vw)}.course-detail-hero .card{position:relative}.syllabus-item{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--cl-border);background:#fff;border-radius:14px;padding:16px;margin-top:12px}.faq-item{border:1px solid var(--cl-border);border-radius:14px;background:#fff;padding:20px;margin-top:14px}.faq-item summary{font-weight:1000;cursor:pointer}.faq-item p{color:var(--cl-muted)}

/* 08. Builder hooks/utilities */
[data-builder-section]{position:relative}.u-mt-0{margin-top:0}.u-mt-24{margin-top:24px}.u-mt-40{margin-top:40px}.u-center{text-align:center}.u-max-760{max-width:760px}.u-mx-auto{margin-inline:auto}.u-muted{color:var(--cl-muted)}

/* 09. Responsive */
@media(max-width:1080px){.header-inner{flex-wrap:wrap}.brand{min-width:unset}.main-nav{order:3;width:100%;justify-content:center;overflow:auto}.header-actions{margin-left:auto}.layout-split,.grid--2{grid-template-columns:1fr}.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.section{padding:62px 0}.hero{padding:54px 0 64px}.title-xl{font-size:58px}.title-lg{font-size:40px}.lead{font-size:18px}.menu-toggle{display:inline-grid;place-items:center}.main-nav{display:none;order:4;width:100%;flex-direction:column;align-items:stretch;border-radius:18px;padding:10px}.main-nav.is-open{display:flex}.nav-link{text-align:center}.header-cta{display:none}.grid--3,.grid--4{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field--full{grid-column:auto}.stats{flex-wrap:wrap;gap:24px}.hero-panel{padding:26px}.course-bottom,.syllabus-item{align-items:flex-start;flex-direction:column}}


/* =========================================================
   CERTILAB — LEGAL + WHATSAPP WIDGET + FORM UTILITIES
   Estructura pensada para builder: bloques reutilizables, sin JS invasivo.
   ========================================================= */
.layout-split--wide{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.legal-card{background:#fff;border:1px solid var(--cl-border);border-radius:22px;padding:40px;box-shadow:0 12px 35px rgba(20,24,30,.05)}.legal-card h2{font-size:24px;margin:28px 0 12px}.legal-card h2:first-child{margin-top:0}.legal-card p{color:#596170}.u-mt-12{margin-top:12px}.form-card button + button{margin-top:12px}@media(max-width:900px){.layout-split--wide{grid-template-columns:1fr}.whatsapp-widget{right:14px;bottom:82px;width:min(330px,calc(100vw - 28px))}.legal-card{padding:28px}}