/* ==========================================================================
   seo-landing.css — LA hoja de las landings del motor de SEO programatico.
   ==========================================================================

   UNA sola hoja compartida por todas las familias. No hay estilos inline
   repetidos en cada landing, que es como nacieron las cinco familias 18-22
   (y por lo que despues hubo que unificarles la escala tipografica a mano).

   ── COLORES ──────────────────────────────────────────────────────────────
   TODO sale de las variables de css/saplic-theme.css, que la landing ya
   carga. Los fallbacks del var() son por si alguna pagina dejara de
   cargarlo; no son una segunda paleta. Meter literales aca seria el tercer
   sistema de diseño del sitio, que es justamente lo que se viene evitando.

   ── MOBILE FIRST ─────────────────────────────────────────────────────────
   Las reglas base son las de telefono. Los @media suben, nunca bajan.
   Las tablas scrollean DENTRO de su contenedor: sin esto una tabla de tres
   columnas empuja el ancho del documento y el visitante termina con scroll
   horizontal de pagina, que es el defecto que mas se nota en un telefono.

   ── SIN SALTOS DE LAYOUT ─────────────────────────────────────────────────
   Nada de aparecer/desaparecer con JS. Los bloques que no tienen datos no se
   emiten desde PHP, asi que no hay nada que colapsar despues del render.
   ========================================================================== */

.seo-land {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 16px 48px;   /* 16px de gutter lateral: el minimo comodo en 320px */
}

/* ── Titulo y entrada ─────────────────────────────────────────────────── */

.seo-land h1 {
    font-size: clamp(1.45rem, 5.2vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -.5px;
    font-weight: 800;
    margin: 14px 0 10px;
}

.seo-land h2 {
    font-size: clamp(1.15rem, 3.8vw, 1.45rem);
    line-height: 1.25;
    font-weight: 700;
    margin: 30px 0 12px;
}

.seo-land h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: inline;   /* vive dentro del <summary> del FAQ */
}

/* El parrafo que responde la busqueda. Un poco mas grande que el cuerpo:
   es lo primero que se lee y lo que Google suele recortar como snippet. */
.seo-intro {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--gris-osc, #2b2b3d);
    margin: 0 0 18px;
    max-width: 62ch;   /* medida de lectura; sin esto en escritorio son 110 caracteres */
}

/* La fecha de actualizacion. Visible pero discreta: es contexto, no
   titular. Va con <time datetime> para que un extractor la lea en ISO sin
   tener que parsear "22 de septiembre de 2026" en cinco idiomas. */
.seo-fecha {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--gris-med, #4a4a6a);
    margin: 0 0 16px;
}

/* ── Cifras ───────────────────────────────────────────────────────────── */

.seo-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* dos por fila en telefono */
    gap: 10px;
    margin: 0 0 10px;
}

.seo-kpi {
    background: var(--gris-cla, #f5f4fb);
    border: 1px solid var(--borde, #e4e2f0);
    border-radius: 12px;
    padding: 12px 14px;
    min-width: 0;   /* deja que el contenido se encoja en vez de desbordar la grilla */
}

.seo-kpi strong {
    display: block;
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--v, #5128f2);
    overflow-wrap: anywhere;   /* un monto largo no rompe la tarjeta */
}

.seo-kpi span {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--gris-med, #4a4a6a);
}

/* La procedencia de cada cifra. Chica y sin gritar, pero siempre presente:
   es lo que separa un numero de un dato citable. */
.seo-fuente {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--gris-med, #4a4a6a);
    margin: 6px 0 22px;
}

/* ── Tablas ───────────────────────────────────────────────────────────── */

.seo-tabla {
    display: block;          /* junto con overflow-x, es lo que hace el scroll interno */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0 0 6px;
    font-size: 14px;
}

.seo-tabla caption {
    caption-side: top;
    text-align: left;
    font-size: clamp(1.15rem, 3.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 30px 0 12px;
    color: inherit;
}

.seo-tabla th,
.seo-tabla td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--borde, #e4e2f0);
    white-space: nowrap;
}

/* La primera columna SI puede partir: es la que lleva nombres largos de
   empresa, y forzarla a una linea es lo que provocaria el scroll. */
.seo-tabla tbody th[scope="row"] {
    white-space: normal;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.seo-tabla thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris-med, #4a4a6a);
    border-bottom-width: 2px;
}

.seo-tabla tbody tr:last-child th,
.seo-tabla tbody tr:last-child td { border-bottom: 0; }

.seo-tabla a { color: var(--v, #5128f2); text-decoration: none; }
.seo-tabla a:hover { text-decoration: underline; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.seo-faq details {
    border: 1px solid var(--borde, #e4e2f0);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 8px;
    background: var(--blanco, #fff);
}

.seo-faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    line-height: 1.35;
}

.seo-faq summary::-webkit-details-marker { display: none; }

.seo-faq summary::after {
    content: '+';
    float: right;
    margin-left: 12px;
    font-weight: 400;
    color: var(--gris-med, #4a4a6a);
}

.seo-faq details[open] summary::after { content: '−'; }

.seo-faq p {
    margin: 10px 0 0;
    line-height: 1.55;
    color: var(--gris-osc, #2b2b3d);
}

/* ── Relacionados ─────────────────────────────────────────────────────── */

.seo-rel ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.seo-rel a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--borde, #e4e2f0);
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1.2;
    color: var(--gris-med, #4a4a6a);
    text-decoration: none;
    background: var(--blanco, #fff);
}

.seo-rel a:hover {
    border-color: var(--v, #5128f2);
    color: var(--v, #5128f2);
}

/* ── Vacio y "ver todas" ──────────────────────────────────────────────── */

.seo-vacio {
    background: var(--gris-cla, #f5f4fb);
    border: 1px solid var(--borde, #e4e2f0);
    border-radius: 12px;
    padding: 14px 16px;
    line-height: 1.5;
    margin: 0 0 22px;
}

.seo-mas { margin: 14px 0 26px; }

.seo-mas a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--v, #5128f2);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

/* ── Escritorio ───────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .seo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .seo-tabla { font-size: 15px; }
    .seo-land { padding: 0 24px 64px; }
}

/* ── Preferencias del visitante ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .seo-faq details { transition: none; }
}