a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,.tablewrap:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(42,157,143,.45);border-radius:4px}

body{background:#FFFFFF;font-size:16.5px;line-height:1.65}

/* Layout: contenido 720px + aside TOC sticky */
  .artwrap{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:64px;justify-content:center;padding:48px 40px 64px;max-width:1200px;margin:0 auto}

article h1{font-size:36px;font-weight:800;line-height:1.2;max-width:62ch}

.byline{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--g500);margin:18px 0 8px;flex-wrap:wrap}

.byline .avatar{width:36px;height:36px;border-radius:999px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;color:var(--signal-text);flex:none}

.dates{font-size:13.5px;color:var(--g500);margin-bottom:28px}

article .fig{margin:0 0 28px}

/* scroll-margin-top: el nav sticky mide 72px (60px en mobile) */
  article h2{font-size:25px;font-weight:800;margin:40px 0 14px;line-height:1.25;scroll-margin-top:88px}

article h3{font-size:19px;font-weight:700;margin:26px 0 10px;scroll-margin-top:88px}

article p{margin-bottom:16px;max-width:72ch}

article ul,article ol{margin:0 0 16px 22px}

article li{margin-bottom:8px}

/* Tabla comparativa — los LLMs citan tablas con cifras por encima de prosa */
  .tablewrap{overflow-x:auto;margin:20px 0 8px}

table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}

caption{text-align:left;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--g600);margin-bottom:8px}

th{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-align:left;border-bottom:2px solid var(--ink);padding:10px 12px}

td{border-bottom:1px solid var(--border);padding:10px 12px;font-variant-numeric:tabular-nums}

/* Zebra: filas alternas sobre el gris base del DS. El verde soft queda
     reservado a los bloques de énfasis para que conserve significado. */
  tbody tr:nth-child(even){background:var(--base)}

.src{font-size:13px;color:var(--g500);margin-bottom:24px}

/* Componente "Cuándo conviene / Señal de alerta" — plantilla de artículo,
     reusable en los que vengan. Card flat sobre soft, sin sombra. El ámbar
     marca advertencia; el rojo queda reservado a errores. */
  .advice{background:var(--soft);border-radius:8px;padding:20px 24px;margin:18px 0}

.advice p{margin:0;max-width:none;color:var(--ink)}

.advice p + p{margin-top:10px}

.advice .lbl{font-family:'Montserrat',sans-serif;font-weight:700}

.advice-good .lbl{color:var(--signal-text)}

.advice-warn .lbl{color:#92400E}

/* Callout de dato — unidad citable autónoma */
  .stat{border-left:3px solid var(--signal);background:var(--base);padding:16px 22px;margin:24px 0;font-size:16px}

/* FAQ — espejo del FAQPage schema */
  .faq{border:1px solid var(--border);border-radius:8px;margin-top:12px}

/* FAQ accesible: h3 con un button (aria-expanded, aria-controls) + panel section.
     El triángulo lo dibuja un span list-item (disclosure-closed/open), igual que
     el <summary> nativo que reemplaza: mismo render píxel a píxel. */
  .faq .faq-item{border-bottom:1px solid var(--border);padding:16px 22px}

.faq .faq-item:last-child{border-bottom:0}

.faq h3.faq-h{margin:0;font:inherit;scroll-margin-top:0}

.faq .faq-q{font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;text-align:inherit;text-transform:inherit;line-height:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:0;display:block;width:100%;font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px}

.faq .faq-mark{display:list-item;list-style:disclosure-closed inside}

.faq .faq-q[aria-expanded=true] .faq-mark{list-style-type:disclosure-open}

.faq p{margin:10px 0 0}

/* CTA de producto — uno solo, al final */
  .prodcta{background:var(--base);border:1px solid var(--border);border-radius:8px;padding:28px;margin-top:32px;text-align:center}

.prodcta h2{margin:0 0 8px;font-size:22px;scroll-margin-top:88px}

.prodcta p{max-width:52ch;margin:0 auto 18px;color:var(--g600)}

.prodcta .micro{margin:12px auto 0;font-size:14px;color:var(--g500)}

.prodcta a.btn{display:inline-block;background:var(--signal);color:#FFFFFF;font-family:'Montserrat',sans-serif;font-weight:700;font-size:19px;padding:14px 30px;border-radius:4px}

.prodcta a.btn:hover{background:var(--signal-strong);color:#FFFFFF}

/* Caja de autor (E-E-A-T) */
  .author{display:flex;gap:18px;border:1px solid var(--border);border-radius:8px;padding:22px;margin-top:40px}

.author .avatar{width:52px;height:52px;border-radius:999px;background:var(--soft);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--signal-text)}

.author .name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px}

.author p{font-size:14.5px;line-height:1.6;color:var(--g600);margin:4px 0 0}

/* TOC sticky */
  .toc{position:sticky;top:96px;align-self:start;font-size:14px}

.toc .lbl{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--g500);margin-bottom:10px}

.toc a{display:block;color:var(--g600);padding:5px 0;border-left:2px solid var(--border);padding-left:12px}

.toc a:hover{color:var(--signal-text);border-color:var(--signal);text-decoration:none}

@media (max-width:900px){
    /* minmax(0,…) en vez de 1fr: el min-content de la tabla (min-width:520px)
       estiraba la pista del grid a 520 y, con justify-content:center, sacaba
       la columna fuera del viewport en 375. La tabla sigue con su scroll
       propio dentro de .tablewrap. */
    .artwrap{grid-template-columns:minmax(0,1fr);padding:32px 24px;gap:0}
    .toc{display:none}
  }

@media (max-width:768px){
    article h1{font-size:28px}
    article h2{font-size:22px;scroll-margin-top:76px}
    article h3{scroll-margin-top:76px}
    .prodcta h2{scroll-margin-top:76px}
  }

/* Lead magnet «Diagnóstico gratis» — slide-in del artículo (bloque al final
     del body). Flat: borde gray-300, sin sombra; el botón es el único teal.
     Escritorio: esquina inferior derecha, en el margen a la derecha del texto
     — 320px hasta 1279px y 380px desde 1280px; más ancho taparía el texto.
     Hasta 900px: barra inferior plegada que se despliega al tocarla.
     z-index 55: debajo del menú móvil (60) y del aviso de cookies (100). */
  .kq-lm{position:fixed;z-index:55;top:auto;left:auto;right:24px;margin:0;height:auto;max-width:none;color:inherit;bottom:24px;width:320px;max-height:calc(100vh - 120px);overflow-y:auto;padding:20px;background:#FFFFFF;border:1px solid #CBD5E1;border-radius:8px;font-size:15px;line-height:1.5;opacity:0;transform:translateX(24px);transition:opacity .15s ease-out,transform .15s ease-out}

.kq-lm:not([open]){display:none}

.kq-lm.is-open{opacity:1;transform:none}

.kq-lm:focus{outline:none}

.kq-lm-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}

.kq-lm-kicker{grid-column:1;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;line-height:1.5;letter-spacing:.08em;color:var(--signal-text)}

.kq-lm-title{grid-column:1;margin-top:4px;font-size:20px;font-weight:800;line-height:1.25}

.kq-lm-close{grid-column:2;grid-row:1 / span 2;position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin:-12px -12px 0 0;border:0;border-radius:4px;background:transparent;color:var(--g600);cursor:pointer}

.kq-lm-close:hover{background:var(--g100);color:var(--ink)}

.kq-lm-toggle{display:none}

.kq-lm button{-webkit-tap-highlight-color:transparent}

.kq-lm svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.kq-lm-body{margin-top:16px}

.kq-lm-field + .kq-lm-field{margin-top:12px}

.kq-lm-field label{display:block;margin-bottom:6px;font-weight:700;font-size:14px;line-height:1.4}

/* Borde gray-500 (4,76:1): el contorno de un campo necesita 3:1. 16px:
     iOS no hace zoom al enfocarlo. */
  .kq-lm-field input{display:block;width:100%;height:44px;padding:0 12px;border:1px solid var(--g500);border-radius:4px;background:#FFFFFF;font-family:'Lato','Helvetica Neue',Arial,sans-serif;font-size:16px;color:var(--ink)}

.kq-lm-field input::placeholder{color:var(--g500);opacity:1}

.kq-lm-check{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:13px;line-height:1.5;color:var(--g600);cursor:pointer}

.kq-lm-check input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--signal-strong);cursor:pointer}

.kq-lm-check a{color:var(--signal-text);text-decoration:underline}

.kq-lm-error{margin-top:6px;font-size:13px;line-height:1.4;color:#B91C1C}

/* Honeypot anti-spam: fuera de pantalla, sin tabulación y oculto a lectores. */
  .kq-lm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* signal-strong: el blanco sobre signal solo pasa AA desde 19px bold. */
  .kq-lm-submit{display:block;width:100%;min-height:48px;margin-top:16px;padding:12px 16px;border:0;border-radius:4px;background:var(--signal-strong);color:#FFFFFF;font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;line-height:1.25;cursor:pointer}

.kq-lm-submit:hover{background:var(--signal-text)}

.kq-lm-submit:disabled{background:var(--g100);color:#94A3B8;cursor:not-allowed}

.kq-lm-status{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:var(--signal-text)}

.kq-lm-status:empty{display:none}

.kq-lm-status.is-error{color:#B91C1C}

.kq-lm-status a{color:inherit;text-decoration:underline}

.kq-lm.is-sent .kq-lm-form{display:none}

/* 380px: los dos campos lado a lado, para que la tarjeta no crezca hasta
     el índice lateral en pantallas de poca altura. */
  @media (min-width:1280px){
    .kq-lm{width:380px;padding:24px}
    .kq-lm-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
    .kq-lm-field + .kq-lm-field{margin-top:0}
  }

@media (max-width:900px){
    .kq-lm{left:0;right:0;bottom:0;width:auto;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));border-width:1px 0 0;border-radius:0;transform:translateY(100%)}
    .kq-lm.is-open{transform:none}
    .kq-lm-head{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
    .kq-lm-title{margin-top:2px;font-size:16px}
    /* Toda la barra despliega: el área del botón cubre la cabecera (la X queda encima). */
    .kq-lm-toggle{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:4px;background:transparent;color:var(--ink);cursor:pointer}
    .kq-lm-toggle::after{content:"";position:absolute;inset:0}
    .kq-lm.is-expanded .kq-lm-toggle svg{transform:rotate(180deg)}
    .kq-lm-close{grid-column:3;margin:0 -12px 0 0}
    .kq-lm-body{margin-top:12px}
    .kq-lm:not(.is-expanded) .kq-lm-body{display:none}
  }

@media (prefers-reduced-motion:reduce){.kq-lm,.kq-lm.is-open{transition:none;transform:none}}

/* La página no anima nada por sí sola; el scroll suave del menú sí, y se
     apaga acá. El panel del lead magnet apaga su transición en su propia
     regla de prefers-reduced-motion, con el mismo peso de selector. */
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.fig img{display:block;width:100%;height:auto}