@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cerebrisans-regular.woff) format("woff")}
@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cerebrisans-medium.woff) format("woff")}
@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cerebrisans-semibold.woff) format("woff")}
@font-face{font-family:"Cerebri Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cerebrisans-bold.woff) format("woff")}
/* Wawentu · sitio público v5 · opción C (teal) de new-design.html. Hex de wawentu-diseno/tokens.css. */

:root{
  /* marca: paleta del manual + adicionales */
  --marca-pizarra:#2f3f3d; --marca-teal:#649898; --marca-salvia:#7c9190;
  --marca-verde:#73b778; --marca-terracota:#d1654b; --marca-ambar:#efb863;
  --marca-pizarra-profundo:#263231;
  --marca-teal-activo:#507a7a; --marca-teal-profundo:#466a6a; --marca-teal-texto:#283d3d;
  --marca-teal-fondo:#e0eaea; --marca-teal-borde:#c1d6d6; --marca-teal-claro:#a2c1c1;
  --marca-verde-texto:#2e4930; --marca-verde-fondo:#e3f1e4; --marca-verde-borde:#c7e2c9;
  --marca-terracota-texto:#54281e; --marca-terracota-fondo:#f6e0db; --marca-terracota-borde:#edc1b7;
  --marca-ambar-texto:#604a28; --marca-ambar-fondo:#fcf1e0; --marca-ambar-borde:#f9e3c1;
  --marca-blanco:#ffffff; --marca-fondo-suave:#f1f3f3; --marca-borde:#dee4e3;
  --marca-borde-fuerte:#b6c4c3; --marca-texto-secundario:#5d6d6c;
  /* producto: app ui-v5 y sitio */
  --fe-primary:#669898; --fe-link-hover:#476a6a; --fe-primary-text-emphasis:#293d3d;
  --fe-primary-bg-subtle:#e0eaea; --fe-primary-border-subtle:#c2d6d6;
  --fe-body-color:#12263f; --fe-body-bg:#f9fbfd; --fe-surface:#ffffff;
  --fe-secondary:#6e84a3; --fe-gray-800:#3b506c; --fe-border-color:#e3ebf6;
  --fe-input-border:#d2ddec; --fe-card-border:#edf2f9;
  --web-green:#00d97e; --web-yellow:#f6c343; --web-red:#e63757;
  /* tipografía, forma */
  --ww-fuente-marca:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ww-fuente-producto:"Cerebri Sans","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ww-sombra-producto-sm:0 .125rem .25rem rgba(18,38,63,.075);
  --ww-sombra-producto:0 .5rem 1rem rgba(18,38,63,.15);
  --ww-sombra-marca-sm:0 .125rem .25rem rgba(47,63,61,.08);
  --ww-sombra-marca:0 .75rem 1.5rem rgba(47,63,61,.12);
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--marca-blanco);color:var(--marca-pizarra)}
.wrap{width:min(1140px,calc(100% - 2.5rem));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   Variables base; la opción C (data-op="c") las redefine más abajo
   ========================================================================== */
.site{
  --f-head:var(--ww-fuente-producto); --f-body:var(--ww-fuente-producto); --w-head:600; --w-strong:600; --ls-head:-.02em;
  --bg:var(--fe-surface); --ink:var(--fe-body-color); --sub:var(--fe-gray-800); --muted:var(--fe-secondary);
  --line:var(--fe-border-color); --line-2:var(--fe-input-border); --tint:var(--fe-body-bg); --tint-2:var(--fe-card-border);
  --pri:var(--fe-primary); --pri-ink:var(--fe-primary); --pri-soft:var(--fe-primary-bg-subtle);
  --pri-border:var(--fe-primary-border-subtle); --pri-text:var(--fe-primary-text-emphasis);
  --btn:var(--fe-primary); --btn-ink:var(--fe-surface); --btn-hover:var(--fe-link-hover);
  --login:var(--fe-link-hover); --login-hover:var(--fe-primary-text-emphasis);
  --ok:var(--web-green); --warn:var(--web-yellow); --risk:var(--web-red);
  --eyebrow-f:var(--f-body); --eyebrow-w:600; --eyebrow-c:var(--fe-primary); --eyebrow-ls:.14em;
  --top-bg:rgba(255,255,255,.92); --top-line:var(--fe-border-color); --top-nav:var(--fe-gray-800);
  --hero-bg:linear-gradient(180deg,var(--fe-primary-bg-subtle) 0%,var(--fe-surface) 82%);
  --hero-ink:var(--fe-body-color); --hero-sub:var(--fe-gray-800);
  --band:var(--fe-body-color); --band-ink:var(--fe-surface); --band-muted:var(--fe-input-border);
  --cta:var(--fe-primary); --cta-ink:var(--fe-surface); --cta-muted:rgba(255,255,255,.88);
  --cta-btn:var(--fe-surface); --cta-btn-ink:var(--fe-primary-text-emphasis);
  --feature:var(--fe-primary-text-emphasis); --feature-muted:var(--fe-primary-border-subtle); --feature-mark:var(--fe-primary-border-subtle);
  --mark:var(--fe-primary); --trace:var(--marca-salvia);
  --foot-bg:var(--fe-body-bg); --foot-ink:var(--fe-secondary);
  --r-card:.5rem; --r-big:1rem;
  --shadow-sm:var(--ww-sombra-producto-sm); --shadow:var(--ww-sombra-producto); --shadow-lg:0 1rem 3rem rgba(18,38,63,.175);
  /* maquetas de la app */
  --mock-f:var(--f-body); --mock-ink:var(--ink); --mock-sub:var(--fe-gray-800); --mock-line:var(--line); --mock-tint:var(--tint);
  --u-bg:var(--fe-primary); --u-ink:var(--fe-surface); --b-bg:var(--fe-card-border); --b-pad:.8rem 1rem;
  --bar-p:var(--fe-primary);

  font-family:var(--f-body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}

/* ---------- A, B y C comparten la paleta del manual ---------- */
.site:is([data-op="a"],[data-op="b"],[data-op="c"]){
  --ink:var(--marca-pizarra); --sub:var(--marca-texto-secundario); --muted:var(--marca-texto-secundario);
  --line:var(--marca-borde); --line-2:var(--marca-borde-fuerte); --tint:var(--marca-fondo-suave); --tint-2:var(--marca-fondo-suave);
  --pri:var(--marca-teal); --pri-ink:var(--marca-teal-profundo); --pri-soft:var(--marca-teal-fondo);
  --pri-border:var(--marca-teal-borde); --pri-text:var(--marca-teal-texto);
  --btn:var(--marca-teal-profundo); --btn-hover:var(--marca-teal-texto);
  --login:var(--marca-pizarra); --login-hover:var(--marca-pizarra-profundo);
  --ok:var(--marca-verde); --warn:var(--marca-ambar); --risk:var(--marca-terracota);
  --eyebrow-c:var(--marca-teal-profundo);
  --top-line:var(--marca-borde); --top-nav:var(--marca-texto-secundario);
  --hero-bg:linear-gradient(180deg,var(--marca-teal-fondo) 0%,var(--marca-blanco) 82%);
  --hero-ink:var(--marca-pizarra); --hero-sub:var(--marca-texto-secundario);
  --band:var(--marca-pizarra); --band-muted:var(--marca-borde-fuerte);
  --cta:var(--marca-teal-fondo); --cta-ink:var(--marca-pizarra); --cta-muted:var(--marca-teal-texto);
  --cta-btn:var(--marca-teal-profundo); --cta-btn-ink:var(--marca-blanco);
  --feature:var(--marca-pizarra); --feature-muted:var(--marca-borde-fuerte); --feature-mark:var(--marca-ambar);
  --mark:var(--marca-teal-profundo);
  --foot-bg:var(--marca-fondo-suave); --foot-ink:var(--marca-texto-secundario);
  --shadow-sm:var(--ww-sombra-marca-sm); --shadow:var(--ww-sombra-marca); --shadow-lg:0 1rem 3rem rgba(47,63,61,.16);
  --u-bg:var(--marca-teal-profundo); --b-bg:var(--marca-fondo-suave);
}

/* ---------- B y C: modo marca (Montserrat, maquetas en modo producto) ---------- */
.site:is([data-op="b"],[data-op="c"]){
  --f-head:var(--ww-fuente-marca); --f-body:var(--ww-fuente-marca); --w-head:700; --w-strong:700; --ls-head:-.01em;
  --eyebrow-f:var(--ww-fuente-marca); --eyebrow-w:900; --eyebrow-ls:.12em;
  --r-card:1rem;
  --mock-f:var(--ww-fuente-producto); --mock-ink:var(--fe-body-color); --mock-sub:var(--fe-gray-800);
  --mock-line:var(--fe-border-color); --mock-tint:var(--fe-body-bg);
  --u-bg:var(--fe-card-border); --u-ink:var(--fe-body-color); --b-bg:transparent; --b-pad:.15rem 0;
}

/* ---------- B · pizarra como fondo fuerte ---------- */
.site[data-op="b"]{
  --top-bg:var(--marca-pizarra); --top-line:rgba(255,255,255,.08); --top-nav:var(--marca-borde-fuerte);
  --hero-bg:var(--marca-pizarra); --hero-ink:var(--marca-blanco); --hero-sub:var(--marca-borde-fuerte);
  --cta:var(--marca-pizarra); --cta-ink:var(--marca-blanco); --cta-muted:var(--marca-borde-fuerte);
  --cta-btn:var(--marca-blanco); --cta-btn-ink:var(--marca-pizarra);
  --foot-bg:var(--marca-pizarra-profundo); --foot-ink:var(--marca-borde-fuerte);
}

/* ---------- C · teal como fondo fuerte ---------- */
.site[data-op="c"]{
  --hero-bg:var(--marca-blanco);
  --band:radial-gradient(120% 140% at 50% 30%,var(--marca-teal) 0%,var(--marca-teal-activo) 100%);
  --band-muted:var(--marca-blanco);
  --cta:radial-gradient(110% 130% at 50% 20%,var(--marca-teal) 0%,var(--marca-teal-activo) 100%);
  --cta-ink:var(--marca-blanco); --cta-muted:var(--marca-blanco);
  --cta-btn:var(--marca-blanco); --cta-btn-ink:var(--marca-teal-texto);
  --feature:var(--marca-teal-texto); --feature-muted:var(--marca-teal-borde);
  --trace:var(--marca-teal);
}

/* ==========================================================================
   Base de la maqueta
   ========================================================================== */
.site a{color:var(--pri-ink);text-decoration:none}
.site a:focus-visible,.site button:focus-visible{outline:2px solid var(--pri);outline-offset:3px}
/* los reseteos van sin especificidad, para que cualquier clase de componente les gane */
:where(.site) :is(h1,h2,h3,p,ul){margin:0}
:where(.site) ul{padding:0;list-style:none}
.site h1,.site h2,.site h3{font-family:var(--f-head);font-weight:var(--w-head);letter-spacing:var(--ls-head);line-height:1.2;text-wrap:balance}
.site svg{display:block}

.eyebrow{font-family:var(--eyebrow-f);font-size:.75rem;font-weight:var(--eyebrow-w);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--eyebrow-c);margin-bottom:.75rem}
.lead{font-size:1.125rem;color:var(--muted)}
.section{padding-block:5rem}
.section--tint{background:var(--tint);border-block:1px solid var(--line)}
.section__head{max-width:46rem;margin-bottom:3rem}
.section__head--center{margin-inline:auto;text-align:center}
.section__head h2{font-size:clamp(1.75rem,3.4vw,2.4rem)}
.site:is([data-op="b"],[data-op="c"]) .section__head h2{font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.18}
.section__head p{margin-top:1rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.6rem;border-radius:50rem;font-family:var(--f-body);font-weight:var(--w-strong);font-size:.9375rem;line-height:1.2;border:1px solid transparent;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.site .btn--primary{background:var(--btn);color:var(--btn-ink)}
.site .btn--primary:hover{background:var(--btn-hover)}
.site .btn--ghost{background:var(--bg);color:var(--pri-text);border-color:var(--line-2)}
.site .btn--ghost:hover{background:var(--pri-soft);border-color:var(--pri-border)}
.site .btn--login{background:var(--login);color:var(--marca-blanco)}
.site .btn--login:hover{background:var(--login-hover)}
.site .btn--light{background:var(--cta-btn);color:var(--cta-btn-ink)}

/* decoración de marca: el símbolo grande y tenue (solo B y C) */
.site .deco{position:absolute;pointer-events:none;display:none;height:auto}

/* ---------- barra superior ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--top-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--top-line)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}
.brand{display:flex;align-items:center}
.brand svg{height:34px;width:auto}
.logo--neg{display:none!important}
.site[data-op="b"] .logo--pos{display:none!important}
.site[data-op="b"] .logo--neg{display:block!important}
.topbar nav{display:flex;gap:1.75rem;font-size:.9375rem;font-weight:500}
.site .topbar nav a{color:var(--top-nav)}
.site .topbar nav a:hover{color:var(--pri)}
.topbar__actions{display:flex;gap:.625rem}
.site[data-op="b"] .topbar nav a:hover{color:var(--marca-blanco)}
.site[data-op="b"] .topbar .btn--ghost{background:transparent;color:var(--marca-blanco);border-color:rgba(255,255,255,.3)}
.site[data-op="b"] .topbar .btn--ghost:hover{background:rgba(255,255,255,.08)}
.site[data-op="b"] .topbar .btn--login{background:var(--marca-blanco);color:var(--marca-pizarra)}
.site[data-op="b"] .topbar .btn--login:hover{background:var(--marca-teal-fondo)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:4.5rem 4rem;background:var(--hero-bg);color:var(--hero-ink)}
.hero__inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.hero__inner>*,.trace>*{min-width:0}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.15rem);max-width:16ch}
.site:is([data-op="b"],[data-op="c"]) .hero h1{font-size:clamp(2rem,4vw,2.95rem);line-height:1.12}
.hero__sub{margin-top:1.5rem;max-width:38rem;font-size:1.125rem;color:var(--hero-sub)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.pill{display:inline-block;padding:.4rem 1rem;margin-bottom:1.5rem;border-radius:50rem;border:1px solid var(--pri-border);background:var(--bg);color:var(--pri-text);font-size:.8125rem;font-weight:600}
.site:is([data-op="b"],[data-op="c"]) .pill{padding:0;border:0;background:none;border-radius:0;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--marca-teal-profundo)}
.hero__stage{position:relative}

.site[data-op="b"] .pill{color:var(--marca-teal-claro)}
.site[data-op="b"] .hero .btn--primary{background:var(--marca-blanco);color:var(--marca-pizarra)}
.site[data-op="b"] .hero .btn--primary:hover{background:var(--marca-teal-fondo)}
.site[data-op="b"] .hero .btn--ghost{background:transparent;color:var(--marca-blanco);border-color:rgba(255,255,255,.3)}
.site[data-op="b"] .hero .btn--ghost:hover{background:rgba(255,255,255,.08)}
.site[data-op="b"] .deco--hero{display:block;width:40rem;left:-15rem;bottom:-17rem;color:var(--marca-blanco);opacity:.06;transform:rotate(-8deg)}
.site[data-op="b"] .hero .mock{box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.35);border-color:transparent}

.site[data-op="c"] .hero{border-bottom:1px solid var(--line)}
@media (min-width:961px){.site[data-op="c"] .hero__inner{grid-template-columns:.95fr 1.05fr}}
.site[data-op="c"] .hero__stage{padding:2.5rem 2rem 6rem;border-radius:1rem;overflow:hidden;background:radial-gradient(120% 100% at 55% 35%,var(--marca-teal) 0%,var(--marca-teal-activo) 100%)}
.site[data-op="c"] .deco--stage{display:block;width:24rem;left:-3rem;bottom:-12rem;color:var(--marca-blanco);opacity:.14;transform:rotate(-10deg)}
.site[data-op="c"] .hero__stage .mock{box-shadow:0 1.25rem 3rem rgba(38,50,49,.35);border-color:transparent}

/* ---------- maqueta de conversación (una ventana a la app) ---------- */
.mock{position:relative;background:var(--fe-surface);border:1px solid var(--mock-line);border-radius:1rem;box-shadow:var(--shadow-lg);overflow:hidden;font-family:var(--mock-f);color:var(--mock-ink);line-height:1.5}
.mock__bar{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--mock-line);background:var(--mock-tint)}
.mock__dots{display:flex;gap:.35rem}
.mock__dots i{width:.55rem;height:.55rem;border-radius:50%;background:var(--fe-input-border)}
.mock__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-weight:600;color:var(--mock-sub)}
.mock__tag{margin-left:auto;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fe-primary-text-emphasis);background:var(--fe-primary-bg-subtle);padding:.2rem .6rem;border-radius:50rem;white-space:nowrap}
.mock__body{padding:1.25rem;display:grid;gap:.85rem}
.msg{max-width:88%;padding:var(--b-pad);border-radius:.5rem;font-size:.9375rem}
.msg--user{margin-left:auto;background:var(--u-bg);color:var(--u-ink);padding:.8rem 1rem;border-bottom-right-radius:.15rem}
.msg--bot{background:var(--b-bg);border-bottom-left-radius:.15rem}
.msg__who{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:.3rem}
.site:is([data-op="b"],[data-op="c"]) .msg--bot .msg__who{color:var(--fe-link-hover);opacity:1}
.mock__foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.9rem 1.25rem;border-top:1px solid var(--mock-line);background:var(--mock-tint);font-size:.8125rem;color:var(--mock-sub)}

/* semáforo */
.dot{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--mock-sub)}
.dot::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--line-2)}
.dot--green::before{background:var(--ok)}
.dot--yellow::before{background:var(--warn)}
.dot--red::before{background:var(--risk)}

/* ---------- testimonios (cinta) ---------- */
.voices{padding-block:3.5rem 3.25rem;overflow:hidden}
.voices__title{text-align:center;margin-bottom:1.75rem}
.voices__foot{display:flex;justify-content:center;margin-top:1.5rem}
.ticker{--gap:1rem;max-width:1440px;margin-inline:auto;overflow:hidden;padding-block:.35rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__rail{display:flex;width:max-content;animation:ticker 60s linear infinite}
.ticker:not(.is-ready) .ticker__rail{animation:none}
.ticker__list{display:flex;gap:var(--gap);padding-right:var(--gap)}
.voices:hover .ticker__rail,.voices.is-paused .ticker__rail{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(calc(-1 * var(--shift,50%)))}}
.ticker__pause{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;border:1px solid var(--line);border-radius:50rem;background:var(--bg);font:inherit;font-size:.8125rem;font-weight:var(--w-strong);color:var(--sub);cursor:pointer}
.ticker__pause:hover{border-color:var(--pri-border);color:var(--pri-text)}
.ticker__pause svg{width:.75rem;height:.75rem}
.ticker__pause .ico-play,.voices.is-paused .ticker__pause .ico-pause{display:none}
.voices.is-paused .ticker__pause .ico-play{display:block}

.quote{flex:none;display:flex;flex-direction:column;gap:1.1rem;padding:1.5rem;width:min(86vw,clamp(21rem,calc(3rem + var(--words,0) * .41rem),30rem));background:var(--bg);border:1px solid var(--line);border-radius:var(--r-big);box-shadow:var(--shadow-sm)}
.site:is([data-op="b"],[data-op="c"]) .quote{width:min(86vw,clamp(22rem,calc(3rem + var(--words,0) * .47rem),33rem))}
.quote blockquote{margin:0}
.quote blockquote p{position:relative;font-size:1rem;line-height:1.55;font-style:italic;color:var(--ink)}
.quote blockquote p::before,.quote blockquote p::after{color:var(--mark);font-weight:700;font-style:normal}
.quote blockquote p::before{content:"«";position:absolute;right:100%;padding-right:.08em}
.quote blockquote p::after{content:"»"}
.quote__tag{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;padding:.32rem .7rem;border-radius:50rem;background:var(--pri-soft);color:var(--pri-text);font-size:.6875rem;font-weight:var(--w-strong);letter-spacing:.1em;text-transform:uppercase;line-height:1}
.quote__tag svg{width:.95rem;height:.95rem}
.quote__tag--docente{background:var(--tint-2);color:var(--sub)}
.quote__who{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.quote__who b{display:block;font-size:.9375rem;font-weight:var(--w-strong);color:var(--ink);line-height:1.3}
.quote__who small{display:block;font-size:.8125rem;color:var(--muted);line-height:1.35}
.quote__avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--pri-soft);color:var(--pri-text);font-size:.875rem;font-weight:var(--w-strong)}
.quote--feature{width:min(86vw,clamp(25rem,calc(4rem + var(--words,0) * .62rem),32rem));padding:1.9rem;background:var(--feature);border-color:transparent;box-shadow:var(--shadow)}
.quote--feature blockquote p{font-size:1.15rem;line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--marca-blanco)}
.site:is([data-op="b"],[data-op="c"]) .quote--feature blockquote p{font-size:1.1rem;font-weight:400}
.quote--feature .quote__who b{color:var(--marca-blanco)}
.quote--feature .quote__who small{color:var(--feature-muted)}
.quote--feature blockquote p::before,.quote--feature blockquote p::after{color:var(--feature-mark)}
.site:is([data-op="a"],[data-op="b"],[data-op="c"]) .quote--feature .quote__tag{background:rgba(255,255,255,.1);color:var(--marca-blanco)}

/* ---------- los cuatro pilares ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.pillar{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-big);padding:1.75rem;box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.pillar:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--pri-border)}
.pillar__icon{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-bottom:1.25rem;border-radius:.9rem;background:var(--pri-soft);color:var(--pri-ink)}
.pillar__icon svg{width:1.85rem;height:1.85rem}
.pillar__icon--semaforo{color:var(--pri-text)}
.pillar h3{font-size:1.125rem;margin-bottom:.6rem;color:var(--pri-text)}
.site:is([data-op="b"],[data-op="c"]) .pillar h3{font-size:1.05rem;color:var(--ink)}
.pillar p{color:var(--muted);font-size:.9375rem}
.site[data-op="c"] .pillars .pillar{background:var(--marca-fondo-suave);border-color:transparent;box-shadow:none}
.site[data-op="c"] #pilares{background:var(--marca-blanco);border-block:0}
@media (min-width:961px){.pillar h3{min-height:2.4em}}

/* ---------- cómo quieres estudiar hoy ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:paso}
.flow__step{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:1.75rem;box-shadow:var(--shadow-sm)}
.flow__step::before{counter-increment:paso;content:counter(paso);display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-bottom:1rem;border-radius:50rem;background:var(--btn);color:var(--marca-blanco);font-size:.875rem;font-weight:700}
.flow__step h3{font-size:1.0625rem;margin-bottom:.5rem}
.flow__step p{color:var(--muted);font-size:.9375rem}

/* B y C: los tres modos no son pasos; salen de un mismo curso, así que en vez de números
   van colgados de una traza de circuito con nodos en anillo (el lenguaje del símbolo) */
.site:is([data-op="b"],[data-op="c"]) #como-funciona{background:var(--bg);border-block:0}
.site:is([data-op="b"],[data-op="c"]) .flow{position:relative;padding-top:3rem}
.site:is([data-op="b"],[data-op="c"]) .flow::before{content:"";position:absolute;top:0;left:calc((100% - 3rem) / 6);right:calc((100% - 3rem) / 6);height:2.55rem;border:2px solid var(--trace);border-bottom:0;border-radius:1rem 1rem 0 0}
.site:is([data-op="b"],[data-op="c"]) .flow__step{border-radius:var(--r-big);padding-top:2rem}
.site:is([data-op="b"],[data-op="c"]) .flow__step::before{content:"";position:absolute;top:-.5rem;left:50%;transform:translateX(-50%);width:1rem;height:1rem;margin:0;border-radius:50%;border:2px solid var(--trace);background:var(--bg)}
.site:is([data-op="b"],[data-op="c"]) .flow__step:nth-child(2)::after{content:"";position:absolute;left:calc(50% - 1px);top:-3rem;height:2.5rem;border-left:2px solid var(--trace)}
.site:is([data-op="b"],[data-op="c"]) .flow__step h3{font-size:1.25rem;color:var(--pri-text)}
.flow__node{display:none}
.site:is([data-op="b"],[data-op="c"]) .flow__node{display:block;position:absolute;top:calc(-3rem - .8rem);z-index:1;left:50%;transform:translateX(-50%);padding:.2rem .75rem;border-radius:50rem;background:var(--bg);border:2px solid var(--trace);font-size:.6875rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);white-space:nowrap;line-height:1.4}

/* ---------- analogía ---------- */
.band{position:relative;overflow:hidden;background:var(--band);color:var(--band-ink)}
.site:is([data-op="a"],[data-op="b"],[data-op="c"]) .band{color:var(--marca-blanco)}
.analogy{position:relative;max-width:48rem;margin-inline:auto;text-align:center}
.analogy p{font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.45;font-weight:500;text-wrap:balance}
.analogy p+p{margin-top:1rem;font-size:1rem;font-weight:400;color:var(--band-muted)}
.site[data-op="b"] .analogy p{font-weight:400;line-height:1.5}
.site[data-op="b"] .analogy p+p{margin-top:1.5rem;font-size:1.25rem;font-weight:700;color:var(--marca-ambar)}
/* C: blanco sobre teal da 3,24:1, así que todo el texto de la banda va grande y en negrita */
.site[data-op="c"] .analogy p{font-size:clamp(1.1875rem,2.4vw,1.7rem);font-weight:700;line-height:1.4}
.site[data-op="c"] .analogy p+p{margin-top:1.5rem;font-size:1.25rem;font-weight:900}
.site[data-op="c"] .deco--band{display:block;width:26rem;right:-6rem;bottom:-9rem;color:var(--marca-blanco);opacity:.12;transform:rotate(-10deg)}

/* ---------- audiencias ---------- */
.grid{display:grid;gap:1.5rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:1.75rem;box-shadow:var(--shadow-sm)}
.audience{display:flex;flex-direction:column;height:100%;background:var(--pri-soft);border-color:var(--pri-border);box-shadow:none}
.audience__kicker{font-family:var(--eyebrow-f);font-size:.75rem;font-weight:var(--eyebrow-w);letter-spacing:.12em;text-transform:uppercase;color:var(--pri-ink);margin-bottom:.5rem}
.audience h3{font-size:1.25rem;margin-bottom:.75rem;color:var(--pri-text)}
.audience__msg{color:var(--sub);font-size:.9375rem;margin-bottom:1.25rem}
.site[data-op="c"] .audience__msg{color:var(--marca-teal-texto)}
.audience ul{display:grid;gap:.625rem;margin-top:auto}
.audience li{position:relative;padding-left:1.5rem;font-size:.9375rem;color:var(--ink)}
.audience li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--pri)}
.site[data-op="b"] .audience{background:var(--bg);border-color:var(--line);box-shadow:var(--shadow-sm);border-radius:var(--r-big)}
.site[data-op="c"] .audience{border-radius:var(--r-big)}
.site:is([data-op="b"],[data-op="c"]) .audience li::before{width:.65rem;height:.65rem;top:.45em;background:transparent;border:2px solid var(--pri)}

/* ---------- semáforo ético (sección nueva; solo B y C) ---------- */
.semaforo{display:none}
.site:is([data-op="b"],[data-op="c"]) .semaforo{display:block}
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.zone{display:flex;flex-direction:column;border-radius:var(--r-big);padding:1.75rem;background:var(--z-bg);border:1px solid var(--z-line);color:var(--z-ink)}
.zone--ok{--z-bg:var(--marca-verde-fondo);--z-line:var(--marca-verde-borde);--z-ink:var(--marca-verde-texto);--z-dot:var(--marca-verde)}
.zone--warn{--z-bg:var(--marca-ambar-fondo);--z-line:var(--marca-ambar-borde);--z-ink:var(--marca-ambar-texto);--z-dot:var(--marca-ambar)}
.zone--risk{--z-bg:var(--marca-terracota-fondo);--z-line:var(--marca-terracota-borde);--z-ink:var(--marca-terracota-texto);--z-dot:var(--marca-terracota)}
.zone__label{display:inline-flex;align-items:center;gap:.55rem;font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.zone__label::before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--z-dot);box-shadow:0 0 0 3px var(--marca-blanco)}
.zone h3{font-size:1.25rem;margin:1rem 0 .5rem}
.zone p{font-size:.9375rem}
.zone ul{display:grid;gap:.4rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--z-line);font-size:.9375rem}
.zone li{position:relative;padding-left:1.1rem}
.zone li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:.4rem;border-radius:50%;background:var(--z-dot)}

/* ---------- trazabilidad ---------- */
.site:is([data-op="b"],[data-op="c"]) #trazabilidad{background:var(--bg);border-block:0}
.trace{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.trace__title{font-size:1.375rem;margin-bottom:1rem}
.panel{background:var(--fe-surface);border:1px solid var(--mock-line);border-radius:var(--r-card);box-shadow:var(--shadow-sm);overflow:hidden;font-family:var(--mock-f);color:var(--mock-ink);line-height:1.5}
.site:is([data-op="b"],[data-op="c"]) .panel{border-radius:1rem;box-shadow:var(--shadow)}
.panel__head{padding:1rem 1.25rem;border-bottom:1px solid var(--mock-line);background:var(--mock-tint);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mock-sub)}
.panel__body{padding:1.25rem;display:grid;gap:1rem}
.meter{display:grid;gap:.4rem}
.meter__top{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;color:var(--mock-sub)}
.meter__top b{font-weight:600;color:var(--mock-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.bar{height:.5rem;border-radius:50rem;background:var(--fe-card-border);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar i.g{background:var(--ok)}
.bar i.y{background:var(--warn)}
.bar i.r{background:var(--risk)}
.bar i.p{background:var(--fe-primary)}
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.25rem}
.log{display:grid;gap:.6rem;font-size:.875rem}
.log__row{display:grid;grid-template-columns:auto 1fr;gap:.6rem;color:var(--mock-sub)}
.log__row b{color:var(--mock-ink);font-weight:600}
.reasons{position:relative;display:grid;gap:1rem;margin-top:2rem}
.reason{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.reason b{display:block;font-size:.9375rem;font-weight:var(--w-strong);color:var(--ink)}
.reason span{font-size:.9375rem;color:var(--muted)}
.reason em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50rem;background:var(--pri-soft);color:var(--pri-text);font-size:.8125rem;font-weight:700}
/* B y C: alumnos, profesores y universidad unidos por la misma traza */
.site:is([data-op="b"],[data-op="c"]) .reasons::before{content:"";position:absolute;left:calc(.875rem - 1px);top:.9rem;bottom:.9rem;border-left:2px solid var(--trace)}
.site:is([data-op="b"],[data-op="c"]) .reason em{width:1.75rem;height:1.75rem;background:var(--bg);border:2px solid var(--trace);color:var(--pri-text);font-size:.75rem;font-weight:900}

/* ---------- cierre ---------- */
.cta{position:relative;overflow:hidden;background:var(--cta);color:var(--cta-ink);border-radius:1rem;padding:3.5rem;text-align:center}
.cta h2{position:relative;font-size:clamp(1.6rem,3.2vw,2.25rem);max-width:40ch;margin-inline:auto}
.site:is([data-op="b"],[data-op="c"]) .cta h2{font-size:clamp(1.45rem,2.8vw,2rem);max-width:34ch}
.cta p{position:relative;margin:1.25rem auto 2rem;max-width:44rem;color:var(--cta-muted)}
.cta .btn{position:relative}
.site[data-op="b"] .deco--cta{display:block;width:30rem;right:-8rem;top:-9rem;color:var(--marca-blanco);opacity:.06;transform:rotate(14deg)}
/* C: el párrafo va a 19px en negrita para cumplir contraste de texto grande sobre teal */
.site[data-op="c"] .cta p{font-size:1.1875rem;font-weight:700;line-height:1.5;max-width:40rem}
.site[data-op="c"] .deco--cta{display:block;width:30rem;left:-10rem;bottom:-14rem;color:var(--marca-blanco);opacity:.12;transform:rotate(-12deg)}

/* ---------- footer ---------- */
.site footer{border-top:1px solid var(--line);padding-block:2.5rem 7rem;background:var(--foot-bg)}
.site[data-op="b"] footer{border-top-color:transparent}
.footer__inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.footer__inner p{color:var(--foot-ink);font-size:.875rem}
.footer__social{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--pri-text);color:#fff;font-size:1.05rem;text-decoration:none;transition:opacity .15s}
.site .footer__social{color:#fff}
.footer__social:hover{opacity:.85}
.topbar__social{display:inline-flex;align-items:center;font-size:1.4rem;line-height:1;margin-right:.25rem}
.site .topbar__social{color:var(--pri-text)}
.site .topbar__social:hover{opacity:.75}
.site[data-op="b"] .topbar .topbar__social{color:var(--marca-blanco)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero__inner,.trace{grid-template-columns:1fr;gap:2.5rem}
  .pillars,.grid--3,.zones{grid-template-columns:repeat(2,1fr)}
  .topbar nav{display:none}
  .hero h1{max-width:none}
  .site:is([data-op="b"],[data-op="c"]) .flow{grid-template-columns:1fr;padding-top:0}
  .site:is([data-op="b"],[data-op="c"]) .flow::before,
  .site:is([data-op="b"],[data-op="c"]) .flow__step::before,
  .site:is([data-op="b"],[data-op="c"]) .flow__step::after,
  .site:is([data-op="b"],[data-op="c"]) .flow__node{display:none}
}
@media (max-width:640px){
  .section{padding-block:3.5rem}
  .hero{padding-block:3rem}
  .flow,.pillars,.grid--3,.zones{grid-template-columns:1fr}
  .cta{padding:2.25rem 1.5rem}
  .site[data-op="c"] .hero__stage{padding:1.5rem 1rem}
  .topbar__actions .btn{padding:.65rem 1.05rem}
  .brand svg{height:28px}
}

/* sin movimiento (preferencia del sistema o pantallas chicas): la cinta se desliza con el dedo */
@media (prefers-reduced-motion:reduce),(max-width:960px){
  .ticker__rail{animation:none}
  .ticker{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.25rem;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;padding-inline:1.25rem}
  .quote{scroll-snap-align:start}
  .ticker__list[aria-hidden="true"],.voices__foot{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pillar,.btn{transition:none}
}
@media (max-width:480px){.site .topbar__social{display:none}}