/* adrianblanes.com, la identidad «En claro» de la 392ª (él la eligió viendo seis). Una hoja para la portada y las páginas de caso.
   Fondo blanco y aire. Los titulares, en Barlow Condensed. Lo que contiene es recto y de línea fina, como el cajetín de un plano.
   Un solo acento, el azul de cota, y la cota va sólo donde mide algo y siempre con su cifra (DESIGN.md). */
@font-face { font-family: 'Geist'; src: url(/fuentes/Geist-Variable.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/fuentes/GeistMono-Variable.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fuentes/BarlowCondensed-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
/* design-md:inicio · sale de DESIGN.md con node scripts/design-md.mjs; no se edita a mano */
:root {
  --fondo: #0B0F17;
  --fondo-2: #0F141E;
  --superficie: #131A26;
  --borde: #232B38;
  --tinta: #F4F5F7;
  --tinta-2: #A3A7AE;
  --tinta-3: #858A93;
  --marino: #E8EAEE;
  --marino-alto: #FFFFFF;
  --acento: #1AB2FF;
  --acento-suave: #0B202E;
  --cota: #1AB2FF;
  --linea: #2A3341;
  --bien: #1AB2FF;
  --aviso: #E3B65C;
  --hecho-fondo: #0B202E;
  --sobre-marino: #C9CDD4;
  --sobre-marino-2: #A3A7AE;
  --sobre-marino-3: #858A93;
  --sobre-lleno: #0B0F17;
  --boton-blanco-hover: #4CC4FF;
  --radio: 2px;
  --radio-boton: 6px;
  --ancho: 1120px;
  --titular: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;
  --sale: cubic-bezier(.16, 1, .3, 1);
}
/* design-md:fin */
:root {
  --ritmo: .5s; }   /* lo que dura una unidad de --t en las escenas de caso: a .5 s se montan en unos 2,5 s (393ª). web.js lo lee */

/* ── LA COTA: topes, flechas cerradas que tocan el tope y la medida cortando la línea. Sin cifra no se pone ── */
.cota { position: relative; height: 14px; color: var(--cota); border-inline: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.cota::before, .cota::after { content: ""; position: absolute; top: 50%; width: 9px; height: 7px; margin-top: -3.5px; background: currentColor; }
.cota::before { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.cota::after { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.cota b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0 10px; background: var(--papel, var(--superficie)); font: 500 12px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.cota-y { position: relative; width: 14px; color: var(--cota); border-block: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.cota-y::before, .cota-y::after { content: ""; position: absolute; left: 50%; width: 7px; height: 9px; margin-left: -3.5px; background: currentColor; }
.cota-y::before { top: 0; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.cota-y::after { bottom: 0; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.cota-y b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -90deg; padding: 0 10px; background: var(--papel, var(--superficie)); font: 500 12px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; }

/* ── Base ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
a, button, summary, input { touch-action: manipulation; }
[id] { scroll-margin-top: 84px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--marino); color: var(--sobre-lleno); }
a { color: inherit; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--titular); font-weight: 600; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(46px, 7vw, 96px); line-height: .95; }
h1 span { display: block; }   /* un tiempo por línea: ordeno, automatizo, ahorro */
h2 { font-size: clamp(38px, 5.4vw, 72px); line-height: .98; }
h3 { font: 600 18px/1.3 var(--sans); letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
.entrada { color: var(--tinta-2); font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45; max-width: 52ch; }
.ejemplo { margin-top: 16px; color: var(--tinta-2); font-size: 15.5px; }
.nota { margin-top: 16px; color: var(--tinta-2); font-size: 15.5px; }   /* igual que .ejemplo, pero sin su significado de «cifras inventadas» (A5) */
/* Lo que se toca: marino lleno o gris suave, con la misma esquina en todos */
.boton { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; background: var(--marino); color: var(--sobre-lleno); text-decoration: none; font: 500 17px/1 var(--sans); padding: 17px 26px; border-radius: var(--radio-boton); transition: background .2s, transform .1s ease-out; }
@media (hover: hover) { .boton:hover { background: var(--marino-alto); } }
.boton:active { transform: scale(.97); }
.boton [aria-hidden] { transition: transform .2s var(--sale); } @media (hover: hover) { .boton:hover [aria-hidden] { transform: translateX(3px); } }
.boton-claro { background: rgba(244,245,247,.07); color: var(--marino); }
@media (hover: hover) { .boton-claro:hover { background: rgba(244,245,247,.12); } }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, [role=slider]:focus-visible { outline: 3px solid var(--cota); outline-offset: 3px; }
section.bloque { padding: 88px 0; position: relative; }
section.gris { background: var(--fondo-2); --papel: var(--fondo-2); }
/* Los títulos de sección, centrados, con aire debajo; en TODAS las páginas, como la portada (él, 09/11: «que el formato sea
   coincidente»). Las secciones de dos columnas (.ficha: preguntas, límites) llevan el título a la izquierda, también en la portada */
section.bloque > .contenedor > h2, section.bloque > .contenedor > :is(.ejemplo, .nota) { text-align: center; margin-inline: auto; }
section.bloque > .contenedor > h2 { max-width: 22ch; }
section.bloque > .contenedor > :is(.ejemplo, .nota) { max-width: 62ch; }

/* Revelado al hacer scroll: sólo si corre el script, para que sin él se lea todo */
.js .revela { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--sale), transform .6s var(--sale); }
.js .revela.visto { opacity: 1; transform: none; }

/* ── EL CAJETÍN: celdas de línea fina con su rótulo, como el de un plano. Es la forma de todo lo que contiene ── */
.cajetin, .partes, .pasos, .hoy { display: grid; border-top: 1px solid var(--marino); border-bottom: 1px solid var(--marino); text-align: left; }
.cajetin > *, .parte, .paso, .hoy > * { padding: 18px 22px 20px; }
.cajetin > * + *, .parte + .parte, .paso + .paso, .hoy > * + * { border-left: 1px solid var(--linea); }
.cajetin span, .parte h3, .hoy h2, .paso .num, .paso .sale span, .etapa-cab, .nodo .suceso, .cuentas th, .nunca > span, .comprueba span, .miga, .casos-otros > span {
  font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.cajetin span, .parte h3, .hoy h2 { display: block; margin-bottom: 8px; }
.cajetin { grid-template-columns: 2fr 1.4fr 1fr; font-size: 15px; line-height: 1.35; }

/* ── Menú: barra translúcida a todo el ancho; el contenido pasa por debajo ── */
.menu { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(11,15,23,.72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(rgba(244,245,247,.06), transparent); pointer-events: none; }
.menu .pildora { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; }
.nombre { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--sans); text-decoration: none; }
/* En pequeño va el icono de la 2b (él, 01/10: el logo entero tiene demasiado detalle); lo deja scripts/logo-kit.mjs */
.icono-ab { display: block; width: 28px; height: 28px; flex: none; }
.menu nav, .enlaces { display: flex; gap: 26px; align-items: center; font-size: 15px; }
.abre-menu { display: none; }
.menu nav a:not(.boton) { text-decoration: none; color: var(--tinta-2); } @media (hover: hover) { .menu nav a:not(.boton):hover { color: var(--tinta); } }
.menu .boton { padding: 11px 18px; font-size: 14px; gap: 0; white-space: pre; }
/* De línea, para no duplicar el botón grande de la portada; se llena al pasar (él, 393ª) */
.menu nav .boton { background: transparent; color: var(--marino); box-shadow: inset 0 0 0 1.5px var(--marino); }
@media (hover: hover) { .menu nav .boton:hover { background: var(--marino); color: var(--sobre-lleno); } }
/* «Casos» del menú: un desplegable con forma de cajetín (él, 09/11, la opción A). Es un <details>: va sin script */
.desplegable { position: relative; }
.desplegable summary { list-style: none; display: flex; align-items: center; gap: 7px; color: var(--tinta-2); cursor: pointer; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--sale); }
.desplegable[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.desplegable[open] summary { color: var(--tinta); } @media (hover: hover) { .desplegable summary:hover { color: var(--tinta); } }
.desplegable-lista { position: absolute; top: calc(100% + 20px); left: -220px; width: 600px; display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0; background: var(--superficie); border-top: 1px solid var(--marino); border-bottom: 1px solid var(--marino); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.desplegable[open] .desplegable-lista { animation: sis-baja .25s var(--sale) both; }
@keyframes sis-baja { from { opacity: 0; transform: translateY(-4px); } }
.menu nav .desplegable-lista a { display: grid; gap: 3px; padding: 10px 20px; color: var(--tinta); font-weight: 500; }
.desplegable-lista small { font: 500 12px/1.2 var(--mono); color: var(--tinta-3); }
@media (hover: hover) { .menu nav .desplegable-lista a:hover { background: var(--fondo-2); color: var(--tinta); } }
.menu nav .desplegable-lista .todos { grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linea); color: var(--cota); font-weight: 400; font-size: 14px; }

/* ── Portada: titular, entrada, la llamada con su cota y la bandeja debajo ── */
.portada { padding: 128px 0 0; text-align: center; }
.portada .entrada { margin: 24px auto 32px; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.llamada { display: grid; gap: 12px; }
.escena-portada { display: grid; grid-template-columns: 14px minmax(0, 620px); gap: 20px; justify-content: center; margin-top: 56px; text-align: left; }
.portada .cajetin { margin-top: 36px; }   /* a quién va, entre el titular y la entrada (él, 393ª: la B de tres) */
/* La bandeja: lo que espera tu sí. Cada fila lleva a su caso */
.tabla { border: 1px solid var(--marino); border-radius: var(--radio); background: var(--superficie); }
.tabla-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 20px 13px; border-bottom: 1px solid var(--marino); font: 600 23px/1 var(--titular); letter-spacing: .04em; text-transform: uppercase; }
.tabla-cab span { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--tinta-3); }
.linea { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 17px 20px; border-top: 1px solid var(--borde); font-size: 15.5px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: background .15s; }
.tabla-cab + .linea { border-top: 0; }
@media (hover: hover) { a.linea:hover { background: var(--fondo-2); } }
.linea .n { font: 500 22px/1 var(--mono); color: var(--cota); }
.linea small { display: block; color: var(--tinta-2); font-size: 13.5px; font-weight: 400; margin-top: 2px; }
.linea .et { font: 500 12px/1 var(--mono); color: var(--tinta-2); white-space: nowrap; }
.pendiente { border-top: 1px solid var(--marino); background: var(--acento-suave); padding: 18px 20px 20px; }
.pendiente .linea { border: 0; padding: 0 0 16px; }
/* Desliza para aprobar: el pomo sigue al dedo uno a uno, cede en los extremos y se suelta con su velocidad (web.js) */
.desliza { position: relative; height: 56px; border-radius: var(--radio-boton); background: rgba(26,178,255,.13); touch-action: pan-y;   /* el dedo en vertical mueve la página; de lado, el pomo (393ª) */ user-select: none; -webkit-user-select: none; cursor: grab; transition: background .25s; }
.desliza .rotulo { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 40px; font-size: 15px; font-weight: 500; color: var(--tinta-2); pointer-events: none; }
.desliza .pomo { position: absolute; left: 4px; top: 4px; width: 48px; height: 48px; border-radius: calc(var(--radio-boton) - 2px); background: var(--marino); color: var(--sobre-lleno); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); will-change: transform; }
.desliza .pomo svg { width: 20px; height: 20px; }
.desliza.cogido { cursor: grabbing; } .desliza.cogido .pomo { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.desliza.hecho { background: var(--hecho-fondo); cursor: default; } .desliza.hecho .pomo { background: var(--bien); }
.desliza.hecho .rotulo { color: var(--bien); padding-left: 0; padding-right: 40px; }
html:not(.js) .desliza .pomo { display: none; } html:not(.js) .desliza .rotulo { padding-left: 0; }   /* sin script no hay gesto: queda el rótulo */
.deshacer { display: block; margin: 10px auto 0; font: 500 14px/1 var(--sans); color: var(--tinta-2); background: none; border: 0; padding: 8px 12px; border-radius: var(--radio-boton); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .deshacer:hover { color: var(--marino); } } .deshacer[hidden] { display: none; }

/* Cabecera de una página de caso: la de la portada, centrada y a su tamaño (él, 09/11; antes iba a la izquierda a 72 px) */
.hoy { grid-template-columns: 1fr 1fr; margin-top: 56px; }
.hoy p { color: var(--tinta-2); font-size: 17px; }
.pie-nota { margin-top: 28px; color: var(--tinta-3); font-size: 14.5px; }
.miga { text-decoration: none; display: inline-block; margin-bottom: 28px; }
@media (hover: hover) { .miga:hover { color: var(--tinta); } }

/* ── La escena de caso: entra, el sistema prepara, decides tú, sale ── */
.flujo { position: relative; display: grid; grid-template-columns: 1fr 72px 1.25fr 72px 1fr; align-items: stretch; margin-top: 48px; }
.etapa { position: relative; display: grid; gap: 12px; align-content: start; padding: 30px 16px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.etapa-cab { position: absolute; top: -10px; left: 14px; padding: 0 8px; background: var(--superficie); line-height: 20px; color: var(--marino); }
.nodo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.nodo .suceso { display: flex; align-items: center; gap: 8px; }
.nodo .accion { font-size: 16px; font-weight: 500; margin-top: 8px; }
.nodo p { font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); margin-top: 8px; }
.nodo.marca { background: var(--acento-suave); border-color: var(--cota); }
.nodo.marca .suceso { color: var(--tinta-2); }   /* --tinta-3 sobre el azul suave se queda en 4,38:1 */
/* Donde decides tú: línea marino y más gruesa. Se distingue por el trazo, no por otro color */
.nodo.puerta { border: 1.5px solid var(--marino); } .nodo.puerta .suceso { color: var(--marino); }
.nodo.puerta .aprobar { margin-top: 12px; }
/* Tu sí dentro de la escena: un sello de línea, no un botón (no se pulsa; el de la bandeja sí) */
.aprobar { display: inline-block; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marino); border: 1.5px solid var(--marino); padding: 6px 10px; border-radius: var(--radio); }
.adjunto { display: inline-block; margin-top: 10px; font: 500 12px/1 var(--mono); color: var(--tinta-2); background: var(--fondo-2); padding: 5px 9px; border-radius: var(--radio); }
.estado { font: 500 12px/1 var(--mono); padding: 5px 8px; border-radius: var(--radio); background: var(--fondo-2); color: var(--tinta-2); white-space: nowrap; }
.estado.hecho { background: var(--hecho-fondo); color: var(--bien); }
/* Filas de papel: concepto a la izquierda, cifra a la derecha */
.filas { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.filas li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--borde); }
.filas li > :first-child { color: var(--tinta-2); }
.filas li > :last-child { white-space: nowrap; text-align: right; color: var(--tinta); font-weight: 500; }
.filas small { display: block; font: 500 12px/1.3 var(--mono); color: var(--tinta-3); margin-top: 2px; }
.filas .total { border-top: 1px solid var(--marino); } .filas .total > * { color: var(--tinta); font-weight: 500; }
.filas .tarde > :last-child { color: var(--cota); }   /* lo que llega tarde o no cuadra, en el azul de la cota y no en ámbar (él, 393ª) */
.hoja-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hoja-cab strong { font-size: 16px; font-weight: 500; }
.suceso + .hoja-cab { margin-top: 8px; } .hoja-cab .accion { margin-top: 0; }
/* Sin script, o en una columna: una flecha entre etapas */
.conector { position: relative; align-self: center; height: 2px; margin: 0 10px; background: var(--marino); }
.conector::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 9px solid var(--marino); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.conector::before { content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cota); box-shadow: 0 0 0 3px rgba(26,178,255,.2); opacity: 0; }
/* Los cables: de qué papel sale cada cosa y en cuál aterriza. Los traza web.js midiendo las tarjetas.
   Cada origen toma su carril en el hueco para que no se pisen. */
.cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.cableada .cables { display: block; }
.cableada .conector { visibility: hidden; }
.cableada .tras-cable { margin-top: 20px; }
.cables path { fill: none; }
.cables .base { stroke: rgba(244,245,247,.16); stroke-width: 1; }
.cables .vivo-c { stroke: var(--marino); stroke-width: 1.5; stroke-dasharray: var(--largo); }
.cables .punta { fill: var(--marino); }
.cables .nudo { fill: var(--superficie); stroke: var(--marino); stroke-width: 1.5; }
.cables .pulso { stroke: var(--cota); stroke-width: 9; stroke-linecap: round; stroke-dasharray: .1 calc(var(--largo) + 30); opacity: 0; }
.cables .pulso.halo { stroke: rgba(26,178,255,.2); stroke-width: 15; }
.repite { margin: 28px 0 0; padding: 9px 14px; border: 0; border-radius: var(--radio-boton); background: rgba(244,245,247,.07); color: var(--marino); font: 500 13px/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .repite:hover { background: rgba(244,245,247,.12); } }
/* El movimiento es una capa: sin script, o si falla, se ve todo quieto y terminado.
   .anda = la escena ha entrado en pantalla y se monta · .hecha = ya montada: los cables se quedan y el pulso los recorre */
.js .escena:not(.anda) .pieza, .js .escena:not(.anda) .cables :is(.vivo-c, .punta, .nudo) { opacity: 0; }
.escena.anda .pieza { animation: entra .4s var(--sale) both; animation-delay: calc(var(--t) * var(--ritmo)); }
.escena.anda .nodo .aprobar { animation: aprueba .5s ease both; animation-delay: calc(var(--t) * var(--ritmo)); }
.escena.anda:not(.hecha) .cables .vivo-c { animation: dibuja .4s var(--sale) both; animation-delay: calc(var(--tc) * var(--ritmo)); }
.escena.anda:not(.hecha) .cables .nudo { animation: aparece .2s both; animation-delay: calc(var(--tc) * var(--ritmo)); }
.escena.anda:not(.hecha) .cables .punta { animation: aparece .2s both; animation-delay: calc(var(--tc) * var(--ritmo) + .2s); }
.escena.hecha .cables .pulso { animation: pulso 4s linear infinite; animation-delay: calc(var(--d) * var(--ritmo)); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes aprueba { 0% { color: var(--marino); border-color: var(--marino); transform: none; } 40% { color: var(--bien); border-color: var(--bien); transform: scale(.94); } 100% { color: var(--bien); border-color: var(--bien); transform: none; } }
@keyframes dibuja { from { stroke-dashoffset: var(--largo); } to { stroke-dashoffset: 0; } }
/* El punto cruza el cable en 0,7 s y descansa el resto del ciclo */
@keyframes pulso { 0% { stroke-dashoffset: 0; opacity: 0; } 3%, 15% { opacity: 1; } 18%, 100% { stroke-dashoffset: calc(var(--largo) * -1); opacity: 0; } }
@keyframes baja { 0% { top: 0; opacity: 0; } 3%, 15% { opacity: 1; } 18%, 100% { top: calc(100% - 14px); opacity: 0; } }

/* El reparto de cada caso: un cajetín de tres celdas */
.partes { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
.ver-sistema { text-align: center; margin-top: 24px; }
.partes.cuatro { grid-template-columns: repeat(4, 1fr); border-top: 0; margin-top: 0; }   /* lo que se deja por escrito, pegado bajo los pasos (propuesta 09/11) */
@media (max-width: 980px) { .partes.cuatro { grid-template-columns: 1fr 1fr; } .partes.cuatro .parte:nth-child(3) { border-left: 0; } .partes.cuatro .parte:nth-child(n+3) { border-top: 1px solid var(--linea); } }
@media (max-width: 560px) { .partes.cuatro .parte { padding: 14px 12px 16px; } .partes.cuatro .parte p { font-size: 14.5px; } }
.parte p { color: var(--tinta); font-size: 15.5px; }

/* Las pestañas de los casos: un cajetín de una fila. Sin script no hay pestañas: los casos se leen uno debajo de otro, cada uno con su título */
.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 40px; border: 1px solid var(--marino); border-radius: var(--radio); overflow: hidden; }
.pestana { display: grid; gap: 5px; align-content: start; text-align: left; padding: 13px 14px; border: 0; border-radius: 0; background: var(--superficie); font: inherit; cursor: pointer; transition: background .15s; }
.pestana + .pestana { border-left: 1px solid var(--linea); }
.pestana strong { font: 500 15.5px/1.2 var(--sans); color: var(--tinta); }
.pestana small { font: 500 12px/1.3 var(--mono); color: var(--tinta-3); }   /* una frase: en minúsculas (DESIGN.md) */
@media (hover: hover) { .pestana:hover { background: var(--fondo-2); } }
.pestana:focus-visible { outline-offset: -3px; }
.pestana[aria-selected="true"] { background: var(--marino); }
/* La barra del temporizador: crece en azul claro por el pie de la pestaña abierta mientras los casos pasan solos (web.js, 20 s) */
.pestana { position: relative; }
.pestana::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--avance, 0) * 100%); background: var(--acento); }
.pestana[aria-selected="true"] strong { color: var(--sobre-lleno); } .pestana[aria-selected="true"] small { color: var(--sobre-marino-3); }
html:not(.js) .pestanas { display: none; }
.caso { margin-top: 36px; }
html:not(.js) .caso + .caso { margin-top: 96px; }
.caso-titulo { font-size: 28px; margin-bottom: 8px; } .js .caso-titulo { display: none; }
.caso-linea { color: var(--tinta-2); text-align: center; }
.caso .flujo { margin-top: 36px; }
/* Lo que el sistema no hace solo: una señal de prohibido y dos o tres palabras */
.nunca { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.nunca ul { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nunca li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border: 1px solid var(--linea); background: var(--superficie); border-radius: var(--radio); font: 500 13.5px/1 var(--sans); color: var(--tinta-2); }
.nunca li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--tinta-2);
  background: linear-gradient(45deg, transparent calc(50% - .8px), var(--tinta-2) calc(50% - .8px), var(--tinta-2) calc(50% + .8px), transparent calc(50% + .8px)); }
.caso-entero { margin-top: 28px; }
/* Los casos que no están en la portada: un rótulo y un botón por caso (él, 393ª: «tenemos botones para ello») */
.casos-otros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea); }
.casos-otros > span { margin-right: 6px; }
.boton-peque { padding: 13px 16px; font-size: 15px; }

/* Los otros casos, en una página de caso */
.casos-mas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.casos-mas.cuatro { grid-template-columns: repeat(4, 1fr); }   /* «Por dónde empezar» de la portada: los cuatro servicios (10/11) */
.caso-tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); text-decoration: none; transition: border-color .2s; }
@media (hover: hover) { .caso-tarjeta:hover { border-color: var(--marino); } }
.caso-tarjeta .quien { font: 500 12px/1.3 var(--mono); color: var(--tinta-3); min-height: 2.6em; }
.caso-tarjeta h3 { font-size: 20px; }
.caso-tarjeta p { font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.caso-tarjeta .ver { margin-top: auto; padding-top: 10px; font: 500 14px/1 var(--sans); color: var(--cota); }

/* ── Haz las cuentas: la cifra grande sigue a los mandos, y la cota mide lo que se va de la semana ── */
#cuesta { text-align: center; }
.calc { max-width: 860px; margin: 0 auto; }
.grande { font: 600 clamp(56px, 8.4vw, 96px)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 52px; }
.grande small { font-size: .3em; letter-spacing: -.01em; font-weight: 500; color: var(--tinta-2); }
.equivale { margin-top: 12px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.calc .op { font: 500 12.5px/1.5 var(--mono); color: var(--tinta-3); margin-top: 8px; }
/* La semana de 40 horas como regla de plano */
.regla { margin-top: 52px; text-align: left; }
.regla .cota { width: var(--w, 10%); height: 16px; min-width: 22px; }
.regla .cota b { left: calc(100% + 10px); translate: 0 -50%; padding: 0; background: none; font-size: 14px; color: var(--marino); }   /* la cifra, al lado: dentro no cabe cuando la cota es corta */
.regla .cota.larga b { left: 50%; translate: -50% -50%; padding: 0 10px; background: var(--papel, var(--superficie)); }
.regla .escala { height: 12px; margin-top: 7px; border-top: 1.5px solid var(--marino); border-right: 1.5px solid var(--marino); background: repeating-linear-gradient(90deg, var(--marino) 0 1.5px, transparent 1.5px 12.5%); }
.regla p { margin-top: 10px; font: 500 13px/1.4 var(--mono); color: var(--tinta-2); display: flex; justify-content: space-between; gap: 16px; }
.mandos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; text-align: left; }
.mandos label { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 15px; color: var(--tinta-2); }
.mandos output { font: 500 17px/1.4 var(--sans); color: var(--tinta); font-variant-numeric: tabular-nums; }
/* El deslizador, dibujado por nosotros: con el del navegador y sólo accent-color, Opera lo pintaba blanco con un tirador negro
   (él, 10/11). Riel fino, lo recorrido en celeste (--p lo pone web.js) y tirador celeste; 44 px de alto para el dedo */
.mandos input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  --riel: linear-gradient(var(--cota), var(--cota)) 0 / var(--p, 50%) 100% no-repeat, rgba(244,245,247,.18); }
.mandos input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--riel); }
.mandos input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--riel); }
.mandos input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--cota); box-shadow: 0 0 0 4px rgba(26,178,255,.18); }
.mandos input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--cota); box-shadow: 0 0 0 4px rgba(26,178,255,.18); }
.mandos input:focus-visible { outline: none; }
.mandos input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--tinta); outline-offset: 3px; }
.mandos input:focus-visible::-moz-range-thumb { outline: 2px solid var(--tinta); outline-offset: 3px; }
html:not(.js) .mandos input { display: none; }
.calc .boton { margin-top: 44px; }
/* Las cuentas de ejemplo: una tabla con la forma del cajetín */
.cuentas { width: 100%; max-width: 860px; margin: 56px auto 0; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--marino); text-align: left; }
.cuentas caption { caption-side: bottom; padding-top: 14px; }
.cuentas th { padding: 12px 18px 10px; border-bottom: 1px solid var(--marino); }
.cuentas td { padding: 15px 18px; border-top: 1px solid var(--borde); vertical-align: baseline; }
.cuentas td + td, .cuentas th + th { border-left: 1px solid var(--linea); }
.cuentas td:first-child { font-weight: 500; }
.cuentas td:nth-child(2) { font: 500 12.5px/1.5 var(--mono); color: var(--tinta-2); }
.cuentas td:last-child, .cuentas th:last-child { text-align: right; white-space: nowrap; }
.cuentas td:last-child { font-weight: 500; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cuentas .suma td { border-top: 1px solid var(--marino); border-bottom: 1px solid var(--marino); background: var(--acento-suave); }

/* ── Cómo empezamos: los cinco pasos en un cajetín ── */
.pasos { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, auto); margin-top: 48px; }
.paso { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }   /* número, título, texto y «Sale» a la misma altura en los cinco (393ª) */
.paso .num { display: block; font-size: 13px; color: var(--cota); margin-bottom: 14px; }
.paso h3 { font: 600 26px/1 var(--titular); letter-spacing: .01em; text-transform: uppercase; }
.paso p { color: var(--tinta-2); font-size: 15.5px; margin-top: 12px; }
.paso .sale { color: var(--tinta); margin-top: 16px; }
.paso .sale span { display: block; margin-bottom: 6px; }
.pasos .revela:nth-child(2) { transition-delay: .06s; } .pasos .revela:nth-child(3) { transition-delay: .12s; } .pasos .revela:nth-child(4) { transition-delay: .18s; } .pasos .revela:nth-child(5) { transition-delay: .24s; }

/* ── Filas de ficha, título a la izquierda: las preguntas y, en las páginas de caso, los límites ── */
.ficha { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.ficha > div:first-child { position: sticky; top: 110px; }
.ficha h2 { font-size: clamp(34px, 4.2vw, 56px); }
.ficha .entrada { font-size: 17px; margin-top: 16px; }
.fila { display: grid; grid-template-columns: 44px 1fr; gap: 8px 16px; padding: 28px 0; border-top: 1px solid var(--linea); }
.fila:last-child { border-bottom: 1px solid var(--linea); }
.fila h3 { font-size: 20px; }
.fila p { grid-column: 2; color: var(--tinta-2); }
.fila.sin-n { grid-template-columns: 1fr; } .fila.sin-n p { grid-column: 1; }
.comprueba { margin-top: 40px; color: var(--tinta-2); max-width: 70ch; }
.comprueba span { display: block; margin-bottom: 10px; }

/* ── Preguntas ── */
.faq details { border-bottom: 1px solid var(--linea); }
.faq details:first-child { border-top: 1px solid var(--marino); }
.faq details:last-child { border-bottom-color: var(--marino); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 500 20px/1.35 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq summary:hover { color: var(--cota); } }
.faq summary::after { content: "+"; font: 400 26px/1 var(--sans); color: var(--tinta-3); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--tinta-2); padding: 0 0 24px; max-width: 64ch; }

/* ── Cita: el único bloque en marino ── */
.cita { position: relative; overflow: hidden; background: var(--marino); color: var(--tinta); padding: 96px 0; }
/* La ventana de cita.js también lleva la clase «cita»: sin esto, la regla de arriba la deja en absolute, se abre arriba del todo
   y la página salta al principio (13/11). Aquí y no en cita.css, que llega tarde la primera vez que se abre */
dialog.cita { position: fixed; }
.cita ::selection { background: var(--superficie); color: var(--marino); }
.cita .contenedor { position: relative; }
.cita h2 { color: var(--tinta); font-size: clamp(40px, 6.4vw, 92px); max-width: 16ch; line-height: .96; }
.cita p { color: var(--sobre-marino); font-size: 19px; max-width: 48ch; margin: 24px 0 40px; }
.cita .boton { background: var(--superficie); color: var(--marino); } @media (hover: hover) { .cita .boton:hover { background: var(--boton-blanco-hover); } }
.cita .contacto { margin: 32px 0 0; font-size: 15px; display: flex; align-items: center; gap: 20px; } .cita .contacto a { color: var(--tinta); }
.cita .linkedin { display: inline-flex; padding: 4px; margin: -4px; border-radius: var(--radio-boton); opacity: .9; transition: opacity .2s; }
@media (hover: hover) { .cita .linkedin:hover { opacity: 1; } }
.cita .linkedin svg { width: 22px; height: 22px; display: block; }
/* Quién soy: pequeño, abajo y a la derecha del cierre (él, 392ª). Con quién se habla en esos treinta minutos */
.cita .quien { position: absolute; right: 24px; bottom: 0; width: 340px; }
.quien-cab { display: flex; align-items: center; gap: 14px; }
.quien-cab img { width: 70px; height: 88px; object-fit: cover; object-position: 50% 30%; border-radius: var(--radio); filter: grayscale(1) contrast(1.05); flex: none; }
.cita .quien h3 { font-size: 17px; color: var(--tinta); }
.cita .quien p { font-size: 14.5px; line-height: 1.5; color: var(--sobre-marino-2); max-width: none; margin: 14px 0 0; }
.cita .quien .mas { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }   /* a /sobre-mi (13/11) */
.cita .quien .lugar { margin: 6px 0 0; font: 500 12px/1.4 var(--mono); color: var(--sobre-marino-3); }

footer { padding: 32px 0; font-size: 14px; color: var(--tinta-3); }
footer .contenedor { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; } footer a { text-decoration: none; } @media (hover: hover) { footer a:hover { color: var(--tinta); } }   /* lo legal, lo más callado posible (él, 393ª); la LSSI pide que siga a un clic desde cada página */

@media (max-width: 980px) {
  /* El menú del móvil (él, 393ª): «Menú» despliega las secciones bajo la barra, una por fila. Sin script, sólo «Hablemos» */
  .menu nav { gap: 4px; }
  .js .abre-menu { display: inline-block; font: 500 15px/1 var(--sans); color: var(--marino); background: none; border: 0; padding: 14px 12px; border-radius: var(--radio-boton); cursor: pointer; }
  .menu.abierto .abre-menu { background: var(--fondo-2); } @media (hover: hover) { .abre-menu:hover { background: var(--fondo-2); } }
  .enlaces { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0 24px 8px; background: var(--superficie); border-bottom: 1px solid var(--marino); }
  .menu.abierto .enlaces { display: flex; }
  .enlaces a { padding: 16px 0; border-top: 1px solid var(--linea); font-size: 17px; }
  .enlaces { max-height: calc(100dvh - 70px); overflow-y: auto; }
  .desplegable summary { padding: 16px 0; border-top: 1px solid var(--linea); font-size: 17px; justify-content: space-between; }
  .desplegable-lista { position: static; width: auto; grid-template-columns: 1fr; padding: 0 0 10px 14px; border: 0; box-shadow: none; }
  .menu nav .desplegable-lista a { padding: 9px 0; border-top: 0; font-size: 16px; }
  .menu nav .desplegable-lista .todos { margin-top: 4px; padding-top: 12px; }
  .portada { padding: 104px 0 0; }
  .escena-portada { margin-top: 40px; gap: 10px; } .portada .cajetin { margin-top: 28px; }
  .ficha, .hoy, .cajetin, .partes, .pasos { grid-template-columns: 1fr; }
  .ficha { gap: 40px; }
  .cajetin > * + *, .parte + .parte, .paso + .paso, .hoy > * + * { border-left: 0; border-top: 1px solid var(--linea); }
  .cita .quien { position: static; width: auto; max-width: 420px; margin-top: 48px; }
  section.bloque, .cita { padding: 64px 0; }
  .ficha > div:first-child { position: static; }
  .flujo { grid-template-columns: 1fr; }
  .conector { width: 2px; height: 48px; margin: 10px auto; align-self: auto; }
  .conector::after { right: auto; left: -5px; top: auto; bottom: -2px; border: 0; border-top: 9px solid var(--marino); border-left: 6px solid transparent; border-right: 6px solid transparent; }
  .conector::before { left: -4px; }
  .escena.hecha .conector::before { animation: baja 4s linear infinite; animation-delay: calc(var(--d) * var(--ritmo)); }
  .casos-mas, .casos-mas.cuatro { grid-template-columns: repeat(2, 1fr); }
  .mandos { grid-template-columns: 1fr; gap: 18px; }
  .cuentas td:nth-child(2), .cuentas th:nth-child(2) { display: none; }
  .caso-linea { text-align: left; }
}
@media (max-width: 560px) {
  .menu .pildora { padding: 10px 16px; } .menu .boton { padding: 16px 16px; font-size: 13px; }
  .boton { white-space: normal; line-height: 1.25; }
  /* Para el dedo: 44 px de alto como poco */
  .repite { padding: 15px 18px; } footer a, .cita .contacto a:not(.linkedin) { display: inline-block; padding: 13px 0; } .cita .linkedin { padding: 11px; margin: -11px; }
  .nombre { white-space: nowrap; min-height: 44px; } .abre-menu { min-height: 44px; } .miga { padding: 15px 0; margin: -15px 0 13px; }
  .casos-mas, .casos-mas.cuatro { grid-template-columns: 1fr; }
  .linea { grid-template-columns: 40px 1fr; } .linea .et { display: none; }
  .escena-portada { grid-template-columns: minmax(0, 1fr); } .escena-portada .cota-y { display: none; }
  .fila { grid-template-columns: 1fr; } .fila p { grid-column: 1; }
  .cuentas td:last-child { font-size: 17px; }
  /* El cajetín, compacto: rótulo y valor en una línea, para que el botón quepa en la primera pantalla (él, 393ª) */
  .portada .cajetin > * { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: baseline; padding: 10px 2px; }
  .portada .cajetin span { margin-bottom: 0; }
  /* Tres pestañas caben: sin la línea de quién (ya la dice el caso) */
  .pestanas { grid-auto-columns: auto; } .pestana { padding: 14px 10px; } .pestana small { display: none; }
  /* Los casos de la portada, cortos (él, 393ª): lo que entra, lo que decides y lo que sale. Lo demás, en su página */
  #casos .etapa:is(:nth-child(1), :nth-child(5)) > .nodo:not(:nth-child(2)):not(.marca),
  #casos .etapa:nth-child(3) > .nodo:not(:nth-child(2)):not(.puerta):not(.marca),
  #casos .partes, #casos .repite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela, .js .escena .pieza, .js .escena:not(.anda) .pieza { opacity: 1; transform: none; }   /* la segunda, para ganar a la de arriba en especificidad */
  .repite { display: none; }
}
@media (prefers-reduced-transparency: reduce) { .menu { background: var(--superficie); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ── /jury del 06/11 y del 09/11, sin tocar el diseño: saltar al contenido, foco sobre marino, hovers, pie y paso entre páginas ── */
.salta { position: absolute; left: 16px; top: -64px; z-index: 60; background: var(--marino); color: var(--sobre-lleno); padding: 12px 16px; border-radius: var(--radio-boton); text-decoration: none; font: 500 15px/1 var(--sans); }
.salta:focus { top: 12px; }
.cita :focus-visible { outline-color: var(--tinta); }   /* el azul de cota no se ve sobre marino */
.nombre { transition: color .2s; } @media (hover: hover) { .nombre:hover { color: var(--cota); } }
@media (hover: hover) { .cita .contacto a:not(.linkedin):hover, footer a:hover, .miga:hover { text-decoration: underline; text-underline-offset: 3px; } }
.caso-tarjeta { transition: border-color .2s, background .2s; } @media (hover: hover) { .caso-tarjeta:hover { background: var(--fondo-2); } }
footer nav a { display: inline-flex; align-items: center; min-height: 24px; }   /* objetivo táctil mínimo de WCAG 2.2 */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* ══ EL LENGUAJE OSCURO (D-843, 10/11), consolidado con sus correcciones del mismo día: las tarjetas, todas como la de la
   portada (cristal sin marco); fuera las líneas del cajetín y las cotas; el panel metálico de la portada se abre hacia la
   izquierda al bajar y pasa a ser el fondo, y luego las secciones alternan metal y carbono; el verde, fuera (lo hecho va en
   celeste); la escala de letra, de wealthcore (titular fino y grande, texto y rótulos pequeños). Lo de arriba sigue siendo la
   estructura; los colores salen del :root de DESIGN.md. El movimiento, en animacion.js ══ */
:root { color-scheme: dark; --titular: var(--sans);
        --cristal: rgba(244,245,247,.04); --cristal-osc: rgba(11,15,23,.72); --filo: rgba(244,245,247,.1); --filo-2: rgba(244,245,247,.2);
        --sombra: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
        --metal: radial-gradient(60% 55% at 30% 35%, rgba(244,245,247,.42), rgba(244,245,247,0) 70%), radial-gradient(45% 50% at 85% 80%, rgba(26,178,255,.18), rgba(26,178,255,0) 70%), linear-gradient(160deg, #1F2633 0%, #7D8594 38%, #121722 70%, #0B0F17 100%);
        --velo: linear-gradient(rgba(11,15,23,.7), rgba(11,15,23,.8)); }

/* ── El grano de película, encima de todo y sin coger clics ── */
body::after { content: ""; position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1s steps(6) infinite; }
@keyframes grano { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
::selection { background: var(--cota); color: var(--sobre-lleno); }

/* ── La letra, a la escala de wealthcore: el titular fino y grande; el texto, los botones y los rótulos, pequeños ── */
body { font-size: 16px; }
h1, h2 { font-family: var(--sans); font-weight: 300; text-transform: none; letter-spacing: -.035em; line-height: 1.04; }
h1 { font-size: clamp(38px, 4.6vw, 68px); }
h1 span:nth-child(2) { color: var(--tinta-2); } h1 span:nth-child(3) { color: var(--tinta-3); }
h2, .ficha h2, .cita h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; }
h3, .fila h3, .caso-tarjeta h3 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.entrada, .ficha .entrada, .con-metal .entrada { font-size: 16.5px; line-height: 1.6; }
.ejemplo, .nota, .caso-linea, .hoy p, .parte p, .paso p, .fila p, .faq details p, .comprueba, .cita p { font-size: 15px; }
.tabla-cab, .cajetin span, .parte h3, .hoy h2, .paso .num, .paso .sale span, .etapa-cab, .nodo .suceso, .cuentas th, .nunca > span, .comprueba span, .miga, .casos-otros > span, .pestana small, .caso-tarjeta .quien {
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.paso h3 { font: 400 20px/1.15 var(--sans); letter-spacing: -.02em; text-transform: none; }
.faq summary { font: 400 17px/1.4 var(--sans); padding: 22px 24px; }
.grande { font-weight: 300; font-size: clamp(48px, 6vw, 80px); letter-spacing: -.04em; }
.cuentas td:last-child { font-weight: 400; font-size: 17px; }
.boton { font-size: 14.5px; padding: 14px 22px; }
.menu .boton { font-size: 13px; padding: 10px 16px; }
.menu nav, .enlaces { font-size: 13.5px; }

/* ── Lo que se toca: claro por defecto; el celeste, de relleno en lo que importa ── */
@media (hover: hover) { .boton:hover { background: var(--marino-alto); } }
.portada .acciones .boton:not(.boton-claro), .menu nav .boton, .cita .boton:not(.boton-claro) { background: var(--cota); color: var(--sobre-lleno); box-shadow: none; }
@media (hover: hover) { .portada .acciones .boton:not(.boton-claro):hover, .menu nav .boton:hover, .cita .boton:not(.boton-claro):hover { background: var(--boton-blanco-hover); color: var(--sobre-lleno); } }
.boton-claro { background: rgba(244,245,247,.06); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--filo-2); }
@media (hover: hover) { .boton-claro:hover { background: rgba(244,245,247,.12); } }
.repite { background: rgba(244,245,247,.06); color: var(--tinta); }

/* ── Fuera las líneas del cajetín: nada de reglas arriba y abajo ni de celdas partidas por líneas. Lo que contiene es una
   tarjeta de cristal, como la bandeja de la portada, y entre tarjetas hay aire ── */
.cajetin, .partes, .pasos, .hoy, .pestanas, .faq details, .faq details:first-child, .faq details:last-child, .fila, .fila:last-child, .cuentas, .cuentas th, .cuentas td, .cuentas .suma td, .filas .total, .tabla-cab, .pendiente { border: 0; }
.cajetin > * + *, .parte + .parte, .paso + .paso, .hoy > * + *, .pestana + .pestana, .cuentas td + td, .cuentas th + th { border-left: 0; border-top: 0; }
.cajetin, .partes, .pasos, .hoy { gap: 12px; }
.tabla, .etapa, .nodo, .caso-tarjeta, .nunca li, .desplegable-lista, .cajetin > *, .parte, .paso, .hoy > *, .fila, .faq details, .cuentas, .pestanas,
.columna, .panel, .crm, .pantalla, .freno, .ficha-viva, .pieza-sis, .capa, .puerta-sis {
  background: var(--cristal); border: 1px solid var(--filo); border-radius: 16px; box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.nodo, .nunca li, .fila, .faq details { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cajetin > *, .parte, .hoy > * { padding: 18px 20px; }
.fila { padding: 22px 24px; margin-bottom: 10px; }
.faq details { margin-bottom: 10px; } .faq details p { padding: 0 24px 22px; }
.cuentas { border-collapse: separate; border-spacing: 0; overflow: hidden; }
.cuentas td { border-top: 1px solid var(--filo); } .cuentas tr:first-child td { border-top: 0; }
.cuentas .suma td { background: rgba(26,178,255,.1); }
.linea { border-top: 1px solid var(--filo); }
.etapa-cab { position: static; padding: 0; background: none; margin-bottom: 4px; }
.etapa { padding: 18px 16px 16px; }
.nodo.marca { background: var(--acento-suave); border-color: rgba(26,178,255,.45); }
.nodo.puerta { border-color: rgba(244,245,247,.55); }
.pestanas { padding: 6px; gap: 6px; display: grid; }
.pestana { border-radius: 10px; background: transparent; } @media (hover: hover) { .pestana:hover { background: rgba(244,245,247,.06); } }
.pestana[aria-selected="true"] { background: var(--marino); } .pestana[aria-selected="true"] small { color: rgba(11,15,23,.7); }
.pestana::after { left: 12px; right: 12px; width: auto; transform: scaleX(var(--avance, 0)); transform-origin: left; bottom: 4px; height: 2px; border-radius: 2px; background: var(--cota); }
@media (hover: hover) { .caso-tarjeta:hover { background: rgba(244,245,247,.07); border-color: var(--filo-2); } }
.pendiente { background: linear-gradient(90deg, rgba(26,178,255,.12), rgba(26,178,255,.02)); }
.desplegable-lista { background: rgba(19,26,38,.94); }
.menu { background: rgba(11,15,23,.66); } .menu::after { display: none; }
.linea .n, .paso .num { color: var(--cota); }
@media (hover: hover) { a.linea:hover { background: rgba(244,245,247,.04); } }
footer { border-top: 1px solid var(--filo); }

/* ── Fuera las cotas: «30 min · sin coste» queda como nota; las horas de la semana, una barra; «7 esperan» ya lo dice la bandeja ── */
.cota-y { display: none !important; }
.metal .escena-portada { grid-template-columns: minmax(0, 1fr); }
.llamada .cota { height: auto; border: 0; background: none; color: var(--tinta-3); text-align: center; }
.llamada .cota::before, .llamada .cota::after { display: none; }
.llamada .cota b { position: static; translate: none; padding: 0; background: none; font-size: 10.5px; letter-spacing: .1em; }
.regla .cota { height: 6px; border: 0; border-radius: 3px; background: var(--cota); }
.regla .cota::before, .regla .cota::after { display: none; }
.regla .cota b, .regla .cota.larga b { color: var(--tinta); background: none; font-size: 12px; }
.regla .cota.larga b { left: calc(100% + 10px); translate: 0 -50%; padding: 0; }
.regla .escala { height: 6px; margin-top: -6px; border: 0; border-radius: 3px; background: rgba(244,245,247,.1); position: relative; z-index: -1; }

/* ── La portada, como wealthcore: el texto centrado en su columna; a la derecha, la bandeja sobre el panel metálico.
   El metal es una capa aparte (.metal-fondo) que animacion.js abre hacia la izquierda al bajar, hasta ser el fondo de los casos ── */
.escenario { position: relative; isolation: isolate; }
.metal-fondo { position: absolute; inset: 0; z-index: -1; background: var(--metal); background-size: 140% 100%; clip-path: inset(0 0 0 70%); }
.metal-fondo::after { content: ""; position: absolute; inset: 0; background: var(--velo); opacity: var(--velo-o, 0); }
.portada.con-metal { padding: 0; display: grid; grid-template-columns: 70fr 30fr; min-height: 100svh; text-align: center; }
.con-metal .texto { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px clamp(24px, 4vw, 64px) 72px; }
.con-metal h1 > span { display: block; }
@media (min-width: 981px) { .con-metal h1 > span { white-space: nowrap; } }   /* tres líneas, una por verbo */
.con-metal h1 { font-size: clamp(38px, 4.2vw, 64px); }
.con-metal .entrada { margin: 22px auto 30px; max-width: 46ch; }
.con-metal .acciones { justify-content: center; }
.con-metal .cajetin { order: -1; margin: 0 0 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; grid-template-columns: none; }
.con-metal .cajetin > * { padding: 7px 12px; border-radius: var(--radio-boton); font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); box-shadow: none; }
.con-metal .cajetin span { display: inline; margin: 0 6px 0 0; color: var(--tinta-3); }
.metal { position: relative; display: grid; place-items: center; align-content: center; gap: 22px; padding: 110px 40px 56px; }
.metal .escena-portada { margin: 0; width: min(440px, 100%); }
.metal .tabla { background: rgba(11,15,23,.8); border-color: rgba(244,245,247,.2); }
/* el pie va en cristal oscuro: sobre el punto claro del metal, a pelo, daba 3,4:1 y 2,0:1 (medido sobre píxeles, 10/11) */
.metal .pie-metal { text-align: center; background: var(--cristal-osc); border: 1px solid var(--filo); border-radius: 16px; padding: 12px 22px; } .metal .pie-metal b { display: block; font-weight: 400; font-size: 18px; letter-spacing: -.01em; } .metal .pie-metal span { color: var(--tinta-2); font-size: 13px; }
.escenario #casos { background: none; }

/* ── Después, las secciones alternan carbono y metal para separar la información (la segunda, la cuarta…) ── */
main > section.cita, main > section.bloque:nth-last-of-type(odd) { background: var(--velo), var(--metal); background-size: 100% 100%, 140% 100%; }
main > section.bloque:nth-last-of-type(even) { background: var(--fondo); }
:is(main > section.cita, main > section.bloque:nth-last-of-type(odd), .escenario #casos) :is(.tabla, .caso-tarjeta, .paso, .fila, .faq details, .cuentas, .panel, .crm, .pieza-sis, .puerta-sis) { background: var(--cristal-osc); }
/* 7 · sobre el metal, los grises suben: el fondo es más claro que el carbono (medido sobre el color pintado) */
:is(main > section.cita, main > section.bloque:nth-last-of-type(odd), .escenario) { --tinta-2: #C6C9CF; --tinta-3: #AEB2B9; --sobre-marino: #D4D7DC; --sobre-marino-2: #C6C9CF; --sobre-marino-3: #AEB2B9; }
.cita .quien { padding: 18px; border: 1px solid var(--filo); border-radius: 16px 16px 0 0; border-bottom: 0; background: var(--cristal-osc); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cita p { color: var(--sobre-marino); }

/* ── La cinta: los procesos, pasando despacio. No son logos de clientes: no los hay ── */
.cinta { overflow: hidden; padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cinta div { display: flex; gap: 56px; width: max-content; animation: cinta 40s linear infinite; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
@keyframes cinta { to { transform: translateX(-50%); } }

.metal .linea { grid-template-columns: 32px 1fr; } .metal .linea .et { display: none; } .metal { padding-inline: 24px; }   /* 17 · en el 30 % no cabe la columna del rótulo */
@media (max-width: 980px) {
  .portada.con-metal { grid-template-columns: 1fr; min-height: 0; }
  .con-metal .texto { padding: 104px 22px 40px; }
  .metal { padding: 40px 16px 48px; }
  .metal-fondo { clip-path: none; }
  .metal-fondo::after { opacity: 1; }
  .escenario .portada .texto { background: var(--fondo); }
  .cita .quien { border-radius: 16px; border-bottom: 1px solid var(--filo); }
  .cajetin, .partes, .pasos, .hoy { gap: 10px; }
  .con-metal .cajetin > * { border-radius: 12px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { body::after, .cinta div { animation: none !important; } .metal-fondo { clip-path: none; } .metal-fondo::after { opacity: 1; } }
@media (prefers-reduced-transparency: reduce) { .tabla, .etapa, .nodo, .caso-tarjeta, .nunca li, .desplegable-lista, .cajetin > *, .parte, .paso, .hoy > *, .fila, .faq details, .cuentas, .pestanas, .cita .quien { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--superficie); } }

/* ══ NOVENA VUELTA (10/11): sus 17 puntos sobre la web; el número de cada regla es el de su lista (PROPUESTA-0911.md) ══ */

/* 2, 10 y 11 · La escena de los casos, como el esquema de /sistema: sin tarjeta detrás de cada columna; el rótulo de la
   columna es su cabecera, en mono celeste; las tarjetas, compactas y oscuras, con la etiqueta en celeste */
.flujo .etapa { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 12px; }
.etapa-cab, .col-cab { position: static; padding: 0; margin: 0 0 4px; background: none; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cota) !important; }
.flujo .nodo { background: var(--cristal-osc); border: 1px solid var(--filo); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); }
.flujo .nodo .suceso { color: var(--cota); }
.flujo .nodo.marca { background: rgba(26,178,255,.1); border-color: rgba(26,178,255,.4); }
.flujo .nodo.marca .suceso { color: var(--cota); }
.flujo .nodo.puerta { border-color: rgba(244,245,247,.5); }
.flujo .aprobar { border: 0; border-radius: 6px; padding: 8px 12px; background: var(--cota); color: var(--sobre-lleno); }
@keyframes aprueba { 0% { transform: none; } 40% { transform: scale(.94); } 100% { transform: none; } }

/* 15 · El final de la escena, en un bloque: «Ver otra vez» pequeño a la derecha bajo la escena; el reparto y «No lo hace
   solo» en una sola tarjeta; «Ver el caso en detalle» centrado; «Más casos», pastillas pequeñas centradas */
.repite { display: block; margin: 14px 0 0 auto; padding: 8px 14px; font-size: 12.5px; border-radius: var(--radio-boton); }
.reparto { margin-top: 24px; padding: 20px; background: var(--cristal-osc); border: 1px solid var(--filo); border-radius: 16px; box-shadow: var(--sombra); }
.reparto .partes { margin: 0; gap: 0; }
.reparto .parte { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 16px; }
.reparto .parte + .parte { border-left: 1px solid var(--filo); }
.reparto .nunca { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--filo); justify-content: center; }
.reparto .nunca li { background: none; box-shadow: none; }
.caso-entero { margin-top: 24px; text-align: center; }
.casos-otros { justify-content: center; gap: 8px; margin-top: 48px; padding-top: 0; border-top: 0; }
.casos-otros > span { flex-basis: 100%; text-align: center; margin: 0 0 6px; }
.casos-otros .boton-peque { padding: 8px 14px; border-radius: var(--radio-boton); font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* 3 · «Cómo empezamos»: cada paso, número y título juntos y «Sale» al pie; la fila de abajo, separada por el mismo aire */
.pasos { grid-template-rows: none; align-items: stretch; }
.paso { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; padding: 20px; }
.paso .num { margin-bottom: 8px; }
.paso .sale { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--filo); }
.paso p:not(.sale) { margin-bottom: 18px; }
.partes.cuatro { margin-top: 12px; gap: 12px; }

/* 4 · «Quién soy», tarjeta entera: centrada en el alto del cierre, foto redonda, nombre fino y rótulo en mono */
.cita .quien { top: 50%; bottom: auto; transform: translateY(-50%); border: 1px solid var(--filo) !important; border-radius: 16px !important; padding: 22px; }
.quien-cab img { width: 56px; height: 56px; border-radius: 50%; }
.cita .quien h3 { font-weight: 400; font-size: 18px; letter-spacing: -.01em; }
.cita .quien .lugar { font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* 5 y 6 · Cabeceras de las páginas interiores: aire debajo y, como en la portada, las tarjetas pasan a pastillas sobre el título */
.portada:not(.con-metal) { padding-bottom: 88px; }
.portada:not(.con-metal) > .contenedor > div { display: flex; flex-direction: column; align-items: center; }
.portada:not(.con-metal) .miga { order: -2; }
.portada:not(.con-metal) .cajetin { order: -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; grid-template-columns: none; }
.portada:not(.con-metal) .cajetin > * { padding: 7px 12px; border-radius: var(--radio-boton); font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); box-shadow: none; }
.portada:not(.con-metal) .cajetin span { display: inline; margin: 0 6px 0 0; color: var(--tinta-3); }

/* 16 · Las notas que explican un cuadro: un solo formato, centradas, pequeñas, sin sombra */
.pie-cuadro, .esquema-pie, .capas-pie, .comprueba { margin: 20px auto 0; max-width: 64ch; text-align: center; font-size: 14px; line-height: 1.55; color: var(--tinta-2); background: none; box-shadow: none; }
.cuentas td + td { border-top: 1px solid var(--filo); }
.cuentas tr:first-child td { border-top: 0; }

/* 1 · La cinta: cuatro vueltas en el HTML, así cada mitad cubre también las pantallas anchas */

@media (max-width: 980px) {
  .reparto .parte + .parte { border-left: 0; border-top: 1px solid var(--filo); }
  .reparto .parte { padding: 12px 4px; }
  .cita .quien { transform: none; }
}

/* ══ DÉCIMA VUELTA (10/11, `web-v3-oscura-2`): sus 14 puntos dictados sobre la web; el número es el de su lista
   (PROPUESTA-0911.md, «Décima vuelta») ══ */

/* 8, 9 y 14 · Una sola letra en toda la web (su «Fuera de toda la web»): la de máquina de escribir se va. Los rótulos
   quedan en Geist, pequeños, en mayúsculas y con aire entre letras; lo demás, en minúsculas como texto normal */
:root { --mono: var(--sans); }
.tabla-cab, .cajetin span, .parte h3, .hoy h2, .paso .num, .paso .sale span, .etapa-cab, .col-cab, .nodo .suceso, .cuentas th, .nunca > span,
.comprueba span, .miga, .casos-otros > span, .pestana small, .caso-tarjeta .quien, .cita .quien .lugar, .panel-cab, .freno-cab {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.desplegable-lista small, .llamada .cota b, .casos-otros .boton-peque, .cinta div { font-family: var(--sans); text-transform: none; letter-spacing: 0; }

/* 8 · El desplegable de «Casos»: el sector, en la letra del nombre, más pequeño y gris; el mismo hueco en todos (la fila
   de la rejilla estiraba el hueco del que tenía al lado un sector de dos líneas) */
.menu nav .desplegable-lista a { align-content: start; gap: 2px; }
.desplegable-lista small { font-size: 12.5px; font-weight: 400; color: var(--tinta-3); }

/* 9 · «30 min · sin coste»: una nota, en la letra del texto */
.llamada .cota b { font-size: 12.5px; font-weight: 400; text-transform: lowercase; }

/* 1 · Las pastillas de la portada fuera: a quién va, qué hago y dónde, en una línea de texto bajo los botones, como el
   pie de la portada de wealthcore. Sin cajas, centrado; en el móvil, una línea por dato */
.con-metal .cajetin { order: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 44px 0 0; max-width: none; }
.con-metal .cajetin > * { white-space: nowrap; }
.con-metal .cajetin > * { display: inline; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; font: 400 13.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinta-2); text-align: center; }
.con-metal .cajetin > * + *::before { content: "·"; margin: 0 12px; color: var(--tinta-3); }
.con-metal .cajetin span { display: none; }
@media (max-width: 980px) {
  .con-metal .cajetin { flex-direction: column; align-items: center; gap: 4px; margin-top: 36px; }
  .con-metal .cajetin > * + *::before { display: none; }
}

/* 2, 4 y 6 · Los textos que explican un cuadro («El freno no es una promesa…», «El resultado es la hoja…», «Cómo se
   comprueba»): dejan de ser párrafos sueltos y son una tarjeta de cristal, como todo lo que contiene, con el texto a la izquierda */
.esquema-pie, .capas-pie, .comprueba { max-width: 760px; margin: 28px auto 0; padding: 20px 24px; text-align: left;
  font-size: 15px; line-height: 1.6; color: var(--tinta-2); background: var(--cristal-osc); border: 1px solid var(--filo); border-radius: 16px;
  box-shadow: var(--sombra); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.comprueba span { display: block; margin-bottom: 6px; color: var(--cota); }

/* 5 · El reparto («Un programa / La IA / Tú»): sin las líneas entre columnas; las separa el aire */
.reparto .partes { gap: 8px 32px; }
.reparto .parte + .parte { border: 0; }

/* 7 · «El mismo reparto, en otros procesos»: los doce, y el que estás viendo, marcado y sin enlace */
.caso-tarjeta.aqui { border-color: rgba(26,178,255,.45); background: rgba(26,178,255,.08); }
.caso-tarjeta.aqui .ver { color: var(--tinta-2); }

@media (max-width: 980px) {
  .reparto .parte + .parte { border: 0; }
}

/* 14 · La escala de letra, contada (había 18 tamaños entre 10,5 y 24 px): rótulo 11 en mayúsculas · dato pequeño 13 ·
   dato de fila y botones 14,5 · texto de tarjeta 15 · entradilla 17 · título de tarjeta 17 · título de paso 22. El menú
   (13,5) y las cifras grandes quedan aparte. Lo propio de /sistema, en sistema.css */
.tabla-cab span { font-size: 11px; }
.hoja-cab .estado, .nodo small, .linea small, .llamada .cota b, .repite, .op, .calc td, .v-regla, .pie-metal span, footer nav a, .desplegable-lista small { font-size: 13px; }
.flujo .aprobar { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.menu nav .desplegable-lista a, .desplegable-lista a.todos, .pie-cuadro, .caso-tarjeta .ver { font-size: 14.5px; }
.quien p, .linea > span, .pestana strong { font-size: 15px; }
.entrada, .ficha .entrada, .con-metal .entrada { font-size: 17px; }
.hoja-cab strong, .nodo .accion { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.paso h3 { font-size: 22px; }

/* Contraste medido sobre píxeles en todas las páginas (10/11): el gris tenue en rótulos de 11 px daba 4,1:1 sobre las
   tarjetas del carbono (cabeceras de la tabla de cuentas) ⇒ un punto más claro; el celeste de los rótulos pequeños sobre el
   metal daba 4,45:1 ⇒ el mismo celeste, más claro sólo ahí. Sobre el metal, el gris ya sube en su bloque (punto 7 de la novena) */
:root { --tinta-3: #9499A3; }

/* 10 · La bandeja viva (su elección): cada aviso dice de dónde llega y a qué hora; al cargar, el sistema lo «lee» (se ve lo
   que llegó tal cual) y lo deja preparado, uno tras otro; abajo, lo que se ha devuelto hoy. Sin script, todo preparado */
.metal .escena-portada { width: min(480px, 100%); }
.bandeja-viva .tabla-cab { display: flex; justify-content: space-between; align-items: center; }
.en-vivo { display: inline-flex; align-items: center; gap: 8px; }
.en-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cota); box-shadow: 0 0 0 0 rgba(26,178,255,.6); animation: latido 2.4s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(26,178,255,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(26,178,255,0); } }
.bandeja-viva .cuerpo { position: relative; display: block; }
.bandeja-viva .origen, .bandeja-viva .crudo { display: block; font-style: normal; }
.bandeja-viva .origen { margin-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cota); }
.bandeja-viva .titulo { display: block; font-weight: inherit; }
.bandeja-viva .crudo { position: absolute; left: 0; right: 0; top: 19px; font-size: 14.5px; line-height: 1.4; color: var(--tinta-2); opacity: 0; pointer-events: none; }
.bandeja-viva .titulo, .bandeja-viva .cuerpo small, .bandeja-viva .n { transition: opacity .35s var(--sale), filter .35s var(--sale); }
.bandeja-viva .crudo { transition: opacity .3s var(--sale); }
.bandeja-viva .linea.leyendo .titulo, .bandeja-viva .linea.leyendo .cuerpo small, .bandeja-viva .linea.leyendo .n { opacity: 0; filter: blur(4px); }
.bandeja-viva .linea.leyendo .crudo { opacity: 1; background: linear-gradient(90deg, var(--tinta-3) 0 30%, var(--tinta) 45%, var(--tinta-3) 60% 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lee 1.2s linear infinite; }
@keyframes lee { from { background-position: 100% 0; } to { background-position: 0 0; } }
.bandeja-viva .linea.en-cola { opacity: .35; }
.bandeja-viva .linea.recien { background: rgba(26,178,255,.07); }
/* La franja del pedido se ilumina cuando le llega su turno, entera y sin otro rectángulo dentro (él, 10/11). El brillo va en
   ::before para que se encienda con transición (un degradado no la tiene) */
.bandeja-viva .pendiente { position: relative; isolation: isolate; background: none; }
.bandeja-viva .pendiente::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(26,178,255,.12), rgba(26,178,255,.02)); transition: opacity .6s var(--sale); }
.bandeja-viva .pendiente:has(.en-cola, .leyendo)::before { opacity: 0; }
.bandeja-viva .pendiente .linea.recien { background: none; }
.metal .bandeja-viva .linea { grid-template-columns: 1fr; }   /* sin columna de número: la cantidad va en el título (él, 10/11) */
.bandeja-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid var(--filo); font-size: 13px; color: var(--tinta-2); }
.bandeja-pie b { font-weight: 300; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; }
.bandeja-pie.listo b { color: var(--cota); transition: color .6s; }
@media (prefers-reduced-motion: reduce) { .en-vivo::before, .bandeja-viva .linea.leyendo .crudo { animation: none; } }
:is(main > section.cita, main > section.bloque:nth-last-of-type(odd), .escenario) :is(.col-cab, .etapa-cab, .flujo .nodo .suceso) { color: #5CC6FF !important; }

/* «Cómo lo hacemos» (él, 10/11, opción A): número, título, texto y «Sale» a la misma altura en los cinco pasos, y los cuatro
   compromisos en UNA franja de cristal, para que no parezcan otra rejilla de cuatro bajo la de cinco */
@media (min-width: 981px) {
  .pasos.cinco { grid-template-rows: repeat(4, auto); }
  .pasos.cinco .paso { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .pasos.cinco .paso .sale { margin-top: 0; align-self: start; }
}
.partes.cuatro { gap: 0; background: var(--cristal-osc); border: 1px solid var(--filo); border-radius: 16px; box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.partes.cuatro .parte { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.partes.cuatro .parte + .parte { border-left: 1px solid var(--filo); }
@media (max-width: 980px) {
  .partes.cuatro .parte:nth-child(3) { border-left: 0; }
  .partes.cuatro .parte:nth-child(n+3) { border-top: 1px solid var(--filo); }
}

/* ══ REVISIÓN DE LA PUBLICADA (él, 10/11) ══ */
/* Las pestañas de casos en el móvil: repartían el ancho por columnas desiguales con el texto a la izquierda y sobraba
   hueco a la derecha. Ahora llenan la fila y cada nombre va centrado en la suya */
@media (max-width: 560px) {
  .pestanas { display: flex; } .pestana { flex: 1 1 auto; text-align: center; justify-items: center; }
}
/* «No lo hace solo», centrado: el rótulo y las pastillas. En el móvil, una bajo otra; y en la portada, donde el reparto
   se oculta, sin la raya ni el aire de arriba que lo separaban de él */
.nunca, .nunca ul { justify-content: center; }
@media (max-width: 560px) {
  .nunca { flex-direction: column; } .nunca ul { flex-direction: column; align-items: center; }
  #casos .reparto .nunca { margin-top: 0; padding-top: 0; border-top: 0; }
}
/* El final de cada caso: «Reserva tu llamada» y «Ver el servicio» iban pegados (sin aire entre los dos) */
.cita-botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* BOCETO A (13/11, él: «la 3, más pequeño y más lento», antes de «Por dónde empezar»): una frase del dueño cada ~5 s y rayas que se pulsan (13/11).
   Sin JS o con «menos movimiento» se ven las cinco seguidas. Las cinco van en la misma celda: la altura no salta. */
.problema { display: grid; gap: 6px; max-width: 40ch; margin: 0 auto 56px; text-align: center; }
.problema > span { margin-bottom: 6px; font: 500 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.problema p { margin: 0; font-family: var(--titular); font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35; color: var(--tinta); }
.problema.rota p { grid-area: 2 / 1; align-self: center; opacity: 0; transition: opacity .8s; }
.problema.rota p.on { opacity: 1; }
.problema .puntos { grid-area: 3 / 1; display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
/* La raya mide 18 × 3 px, pero se pulsa en 22 × 24 (el relleno): con el dedo, una raya de 3 px no se acierta */
.problema .puntos button { width: 22px; height: 24px; padding: 10px 2px; border: 0; border-radius: 4px; background: var(--filo) content-box; cursor: pointer; transition: background-color .8s; }
.problema .puntos button.on { background-color: var(--cota); }
.problema .puntos button:focus-visible { outline: 2px solid var(--cota); outline-offset: 0; }
#casos .caso-entero { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Empalmes (él, 12/11: «cuando acaba el fundido tipo acero, corta abruptamente»): cada tramo de metal se funde con el
   carbono en sus bordes; el centro de cada sección conserva su color, así que la alternancia se sigue viendo */
:root { --empalme: 140px; }
@media (max-width: 980px) { :root { --empalme: 80px; } }
main > section.cita, main > section.bloque:nth-last-of-type(odd) {
  background: linear-gradient(var(--fondo), transparent var(--empalme), transparent calc(100% - var(--empalme)), var(--fondo)), var(--velo), var(--metal);
  background-size: 100% 100%, 100% 100%, 140% 100%; }
.metal-fondo { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--empalme)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--empalme)), transparent); }