/* Conferencia en Línea · oratoria.victortrejo.mx */
:root{
  --noche:#1B2340; --noche-2:#26304F; --noche-3:#33406A;
  --fogata:#F26B3A; --fogata-btn:#D4502A; --brasa:#F7B538;
  --niebla:#F3F5F9; --linea:#D5DAE5; --pizarra:#5B6478; --blanco:#FFFFFF;
  --t-aud:#B4431B; --b-aud:#FDE3D8; --t-acc:#8A5A00; --b-acc:#FDF0CF;
  --t-cam:#245C8A; --b-cam:#DCE8F4; --t-raz:#33703A; --b-raz:#DDEEDC; --t-for:#1B2340; --b-for:#E3E5EE;
  --f-display:"Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --f-body:"Atkinson Hyperlegible", Verdana, Arial, sans-serif;
  --r-sm:10px; --r-md:16px; --r-lg:28px;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);font-size:1.125rem;line-height:1.6;color:var(--noche);background:var(--blanco);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--fogata-btn);text-underline-offset:3px}
a:hover{color:var(--noche)}
:focus-visible{outline:3px solid var(--brasa);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;margin:0 0 .6em;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:780px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--brasa);color:var(--noche);padding:.5rem 1rem;z-index:100}
.skip:focus{left:1rem}

/* Top bar */
.topbar{background:var(--noche);color:var(--blanco);position:sticky;top:0;z-index:20}
.topbar__in{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--blanco);text-decoration:none;margin-right:auto}
.brand__mark{width:26px;height:26px;fill:var(--fogata)}
.brand__name{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand__ally{font-size:.9rem;color:#A9B1C7}
.nav{display:flex;gap:.25rem}
.nav a{color:#D6DAE6;text-decoration:none;padding:.5rem .8rem;border-radius:var(--r-sm);font-size:1rem}
.nav a:hover{color:var(--blanco);background:var(--noche-2)}
.nav a[aria-current="page"]{color:var(--blanco);background:var(--noche-3)}
.navtoggle{display:none;background:none;border:2px solid #4A5475;color:var(--blanco);font:inherit;font-size:1rem;padding:.35rem .9rem;border-radius:var(--r-sm);cursor:pointer}
@media (max-width:860px){
  .navtoggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--noche);flex-direction:column;padding:.5rem 1.5rem 1.25rem}
  .nav.is-open{display:flex}
  .brand__ally{display:none}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 1.05rem/1.2 var(--f-body);padding:.8rem 1.3rem;border-radius:var(--r-sm);border:2px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn--primary{background:var(--fogata-btn);color:var(--blanco)}
.btn--primary:hover{background:#B94220;color:var(--blanco)}
.btn--light{background:var(--blanco);color:var(--noche)}
.btn--light:hover{background:var(--brasa);color:var(--noche)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{background:rgba(127,127,127,.12);color:inherit}
.btn--big{font-size:1.2rem;padding:1rem 1.6rem}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:1rem;color:var(--fogata-btn);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pill{display:inline-block;background:var(--niebla);color:var(--pizarra);border-radius:999px;padding:.3rem .9rem;font-size:.95rem;margin:0}

/* Hero + mapa */
.hero{background:var(--noche);color:var(--blanco);padding:4.5rem 0 3.5rem;overflow:hidden}
.hero__title{font-size:clamp(2.8rem,7.5vw,5.6rem);line-height:.98;letter-spacing:-.03em;max-width:11ch;margin-bottom:.35em}
.hero__lead{font-size:1.25rem;color:#D6DAE6;max-width:52ch}
.mapa{margin:2.5rem -1rem 1.5rem}
.mapa__svg{display:block;width:100%;height:auto}
.mapa__hint{display:none;margin:.25rem 0 0;padding-left:1rem;font-size:.9rem;color:#8A93AD;position:sticky;left:0}
.mapa__zonas text{fill:#8A93AD;font:700 19px var(--f-display)}
.mapa__zonas line{stroke:var(--noche-3);stroke-width:2;stroke-dasharray:3 8}
.tramo{fill:none;stroke:#3A4670;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 12}
.tramo.is-done{stroke:var(--brasa);stroke-dasharray:none}
.estacion{cursor:pointer}
.estacion:focus{outline:none}
.estacion:focus-visible .estacion__base{stroke:var(--brasa);stroke-width:5}
.estacion__halo{fill:transparent}
.estacion__base{fill:var(--noche);stroke:#56628A;stroke-width:3;transition:fill .3s}
.estacion__num{fill:#A9B1C7;font:800 22px var(--f-display)}
.estacion__label{fill:#A9B1C7;font:400 17px var(--f-body)}
.estacion.is-locked .estacion__base{stroke-dasharray:4 5;opacity:.7}
.estacion.is-done .estacion__base{fill:var(--fogata);stroke:var(--brasa)}
.estacion.is-done .estacion__num{fill:var(--blanco)}
.estacion.is-done .estacion__label{fill:var(--brasa)}
.estacion.is-done .estacion__halo{fill:rgba(247,181,56,.16)}
.estacion.is-next .estacion__base{stroke:var(--fogata);stroke-width:4}
.estacion.is-next .estacion__num,.estacion.is-next .estacion__label{fill:var(--blanco)}
.estacion.is-next .estacion__halo{fill:rgba(242,107,58,.22);transform-origin:center;transform-box:fill-box;animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{0%,100%{transform:scale(.85);opacity:.9}50%{transform:scale(1.12);opacity:.35}}
@media (max-width:640px){.mapa{margin:1.5rem -1.5rem 1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 .5rem}.mapa__svg{min-width:760px}.mapa__hint{display:block}}
.hero__status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.progreso{margin:0;color:#D6DAE6}
.progreso span{font-family:var(--f-display);font-weight:800;font-size:1.6rem;color:var(--brasa)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* Sections */
.section{padding:4.5rem 0}
.section--tint{background:var(--niebla)}
.section--night{background:var(--noche);color:var(--blanco)}
.section--night a{color:var(--brasa)}
.section__lead{color:var(--pizarra);max-width:60ch;margin-bottom:2rem}
.pagehead{background:var(--niebla);padding:3.5rem 0 3rem}
.pagehead p{color:var(--pizarra);max-width:60ch;font-size:1.15rem}
.pagehead__back a{font-size:1rem}
.nota{font-size:.95rem;color:var(--pizarra)}
.section .narrow>h3{margin-top:2.25rem}
.aviso{background:var(--niebla);border-radius:var(--r-md);padding:1.25rem 1.5rem}

/* Misiones */
.misiones{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.mision{display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem 1.25rem;align-items:center;padding:1.1rem 1.25rem;border:2px solid var(--linea);border-radius:var(--r-md)}
.mision__num{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font:800 1.15rem var(--f-display);border:2px solid var(--linea);color:var(--pizarra)}
.mision__body h3{margin:0 0 .15rem}
.mision__body p{margin:0;color:var(--pizarra);font-size:1rem}
.mision__insignia{font-size:.95rem;border-radius:999px;padding:.3rem .85rem;background:var(--niebla);color:var(--pizarra)}
.mision__link{font-weight:700;font-size:1rem;white-space:nowrap}
.mision__lock{font-size:.95rem;color:var(--pizarra)}
.mision.is-done{border-color:var(--brasa);background:#FFFBF1}
.mision.is-done .mision__num{background:var(--fogata);border-color:var(--fogata);color:var(--blanco)}
.mision.is-done .mision__insignia{background:var(--brasa);color:var(--noche);font-weight:700}
.mision.is-locked{opacity:.65}
@media (max-width:700px){.mision{grid-template-columns:auto 1fr}.mision__insignia,.mision__link,.mision__lock{grid-column:2;justify-self:start}}
.labteaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.labteaser a{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;background:var(--blanco);border-radius:var(--r-md);color:var(--noche);text-decoration:none;border:2px solid transparent}
.labteaser a:hover{border-color:var(--fogata)}
.labteaser strong{font-family:var(--f-display);font-size:1.15rem}
.labteaser span{color:var(--pizarra);font-size:1rem}
.joinform{display:grid;gap:1rem;max-width:420px}
.joinform label{display:grid;gap:.3rem;font-weight:700;font-size:1rem}
.formmsg{min-height:1.5em;margin:0;font-size:1rem}

/* Programa */
.sesiones{list-style:none;padding:0;margin:0;display:grid;gap:2.5rem}
.sesion{display:grid;grid-template-columns:auto 1fr;gap:1.5rem}
.sesion__n{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;background:var(--noche);color:var(--blanco);font:800 1.8rem var(--f-display)}
.sesion--activa .sesion__n{background:var(--fogata)}
.sesion--pendiente .sesion__n{background:var(--niebla);color:var(--pizarra)}
.sesion__body ul{margin:0 0 1rem;padding-left:1.2rem}
.sesion__entregable{color:var(--pizarra)}

/* Sesión 1 */
.bloques{list-style:none;padding:0;margin:0;display:grid;gap:1.25rem}
.bloques li{display:grid;grid-template-columns:auto 1fr;gap:1rem}
.bloques__n{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--noche);color:var(--blanco);display:grid;place-items:center;font:800 1rem var(--f-display);margin-top:.1rem}
.bloques h3{margin:0 0 .2rem}
.bloques small{font-family:var(--f-body);font-weight:400;color:var(--pizarra);font-size:.9rem;margin-left:.4rem}
.bloques p{margin:0;color:var(--pizarra)}
.formula{font-family:var(--f-display);font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:700;line-height:1.5}
.ejemplo{font-size:1.15rem}
.p-aud,.p-acc,.p-cam,.p-raz,.p-for{border-radius:6px;padding:.05em .35em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.p-aud{background:var(--b-aud);color:var(--t-aud)}.p-acc{background:var(--b-acc);color:var(--t-acc)}.p-cam{background:var(--b-cam);color:var(--t-cam)}.p-raz{background:var(--b-raz);color:var(--t-raz)}.p-for{background:var(--b-for);color:var(--t-for)}
.codebox{background:var(--noche);color:#E9ECF4;border-radius:var(--r-md);padding:1.25rem 1.4rem;font:1rem/1.6 var(--f-body);white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 1rem}
.codebox [data-tema-slot]{color:var(--brasa)}
.chips{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font:inherit;font-size:.98rem;background:var(--blanco);border:2px solid var(--linea);color:var(--noche);border-radius:999px;padding:.4rem .95rem;cursor:pointer}
.chip:hover{border-color:var(--fogata)}
.reglas,.etica{padding-left:1.3rem}
.reglas li,.etica li{margin-bottom:.4rem}
.recursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.recursos ul{padding-left:1.1rem;margin:0}
.recursos li{margin-bottom:.4rem;font-size:1.02rem}
.tarea{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.tarea label{display:flex;gap:.8rem;align-items:center;font-size:1.15rem;padding:.8rem 1rem;background:var(--noche-2);border-radius:var(--r-sm);cursor:pointer}
.tarea input{width:1.35rem;height:1.35rem;accent-color:var(--fogata)}
.tarea label:has(input:checked){background:var(--noche-3);color:var(--brasa)}

/* Laboratorio */
.lab{padding-top:2rem;padding-bottom:4.5rem}
.tabs{display:flex;gap:.25rem;overflow-x:auto;border-bottom:2px solid var(--linea);margin-bottom:2rem}
.tab{font:700 1.05rem var(--f-body);background:none;border:0;padding:.8rem 1.2rem;color:var(--pizarra);cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--noche);border-bottom-color:var(--fogata)}
.tab:hover{color:var(--noche)}
.panel__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2rem;align-items:start}
@media (max-width:900px){.panel__grid{grid-template-columns:1fr}}
.builder{display:grid;gap:1.1rem}
.builder h2{margin-bottom:0}
.builder__hint{color:var(--pizarra);margin:0}
.fld{display:grid;gap:.35rem}
.fld>span{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.5rem}
.fld input,.fld select,.fld textarea{font:inherit;font-size:1.05rem;padding:.7rem .85rem;border:2px solid var(--linea);border-radius:var(--r-sm);background:var(--blanco);color:var(--noche);width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--fogata);outline:none;box-shadow:0 0 0 3px rgba(242,107,58,.2)}
.fld--aud>span::before,.fld--acc>span::before,.fld--cam>span::before,.fld--raz>span::before{content:"";width:.8rem;height:.8rem;border-radius:50%}
.fld--aud>span::before{background:var(--t-aud)}.fld--acc>span::before{background:#C98A00}.fld--cam>span::before{background:var(--t-cam)}.fld--raz>span::before{background:var(--t-raz)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.output{background:var(--noche);color:var(--blanco);border-radius:var(--r-lg);padding:2rem;position:sticky;top:90px}
.output__label{font-size:.95rem;color:#A9B1C7;margin:0 0 .5rem}
.output__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0}
.output .nota{color:#A9B1C7}
.output .chip{background:var(--noche-2);border-color:var(--noche-3);color:var(--blanco)}
.output .chip:hover{border-color:var(--brasa)}
.output .codebox{background:var(--noche-2);max-height:360px;overflow:auto}
.frase{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.35;min-height:3.5em;margin:0}
.frase .vacio{color:#6B7596}
.frase .o-aud{color:#FF9A70}.frase .o-acc{color:var(--brasa)}.frase .o-cam{color:#8EC0EA}.frase .o-raz{color:#9BD39A}
.medidor{font-size:1rem;color:#A9B1C7;margin:.8rem 0 0}
.medidor.is-long{color:#FF9A70}
.medidor.is-good{color:#9BD39A}
.opts{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.opts legend{font-weight:700;font-size:1rem;margin-bottom:.45rem;padding:0}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:inline-block;border:2px solid var(--linea);border-radius:999px;padding:.35rem .85rem;font-size:.97rem;background:var(--blanco)}
.opt input:checked+span{background:var(--noche);border-color:var(--noche);color:var(--blanco)}
.opt input:focus-visible+span{outline:3px solid var(--brasa);outline-offset:2px}
.lock{display:flex;gap:.6rem;align-items:center;font-size:1rem;background:var(--niebla);padding:.6rem .9rem;border-radius:var(--r-sm)}
.lock input{width:1.2rem;height:1.2rem;accent-color:var(--fogata)}
.imgprompt{font-size:1.2rem;line-height:1.55;min-height:4em;margin:0}
.contador{font-size:1rem;color:var(--brasa);min-height:1.5em}
.leyenda{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.95rem}
.fld--remix{max-width:520px;margin-bottom:1.5rem}
.remix{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}
.remixcard{border:2px solid var(--linea);border-radius:var(--r-md);padding:1.25rem;display:flex;flex-direction:column;gap:.8rem}
.remixcard h3{margin:0}
.remixcard p{margin:0;font-size:1.02rem;line-height:1.75}
.remixcard .btn{align-self:flex-start;font-size:.98rem;padding:.55rem 1rem}
.dados{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:2.5rem;align-items:start}
@media (max-width:900px){.dados{grid-template-columns:1fr}}
.retos{color:var(--pizarra);margin-top:1rem}
.dados__mesa{background:var(--noche);border-radius:var(--r-lg);padding:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:560px){.dados__mesa{grid-template-columns:1fr}}
.dado{background:var(--noche-2);border:2px solid var(--noche-3);border-radius:18px;padding:1.25rem 1rem;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;color:var(--blanco)}
.dado__tipo{font-size:.95rem;color:#A9B1C7}
.dado__valor{font-family:var(--f-display);font-weight:700;font-size:1.35rem;line-height:1.2}
.dado.is-rolling{animation:rodar .5s ease-in-out}
@keyframes rodar{0%{transform:rotate(0)}30%{transform:rotate(-8deg) scale(.96)}60%{transform:rotate(6deg) scale(1.03)}100%{transform:rotate(0)}}
.reloj{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border-top:2px solid var(--noche-3);padding-top:1.25rem;color:var(--blanco)}
.reloj__num{font-family:var(--f-display);font-weight:800;font-size:3.5rem;line-height:1;color:var(--brasa);font-variant-numeric:tabular-nums}
.reloj__num.is-urgent{color:var(--fogata)}
.reloj__actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* Rúbrica */
.tablewrap{overflow-x:auto}
.rubrica{border-collapse:collapse;width:100%;min-width:720px;font-size:1rem}
.rubrica th,.rubrica td{padding:1rem;border-bottom:2px solid var(--linea);text-align:left;vertical-align:top}
.rubrica thead th{font-family:var(--f-display);font-size:1.1rem;background:var(--noche);color:var(--blanco)}
.rubrica tbody th strong{display:block;font-family:var(--f-display);font-size:1.1rem}
.rubrica tbody th span{font-weight:400;color:var(--pizarra)}
.autoeval{display:grid;gap:.9rem}
.autoeval fieldset{border:0;padding:0;margin:0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.autoeval legend{float:left;width:8rem;font-weight:700;padding:0}
.autoeval label{display:flex;gap:.35rem;align-items:center}
.autoeval input{accent-color:var(--fogata);width:1.2rem;height:1.2rem}
.autoeval__res{font-family:var(--f-display);font-size:1.3rem;font-weight:700;margin-top:.5rem}

/* Evaluación */
.evalform{display:grid;gap:1.5rem}
.escala{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.escala legend{font-weight:700;margin-bottom:.5rem;padding:0}
.escala label{display:flex;align-items:center;gap:.3rem}
.escala input{accent-color:var(--fogata);width:1.2rem;height:1.2rem}
.escala__ext{width:100%;display:flex;justify-content:space-between;max-width:320px;font-size:.9rem;color:var(--pizarra);margin:0}
.checks{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}
.checks legend{font-weight:700;margin-bottom:.5rem;padding:0}
.checks input{accent-color:var(--fogata)}
.prose p{max-width:68ch}

/* Footer */
.footer{background:var(--noche);color:#A9B1C7;padding:2.5rem 0;font-size:1rem}
.footer a{color:var(--blanco)}
.footer__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.footer p{margin:0}
.footer__links{display:flex;gap:1.25rem;flex-wrap:wrap}

/* Toast + insignia */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,calc(100% + 2rem));visibility:hidden;background:var(--noche);color:var(--blanco);padding:.8rem 1.3rem;border-radius:var(--r-sm);font-weight:700;transition:transform .25s;z-index:60;box-shadow:0 10px 30px rgba(27,35,64,.3)}
.toast.is-on{transform:translate(-50%,0);visibility:visible}
.unlock{position:fixed;inset:0;background:rgba(27,35,64,.78);display:grid;place-items:center;z-index:70;padding:1.5rem}
.unlock[hidden]{display:none}
.unlock__card{background:var(--blanco);border-radius:var(--r-lg);padding:2.5rem 2rem 2rem;max-width:420px;width:100%;text-align:center;animation:aparece .5s cubic-bezier(.2,1.4,.4,1)}
.unlock__badge{width:120px;height:120px;margin:0 auto 1rem;display:block}
.unlock__badge circle{fill:var(--brasa)}
.unlock__badge path{fill:var(--fogata)}
.unlock__kicker{color:var(--pizarra);margin:0 0 .25rem}
.unlock__title{font-size:2rem;margin-bottom:.4rem}
.unlock__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.25rem}
.unlock .btn--ghost{color:var(--noche)}
@keyframes aparece{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

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