/* ==========================================================================
   apWebAI · sistema «tres lectores» (común a todas las webs del ecosistema)
   Una variable, --t, lleva la página del papel (persona) a la tinta (máquina):
   colores, peso y el eje MONO de la tipografía salen de ella. Encima, tres
   vistas: persona (la página), asistente (la página como Markdown) y agente
   (la página reducida a entidades, ofertas, acciones y recursos).
   Rejilla editorial asimétrica; una sola familia variable con tres voces.
   ========================================================================== */
@font-face {
  font-family: "Recursive apWebAI";
  src: url("../assets/recursive-apwebai.woff2") format("woff2-variations"),
       url("../assets/recursive-apwebai.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mono { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --casl { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  /* Persona: papel técnico frío y tinta de marca */
  --p-papel: #F1F0F5;
  --p-papel-2: #E6E4EE;
  --p-tinta: #14121D;
  --p-tinta-2: #4A4658;
  --p-regla: #C9C5D6;
  --p-accion: #6D28D9;
  --p-accion-tinta: #FFFFFF;
  --p-foto: #6D28D9;
  /* Máquina: tinta profunda, texto frío y cian como única señal */
  --m-papel: #0E0D14;
  --m-papel-2: #181622;
  --m-tinta: #CDEFF5;
  --m-tinta-2: #7FA3AB;
  --m-regla: #1E3940;
  --senal: #22D3EE;
  --senal-tinta: #0E0D14;
  --lila: #C4B5FD;
  --sombra: rgba(11, 10, 16, .45);
  --p-ko: #B42318; --p-aviso: #8A5A00;
  --m-ko: #FDA29B; --m-aviso: #F2C14E;

  /* De persona (0) a máquina (1) */
  --t: 0;
  --papel: color-mix(in oklab, var(--m-papel) calc(var(--t) * 100%), var(--p-papel));
  --papel-2: color-mix(in oklab, var(--m-papel-2) calc(var(--t) * 100%), var(--p-papel-2));
  --tinta: color-mix(in oklab, var(--m-tinta) calc(var(--t) * 100%), var(--p-tinta));
  --tinta-2: color-mix(in oklab, var(--m-tinta-2) calc(var(--t) * 100%), var(--p-tinta-2));
  --regla: color-mix(in oklab, var(--m-regla) calc(var(--t) * 100%), var(--p-regla));
  --accion: color-mix(in oklab, var(--senal) calc(var(--t) * 100%), var(--p-accion));
  --accion-tinta: color-mix(in oklab, var(--senal-tinta) calc(var(--t) * 100%), var(--p-accion-tinta));
  --foto: color-mix(in oklab, var(--m-papel-2) calc(var(--t) * 100%), var(--p-foto));
  --ko: color-mix(in oklab, var(--m-ko) calc(var(--t) * 100%), var(--p-ko));
  --aviso: color-mix(in oklab, var(--m-aviso) calc(var(--t) * 100%), var(--p-aviso));
  --mono: var(--t);
  --casl: 0;

  /* Tipo: una familia, tres voces */
  --f: "Recursive apWebAI", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.125rem;
  --t-l: 1.375rem;
  --t-xl: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --t-xxl: clamp(2.5rem, 1.1rem + 4.6vw, 5.25rem);

  /* Medidas */
  --ancho: 78rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --lectura: 38rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-papel: #15131D; --p-papel-2: #1F1C2A; --p-tinta: #ECEAF3; --p-tinta-2: #A7A2B8; --p-regla: #353047;
    --p-accion: #A78BFA; --p-accion-tinta: #14121D; --p-foto: #4C1D95; --p-ko: #FDA29B; --p-aviso: #F2C14E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --p-papel: #15131D; --p-papel-2: #1F1C2A; --p-tinta: #ECEAF3; --p-tinta-2: #A7A2B8; --p-regla: #353047;
  --p-accion: #A78BFA; --p-accion-tinta: #14121D; --p-foto: #4C1D95; --p-ko: #FDA29B; --p-aviso: #F2C14E;
  color-scheme: dark;
}
:root[data-vista="asistente"], :root[data-vista="agente"] { color-scheme: dark; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* que ningún display de componente gane al atributo hidden */
* { font-variation-settings: "MONO" var(--mono), "CASL" var(--casl); }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; font-family: var(--f); font-size: var(--t-m); line-height: 1.6; font-weight: 400;
  background: var(--papel); color: var(--tinta);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.08; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accion); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etiqueta { font-size: var(--t-xs); --mono: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); font-weight: 500; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--papel); border-bottom: 1px solid var(--regla); }
.cabecera .envoltura { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.marca { display: flex; align-items: center; flex: none; text-decoration: none; color: var(--tinta); }
.marca img { height: 2.25rem; width: auto; }
.marca .logo-oscuro { display: none; }
.marca .marca-texto { display: none; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca .logo-claro { display: none; }
  :root:not([data-theme="light"]) .marca .logo-oscuro { display: block; }
}
:root[data-theme="dark"] .marca .logo-claro { display: none; }
:root[data-theme="dark"] .marca .logo-oscuro { display: block; }
:root[data-vista="asistente"] .marca img, :root[data-vista="agente"] .marca img { display: none !important; }
:root[data-vista="asistente"] .marca .marca-texto, :root[data-vista="agente"] .marca .marca-texto { display: inline; }
.cabecera nav { margin-left: auto; min-width: 0; }
.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-s); }
.menu a { color: var(--tinta); text-decoration: none; white-space: nowrap; }
.menu a:hover { color: var(--accion); }
.lectura { display: flex; align-items: center; gap: .6rem; flex: none; }
.lectura .etiqueta { white-space: nowrap; }
.interruptor { display: inline-flex; border: 1px solid var(--tinta); border-radius: 3px; padding: 2px; gap: 2px; }
.interruptor button {
  font: inherit; font-size: var(--t-xs); font-weight: 600; --mono: 1; white-space: nowrap;
  border: 0; border-radius: 2px; padding: .35rem .6rem; cursor: pointer; background: transparent; color: var(--tinta);
}
.interruptor button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
:root[data-vista="asistente"] .interruptor, :root[data-vista="agente"] .interruptor { border-color: var(--senal); }
:root[data-vista="asistente"] .interruptor button[aria-pressed="true"], :root[data-vista="agente"] .interruptor button[aria-pressed="true"] { background: var(--senal); color: var(--senal-tinta); }

/* ---------- Escáner: barrido al entrar o salir de la vista agente ---------- */
.escaner { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; view-transition-name: escaner; }
.escaner::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14vh; height: 14vh; opacity: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--senal) 18%, transparent) 70%, var(--senal) calc(100% - 2px), #fff 100%);
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(escaner) { animation: none; }
:root[data-barrido="baja"]::view-transition-new(root) { animation: barrido-baja 1s cubic-bezier(.65,.05,.25,1) both; }
:root[data-barrido="sube"]::view-transition-new(root) { animation: barrido-sube 1s cubic-bezier(.65,.05,.25,1) both; }
@keyframes barrido-baja { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes barrido-sube { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Héroe ---------- */
.heroe {
  position: relative; padding-block: clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--regla) 38%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--regla) 38%, transparent) 1px, transparent 1px);
  background-size: 2rem 2rem; background-position: -1px -1px;
}
.heroe::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 50%, var(--papel)); }
.heroe .envoltura { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.heroe .zona { margin-bottom: 1.25rem; }
.heroe h1 { font-size: var(--t-xxl); font-weight: 820; letter-spacing: -.035em; line-height: 1; }
.heroe h1 .segunda { display: block; color: var(--tinta-2); font-weight: 650; }
.heroe h1, .heroe h1 .segunda { animation: asentar 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes asentar { from { font-weight: 300; } }
.heroe .entrada { margin-top: 1.75rem; font-size: var(--t-l); line-height: 1.5; max-width: var(--lectura); }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 2rem; align-items: center; }
.boton {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; text-decoration: none; font-weight: 650;
  padding: .85rem 1.2rem; border-radius: 3px; border: 1px solid var(--accion); background: var(--accion); color: var(--accion-tinta);
}
.boton:hover { color: var(--accion-tinta); background: color-mix(in oklab, var(--accion) 82%, var(--tinta)); }
.boton small { font-weight: 500; font-size: var(--t-xs); --mono: 1; opacity: .85; white-space: nowrap; }
.enlace-fuerte { font-weight: 600; color: var(--tinta); text-decoration-color: var(--senal); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* Retrato del héroe: la cara que un agente no ve */
.retrato { margin: 0; display: grid; gap: .9rem; }
.retrato .fondo { background: var(--foto); aspect-ratio: 6 / 7; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; border-radius: 3px; }
.retrato img { width: 116%; max-width: none; margin-bottom: -3%; }
.retrato figcaption { --casl: 1; font-size: var(--t-m); line-height: 1.4; }
.retrato figcaption small { display: block; --casl: 0; --mono: 1; font-size: var(--t-xs); color: var(--tinta-2); margin-top: .35rem; letter-spacing: .02em; }

/* ---------- Dial de lectores ---------- */
.dial-zona { border-block: 1px solid var(--tinta); background: var(--papel); position: relative; }
.dial-zona::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .5rem; background: repeating-linear-gradient(to right, var(--tinta) 0 1px, transparent 1px 1rem); opacity: .45; }
.dial { padding-block: 1.75rem 1.25rem; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 1rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.dial-texto { display: grid; gap: .5rem; }
.dial-texto h2 { font-size: var(--t-l); font-weight: 700; letter-spacing: -.01em; }
.dial-texto p { font-size: var(--t-s); color: var(--tinta-2); }
.dial-control { display: grid; gap: .25rem; min-width: 0; }
.dial input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: grab;
}
.dial input[type="range"]:active { cursor: grabbing; }
.dial input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--p-accion), var(--senal) 50%, var(--senal));
}
.dial input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--p-accion), var(--senal) 50%, var(--senal)); }
.dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 2.25rem; height: 2.25rem; margin-top: calc(3px - 1.125rem);
  border-radius: 4px; background: var(--tinta); border: 3px solid var(--papel); box-shadow: 0 0 0 1px var(--tinta), 0 6px 18px -6px var(--sombra);
}
.dial input[type="range"]::-moz-range-thumb {
  width: 2.25rem; height: 2.25rem; border-radius: 4px; background: var(--tinta); border: 3px solid var(--papel); box-shadow: 0 0 0 1px var(--tinta);
}
.dial input[type="range"]:focus-visible { outline: 2px solid var(--accion); outline-offset: 4px; }
.paradas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paradas li:nth-child(2) { text-align: center; }
.paradas li:nth-child(3) { text-align: right; }
.paradas button { font: inherit; background: none; border: 0; padding: .25rem 0; cursor: pointer; color: var(--tinta-2); display: inline-grid; gap: .1rem; text-align: inherit; }
.paradas b { font-size: var(--t-s); font-weight: 700; color: var(--tinta); }
.paradas span { font-size: var(--t-xs); }
.paradas b .apellido { font-size: inherit; }
.paradas button[aria-pressed="true"] b { color: var(--accion); }
.medida-rapida { grid-column: 2; font-size: var(--t-xs); --mono: 1; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.medida-rapida b { color: var(--tinta); font-weight: 650; font-variant-numeric: tabular-nums; }
.medida-rapida .cero { color: var(--accion); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3.5rem, 8vw, 7rem); }
.seccion + .seccion { border-top: 1px solid var(--regla); }
.cabeza { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 1rem clamp(1.5rem, 4vw, 3rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); align-items: baseline; }
.cabeza h2 { font-size: var(--t-xl); font-weight: 760; }
.cabeza p { grid-column: 2; max-width: var(--lectura); color: var(--tinta-2); font-size: var(--t-l); line-height: 1.5; }

/* Frentes */
.frente { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--tinta); }
.frente:last-child { padding-bottom: 0; }
.frente > .etiqueta { padding-top: .45rem; }
.frente h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 740; }
.frente .texto, .frente .prueba { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.frente .prueba > * { min-width: 0; }
.frente .texto > p { max-width: var(--lectura); }

.fichas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--regla); }
.fichas li { border-bottom: 1px solid var(--regla); }
.fichas a { display: block; padding: .55rem .5rem .55rem 0; font-size: var(--t-xs); font-weight: 600; color: var(--tinta); text-decoration: none; line-height: 1.3; }
.fichas a:hover { color: var(--accion); }

.flujo { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; }
.flujo li { counter-increment: paso; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; position: relative; padding-bottom: .9rem; }
.flujo li::before {
  content: counter(paso); --mono: 1; font-size: var(--t-xs); font-weight: 700; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; border: 1px solid var(--tinta); border-radius: 50%; background: var(--papel); position: relative; z-index: 1;
}
.flujo li:not(:last-child)::after { content: ""; position: absolute; left: .8rem; top: 1.6rem; bottom: 0; border-left: 1px solid var(--tinta); }
.flujo li.humano::before { border-color: var(--accion); color: var(--accion); }
.flujo li.humano:not(:last-child)::after { border-left-style: dashed; }
.flujo li span { font-size: var(--t-s); line-height: 1.45; padding-top: .1rem; }
.flujo li em { font-style: normal; color: var(--tinta-2); display: block; font-size: var(--t-xs); --mono: 1; }
.flujo li.humano strong { color: var(--accion); }
.flujo li.destacado::before { border-color: var(--accion); color: var(--accion); }
.flujo li.destacado strong { color: var(--accion); }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla caption { text-align: left; padding-bottom: .5rem; }
.tabla th, .tabla td { text-align: left; padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--regla); vertical-align: top; }
.tabla th { font-weight: 650; }
.tabla td { color: var(--tinta-2); }
.tabla td.precio { text-align: right; color: var(--tinta); white-space: nowrap; --mono: 1; font-variant-numeric: tabular-nums; padding-right: 0; font-weight: 600; }
.tabla td.precio small { font-size: var(--t-xs); font-weight: 400; color: var(--tinta-2); }
/* En la columna estrecha de un frente, «desde» y «+ IVA» en su línea: el texto del medio respira */
.frente .tabla td.precio small { display: block; }

/* Diagnóstico en dos pasos */
.pasos-diagnostico { margin: 0; padding: 0; list-style: none; counter-reset: d; display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.pasos-diagnostico li { counter-increment: d; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--regla); }
.pasos-diagnostico li::before { content: counter(d); --mono: 1; font-weight: 700; color: var(--accion); font-size: var(--t-l); }
.pasos-diagnostico strong { font-size: var(--t-m); display: block; }
.pasos-diagnostico span { font-size: var(--t-s); color: var(--tinta-2); display: block; }
.pasos-diagnostico code { --mono: 1; font-family: inherit; font-size: var(--t-xs); color: var(--tinta-2); }
.pasos-diagnostico a.ir { font-size: var(--t-s); font-weight: 650; white-space: nowrap; }

.captura { margin: 0; display: grid; gap: .75rem; }
.captura .marco { position: relative; border: 1px solid var(--tinta); background: var(--m-papel); padding: .5rem; }
.captura img { width: 100%; }
.captura .cota { position: absolute; --mono: 1; font-size: .75rem; font-weight: 700; line-height: 1; background: var(--accion); color: var(--accion-tinta); padding: .3rem .4rem; border-radius: 2px; }
.captura figcaption { font-size: var(--t-xs); color: var(--tinta-2); }
.captura figcaption ol { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .15rem; }
.herramientas { margin: 0; padding: 0; list-style: none; display: grid; }
.herramientas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding-block: .75rem; border-bottom: 1px solid var(--regla); }
.herramientas li p { grid-column: 1 / -1; font-size: var(--t-s); color: var(--tinta-2); }
.herramientas li a { font-size: var(--t-s); white-space: nowrap; }

/* ---------- Ecosistema ---------- */
.mapa { --rama: 1.75rem; }
.mapa-cabecera, .nodo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 5rem 5rem 6.5rem; gap: 1rem; align-items: baseline; }
.mapa-cabecera { padding-bottom: .6rem; border-bottom: 2px solid var(--tinta); }
.mapa-cabecera span:nth-child(n+3) { text-align: center; }
.raiz-nodo { padding-block: 1rem; border-bottom: 1px solid var(--regla); }
.raiz-nodo .dominio { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 760; }
.ramas { margin: 0; padding: 0; list-style: none; }
.ramas > li { position: relative; padding-left: var(--rama); }
.ramas > li::before { content: ""; position: absolute; left: .55rem; top: 0; bottom: 0; border-left: 1px solid var(--tinta); }
.ramas > li:last-child::before { bottom: auto; height: 1.7rem; }
.ramas > li::after { content: ""; position: absolute; left: .55rem; top: 1.7rem; width: .9rem; border-top: 1px solid var(--tinta); }
.nodo { padding-block: 1rem; border-bottom: 1px solid var(--regla); }
.dominio { --mono: 1; font-weight: 650; overflow-wrap: anywhere; }
.dominio a { color: var(--tinta); text-decoration: none; }
.dominio a:hover { color: var(--accion); }
/* Bloque normal, no rejilla: un enlace seguido de texto («…GitHub</a>.») dejaba el punto en otra fila. */
.nodo .que { display: block; font-size: var(--t-s); color: var(--tinta-2); }
.nodo .que b { display: block; margin-bottom: .15rem; color: var(--tinta); font-weight: 650; }
.marca-si, .marca-no { text-align: center; --mono: 1; font-size: var(--t-xs); font-weight: 700; }
.marca-si { color: var(--accion); }
.marca-no { color: var(--tinta-2); opacity: .7; }
.subpaginas { margin: .35rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: var(--t-xs); }
.subpaginas a { color: var(--tinta-2); }
.mapa-nota { margin-top: 1.25rem; font-size: var(--t-xs); color: var(--tinta-2); max-width: 46rem; }

/* ---------- Banda «tres lectores» (siempre del lado de la máquina) ---------- */
.banda {
  --papel: var(--m-papel); --papel-2: var(--m-papel-2); --tinta: var(--m-tinta); --tinta-2: var(--m-tinta-2); --regla: var(--m-regla);
  --accion: var(--senal); --accion-tinta: var(--senal-tinta); --ko: var(--m-ko); --aviso: var(--m-aviso);
  background: var(--papel); color: var(--tinta); padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: stretch; }
.lado { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: .75rem; min-width: 0; }
.lado figcaption b { color: var(--accion); }
.banda .lado figcaption b { color: var(--senal); }
.ficha {
  background: var(--p-papel); color: var(--p-tinta); border-radius: 3px; padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex; flex-direction: column; gap: .7rem; --mono: 0;
}
.ficha .etiqueta { color: var(--p-tinta-2); --mono: 1; }
.ficha h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.875rem); font-weight: 760; }
.ficha p { color: var(--p-tinta-2); font-size: var(--t-s); }
.ficha .ficha-precio { color: var(--p-tinta); font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--p-regla); }
.ficha .ficha-precio small { font-size: var(--t-s); font-weight: 500; color: var(--p-tinta-2); }
.ficha .ficha-boton { align-self: flex-start; text-decoration: none; font-weight: 650; font-size: var(--t-s); color: var(--p-accion-tinta); background: var(--p-accion); padding: .6rem .9rem; border-radius: 3px; }
.codigo {
  margin: 0; padding: clamp(1rem, 2.5vw, 1.4rem); font: inherit; --mono: 1; font-size: .8125rem; line-height: 1.65;
  background: var(--papel-2); border: 1px solid var(--regla); border-radius: 3px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.codigo.json { white-space: pre-wrap; overflow-wrap: anywhere; }
.codigo .k { color: var(--senal); }
.codigo .n { color: var(--lila); }
.banda .acciones > a:not(.boton) { color: var(--tinta); }

/* Método */
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--tinta); }
.pasos li { counter-increment: paso; padding: 1rem 1.25rem 0 0; position: relative; }
.pasos li::before { content: "0" counter(paso); display: block; --mono: 1; font-weight: 700; font-size: var(--t-s); color: var(--accion); margin-bottom: .75rem; }
.pasos li::after { content: ""; position: absolute; top: -.5rem; left: 0; width: 1px; height: .5rem; background: var(--tinta); }
.pasos h3 { font-size: 1.1875rem; font-weight: 700; margin-bottom: .5rem; }
.pasos p { font-size: var(--t-s); color: var(--tinta-2); line-height: 1.5; }
.principios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); margin: clamp(3rem, 6vw, 4.5rem) 0 0; }
.principios div { padding-block: 1.25rem; border-top: 1px solid var(--regla); display: grid; gap: .4rem; }
.principios dt { font-weight: 720; font-size: var(--t-l); line-height: 1.2; }
.principios dd { margin: 0; color: var(--tinta-2); font-size: var(--t-s); max-width: 34rem; }
.principios-pie { margin-top: 1.5rem; font-size: var(--t-s); }

/* Límites */
.limites { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.limites li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: .75rem; padding-block: 1.1rem; border-top: 1px solid var(--regla); }
.limites li > b { --mono: 1; font-size: var(--t-xs); font-weight: 700; color: var(--accion); padding-top: .3rem; letter-spacing: .04em; }
.limites strong { display: block; font-size: var(--t-m); margin-bottom: .2rem; }
.limites span { color: var(--tinta-2); font-size: var(--t-s); }

/* Pregúntale a esta página */
.preguntas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.buscador { display: grid; gap: 1rem; min-width: 0; }
.pregunta-form { display: grid; gap: .4rem; }
.pregunta-fila { display: flex; gap: .5rem; }
.pregunta-fila input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--t-l); color: var(--tinta); background: var(--papel);
  border: 0; border-bottom: 2px solid var(--tinta); padding: .5rem 0; border-radius: 0;
}
.pregunta-fila input:focus { outline: none; border-bottom-color: var(--accion); }
.pregunta-fila .boton { font: inherit; font-weight: 650; cursor: pointer; }
.sugerencias { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.sugerencias button {
  font: inherit; font-size: var(--t-xs); cursor: pointer; background: none; color: var(--tinta-2);
  border: 1px solid var(--regla); border-radius: 2px; padding: .3rem .55rem;
}
.sugerencias button:hover { color: var(--accion); border-color: var(--accion); }
.resultados { display: grid; gap: .75rem; }
.resultado { border-left: 2px solid var(--accion); padding: .9rem 1.1rem; background: var(--papel-2); display: grid; gap: .5rem; }
.resultado p { font-size: var(--t-s); line-height: 1.55; }
.resultado mark { background: color-mix(in oklab, var(--accion) 18%, transparent); color: inherit; padding: 0 .1em; border-radius: 2px; }
.resultado .fuente { font-size: var(--t-xs); --mono: 1; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: baseline; }
.resultado .fuente button { font: inherit; background: none; border: 0; padding: 0; color: var(--accion); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.resultado.vacio { border-left-color: var(--tinta-2); }
.faq { margin: 0; display: grid; }
.faq div { padding-block: .9rem; border-top: 1px solid var(--regla); display: grid; gap: .3rem; }
.faq dt { font-weight: 680; }
.faq dd { margin: 0; color: var(--tinta-2); font-size: var(--t-s); }
.resaltado { animation: resaltar 2.4s ease both; }
@keyframes resaltar { 0%, 40% { box-shadow: 0 0 0 4px var(--accion); background-color: color-mix(in oklab, var(--accion) 14%, transparent); } 100% { box-shadow: 0 0 0 4px transparent; } }

/* Auditoría en vivo */
.auditoria { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.comprobaciones { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
.comprobaciones li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .75rem; align-items: baseline; padding-block: .7rem; border-bottom: 1px solid var(--regla); font-size: var(--t-s); }
.comprobaciones .estado { --mono: 1; font-weight: 700; }
.comprobaciones .ok { color: var(--accion); }
.comprobaciones .ko { color: var(--ko); }
.comprobaciones .aviso { color: var(--aviso); }
.comprobaciones .info { color: var(--tinta-2); }
.comprobaciones .valor { --mono: 1; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; color: var(--tinta); }
/* En móvil el valor va debajo: «ProfessionalService» en monoespaciada aplastaba el texto a 360 px */
@media (max-width: 560px) { .comprobaciones li { grid-template-columns: 1.75rem minmax(0, 1fr); row-gap: .15rem; } .comprobaciones .valor { grid-column: 2; text-align: left; } }
.nota-auditoria { display: grid; gap: 1.25rem; }
.marcador { font-size: clamp(3.5rem, 2rem + 5vw, 6rem); font-weight: 820; letter-spacing: -.04em; line-height: 1; --mono: 1; font-variant-numeric: tabular-nums; }
.marcador small { font-size: .35em; font-weight: 600; color: var(--tinta-2); letter-spacing: 0; }

/* Sobre mí */
.sobre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sobre h2 { font-size: var(--t-xl); font-weight: 760; }
.sobre .texto { display: grid; gap: 1.25rem; min-width: 0; }
.sobre .texto > p { max-width: var(--lectura); }
.cita-propia { margin: 0; --casl: 1; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.cita-propia footer { margin-top: 1rem; --casl: 0; --mono: 1; font-size: var(--t-xs); color: var(--tinta-2); font-weight: 500; }
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 0; border-top: 1px solid var(--tinta); }
.datos div { padding-top: .9rem; }
.datos dt { font-size: var(--t-xs); color: var(--tinta-2); }
.datos dd { margin: 0; font-size: 1.75rem; font-weight: 760; --mono: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nota { --casl: 1; font-size: var(--t-m); line-height: 1.45; }

/* Lo que escribo */
.escritos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.escritos li { display: grid; gap: .6rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--tinta); }
.escritos a.titulo { color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.escritos a.titulo:hover { color: var(--accion); }
.escritos p { font-size: var(--t-s); color: var(--tinta-2); }
.mas { margin-top: 2rem; font-size: var(--t-s); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Contacto */
.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); }
.contacto h2 { font-size: var(--t-xl); font-weight: 760; }
.directo { display: grid; gap: 1rem; margin: 1.5rem 0; }
.directo div { display: grid; gap: .2rem; padding-top: .75rem; border-top: 1px solid var(--regla); }
.directo dt { font-size: var(--t-xs); color: var(--tinta-2); }
.directo dd { margin: 0; display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.directo dd span { --mono: 1; font-weight: 650; user-select: all; }
.copiar { font: inherit; font-size: var(--t-xs); cursor: pointer; background: none; border: 1px solid var(--regla); color: var(--tinta-2); border-radius: 2px; padding: .15rem .5rem; }
.copiar:hover { border-color: var(--accion); color: var(--accion); }
form.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; align-content: start; }
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; }
.campo input, .campo textarea { font: inherit; font-size: var(--t-m); color: var(--tinta); background: var(--papel); border: 0; border-bottom: 1px solid var(--tinta); padding: .55rem 0; border-radius: 0; width: 100%; }
.campo textarea { min-height: 6.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom: 2px solid var(--accion); }
.formulario .pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.formulario .pie p { font-size: var(--t-xs); color: var(--tinta-2); max-width: 26rem; }
.formulario button.boton { font: inherit; font-weight: 650; cursor: pointer; }
.estado-form { grid-column: 1 / -1; font-size: var(--t-s); --mono: 1; color: var(--accion); min-height: 1.5em; }

/* Pie */
.pie-pagina { border-top: 1px solid var(--tinta); padding-block: 2.5rem 3rem; font-size: var(--t-xs); color: var(--tinta-2); }
.pie-pagina .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; }
.pie-pagina ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.pie-pagina a { color: var(--tinta-2); }
.pie-pagina .ecos a { --mono: 1; }
.pie-pagina .medida { --mono: 1; grid-column: 1 / -1; }

/* ---------- Vista asistente: la página como Markdown ---------- */
.panel-asistente { border-bottom: 1px solid var(--regla); padding-block: 2rem 2.5rem; }
.panel-asistente .envoltura { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); }
.panel-asistente h2 { font-size: var(--t-l); color: var(--senal); }
.panel-asistente .explica { display: grid; gap: .75rem; align-content: start; }
.panel-asistente .explica p { color: var(--tinta-2); font-size: var(--t-s); max-width: 32rem; }
.respuesta { margin: 0; border-left: 2px solid var(--senal); padding: 1rem 1.25rem; background: var(--papel-2); display: grid; gap: .75rem; }
.respuesta .pregunta { font-size: var(--t-s); color: var(--tinta-2); }
.respuesta .texto-respuesta { font-size: var(--t-m); line-height: 1.55; }
.respuesta .texto-respuesta b { color: var(--senal); font-weight: 600; }
.respuesta footer { font-size: var(--t-xs); color: var(--tinta-2); }
:root[data-vista="asistente"] [data-deco], :root[data-vista="agente"] [data-deco] { display: none !important; }
:root:not([data-vista="asistente"]) [data-solo-asistente] { display: none !important; }
:root:not([data-vista="agente"]) [data-solo-agente] { display: none !important; }
:root[data-vista="asistente"] .heroe { background-image: none; }
:root[data-vista="asistente"] main h1::before { content: "# "; color: var(--senal); }
:root[data-vista="asistente"] main h2::before { content: "## "; color: var(--senal); }
:root[data-vista="asistente"] main h3::before { content: "### "; color: var(--senal); }
:root[data-vista="asistente"] main :is(h1, h2, h3) { font-weight: 600; letter-spacing: 0; }
:root[data-vista="asistente"] .heroe h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1.15; }
:root[data-vista="asistente"] .heroe h1 .segunda { display: inline; }
:root[data-vista="asistente"] .marca .marca-texto::before, :root[data-vista="asistente"] .menu a::before { content: "["; color: var(--senal); }
:root[data-vista="asistente"] .marca .marca-texto::after { content: "](https://apwebai.es/)"; color: var(--tinta-2); font-weight: 400; font-size: var(--t-xs); }
:root[data-vista="asistente"] .menu a::after { content: "]"; color: var(--senal); }
:root[data-vista="asistente"] main a::before, :root[data-vista="asistente"] .pie-pagina a::before { content: "["; color: var(--senal); }
:root[data-vista="asistente"] main a::after, :root[data-vista="asistente"] .pie-pagina a::after { content: "](" attr(href) ")"; color: var(--tinta-2); overflow-wrap: anywhere; font-weight: 400; text-transform: none; letter-spacing: 0; }
:root[data-vista="asistente"] .boton, :root[data-vista="asistente"] .ficha-boton { display: inline; padding: 0; border: 0; background: none; color: var(--senal); font-weight: 600; }
:root[data-vista="asistente"] button.boton::before { content: "[botón: "; }
:root[data-vista="asistente"] .ficha .ficha-boton { color: var(--p-accion); text-decoration: underline; text-underline-offset: .2em; }
:root[data-vista="asistente"] .ficha h3::before { content: none; }
/* Asistente: el enlace enseña su URL entera y, en tabla automática, se comía las demás columnas */
:root[data-vista="asistente"] .tabla:has(thead) { table-layout: fixed; }
:root[data-vista="asistente"] button.boton::after { content: "]"; }
:root[data-vista="asistente"] main strong::before, :root[data-vista="asistente"] main strong::after { content: "**"; color: var(--senal); }
:root[data-vista="asistente"] main ul:not([class]) { list-style: none; }
:root[data-vista="asistente"] main ul:not([class]) > li { position: relative; }
:root[data-vista="asistente"] main ul:not([class]) > li::before { content: "-"; color: var(--senal); position: absolute; left: -1.4ch; }
:root[data-vista="asistente"] .flujo li::before { content: counter(paso) "."; border: 0; background: none; width: auto; height: auto; color: var(--senal); display: block; }
:root[data-vista="asistente"] :is(.flujo, .pasos) li::after, :root[data-vista="asistente"] .ramas > li::before, :root[data-vista="asistente"] .ramas > li::after { display: none; }
:root[data-vista="asistente"] .pasos li::before { content: counter(paso) "."; }
:root[data-vista="asistente"] .herramientas li { grid-template-columns: minmax(0, 1fr); }
:root[data-vista="asistente"] :is(.herramientas li a, .pasos-diagnostico a.ir, .fichas a) { white-space: normal; }
:root[data-vista="asistente"] figure[data-alt] > :not(figcaption) { display: none; }
:root[data-vista="asistente"] figure[data-alt]::before {
  content: "![" attr(data-alt) "](" attr(data-src) ")"; display: block; color: var(--tinta);
  border-left: 2px solid var(--senal); padding: .75rem 1rem; background: var(--papel-2); overflow-wrap: anywhere; font-size: var(--t-s);
}
:root[data-vista="asistente"] .retrato figcaption::before, :root[data-vista="asistente"] .nota:not(ul, ol)::before, :root[data-vista="asistente"] .cita-propia::before { content: "> "; color: var(--senal); }
:root[data-vista="asistente"] :is(.retrato figcaption, .nota:not(ul, ol), .cita-propia) { --casl: 0; }
:root[data-vista="asistente"] .cita-propia { font-size: var(--t-l); }
:root[data-vista="asistente"] .dial-zona { border-color: var(--senal); }
:root[data-vista="asistente"] body { overflow-wrap: anywhere; }
:root[data-vista="asistente"] .pie-pagina .envoltura { grid-template-columns: minmax(0, 1fr); }
:root[data-vista="asistente"] .pasos-diagnostico li { grid-template-columns: 2.25rem minmax(0, 1fr); }
:root[data-vista="asistente"] .pasos-diagnostico a.ir { grid-column: 2; }
:root[data-vista="asistente"] .fichas { grid-template-columns: minmax(0, 1fr); }
/* Asistente: «### Priorización» no cabía en seis columnas y el «###» quedaba solo en una línea */
@media (min-width: 561px) { :root[data-vista="asistente"] .pasos:not(.tres, .cuatro, .cinco) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:root[data-vista="asistente"] .menu { column-gap: .75rem; }
:root[data-vista="asistente"] .tabla th { overflow-wrap: normal; }

/* ---------- Vista agente: la página reducida a datos y acciones ---------- */
:root[data-vista="agente"] main > :not(.consola) { display: none !important; }
:root[data-vista="agente"] .menu, :root[data-vista="agente"] .casa, :root[data-vista="agente"] .pie-pagina > .envoltura > :not(.medida) { display: none; }
:root[data-vista="agente"] .marca .marca-texto { color: var(--senal); }
.consola { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.consola .envoltura { display: grid; gap: 2.25rem; --mono: 1; }
.consola .peticion { display: grid; gap: .35rem; font-size: var(--t-s); overflow-wrap: anywhere; }
.consola .envoltura > * { min-width: 0; }
.consola .peticion .verbo { color: var(--senal); font-weight: 700; }
.consola .peticion .respuesta-http { color: var(--tinta-2); }
.consola .peticion .respuesta-http b { color: var(--tinta); }
.consola .intro { max-width: 46rem; color: var(--tinta-2); font-size: var(--t-s); }
.consola .intro b { color: var(--tinta); }
.bloque-consola { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .5rem 1.5rem; border-top: 1px solid var(--regla); padding-top: 1rem; }
.bloque-consola > h2 { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--senal); font-weight: 700; padding-top: .2rem; }
.bloque-consola > h2 span { color: var(--tinta-2); font-weight: 500; }
.filas { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; font-size: var(--t-s); }
.filas li { display: flex; align-items: baseline; gap: .6rem; min-width: 0; animation: aparecer .35s ease both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes aparecer { from { opacity: 0; transform: translateX(-.4rem); } }
.filas .clave { color: var(--tinta-2); flex: none; min-width: 9.5rem; }
.filas .relleno { flex: 1 1 2rem; border-bottom: 1px dotted var(--regla); transform: translateY(-.3em); min-width: 1rem; }
.filas .valor { text-align: right; overflow-wrap: anywhere; min-width: 0; }
.filas .tipo { color: var(--lila); flex: none; min-width: 11.5rem; }
.filas a { color: var(--tinta); }
.filas .ok { color: var(--senal); }
.filas .ko { color: var(--m-ko); }
.consola .acciones-consola { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.consola .acciones-consola .boton { font-size: var(--t-s); }

/* ---------- Adaptación ---------- */
@media (max-width: 1100px) {
  .frente { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .frente > .etiqueta { grid-column: 1 / -1; padding-top: 0; }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .menu { gap: .9rem; }
  .menu li:nth-child(n+4) { display: none; }
}
@media (max-width: 980px) {
  .menu { display: none; }
  .lectura { margin-left: auto; }
  .heroe .envoltura, .sobre, .contacto, .panel-asistente .envoltura, .auditoria { grid-template-columns: minmax(0, 1fr); }
  .retrato { max-width: 20rem; }
  .cabeza, .dial { grid-template-columns: minmax(0, 1fr); }
  .cabeza p, .medida-rapida { grid-column: 1; }
  .frente { grid-template-columns: minmax(0, 1fr); }
  .limites, .principios, .escritos, .tres { grid-template-columns: minmax(0, 1fr); }
  .mapa-cabecera { display: none; }
  .nodo { grid-template-columns: auto auto auto minmax(0, 1fr); column-gap: 1rem; row-gap: .35rem; }
  .nodo .dominio { grid-column: 1 / -1; grid-row: 1; }
  .nodo .marca-si, .nodo .marca-no { grid-row: 2; text-align: left; }
  .nodo .que { grid-column: 1 / -1; grid-row: 3; }
  .preguntas { grid-template-columns: minmax(0, 1fr); }
  .nodo .marca-si, .nodo .marca-no { font-size: .6875rem; }
  .nodo .marca-si::before, .nodo .marca-no::before { content: attr(data-col) " "; color: var(--tinta-2); font-weight: 500; }
  .bloque-consola { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .lectura > .etiqueta { display: none; }
  .marca img { height: 1.75rem; }
  :root[data-vista="asistente"] .marca .marca-texto::after { content: "]"; color: var(--senal); font-size: inherit; }
  .marca .marca-texto { font-size: 1.05rem; }
  .interruptor button { padding: .35rem .45rem; font-size: .75rem; }
  .pasos { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--tinta); padding-left: 1.25rem; row-gap: 1.5rem; }
  .pasos li { padding: 0; }
  .pasos li::after { top: .55rem; left: -1.75rem; width: .5rem; height: 1px; }
  form.formulario { grid-template-columns: minmax(0, 1fr); }
  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos dd { font-size: 1.375rem; }
  .paradas span, .paradas .apellido { display: none; }
  .tabla, .tabla tbody, .tabla caption:not(.solo-lectores) { display: block; width: 100%; }
  .tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; border-bottom: 1px solid var(--regla); padding-block: .6rem; }
  .tabla th, .tabla td { border: 0; padding: 0; grid-column: 1; }
  .tabla td[data-col], .tabla td.num[data-col] { text-align: left; white-space: normal; }
  .tabla td[data-col]::before { content: attr(data-col); display: block; margin-top: .45rem; font-size: var(--t-xs); --mono: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); font-weight: 500; }
  .tabla:has(td[data-col]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .desliza .tabla.tabla { min-width: 0; } /* gana a .desliza .tabla, que va más abajo */
  .tabla td.precio { grid-column: 2; grid-row: 1 / span 2; white-space: normal; }
  .tabla td.precio small { display: block; }
  .pasos-diagnostico li { grid-template-columns: 2rem minmax(0, 1fr); }
  .pasos-diagnostico a.ir { grid-column: 2; }
  .filas li { flex-wrap: wrap; gap: .1rem .6rem; }
  .filas .relleno { display: none; }
  .filas .valor { text-align: left; flex-basis: 100%; }
  .filas .clave.flexible { flex-basis: 100%; }
  .pie-pagina .envoltura { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .escaner { display: none; }
  ::view-transition-new(root) { animation: none !important; }
  .heroe h1, .heroe h1 .segunda, .filas li { animation: none; }
}

/* ==========================================================================
   Componentes de la casa: lo que comparten todas las webs del ecosistema
   ========================================================================== */

/* ---------- La casa: las puertas del ecosistema, iguales en todas las webs ---------- */
.casa { background: var(--tinta); color: var(--papel); font-size: var(--t-xs); --mono: 1; }
.casa .envoltura { display: flex; align-items: center; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.casa .envoltura::-webkit-scrollbar { display: none; }
.casa p { flex: none; letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
.casa ul { display: flex; gap: 1.1rem; margin: 0; padding: 0; list-style: none; flex: none; }
.casa a { display: inline-block; padding-block: .55rem .45rem; color: var(--papel); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.casa a:hover { color: var(--senal); }
.casa a[aria-current="page"] { border-bottom-color: var(--senal); font-weight: 700; }
.casa a:focus-visible { outline-color: var(--senal); outline-offset: -2px; }
:root[data-vista="asistente"] .casa a::before { content: "["; color: var(--senal); }
:root[data-vista="asistente"] .casa a::after { content: "]"; color: var(--senal); }

/* ---------- Rejillas de puntos (dolores, capacidades, qué incluye) ---------- */
.rejilla { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla > li { display: grid; gap: .45rem; align-content: start; padding-block: 1.1rem 1.6rem; border-top: 1px solid var(--tinta); min-width: 0; }
.rejilla > li:only-child { grid-column: 1 / -1; max-width: var(--lectura); }
.rejilla h3 { font-size: 1.1875rem; font-weight: 720; line-height: 1.25; }
.rejilla p { font-size: var(--t-s); color: var(--tinta-2); }
.rejilla p.resultado-linea { color: var(--tinta); }
.rejilla a { font-size: var(--t-s); font-weight: 600; }
.pie-rejilla { margin-top: 1.5rem; font-size: var(--t-s); color: var(--tinta-2); max-width: var(--lectura); }

/* ---------- Listas con marca: lo que incluye (✓) y lo que no (✗) ---------- */
.incluye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); }
.incluye > div { min-width: 0; display: grid; gap: .6rem; align-content: start; }
.marcas { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
/* La marca va en posición absoluta y no en una columna de rejilla: un <li> con contenido mixto
   (texto y <b>) crearía celdas anónimas y el texto caería en la columna de la marca (13/10/2026). */
.marcas li { position: relative; padding: .6rem 0 .6rem 2.1rem; border-bottom: 1px solid var(--regla); font-size: var(--t-s); overflow-wrap: anywhere; }
.marcas li::before { content: "✓"; color: var(--accion); font-weight: 700; position: absolute; left: 0; top: .6rem; width: 1.6rem; }
.marcas.no li::before { content: "✗"; color: var(--ko); }
.marcas.nota li::before { content: "·"; color: var(--tinta-2); }

/* ---------- Los dos lados del pack: asistente (AEO) y agente (ARD) ---------- */
.dos-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.lado-lector { display: grid; gap: .8rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.9rem); border-radius: 3px; min-width: 0; }
.lado-lector.asistente { background: var(--papel-2); border-top: 3px solid var(--senal); }
.lado-lector.agente {
  --papel: var(--m-papel); --papel-2: var(--m-papel-2); --tinta: var(--m-tinta); --tinta-2: var(--m-tinta-2); --regla: var(--m-regla); --accion: var(--senal); --accion-tinta: var(--senal-tinta); --ko: var(--m-ko); --aviso: var(--m-aviso);
  background: var(--papel); color: var(--tinta); border-top: 3px solid var(--senal); --mono: 1;
}
.lado-lector h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.875rem); font-weight: 760; }
.lado-lector p { font-size: var(--t-s); color: var(--tinta-2); }
.lado-lector p.trabajo { font-size: var(--t-xs); --mono: 1; color: var(--tinta); }
.lado-lector .ver { justify-self: start; font: inherit; font-size: var(--t-s); font-weight: 650; cursor: pointer; background: none; border: 0; padding: 0; color: var(--accion); text-decoration: underline; text-underline-offset: .25em; }
.matiz { margin-top: 1.25rem; font-size: var(--t-s); color: var(--tinta-2); max-width: 46rem; }

/* ---------- Herramientas: formulario, informe y sellos de estado ---------- */
.herramienta { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; max-width: 44rem; margin-top: 2rem; }
/* Dos columnas como mucho, de 13rem como poco: en un hueco estrecho, una sola (antes desbordaba en 390 px) */
.marcas.columnas { columns: 2 13rem; column-gap: 1.5rem; border-top: 0; }
.marcas.columnas li { break-inside: avoid; overflow-wrap: break-word; }
/* En la cabecera (ARD, «Resultado real guardado») una sola columna: en dos, «representativeQueries» se partía */
.heroe .marcas.columnas { columns: 1; }
@media (max-width: 560px) { :root[data-vista="asistente"] .marcas.columnas { columns: 1; } }
#ard-resultado:not(:empty) { margin-top: 1.25rem; }
.pregunta-form { grid-template-columns: minmax(0, 1fr); }
.herramienta label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; }
.nota-copia { font-size: var(--t-xs); color: var(--tinta-2); --mono: 1; }
.aviso-caja { border-left: 2px solid var(--aviso); padding: .85rem 1.1rem; background: var(--papel-2); font-size: var(--t-s); display: grid; gap: .35rem; }
.aviso-caja strong { color: var(--tinta); }
.informe { display: grid; gap: 1.75rem; min-width: 0; }
.informe-cabeza { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline; padding-bottom: 1rem; border-bottom: 2px solid var(--tinta); }
.informe-cabeza .dominio { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 760; }
.informe-cabeza .cuando { font-size: var(--t-xs); --mono: 1; color: var(--tinta-2); }
.sello { display: inline-block; --mono: 1; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .5rem; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; }
.sello.ok { color: var(--accion); }
.sello.aviso { color: var(--aviso); }
.sello.ko { color: var(--ko); }
.sello.info { color: var(--tinta-2); }
.veredictos { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2rem); }
.veredictos > div { display: grid; gap: .35rem; align-content: start; padding-top: .9rem; border-top: 1px solid var(--regla); min-width: 0; }
.veredictos dt { font-size: var(--t-xs); color: var(--tinta-2); }
.veredictos dd { margin: 0; font-weight: 680; line-height: 1.35; }
.veredictos dd small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--tinta-2); margin-top: .25rem; }
.desliza { overflow-x: auto; min-width: 0; }
.desliza .tabla { min-width: 34rem; }
.tabla td.num, .tabla th.num { text-align: right; --mono: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla code, .informe code { --mono: 1; font-family: inherit; font-size: .9em; overflow-wrap: anywhere; }
.evidencia { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2rem); }
.evidencia li { display: grid; gap: .3rem; padding-top: .9rem; border-top: 2px solid var(--tinta); align-content: start; }
.evidencia li p { font-size: var(--t-s); color: var(--tinta-2); }
.evidencia .sello { justify-self: start; }
.grupos-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.grupos-check > div { min-width: 0; display: grid; gap: .5rem; }
.heroe .grupos-check { grid-template-columns: minmax(0, 1fr); }
.informe .comprobaciones li > span { min-width: 0; overflow-wrap: anywhere; }
.informe .comprobaciones small { color: var(--tinta-2); font-size: var(--t-xs); }
.editor {
  width: 100%; min-height: 19rem; resize: vertical; font: inherit; --mono: 1; font-size: .8125rem; line-height: 1.6;
  color: var(--m-tinta); background: var(--m-papel); border: 1px solid var(--tinta); border-radius: 3px; padding: 1rem; tab-size: 2;
}
.editor:focus { outline: 2px solid var(--accion); outline-offset: 2px; }
.evaluador { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.evaluador .lado-editor { display: grid; gap: .75rem; min-width: 0; }
.evaluador .fila-botones { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.evaluador .perfil-grupo { display: inline-flex; gap: .6rem; align-items: center; white-space: nowrap; }
.evaluador button.boton { font: inherit; font-weight: 650; cursor: pointer; }
.selector { font: inherit; font-size: var(--t-xs); --mono: 1; padding: .4rem .5rem; border: 1px solid var(--tinta); border-radius: 3px; background: var(--papel); color: var(--tinta); }
.boton-texto { font: inherit; font-size: var(--t-s); cursor: pointer; background: none; border: 0; padding: 0; color: var(--accion); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Mini-diagnóstico ---------- */
.cuestionario { border-top: 2px solid var(--tinta); display: grid; }
.cuestion { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding-block: .85rem; border-bottom: 1px solid var(--regla); }
.cuestion .n { --mono: 1; font-weight: 700; color: var(--accion); font-size: var(--t-s); }
.cuestion p { font-size: var(--t-s); line-height: 1.45; }
.si-no { display: inline-flex; border: 1px solid var(--tinta); border-radius: 3px; padding: 2px; gap: 2px; }
.si-no label { position: relative; cursor: pointer; }
.si-no input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.si-no span { display: block; padding: .35rem .8rem; font-size: var(--t-xs); font-weight: 650; --mono: 1; border-radius: 2px; }
.si-no input:checked + span { background: var(--tinta); color: var(--papel); }
.si-no input:focus-visible + span { outline: 2px solid var(--accion); outline-offset: 2px; }
.diagnostico { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.diagnostico-pie { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1.25rem; }
.diagnostico-pie .boton { font: inherit; font-weight: 650; cursor: pointer; }
.resultado-diagnostico { display: grid; gap: 1rem; align-content: start; position: sticky; top: 6rem; }
.resultado-diagnostico .nivel { font-size: var(--t-xl); font-weight: 760; line-height: 1.1; }
.resultado-diagnostico ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--regla); }
.resultado-diagnostico ol li { padding-block: .6rem; border-bottom: 1px solid var(--regla); font-size: var(--t-s); display: grid; gap: .15rem; }
.resultado-diagnostico ol li strong { font-size: var(--t-m); }
.resultado-diagnostico ol li span { color: var(--tinta-2); }

/* ---------- Galería de capturas reales ---------- */
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.galeria .captura { min-width: 0; }

/* ---------- El hilo: la voz de LinkedIn, en todas las webs ---------- */
.hilo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 1rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.hilo .cita-propia { max-width: 52rem; }
.hilo .cita-propia footer { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.hilo .contexto { margin-top: 1.25rem; font-size: var(--t-s); color: var(--tinta-2); max-width: var(--lectura); }
.hilo .enlaces { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--t-s); }

/* ---------- Contacto breve (todas las webs salvo la portada) ---------- */
.contacto-breve { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contacto-breve h2 { font-size: var(--t-xl); font-weight: 760; }
.contacto-breve .directo { margin: 0; }

/* ---------- Manifiesto (El Núcleo) ---------- */
.manifiesto { margin: 0; display: grid; gap: 0; counter-reset: principio; }
.manifiesto > div { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); gap: .5rem clamp(1.5rem, 4vw, 3rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--tinta); }
.manifiesto dt { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 760; line-height: 1.15; grid-column: 2; }
.manifiesto > div::before { counter-increment: principio; content: counter(principio, upper-roman); --mono: 1; font-weight: 700; color: var(--accion); font-size: var(--t-l); grid-row: 1; }
.manifiesto dd { margin: 0; color: var(--tinta-2); grid-column: 3; max-width: 34rem; }
:root[data-vista="asistente"] .manifiesto > div::before { content: counter(principio) "."; color: var(--senal); }

/* ---------- Adaptación de los componentes ---------- */
@media (max-width: 980px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-lados, .incluye, .hilo, .contacto-breve, .evaluador, .diagnostico, .grupos-check { grid-template-columns: minmax(0, 1fr); }
  .evidencia { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .resultado-diagnostico { position: static; }
  .manifiesto > div { grid-template-columns: 3rem minmax(0, 1fr); }
  .manifiesto dd { grid-column: 2; }
}
@media (max-width: 560px) {
  .rejilla, .rejilla.dos, .galeria, .veredictos, .evidencia { grid-template-columns: minmax(0, 1fr); }
  .veredictos { row-gap: .75rem; }
  .cuestion { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .cuestion .si-no { grid-column: 2; justify-self: start; }
  .casa p { display: none; }
}

/* Variantes de rejilla */
.datos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pasos.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pasos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pasos.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pasos.cuatro, .pasos.cinco { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) {
  .cabecera .envoltura { gap: .75rem; }
  .marca img { height: 1.5rem; }
  .interruptor button { padding: .3rem .35rem; font-size: .6875rem; }
}

/* Resumen de una ficha de servicio: lo que un asistente puede citar, en cinco líneas */
.resumen { display: grid; margin: 0; max-width: 62rem; border-top: 1px solid var(--tinta); }
.resumen > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1.5rem; padding-block: .9rem; border-bottom: 1px solid var(--regla); }
.resumen dt { font-size: var(--t-xs); color: var(--tinta-2); --mono: 1; text-transform: uppercase; letter-spacing: .05em; padding-top: .2rem; }
.resumen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .resumen > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }

/* Páginas de texto (legales, errores): una columna y prosa a medida de lectura */
.heroe.solo .envoltura { grid-template-columns: minmax(0, 1fr); }
.prosa { max-width: var(--lectura); }
.prosa > * + * { margin-top: 1rem; }
.prosa > :first-child { margin-top: 0; }
.heroe.solo + .seccion { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.prosa h2 { font-size: var(--t-l); font-weight: 760; margin-top: 2.75rem; }
.prosa h3 { font-size: var(--t-m); font-weight: 700; margin-top: 1.75rem; }
.prosa ul { padding-left: 1.25rem; }
.prosa li + li { margin-top: .4rem; }
.prosa .fecha { font-size: var(--t-s); color: var(--tinta-2); --mono: 1; }
.datos dd small { display: block; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.prosa ul ul { margin-top: .4rem; }
.heroe .fecha { margin-top: 1.5rem; }

/* ---------- Sin estilos en línea: las webs sirven style-src 'self' ---------- */
.mt-0 { margin-top: 0; }
.mt-05 { margin-top: .5rem; }
.mt-1 { margin-top: 1rem; }
.mt-125 { margin-top: 1.25rem; }
.mb-05 { margin-bottom: .5rem; }
.mb-06 { margin-bottom: .6rem; }
.mb-075 { margin-bottom: .75rem; }
.captura .cota-1, .captura .cota-2, .captura .cota-3 { left: 3%; }
.captura .cota-1 { top: 24%; }
.captura .cota-2 { top: 56%; }
.captura .cota-3 { top: 86%; }
.filas .clave.flexible { min-width: 0; flex: 1 1 auto; }

/* ---------- Formulario de contacto real (sistema/contacto.js) ---------- */
.campo label small { font-weight: 400; color: var(--tinta-2); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.antispam { grid-column: 1 / -1; }
.antispam:empty { display: none; }
.nota-antispam { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--tinta-2); }
.estado-form.ko { color: var(--ko); }
.campo [aria-invalid="true"] { border-color: var(--ko); }
.ancho-total { grid-column: 1 / -1; }
.campo.consentimiento { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .6rem; }
.campo.consentimiento input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; padding: 0; border: 0; accent-color: var(--accion); }
.campo.consentimiento label { font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; line-height: 1.45; }
.pasos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .pasos.tres { grid-template-columns: minmax(0, 1fr); } }
.tabla.fuentes th a { font-weight: 650; }
.limites.amplias li { grid-template-columns: 6.5rem minmax(0, 1fr); }
@media (max-width: 560px) { .limites.amplias li { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }