/* ═══════════════════════════════════════════════════════════════════════
   DEMO JOKER — Pocket Micro-help
   Sistema BYQ « Nimbus ». Tomado tal cual: el lienzo casi blanco, la banda
   alterna en gris neutro, las tarjetas de papel puro a 24 px de radio con
   48 px de relleno, la píldora de 70 px en todo CTA, la etiqueta minúscula
   en cobalto sobre cada titular, el cuerpo en peso ligero y el ritmo de
   100–120 px. Se respeta la prohibición de esquinas vivas y de sombras más
   allá del reposo apenas perceptible.
   Adaptado: el pliego suma un naranja de acción al cobalto y fija Segoe UI
   y Tahoma. Todo el arte es CSS: no hay un solo archivo gráfico.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --nube:#FAFEFF; --niebla:#F4F6F8; --papel:#FFFFFF; --tinta:#171717;
  --cuerpo-color:#333333; --azul:#2C6BF2; --azul-tinte:rgba(44,107,242,.10);
  --naranja:#F2760C; --naranja-tinte:rgba(242,118,12,.12);
  --t-caption:14px; --t-body-sm:16px; --t-body:20px; --t-body-lg:22px;
  --t-h-sm:28px; --t-h:40px; --t-h-lg:50px; --t-display:64px;
  --s-4:4px;--s-8:8px;--s-16:16px;--s-24:24px;--s-32:32px;--s-48:48px;
  --s-64:64px;--s-80:80px;--s-100:100px;--s-120:120px;
  --pagina:1660px;
  --r-tarjeta:24px; --r-pildora:70px; --r-pequeno:12px; --r-tesela:20px;
  --r-avatar:9999px;
  --titulo:"Segoe UI","Segoe UI Web",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --texto:Tahoma,Verdana,Geneva,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--nube);color:var(--cuerpo-color);
  font-family:var(--texto);font-size:var(--t-body);line-height:1.45;font-weight:400;
  overflow-x:clip;padding-bottom:76px}
@media(min-width:768px){body{padding-bottom:0}}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:24px}
.angosto{max-width:940px;margin-inline:auto}
h1,h2,h3{font-family:var(--titulo);font-weight:600;color:var(--tinta);margin:0;line-height:1.2}
h1{font-size:var(--t-display)}
@media(max-width:991px){h1{font-size:42px}}
@media(max-width:479px){h1{font-size:32px}}
h2{font-size:var(--t-h)}
@media(max-width:767px){h2{font-size:var(--t-h-sm)}}
h3{font-size:var(--t-h-sm)}
p{margin:0 0 var(--s-16);max-width:66ch}
p:last-child{margin-bottom:0}
.seccion{padding-block:var(--s-100)}
@media(max-width:767px){.seccion{padding-block:var(--s-64)}}
.banda{background:var(--niebla)}
.etiqueta{display:block;font-size:var(--t-caption);color:var(--azul);margin-bottom:var(--s-8)}
.revelar{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.revelar.visto{opacity:1;transform:none}
html:not(.js-on) .revelar{opacity:1;transform:none}
.enlace{color:var(--azul);text-decoration:underline;text-underline-offset:.2em}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding-inline:28px;
  border-radius:var(--r-pildora);background:var(--naranja);color:#fff;border:0;
  font-family:var(--titulo);font-size:var(--t-body-sm);font-weight:600;text-decoration:none;
  cursor:pointer;transition:background 200ms ease}
.cta:hover{background:var(--tinta)}
.cta.azul{background:var(--azul)}
.cta.azul:hover{background:var(--tinta)}
.cta.linea{background:transparent;color:var(--tinta);border:2px solid var(--tinta)}
.cta.linea:hover{background:var(--tinta);color:#fff}
.chevron{width:7px;height:7px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg)}
.aviso{display:inline-block;font-size:13px;font-weight:700;background:var(--naranja-tinte);
  color:#8A3F00;border-radius:var(--r-pildora);padding:8px 16px}
.divulgacion{font-size:var(--t-caption);line-height:1.55;color:#5B6470;max-width:78ch;margin:0}
.tarjeta{background:var(--papel);border-radius:var(--r-tarjeta);padding:var(--s-48);
  box-shadow:0 1px 2px rgba(23,23,23,.04)}
@media(max-width:479px){.tarjeta{padding:var(--s-24)}}
.chip{display:inline-block;font-size:13px;background:var(--azul-tinte);color:var(--azul);
  border-radius:var(--r-pildora);padding:6px 14px}

/* ═══ BLOQUE 2.0 — Micro-navegación de app-shell ══════════════════════
   Sin pestañas y sin menú desplegable: sólo una fila de accesos y el CTA.  */
.shell{position:sticky;top:0;z-index:40;background:var(--nube);
  border-bottom:1px solid rgba(23,23,23,.08)}
.shell .marco{display:flex;align-items:center;gap:var(--s-16);flex-wrap:wrap;
  padding-block:var(--s-16)}
.shell .nombre{font-family:var(--titulo);font-weight:700;color:var(--tinta);
  text-decoration:none;margin-right:auto}
.shell nav{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.shell nav a{font-size:var(--t-caption);color:var(--cuerpo-color);text-decoration:none;
  border-radius:var(--r-pildora);padding:7px 14px;background:var(--niebla)}
.shell nav a:hover{background:var(--azul-tinte);color:var(--azul)}
@media(max-width:767px){.shell nav{display:none}}

/* ═══ BLOQUE 3.0 — Primera pantalla: el teléfono ══════════════════════ */
.primera{padding-block:var(--s-80) var(--s-100)}
.primera .rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-64);
  align-items:center}
@media(max-width:991px){.primera .rejilla{grid-template-columns:1fr;gap:var(--s-48)}}
.telefono{width:100%;max-width:300px;margin-inline:auto;aspect-ratio:9/17;
  border:10px solid var(--tinta);border-radius:38px;background:var(--papel);
  padding:var(--s-16);display:flex;flex-direction:column;gap:var(--s-12)}
.telefono .barra{height:6px;width:52px;border-radius:var(--r-avatar);background:rgba(23,23,23,.18);
  margin-inline:auto}
.telefono .lienzo{flex:1;border-radius:var(--r-tesela);background:var(--niebla);
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}
.telefono .lienzo i{border-radius:8px;background:rgba(44,107,242,.14);display:block}
.telefono .lienzo i.on{background:var(--naranja)}
.telefono .mandos{display:flex;gap:8px;align-items:center}
.telefono .mandos span{flex:1;height:34px;border-radius:var(--r-pildora);background:var(--niebla)}
.telefono .mandos span.giro{flex:0 0 54px;background:var(--azul)}

/* ═══ BLOQUES 5.0–10.0 — Gestos, diccionario y hojas inferiores ═══════ */
.gestos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-24)}
.gesto{background:var(--papel);border-radius:var(--r-tarjeta);padding:var(--s-32);
  box-shadow:0 1px 2px rgba(23,23,23,.04)}
.gesto .n{display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:var(--r-avatar);background:var(--azul);color:#fff;
  font-family:var(--titulo);font-weight:700;margin-bottom:var(--s-16)}
.gesto p{font-size:var(--t-body-sm);line-height:1.55;margin:var(--s-8) 0 0}
.diccionario{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-16)}
.termino{background:var(--papel);border-radius:var(--r-tesela);padding:var(--s-24);
  box-shadow:0 1px 2px rgba(23,23,23,.04)}
.termino b{display:block;font-family:var(--titulo);font-size:var(--t-body);color:var(--tinta);
  margin-bottom:6px}
.termino span{font-size:var(--t-caption);line-height:1.5;display:block}
/* Hojas inferiores: el patrón móvil que pide el pliego, hecho con detalles. */
.hojas{display:flex;flex-direction:column;gap:var(--s-16)}
.hoja{background:var(--papel);border-radius:var(--r-tarjeta);overflow:hidden;
  box-shadow:0 1px 2px rgba(23,23,23,.04)}
.hoja .asa{display:flex;align-items:center;gap:var(--s-16);width:100%;padding:var(--s-24);
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.hoja .tirador{width:44px;height:5px;border-radius:var(--r-avatar);background:rgba(23,23,23,.16);
  flex:none}
.hoja .q{flex:1;font-family:var(--titulo);font-size:var(--t-body);font-weight:600;
  color:var(--tinta)}
.hoja .seg{font-size:13px;color:var(--azul);white-space:nowrap}
.hoja .cuerpo{max-height:0;overflow:hidden;transition:max-height .3s ease}
.hoja .cuerpo.abierto{max-height:520px}
.hoja .cuerpo .dentro{padding:0 var(--s-24) var(--s-24)}

/* ═══ BLOQUE 11.0 — Tres fallos rápidos ══════════════════════════════ */
.fallos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-24)}
.fallo{border-radius:var(--r-tarjeta);padding:var(--s-32);background:var(--naranja-tinte)}
.fallo b{display:block;font-family:var(--titulo);font-size:var(--t-body);color:#8A3F00;
  margin-bottom:var(--s-8)}
.fallo p{font-size:var(--t-body-sm);line-height:1.55;margin:0}

/* ═══ BLOQUE 19.0 y 21.0 — Firma y hub ═══════════════════════════════ */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-24)}
.enlace-hub{background:var(--papel);border-radius:var(--r-tarjeta);padding:var(--s-32);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 2px rgba(23,23,23,.04);transition:box-shadow 200ms ease}
.enlace-hub:hover{box-shadow:0 12px 32px rgba(23,23,23,.08)}
.enlace-hub p{font-size:var(--t-caption);line-height:1.5;margin:0}
.firma dl{display:grid;grid-template-columns:auto 1fr;gap:10px var(--s-24);margin:var(--s-24) 0 0}
.firma dt{font-size:13px;color:#5B6470}
.firma dd{margin:0;font-size:var(--t-body-sm)}

/* ═══ BLOQUE 20.0 — Aviso responsable, sin bloquear ══════════════════ */
.responsable{background:var(--azul);color:#fff}
.responsable h2{color:#fff}
.responsable p{color:rgba(255,255,255,.86)}
.responsable .etiqueta{color:rgba(255,255,255,.7)}
.responsable .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-24);margin-top:var(--s-32)}
.responsable .rejilla div{background:rgba(255,255,255,.12);border-radius:var(--r-tesela);
  padding:var(--s-24)}
.responsable .rejilla b{display:block;font-family:var(--titulo);margin-bottom:6px}
.responsable .rejilla span{font-size:var(--t-caption);line-height:1.5;color:rgba(255,255,255,.86)}
.responsable .aviso{background:rgba(255,255,255,.92);color:#8A3F00}

/* ═══ BLOQUE 23.0 — Barra inferior y pie ═════════════════════════════ */
.barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--papel);
  border-top:1px solid rgba(23,23,23,.08);display:flex;padding:8px 12px;gap:6px}
@media(min-width:768px){.barra-inferior{display:none}}
.barra-inferior a{flex:1;text-align:center;font-size:12px;color:var(--cuerpo-color);
  text-decoration:none;border-radius:var(--r-tesela);padding:8px 4px;min-height:44px;
  display:flex;flex-direction:column;justify-content:center}
.barra-inferior a.activo{background:var(--azul-tinte);color:var(--azul)}
.pie-sitio{background:var(--tinta);color:#fff;padding-block:var(--s-64)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-48)}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-24)}}
.pie-marca{font-family:var(--titulo);font-size:var(--t-h-sm);font-weight:700;color:#fff}
.pie-nota{margin-top:10px;font-size:var(--t-caption);color:rgba(255,255,255,.66)}
.pie-sitio nav{display:flex;flex-wrap:wrap;gap:10px var(--s-24)}
.pie-sitio nav a{font-size:var(--t-caption);color:rgba(255,255,255,.66);text-decoration:none}
.pie-sitio nav a:hover{color:#fff}
.legal{margin-top:var(--s-24);font-size:13px;line-height:1.65;color:rgba(255,255,255,.5);
  max-width:92ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}