/* Claudio v3. Recursos locales, sin fuentes externas ni estilos inline. */
:root {
  color-scheme: dark;
  --fondo: #101216;
  --panel: #191c22;
  --borde: #30343c;
  --texto: #f4f2ec;
  --suave: #b2b5bc;
  --acento: #ff956f;
  --menta: #b8efcf;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --ancho: 1184px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, p, figure, pre { margin: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
a { color: inherit; }
b { color: var(--texto); font-weight: 650; }
button { font: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--menta); outline-offset: 5px; }
[hidden] { display: none !important; }
.saltar { position: fixed; top: 10px; left: 16px; z-index: 50; padding: 10px 18px; border-radius: 8px; background: var(--menta); color: var(--fondo); transform: translateY(-160%); }
.saltar:focus { transform: translateY(0); }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Navegación: sin JavaScript, todos los enlaces siguen accesibles. */
.barra { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 83px; padding: max(16px, env(safe-area-inset-top)) max(24px, calc((100% - var(--ancho)) / 2)); background: #101216f5; border-bottom: 1px solid var(--borde); }
.marca { display: inline-flex; align-items: center; flex-shrink: 0; gap: 10px; font-size: 28px; line-height: 1; letter-spacing: -.06em; font-weight: 800; text-decoration: none; }
.logo { display: grid; place-items: center; width: 43px; height: 36px; border-radius: 8px; background: var(--acento); color: var(--fondo); font: 700 14px/1 var(--mono); letter-spacing: -.08em; }
.marca-punto { color: var(--acento); margin-left: -9px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { padding: 9px 12px; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 550; color: var(--suave); transition: color .2s, background-color .2s; }
.menu a:last-child { border: 1px solid var(--borde); margin-left: 8px; color: var(--texto); }
.menu a:hover { color: var(--acento); background: var(--panel); }
.menu-boton { display: none; width: 44px; height: 44px; padding: 12px 10px; background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; cursor: pointer; flex-direction: column; justify-content: space-between; }
.menu-boton span { width: 100%; height: 2px; background: var(--texto); transition: transform .2s, opacity .2s; }
.menu-boton[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:last-child { transform: translateY(-8px) rotate(-45deg); }

/* Estructura y tipografía */
.seccion, .portada, .cierre, .pie { width: min(var(--ancho), 100% - 48px); margin-inline: auto; }
.seccion { padding-top: 116px; }
.seccion h2 { font-size: clamp(34px, 4.5vw, 58px); font-weight: 750; }
.ceja { margin-bottom: 20px; font: 600 11px/1.5 var(--mono); letter-spacing: .15em; color: var(--acento); }
.intro { max-width: 58ch; color: var(--suave); margin-top: 22px; font-size: 17px; }
.cabecera-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.cabecera-seccion > div { flex: 1.3; }
.cabecera-seccion .intro { flex: 1; max-width: 38ch; margin-bottom: 3px; }
.texto-suave { color: var(--suave); }
.acento { color: var(--acento); }
.boton { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 52px; padding: 13px 22px; border-radius: 7px; border: 1px solid var(--borde); text-decoration: none; font-size: 14px; font-weight: 700; transition: transform .2s, background-color .2s; }
.boton:hover { transform: translateY(-3px); }
.boton.principal { background: var(--acento); color: #24180f; border-color: var(--acento); }
.boton.principal:hover { background: #ffb092; }
.boton.secundario:hover { background: var(--panel); }
.boton span { font-size: 20px; line-height: 1; }
.punto-vivo, .mini-punto { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--menta); }
.punto-vivo { animation: respirar 2.4s ease-in-out infinite; }
@keyframes respirar { 50% { opacity: .35; } }

/* La voz al frente; el robot, en su pequeña terminal. */
.portada { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 70px; padding-block: 91px 92px; }
.sobre { display: flex; align-items: center; gap: 9px; font: 500 10px/1.6 var(--mono); letter-spacing: .1em; color: var(--menta); }
h1 { margin-top: 25px; font-size: clamp(58px, 7.3vw, 96px); font-weight: 800; line-height: .99; letter-spacing: -.065em; }
.bajada { max-width: 49ch; margin-top: 27px; font-size: 17px; color: var(--suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.nota-portada { margin-top: 19px; color: var(--suave); font: 11px/1.6 var(--mono); }
.portada-personaje { position: relative; isolation: isolate; padding: 28px 10px; min-width: 0; }
.portada-personaje::before { position: absolute; content: ""; inset: -30px -15px; z-index: -2; border-radius: 50%; background: radial-gradient(ellipse, #ff956f1c, #b8efcf09 46%, transparent 69%); animation: aura 9s ease-in-out infinite alternate; }
@keyframes aura { to { transform: translateY(-18px) scale(1.08); opacity: .5; } }
.orbita { position: absolute; z-index: -1; inset: 1% -5%; border: 1px solid #ff956f22; border-radius: 50%; transform: rotate(-24deg); }
.orbita-dos { inset: -4% 8%; transform: rotate(28deg); border-color: #b8efcf1c; }
.pantalla { position: relative; overflow: hidden; border: 1px solid #494238; border-radius: 18px; background: linear-gradient(145deg, #222421, #171a1e 60%); box-shadow: 0 28px 65px #0005; transform: rotate(-3deg); }
.pantalla-barra, .pantalla-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 20px; font: 10px/1.4 var(--mono); letter-spacing: .06em; color: var(--suave); }
.pantalla-barra { border-bottom: 1px solid var(--borde); }
.pantalla-barra > span:first-child { display: flex; align-items: center; gap: 8px; }
.pantalla-barra > span:last-child { font-size: 8px; letter-spacing: 5px; color: #73786d; }
.robot-escena { display: grid; place-items: center; min-height: 278px; padding: 27px 0 12px; }
.robot { color: #d9dad1; font: 17px/1.25 var(--mono); white-space: pre; }
.robot .a { color: var(--acento); }
.estado-robot { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--menta); font: 12px/1.5 var(--mono); }
.onda-voz { display: flex; justify-content: center; align-items: center; gap: 5px; height: 51px; margin-block: 16px; }
.onda-voz span { width: 3px; height: 12px; border-radius: 3px; background: var(--acento); animation: onda 1.2s ease-in-out infinite alternate; }
.onda-voz span:nth-child(3n) { height: 37px; animation-delay: -.7s; }
.onda-voz span:nth-child(3n + 1) { height: 24px; animation-delay: -.3s; }
.onda-voz span:nth-child(4n) { height: 46px; animation-delay: -.9s; }
@keyframes onda { to { transform: scaleY(.3); opacity: .45; } }
.pantalla-pie { border-top: 1px solid var(--borde); font-size: 9px; }
.pantalla-pie > span:last-child { font-size: 18px; color: var(--acento); }
.etiqueta-flotante { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; background: #23282a; border: 1px solid #4a514b; border-radius: 7px; padding: 11px 13px; box-shadow: 0 8px 24px #0004; color: var(--suave); font: 11px/1.4 var(--mono); animation: flotar 5s ease-in-out infinite; }
.etiqueta-flotante b { color: var(--menta); font-size: 10px; }
.etiqueta-uno { right: -15px; top: 74px; transform: rotate(4deg); }
.etiqueta-dos { bottom: 60px; left: -30px; animation-delay: -2s; }
.etiqueta-dos > span { color: var(--menta); }
@keyframes flotar { 50% { transform: translateY(-8px) rotate(2deg); } }
.banda { border-block: 1px solid var(--borde); background: #191d1b; }
.banda > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; width: min(var(--ancho), 100% - 48px); margin: auto; padding-block: 20px; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--menta); }
.banda i { font-size: 22px; font-style: normal; color: #687a6d; }

/* Video: el ratio y los mínimos evitan desbordes en pantallas angostas. */
.video { margin-top: 35px; min-width: 0; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: #08090a; }
.video video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #08090a; }
.video figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 15px 20px; color: var(--suave); font: 10px/1.6 var(--mono); background: var(--panel); }
.video figcaption span:first-child { color: var(--acento); }

/* Dos composiciones del mismo circuito: texto grande también a 360 px. */
.diagrama { margin-top: 35px; border: 1px solid #41473f; border-radius: 14px; background: radial-gradient(ellipse at 40% 50%, #ff956f08, transparent 60%), #171c1c; overflow: hidden; }
.diagrama-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #ffffff12; font: 10px/1.6 var(--mono); letter-spacing: .05em; }
.diagrama-leyenda { display: flex; align-items: center; gap: 8px; color: var(--menta); letter-spacing: 0; }
.flujo { display: block; width: 100%; height: auto; padding: 20px 10px 0; overflow: hidden; }
.flujo-movil { display: none; }
.flujo text { fill: var(--texto); font-family: system-ui, sans-serif; font-weight: 600; font-size: 17px; text-anchor: middle; letter-spacing: -.02em; }
.flujo .svg-icono { fill: var(--acento); font: 18px var(--mono); }
.flujo .svg-detalle { fill: var(--suave); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.flujo .svg-etiqueta { fill: var(--suave); font: 10px var(--mono); letter-spacing: .1em; }
.flujo .svg-firma { fill: var(--menta); }
.rutas path { stroke: #4a5351; stroke-width: 2; fill: none; }
.pulsos path { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .065 .935; }
.pulsos .pulso-menta { stroke: var(--menta); }
.nodo rect { fill: #202527; stroke: #4c5555; stroke-width: 1; }
.nodo-central > rect:first-child { fill: #342923; stroke: var(--acento); }
.nodo-remoto > rect:first-child { fill: #24332b; stroke: #81b69a; }
.nodo .nodo-destello { fill: var(--acento); stroke: var(--acento); opacity: 0; }
.nodo-remoto .nodo-destello { fill: var(--menta); stroke: var(--menta); }
/* Los pulsos sólo corren cuando el circuito está en pantalla. */
.diagrama.en-vista .pulso { animation: recorrer 3.6s linear infinite; }
.diagrama.en-vista .nodo-destello { animation: encender 3.6s ease-in-out infinite; }
.diagrama.en-vista .demora-uno { animation-delay: -.6s; }
.diagrama.en-vista .demora-dos { animation-delay: -1.4s; }
.diagrama.en-vista .demora-tres { animation-delay: -2.2s; }
.diagrama.en-vista .demora-cuatro { animation-delay: -3s; }
@keyframes recorrer { to { stroke-dashoffset: -1; } }
@keyframes encender { 20%, 45% { opacity: .16; } 0%, 65%, 100% { opacity: 0; } }
.diagrama-pie { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 15px 24px 20px; font-size: 12px; color: var(--menta); }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 30px 0 0; padding: 0; gap: 30px; }
.pasos li { padding: 22px 0 6px; border-top: 1px solid var(--borde); }
.numero { color: var(--acento); font: 13px/1 var(--mono); }
.pasos h3 { margin-top: 15px; font-size: 23px; }
.pasos p { margin-top: 12px; color: var(--suave); font-size: 14px; }
.marcador { overflow: hidden; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); }
.marcador img { width: 100%; height: auto; object-fit: cover; }
.marcador.ancho { margin-top: 36px; }
.marcador.ancho img { aspect-ratio: 16 / 7; }
.marcador figcaption { padding: 12px 20px; color: var(--suave); font: 11px/1.6 var(--mono); }
.marcador.cuadrado { border: 0; border-radius: 10px 10px 0 0; }
.marcador.cuadrado img { aspect-ratio: 1; }
.marcador.apaisado img { aspect-ratio: 4 / 3; }

/* Grilla de funciones */
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.tarjeta { position: relative; padding: 27px; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; transition: transform .25s, border-color .25s; }
@media (hover: hover) { .tarjeta:hover { transform: translateY(-4px); border-color: #847063; } }
.icono { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ff956f35; border-radius: 9px; background: #ff956f0a; color: var(--acento); font: 22px/1 var(--mono); }
.tarjeta h3 { font-size: 20px; margin-top: 25px; letter-spacing: -.025em; line-height: 1.2; }
.tarjeta p { margin-top: 13px; font-size: 14px; color: var(--suave); }
.tarjetas.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarjetas.dos h3 { margin-top: 15px; }

/* Personajes y artista */
.personajes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 35px; }
.personaje { min-width: 0; overflow: hidden; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); }
.personaje-texto { padding: 22px; }
.personaje h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.025em; }
.personaje p { margin-top: 12px; color: var(--suave); font-size: 14px; }
.ascii-tarjeta { display: flex; flex-direction: column; justify-content: space-between; align-items: center; aspect-ratio: 1; padding: 20px 10px; background: radial-gradient(ellipse at center, #ff956f17, transparent 70%), #171a20; border-bottom: 1px solid var(--borde); }
.mini-ascii { text-align: center; white-space: pre; color: var(--acento); font: 20px/1.1 var(--mono); }
.ascii-tarjeta .tipo { font-size: 9px; }
.ascii-etiqueta { color: var(--suave); font: 8px/1.5 var(--mono); }
.dividida { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
.dividida p:not(.ceja) { margin-top: 24px; color: var(--suave); }
.dividida .nota-arte { padding-top: 20px; border-top: 1px solid var(--borde); font-size: 13px; }
.nota-arte span { color: var(--acento); margin-right: 6px; }

/* Equipos y permisos */
.maquinas { display: flex; align-items: stretch; margin-top: 35px; }
.maquina { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); }
.maquina.principal-m { background: #212a26; border-color: #6b8c77; }
.tipo { color: var(--menta); font: 10px/1.6 var(--mono); letter-spacing: .08em; }
.tipo-futuro { color: var(--acento); }
.maquina b { margin-top: 18px; font-size: 34px; letter-spacing: -.05em; }
.maquina small { color: var(--suave); font-size: 13px; margin-bottom: 24px; }
.maquina-estado { display: flex; align-items: center; gap: 7px; margin-top: auto; color: var(--menta); font: 10px/1.5 var(--mono); }
.enlace { position: relative; flex: 0 0 85px; display: grid; place-items: center; }
.enlace::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px dashed #82988b; }
.enlace span { position: relative; padding: 6px; background: var(--fondo); color: var(--suave); font: 9px/1.5 var(--mono); text-align: center; }
.seguridad { list-style: none; margin: 35px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.seguridad li { display: flex; gap: 22px; padding: 28px 0; border-top: 1px solid var(--borde); }
.seguridad li > span { color: var(--menta); font: 11px/1.6 var(--mono); padding-top: 4px; }
.seguridad h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; }
.seguridad p { margin-top: 10px; color: var(--suave); font-size: 14px; }
.cierre { position: relative; isolation: isolate; text-align: center; padding-block: 120px 110px; }
.cierre::before { content: ""; position: absolute; z-index: -1; inset: 30px 0 0; background: radial-gradient(ellipse, #ff956f0c, transparent 65%); }
.mini-ascii.grande { margin-bottom: 30px; font-size: 32px; }
.cierre .ceja { margin-bottom: 20px; }
.cierre h2 { font-size: clamp(50px, 7.5vw, 94px); font-weight: 800; letter-spacing: -.06em; }
.cierre > p:not(.ceja) { margin: 24px auto; max-width: 40ch; color: var(--suave); }
.pie { display: flex; align-items: flex-start; gap: 45px; padding-block: 35px max(35px, env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); }
.pie > div { flex: 1; max-width: 78ch; font-size: 11px; color: var(--suave); }
.pie p + p { margin-top: 10px; }
.pie .marca { font-size: 22px; }
.pie-arriba { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--borde); border-radius: 50%; text-decoration: none; color: var(--menta); }

/* Revelado progresivo: contenido visible por defecto si JS no está disponible. */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.65,.3,1); }
.revelar.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .barra { gap: 12px; }
  .menu a { font-size: 12px; padding: 9px 8px; }
  .portada { gap: 38px; }
  .robot { font-size: 15px; }
  .etiqueta-uno { right: -8px; }
  .etiqueta-dos { left: -12px; }
  .personajes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ascii-tarjeta .mini-ascii { font-size: 32px; }
  .ascii-etiqueta { font-size: 11px; }
  .ascii-tarjeta .tipo { font-size: 11px; }
  .dividida { gap: 35px; }
}
@media (max-width: 800px) {
  .barra { flex-wrap: wrap; min-height: 74px; padding-inline: 20px; }
  .menu { flex-basis: 100%; flex-wrap: wrap; }
  .menu a:last-child { margin-left: 0; }
  .con-menu .menu-boton { display: flex; }
  .con-menu .menu { display: none; position: absolute; top: 100%; inset-inline: 0; padding: 12px 20px 20px; background: var(--fondo); border-bottom: 1px solid var(--borde); }
  .con-menu .menu.abierto { display: flex; flex-direction: column; align-items: stretch; }
  .con-menu .menu a { font-size: 15px; padding: 12px; }
  .portada { grid-template-columns: 1fr; gap: 25px; padding-top: 55px; padding-bottom: 50px; }
  .portada-texto { max-width: 600px; }
  h1 { font-size: clamp(60px, 11vw, 86px); }
  .portada-personaje { width: min(420px, 100% - 20px); justify-self: center; margin-top: 25px; }
  .robot { font-size: 17px; }
  .seccion { padding-top: 78px; }
  .cabecera-seccion { flex-direction: column; align-items: flex-start; gap: 0; }
  .cabecera-seccion .intro { max-width: 58ch; margin-bottom: 0; }
  .flujo-escritorio { display: none; }
  .flujo-movil { display: block; max-width: 430px; margin-inline: auto; }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { gap: 22px; }
  .pasos h3 { font-size: 20px; }
  .pasos p { font-size: 13px; }
  .dividida { grid-template-columns: 1fr; }
  .dividida .marcador { max-width: 600px; width: 100%; }
  .maquina { padding: 18px; }
  .enlace { flex-basis: 50px; }
  .enlace span { font-size: 8px; }
  .pie { gap: 24px; flex-wrap: wrap; }
  .pie > div { flex-basis: calc(100% - 75px); order: 3; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 92px; }
  .seccion, .portada, .cierre, .pie { width: calc(100% - 36px); }
  .barra { padding-inline: 18px; }
  .marca { font-size: 25px; }
  .logo { width: 39px; height: 33px; }
  .portada { padding-top: 39px; }
  .sobre { font-size: 9px; letter-spacing: .035em; gap: 7px; }
  h1 { margin-top: 23px; font-size: clamp(58px, 12.8vw, 76px); }
  .bajada { font-size: 16px; margin-top: 24px; }
  .acciones { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 25px; }
  .boton { min-height: 52px; justify-content: space-between; }
  .nota-portada { font-size: 10px; }
  .portada-personaje { width: calc(100% - 12px); max-width: 390px; padding-inline: 7px; }
  .pantalla { transform: rotate(-2deg); }
  .robot { font-size: clamp(13px, 3.9vw, 17px); }
  .robot-escena { min-height: 236px; }
  .pantalla-barra { padding: 14px; font-size: 9px; }
  .pantalla-pie { padding: 12px; font-size: 8px; }
  .etiqueta-flotante { font-size: 10px; padding: 10px; }
  .etiqueta-uno { top: 70px; right: -6px; }
  .etiqueta-dos { left: -6px; bottom: 60px; }
  .orbita { inset-inline: -2%; }
  .portada-personaje::before { inset-inline: 0; }
  .banda > div { width: calc(100% - 36px); font-size: 9px; letter-spacing: .02em; gap: 10px; padding-block: 17px; }
  .banda i { display: none; }
  .banda span:last-child { flex-basis: 100%; }
  .ceja { font-size: 10px; margin-bottom: 15px; }
  .intro { font-size: 16px; margin-top: 18px; }
  .seccion h2 { font-size: clamp(33px, 7.7vw, 44px); }
  .video { margin-top: 26px; border-radius: 8px; }
  .video figcaption { font-size: 9px; padding: 12px; flex-direction: column; gap: 4px; }
  .diagrama { margin-top: 26px; }
  .diagrama-cabecera { padding: 17px; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 10px; }
  .flujo-escritorio { display: none; }
  .flujo-movil { display: block; padding: 18px 6px 0; }
  .flujo .svg-detalle { font-size: 13px; }
  .flujo .svg-etiqueta { font-size: 10px; }
  .diagrama-pie { text-align: left; padding: 10px 18px 20px; align-items: baseline; font-size: 11px; }
  .pasos { grid-template-columns: 1fr; margin-top: 24px; gap: 14px; }
  .pasos li { display: grid; grid-template-columns: 32px 1fr; column-gap: 16px; padding-block: 22px 7px; }
  .numero { padding-top: 4px; }
  .pasos h3 { margin: 0; font-size: 22px; }
  .pasos p { grid-column: 2; font-size: 14px; margin-top: 10px; }
  .marcador.ancho img { aspect-ratio: 16 / 7; object-fit: contain; }
  .marcador figcaption { padding: 13px; font-size: 10px; }
  .tarjetas, .tarjetas.dos { grid-template-columns: 1fr; gap: 12px; margin-top: 27px; }
  .tarjeta { padding: 23px; }
  .tarjeta h3 { margin-top: 19px; font-size: 21px; }
  .tarjeta p { font-size: 15px; }
  .personajes { grid-template-columns: 1fr; gap: 22px; margin-top: 27px; }
  .personaje-texto { padding: 23px; }
  .personaje h3 { font-size: 23px; }
  .personaje p { font-size: 15px; }
  .ascii-tarjeta .mini-ascii { font-size: 30px; }
  .ascii-tarjeta { padding: 25px 10px; }
  .dividida p:not(.ceja) { margin-top: 20px; }
  .maquinas { flex-direction: column; margin-top: 27px; }
  .maquina { padding: 24px; }
  .maquina b { margin-top: 10px; }
  .maquina small { margin-bottom: 17px; font-size: 14px; }
  .enlace { min-height: 62px; flex-basis: 62px; }
  .enlace::before { inset: 0 auto 0 50%; border-top: 0; border-left: 1px dashed #82988b; }
  .enlace span { font-size: 9px; }
  .seguridad { grid-template-columns: 1fr; margin-top: 27px; }
  .seguridad li { gap: 17px; padding-block: 24px; }
  .seguridad p { font-size: 15px; }
  .cierre { padding-block: 85px 75px; }
  .cierre h2 { font-size: clamp(50px, 12.5vw, 70px); }
  .cierre .ceja { font-size: 9px; letter-spacing: .1em; }
  .cierre .boton { margin-top: 5px; min-width: 245px; }
  .pie { padding-top: 27px; }
  .pie > div { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
  .boton:hover, .tarjeta:hover { transform: none; }
  .pulsos { display: none; }
  .nodo .nodo-destello { opacity: 0; }
}
/* Al ocultar la pestaña, también descansan las animaciones CSS. */
.pagina-pausada *, .pagina-pausada *::before, .pagina-pausada *::after { animation-play-state: paused !important; }
.movimiento-controlado .portada-personaje:not(.en-vista)::before,
.movimiento-controlado .portada-personaje:not(.en-vista) * { animation-play-state: paused; }