/* ═════════════════════════════════════════════════════════════════════════════════════
   Pantalla de acceso de app.poyntia.com · BORRADOR (12-oct-2026) · lenguaje de Space, el mismo que /planes/ (aprobado por Pablo el 11-oct).
   Referencia: docs/comercial/outreach-2026-10-07/web/referencia-space-2026-10-11/app-acceso-hoja.png (app.spacefs.com): logo circular arriba a la izquierda; cuenta, selector de tema arriba a la derecha;
   UNA columna centrada (ficha, titular a dos tonos, una frase, botones). Oscuro por defecto; claro como alternativa (?modo=claro). Autocontenido: no enlaza ninguna hoja del resto de la web.
   Reglas de la casa: texto de lectura ≥ 17 px, botones ≥ 44 px, «un tamaño sólo sube» (todo en --u), móvil de UNA pantalla sin scroll, movimiento reducido respetado, la carga es una barra gris (nunca «Cargando…»).
   Sólo maqueta: nada de esta página habla con un servidor.
   ═════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #f7f8fa; --bg-2: #eef0f3; --ink: #0e0f12; --ink-2: #686d78; --ink-3: #565b66; --line: #e0e3e8; --line-2: #cfd3da; --acento: #2551d6;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --u: clamp(1px, .068vw, 1.74px);                    /* la unidad de toda la web: 1 px hasta 1470 px de ancho, y crece con la pantalla */
  --gut: 24px; --m-arriba: 84px;
  --seg: #eceef2; --pulgar: #fff; --pulgar-sombra: 0 1px 2px rgba(14, 15, 18, .12), 0 6px 14px -8px rgba(14, 15, 18, .28);
  --cta-bg: var(--ink); --cta-fg: #f7f8fa; --cta-hover: #272a31; --sur: #fff; --hair: var(--line-2);
  --ficha-bg: #fff; --ficha-sombra: 0 0 0 1px rgba(14, 15, 18, .06), 0 14px 30px -16px rgba(14, 15, 18, .3);
  --sombra-s: 0 0 0 1px rgba(14, 15, 18, .06), 0 8px 24px -12px rgba(14, 15, 18, .22);
  --ok: #1c8a4e; --pend: #b7791f; --err: #c2342b;
}
html[data-modo="oscuro"] {
  color-scheme: dark;
  --bg: #0c0c0f; --bg-2: #141418;
  --ink: #f2f3f5; --ink-2: #8e919c; --ink-3: #a3a7b1;                  /* sobre #0c0c0f: 6,2:1 (titular, texto grande) y 8:1 (texto pequeño) */
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); --acento: #7c9bff;
  --seg: #16171c; --pulgar: #2a2c33; --pulgar-sombra: inset 0 1px 0 rgba(255, 255, 255, .09), 0 6px 16px -8px rgba(0, 0, 0, .8);
  --cta-bg: #eef0f3; --cta-fg: #0c0c0f; --cta-hover: #fff; --sur: #14151a;
  --ficha-bg: #17181c; --ficha-sombra: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .9);
  --sombra-s: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -12px rgba(0, 0, 0, .8);
  --ok: #4cc38a; --pend: #e8b04a; --err: #ff8a80;
}
* { box-sizing: border-box }
html { background: var(--bg); -webkit-text-size-adjust: 100% }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: calc(17 * var(--u)); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden }
html[data-modo="oscuro"] ::selection { background: var(--ink); color: #0c0c0f }
[hidden] { display: none !important }
h1, h2, p, ul, dl, dd { margin: 0; padding: 0 } ul { list-style: none }
a { color: inherit }
button, input { font: inherit; color: inherit }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; transition: top .15s var(--ease-ui) } .skip:focus { top: 12px }
.ac-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.i18n-pendiente body { visibility: hidden }

/* el logo en sus dos versiones (la clara es el mismo SVG con el relleno #F5F5F5) */
.lg-o { display: none } html[data-modo="oscuro"] .lg-o { display: block } html[data-modo="oscuro"] .lg-c { display: none }

/* ── 1 · la ola de grano (la dibuja acceso.js UNA vez; sólo se mueve con una deriva de CSS) ───────────────────────────────────────── */
#grano { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s ease; transform: scale(1.06) }
#grano.listo { opacity: 1 }
@media (prefers-reduced-motion: no-preference) { #grano.listo { will-change: transform; animation: ac-deriva 120s ease-in-out infinite alternate } }
@keyframes ac-deriva { from { transform: translate3d(-1.4%, .8%, 0) scale(1.06) } to { transform: translate3d(1.4%, -.8%, 0) scale(1.06) } }

/* ── 2 · cabecera: logo circular a la izquierda; cuenta, tema e idioma a la derecha ────────────────────────────────────────────────── */
.ac-top { position: fixed; z-index: 20; left: 0; right: 0; top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 max(var(--gut), calc(22 * var(--u))); pointer-events: none }
.ac-top > * { pointer-events: auto }
.ac-logo { position: relative; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 44px; min-height: 44px; border-radius: 50%; background: var(--ficha-bg); box-shadow: var(--sombra-s) }
.ac-logo img { width: calc(19 * var(--u)); min-width: 18px; height: auto }
.ac-logo::after { content: ""; position: absolute; inset: -7px }
.ac-logo:focus-visible, .ac-btn:focus-visible, .ac-link:focus-visible, .ac-tabs button:focus-visible, .ac-campo input:focus-visible, .tema button:focus-visible, .tema-tog:focus-visible, .ac-lang:focus-visible, .ac-otp input:focus-visible, .ap-it:focus-visible, .mq button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px }
.ac-der { display: flex; align-items: center; gap: calc(10 * var(--u)) }
.ac-cuenta { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); height: calc(44 * var(--u)); min-height: 44px; padding: 0 calc(16 * var(--u)) 0 calc(5 * var(--u)); border-radius: 999px; background: var(--seg); box-shadow: inset 0 0 0 1px var(--line); max-width: 38vw }
.ac-av { flex: none; display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); min-width: 34px; min-height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: .02em }
.ac-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(16 * var(--u)); color: var(--ink) }
.tema { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--seg); box-shadow: inset 0 0 0 1px var(--line) }
.tema button, .tema-tog, .ac-lang { all: unset; box-sizing: border-box; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 44px; min-height: 44px; border-radius: 50%; color: var(--ink-3); cursor: pointer;
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui) }
.tema button:hover, .tema-tog:hover, .ac-lang:hover { color: var(--ink) }
.tema button[aria-checked="true"] { background: var(--pulgar); color: var(--ink); box-shadow: var(--pulgar-sombra) }
.tema svg, .tema-tog svg { width: calc(20 * var(--u)); min-width: 18px; height: calc(20 * var(--u)); min-height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.tema-tog, .ac-lang { background: var(--seg); box-shadow: inset 0 0 0 1px var(--line) }
.ac-lang { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: .04em }
.tema-tog { display: none } .tema-tog .i-sol { display: none } html[data-modo="oscuro"] .tema-tog .i-sol { display: block } html[data-modo="oscuro"] .tema-tog .i-luna { display: none }
@media (max-width: 900px) { .tema { display: none } .tema-tog { display: grid } }

/* ── 3 · la columna centrada ──────────────────────────────────────────────────────────────────────────────── */
.ac { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: calc(92 * var(--u)) var(--gut) calc(70 * var(--u)) }
.ac-v { width: min(100%, calc(430 * var(--u))); display: flex; flex-direction: column; align-items: center; text-align: center }
.ac-ficha { display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 56px; min-height: 56px; border-radius: calc(19 * var(--u)); background: var(--ficha-bg); box-shadow: var(--ficha-sombra) }
.ac-ficha img { width: calc(28 * var(--u)); min-width: 24px; height: auto }
.ac-h1 { width: min(calc(720 * var(--u)), calc(100vw - 2 * var(--gut))); margin-top: calc(26 * var(--u)); font-size: calc(46 * var(--u)); font-weight: 500; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance }      /* más ancho que la columna: los dos tonos caben en dos líneas */
.ac-h1 span { display: block } .ac-h1 .t2 { color: var(--ink-2); font-weight: 400 }
.ac-h1:focus { outline: none }
.ac-lede { margin-top: calc(16 * var(--u)); max-width: 26em; font-size: calc(19 * var(--u)); line-height: 1.45; color: var(--ink-2); text-wrap: balance }
.ac-lede b { font-weight: 500; color: var(--ink) }

/* botones: píldoras de la anchura de la columna */
.ac-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); height: calc(56 * var(--u)); min-height: 52px; border-radius: 999px; background: var(--sur); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font-size: calc(18 * var(--u)); font-weight: 500; letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background-color .15s var(--ease-ui), box-shadow .15s var(--ease-ui), transform .15s var(--ease-ui) }
.ac-btn:hover { box-shadow: inset 0 0 0 1px var(--ink) } .ac-btn:active { transform: scale(.985) }
.ac-btn svg { flex: none; width: calc(22 * var(--u)); min-width: 20px; height: auto }
.ac-btn-prim { background: var(--cta-bg); color: var(--cta-fg); box-shadow: none } .ac-btn-prim:hover { background: var(--cta-hover); box-shadow: none }
.ac-btn[disabled] { opacity: .45; cursor: not-allowed } .ac-btn[disabled]:hover { box-shadow: inset 0 0 0 1px var(--line-2) } .ac-btn-prim[disabled]:hover { background: var(--cta-bg) }
.ac-btns { display: flex; flex-direction: column; gap: calc(10 * var(--u)); width: 100%; margin-top: calc(28 * var(--u)) }
.ac-link { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 calc(10 * var(--u)); font-size: calc(17 * var(--u)); color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; cursor: pointer; transition: color .15s var(--ease-ui) }
.ac-link:hover { color: var(--ink); text-decoration-color: var(--ink) }

/* 01 · entrar: pestañas (cápsula con el «pulgar» que se desliza), Google, Microsoft, correo corporativo */
.ac-tabs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: calc(28 * var(--u)); padding: calc(5 * var(--u)); border-radius: 999px; background: var(--seg); box-shadow: inset 0 0 0 1px var(--line) }
.ac-pulgar { position: absolute; z-index: 0; top: calc(5 * var(--u)); bottom: calc(5 * var(--u)); left: calc(5 * var(--u)); width: calc((100% - 10 * var(--u)) / 2); border-radius: 999px; background: var(--pulgar); box-shadow: var(--pulgar-sombra); transition: transform .45s var(--ease) }
.ac-tabs[data-sel="1"] .ac-pulgar { transform: translateX(100%) }
.ac-tabs button { all: unset; position: relative; z-index: 1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: calc(48 * var(--u)); min-height: 44px; border-radius: 999px; font-size: calc(17 * var(--u)); font-weight: 500; color: var(--ink-3); cursor: pointer; transition: color .2s var(--ease-ui) }
.ac-tabs button:hover, .ac-tabs button[aria-selected="true"] { color: var(--ink) }
.ac-panel { width: 100%; margin-top: calc(14 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)) }
.ac-o { display: flex; align-items: center; gap: calc(16 * var(--u)); margin: calc(6 * var(--u)) 0; font-size: calc(17 * var(--u)); color: var(--ink-3) }
.ac-o::before, .ac-o::after { content: ""; flex: 1; height: 1px; background: var(--line-2) }
.ac-campo { position: relative; width: 100% }
.ac-campo input { all: unset; box-sizing: border-box; width: 100%; height: calc(56 * var(--u)); min-height: 52px; padding: 0 calc(66 * var(--u)) 0 calc(22 * var(--u)); border-radius: 999px; background: var(--seg); box-shadow: inset 0 0 0 1px var(--line); font-size: max(17px, calc(18 * var(--u))); color: var(--ink); text-align: left }
.ac-campo input::placeholder { color: var(--ink-3); opacity: 1 }
.ac-campo input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--err) }
.ac-ir { all: unset; box-sizing: border-box; position: absolute; right: calc(6 * var(--u)); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 44px; min-height: 44px; border-radius: 50%; background: var(--cta-bg); color: var(--cta-fg); cursor: pointer; transition: background-color .15s var(--ease-ui), opacity .15s }
.ac-ir:hover { background: var(--cta-hover) } .ac-ir[disabled] { opacity: .35; cursor: not-allowed } .ac-ir:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px }
.ac-ir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.ac-err { min-height: 0; font-size: calc(17 * var(--u)); line-height: 1.35; color: var(--err); text-align: left; padding-left: calc(22 * var(--u)) } .ac-err:empty { display: none }
.ac-nota { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(22 * var(--u)); font-size: calc(17 * var(--u)); color: var(--ink-3) }
.ac-nota svg { flex: none; width: calc(18 * var(--u)); min-width: 16px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }

/* 02 · comprobando: la barra gris (CargaEsqueleto), jamás el texto «Cargando…» */
.ac-estado { margin-top: calc(26 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 500; letter-spacing: -.015em }
.ac-estado:focus { outline: none }
.ac-sub { margin-top: calc(8 * var(--u)); font-size: calc(17 * var(--u)); color: var(--ink-3) }
.ac-barra { position: relative; width: calc(150 * var(--u)); min-width: 120px; height: 4px; margin-top: calc(26 * var(--u)); border-radius: 4px; overflow: hidden; background: var(--line-2) }
.ac-barra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--ink-2), transparent) 0 0 / 45% 100% no-repeat; opacity: .9 }
@media (prefers-reduced-motion: no-preference) { .ac-barra::after { animation: ac-barra 1.4s var(--ease-ui) infinite } }
@keyframes ac-barra { from { background-position: -60% 0 } to { background-position: 160% 0 } }
.ac-pie-v { position: fixed; z-index: 2; left: 0; right: 0; bottom: calc(46 * var(--u)); display: flex; justify-content: center }

/* 04 · sin acceso y 05 · pendiente */
.ac-esp { width: 100%; margin-top: calc(26 * var(--u)); text-align: left }
.ac-esp > div { display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--u)); padding: calc(13 * var(--u)) 0; border-top: 1px solid var(--hair) }
.ac-esp > div:last-child { border-bottom: 1px solid var(--hair) }
.ac-esp dt { flex: none; margin: 0; font-size: calc(17 * var(--u)); color: var(--ink-3) }
.ac-esp dd { margin: 0; min-width: 0; text-align: right; font-size: calc(17 * var(--u)); color: var(--ink); overflow-wrap: anywhere }
.ac-ins { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); height: calc(30 * var(--u)); min-height: 28px; padding: 0 calc(13 * var(--u)); border-radius: 999px; background: var(--seg); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(15 * var(--u)); font-weight: 500; color: var(--ink) }
.ac-ins i { width: 8px; height: 8px; border-radius: 50%; background: var(--pend) } .ac-ins.ok i { background: var(--ok) }
.ac-v .ac-ins { margin-top: 0 }

/* 06 · segundo factor: seis cajas */
.ac-otp { display: flex; justify-content: center; gap: calc(10 * var(--u)); width: 100%; margin-top: calc(28 * var(--u)) }
.ac-otp input { all: unset; box-sizing: border-box; width: calc(58 * var(--u)); min-width: 44px; max-width: 58px; flex: 1 1 0; height: calc(68 * var(--u)); min-height: 56px; border-radius: calc(16 * var(--u)); background: var(--seg); box-shadow: inset 0 0 0 1px var(--line); text-align: center; font-size: calc(28 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; caret-color: var(--acento); transition: box-shadow .15s var(--ease-ui) }
.ac-otp input:focus { box-shadow: inset 0 0 0 2px var(--ink) } .ac-otp input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--err) }
.ac-respaldo { width: 100%; margin-top: calc(28 * var(--u)) } .ac-respaldo .ac-campo input { padding-right: calc(22 * var(--u)); text-align: center; letter-spacing: .08em }
.ac-v[data-v="segundo-factor"] .ac-respaldo { display: none } .ac-v[data-v="segundo-factor"][data-modo="respaldo"] .ac-respaldo { display: block } .ac-v[data-v="segundo-factor"][data-modo="respaldo"] .ac-otp { display: none }
.ac-v[data-v="segundo-factor"] .ac-btns { margin-top: calc(14 * var(--u)) }
.ac-v[data-v="segundo-factor"] .ac-err { text-align: center; padding-left: 0; margin-top: calc(10 * var(--u)) }
.ac-extra { display: flex; flex-direction: column; align-items: center; margin-top: calc(10 * var(--u)) }

/* 03 · con acceso: la aplicación (maqueta: un menú, el hueco de «Documentación» y tres tarjetas con datos de muestra) */
.ac[data-estado="acceso"] { place-items: start center; padding-top: calc(110 * var(--u)) }
.ac-v.ac-app { width: min(100%, calc(980 * var(--u))); flex-direction: row; align-items: flex-start; gap: calc(40 * var(--u)); text-align: left }
.ap-nav { flex: none; width: calc(210 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)) }
.ap-it { all: unset; box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 0 calc(16 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(17 * var(--u)); color: var(--ink-3); cursor: default; transition: background-color .15s var(--ease-ui), color .15s var(--ease-ui) }
button.ap-it { cursor: pointer } button.ap-it:hover { color: var(--ink); background: var(--seg) }
.ap-it[aria-current="page"] { background: var(--seg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line) }
.ap-hueco { margin-top: calc(10 * var(--u)); border: 1px dashed var(--line-2); color: var(--ink-3); opacity: .75 }      /* el hueco de «Documentación»: está en la navegación y todavía no lleva a nada */
.ap-cuerpo { flex: 1; min-width: 0 }
.ap-cuerpo .ac-h1 { width: auto; margin-top: calc(16 * var(--u)); font-size: calc(42 * var(--u)) }
.ap-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin-top: calc(30 * var(--u)) }
.ap-tarjetas li { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--sur); box-shadow: inset 0 0 0 1px var(--line) }
.ap-tarjetas b { font-size: calc(40 * var(--u)); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums }
.ap-tarjetas span { font-size: calc(17 * var(--u)); color: var(--ink-3) }
.ap-muestra { margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); color: var(--ink-3) }

/* el legal, discreto, abajo */
.ac-legal { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(24 * var(--u)); padding: calc(10 * var(--u)) max(var(--gut), calc(22 * var(--u))) calc(18 * var(--u)); font-size: calc(15 * var(--u)); color: var(--ink-3); pointer-events: none }
.ac-legal > *, .ac-legal a { pointer-events: auto }
.ac-legal nav { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(22 * var(--u)) } .ac-legal a { display: inline-flex; align-items: center; min-height: 28px; text-decoration: none; transition: color .15s var(--ease-ui) } .ac-legal a:hover { color: var(--ink) }

/* ── BARRA DE LA MAQUETA: no es parte de la pantalla; sirve para ver los seis estados. Se quita al promover (?barra=0 la oculta) ─────────────────────── */
.mq { position: fixed; z-index: 60; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 24px); padding: 10px 12px 12px; border-radius: 16px; background: rgba(20, 21, 26, .94); color: #e8eaee; border: 1px dashed rgba(255, 255, 255, .28); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); font: 500 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace }
html:not([data-modo="oscuro"]) .mq { background: rgba(255, 255, 255, .95); color: #1a1b20; border-color: rgba(0, 0, 0, .3) }
.mq > p { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .75 }
.mq-fila { display: flex; flex-wrap: wrap; gap: 6px }
.mq button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px currentColor; cursor: pointer; opacity: .85 }
.mq button:hover { opacity: 1 } .mq button[aria-current="true"], .mq button[aria-pressed="true"] { background: #eef0f3; color: #0c0c0f; box-shadow: none; opacity: 1 }
html:not([data-modo="oscuro"]) .mq button[aria-current="true"], html:not([data-modo="oscuro"]) .mq button[aria-pressed="true"] { background: #0e0f12; color: #f7f8fa }
.mq-nota { opacity: .7; font-size: 13px }
.ac-sin-barra .mq { display: none }

/* entrada: la columna aparece suave (sólo con JS y sin «reducir movimiento») */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ac-v.ac-entra > * { animation: ac-sube .7s var(--ease) backwards }
  .ac-v.ac-entra > :nth-child(2) { animation-delay: .06s } .ac-v.ac-entra > :nth-child(3) { animation-delay: .12s } .ac-v.ac-entra > :nth-child(4) { animation-delay: .18s } .ac-v.ac-entra > :nth-child(5) { animation-delay: .24s } .ac-v.ac-entra > :nth-child(6) { animation-delay: .3s }
}
@keyframes ac-sube { from { opacity: 0; transform: translate3d(0, calc(14 * var(--u)), 0) } }
@media (prefers-reduced-motion: reduce) { .ac-pulgar, #grano, .ac-btn, .ac-otp input { transition: none !important } }

/* ── pantallas poco altas (portátiles): la columna se aprieta para seguir entera ──────────────────────────────────────────── */
@media (min-width: 901px) and (max-height: 800px) {
  .ac { padding-top: calc(84 * var(--u)); padding-bottom: calc(60 * var(--u)) }
  .ac-h1 { margin-top: calc(18 * var(--u)); font-size: min(calc(46 * var(--u)), 6svh) } .ac-lede { margin-top: calc(12 * var(--u)) }
  .ac-tabs, .ac-btns, .ac-otp, .ac-esp { margin-top: calc(20 * var(--u)) } .ac-btn, .ac-campo input { height: calc(50 * var(--u)); min-height: 48px }
}

/* ── MÓVIL (≤ 720 px): cada estado dentro de UNA pantalla, sin desplazarse ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ac-top { top: 12px; padding: 0 var(--gut) }
  .ac-mail { display: none } .ac-cuenta { padding: 0 5px; max-width: none }
  .ac { padding: var(--m-arriba) var(--gut) 24px } .ac-v { width: 100% }
  .ac-ficha { width: 56px; height: 56px; border-radius: 17px } .ac-ficha img { width: 24px }
  .ac-h1 { margin-top: 20px; font-size: 34px } .ac-lede { margin-top: 12px; font-size: 17px; line-height: 1.4 }
  .ac-tabs { margin-top: 20px; padding: 4px } .ac-pulgar { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2) } .ac-tabs button { height: 46px; font-size: 17px }
  .ac-panel { margin-top: 12px; gap: 10px } .ac-btn { height: 56px; font-size: 18px } .ac-campo input { height: 56px; font-size: 17px; padding: 0 64px 0 20px } .ac-o { margin: 2px 0; font-size: 17px }
  .ac-ir { right: 6px; width: 44px; height: 44px } .ac-nota { margin-top: 16px; font-size: 17px; text-align: center } .ac-nota svg { display: none }
  .ac-btns { margin-top: 22px; gap: 10px } .ac-estado { margin-top: 20px; font-size: 22px } .ac-barra { margin-top: 22px }
  .ac-pie-v { bottom: 24px }
  .ac-esp { margin-top: 20px } .ac-esp > div { padding: 12px 0 } .ac-otp { gap: 8px; margin-top: 22px } .ac-otp input { height: 60px; font-size: 26px; border-radius: 14px }
  .ac-legal { display: none }
  /* con acceso: el menú pasa a una fila y las tarjetas a una columna compacta */
  .ac[data-estado="acceso"] { place-items: start center; padding-top: var(--m-arriba) }
  .ac-v.ac-app { flex-direction: column; gap: 14px } .ap-nav { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px } .ap-it { padding: 0 14px } .ap-hueco { margin-top: 0 }
  .ap-cuerpo .ac-h1 { margin-top: 12px; font-size: 30px } .ap-tarjetas { grid-template-columns: 1fr; gap: 8px; margin-top: 16px } .ap-tarjetas li { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 12px 18px; border-radius: 18px } .ap-tarjetas b { font-size: 28px } .ap-muestra { margin-top: 12px }
  /* la barra de la maqueta, compacta */
  .mq { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px 10px; max-width: none } .mq-nota, .mq > p { display: none } .mq button { min-height: 44px; padding: 0 10px }
}
@media (max-width: 720px) and (max-height: 780px) { .ac-ficha { display: none } .ac-h1 { margin-top: 0 } }
@media (max-width: 720px) and (max-height: 700px) { .ac-h1 { font-size: 32px } .ac-lede { display: none } .ac-otp input { height: 56px } .ap-tarjetas li:nth-child(3) { display: none } }