/* ============================================================
   LESSON PREMIUM — Shared design system for lesson pages
   Load AFTER css/style.css and css/sop-components.css
   Uses: var(--success) #00FF88, var(--cyan) #00D4FF,
         var(--orange) #FF8C42, var(--bg-card) #1a1a1a,
         var(--font-sans) Montserrat, var(--font-mono) JetBrains Mono
   ============================================================ */

/* ── Page layer structure ── */
#particleCanvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
.nav{position:relative;z-index:100;}
.page-body{position:relative;z-index:10;padding-bottom:4rem;}
.footer{position:relative;z-index:10;}
@media(prefers-reduced-motion:reduce){#particleCanvas{display:none;}}

/* ── Lesson hero (kicker variant — default) ── */
.lesson-hero{margin-top:3rem;margin-bottom:3.5rem;text-align:center;max-width:900px;margin-left:auto;margin-right:auto;}
.lesson-kicker{font-family:var(--font-mono);font-size:.72rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--success);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;opacity:.9;}
.lesson-kicker::before,.lesson-kicker::after{content:'';width:28px;height:1px;background:currentColor;opacity:.45;}
.lesson-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-1.5px;margin:0 0 22px;}
.lesson-sub{font-size:1.08rem;color:rgba(255,255,255,.7);line-height:1.65;max-width:780px;margin:0 auto;}
.lesson-sub strong{color:#fff;font-weight:600;}

/* ── Overview hero (3-badge cluster variant for L01 of each module) ── */
.overview-hero{margin-top:2.5rem;margin-bottom:4rem;max-width:1000px;}
.overview-hero-card{position:relative;padding:64px 56px 56px;border-radius:22px;background:linear-gradient(165deg,rgba(0,255,136,.04),var(--bg-card) 55%);border:1px solid rgba(0,255,136,.22);box-shadow:0 0 80px rgba(0,255,136,.08),0 0 160px rgba(0,255,136,.04);overflow:hidden;transition:border-color .35s,box-shadow .4s;}
.overview-hero-card::after{content:'';position:absolute;top:-35%;right:-20%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at center,var(--success) 0%,transparent 58%);opacity:.1;pointer-events:none;}
.overview-hero-card:hover{border-color:rgba(0,255,136,.32);box-shadow:0 0 100px rgba(0,255,136,.12),0 0 200px rgba(0,255,136,.05);}
@media(max-width:768px){.overview-hero-card{padding:40px 28px 32px;}}
.hero-badges{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:28px;position:relative;z-index:2;}
.badge-modulo{font-family:var(--font-mono);font-size:.66rem;font-weight:900;letter-spacing:2.4px;text-transform:uppercase;color:#050505;background:var(--success);padding:8px 14px;border-radius:10px;line-height:1;box-shadow:0 0 0 1px var(--success),0 0 22px -4px var(--success);}
.badge-leccion{font-family:var(--font-mono);font-size:.66rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--success);padding:7px 14px;border:1.5px solid var(--success);border-radius:10px;background:rgba(0,255,136,.02);line-height:1;}
.badge-categoria{font-family:var(--font-mono);font-size:.66rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.7);padding:7px 14px;border:1.5px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.018);line-height:1;}
.overview-hero-card h1{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;color:#fff;line-height:1.14;letter-spacing:-1px;margin:0 0 18px;position:relative;z-index:2;}
.overview-hero-card .lesson-sub{font-size:1.05rem;color:rgba(255,255,255,.7);line-height:1.65;max-width:760px;margin:0;text-align:left;position:relative;z-index:2;}

/* ── Section rhythm ── */
section.lesson-sec{margin:5rem 0;}
.sec-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.66rem;font-weight:800;letter-spacing:2.8px;text-transform:uppercase;color:var(--success);margin-bottom:14px;}
.sec-label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.sec-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.3;min-width:60px;}
.lesson-sec h2.sec-title{font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.8px;margin:0 0 12px;}
.lesson-sec h3.sub{font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.3px;margin:2.5rem 0 .75rem;}
.lesson-sec p{color:rgba(255,255,255,.72);line-height:1.72;font-size:.98rem;margin:0 0 1rem;}
.lesson-sec p strong{color:#fff;font-weight:600;}

/* ── Callout (rule/highlight/gold) — unscoped so it renders correctly outside .lesson-sec ── */
.callout{position:relative;padding:24px 28px;border-radius:14px;background:linear-gradient(165deg,rgba(0,255,136,.02),var(--bg-card) 55%);border:1px solid rgba(0,255,136,.1);margin:1.75rem 0;overflow:hidden;transition:border-color .3s,box-shadow .4s;}
.callout::after{content:'';position:absolute;top:-30%;right:-20%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at center,var(--success) 0%,transparent 62%);opacity:.05;pointer-events:none;}
.callout:hover{border-color:rgba(0,255,136,.24);box-shadow:0 6px 22px rgba(0,255,136,.06);}
.callout-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.58rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--success);margin-bottom:10px;position:relative;z-index:2;}
.callout-label::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.callout p{margin:0;color:rgba(255,255,255,.82);font-size:.96rem;position:relative;z-index:2;}
.callout.gold{background:linear-gradient(165deg,rgba(212,168,67,.025),var(--bg-card) 55%);border-color:rgba(212,168,67,.14);}
.callout.gold::after{background:radial-gradient(circle at center,#D4A843 0%,transparent 62%);}
.callout.gold .callout-label{color:#D4A843;}
.callout.gold:hover{border-color:rgba(212,168,67,.3);box-shadow:0 6px 22px rgba(212,168,67,.07);}
.callout.warning{background:linear-gradient(165deg,rgba(255,75,75,.022),var(--bg-card) 55%);border-color:rgba(255,75,75,.1);}
.callout.warning::after{background:radial-gradient(circle at center,#FF4B4B 0%,transparent 62%);}
.callout.warning .callout-label{color:#FF4B4B;}
.callout.warning:hover{border-color:rgba(255,75,75,.24);box-shadow:0 6px 22px rgba(255,75,75,.05);}
.callout.rule{background:linear-gradient(165deg,rgba(255,140,66,.022),var(--bg-card) 55%);border-color:rgba(255,140,66,.12);}
.callout.rule::after{background:radial-gradient(circle at center,#FF8C42 0%,transparent 62%);}
.callout.rule .callout-label{color:#FF8C42;}
.callout.rule:hover{border-color:rgba(255,140,66,.26);box-shadow:0 6px 22px rgba(255,140,66,.05);}
.callout.insight{background:linear-gradient(165deg,rgba(124,186,95,.022),var(--bg-card) 55%);border-color:rgba(124,186,95,.12);}
.callout.insight::after{background:radial-gradient(circle at center,#7CBA5F 0%,transparent 62%);}
.callout.insight .callout-label{color:#7CBA5F;}
.callout.insight:hover{border-color:rgba(124,186,95,.26);box-shadow:0 6px 22px rgba(124,186,95,.05);}
.callout.critical{background:linear-gradient(165deg,rgba(248,113,113,.04),var(--bg-card) 55%);border-color:rgb(248,113,113);}
.callout.critical::after{background:radial-gradient(circle at center,#F87171 0%,transparent 62%);}
.callout.critical .callout-label{color:#F87171;}
.callout.critical:hover{border-color:rgba(248,113,113,.5);box-shadow:0 6px 22px rgba(248,113,113,.08);}

/* ── Reason grid (2×2 color-rotated cards) ── */
.reason-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:2rem 0;counter-reset:rc;}
.reason-card{position:relative;padding:26px 28px 24px;border-radius:16px;background:linear-gradient(165deg,rgba(255,255,255,.014),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .4s;display:flex;flex-direction:column;gap:10px;counter-increment:rc;}
.reason-card::after{content:'';position:absolute;top:-35%;right:-25%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 60%);opacity:.06;pointer-events:none;transition:opacity .4s;}
.reason-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.24);}
.reason-card:hover::after{opacity:.12;}
.reason-card:nth-child(4n+1){color:var(--success);border-color:rgba(0,255,136,.14);}
.reason-card:nth-child(4n+2){color:var(--cyan);border-color:rgba(0,212,255,.14);}
.reason-card:nth-child(4n+3){color:#A78BFA;border-color:rgba(167,139,250,.14);}
.reason-card:nth-child(4n){color:var(--orange);border-color:rgba(255,140,66,.14);}
.reason-card:nth-child(4n+1):hover{border-color:rgba(0,255,136,.3);box-shadow:0 10px 30px rgba(0,255,136,.07);}
.reason-card:nth-child(4n+2):hover{border-color:rgba(0,212,255,.3);box-shadow:0 10px 30px rgba(0,212,255,.07);}
.reason-card:nth-child(4n+3):hover{border-color:rgba(167,139,250,.3);box-shadow:0 10px 30px rgba(167,139,250,.07);}
.reason-card:nth-child(4n):hover{border-color:rgba(255,140,66,.3);box-shadow:0 10px 30px rgba(255,140,66,.07);}
.reason-num{font-family:var(--font-mono);font-size:.64rem;font-weight:800;letter-spacing:2.4px;color:currentColor;opacity:.85;display:inline-flex;align-items:center;gap:8px;position:relative;z-index:2;}
.reason-num::before{content:counter(rc,decimal-leading-zero);}
.reason-num::after{content:'';width:22px;height:1px;background:currentColor;opacity:.45;}
.reason-title{font-size:1.05rem;font-weight:700;color:#fff;line-height:1.35;letter-spacing:-.2px;margin:0;position:relative;z-index:2;}
.reason-desc{font-size:.88rem;color:rgba(255,255,255,.68);line-height:1.6;margin:0;position:relative;z-index:2;}

/* ── Mini-flow (horizontal stepper, 4 steps default, color-rotated) ── */
.mini-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:2rem 0;align-items:stretch;}
.mini-flow.mf-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.mini-flow.mf-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.mf-step{position:relative;padding:22px 22px 20px;border-radius:14px;background:linear-gradient(165deg,rgba(255,255,255,.014),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .4s;display:flex;flex-direction:column;gap:8px;}
.mf-step::after{content:'';position:absolute;top:-30%;right:-25%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 62%);opacity:.05;pointer-events:none;transition:opacity .4s;color:var(--success);}
.mf-step:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.mf-step:hover::after{opacity:.12;}
.mf-step:nth-child(4n+1){color:var(--success);border-color:rgba(0,255,136,.14);}
.mf-step:nth-child(4n+2){color:var(--cyan);border-color:rgba(0,212,255,.14);}
.mf-step:nth-child(4n+3){color:#A78BFA;border-color:rgba(167,139,250,.14);}
.mf-step:nth-child(4n){color:var(--orange);border-color:rgba(255,140,66,.14);}
.mf-num{font-family:var(--font-mono);font-size:.6rem;font-weight:800;letter-spacing:2.4px;color:currentColor;position:relative;z-index:2;opacity:.85;}
.mf-title{font-size:.95rem;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1.35;margin:0;position:relative;z-index:2;}
.mf-desc{font-size:.8rem;color:rgba(255,255,255,.62);line-height:1.55;margin:0;position:relative;z-index:2;}

/* ── Orgchart (hierarchical flow — top-down tree with SVG connectors) ── */
.orgchart-wrapper{position:relative;padding:64px 48px;border:1px solid rgba(255,255,255,.06);border-radius:20px;background:radial-gradient(ellipse at center,rgba(0,255,136,.03) 0%,transparent 65%),#0A0A0A;box-shadow:0 0 60px rgba(0,255,136,.04);overflow:hidden;margin:2.5rem 0;}
.orgchart-wrapper::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(0,255,136,.07) 1px,transparent 0);background-size:28px 28px;opacity:.55;pointer-events:none;}
.orgchart-wrapper > .orgchart{margin:0;position:relative;z-index:1;}

.orgchart{display:flex;flex-direction:column;align-items:center;gap:0;margin:2.5rem 0;position:relative;}
.orgchart-row{display:flex;justify-content:center;gap:18px;width:100%;position:relative;align-items:stretch;}
.orgchart-row--single{justify-content:center;}
.orgchart-row--single .org-node{max-width:460px;flex:0 1 460px;}

.org-node{flex:1 1 0;min-width:0;padding:22px 24px 24px;border-radius:16px;border:1.5px solid transparent;background:linear-gradient(165deg,rgba(255,255,255,.018),var(--bg-card) 58%) padding-box,linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08)) border-box;position:relative;display:flex;flex-direction:column;gap:8px;overflow:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .4s;z-index:1;}
.org-node::after{content:'';position:absolute;top:-35%;right:-25%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 58%);opacity:.09;pointer-events:none;transition:opacity .4s;}
.org-node:hover{transform:translateY(-4px);}
.org-node:hover::after{opacity:.2;}
.org-node-kicker{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;font-weight:800;text-transform:uppercase;color:currentColor;opacity:.95;position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;text-shadow:0 0 8px currentColor;}
.org-node-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.org-node-title{font-size:1.04rem;font-weight:700;color:#fff;margin:0;letter-spacing:-.2px;line-height:1.3;position:relative;z-index:2;}
.org-node-desc{font-size:.84rem;color:rgba(255,255,255,.7);line-height:1.55;margin:0;position:relative;z-index:2;}

/* Color variants — gradient borders (bright top → soft bottom), saturated hover glow */
.org-node--gold{color:#D4A843;background:linear-gradient(165deg,rgba(212,168,67,.06),var(--bg-card) 60%) padding-box,linear-gradient(180deg,rgba(212,168,67,.6),rgba(212,168,67,.15)) border-box;}
.org-node--gold:hover{box-shadow:0 10px 32px rgba(212,168,67,.14);}
.org-node--naranja{color:#FF8C42;background:linear-gradient(165deg,rgba(255,140,66,.05),var(--bg-card) 60%) padding-box,linear-gradient(180deg,rgba(255,140,66,.6),rgba(255,140,66,.15)) border-box;}
.org-node--naranja:hover{box-shadow:0 10px 32px rgba(255,140,66,.14);}
.org-node--cyan{color:#5FB3D4;background:linear-gradient(165deg,rgba(95,179,212,.05),var(--bg-card) 60%) padding-box,linear-gradient(180deg,rgba(0,212,255,.6),rgba(0,212,255,.15)) border-box;}
.org-node--cyan:hover{box-shadow:0 10px 32px rgba(95,179,212,.14);}
.org-node--verde{color:#7CBA5F;background:linear-gradient(165deg,rgba(124,186,95,.05),var(--bg-card) 60%) padding-box,linear-gradient(180deg,rgba(0,255,136,.6),rgba(0,255,136,.15)) border-box;}
.org-node--verde:hover{box-shadow:0 10px 32px rgba(124,186,95,.14);}
.org-node--morado{color:#A78BFA;background:linear-gradient(165deg,rgba(167,139,250,.05),var(--bg-card) 60%) padding-box,linear-gradient(180deg,rgba(167,139,250,.6),rgba(167,139,250,.15)) border-box;}
.org-node--morado:hover{box-shadow:0 10px 32px rgba(167,139,250,.14);}
.org-node--danger{color:#FF4B4B;background:linear-gradient(165deg,rgba(255,75,75,.05),var(--bg-card) 60%) padding-box,linear-gradient(180deg,rgba(255,75,75,.6),rgba(255,75,75,.15)) border-box;}
.org-node--danger:hover{box-shadow:0 10px 32px rgba(255,75,75,.14);}
.org-node--gris{color:rgba(255,255,255,.55);background:linear-gradient(165deg,rgba(255,255,255,.01),var(--bg-card) 60%) padding-box,linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08)) border-box;}
.org-node--gris:hover{box-shadow:0 10px 32px rgba(0,0,0,.25);}

/* ── SVG connectors (unified system, non-scaling strokes, arrow heads as CSS triangles) ── */
.org-connector{position:relative;width:100%;height:80px;margin:0 auto;pointer-events:none;flex:0 0 80px;}
.org-connector svg{display:block;width:100%;height:100%;overflow:visible;}
.org-connector svg line{stroke:rgba(255,255,255,.42);stroke-width:2;stroke-linecap:round;}
.org-arrow{position:absolute;transform:translateX(-50%);bottom:-2px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid rgba(255,255,255,.55);filter:drop-shadow(0 0 4px rgba(255,255,255,.2));}

/* Connector color variants — inherit from upstream node level for visual cohesion */
.org-connector--gold svg line{stroke:rgba(212,168,67,.6);} .org-connector--gold .org-arrow{border-top-color:rgba(212,168,67,.75);filter:drop-shadow(0 0 5px rgba(212,168,67,.35));}
.org-connector--naranja svg line{stroke:rgba(255,140,66,.6);} .org-connector--naranja .org-arrow{border-top-color:rgba(255,140,66,.75);filter:drop-shadow(0 0 5px rgba(255,140,66,.35));}
.org-connector--verde svg line{stroke:rgba(124,186,95,.6);} .org-connector--verde .org-arrow{border-top-color:rgba(124,186,95,.75);filter:drop-shadow(0 0 5px rgba(124,186,95,.35));}
.org-connector--cyan svg line{stroke:rgba(95,179,212,.6);} .org-connector--cyan .org-arrow{border-top-color:rgba(95,179,212,.75);filter:drop-shadow(0 0 5px rgba(95,179,212,.35));}

/* Staggered entrance — nodes fade up level by level when orgchart enters viewport */
.orgchart .org-node{opacity:0;transform:translateY(12px);transition:opacity .45s ease-out,transform .45s ease-out;}
.orgchart.is-visible .org-node{opacity:1;transform:translateY(0);}
.orgchart .org-connector{opacity:0;transition:opacity .5s ease-out;}
.orgchart.is-visible .org-connector{opacity:1;}
.orgchart.is-visible > .orgchart-row .org-node{transition-delay:0ms;}
.orgchart.is-visible > .orgchart-row ~ .orgchart-row .org-node{transition-delay:180ms;}
.orgchart.is-visible > .orgchart-row ~ .orgchart-row ~ .orgchart-row .org-node{transition-delay:360ms;}
.orgchart.is-visible > .orgchart-row ~ .orgchart-row ~ .orgchart-row ~ .orgchart-row .org-node{transition-delay:540ms;}
.orgchart.is-visible > .orgchart-row ~ .orgchart-row ~ .orgchart-row ~ .orgchart-row ~ .orgchart-row .org-node{transition-delay:720ms;}
.orgchart.is-visible > .org-connector{transition-delay:90ms;}
.orgchart.is-visible > .org-connector ~ .org-connector{transition-delay:270ms;}
.orgchart.is-visible > .org-connector ~ .org-connector ~ .org-connector{transition-delay:450ms;}
.orgchart.is-visible > .org-connector ~ .org-connector ~ .org-connector ~ .org-connector{transition-delay:630ms;}
@media(prefers-reduced-motion:reduce){
  .orgchart .org-node,.orgchart .org-connector{opacity:1;transform:none;transition:none;}
}

/* Mobile: stack everything vertically, replace SVG connectors with a single vertical line per gap */
@media(max-width:760px){
  .orgchart-wrapper{padding:36px 22px;border-radius:16px;}
  .orgchart-row{flex-direction:column;gap:14px;align-items:stretch;}
  .orgchart-row--single .org-node{max-width:none;flex:1 1 auto;}
  .org-node{padding:18px 20px 20px;}
  .org-node-title{font-size:.98rem;}
  .org-node-desc{font-size:.82rem;}
  .org-connector{height:38px;flex:0 0 38px;}
  .org-connector svg,.org-connector .org-arrow{display:none;}
  .org-connector::before{content:'';position:absolute;top:0;bottom:10px;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.42);}
  .org-connector::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid rgba(255,255,255,.55);}
  .org-connector--gold::before{background:rgba(212,168,67,.6);} .org-connector--gold::after{border-top-color:rgba(212,168,67,.75);}
  .org-connector--naranja::before{background:rgba(255,140,66,.6);} .org-connector--naranja::after{border-top-color:rgba(255,140,66,.75);}
  .org-connector--verde::before{background:rgba(124,186,95,.6);} .org-connector--verde::after{border-top-color:rgba(124,186,95,.75);}
  .org-connector--cyan::before{background:rgba(95,179,212,.6);} .org-connector--cyan::after{border-top-color:rgba(95,179,212,.75);}
}

/* ── Pieza Card (large category card — 4 color variants) ── */
.pieza-card{position:relative;padding:38px 40px 36px;border-radius:20px;background:linear-gradient(165deg,rgba(255,255,255,.015),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);margin:2rem 0;overflow:hidden;transition:border-color .3s,box-shadow .4s;}
.pieza-card::after{content:'';position:absolute;top:-40%;right:-25%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 58%);opacity:.05;pointer-events:none;color:var(--success);transition:opacity .4s;}
.pieza-card:hover::after{opacity:.1;}
.pieza-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative;z-index:2;flex-wrap:wrap;}
.pieza-badge{font-family:var(--font-mono);font-size:.58rem;font-weight:900;letter-spacing:2.6px;text-transform:uppercase;color:currentColor;padding:5px 10px;border:1px solid currentColor;border-radius:999px;background:rgba(255,255,255,.01);display:inline-flex;align-items:center;gap:8px;}
.pieza-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.pieza-title{font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:800;color:#fff;line-height:1.18;letter-spacing:-.6px;margin:0 0 8px;position:relative;z-index:2;}
.pieza-obj{font-family:var(--font-mono);font-size:.76rem;color:currentColor;opacity:.85;margin:0 0 18px;position:relative;z-index:2;letter-spacing:-.1px;font-weight:500;}
.pieza-obj strong{font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:1.8px;font-size:.56rem;display:inline-block;margin-right:8px;}
.pieza-body{position:relative;z-index:2;}
.pieza-body p{color:rgba(255,255,255,.74);}
.pieza-body > ul{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:9px;}
.pieza-body > ul > li{font-size:.92rem;color:rgba(255,255,255,.74);line-height:1.6;padding-left:22px;position:relative;}
.pieza-body > ul > li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--success);opacity:.85;}
.pieza-card.pieza-green{color:var(--success);border-color:rgba(0,255,136,.14);}
.pieza-card.pieza-green:hover{border-color:rgba(0,255,136,.3);box-shadow:0 8px 32px rgba(0,255,136,.05);}
.pieza-card.pieza-cyan{color:var(--cyan);border-color:rgba(0,212,255,.14);}
.pieza-card.pieza-cyan:hover{border-color:rgba(0,212,255,.3);box-shadow:0 8px 32px rgba(0,212,255,.05);}
.pieza-card.pieza-cyan .pieza-body > ul > li::before{background:var(--cyan);}
.pieza-card.pieza-purple{color:#A78BFA;border-color:rgba(167,139,250,.14);}
.pieza-card.pieza-purple:hover{border-color:rgba(167,139,250,.3);box-shadow:0 8px 32px rgba(167,139,250,.05);}
.pieza-card.pieza-purple .pieza-body > ul > li::before{background:#A78BFA;}
.pieza-card.pieza-orange{color:var(--orange);border-color:rgba(255,140,66,.14);}
.pieza-card.pieza-orange:hover{border-color:rgba(255,140,66,.3);box-shadow:0 8px 32px rgba(255,140,66,.05);}
.pieza-card.pieza-orange .pieza-body > ul > li::before{background:var(--orange);}
.pieza-card.pieza-gold{color:#D4A843;border-color:rgba(212,168,67,.14);}
.pieza-card.pieza-gold:hover{border-color:rgba(212,168,67,.3);box-shadow:0 8px 32px rgba(212,168,67,.05);}
.pieza-card.pieza-gold .pieza-body > ul > li::before{background:#D4A843;}

/* ── Sequence (purple stepper inside pieza-purple) ── */
.seq-wrap{display:flex;flex-direction:column;gap:10px;margin:1.25rem 0 1rem;}
.seq-step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:16px 20px;border-radius:12px;background:rgba(167,139,250,.03);border:1px solid rgba(167,139,250,.1);transition:border-color .3s,transform .3s;}
.seq-step:hover{border-color:rgba(167,139,250,.24);transform:translateX(3px);}
.seq-num{font-family:var(--font-mono);font-size:.72rem;font-weight:800;color:#A78BFA;letter-spacing:1px;min-width:38px;padding-top:2px;opacity:.8;}
.seq-text{font-size:.88rem;color:rgba(255,255,255,.78);line-height:1.55;font-style:italic;margin:0;}

/* ── Principio cards (stacked cards with uppercase label pill, full-width title) ── */
.principio-wrap{display:flex;flex-direction:column;gap:14px;margin:1.75rem 0;}
.principio{position:relative;display:block;padding:26px 30px 26px;border-radius:16px;background:linear-gradient(165deg,rgba(255,255,255,.014),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:border-color .35s,transform .35s,box-shadow .4s;}
.principio::after{content:'';position:absolute;top:-30%;left:-15%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 62%);opacity:.05;pointer-events:none;transition:opacity .4s;color:var(--success);}
.principio:hover{transform:translateX(3px);box-shadow:0 6px 22px rgba(0,0,0,.22);}
.principio:hover::after{opacity:.12;}
.principio:nth-child(3n+1){color:var(--success);border-color:rgba(0,255,136,.18);}
.principio:nth-child(3n+2){color:var(--cyan);border-color:rgba(0,212,255,.18);}
.principio:nth-child(3n){color:#D4A843;border-color:rgba(212,168,67,.18);}
.principio:nth-child(3n+1):hover{border-color:rgba(0,255,136,.36);}
.principio:nth-child(3n+2):hover{border-color:rgba(0,212,255,.36);}
.principio:nth-child(3n):hover{border-color:rgba(212,168,67,.36);}

/* Label pill (replaces the old giant decorative number) */
.principio-num{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:currentColor;margin:0 0 14px;padding:0;opacity:.96;position:relative;z-index:2;line-height:1;text-shadow:0 0 8px currentColor;}
.principio-num::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}

/* Body full-width, title now vibrant level color + bigger */
.principio-body{min-width:0;position:relative;z-index:2;}
.principio-body h4,.principio-title{font-size:1.28rem;font-weight:800;color:currentColor;line-height:1.22;letter-spacing:-.45px;margin:0 0 12px;}
.principio-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.58rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:currentColor;margin-bottom:6px;}
.principio-label::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.principio-body p{font-size:.96rem;color:rgba(255,255,255,.74);line-height:1.65;margin:0 0 10px;}
.principio-body ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:7px;}
.principio-body li{font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.55;padding-left:20px;position:relative;}
.principio-body li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;}

/* ── Compare (2-col bad/good) ── */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.25rem 0;}
.compare-box{position:relative;padding:20px 22px;border-radius:12px;background:linear-gradient(165deg,rgba(255,255,255,.01),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:border-color .3s,box-shadow .4s;}
.compare-box::after{content:'';position:absolute;top:-40%;right:-25%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 62%);opacity:.05;pointer-events:none;}
.compare-box.bad{color:#FF4B4B;border-color:rgba(255,75,75,.12);}
.compare-box.bad:hover{border-color:rgba(255,75,75,.26);box-shadow:0 6px 20px rgba(255,75,75,.05);}
.compare-box.good{color:var(--success);border-color:rgba(0,255,136,.12);}
.compare-box.good:hover{border-color:rgba(0,255,136,.26);box-shadow:0 6px 20px rgba(0,255,136,.05);}
.compare-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.58rem;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:currentColor;margin-bottom:10px;position:relative;z-index:2;}
.compare-label::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;}
.compare-text{font-size:.86rem;color:rgba(255,255,255,.75);line-height:1.6;font-style:italic;margin:0;position:relative;z-index:2;}

/* ── Production stepper (3 cards + time pill) ── */
.prod-wrap{display:flex;flex-direction:column;gap:10px;margin:1.75rem 0;}
.prod-step{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;padding:22px 26px 20px;border-radius:14px;background:linear-gradient(165deg,rgba(0,255,136,.02),var(--bg-card) 55%);border:1px solid rgba(0,255,136,.1);overflow:hidden;transition:border-color .35s,transform .35s,box-shadow .4s;}
.prod-step::after{content:'';position:absolute;top:-30%;left:-10%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at center,var(--success) 0%,transparent 62%);opacity:.04;pointer-events:none;transition:opacity .4s;}
.prod-step:hover{transform:translateX(3px);border-color:rgba(0,255,136,.28);box-shadow:0 6px 22px rgba(0,255,136,.05);}
.prod-step:hover::after{opacity:.08;}
.prod-num{font-family:var(--font-mono);font-size:1.7rem;font-weight:900;color:var(--success);opacity:.3;line-height:1;letter-spacing:-1px;min-width:44px;padding-top:2px;}
.prod-body{min-width:0;position:relative;z-index:2;}
.prod-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.58rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--success);margin-bottom:6px;}
.prod-label::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.prod-title{font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.25px;margin:0 0 8px;line-height:1.35;}
.prod-desc{font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.6;margin:0 0 10px;}
.prod-desc strong{color:#fff;font-weight:600;}
.prod-body ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px;}
.prod-body li{font-size:.82rem;color:rgba(255,255,255,.68);line-height:1.55;padding-left:18px;position:relative;}
.prod-body li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--success);opacity:.6;}
.prod-time{font-family:var(--font-mono);font-size:.62rem;font-weight:800;letter-spacing:2px;color:var(--success);padding:5px 10px;border:1px solid currentColor;border-radius:999px;background:rgba(0,255,136,.02);white-space:nowrap;align-self:flex-start;position:relative;z-index:2;}

/* ── Week calendar grid ── */
.cal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:1.75rem 0;}
.cal-grid.cg-1{grid-template-columns:1fr;}
.cal-grid.cg-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cal-day{position:relative;padding:20px 20px 18px;border-radius:14px;background:linear-gradient(165deg,rgba(255,255,255,.014),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .4s;display:flex;flex-direction:column;gap:9px;}
.cal-day::after{content:'';position:absolute;top:-40%;right:-25%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 62%);opacity:.04;pointer-events:none;transition:opacity .4s;}
.cal-day:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.22);}
.cal-day:hover::after{opacity:.12;}
.cal-day.d-cyan{color:var(--cyan);border-color:rgba(0,212,255,.1);}
.cal-day.d-cyan:hover{border-color:rgba(0,212,255,.3);}
.cal-day.d-green{color:var(--success);border-color:rgba(0,255,136,.1);}
.cal-day.d-green:hover{border-color:rgba(0,255,136,.3);}
.cal-day.d-orange{color:var(--orange);border-color:rgba(255,140,66,.1);}
.cal-day.d-orange:hover{border-color:rgba(255,140,66,.3);}
.cal-day.d-purple{color:#A78BFA;border-color:rgba(167,139,250,.1);}
.cal-day.d-purple:hover{border-color:rgba(167,139,250,.3);}
.cal-day.d-neutral{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.08);}
.cal-day.d-neutral:hover{border-color:rgba(255,255,255,.22);}
.cal-day.d-gold{color:#D4A843;border-color:rgba(212,168,67,.1);}
.cal-day.d-gold:hover{border-color:rgba(212,168,67,.3);}
.cal-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2;}
.cal-day-name{font-family:var(--font-mono);font-size:.66rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:#fff;opacity:.85;}
.cal-day-badge{font-family:var(--font-mono);font-size:.52rem;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:currentColor;padding:3px 8px;border:1px solid currentColor;border-radius:999px;background:rgba(255,255,255,.01);}
.cal-day-focus{font-size:.88rem;font-weight:600;color:#fff;line-height:1.35;margin:0;position:relative;z-index:2;letter-spacing:-.2px;}
.cal-day-desc{font-size:.76rem;color:rgba(255,255,255,.55);line-height:1.5;margin:0;position:relative;z-index:2;}
.cal-day-num{font-family:var(--font-mono);font-size:.62rem;font-weight:900;letter-spacing:2.4px;text-transform:uppercase;color:currentColor;opacity:.9;padding:4px 10px;border:1px solid currentColor;border-radius:999px;background:rgba(255,255,255,.01);align-self:flex-start;position:relative;z-index:2;}
.cal-day-title{font-size:1.15rem;font-weight:700;color:#fff;line-height:1.3;margin:2px 0 0;letter-spacing:-.3px;position:relative;z-index:2;}
.cal-day-obj{font-size:.82rem;font-weight:500;color:rgba(255,255,255,.78);line-height:1.5;margin:0;font-style:italic;position:relative;z-index:2;}
.cal-day-list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:2;}
.cal-day-list li{font-size:.86rem;font-weight:400;color:rgba(255,255,255,.72);line-height:1.55;padding-left:20px;position:relative;}
.cal-day-list li::before{content:'';position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.65;}
.cal-day-note{font-size:.82rem;color:rgba(255,255,255,.68);line-height:1.6;margin:6px 0 0;padding:12px 14px;border-left:2px solid currentColor;background:rgba(255,255,255,.015);border-radius:0 8px 8px 0;position:relative;z-index:2;}
.cal-day-note strong{color:#fff;font-weight:700;}

/* ── Don't box (errors list with × markers) ── */
.dont-box{position:relative;padding:28px 32px 24px;border-radius:16px;background:linear-gradient(165deg,rgba(255,75,75,.022),var(--bg-card) 55%);border:1px solid rgba(255,75,75,.1);margin:1.75rem 0;overflow:hidden;transition:border-color .3s,box-shadow .4s;}
.dont-box::after{content:'';position:absolute;top:-30%;right:-15%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at center,#FF4B4B 0%,transparent 62%);opacity:.04;pointer-events:none;}
.dont-box:hover{border-color:rgba(255,75,75,.24);box-shadow:0 6px 22px rgba(255,75,75,.04);}
.dont-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.6rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:#FF4B4B;margin-bottom:14px;position:relative;z-index:2;}
.dont-label::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.dont-box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:2;}
.dont-box li{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.55;padding-left:26px;position:relative;}
.dont-box li::before{content:'\00d7';position:absolute;left:2px;top:-4px;font-size:1.3rem;font-weight:900;color:#FF4B4B;}
/* Do-box — mirror of dont-box with green checkmarks */
.do-box{position:relative;padding:28px 32px 24px;border-radius:16px;background:linear-gradient(165deg,rgba(0,255,136,.022),var(--bg-card) 55%);border:1px solid rgba(0,255,136,.1);margin:1.75rem 0;overflow:hidden;transition:border-color .3s,box-shadow .4s;}
.do-box::after{content:'';position:absolute;top:-30%;right:-15%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at center,var(--success) 0%,transparent 62%);opacity:.04;pointer-events:none;}
.do-box:hover{border-color:rgba(0,255,136,.24);box-shadow:0 6px 22px rgba(0,255,136,.04);}
.do-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.6rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--success);margin-bottom:14px;position:relative;z-index:2;}
.do-label::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.do-box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:2;}
.do-box li{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.55;padding-left:26px;position:relative;}
.do-box li::before{content:'\2713';position:absolute;left:2px;top:-1px;font-size:.95rem;font-weight:900;color:var(--success);}

/* ── Metric cards (3 color-rotated) ── */
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:1.75rem 0;}
.metric-card{position:relative;padding:24px 26px 22px;border-radius:16px;background:linear-gradient(165deg,rgba(255,255,255,.014),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .4s;}
.metric-card::after{content:'';position:absolute;top:-35%;right:-25%;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 60%);opacity:.06;pointer-events:none;transition:opacity .4s;}
.metric-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.24);}
.metric-card:hover::after{opacity:.13;}
.metric-card:nth-child(3n+1){color:var(--success);border-color:rgba(0,255,136,.14);}
.metric-card:nth-child(3n+2){color:var(--cyan);border-color:rgba(0,212,255,.14);}
.metric-card:nth-child(3n){color:#D4A843;border-color:rgba(212,168,67,.14);}
.metric-card:nth-child(3n+1):hover{border-color:rgba(0,255,136,.3);}
.metric-card:nth-child(3n+2):hover{border-color:rgba(0,212,255,.3);}
.metric-card:nth-child(3n):hover{border-color:rgba(212,168,67,.3);}
.metric-tag{font-family:var(--font-mono);font-size:.56rem;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:currentColor;display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid currentColor;border-radius:999px;margin-bottom:12px;position:relative;z-index:2;}
.metric-tag::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;}
.metric-title{font-size:1rem;font-weight:700;color:#fff;line-height:1.35;letter-spacing:-.25px;margin:0 0 8px;position:relative;z-index:2;}
.metric-desc{font-size:.84rem;color:rgba(255,255,255,.62);line-height:1.6;margin:0;position:relative;z-index:2;}
.metric-desc strong{color:#fff;font-weight:600;}

/* ── Check sections (4 color variants) ── */
.check-wrap{display:flex;flex-direction:column;gap:14px;margin:1.75rem 0;}
.check-section{position:relative;padding:26px 28px 22px;border-radius:16px;background:linear-gradient(165deg,rgba(255,255,255,.014),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);transition:border-color .3s;overflow:hidden;}
.check-section::after{content:'';position:absolute;top:-30%;right:-20%;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 62%);opacity:.04;pointer-events:none;transition:opacity .4s;color:var(--success);}
.check-section:hover::after{opacity:.08;}
.check-section.cs-green{color:var(--success);border-color:rgba(0,255,136,.1);}
.check-section.cs-green:hover{border-color:rgba(0,255,136,.24);}
.check-section.cs-cyan{color:var(--cyan);border-color:rgba(0,212,255,.1);}
.check-section.cs-cyan:hover{border-color:rgba(0,212,255,.24);}
.check-section.cs-orange{color:var(--orange);border-color:rgba(255,140,66,.1);}
.check-section.cs-orange:hover{border-color:rgba(255,140,66,.24);}
.check-section.cs-purple{color:#A78BFA;border-color:rgba(167,139,250,.1);}
.check-section.cs-purple:hover{border-color:rgba(167,139,250,.24);}
.check-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:2;flex-wrap:wrap;}
.check-badge{font-family:var(--font-mono);font-size:.6rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:currentColor;padding:5px 10px;border:1px solid currentColor;border-radius:999px;background:rgba(255,255,255,.01);}
.check-head h3{font-size:.98rem;font-weight:700;color:#fff;margin:0;letter-spacing:-.2px;}
.check-section ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;position:relative;z-index:2;}
.check-section li{font-size:.86rem;color:rgba(255,255,255,.7);line-height:1.55;padding-left:26px;position:relative;}
.check-section li::before{content:'';position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:4px;border:1px solid currentColor;background:rgba(255,255,255,.02);opacity:.55;}
.check-section li::after{content:'\2713';position:absolute;left:3px;top:1px;font-size:.72rem;font-weight:800;color:currentColor;opacity:0;transition:opacity .3s;}
.check-section li:hover::after{opacity:.85;}

/* ── Image placeholder slot ── */
.img-slot{position:relative;margin:1.5rem 0;padding:42px 32px;border-radius:14px;background:linear-gradient(165deg,rgba(255,255,255,.012),rgba(255,255,255,.005));border:1px dashed rgba(255,255,255,.1);text-align:center;overflow:hidden;}
.img-slot::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,255,136,.04),transparent 60%);pointer-events:none;}
.img-slot-num{font-family:var(--font-mono);font-size:.58rem;font-weight:900;letter-spacing:2.5px;color:var(--success);opacity:.7;display:block;margin-bottom:8px;}
.img-slot-desc{font-size:.84rem;color:rgba(255,255,255,.55);line-height:1.6;max-width:560px;margin:0 auto;position:relative;z-index:2;}

/* ── Roadmap (next-steps list) ── */
.roadmap{display:flex;flex-direction:column;gap:6px;margin:1.5rem 0 2rem;}
.roadmap-item{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:14px 20px;border-radius:12px;background:rgba(0,255,136,.022);border:1px solid rgba(0,255,136,.06);font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.5;transition:border-color .3s,transform .3s,background .3s;}
.roadmap-item:hover{border-color:rgba(0,255,136,.18);transform:translateX(3px);background:rgba(0,255,136,.04);}
.roadmap-num{font-family:var(--font-mono);font-size:.72rem;font-weight:900;color:var(--success);letter-spacing:1px;min-width:26px;opacity:.65;}
.roadmap-arrow{color:rgba(0,255,136,.3);font-size:.9rem;transition:transform .3s,color .3s;}
.roadmap-item:hover .roadmap-arrow{color:rgba(0,255,136,.7);transform:translateX(3px);}

/* ── Reason-grid 3-col variant + icon slot + 6-color rotation ── */
.reason-grid.rg-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.reason-grid.rg-6{counter-reset:rc;}
.reason-grid.rg-6 .reason-card:nth-child(6n+1),.reason-grid.rg-3 .reason-card:nth-child(6n+1){color:var(--success);border-color:rgba(0,255,136,.14);}
.reason-grid.rg-6 .reason-card:nth-child(6n+2),.reason-grid.rg-3 .reason-card:nth-child(6n+2){color:var(--cyan);border-color:rgba(0,212,255,.14);}
.reason-grid.rg-6 .reason-card:nth-child(6n+3),.reason-grid.rg-3 .reason-card:nth-child(6n+3){color:#A78BFA;border-color:rgba(167,139,250,.14);}
.reason-grid.rg-6 .reason-card:nth-child(6n+4),.reason-grid.rg-3 .reason-card:nth-child(6n+4){color:var(--orange);border-color:rgba(255,140,66,.14);}
.reason-grid.rg-6 .reason-card:nth-child(6n+5),.reason-grid.rg-3 .reason-card:nth-child(6n+5){color:#B8FF57;border-color:rgba(184,255,87,.14);}
.reason-grid.rg-6 .reason-card:nth-child(6n),.reason-grid.rg-3 .reason-card:nth-child(6n){color:#D4A843;border-color:rgba(212,168,67,.14);}
.reason-grid.rg-6 .reason-card:nth-child(6n+1):hover,.reason-grid.rg-3 .reason-card:nth-child(6n+1):hover{border-color:rgba(0,255,136,.3);box-shadow:0 10px 30px rgba(0,255,136,.07);}
.reason-grid.rg-6 .reason-card:nth-child(6n+2):hover,.reason-grid.rg-3 .reason-card:nth-child(6n+2):hover{border-color:rgba(0,212,255,.3);box-shadow:0 10px 30px rgba(0,212,255,.07);}
.reason-grid.rg-6 .reason-card:nth-child(6n+3):hover,.reason-grid.rg-3 .reason-card:nth-child(6n+3):hover{border-color:rgba(167,139,250,.3);box-shadow:0 10px 30px rgba(167,139,250,.07);}
.reason-grid.rg-6 .reason-card:nth-child(6n+4):hover,.reason-grid.rg-3 .reason-card:nth-child(6n+4):hover{border-color:rgba(255,140,66,.3);box-shadow:0 10px 30px rgba(255,140,66,.07);}
.reason-grid.rg-6 .reason-card:nth-child(6n+5):hover,.reason-grid.rg-3 .reason-card:nth-child(6n+5):hover{border-color:rgba(184,255,87,.3);box-shadow:0 10px 30px rgba(184,255,87,.07);}
.reason-grid.rg-6 .reason-card:nth-child(6n):hover,.reason-grid.rg-3 .reason-card:nth-child(6n):hover{border-color:rgba(212,168,67,.3);box-shadow:0 10px 30px rgba(212,168,67,.07);}
.reason-icon{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.02);border:1px solid currentColor;position:relative;z-index:2;margin-bottom:6px;}
.reason-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ── Diag row (bad -> good inside any card) ── */
.diag-bad{font-family:var(--font-mono);font-size:.76rem;font-weight:700;color:currentColor;display:inline-flex;align-items:center;gap:8px;font-style:italic;opacity:.9;}
.diag-bad::before{content:'\00d7';font-family:inherit;font-size:.95rem;font-weight:900;font-style:normal;}
.diag-arrow{display:flex;align-items:center;gap:8px;margin:10px 0;opacity:.55;}
.diag-arrow::before,.diag-arrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,136,.25),transparent);}
.diag-arrow::after{background:linear-gradient(90deg,rgba(0,255,136,.25),transparent);}
.diag-arrow svg{width:14px;height:14px;stroke:var(--success);stroke-width:2;fill:none;opacity:.7;}
.diag-good{font-size:.86rem;font-weight:600;color:var(--success);display:inline-flex;align-items:center;gap:8px;line-height:1.45;}
.diag-good::before{content:'\2713';font-weight:900;}

/* ── Excuse box (quote + rebuttal) ── */
.excuse-list{display:flex;flex-direction:column;gap:12px;margin:1.75rem 0;}
.excuse-box{position:relative;padding:22px 26px 20px;border-radius:14px;background:linear-gradient(165deg,rgba(255,75,75,.018),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);border-left:3px solid rgba(255,75,75,.32);overflow:hidden;transition:border-color .3s,border-left-color .3s,transform .3s,box-shadow .4s;}
.excuse-box::before{content:'\201C';position:absolute;top:-4px;left:14px;font-family:Georgia,serif;font-size:4rem;font-weight:900;line-height:1;color:rgba(255,75,75,.07);pointer-events:none;}
.excuse-box:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.12);border-left-color:var(--success);box-shadow:0 6px 22px rgba(0,0,0,.22);}
.excuse-quote{font-size:.92rem;color:rgba(255,255,255,.52);font-style:italic;line-height:1.55;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:2;}
.excuse-response{font-size:.88rem;color:rgba(255,255,255,.76);line-height:1.65;margin:0;position:relative;z-index:2;}
.excuse-response strong{color:#fff;font-weight:600;}

/* ── Pieza-card compact action variant (icon + num + title + desc, centered) ── */
.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:1.75rem 0;}
.action-card{position:relative;padding:28px 24px 24px;border-radius:16px;background:linear-gradient(165deg,rgba(255,255,255,.014),var(--bg-card) 55%);border:1px solid rgba(255,255,255,.06);text-align:center;overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .4s;display:flex;flex-direction:column;align-items:center;gap:10px;}
.action-card::after{content:'';position:absolute;top:-35%;right:-25%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at center,currentColor 0%,transparent 60%);opacity:.05;pointer-events:none;transition:opacity .4s;}
.action-card:hover{transform:translateY(-3px);}
.action-card:hover::after{opacity:.1;}
.action-card:nth-child(3n+1){color:var(--success);border-color:rgba(0,255,136,.14);}
.action-card:nth-child(3n+1):hover{border-color:rgba(0,255,136,.3);box-shadow:0 10px 30px rgba(0,255,136,.07);}
.action-card:nth-child(3n+2){color:var(--cyan);border-color:rgba(0,212,255,.14);}
.action-card:nth-child(3n+2):hover{border-color:rgba(0,212,255,.3);box-shadow:0 10px 30px rgba(0,212,255,.07);}
.action-card:nth-child(3n){color:var(--orange);border-color:rgba(255,140,66,.14);}
.action-card:nth-child(3n):hover{border-color:rgba(255,140,66,.3);box-shadow:0 10px 30px rgba(255,140,66,.07);}
.action-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.02);border:1px solid currentColor;position:relative;z-index:2;}
.action-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.action-num{font-family:var(--font-mono);font-size:.58rem;font-weight:900;letter-spacing:2.4px;color:currentColor;padding:4px 10px;border:1px solid currentColor;border-radius:999px;background:rgba(255,255,255,.01);position:relative;z-index:2;}
.action-title{font-size:1rem;font-weight:700;color:#fff;line-height:1.35;letter-spacing:-.25px;margin:0;position:relative;z-index:2;}
.action-desc{font-size:.84rem;color:rgba(255,255,255,.65);line-height:1.6;margin:0;position:relative;z-index:2;}
.action-desc strong{color:#fff;font-weight:600;}

/* ── Responsive ── */
@media(max-width:1100px){
  .reason-grid,.reason-grid.rg-3,.reason-grid.rg-6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .action-grid{grid-template-columns:1fr;}
  .mini-flow,.mini-flow.mf-3,.mini-flow.mf-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .metric-grid{grid-template-columns:1fr;}
  .cal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:960px){
  section.lesson-sec{margin:4rem 0;}
  .pieza-card{padding:30px 28px;}
  .compare{grid-template-columns:1fr;}
  .overview-hero-card{padding:38px 34px 34px;}
}
@media(max-width:768px){
  .lesson-hero{margin-top:2rem;margin-bottom:2.5rem;}
  .overview-hero{margin-top:1.75rem;margin-bottom:3rem;}
  .overview-hero-card{padding:32px 26px 30px;border-radius:18px;}
  .hero-badges{gap:8px;margin-bottom:22px;}
  .badge-modulo,.badge-leccion,.badge-categoria{font-size:.6rem;padding:6px 11px;}
  .pieza-card{padding:26px 22px;border-radius:16px;}
  .principio{padding:22px 22px;}
  .principio-body h4,.principio-title{font-size:1.15rem;}
  .principio-num{font-size:.6rem;margin-bottom:12px;}
  .prod-step{grid-template-columns:1fr;gap:10px;padding:22px 24px;}
  .prod-time{align-self:flex-start;}
  .reason-grid,.reason-grid.rg-3,.reason-grid.rg-6{grid-template-columns:1fr;}
  .mini-flow,.mini-flow.mf-3,.mini-flow.mf-5{grid-template-columns:1fr;}
  .cal-grid{grid-template-columns:1fr;}
  .seq-step{grid-template-columns:1fr;gap:6px;}
  .callout{padding:20px 22px;}
  .dont-box,.do-box{padding:24px 24px 20px;}
  .check-section{padding:22px 24px 20px;}
  .img-slot{padding:34px 24px;}
  .excuse-box{padding:20px 22px 18px;}
  .action-card{padding:22px 20px;}
  .lesson-hero h1{font-size:clamp(1.65rem,8vw,2.4rem);letter-spacing:-1px;}
  .overview-hero-card h1{font-size:clamp(1.55rem,7vw,2.1rem);letter-spacing:-.6px;}
  h2.sec-title{font-size:clamp(1.3rem,6vw,1.65rem);letter-spacing:-.5px;}
  .lesson-sub{font-size:.98rem;}
}
@media(max-width:480px){
  section.lesson-sec{margin:3rem 0;}
  .pieza-card{padding:22px 18px;}
  .overview-hero-card{padding:28px 22px 26px;}
  .reason-card{padding:22px 22px 20px;}
  .hero-badges{gap:6px;}
  .badge-modulo,.badge-leccion,.badge-categoria{font-size:.56rem;padding:5px 9px;letter-spacing:2px;}
  .container{padding-left:18px;padding-right:18px;}
}