/* Tipografías servidas desde el sitio (licencia SIL Open Font License, en assets/fonts/): Schibsted Grotesk variable
   400–700 y Newsreader 400 normal y cursiva, solo con los caracteres del español. */
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/fonts/schibsted-grotesk.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* Campus Latina — identidad final: verde petróleo con ámbar
   Tokens y reglas: manual de identidad. Una idea por pantalla, un solo recurso gráfico (el campo de líneas), esquinas rectas. */

:root{
  --petroleo-noche:#0A2329;
  --petroleo:#0B6470;
  --agua:#7FD6DE;
  --bruma:#EAF3F4;
  --ambar:#F08C1A;
  --ambar-luz:#FFAE4A;
  --ambar-claro:#FFCF8A;
  --blanco:#FFFFFF;
  --gris:#4D6166;
  --linea:#D5E3E5;

  --surface:var(--blanco);
  --surface-alt:var(--bruma);
  --ink:var(--petroleo-noche);
  --ink-muted:var(--gris);
  --accent:var(--petroleo);
  --destaque:var(--ambar);
  --on-accent:var(--blanco);
  --rule:var(--linea);

  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:Newsreader,Georgia,serif;

  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:40px;--space-6:64px;--space-7:96px;--space-8:144px;
  --gutter:clamp(20px,5vw,64px);
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:700;letter-spacing:-.03em;line-height:1.02}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* El alto de pantalla también manda: en notebooks bajas los bloques se comprimen para leerse enteros. */
.sec{padding-block:clamp(48px,10svh,96px)}
.sec.alt{background:var(--surface-alt)}
.sec.noche{background:var(--petroleo-noche);color:var(--blanco);--ink-muted:#A9C2C6;--rule:#1E3D44;--accent:var(--agua);--on-accent:var(--petroleo-noche)}
@media(max-width:760px){.sec{padding-block:clamp(40px,8svh,64px)}}

/* ---------- tipografía ---------- */
.etiqueta{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--space-3)}
.display{font-size:clamp(40px,min(6.4vw,9.4svh),84px);line-height:.98;letter-spacing:-.04em}
.titulo-1{font-size:clamp(32px,min(4.4vw,7svh),56px);line-height:1.02;letter-spacing:-.035em}
.titulo-2{font-size:clamp(26px,3vw,36px);line-height:1.08;letter-spacing:-.025em}
.titulo-3{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.display em,.titulo-1 em,.titulo-2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.bajada{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink-muted);max-width:44ch}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.enunciado{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.012em;max-width:26ch;text-wrap:balance}
.prosa p{max-width:62ch;color:var(--ink)}
.prosa p+p{margin-top:var(--space-3)}
.chico{font-size:13px;line-height:19px;color:var(--ink-muted)}

/* ---------- acciones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;line-height:20px;padding:16px 24px;text-decoration:none;border:0;border-radius:0;transition:background-color .15s}
.btn:hover{background:#084E58}
.sec.noche .btn:hover,.pie .btn:hover{background:#A9E6EB}
.enlace{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.enlace:hover{color:var(--accent)}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5)}

/* ---------- navegación ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--rule)}
.nav-in{max-width:var(--max);margin-inline:auto;padding:14px var(--gutter);display:flex;align-items:center;gap:var(--space-5)}
.nav-logo{display:block;flex:none}
.nav-logo img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:var(--space-5);margin-left:auto;font-size:15px}
.nav-links a:not(.btn){text-decoration:none;color:var(--ink-muted)}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent);padding-bottom:4px}
.nav-links .btn{padding:12px 18px;font-size:15px}
.nav-menu{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;color:var(--ink)}
.nav-menu span{display:block;width:22px;height:2px;background:currentColor}
.nav-menu span+span{margin-top:5px}
.nav-panel{display:none}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-menu{display:block}
  .nav-panel{position:fixed;inset:73px 0 auto 0;z-index:49;background:var(--surface);border-bottom:1px solid var(--rule);padding:var(--space-3) var(--gutter) var(--space-5);display:grid;gap:0}
  .nav-panel[hidden]{display:none}
  .nav-panel a{padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:18px}
  .nav-panel .btn{margin-top:var(--space-4);justify-content:center;border:0}
  .nav-logo img{height:40px}
}

/* ---------- el campo de líneas (recurso gráfico) y el resaltador ---------- */
.campo{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1s ease;--campo:var(--petroleo);--campo-destaque:var(--ambar)}
.campo.listo{opacity:1}
@media (prefers-reduced-motion:reduce){.campo{transition:none}}
.hi{background:linear-gradient(transparent 58%,var(--ambar-claro) 58%,var(--ambar-claro) 92%,transparent 92%);padding-inline:.06em}
.display em.hi,.titulo-1 em.hi{color:var(--ink)}

/* ---------- portada ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(32px,8svh,96px) clamp(40px,11svh,144px)}
.hero-txt{position:relative;max-width:min(680px,58%);display:grid;gap:clamp(14px,2.6svh,24px)}
.hero-txt .bajada{max-width:50ch}
.hero-txt .etiqueta{margin-bottom:0}
.hero-txt .acciones{margin-top:clamp(4px,1.4svh,16px)}
.hero-dato{font-size:14px;color:var(--ink-muted)}
@media(max-width:860px){
  .hero{padding-top:clamp(24px,5svh,64px);padding-bottom:min(70vw,440px)}
  .hero-txt{max-width:none}
}

/* cabecera de páginas internas */
.cabecera{position:relative;overflow:hidden;padding-block:clamp(40px,9svh,96px)}
.cabecera-txt{position:relative;max-width:min(760px,66%);display:grid;gap:var(--space-4)}
.cabecera-txt .etiqueta{margin-bottom:0}
@media(max-width:860px){
  .cabecera{padding-top:clamp(24px,5svh,64px);padding-bottom:min(46vw,300px)}
  .cabecera-txt{max-width:none}
}

/* ---------- hallazgo (dato protagonista) ---------- */
.hallazgo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:end}
.hallazgo .numero{font-size:clamp(120px,17vw,220px);line-height:.8;font-weight:700;letter-spacing:-.065em;color:var(--accent)}
.hallazgo .enunciado{margin-bottom:var(--space-4)}
.hallazgo p:not(.enunciado){color:var(--ink-muted);max-width:46ch}
@media(max-width:860px){.hallazgo{grid-template-columns:1fr;gap:var(--space-5)}}

/* embudo */
.embudo{margin-top:var(--space-6);display:grid;gap:10px}
.embudo-fila{display:grid;grid-template-columns:140px minmax(0,1fr) 56px;align-items:center;gap:var(--space-3);font-size:15px}
.embudo-fila span:first-child{color:var(--ink-muted)}
.embudo-barra{height:10px;background:var(--rule)}
.embudo-barra i{display:block;height:100%;background:var(--ink)}
.embudo-fila.final .embudo-barra i{background:var(--accent)}
.embudo-fila b{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:560px){.embudo-fila{grid-template-columns:100px minmax(0,1fr) 44px;font-size:14px}}

/* ---------- dos columnas editoriales ---------- */
.dos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-6);align-items:start}
.dos>:first-child{position:sticky;top:120px}
@media(max-width:860px){.dos{grid-template-columns:1fr;gap:var(--space-4)}.dos>:first-child{position:static}}
.cita{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:-.01em;padding-left:var(--space-4);border-left:2px solid var(--accent);margin-block:var(--space-5);max-width:34ch}

/* ---------- pasos (secuencia real) ---------- */
/* Cabecera en dos columnas (título | bajada): ahorra alto para que se vea el contenido de la sección. */
.cab-2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-6);align-items:end}
.cab-2 .titulo-1{max-width:none!important;text-wrap:balance}
@media(max-width:860px){.cab-2{grid-template-columns:1fr;gap:var(--space-4)}}
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);margin-top:clamp(24px,5svh,64px);counter-reset:paso;list-style:none;padding:0}
.pasos li{border-top:2px solid var(--ink);padding-top:var(--space-4);display:grid;gap:var(--space-2);align-content:start}
.pasos li::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);font-size:14px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.pasos p{color:var(--ink-muted);font-size:16px;line-height:1.55}
@media(max-width:960px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pasos{grid-template-columns:1fr}}

/* ---------- resultados ---------- */
.resultados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.resultados div{padding-inline:var(--space-5);border-left:1px solid var(--rule)}
.resultados div:first-child{padding-left:0;border-left:0}
.resultados b{display:block;font-size:clamp(44px,5vw,64px);line-height:1;font-weight:700;letter-spacing:-.045em}
.resultados b.destaque{color:var(--ambar-luz)} /* la cifra protagonista de la franja, una sola */
.resultados span{display:block;margin-top:var(--space-3);color:var(--ink-muted);font-size:16px;line-height:1.45;max-width:26ch}
/* Alianzas: una fila de logos en una sola tinta (blanco sobre petróleo noche), mismo peso visual, sin color propio */
.alianzas{margin-top:var(--space-6);display:grid;gap:var(--space-4)}
.alianzas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6)}
.alianzas img{display:block;width:auto;height:var(--h,28px);opacity:.88}
@media(max-width:760px){.alianzas ul{justify-content:center;gap:var(--space-4) var(--space-5)}.alianzas img{height:calc(var(--h,28px)*.82)}}
.resultados-pie{margin-top:var(--space-6);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--rule);padding-top:var(--space-4);color:var(--ink-muted);font-size:15px}
@media(max-width:760px){.resultados{grid-template-columns:1fr;gap:var(--space-5)}.resultados div{padding:0;border:0}}

/* ---------- diagnóstico ---------- */
.diag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:center}
.diag-datos{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-block:var(--space-4) var(--space-5);color:var(--ink-muted);font-size:15px;list-style:none;padding:0}
.diag-datos li+li::before{content:"·";margin-right:var(--space-4);color:var(--rule)}
.informe{background:var(--surface);border:1px solid var(--rule);padding:var(--space-5)}
.informe header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);border-bottom:1px solid var(--ink);padding-bottom:var(--space-3);margin-bottom:var(--space-3)}
.informe header b{font-size:20px;letter-spacing:-.02em}
.informe ol{list-style:none;padding:0;display:grid;gap:12px}
.informe li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 34px;gap:var(--space-3);align-items:center;font-size:14px;line-height:1.3}
.informe li small{display:block;color:var(--ink-muted);font-size:12px}
.informe .t{height:8px;background:var(--bruma)}
.informe .t i{display:block;height:100%;background:var(--ink)}
.informe li.baja{font-weight:600}
.informe li.baja .t i{background:var(--accent)}
.informe li b{text-align:right;font-variant-numeric:tabular-nums}
.informe .chico{margin-top:var(--space-3)}
@media(max-width:860px){.diag{grid-template-columns:1fr}}
@media(max-width:480px){.informe{padding:var(--space-4)}.informe li{grid-template-columns:minmax(0,1fr) 70px 30px}}

/* ---------- listas editoriales (notas, historia) ---------- */
.lista{list-style:none;padding:0;border-top:1px solid var(--rule)}
.lista>li{border-bottom:1px solid var(--rule)}
.nota-fila{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:var(--space-4);align-items:baseline;padding-block:var(--space-4);text-decoration:none}
.nota-fila .fecha{font-size:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nota-fila h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.012em}
.nota-fila p{margin-top:var(--space-2);color:var(--ink-muted);font-size:16px;max-width:64ch}
.nota-fila .flecha{font-size:22px;color:var(--accent);transition:transform .15s}
.nota-fila:hover h3{color:var(--accent)}
.nota-fila:hover .flecha{transform:translateX(4px)}
.nota-fila .autor{display:block;margin-top:var(--space-2);font-size:14px;color:var(--ink-muted)}
@media(max-width:700px){.nota-fila{grid-template-columns:1fr auto;row-gap:var(--space-2)}.nota-fila .fecha{grid-column:1/-1}}
.cabeza-sec{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--space-4);margin-bottom:var(--space-5)}

.filas{display:grid;border-top:1px solid var(--rule)}
.filas>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-5);padding-block:var(--space-5);border-bottom:1px solid var(--rule)}
.filas dt,.filas .rot{font-weight:600}
.filas p{color:var(--ink);max-width:60ch}
@media(max-width:760px){.filas>div{grid-template-columns:1fr;gap:var(--space-2)}}

.columnas{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--space-5)}
.columnas>div{border-top:2px solid var(--ink);padding-top:var(--space-4);display:grid;gap:var(--space-3);align-content:start}
.columnas p{color:var(--ink-muted);font-size:16px}
@media(max-width:860px){.columnas{grid-template-columns:1fr}}

/* preguntas frecuentes */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-4);font-size:20px;font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:26px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:var(--space-4);max-width:64ch;color:var(--ink-muted)}

/* ---------- nota (artículo) ---------- */
.articulo-cab{padding-block:var(--space-7) var(--space-6);border-bottom:1px solid var(--rule)}
.articulo-cab .wrap{max-width:900px}
.articulo-cab h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5vw,62px);line-height:1.06;letter-spacing:-.02em;margin-top:var(--space-2)}
.articulo-cab .bajada{max-width:52ch;margin-top:var(--space-4)}
.firma{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-5);font-size:15px;color:var(--ink-muted)}
.firma b{color:var(--ink);font-weight:600}
.articulo{padding-block:var(--space-6) var(--space-7)}
.articulo .wrap{max-width:900px}
.cuerpo{max-width:680px;font-size:19px;line-height:1.7}
.cuerpo>*+*{margin-top:22px}
.cuerpo h2{font-size:clamp(24px,2.6vw,30px);line-height:1.15;letter-spacing:-.025em;margin-top:var(--space-6)}
.cuerpo strong{font-weight:600}
.cuerpo a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.cuerpo ol,.cuerpo ul{padding-left:1.2em;display:grid;gap:10px}
.cuerpo .pullquote{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.012em;padding-left:var(--space-4);border-left:2px solid var(--accent);margin-block:var(--space-6)}
.cuerpo .callout{background:var(--surface-alt);padding:var(--space-4) var(--space-5);font-size:17px;line-height:1.6;margin-block:var(--space-5)}
.cuerpo .callout p+p{margin-top:var(--space-2)}
.cuerpo .callout-label{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--space-2)}
.cuerpo .stat-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);border-block:1px solid var(--rule);padding-block:var(--space-4);margin-block:var(--space-5)}
.cuerpo .stat .val{display:block;font-size:44px;line-height:1;font-weight:700;letter-spacing:-.045em;color:var(--accent)}
.cuerpo .stat .label{display:block;margin-top:var(--space-2);font-size:15px;color:var(--ink-muted)}
@media(max-width:560px){.cuerpo{font-size:18px}.cuerpo .callout{padding:var(--space-4)}}

/* ---------- llamado final y pie ---------- */
.llamado{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-5);align-items:end}
.llamado .acciones{justify-content:flex-end}
@media(max-width:860px){.llamado{grid-template-columns:1fr}.llamado .acciones{justify-content:flex-start}}

.pie{background:var(--petroleo-noche);color:var(--blanco);padding-block:var(--space-7) var(--space-5);--ink-muted:#A9C2C6;--rule:#1E3D44;--accent:var(--agua);--on-accent:var(--petroleo-noche)}
.pie-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,2fr));gap:var(--space-5)}
.pie-logo img{height:52px;width:auto}
.pie-desc{margin-top:var(--space-4);color:var(--ink-muted);max-width:36ch;font-size:15px}
.pie h2{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--space-3)}
.pie ul{list-style:none;padding:0;display:grid;gap:10px;font-size:15px}
.pie ul a{text-decoration:none}
.pie ul a:hover{color:var(--accent)}
.pie-base{margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:13px;color:var(--ink-muted)}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr 1fr}.pie-grid>:first-child{grid-column:1/-1}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- el camino del aspirante (único momento animado) ----------
   Sin JS o con movimiento reducido se ve el esquema completo y quieto.
   Con JS, cada paso del texto dibuja una capa: .p2 … .p5 en la figura. */
.camino-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-6);align-items:start}
.camino-paso{min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);padding-block:var(--space-5)}
.camino-paso:first-child{min-height:60vh;justify-content:flex-start;padding-top:0}
.camino-paso:last-child{min-height:60vh}
.camino-paso p{color:var(--ink-muted);max-width:44ch}
.camino-paso .titulo-2 em{color:var(--accent)}
.anim .camino-paso{opacity:.32;transition:opacity .4s ease}
.anim .camino-paso.activo{opacity:1}
.camino-ritmos{display:grid;gap:var(--space-4);margin-top:var(--space-2)}
.camino-ritmos dt{font-weight:600;display:flex;align-items:center;gap:10px}
.camino-ritmos dd{margin:4px 0 0 34px;color:var(--ink-muted);max-width:40ch}
.camino-ritmos i{display:inline-block;width:24px;height:0;border-top:4px solid var(--accent)}
.camino-ritmos i.r-luego{border-top:2px dashed var(--accent)}
.camino-fig{position:sticky;top:110px;margin:0;height:calc(100vh - 150px);max-height:640px;display:flex;flex-direction:column;justify-content:center}
.camino-svg{width:100%;height:auto;overflow:visible}
.camino-indice{display:flex;gap:6px;list-style:none;padding:0;margin-top:var(--space-4);font-size:0}
.camino-indice li{width:28px;height:3px;background:var(--rule)}
.anim .camino-fig .camino-indice li:nth-child(1),.anim .p2 .camino-indice li:nth-child(2),.anim .p3 .camino-indice li:nth-child(3),.anim .p4 .camino-indice li:nth-child(4),.anim .p5 .camino-indice li:nth-child(5){background:var(--ink)}
.camino:not(.anim) .camino-indice{display:none}

.camino-svg text{font-family:var(--sans);font-size:13px;fill:var(--ink)}
.camino-svg text.s{fill:var(--ink-muted);font-size:12px}
.camino-svg text.fuerte{font-weight:700;font-size:14px}
.camino-svg text.acento{fill:var(--accent);font-weight:700}
.camino-svg text.d{font-family:var(--serif);font-style:italic;font-size:14px;fill:var(--ink-muted)}
.camino-svg .nodo circle{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.camino-svg .nodo circle.fin{fill:var(--accent);stroke:var(--accent)}
.camino-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.camino-svg .l-diseno{stroke:var(--ink);stroke-width:2.5}
.camino-svg .l-real path{stroke:var(--ink);stroke-width:1.4;opacity:.55}
.camino-svg .decision{fill:var(--surface);stroke:var(--accent);stroke-width:3}
.camino-svg .l-ahora{stroke:var(--accent);stroke-width:5}
.camino-svg .l-luego{stroke:var(--accent);stroke-width:2.2;stroke-dasharray:5 7}
.camino-svg .l-vuelta{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:2 6;opacity:.8}
.camino-svg .l-desvio path{stroke:var(--ink-muted);stroke-width:1.2;opacity:.6}
.camino-svg .salida path{stroke:var(--ink-muted);stroke-width:2}

/* estado animado */
.anim .camino-svg .e{transition:opacity .5s ease}
.anim .camino-svg .trazo{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
.anim .camino-fig:not(.p2) .e2,.anim .camino-fig:not(.p3) .e3,.anim .camino-fig:not(.p4) .e4,.anim .camino-fig:not(.p5) .e5{opacity:0}
.anim .camino-fig:not(.p2) .e2 .trazo,.anim .camino-fig:not(.p4) .e4 .trazo,.anim .camino-fig:not(.p5) .e5 .trazo{stroke-dashoffset:1}
.anim .camino-fig.p2 .e1{opacity:.22}
.anim .camino-fig.p4 .e2{opacity:.45}
.anim .camino-fig.p5 .e4{opacity:.9}

@media(max-width:860px){
  .camino-grid{grid-template-columns:1fr;gap:0}
  .camino-fig{order:-1;top:72px;z-index:2;height:auto;max-height:none;background:var(--surface-alt);padding-block:var(--space-3);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .camino-paso,.camino-paso:first-child,.camino-paso:last-child{min-height:62vh;justify-content:flex-start;padding-top:var(--space-5)}
  .camino-fig{padding-block:var(--space-2)}
  .camino-svg{max-height:38vh;width:auto;max-width:100%;margin-inline:auto}
  .camino-indice{display:none}
  .camino-svg text{font-size:23px}
  .camino-svg text.s,.camino-svg text.d,.camino-svg text.mo{display:none}
  .camino-svg text.fuerte{font-size:23px}
  .camino-paso,.camino-paso:first-child,.camino-paso:last-child{min-height:70vh;justify-content:flex-end;padding-bottom:12vh}
}