/* Para resolver hoy · corte f4. Todo vive bajo #herramientas.rh.
   El marco (tipografía, flecha, bordes, fondo de página) va en ónix, rosa y platino.
   Lo que explica (los seis objetos) lleva su color propio, hasta tres acentos por pieza:
   crisis = esfera ámbar, acero y aguja roja · ¿es real? = sepia, latón y una costura turquesa ·
   entrevista = cromo, onda menta y luz roja · reglas = pastas azules, papel crema y lacre ·
   moderar = nogal, luz ámbar del turno y la silla verde agua de quien modera · primer paso = escalera de luz cálida.
   Sólo se animan transform y opacity. Con prefers-reduced-motion todo queda quieto y completo. */

#herramientas.rh{
 --rh-onix:#0b0a0c;--rh-hilo:#c45c7c;--rh-suave:#e6b4c2;--rh-tinta:#9e2f55;--rh-perla:#f3dde4;
 --rh-plat:#d9d7dc;--rh-plat-c:#f3f2f5;--rh-sutil:rgb(243 242 245/.78);
 --rh-serif:var(--didona,"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif);--rh-sans:Archivo,"Helvetica Neue",Arial,sans-serif;
 --rh-ease:cubic-bezier(.16,1,.3,1);
 position:relative;isolation:isolate;overflow:clip;
 padding:clamp(88px,12svh,140px) max(16px,env(safe-area-inset-right,0px)) clamp(80px,11svh,128px) max(16px,env(safe-area-inset-left,0px));
 background:var(--rh-onix);color:var(--rh-plat-c);font-family:var(--rh-sans)}
#herramientas.rh *,#herramientas.rh *::before,#herramientas.rh *::after{box-sizing:border-box}
#herramientas.rh .rh-frente{position:relative;max-width:1180px;margin-inline:auto}

/* ——— cabeza ——— */
#herramientas.rh .rh-cabeza{position:relative;padding-inline:4px}
#herramientas.rh .rh-cabeza>.nudo{left:-12px;top:6px}
#herramientas.rh .rh-etq{margin:0;font:600 11px/1.3 var(--rh-sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--rh-suave)}
#herramientas.rh .rh-titular{margin:14px 0 0;font:400 clamp(46px,12.4vw,104px)/.98 var(--rh-serif);letter-spacing:-.02em;color:var(--rh-plat-c)}
#herramientas.rh .rh-titular em{font-style:italic;color:var(--rh-suave)}
#herramientas.rh .rh-sub{margin:18px 0 0;max-width:30ch;font:400 clamp(17px,4.6vw,20px)/1.45 var(--rh-sans);color:var(--rh-sutil);text-wrap:pretty}

/* ——— las portadas ——— */
#herramientas.rh .rh-puertas{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px}
#herramientas.rh .rh-p{display:flex;min-width:0}
#herramientas.rh .rh-a{
 --fondo:#17141a;--haz:rgb(255 255 255/.06);
 position:relative;isolation:isolate;flex:1;min-width:0;display:flex;flex-direction:column;
 overflow:hidden;border-radius:2px;text-decoration:none;color:inherit;
 background:var(--fondo);
 box-shadow:0 18px 50px rgb(0 0 0/.35),inset 0 0 0 1px rgb(243 242 245/.07);
 -webkit-tap-highlight-color:transparent;transition:transform .3s var(--rh-ease)}
#herramientas.rh .rh-escena{position:relative;display:grid;place-items:center;aspect-ratio:16/9.4;overflow:hidden;
 background:radial-gradient(70% 80% at 50% 42%,var(--haz),transparent 72%)}
#herramientas.rh .rh-obj{display:block;width:76%;height:88%;overflow:visible;transition:transform .8s var(--rh-ease)}
#herramientas.rh .rh-texto{position:relative;display:grid;gap:6px;padding:4px 56px 22px 20px}
#herramientas.rh .rh-k{font:600 10.5px/1.3 var(--rh-sans);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;color:rgb(243 242 245/.74)}
#herramientas.rh .rh-t{display:block;margin-top:2px;font:400 clamp(27px,7.6vw,34px)/1.02 var(--rh-serif);letter-spacing:-.01em;color:var(--rh-plat-c);text-wrap:balance}
#herramientas.rh .rh-t em{display:block;font-style:italic;color:var(--rh-suave)}
#herramientas.rh .rh-l{margin-top:4px;font:400 15px/1.45 var(--rh-sans);color:var(--rh-sutil);text-wrap:pretty}
#herramientas.rh .rh-flecha{position:absolute;right:20px;bottom:26px;width:26px;height:12px;fill:none;stroke:var(--rh-suave);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--rh-ease)}
#herramientas.rh .rh-a:focus-visible{outline:2px solid var(--rh-suave);outline-offset:4px}
#herramientas.rh .rh-a:active{transform:scale(.99)}
@media (hover:hover){
 #herramientas.rh .rh-a:hover .rh-flecha{transform:translateX(5px)}
 #herramientas.rh .rh-a:hover .rh-obj{transform:translateY(-4px) scale(1.03)}
}

/* cada escena, su luz */
#herramientas.rh .rh-crisis .rh-a{--fondo:linear-gradient(180deg,#221a14,#141012 78%);--haz:rgb(238 165 58/.22);box-shadow:0 18px 50px rgb(0 0 0/.4),inset 0 0 0 1px rgb(196 92 124/.55)}
#herramientas.rh .rh-real .rh-a{--fondo:linear-gradient(180deg,#241c15,#151113 80%);--haz:rgb(226 199 154/.16)}
#herramientas.rh .rh-voz .rh-a{--fondo:linear-gradient(180deg,#10201c,#111214 80%);--haz:rgb(127 214 180/.16)}
#herramientas.rh .rh-reglas .rh-a{--fondo:linear-gradient(180deg,#121c33,#111117 80%);--haz:rgb(140 170 230/.16)}
#herramientas.rh .rh-mesa .rh-a{--fondo:linear-gradient(180deg,#22180f,#141012 80%);--haz:rgb(242 169 74/.14)}
#herramientas.rh .rh-paso .rh-a{--fondo:linear-gradient(160deg,#3a1a24,#1d1016 55%,#120d10);--haz:rgb(255 201 138/.22);box-shadow:0 18px 50px rgb(0 0 0/.4),inset 0 0 0 1px rgb(243 221 228/.32)}
#herramientas.rh .rh-paso .rh-k{color:var(--rh-perla)}

/* la crisis: la portada grande, la primera que se ve */
#herramientas.rh .rh-crisis .rh-escena{aspect-ratio:1/.82}
#herramientas.rh .rh-crisis .rh-obj{width:64%;height:90%}
#herramientas.rh .rh-crisis .rh-t{font-size:clamp(32px,9vw,40px)}

/* el primer paso: aparte, ancha y cálida */
#herramientas.rh .rh-paso{margin-top:22px}
#herramientas.rh .rh-paso .rh-escena{aspect-ratio:16/11}
#herramientas.rh .rh-paso .rh-obj{width:88%}

/* ——— los gestos (sólo transform y opacity) ——— */
#herramientas.rh .rh-aguja,#herramientas.rh .rh-lupa,#herramientas.rh .rh-turno,#herramientas.rh .rh-sello,#herramientas.rh .rh-halo,#herramientas.rh .rh-rombo{transform-box:view-box}
#herramientas.rh .rh-onda rect,#herramientas.rh .rh-reglas-tinta path,#herramientas.rh .rh-escalones>g{transform-box:fill-box}
#herramientas.rh .rh-aguja{transform-origin:110px 132px}
#herramientas.rh .rh-onda rect{fill:#7fd6b4;transform-origin:50% 50%}
#herramientas.rh .rh-sello{transform-origin:189px 137px}
#herramientas.rh .rh-reglas-tinta path{transform-origin:0 50%}
#herramientas.rh .rh-halo{transform-origin:276px 30px}
#herramientas.rh .rh-rombo{transform-origin:262px 11px}

@media (prefers-reduced-motion:no-preference){
 /* la aguja corre: una vuelta cada 12 s */
 #herramientas.rh .rh-aguja{animation:rh-gira 12s linear infinite}
 /* la lupa recorre la tira y se queda en el cuadro que no cuadra */
 #herramientas.rh .rh-lupa{animation:rh-lupa 8s cubic-bezier(.65,0,.35,1) infinite}
 /* la voz respira */
 #herramientas.rh .rh-onda rect{animation:rh-voz 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.4s)}
 /* el turno pasa de silla en silla y vuelve a quien modera */
 #herramientas.rh .rh-turno{animation:rh-turno 10s cubic-bezier(.65,0,.35,1) infinite}
 /* la escalera se enciende de abajo arriba */
 #herramientas.rh .rh-escalones>g{animation:rh-luz 5.4s ease-in-out infinite;animation-delay:calc(var(--k) * .32s)}
 #herramientas.rh .rh-halo{animation:rh-halo 5.4s ease-in-out infinite 1.6s}
 #herramientas.rh .rh-rombo{animation:rh-flota 5.4s ease-in-out infinite 1.6s}
 /* la libreta: las reglas se escriben y cae el sello (una vez, al entrar) */
 #herramientas.rh.rh-js .rh-reglas-tinta path{opacity:0;transform:scaleX(.2)}
 #herramientas.rh.rh-js .rh-sello{opacity:0;transform:translateY(-30px) scale(1.4)}
 #herramientas.rh.rh-js .rh-reglas.en .rh-reglas-tinta path{opacity:1;transform:none;transition:opacity .5s ease calc(.4s + var(--k) * .28s),transform .7s var(--rh-ease) calc(.4s + var(--k) * .28s)}
 #herramientas.rh.rh-js .rh-reglas.en .rh-sello{opacity:1;transform:none;transition:opacity .25s ease 1.45s,transform .55s cubic-bezier(.3,1.5,.5,1) 1.45s}

 /* entrada de cada portada */
 #herramientas.rh.rh-js .rh-cabeza>*:not(.nudo),#herramientas.rh.rh-js .rh-p,#herramientas.rh.rh-js .rh-cierre{opacity:0;transform:translateY(22px)}
 #herramientas.rh.rh-js .rh-cabeza.en>*:not(.nudo){opacity:1;transform:none;transition:opacity .7s var(--rh-ease),transform .9s var(--rh-ease)}
 #herramientas.rh.rh-js .rh-cabeza.en>.rh-titular{transition-delay:.08s}
 #herramientas.rh.rh-js .rh-cabeza.en>.rh-sub{transition-delay:.18s}
 #herramientas.rh.rh-js .rh-p.en,#herramientas.rh.rh-js .rh-cierre.en{opacity:1;transform:none;transition:opacity .7s var(--rh-ease) calc(min(var(--i),3) * 60ms),transform .9s var(--rh-ease) calc(min(var(--i),3) * 60ms)}
 /* fuera de la pantalla, los gestos esperan */
 #herramientas.rh.rh-js .rh-p:not(.vivo) *{animation-play-state:paused}
}
@keyframes rh-gira{to{transform:rotate(360deg)}}
@keyframes rh-lupa{0%,8%{transform:translate(-58px,6px)}30%,38%{transform:translate(2px,0)}60%,92%{transform:translate(62px,-4px)}100%{transform:translate(-58px,6px)}}
@keyframes rh-voz{from{transform:scaleY(.32)}to{transform:scaleY(1)}}
@keyframes rh-turno{0%,20%{transform:translate(0,0)}25%,45%{transform:translate(60px,-8px)}50%,70%{transform:translate(120px,0)}75%,95%{transform:translate(-36px,14px)}100%{transform:translate(0,0)}}
@keyframes rh-luz{0%,100%{opacity:.55}30%,55%{opacity:1}}
@keyframes rh-halo{0%,100%{opacity:.55;transform:scale(.9)}45%{opacity:1;transform:scale(1.06)}}
@keyframes rh-flota{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}

/* ——— cierre ——— */
#herramientas.rh .rh-cierre{margin:40px 0 0;padding-inline:4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font:400 clamp(24px,6.4vw,34px)/1.25 var(--rh-serif);color:var(--rh-sutil)}
#herramientas.rh .rh-cierre a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--rh-suave);text-decoration:none;
 background:linear-gradient(var(--rh-hilo),var(--rh-hilo)) 0 86%/100% 1px no-repeat}
#herramientas.rh .rh-cierre em{font-style:italic}
#herramientas.rh .rh-cierre svg{width:26px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--rh-ease)}
#herramientas.rh .rh-cierre a:focus-visible{outline:2px solid var(--rh-suave);outline-offset:4px}
@media (hover:hover){#herramientas.rh .rh-cierre a:hover svg{transform:translateX(5px)}}

/* ——— tableta: dos columnas; crisis y primer paso a todo lo ancho ——— */
@media (min-width:640px){
 #herramientas.rh .rh-puertas{grid-template-columns:1fr 1fr;gap:16px}
 #herramientas.rh .rh-crisis,#herramientas.rh .rh-paso{grid-column:1 / -1}
 #herramientas.rh .rh-crisis .rh-escena{aspect-ratio:16/9}
 #herramientas.rh .rh-crisis .rh-obj{width:40%}
 #herramientas.rh .rh-t{font-size:28px}
}

/* ——— computadora: la crisis ocupa media plana; el primer paso, una franja propia ——— */
@media (min-width:1080px){
 #herramientas.rh{padding-inline:max(48px,env(safe-area-inset-left,0px))}
 #herramientas.rh .rh-cabeza{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:64px;align-items:end}
 #herramientas.rh .rh-etq{grid-column:1 / -1}
 #herramientas.rh .rh-sub{margin:0 0 .7em;justify-self:end;max-width:28ch;font-size:20px}
 #herramientas.rh .rh-puertas{margin-top:56px;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
 #herramientas.rh .rh-crisis{grid-column:1 / 3;grid-row:1 / 3}
 #herramientas.rh .rh-crisis .rh-escena{aspect-ratio:auto;flex:1;min-height:0}
 #herramientas.rh .rh-crisis .rh-obj{width:58%;height:84%}
 #herramientas.rh .rh-crisis .rh-texto{padding:6px 80px 34px 34px;gap:10px}
 #herramientas.rh .rh-crisis .rh-t{font-size:clamp(42px,3.6vw,54px)}
 #herramientas.rh .rh-crisis .rh-l{font-size:18px}
 #herramientas.rh .rh-crisis .rh-flecha{right:34px;bottom:42px;width:30px}
 #herramientas.rh .rh-texto{padding:2px 52px 24px 22px}
 #herramientas.rh .rh-t{font-size:clamp(25px,2.1vw,30px)}
 #herramientas.rh .rh-l{font-size:15px}
 #herramientas.rh .rh-paso{grid-column:1 / -1;margin-top:26px}
 #herramientas.rh .rh-paso .rh-a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
 #herramientas.rh .rh-paso .rh-escena{grid-column:2;grid-row:1;aspect-ratio:auto;height:100%;min-height:330px}
 #herramientas.rh .rh-paso .rh-obj{width:82%;height:82%}
 #herramientas.rh .rh-paso .rh-texto{grid-column:1;grid-row:1;padding:40px 40px 44px 48px;gap:12px}
 #herramientas.rh .rh-paso .rh-t{font-size:clamp(44px,3.8vw,58px)}
 #herramientas.rh .rh-paso .rh-l{font-size:19px;max-width:24ch}
 #herramientas.rh .rh-paso .rh-flecha{left:48px;right:auto;bottom:auto;top:calc(100% - 52px);width:30px}
 #herramientas.rh .rh-cierre{margin-top:56px;justify-content:flex-end}
}