/* ===========================================================================
   EMPLEOS CARTAGENA — css/styles.css
   Qué es: la ÚNICA hoja de estilos del sitio. Aquí vive todo el diseño.
   Se enlaza desde: index.html, 404.html, privacidad.html, cookies.html,
                    terminos.html (todos comparten el mismo diseño).
   Cómo está organizado (en este orden):
     01. Variables de diseño (:root)  ← la paleta y las medidas salen de aquí
     02. Reset y base
     03. Utilidades y botones
     04. Cabecera y navegación
     05. Hero y buscador
     06. Barra de filtros
     07. Tarjetas de empresa y de vacante
     08. Visor de flyer (lightbox) y ventana «Compartir esta oferta»
     09. Bloques informativos (antes de aplicar, publica, hojas de vida JX)
     10. Preguntas frecuentes
     11. Pie de página y crédito JX Enterprise
     12. Botones flotantes (WhatsApp y volver arriba)
     13. Banner de cookies
     14. Páginas internas (legales y 404)
     15. RESPONSIVE — de TV (≥1440px) a gama baja (≤380px)
     16. Accesibilidad y movimiento reducido
   OJO: nunca escribir un color en hexadecimal suelto dentro de una regla.
        Todos los colores salen de las variables del bloque 01.
   =========================================================================== */


/* ===========================================================================
   01. VARIABLES DE DISEÑO
   Qué hace: define la paleta, tipografías, radios, sombras y espaciados.
   Función: si mañana hay que cambiar el azul del sitio, se cambia AQUÍ y
            cambia en toda la página. No tocar colores en otro lado.
   Paleta: blanco + azul oscuro (navy) profesional. Un solo acento de color
           (verde) para el estado "abierta"; ámbar y rojo solo para avisos.
   =========================================================================== */
:root {
  /* --- Azules de marca --- */
  --azul-950: #08192E;   /* pie de página, fondos más profundos */
  --azul-900: #0C2340;   /* AZUL PRINCIPAL: cabecera, títulos, botón primario */
  --azul-800: #133257;   /* hover del botón primario, superficies oscuras */
  --azul-700: #1B4478;
  --azul-600: #22589B;   /* enlaces y acentos sobre fondo claro */
  --azul-500: #2C6FB5;   /* detalles, foco, subrayados */
  --azul-300: #8FC0F0;   /* texto de acento SOBRE fondo oscuro */
  --azul-100: #E3EDF8;   /* bordes suaves azulados */
  --azul-050: #F3F7FC;   /* fondo de secciones y cabecera de empresa */

  /* --- Neutros --- */
  --blanco:   #FFFFFF;
  --tinta:    #14202E;   /* texto principal */
  --gris-700: #3E4C5C;   /* texto secundario fuerte */
  --gris-500: #637386;   /* texto secundario, metadatos */
  --gris-300: #D7E0EA;   /* bordes de tarjeta */
  --gris-200: #E9EFF5;   /* separadores */
  --gris-100: #F4F7FA;   /* fondo alterno */

  /* --- Colores de estado (uso puntual, nunca decorativo) --- */
  --verde-700: #0B6047;
  --verde-600: #0F7B5C;  /* etiqueta "Abierta" */
  --verde-050: #E7F5F0;
  --ambar-700: #8A5B06;  /* aviso: requisito de edad, dato sin confirmar */
  --ambar-050: #FDF4E3;
  --rojo-700:  #9E2B22;  /* alerta anti-estafa */
  --rojo-050:  #FBEDEB;
  --wa:        #25D366;  /* verde oficial de WhatsApp (botones «Aplicar por WhatsApp») */
  --wa-oscuro: #1DA851;

  /* --- Tipografías ---
     Manrope para títulos, Inter para texto. Ambas de Google Fonts, con
     respaldo de fuentes del sistema por si la red del visitante falla. */
  --fuente-titulo: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fuente-texto:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --- Escala de tamaños (fluida: se adapta al ancho sin media queries) --- */
  --t-h1:   clamp(2rem, 1.35rem + 3.1vw, 3.6rem);
  --t-h2:   clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem);
  --t-h3:   clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-base: 1rem;
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;

  /* --- Radios de esquina --- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* --- Sombras (suaves y realistas, nunca de color) --- */
  --sombra-1: 0 1px 2px rgba(12, 35, 64, .05), 0 1px 3px rgba(12, 35, 64, .05);
  --sombra-2: 0 4px 16px rgba(12, 35, 64, .08);
  --sombra-3: 0 14px 38px rgba(12, 35, 64, .16);

  /* --- Espaciados --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 88px;

  /* --- Medidas de layout --- */
  --ancho-max: 1180px;   /* ancho máximo del contenido (limita en TV) */
  --alto-cabecera: 68px; /* se usa para el scroll-padding de los anclajes */
  /* Alto de la barra de filtros pegajosa. El bloque 13 de js/script.js lo
     mide de verdad y lo reemplaza; estos valores son solo por si el JS no
     carga (67px en una línea; 100px en ≤900px, donde el contador baja). */
  --alto-filtros: 67px;
}


/* ===========================================================================
   02. RESET Y BASE
   Qué hace: normaliza el navegador y define el aspecto por defecto del texto.
   Ojo: scroll-padding-top evita que la cabecera fija tape los títulos cuando
        se salta a una sección con un enlace #ancla.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 12px);
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* seguro anti scroll horizontal en móviles */
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  line-height: 1.15;
  margin: 0 0 var(--e3);
  color: var(--azul-900);
  letter-spacing: -.02em;
  text-wrap: balance; /* evita títulos con una palabra huérfana */
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); font-weight: 800; }
h3 { font-size: var(--t-h3); font-weight: 700; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--e4); padding-left: 1.15rem; }
li { margin-bottom: var(--e2); }

/* Inputs a 16px como mínimo: por debajo de eso iOS hace zoom automático
   al tocar el campo y descuadra la página. No bajar de 16px. */
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem;
}

/* Contenedor central: mismo ancho para todas las secciones */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e5);
}

/* Separación vertical estándar entre secciones */
.seccion { padding-block: clamp(var(--e7), 6vw, var(--e9)); }
.seccion--clara { background: var(--azul-050); }
.seccion--gris  { background: var(--gris-100); }

/* Encabezado de sección: título + bajada explicativa */
.seccion__titulo { margin-bottom: var(--e2); }
.seccion__bajada {
  color: var(--gris-500);
  max-width: 62ch;
  margin-bottom: var(--e6);
}

/* Enlace para saltar al contenido (primer elemento enfocable con Tab).
   Solo se ve cuando recibe el foco por teclado. */
.saltar {
  position: absolute; left: var(--e4); top: -100px; z-index: 200;
  background: var(--azul-900); color: var(--blanco);
  padding: var(--e3) var(--e4); border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
  transition: top .18s ease;
}
.saltar:focus { top: var(--e4); }


/* ===========================================================================
   03. UTILIDADES Y BOTONES
   Qué hace: piezas reutilizables (botones, etiquetas, avisos) que se repiten
             en todas las secciones. Si se agrega algo nuevo a la página,
             debe usar estas clases y NO inventar un estilo aparte.
   Táctil: todos los botones tienen mínimo 48px de alto para el pulgar.
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e5);
  border: 1.5px solid transparent;
  border-radius: var(--r);
  font-family: var(--fuente-titulo);
  font-weight: 700; font-size: var(--t-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primario { background: var(--azul-900); color: var(--blanco); }
.btn--claro    { background: var(--blanco); color: var(--azul-900); border-color: var(--gris-300); }
.btn--fantasma { background: transparent; color: var(--azul-900); border-color: var(--azul-900); }
.btn--sobre-oscuro { background: var(--blanco); color: var(--azul-900); }
.btn--wa       { background: var(--wa-oscuro); color: var(--blanco); }
.btn--bloque   { width: 100%; }
.btn--sm       { min-height: 42px; padding: var(--e2) var(--e4); font-size: var(--t-xs); }

/* Los efectos hover SOLO en dispositivos con puntero real: en pantallas
   táctiles el estado se quedaría "pegado" después de tocar. */
@media (hover: hover) {
  .btn--primario:hover { background: var(--azul-800); }
  .btn--claro:hover    { border-color: var(--azul-500); color: var(--azul-700); }
  .btn--fantasma:hover { background: var(--azul-900); color: var(--blanco); }
  .btn--wa:hover       { background: var(--verde-700); }
  .btn--sobre-oscuro:hover { background: var(--azul-100); }
}

.icono { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* Etiquetas pequeñas de estado (Abierta, Nueva, Sector...) */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700;
  font-family: var(--fuente-titulo);
  letter-spacing: .01em;
  white-space: nowrap;
}
.etiqueta--abierta { background: var(--verde-050); color: var(--verde-700); }
/* Convocatoria cuyo plazo ya venció. Va en gris a propósito: se ve, pero no
   compite con las abiertas ni le da falsa esperanza a quien la lee. */
.etiqueta--cerrada { background: var(--gris-200); color: var(--gris-500); }
/* La vacante cerrada se atenúa entera y vuelve a color al pasar por encima,
   para que se pueda leer bien si alguien quiere consultarla. */
.vacante[data-estado="cerrada"] { opacity: .72; }
@media (hover: hover) { .vacante[data-estado="cerrada"]:hover { opacity: 1; } }
.etiqueta--nueva   { background: var(--azul-900); color: var(--blanco); }
.etiqueta--sector  { background: var(--azul-100); color: var(--azul-700); }
.etiqueta--aviso   { background: var(--ambar-050); color: var(--ambar-700); }
/* Sello de comprobación (16/9/2026). Va en AZUL y no en verde a propósito: el
   verde ya es de «Abierta», y dos verdes seguidos se leerían como una sola
   cosa. El azul es el de la marca y el mismo de la etiqueta de sector.
   ⚠️ LO QUE DICE ESTE SELLO ES LO QUE DE VERDAD SE COMPRUEBA, ni una palabra
   más: que la empresa existe, que el contacto es real y que el trabajo es en
   Cartagena. NO dice que la oferta sea buena, ni que vayan a contratar a
   nadie, ni responde por las condiciones de la empresa. Si algún día alguien
   quiere cambiarle el texto por «Oferta verificada» o parecido, NO: eso daría
   a entender que el portal responde por la oferta entera, y el portal no es
   agencia de empleo (Decreto 2852 de 2013). Se le explicó a JX y lo entendió
   así. En pantallas estrechas se acorta con .etiqueta__extra, igual que hace
   el botón «Aplicar por correo». */
.etiqueta--comprobada { background: var(--azul-100); color: var(--azul-700); }
.etiqueta--comprobada .icono { width: 13px; height: 13px; }
.etiqueta__corto { display: none; }        /* solo aparece en ≤500px, ver bloque 15 */
.etiqueta__largo { display: inline; }
.etiqueta__punto   { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Cajas de aviso: mismo patrón visual para los tres tipos */
.aviso {
  border: 1px solid var(--gris-300);
  border-left: 4px solid var(--gris-500);
  border-radius: var(--r);
  padding: var(--e4) var(--e5);
  background: var(--blanco);
  font-size: var(--t-sm);
}
.aviso--ambar { border-left-color: var(--ambar-700); background: var(--ambar-050); border-color: var(--ambar-050); color: var(--ambar-700); }
.aviso--rojo  { border-left-color: var(--rojo-700);  background: var(--rojo-050);  border-color: var(--rojo-050);  color: var(--rojo-700); }
.aviso strong { font-weight: 700; }

/* Dato que la empresa NO publicó: dice «Pregúntalo al aplicar» (o
   «Pregúntala antes de ir» en las direcciones). Hasta el 11/9/2026 decía
   «Por confirmar»; JX pidió que no quedara esa frase en ninguna página.
   Va en ámbar a propósito, NO en rojo: el rojo es solo para el aviso
   anti-estafa, y un dato faltante no es un peligro sino un «ojo, pregunta».
   Se ve distinto para que nadie lo confunda con información verificada. */
.pendiente {
  background: var(--ambar-050); color: var(--ambar-700);
  padding: 1px 7px; border-radius: 5px;
  font-size: .95em; font-weight: 600;
  border: 1px dashed currentColor;
}
/* En la frase que lo explica (arriba de las ofertas) el recuadro no se parte
   entre dos renglones. */
.seccion__bajada .pendiente { white-space: nowrap; }

/* Solo para lectores de pantalla (invisible en pantalla, sí se lee en voz) */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ===========================================================================
   04. CABECERA Y NAVEGACIÓN
   Qué es: la barra de arriba, fija durante todo el scroll.
   Función: marca + acceso rápido a las secciones + botón de publicar vacante.
   Móvil: el menú se convierte en un panel que abre la hamburguesa (js/script.js
          le pone la clase .abierto al <nav> y actualiza aria-expanded).
   =========================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--gris-200);
}
.cabecera__inner {
  display: flex; align-items: center; gap: var(--e4);
  min-height: var(--alto-cabecera);
}

/* Marca: pin + "EmpleosCartagena" */
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--azul-900);
  font-family: var(--fuente-titulo);
  font-size: 1.16rem; font-weight: 600;
  letter-spacing: -.02em;
  margin-right: auto;
}
.marca__icono { width: 34px; height: 34px; flex: none; }
.marca b { font-weight: 800; }

.nav { display: flex; align-items: center; gap: var(--e2); }
 /* :not(.btn) es importante: sin él estas reglas le ganarían al color del
    botón "Publicar vacante" y su texto quedaría gris sobre azul oscuro. */
.nav a:not(.btn) {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--e3);
  color: var(--gris-700); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
  border-radius: var(--r-sm);
}
@media (hover: hover) { .nav a:not(.btn):hover { color: var(--azul-900); background: var(--azul-050); } }
/* Ningún enlace del menú se parte en dos renglones («Antes de / aplicar»). */
.nav a { white-space: nowrap; }
/* Entre 901 y 1180 px (laptops pequeñas, tablets acostadas) el menú completo
   no cabía con su tamaño normal. Se compacta: letra un punto más chica y
   menos relleno. Por debajo de 901 px ya aparece la hamburguesa. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav { gap: 2px; }
  .nav a:not(.btn) { padding: 0 var(--e2); font-size: var(--t-xs); }
}
/* Justo encima de 901 px (con la barra de desplazamiento del computador la
   pantalla útil queda en ~886 px) el botón «Publicar vacante» se salía 6 px
   por la derecha. Se quita un poco más de relleno en ese tramo. */
@media (min-width: 901px) and (max-width: 1000px) {
  .nav a:not(.btn) { padding: 0 6px; }
}

.hamburguesa {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--gris-300);
  border-radius: var(--r-sm); cursor: pointer; color: var(--azul-900);
}
.hamburguesa .icono { width: 22px; height: 22px; }
.hamburguesa .icono--cerrar { display: none; }
.hamburguesa[aria-expanded="true"] .icono--menu { display: none; }
.hamburguesa[aria-expanded="true"] .icono--cerrar { display: block; }


/* ===========================================================================
   05. HERO Y BUSCADOR
   Qué es: la primera pantalla. Título con la palabra clave local,
           cifras reales del portal y el buscador de ofertas.
   Función: que el visitante entienda en 2 segundos qué es esto y pueda
            buscar de una. Es lo primero que lee Google.
   =========================================================================== */
.hero {
  position: relative;
  background: var(--azul-900);
  color: var(--blanco);
  padding-block: clamp(var(--e7), 7vw, 86px);
  overflow: hidden;
}
/* Textura muy sutil de líneas diagonales. Sin brillos ni degradados de
   colores: solo da profundidad al fondo azul. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 420px at 88% -20%, rgba(44, 111, 181, .40), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.hero .contenedor { position: relative; }
.hero h1 { color: var(--blanco); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--azul-300); }
.hero__sub {
  color: #C6D7EB;
  font-size: clamp(1rem, .95rem + .35vw, 1.16rem);
  max-width: 58ch;
  margin-top: var(--e4);
}

/* Cifras del portal (ofertas, empresas, última actualización) */
.hero__cifras {
  display: flex; flex-wrap: wrap; gap: var(--e5);
  list-style: none; padding: 0;
  margin: var(--e6) 0 0;
}
.hero__cifras li { margin: 0; }
.hero__cifra-num {
  display: block;
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: 1.6rem; color: var(--blanco); line-height: 1.1;
}
.hero__cifra-txt { font-size: var(--t-xs); color: #9FB8D4; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
/* La fecha es mucho más larga que los números: va un poco más pequeña para
   que las tres cifras se lean como una misma fila y no salte de línea.
   Es FLEX CON GAP a propósito (16/9/2026): así la separación con la pastilla de
   la versión está garantizada tanto si caben en la misma línea (gap horizontal
   de 8px) como si la pastilla baja (gap vertical de 4px, y queda alineada con
   la fecha). Antes esto se intentaba con márgenes y una media query, y fallaba
   justo en los celulares más comunes: ver el comentario de .hero__version. */
.hero__cifra-num--fecha {
  font-size: 1.05rem; letter-spacing: -.01em; padding-top: 5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e2);
}
/* Versión del sitio, al lado de la fecha (JX la subió aquí el 16/9/2026; antes
   estaba en el pie). Va como pastilla apagada a propósito: es un dato de
   mantenimiento para JX, no algo que le importe a quien busca empleo, así que
   no debe competir con la fecha. */
.hero__version {
  display: inline-block; vertical-align: middle;
  padding: 2px 9px;
  border: 1px solid rgba(143, 192, 240, .35); border-radius: 999px;
  background: rgba(143, 192, 240, .12);
  color: var(--azul-300);
  font-size: .75rem; font-weight: 700; letter-spacing: 0;
}
/* 🔴 AQUÍ HABÍA UN FALLO, corregido el 16/9/2026 (lo vio JX en su celular).
   Antes esta media query le quitaba el margen izquierdo a la pastilla por
   debajo de 560px, dando por hecho que «la fecha ocupa casi todo el ancho y la
   pastilla baja a su propia línea». ESA SUPOSICIÓN ERA FALSA: medido en el
   navegador, la pastilla solo baja de línea por debajo de 360px. Entre 360 y
   560px —que es donde están casi todos los celulares (iPhone 390 y 430,
   Android 360–430)— se quedaba en la misma línea y con 0 px de separación,
   pegada a la fecha. Ahora la separación la pone el `gap` del contenedor
   .hero__cifra-num--fecha, que funciona en los dos casos, y esta media query
   ya no hace falta.
   LA LECCIÓN: no suponer si algo «baja de línea». Se mide. */

/* Buscador */
.buscador {
  margin-top: var(--e6);
  background: var(--blanco);
  border-radius: var(--r-lg);
  padding: var(--e3);
  box-shadow: var(--sombra-3);
  display: grid; gap: var(--e2);
  grid-template-columns: 1fr;
}
.campo { position: relative; display: flex; align-items: center; }
.campo .icono {
  position: absolute; left: 14px; width: 19px; height: 19px;
  color: var(--gris-500); pointer-events: none;
}
.campo input, .campo select {
  width: 100%; min-height: 50px;
  padding: var(--e3) var(--e4) var(--e3) 42px;
  border: 1.5px solid var(--gris-300); border-radius: var(--r);
  background: var(--blanco); color: var(--tinta);
  appearance: none;
}
/* Los desplegables llevan texto más largo de lo que parece: el bloque 05 del JS
   les añade el número de ofertas a cada opción («Logística y portuario (6)»).
   Si algún día ese texto no cupiera, que termine en puntos suspensivos y no
   cortado a mitad de letra. La medida de la columna está en el bloque 15. */
.campo select {
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.campo input:focus, .campo select:focus {
  outline: none; border-color: var(--azul-500);
  box-shadow: 0 0 0 3px rgba(44, 111, 181, .18);
}
.campo input::placeholder { color: var(--gris-500); }


/* ===========================================================================
   06. BARRA DE FILTROS
   Qué es: los "chips" de sector y el contador de resultados, pegados debajo
           de la cabecera mientras se recorren las ofertas.
   Ojo: se queda pegada SOLO dentro de .zona-ofertas (su contenedor en el
        HTML): al terminar las ofertas se va con ellas. Su alto real lo mide
        el bloque 13 de js/script.js en la variable --alto-filtros.
   Depende de: js/script.js les pone la clase .chip--activo al pulsarlos.
   =========================================================================== */
.filtros {
  position: sticky; top: var(--alto-cabecera); z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--gris-200);
  padding-block: var(--e3);
  /* Encierra el desliz lateral de .chips. Sin esto, el ancho de los chips
     (1011px) se escapaba hasta el <body> y el navegador del celular
     agrandaba el lienzo a ~1007px: el aviso de cookies y el boton de
     WhatsApp quedaban fuera de la pantalla. Es 'clip' y no 'hidden'
     para no crear una caja de scroll que rompa el position:sticky. */
  overflow-x: clip;
}
.filtros__fila {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap;
}
.chips {
  display: flex; gap: var(--e2);
  overflow-x: auto; /* en móvil los chips se deslizan de lado */
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-right: auto;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  min-height: 40px; padding: 0 var(--e4);
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--gris-300); border-radius: 999px;
  background: var(--blanco); color: var(--gris-700);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-xs);
  cursor: pointer; white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
@media (hover: hover) { .chip:hover { border-color: var(--azul-500); color: var(--azul-700); } }
.chip--activo { background: var(--azul-900); border-color: var(--azul-900); color: var(--blanco); }
/* Número de ofertas abiertas de cada chip («Hotelería 6»). Lo pone el
   bloque 05 de js/script.js; más suave que el nombre para no competir. */
.chip__num { margin-left: 6px; font-weight: 600; color: var(--gris-500); }
.chip--activo .chip__num { color: var(--azul-100); }
/* Rayita que separa los chips de sector (se elige uno) del interruptor
   «Sin experiencia» (se suma a cualquier sector). */
.chips__separador { flex: none; width: 1px; margin: 6px var(--e1); background: var(--gris-300); }

.contador {
  font-size: var(--t-xs); color: var(--gris-500); font-weight: 600;
  white-space: nowrap;
}
.contador b { color: var(--azul-900); }


/* ===========================================================================
   07. TARJETAS DE EMPRESA Y DE VACANTE
   Qué es: el corazón del sitio. Cada EMPRESA es una tarjeta grande que
           contiene todas SUS vacantes, tal como pidió JX.
   Estructura: .empresa > .empresa__cab (identidad + cómo aplicar)
                        > .vacante (una por cargo)
   Depende de: los atributos data-sector / data-aplicar / data-buscar que
               lee js/script.js para filtrar. Si se agrega una empresa nueva
               hay que ponerle esos atributos o no aparecerá en los filtros.
   =========================================================================== */
.empresas { display: grid; gap: var(--e6); }

.empresa {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* Al saltar a #ofertas, a una empresa (#nrv-facade) o a una vacante
   (#nrv-facade-operador-inventarios), la barra de filtros está pegada
   debajo de la cabecera: este margen deja el título justo por debajo de
   ella. La cabecera ya la descuenta el scroll-padding del bloque 02. */
#ofertas, .empresa, .vacante { scroll-margin-top: var(--alto-filtros); }
.empresa[hidden] { display: none; }

/* Cabecera de la empresa */
.empresa__cab {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e5);
  background: var(--azul-050);
  border-bottom: 1px solid var(--azul-100);
  flex-wrap: wrap;
}
/* Cuadro con la inicial de la empresa. Se usa en vez de un logo porque
   no tenemos los logos oficiales y no se pueden usar sin permiso. */
.empresa__inicial {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  background: var(--azul-900); color: var(--blanco);
  border-radius: var(--r);
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -.03em;
}
.empresa__id { flex: 1 1 260px; min-width: 0; }
.empresa__nombre { font-size: 1.3rem; margin: 0 0 6px; }
.empresa__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  font-size: var(--t-xs); color: var(--gris-500);
}
.empresa__meta a { color: var(--azul-600); font-weight: 600; }

/* Caja "cómo aplicar" de la empresa: el dato más importante para el usuario */
.aplicar {
  flex: 1 1 100%;
  margin-top: var(--e2);
  background: var(--blanco);
  border: 1px solid var(--azul-100);
  border-radius: var(--r);
  padding: var(--e4);
}
.aplicar__titulo {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--azul-700); margin-bottom: var(--e3);
}
.aplicar__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.aplicar__lista li { margin: 0; }
.aplicar__dato {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
}
.aplicar__etq {
  font-size: var(--t-xs); font-weight: 700; color: var(--gris-500);
  text-transform: uppercase; letter-spacing: .06em;
  min-width: 74px;
}
.aplicar__valor {
  font-weight: 600; color: var(--azul-900);
  word-break: break-word; /* correos largos no rompen la tarjeta en móvil */
}
.aplicar__nota { font-size: var(--t-xs); color: var(--gris-500); margin-top: var(--e2); }
/* «Ver en el mapa» junto a la dirección (bloque 14 de js/script.js). Es un
   .btn--claro pequeño; aquí solo se le baja un poco la altura para que no
   descuadre la caja «Cómo aplicar». */
.aplicar__mapa { min-height: 36px; padding: 4px var(--e3); }

/* --- Vacante --- */
.vacantes { display: grid; }
.vacante {
  display: grid; gap: var(--e5);
  padding: var(--e5);
  border-top: 1px solid var(--gris-200);
  grid-template-columns: 1fr;
}
.vacante:first-child { border-top: 0; }
.vacante[hidden] { display: none; }

/* Cada vacante tiene su propio id: es el enlace que se comparte desde el botón
   «Compartir» (empleoscartagena.com/#nrv-facade-operador-inventarios). Su
   margen al llegar está arriba, junto a .empresa (--alto-filtros).
   La vacante a la que se llegó con un enlace compartido se resalta con el
   mismo filo azul de 4px de los avisos, para que se note de una cuál es. */
.vacante:target { background: var(--azul-050); box-shadow: inset 4px 0 0 var(--azul-500); }

.vacante__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.vacante__titulo { margin: 0; flex: 1 1 auto; }
/* Desde la v1.9 el título es un enlace a la página propia de la oferta
   (/empleos/<id>), que es la que lee Google Jobs. Se deja con el MISMO aspecto
   del título —no en azul de enlace— para no llenar el listado de texto azul;
   el subrayado al pasar por encima ya dice que se puede pulsar.
   Ojo: el bloque 11 del JS lee `titulo.textContent`, así que el <a> de dentro
   no le afecta. */
.vacante__titulo a {
  color: inherit; text-decoration: none;
  /* El enlace ocupa toda la línea del título: así la zona tocable es el
     título entero y no solo las letras. */
  display: inline-block;
}
@media (hover: hover) {
  .vacante__titulo a:hover { color: var(--azul-600); text-decoration: underline; text-underline-offset: 3px; }
}
.vacante__titulo a:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 3px; border-radius: var(--r-sm); }
.vacante__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ficha de datos: salario, contrato, experiencia, formación */
.datos {
  display: grid; gap: var(--e3);
  grid-template-columns: 1fr;
  margin: 0 0 var(--e4);
  padding: var(--e4);
  background: var(--gris-100);
  border-radius: var(--r);
}
.datos > div { display: grid; gap: 2px; min-width: 0; }
.datos dt {
  font-size: var(--t-xs); font-weight: 700; color: var(--gris-500);
  text-transform: uppercase; letter-spacing: .06em;
}
.datos dd { margin: 0; font-weight: 600; color: var(--tinta); font-size: var(--t-sm); }
.datos dd.salario { color: var(--verde-700); font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.05rem; }

.requisitos { margin-bottom: 0; }
.requisitos li { font-size: var(--t-sm); color: var(--gris-700); }

.vacante__nota { margin-top: var(--e4); }

/* Columna del flyer */
.flyer { display: grid; gap: var(--e2); align-content: start; }
/* Si el flyer no carga (todavía no se ha subido el WebP, o se borró el archivo),
   se esconde la columna entera en vez de dejar el icono de imagen rota, y la
   vacante pasa a ocupar todo el ancho. Lo activa el bloque 10 de js/script.js.
   OJO: hace falta esta regla porque .flyer es display:grid y eso le gana al
   [hidden] por defecto del navegador — el mismo motivo por el que existe
   .vacante[hidden] más arriba. */
.flyer[hidden] { display: none; }
.flyer__boton {
  padding: 0; border: 1px solid var(--gris-300); border-radius: var(--r);
  background: var(--gris-100); cursor: zoom-in; overflow: hidden;
  line-height: 0; width: 100%;
  transition: border-color .18s ease;
}
@media (hover: hover) { .flyer__boton:hover { border-color: var(--azul-500); } }
.flyer__boton img { width: 100%; height: auto; }
.flyer__pie { font-size: var(--t-xs); color: var(--gris-500); text-align: center; }

/* Pie de la vacante: fuente y fecha de publicación */
.vacante__pie {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  padding-top: var(--e4);
  border-top: 1px dashed var(--gris-300);
  font-size: var(--t-xs); color: var(--gris-500);
}
.vacante__pie span { display: inline-flex; align-items: center; gap: 6px; }

/* Acciones de cada vacante abierta: «Aplicar» (azul) y «Compartir» (blanco,
   abre la ventana con todas las redes del bloque 08). Las crea el bloque 11
   de js/script.js al final del pie (no están escritas en el HTML: así el
   Panel no tiene que generarlas). Se van a la derecha; en celular ocupan
   todo el ancho, mitad y mitad (bloque 15). */
.vacante__pie .vacante__acciones { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--e2); }
/* Texto del botón Aplicar: «Aplicar» + « por correo» (.btn__extra). Los dos
   van display:inline a propósito: la regla .vacante__pie span los volvería
   inline-flex y el espacio entre «Aplicar» y «por» se descuadraría.
   En ≤500px .btn__extra se esconde (bloque 15) y queda solo «Aplicar». */
.vacante__pie .btn__texto, .vacante__pie .btn__extra { display: inline; }
/* «¿Ya no está vigente? Avísanos»: enlace discreto, del mismo gris del pie. */
/* Zona tocable de «¿Ya no está vigente? Avísanos» (16/9/2026).
   Medía 21 px de alto, por debajo de los 24 px que pide la WCAG 2.2 (criterio
   2.5.8), igual que les pasaba al botón de cookies y a los enlaces del pie.
   Se escapó de aquella revisión porque este enlace NO está escrito en el HTML:
   lo crea el bloque 11 del JS, así que el barrido sobre el HTML no lo veía.
   El margen negativo es menor que el relleno a propósito: así la zona tocable
   no se come el hueco de 8 px que hay hasta los botones de abajo. Comprobado
   en el navegador, no calculado a ojo. */
.vacante__reporte {
  color: var(--gris-500); text-underline-offset: 3px;
  display: inline-block; padding: 6px 2px; margin: -4px -2px;
}
@media (hover: hover) { .vacante__reporte:hover { color: var(--azul-600); } }

/* Mensaje cuando el filtro no devuelve nada */
.sin-resultados {
  text-align: center; padding: var(--e8) var(--e5);
  background: var(--blanco); border: 1px dashed var(--gris-300);
  border-radius: var(--r-xl); color: var(--gris-500);
}
.sin-resultados h3 { color: var(--azul-900); }

/* --- Avisos por WhatsApp, al final del listado (16/9/2026, lo pidió JX) ------
   Usa la paleta de siempre: el azul clarito de sección, borde suave y los
   botones .btn--claro que ya existen. Nada nuevo inventado.
   Va DESPUÉS de la paginación a propósito: es cuando la persona ya recorrió
   todo el listado y no encontró lo suyo. Lo eligió JX entre tres sitios.
   En @media print se esconde: en papel un botón de WhatsApp no sirve. */
.avisos {
  margin-top: var(--e6);
  padding: var(--e5);
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-radius: var(--r-lg);
  text-align: center;
}
.avisos h3 { margin: 0 0 var(--e2); font-size: var(--t-h3); }
.avisos p {
  margin: 0 auto var(--e4);
  max-width: 62ch;
  color: var(--gris-700); font-size: var(--t-sm);
}
.avisos__botones { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; }

/* --- Paginación del listado -------------------------------------------------
   Qué hace: los botones de página que hay debajo de las ofertas. Los dibuja
             solo el bloque 15 de js/script.js; aquí únicamente se visten.
   Diseño: los números son la misma pastilla de los chips de sector, para que
           no parezca un elemento traído de otra web. «Anterior» y «Siguiente»
           reutilizan .btn--claro .btn--sm, que ya existen.
   Ojo: .fuera-de-pagina es lo que esconde las empresas que no tocan en esta
        página. Se queda aquí, junto a la paginación, porque es parte de lo
        mismo: al imprimir se anula y salen todas las ofertas seguidas. */
.paginacion {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--e2);
  margin-top: var(--e6);
}
.empresa.fuera-de-pagina { display: none; }
.paginacion__num {
  /* 44px, no los 40 de los chips: esto no es un filtro, es la navegación del
     listado y se pulsa con el pulgar. 44px es el mínimo cómodo en celular. */
  min-width: 44px; min-height: 44px; padding: 0 var(--e3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gris-300); border-radius: 999px;
  background: var(--blanco); color: var(--gris-700);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-xs);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
@media (hover: hover) { .paginacion__num:hover { border-color: var(--azul-500); color: var(--azul-700); } }
.paginacion__num--activo {
  background: var(--azul-900); border-color: var(--azul-900); color: var(--blanco);
  cursor: default;
}
.paginacion__puntos { color: var(--gris-500); padding: 0 var(--e1); }
/* Los de mover se apagan en la primera y en la última página: se dejan a la
   vista en gris para que la fila no cambie de tamaño al pasar de página. */
.paginacion__mover { min-height: 44px; }   /* .btn--sm trae 42; aquí se sube al mínimo cómodo */
.paginacion__mover[disabled] { opacity: .45; cursor: default; }

/* --- Directorio de empresas -------------------------------------------------
   Qué hace: el índice de empresas del final del listado. Lo llena solo el
             bloque 16 de js/script.js; aquí únicamente se viste.
   Diseño: la misma pastilla de los chips de sector, para que se lea como parte
           de la misma web y no como un añadido. El número va en una pastilla
           azul clara dentro, como el contador de los chips.
   Ojo: la sección nace con el atributo hidden y el JS se lo quita al terminar.
        Si el JavaScript fallara, no se ve nada y no queda un hueco vacío. */
.directorio {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  list-style: none; padding: 0; margin: 0;
}
.directorio li { margin: 0; }
.directorio__item {
  display: inline-flex; align-items: center; gap: var(--e2);
  /* 44px: es navegación y se pulsa con el pulgar, igual que la paginación. */
  min-height: 44px; padding: 0 var(--e3) 0 var(--e4);
  border: 1.5px solid var(--gris-300); border-radius: 999px;
  background: var(--blanco); color: var(--gris-700);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-xs);
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}
@media (hover: hover) {
  .directorio__item:hover { border-color: var(--azul-500); color: var(--azul-700); }
}
.directorio__num {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: var(--azul-100); color: var(--azul-700);
  font-size: .7rem; font-weight: 700;
}

/* ===========================================================================
   08. VISOR DE FLYER (LIGHTBOX) Y VENTANA «COMPARTIR ESTA OFERTA»
   Qué hace: al tocar un flyer, lo muestra grande y centrado sobre un fondo
             oscuro. Se cierra con la X, con Escape o tocando fuera.
             La ventana de compartir (más abajo) funciona igual.
   Depende de: js/script.js (bloques 06 y 11) y de los id #visor y #compartir.
   =========================================================================== */
.visor {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 25, 46, .92);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--e5);
}
.visor.abierto { display: flex; }
.visor img {
  max-width: min(94vw, 760px);
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--r);
  box-shadow: var(--sombra-3);
}
.visor__cerrar {
  position: absolute;
  top: calc(var(--e4) + env(safe-area-inset-top));
  right: calc(var(--e4) + env(safe-area-inset-right));
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--blanco); color: var(--azul-900);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: var(--sombra-2);
}
/* Flechas para pasar de un flyer al siguiente sin cerrar el visor.
   Van pegadas a los bordes y centradas a media altura. Miden 48px, lo
   mínimo cómodo para el pulgar, y el bloque 06 del JS las esconde cuando
   solo hay un flyer a la vista. */
.visor__mover {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--blanco); color: var(--azul-900);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: var(--sombra-2);
}
.visor__mover--izq { left: calc(var(--e3) + env(safe-area-inset-left)); }
.visor__mover--der { right: calc(var(--e3) + env(safe-area-inset-right)); }
.visor__mover[hidden] { display: none; }
@media (hover: hover) { .visor__mover:hover { background: var(--azul-100); } }
/* «3 de 7»: dice cuántos flyers hay y en cuál va, para que no se sienta que
   uno pasa a ciegas. */
.visor__cuenta {
  position: absolute;
  bottom: calc(var(--e4) + env(safe-area-inset-bottom));
  left: 0; right: 0; text-align: center;
  color: var(--blanco); font-size: var(--t-xs); font-weight: 600;
  margin: 0; pointer-events: none;
}
/* En pantallas estrechas las flechas se comerían el flyer: se bajan debajo
   de la imagen, repartidas a los lados del contador. */
@media (max-width: 500px) {
  .visor__mover { top: auto; bottom: calc(var(--e3) + env(safe-area-inset-bottom)); transform: none; }
}

/* --- Ventana «Compartir esta oferta» ---
   Mismo patrón que el visor: fondo azul oscuro translúcido y una caja
   blanca encima. En celular sale como hoja desde abajo (más cómoda para el
   pulgar); desde 600px sale centrada (ver bloque 15).
   Los botones son .btn--claro con el icono de cada red en azul: la paleta
   del sitio es blanco + azul. (El botón flotante de WhatsApp también pasó a
   azul el 16/9/2026; el verde quedó solo en los botones «Aplicar por
   WhatsApp» de cada oferta.) Depende del bloque 11 de js/script.js. */
.compartir-modal {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(8, 25, 46, .72);
  display: none;
  align-items: flex-end; justify-content: center;
}
.compartir-modal.abierto { display: flex; }
.compartir-modal__caja {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 92vh; overflow-y: auto;
  background: var(--blanco);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sombra-3);
  padding: var(--e5) var(--e5) calc(var(--e5) + env(safe-area-inset-bottom));
}
.compartir-modal__cerrar {
  position: absolute; top: var(--e3); right: var(--e3);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--gris-100); color: var(--azul-900);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: background-color .18s ease;
}
@media (hover: hover) { .compartir-modal__cerrar:hover { background: var(--azul-100); } }
.compartir-modal__etq {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--azul-700);
  margin: 0 0 var(--e2); padding-right: 56px;
}
.compartir-modal__titulo {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em;
  color: var(--azul-900);
  margin: 0 0 4px; padding-right: 56px;
}
.compartir-modal__empresa { font-size: var(--t-sm); color: var(--gris-500); margin: 0 0 var(--e5); }
.compartir-modal__redes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.compartir-modal__redes .btn { justify-content: flex-start; padding-inline: var(--e4); }
/* Mismo motivo que .flyer[hidden]: .btn es inline-flex y le gana al
   [hidden] del navegador. «Más apps» empieza escondido. */
.compartir-modal__redes .btn[hidden] { display: none; }
.compartir-modal__redes .icono { width: 20px; height: 20px; color: var(--azul-900); }
/* «Copiar enlace» confirma con el borde azul de foco y el texto «¡Copiado!» */
.compartir-modal__redes .btn.copiado { border-color: var(--azul-500); color: var(--azul-700); }
.compartir-modal__nota { font-size: var(--t-xs); color: var(--gris-500); margin: var(--e4) 0 0; }

/* --- Ventana «Aplicar por correo» -------------------------------------------
   Reutiliza ENTERA la ventana de compartir (.compartir-modal): aquí solo se
   viste la línea que enseña a qué correo va la postulación.
   Va antes de los botones a propósito: quien prefiera escribir desde su
   teléfono necesita ver la dirección, no solo pulsar un botón. */
#aplicar-correo .compartir-modal__empresa { margin-bottom: var(--e3); }
.aplicar-correo__destino {
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--azul-100); border-radius: var(--r-sm);
  background: var(--azul-050);
  font-size: var(--t-sm); color: var(--tinta);
  /* Hay empresas que reciben en dos correos: sin esto se desbordan a 320px. */
  word-break: break-all;
}
.aplicar-correo__etq {
  display: block; margin-bottom: 2px;
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: var(--t-xs); color: var(--gris-500);
  text-transform: uppercase; letter-spacing: .04em;
}

/* --- Página de UNA sola oferta (/empleos/<id>) ------------------------------
   Qué es: el diseño de las 46 páginas que generan una por vacante, las que
           permiten que Google las meta en Google Jobs.
   📌 Casi todo se reutiliza tal cual del portal: la tarjeta .empresa, la
      .vacante, la ficha .datos, el .flyer, la cabecera y el pie. Lo único
      propio es lo de aquí abajo: las migas de pan y el encabezado.
      Si un día se rediseña la tarjeta de empresa, estas páginas cambian solas. */

/* Migas de pan: Empleos Cartagena › Empresa › Cargo.
   Van también en JSON-LD (BreadcrumbList) para que Google las enseñe. */
.migas {
  background: var(--azul-050);
  border-bottom: 1px solid var(--azul-100);
  padding: var(--e3) 0;
  font-size: var(--t-xs); color: var(--gris-500);
}
.migas .contenedor {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
.migas a { color: var(--azul-600); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
/* 24px de alto tocable: son enlaces de navegación y se pulsan con el pulgar.
   El margen negativo es MENOR que el relleno, igual que en .vacante__reporte,
   para que dos migas seguidas no se solapen al tocarlas. */
.migas a { display: inline-block; padding: 5px 2px; margin: -3px -2px; }
.migas [aria-current] { color: var(--gris-700); font-weight: 600; }

.oferta-sola { padding-top: var(--e6); }
.oferta-sola__h1 {
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: 1.15; margin: 0 0 var(--e2);
}
.oferta-sola__empresa {
  font-size: var(--t-sm); color: var(--gris-500);
  margin: 0 0 var(--e6);
}
.oferta-sola__volver { margin: var(--e6) 0 0; }
/* La flecha del botón «Ver las N ofertas» mira a la izquierda: se vuelve. */
.oferta-sola__volver .icono { transform: none; }
.oferta-sola__aviso { margin-top: var(--e6); }
.oferta-sola__aviso p { margin: 0; }


/* ===========================================================================
   09. BLOQUES INFORMATIVOS
   Incluye: "Antes de aplicar" (anti-estafa y derechos), "Publica tu vacante"
            y la sección de hojas de vida de JX.
   =========================================================================== */

/* Subtítulo dentro de una vacante ("Requisitos publicados", "Te ofrecen"…).
   Es un <h5>: mantiene la jerarquía correcta debajo del <h4> del cargo. */
.mini-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gris-500);
  margin: var(--e4) 0 var(--e2);
}

/* --- Antes de aplicar: rejilla de consejos --- */
.consejos {
  display: grid; gap: var(--e4);
  grid-template-columns: 1fr;
  margin-bottom: var(--e5);
}
.consejo {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--r-lg);
  padding: var(--e5);
}
.consejo__icono {
  width: 42px; height: 42px; margin-bottom: var(--e3);
  display: grid; place-items: center;
  background: var(--azul-050); color: var(--azul-700);
  border-radius: var(--r-sm);
}
.consejo__icono .icono { width: 21px; height: 21px; }
.consejo h3 { font-size: 1.05rem; margin-bottom: 6px; }
.consejo p { font-size: var(--t-sm); color: var(--gris-700); margin: 0; }

/* --- Publica tu vacante (para empresas) --- */
.publica {
  background: var(--azul-900); color: var(--blanco);
  border-radius: var(--r-xl);
  padding: clamp(var(--e5), 4vw, var(--e7));
  display: grid; gap: var(--e5);
  align-items: center;
}
.publica h2 { color: var(--blanco); }
.publica p { color: #C6D7EB; margin: 0; }
.publica__pasos { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; gap: var(--e2); }
.publica__pasos li {
  display: flex; gap: var(--e3); align-items: flex-start;
  font-size: var(--t-sm); color: #D6E3F2; margin: 0;
}
.publica__pasos b {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: var(--blanco);
  display: grid; place-items: center;
  font-size: var(--t-xs); font-family: var(--fuente-titulo);
}
.publica__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
/* La nota del final va SEPARADA de los botones y más apagada que el párrafo
   de arriba. Lleva el doble selector .publica .publica__nota a propósito: con
   una sola clase, la regla .publica p de arriba (clase + etiqueta) le ganaba en
   especificidad y le imponía su margin:0 y su color, así que la nota salía
   pegada a los botones y con el mismo tono del texto principal. Medido el
   16/9/2026: 0 px de separación en los 5 anchos. NO bajarlo a una sola clase. */
.publica .publica__nota { font-size: var(--t-xs); color: #9FB8D4; margin-top: var(--e4); }

/* --- Hojas de vida JX ---
   Es la "ventanita" aparte que pidió JX: mismo idioma visual del sitio pero
   con su identidad (negro + dorado/plateado) para que se lea como un
   servicio distinto y no se confunda con el portal de empleos. */
.jx {
  --jx-oro-1: #E8C86A;
  --jx-oro-2: #C9A84C;
  position: relative;
  background: #0E0E10;
  color: #F2F2F3;
  border: 1px solid #26262B;
  border-radius: var(--r-xl);
  padding: clamp(var(--e5), 4vw, var(--e7));
  overflow: hidden;
  display: grid; gap: var(--e5);
}
.jx::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 320px at 92% 4%, rgba(232, 200, 106, .10), transparent 60%);
  pointer-events: none;
}
.jx > * { position: relative; }
.jx__marca { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
/* Logo real de JX (monograma plateado sobre negro). Va como una placa:
   esquinas redondeadas y un filo dorado muy tenue para que el cuadro negro
   se lea como un elemento intencional sobre el fondo #0E0E10 de la sección. */
.jx__logo {
  width: 64px; height: 64px; flex: none;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(232, 200, 106, .28);
}
.jx__marca-txt {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: #9A9AA2;
}
.jx h2 { color: #FFFFFF; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.jx h2 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--jx-oro-1), var(--jx-oro-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.jx p { color: #BFBFC6; }
.jx__lista { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; gap: var(--e2); }
.jx__lista li { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--t-sm); color: #D6D6DC; margin: 0; }
.jx__lista .icono { color: var(--jx-oro-1); margin-top: 3px; }
.jx__cta { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e5); }
.jx__btn {
  background: linear-gradient(180deg, var(--jx-oro-1), var(--jx-oro-2));
  color: #171712; border: 0;
}
@media (hover: hover) { .jx__btn:hover { filter: brightness(1.07); } }
.jx__nota { font-size: var(--t-xs); color: #8B8B93; }
.jx__nota--pie { display: block; margin-top: var(--e4); }


/* ===========================================================================
   10. PREGUNTAS FRECUENTES
   Qué hace: acordeón nativo con <details>. Sin JavaScript: funciona aunque
             el script falle, y Google lo lee como FAQ.
   =========================================================================== */
.faq { display: grid; gap: var(--e3); max-width: 820px; }
.faq details {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--r);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--e4) var(--e5);
  min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  font-family: var(--fuente-titulo); font-weight: 700;
  color: var(--azul-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--azul-600);
  border-bottom: 2.5px solid var(--azul-600);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq .faq__cuerpo { padding: 0 var(--e5) var(--e5); color: var(--gris-700); font-size: var(--t-sm); }


/* ===========================================================================
   11. PIE DE PÁGINA Y CRÉDITO JX ENTERPRISE
   Ojo: el bloque .footer-dev es el crédito obligatorio de JX Enterprise.
        NO cambiar sus clases, su orden ni sus colores.
   =========================================================================== */
.pie {
  background: var(--azul-950); color: #B7C7DA;
  padding-block: var(--e7) var(--e5);
  font-size: var(--t-sm);
}
.pie__grid {
  display: grid; gap: var(--e6);
  grid-template-columns: 1fr;
  padding-bottom: var(--e6);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.pie h3 {
  color: var(--blanco); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--e3);
}
.pie a { color: #C6D7EB; text-decoration: none; }
@media (hover: hover) { .pie a:hover { color: var(--blanco); text-decoration: underline; } }
/* Los enlaces del pie iban a 18px de alto y en el celular se fallaba el toque.
   Es el mismo fallo que ya se le corrigio al boton «Configuracion de cookies»
   el 16/9/2026, pero a sus vecinos se les habia pasado. Ahora cada enlace es
   un bloque con relleno vertical: 30px tocables, por encima de los 24px que
   pide la norma WCAG 2.2 (criterio 2.5.8). El hueco de la lista baja a 0 para
   compensar, asi que el pie se ve practicamente igual que antes.
   OJO: aqui NO se usa el truco del margen negativo del boton de cookies. Estos
   enlaces van apilados, y un margen negativo haria que las zonas tocables de
   dos enlaces seguidos se solaparan y se tocara el que no es. */
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.pie ul a, .pie ul .pie__boton-cookies { display: inline-block; padding: 6px 0; }
.pie .marca { color: var(--blanco); margin-bottom: var(--e3); }
.pie__desc { max-width: 40ch; color: #93A9C4; }
.pie__legal {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4);
  justify-content: center; text-align: center;
  padding-top: var(--e5);
  font-size: var(--t-xs); color: #8199B5;
}
/* Misma razon que arriba: estos cuatro (Inicio, Privacidad, Cookies, Terminos)
   median 15px de alto. Con este relleno pasan a 25px tocables. El hueco
   vertical de la fila subio a 12px para que, cuando se parten en dos renglones
   en pantallas estrechas, las zonas tocables no se pisen entre si. */
.pie__legal a { display: inline-block; padding: 5px 4px; }
.pie__copy { width: 100%; text-align: center; }
.pie__boton-cookies {
  background: none; border: 0;
  /* Este boton vive en DOS sitios distintos y necesita funcionar en los dos:
     en index.html va dentro de un <ul> del pie, y en las tres paginas legales
     va suelto dentro de un <p>, en linea con «Inicio · Privacidad · ...».
     Aqui se le da el relleno del caso «suelto en un parrafo» (35px tocables);
     ahi el relleno vertical no empuja nada, porque el elemento va en linea.
     Dentro del <ul> manda la regla «.pie ul .pie__boton-cookies» de mas
     arriba, que es mas especifica y lo deja en 6px para que su zona tocable
     no se solape con la del enlace que tiene encima. */
  padding: 10px 6px; margin-inline: -6px;
  color: #C6D7EB; cursor: pointer; font-size: var(--t-xs);
  text-decoration: underline; text-underline-offset: 3px;
}

/* --- Crédito de JX Enterprise (formato exacto obligatorio) ---
   📌 REGLA DE MARCA (JX, 16/9/2026): este crédito NO SE QUITA NUNCA ni se mueve
   de donde está. Es la marca de JX y va en todos sus proyectos. Sus palabras:
   «no me lo quites, eso es importante, eso es la marca y no la quiero quitar de
   donde está».
   El tamaño subió de .62rem (9,9px) a .75rem (12px) ese mismo día, porque a
   9,9px no se leía: 12px es el mínimo que se considera legible y sigue siendo
   discreto frente al texto normal de 16px. JX lo pidió así: «agrándalo solo un
   poco, no exagerado tampoco». NO subirlo más: debe leerse, no llamar la
   atención por encima del contenido del portal. */
.footer-dev {
  width: 100%;
  text-align: center;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .75rem;
  margin-top: var(--e5);
}
.footer-dev-txt {
  background: linear-gradient(180deg, #F0F0F0, #A8A8A8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-dev-jx,
.footer-dev-co {
  background: linear-gradient(180deg, #E8C86A, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ===========================================================================
   12. BOTONES FLOTANTES (WHATSAPP Y VOLVER ARRIBA)
   Qué es: el ÚNICO botón de WhatsApp del portal, fijo abajo a la derecha, y
           encima de él el de volver arriba (solo en celular y tablet).
   Ojo: usa env(safe-area-inset-*) para que la barra del iPhone no lo tape.
        Suben un poco cuando el banner de cookies está visible (clase en <body>).
   =========================================================================== */
.wa-float {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 70;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Azul de la marca, no el verde de WhatsApp: lo pidió JX el 16/9/2026 para
     que el botón case con el resto del sitio. El icono blanco de WhatsApp
     sigue diciendo de qué es. Los botones «Aplicar por WhatsApp» de dentro de
     las ofertas SÍ siguen verdes: ahí el verde ayuda a distinguir el canal. */
  background: var(--azul-900); color: #FFFFFF;
  box-shadow: var(--sombra-3);
  text-decoration: none;
  transition: bottom .25s ease, background-color .18s ease;
}
.wa-float .icono { width: 30px; height: 30px; }
@media (hover: hover) { .wa-float:hover { background: var(--azul-800); } }
body.con-cookies .wa-float { bottom: calc(150px + env(safe-area-inset-bottom)); }

/* Volver arriba. Desde el 16/9/2026 aparece en TODAS las pantallas, no solo en
   celular: lo pidió JX. Con 42 ofertas repartidas en 6 páginas, el recorrido de
   vuelta en un monitor grande también es largo, y la cabecera fija no lleva
   arriba del todo. Sale cuando la persona bajó más de pantalla y media
   (bloque 12 de js/script.js, que nunca miró el ancho: solo lo tapaba el CSS).
   Medidas: queda centrado con el botón de WhatsApp (58px) y 12px encima:
   right = 18 + (58 − 48) / 2 = 23px · bottom = 18 + 58 + 12 = 88px.
   Si cambia el tamaño del botón de WhatsApp, hay que recalcular esto. */
.arriba {
  position: fixed;
  right: calc(23px + env(safe-area-inset-right));
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 70;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--gris-300);
  border-radius: 50%;
  background: var(--blanco); color: var(--azul-900);
  box-shadow: var(--sombra-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, bottom .25s ease;
}
.arriba .icono { width: 22px; height: 22px; }
.arriba.visible { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .arriba:hover { border-color: var(--azul-500); } }
body.con-cookies .arriba { bottom: calc(220px + env(safe-area-inset-bottom)); } /* 150 + 58 + 12 */


/* ===========================================================================
   13. BANNER DE COOKIES
   Qué hace: pide consentimiento ANTES de cargar Google Analytics.
             Aceptar y Rechazar tienen el mismo peso visual (lo exige la
             Resolución 32.126 de 2022 de la SIC en Colombia).
   Depende de: js/script.js (guarda la decisión en localStorage).
   =========================================================================== */
.cookies {
  position: fixed; z-index: 80;
  left: var(--e4); right: var(--e4);
  bottom: calc(var(--e4) + env(safe-area-inset-bottom));
  max-width: 620px; margin-inline: auto;
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  padding: var(--e5);
  display: none;
}
.cookies.visible { display: block; }
.cookies p { font-size: var(--t-sm); color: var(--gris-700); margin-bottom: var(--e4); }
.cookies__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }


/* ===========================================================================
   14. PÁGINAS INTERNAS (legales y 404)
   Qué hace: da a privacidad / cookies / términos / 404 el mismo diseño del
             portal, con el texto en una columna cómoda de leer.
   =========================================================================== */
.doc { max-width: 780px; }
.doc h2 { font-size: 1.35rem; margin-top: var(--e7); }
.doc h2:first-of-type { margin-top: var(--e5); }
.doc h3 { font-size: 1.08rem; margin-top: var(--e5); }
.doc p, .doc li { color: var(--gris-700); }
.doc__meta { color: var(--gris-500); font-size: var(--t-sm); }

.error404 {
  min-height: 62vh;
  display: grid; place-items: center; text-align: center;
  padding-block: var(--e8);
}
.error404__num {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 9vw, 8rem);
  line-height: 1; color: var(--azul-100);
  letter-spacing: -.05em;
}
.error404__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; margin-top: var(--e5); }


/* ===========================================================================
   15. RESPONSIVE
   Regla del proyecto: TODO lo que se agregue se revisa en TODOS estos rangos.
   El diseño base de arriba es el de MÓVIL; aquí se agranda hacia arriba y
   se ajustan los casos extremos hacia abajo.
   =========================================================================== */

/* --- Tablet pequeña: 600px en adelante --- */
@media (min-width: 600px) {
  .buscador { grid-template-columns: 1fr auto; }
  .campo--sector { min-width: 266px; }   /* mismo motivo que arriba. 266 y no 260: «Logística y portuario (11)» pasó a dos cifras y pide 202px de texto */
  .campo--zona { min-width: 275px; }     /* «Manga y Pie del Cerro (4)»: medido, pide 203px de texto */
  .consejos { grid-template-columns: repeat(2, 1fr); }
  .datos { grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
  .cookies__acciones { grid-template-columns: auto auto; justify-content: start; }
  .pie__grid { grid-template-columns: repeat(2, 1fr); }
  .compartir-modal { align-items: center; padding: var(--e5); }
  .compartir-modal__caja { border-radius: var(--r-xl); padding: var(--e6); }
  .compartir-modal__cerrar { top: var(--e4); right: var(--e4); }
}

/* --- Tablet: 768px en adelante --- */
@media (min-width: 768px) {
  /* DOS COLUMNAS, no tres (16/9/2026). Antes eran «1fr 260px 210px» para tres
     campos; al entrar el filtro de ZONA son cuatro, y en tres columnas el
     cuarto caía solo en la fila de abajo y al de zona le quedaban 210px, donde
     «Manga y Pie del Cerro (4)» (203px de texto) NO cabía.
     Con dos columnas quedan dos filas de dos, cada campo por encima de 360px.
     A partir de 1180px vuelven a caber los cuatro en una sola fila.
     ⚠️ SI SE AÑADE UN QUINTO FILTRO, HAY QUE VOLVER A MEDIR ESTO. El texto más
     largo de cada desplegable se mide en el navegador, no a ojo: el bloque 05
     del JS le añade a cada opción su número entre paréntesis. Con 260px
     faltaba UN píxel para «Manga y Pie del Cerro (4)»; por eso son 275. */
  .buscador { grid-template-columns: 1fr 1fr; }
  .publica { grid-template-columns: 1.2fr 1fr; gap: var(--e7); }
  .jx { grid-template-columns: 1.15fr .85fr; gap: var(--e7); align-items: center; }
}

/* --- Pantallas anchas: los cuatro filtros caben en una sola fila --- */
@media (min-width: 1180px) {
  /* 260px para la zona y 250px para el sector: son los dos desplegables con el
     texto más largo («Manga y Pie del Cerro (4)» y «Logística y portuario
     (11)»). Medido en el navegador con la opción más larga seleccionada. */
  .buscador { grid-template-columns: 1fr 266px 275px 210px; }
}

/* --- Escritorio: 901px en adelante --- */
@media (min-width: 901px) {
  .vacante { grid-template-columns: minmax(0, 1fr) 210px; column-gap: var(--e6); }
  /* Vacante cuyo flyer no cargó: una sola columna, sin hueco vacío al lado. */
  .vacante--sin-flyer { grid-template-columns: minmax(0, 1fr); }
  /* Vacante publicada todavía SIN flyer (no tiene <div class="flyer">): lo
     mismo, sin depender del JavaScript. */
  .vacante:not(:has(> .flyer)) { grid-template-columns: minmax(0, 1fr); }
  .datos { grid-template-columns: repeat(4, 1fr); }
  .consejos { grid-template-columns: repeat(4, 1fr); }
  .pie__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .empresa__cab { flex-wrap: nowrap; align-items: center; }
  .aplicar { flex: 0 1 460px; margin-top: 0; }
  .aplicar__lista { grid-template-columns: 1fr; }
}

/* --- Pantallas grandes y TV: 1440px en adelante --- */
@media (min-width: 1440px) {
  :root { --ancho-max: 1240px; }
  .hero { padding-block: 92px 68px; }
}

/* --- Móvil: hasta 900px. Aquí aparece el menú hamburguesa. --- */
@media (max-width: 900px) {
  :root { --alto-filtros: 100px; }
  .hamburguesa { display: flex; }
  .cabecera__nav-btn { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-200);
    box-shadow: var(--sombra-2);
    padding: var(--e3) var(--e5) var(--e5);
    max-height: calc(100vh - var(--alto-cabecera));
    overflow-y: auto;
    display: none;
  }
  .nav.abierto { display: flex; }
  .nav a:not(.btn) { min-height: 52px; border-bottom: 1px solid var(--gris-200); border-radius: 0; padding-inline: 0; }
  .nav a:not(.btn):last-of-type { border-bottom: 0; }
  .nav .btn { margin-top: var(--e3); }
}

/* --- Móvil pequeño: hasta 768px --- */
@media (max-width: 768px) {
  .contenedor { padding-inline: var(--e4); }
  .empresa__cab { padding: var(--e4); }
  .vacante { padding: var(--e4); }
  .hero__cifras { gap: var(--e4) var(--e5); }
}

/* --- Teléfono pequeño: hasta 500px --- */
@media (max-width: 500px) {
  .flyer { max-width: 260px; margin-inline: auto; width: 100%; }
  .vacante__cab { gap: var(--e2); }
  .publica__acciones .btn, .jx__cta .btn { width: 100%; }
  /* Aplicar y Compartir: a todo el ancho, mitad y mitad, cómodos para el pulgar */
  .vacante__pie .vacante__acciones { width: 100%; }
  .vacante__acciones .btn { flex: 1 1 0; }
  .vacante__pie .btn__extra { display: none; }
  /* Seis pastillas sueltas dejaban la última sola en su renglón: en dos
     columnas quedan tres filas parejas. */
  .avisos { padding: var(--e4); }
  .avisos__botones { display: grid; grid-template-columns: 1fr 1fr; }
  .avisos__botones .btn { width: 100%; }
  /* El sello pasa de «Empresa y contacto comprobados» a «Contacto comprobado»:
     el texto largo partiría la fila de etiquetas en tres renglones en un
     celular. La «C» mayúscula de .etiqueta__corto sustituye a la «c» minúscula
     que queda dentro del trozo que se esconde. */
  .etiqueta__extra { display: none; }
  .etiqueta__largo { display: none; }
  .etiqueta__corto { display: inline; }
}

/* --- Teléfono muy pequeño: hasta 480px --- */
@media (max-width: 480px) {
  :root { --alto-cabecera: 62px; }
  .marca { font-size: 1.02rem; }
  .marca__icono { width: 30px; height: 30px; }
  .buscador { padding: var(--e2); }
  .cookies { left: var(--e3); right: var(--e3); padding: var(--e4); }
  .cookies__acciones { grid-template-columns: 1fr; }
  body.con-cookies .wa-float { bottom: calc(190px + env(safe-area-inset-bottom)); }
  body.con-cookies .arriba { bottom: calc(260px + env(safe-area-inset-bottom)); } /* 190 + 58 + 12 */
}

/* --- Gama baja (Redmi, Samsung entry-level): hasta 380px ---
   Aquí el peligro es que los correos largos y los títulos de dos palabras
   desborden. Se reduce el padding y se permite el corte de palabra. */
@media (max-width: 380px) {
  .contenedor { padding-inline: var(--e3); }
  .empresa__cab, .vacante { padding: var(--e3); }
  .empresa__inicial { width: 46px; height: 46px; font-size: 1.1rem; }
  .datos { padding: var(--e3); }
  .aplicar { padding: var(--e3); }
  .aplicar__valor { font-size: var(--t-sm); overflow-wrap: anywhere; }
  .hero__cifra-num { font-size: 1.35rem; }
  .wa-float { width: 52px; height: 52px; }
  .wa-float .icono { width: 27px; height: 27px; }
  /* El de WhatsApp baja a 52px: el de volver arriba se recentra encima.
     right = 18 + (52 − 48) / 2 = 20px · bottom = 18 + 52 + 12 = 82px */
  .arriba { right: calc(20px + env(safe-area-inset-right)); bottom: calc(82px + env(safe-area-inset-bottom)); }
  body.con-cookies .arriba { bottom: calc(254px + env(safe-area-inset-bottom)); } /* 190 + 52 + 12 */
  /* Ventana de compartir: a este ancho «Copiar enlace» se partía en dos renglones. */
  .compartir-modal__caja { padding-inline: var(--e4); }
  .compartir-modal__redes { gap: var(--e2); }
  .compartir-modal__redes .btn { padding-inline: var(--e3); gap: 6px; font-size: var(--t-xs); }
}


/* ===========================================================================
   16. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   =========================================================================== */

/* Foco visible siempre: quien navega con teclado tiene que saber dónde está */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Si el sistema del visitante pide menos movimiento, se apaga todo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}



/* ---------------------------------------------------------------------------
   GUÍAS (los artículos de /guias/)
   Nada de esto inventa diseño: son las mismas variables, la misma tipografía y
   las mismas cajas del portal. Lo único propio es el ancho de lectura, porque
   un texto largo a 1180 px no se lee: el ojo se pierde al cambiar de renglón.
   --------------------------------------------------------------------------- */
.guia { max-width: 46rem; margin: 0 auto; }

.guia__fecha {
  margin: 0 0 var(--e5);
  font-size: var(--t-sm);
  color: var(--gris-500);
}

.guia h2 {
  margin: var(--e7) 0 var(--e3);
  font-family: Manrope, var(--fuente-respaldo);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.2;
  color: var(--azul-900);
}

.guia h3 {
  margin: var(--e5) 0 var(--e2);
  font-family: Manrope, var(--fuente-respaldo);
  font-weight: 700;
  font-size: var(--t-h3);
  color: var(--azul-800);
}

.guia p { margin: 0 0 var(--e4); }

.guia ul, .guia ol { margin: 0 0 var(--e4); padding-left: 1.25rem; }
.guia li { margin-bottom: var(--e2); }

.guia__entrada {
  font-size: 1.0625rem;
  color: var(--gris-700);
  border-left: 4px solid var(--azul-500);
  padding-left: var(--e4);
  margin-bottom: var(--e6);
}

/* Índice de la propia guía, arriba del todo. Misma pastilla de los chips. */
.guia__indice {
  margin: 0 0 var(--e6);
  padding: var(--e4);
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-radius: var(--r);
}
.guia__indice p {
  margin: 0 0 var(--e2);
  font-family: Manrope, var(--fuente-respaldo);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--azul-900);
}
.guia__indice ul { margin: 0; padding-left: 1.1rem; }
.guia__indice li { margin-bottom: var(--e1); font-size: var(--t-sm); }

/* Tabla de datos (la usa la guía de sectores). Se desliza sola en celular. */
.guia__tabla { overflow-x: auto; margin: 0 0 var(--e5); }
.guia__tabla table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.guia__tabla th, .guia__tabla td {
  padding: var(--e2) var(--e3);
  text-align: left;
  border-bottom: 1px solid var(--gris-200);
  white-space: nowrap;
}
.guia__tabla th {
  font-family: Manrope, var(--fuente-respaldo);
  font-weight: 700;
  color: var(--azul-900);
  background: var(--azul-050);
}
.guia__tabla td:first-child, .guia__tabla th:first-child { white-space: normal; }

/* Tarjetas de «sigue leyendo», al final de cada guía y en la portada. */
.guias-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .guias-lista { grid-template-columns: 1fr 1fr; } }

.guias-lista a {
  display: block;
  height: 100%;
  padding: var(--e4);
  background: #fff;
  border: 1px solid var(--gris-300);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
@media (hover: hover) {
  .guias-lista a:hover { border-color: var(--azul-500); transform: translateY(-2px); }
}
.guias-lista b {
  display: block;
  margin-bottom: var(--e2);
  font-family: Manrope, var(--fuente-respaldo);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--azul-900);
}
.guias-lista span { display: block; font-size: var(--t-sm); color: var(--gris-500); }

/* ---------------------------------------------------------------------------
   ESPACIO DE ANUNCIO (AdSense) — preparado, todavía sin usar.
   Hoy el portal NO lleva publicidad y cookies.html lo dice. Esta clase existe
   para que el día que se active no haya que inventar un diseño: el anuncio va
   dentro de una caja del portal, con su etiqueta encima diciendo que es
   publicidad, y no disfrazado de oferta.
   🔴 Nace con [hidden]: el bloque 07 del JS solo se lo quita cuando hay un
      ADSENSE_ID de verdad Y la persona aceptó las cookies. Así nunca queda un
      hueco vacío en la página.
   --------------------------------------------------------------------------- */
.anuncio[hidden] { display: none; }

.anuncio {
  margin: var(--e5) 0;
  padding: var(--e3);
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--r);
  text-align: center;
  overflow: hidden;
}

/* La etiqueta es obligatoria: la persona tiene derecho a saber qué es
   publicidad y qué es una oferta de verdad. Va apagada, no llamativa. */
.anuncio__etq {
  display: block;
  margin: 0 0 var(--e2);
  font-family: Manrope, var(--fuente-respaldo);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-500);
}

.anuncio ins { display: block; }

/* Impresión: sin cabecera fija, sin botones flotantes, texto en negro */
@media print {
  /* Al imprimir no hay páginas que pasar: salen todas las ofertas seguidas. */
  .empresa.fuera-de-pagina { display: block; }
  .paginacion { display: none; }
  .cabecera, .filtros, .wa-float, .arriba, .vacante__acciones, .vacante__reporte, .aplicar__mapa, .compartir-modal, .cookies, .visor, .publica, .jx, .avisos, .anuncio { display: none !important; }
  body { color: #000; }
  .empresa { break-inside: avoid; border-color: #999; }
}