/* Quantico Systems · portada.css. Sin build: este archivo es la fuente de verdad.
   Capas: base (tokens, respaldos de fuente, reset) · componentes (A.6, cabecera, pie, flotante)
   · secciones (fragmentos) · movimiento (todo lo animado y prefers-reduced-motion). */
@layer base, componentes, secciones, movimiento;
@layer base {
/* Tokens literales de ESPEC §A.3 (allí están los contrastes WCAG y el porqué de cada valor) */
:root {
  --negro: #000000;
  --carbon: #141415;
  --grafito: #343233;
  --gris-logo: #757575;
  --acero: #5C6168;
  --niebla: #A9AFB6;
  --papel: #F4F4F1;
  --blanco: #FFFFFF;
  --termico: #FBFAF6;
  --linea-c: #D9DCE0;
  --linea-o: #2A2A2C;
  --apagado-o: #2B2A2B;
  --senal: #007BFF;
  --senal-texto: #0062CC;
  --senal-claro: #4DA3FF;
  --senal-luz: #8FC4FF;
  --display: 'Montserrat', 'QS Display Roboto', 'QS Display Arial', sans-serif;
  --cuerpo: 'IBM Plex Sans', 'QS Texto Roboto', 'QS Texto Arial', sans-serif;
  --dato: 'IBM Plex Mono', ui-monospace, 'Roboto Mono', Consolas, monospace;
  --t-h1: clamp(2.125rem, 1.35rem + 3.9vw, 4.75rem);
  --t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --t-h3: clamp(1.125rem, 1.02rem + .5vw, 1.5rem);
  --t-regla: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  --t-estado: clamp(1.25rem, .9rem + 2.2vw, 2.75rem);
  --t-lead: 1.1875rem;
  --t-cuerpo: 1.0625rem;
  --t-micro: .9375rem;
  --t-dato: .875rem;
  --t-rotulo: .8125rem;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --ancho: 1200px;
  --margen: 16px;
  --cab-h: 56px;
  --sec-y: 64px;
  --ease-senal: cubic-bezier(.16, .84, .24, 1);
  --ease-maquina: cubic-bezier(.7, 0, .3, 1);
  --dur-toque: 120ms;
  --dur-ui: 200ms;
  --dur-estado: 320ms;
  --dur-imprime: 420ms;
  --dur-arco: 600ms;
  --dur-pulso: 1100ms;
  --diag-skew: 36.2deg;
}
@media (min-width: 768px) { :root { --margen: 24px; --sec-y: 88px; } }
@media (min-width: 1024px) { :root { --cab-h: 64px; } }
@media (min-width: 1140px) { :root { --margen: 32px; --sec-y: 112px; } }
.sec--negro, .cab, .pie, .esc { --fondo: var(--negro); --superficie: var(--carbon); --tinta: var(--blanco); --tinta-2: var(--niebla); --linea: var(--linea-o); --enlace: var(--senal-claro); --q-anillo: #FFFFFF; --q-barra: var(--senal); --q-tinta: #FFFFFF; --q-tinta-2: var(--niebla); background: var(--fondo); color: var(--tinta); }
.sec--papel, .sec--blanco { --fondo: var(--papel); --superficie: var(--blanco); --tinta: var(--grafito); --tinta-2: var(--acero); --linea: var(--linea-c); --enlace: var(--senal-texto); --q-anillo: var(--grafito); --q-barra: var(--senal); --q-tinta: var(--grafito); --q-tinta-2: var(--gris-logo); background: var(--fondo); color: var(--tinta); }
.sec--blanco { --fondo: var(--blanco); --superficie: var(--papel); }
@font-face { font-family: 'QS Display Roboto'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 800; size-adjust: 118.78%; ascent-override: 81.50%; descent-override: 21.13%; line-gap-override: 0%; }
@font-face { font-family: 'QS Display Arial'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 800; size-adjust: 111.43%; ascent-override: 86.87%; descent-override: 22.53%; line-gap-override: 0%; }
@font-face { font-family: 'QS Texto Roboto'; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 100.61%; ascent-override: 101.88%; descent-override: 27.33%; line-gap-override: 0%; }
@font-face { font-family: 'QS Texto Arial'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%; }
*, ::before, ::after { box-sizing: border-box; }
[hidden]:not([hidden='until-found']) { display: none !important; }
html { color-scheme: light; scroll-padding-top: calc(var(--cab-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--blanco); color: var(--grafito); overflow-x: clip; font: 400 var(--t-cuerpo)/1.55 var(--cuerpo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; color: inherit; }
h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
h1 > span { display: block; margin-top: .35em; font-size: .5em; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; }
p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; }
a { color: var(--enlace, var(--senal-texto)); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--senal); outline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select, textarea { border-radius: 2px; }
svg { flex-shrink: 0; }
}
@layer componentes {
.wrap { max-width: calc(var(--ancho) + 2 * var(--margen)); padding-inline: var(--margen); margin-inline: auto; }
.sec { padding-block: var(--sec-y); }
/* U6 · rendimiento: lo lejano no se maqueta ni se pinta hasta acercarse; «auto» recuerda el alto ya medido. */
main > .sec, .pie { content-visibility: auto; contain-intrinsic-size: none auto 1600px; }
/* U6 · al ir a un ancla (en frío o desde el menú) lo anterior se maqueta de verdad: el destino no salta. */
main > .sec:has(~ :target, ~ * :target) { content-visibility: visible; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.salto { position: absolute; left: 12px; top: -200px; z-index: 100; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--blanco); color: var(--negro); font: 700 16px/1.2 var(--display); text-decoration: none; }
.salto:focus { top: 12px; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* U6 · iconos decorativos por máscara CSS (mismos trazos del sprite): unos 260 elementos menos en el DOM. */
html { --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --i-persona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.9 3.1-6.5 7-6.5s7 2.6 7 6.5'/%3E%3C/svg%3E"); --i-lapiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.5-1 10-10-3.5-3.5-10 10zM13.5 7l3.5 3.5'/%3E%3C/svg%3E"); --i-apagado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v7M7.5 7a7 7 0 1 0 9 0M4 4l16 16'/%3E%3C/svg%3E"); --i-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --i-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); --i-buscar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.q { display: block; aspect-ratio: 1; }
.rotulo { margin: 0 0 var(--e-4); font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
/* U6 · .clave: por debajo de 768 px se parte y la marca es un subrayado de señal; desde 768, barra a 53,8°. */
.clave { position: relative; z-index: 0; text-decoration: underline var(--senal) .18em; text-underline-offset: -.02em; text-decoration-skip-ink: none; }
@media (min-width: 768px) {
  .clave { white-space: nowrap; text-decoration: none; }
  .clave::after { content: ''; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .04em; height: .18em; background: var(--senal); transform: skewX(var(--diag-skew)); transform-origin: 0 50%; }
}
.lead { max-width: 46ch; font-size: var(--t-lead); line-height: 1.45; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; font: 700 16px/1.2 var(--display); text-decoration: none; text-align: left; border: 1.5px solid transparent; border-radius: 0; background: transparent; color: var(--tinta); cursor: pointer; transition: background-color var(--dur-toque), color var(--dur-toque), border-color var(--dur-toque); }
.btn > .i { margin-right: 10px; }
.btn--p { background: var(--senal); border-color: var(--senal); color: var(--negro); }
.btn--p:hover { background: var(--senal-claro); border-color: var(--senal-claro); }
.btn--p::after { content: ''; flex: none; width: 8px; height: 1.1em; margin-left: 12px; background: currentColor; transform: skewX(var(--diag-skew)); transition: transform var(--dur-toque) var(--ease-senal); }
.btn--p:hover::after, .btn--p:focus-visible::after { transform: translateX(3px) skewX(var(--diag-skew)); }
.btn--s { border-color: var(--tinta); color: var(--tinta); }
.btn--s:hover { background: var(--tinta); color: var(--fondo); }
.estados { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.estado { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; padding: 3px 8px; vertical-align: middle; font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: 0; text-transform: none; text-align: left; color: var(--tinta); border: 1.5px solid var(--linea); background: transparent; }
.estado--construido::after, .estado--contigo::after, .estado--persona::after, .estado--apagado::after, .estado--no-disponible::after, .dm-ir::before, .esc-fin a::after, .dm-mas a::after, .qc-ir a::after, .ct-sino li::before, #preguntas summary::after, .buscar::before { content: ''; flex: none; width: 20px; height: 20px; background: currentColor; mask: var(--ico) center / contain no-repeat; }
.dm-ir, .esc-fin a, .dm-mas a, .qc-ir a { --ico: var(--i-flecha); }
.estado--construido { --ico: var(--i-check); }
.estado--contigo { --ico: var(--i-lapiz); }
.estado--persona { --ico: var(--i-persona); }
.estado--apagado, .estado--no-disponible { --ico: var(--i-apagado); }
.estado--construido::after, .estado--contigo::after, .estado--persona::after, .estado--apagado::after, .estado--no-disponible::after { order: -1; width: 16px; height: 16px; }
.estado--construido { background: var(--senal); border-color: var(--senal); color: var(--negro); }
.estado--piezas { border-color: var(--enlace); }
.estado--prototipo { border-style: dashed; border-color: var(--tinta); }
.estado--contigo { border-style: dotted; border-color: var(--tinta); }
.estado--simuladores { border-style: dashed; border-color: var(--senal); color: var(--tinta); }
.estado--persona { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.estado--apagado, .estado--no-disponible { border-color: var(--linea); color: var(--tinta-2); }
.estado--no-fiscal { border: 3px double var(--tinta); text-transform: uppercase; letter-spacing: .04em; }
.estado--simulacion { border-style: dotted; border-color: var(--tinta); text-transform: uppercase; letter-spacing: .04em; }
.estado--neutro { border-width: 1px; border-color: var(--linea); }
.estado--contigo::before, .estado--apagado::before, .estado--no-disponible::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background: repeating-linear-gradient(126.2deg, currentColor 0 1px, transparent 1px 7px); }
.estado--no-disponible::before { opacity: .2; }
.desp { border-block: 1px solid var(--linea); }
.desp + .desp { border-top: 0; }
.desp > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 48px; padding-block: var(--e-2); cursor: pointer; list-style: none; font: 700 16px/1.3 var(--display); color: var(--tinta); }
.desp > summary::-webkit-details-marker { display: none; }
.desp > summary::after { content: ''; flex: none; width: 20px; height: 20px; background: currentColor; mask: var(--i-chev) center / contain no-repeat; transition: transform var(--dur-ui) var(--ease-maquina); }
.desp[open] > summary::after { transform: rotate(180deg); }
.desp-in { padding-bottom: var(--e-5); }
.chips { display: flex; gap: 8px; margin: 0; padding: 4px 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; overscroll-behavior-x: contain; }
.chips > li { flex: none; }
@media (min-width: 768px) { .chips { flex-wrap: wrap; overflow-x: visible; } }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; scroll-snap-align: start; font: 600 15px/1.2 var(--display); white-space: nowrap; text-decoration: none; color: var(--tinta); background: transparent; border: 1.5px solid var(--linea); border-radius: 0; cursor: pointer; transition: background-color var(--dur-toque), color var(--dur-toque), border-color var(--dur-toque); }
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed='true'], .chip[aria-current='true'] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.num-k { display: inline-block; inline-size: 2.4ch; font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; contain: layout paint; }
.cab { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--linea); }
.cab-in { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cab-h); }
.marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; color: inherit; }
.marca-logo { display: block; width: 86px; height: 32px; }
.menu-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: inherit; border: 1.5px solid var(--linea); border-radius: 0; }
.menu { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0 var(--margen) var(--e-4); list-style: none; background: var(--negro); border-bottom: 1px solid var(--linea); }
.menu.abierto { display: block; }
.menu a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--linea); font: 600 1.0625rem/1.2 var(--display); color: var(--tinta); text-decoration: none; }
.menu a:hover { color: var(--senal-claro); }
.cab-wa { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.cab-wa > .i { margin: 0; }
.cab-wa::after { content: none; }
.cab-wa-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Selector de idioma (ES / EN): dos enlaces reales de 44 × 44; el actual va subrayado en señal. */
.cab-idioma { display: flex; }
.cab-idioma a { display: grid; place-items: center; min-width: 44px; min-height: 44px; font: 500 var(--t-rotulo)/1 var(--dato); letter-spacing: .08em; color: var(--tinta-2); text-decoration: none; }
.cab-idioma a + a { border-left: 1px solid var(--linea); }
.cab-idioma a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 6px; }
.cab-idioma a[aria-current] { color: var(--tinta); text-decoration: underline 2px var(--senal); text-underline-offset: 6px; }
@media (min-width: 768px) {
  .cab-wa { width: auto; min-height: 44px; padding: 0 16px; }
  .cab-wa > .i { margin-right: 10px; }
  .cab-wa::after { content: ''; }
  .cab-wa-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
}
@media (min-width: 1024px) {
  .marca-logo { width: 107px; height: 40px; }
  .menu-b { display: none; }
  .menu { display: flex; position: static; gap: 2px; padding: 0; background: none; border: 0; }
  .menu a { min-height: 44px; padding: 0 12px; border: 0; font-size: .9375rem; white-space: nowrap; }
}
/* Con el selector de idioma, entre 1024 y 1199 px la cabecera en español no cabe: menos aire en el menú y sin la barrita del botón. */
@media (min-width: 1024px) and (max-width: 1199.98px) { .menu a { padding: 0 8px; } .cab-wa::after { content: none; } }
html:not(.js) .cab { position: static; }
html:not(.js) .cab-in { flex-wrap: wrap; }
html:not(.js) .nav { order: 3; flex-basis: 100%; }
html:not(.js) .menu-b { display: none; }
html:not(.js) .menu { display: flex; flex-wrap: wrap; gap: 0 4px; position: static; padding: 0 0 var(--e-2); background: none; border: 0; }
html:not(.js) .menu a { min-height: 44px; padding: 0 8px; border: 0; font-size: .9375rem; }
@media (min-width: 1024px) { html:not(.js) .nav { order: 0; flex-basis: auto; } html:not(.js) .menu { padding: 0; } }
.pie { padding-block: var(--e-8) var(--e-7); border-top: 1px solid var(--linea); font-size: var(--t-micro); line-height: 1.45; }
.pie p { color: var(--tinta-2); }
.pie-g { display: grid; gap: var(--e-6); }
.pie-logo { display: block; width: 107px; height: 40px; margin-bottom: var(--e-4); }
.pie .pie-lema { color: var(--tinta); }
.pie-h { margin: 0 0 var(--e-2); font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; }
.pie-l { margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.pie-l a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--tinta); text-decoration: none; }
.pie-l a:hover { color: var(--senal-claro); text-decoration: underline; }
.pie-nav .pie-l { columns: 2; column-gap: var(--e-5); }
.pie-nav .pie-l li { break-inside: avoid; }
.pie-legal { max-width: 72ch; margin-top: var(--e-7); }
.pie-legal a { color: var(--tinta); }
.pie-marcas { max-width: 72ch; margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.pie .pie-c { margin-top: var(--e-3); font-family: var(--dato); font-size: var(--t-rotulo); }
@media (min-width: 768px) { .pie-g { grid-template-columns: 1fr 1fr; } .pie-nav { grid-column: 1 / -1; } }
@media (min-width: 1140px) { .pie-g { grid-template-columns: 4fr 3fr 5fr; } .pie-nav { grid-column: auto; } }
.flota { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; background: var(--senal); color: var(--negro); border-radius: 0; text-decoration: none; font: 700 15px/1.2 var(--display); transition: opacity var(--dur-ui) var(--ease-maquina), transform var(--dur-ui) var(--ease-senal), visibility var(--dur-ui), background-color var(--dur-toque); }
.flota:hover { background: var(--senal-claro); }
.flota[data-oculto] { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; }
html:not(.js) .flota[data-oculto] { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
@media (min-width: 1140px) {
  .flota { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .fl-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
}
@layer secciones {
/* ===== escena ===== */
.esc { padding-block: var(--e-6) var(--sec-y); }
.esc-in { display: grid; row-gap: var(--e-8); }
.esc-in > * { min-width: 0; }
#inicio .rotulo { margin: 0 0 var(--e-3); }
#inicio h1 { margin: 0 0 var(--e-4); max-width: 17ch; }
#inicio h1 span { display: block; font-weight: 500; font-size: .5em; line-height: 1.2; letter-spacing: 0; margin-top: .35em; max-width: 34ch; }
#inicio .lead { margin: 0 0 var(--e-4); max-width: 46ch; }
.esc-nodo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-5); font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
.esc-cta { display: flex; flex-direction: column; gap: var(--e-3); }
.esc-cta .btn { width: 100%; justify-content: center; }
.esc-micro { margin: var(--e-2) 0 0; max-width: 62ch; font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
.esc-cta + .esc-micro { margin-top: var(--e-4); }
@media (min-width: 560px) { .esc-cta { flex-direction: row; flex-wrap: wrap; } .esc-cta .btn { width: auto; } }
.esc-sel { margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.esc-preg { margin: 0 0 var(--e-3); font: 700 var(--t-h3)/1.2 var(--display); }
.esc-chips { display: flex; flex-wrap: nowrap; gap: var(--e-2); list-style: none; margin: 0 calc(-1 * var(--margen)); padding: var(--e-2) var(--margen) var(--e-3); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--margen); }
.esc-chips li { flex: none; scroll-snap-align: start; }
.esc-chips .chip { white-space: nowrap; }
@media (min-width: 768px) { .esc-chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; } }
/* U6 · la ficha reserva alto (CLS 0 con ?rubro=) solo desde 768 px; por debajo queda bajo el pliegue al cargar. */
.esc-ficha { margin-top: var(--e-4); padding: var(--e-4); border: 1px solid var(--linea); background: var(--superficie); }
@media (min-width: 768px) { .esc-ficha { min-block-size: 17.5rem; } }
.esc-ficha p { margin: 0 0 var(--e-3); max-width: 62ch; }
.esc-ficha-vacia { color: var(--tinta-2); }
.esc-ficha:has(> .esc-ficha-vacia) { display: grid; align-content: center; border-style: dashed; background: transparent; }
.esc-ficha-vacia .esc-ficha-flecha { margin: 0 0 var(--e-3); font: 700 var(--t-h3)/1.2 var(--display); color: var(--tinta); }
.esc-ficha-vacia .esc-ficha-flecha span { color: var(--senal); }
.esc-ficha-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); counter-reset: fv; }
.esc-ficha-lista li { counter-increment: fv; display: flex; gap: var(--e-3); align-items: baseline; }
.esc-ficha-lista li::before { content: counter(fv, decimal-leading-zero); font: 500 .8125rem/1 var(--dato); color: var(--senal); }
.esc-ficha .esc-ficha-t { font: 700 var(--t-h3)/1.2 var(--display); }
.esc-ficha .esc-ficha-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); margin: var(--e-4) 0 0; }
.esc-ficha-acc a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.esc-fig { margin: 0; display: grid; justify-items: start; gap: var(--e-3); align-content: start; }
.esc-cap { margin: 0; }
.esc-qcaja { position: relative; aspect-ratio: 1; inline-size: min(78vw, 320px); justify-self: center; }
.esc-q { display: block; inline-size: 100%; block-size: 100%; }
.esc-q3d { position: absolute; inset: 0; }
.esc-q3d canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; touch-action: pan-y; }
.esc-q:where(.q3d *) { opacity: 0; }
@media print { .esc-q:where(.q3d *) { opacity: 1; } .esc-q3d { display: none; } }
.esc-q-base { fill: var(--apagado-o); }
.esc-q-est { fill: var(--q-anillo); transition: opacity var(--dur-arco) var(--ease-senal); }
.esc-q-espera { fill: url(#esc-raya); opacity: 0; transition: opacity var(--dur-arco) var(--ease-senal); }
.esc-raya-fondo { fill: var(--apagado-o); }
.esc-raya-linea { fill: var(--q-anillo); }
.esc-q-barra { fill: var(--q-barra); }
.esc-q-pulso { fill: var(--senal-luz); opacity: 0; }
.esc[data-paso="1"] .esc-q-est:not([data-est="1"]), .esc[data-paso="2"] .esc-q-est:is([data-est="3"], [data-est="4"]), .esc[data-paso="3"] .esc-q-est[data-est="4"], .esc[data-paso="4"]:not([data-confirmado]) .esc-q-est[data-est="4"] { opacity: 0; }
.esc[data-paso="4"]:not([data-confirmado]) .esc-q-espera { opacity: 1; }
.esc-palabra { margin: 0; inline-size: 13ch; max-inline-size: 100%; block-size: 2em; overflow: hidden; contain: layout paint; font-family: var(--display); font-weight: 850; font-size: var(--t-estado); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); }
.esc-ticket { inline-size: 100%; max-inline-size: 46ch; padding: var(--e-3) var(--e-4) var(--e-5); background: var(--termico); color: var(--grafito); font: 400 var(--t-dato)/1.5 var(--dato); font-variant-numeric: tabular-nums; mask: radial-gradient(circle at 6px 100%, #0000 4px, #000 4.5px) 0 0 / 12px 100% repeat-x; }
.esc-t { margin: 0; padding-block: var(--e-2); border-top: 1px dashed var(--linea-c); transition: opacity var(--dur-estado) var(--ease-maquina); }
.esc-t span { display: block; }
.esc .esc-t-cab { border-top: 0; padding-top: 0; font-weight: 500; font-size: var(--t-rotulo); letter-spacing: .04em; color: var(--acero); }
.esc .esc-t-pie { margin-top: var(--e-2); padding: var(--e-1) var(--e-2); border: 3px double var(--grafito); font-weight: 500; letter-spacing: .06em; inline-size: fit-content; }
.esc[data-modo="fijo"] .esc-t.pendiente { opacity: .28; }
.esc[data-modo="compacto"] .esc-ticket { display: none; }
.esc .esc-t-antes { display: none; }
.esc[data-modo]:not([data-confirmado]) .esc-t-antes { display: block; }
.esc[data-modo]:not([data-confirmado]) .esc-t-despues { display: none; }
#recorrido .esc-rec-rot { margin: 0 0 var(--e-3); }
#recorrido h2 { margin: 0 0 var(--e-4); font-size: min(var(--t-h2), 8vw); }
#recorrido > .lead { margin: 0 0 var(--e-6); max-width: 46ch; }
.esc-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); }
.esc-paso { padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.esc-paso > .num-k { display: block; font-family: var(--display); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.esc-paso h3 { margin: var(--e-3) 0 var(--e-3); }
.esc-paso p { margin: 0 0 var(--e-3); max-width: 62ch; }
.esc-paso .estados { margin-top: var(--e-3); }
@media (min-width: 768px) {
  .esc-paso { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--e-4); align-content: start; }
  .esc-paso > * { grid-column: 2; }
  .esc-paso > .num-k { grid-column: 1; grid-row: 1 / span 6; font-size: 3.25rem; }
  .esc-paso h3 { margin-top: 0; }
}
.esc-snip { display: none; }
.esc[data-modo="compacto"] .esc-snip { display: block; inline-size: fit-content; max-inline-size: 100%; margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3); background: var(--termico); color: var(--grafito); font: 500 var(--t-dato)/1.5 var(--dato); font-variant-numeric: tabular-nums; }
.esc-hud { display: none; }
.esc[data-modo="compacto"] .esc-hud { display: flex; align-items: center; gap: var(--e-3); position: sticky; top: var(--cab-h); z-index: 10; block-size: 64px; margin: 0 calc(-1 * var(--margen)) var(--e-5); padding-inline: var(--margen); background: var(--negro); border-bottom: 1px solid var(--linea); }
.esc-hud-q { flex: none; inline-size: 48px; block-size: 48px; }
.esc-hud-palabra { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 800 1.125rem/1 var(--display); letter-spacing: .04em; }
.esc-hud-n { flex: none; font: 500 var(--t-rotulo)/1 var(--dato); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.esc-accion { margin-top: var(--e-4); }
.esc-accion .esc-hecho { display: inline-block; margin: 0; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--tinta); font-weight: 600; }
.esc-accion .esc-hecho[hidden] { display: none; }
.esc-hecho:focus-visible, .esc-hecho:focus { outline: 3px solid var(--senal); outline-offset: 3px; }
.esc-fin { margin: var(--e-7) 0 0; }
.esc-fin a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; font-weight: 600; }
/* U6 · compacto: 45svh (C.3 pedía 60) para no dejar 200 px vacíos entre pasos en el móvil. */
.esc[data-modo="compacto"] .esc-paso { min-block-size: 45svh; }
.esc[data-modo="fijo"] .esc-paso { min-block-size: 70svh; }
@media (min-width: 1024px) {
  .esc:not([data-modo="compacto"]) .esc-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-7); align-items: start; }
  .esc:not([data-modo="compacto"]) #inicio { grid-column: 1; grid-row: 1; }
  .esc:not([data-modo="compacto"]) #escenario { grid-column: 2; grid-row: 1; }
  .esc:not([data-modo="compacto"]) #recorrido { grid-column: 1 / -1; grid-row: 2; }
  .esc:not([data-modo="compacto"]) .esc-qcaja { inline-size: min(100%, 440px); }
  .esc:not([data-modo]) .esc-pasos, .esc[data-modo="quieto"] .esc-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-7); }
  .esc[data-modo="fijo"] #recorrido { grid-column: 1; }
  .esc[data-modo="fijo"] #escenario { grid-row: 1 / 3; position: sticky; top: calc(var(--cab-h) + 24px); align-self: start; gap: var(--e-2); }
  .esc[data-modo="fijo"] .esc-qcaja { inline-size: min(40vw, 480px, 100%, calc(100svh - 480px)); }
  .esc[data-modo="fijo"] .esc-palabra { inline-size: 100%; block-size: 1.08em; white-space: nowrap; }
  .esc[data-modo="fijo"] .esc-ticket { padding-block: var(--e-2) var(--e-4); line-height: 1.38; }
  .esc[data-modo="fijo"] .esc-t { padding-block: 4px; }
  .esc[data-modo="fijo"] .esc-t-pie { margin-top: var(--e-1); }
}
/* ===== catalogo ===== */
#demos h2, #rubros h2, #que-construimos h2, #nodos-ia h2 { max-width: 22ch; }
#demos .lead, #rubros .lead, #nodos-ia .lead { margin-top: var(--e-5); }
#demos .dms { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--e-3); margin: var(--e-6) calc(-1 * var(--margen)) 0; padding: var(--e-2) var(--margen); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen); overscroll-behavior-x: contain; scrollbar-width: thin; }
#demos .dm { position: relative; display: flex; scroll-snap-align: start; }
#demos .dm-a { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "e e" "ir tuyo"; grid-template-rows: auto 1fr auto; gap: var(--e-4); padding: var(--e-5) var(--e-4) var(--e-3) var(--e-5); min-height: 100%; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); text-decoration: none; transition: border-color var(--dur-toque); }
#demos .dm-a:hover { border-color: var(--tinta); }
#demos .dm-t { grid-area: t; font-size: clamp(1.3125rem, 1.15rem + .8vw, 1.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
#demos .dm-a > .estados { grid-area: e; flex-direction: column; align-items: flex-start; align-self: start; }
#demos .dm-ir { grid-area: ir; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; font: 700 .9375rem/1.2 var(--display); color: var(--enlace); }
#demos .dm-ir::before { order: 1; transition: transform var(--dur-toque) var(--ease-senal); }
#demos .dm-a:hover .dm-ir::before, #demos .dm-a:focus-visible .dm-ir::before { transform: translateX(3px); }
#demos .dm-ir::after { content: ''; order: 2; width: 8px; height: 1.1em; margin-left: var(--e-1); background: currentColor; transform: skewX(var(--diag-skew)); transition: transform var(--dur-toque) var(--ease-senal); }
#demos .dm-a:hover .dm-ir::after, #demos .dm-a:focus-visible .dm-ir::after { transform: translateX(3px) skewX(var(--diag-skew)); }
#demos .dm-tuyo { grid-area: tuyo; align-self: center; }
#demos .dm--tuyo .dm-a { border-color: var(--tinta); }
#demos .dm--tuyo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--senal); pointer-events: none; }
#demos .dm-nota { max-width: 62ch; margin: var(--e-5) 0 var(--e-2); font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
#demos .dm-mas a, #que-construimos .qc-ir a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; font: 700 .9375rem/1.2 var(--display); color: var(--enlace); }
@media (min-width: 768px) {
  #demos .dms { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--e-4); margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  #demos .dm-a { padding: var(--e-6) var(--e-5) var(--e-4) var(--e-6); }
}
@media (min-width: 1140px) { #demos .dms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); } }
#rubros .rb-ley { display: grid; gap: var(--e-5); margin: var(--e-6) 0 0; }
#rubros .rb-ley dt { margin: 0; }
#rubros .rb-ley dd { margin: var(--e-2) 0 0; max-width: 46ch; font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
@media (min-width: 768px) { #rubros .rb-ley { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-6); } }
@media (min-width: 1140px) { #rubros .rb-ley { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#rubros .rb-busca { max-width: 640px; margin-top: var(--e-7); }
#rubros .buscar { position: relative; }
#rubros .buscar { --ico: var(--i-buscar); }
#rubros .buscar::before { position: absolute; left: 16px; top: 17px; background: var(--tinta-2); pointer-events: none; }
#rubros .buscar input { width: 100%; min-height: 54px; padding: 0 16px 0 48px; font: 400 1.0625rem var(--cuerpo); color: var(--tinta); background: var(--superficie); border: 1.5px solid var(--tinta-2); -webkit-appearance: none; appearance: none; }
#rubros .buscar input::placeholder { color: var(--tinta-2); opacity: 1; }
#rubros .buscar input:focus { border-color: var(--tinta); }
#rubros .cuenta { margin: var(--e-3) 0 0; font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
html:not(.js) #rubros .rb-buscar { display: none; }
#rubros .otros { margin-top: var(--e-5); }
#rubros .otros > summary { font-size: 1.0625rem; }
#rubros .filtros { display: grid; gap: var(--e-2); padding-top: var(--e-3); margin-bottom: var(--e-4); }
html:not(.js) #rubros .filtros { display: none; }
#rubros .rb-chips { align-items: center; }
#rubros .rb-rot { flex: none; margin-right: var(--e-1); font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
#rubros .grupo { padding: var(--e-5) 0 var(--e-1); border-top: 1px solid var(--tinta); }
#rubros .grupo-t { margin: 0 0 var(--e-2); font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
@media (min-width: 1024px) {
  #rubros .grupo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--e-7); padding-top: 0; }
  #rubros .grupo-t { position: sticky; top: calc(var(--cab-h) + var(--e-4)); align-self: start; padding-top: var(--e-5); }
}
#rubros .rubros { margin: 0; padding: 0; list-style: none; }
#rubros .rubro { border-bottom: 1px solid var(--linea); }
#rubros .rubro:last-child { border-bottom: 0; }
#rubros .r-h { margin: 0; font: inherit; }
#rubros .r-btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "nom chev" "tag chev" "lema lema"; gap: var(--e-2) var(--e-3); align-items: center; min-height: 64px; padding: var(--e-5) 2px; text-align: left; background: transparent; border: 0; color: var(--tinta); font: inherit; }
#rubros .r-btn:focus-visible { outline-offset: -3px; }
#rubros .r-nom { grid-area: nom; font: 700 1.125rem/1.25 var(--display); letter-spacing: -.01em; }
#rubros .r-btn:hover .r-nom { color: var(--enlace); }
#rubros .r-btn > .estados { grid-area: tag; }
#rubros .r-lema { grid-area: lema; font-size: var(--t-micro); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
#rubros .r-btn::after { content: ''; grid-area: chev; width: 22px; height: 22px; background: var(--tinta-2); mask: var(--i-chev) center / contain no-repeat; transition: transform var(--dur-ui) var(--ease-maquina); }
#rubros .r-btn[aria-expanded="true"]::after { transform: rotate(180deg); background: var(--tinta); }
html:not(.js) #rubros .r-btn::after { display: none; }
@media (min-width: 900px) {
  #rubros .r-btn { grid-template-columns: minmax(170px, .9fr) minmax(0, 1.5fr) 180px 28px; grid-template-areas: "nom lema tag chev"; gap: var(--e-5); }
  #rubros .r-btn > .estados { flex-direction: column; align-items: flex-start; }
}
#rubros .r-in { padding: var(--e-1) 2px var(--e-6); }
#rubros .r-in dl { display: grid; gap: var(--e-5); margin: 0; }
#rubros .r-in dl > div { display: grid; gap: var(--e-1); }
#rubros .r-in dt { padding-top: 3px; font: 500 var(--t-rotulo)/1.4 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--enlace); }
#rubros .r-in dd { margin: 0; max-width: 66ch; }
#rubros .r-in .nota { display: block; margin-bottom: var(--e-1); font: 500 var(--t-rotulo)/1.4 var(--dato); color: var(--tinta-2); }
@media (min-width: 720px) { #rubros .r-in dl > div { grid-template-columns: 168px minmax(0, 1fr); gap: var(--e-5); } }
#rubros .rb-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin: var(--e-5) 0 0; }
#rubros .rb-demo { display: inline-flex; align-items: center; min-height: 44px; font: 700 .9375rem/1.2 var(--display); color: var(--enlace); }
#rubros .vacio { padding: var(--e-6) 0; border-top: 1px solid var(--tinta); }
#rubros .vacio p { margin-bottom: var(--e-4); font: 700 1.25rem/1.25 var(--display); letter-spacing: -.01em; }
#rubros .vacio .btn { margin: 0 var(--e-3) var(--e-3) 0; }
#rubros .rb-cierre { display: grid; gap: var(--e-4); justify-items: start; margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--tinta); }
#rubros .rb-cierre p { max-width: 40ch; margin: 0; font: 700 1.25rem/1.3 var(--display); letter-spacing: -.01em; }
@media (min-width: 1024px) { #rubros .rb-cierre { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-6); } }
#problema.qc-problema { max-width: 760px; margin: var(--e-6) 0 var(--e-7); padding: var(--e-4) var(--e-4) var(--e-5); background: var(--superficie) repeating-linear-gradient(to bottom, transparent 0 27px, var(--linea) 27px 28px); line-height: 28px; }
#problema .qc-rot { margin: 0; font: 500 var(--t-rotulo)/28px var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
#problema blockquote { margin: 0; }
#problema blockquote p { margin: 0; font: 600 1.1875rem/28px var(--display); letter-spacing: -.01em; }
#problema .qc-linea { max-width: 58ch; margin: 28px 0 0; line-height: 28px; }
@media (min-width: 768px) { #problema.qc-problema { padding: var(--e-5) var(--e-6) var(--e-6); } #problema blockquote p { font-size: 1.375rem; } }
#que-construimos .qc-filas { border-bottom: 1px solid var(--linea); }
#que-construimos .qc-fila { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--e-4); padding: var(--e-6) 0; border-top: 1px solid var(--linea); }
#que-construimos .qc-fila > .num-k { font-size: 2.5rem; color: var(--tinta); }
#que-construimos .qc-cuerpo { max-width: 760px; }
#que-construimos .qc-cuerpo h3 { margin-bottom: var(--e-2); }
#que-construimos .qc-cuerpo > p { max-width: 62ch; }
#que-construimos .qc-cuerpo > .estados { margin: var(--e-3) 0 var(--e-4); }
#que-construimos .qc-cuerpo > .estados:last-child { margin-bottom: 0; }
#que-construimos .qc-ir { margin: 0; }
#que-construimos .qc-desp .desp-in ul { margin: 0 0 var(--e-4); padding-left: 1.1em; }
#que-construimos .qc-desp .desp-in li { margin-bottom: var(--e-2); max-width: 66ch; }
#que-construimos .qc-desp .desp-in p { max-width: 66ch; font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
#que-construimos .qc-cta { margin: var(--e-7) 0 0; }
@media (min-width: 768px) { #que-construimos .qc-fila { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e-5); } #que-construimos .qc-fila > .num-k { font-size: 3.5rem; } }
#nodos-ia .nd-regla { max-width: 16ch; margin: var(--e-7) 0 0; font: 800 var(--t-regla)/.98 var(--display); letter-spacing: -.02em; }
#nodos-ia .nd-regla span { color: var(--senal-claro); }
#nodos-ia .nd-barra { align-items: center; margin-top: var(--e-5); }
#nodos-ia .nd-hecho { font-size: var(--t-micro); color: var(--tinta-2); }
#nodos-ia .nd-sub { margin: var(--e-8) 0 var(--e-3); font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
#nodos-ia .nd { border: 1px solid var(--linea); background: var(--fondo); }
#nodos-ia .tabs { display: none; border-bottom: 1px solid var(--linea); }
html.js #nodos-ia .tabs { display: flex; }
#nodos-ia .tab { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; justify-items: start; align-content: center; min-height: 60px; padding: var(--e-2) var(--e-3); background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--tinta-2); font: 600 .9375rem/1.2 var(--display); text-align: left; transition: color var(--dur-toque), border-color var(--dur-toque); }
#nodos-ia .tab small { font: 400 var(--t-rotulo)/1.2 var(--dato); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
#nodos-ia .tab:hover { color: var(--tinta); }
#nodos-ia .tab[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--senal); }
#nodos-ia .tab:focus-visible { outline-offset: -3px; }
@media (min-width: 768px) { #nodos-ia .tab { flex: 0 1 auto; padding-inline: var(--e-5); } }
html.js #nodos-ia .nd-ps { display: grid; }
html.js #nodos-ia .nd-p { grid-area: 1 / 1; }
html.js #nodos-ia .nd-p:not(.sel) { visibility: hidden; }
html:not(.js) #nodos-ia .nd-p + .nd-p { border-top: 1px solid var(--linea); }
#nodos-ia .nd-p { min-width: 0; padding: var(--e-5) var(--e-4) var(--e-6); }
#nodos-ia .nd-p:focus-visible { outline-offset: -3px; }
#nodos-ia .nd-t { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin: 0 0 var(--e-4); }
#nodos-ia .nd-t h4 { margin: 0; font: 500 var(--t-rotulo)/1.4 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
#nodos-ia .nd-t .diseno { display: block; margin-top: var(--e-2); font: 400 var(--t-micro)/1.45 var(--cuerpo); letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
#nodos-ia .nd-p { position: relative; }
#nodos-ia .skip { position: absolute; right: var(--e-4); bottom: var(--e-4); z-index: 1; min-height: 44px; padding: 0 var(--e-4); background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta-2); border-radius: 0; background: var(--fondo); font: 500 var(--t-rotulo)/1 var(--dato); letter-spacing: .08em; text-transform: uppercase; }
#nodos-ia .skip:hover { border-color: var(--tinta); }
#nodos-ia .chat { display: flex; flex-direction: column; gap: var(--e-3); }
#nodos-ia .msg { display: flex; flex-direction: column; gap: var(--e-1); max-width: 90%; }
#nodos-ia .msg.c { align-self: flex-start; }
#nodos-ia .msg.n { align-self: flex-end; align-items: flex-end; }
#nodos-ia .quien { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-rotulo)/1 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
#nodos-ia .msg.n .quien { color: var(--senal-claro); }
/* U6 · avatar del Nodo: la Q de A.2 (anillo blanco, barra de señal) como fondo. */
#nodos-ia .msg.n .quien::before { content: ''; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='127 682 700 700'%3E%3Cpath fill='%23fff' d='M614.1 1320.5A331 331 0 1 1 742.7 1208.1L664.3 1100.8A211 211 0 1 0 541.5 1221.3Z'/%3E%3Cpath fill='%23007BFF' d='M433 1025L574 1025L814 1353L673 1353Z'/%3E%3C/svg%3E") center / contain no-repeat; }
#nodos-ia .msg p { position: relative; margin: 0; padding: 10px 14px; font-size: var(--t-micro); line-height: 1.5; border: 1.5px solid transparent; }
#nodos-ia .msg.c p { background: var(--superficie); border-color: var(--superficie); }
#nodos-ia .msg.n p { border-color: var(--senal); }
#nodos-ia .traza { margin: var(--e-5) 0 0; padding: 2px 0 2px var(--e-4); border-left: 2px solid var(--senal); font: 400 var(--t-rotulo)/1.65 var(--dato); color: var(--tinta-2); }
#nodos-ia .traza b { display: block; margin-bottom: var(--e-1); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--senal-claro); }
#nodos-ia .nd-nota { margin: 0; padding: var(--e-4); border-top: 1px solid var(--linea); font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
@media (min-width: 768px) { #nodos-ia .nd-p { padding: var(--e-6) var(--e-6) var(--e-7); } }
@media (min-width: 1024px) {
  #nodos-ia .nd-p { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "t t" "chat traza"; gap: var(--e-2) var(--e-7); align-items: start; align-content: start; }
  #nodos-ia .nd-p .nd-t { grid-area: t; }
  #nodos-ia .nd-p .chat { grid-area: chat; }
  #nodos-ia .nd-p .traza { grid-area: traza; margin: 0; }
}
html.qs-vivo #nodos-ia .nd-p.anim .msg:not(.on), html.qs-vivo #nodos-ia .nd-p.anim .traza:not(.on) { visibility: hidden; }
html.qs-vivo #nodos-ia .nd-p.sel.anim .msg.n.typing p::before { content: '• • •'; position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 64px; height: 38px; border: 1.5px solid var(--senal); background: var(--fondo); color: var(--senal-claro); font: 500 var(--t-rotulo)/1 var(--dato); visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  html.qs-vivo #nodos-ia .nd-p.anim .msg.on, html.qs-vivo #nodos-ia .nd-p.anim .traza.on { animation: nd-entra var(--dur-estado) var(--ease-senal) both; }
  html.qs-vivo #nodos-ia .nd-p.sel.anim .msg.n.typing p::before { animation: nd-escribe 900ms var(--ease-maquina) infinite alternate; }
}
@keyframes nd-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nd-escribe { from { opacity: .45; } to { opacity: 1; } }
#nodos-ia .nd-lim { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-6) 0 var(--e-4); padding: 0; list-style: none; }
#nodos-ia .nd-lim li { display: flex; max-width: 100%; }
#nodos-ia .nd-desp .nd-mini { margin: var(--e-4) 0 var(--e-2); font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
#nodos-ia .nd-desp .cap { display: grid; gap: var(--e-4); margin: 0 0 var(--e-5); }
#nodos-ia .nd-desp .cap dt { font: 700 1rem/1.3 var(--display); }
#nodos-ia .nd-desp .cap dd { margin: var(--e-1) 0 0; max-width: 66ch; font-size: var(--t-micro); line-height: 1.5; color: var(--tinta-2); }
@media (min-width: 768px) { #nodos-ia .nd-desp .cap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-6); } }
#nodos-ia .nd-desp ul { margin: 0 0 var(--e-5); padding-left: 1.1em; }
#nodos-ia .nd-desp li { margin-bottom: var(--e-2); max-width: 66ch; font-size: var(--t-micro); line-height: 1.5; color: var(--tinta-2); }
#nodos-ia .nd-desp li b { color: var(--tinta); }
#nodos-ia .nd-desp .desp-in > p { max-width: 66ch; }
#nodos-ia .nd-cta { margin: var(--e-6) 0 0; }
/* ===== decision ===== */
.pg-quien, .pg-rot, .ct-rot, .ct-paq, .pg-tabla td::before, .pg-tabla thead th, #preguntas .tema, #cot-cuenta, #cotizador .vista-cab { font: 500 var(--t-rotulo)/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.pg-rot, .ct-rot { margin-bottom: var(--e-2); }
.pg-tabla { width: 100%; margin: 0 0 var(--e-5); border-collapse: collapse; font-size: var(--t-micro); line-height: 1.45; }
.pg-tabla caption, .pg-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pg-tabla, .pg-tabla tbody, .pg-tabla tr, .pg-tabla th, .pg-tabla td { display: block; }
.pg-tabla th, .pg-tabla td { text-align: left; vertical-align: top; font-weight: 400; }
.pg-tabla tr { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.pg-tabla tbody th { margin-bottom: var(--e-1); font: 700 1.0625rem/1.3 var(--display); }
.pg-tabla td { padding: var(--e-1) 0; }
.pg-tabla td::before { content: attr(data-l); display: block; margin-bottom: 2px; }
.pg-tabla td .estado { margin-bottom: var(--e-1); }
@media (min-width: 768px) {
  .pg-tabla { display: table; }
  .pg-tabla thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .pg-tabla tbody { display: table-row-group; }
  .pg-tabla tr { display: table-row; }
  .pg-tabla th, .pg-tabla td { display: table-cell; padding: var(--e-4) var(--e-5) var(--e-4) 0; border-bottom: 1px solid var(--linea); }
  .pg-tabla thead th { padding-bottom: var(--e-3); border-bottom-color: var(--tinta); }
  .pg-tabla tbody th { width: 22%; }
  .pg-tabla td::before { display: none; }
}
.pg-cab, .ct-cab { margin-bottom: var(--e-7); }
.pg-cab h2 { max-width: 20ch; }
.pg-cab .lead, .ct-cab .lead, .cot-cab .lead { margin-top: var(--e-4); }
.pg-cab .pg-pais { margin-top: var(--e-4); }
.pg-pista { display: grid; gap: var(--e-5); margin: 0 0 var(--e-7); padding: 0; list-style: none; }
.pg-paso { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.pg-nodo { position: relative; isolation: isolate; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--tinta); color: var(--fondo); font: 800 1.125rem/1 var(--display); font-variant-numeric: tabular-nums; }
.pg-nodo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tinta); }
.pg-paso:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 48px; width: 4px; height: 20px; background: var(--tinta); transform: skewX(var(--diag-skew)); transform-origin: 50% 0; }
.pg-quien { display: block; margin-bottom: 2px; }
.pg-txt > p { margin: 0; font: 700 1.0625rem/1.3 var(--display); }
.pg-txt > .estados { margin-top: var(--e-2); }
@media (min-width: 768px) {
  .pg-pista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-paso { display: block; }
  .pg-nodo { margin-bottom: var(--e-4); }
  .pg-paso:not(:last-child)::after { left: 52px; right: 0; top: 18px; width: auto; height: 4px; transform-origin: 0 50%; }
}
.pg-met { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-4); margin: 0; padding: 0; list-style: none; }
.pg-m { padding: var(--e-4) 0 var(--e-5); border-top: 1px solid var(--linea); }
.pg-m h3 { font-size: 1.0625rem; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.pg-m .estados { margin: var(--e-3) 0; }
.pg-m-l { margin: 0; font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
@media (min-width: 768px) { .pg-m h3 { font-size: var(--t-h3); } }
@media (min-width: 1024px) { .pg-met { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--e-5); } }
.pg-lineas { max-width: 62ch; margin: var(--e-6) 0; padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.pg-lineas p { margin-bottom: var(--e-3); }
.pg-comp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.pg-desp .desp-in, .ct-desp .desp-in { max-width: 72ch; padding-top: var(--e-3); }
.pg-moneda { margin: 0 0 var(--e-5); }
.pg-moneda > div, .pg-bloque { margin-bottom: var(--e-5); }
.pg-moneda dt { margin-bottom: var(--e-1); font: 700 1.0625rem/1.3 var(--display); }
.pg-moneda dd { margin: 0; }
.pg-bloque h3, .ct-desp h3 { margin: 0 0 var(--e-2); font-size: 1.125rem; }
.pg-no, .ct-datos, .ct-largos { margin: 0 0 var(--e-4); padding-left: 1.2em; }
.pg-no li, .ct-datos li, .ct-largos li { margin-bottom: var(--e-3); }
.pg-cta { margin: var(--e-6) 0 0; }
.ct-cab h2 { max-width: 22ch; }
.ct-pasos { margin: 0 0 var(--e-6); padding: 0; list-style: none; }
.ct-paso { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--e-4); padding-bottom: var(--e-5); }
.ct-paso:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 48px; bottom: 8px; width: 1px; background: var(--linea); }
.ct-paso .num-k { font-size: 2.5rem; }
.ct-txt h3 { margin: 4px 0 var(--e-1); }
.ct-txt p { margin: 0; max-width: 40ch; }
@media (min-width: 1140px) {
  .ct-pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-5); }
  .ct-paso { display: block; padding: var(--e-4) 0 0; border-top: 1px solid var(--linea); }
  .ct-paso:not(:last-child)::before { content: none; }
  .ct-paso .num-k { display: block; margin-bottom: var(--e-4); font-size: 3.25rem; }
}
.ct-lim { max-width: 72ch; margin: 0 0 var(--e-5); padding: 0; list-style: none; }
.ct-lim li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--linea); }
.ct-quien { display: inline-flex; align-items: center; min-height: 44px; }
.ct-desp h3 { margin-top: var(--e-4); }
#comparativa { margin-top: var(--e-8); padding-top: var(--e-7); border-top: 1px solid var(--linea); }
#comparativa > h3 { max-width: 24ch; font-size: calc(var(--t-h3) * 1.3); font-weight: 800; line-height: 1.12; text-wrap: balance; }
.ct-cmp-l { max-width: 62ch; margin: var(--e-4) 0; }
.ct-sino { display: grid; gap: var(--e-5); margin: var(--e-5) 0; }
@media (min-width: 768px) { .ct-sino { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }
#comparativa h4 { margin: 0 0 var(--e-3); padding-bottom: var(--e-2); border-bottom: 1px solid var(--tinta); font: 700 1.0625rem/1.3 var(--display); }
.ct-sino ul { margin: 0; padding: 0; list-style: none; }
.ct-sino li { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-2) 0; }
.ct-sino li::before { margin-top: 2px; }
.ct-si li { --ico: var(--i-check); }
.ct-si li::before { background: var(--enlace); }
.ct-no li { --ico: var(--i-x); }
.ct-paq { display: block; margin-top: var(--e-1); }
.ct-cta { margin: var(--e-7) 0 0; }
#cotizador { color-scheme: dark; }
.cot-cab { margin-bottom: var(--e-6); }
.cot-g { display: grid; grid-template-columns: minmax(0, 1fr); }
.cot-vista { display: none; }
@media (min-width: 960px) {
  .cot-g { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-7); align-items: start; }
  .cot-cab { grid-column: 1 / -1; }
  .cot-vista { display: block; position: sticky; top: calc(var(--cab-h) + var(--e-5)); }
  #cotizador .vista-m { display: none; }
}
#cotizador .sin-js { display: none; }
html:not(.js) #cotizador .sin-js { display: block; }
html:not(.js) #cotizador .form-js { display: none; }
#cotizador .sin-js p { max-width: 52ch; }
#cotizador fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cot-paso > legend { margin-bottom: var(--e-4); padding: 0; font: 700 var(--t-h3)/1.2 var(--display); }
.cot-paso:focus-visible { outline-offset: 8px; }
.cot-sub { margin-top: var(--e-5); }
.cot-sub > legend { margin-bottom: var(--e-3); padding: 0; font-weight: 600; }
#cotizador .op-t { font-weight: 400; color: var(--tinta-2); }
#cotizador .campo { margin-bottom: var(--e-4); }
#cotizador .lbl { display: block; margin-bottom: var(--e-2); font-weight: 600; }
#cotizador .dos-c { display: grid; gap: var(--e-4); }
@media (min-width: 560px) { #cotizador .dos-c { grid-template-columns: 1fr 1fr; } }
#cotizador input[type="text"], #cotizador select, #cotizador textarea { display: block; width: 100%; min-height: 48px; padding: 10px 12px; background: var(--superficie); color: var(--tinta); border: 1.5px solid var(--tinta-2); border-radius: 2px; }
#cotizador textarea { min-height: 88px; resize: vertical; }
#cotizador ::placeholder { color: var(--tinta-2); opacity: 1; }
#cotizador [aria-invalid="true"] { border: 3px double var(--tinta); }
#cotizador .otro { margin-top: var(--e-3); }
#cotizador .err { display: flex; gap: var(--e-2); align-items: flex-start; margin: var(--e-2) 0 0; font-size: var(--t-micro); }
#cotizador .err::before { content: '!'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; font: 700 13px/1 var(--display); }
#cotizador .ayuda { margin: 0 0 var(--e-3); font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
#cotizador .aviso { margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-4); border-left: 3px solid var(--senal); background: var(--superficie); font-size: var(--t-micro); }
#cotizador .ok:empty, #cotizador .aviso:empty { display: none; }
#cotizador .opts { display: grid; gap: var(--e-2); }
#cotizador .opts--3 { grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { #cotizador .opts--3 { grid-template-columns: repeat(3, 1fr); } #cotizador .opts--2 { grid-template-columns: 1fr 1fr; } }
#cotizador .opts--fila { display: flex; flex-wrap: wrap; }
#cotizador .opts--fila .op { flex: 1 1 auto; }
#cotizador .op { position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 48px; padding: var(--e-2) var(--e-3); background: var(--superficie); border: 1.5px solid var(--linea); font-size: var(--t-micro); line-height: 1.3; cursor: pointer; }
#cotizador .op:hover { border-color: var(--tinta-2); }
#cotizador .op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#cotizador .box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--tinta-2); background: var(--fondo); }
#cotizador .op input[type="radio"] + .box { border-radius: 50%; }
#cotizador .op input:checked + .box { background: var(--senal); border-color: var(--senal); }
#cotizador .op input[type="checkbox"]:checked + .box::after { content: ''; width: 10px; height: 5px; border: solid var(--negro); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
#cotizador .op input[type="radio"]:checked + .box::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--negro); }
#cotizador .op:has(input:checked) { border-color: var(--senal-claro); }
#cotizador .op:has(input:focus-visible) { outline: 3px solid var(--senal); outline-offset: 3px; }
#cotizador .op:has(input:disabled) { opacity: .5; cursor: not-allowed; }
#cotizador .op input:disabled { cursor: not-allowed; }
#cotizador .op small { display: block; margin-top: 2px; font-size: var(--t-rotulo); color: var(--tinta-2); }
#cotizador .op > span:last-child { min-width: 0; }
#cotizador .ya-se { margin-top: var(--e-5); border: 1.5px solid var(--linea); }
#cotizador .ya-se > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 48px; padding: var(--e-2) var(--e-4); cursor: pointer; list-style: none; font-weight: 600; }
#cotizador .ya-se > summary::after { content: '+'; flex: none; font: 400 1.5rem/1 var(--cuerpo); color: var(--tinta-2); }
#cotizador .ya-se[open] > summary::after { content: '\2013'; }
#cotizador .necesita { padding: var(--e-1) var(--e-4) var(--e-4); }
.cot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin: var(--e-5) 0; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.cot-prog { display: flex; align-items: center; gap: var(--e-3); }
.cot-barra { display: flex; gap: 6px; padding-inline: 4px; }
.cot-barra > span { position: relative; width: 22px; height: 10px; overflow: hidden; border: 1px solid var(--tinta-2); transform: skewX(var(--diag-skew)); }
.cot-barra > span::after { content: ''; position: absolute; inset: 0; background: var(--senal); transform: scaleX(0); transform-origin: 0 50%; }
.cot-barra > span.on { border-color: var(--senal); }
.cot-barra > span.on::after { transform: none; }
#cot-cuenta { margin: 0; }
.cot-botones { display: flex; gap: var(--e-2); margin-left: auto; }
#cotizador .vista { background: var(--superficie); border: 1px solid var(--linea); }
#cotizador .vista-m { margin-bottom: var(--e-5); }
#cotizador .vista-cab { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--linea); list-style: none; }
#cotizador summary.vista-cab { cursor: pointer; }
#cotizador .vista-cab .q { width: 16px; height: 16px; }
#cotizador .vista pre { margin: 0; padding: var(--e-4); max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--t-dato)/1.6 var(--dato); }
#cotizador .vista pre.vacia { color: var(--tinta-2); }
#cotizador .vista-pie { margin: 0; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linea); font-size: var(--t-micro); color: var(--tinta-2); }
#cotizador summary::-webkit-details-marker { display: none; }
#cot-enviar { width: 100%; }
@media (min-width: 560px) { #cot-enviar { width: auto; } }
#cotizador .ok { margin: var(--e-3) 0 0; font-size: var(--t-micro); }
.cot-micro, #cotizador .alt, #cotizador .priv { max-width: 62ch; margin: var(--e-3) 0 0; font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
#cotizador .priv { padding-left: var(--e-3); border-left: 1px solid var(--tinta-2); }
.faq-g { display: grid; gap: var(--e-6); }
@media (min-width: 1024px) { .faq-g { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-7); align-items: start; } }
.faq-cab h2 { max-width: 16ch; }
.faq-lista details { border-top: 1px solid var(--linea); }
.faq-lista details:last-child { border-bottom: 1px solid var(--linea); }
.faq-lista summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-4); align-items: center; min-height: 48px; padding: var(--e-4) 0; cursor: pointer; list-style: none; }
.faq-lista summary::-webkit-details-marker { display: none; }
#preguntas .tema, #preguntas .preg { grid-column: 1; }
#preguntas .preg { font: 700 1.0625rem/1.3 var(--display); }
#preguntas summary { --ico: var(--i-mas); }
#preguntas summary::after { grid-column: 2; grid-row: 1 / span 2; }
#preguntas [open] > summary::after { transform: rotate(45deg); }
#preguntas .resp { max-width: 62ch; padding: 0 0 var(--e-5); }
#preguntas .resp p { margin-bottom: var(--e-3); }
.faq-cta a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* ===== cierre ===== */
#contacto { position: relative; overflow: clip; }
.cie-in { position: relative; }
.cie-q { display: block; inline-size: 72vw; block-size: auto; aspect-ratio: 1; margin: 0 calc(-18vw - var(--margen)) var(--e-5) auto; overflow: hidden; }
.cie-est { fill: var(--q-anillo); }
.cie-barra { fill: var(--q-barra); }
.cie-filete { display: none; stroke: var(--senal); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.cie-txt { position: relative; }
#contacto .rotulo { margin: 0 0 var(--e-3); }
#contacto h2 { margin: 0 0 var(--e-5); max-width: 20ch; }
.cie-pasos { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: flex; flex-direction: column; gap: var(--e-3); font: 600 var(--t-cuerpo)/1.35 var(--display); }
.cie-pasos li { display: flex; align-items: baseline; gap: var(--e-3); }
.cie-pasos li::before { content: ''; flex: none; inline-size: 8px; block-size: 1.1em; background: var(--senal); transform: skewX(var(--diag-skew)); align-self: center; }
.cie-linea { margin: 0 0 var(--e-5); max-width: 46ch; color: var(--tinta-2); }
.cie-cta { display: flex; flex-direction: column; gap: var(--e-3); }
.cie-cta .btn { width: 100%; justify-content: center; }
.cie-micro { margin: var(--e-4) 0 0; max-width: 52ch; font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-2); }
@media (min-width: 560px) { .cie-cta { flex-direction: row; flex-wrap: wrap; } .cie-cta .btn { width: auto; } }
@media (min-width: 768px) { .cie-q { inline-size: 60vw; margin-right: calc(-14vw - var(--margen)); } .cie-pasos { flex-direction: row; flex-wrap: wrap; column-gap: var(--e-5); } }
@media (min-width: 1024px) {
  .cie-q { position: absolute; top: 50%; right: -10%; inline-size: 55%; margin: 0; translate: 0 -50%; overflow: visible; }
  .cie-in { position: static; }
  .cie-txt { max-inline-size: min(54%, 40rem); }
  .cie-filete { display: inline; }
}
}
@layer movimiento {
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .clave::after { animation: qs-clave linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .num-k { animation: qs-num linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
  }
}
@keyframes qs-clave { from { transform: skewX(var(--diag-skew)) scaleX(0); } to { transform: skewX(var(--diag-skew)) scaleX(1); } }
@keyframes qs-num { from { font-weight: 300; } to { font-weight: 900; } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }
/* ===== escena ===== */
@keyframes esc-imprime {
  from { font-variation-settings: 'wght' 300; letter-spacing: .14em; opacity: .2; }
  to { font-variation-settings: 'wght' 850; letter-spacing: .04em; opacity: 1; }
}
@keyframes esc-pulso { from { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } to { transform: translateY(-330px); opacity: 0; } }
@keyframes esc-snip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .esc-palabra.esc-imprime { animation: esc-imprime var(--dur-imprime) var(--ease-senal); }
  .esc-q.pulsa .esc-q-pulso { animation: esc-pulso var(--dur-pulso) var(--ease-senal); }
  .esc-q.pulsa-inv .esc-q-pulso { animation: esc-pulso var(--dur-pulso) var(--ease-senal) reverse; }
  .esc[data-modo="compacto"]:where(.qs-vivo *) .esc-snip:not(.esc-impreso) { clip-path: inset(0 0 100% 0); }
  .esc[data-modo="compacto"] .esc-snip.esc-impreso { animation: esc-snip var(--dur-imprime) steps(6, end); }
}
/* ===== decision ===== */
@media (prefers-reduced-motion: no-preference) {
  .pg-nodo::before { transition: opacity var(--dur-estado) var(--ease-maquina); }
  .pg-paso::after { transition: transform var(--dur-arco) var(--ease-senal); }
  .cot-barra > span::after { transition: transform var(--dur-estado) var(--ease-maquina); }
  #preguntas summary::after { transition: transform var(--dur-ui) var(--ease-maquina); }
}
html.qs-vivo .pg-paso:not(.on) .pg-nodo { color: var(--tinta); }
html.qs-vivo .pg-paso:not(.on) .pg-nodo::before { opacity: 0; }
html.qs-vivo .pg-paso:not(.on):not(:last-child)::after { transform: skewX(var(--diag-skew)) scaleY(0); }
@media (min-width: 768px) { html.qs-vivo .pg-paso:not(.on):not(:last-child)::after { transform: skewX(var(--diag-skew)) scaleX(0); } }
/* ===== cierre ===== */
@media (prefers-reduced-motion: no-preference) {
  #contacto:where(.qs-vivo *) .cie-est { opacity: 0; transition: opacity var(--dur-arco) var(--ease-senal); }
  #contacto:where(.qs-vivo *) .cie-est[data-est="2"] { transition-delay: 120ms; }
  #contacto:where(.qs-vivo *) .cie-est[data-est="3"] { transition-delay: 240ms; }
  #contacto:where(.qs-vivo *) .cie-est[data-est="4"] { transition-delay: 360ms; }
  #contacto:where(.qs-vivo *) .cie-barra { opacity: 0; transform: translate(-120px, -164px); transition: transform var(--dur-arco) var(--ease-senal) 600ms, opacity var(--dur-estado) var(--ease-senal) 600ms; }
  #contacto:where(.qs-vivo *) .cie-filete { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform var(--dur-arco) var(--ease-senal) 1100ms; }
  #contacto.cie-on .cie-est { opacity: 1; }
  #contacto.cie-on .cie-barra { opacity: 1; transform: none; }
  #contacto.cie-on .cie-filete { transform: none; }
}
}