/* Para resolver hoy · plantilla común de una herramienta (f3)
   Una página propia tipo app: barra fija, el hilo de avance con una cuenta por paso, un paso por pantalla,
   navegación con el pulgar, la hoja del resultado (papel platino sobre ónix) y el pie con fuentes.
   Movimiento (MOVIMIENTO_ESPECIFICACION): entrada cubic-bezier(.2,.7,.2,1), salida cubic-bezier(.4,0,1,1);
   microinteracciones 160–220 ms, cambio de paso 320 ms, la hoja 520 ms. Sólo transform y opacity
   (y stroke-dashoffset en trazos). Con movimiento reducido, todo aparece quieto y completo.
   Documentación: PLANTILLA.md */

@font-face{font-family:"Bodoni Moda";src:url('../../comun/fonts/bodoni-moda.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url('../../comun/fonts/bodoni-moda-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:Archivo;src:url('../../comun/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url('../../comun/fonts/jetbrains-mono.woff2') format('woff2');font-weight:100 800;font-display:swap}

:root{
 color-scheme:dark;
 --onix:#0b0a0c;--onix-2:#141216;--onix-3:#1c1a1f;--tinta:#1a1719;
 --rosa-hilo:#c45c7c;--rosa-suave:#e6b4c2;--rosa-tinta:#9e2f55;--rosa-perla:#f3dde4;
 --platino:#d9d7dc;--platino-claro:#f3f2f5;
 --texto:#f3f2f5;--sutil:rgb(243 242 245/.74);--tenue:rgb(243 242 245/.58);--linea:rgb(243 242 245/.12);
 --didona:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
 --sans:Archivo,"Helvetica Neue",Arial,sans-serif;
 --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
 --entra:cubic-bezier(.2,.7,.2,1);--sale:cubic-bezier(.4,0,1,1);
 --barra-h:56px;--avance-h:66px;--nav-h:64px;
 --top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px);
 --px:max(20px,env(safe-area-inset-left,0px));
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--onix);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.hr{margin:0;min-height:100svh;background:var(--onix);color:var(--texto);font:400 17px/1.55 var(--sans);
 overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
:where(.hr) :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0}
:where(.hr) :where(a){color:inherit}
:where(.hr) :where(button){font:inherit;color:inherit;cursor:pointer}
.hr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hr ::selection{background:rgb(196 92 124/.45);color:#fff}
.hr :focus-visible{outline:2px solid var(--rosa-suave);outline-offset:3px}

/* Lo que el cristal refracta: dos luces bajas de la paleta, quietas */
.hr-fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hr-fondo i{position:absolute;display:block;border-radius:50%}
.hr-fondo i:nth-child(1){width:min(110vw,760px);aspect-ratio:1;left:-38vw;top:-14vh;background:radial-gradient(closest-side,rgb(196 92 124/.26),rgb(158 47 85/.10) 58%,rgb(158 47 85/0))}
.hr-fondo i:nth-child(2){width:min(90vw,620px);aspect-ratio:1;right:-36vw;bottom:-10vh;background:radial-gradient(closest-side,rgb(217 215 220/.10),rgb(217 215 220/0))}

/* ════════ El cristal (compartido) ════════ */
.hr-cristal{position:relative;isolation:isolate;
 background:linear-gradient(160deg,rgb(255 255 255/.10),rgb(255 255 255/.05) 48%,rgb(230 180 194/.06)),rgb(255 255 255/.02);
 -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
 box-shadow:0 12px 40px rgb(0 0 0/.25),inset 0 1px 0 rgb(255 255 255/.14)}
.hr-cristal::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
 background:linear-gradient(165deg,rgb(255 255 255/.35),rgb(255 255 255/.05) 42%,rgb(255 255 255/.05) 74%,rgb(230 180 194/.18));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .hr-cristal{background:linear-gradient(160deg,rgb(40 36 42/.97),rgb(24 21 26/.97) 55%,rgb(42 30 37/.97))}
}

/* ════════ Barra superior fija ════════ */
.hr-barra{position:fixed;z-index:40;top:0;left:0;right:0;height:calc(var(--barra-h) + var(--top));padding:var(--top) var(--px) 0;
 display:flex;align-items:center;justify-content:space-between;gap:14px;
 background:linear-gradient(180deg,rgb(11 10 12/.94),rgb(11 10 12/.82));
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.hr-volver{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding-right:6px;text-decoration:none;flex:none}
.hr-volver svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--rosa-suave);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--entra)}
.hr-volver span{font:400 17px/1 var(--didona);letter-spacing:-.005em;white-space:nowrap}
.hr-volver i{font-style:italic}
@media (hover:hover){.hr-volver:hover svg{transform:translateX(-3px)}}
.hr-nombre{min-width:0;font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rosa-suave);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
@media (max-width:380px){.hr-volver span{font-size:16px}}

/* ════════ El hilo de avance ════════ */
.hr-avance{position:fixed;z-index:39;left:0;right:0;top:calc(var(--barra-h) + var(--top));height:var(--avance-h);
 padding:0 var(--px);display:flex;flex-direction:column;justify-content:center;
 background:linear-gradient(180deg,rgb(11 10 12/.86),rgb(11 10 12/0));
 transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .22s var(--sale),transform .22s var(--sale),visibility 0s .22s}
.hr-en-pasos .hr-avance{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .32s var(--entra),transform .32s var(--entra),visibility 0s}
.hr-hilo{position:relative;display:flex;max-width:640px;width:100%;margin-inline:auto;height:44px;list-style:none;padding:0;margin-block:0}
.hr-hilo li{flex:1 1 0;display:flex;min-width:0}
/* la costura (lo que falta) y el hilo (lo recorrido) */
.hr-costura,.hr-lleno{position:absolute;top:50%;height:2px;margin-top:-1px;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));border-radius:2px;pointer-events:none}
.hr-costura{background:repeating-linear-gradient(90deg,rgb(243 242 245/.30) 0 4px,transparent 4px 8px)}
.hr-lleno{background:linear-gradient(90deg,var(--rosa-tinta),var(--rosa-hilo));box-shadow:0 0 10px rgb(196 92 124/.45);
 transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .36s var(--entra)}
.hr-cuenta{position:relative;z-index:1;flex:1;display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;background:none;border-radius:12px}
.hr-cuenta::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--onix);box-shadow:inset 0 0 0 1.5px rgb(243 242 245/.42);
 transition:transform .2s var(--entra),background-color .2s var(--entra),box-shadow .2s var(--entra)}
.hr-cuenta[data-estado="hecho"]::before{background:var(--rosa-hilo);box-shadow:inset 0 0 0 1.5px var(--rosa-hilo)}
.hr-cuenta[aria-current="step"]::before{background:var(--rosa-perla);box-shadow:inset 0 0 0 2px var(--rosa-hilo),0 0 0 5px rgb(196 92 124/.22),0 0 16px rgb(196 92 124/.55);transform:scale(1.25)}
/* la cuenta del resultado: un rombo */
.hr-cuenta-fin::before{border-radius:2px;transform:rotate(45deg)}
.hr-cuenta-fin[aria-current="step"]::before{transform:rotate(45deg) scale(1.25)}
.hr-cuenta:disabled{cursor:default}
.hr-cuenta:focus-visible{outline-offset:-4px}
.hr-donde{max-width:640px;width:100%;margin:2px auto 0;display:flex;justify-content:space-between;gap:12px;
 font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.hr-donde b{font-weight:500;color:var(--rosa-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ════════ Escena y pasos ════════ */
.hr-app{position:relative;padding:calc(var(--barra-h) + var(--top)) var(--px) 0}
.hr-en-pasos .hr-app{padding-top:calc(var(--barra-h) + var(--avance-h) + var(--top))}
.hr-paso,.hr-portada,.hr-resultado{max-width:640px;margin-inline:auto}
.hr-paso{min-height:calc(100svh - var(--barra-h) - var(--avance-h) - var(--top));padding:22px 0 calc(var(--nav-h) + 48px + var(--bottom))}
.hr-js .hr-paso[hidden],.hr-js .hr-portada[hidden],.hr-js .hr-resultado[hidden]{display:none}
.hr-js .hr-paso:not(.hr-activo),.hr-js .hr-resultado:not(.hr-activo),.hr-js .hr-portada:not(.hr-activo){display:none}
.hr-activo.hr-llega-a{animation:hr-llega-a .32s var(--entra) both}
.hr-activo.hr-llega-b{animation:hr-llega-b .32s var(--entra) both}
@keyframes hr-llega-a{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hr-llega-b{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

.hr-paso-n{font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.hr-paso-t{margin-top:12px;font:400 clamp(31px,8.4vw,46px)/1.06 var(--didona);letter-spacing:-.015em;text-wrap:balance}
.hr-paso-t em,.hr-portada-t em,.hr-resultado-t em{font-style:italic;color:var(--rosa-suave)}
.hr-paso-t:focus{outline:none}
.hr-paso-ayuda{margin-top:16px;font:400 17px/1.55 var(--sans);color:var(--sutil);max-width:38ch;text-wrap:pretty}
.hr-paso>.hr-campo:first-of-type,.hr-paso>.hr-opciones:first-of-type{margin-top:28px}

/* ——— Campos ——— */
.hr-campo{display:block;margin-top:26px}
.hr-campo>label,.hr-campo>.hr-etiqueta,.hr-grupo>legend{display:block;font:600 16px/1.35 var(--sans);color:var(--platino-claro);padding:0}
.hr-pista{display:block;margin-top:6px;font:400 16px/1.5 var(--sans);color:var(--tenue)}
.hr-entrada,.hr-texto{display:block;width:100%;margin-top:12px;padding:14px 16px;border:0;border-radius:16px;
 font:400 17px/1.5 var(--sans);color:var(--platino-claro);
 background:linear-gradient(180deg,rgb(255 255 255/.075),rgb(255 255 255/.045));
 box-shadow:inset 0 0 0 1px rgb(243 242 245/.16),inset 0 1px 0 rgb(255 255 255/.06);
 transition:box-shadow .18s var(--entra),background-color .18s var(--entra);caret-color:var(--rosa-hilo)}
.hr-entrada{min-height:54px}
.hr-texto{min-height:132px;resize:vertical}
.hr-entrada::placeholder,.hr-texto::placeholder{color:rgb(243 242 245/.42)}
.hr-entrada:focus,.hr-texto:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--rosa-hilo),0 0 0 4px rgb(196 92 124/.18)}
.hr-campo.hr-falta .hr-entrada,.hr-campo.hr-falta .hr-texto{box-shadow:inset 0 0 0 1.5px var(--rosa-suave)}
.hr-aviso{display:block;margin-top:10px;font:500 16px/1.45 var(--sans);color:var(--rosa-suave)}
.hr-aviso:empty{display:none}

/* sugerencias que se insertan en un campo */
.hr-sugerencias{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:0;list-style:none}
.hr-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:999px;
 font:500 15px/1.2 var(--sans);color:var(--platino-claro);text-align:left;
 background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(243 242 245/.16);transition:background-color .18s var(--entra),transform .18s var(--entra)}
.hr-chip::before{content:"+";font:400 18px/1 var(--sans);color:var(--rosa-suave)}
.hr-chip:active{transform:scale(.98)}
@media (hover:hover){.hr-chip:hover{background:rgb(196 92 124/.16)}}
.hr-chip[data-usado]{box-shadow:inset 0 0 0 1px rgb(196 92 124/.7);background:rgb(196 92 124/.14)}
.hr-chip[data-usado]::before{content:"✓"}

/* ——— Opciones (radio y casilla) ——— */
.hr-grupo{border:0;margin:26px 0 0;padding:0;min-width:0}
.hr-opciones{display:grid;gap:10px;margin-top:14px;padding:0;list-style:none}
.hr-opciones-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.hr-opcion{position:relative;display:block;cursor:pointer}
.hr-opcion input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.hr-opcion-c{position:relative;display:grid;grid-template-columns:24px 1fr;column-gap:14px;align-items:start;min-height:56px;padding:15px 16px;border-radius:16px;
 background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px rgb(243 242 245/.14);
 transition:background-color .18s var(--entra),box-shadow .18s var(--entra),transform .18s var(--entra)}
.hr-opcion-c::before{content:"";grid-row:1 / span 2;width:22px;height:22px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgb(243 242 245/.5);
 background:transparent;transition:background-color .18s var(--entra),box-shadow .18s var(--entra)}
.hr-opcion input[type="checkbox"]+.hr-opcion-c::before{border-radius:7px}
.hr-opcion-c::after{content:"";position:absolute;left:23px;top:22px;width:8px;height:12px;border:solid var(--onix);border-width:0 2px 2px 0;
 transform:rotate(45deg) scale(.6);opacity:0;transition:opacity .16s var(--entra),transform .2s var(--entra)}
.hr-opcion-c b{font:600 17px/1.35 var(--sans);color:var(--platino-claro)}
.hr-opcion-c small{grid-column:2;margin-top:3px;font:400 16px/1.45 var(--sans);color:var(--tenue)}
.hr-opcion input:checked+.hr-opcion-c{background:linear-gradient(120deg,rgb(196 92 124/.22),rgb(158 47 85/.12));box-shadow:inset 0 0 0 1.5px var(--rosa-hilo)}
.hr-opcion input:checked+.hr-opcion-c::before{background:var(--rosa-suave);box-shadow:inset 0 0 0 1.5px var(--rosa-suave)}
.hr-opcion input:checked+.hr-opcion-c::after{opacity:1;transform:rotate(45deg) scale(1)}
.hr-opcion input:focus-visible+.hr-opcion-c{outline:2px solid var(--rosa-suave);outline-offset:3px}
.hr-opcion:active .hr-opcion-c{transform:scale(.99)}
@media (hover:hover){.hr-opcion:hover .hr-opcion-c{background:rgb(255 255 255/.08)}}

/* ——— Consejo: el porqué del paso, en cristal ——— */
.hr-consejo{margin-top:28px;padding:16px 18px;border-radius:18px}
.hr-consejo>*{position:relative;z-index:2}
.hr-consejo p:first-child{font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.hr-consejo p+p{margin-top:8px;font:400 16px/1.55 var(--sans);color:var(--sutil)}
.hr-consejo b{color:var(--platino-claro);font-weight:600}

/* 911: servicio, dicho una vez y con naturalidad */
.hr-911{position:relative;display:block;margin-top:28px;padding:14px 16px 14px 40px;border-radius:16px;
 font:400 16px/1.5 var(--sans);color:var(--platino-claro);background:rgb(158 47 85/.16);box-shadow:inset 0 0 0 1px rgb(196 92 124/.45)}
.hr-911::before{content:"";position:absolute;left:18px;top:22px;width:8px;height:8px;border-radius:50%;background:var(--rosa-hilo);box-shadow:0 0 0 4px rgb(196 92 124/.2)}
.hr-911 a{font-weight:600;color:var(--rosa-perla);text-underline-offset:3px;padding:10px 2px;margin:-10px 0}

/* ════════ Portada de la herramienta ════════ */
.hr-portada{padding:clamp(28px,7svh,72px) 0 48px}
.hr-portada-etq{font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.hr-portada-t{margin-top:16px;font:400 clamp(42px,11.6vw,76px)/1.0 var(--didona);letter-spacing:-.02em;text-wrap:balance}
.hr-portada-sub{margin-top:18px;font:400 clamp(18px,4.8vw,21px)/1.5 var(--sans);color:var(--sutil);max-width:34ch;text-wrap:pretty}
.hr-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding:0;list-style:none}
.hr-meta li{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:999px;
 font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--platino-claro);background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px var(--linea)}
.hr-lleva{margin-top:26px;padding:18px 18px 20px;border-radius:20px}
.hr-lleva>*{position:relative;z-index:2}
.hr-lleva p:first-child{font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.hr-lleva ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.hr-lleva li{position:relative;padding-left:20px;font:400 17px/1.45 var(--sans);color:var(--platino-claro)}
.hr-lleva li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1.5px;background:var(--rosa-hilo)}
.hr-privado{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font:400 16px/1.5 var(--sans);color:var(--sutil)}
.hr-privado svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--rosa-suave);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hr-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hr-borrador{margin-top:24px;margin-bottom:-12px;font:400 16px/1.5 var(--sans);color:var(--sutil)}
.hr-borrador[hidden]{display:none}
.hr-guardar{display:flex;align-items:center;gap:12px;margin-top:22px;min-height:44px;cursor:pointer;font:400 16px/1.4 var(--sans);color:var(--sutil)}
.hr-guardar input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:999px;cursor:pointer;
 background:rgb(255 255 255/.10);box-shadow:inset 0 0 0 1px rgb(243 242 245/.24);transition:background-color .2s var(--entra)}
.hr-guardar input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--platino);
 transition:transform .2s var(--entra)}
.hr-guardar input:checked{background:var(--rosa-tinta);box-shadow:inset 0 0 0 1px var(--rosa-hilo)}
.hr-guardar input:checked::after{transform:translateX(18px);background:#fff}

/* ════════ Botones ════════ */
.hr-boton{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;
 min-height:52px;padding:0 22px;border:0;border-radius:16px;text-decoration:none;white-space:nowrap;
 font:600 14px/1 var(--sans);font-stretch:108%;letter-spacing:.09em;text-transform:uppercase;
 transition:transform .18s var(--entra),background-color .18s var(--entra),opacity .18s var(--entra)}
.hr-boton:active{transform:scale(.98)}
.hr-boton svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--entra)}
.hr-primario{color:#fff;background:linear-gradient(120deg,#a8395f,#8a2849);box-shadow:0 10px 30px rgb(158 47 85/.32),inset 0 0 0 1px rgb(255 255 255/.16),inset 0 1px 0 rgb(255 255 255/.22)}
.hr-primario::after{content:"";position:absolute;inset:0 0 50%;z-index:-1;background:linear-gradient(120deg,rgb(255 255 255/.22),rgb(255 255 255/0) 60%);pointer-events:none}
@media (hover:hover){.hr-primario:hover svg{transform:translateX(3px)}}
.hr-secundario{color:var(--platino-claro);background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(243 242 245/.22)}
@media (hover:hover){.hr-secundario:hover{background:rgb(255 255 255/.10)}}
.hr-discreto{min-height:44px;padding:0 4px;color:var(--sutil);background:none;letter-spacing:.1em;font-size:13px}
.hr-discreto:hover{color:var(--platino-claro)}
.hr-boton[data-confirma]{color:var(--rosa-perla)}
.hr-ancho{flex:1 1 100%}
@media (min-width:600px){.hr-ancho{flex:0 1 auto}}

/* ════════ Navegación con el pulgar ════════ */
.hr-nav{position:fixed;z-index:38;left:12px;right:12px;bottom:calc(12px + var(--bottom));max-width:640px;margin-inline:auto;
 display:flex;gap:10px;padding:6px;border-radius:22px;
 transform:translateY(20px);opacity:0;visibility:hidden;pointer-events:none;
 transition:transform .22s var(--sale),opacity .22s var(--sale),visibility 0s .22s}
.hr-en-pasos .hr-nav,.hr-en-resultado .hr-nav{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .32s var(--entra),opacity .32s var(--entra),visibility 0s}
.hr-nav.hr-cristal{background:linear-gradient(160deg,rgb(255 255 255/.08),rgb(255 255 255/.03)),rgb(14 12 16/.86)}
.hr-nav>*{position:relative;z-index:2}
.hr-nav .hr-boton{min-height:52px}
.hr-nav .hr-atras{flex:0 0 auto;padding:0 18px}
.hr-nav .hr-sigue{flex:1;min-width:0;padding:0 16px}
@media (max-width:440px){.hr-nav .hr-atras{width:58px;padding:0}.hr-nav .hr-atras span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.hr-atras svg{transform:rotate(180deg)}
@media (min-width:700px){.hr-nav{left:50%;right:auto;width:640px;transform:translate(-50%,20px)}
 .hr-en-pasos .hr-nav,.hr-en-resultado .hr-nav{transform:translate(-50%,0)}}

/* ════════ Resultado: la hoja ════════ */
.hr-resultado{padding:28px 0 calc(var(--nav-h) + 48px + var(--bottom))}
.hr-resultado-etq{font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.hr-resultado-t{margin-top:10px;font:400 clamp(30px,8vw,44px)/1.06 var(--didona);letter-spacing:-.015em}
.hr-resultado-t:focus{outline:none}
.hr-resultado-sub{margin-top:10px;font:400 17px/1.5 var(--sans);color:var(--sutil);max-width:40ch}

.hr-hoja{position:relative;margin-top:24px;padding:28px 22px 26px;border-radius:6px;color:var(--tinta);
 background:
  radial-gradient(120% 60% at 100% 0%,rgb(243 221 228/.55),rgb(243 221 228/0) 60%),
  linear-gradient(180deg,#f6f5f8,#ecebef);
 box-shadow:0 1px 0 rgb(255 255 255/.7) inset,0 30px 60px -20px rgb(0 0 0/.7),0 0 0 1px rgb(255 255 255/.18)}
.hr-hoja::before{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;background:linear-gradient(90deg,var(--rosa-tinta),var(--rosa-hilo) 40%,rgb(196 92 124/0));border-radius:0 0 3px 3px}
.hr-activo .hr-hoja{animation:hr-hoja .52s var(--entra) .06s both}
@keyframes hr-hoja{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.hr-hoja-cab{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rosa-tinta)}
.hr-hoja-cab span:last-child{color:#5b5560;letter-spacing:.04em;white-space:nowrap}
.hr-hoja h2{margin-top:14px;font:400 clamp(27px,7vw,36px)/1.08 var(--didona);letter-spacing:-.01em;color:var(--tinta);text-wrap:balance}
.hr-hoja-sub{margin-top:8px;font:400 16px/1.5 var(--sans);color:#4a4450}
.hr-hoja h3{margin-top:26px;padding-top:14px;border-top:1px solid rgb(26 23 25/.12);font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-tinta)}
.hr-hoja p,.hr-hoja li,.hr-hoja td,.hr-hoja th{font:400 16.5px/1.6 var(--sans);color:var(--tinta)}
.hr-hoja h3+p,.hr-hoja h3+ul,.hr-hoja h3+ol,.hr-hoja h3+table,.hr-hoja h3+.hr-cita{margin-top:10px}
.hr-hoja p+p{margin-top:10px}
.hr-hoja ul,.hr-hoja ol{margin:10px 0 0;padding-left:0;list-style:none;display:grid;gap:8px}
.hr-hoja ul li{position:relative;padding-left:20px}
.hr-hoja ul li::before{content:"";position:absolute;left:2px;top:.78em;width:9px;height:1.5px;background:var(--rosa-tinta)}
.hr-hoja ol{counter-reset:hr}
.hr-hoja ol li{position:relative;padding-left:34px;counter-increment:hr}
.hr-hoja ol li::before{content:counter(hr,decimal-leading-zero);position:absolute;left:0;top:.2em;font:500 12px/1.6 var(--mono);color:var(--rosa-tinta)}
.hr-hoja .hr-casillas li{padding-left:0}
.hr-hoja .hr-casillas li::before{display:none}
.hr-casilla{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding-top:9px;cursor:pointer}
.hr-casilla input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:22px;height:22px;margin:1px 0 0;border-radius:6px;cursor:pointer;
 box-shadow:inset 0 0 0 1.5px rgb(26 23 25/.45);background:#fff;transition:background-color .16s var(--entra)}
.hr-casilla input::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:opacity .16s var(--entra),transform .2s var(--entra)}
.hr-casilla input:checked{background:var(--rosa-tinta);box-shadow:none}
.hr-casilla input:checked::after{opacity:1;transform:rotate(45deg) scale(1)}
.hr-casilla input:focus-visible{outline:2px solid var(--rosa-tinta);outline-offset:2px}
.hr-casilla input:checked+span{color:#5b5560;text-decoration:line-through;text-decoration-color:rgb(158 47 85/.6)}
.hr-hoja table{width:100%;margin-top:10px;border-collapse:collapse}
.hr-hoja th{text-align:left;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#5b5560;padding:0 10px 8px 0;border-bottom:1px solid rgb(26 23 25/.18)}
.hr-hoja td{vertical-align:top;padding:10px 10px 10px 0;border-bottom:1px solid rgb(26 23 25/.10)}
.hr-hoja td:first-child{white-space:nowrap;font:500 14px/1.6 var(--mono);color:var(--rosa-tinta);width:1%;padding-right:16px}
.hr-nota{margin-top:14px;font:italic 400 16px/1.55 var(--sans)!important;color:#4a4450!important}
.hr-hoja-pie{margin-top:28px;padding-top:14px;border-top:1px solid rgb(26 23 25/.12);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
 font:500 12px/1.4 var(--mono);letter-spacing:.08em;color:#5b5560}
.hr-hoja-pie i{font:italic 400 15px/1.3 var(--didona);letter-spacing:0;color:var(--tinta)}

/* lo que falta por llenar: un hueco rosa que se ve y se sustituye */
.hr-hueco{padding:0 .3em;border-radius:4px;background:rgb(196 92 124/.16);box-shadow:inset 0 -1.5px 0 rgb(158 47 85/.6);color:var(--rosa-tinta);font-style:normal;
 -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* la cita: el texto listo para leerse o publicarse, con su propio botón */
.hr-cita{position:relative;margin-top:12px;padding:18px 18px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgb(158 47 85/.22),0 8px 22px -14px rgb(158 47 85/.5)}
.hr-cita-etq{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rosa-tinta)}
.hr-cita blockquote{margin-top:10px}
.hr-cita blockquote p{font:400 18px/1.62 var(--sans);color:var(--tinta)}
.hr-cita-copia{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0 14px;border:0;border-radius:12px;
 font:600 13px/1 var(--sans);font-stretch:110%;letter-spacing:.1em;text-transform:uppercase;color:var(--rosa-tinta);background:rgb(158 47 85/.08);box-shadow:inset 0 0 0 1px rgb(158 47 85/.35)}
.hr-cita-copia:focus-visible{outline:2px solid var(--rosa-tinta)}
.hr-cita-copia svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* el texto plano listo para pegar */
.hr-textoplano{margin-top:18px}
.hr-textoplano[hidden]{display:none}
.hr-textoplano label{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-suave)}
.hr-textoplano textarea{display:block;width:100%;min-height:280px;margin-top:10px;padding:16px;border:0;border-radius:14px;resize:vertical;
 font:400 15px/1.6 var(--mono);color:var(--platino-claro);background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px rgb(243 242 245/.18)}
.hr-mas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.hr-mas .hr-discreto{grid-column:1 / -1;justify-self:start}
@media (min-width:600px){.hr-mas{display:flex;flex-wrap:wrap}}

/* aviso flotante («Copiado») */
.hr-toast{position:fixed;z-index:60;left:50%;bottom:calc(var(--nav-h) + 30px + var(--bottom));padding:12px 18px;border-radius:14px;
 font:600 15px/1.2 var(--sans);color:var(--tinta);background:var(--platino-claro);box-shadow:0 12px 40px rgb(0 0 0/.4);
 transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .2s var(--sale),transform .2s var(--sale)}
.hr-toast.hr-ve{opacity:1;transform:translate(-50%,0);transition:opacity .22s var(--entra),transform .22s var(--entra)}

/* ════════ Pie: fuentes y salida ════════ */
.hr-pie{max-width:640px;margin:0 auto;padding:8px var(--px) calc(110px + var(--bottom));padding-inline:0}
.hr-app+.hr-pie{padding-inline:var(--px);max-width:calc(640px + 2 * var(--px))}
.hr-fuentes{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.hr-fuentes summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;list-style:none;cursor:pointer;
 font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sutil)}
.hr-fuentes summary::-webkit-details-marker{display:none}
.hr-fuentes summary::after{content:"";width:8px;height:8px;margin-right:6px;border-right:1.5px solid var(--rosa-suave);border-bottom:1.5px solid var(--rosa-suave);
 transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--entra)}
.hr-fuentes[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.hr-fuentes summary:focus-visible{outline-offset:2px;border-radius:6px}
.hr-fuentes ol{margin:0;padding:0 0 18px;list-style:none;display:grid;gap:14px;counter-reset:f}
.hr-fuentes li{position:relative;padding-left:30px;counter-increment:f;font:400 16px/1.5 var(--sans);color:var(--sutil)}
.hr-fuentes li::before{content:counter(f,decimal-leading-zero);position:absolute;left:0;top:.25em;font:500 12px/1.4 var(--mono);color:var(--rosa-suave)}
.hr-fuentes a{color:var(--platino-claro);text-decoration-color:rgb(196 92 124/.7);text-underline-offset:3px;overflow-wrap:anywhere}
.hr-fuentes small{display:block;margin-top:2px;font:400 14px/1.45 var(--sans);color:var(--tenue)}
@media (prefers-reduced-motion:no-preference){.hr-fuentes[open]>ol{animation:hr-llega-b .22s var(--entra) both}}
.hr-salida{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:28px;font:400 clamp(21px,5.6vw,26px)/1.3 var(--didona);color:var(--sutil)}
.hr-salida a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-style:italic;color:var(--rosa-suave);text-decoration:none;
 background:linear-gradient(var(--rosa-hilo),var(--rosa-hilo)) 0 88%/100% 1px no-repeat}
.hr-salida a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--entra)}
@media (hover:hover){.hr-salida a:hover svg{transform:translateX(4px)}}
.hr-firma{margin-top:22px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;color:var(--tenue)}

.hr-estado{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px;margin:0 0 6px;font:400 16px/1.45 var(--sans);color:var(--tenue)}
.hr-estado .hr-boton{min-height:44px;font-size:12px}

/* Sin JavaScript: todo se lee como una guía larga y se avisa con calma */
.hr-sinjs{max-width:640px;margin:18px auto 0;padding:14px 16px;border-radius:14px;font:400 16px/1.5 var(--sans);color:var(--sutil);box-shadow:inset 0 0 0 1px var(--linea)}
html:not(.hr-js) .hr-resultado,html:not(.hr-js) .hr-nav,html:not(.hr-js) .hr-avance,html:not(.hr-js) [data-hr-solojs]{display:none}
html:not(.hr-js) .hr-paso{min-height:0;padding-bottom:24px;border-top:1px solid var(--linea);margin-top:24px}

/* ════════ Computadora ════════ */
@media (min-width:900px){
 :root{--px:max(48px,env(safe-area-inset-left,0px))}
 .hr-paso{padding-top:44px}
 .hr-portada{padding-top:clamp(56px,10svh,110px)}
 .hr-hoja{padding:44px 48px 36px}
 .hr-hoja::before{left:48px;right:48px}
 .hr-volver span{font-size:19px}
}
@media (min-width:1200px){
 /* la portada respira: el título a la izquierda y lo que te llevas a la derecha */
 .hr-portada{max-width:1080px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:80px;align-items:start}
 .hr-portada>*{grid-column:1}
 .hr-portada>.hr-lleva{grid-column:2;grid-row:2;margin-top:12px;align-self:start}
 .hr-portada>.hr-911{grid-column:2;grid-row:3 / span 6;margin-top:16px;align-self:start}
 html:not(.hr-en-pasos) .hr-app+.hr-pie{max-width:calc(1080px + 2 * var(--px))}
}

/* ════════ Movimiento reducido ════════ */
@media (prefers-reduced-motion:reduce){
 .hr *,.hr *::before,.hr *::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
}

/* ════════ Impresión: sólo la hoja ════════ */
@media print{
 @page{margin:18mm}
 html,body.hr{background:#fff!important;color:#000}
 .hr-barra,.hr-avance,.hr-nav,.hr-pie,.hr-fondo,.hr-mas,.hr-textoplano,.hr-resultado-etq,.hr-resultado-t,.hr-resultado-sub,.hr-cita-copia,.hr-toast,.hr-portada,.hr-paso{display:none!important}
 .hr-app{padding:0!important}
 .hr-resultado{padding:0!important;max-width:none}
 .hr-hoja{box-shadow:none;background:#fff;padding:0;animation:none!important}
 .hr-hoja::before{display:none}
 .hr-cita{box-shadow:inset 0 0 0 1px #999}
}

/* ——— Portada intervenida (corte f4): el mismo objeto de la puerta de «Para resolver hoy» abre la herramienta.
   Color propio del objeto; sólo se animan transform y opacity; con movimiento reducido queda quieto. ——— */
.hr-portada-obj{display:block;width:min(52vw,210px);margin:0 0 22px -4px}
.hr-portada-obj svg{display:block;width:100%;height:auto;overflow:visible}
.hr-portada-obj.rh-o-crisis{width:min(40vw,150px)}
.hr-portada-obj .rh-aguja,.hr-portada-obj .rh-lupa,.hr-portada-obj .rh-turno,.hr-portada-obj .rh-sello{transform-box:view-box}
.hr-portada-obj .rh-onda rect,.hr-portada-obj .rh-reglas-tinta path{transform-box:fill-box}
.hr-portada-obj .rh-aguja{transform-origin:110px 132px}
.hr-portada-obj .rh-onda rect{fill:#7fd6b4;transform-origin:50% 50%}
.hr-portada-obj .rh-sello{transform-origin:189px 137px}
.hr-portada-obj .rh-reglas-tinta path{transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
 .hr-portada-obj .rh-aguja{animation:hrp-gira 12s linear infinite}
 .hr-portada-obj .rh-lupa{animation:hrp-lupa 8s cubic-bezier(.65,0,.35,1) infinite}
 .hr-portada-obj .rh-onda rect{animation:hrp-voz 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.4s)}
 .hr-portada-obj .rh-turno{animation:hrp-turno 10s cubic-bezier(.65,0,.35,1) infinite}
 .hr-portada-obj .rh-reglas-tinta path{animation:hrp-tinta .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.3s + var(--k) * .28s)}
 .hr-portada-obj .rh-sello{animation:hrp-sello .55s cubic-bezier(.3,1.5,.5,1) 1.3s both}
 .hr-js .hr-portada:not(.hr-activo) .hr-portada-obj *{animation-play-state:paused}
}
@keyframes hrp-gira{to{transform:rotate(360deg)}}
@keyframes hrp-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 hrp-voz{from{transform:scaleY(.32)}to{transform:scaleY(1)}}
@keyframes hrp-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 hrp-tinta{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes hrp-sello{from{opacity:0;transform:translateY(-30px) scale(1.4)}to{opacity:1;transform:none}}

/* «Te llevas», plegado: se abre con un toque o con el teclado */
details.hr-lleva>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:-12px 0;cursor:pointer;list-style:none;
 font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
details.hr-lleva>summary::-webkit-details-marker{display:none}
details.hr-lleva>summary::after{content:"";width:9px;height:9px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s}
details.hr-lleva[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
details.hr-lleva>summary:focus-visible{outline:2px solid var(--rosa-suave);outline-offset:6px;border-radius:4px}
details.hr-lleva[open]>ul{margin-top:18px}
/* con el objeto arriba, la columna derecha acompaña al título: «Te llevas» al pie del título y el 911 junto al subtítulo */
@media (min-width:1200px){
 .hr-portada:has(>.hr-portada-obj)>.hr-lleva{grid-row:2 / span 2;align-self:end;margin-top:0}
 .hr-portada:has(>.hr-portada-obj)>.hr-911{grid-row:4 / span 6}
 .hr-portada-obj{width:150px}
 .hr-portada-obj.rh-o-crisis{width:110px}
}