/* HyperForge · entrada, alta y cuenta (diseño v2, grupo 1). Pantallas sin armazón: /acceso, /persona, /alta, /cuenta/nueva y la
   página «Continuar» del enlace de un solo uso. Solo tokens de tokens.css; movimiento solo con transform y opacity (con «reducir
   movimiento» las duraciones valen 0 y la marca queda quieta). La clase .ent-pantalla la pone vistas-entrada.js en el body.
   El alta (acceso.js) y el checkout (cuenta.js) se restylan aquí por sus clases, sin tocar su lógica. */

/* ───────── marco: marca a la izquierda, pantalla a la derecha; en móvil, la marca arriba ───────── */
.ent-pantalla .armazon{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:100vh}
.ent-pantalla .lienzo{margin-left:0;min-width:0;padding-bottom:0}
.ent-pantalla .lienzo main{max-width:600px;width:100%;margin:0 auto;padding:var(--hf-e6) var(--hf-e6) var(--hf-e8)}
.ent-pantalla .cabecera{min-height:56px}
/* el panel llena todo el alto de la página; su interior ocupa la primera pantalla (logo arriba, lema abajo) */
.ent-lado{position:relative;min-width:0;overflow:clip;background:var(--hf-panel);border-right:1px solid var(--hf-linea)}
.ent-lado-interior{position:relative;height:100vh;max-height:1100px;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--hf-e6);padding:clamp(24px,3.2vw,52px)}
/* la H del logo, enorme y apenas visible, como marca de agua (máscara: toma el color de la línea y sigue al tema) */
.ent-lado::after{content:"";position:absolute;right:-26%;bottom:-20%;width:74%;aspect-ratio:1;pointer-events:none;
  background:var(--hf-linea);-webkit-mask:url(hyperforge-logo-compacto-oscuro.svg) center / contain no-repeat;
  mask:url(hyperforge-logo-compacto-oscuro.svg) center / contain no-repeat}
.ent-lado-interior > *{position:relative;z-index:1}

/* el logo con presencia (pedido de Liam): más grande que el «grande» del componente */
.ent-logo.hf-logo-grande{gap:clamp(12px,1.4vw,20px)}
.ent-logo.hf-logo-grande .hf-logo-marca{width:clamp(60px,6.4vw,104px);height:clamp(60px,6.4vw,104px)}
.ent-logo.hf-logo-grande .hf-logo-nombre{font-size:clamp(30px,3.3vw,54px);letter-spacing:-.02em}
.ent-logo.hf-logo-grande .hf-logo-por{font-size:clamp(11px,.9vw,14px);letter-spacing:.2em}
/* la animación de marca de la entrada (handoff §15): la H se abre y el cubo gira, una sola vez */
.ent-logo .hf-logo-marca .b,.ent-logo .hf-logo-marca .r0,.ent-logo .hf-logo-marca .r1,.ent-logo .hf-logo-marca .r2{
  transform-box:view-box;transform-origin:50px 50px}
.ent-logo .hf-logo-marca .b:first-of-type{animation:ent-abre-izq 1s var(--hf-facil) both}
.ent-logo .hf-logo-marca .b:nth-of-type(2){animation:ent-abre-der 1s var(--hf-facil) both}
.ent-logo .hf-logo-marca .r0,.ent-logo .hf-logo-marca .r1,.ent-logo .hf-logo-marca .r2{animation:ent-gira 1.1s .15s var(--hf-facil) both}
@keyframes ent-abre-izq{0%{transform:translateX(9px)}55%{transform:translateX(-5px)}100%{transform:none}}
@keyframes ent-abre-der{0%{transform:translateX(-9px)}55%{transform:translateX(5px)}100%{transform:none}}
@keyframes ent-gira{from{transform:rotate(-120deg) scale(.6);opacity:0}to{transform:none;opacity:1}}

.ent-lado-texto{display:grid;gap:var(--hf-e5);max-width:30rem}
.ent-lema{font:700 clamp(26px,2.7vw,44px)/1 var(--hf-f-display);text-transform:uppercase;letter-spacing:-.012em;
  word-spacing:var(--hf-ws-display);text-wrap:balance;margin:0}
.ent-hechos{list-style:none;display:grid;gap:var(--hf-e3);margin:0;padding:0}
.ent-hechos li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--hf-e3);align-items:start;color:var(--hf-tenue);font-size:var(--hf-t-sm)}
.ent-hechos .hf-icono{color:var(--hf-verdin-texto);margin-top:1px}

/* ───────── títulos, bajada y avisos ───────── */
.ent-pantalla #titulo{font-size:clamp(32px,3.4vw,50px);margin-top:var(--hf-e1)}
.ent-pantalla #kicker{color:var(--hf-brasa-texto)}
.ent-pantalla .bajada{font-size:16px;color:var(--hf-tenue);max-width:46ch}
.ent-pantalla .nota-fase{font-size:var(--hf-t-sm);color:var(--hf-tenue);margin-top:var(--hf-e5);padding-top:var(--hf-e3);
  border-top:1px dotted var(--hf-linea-2)}
.ent-aviso{margin:0;font-size:var(--hf-t-sm)}
/* v10: «Verificado · sesión de 12 h» al validar y «¿Olvidaste tu PIN?» */
.ent-logro{margin:0;font:600 var(--hf-t-sm) var(--hf-f-mono);letter-spacing:.04em;color:var(--hf-verdin-texto)}
.ent-logro:empty{display:none}
.ent-quien > .ent-logro{padding:0 var(--hf-e3) var(--hf-e2)}
.ent-olvido{margin-top:var(--hf-e4);font-size:var(--hf-t-sm);color:var(--hf-tenue)}
/* v10: la caja de entrada es angosta (≈ 390–480 px) en /acceso y /persona */
body.ent-pantalla[data-vista="acceso"] .lienzo main,body.ent-pantalla[data-vista="persona"] .lienzo main{max-width:520px}
.ent-pantalla .firma-error{color:var(--hf-alerta-texto)}
.ent-pantalla .acciones,.ent-acciones{display:flex;flex-wrap:wrap;gap:var(--hf-e3);margin-top:var(--hf-e5)}

/* ───────── «Entra a HyperForge» (enlace local): dos pasos ───────── */
.ent-pasos{list-style:none;display:grid;gap:var(--hf-e3);margin:var(--hf-e5) 0 0;padding:0}
.ent-pasos li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--hf-e3);align-items:start;padding:var(--hf-e4) var(--hf-e5);
  background:var(--hf-panel);border:1px solid var(--hf-linea);border-radius:var(--hf-r-fila)}
.ent-pasos li.actual{border-color:var(--hf-brasa)}
.ent-paso-num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 16px var(--hf-f-display);
  border:1.5px dotted var(--hf-linea-2);color:var(--hf-tenue)}
.ent-pasos li.actual .ent-paso-num{border:0;background:var(--hf-brasa);color:var(--hf-sobre-brasa)}
.ent-pasos b{display:block;font:600 16px/1.3 var(--hf-f-display);word-spacing:var(--hf-ws-display);margin-bottom:2px}
.ent-pasos span:not(.ent-paso-num){color:var(--hf-tenue);font-size:var(--hf-t-sm)}

/* ───────── formulario de entrada (modo contenedor) ───────── */
.ent-forma{display:grid;gap:var(--hf-e5);margin-top:var(--hf-e5)}
.ent-forma .hf-campo label{font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:var(--hf-track-label);text-transform:uppercase}
.ent-enviar{justify-self:stretch;justify-content:space-between}
.ent-o{display:flex;align-items:center;gap:10px;margin:var(--hf-e5) 0 var(--hf-e3);font:500 10.5px var(--hf-f-mono);color:var(--hf-tenue);
  text-transform:uppercase;letter-spacing:.08em}
.ent-o::before,.ent-o::after{content:"";flex:1;height:1px;background:var(--hf-linea)}
.ent-google .btn-google{width:100%;min-height:52px}
.ent-google .hf-campo-ayuda{margin-top:var(--hf-e2)}

/* ───────── casillas de PIN y de código (6) sobre un solo campo real ───────── */
.ent-campo{display:grid;gap:8px;min-width:0}
.ent-campo-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.ent-campo-cabeza label{font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:var(--hf-track-label);text-transform:uppercase;color:var(--hf-tenue)}
.ent-cas-cambio{font:500 var(--hf-t-sm) var(--hf-f-texto);color:var(--hf-texto);background:none;border:0;padding:2px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hf-linea-2)}
.ent-cas-cambio:hover{text-decoration-color:currentColor}
.ent-cas-cambio:focus-visible{outline:2px solid var(--hf-foco);outline-offset:2px;border-radius:4px}
.ent-cas{position:relative;max-width:420px}
.ent-cas-cajas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1.2vw,9px)}
.ent-cas-cajas i{height:58px;display:grid;place-items:center;font:600 24px var(--hf-f-display);font-style:normal;color:var(--hf-texto);
  background:var(--hf-panel);border:1px solid var(--hf-linea-fuerte);border-radius:16px;
  transition:transform var(--hf-dur) var(--hf-facil),border-color var(--hf-dur),background-color var(--hf-dur)}
.ent-cas-cajas i.llena{background:var(--hf-panel-2);border-color:var(--hf-texto)}
.ent-cas-secreto .ent-cas-cajas i.llena::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--hf-texto)}
.ent-cas:focus-within .ent-cas-cajas i.sigue{border:2px solid var(--hf-foco);transform:translateY(-3px)}
/* el campo real va encima de las casillas: recibe teclado, pegado, foco y gestores de contraseñas; su texto no se pinta */
.ent-cas-entrada{position:absolute;inset:0;width:100%;height:100%;padding:0 12px;border:0;background:transparent;color:transparent;
  caret-color:transparent;font:16px var(--hf-f-texto);letter-spacing:2.2em;outline:none;-webkit-text-fill-color:transparent}
.ent-cas-entrada::selection{background:transparent}
/* libre: frase o código de respaldo (más de 6 o con letras) → un campo normal */
.ent-cas-libre .ent-cas-cajas{display:none}
.ent-cas-libre .ent-cas-entrada{position:static;height:56px;padding:0 16px;letter-spacing:.04em;color:var(--hf-texto);caret-color:var(--hf-brasa);
  -webkit-text-fill-color:var(--hf-texto);background:var(--hf-panel);border:1px solid var(--hf-linea-fuerte);border-radius:16px}
.ent-cas-libre .ent-cas-entrada::selection{background:var(--hf-linea-2)}
.ent-cas-libre .ent-cas-entrada:focus{border-color:var(--hf-foco);outline:2px solid var(--hf-foco);outline-offset:1px}
/* PIN mal: sacudida; PIN bueno: las casillas se funden en un nodo verdín con la palomita */
.ent-cas-mal .ent-cas-cajas,.ent-cas-mal .ent-cas-entrada{animation:ent-sacude .42s var(--hf-facil)}
.ent-cas-mal .ent-cas-cajas i{border-color:var(--hf-alerta)}
@keyframes ent-sacude{0%,100%{transform:none}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.ent-cas-logro{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;
  place-items:center;background:var(--hf-verdin);color:var(--hf-sobre-verdin);opacity:0;transform:scale(.4);pointer-events:none;
  transition:opacity var(--hf-dur) var(--hf-facil),transform var(--hf-dur-lenta) cubic-bezier(.2,1.5,.35,1)}
.ent-cas-logro .hf-icono{width:26px;height:26px;stroke-width:2.8}
.ent-cas-logrado .ent-cas-cajas i{transform:scale(.2);opacity:0;transition-duration:var(--hf-dur-lenta)}
.ent-cas-logrado .ent-cas-entrada{opacity:0}
.ent-cas-logrado .ent-cas-logro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ent-logo .hf-logo-marca *,.ent-cas-mal .ent-cas-cajas,.ent-cas-mal .ent-cas-entrada{animation:none}
}

/* ───────── «¿Con quién entras?» ───────── */
.ent-quienes{list-style:none;display:grid;gap:var(--hf-e3);margin:var(--hf-e5) 0 0;padding:0}
.ent-quien{display:grid;gap:var(--hf-e3);padding:var(--hf-e2);background:var(--hf-panel);border:1px solid var(--hf-linea);
  border-radius:var(--hf-r-fila);transition:border-color var(--hf-dur),border-radius var(--hf-dur-lenta) var(--hf-facil)}
.ent-quien:hover{border-color:var(--hf-linea-2)}
.ent-quien:focus-within{border-color:var(--hf-brasa);border-radius:var(--hf-r-fila-inv)}
.ent-quien > .ent-campo,.ent-quien > .ent-aviso{padding:0 var(--hf-e3) var(--hf-e2)}
.ent-quien-boton{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:2px var(--hf-e3);width:100%;
  padding:var(--hf-e2) var(--hf-e3);text-align:left;font:inherit;color:var(--hf-texto);background:none;border:0;border-radius:14px;cursor:pointer}
.ent-quien-boton:hover{background:var(--hf-panel-2)}
.ent-quien-boton:focus-visible{outline:2px solid var(--hf-foco);outline-offset:2px}
.ent-quien-boton[disabled]{cursor:progress;opacity:.7}
.ent-avatar{width:42px;height:42px;font-size:14px;transition:transform var(--hf-dur) var(--hf-facil)}
.ent-quien-boton:hover .ent-avatar{transform:scale(1.08)}
.ent-quien-texto{display:grid;gap:3px;min-width:0}
.ent-quien-texto b{font:600 16px/1.2 var(--hf-f-display);word-spacing:var(--hf-ws-display);overflow-wrap:anywhere}
.ent-quien-texto small{font:500 var(--hf-t-xs)/1.4 var(--hf-f-mono);letter-spacing:.05em;color:var(--hf-tenue);overflow-wrap:anywhere}
.ent-quien-rol{font:600 10.5px var(--hf-f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-tenue);
  padding:3px 10px;border:1px dashed var(--hf-linea-2);border-radius:var(--hf-r-pildora);white-space:nowrap}
.ent-quien-ir{display:inline-flex;align-items:center;gap:6px;font:600 var(--hf-t-sm) var(--hf-f-display);color:var(--hf-brasa-texto)}
.ent-quien-ir .hf-icono{width:18px;height:18px;transition:transform var(--hf-dur) var(--hf-facil)}
.ent-quien-boton:hover .ent-quien-ir .hf-icono{transform:translateX(3px)}
.ent-quien-pendiente .ent-quien-texto small{color:var(--hf-brasa-texto)}
.ent-quien .ent-cas-cajas i{height:48px;font-size:20px;border-radius:13px}
.ent-quien .ent-cas-libre .ent-cas-entrada{height:48px}

/* ───────── alta (acceso.js): PIN → app de autenticación → 8 códigos de respaldo ───────── */
.ent-pantalla .pasos-alta{max-width:none;margin-top:var(--hf-e5);position:relative;padding-top:18px}
/* avance de los tres pasos, por lo que ya está en pantalla */
.ent-pantalla .pasos-alta::before,.ent-pantalla .pasos-alta::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  border-radius:var(--hf-r-pildora)}
.ent-pantalla .pasos-alta::before{background:var(--hf-linea-2)}
.ent-pantalla .pasos-alta::after{background:var(--hf-brasa);transform-origin:left;transform:scaleX(.3333);
  transition:transform var(--hf-dur-lenta) var(--hf-facil)}
.ent-pantalla .pasos-alta:has(.qr-totp,.secreto-totp)::after{transform:scaleX(.6667)}
.ent-pantalla .pasos-alta:has(.codigos-respaldo)::after{transform:scaleX(1);background:var(--hf-verdin)}
.ent-pantalla .pasos-alta:has(.checkout,.confirmacion)::before,.ent-pantalla .pasos-alta:has(.checkout,.confirmacion)::after{display:none}
.ent-pantalla .pasos-alta > .bloque,.ent-pantalla .pasos-alta > form{background:var(--hf-panel);border:1px solid var(--hf-linea);
  border-radius:var(--hf-r-tarjeta);padding:clamp(18px,2.4vw,28px)}
.ent-pantalla .pasos-alta > * + *{margin-top:var(--hf-e4)}
.ent-pantalla .pasos-alta h2{font:600 var(--hf-t-xs)/1.4 var(--hf-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hf-brasa-texto);margin:0}
.ent-pantalla .pasos-alta h2 + p{margin-top:var(--hf-e3)}
.ent-pantalla .pasos-alta p{color:var(--hf-tenue)}
.ent-pantalla .firma > * + *{margin-top:var(--hf-e4)}
.ent-pantalla .campo-grupo{gap:6px}
.ent-pantalla .campo-grupo label{font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:var(--hf-track-label);text-transform:uppercase;color:var(--hf-tenue)}
.ent-pantalla input.campo{min-height:52px;padding:0 16px;font:400 16px var(--hf-f-texto);color:var(--hf-texto);background:var(--hf-fondo);
  border:1px solid var(--hf-linea-fuerte);border-radius:var(--hf-r-control)}
.ent-pantalla input.campo:focus-visible{border-color:var(--hf-foco);outline:2px solid var(--hf-foco);outline-offset:1px}
.ent-pantalla .ayuda{color:var(--hf-tenue);font-size:var(--hf-t-sm)}
.ent-pantalla .pasos-alta .opciones .btn-primario{min-height:52px;padding:0 28px}
.ent-pantalla .qr-totp{display:flex;align-items:center;gap:var(--hf-e4);margin:var(--hf-e4) 0;flex-wrap:wrap}
.ent-pantalla .qr-totp img{width:200px;height:200px;background:#fff;padding:12px;border-radius:var(--hf-r-tarjeta);border:0}
.ent-pantalla .qr-totp figcaption{max-width:18ch}
.ent-pantalla .ficha{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px var(--hf-e4);margin:0;padding:var(--hf-e4);
  background:var(--hf-panel-2);border-radius:var(--hf-r-fila)}
.ent-pantalla .ficha dt{font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-tenue);padding-top:2px}
.ent-pantalla .ficha dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ent-pantalla .secreto-totp{font:500 14px/1.5 var(--hf-f-mono);letter-spacing:.08em;color:var(--hf-texto)}
.ent-pantalla .pasos-alta details summary{font-size:var(--hf-t-sm);color:var(--hf-tenue)}
.ent-pantalla .pasos-alta details code{display:block;margin-top:var(--hf-e2)}
.ent-pantalla .codigos-respaldo{list-style:none;counter-reset:cod;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hf-e2);
  padding:0;margin:var(--hf-e4) 0 0}
.ent-pantalla .codigos-respaldo li{counter-increment:cod;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;
  font:500 15px var(--hf-f-mono);letter-spacing:.08em;background:var(--hf-fondo);border:1px dashed var(--hf-linea-2);border-radius:var(--hf-r-fila);
  overflow-wrap:anywhere}
.ent-pantalla .codigos-respaldo li::before{content:counter(cod);font-size:var(--hf-t-xs);color:var(--hf-tenue)}

/* ───────── «Crea tu cuenta» (cuenta.js, checkout simulado del staging) ───────── */
body.ent-pantalla[data-vista="cuenta"] .lienzo main{max-width:720px}
.ent-pantalla .checkout h2,.ent-pantalla .confirmacion h2{margin-top:var(--hf-e5)}
.ent-pantalla .checkout h2:first-child,.ent-pantalla .confirmacion h2:first-child{margin-top:0}
.ent-pantalla .checkout fieldset{border:0;padding:0;margin:var(--hf-e4) 0 0;min-width:0}
.ent-pantalla .checkout legend{font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:var(--hf-track-label);text-transform:uppercase;
  color:var(--hf-tenue);margin-bottom:var(--hf-e2)}
.ent-pantalla .plan-opcion{position:relative;display:block;margin-top:var(--hf-e2)}
.ent-pantalla .plan-opcion input{position:absolute;left:18px;top:20px;width:20px;height:20px;accent-color:var(--hf-brasa);margin:0}
.ent-pantalla .plan-opcion label{display:block;padding:16px 16px 16px 52px;border:1px solid var(--hf-linea);border-radius:var(--hf-r-fila);
  background:var(--hf-fondo);color:var(--hf-texto);font:500 15px/1.4 var(--hf-f-texto);text-transform:none;letter-spacing:0;cursor:pointer;
  transition:border-color var(--hf-dur),border-radius var(--hf-dur-lenta) var(--hf-facil)}
.ent-pantalla .plan-opcion label:hover{border-color:var(--hf-linea-2)}
.ent-pantalla .plan-opcion:has(input:checked) label{border-color:var(--hf-brasa);border-radius:var(--hf-r-fila-inv)}
.ent-pantalla .plan-opcion input:focus-visible + label{outline:2px solid var(--hf-foco);outline-offset:2px}
.ent-pantalla .checkout .precio{display:block;margin-top:4px;font:500 var(--hf-t-sm)/1.4 var(--hf-f-mono);color:var(--hf-tenue)}
.ent-pantalla .checkout .fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--hf-e3);margin-top:var(--hf-e3);align-items:end}
.ent-pantalla .personas-plan .campo-grupo + .campo-grupo,.ent-pantalla .tarjeta-prueba .campo-grupo + .campo-grupo{margin-top:var(--hf-e3)}
.ent-pantalla .aviso-ventas{color:var(--hf-brasa-texto)}
.ent-pantalla .resumen-compra .tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ent-pantalla .resumen-compra td,.ent-pantalla .resumen-compra th{padding:10px 0;border-bottom:1px dotted var(--hf-linea-2);text-align:left}
.ent-pantalla .resumen-compra .num{text-align:right;font-family:var(--hf-f-mono)}
.ent-pantalla .resumen-compra tr.total th,.ent-pantalla .resumen-compra tr.total td{font:600 17px var(--hf-f-display);border-bottom:0}
.ent-pantalla .checkout .opciones .btn-primario{min-height:56px;padding:0 28px}

/* ───────── «Continuar» (enlace de un solo uso; servidor.py la arma aparte del marco) ───────── */
body:has(#continuar){min-height:100vh;display:grid;place-items:center;padding:var(--hf-e5) var(--hf-margen-movil)}
body:has(#continuar) main.aviso{width:min(520px,100%);margin:0;padding:clamp(24px,4vw,40px);background:var(--hf-panel);
  border:1px solid var(--hf-linea);border-radius:var(--hf-r-tarjeta)}
body:has(#continuar) main.aviso .ent-logo{margin-bottom:var(--hf-e6)}
body:has(#continuar) main.aviso h1{font-size:clamp(32px,5vw,46px)}
body:has(#continuar) main.aviso .acciones .btn{width:100%;min-height:56px}

/* ───────── anchos: tableta y móvil (≤ 820 px, handoff): una columna, la marca arriba y sin la lista de hechos ───────── */
@media (max-width:1100px){
  .ent-pantalla .armazon{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .ent-pantalla .lienzo main{padding:var(--hf-e5) var(--hf-e5) var(--hf-e7)}
}
@media (max-width:820px){
  .ent-pantalla .armazon{grid-template-columns:minmax(0,1fr)}
  .ent-lado{border-right:0;border-bottom:1px solid var(--hf-linea)}
  .ent-lado-interior{position:relative;height:auto;padding:var(--hf-e5) var(--hf-margen-movil) var(--hf-e4);gap:var(--hf-e4)}
  .ent-lado::after{width:46%;right:-8%;bottom:-30%}
  .ent-hechos{display:none}
  .ent-lema{font-size:clamp(20px,5.6vw,28px)}
  .ent-logo.hf-logo-grande .hf-logo-marca{width:58px;height:58px}
  .ent-logo.hf-logo-grande .hf-logo-nombre{font-size:clamp(28px,8vw,38px)}
  .ent-pantalla .cabecera{padding:var(--hf-e2) var(--hf-margen-movil) 0;min-height:0}
  .ent-pantalla .lienzo main{padding:var(--hf-e3) var(--hf-margen-movil) var(--hf-e7)}
  .ent-quien-boton{grid-template-columns:40px minmax(0,1fr) auto}
  .ent-quien-rol{display:none}
  .ent-pantalla .codigos-respaldo{grid-template-columns:minmax(0,1fr)}
  .ent-pantalla .qr-totp img{width:180px;height:180px}
}