/* ============================================================
   SINDICATO · B2Boost Paid Media
   Brand: #E85D3C dominante, #F5F3EF off-white, sin gradientes.
   Type: Archivo Narrow Bold uppercase, line-height 0.9, tracking -0.025em.
   Motion: Emil-grade. Custom ease-out. Sub-300ms en UI. No animar `all`.
   ============================================================ */

:root{
  /* Brand */
  --sindicato-orange:#E85D3C;
  --orange-dark:#D24D2E;
  --orange-deeper:#A53819;
  --orange-tint:#FAE6DD;
  --black:#141414;
  --ink:#141414;
  --white:#FFFFFF;
  --off-white:#F5F3EF;
  --paper:#F5F3EF;
  --grey:#8A857D;
  --grey-2:#6F6B62;
  --hairline:#E5E2DC;
  --hairline-strong:#D8D4CB;
  --hairline-dark:rgba(255,255,255,0.10);
  --ok:#3FD88A; --warn:#D9A441; --bad:#DC2626;

  /* Layout */
  --container: min(1320px, 92vw);
  --container-wide: min(1480px, 94vw);
  --r-0: 0px;
  --r-1: 4px;
  --r-2: 8px;

  /* Easing (Emil-strong custom curves) */
  --ease-out:cubic-bezier(0.23,1,0.32,1);            /* primary UI ease-out */
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --ease:cubic-bezier(0.22,1,0.36,1);                /* legacy alias used in places */

  /* Durations */
  --t-press:120ms;
  --t-fast:160ms;
  --t-med:220ms;
  --t-slow:360ms;
  --t-reveal:680ms;

  /* Fonts */
  --font-display:'Archivo Narrow','Arial Narrow',sans-serif;
  --font-body:'Archivo','Inter Tight',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* Animation intensity multiplier (TweaksPanel) */
  --anim:1;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--off-white);scroll-behavior:smooth;text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--off-white);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
img,svg{max-width:100%;display:block}
::selection{background:var(--sindicato-orange);color:var(--white)}
:focus-visible{outline:2px solid var(--sindicato-orange);outline-offset:3px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;width:100%}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 24px;width:100%}

/* A11y skip link */
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--white);padding:8px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;z-index:200}
.skip-link:focus{left:8px}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.025em;line-height:0.9;color:var(--ink)}
h1{font-size:clamp(48px,7vw,108px);letter-spacing:-0.03em;line-height:0.92}
h2{font-size:clamp(40px,6vw,112px);letter-spacing:-0.03em;line-height:0.88}
h3{font-size:clamp(26px,2.6vw,46px);letter-spacing:-0.022em;line-height:0.95}
h4{font-size:clamp(20px,1.6vw,28px);line-height:1.0;letter-spacing:-0.015em}

.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--sindicato-orange);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.eyebrow.on-orange{color:var(--ink)}
.eyebrow.on-dark{color:var(--sindicato-orange)}

p{color:var(--ink);max-width:62ch}
.lead{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.9vw,30px);line-height:1.18;letter-spacing:-0.01em;color:var(--ink);max-width:30ch}
.lead-mixed{font-family:var(--font-body);font-weight:400;font-size:clamp(16px,1.3vw,20px);line-height:1.55;max-width:62ch;text-wrap:pretty}
.mute{color:var(--grey)}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey)}

/* italic accent — the only italic the brand allows */
.accent{font-style:italic;font-weight:700;color:var(--sindicato-orange);line-height:1.1;padding-bottom:0.05em}
.accent-ink{font-style:italic;color:var(--sindicato-orange)}

/* ============================================================
   BUTTONS · Emil scale-on-press, specific properties (no `all`)
   ============================================================ */
.btn{display:inline-flex;align-items:stretch;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;border-radius:var(--r-0);transition:background var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out),transform var(--t-press) var(--ease-out),box-shadow var(--t-med) var(--ease-out);cursor:pointer;border:none;white-space:nowrap;text-decoration:none;height:52px;line-height:1;will-change:transform}
.btn>.lbl{display:inline-flex;align-items:center;padding:0 22px}
.btn>.ar{display:inline-flex;align-items:center;justify-content:center;width:52px;border-left:1px solid currentColor;font-size:16px;font-weight:700;transition:transform var(--t-med) var(--ease-out)}
.btn:hover>.ar{transform:translate(3px,-3px)}
.btn:active{transform:scale(0.97)}
.btn-sm{height:44px;font-size:12px}
.btn-sm>.lbl{padding:0 16px}
.btn-sm>.ar{width:44px;font-size:14px}

.btn-primary{background:var(--sindicato-orange);color:var(--white)}
.btn-primary:hover{background:var(--orange-dark)}
.btn-primary>.ar{border-left-color:rgba(255,255,255,0.32)}

.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:#000}
.btn-dark>.ar{border-left-color:rgba(255,255,255,0.32)}

.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--white)}

.btn-ghost-light{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4)}
.btn-ghost-light:hover{background:var(--white);color:var(--ink)}

.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--off-white)}

/* ============================================================
   NAV — sticky, refined
   ============================================================ */
header.nav{position:sticky;top:0;z-index:80;background:rgba(245,243,239,0.88);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px);border-bottom:1px solid var(--hairline);transition:background var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
header.nav.invert{background:rgba(20,20,20,0.78);border-bottom:1px solid var(--hairline-dark);color:var(--white)}
header.nav.invert .brand-sub{color:rgba(255,255,255,0.55);border-left-color:rgba(255,255,255,0.18)}
header.nav.invert .brand-mark img{filter:invert(1)}
header.nav.invert .nav-links a{color:rgba(255,255,255,0.78)}
header.nav.invert .nav-links a:hover{color:var(--white)}

.nav-in{display:flex;align-items:center;gap:32px;height:68px;max-width:var(--container-wide);margin:0 auto;padding:0 24px}
.brand-mark{display:flex;align-items:center;gap:14px}
.brand-mark img{height:22px;width:auto}
.brand-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey);padding-left:14px;border-left:1px solid var(--hairline-strong);line-height:1.2}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{font-family:var(--font-display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink);transition:color var(--t-fast) var(--ease-out)}
.nav-links a:hover{color:var(--sindicato-orange)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-toggle{display:none}

/* Mobile nav CTA · compact pill stays visible */
.nav-cta-btn .lbl-short{display:none}

@media (max-width:980px){
  .nav-in{gap:12px;height:62px}
  .brand-sub{display:none}
  .nav-links{position:fixed;inset:62px 0 auto 0;flex-direction:column;background:var(--off-white);padding:24px;gap:20px;border-bottom:1px solid var(--hairline);transform:translateY(-120%);transition:transform var(--t-med) var(--ease-out);align-items:flex-start}
  .nav-links.open{transform:translateY(0)}
  .nav-cta{gap:8px}
  .nav-cta .nav-cta-btn{display:inline-flex;height:40px;font-size:11px;letter-spacing:0.05em}
  .nav-cta .nav-cta-btn .lbl-full{display:none}
  .nav-cta .nav-cta-btn .lbl-short{display:inline-flex;padding:0 14px}
  .nav-cta .nav-cta-btn > .ar{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:22px}
}

/* ============================================================
   SECTION RHYTHM
   ============================================================ */
section{position:relative}
.bg-off{background:var(--off-white)}
.bg-white{background:var(--white)}
.bg-tint{background:var(--orange-tint)}
.bg-dark{background:var(--ink);color:var(--white)}

.sec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:56px;max-width:920px}
.sec-head .lead-mixed{margin-top:4px}

/* ============================================================
   REVEAL — Emil: no scale(0), use opacity + small Y, stagger via --i
   ============================================================ */
.reveal{opacity:0;transform:translateY(calc(16px * var(--anim)));transition:opacity 680ms var(--ease-out),transform 680ms var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.reveal.in{opacity:1;transform:none}
.reveal-fast{opacity:0;transition:opacity 420ms var(--ease-out)}
.reveal-fast.in{opacity:1}

/* ============================================================
   HERO — paper variant. Top to bottom flow, no flex-end trick.
   Pre-flight: hero fits viewport, headline <= 2 lines on desktop,
   sub <= 4 lines, CTAs visible.
   ============================================================ */
.hero{position:relative;min-height:auto;padding:60px 0 80px;background:var(--off-white);overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(to right, var(--hairline) 1px, transparent 1px);background-size:calc(100%/12) 100%;opacity:0.5;pointer-events:none;z-index:0}
.hero-bgword{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;line-height:1;font-size:clamp(180px,28vw,420px);color:var(--ink);opacity:0.04;pointer-events:none;user-select:none;z-index:0;white-space:nowrap}

.hero-shell{position:relative;z-index:1;display:flex;flex-direction:column;gap:24px;align-items:flex-start;max-width:980px}

.hero-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey);flex-wrap:wrap}
.hero-eyebrow .he-dot{width:7px;height:7px;border-radius:50%;background:var(--sindicato-orange);box-shadow:0 0 0 5px rgba(232,93,60,0.16)}
.hero-eyebrow .he-sep{width:4px;height:4px;border-radius:50%;background:var(--hairline-strong)}

.hero-headline{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.025em;line-height:1.0;color:var(--ink);font-size:clamp(34px,4.6vw,68px);max-width:24ch;text-wrap:balance}
.hero-headline .hh-line{display:inline}

.hero-sub{font-family:var(--font-body);font-weight:400;font-size:clamp(16px,1.4vw,22px);line-height:1.5;color:var(--grey-2);max-width:62ch;text-wrap:pretty}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* HERO SYSTEM FLOW · Emil: explains the system, single 5s loop, motivated motion */
.hero-flow{display:flex;align-items:stretch;gap:0;width:100%;max-width:920px;margin-top:4px;padding:18px 0;border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong)}
.hf-node{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding:0 16px;position:relative;min-width:0}
.hf-node:first-child{padding-left:0}
.hf-node:last-child{padding-right:0}
.hf-dot{width:9px;height:9px;border-radius:50%;background:var(--hairline-strong);transition:background var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out);will-change:background,box-shadow}
.hf-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;font-size:13px;color:var(--ink);line-height:1.1;white-space:nowrap}
.hf-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey)}

.hf-line{flex:1 1 0;align-self:center;position:relative;height:1px;background:var(--hairline-strong);margin-top:3px;min-width:18px;overflow:hidden}
.hf-line-fill{position:absolute;inset:0 100% 0 0;background:var(--sindicato-orange);transition:none}

/* Single 5s loop · Each line fills in sequence, then resets together */
@keyframes hfLineSweep{
  0%, 100% { right: 100%; }
  50% { right: 0%; }
}
@keyframes hfNodePulse{
  0%, 100% { background: var(--hairline-strong); box-shadow: none; }
  50% { background: var(--sindicato-orange); box-shadow: 0 0 0 5px rgba(232,93,60,0.16); }
}

@media (prefers-reduced-motion: no-preference){
  .hf-line .hf-line-fill{
    animation: hfLineSweep 5000ms linear infinite;
    animation-delay: calc(var(--i, 0) * 800ms);
    inset: 0 0 0 0;
  }
  .hf-node .hf-dot{
    animation: hfNodePulse 5000ms linear infinite;
    animation-delay: calc(var(--i, 0) * 800ms - 200ms);
  }
  .hf-node:first-child .hf-dot{ animation-delay: 0ms; }
}

.hero-claim{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:24px;border-top:1px solid var(--hairline-strong);width:100%;max-width:560px}
.hero-claim .hc-rule{display:none}
.hero-claim .hc-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--grey);flex-shrink:0}
.hero-claim .hc-text{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.018em;font-size:clamp(18px,1.9vw,26px);color:var(--ink);font-style:italic}

@media (max-width:780px){
  .hero{padding:64px 0 80px}
  .hero-shell{gap:28px}
  .hero-headline{font-size:clamp(30px,7.6vw,52px);letter-spacing:-0.022em;line-height:1.0}
  .hero-sub{font-size:16px;line-height:1.5}
  .hero-ctas{width:100%;flex-direction:column;gap:10px}
  .hero-ctas .btn{width:100%;justify-content:space-between}
  .hero-ctas .btn>.lbl{flex:1}
  .hero-claim{flex-direction:column;align-items:flex-start;gap:8px;padding-top:20px;margin-top:16px}
  .hero-claim .hc-text{font-size:18px}

  /* HeroFlow vertical · ditch horizontal sweep, no continuous loops on mobile */
  .hero-flow{flex-direction:column;gap:0;padding:20px 0;align-items:flex-start;border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong)}
  .hf-node{padding:10px 0;flex-direction:row;align-items:center;gap:12px;width:100%}
  .hf-node:first-child{padding-top:4px}
  .hf-node:last-child{padding-bottom:4px}
  .hf-dot{flex-shrink:0;animation:none !important;background:var(--sindicato-orange) !important}
  .hf-label{font-size:14px}
  .hf-sub{margin-left:auto}
  .hf-line{display:none}
}

/* ============================================================
   PROOF STRIP · una unidad, logos grandes y legibles, no marquee
   ============================================================ */
.proof-strip{padding:96px 0 96px;background:var(--ink);color:var(--white);border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08)}
.proof-strip .wrap-wide{display:flex;flex-direction:column;gap:48px}
.proof-head{display:flex;flex-direction:column;gap:18px;max-width:780px}
.proof-headline{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.022em;line-height:0.95;font-size:clamp(32px,4vw,56px);color:var(--white);max-width:24ch;text-wrap:balance}
.proof-sub{font-family:var(--font-body);font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:rgba(245,243,239,0.78);max-width:62ch}

.proof-grid{display:grid;grid-template-columns:repeat(5, minmax(140px, 1fr));gap:12px;align-items:stretch}
.proof-item{display:flex;align-items:center;justify-content:center;min-height:96px;padding:22px 26px;border:1px solid rgba(245,243,239,0.10);background:rgba(245,243,239,0.03);transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.proof-item:hover{background:rgba(245,243,239,0.06);border-color:rgba(245,243,239,0.18)}
.proof-item img{width:clamp(110px, 10vw, 160px);max-height:56px;object-fit:contain;filter:brightness(0) invert(1);opacity:0.85;transition:opacity var(--t-fast) var(--ease-out)}
.proof-item:hover img{opacity:1}
.proof-disclaimer{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(245,243,239,0.45);line-height:1.6;max-width:88ch;margin-top:8px}

@media (max-width:1080px){
  .proof-grid{grid-template-columns:repeat(4, 1fr)}
}
@media (max-width:768px){
  .proof-strip{padding:64px 0 72px}
  .proof-strip .wrap-wide{gap:32px}
  .proof-grid{grid-template-columns:repeat(2, 1fr);gap:10px}
  .proof-item{min-height:76px;padding:18px}
  .proof-item img{width:clamp(90px, 32vw, 120px);max-height:48px}
}

/* ============================================================
   MANIFESTO — dark, theatrical
   ============================================================ */
.manifesto{background:var(--ink);color:var(--white);padding:clamp(96px,12vw,160px) 0;position:relative;overflow:hidden}
.manifesto h2{color:var(--white);font-size:clamp(36px,5vw,84px);max-width:20ch;text-wrap:balance}
.manifesto .or{color:var(--sindicato-orange);font-style:italic;line-height:1.05;padding-bottom:0.04em;display:inline-block}
.manifesto .m-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end}
.manifesto-side{padding-bottom:12px}
.manifesto-side p{color:rgba(245,243,239,0.82);font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:48ch}

/* COMPARADOR DOLOR · "Sin un sistema" vs "Con B2Boost" · contraste alto, jerarquía clara */
.dolor{margin-top:72px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dol-col{padding:36px 32px 32px;display:flex;flex-direction:column;gap:24px;position:relative;overflow:hidden}

/* Broken · tinte rojo perceptible, accent rule rojo a la izquierda */
.dol-col.broken{background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.25)}
.dol-col.broken::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#ef4444}

/* Healed · tinte naranja con presencia, accent rule naranja sólido */
.dol-col.healed{background:rgba(232,93,60,0.10);border:1px solid rgba(232,93,60,0.40)}
.dol-col.healed::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sindicato-orange)}

.dol-title{font-family:var(--font-mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.10);display:flex;align-items:center;gap:10px}
.dol-title::before{content:"";width:8px;height:8px;border-radius:50%}
.dol-col.broken .dol-title{color:#ff6b6b}
.dol-col.broken .dol-title::before{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,0.18)}
.dol-col.healed .dol-title{color:var(--sindicato-orange);border-bottom-color:rgba(232,93,60,0.30)}
.dol-col.healed .dol-title::before{background:var(--sindicato-orange);box-shadow:0 0 0 4px rgba(232,93,60,0.20)}

.dol-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.dol-list li{display:flex;gap:14px;align-items:flex-start;font-family:var(--font-body);font-size:15px;line-height:1.5;color:rgba(245,243,239,0.92)}
.dol-list li .n{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;color:rgba(255,255,255,0.42);min-width:26px;padding-top:3px;font-weight:500}
.dol-list li .t{flex:1}
.dol-list li.break{color:rgba(245,243,239,0.96)}
.dol-list li.break .n{color:#ff6b6b;font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:0;padding-top:1px;line-height:1.4}
.dol-list li.break .t{text-decoration:line-through;text-decoration-color:rgba(239,68,68,0.55);text-decoration-thickness:1px;text-underline-offset:3px;color:rgba(245,243,239,0.78)}

/* Footer "stamp" · bigger, heavier, clear visual win/loss */
.dol-foot{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.015em;font-size:clamp(20px,1.9vw,28px);padding:18px 16px;line-height:1.1;margin-top:auto;text-align:center;border:1px solid currentColor}
.dol-foot.bad{color:#ff6b6b;background:rgba(239,68,68,0.08)}
.dol-foot.ok{color:var(--white);background:var(--sindicato-orange);border-color:var(--sindicato-orange)}

/* Healed column enters slightly later · storytelling: first the break, then the fix */
@media (prefers-reduced-motion: no-preference){
  .dolor.reveal .dol-col.broken{transition-delay:0ms}
  .dolor.reveal .dol-col.healed{transition:opacity 680ms var(--ease-out),transform 680ms var(--ease-out);transition-delay:280ms;opacity:0;transform:translateY(10px)}
  .dolor.reveal.in .dol-col.healed{opacity:1;transform:none}
}

@media (max-width:780px){
  .dolor{grid-template-columns:1fr;gap:14px;margin-top:48px}
  .dol-col{padding:28px 22px 24px;gap:20px}
  .dol-list li{font-size:14px}
  .dol-foot{font-size:18px;padding:14px}
}

.flow{margin-top:80px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12)}
.flow-stage{padding:32px 24px 32px 0;border-right:1px solid rgba(255,255,255,0.10);display:flex;flex-direction:column;gap:14px;position:relative;transition:background var(--t-med) var(--ease-out)}
.flow-stage:last-child{border-right:none}
.flow-stage:hover{background:rgba(232,93,60,0.05)}
.flow-stage .n{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;color:var(--sindicato-orange);text-transform:uppercase}
.flow-stage .ttl{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(18px,2vw,28px);line-height:0.98;color:var(--white)}
.flow-stage .sub{font-family:var(--font-body);font-size:13px;line-height:1.5;color:rgba(245,243,239,0.62)}
.flow-stage .arr{position:absolute;top:28px;right:10px;font-family:var(--font-mono);color:var(--sindicato-orange);font-size:14px;opacity:0.7}

@media (max-width:880px){
  .manifesto{padding:80px 0 96px}
  .manifesto .m-grid{grid-template-columns:1fr;gap:32px}
  .flow{margin-top:48px;grid-template-columns:1fr}
  .flow-stage{padding:24px 0;border-right:none;border-bottom:1px solid rgba(255,255,255,0.10)}
  .flow-stage:last-child{border-bottom:none}
  .flow-stage .arr{display:none}
}

/* ============================================================
   CAPABILITIES — 4 nodes, hover invert
   ============================================================ */
.cap-sec{padding:clamp(96px,12vw,160px) 0;background:var(--off-white)}
.cap-diagram{position:relative;margin-top:8px;background:var(--white);border:1px solid var(--hairline-strong);padding:40px}

.cap-flow{display:grid;grid-template-columns:repeat(4, 1fr);gap:0;position:relative;align-items:stretch}
.cap-node{background:var(--off-white);border:1px solid var(--hairline-strong);padding:28px 24px;display:flex;flex-direction:column;gap:14px;position:relative;cursor:pointer;transition:background var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out),transform var(--t-press) var(--ease-out);min-height:280px;overflow:hidden}
.cap-node::before{content:attr(data-n);position:absolute;bottom:-14px;right:8px;font-family:var(--font-display);font-weight:700;font-size:110px;letter-spacing:-0.05em;line-height:1;color:var(--ink);opacity:0.04;pointer-events:none;transition:opacity var(--t-med) var(--ease-out);text-transform:uppercase}
.cap-node + .cap-node{border-left:none}
.cap-node:hover,.cap-node.on{background:var(--ink);border-color:var(--ink)}
.cap-node:hover .ttl,.cap-node.on .ttl,
.cap-node:hover .one,.cap-node.on .one,
.cap-node:hover .cn-copy,.cap-node.on .cn-copy{color:var(--white)}
.cap-node:hover::before,.cap-node.on::before{opacity:0.08;color:var(--white)}
.cap-node .head{display:flex;justify-content:space-between;align-items:flex-start}
.cap-node .num{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;color:var(--sindicato-orange);text-transform:uppercase}
.cap-node .ttl{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(22px,2.2vw,32px);line-height:0.94;color:var(--ink);transition:color var(--t-med) var(--ease-out)}
.cap-node .one{font-family:var(--font-display);font-weight:500;font-size:14px;line-height:1.3;letter-spacing:-0.005em;color:var(--ink);text-transform:none;transition:color var(--t-med) var(--ease-out)}

/* Mini-diagramas tipográficos · uno por capacidad, brand-safe (no iconos) */
.cap-vis{margin-top:auto;padding-top:18px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:10px;transition:border-color var(--t-med) var(--ease-out)}
.cap-node:hover .cap-vis,.cap-node.on .cap-vis{border-top-color:rgba(255,255,255,0.18)}

/* Shared chip helpers */
.cap-vis .pt-chip{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--hairline-strong);color:var(--grey);background:transparent;line-height:1;transition:color var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.cap-node:hover .cap-vis .pt-chip,.cap-node.on .cap-vis .pt-chip{color:rgba(255,255,255,0.86);border-color:rgba(255,255,255,0.24)}

/* 01 · Adquisición · 4 canales convergen en una ruta */
.vis-converge .vc-row{display:grid;grid-template-columns:repeat(4, 1fr);gap:4px}
.vis-converge .vc-pt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;padding:5px 4px;border:1px solid var(--hairline-strong);color:var(--grey);text-align:center;line-height:1;transition:color var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.cap-node:hover .vis-converge .vc-pt,.cap-node.on .vis-converge .vc-pt{color:rgba(255,255,255,0.86);border-color:rgba(255,255,255,0.24)}
.vis-converge .vc-funnel{display:block;width:100%;height:32px;opacity:0.5}
.vis-converge .vc-funnel line{stroke:var(--sindicato-orange);stroke-width:1;stroke-linecap:round}
.vis-converge .vc-out{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sindicato-orange);font-weight:500}
.vis-converge .vc-dot{width:9px;height:9px;border-radius:50%;background:var(--sindicato-orange);box-shadow:0 0 0 3px rgba(232,93,60,0.18)}

/* 02 · Trazabilidad · lead con metadata adjunta */
.vis-tag .vt-chip{display:inline-flex;align-items:baseline;gap:8px;padding:7px 10px;background:var(--sindicato-orange);color:var(--white);font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;width:fit-content;line-height:1}
.vis-tag .vt-id{font-variant-numeric:tabular-nums;opacity:0.85}
.vis-tag .vt-meta{display:flex;flex-direction:column;gap:5px;padding-left:14px;border-left:2px solid var(--hairline-strong);font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey);line-height:1.4;transition:color var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.vis-tag .vt-meta b{color:var(--sindicato-orange);font-weight:600;letter-spacing:0.12em;margin-right:4px}
.cap-node:hover .vis-tag .vt-meta,.cap-node.on .vis-tag .vt-meta{color:rgba(255,255,255,0.86);border-left-color:var(--sindicato-orange)}

/* 03 · Operación · etapas con avance comercial */
.vis-stages .vo-track{display:flex;align-items:center;gap:6px}
.vis-stages .vo-step{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;position:relative}
.vis-stages .vo-step + .vo-step::before{content:"";position:absolute;left:-6px;top:5px;width:6px;height:1px;background:var(--hairline-strong)}
.vis-stages .vo-step.done + .vo-step::before,
.vis-stages .vo-step.now ~ .vo-step::before{background:var(--hairline-strong)}
.vis-stages .vo-step.done + .vo-step.done::before,
.vis-stages .vo-step.done + .vo-step.now::before{background:var(--sindicato-orange)}
.vis-stages .vo-dot{width:10px;height:10px;border-radius:50%;background:var(--hairline-strong);border:2px solid var(--white);transition:background var(--t-med) var(--ease-out)}
.vis-stages .vo-step.done .vo-dot{background:var(--sindicato-orange)}
.vis-stages .vo-step.now .vo-dot{background:var(--sindicato-orange);box-shadow:0 0 0 3px rgba(232,93,60,0.20)}
.vis-stages .vo-lb{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color var(--t-med) var(--ease-out)}
.vis-stages .vo-step.now .vo-lb{color:var(--sindicato-orange);font-weight:600}
.cap-node:hover .vis-stages .vo-lb,.cap-node.on .vis-stages .vo-lb{color:rgba(255,255,255,0.86)}
.cap-node:hover .vis-stages .vo-step.now .vo-lb,.cap-node.on .vis-stages .vo-step.now .vo-lb{color:var(--sindicato-orange)}
.vis-stages .vo-step .vo-dot{border-color:var(--off-white)}
.cap-node:hover .vis-stages .vo-step .vo-dot,.cap-node.on .vis-stages .vo-step .vo-dot{border-color:var(--ink)}
.vis-stages .vo-foot{font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey);line-height:1.4;transition:color var(--t-med) var(--ease-out)}
.cap-node:hover .vis-stages .vo-foot,.cap-node.on .vis-stages .vo-foot{color:rgba(255,255,255,0.65)}

/* 04 · Lectura · cadencia semanal */
.vis-cadence .vd-weeks{display:grid;grid-template-columns:repeat(4, 1fr);gap:6px}
.vis-cadence .vd-wk{display:flex;flex-direction:column;gap:6px}
.vis-cadence .vd-lb{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);transition:color var(--t-med) var(--ease-out)}
.vis-cadence .vd-bar{height:6px;background:var(--hairline-strong);width:100%;transition:background var(--t-med) var(--ease-out)}
.vis-cadence .vd-wk.done .vd-bar{background:var(--sindicato-orange);opacity:0.5}
.vis-cadence .vd-wk.now .vd-bar{background:var(--sindicato-orange)}
.vis-cadence .vd-wk.now .vd-lb{color:var(--sindicato-orange);font-weight:600}
.vis-cadence .vd-foot{font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey);line-height:1.4;transition:color var(--t-med) var(--ease-out)}
.cap-node:hover .vis-cadence .vd-foot,.cap-node.on .vis-cadence .vd-foot{color:rgba(255,255,255,0.65)}
.cap-node:hover .vis-cadence .vd-lb,.cap-node.on .vis-cadence .vd-lb{color:rgba(255,255,255,0.78)}

/* CIRCUIT LOOPBACK · cierra el circuito visualmente debajo de las 4 cards */
.cap-loopback{margin-top:18px;display:flex;align-items:center;gap:16px;padding:16px 24px;background:var(--off-white);border:1px solid var(--hairline-strong)}
.cap-loop-line{flex:1;height:1px;background:repeating-linear-gradient(to right, var(--sindicato-orange) 0 6px, transparent 6px 12px)}
.cap-loop-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--sindicato-orange);font-weight:500;white-space:nowrap}

@media (max-width:980px){
  .cap-flow{grid-template-columns:1fr 1fr}
  .cap-node{border:1px solid var(--hairline-strong)}
  .cap-node + .cap-node{border-left:1px solid var(--hairline-strong)}
}
@media (max-width:600px){
  .cap-diagram{padding:24px}
  .cap-flow{grid-template-columns:1fr;gap:0}
  .cap-node{min-height:auto;padding:24px 20px}
  .cap-node::before{font-size:80px;bottom:-10px}
}

/* ============================================================
   SETUP · qué cubre la fase inicial
   ============================================================ */
.setup-sec{padding:clamp(96px,12vw,160px) 0;background:var(--white)}
.setup-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;margin-bottom:48px}
.setup-side h2{font-size:clamp(36px,4.6vw,72px);line-height:0.92;letter-spacing:-0.028em;max-width:18ch;text-wrap:balance}
.setup-side h2 .or{color:var(--sindicato-orange);font-style:italic;display:inline-block;line-height:1.05;padding-bottom:0.04em}
.setup-side .lead-mixed{color:var(--grey-2);max-width:54ch}
.setup-closer{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.015em;font-size:clamp(18px,1.7vw,24px);line-height:1.15;color:var(--ink);margin-top:28px;padding-top:24px;border-top:1px solid var(--hairline-strong);max-width:32ch;font-style:italic}

.setup-card{background:var(--off-white);border:1px solid var(--hairline-strong);padding:36px 32px;display:flex;flex-direction:column;gap:20px}
.sc-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--sindicato-orange);padding-bottom:16px;border-bottom:1px solid var(--hairline-strong)}
.sc-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.sc-list li{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--ink);transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out);transition-delay:calc(var(--i,0) * 50ms)}
.sc-list li .sc-bullet{width:6px;height:6px;border-radius:50%;background:var(--sindicato-orange);flex-shrink:0;margin-top:8px}

/* Tier breakdown grid */
.setup-tiers{display:grid;grid-template-columns:repeat(4, 1fr);gap:1px;background:var(--hairline-strong);border:1px solid var(--hairline-strong)}
.st-card{background:var(--white);padding:28px 26px;display:flex;flex-direction:column;gap:14px;transition:background var(--t-med) var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.st-card:hover{background:var(--off-white)}
.st-head{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.st-key{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.018em;font-size:clamp(22px,2vw,28px);color:var(--ink);line-height:1}
.st-price-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-top:8px;padding:3px 0;border-top:1px dashed var(--hairline-strong)}
.st-price{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.012em;font-size:clamp(15px,1.3vw,18px);color:var(--sindicato-orange);line-height:1.05}
.st-copy{font-family:var(--font-body);font-size:13.5px;line-height:1.55;color:var(--grey-2);max-width:42ch}

/* Setup bridge · puente Setup → Pricing para evitar anclar en $10K como "el precio del paquete" */
.setup-bridge{margin-top:24px;background:var(--orange-tint);border:1px solid rgba(232,93,60,0.30);border-left:3px solid var(--sindicato-orange);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.setup-bridge .sb-text{font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--ink);max-width:78ch;font-weight:500}
.setup-bridge .sb-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;font-size:13px;color:var(--sindicato-orange);text-decoration:none;transition:transform var(--t-med) var(--ease-out)}
.setup-bridge .sb-link .ar{display:inline-flex;font-size:14px;transition:transform var(--t-med) var(--ease-out)}
.setup-bridge .sb-link:hover .ar{transform:translate(3px,-3px)}
@media (max-width:640px){
  .setup-bridge{padding:16px 18px;gap:12px}
  .setup-bridge .sb-text{font-size:13.5px}
}

@media (max-width:1080px){
  .setup-tiers{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:780px){
  .setup-sec{padding:80px 0}
  .setup-grid{grid-template-columns:1fr;gap:32px;margin-bottom:32px}
  .setup-card{padding:28px 24px}
  .setup-tiers{grid-template-columns:1fr}
}

/* ============================================================
   PRICING
   ============================================================ */
.price-sec{padding:clamp(96px,12vw,160px) 0;background:var(--off-white)}

/* Bloque didáctico · explica fee vs pauta antes de los tiers */
.price-intro{background:var(--white);border:1px solid var(--hairline-strong);border-left:3px solid var(--sindicato-orange);padding:32px 36px;margin:16px 0 32px;display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
.price-intro .pi-head{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.022em;font-size:clamp(20px,2vw,30px);color:var(--ink);line-height:1.0;max-width:20ch;margin:0}
.price-intro .pi-body{display:flex;flex-direction:column;gap:12px}
.price-intro .pi-body p{font-family:var(--font-body);font-size:14.5px;line-height:1.6;color:var(--grey-2);max-width:78ch}
.price-intro .pi-body p.pi-emph{color:var(--ink);font-weight:600;padding-top:14px;border-top:1px dashed var(--hairline-strong);margin-top:4px;font-style:italic}
@media (max-width:780px){
  .price-intro{grid-template-columns:1fr;gap:18px;padding:24px}
}

.price-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline-strong);border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong);margin-top:8px}
.price-card{background:var(--off-white);padding:36px 32px 32px;display:flex;flex-direction:column;gap:16px;position:relative;cursor:pointer;transition:background var(--t-med) var(--ease-out)}
.price-card:hover{background:var(--white)}
.price-card.on{background:var(--white)}
.price-card.featured{background:var(--white);box-shadow:inset 0 0 0 2px var(--sindicato-orange);z-index:1}
.price-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.price-card .name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(32px,3.4vw,48px);line-height:0.92;color:var(--ink)}
.price-card .flag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--sindicato-orange);white-space:nowrap;background:var(--orange-tint);padding:6px 10px}
.price-card .sub{font-family:var(--font-display);font-size:clamp(15px,1.25vw,17px);font-weight:500;color:var(--ink);line-height:1.3;letter-spacing:-0.005em;text-transform:none;max-width:32ch}
.price-card .copy{font-size:13px;line-height:1.55;color:var(--grey-2);margin-top:4px}

.price-card .num-block{padding:18px 0;border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong);margin:16px 0 4px}
.price-card .num-foot{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--grey);margin-top:12px;line-height:1.5}

/* Desglose fee/pauta/total/setup · estructura clara y legible */
.price-breakdown{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.price-breakdown li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;line-height:1.3}
.price-breakdown li .pb-k{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);font-weight:500;white-space:nowrap}
.price-breakdown li .pb-v{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:-0.005em;font-variant-numeric:tabular-nums;text-align:right;justify-self:end}
.price-breakdown li.pb-total{padding:11px 0 9px;border-top:1px solid var(--hairline-strong);margin-top:6px}
.price-breakdown li.pb-total .pb-k{color:var(--sindicato-orange);font-weight:600;letter-spacing:0.14em}
.price-breakdown li.pb-total .pb-v{font-size:clamp(15px,1.4vw,17px);font-weight:700;letter-spacing:-0.01em}

.price-card .group{margin-top:4px}
.price-card .group h5{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--sindicato-orange);margin-bottom:10px;font-weight:500}
.price-card .group ul{list-style:none}
.price-card .group li{padding:8px 0;font-size:13px;line-height:1.45;color:var(--ink);border-bottom:1px dashed var(--hairline);display:flex;gap:10px}
.price-card .group li::before{content:"·";color:var(--sindicato-orange);font-weight:700}
.price-card .group li:last-child{border-bottom:none}

.price-card .cta{margin-top:auto;padding-top:20px;display:flex}

/* Sessions block inside pricing card */
.price-card .sessions-block{padding:14px 0 0;margin-top:4px;border-top:1px dashed var(--hairline)}
.price-card .sessions-block .sess-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.012em;font-size:14px;color:var(--sindicato-orange);line-height:1.15}
.price-card .sessions-block .sess-detail{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey);line-height:1.5;margin-top:6px}

.price-card.custom{grid-column:1/-1;background:var(--ink);color:var(--white);display:grid;grid-template-columns:1fr 1.4fr auto;gap:48px;align-items:center;padding:40px;cursor:default}
.price-card.custom:hover{background:#1a1a1a}
.price-card.custom .name{color:var(--white)}
.price-card.custom .sub{color:rgba(245,243,239,0.78);font-size:17px}
.price-card.custom .copy{color:rgba(245,243,239,0.7);margin-top:0;font-size:14px}

/* Custom breakdown invertido para fondo dark */
.price-card.custom .price-breakdown li .pb-k{color:rgba(255,255,255,0.55)}
.price-card.custom .price-breakdown li .pb-v{color:var(--white);font-weight:500}
.price-card.custom .price-breakdown li.pb-total{border-top-color:rgba(255,255,255,0.18)}
.price-card.custom .price-breakdown li.pb-total .pb-k{color:var(--sindicato-orange)}
.price-card.custom .price-breakdown li.pb-total .pb-v{color:var(--white);font-weight:700}

/* Cierre debajo de los tiers · advertencia comercial */
.price-closer{margin-top:32px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.015em;font-size:clamp(16px,1.6vw,22px);color:var(--ink);line-height:1.2;text-align:center;padding:24px 16px 0;font-style:italic;max-width:54ch;margin-left:auto;margin-right:auto}

@media (max-width:1080px){.price-stage{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .price-stage{grid-template-columns:1fr}
  .price-card.custom{grid-template-columns:1fr;padding:28px;gap:20px}
  .price-breakdown li{grid-template-columns:1fr;gap:2px}
  .price-breakdown li .pb-v{text-align:left;justify-self:start}
}

/* ============================================================
   COMPARADOR · qué activa cada configuración
   ============================================================ */
.cmp-sec{padding:clamp(96px,12vw,140px) 0;background:var(--white)}
.cmp-table{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:1px;background:var(--hairline-strong);border:1px solid var(--hairline-strong);margin-top:8px}
.cmp-row{display:contents}
.cmp-cell{background:var(--white);padding:18px 20px;font-family:var(--font-body);font-size:13.5px;line-height:1.45;color:var(--ink);display:flex;align-items:center}
.cmp-row.cmp-head .cmp-cell{background:var(--ink);color:var(--white);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.012em;font-size:14px;padding:18px 20px;line-height:1}
.cmp-row.cmp-head .cmp-cell.cmp-tier{justify-content:center}
.cmp-row.cmp-head .cmp-cell.cmp-tier.feat{background:var(--sindicato-orange);color:var(--white)}
.cmp-cell.cmp-k{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);font-weight:500;background:var(--off-white)}
.cmp-cell.cmp-v{justify-content:flex-start;color:var(--ink)}
.cmp-cell.cmp-v.feat{background:rgba(232,93,60,0.04)}
.cmp-row.cmp-last .cmp-cell{background:rgba(232,93,60,0.04);font-style:italic;color:var(--grey-2);font-size:13px;line-height:1.45}
.cmp-row.cmp-last .cmp-cell.cmp-k{background:var(--orange-tint);color:var(--sindicato-orange);font-style:normal;font-weight:500}

@media (max-width:980px){
  .cmp-table{grid-template-columns:1fr;border:1px solid var(--hairline-strong)}
  .cmp-row{display:flex;flex-direction:column;border-bottom:1px solid var(--hairline-strong)}
  .cmp-row:last-child{border-bottom:none}
  .cmp-row.cmp-head{display:none}
  .cmp-cell{padding:12px 18px;font-size:13px}
  .cmp-cell.cmp-k{font-size:10px;background:var(--ink);color:var(--sindicato-orange);padding:10px 18px}
  .cmp-cell.cmp-v::before{content:attr(data-tier) ":";display:none}
  .cmp-row .cmp-cell.cmp-v:nth-child(2)::before{content:"Start · ";color:var(--grey);font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;display:inline-block;margin-right:8px;min-width:60px}
  .cmp-row .cmp-cell.cmp-v:nth-child(3)::before{content:"Signal · ";color:var(--sindicato-orange);font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;display:inline-block;margin-right:8px;min-width:60px}
  .cmp-row .cmp-cell.cmp-v:nth-child(4)::before{content:"Control · ";color:var(--grey);font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;display:inline-block;margin-right:8px;min-width:60px}
  .cmp-row .cmp-cell.cmp-v:nth-child(5)::before{content:"Custom · ";color:var(--grey);font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;display:inline-block;margin-right:8px;min-width:60px}
}

/* ============================================================
   EXTENSIONS · capacidades opcionales
   ============================================================ */
.ext-sec{padding:clamp(96px,12vw,160px) 0;background:var(--off-white)}
.ext-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;background:var(--hairline-strong);border:1px solid var(--hairline-strong);margin-top:8px}
.ext-card{background:var(--white);padding:28px 26px;display:flex;flex-direction:column;gap:16px;transition:background var(--t-med) var(--ease-out);transition-delay:calc(var(--i,0) * 50ms)}
.ext-card:hover{background:var(--off-white)}
.ext-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.ext-key{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.018em;font-size:clamp(18px,1.6vw,22px);color:var(--ink);line-height:1.05;flex:1;min-width:0}
.ext-from{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sindicato-orange);text-align:right;white-space:nowrap;padding-top:3px;font-weight:500;line-height:1.3}
.ext-range{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--off-white);border-left:2px solid var(--sindicato-orange)}
.ext-range-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey)}
.ext-range-val{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:-0.005em;color:var(--ink);font-variant-numeric:tabular-nums}
.ext-copy{font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--grey-2);max-width:42ch}

.ext-disclaimer{margin-top:24px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey);max-width:88ch;line-height:1.7}

@media (max-width:1080px){.ext-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:640px){.ext-grid{grid-template-columns:1fr}}

/* ============================================================
   DEMO NOTE + FORM (Lead capture · Web3Forms + Klaviyo)
   ============================================================ */
.demo-note{background:var(--off-white);padding:0 0 clamp(48px, 6vw, 80px)}
.dn-shell{background:var(--ink);color:var(--white);padding:36px 40px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;border:1px solid var(--ink)}
.dn-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--sindicato-orange);padding:10px 14px;border:1px solid rgba(232,93,60,0.4);background:rgba(232,93,60,0.08);align-self:flex-start;white-space:nowrap}
.dn-body{display:flex;flex-direction:column;gap:12px}
.dn-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(20px,2.2vw,28px);line-height:1.05;color:var(--white);max-width:36ch}
.dn-text{font-family:var(--font-body);font-size:14px;line-height:1.55;color:rgba(245,243,239,0.86);max-width:62ch}

/* Lead form · sits below dn-shell inside #demo */
.dn-form{background:var(--off-white);border:1px solid var(--hairline-strong);border-top:none;padding:32px 40px 30px;display:flex;flex-direction:column;gap:22px}
.dn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.dn-form .lf{display:flex;flex-direction:column;gap:6px;min-width:0}
.dn-form .lf.full{grid-column:1 / -1}
.dn-form .lf label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey-2);font-weight:500}
.dn-form .lf .req{color:var(--sindicato-orange);margin-left:4px}
.dn-form .lf input,.dn-form .lf textarea{font-family:var(--font-body);font-size:14.5px;line-height:1.4;padding:11px 13px;background:var(--white);border:1px solid var(--hairline-strong);color:var(--ink);transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);width:100%;resize:vertical;border-radius:0;-webkit-appearance:none;appearance:none}
.dn-form .lf input::placeholder,.dn-form .lf textarea::placeholder{color:var(--grey);opacity:1}
.dn-form .lf input:focus,.dn-form .lf textarea:focus{outline:none;border-color:var(--sindicato-orange);box-shadow:0 0 0 3px rgba(232,93,60,0.16)}
.dn-form .lf textarea{min-height:84px}

.dn-consent{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--grey-2);cursor:pointer;user-select:none}
.dn-consent input{margin:3px 0 0;accent-color:var(--sindicato-orange);width:16px;height:16px;flex-shrink:0;cursor:pointer}

.dn-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dn-submit .btn:disabled{opacity:0.7;cursor:wait}
.dn-err{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--bad);line-height:1.4}

.dn-confirm{background:var(--ink);color:var(--white);padding:36px 40px;border:1px solid var(--ink);display:flex;flex-direction:column;gap:10px}
.dn-confirm h3{color:var(--white);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.022em;font-size:clamp(22px,2.4vw,32px);line-height:1.05;margin:0}
.dn-confirm p{color:rgba(245,243,239,0.86);font-size:14.5px;line-height:1.55;max-width:62ch}
.dn-confirm-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(245,243,239,0.6);margin-top:8px}

@media (max-width:980px){
  .dn-shell{grid-template-columns:1fr;gap:20px;padding:28px 24px}
}
@media (max-width:780px){
  .dn-form{padding:24px 22px}
  .dn-grid{grid-template-columns:1fr;gap:14px}
  .dn-confirm{padding:28px 22px}
}

/* ============================================================
   WHATSAPP FAB · fixed bottom-right, green pill
   ============================================================ */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(37,211,102,0.42),0 2px 6px rgba(0,0,0,0.18);transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out);text-decoration:none}
.wa-fab svg{width:28px;height:28px}
.wa-fab::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(37,211,102,0.55);animation:waPing 2.4s ease-out infinite;pointer-events:none}
.wa-fab::after{content:"Habla con un ejecutivo";position:absolute;right:68px;top:50%;transform:translateY(-50%) translateX(8px);background:var(--ink);color:var(--white);font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.02em;padding:8px 13px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out);text-transform:uppercase}
@keyframes waPing{0%{transform:scale(1);opacity:0.6}80%,100%{transform:scale(1.4);opacity:0}}

@media (hover: hover) and (pointer: fine){
  .wa-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 34px rgba(37,211,102,0.5),0 3px 8px rgba(0,0,0,0.22)}
  .wa-fab:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
}

@media (max-width:560px){
  .wa-fab{right:16px;bottom:16px;width:52px;height:52px}
  .wa-fab svg{width:26px;height:26px}
  .wa-fab::after{display:none}
}

@media (prefers-reduced-motion: reduce){
  .wa-fab::before{animation:none}
}

/* ============================================================
   CONFIGURATOR
   ============================================================ */
.cfg-sec{padding:clamp(96px,12vw,160px) 0;background:var(--ink)}
.cfg-sec .sec-head h2{color:var(--white)}
.cfg-sec .sec-head .lead-mixed{color:rgba(245,243,239,0.78)}

.cfg-shell{display:grid;grid-template-columns:1fr 1.1fr;gap:1px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.10);margin-top:8px}
.cfg-controls{background:var(--off-white);padding:40px 36px;display:flex;flex-direction:column;gap:28px}
.cfg-output{background:#0a0a0a;color:var(--white);padding:40px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}

.cfg-q{display:flex;flex-direction:column;gap:12px}
.cfg-q .q{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:-0.005em;color:var(--ink);line-height:1.1}
.cfg-q .opts{display:flex;gap:6px;flex-wrap:wrap}
.cfg-opt{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--hairline-strong);background:transparent;color:var(--grey-2);cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-press) var(--ease-out)}
.cfg-opt:hover{border-color:var(--ink);color:var(--ink)}
.cfg-opt.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.cfg-opt:active{transform:scale(0.97)}

.cfg-result .rec{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--sindicato-orange);margin-bottom:14px}
.cfg-result h3{color:var(--white);font-size:clamp(40px,4.6vw,68px);line-height:0.92;animation:recIn 320ms var(--ease-out) both}
.cfg-result .rec{animation:recIn 320ms var(--ease-out) both;animation-delay:40ms}
.cfg-result .why{animation:recIn 320ms var(--ease-out) both;animation-delay:80ms}
@keyframes recIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cfg-result.placeholder .rec{color:rgba(255,255,255,0.4)}
.cfg-result.placeholder h3{color:rgba(255,255,255,0.32);font-size:clamp(28px,3.2vw,48px)}
.cfg-result .why{font-family:var(--font-body);font-size:14px;line-height:1.55;color:rgba(245,243,239,0.78);margin-top:16px;max-width:42ch}
.cfg-result.placeholder .why{color:rgba(255,255,255,0.46)}

/* Configurator output · 5 métricas en stack vertical para que Fee + Pauta = Total se lea claro */
.cfg-numbers{display:flex;flex-direction:column;gap:12px;padding:18px 0;border-top:1px solid rgba(255,255,255,0.10);border-bottom:1px solid rgba(255,255,255,0.10)}
.cfg-numbers .n{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.cfg-numbers .n .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.6);font-weight:500;white-space:nowrap}
.cfg-numbers .n .v{font-family:var(--font-display);font-weight:600;font-size:clamp(14px,1.3vw,17px);color:var(--white);letter-spacing:-0.005em;line-height:1.15;font-variant-numeric:tabular-nums;text-align:right;justify-self:end;animation:numIn 220ms var(--ease-out) both;will-change:transform,opacity;text-wrap:pretty}
@keyframes numIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.cfg-numbers .n .s{grid-column:1/-1;font-family:var(--font-mono);font-size:9.5px;color:rgba(255,255,255,0.42);margin-top:-4px;letter-spacing:0.1em;text-transform:uppercase;line-height:1.5}

/* Fila enfatizada · Inversión mensual estimada (fee + pauta) */
.cfg-numbers .n.cfg-num-total{padding:11px 0 9px;border-top:1px solid rgba(255,255,255,0.18);border-bottom:1px solid rgba(255,255,255,0.18);margin:2px 0}
.cfg-numbers .n.cfg-num-total .k{color:var(--sindicato-orange);font-weight:600;letter-spacing:0.16em}
.cfg-numbers .n.cfg-num-total .v{font-size:clamp(18px,2vw,24px);font-weight:700;color:var(--white)}

/* Nota didáctica al pie del output · pauta se calibra en setup */
.cfg-note{font-family:var(--font-body);font-size:13px;line-height:1.55;color:rgba(245,243,239,0.72);max-width:62ch;margin-top:14px;padding:10px 0 0 14px;border-left:2px solid var(--sindicato-orange)}

@media (max-width:780px){
  .cfg-numbers .n{grid-template-columns:1fr;gap:2px}
  .cfg-numbers .n .v{text-align:left;justify-self:start}
  .cfg-numbers .n .s{margin-top:2px}
}

.cfg-actions{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:980px){
  .cfg-shell{grid-template-columns:1fr}
  .cfg-controls{padding:28px 20px}
  .cfg-output{padding:28px 20px}
}

/* ============================================================
   CONTROL CENTER — dashboard mockup
   ============================================================ */
.cc-sec{background:var(--ink);color:var(--white);padding:clamp(96px,13vw,180px) 0;overflow:hidden;position:relative}
.cc-sec h2{color:var(--white)}
.cc-sec .eyebrow{color:var(--sindicato-orange)}
.cc-head{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;margin-bottom:24px}
.cc-head .lead-mixed{color:rgba(245,243,239,0.78)}

.cc-illus-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:32px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.62);padding:8px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);width:fit-content}
.cc-illus-tag .cit-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px rgba(217,164,65,0.18)}
/* Tag inline · dentro del cc-window, visible cerca de los KPIs */
.cc-illus-tag.cc-illus-tag-inline{margin-bottom:18px;background:rgba(217,164,65,0.12);border-color:rgba(217,164,65,0.32);color:var(--warn)}
.cc-illus-tag.cc-illus-tag-inline .cit-dot{background:var(--warn);box-shadow:0 0 0 4px rgba(217,164,65,0.22)}

.cc-window{background:#0E0E0E;border:1px solid rgba(255,255,255,0.10);overflow:hidden;font-family:var(--font-mono);box-shadow:0 24px 64px -16px rgba(0,0,0,0.6)}
.cc-titlebar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#181818;border-bottom:1px solid rgba(255,255,255,0.06)}
.cc-titlebar .dots{display:flex;gap:6px}
.cc-titlebar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.18);display:block}
.cc-titlebar .crumb{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.cc-titlebar .right{margin-left:auto;display:flex;gap:14px;font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:0.14em;text-transform:uppercase}
.cc-titlebar .right .live{display:inline-flex;align-items:center;gap:6px;color:var(--ok)}
.cc-titlebar .right .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(63,216,138,0.18);animation:livePulse 1800ms ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.5}}

.cc-body{display:grid;grid-template-columns:220px 1fr 300px;min-height:520px}
.cc-side{border-right:1px solid rgba(255,255,255,0.06);padding:22px 0;display:flex;flex-direction:column}
.cc-side .ssec{padding:0 18px;margin-bottom:22px}
.cc-side .ssec .lbl{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.32);margin-bottom:12px}
.cc-side .item{padding:8px 18px;font-size:12px;color:rgba(255,255,255,0.72);display:flex;justify-content:space-between;align-items:center;border-left:2px solid transparent;cursor:pointer}
.cc-side .item.on{background:rgba(232,93,60,0.10);border-left-color:var(--sindicato-orange);color:var(--white)}
.cc-side .item .ct{font-size:10px;color:rgba(255,255,255,0.4)}

.cc-main{padding:26px 28px;border-right:1px solid rgba(255,255,255,0.06);overflow:hidden}
.cc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,0.06)}
.cc-kpi .lbl{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.42);margin-bottom:8px}
.cc-kpi .v{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--white);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1}
.cc-kpi .d{font-size:10px;letter-spacing:0.1em;color:var(--ok);margin-top:6px}
.cc-kpi .d.neg{color:var(--bad)}

.cc-table-head{display:grid;grid-template-columns:24px 1.6fr 1fr 1fr 80px 70px;gap:14px;padding:0 0 10px;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.38);border-bottom:1px solid rgba(255,255,255,0.06)}
.cc-row{display:grid;grid-template-columns:24px 1.6fr 1fr 1fr 80px 70px;gap:14px;padding:12px 0;font-size:12px;color:rgba(255,255,255,0.86);align-items:center;border-bottom:1px solid rgba(255,255,255,0.04)}
.cc-row.new{animation:rowIn 360ms var(--ease-out) forwards}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Spotlight lead row · pinned at top, advances through stages */
.cc-row.cc-spotlight{background:rgba(232,93,60,0.04);border-bottom:1px solid rgba(232,93,60,0.18);position:relative}
.cc-row.cc-spotlight::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sindicato-orange)}
.cc-row.cc-spotlight .marker.spot{background:var(--sindicato-orange);box-shadow:0 0 0 4px rgba(232,93,60,0.18);animation:spotPulse 2400ms ease-in-out infinite}
@keyframes spotPulse{0%,100%{box-shadow:0 0 0 4px rgba(232,93,60,0.18)}50%{box-shadow:0 0 0 6px rgba(232,93,60,0.04)}}
.cc-row.cc-spotlight .stage .pill{animation:pillSwap 280ms var(--ease-out) both;will-change:opacity,transform}
@keyframes pillSwap{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.cc-row.cc-spotlight .ago{color:var(--sindicato-orange)}

/* Pause spotlight cycle on user attention */
.cc-window:hover .cc-row.cc-spotlight .marker.spot{animation-play-state:paused}
.cc-row .marker{width:6px;height:6px;border-radius:50%;background:var(--sindicato-orange);justify-self:center}
.cc-row .name{font-family:var(--font-body);font-weight:500;color:var(--white);letter-spacing:0}
.cc-row .name .sub{font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,0.42);letter-spacing:0.1em;margin-top:2px;display:block;text-transform:uppercase}
.cc-row .origin{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.cc-row .stage{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:0.12em;text-transform:uppercase}
.cc-row .stage .pill{padding:3px 8px;background:rgba(255,255,255,0.08);color:var(--white)}
.cc-row .stage .pill.warn{background:rgba(217,164,65,0.18);color:var(--warn)}
.cc-row .stage .pill.ok{background:rgba(63,216,138,0.16);color:var(--ok)}
.cc-row .stage .pill.bad{background:rgba(220,38,38,0.18);color:var(--bad)}
.cc-row .stage .pill.orange{background:rgba(232,93,60,0.18);color:var(--sindicato-orange)}
.cc-row .val{font-variant-numeric:tabular-nums;text-align:right;color:var(--white)}
.cc-row .ago{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;color:rgba(255,255,255,0.42);text-align:right}

.cc-aside{padding:26px 22px;display:flex;flex-direction:column;gap:20px}
.cc-aside .blk{border:1px solid rgba(255,255,255,0.08);padding:16px;background:rgba(255,255,255,0.02)}
.cc-aside .blk .lbl{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.42);margin-bottom:10px}
.cc-aside .blk .v{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--white);letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.cc-aside .blk .t{font-size:11px;color:rgba(255,255,255,0.6);margin-top:8px;line-height:1.4}
.cc-aside .timeline{display:flex;flex-direction:column;gap:10px;font-size:11px}
.cc-aside .timeline .ev{display:flex;gap:10px;align-items:flex-start;transition:opacity 400ms var(--ease-out)}
.cc-aside .timeline .ev .t{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;color:rgba(255,255,255,0.42);min-width:42px;padding-top:2px;text-transform:uppercase}
.cc-aside .timeline .ev .x{flex:1;color:rgba(255,255,255,0.86);line-height:1.4}
.cc-aside .timeline .ev .x b{color:var(--sindicato-orange);font-weight:500}

.cc-foot{padding:12px 20px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center;background:#0a0a0a;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);gap:12px;flex-wrap:wrap}

.cc-sec.density-compact .cc-body{grid-template-columns:1fr}
.cc-sec.density-compact .cc-side,
.cc-sec.density-compact .cc-aside{display:none}
.cc-sec.density-compact .cc-main{border-right:none}

.cc-pulse{display:flex;gap:6px;align-items:center;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4)}
.cc-pulse .p{width:3px;background:rgba(255,255,255,0.2);animation:pulseBar 1500ms ease-in-out infinite}
.cc-pulse .p:nth-child(1){height:10px;animation-delay:0ms}
.cc-pulse .p:nth-child(2){height:18px;animation-delay:120ms;background:var(--sindicato-orange)}
.cc-pulse .p:nth-child(3){height:12px;animation-delay:240ms}
.cc-pulse .p:nth-child(4){height:22px;animation-delay:360ms;background:var(--sindicato-orange)}
.cc-pulse .p:nth-child(5){height:8px;animation-delay:480ms}
@keyframes pulseBar{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}

@media (max-width:1080px){
  .cc-body{grid-template-columns:1fr}
  .cc-side,.cc-aside{display:none}
}
@media (max-width:880px){
  .cc-head{grid-template-columns:1fr;gap:28px}
  .cc-kpis{grid-template-columns:1fr 1fr;gap:16px}
  .cc-table-head,.cc-row{grid-template-columns:14px 1.4fr 70px;gap:10px}
  .cc-table-head > :nth-child(3),
  .cc-table-head > :nth-child(4),
  .cc-table-head > :nth-child(5),
  .cc-row > .origin,
  .cc-row > .stage,
  .cc-row > .val{display:none}
}

/* ============================================================
   RESULTS — featured numbers, real data
   ============================================================ */
.results-sec{padding:clamp(96px,12vw,160px) 0;background:var(--off-white)}
.results-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:1px;background:var(--hairline-strong);border:1px solid var(--hairline-strong);margin-top:8px}
.result-tile{background:var(--white);padding:32px 24px;display:flex;flex-direction:column;gap:12px;transition:background var(--t-med) var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.result-tile:hover{background:var(--off-white)}
.result-tile .rt-num{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4.4vw,72px);letter-spacing:-0.035em;line-height:0.9;color:var(--sindicato-orange);font-variant-numeric:tabular-nums;text-wrap:balance}
.result-tile .rt-k{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);font-weight:600}
/* Contexto del múltiplo · legible, NO gris-sobre-gris. Ink puro con weight 500. */
.result-tile .rt-d{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--ink);font-weight:500;text-wrap:pretty;margin-top:6px;padding-top:8px;border-top:1px solid var(--hairline)}

.results-disclaimer{margin-top:32px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey);max-width:88ch;line-height:1.7}

@media (max-width:1080px){
  .results-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:640px){
  .results-grid{grid-template-columns:1fr}
  .result-tile{padding:24px 20px}
}

/* ============================================================
   CASES — image-led grids (Digital + Peltier)
   ============================================================ */
.cases-sec{padding:clamp(96px,12vw,160px) 0}
.cases-sec.digital{background:var(--white)}
.cases-sec.peltier{background:var(--off-white)}

/* Editorial bento · feature card 2x2 + secondary 1x1 */
.cases-grid{display:grid;gap:20px;margin-top:8px;grid-auto-rows:minmax(0, auto)}
.cases-grid.digital{grid-template-columns:repeat(3, 1fr)}
.cases-grid.peltier{grid-template-columns:repeat(4, 1fr)}

.case-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;cursor:pointer;transition-delay:calc(var(--i,0) * 40ms);min-width:0}
.case-card.peltier-card{cursor:default}

/* Feature card spans 2 cols × 2 rows */
.case-card.feature{grid-column:span 2;grid-row:span 2;gap:18px}
.case-card.feature .cc-img{aspect-ratio:16/11}
.case-card.feature .cc-nm{font-size:clamp(22px,2vw,32px);letter-spacing:-0.022em}
.case-card.feature .cc-cat{font-size:11px}
.case-card.feature .cc-desc{font-size:15px}

.cc-img{position:relative;width:100%;aspect-ratio:4/3;background-size:106%;background-position:center;background-color:var(--ink);overflow:hidden;border:1px solid var(--hairline-strong);transition:background-size 600ms var(--ease-out),border-color var(--t-med) var(--ease-out)}
.cc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,20,20,0) 50%, rgba(20,20,20,0.55) 100%);pointer-events:none;opacity:0.65;transition:opacity var(--t-med) var(--ease-out)}
.cc-img .cc-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);z-index:0}
.cc-img .cc-fallback .cc-fb-name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.018em;font-size:clamp(18px,1.8vw,26px);color:var(--white);line-height:1.05}
.cc-img .cc-fallback .cc-fb-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--sindicato-orange)}
.cc-img[style*="url"] .cc-fallback{opacity:0}

.cc-meta{display:flex;flex-direction:column;gap:6px}
.cc-meta .cc-nm{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.015em;font-size:clamp(16px,1.4vw,20px);line-height:1.1;color:var(--ink);transition:color var(--t-fast) var(--ease-out)}
.cc-meta .cc-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sindicato-orange)}
.cc-meta .cc-desc{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--grey-2);margin-top:4px;text-wrap:pretty}

/* Hover only on real cursor devices · Emil rule */
@media (hover: hover) and (pointer: fine){
  .cases-grid.digital .case-card:hover .cc-img{background-size:118%;border-color:var(--ink)}
  .cases-grid.digital .case-card:hover .cc-img::after{opacity:0.85}
  .cases-grid.digital .case-card:hover .cc-nm{color:var(--sindicato-orange)}
  .cases-grid.peltier .case-card:hover .cc-img{background-size:114%}
  .cases-grid.peltier .case-card:hover .cc-img::after{opacity:0.78}
  .case-card.feature:hover .cc-img{background-size:108%}
}

@media (max-width:980px){
  .cases-grid.digital{grid-template-columns:repeat(2, 1fr)}
  .cases-grid.peltier{grid-template-columns:repeat(2, 1fr)}
  .case-card.feature{grid-column:span 2;grid-row:auto}
  .case-card.feature .cc-img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .cases-grid.digital,.cases-grid.peltier{grid-template-columns:1fr;gap:16px}
  .case-card.feature{grid-column:span 1}
  .cc-img{aspect-ratio:16/10}
}

/* ============================================================
   FAMILY — B2Boost Paid + Live paired
   ============================================================ */
.fam-sec{padding:0;background:var(--white)}
.fam-row{display:grid;grid-template-columns:1fr 1fr;min-height:auto}
.fam-card{padding:clamp(64px,8vw,112px) clamp(36px,4.5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:48px;position:relative;overflow:hidden;min-height:520px}
.fam-card.paid{background:var(--off-white);color:var(--ink);border-right:1px solid var(--hairline)}
.fam-card.live{background:var(--ink);color:var(--white)}
.fam-card .lockup{height:54px;display:flex;align-items:center}
.fam-card .lockup img{height:54px;width:auto}
.fam-card .sys-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--sindicato-orange);margin-bottom:16px}
.fam-card h3{font-size:clamp(34px,4.4vw,60px);line-height:0.92;letter-spacing:-0.025em}
.fam-card.live h3{color:var(--white)}
.fam-card .copy{font-size:15px;line-height:1.55;max-width:48ch;margin-top:20px}
.fam-card.live .copy{color:rgba(245,243,239,0.78)}
.fam-card .actions{margin-top:auto;padding-top:28px;display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:880px){
  .fam-row{grid-template-columns:1fr}
  .fam-card{min-height:auto;padding:48px 24px}
  .fam-card.paid{border-right:none;border-bottom:1px solid var(--hairline)}
}

/* ============================================================
   B2BOOST LIVE — teaser
   ============================================================ */
.live-sec{padding:0;background:var(--ink);color:var(--white);overflow:hidden}
.live-sec h2{color:var(--white)}
.live-sec p{color:rgba(245,243,239,0.86)}
.live-sec.light{background:var(--off-white);color:var(--ink)}
.live-sec.light h2{color:var(--ink)}
.live-sec.light p{color:var(--ink)}

.live-grid{display:grid;grid-template-columns:1fr 1.1fr;min-height:600px}
.live-side{padding:clamp(64px,8vw,112px) clamp(36px,4.5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:24px}
.live-side h2{font-size:clamp(36px,5vw,80px);line-height:0.9;letter-spacing:-0.028em;max-width:18ch}
.live-side .lead-mixed{color:rgba(245,243,239,0.78);max-width:42ch}
.live-stage{position:relative;background:#0E0E0E;border-left:1px solid rgba(255,255,255,0.08);overflow:hidden;padding:48px;display:flex;align-items:center;justify-content:center}
.live-sec.light .live-stage{background:var(--white);border-left-color:var(--hairline-strong)}

.ls-frames{position:relative;width:100%;max-width:520px;display:flex;flex-direction:column;gap:12px}
.ls-row{display:grid;grid-template-columns:48px 1fr auto;gap:14px;padding:18px 22px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);align-items:center;opacity:0.58;transition:opacity var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out),background var(--t-med) var(--ease-out)}
.ls-row.on{opacity:1;border-color:var(--sindicato-orange);border-left-width:3px;background:rgba(232,93,60,0.16)}
.ls-row .num{font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;color:var(--sindicato-orange);text-transform:uppercase}
.ls-row .ttl{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.015em;font-size:18px;color:var(--white);line-height:1.05}
.ls-row .sub{font-family:var(--font-mono);font-size:11px;letter-spacing:0.10em;color:rgba(255,255,255,0.72);text-transform:uppercase;margin-top:4px}
.ls-row .pill{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(255,255,255,0.35);color:rgba(255,255,255,0.9);white-space:nowrap}
.ls-row.on .pill{border-color:var(--sindicato-orange);color:var(--sindicato-orange);background:rgba(232,93,60,0.15)}

.live-stage .lockup{position:absolute;top:24px;left:24px}
.live-stage .lockup img{height:32px}

.live-sec.light .ls-row{border-color:var(--hairline-strong);background:var(--white);opacity:0.65}
.live-sec.light .ls-row.on{opacity:1;border-color:var(--sindicato-orange);background:rgba(232,93,60,0.06)}
.live-sec.light .ls-row .ttl{color:var(--ink)}
.live-sec.light .ls-row .sub{color:var(--grey-2)}
.live-sec.light .ls-row .pill{border-color:var(--hairline-strong);color:var(--grey-2)}
.live-sec.light .ls-row.on .pill{border-color:var(--sindicato-orange);color:var(--sindicato-orange)}

@media (max-width:980px){
  .live-grid{grid-template-columns:1fr;min-height:auto}
  .live-stage{padding:48px 28px;min-height:520px}
}
@media (max-width:560px){
  .live-stage{padding:32px 20px;min-height:auto}
  .ls-row{grid-template-columns:36px 1fr;gap:10px;padding:14px 16px}
  .ls-row .pill{grid-column:2;justify-self:start}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-sec{padding:clamp(96px,12vw,160px) 0;background:var(--off-white)}
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.faq-items{border-top:1px solid var(--hairline-strong)}
.faq-item{border-bottom:1px solid var(--hairline-strong);overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;width:100%;text-align:left;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.4vw,20px);letter-spacing:-0.01em;color:var(--ink);cursor:pointer;line-height:1.15;transition:color var(--t-fast) var(--ease-out)}
.faq-q:hover{color:var(--sindicato-orange)}
.faq-q .ic{flex-shrink:0;width:14px;height:14px;position:relative}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:currentColor}
.faq-q .ic::before{top:6px;left:0;right:0;height:2px}
.faq-q .ic::after{top:0;bottom:0;left:6px;width:2px;transition:transform var(--t-med) var(--ease-out)}
.faq-item.open .faq-q .ic::after{transform:scaleY(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease-out)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 0 24px;font-size:15px;line-height:1.6;color:var(--grey-2);max-width:62ch}

@media (max-width:880px){.faq-grid{grid-template-columns:1fr;gap:24px}}

/* ============================================================
   FINAL CTA — orange wall
   ============================================================ */
.final{background:var(--sindicato-orange);color:var(--white);padding:clamp(112px,15vw,200px) 0;position:relative;overflow:hidden;text-align:center}
.final h2{color:var(--ink);font-size:clamp(48px,8vw,160px);line-height:0.88;letter-spacing:-0.035em;margin:0 auto;max-width:20ch;text-wrap:balance}
.final h2 .w{color:var(--white)}
.final .actions{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final .meta{margin-top:56px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(20,20,20,0.55);max-width:80ch;margin-left:auto;margin-right:auto;line-height:1.6}

@media (max-width:560px){
  .final{padding:80px 0 96px}
  .final .actions{flex-direction:column;align-items:stretch;padding:0 16px}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:rgba(245,243,239,0.7);padding:96px 0 40px;position:relative;overflow:hidden}
.footer-statement{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;line-height:0.84;color:rgba(245,243,239,0.06);font-size:clamp(80px,18vw,260px);position:absolute;top:24px;left:0;right:0;text-align:center;pointer-events:none;user-select:none;white-space:nowrap;overflow:hidden}
.footer-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;padding-bottom:64px}
.footer-brand img{height:36px;filter:brightness(0) invert(1)}
.footer-products{display:flex;gap:24px;align-items:center;padding:18px 0;border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12);width:100%;justify-content:center}
.footer-products img{height:26px;filter:brightness(0) invert(1);opacity:0.6}
.footer-claim{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(24px,3.2vw,48px);color:var(--white);line-height:0.94}
.footer-claim .or{color:var(--sindicato-orange);font-style:italic;display:inline-block;line-height:1.05;padding-bottom:0.04em}
.footer-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
/* Footer ecosistema · Peltier + B2Boost OS como referencias discretas, NO CTAs */
.footer-eco{padding:24px 0;border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.45)}
.footer-eco .fe-label{color:var(--sindicato-orange);font-weight:600;letter-spacing:0.18em;flex-shrink:0}
.footer-eco .fe-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-eco .fe-links a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.78);transition:color var(--t-fast) var(--ease-out)}
.footer-eco .fe-links a .ar{font-family:var(--font-mono);font-size:11px;transition:transform var(--t-fast) var(--ease-out)}
.footer-eco .fe-links a:hover{color:var(--white)}
.footer-eco .fe-links a:hover .ar{transform:translate(2px,-2px)}
.footer-eco .fe-sep{color:rgba(255,255,255,0.25)}
.footer-eco .fe-note{font-family:var(--font-body);font-size:11.5px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,0.45);line-height:1.55;flex:1;min-width:240px;max-width:62ch}

.footer-bottom{padding-top:28px;border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.35);gap:24px;flex-wrap:wrap}
.footer-meta{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.footer-meta a{color:inherit;transition:color var(--t-fast) var(--ease-out)}
.footer-meta a:hover{color:var(--sindicato-orange)}

@media (max-width:640px){
  .footer-eco{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-eco .fe-note{font-size:12px}
}

@media (max-width:640px){
  footer{padding:64px 0 32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-meta{flex-direction:column;gap:6px}
}

/* ============================================================
   REDUCED MOTION — Emil: degrade, not delete
   Keep opacity, drop transforms
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:120ms !important;scroll-behavior:auto !important}
  .reveal,.reveal-fast{opacity:1 !important;transform:none !important}
  .cc-titlebar .right .live::before{animation:none}
  .cc-pulse .p{animation:none}
}

/* ============================================================
   TOUCH — strip hover transforms on coarse pointers
   ============================================================ */
@media (hover: none){
  .case-card:hover{transform:none}
  .cap-node:hover{background:var(--off-white);border-color:var(--hairline-strong)}
  .cap-node:hover .ttl,.cap-node:hover .one,.cap-node:hover .cn-copy{color:var(--ink)}
  .cap-node:hover .tag{color:var(--grey);border-color:var(--hairline-strong)}
}