/* p-inicio.css · / (inicio) · prefijo ini- · solo var(--…) de tokens.css: sin hex, sin sombras, sin degradados, sin rebotes */
.p-ini [hidden]{display:none!important}
.ini-n{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);font-weight:var(--bold);color:var(--texto-2);font-variant-numeric:tabular-nums}

/* ---------- portada ---------- */
.ini-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-64);align-items:center;padding-top:var(--s-48);padding-bottom:var(--s-32)}
.ini-hero h1{max-width:none}
.ini-hero .lede{max-width:28em}
.ini-hero-stage{--hueco:var(--superficie);background:var(--superficie);border:0;min-height:560px;padding:var(--s-24) var(--s-24) 64px}
.ini-sym{width:min(236px,58%);display:grid;gap:var(--s-16)}
.ini-sym svg{width:100%;height:auto;overflow:visible}
.ini-sym .cap{fill:var(--control-apagado)}
.ini-sym .knob{fill:var(--hueco)}
.ini-lbls{position:relative;height:22px;font-size:var(--t-15);font-weight:var(--bold)}
.ini-lbls>span{position:absolute;left:21%;top:0;transform:translateX(-50%);white-space:nowrap;display:grid;color:var(--texto-2)}
.ini-lbls .ini-lbl-r{left:79%;color:var(--texto)}
.ini-lbl-r i{grid-area:1/1;font-style:normal;text-align:center}
.ini-lbl-r .on{opacity:0}
@keyframes ini-sube{to{transform:translateY(-80.43px)}}
@keyframes ini-azul{to{fill:var(--acento)}}
@keyframes ini-sale{to{opacity:0}}
@keyframes ini-entra{from{opacity:0}to{opacity:1}}
/* el rótulo cambia sin que se vean las dos palabras a la vez: una sale, luego entra la otra */
/* primero lo quieto (400 ms), luego el botón sube, y el azul llega último */
.ini-hero-stage.is-playing .k-r{animation:ini-sube 500ms var(--mov-estado) 400ms both}
.ini-hero-stage.is-playing .cap-r{animation:ini-azul var(--dur-micro) var(--mov-micro) 900ms both}
.ini-hero-stage.is-playing .ini-lbl-r .off{animation:ini-sale var(--dur-micro) linear 900ms both}
.ini-hero-stage.is-playing .ini-lbl-r .on{animation:ini-entra var(--dur-micro) linear 1050ms both}
@media (prefers-reduced-motion:reduce){
  .ini-hero-stage .k-r{transform:translateY(-80.43px)}
  .ini-hero-stage .cap-r{fill:var(--acento)}
  .ini-hero-stage .ini-lbl-r .off{opacity:0}.ini-hero-stage .ini-lbl-r .on{opacity:1}
}

/* la pared: piezas reales a la misma altura, más ancha que el texto */
.ini-pared{display:flex;gap:var(--s-16);align-items:center;padding-bottom:0;width:min(1360px,calc(100vw - 48px));margin:var(--s-16) 0 0 50%;transform:translateX(-50%)}
.p-ini .ini-pared figure{flex:var(--ar) 1 0;margin:0;min-width:0;width:auto}
.ini-pared img{width:100%;height:auto;border-radius:var(--r-captura);border:var(--borde-ancho) solid var(--borde);background:var(--superficie)}
@media (max-width:760px){
  .ini-pared{width:auto;margin:var(--s-16) calc(var(--margen-web) * -1) 0;transform:none;overflow-x:auto;padding:0 var(--margen-web);scroll-snap-type:x mandatory;scroll-padding-inline:var(--margen-web);scrollbar-width:none}
  .ini-pared::-webkit-scrollbar{display:none}
  .p-ini .ini-pared figure{flex:0 0 auto;height:260px;scroll-snap-align:start}
  .ini-pared img{height:100%;width:auto}
}

.ini-pie{margin:var(--s-12) 0 0;font-size:var(--t-12)}
.ini-sec{padding:var(--s-96) 0 var(--s-64)}
.ini-sec .sec-head h2{max-width:16em}

/* ---------- elige tu pieza ---------- */
.ini-elige{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-48);align-items:start}
.ini-pasos{list-style:none;margin:0;padding:0;border-top:var(--borde-encendido) solid var(--texto)}
.ini-paso{border-bottom:var(--borde-ancho) solid var(--borde)}
.ini-paso-cab{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-16);align-items:center;text-align:left;background:none;border:0;font:inherit;color:inherit;padding:var(--s-16) 0;min-height:68px;cursor:pointer}
.ini-paso-cab[disabled]{cursor:default}
.ini-lab{display:block;font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2)}
.ini-resp{display:block;font-size:var(--t-17);font-weight:var(--bold);margin-top:2px}
.ini-cambiar{font-size:var(--t-15);color:var(--texto-2);text-decoration:underline;text-underline-offset:3px}
.ini-paso-cab:hover .ini-cambiar{color:var(--texto)}
.ini-led{display:inline-block;position:relative;width:14px;height:26px;border:2px solid var(--control-apagado);border-radius:var(--r-pill);flex:none;transition:border-color var(--dur-estado) var(--mov-estado)}
.ini-led b{position:absolute;left:1.5px;right:1.5px;bottom:1.5px;height:7px;border-radius:var(--r-pill);background:var(--control-apagado);transition:transform var(--dur-estado) var(--mov-estado),background var(--dur-estado) var(--mov-estado)}
.ini-paso.hecho .ini-led{border-color:var(--control-hecho)}
.ini-paso.hecho .ini-led b{background:var(--control-hecho);transform:translateY(-12px)}
.ini-paso.ahora .ini-led{border-color:var(--acento)}
.ini-paso.ahora .ini-led b{background:var(--acento);transform:translateY(-12px)}
.ini-paso.apagado .ini-lab{color:var(--texto-2)}
.ini-cuerpo{padding:0 0 var(--s-24) calc(14px + var(--s-16))}
.ini-cuerpo h3{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24);margin:0 0 var(--s-8)}
.ini-ops{display:grid;gap:var(--s-8)}
@keyframes ini-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ini-ops .ini-op{animation:ini-fade var(--dur-entrada) var(--mov-entrada) both}
.ini-ops .ini-op:nth-child(2){animation-delay:40ms}.ini-ops .ini-op:nth-child(3){animation-delay:80ms}.ini-ops .ini-op:nth-child(4){animation-delay:120ms}.ini-ops .ini-op:nth-child(5){animation-delay:160ms}.ini-ops .ini-op:nth-child(6){animation-delay:200ms}
.ini-op{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--fondo);border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r-campo);padding:var(--s-12) var(--s-16);min-height:var(--tocable);cursor:pointer;transition:border-color var(--dur-micro) var(--mov-micro),background var(--dur-micro) var(--mov-micro)}
.ini-op b{display:block;font-size:var(--t-17)}
.ini-op span{display:block;font-size:var(--t-15);color:var(--texto-2);margin-top:2px}
.ini-op:hover{border-color:var(--texto)}
.ini-op[aria-pressed="true"]{border:var(--borde-encendido) solid var(--texto);background:var(--superficie)}
.ini-reinicia{margin-top:var(--s-24)}

.ini-res{position:sticky;top:calc(var(--cabecera) + var(--s-24));background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-32);min-height:520px}
.ini-res:focus{outline:none}
.ini-vacio{min-height:456px;display:grid;place-content:center;justify-items:center;gap:var(--s-24);text-align:center;color:var(--texto-2)}
.ini-vacio p{margin:0;font-size:var(--t-19);max-width:16em;color:var(--texto)}
.ini-vacio small{display:block;font-size:var(--t-15);color:var(--texto-2);margin-top:var(--s-8)}
.ini-hil{--w:22px;display:flex;gap:calc(var(--w)*var(--sw-separacion))}
.ini-hil i{position:relative;width:var(--w);height:calc(var(--w)*var(--sw-alto));border-radius:var(--r-pill);background:var(--control-apagado);transition:background var(--dur-estado) var(--mov-estado)}
.ini-hil i::after{content:"";position:absolute;left:calc(var(--w)*var(--sw-margen));top:calc(var(--w)*var(--sw-margen));width:calc(var(--w)*var(--sw-boton));height:calc(var(--w)*var(--sw-boton));border-radius:50%;background:var(--superficie);transform:translateY(calc(var(--w)*var(--sw-recorrido)));transition:transform var(--dur-estado) var(--mov-estado)}
.ini-hil i.on{background:var(--control-hecho)}
.ini-hil i.on::after{transform:none}
.ini-res-in{display:grid;grid-template-columns:minmax(0,min(260px,calc(420px*var(--ar)))) minmax(0,1fr);gap:var(--s-32);align-items:start;animation:ini-fade var(--dur-entrada) var(--mov-entrada) both}
.ini-res-in.ancha{grid-template-columns:minmax(0,1fr)}
.ini-prev{margin:0;width:100%;max-width:calc(420px*var(--ar))}
.ini-prev .scaled,.ini-prev .ratio{background:var(--elevado)}
.ini-prev .ratio{aspect-ratio:var(--ar)}
.ini-prev .ratio img{object-fit:contain}
.ini-prev figcaption{font-size:var(--t-12);color:var(--texto-2);margin-top:var(--s-8)}
.ini-res-txt h3{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24)}
.ini-res-txt .que{margin:var(--s-8) 0 var(--s-16);font-size:var(--t-17)}
.ini-res-txt .kv{margin-bottom:var(--s-8)}
.ini-otras{margin:var(--s-24) 0 0;font-size:var(--t-15);color:var(--texto-2)}
.ini-otras button{font:inherit;color:var(--texto);background:none;border:0;padding:0;margin-left:var(--s-12);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ini-otras button:hover{color:var(--acento-texto)}
.ini-link{font-size:var(--t-15);color:var(--texto);text-underline-offset:3px}

/* ---------- según quién eres ---------- */
.ini-roles{border-top:var(--borde-encendido) solid var(--texto)}
.ini-rol{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-24) var(--s-48);padding:var(--s-32) 0 var(--s-48);border-bottom:var(--borde-ancho) solid var(--borde);align-items:start}
.ini-rol:last-child{border-bottom:0}
.ini-rol header h3{font-size:var(--t-42);letter-spacing:var(--trk-42);line-height:var(--lh-titulo-42);margin:var(--s-8) 0}
.ini-rol header p{margin:0;color:var(--texto-2);max-width:17em}
.ini-ruta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24);counter-reset:r}
.ini-ruta li{counter-increment:r;position:relative;padding-top:var(--s-48)}
.ini-ruta li::before{content:counter(r);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:var(--borde-encendido) solid var(--texto);display:grid;place-items:center;font-size:var(--t-12);font-weight:var(--bold);font-variant-numeric:tabular-nums}
.ini-ruta li::after{content:"";position:absolute;left:40px;right:calc(var(--s-24)*-1 + 12px);top:14px;height:var(--borde-ancho);background:var(--borde)}
.ini-ruta li:last-child::after{display:none}
.ini-ruta a,.ini-ruta button{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:none;cursor:pointer}
.ini-ruta b{display:block;font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:var(--lh-titulo-24)}
.ini-ruta span{display:block;color:var(--texto-2);font-size:var(--t-15);margin-top:var(--s-4)}
.ini-ruta a:hover b,.ini-ruta button:hover b{text-decoration:underline;text-underline-offset:4px}
.ini-rol-dl{grid-column:2;justify-self:start}

/* ---------- todo el manual ---------- */
.ini-mapa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-48) var(--medianil)}
.ini-t{display:flex;flex-direction:column;gap:var(--s-16);min-width:0}
.ini-t.c6{grid-column:span 6}.ini-t.c4{grid-column:span 4}.ini-t.c3{grid-column:span 3}
.ini-t-img{display:block;border-radius:var(--r-tarjeta);overflow:hidden;background:var(--superficie);aspect-ratio:var(--ar)}
.ini-t.c6.fa{--ar:3/2}.ini-t.c3{--ar:258/360}.ini-t.c4{--ar:352/300}.ini-t.c6.fb{--ar:1080/600}
.ini-t-img img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity var(--dur-fundido) var(--mov-micro)}
.ini-t-img:hover img{opacity:.88}
.ini-t-cap{display:grid;grid-template-columns:2.2em minmax(0,1fr);align-items:baseline}
.ini-t-cap h3{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24)}
.ini-t-cap h3 a{text-decoration:none}
.ini-t-cap h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.ini-t-cap p{margin:var(--s-4) 0 0;color:var(--texto-2);font-size:var(--t-15)}
.ini-t-cap .ini-subs{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-16);margin-top:var(--s-8)}
.ini-subs a{color:var(--texto);text-underline-offset:3px}
@media (max-width:900px){
  .ini-t.c6{grid-column:span 12}.ini-t.c4,.ini-t.c3{grid-column:span 6}
}
@media (max-width:620px){
  .ini-t.c4,.ini-t.c3{grid-column:span 12}
}

/* ---------- cómo se mueve ---------- */
.ini-demos .stage{min-height:400px}
.ini-demo-in{display:grid;justify-items:center;gap:var(--s-16);padding-bottom:var(--s-24)}
.ini-sw{--w:72px;position:relative;display:block;width:var(--w);height:calc(var(--w)*var(--sw-alto));border:0;padding:0;border-radius:var(--r-pill);background:var(--control-apagado);cursor:pointer;transition:background var(--dur-estado) var(--mov-estado)}
.ini-sw i{position:absolute;left:calc(var(--w)*var(--sw-margen));top:calc(var(--w)*var(--sw-margen));width:calc(var(--w)*var(--sw-boton));height:calc(var(--w)*var(--sw-boton));border-radius:50%;background:var(--elevado);transform:translateY(calc(var(--w)*var(--sw-recorrido)));transition:transform var(--dur-estado) var(--mov-estado)}
.ini-sw[aria-checked="true"]{background:var(--acento)}
.ini-sw[aria-checked="true"] i{transform:none}
.ini-demo-estado{margin:0;display:grid;font-size:var(--t-17);font-weight:var(--bold)}
.ini-demo-estado span{grid-area:1/1;text-align:center;transition:opacity var(--dur-micro) linear}
.ini-demo-estado .on{opacity:0}
.ini-demo-sw[data-on="1"] .ini-demo-estado .off{opacity:0}
.ini-demo-sw[data-on="1"] .ini-demo-estado .on{opacity:1}
.ini-demo-estado .off{color:var(--texto-2)}
.ini-demo-sw[data-on="1"] .ini-demo-estado .on,.ini-demo-sw:not([data-on="1"]) .ini-demo-estado .off{transition-delay:var(--dur-micro)}
.ini-ti{margin:0;padding:var(--s-32) var(--s-32) 56px;font-size:var(--t-58);letter-spacing:var(--trk-58);line-height:var(--lh-titular);font-weight:var(--bold);justify-self:start}
.ini-ti .w{display:block}
.ini-caja{display:inline-block;padding:0 .12em;margin-left:-.12em;border-radius:.12em}
@keyframes ini-palabra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ini-caja{from{background:transparent;color:var(--texto)}to{background:var(--acento);color:var(--sobre-acento)}}
.ini-demo-ti.is-playing .w{animation:ini-palabra var(--dur-entrada) var(--mov-entrada) calc(var(--i)*80ms) both}
.ini-demo-ti.is-playing .ini-caja{animation:ini-caja var(--dur-micro) var(--mov-micro) 640ms both}
@media (prefers-reduced-motion:reduce){.ini-caja{background:var(--acento);color:var(--sobre-acento)}}
.ini-vals{margin:var(--s-24) 0 0;font-size:var(--t-15);color:var(--texto-2)}

/* ---------- descargar ---------- */
.ini-sec-fin{border-top:0;padding-top:var(--s-48);padding-bottom:0}
.ini-fin{background:var(--tinta);color:var(--papel);border-radius:var(--r-tarjeta);padding:var(--s-80) var(--s-64);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-48) var(--s-64);align-items:center}
.ini-fin-txt{min-width:0}
[data-theme="dark"] .ini-fin{background:var(--superficie)}
.ini-fin .eyebrow{color:var(--apagado)}
.ini-fin h2{font-size:var(--web-h2);letter-spacing:var(--web-h2-trk);line-height:var(--lh-titular);max-width:12em}
.ini-fin .lede{color:var(--apagado);max-width:30em}
.ini-cifras{display:flex;flex-wrap:wrap;gap:var(--s-16) var(--s-64);margin:var(--s-48) 0 0}
.ini-cifras dt{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--apagado)}
.ini-cifras dd{margin:var(--s-4) 0 0;font-size:var(--web-cifra);letter-spacing:var(--web-cifra-trk);line-height:var(--lh-cifra);font-weight:var(--bold);font-variant-numeric:tabular-nums}
.ini-arbol{list-style:none;margin:0;padding:var(--s-24) 0 0;border-top:var(--borde-ancho) solid var(--apagado);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-15);line-height:1.7;columns:2;column-gap:var(--s-24);color:var(--papel)}
.ini-arbol li{break-inside:avoid;white-space:nowrap}
.ini-arbol li.raiz{column-span:all;color:var(--apagado);margin-bottom:var(--s-8)}
.ini-arbol li span{color:var(--apagado)}
.ini-btn-claro{border-color:var(--papel);color:var(--papel)}
.ini-btn-claro:hover{background:var(--papel);color:var(--tinta)}
.ini-fin-nota{margin:var(--s-32) 0 0;color:var(--apagado)}
.ini-fin-nota a{color:var(--papel);text-underline-offset:3px}

/* ---------- tableta y celular ---------- */
@media (max-width:1000px){
  .ini-fin{grid-template-columns:minmax(0,1fr)}
  .ini-hero{grid-template-columns:minmax(0,1fr);gap:var(--s-48)}
  .ini-hero-stage{min-height:460px}
  .ini-elige{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}
  .ini-res{position:static}
  .ini-rol{grid-template-columns:minmax(0,1fr)}
  .ini-rol-dl{grid-column:1}
}
@media (max-width:700px){
  .ini-hero{padding-top:var(--s-24)}
  .ini-sec{padding:var(--s-64) 0 var(--s-48)}
  .ini-res{padding:var(--s-24);min-height:0}
  .ini-vacio{min-height:300px}
  .ini-res-in{grid-template-columns:minmax(0,1fr)}
  .ini-rol header h3{font-size:var(--t-30);letter-spacing:var(--trk-30);line-height:var(--lh-titulo-30)}
  .ini-ruta{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}
  .ini-ruta li::after{display:none}
  .ini-ti{font-size:var(--t-42);letter-spacing:var(--trk-42);padding:var(--s-24) var(--s-24) 56px}
  .ini-demos .stage{min-height:360px}
  .ini-fin{padding:var(--s-48) var(--s-24)}
  .ini-arbol{columns:1}
  .ini-cifras{gap:var(--s-16) var(--s-32)}
}