/* La casa lista (4 nov 2026). Capa final sobre la versión narrativa (portadas, objetos y movimiento).
   Natalia: «le quitaste mucho de la magia», «me gustaban las portadas», «sin introducción en cada capítulo», el hilo «corta».
   Esta capa no cambia las portadas: sólo
   · el hilo: una línea en la orilla que nunca cruza texto ni tarjetas, prende un nudo donde hay una idea y se ata a la
     puerta de la vista siguiente (en Hablemos se anuda). Lógica en natalia.js.
   · el ritmo: sin huecos de una pantalla; 96 px entre capítulos en el teléfono y 128 en la computadora.
   · las oraciones nuevas (líneas bajo los verbos, puertas, escalón) y dos piezas nuevas: «Aprendo en público» y el
     enlace al war room en movimiento.
   · Para resolver hoy: las seis guías como hermanas, en la cuadrícula de la mesa del war room (lección 01).
   Sólo transform y opacity; con movimiento reducido todo queda completo y quieto. */
:root{--mg-orilla:28px;--mg-cap:96px;--mg-entra:cubic-bezier(.2,.7,.2,1)}
@media (min-width:900px){:root{--mg-cap:128px}}

/* ═════════════════════════════ EL HILO ═════════════════════════════ */
#hilo{z-index:6}
#hilo-path{stroke:var(--rosa-hilo,#c45c7c);stroke-width:1.5}
.hilo .hk{fill:var(--onix,#0b0a0c);stroke:rgb(196 92 124/.6);stroke-width:1.2;transition:fill .45s,stroke .45s}
.hilo .hk.on{fill:var(--rosa-hilo,#c45c7c);stroke:var(--rosa-hilo,#c45c7c)}
.hilo .hk-fin.on{fill:var(--rosa-perla,#f3dde4);stroke:var(--rosa-hilo,#c45c7c);stroke-width:2}
.hilo .hk-lazo{fill:none;stroke:var(--rosa-hilo,#c45c7c);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--mg-entra)}
.hilo .hk-lazo.on{stroke-dashoffset:0}
#hilo-punta{fill:var(--rosa-perla,#f3dde4)}
/* los nudos del marcado sólo marcan la altura: el hilo los dibuja sobre su columna */
#casa [data-nudo]{opacity:0!important;box-shadow:none!important;animation:none!important}
.nudo.nk{left:0;top:24px}
/* la trayectoria ya no lleva su riel gris: el hilo rosa es su riel */
.tr-hilo{display:none!important}
@media (prefers-reduced-motion:reduce){.hilo .hk,.hilo .hk-lazo{transition:none}}

/* nada vive en la orilla del hilo: en el teléfono el contenido de cada vista empieza a 28 px (el hilo va a 12) */
@media (max-width:899px){
 .app .app-vista>section{padding-left:0!important;padding-right:0!important}
 #herramientas .rh-frente,#servicios .o4-frente,#ia .ia4-frente,#su-casa .aire-marco,#conversacion .frente{padding-left:var(--mg-orilla)!important;padding-right:16px!important;margin-left:0!important;margin-right:0!important;max-width:none!important}
 #herramientas .rh-frente>*,#servicios .o4-frente>*,#ia .ia4-frente>*,#conversacion .conv-texto{margin-left:0!important;margin-right:0!important}
 #herramientas .rh-frente>*,#servicios .o4-frente>*{padding-left:0!important;padding-right:0!important}
 #trayectoria .tr-cuerpo{padding-left:var(--mg-orilla)!important;padding-right:16px!important}
 #conferencias .ct-marco{padding-left:var(--mg-orilla)!important;padding-right:16px!important;margin-left:0!important}
 .app .vista-fin{padding-left:var(--mg-orilla)!important;padding-right:16px!important}
 #ia .ia4-frente>.ia-portada{margin-left:calc(-1 * var(--mg-orilla))!important;margin-right:-16px!important;height:clamp(260px,44svh,420px)}
}

/* ═════════════════════════════ CADA VISTA ABRE CON SU ENTRADA ═════════════════════════════ */
.rh-cabeza,.o4-cabeza,.ia4-cabeza,.cs-cabeza,.tr-cabeza{position:relative}
.rh-cabeza>.nudo,.o4-cabeza>.nudo,.ia4-cabeza>.nudo,.cs-cabeza>.nudo,.tr-cabeza>.nudo{position:absolute;left:0;top:.6em}
.o4-sub,.ia4-sub,.cs-linea,.tr-sub,.ct-linea{text-wrap:pretty}
.ia4-sub em{color:var(--rosa-suave,#e6b4c2)}

/* ═════════════════════════════ EL FRENTE ═════════════════════════════ */
.of1 .of1-raiz{max-width:34ch;text-wrap:pretty}
/* los tres verbos: titular (la imagen) y debajo una oración; sin huecos de una pantalla */
.fr-verbos{padding-top:var(--mg-cap);padding-bottom:var(--mg-cap)}
.fr-verbo{flex-direction:column;align-items:flex-start;justify-content:center;min-height:0!important;padding:40px 0}
.fr-verbo:first-child{padding-top:0}
.fr-vl{margin:16px 0 0;max-width:34ch;font:400 clamp(16px,4.3vw,18px)/1.5 var(--sans);color:rgb(243 242 245/.74);text-wrap:pretty}
.fr-respaldo{margin-top:32px!important}
@media (prefers-reduced-motion:no-preference){
 @supports selector(:has(a)){
  html.js .fr-verbo .fr-vl{opacity:0;transform:translate3d(0,12px,0);transition:opacity .52s var(--mg-entra) .16s,transform .6s var(--mg-entra) .16s}
  html.js .fr-verbo:is(.escrito,:has(>.nudo.prendido)) .fr-vl{opacity:1;transform:none}
 }
}
.app-inicio #mision.ia4,.app-inicio #mision.ia4 .ia4-mision{min-height:0!important}
.app-inicio #mision.ia4 .ia4-mision{padding-top:var(--mg-cap);padding-bottom:var(--mg-cap)}
.fr-seguir.menu{padding-top:48px}
.fr-seguir .fr-l{text-wrap:pretty}
/* el carrusel y la misión empiezan después de la orilla del hilo; el cierre se anuda junto a «Hablemos» */
@media (max-width:899px){
 .fr-seguir .mn{margin-left:var(--mg-orilla);padding-left:0;scroll-padding-inline:0}
 #mision .ia4-m-texto{padding-left:42px!important;padding-right:16px!important}
}
@media (min-width:900px){
 .fr-seguir .mn{padding-left:calc(max(56px,4.4vw) + 30px)!important;scroll-padding-inline:calc(max(56px,4.4vw) + 30px)!important}
}
.fr-cierre{position:relative;display:flex!important;justify-content:flex-start!important;align-items:center;padding:var(--mg-cap) 16px 48px 42px!important;text-align:left!important}
.fr-cierre .fr-hablemos{margin:0!important}
.fr-cierre .nudo{position:absolute!important;left:0;top:50%}
@media (min-width:900px){.fr-cierre{padding-left:calc(max(56px,4.4vw) + 30px)!important}}
.pie-n{padding-bottom:calc(var(--dk-libre,104px) + 24px)!important}

/* ═════════════════════════════ LA PUERTA: SIGUE CON UNA RAZÓN ═════════════════════════════ */
.app .vista-fin{justify-items:start;text-align:left;padding-top:var(--mg-cap)}
.vista-fin .vf-nudo{position:absolute;left:0;top:var(--mg-cap)}
.vista-fin .vf-p{width:100%;max-width:560px}
.vf-k{font:600 10px/1.4 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--rosa-suave,#e6b4c2)}
p.vf-k{margin:0}
.vf-d{font:400 14.5px/1.45 var(--sans)!important;font-stretch:100%!important;letter-spacing:0!important;text-transform:none!important;color:rgb(243 242 245/.78)!important;text-wrap:pretty}
.vista-fin .vf-hablemos{font:400 15px/1.4 var(--sans);color:rgb(243 242 245/.72);border-bottom:1px solid rgb(243 242 245/.25);padding:0}
@media (min-width:900px){.app .vista-fin{padding-left:calc(max(56px,4.4vw) + 8px)}}

/* ═════════════════════════════ PARA RESOLVER HOY: LA MESA DE LAS SEIS GUÍAS ═════════════════════════════
   El idioma de la mesa del war room (lección 01): un número, el objeto, el nombre y una línea. Seis hermanas del
   mismo tamaño; cada una conserva su objeto y su color. */
#herramientas.rh .rh-puertas{counter-reset:guia;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:1fr;gap:8px!important;margin-top:32px}
#herramientas.rh .rh-puertas>.rh-p{counter-increment:guia;position:relative;grid-column:auto!important;grid-row:auto!important;margin:0!important;min-width:0}
#herramientas.rh .rh-puertas .rh-a{position:relative;display:flex!important;flex-direction:column;height:100%;min-height:0;padding:0!important;border-radius:16px;overflow:hidden}
#herramientas.rh .rh-puertas .rh-a::before{content:counter(guia,decimal-leading-zero);position:absolute;top:12px;left:12px;z-index:3;font:500 10.5px/1 var(--mono,"JetBrains Mono",monospace);letter-spacing:.1em;color:rgb(243 242 245/.55)}
#herramientas.rh .rh-puertas .rh-escena{display:grid!important;place-items:center;width:100%!important;height:auto!important;aspect-ratio:4/3!important;margin:0!important;flex:none!important;min-height:0!important}
#herramientas.rh .rh-puertas .rh-obj{width:72%!important;height:auto!important;max-height:86%}
#herramientas.rh .rh-puertas .rh-texto{display:flex!important;flex-direction:column;gap:6px;flex:1;padding:4px 12px 14px!important}
#herramientas.rh .rh-puertas .rh-t{font-size:clamp(19px,5.2vw,24px)!important;line-height:1.08}
#herramientas.rh .rh-puertas .rh-t em{display:block!important}
#herramientas.rh .rh-puertas .rh-l{font-size:13.5px!important;line-height:1.45;color:rgb(243 242 245/.78)}
#herramientas.rh .rh-puertas .rh-d{margin-top:auto!important;padding-top:6px;font-size:9.5px!important;letter-spacing:.12em!important}
#herramientas.rh .rh-puertas .rh-flecha{position:absolute;top:12px!important;right:12px!important;bottom:auto!important;left:auto!important;width:24px;height:auto}
@media (max-width:359px){#herramientas.rh .rh-puertas{grid-template-columns:1fr!important}}
@media (min-width:900px){
 #herramientas.rh .rh-puertas{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-top:40px}
 #herramientas.rh .rh-puertas .rh-escena{aspect-ratio:16/9!important}
 #herramientas.rh .rh-puertas .rh-obj{width:46%!important}
 #herramientas.rh .rh-puertas .rh-texto{padding:6px 20px 20px!important}
 #herramientas.rh .rh-puertas .rh-t{font-size:clamp(26px,2.2vw,32px)!important}
 #herramientas.rh .rh-puertas .rh-l{font-size:15px!important}
 #herramientas.rh .rh-puertas .rh-t em{display:inline!important}
}

/* ═════════════════════════════ EL OFICIO ═════════════════════════════ */
#servicios .o4-portadas{gap:32px!important}
@media (max-width:899px){#servicios .o4-tapa{aspect-ratio:4/5.8}}
/* el último capítulo de cada vista no deja hueco antes de la puerta: la puerta trae su propio aire */
#servicios.o4,#herramientas.rh,#ia.ia4,#su-casa,#conferencias{padding-bottom:0!important}
#servicios .o4-p{position:relative}
.o4-mov{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font:400 15px/1.4 var(--sans);color:var(--rosa-suave,#e6b4c2);text-decoration:none;border-bottom:1px solid rgb(230 180 194/.35)}
.o4-mov:hover{border-bottom-color:var(--rosa-suave,#e6b4c2)}
@media (min-width:900px){#servicios .o4-portadas{gap:24px!important}}

/* ═════════════════════════════ IA ═════════════════════════════ */
#ia .ia4-sistema,#ia .ia4-familias,#ia .ia-escalon,#ia .ia-aprendo{position:relative}
#ia .ia4-fam-l{margin:12px 0 0}
@media (min-width:900px){
 #ia .ia4-s-cab{grid-template-columns:minmax(0,1fr) auto}
 #ia .ia4-s-cab>.ia4-h3,#ia .ia4-s-cab>.ia4-s-l{grid-column:1}
 #ia .ia4-s-cab>.ia4-mandos{grid-column:2;grid-row:1/3}
 #ia .ia4-s-l{max-width:52ch}
}
#ia .ia4-familias{margin-top:var(--mg-cap)!important}
#ia .ia-escalon{margin-top:var(--mg-cap)!important}
.ia-esc-l{display:block;max-width:32ch;margin:8px auto 0;font:400 15px/1.45 var(--sans);color:rgb(243 242 245/.8);text-wrap:pretty}
/* Aprendo en público: una tarjeta de la casa por insignia; lo que está en curso, en una línea */
.ia-aprendo{margin-top:var(--mg-cap)}
.ia-aprendo .ia4-s-l{max-width:40ch;margin:12px 0 0}
.ap-lista{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px;max-width:640px}
.ap-insignia{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:center;padding:16px;border-radius:20px;
 background:linear-gradient(160deg,rgb(196 92 124/.16),rgb(255 255 255/.03) 60%),rgb(24 22 27/.8);
 box-shadow:0 12px 40px rgb(0 0 0/.25),inset 0 1px 0 rgb(255 255 255/.14),inset 0 0 0 1px rgb(230 180 194/.22)}
.ap-sello{width:88px;height:88px;filter:drop-shadow(0 8px 14px rgb(0 0 0/.4))}
.ap-k{margin:0;font:600 10px/1.4 var(--sans);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave,#e6b4c2)}
.ap-t{margin:6px 0 0;font:400 clamp(26px,7vw,34px)/1.05 var(--didona,"Bodoni Moda",Georgia,serif);color:var(--platino-claro,#f3f2f5)}
.ap-t em{font-style:italic;color:var(--rosa-suave,#e6b4c2)}
.ap-l{margin:8px 0 0;font:400 15px/1.5 var(--sans);color:rgb(243 242 245/.8);text-wrap:pretty}
.ap-cred{display:inline-flex;align-items:center;min-height:44px;color:var(--rosa-suave,#e6b4c2)}
.ap-curso{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;box-shadow:inset 0 0 0 1px rgb(243 242 245/.12)}
.ap-c-t{font:italic 400 22px/1.2 var(--didona,"Bodoni Moda",Georgia,serif);color:var(--platino-claro,#f3f2f5)}

/* ═════════════════════════════ NATALIA ═════════════════════════════ */
#trayectoria .tr-hitos{gap:16px!important}
#trayectoria .tr-hito{min-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}
#trayectoria .tr-hito .tr-nodo{position:absolute;left:0;top:32px}
#trayectoria .tr-periodo em{font-style:italic}
#trayectoria .tr-inst{margin-top:6px}
#trayectoria .tr-estudios{margin-top:32px!important;margin-bottom:0!important}
#trayectoria{padding-bottom:48px!important}
#trayectoria .tr-cuerpo{padding-bottom:0!important}
#conferencias.cartelera{min-height:0!important;padding-top:var(--mg-cap)!important;padding-bottom:0!important}
#conferencias .ct-marco{position:relative}
@media (min-width:900px){#trayectoria .tr-hitos{gap:24px!important}}

/* ═════════════════════════════ CASAS ═════════════════════════════ */
#su-casa .aire-marco{min-height:0!important}
#su-casa .aire-guia{position:relative}
#su-casa .aire-guia>.nudo{top:40px}
#su-casa .cs-quinta{position:relative;margin-top:var(--mg-cap)}
#su-casa .cs-quinta-a{display:inline-flex;align-items:center;min-height:44px}
#su-casa .cs-mas summary{min-height:44px;display:flex;align-items:center}

/* ═════════════════════════════ HABLEMOS ═════════════════════════════ */
#conversacion .aviso-c{position:relative}
#conversacion .cv-urgente a{display:inline-flex;align-items:center;min-height:44px}

/* Trayectoria explicada (4 nov): qué significaba cada cargo, «Hoy» que une los tres lados, más pista para 8 hitos */
#trayectoria .tr-que{position:relative;margin:10px 2px 0;padding-left:20px;max-width:36ch;font:400 15.5px/1.5 var(--sans);color:rgb(26 23 25/.74);text-wrap:pretty}
#trayectoria .tr-que::before{content:"—";position:absolute;left:0;top:0;color:var(--rosa-tinta,#9e2f55)}
#trayectoria .tr-usos{list-style:none;margin:14px 2px 0;padding:14px 0 0;border-top:1px solid rgb(255 255 255/.22);display:grid;gap:9px;font:400 15px/1.45 var(--sans);color:rgb(255 255 255/.92)}
#trayectoria .tr-usos b{font-weight:600;color:var(--rosa-perla,#f3dde4)}
#trayectoria .tr-cred{color:var(--rosa-tinta,#9e2f55);text-decoration:none;border-bottom:1px solid rgb(158 47 85/.35);white-space:nowrap}
#trayectoria.tr-tunel-on .tr-pista{height:400svh}
#trayectoria.tr-tunel-on .tr-que{font-size:16px}
#trayectoria.tr-tunel-on .tr-hoy .tr-cargo{font-size:17px}
@media (min-width:900px){#trayectoria:not(.tr-tunel-on) .tr-que,#trayectoria:not(.tr-tunel-on) .tr-usos,#trayectoria:not(.tr-tunel-on) .tr-tramo{grid-column:2}}
/* La escalera: el eje humano de la misión */
#mision.ia4 .ia4-m-h{margin:18px 0 0;max-width:34ch;font:400 clamp(15.5px,4.2vw,18px)/1.5 var(--sans);color:var(--p80,rgb(255 255 255/.8));text-wrap:pretty}
/* Hablemos: el canal ya existe */
#conversacion .cv-canal{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#conversacion .cv-escribe{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--rosa-suave,#e6b4c2);color:#1a1719;text-decoration:none;font:600 16px/1 var(--sans);letter-spacing:.01em}
#conversacion .cv-escribe:focus-visible{outline:2px solid #fff;outline-offset:3px}
#conversacion .cv-correo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;font:400 15px/1.4 var(--sans);color:var(--plat,#e9e7ec)}
#conversacion .cv-dir{user-select:all;-webkit-user-select:all}
#conversacion .cv-copia{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid rgb(230 180 194/.45);background:transparent;color:var(--rosa-suave,#e6b4c2);font:500 13px/1 var(--sans);letter-spacing:.06em;cursor:pointer}
#conversacion .cv-copia:focus-visible{outline:2px solid #fff;outline-offset:2px}
#trayectoria.tr-tunel-on .tr-hoy .tr-usos{gap:6px;font-size:14.5px}
#trayectoria.tr-tunel-on .tr-hoy .tr-casas{margin-top:12px}
#trayectoria.tr-tunel-on .tr-hoy .tr-fig{margin-bottom:12px}
#trayectoria.tr-tunel-on #tr-7 .tr-periodo{font-size:clamp(40px,3.6vw,54px)}
/* La escalera del frente (4 nov): el muro suelta sus ladrillos y se vuelven escalones que suben hacia la luz.
   Mismo dibujo que «Tu primer paso con IA», que la recuerda ya armada y quieta. --p lo pone f4/ia.js con el scroll. */
#mision .esc2{width:min(92%,460px)}
#mision .esc2 .e2-primero path:first-of-type{filter:drop-shadow(0 0 10px rgb(255 214 150/.85))}
#mision.ia4-vivo .esc2 .e-paso{transform:translate(calc((1 - var(--e)) * var(--dx)),calc((1 - var(--e)) * var(--dy))) scale(calc(.55 + .45 * var(--e)));transform-box:fill-box;transform-origin:50% 60%;opacity:calc(.15 + .85 * var(--e))}
#mision.ia4-vivo .esc2 .e2-hue{opacity:clamp(0,var(--p,1) * 2.2,1)}
@media (prefers-reduced-motion:reduce){#mision .esc2 .e-paso{transform:none!important;opacity:1!important}}