/* ==========================================================================
   landings.css — la hoja COMPARTIDA de las landings publicas de pais
   (mercado-laboral, que-estudiar, empresas-rubro, empleos-estudiantes,
   feriados) y del motor de SEO programatico (seo-landing.php).
   ==========================================================================

   Hasta el 2026-09-22 esto era un <style> de ~18,5 KB que lpEstilos()
   (modulos/landings-pais-helpers.php) embebia en CADA respuesta. Ahora es un
   archivo cacheable, pedido con <link ...?v=N>: al tocarlo, subir el ?v= en
   lpEstilos().

   Todo sale de las variables de css/saplic-theme.css, que se carga antes.
   Un componente que falte se agrega ACA, nunca inline en una pagina.

   ── RITMO VERTICAL ───────────────────────────────────────────────────────
   Los mismos dos valores de la home del pais (pais-home.php): --rit-in 20px
   dentro de una seccion, --rit-out 32px. Entre secciones el hueco es
   rit-out + rit-in (52px), igual que el de dos bandas adyacentes de la home.
   Antes habia 40, 64, 48, 16 y 92 sin patron.
   ========================================================================== */

/* ═══ MARCA Y NAV ═══════════════════════════════════════════════════ */
/* Tira de una linea bajo la barra: dice QUE ES el sitio a quien llega de
   Google. Ver la nota de lpHtmlCabecera(). */
/* ⚠️ LA TIRA, NO EL NAVBAR. Probado en un viewport real de 375: metiendo
   "Empleos" dentro de .sap-navbar, el boton "Crear cuenta" quedaba CORTADO
   por el borde derecho. La barra del tema es height:62px con padding 0 24px:
   entre el logo (110px) y los dos botones del header no quedan mas de ~27px
   libres. Meterlo igual obligaba a sobreescribir la altura y el wrap de la
   barra del tema SOLO para estas paginas, que es la clase de divergencia que
   los ultimos cambios vinieron a sacar.
   En la tira entra a cualquier ancho, y ademas queda al lado de la linea que
   dice que es Saplic: quien cae de Google lee "esto es una bolsa de empleo" y
   "ver empleos" en el mismo renglon, que es la orientacion que necesita. */
.lp-marca{margin:0;padding:9px 20px;background:var(--blanco);border-bottom:1px solid var(--borde);
    font-size:12.5px;font-weight:600;color:var(--gris-med);letter-spacing:.01em;
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.lp-nav-empleos{display:inline-flex;align-items:center;padding:5px 14px;border-radius:99px;
    font-size:12.5px;font-weight:800;text-decoration:none;color:var(--v);background:var(--v-50);
    transition:var(--trans);white-space:nowrap;}
.lp-nav-empleos:hover{background:var(--v);color:var(--blanco);}

/* ═══ CONTENEDOR ════════════════════════════════════════════════════ */
.lp-wrap{--rit-in:20px;--rit-out:32px;--rit-sec:calc(var(--rit-out) + var(--rit-in));
    max-width:1000px;margin:0 auto;padding:var(--rit-in) 20px var(--rit-sec);color:var(--negro);}
.lp-miga{font-size:12.5px;color:var(--gris-med);margin-bottom:12px;opacity:.85;}
.lp-miga a{color:var(--v);text-decoration:none;font-weight:600;}
.lp-miga a:hover{text-decoration:underline;}

/* ═══ ESCALA TIPOGRAFICA ════════════════════════════════════════════ */
/* h1 34 / bajada 18.5 / h2 22 / cuerpo 15.5 / nota 12.5. Antes el H1, el
   parrafo de guia, la respuesta de FAQ y la nota al pie pesaban casi lo
   mismo: no habia escala, habia un solo tamaño con variaciones. */
/* Sin max-width: el contenedor de 1000px ya limita, y a 34px eso son ~58
   caracteres por linea, que para un titular es correcto. Con 20ch cortaba en
   TRES lineas y dejaba media pantalla vacia a la derecha — el mismo efecto de
   "columna angosta pegada a la izquierda" que este cambio viene a sacar. */
.lp-wrap h1{font-size:34px;line-height:1.14;font-weight:900;margin:0 0 10px;
    letter-spacing:-.022em;text-wrap:balance;}
.lp-bajada{font-size:18.5px;line-height:1.5;color:var(--gris-med);margin:0 0 8px;
    max-width:62ch;font-weight:500;}
/* Terciario: mismo gris, menos densidad. Subordinada sin inventar un color. */
.lp-metodo{font-size:12.5px;line-height:1.6;color:var(--gris-med);opacity:.72;
    margin:0 0 var(--rit-in);max-width:62ch;}
/* ⚠️ Sin text-align:justify en ningun lado. En columnas angostas abre rios y
   en movil se ve peor, no mejor. */
/* Un solo hueco entre secciones (--rit-sec), el primero incluido. */
.lp-wrap h2{font-size:22px;font-weight:800;line-height:1.25;margin:var(--rit-sec) 0 16px;
    letter-spacing:-.012em;}
.lp-wrap h3{font-size:16px;font-weight:700;margin:26px 0 8px;line-height:1.3;}

/* ═══ CIFRAS ════════════════════════════════════════════════════════ */
/* La primera es la cifra que la pagina promete en el H1: va en solido con el
   numero en blanco. Las demas, tarjeta clara. El numero domina sobre la
   etiqueta 3 a 1 —34px contra 11.5px— y la etiqueta pasa a versalita. */
/* 150px: con 164 la grilla caia a UNA columna en 375 y cada cifra ocupaba
   media pantalla. Medido en viewport real. */
.lp-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:var(--rit-in) 0 0;}
.lp-cifra{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio-m);
    padding:20px;display:flex;flex-direction:column;gap:8px;}
.lp-cifra .n{font-size:34px;font-weight:900;color:var(--v);line-height:1;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;}
.lp-cifra .t{font-size:11.5px;color:var(--gris-med);line-height:1.3;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;}
.lp-cifra:first-child{background:linear-gradient(135deg,var(--v-osc),var(--v));border-color:transparent;
    box-shadow:var(--sombra-s);}
.lp-cifra:first-child .n{color:var(--blanco);font-size:38px;}
.lp-cifra:first-child .t{color:var(--v-clr);opacity:.95;}

/* ═══ TABLAS: COMPONENTE DE DATOS ═══════════════════════════════════ */
/* ⚠️ SUPERFICIE BLANCA OBLIGATORIA. El tema pone body{background:
   var(--gris-cla)}, asi que una zebra pintada con --gris-cla es invisible:
   las filas "grises" tienen el color exacto del fondo. Ya paso una vez y
   solo se vio al renderizar. */
.lp-tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;margin:0;
    background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio-m);overflow:hidden;}
.lp-tabla th,.lp-tabla td{text-align:left;padding:13px 14px;}
.lp-tabla thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
    color:var(--gris-med);font-weight:800;background:var(--gris-cla);
    border-bottom:1px solid var(--borde);padding-top:11px;padding-bottom:11px;}
.lp-tabla tbody td{border-top:1px solid var(--borde);}
.lp-tabla tbody tr:first-child td{border-top:none;}
.lp-tabla td.num,.lp-tabla th.num{text-align:right;}
/* Metrica principal: peso fuerte y cifras tabulares para que las columnas
   alineen verticalmente digito con digito. */
.lp-tabla td.num{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--negro);}
.lp-tabla a{color:var(--v);text-decoration:none;font-weight:600;}
.lp-tabla a:hover{text-decoration:underline;}
.lp-tabla caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--gris-med);padding:0 0 8px;}
/* FILA TOP CON DESTAQUE REAL: es el dato que el H1 promete. Fondo violeta
   claro, acento de 4px y el nombre en violeta. Sutil era no decir nada. */
.lp-tabla tbody tr:first-child{background:var(--v-50);}
.lp-tabla tbody tr:first-child td{font-weight:700;}
.lp-tabla tbody tr:first-child td:first-child{box-shadow:inset 4px 0 0 var(--v);padding-left:18px;}
.lp-tabla tbody tr:first-child a{font-weight:800;}
.lp-tabla tbody tr:hover{background:var(--gris-cla);}
.lp-tabla tbody tr:first-child:hover{background:var(--v-50);}
.lp-scroll{overflow-x:auto;border-radius:var(--radio-m);margin:0;}

/* ── TABLA PLANA: SIN FILA TOP DESTACADA ────────────────────────────
   El destaque de la primera fila significa "este es EL dato": la barra de 4px
   y el fondo violeta dicen que ahi arriba esta el maximo de un ranking. Es
   correcto en las tablas ordenadas por cantidad —areas por demanda, ciudades,
   empresas por vacantes— y es MENTIRA en las ordenadas por fecha, donde la
   primera fila es nada mas la mas reciente. Un aviso publicado ayer aparecia
   coronado como si fuera el mejor de la lista.
   Se nota mas desde que la familia 20 parte su listado en dos: sin esto, cada
   tabla estrenaba su propio "ganador", y ademas el segundo bloque —el de
   tiempo completo, que existe para ser la opcion subordinada— venia con el
   mismo realce que el principal.
   Es una clase y no la ausencia de la otra porque el destaque acierta en la
   mayoria de las tablas: el default se queda como esta y se apaga donde el
   orden no es un ranking. */
.lp-tabla.plana tbody tr:first-child{background:transparent;}
.lp-tabla.plana tbody tr:first-child td{font-weight:inherit;}
/* ⚠️ Y LA METRICA VUELVE A SU PESO. La linea de arriba existe para deshacer el
   font-weight:700 del DESTAQUE, pero por especificidad (0,3,3 contra el 0,2,1
   de `.lp-tabla td.num`) tambien se llevaba puesto el 700 propio de la celda
   numerica. Efecto visible en /sv/empleos-para-estudiantes: la fecha de la
   primera fila salia en peso normal y las de abajo en negrita — la columna
   perdia la alineacion de peso justo donde empieza a leerse. Se reafirma el
   valor base en vez de bajar la especificidad de la de arriba, que tendria que
   volverse mas fragil para lograr lo mismo. */
.lp-tabla.plana tbody tr:first-child td.num{font-weight:700;}
.lp-tabla.plana tbody tr:first-child td:first-child{box-shadow:none;padding-left:14px;}
.lp-tabla.plana tbody tr:first-child a{font-weight:600;}
.lp-tabla.plana tbody tr:first-child:hover{background:var(--gris-cla);}

/* ── NOTA QUE PRESENTA UN BLOQUE ────────────────────────────────────
   .lp-nota nacio como pie ("margin:10px 0 0") y ahora tambien se usa entre un
   h2 y su tabla, para decir que es lo que sigue. Con margin-bottom 0 el texto
   quedaba pegado al borde superior de la tabla y se leia como parte del
   encabezado. La variante da el aire de DENTRO de la seccion —12px, no los 64
   de entre secciones— y mantiene el ritmo jerarquico. */
.lp-nota.intro{margin:0 0 12px;}

/* Grupos dentro de una tabla (carreras por area): el separador entre grupos
   es mas marcado que el de filas, que es lo que hace legible el agrupamiento. */
.lp-tabla tbody+tbody tr:first-child td,
.lp-tabla tbody+tbody .lp-grupo th{border-top:2px solid var(--borde);}
.lp-grupo th{background:var(--gris-cla);font-weight:800;font-size:13.5px;color:var(--negro);
    padding:11px 14px;}
.lp-grupo-in{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.lp-grupo-n{font-size:12px;font-weight:800;color:var(--v);white-space:nowrap;
    font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.04em;}
.lp-tabla tbody.lp-g td:first-child{padding-left:22px;}
.lp-nivel{display:inline-block;padding:3px 9px;border-radius:99px;background:var(--gris-cla);
    border:1px solid var(--borde);font-size:11.5px;font-weight:700;color:var(--gris-med);
    text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}

/* ═══ BARRA DE PROPORCION ═══════════════════════════════════════════ */
/* Mas presencia: pista de 96px y 9px de alto contra los 76x7 de antes, y el
   riel en --v-clr en vez de --v-50, que casi no se distinguia del blanco. */
.lp-prop{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.lp-prop-n{font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right;font-weight:700;}
.lp-prop-t{flex:0 0 96px;height:9px;border-radius:99px;background:var(--v-clr);overflow:hidden;}
.lp-prop-f{display:block;height:100%;border-radius:99px;background:var(--v);}
tr:first-child .lp-prop-f{background:var(--v-osc);}

/* ═══ PROSA: TRES IDEAS QUE SE VEAN COMO TRES ═══════════════════════ */
/* "Como leer estos datos" eran tres parrafos pegados de borde a borde. Cada
   uno pasa a ser un item numerado con su marcador: se ve que son tres cosas
   distintas y se puede saltar de una a otra.
   Se elige el contador CSS y no reescribir el markup en cuatro archivos
   porque los parrafos YA son <p> separados con su propia clave de traduccion
   —guia_p1, guia_p2, guia_p3—: la estructura estaba, faltaba mostrarla. */
.lp-guia{counter-reset:lpg;display:grid;gap:18px;margin:0;max-width:68ch;}
.lp-guia p{counter-increment:lpg;position:relative;margin:0;padding-left:44px;
    font-size:15.5px;line-height:1.75;color:var(--gris-med);}
.lp-guia p::before{content:counter(lpg);position:absolute;left:0;top:-1px;
    width:28px;height:28px;border-radius:50%;background:var(--v-50);color:var(--v);
    font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
    font-variant-numeric:tabular-nums;}
.lp-guia p:only-child{padding-left:0;}
.lp-guia p:only-child::before{display:none;}

/* ═══ TARJETAS Y CHIPS ══════════════════════════════════════════════ */
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:0;}
.lp-card{border:1px solid var(--borde);border-radius:var(--radio-m);padding:18px 20px;
    background:var(--blanco);transition:var(--trans);}
.lp-card:hover{border-color:var(--v);box-shadow:var(--sombra-s);transform:translateY(-1px);}
.lp-card a{color:var(--negro);text-decoration:none;font-weight:800;font-size:15.5px;}
.lp-card a:hover{color:var(--v);}
.lp-card .m{font-size:12.5px;color:var(--gris-med);margin-top:7px;line-height:1.5;
    font-variant-numeric:tabular-nums;}
.lp-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;}
.lp-chip{display:inline-block;padding:9px 15px;border:1px solid var(--borde);border-radius:999px;
    font-size:13.5px;font-weight:600;color:var(--gris-med);text-decoration:none;
    background:var(--blanco);transition:var(--trans);}
.lp-chip:hover{border-color:var(--v);color:var(--v);background:var(--v-50);}

/* ═══ FAQ ═══════════════════════════════════════════════════════════ */
.lp-faqs{border:1px solid var(--borde);border-radius:var(--radio-m);overflow:hidden;
    margin:0;background:var(--blanco);}
.lp-faq{border-bottom:1px solid var(--borde);}
.lp-faq:last-child{border-bottom:none;}
.lp-faq summary{list-style:none;cursor:pointer;padding:17px 20px;font-size:15.5px;font-weight:700;
    display:flex;align-items:center;justify-content:space-between;gap:14px;line-height:1.4;
    transition:var(--trans);}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:5px;
    border-right:2px solid var(--v);border-bottom:2px solid var(--v);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;}
.lp-faq[open] summary::after{transform:rotate(225deg) translate(-2px,-2px);}
.lp-faq[open] summary{color:var(--v);background:var(--v-50);}
.lp-faq summary:hover{background:var(--gris-cla);}
.lp-faq p{padding:2px 20px 18px;font-size:15px;line-height:1.75;color:var(--gris-med);
    margin:0;max-width:70ch;}
/* La pregunta puede venir en un <h3> dentro del <summary> (las landings del
   motor SEO: es la jerarquia correcta bajo el <h2>). Toma la tipografia del
   summary y no la de .lp-wrap h3, que le meteria 26px de margen arriba. */
.lp-faq summary h3{display:block;flex:1 1 auto;margin:0;font:inherit;color:inherit;letter-spacing:inherit;}

/* ═══ CONVERSION ════════════════════════════════════════════════════ */
/* Primario y secundario, no dos bloques compitiendo. */
/* El CTA cierra la pagina: separacion de seccion, no de bloque. */
.lp-cta{margin:0;}
.lp-cta.cand{margin-top:var(--rit-sec);}
.lp-cta.cand{background:linear-gradient(135deg,var(--v-osc),var(--v));color:var(--blanco);
    border-radius:var(--radio-l);padding:34px 36px;box-shadow:var(--sombra-m);}
.lp-cta.cand h3{margin:0 0 10px;font-size:24px;font-weight:900;color:var(--blanco);
    letter-spacing:-.018em;line-height:1.2;}
.lp-cta.cand p{margin:0 0 22px;font-size:16px;line-height:1.55;color:var(--v-clr);max-width:54ch;}
.lp-cta.cand .lp-btn{background:var(--blanco);color:var(--v);padding:15px 30px;font-size:15.5px;}
.lp-cta.cand .lp-btn:hover{box-shadow:var(--sombra-l);transform:translateY(-1px);}
.lp-cta.emp{background:none;border:1px solid var(--borde);border-radius:var(--radio-m);
    padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:var(--rit-in);}
.lp-cta.emp h3{margin:0;font-size:15px;font-weight:700;}
.lp-cta.emp p{margin:0;font-size:14px;line-height:1.5;color:var(--gris-med);flex:1 1 220px;}
.lp-cta.emp .lp-btn{background:none;color:var(--v);border:1px solid var(--v);padding:10px 18px;font-size:13.5px;}
.lp-cta.emp .lp-btn:hover{background:var(--v);color:var(--blanco);}
.lp-btn{display:inline-block;border-radius:var(--radio-s);font-weight:800;text-decoration:none;
    transition:var(--trans);}

/* ═══ VARIOS ════════════════════════════════════════════════════════ */
.lp-vacio{border:1px dashed var(--borde);border-radius:var(--radio-m);padding:32px 24px;
    text-align:center;color:var(--gris-med);font-size:15.5px;line-height:1.65;margin:0;
    background:var(--blanco);}
.lp-vacio a{color:var(--v);font-weight:700;text-decoration:none;}
.lp-mas{margin-top:var(--rit-out);padding-top:var(--rit-in);border-top:1px solid var(--borde);}
.lp-wrap .lp-mas h2{margin-top:0;}
.lp-nota{font-size:12.5px;color:var(--gris-med);opacity:.72;line-height:1.6;max-width:70ch;margin:10px 0 0;}
.lp-cita{background:var(--blanco);border-left:3px solid var(--v);padding:18px 22px;font-size:14.5px;
    color:var(--gris-med);line-height:1.7;border-radius:0 var(--radio-m) var(--radio-m) 0;
    max-width:74ch;margin:0;border-top:1px solid var(--borde);border-right:1px solid var(--borde);
    border-bottom:1px solid var(--borde);}
.lp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════ */
@media(max-width:768px){
    .lp-wrap{padding:16px 16px var(--rit-sec);}
    .lp-wrap h1{font-size:28px;max-width:none;}
    .lp-wrap h2{font-size:20px;margin-bottom:14px;}
    .lp-bajada{font-size:17px;}
    .lp-cta.cand{padding:26px 22px;}
    .lp-cta.cand h3{font-size:21px;}
    .lp-marca{font-size:12px;padding:8px 16px;}
}
@media(max-width:560px){
    .lp-wrap h1{font-size:25px;}
    .lp-bajada{font-size:15.5px;}
    .lp-cifra{padding:16px;}
    .lp-cifra .n{font-size:29px;}
    .lp-cifra:first-child .n{font-size:32px;}
    .lp-guia p{padding-left:38px;font-size:15px;}
    .lp-guia p::before{width:25px;height:25px;font-size:12px;}
    /* ⚠️ EL ENCABEZADO .num PUEDE ENVOLVER; EL DATO NO.
       Aca estaba el bug de movil: "Salario mediano" con white-space:nowrap
       reservaba 140px de columna para un dato de 37px, y la columna del
       salario —el motivo por el que la gente entra— quedaba fuera de
       pantalla. Dejando envolver el TITULO y no el numero entra completa.
       Se elige esto y no tarjetas-por-fila porque no cambia markup y la
       tabla sigue siendo una tabla: display:block le saca los roles a un
       lector de pantalla, y estas paginas viven de que las lean maquinas. */
    .lp-tabla th.num{white-space:normal;}
    .lp-tabla{font-size:13.5px;}
    .lp-tabla th,.lp-tabla td{padding:10px 7px;}
    .lp-tabla thead th{font-size:10px;letter-spacing:.03em;}
    .lp-tabla tbody tr:first-child td:first-child{padding-left:11px;}
    .lp-tabla tbody.lp-g td:first-child{padding-left:14px;}
    .lp-grupo th{padding:9px 8px;font-size:12.5px;}
    .lp-prop{gap:6px;}
    .lp-prop-t{flex-basis:30px;height:7px;}
    .lp-prop-n{min-width:2.6em;}
    .lp-nivel{font-size:10.5px;padding:2px 7px;}
    .lp-faq summary{padding:15px 16px;font-size:14.5px;}
    .lp-faq p{padding:2px 16px 15px;font-size:14.5px;}
    .lp-cta.cand{padding:22px 20px;}
    .lp-cta.cand h3{font-size:19px;}
    .lp-cta.cand p{font-size:15px;}
}

/* ═══ TABLAS DE DATOS (.sap-table dentro de .lp-wrap) ═══════════════ */
/* Un enlace dentro de una celda media 18px de alto: imposible de tocar con
   el dedo. El padding negativo agranda el area tocable a 44px sin cambiar
   la altura de la fila. */
.lp-wrap .sap-table td a{display:inline-block;padding:13px 0;margin:-13px 0;}
/* La accion de la fila ("Ver empresa"): TODAS las filas la tienen en la misma
   columna; el nombre va siempre como texto. Antes 9 nombres eran enlaces y 3
   texto negro en la misma columna. */
.lp-wrap .sap-table th.lp-accion,
.lp-wrap .sap-table td.lp-accion{text-align:right;white-space:nowrap;width:1%;}
.lp-wrap .sap-table td.lp-accion a{font-weight:700;text-decoration:none;min-height:44px;
    display:inline-flex;align-items:center;padding:0 4px;margin:-12px 0;}
.lp-wrap .sap-table td.lp-accion a:hover{text-decoration:underline;}
.lp-wrap .sap-table td.lp-accion .sin{color:var(--gris-med);opacity:.6;}

/* El boton "Ver todas las vacantes" al pie del listado. */
.lp-mas-vac{margin:var(--rit-in) 0 0;}
/* Las cifras del motor van despues del listado: abren la parte de datos y
   llevan el hueco entre secciones, no el de dentro de una. */
section + .lp-cifras,
.lp-mas-vac + .lp-cifras{margin-top:var(--rit-sec);}

/* ═══ MOVIL: AREAS TOCABLES Y DESBORDES (2026-09-22, segunda revision) ═══ */
/* Miga: el enlace media 15px de alto. El padding agranda el area tocable a
   ~40px sin mover el renglon (margen negativo). */
.lp-miga a{display:inline-block;padding:12px 2px;margin:-12px 0;}
/* Chips de "Mas sobre": minimo 44px de alto. */
.lp-chip{min-height:44px;display:inline-flex;align-items:center;}
/* Un numero con su unidad no se parte: "98 %" en dos lineas. */
.lp-wrap .sap-table td.sap-num,
.lp-cifra .n{white-space:nowrap;}
/* Nombres largos sin espacios (razones sociales, URLs) empujaban la tabla
   fuera de la pantalla: se cortan donde haga falta y la tabla scrollea
   DENTRO de su tarjeta, nunca la pagina. */
.lp-wrap .sap-table td{overflow-wrap:anywhere;}
.lp-wrap .sap-card{max-width:100%;}
.lp-wrap .sap-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media(max-width:560px){
    /* La tira "Saplic · Bolsa de empleo en Mexico | Empleos" ocupaba 70px
       en dos renglones. En una sola linea: el texto se recorta, el boton no. */
    .lp-marca{flex-wrap:nowrap;justify-content:space-between;gap:10px;padding:6px 16px;font-size:12px;}
    .lp-marca > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .lp-wrap .sap-table th,.lp-wrap .sap-table td{padding:10px 8px;}
    .lp-cifra .t{font-size:12px;}
}