@charset "UTF-8";
/* ============================================================================
 * EmpleoPerú — hoja de estilos del tema
 * ----------------------------------------------------------------------------
 * Réplica del diseño original (Next.js + Tailwind 4) en CSS artesanal.
 * Paleta: esmeralda (#059669/#047857/#10b981, emerald-50 #ecfdf5) + ámbar
 * (#f59e0b) sobre stone (#fafaf9 / #1c1917 / #78716c). PROHIBIDO azul/índigo.
 * Fuente: Geist (encolada en functions.php). Radios 12px, sombras suaves,
 * transiciones 160ms. Prefijos: ep-*, card-job. Sin estilos huérfanos:
 * cada regla corresponde a una clase usada por los templates del tema.
 * ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
 * 1. RESET + VARIABLES
 * ──────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
        box-sizing: border-box;
}

* {
        margin: 0;
}

html {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
        html {
                scroll-behavior: auto;
        }
}

body {
        font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1rem;
        line-height: 1.55;
        color: #1c1917;
        background: #fafaf9;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
}

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

input,
button,
textarea,
select {
        font: inherit;
        color: inherit;
}

button {
        cursor: pointer;
        background: none;
        border: 0;
        padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
        overflow-wrap: break-word;
}

a {
        color: #047857;
        text-decoration: none;
        transition: color 160ms ease;
}

a:hover {
        color: #059669;
}

ul[class],
ol[class] {
        list-style: none;
        padding: 0;
}

hr {
        border: 0;
        border-top: 1px solid #e7e5e4;
}

/* Variables del tema */
:root {
        /* Esmeralda 50–900 */
        --ep-emerald-50: #ecfdf5;
        --ep-emerald-100: #d1fae5;
        --ep-emerald-200: #a7f3d0;
        --ep-emerald-300: #6ee7b7;
        --ep-emerald-400: #34d399;
        --ep-emerald-500: #10b981;
        --ep-emerald-600: #059669;
        --ep-emerald-700: #047857;
        --ep-emerald-800: #065f46;
        --ep-emerald-900: #064e3b;

        /* Ámbar (acento) */
        --ep-amber-50: #fffbeb;
        --ep-amber-100: #fef3c7;
        --ep-amber-200: #fde68a;
        --ep-amber-300: #fcd34d;
        --ep-amber-400: #fbbf24;
        --ep-amber-500: #f59e0b;
        --ep-amber-600: #d97706;
        --ep-amber-700: #b45309;

        /* Stone (neutros cálidos) */
        --ep-stone-50: #fafaf9;
        --ep-stone-100: #f5f5f4;
        --ep-stone-200: #e7e5e4;
        --ep-stone-300: #d6d3d1;
        --ep-stone-400: #a8a29e;
        --ep-stone-500: #78716c;
        --ep-stone-600: #57534e;
        --ep-stone-700: #44403c;
        --ep-stone-800: #292524;
        --ep-stone-900: #1c1917;
        --ep-stone-950: #0c0a09;

        /* Rojo destructivo */
        --ep-red-50: #fef2f2;
        --ep-red-200: #fecaca;
        --ep-red-600: #dc2626;
        --ep-red-700: #b91c1c;

        /* Tokens derivados */
        --ep-bg: var(--ep-stone-50);
        --ep-text: var(--ep-stone-900);
        --ep-muted: var(--ep-stone-500);
        --ep-border: var(--ep-stone-300);
        --ep-border-soft: var(--ep-stone-200);
        --ep-primary: var(--ep-emerald-600);
        --ep-primary-dark: var(--ep-emerald-700);
        --ep-primary-soft: var(--ep-emerald-50);
        --ep-primary-border: var(--ep-emerald-200);

        /* Radios */
        --ep-radius-sm: 8px;
        --ep-radius: 12px;
        --ep-radius-lg: 16px;
        --ep-radius-xl: 20px;
        --ep-radius-pill: 999px;

        /* Sombras suaves */
        --ep-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
        --ep-shadow: 0 4px 14px rgba(6, 78, 59, 0.07), 0 1px 3px rgba(28, 25, 23, 0.06);
        --ep-shadow-lg: 0 12px 32px rgba(6, 78, 59, 0.12), 0 4px 10px rgba(28, 25, 23, 0.06);
        --ep-shadow-xl: 0 24px 48px rgba(6, 78, 59, 0.16), 0 8px 20px rgba(28, 25, 23, 0.08);

        /* Tipografía */
        --ep-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --ep-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

        /* Layout */
        --ep-container: 1280px;
        --ep-header-h: 68px;
        --ep-transition: 160ms;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 2. BASE TIPOGRÁFICA
 * ──────────────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
        font-weight: 700;
        line-height: 1.25;
        color: var(--ep-text);
        letter-spacing: -0.01em;
}

h1 {
        font-size: clamp(1.85rem, 3.4vw, 2.35rem);
}

h2 {
        font-size: clamp(1.45rem, 2.4vw, 1.7rem);
}

h3 {
        font-size: 1.2rem;
}

h4 {
        font-size: 1.05rem;
}

p {
        color: var(--ep-stone-600);
}

strong {
        color: inherit;
}

::selection {
        background: var(--ep-emerald-200);
        color: var(--ep-emerald-900);
}

:focus-visible {
        outline: 2px solid var(--ep-emerald-600);
        outline-offset: 2px;
        border-radius: 4px;
}

/* Scrollbar fina estilo tema */
.ep-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--ep-stone-300) transparent;
}

.ep-scrollbar::-webkit-scrollbar {
        width: 8px;
        height: 8px;
}

.ep-scrollbar::-webkit-scrollbar-thumb {
        background: var(--ep-stone-300);
        border-radius: var(--ep-radius-pill);
}

.ep-scrollbar::-webkit-scrollbar-track {
        background: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 3. UTILIDADES (solo las que usan los templates)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-container,
.ep-container--narrow,
.ep-container--wide {
        width: 100%;
        margin-inline: auto;
        padding-inline: 16px;
}

.ep-container {
        max-width: var(--ep-container);
}

.ep-container--narrow {
        max-width: 960px;
}

.ep-container--wide {
        max-width: 1360px;
}

/* El atributo hidden SIEMPRE oculta el elemento, aunque otra regla
   (banner de cookies, chip de comparación, badges) fije display:flex. */
[hidden] {
        display: none !important;
}

.ep-main {
        flex: 1 0 auto;
        width: 100%;
        padding-bottom: 56px;
}

.ep-page {
        padding-top: 24px;
}

.ep-section {
        padding-block: 48px;
}

.ep-section--alt {
        background: #f5f5f4;
        border-block: 1px solid var(--ep-border-soft);
}

.ep-grid-3 {
        display: grid;
        gap: 16px;
        grid-template-columns: 1fr;
}

@media (min-width: 640px) {
        .ep-grid-3 {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .ep-grid-3 {
                grid-template-columns: repeat(3, 1fr);
        }
}

.ep-center-btn {
        display: flex;
        justify-content: center;
        margin-top: 28px;
}

.ep-sep {
        margin-block: 20px;
}

/* Anclas de scrollto (recursos, #alertas) con margen por el header sticky */
.ep-res-section,
#alertas,
#cv-postulacion,
#entrevistas,
#busqueda-inteligente {
        scroll-margin-top: calc(var(--ep-header-h) + 18px);
}

.is-emerald {
        color: var(--ep-emerald-700);
}

.is-right {
        text-align: right;
}

.is-center {
        text-align: center;
}

.is-bold {
        font-weight: 700;
}

.is-muted {
        opacity: 0.55;
}

.is-link {
        transition: background 160ms ease, color 160ms ease;
}

.is-link:hover {
        background: var(--ep-emerald-100);
        color: var(--ep-emerald-800);
}

/* Utilidades de tipografía del tema */
.ep-h1 {
        font-size: clamp(1.85rem, 3.4vw, 2.35rem);
        font-weight: 800;
        letter-spacing: -0.02em;
}

.ep-h2 {
        font-size: clamp(1.45rem, 2.4vw, 1.7rem);
        font-weight: 800;
        letter-spacing: -0.015em;
}

.ep-h2-sub {
        color: var(--ep-muted);
        margin-top: 6px;
        max-width: 640px;
}

.ep-h3 {
        font-size: 1.2rem;
        font-weight: 700;
}

.ep-h3-sub {
        font-size: 0.9rem;
        color: var(--ep-muted);
        margin-top: 2px;
}

.ep-h4 {
        font-size: 1.02rem;
        font-weight: 700;
}

.ep-sub-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 1rem;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 10px;
}

.ep-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ep-stone-700);
        margin-bottom: 6px;
}

.ep-required {
        color: var(--ep-red-600);
}

.ep-note {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-top: 16px;
        padding: 12px 14px;
        background: var(--ep-stone-100);
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        font-size: 0.82rem;
        color: var(--ep-muted);
}

.ep-note p {
        color: var(--ep-muted);
        font-size: 0.82rem;
}

.ep-updated {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: var(--ep-muted);
}

/* Cabecera genérica de vistas internas */
.ep-view-head {
        margin-bottom: 22px;
}

.ep-view-title {
        font-size: clamp(1.7rem, 3vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -0.02em;
}

.ep-view-title--row {
        display: flex;
        align-items: center;
        gap: 12px;
}

.ep-view-sub {
        color: var(--ep-muted);
        margin-top: 6px;
        max-width: 720px;
}

.ep-view-empty {
        margin-top: 8px;
}

/* Íconos SVG (el plugin imprime <svg class="ep-icon …">) */
.ep-icon {
        width: 18px;
        height: 18px;
        flex: none;
        stroke-width: 2;
}

.ep-icon--xs {
        width: 14px;
        height: 14px;
}

.ep-icon--lg {
        width: 22px;
        height: 22px;
}

.ep-icon--xl {
        width: 26px;
        height: 26px;
}

.ep-icon--input {
        width: 18px;
        height: 18px;
        color: var(--ep-stone-400);
}

.ep-icon--emerald {
        color: var(--ep-emerald-600);
}

.ep-icon--amber {
        color: var(--ep-amber-500);
}

/* Caja de icono decorativa */
.ep-iconbox {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: var(--ep-radius);
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-700);
        flex: none;
}

.ep-iconbox--lg {
        width: 48px;
        height: 48px;
        border-radius: var(--ep-radius);
}

.ep-iconbox--xl {
        width: 60px;
        height: 60px;
        border-radius: var(--ep-radius-lg);
}

.ep-iconbox--amber {
        background: var(--ep-amber-50);
        color: var(--ep-amber-600);
}

.ep-iconbox--stone {
        background: var(--ep-stone-100);
        color: var(--ep-stone-500);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 4. SKIP-LINK + WORDPRESS
 * ──────────────────────────────────────────────────────────────────────── */
.skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 100;
        background: var(--ep-emerald-600);
        color: #fff;
        padding: 10px 18px;
        border-radius: 0 0 var(--ep-radius) 0;
        font-weight: 600;
}

.skip-link:focus {
        left: 0;
        color: #fff;
}

.screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
}

body.ep-no-scroll {
        overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 5. LOGO
 * ──────────────────────────────────────────────────────────────────────── */
.ep-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: inherit;
}

.ep-logo:hover {
        color: inherit;
}

.ep-logo-badge {
        position: relative;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: var(--ep-radius);
        background: linear-gradient(135deg, var(--ep-emerald-600), var(--ep-emerald-500));
        color: #fff;
        box-shadow: 0 6px 14px rgba(5, 150, 105, 0.35);
        flex: none;
}

.ep-logo-dot {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--ep-amber-400);
        border: 2px solid #fff;
}

.ep-logo-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
}

.ep-logo-name {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--ep-stone-900);
        letter-spacing: -0.02em;
}

.ep-logo-accent {
        color: var(--ep-emerald-600);
}

.ep-logo-name--light {
        color: #fff;
}

.ep-logo-tagline {
        font-size: 0.68rem;
        color: var(--ep-muted);
        white-space: nowrap;
}

.ep-logo-tagline--light {
        color: rgba(255, 255, 255, 0.6);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 6. HEADER STICKY
 * ──────────────────────────────────────────────────────────────────────── */
.ep-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--ep-border-soft);
        transition: box-shadow 160ms ease, background 160ms ease;
}

.ep-header.is-scrolled {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 12px rgba(28, 25, 23, 0.06);
}

/* Offset por la barra de admin de WordPress (evita solapamiento) */
body.admin-bar .ep-header {
        top: 32px;
}

@media (max-width: 782px) {
        body.admin-bar .ep-header {
                top: 46px;
        }
}

.ep-header-inner {
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: var(--ep-header-h);
}

.ep-nav {
        display: none;
        align-items: center;
        gap: 2px;
        margin-inline: auto;
}

.ep-nav-link {
        display: inline-flex;
        align-items: center;
        height: 38px;
        padding: 0 13px;
        border-radius: var(--ep-radius-pill);
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--ep-stone-600);
        transition: background 160ms ease, color 160ms ease;
}

.ep-nav-link:hover {
        background: var(--ep-stone-100);
        color: var(--ep-stone-900);
}

.ep-nav-link.is-active {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-700);
        font-weight: 600;
}

.ep-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
}

.ep-compare-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 12px;
        border-radius: var(--ep-radius-pill);
        background: var(--ep-amber-50);
        border: 1px solid var(--ep-amber-200);
        color: var(--ep-amber-700);
        font-size: 0.82rem;
        font-weight: 700;
        white-space: nowrap;
        transition: background 160ms ease, border-color 160ms ease;
}

.ep-compare-chip:hover {
        background: var(--ep-amber-100);
        border-color: var(--ep-amber-300);
        color: var(--ep-amber-700);
}

.ep-header-fav {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 38px;
        padding: 0 6px;
        border-radius: var(--ep-radius);
        color: var(--ep-stone-600);
        font-size: 0.9rem;
        font-weight: 500;
}

.ep-header-fav:hover {
        color: var(--ep-emerald-700);
        background: var(--ep-emerald-50);
}

.ep-header-fav-label {
        display: none;
}

.ep-count-badge {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: var(--ep-radius-pill);
        background: var(--ep-emerald-600);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
}

/* Especificidad sobre .ep-btn: en móvil el CTA vive en el drawer */
button.ep-header-cta,
a.ep-header-cta {
        display: none;
}

.ep-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: var(--ep-radius);
        color: var(--ep-stone-700);
        border: 1px solid var(--ep-border-soft);
        background: #fff;
        transition: background 160ms ease, border-color 160ms ease;
}

.ep-hamburger:hover {
        background: var(--ep-stone-100);
        border-color: var(--ep-border);
}

@media (min-width: 1024px) {
        .ep-nav {
                display: flex;
        }

        .ep-hamburger {
                display: none;
        }
}

@media (min-width: 640px) {
        button.ep-header-cta,
        a.ep-header-cta {
                display: inline-flex;
        }

        .ep-header-fav-label {
                display: inline;
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 7. OVERLAY + PANELES LATERALES (drawer de navegación y sheet de filtros)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-overlay {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(28, 25, 23, 0.5);
        opacity: 0;
        transition: opacity 200ms ease;
}

.ep-overlay.is-open {
        opacity: 1;
}

.ep-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        width: min(360px, 92vw);
        background: #fff;
        box-shadow: var(--ep-shadow-xl);
        transition: transform 240ms ease;
        overflow-y: auto;
}

.ep-panel--right {
        right: 0;
        transform: translateX(100%);
        background: var(--ep-stone-900);
}

.ep-panel--left {
        left: 0;
        transform: translateX(-100%);
}

.ep-panel.is-open.ep-panel--right,
.ep-panel.is-open.ep-panel--left {
        transform: translateX(0);
}

.ep-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--ep-border-soft);
        flex: none;
}

.ep-panel--right .ep-panel-head {
        border-bottom-color: rgba(255, 255, 255, 0.1);
}

.ep-panel-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 1.05rem;
        font-weight: 700;
}

.ep-panel-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: var(--ep-radius);
        color: var(--ep-stone-500);
        border: 1px solid var(--ep-border-soft);
        transition: background 160ms ease, color 160ms ease;
}

.ep-panel-close:hover {
        background: var(--ep-stone-100);
        color: var(--ep-stone-900);
}

.ep-panel--right .ep-panel-close {
        color: rgba(255, 255, 255, 0.7);
        border-color: rgba(255, 255, 255, 0.15);
}

.ep-panel--right .ep-panel-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
}

.ep-panel-body {
        padding: 18px;
        overflow-y: auto;
        flex: 1;
}

.ep-panel-foot {
        display: grid;
        gap: 10px;
        padding: 16px 18px;
        border-top: 1px solid var(--ep-border-soft);
        flex: none;
        background: #fff;
}

/* Drawer de navegación móvil */
.ep-drawer-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 16px 14px;
        flex: 1;
}

.ep-drawer-link {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 10px 12px;
        border-radius: var(--ep-radius);
        font-size: 0.98rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        transition: background 160ms ease, color 160ms ease;
}

.ep-drawer-link:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
}

.ep-drawer-link.is-active {
        background: var(--ep-emerald-600);
        color: #fff;
        font-weight: 600;
}

.ep-drawer-link--amber {
        color: var(--ep-amber-300);
}

.ep-drawer-link--amber:hover {
        background: rgba(245, 158, 11, 0.12);
        color: var(--ep-amber-200);
}

.ep-drawer-badge {
        margin-left: auto;
        display: inline-grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: var(--ep-radius-pill);
        font-size: 0.72rem;
        font-weight: 700;
}

.ep-drawer-badge--emerald {
        background: var(--ep-emerald-600);
        color: #fff;
}

.ep-drawer-badge--amber {
        background: var(--ep-amber-500);
        color: var(--ep-stone-900);
}

.ep-drawer-foot {
        padding: 6px 0 4px;
}

.ep-drawer-note {
        padding: 14px 18px 18px;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.55);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 8. BOTONES
 * ──────────────────────────────────────────────────────────────────────── */
.ep-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 42px;
        padding: 0 18px;
        border-radius: var(--ep-radius);
        border: 1px solid transparent;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: background 160ms ease, color 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, transform 120ms ease;
}

.ep-btn:hover {
        text-decoration: none;
}

.ep-btn:active {
        transform: scale(0.98);
}

.ep-btn:disabled,
.ep-btn.is-disabled,
.ep-btn[aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
}

.ep-btn--primary {
        background: var(--ep-emerald-600);
        border-color: var(--ep-emerald-600);
        color: #fff;
        box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28);
}

.ep-btn--primary:hover {
        background: var(--ep-emerald-700);
        border-color: var(--ep-emerald-700);
        color: #fff;
}

.ep-btn--outline {
        background: #fff;
        border-color: var(--ep-border);
        color: var(--ep-stone-700);
}

.ep-btn--outline:hover {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-700);
        background: var(--ep-emerald-50);
}

.ep-btn--soft {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-700);
        border-color: var(--ep-emerald-100);
}

.ep-btn--soft:hover {
        background: var(--ep-emerald-100);
        color: var(--ep-emerald-800);
}

.ep-btn--amber {
        background: var(--ep-amber-500);
        border-color: var(--ep-amber-500);
        color: var(--ep-stone-900);
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.32);
}

.ep-btn--amber:hover {
        background: var(--ep-amber-400);
        border-color: var(--ep-amber-400);
        color: var(--ep-stone-900);
}

.ep-btn--white {
        background: #fff;
        border-color: #fff;
        color: var(--ep-emerald-800);
}

.ep-btn--white:hover {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-900);
}

.ep-btn--outline-white {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.45);
        color: #fff;
}

.ep-btn--outline-white:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.7);
        color: #fff;
}

.ep-btn--destructive {
        background: var(--ep-red-600);
        border-color: var(--ep-red-600);
        color: #fff;
}

.ep-btn--destructive:hover {
        background: var(--ep-red-700);
        border-color: var(--ep-red-700);
        color: #fff;
}

.ep-btn--lg {
        height: 48px;
        padding: 0 22px;
        font-size: 0.95rem;
        border-radius: var(--ep-radius);
}

.ep-btn--sm {
        height: 36px;
        padding: 0 14px;
        font-size: 0.82rem;
        border-radius: var(--ep-radius-sm);
}

.ep-btn--block {
        display: flex;
        width: 100%;
}

/* Botones de icono de la tarjeta (corazón / balanza) */
.ep-iconbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: 1px solid var(--ep-border-soft);
        background: #fff;
        color: var(--ep-stone-400);
        flex: none;
        transition: color 160ms ease, border-color 160ms ease, background 160ms ease,
                transform 120ms ease;
}

.ep-iconbtn:hover {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-600);
        background: var(--ep-emerald-50);
}

.ep-iconbtn:active {
        transform: scale(0.92);
}

.ep-iconbtn.is-active {
        border-color: var(--ep-emerald-200);
}

.ep-iconbtn--fave.is-active {
        color: var(--ep-red-600);
        background: var(--ep-red-50);
        border-color: var(--ep-red-200);
}

.ep-iconbtn--fave.is-active .ep-icon {
        fill: currentColor;
}

.ep-iconbtn--cmp.is-active {
        color: var(--ep-emerald-700);
        background: var(--ep-emerald-50);
}

/* Botón Guardar/Comparar de la página de detalle */
.ep-fave-btn.is-active {
        border-color: var(--ep-red-200);
        color: var(--ep-red-600);
        background: var(--ep-red-50);
}

.ep-fave-btn.is-active .ep-icon {
        fill: currentColor;
}

.ep-cmp-btn.is-active {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-700);
        background: var(--ep-emerald-50);
}

/* Animación pop al guardar */
@keyframes ep-fave-pop {
        0% {
                transform: scale(1);
        }

        40% {
                transform: scale(1.28);
        }

        100% {
                transform: scale(1);
        }
}

.ep-fave-pop {
        animation: ep-fave-pop 320ms ease;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 9. CARDS + CABECERAS DE SECCIÓN
 * ──────────────────────────────────────────────────────────────────────── */
.ep-card {
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        box-shadow: var(--ep-shadow-sm);
        transition: box-shadow 160ms ease, border-color 160ms ease;
}

.ep-card--amber {
        background: var(--ep-amber-50);
        border-color: var(--ep-amber-200);
}

.ep-card--emerald {
        background: linear-gradient(180deg, var(--ep-emerald-50) 0%, rgba(236, 253, 245, 0.45) 100%);
        border-color: var(--ep-emerald-200);
}

.ep-sec-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 22px;
        flex-wrap: wrap;
}

.ep-sec-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(1.35rem, 2.2vw, 1.6rem);
        font-weight: 800;
        letter-spacing: -0.015em;
}

.ep-sec-icon {
        display: inline-flex;
        color: var(--ep-emerald-600);
}

.ep-sec-sub {
        color: var(--ep-muted);
        margin-top: 4px;
        font-size: 0.92rem;
}

.ep-sec-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--ep-emerald-700);
        white-space: nowrap;
        padding: 6px 4px;
}

.ep-sec-more:hover {
        color: var(--ep-emerald-600);
}

.ep-sec-more .ep-icon {
        transition: transform 160ms ease;
}

.ep-sec-more:hover .ep-icon {
        transform: translateX(3px);
}

.ep-block {
        padding: 22px;
        margin-top: 20px;
}

.ep-block-title {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 1.12rem;
        font-weight: 700;
        margin-bottom: 14px;
}

.ep-block-title--fit {
        margin-bottom: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 10. BADGES Y CHIPS
 * ──────────────────────────────────────────────────────────────────────── */
.ep-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 24px;
        padding: 0 10px;
        border-radius: var(--ep-radius-pill);
        border: 1px solid transparent;
        font-size: 0.73rem;
        font-weight: 600;
        white-space: nowrap;
        line-height: 1;
}

.ep-badge--soft {
        background: var(--ep-emerald-50);
        border-color: var(--ep-emerald-100);
        color: var(--ep-emerald-700);
}

.ep-badge--type {
        background: var(--ep-stone-100);
        border-color: var(--ep-stone-200);
        color: var(--ep-stone-600);
}

/* Igual que ScoreBadge del preview: pastilla esmeralda llena con texto blanco */
.ep-badge--score {
        background: var(--ep-emerald-600);
        border-color: var(--ep-emerald-600);
        color: #fff;
}

.ep-badge-score-label {
        color: rgba(255, 255, 255, 0.92);
        font-weight: 500;
}

.ep-badge--level {
        background: var(--ep-stone-100);
        border-color: var(--ep-stone-200);
        color: var(--ep-stone-600);
}

/* Variantes de nivel de experiencia (functions.php ep_experience_class) */
.ep-exp--none {
        background: var(--ep-emerald-50);
        border-color: var(--ep-emerald-100);
        color: var(--ep-emerald-700);
}

.ep-exp--junior {
        background: #ccfbf1;
        border-color: #99f6e4;
        color: #115e59;
}

.ep-exp--mid {
        background: var(--ep-amber-50);
        border-color: var(--ep-amber-200);
        color: var(--ep-amber-700);
}

.ep-exp--senior {
        background: #ffedd5;
        border-color: #fed7aa;
        color: #9a3412;
}

.ep-exp--other {
        background: var(--ep-stone-100);
        border-color: var(--ep-stone-200);
        color: var(--ep-stone-600);
}

.ep-badge--source {
        background: transparent;
        border-width: 1px;
        border-style: solid;
        color: var(--ep-stone-600);
        font-weight: 600;
}

.ep-badge-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        flex: none;
}

.ep-badge--new {
        background: var(--ep-emerald-600);
        color: #fff;
        font-weight: 700;
}

.ep-ping {
        position: relative;
        display: inline-flex;
        width: 8px;
        height: 8px;
        flex: none;
}

.ep-ping::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        animation: ep-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ep-ping-inner {
        position: relative;
        display: inline-flex;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
}

@keyframes ep-ping {
        0% {
                transform: scale(1);
                opacity: 0.7;
        }

        75%,
        100% {
                transform: scale(2.1);
                opacity: 0;
        }
}

/* Chips de filtros activos (listado de empleos) */
.ep-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-block: 14px;
}

.ep-chip-active {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 0 12px;
        border-radius: var(--ep-radius-pill);
        background: var(--ep-emerald-50);
        border: 1px solid var(--ep-emerald-200);
        color: var(--ep-emerald-800);
        font-size: 0.8rem;
        font-weight: 600;
        transition: background 160ms ease, border-color 160ms ease;
}

.ep-chip-active:hover {
        background: var(--ep-emerald-100);
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-900);
}

.ep-chip-clear {
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 12px;
        border-radius: var(--ep-radius-pill);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--ep-stone-500);
        border: 1px dashed var(--ep-border);
        background: #fff;
}

.ep-chip-clear:hover {
        color: var(--ep-red-600);
        border-color: var(--ep-red-200);
        background: var(--ep-red-50);
}

/* Chips glass del hero */
.ep-chip-glass {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 14px;
        border-radius: var(--ep-radius-pill);
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        font-size: 0.82rem;
        font-weight: 500;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        transition: background 160ms ease;
}

.ep-chip-glass:hover {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
}

/* Chip suave (ejemplos calculadora, anclas de recursos) */
.ep-chip-soft {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 14px;
        border-radius: var(--ep-radius-pill);
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        color: var(--ep-stone-700);
        font-size: 0.82rem;
        font-weight: 600;
        transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.ep-chip-soft:hover {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-700);
        background: var(--ep-emerald-50);
}

/* Chips de fuente del listado (tema 1.1.7): Bumeran / Computrabajo / MTPE
 * con su conteo, siempre visibles sobre los resultados. */
.ep-source-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-block: 2px 14px;
}

.ep-source-chip .ep-source-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--ep-stone-400);
        flex: none;
}

.ep-source-chip .ep-source-count {
        color: var(--ep-stone-500);
        font-weight: 700;
        font-size: 0.75rem;
        background: var(--ep-stone-100);
        border-radius: var(--ep-radius-pill, 999px);
        padding: 1px 8px;
}

.ep-source-chip.is-active {
        background: var(--ep-emerald-50);
        border-color: var(--ep-emerald-400);
        color: var(--ep-emerald-800);
}

.ep-source-chip.is-active .ep-source-dot {
        background: var(--ep-emerald-600);
}

.ep-source-chip.is-active .ep-source-count {
        color: var(--ep-emerald-800);
        background: var(--ep-emerald-100);
}

/* Chips del FitChecker generadas por app.js */
.ep-fit-chip--ok {
        border-color: var(--ep-emerald-200);
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-700);
}

.ep-fit-chip--miss {
        border-color: var(--ep-border-soft);
        background: var(--ep-stone-100);
        color: var(--ep-stone-500);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 11. FORMULARIOS
 * ──────────────────────────────────────────────────────────────────────── */
.ep-input,
.ep-select,
.ep-textarea {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        border-radius: var(--ep-radius);
        border: 1px solid var(--ep-border);
        background: #fff;
        color: var(--ep-text);
        font-size: 0.92rem;
        transition: border-color 160ms ease, box-shadow 160ms ease;
        appearance: none;
}

.ep-textarea {
        height: auto;
        min-height: 96px;
        padding: 10px 12px;
        resize: vertical;
        line-height: 1.5;
}

.ep-input::placeholder,
.ep-textarea::placeholder {
        color: var(--ep-stone-400);
}

.ep-input:focus,
.ep-select:focus,
.ep-textarea:focus {
        outline: none;
        border-color: var(--ep-emerald-500);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.ep-input[aria-invalid="true"],
.ep-textarea[aria-invalid="true"] {
        border-color: var(--ep-red-600);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.ep-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 34px;
        cursor: pointer;
}

.ep-field {
        display: block;
        margin-bottom: 14px;
}

.ep-field .ep-input,
.ep-field .ep-select,
.ep-field .ep-textarea {
        margin-top: 2px;
}

.ep-field-pair {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0 14px;
}

@media (min-width: 640px) {
        .ep-field-pair {
                grid-template-columns: 1fr 1fr;
        }
}

.ep-form {
        display: block;
}

.ep-form--grid {
        display: grid;
        gap: 2px 14px;
        grid-template-columns: 1fr;
}

@media (min-width: 768px) {
        .ep-form--grid {
                grid-template-columns: 1fr 1fr;
        }

        .ep-form--grid .ep-field-pair {
                grid-column: span 2;
        }

        .ep-form--grid > .ep-btn {
                grid-column: span 2;
        }
}

.ep-form-card {
        padding: 24px;
}

.ep-form-note {
        font-size: 0.8rem;
        color: var(--ep-muted);
        margin-top: 12px;
}

/* Radios personalizados (filtros, calculadora, alertas) */
.ep-fradios {
        display: grid;
        gap: 6px;
}

.ep-fradios--row {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
}

.ep-radio {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 38px;
        padding: 6px 10px;
        border-radius: var(--ep-radius-sm);
        border: 1px solid var(--ep-border-soft);
        background: #fff;
        font-size: 0.85rem;
        color: var(--ep-stone-700);
        cursor: pointer;
        transition: border-color 160ms ease, background 160ms ease;
}

.ep-radio:hover {
        border-color: var(--ep-emerald-300);
}

.ep-radio input[type="radio"] {
        appearance: none;
        width: 17px;
        height: 17px;
        margin: 0;
        border: 2px solid var(--ep-stone-300);
        border-radius: 50%;
        background: #fff;
        flex: none;
        cursor: pointer;
        transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ep-radio input[type="radio"]:checked {
        border-color: var(--ep-emerald-600);
        box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 12px var(--ep-emerald-600);
}

.ep-radio:has(input:checked) {
        border-color: var(--ep-emerald-300);
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-800);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 12. TARJETA DE EMPLEO (card-job / ep-jobcard)
 * ──────────────────────────────────────────────────────────────────────── */
.card-job {
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 16px 18px;
        cursor: pointer;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.card-job:hover {
        transform: translateY(-2px);
        box-shadow: var(--ep-shadow-lg);
        border-color: var(--ep-primary-border);
}

.ep-jobcard-top {
        display: flex;
        align-items: flex-start;
        gap: 12px;
}

.ep-jobcard-main {
        flex: 1;
        min-width: 0;
}

.ep-jobcard-microline {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
        font-size: 0.78rem;
        color: var(--ep-muted);
        margin-bottom: 3px;
}

.ep-jobcard-company {
        font-weight: 600;
        color: var(--ep-stone-600);
}

a.ep-jobcard-company:hover {
        color: var(--ep-emerald-700);
}

.ep-jobcard-ago {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--ep-stone-400);
}

.ep-jobcard-title {
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: -0.01em;
}

.ep-jobcard-title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: inherit;
}

.ep-jobcard-title a:hover {
        color: var(--ep-emerald-700);
}

/* Acciones apiladas en vertical (corazón arriba, comparar abajo) como el preview */
.ep-jobcard-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        flex: none;
        margin-right: -4px;
}

.ep-jobcard-summary {
        margin-top: 10px;
        font-size: 0.87rem;
        color: var(--ep-muted);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.ep-jobcard-meta {
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--ep-border-soft);
}

.ep-jobcard-top + .ep-jobcard-meta {
        margin-top: 12px;
}

.ep-jobcard-badges .ep-badge--score {
        margin-left: auto;
}

.ep-jobcard-meta-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 14px;
        font-size: 0.83rem;
        color: var(--ep-stone-600);
}

.ep-jobcard-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
}

.ep-jobcard-salary {
        margin-left: auto;
        font-weight: 700;
        color: var(--ep-emerald-700);
        white-space: nowrap;
}

.ep-jobcard-badges {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
}

/* Variante compacta (similares / relacionados) */
.ep-jobcard--compact {
        padding: 14px 16px;
}

.ep-jobcard--compact .ep-jobcard-title {
        font-size: 0.95rem;
}

.ep-jobcard--compact .ep-jobcard-summary {
        display: none;
}

/* Avatar de iniciales (functions.php ep_avatar) */
.ep-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        color: #fff;
        font-weight: 700;
        font-size: 0.92rem;
        letter-spacing: 0.03em;
        flex: none;
        user-select: none;
        text-transform: uppercase;
}

.ep-avatar--lg {
        width: 52px;
        height: 52px;
        font-size: 1rem;
}

.ep-avatar--xl {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        font-size: 1.05rem;
}

.ep-avatar--xl2 {
        width: 84px;
        height: 84px;
        border-radius: var(--ep-radius-lg);
        font-size: 1.45rem;
}

.ep-avatar--round {
        border-radius: 50%;
}

/* Card punteada de oferta ya no disponible (render JS en /guardados) */
.ep-saved-missing {
        border-style: dashed;
        border-color: var(--ep-border);
        background: var(--ep-stone-50);
        box-shadow: none;
        cursor: default;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
}

.ep-saved-missing:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--ep-border);
}

.ep-saved-missing p {
        font-size: 0.9rem;
        color: var(--ep-muted);
        font-weight: 500;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 13. HERO DE PORTADA
 * ──────────────────────────────────────────────────────────────────────── */
.ep-home {
        overflow-x: clip;
}

.ep-hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(140deg, var(--ep-emerald-900) 0%, var(--ep-emerald-700) 45%, var(--ep-emerald-500) 100%);
        padding-block: 72px 64px;
}

.ep-hero-grid,
.ep-cta .ep-hero-grid,
.ep-res-cta .ep-hero-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
        mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
        pointer-events: none;
}

.ep-hero-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.35;
        pointer-events: none;
}

.ep-hero-blob--1 {
        width: 420px;
        height: 420px;
        background: rgba(16, 185, 129, 0.55);
        top: -140px;
        right: -80px;
}

.ep-hero-blob--2 {
        width: 320px;
        height: 320px;
        background: rgba(245, 158, 11, 0.35);
        bottom: -120px;
        left: -60px;
}

.ep-hero-blob--3 {
        width: 260px;
        height: 260px;
        background: rgba(255, 255, 255, 0.18);
        top: 30%;
        left: 42%;
}

.ep-hero-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
}

.ep-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 30px;
        padding: 0 14px;
        border-radius: var(--ep-radius-pill);
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.01em;
}

.ep-hero-title {
        margin-top: 18px;
        font-size: clamp(2.1rem, 5.4vw, 3.4rem);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -0.03em;
        color: #fff;
        max-width: 800px;
}

.ep-hero-accent {
        color: var(--ep-amber-300);
}

.ep-hero-sub {
        margin-top: 14px;
        max-width: 620px;
        font-size: 1.02rem;
        color: rgba(255, 255, 255, 0.82);
}

.ep-hero-form {
        position: relative;
        z-index: 1;
        margin-top: 28px;
        width: 100%;
        max-width: 720px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        background: #fff;
        padding: 10px;
        border-radius: var(--ep-radius-lg);
        box-shadow: var(--ep-shadow-xl);
}

.ep-hero-input {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0 10px;
        border-radius: var(--ep-radius-sm);
        background: var(--ep-stone-50);
        border: 1px solid var(--ep-border-soft);
        transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ep-hero-input:focus-within {
        border-color: var(--ep-emerald-500);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
        background: #fff;
}

.ep-hero-input input {
        flex: 1;
        min-width: 0;
        height: 44px;
        border: 0;
        background: transparent;
        font-size: 0.95rem;
        color: var(--ep-text);
}

.ep-hero-input input:focus {
        outline: none;
}

.ep-hero-select {
        height: 46px;
        border-color: var(--ep-border-soft);
        background-color: var(--ep-stone-50);
}

.ep-hero-submit {
        height: 46px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.85rem;
}

@media (min-width: 768px) {
        .ep-hero-form {
                grid-template-columns: 1fr 180px auto;
                gap: 8px;
        }
}

.ep-hero-popular {
        margin-top: 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
}

.ep-hero-popular-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.65);
}

.ep-hero-trust {
        margin-top: 26px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 20px;
        max-width: 640px;
        width: 100%;
}

@media (min-width: 768px) {
        .ep-hero-trust {
                grid-template-columns: repeat(4, auto);
                justify-content: center;
        }
}

.ep-hero-trust li {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.88);
        font-weight: 500;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 14. FRANJA DE CIFRAS (stats band)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-stats {
        background: #fff;
        border-bottom: 1px solid var(--ep-border-soft);
        padding-block: 22px;
}

.ep-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
}

@media (min-width: 768px) {
        .ep-stats-grid {
                grid-template-columns: repeat(4, 1fr);
        }
}

.ep-stat {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
}

.ep-stat-icon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: var(--ep-radius);
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-700);
        flex: none;
}

.ep-stat-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
}

.ep-stat-num {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--ep-stone-900);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
}

.ep-stat-label {
        font-size: 0.78rem;
        color: var(--ep-muted);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 15. ENCUENTRA POR… / CATEGORÍAS
 * ──────────────────────────────────────────────────────────────────────── */
.ep-find-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 22px;
}

@media (min-width: 640px) {
        .ep-find-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .ep-find-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

.ep-find-card {
        display: block;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 18px;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ep-find-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ep-shadow-lg);
        border-color: var(--ep-primary-border);
}

.ep-find-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
}

.ep-find-arrow {
        color: var(--ep-stone-300);
        transition: transform 160ms ease, color 160ms ease;
}

.ep-find-card:hover .ep-find-arrow {
        transform: translateX(4px);
        color: var(--ep-emerald-600);
}

.ep-find-title {
        font-size: 1rem;
        font-weight: 700;
}

.ep-find-desc {
        font-size: 0.84rem;
        color: var(--ep-muted);
        margin-top: 3px;
}

.ep-cat-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* móvil: 2 columnas compactas */
        gap: 10px;
        margin-bottom: 6px;
}

@media (min-width: 640px) {
        .ep-cat-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
        }
}

@media (min-width: 1024px) {
        .ep-cat-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 1280px) {
        .ep-cat-grid {
                grid-template-columns: repeat(4, 1fr);
        }
}

/* Vertical como el preview: icono arriba, nombre y conteo debajo */
.ep-cat-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        min-height: 96px;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 16px;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ep-cat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ep-shadow);
        border-color: var(--ep-primary-border);
}

.ep-cat-name {
        font-size: 0.95rem;
        font-weight: 700;
}

.ep-cat-count {
        font-size: 0.78rem;
        color: var(--ep-muted);
        margin-top: 1px;
}

/* Móvil: tarjeta más compacta para que las 2 columnas respiren
   (colocado tras las reglas base para ganar la cascada) */
@media (max-width: 639px) {
        .ep-cat-card {
                padding: 12px;
                gap: 8px;
                min-height: 0;
        }

        .ep-cat-card .ep-iconbox--lg {
                width: 40px;
                height: 40px;
        }

        .ep-cat-card .ep-iconbox--lg svg {
                width: 19px;
                height: 19px;
        }

        .ep-cat-name {
                font-size: 0.84rem;
        }

        .ep-cat-count {
                font-size: 0.7rem;
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 16. SALARIOS (lista home + grid listado + detalle)
 * ──────────────────────────────────────────────────────────────────────── */
/* Tarjeta blanca única con separadores, igual que SalariesPreview del TSX */
.ep-sal-list {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: 12px;
        box-shadow: var(--ep-shadow-sm);
        overflow: hidden;
        list-style: none;
}

.ep-sal-row + .ep-sal-row {
        border-top: 1px solid var(--ep-border-soft);
}

.ep-sal-row a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 16px 20px;
        border-radius: 0;
        border: 0;
        transition: background 160ms ease;
}

.ep-sal-row a:hover {
        background: rgba(236, 253, 245, 0.55);
        border-color: transparent;
        box-shadow: none;
}

.ep-sal-title-wrap {
        min-width: 0;
        flex: 0 0 256px;
}

.ep-sal-title {
        font-size: 0.98rem;
        font-weight: 700;
        color: var(--ep-text);
}

.ep-sal-row a:hover .ep-sal-title {
        color: var(--ep-emerald-700);
}

.ep-sal-meta {
        font-size: 0.78rem;
        color: var(--ep-muted);
        margin-top: 2px;
}

.ep-sal-bar-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1 1 auto;
        min-width: 140px;
}

/* Barra comparativa h-2.5 con degradado esmeralda→teal como el preview */
.ep-sal-bar-wrap .ep-progress {
        flex: 1 1 auto;
        height: 10px;
}

.ep-sal-bar-wrap .ep-progress-fill {
        background: linear-gradient(90deg, var(--ep-emerald-500), #14b8a6);
}

.ep-sal-range {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--ep-emerald-700);
        white-space: nowrap;
}

@media (max-width: 640px) {
        .ep-sal-row a {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
                padding: 14px 16px;
        }

        .ep-sal-title-wrap {
                flex-basis: auto;
        }

        .ep-sal-bar-wrap {
                flex-basis: auto;
                width: 100%;
                min-width: 0;
        }
}

.ep-salary-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 20px;
}

@media (min-width: 640px) {
        .ep-salary-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .ep-salary-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

.ep-salary-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 18px;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ep-salary-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ep-shadow-lg);
        border-color: var(--ep-primary-border);
}

.ep-salary-card-title {
        font-size: 1.05rem;
        font-weight: 700;
}

.ep-salary-card:hover .ep-salary-card-title {
        color: var(--ep-emerald-700);
}

.ep-salary-card-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.8rem;
        color: var(--ep-muted);
}

.ep-salary-card-city {
        display: inline-flex;
        align-items: center;
        gap: 4px;
}

.ep-salary-range {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--ep-emerald-700);
        letter-spacing: -0.01em;
}

.ep-salary-avg {
        font-size: 0.82rem;
        color: var(--ep-stone-600);
}

.ep-salary-offers {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: var(--ep-muted);
        margin-top: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 17. EMPRESAS (home, directorio por letra, perfil)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-co-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
}

@media (min-width: 768px) {
        .ep-co-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 1024px) {
        .ep-co-grid {
                grid-template-columns: repeat(4, 1fr);
        }
}

.ep-co-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 14px;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ep-co-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ep-shadow);
        border-color: var(--ep-primary-border);
}

.ep-co-card-text {
        min-width: 0;
}

.ep-co-name {
        font-size: 0.92rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.ep-co-card:hover .ep-co-name {
        color: var(--ep-emerald-700);
}

.ep-co-sector {
        font-size: 0.76rem;
        color: var(--ep-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
}

/* Directorio agrupado por letra */
.ep-company-groups {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 28px;
}

.ep-letter-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
}

.ep-letter-badge {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--ep-emerald-600);
        color: #fff;
        font-weight: 800;
        font-size: 1rem;
        flex: none;
}

.ep-letter-name {
        font-size: 1.1rem;
        font-weight: 800;
}

.ep-letter-count {
        font-size: 0.8rem;
        color: var(--ep-muted);
        margin-left: auto;
}

.ep-coh-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
}

@media (min-width: 768px) {
        .ep-coh-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1280px) {
        .ep-coh-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

.ep-coh-card {
        display: flex;
        align-items: center;
        gap: 13px;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 14px 16px;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ep-coh-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ep-shadow);
        border-color: var(--ep-primary-border);
}

.ep-coh-main {
        flex: 1;
        min-width: 0;
}

.ep-coh-name {
        font-size: 0.95rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.ep-coh-card:hover .ep-coh-name {
        color: var(--ep-emerald-700);
}

.ep-coh-sector {
        font-size: 0.78rem;
        color: var(--ep-muted);
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.ep-coh-arrow {
        color: var(--ep-stone-300);
        transition: transform 160ms ease, color 160ms ease;
}

.ep-coh-card:hover .ep-coh-arrow {
        transform: translateX(3px);
        color: var(--ep-emerald-600);
}

/* Perfil de empresa */
.ep-company-profile {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        flex-wrap: wrap;
}

.ep-company-profile-main {
        flex: 1;
        min-width: 240px;
}

.ep-company-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
}

.ep-company-desc {
        margin-top: 12px;
        font-size: 0.92rem;
        color: var(--ep-stone-600);
        max-width: 760px;
}

.ep-website-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 24px;
        padding: 0 10px;
        border-radius: var(--ep-radius-pill);
        border: 1px solid var(--ep-border-soft);
        background: #fff;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--ep-stone-600);
}

.ep-website-link:hover {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-700);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 18. CTA ALERTA (banner degradado)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-cta {
        position: relative;
        overflow: hidden;
        border-radius: var(--ep-radius-lg);
        background: linear-gradient(140deg, var(--ep-emerald-800) 0%, var(--ep-emerald-600) 60%, var(--ep-emerald-500) 100%);
        padding: 44px 24px;
        text-align: center;
}

.ep-cta-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
}

.ep-cta-bell {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: var(--ep-radius-lg);
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: #fff;
        margin-bottom: 8px;
}

.ep-cta-title {
        color: #fff;
        font-size: clamp(1.5rem, 3vw, 1.9rem);
        font-weight: 800;
}

.ep-cta-sub {
        color: rgba(255, 255, 255, 0.82);
        max-width: 480px;
        margin-top: 4px;
}

.ep-cta-btn {
        margin-top: 16px;
        font-weight: 700;
}

.ep-cta-note {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 19. BREADCRUMB + PAGINACIÓN
 * ──────────────────────────────────────────────────────────────────────── */
.ep-breadcrumb {
        margin-bottom: 18px;
}

.ep-breadcrumb ol {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.82rem;
}

.ep-breadcrumb a {
        color: var(--ep-muted);
        font-weight: 500;
}

.ep-breadcrumb a:hover {
        color: var(--ep-emerald-700);
}

.ep-breadcrumb-sep {
        color: var(--ep-stone-400);
        display: inline-flex;
}

.ep-breadcrumb-current {
        color: var(--ep-stone-700);
        font-weight: 600;
}

.ep-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 26px;
}

.ep-pagination-info {
        font-size: 0.85rem;
        color: var(--ep-muted);
}

.ep-pagination-btns {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
}

.ep-page-btn {
        display: inline-grid;
        place-items: center;
        min-width: 38px;
        height: 38px;
        padding: 0 8px;
        border-radius: 10px;
        border: 1px solid var(--ep-border-soft);
        background: #fff;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--ep-stone-700);
        transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

a.ep-page-btn:hover {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-700);
        background: var(--ep-emerald-50);
}

.ep-page-btn.is-current {
        background: var(--ep-emerald-600);
        border-color: var(--ep-emerald-600);
        color: #fff;
}

/* Paginación de WordPress (index.php) */
.ep-pagination .page-numbers {
        display: inline-grid;
        place-items: center;
        min-width: 38px;
        height: 38px;
        padding: 0 8px;
        border-radius: 10px;
        border: 1px solid var(--ep-border-soft);
        background: #fff;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--ep-stone-700);
}

.ep-pagination .page-numbers.current {
        background: var(--ep-emerald-600);
        border-color: var(--ep-emerald-600);
        color: #fff;
}

.ep-pagination .page-numbers:hover:not(.current) {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-700);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 20. LISTADO DE EMPLEOS: layout, filtros, toolbar, resultados
 * ──────────────────────────────────────────────────────────────────────── */
.ep-search-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
}

@media (min-width: 1024px) {
        .ep-search-layout {
                grid-template-columns: 280px 1fr;
        }
}

.ep-filters-aside {
        display: none;
}

@media (min-width: 1024px) {
        .ep-filters-aside {
                display: block;
                position: sticky;
                top: calc(var(--ep-header-h) + 16px);
        }
}

.ep-filters {
        padding: 18px;
}

.ep-filters-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
}

.ep-filters-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 1rem;
        font-weight: 700;
}

.ep-filters-clear {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--ep-stone-500);
}

.ep-filters-clear:hover {
        color: var(--ep-emerald-700);
}

.ep-fgroup {
        padding-block: 14px;
        border-top: 1px solid var(--ep-border-soft);
}

.ep-fgroup:first-of-type {
        border-top: 0;
        padding-top: 4px;
}

.ep-fgroup-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ep-stone-500);
        margin-bottom: 9px;
}

.ep-fsalary-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
}

.ep-fsalary-sep {
        color: var(--ep-stone-400);
        flex: none;
}

.ep-fsalary-apply {
        margin-top: 2px;
}

/* ── Tema 1.1.8: pie del panel de filtros con botón «Filtrar» siempre
 *    visible (sticky dentro del sidebar) + pista de auto-aplicado ── */
.ep-filters-foot {
        margin-top: 4px;
        padding-top: 14px;
        border-top: 1px solid var(--ep-border-soft);
}

.ep-filters-apply {
        position: sticky;
        bottom: 10px;
        z-index: 2;
        box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
}

.ep-filters-hint {
        margin-top: 8px;
        font-size: 0.72rem;
        line-height: 1.4;
        color: var(--ep-stone-400);
        text-align: center;
}

/* Estado de carga mientras el formulario se auto-aplica */
.ep-filters--loading {
        opacity: 0.55;
        pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
        .ep-filters--loading {
                transition: none;
        }
}

.ep-filters-toggle {
        display: inline-flex;
}

@media (min-width: 1024px) {
        .ep-filters-toggle {
                display: none;
        }
}

.ep-search-main {
        min-width: 0;
}

.ep-search-head {
        margin-bottom: 12px;
}

.ep-search-counter {
        margin-top: 6px;
        font-size: 0.95rem;
        color: var(--ep-muted);
}

.ep-search-counter-num {
        font-weight: 800;
        color: var(--ep-stone-900);
        font-size: 1.15rem;
        margin-right: 4px;
}

.ep-search-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 8px;
}

.ep-search-sort {
        display: flex;
        align-items: center;
        gap: 9px;
}

.ep-search-sort-label {
        font-size: 0.82rem;
        color: var(--ep-muted);
        font-weight: 500;
        white-space: nowrap;
}

.ep-sort-form .ep-select {
        height: 38px;
        font-size: 0.85rem;
}

.ep-results {
        margin-top: 6px;
}

.ep-results-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
}

@media (min-width: 900px) {
        .ep-results-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

.ep-results-grid + .ep-results-grid {
        margin-top: 12px;
}

.ep-search-empty {
        margin-top: 20px;
}

/* Buscador de salarios/empresas */
.ep-searchbox {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        background: #fff;
        border: 1px solid var(--ep-border);
        border-radius: var(--ep-radius);
        box-shadow: var(--ep-shadow-sm);
        transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ep-searchbox:focus-within {
        border-color: var(--ep-emerald-500);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}

.ep-searchbox--btn {
        padding: 6px;
        gap: 8px;
}

.ep-searchbox-field {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1;
        min-width: 0;
}

.ep-searchbox-field .ep-input {
        border: 0;
        box-shadow: none;
        height: 42px;
        padding: 0;
        background: transparent;
}

.ep-searchbox-field .ep-input:focus {
        box-shadow: none;
}

.ep-search-noresults {
        margin-top: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 21. DETALLE DE EMPLEO
 * ──────────────────────────────────────────────────────────────────────── */
.ep-back-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--ep-muted);
        margin-bottom: 16px;
}

.ep-back-link:hover {
        color: var(--ep-emerald-700);
}

.ep-detail-card {
        padding: 22px;
}

.ep-detail-head {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
}

.ep-detail-head-main {
        flex: 1;
        min-width: 240px;
}

.ep-detail-company-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 4px;
}

.ep-detail-company {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--ep-emerald-700);
}

a.ep-detail-company:hover {
        color: var(--ep-emerald-600);
        text-decoration: underline;
}

.ep-detail-title {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
}

.ep-detail-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
}

.ep-detail-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--ep-border-soft);
}

@media (min-width: 768px) {
        .ep-detail-meta {
                /* 3 columnas como el preview (grid-cols-2 sm:grid-cols-3) */
                grid-template-columns: repeat(3, 1fr);
        }
}

.ep-meta-item {
        min-width: 0;
}

.ep-meta-label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.74rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ep-muted);
        margin-bottom: 3px;
}

.ep-meta-value {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--ep-stone-800);
}

.ep-meta-salary {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--ep-emerald-700);
}

.ep-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--ep-border-soft);
}

.ep-cta-original {
        font-weight: 700;
}

.ep-fave-label,
.ep-cmp-label {
        display: inline;
}

/* Tablas: resumen rápido, desglose, calculadora */
.ep-summary-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
}

.ep-summary-table th,
.ep-summary-table td {
        text-align: left;
        padding: 10px 8px;
        border-bottom: 1px solid var(--ep-border-soft);
        vertical-align: top;
}

.ep-summary-table tr:last-child th,
.ep-summary-table tr:last-child td {
        border-bottom: 0;
}

.ep-summary-table th {
        width: 42%;
        font-weight: 500;
        color: var(--ep-muted);
}

.ep-summary-table td {
        font-weight: 600;
        color: var(--ep-stone-800);
}

.ep-summary-table td.is-emerald {
        color: var(--ep-emerald-700);
        font-weight: 700;
}

.ep-desc {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 0.94rem;
        color: var(--ep-stone-700);
}

.ep-req-list {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.ep-req-list li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 0.92rem;
        color: var(--ep-stone-700);
}

.ep-req-list .ep-icon {
        color: var(--ep-emerald-600);
        margin-top: 3px;
}

.ep-skills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

/* Nuestra lectura */
.ep-lectura-title {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--ep-emerald-900);
        margin-bottom: 10px;
}

.ep-lectura-text {
        font-size: 0.92rem;
        color: var(--ep-stone-700);
        margin-bottom: 16px;
}

.ep-scorebars {
        display: grid;
        gap: 14px;
}

.ep-scorebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 0.84rem;
}

.ep-scorebar-label {
        font-weight: 600;
        color: var(--ep-stone-700);
}

.ep-scorebar-value {
        color: var(--ep-muted);
        font-variant-numeric: tabular-nums;
}

.ep-score-total {
        margin-top: 20px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--ep-emerald-100);
        border-radius: var(--ep-radius);
}

.ep-score-total-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--ep-stone-800);
        margin-bottom: 8px;
}

.ep-score-disclaimer {
        margin-top: 10px;
        font-size: 0.76rem;
        color: var(--ep-stone-400);
}

/* Banner de oferta expirada */
.ep-expired {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 20px;
        padding: 14px 18px;
        border-radius: var(--ep-radius);
        background: var(--ep-amber-50);
        border: 1px solid var(--ep-amber-200);
}

.ep-expired p {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: var(--ep-amber-700);
        font-weight: 500;
}

/* Punto verde de verificación (v1.1.3) */
.ep-dot-ok {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ep-emerald-600, #059669);
        margin-right: 6px;
        vertical-align: middle;
        box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.14);
}

/* Nota de oferta unificada en varias fuentes (v1.1.3 — robot) */
.ep-sources-note {
        margin: 18px 0 0;
        padding: 14px 16px;
        border: 1px solid var(--ep-emerald-100, #d1fae5);
        background: var(--ep-emerald-50, #ecfdf5);
        border-radius: 12px;
}

.ep-sources-title {
        margin: 0 0 10px;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--ep-emerald-800, #065f46);
}

.ep-sources-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.ep-sources-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 13px;
        border-radius: 999px;
        border: 1px solid var(--ep-emerald-200, #a7f3d0);
        background: #fff;
        color: var(--ep-emerald-800, #065f46);
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ep-sources-chip:hover {
        border-color: var(--ep-emerald-600, #059669);
        box-shadow: 0 2px 8px rgba(5, 150, 105, 0.16);
        transform: translateY(-1px);
}

.ep-sources-chip:focus-visible {
        outline: 2px solid var(--ep-emerald-600, #059669);
        outline-offset: 2px;
}


/* ──────────────────────────────────────────────────────────────────────────
 * 22. BARRAS DE PROGRESO
 * ──────────────────────────────────────────────────────────────────────── */
.ep-progress {
        position: relative;
        height: 8px;
        border-radius: var(--ep-radius-pill);
        background: var(--ep-stone-100);
        overflow: hidden;
}

.ep-progress-fill {
        display: block;
        height: 100%;
        width: 0;
        border-radius: var(--ep-radius-pill);
        background: linear-gradient(90deg, var(--ep-emerald-400), var(--ep-emerald-600));
        transition: width 400ms ease;
}

.ep-progress--sm {
        height: 6px;
}

.ep-progress--score {
        height: 7px;
}

.ep-progress--total {
        height: 10px;
}

.ep-progress--calc {
        height: 10px;
        margin-top: 18px;
}

.ep-progress--calc.is-low .ep-progress-fill {
        background: linear-gradient(90deg, var(--ep-amber-400), var(--ep-amber-500));
}

.ep-progress--fit {
        height: 9px;
        margin-top: 4px;
}

.ep-progress--fit .ep-progress-fill {
        background: linear-gradient(90deg, var(--ep-amber-400), var(--ep-amber-500));
}

.ep-progress--fit.is-ok .ep-progress-fill {
        background: linear-gradient(90deg, var(--ep-emerald-400), var(--ep-emerald-600));
}

/* ──────────────────────────────────────────────────────────────────────────
 * 23. CALCULADORA
 * ──────────────────────────────────────────────────────────────────────── */
.ep-calc-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
}

.ep-calc-chips-label {
        font-size: 0.82rem;
        color: var(--ep-muted);
        font-weight: 500;
}

.ep-calc-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
}

@media (min-width: 900px) {
        .ep-calc-grid {
                grid-template-columns: minmax(300px, 380px) 1fr;
        }
}

.ep-calc-form {
        padding: 22px;
}

.ep-calc-note {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-top: 16px;
        padding: 12px;
        border-radius: var(--ep-radius-sm);
        background: var(--ep-stone-50);
        border: 1px solid var(--ep-border-soft);
        font-size: 0.78rem;
        color: var(--ep-muted);
}

.ep-calc-results {
        min-width: 0;
}

.ep-figure-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
}

@media (min-width: 640px) {
        .ep-figure-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

.ep-figure {
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 16px 18px;
        box-shadow: var(--ep-shadow-sm);
}

.ep-figure-label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ep-muted);
}

.ep-figure-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--ep-stone-900);
        letter-spacing: -0.02em;
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
}

.ep-figure-value--row {
        display: flex;
        align-items: center;
        gap: 8px;
}

.ep-figure-value--row .ep-icon {
        color: var(--ep-emerald-600);
}

.ep-figure-note {
        font-size: 0.76rem;
        color: var(--ep-stone-400);
        margin-top: 2px;
}

.ep-figure--primary {
        background: linear-gradient(140deg, var(--ep-emerald-700), var(--ep-emerald-500));
        border-color: var(--ep-emerald-600);
        box-shadow: 0 10px 24px rgba(5, 150, 105, 0.28);
}

.ep-figure--primary .ep-figure-label {
        color: rgba(255, 255, 255, 0.85);
}

.ep-figure--primary .ep-figure-value {
        color: #fff;
}

.ep-figure--primary .ep-figure-note {
        color: rgba(255, 255, 255, 0.72);
}

.ep-calc-bar-note {
        margin-top: 8px;
        font-size: 0.82rem;
        color: var(--ep-muted);
}

.ep-calc-break {
        margin-top: 18px;
        padding: 20px;
}

.ep-calc-break .ep-h3 {
        margin-bottom: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 24. FITCHECKER (encaje de perfil)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-fit {
        border-color: var(--ep-emerald-200);
}

.ep-fit-head {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
}

.ep-fit-desc {
        font-size: 0.84rem;
        color: var(--ep-muted);
        margin-top: 2px;
}

.ep-fit-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
}

.ep-fit-result {
        margin-top: 6px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--ep-emerald-100);
        border-radius: var(--ep-radius);
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.ep-fit-score {
        display: flex;
        align-items: baseline;
        gap: 8px;
}

.ep-fit-pct {
        font-size: 1.9rem;
        font-weight: 800;
        color: var(--ep-emerald-700);
        letter-spacing: -0.02em;
        line-height: 1;
}

.ep-progress--fit + .ep-fit-chips {
        margin-top: 2px;
}

.ep-fit-pct-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ep-stone-600);
}

.ep-fit-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
}

.ep-fit-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 25. ACORDEONES (recursos, <details>)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-acc-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 16px;
}

.ep-acc {
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        background: var(--ep-stone-50);
        overflow: hidden;
        transition: border-color 160ms ease;
}

.ep-acc[open] {
        border-color: var(--ep-emerald-200);
        background: #fff;
}

.ep-acc-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--ep-stone-800);
        cursor: pointer;
        list-style: none;
        user-select: none;
        transition: background 160ms ease;
}

.ep-acc-trigger::-webkit-details-marker {
        display: none;
}

.ep-acc-trigger:hover {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-800);
}

.ep-acc-chevron {
        display: inline-flex;
        color: var(--ep-stone-400);
        transition: transform 200ms ease, color 160ms ease;
        flex: none;
}

.ep-acc[open] .ep-acc-chevron {
        transform: rotate(180deg);
        color: var(--ep-emerald-600);
}

.ep-acc-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 240ms ease;
}

.ep-acc[open] .ep-acc-content {
        grid-template-rows: 1fr;
}

.ep-acc-inner {
        overflow: hidden;
        padding: 0 16px;
}

.ep-acc[open] .ep-acc-inner {
        padding: 0 16px 16px;
}

.ep-acc-inner p {
        font-size: 0.88rem;
        color: var(--ep-stone-600);
}

.ep-acc-list {
        margin-top: 10px;
        padding-left: 18px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        list-style: disc;
}

.ep-acc-list li {
        font-size: 0.87rem;
        color: var(--ep-stone-600);
}

.ep-acc-list li::marker {
        color: var(--ep-emerald-600);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 26. RECURSOS
 * ──────────────────────────────────────────────────────────────────────── */
.ep-res-hero {
        margin-bottom: 26px;
}

.ep-res-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
}

.ep-res-sections {
        display: flex;
        flex-direction: column;
        gap: 18px;
}

.ep-res-section {
        padding: 22px;
}

.ep-res-section-head {
        display: flex;
        align-items: flex-start;
        gap: 14px;
}

.ep-res-cta {
        margin-top: 30px;
        border-radius: var(--ep-radius-lg);
        background: linear-gradient(140deg, var(--ep-emerald-800) 0%, var(--ep-emerald-600) 65%, var(--ep-emerald-500) 100%);
        padding: 28px 24px;
        position: relative;
        overflow: hidden;
}

.ep-res-cta-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
}

.ep-res-cta-text {
        display: flex;
        align-items: center;
        gap: 14px;
}

.ep-res-cta-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: var(--ep-radius);
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        flex: none;
}

.ep-res-cta-title {
        color: #fff;
        font-size: 1.25rem;
        font-weight: 800;
}

.ep-res-cta-sub {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.88rem;
        margin-top: 3px;
        max-width: 480px;
}

.ep-res-cta-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 27. CONTACTO
 * ──────────────────────────────────────────────────────────────────────── */
.ep-contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
}

@media (min-width: 900px) {
        .ep-contact-grid {
                grid-template-columns: 1fr 1.15fr;
        }
}

.ep-contact-info {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
}

.ep-mail-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 18px;
}

.ep-mail-card-main {
        min-width: 0;
}

.ep-mail-card-desc {
        font-size: 0.86rem;
        color: var(--ep-muted);
        margin-top: 3px;
}

.ep-mail-link {
        display: inline-block;
        margin-top: 8px;
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--ep-emerald-700);
        word-break: break-all;
}

.ep-mail-link:hover {
        text-decoration: underline;
}

.ep-alert-card {
        margin-top: 22px;
        padding: 24px;
}

.ep-alert-head {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 28. GUARDADOS
 * ──────────────────────────────────────────────────────────────────────── */
.ep-saved-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 18px;
}

.ep-saved-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
}

.ep-saved-heart {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: var(--ep-radius-lg);
        background: var(--ep-red-50);
        border: 1px solid var(--ep-red-200);
        color: var(--ep-red-600);
        flex: none;
}

.ep-saved-clear {
        flex: none;
}

.ep-saved-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
}

.ep-saved-note {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.8rem;
        color: var(--ep-muted);
        margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 29. COMPARADOR
 * ──────────────────────────────────────────────────────────────────────── */
.ep-compare-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 18px;
}

.ep-compare-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 56px 16px;
        color: var(--ep-muted);
        font-size: 0.92rem;
}

.ep-spinner {
        width: 20px;
        height: 20px;
        border: 2.5px solid var(--ep-emerald-100);
        border-top-color: var(--ep-emerald-600);
        border-radius: 50%;
        animation: ep-spin 700ms linear infinite;
}

.ep-spinner--lg {
        width: 34px;
        height: 34px;
        border-width: 3px;
}

@keyframes ep-spin {
        to {
                transform: rotate(360deg);
        }
}

/* Tabla del comparador (render JS) */
.ep-cmp-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.88rem;
        min-width: 640px;
}

.ep-cmp-table th,
.ep-cmp-table td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--ep-border-soft);
        text-align: left;
        vertical-align: top;
}

.ep-cmp-table thead th {
        border-bottom: 2px solid var(--ep-border-soft);
        vertical-align: bottom;
}

.ep-cmp-row th {
        width: 140px;
        font-size: 0.76rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ep-muted);
        white-space: nowrap;
        background: var(--ep-stone-50);
}

.ep-cmp-row-label {
        width: 140px;
        background: var(--ep-stone-50);
}

.ep-cmp-cell {
        font-weight: 600;
        color: var(--ep-stone-800);
}

.ep-cmp-cell .ep-badge {
        margin-right: 6px;
}

.ep-cmp-cell--best {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-800);
}

.ep-cmp-col-head {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 210px;
}

.ep-cmp-col-title {
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ep-stone-900);
}

.ep-cmp-col-title a {
        color: inherit;
}

.ep-cmp-col-title a:hover {
        color: var(--ep-emerald-700);
}

.ep-cmp-col-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
}

.ep-cmp-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid var(--ep-border-soft);
        background: #fff;
        color: var(--ep-stone-400);
        flex: none;
        transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.ep-cmp-remove:hover {
        color: var(--ep-red-600);
        border-color: var(--ep-red-200);
        background: var(--ep-red-50);
}

/* Tabla de desglose por fuente */
.ep-break-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.88rem;
        min-width: 520px;
}

.ep-break-table th,
.ep-break-table td {
        padding: 11px 12px;
        border-bottom: 1px solid var(--ep-border-soft);
        text-align: left;
}

.ep-break-table thead th {
        font-size: 0.74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ep-muted);
}

.ep-break-table tbody tr:last-child th,
.ep-break-table tbody tr:last-child td {
        border-bottom: 0;
}

.ep-source-name {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--ep-stone-800);
}

.ep-source-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex: none;
}

.ep-break-bar-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 140px;
}

.ep-break-bar {
        flex: 1;
        height: 8px;
        border-radius: var(--ep-radius-pill);
        background: var(--ep-stone-100);
        overflow: hidden;
}

.ep-break-bar span {
        display: block;
        height: 100%;
        border-radius: var(--ep-radius-pill);
}

.ep-break-count {
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--ep-stone-700);
        font-variant-numeric: tabular-nums;
}

.ep-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
}

/* Primera columna del comparador FIJA al desplazarse en horizontal:
   las etiquetas de fila (Salario, Modalidad, Experiencia…) siempre visibles. */
.ep-cmp-table thead th.ep-cmp-row-label,
.ep-cmp-table tbody tr.ep-cmp-row th {
        position: sticky;
        left: 0;
}

.ep-cmp-table thead th.ep-cmp-row-label {
        z-index: 2;
        box-shadow: inset -1px 0 0 var(--ep-border-soft);
}

.ep-cmp-table tbody tr.ep-cmp-row th {
        z-index: 1;
        box-shadow: inset -1px 0 0 var(--ep-border-soft);
}

/* Separador visible al arrancar el scroll del comparador (se activa con JS). */
.ep-table-wrap.is-scrolled {
        box-shadow: inset 0 0 0 1px var(--ep-border-soft);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 39-B. PÁGINA 404 (búsqueda + accesos rápidos)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-404-search {
        display: flex;
        gap: 8px;
        max-width: 440px;
        margin: 22px auto 0;
}

.ep-404-search .ep-input {
        flex: 1;
        min-width: 0;
}

.ep-404-links {
        margin-top: 26px;
        text-align: center;
}

.ep-404-links-title {
        display: block;
        margin-bottom: 10px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ep-muted);
}

.ep-404-links-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
}


/* ──────────────────────────────────────────────────────────────────────────
 * 30. CIUDADES
 * ──────────────────────────────────────────────────────────────────────── */
.ep-cities-title {
        margin-bottom: 8px;
}

.ep-city-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
}

@media (min-width: 640px) {
        .ep-city-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .ep-city-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

.ep-city-card {
        position: relative;
        display: block;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        padding: 16px 18px;
        overflow: hidden;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ep-city-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ep-shadow-lg);
        border-color: var(--ep-primary-border);
}

.ep-city-bar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.04));
        border-radius: var(--ep-radius) 0 0 var(--ep-radius);
        pointer-events: none;
}

.ep-city-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
}

.ep-city-info {
        min-width: 0;
}

.ep-city-name {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 0.98rem;
        color: var(--ep-stone-900);
}

.ep-city-card:hover .ep-city-name {
        color: var(--ep-emerald-700);
}

.ep-city-note {
        display: block;
        font-size: 0.78rem;
        color: var(--ep-muted);
        margin-top: 3px;
}

.ep-city-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none;
}

.ep-city-count {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--ep-emerald-700);
        font-variant-numeric: tabular-nums;
}

.ep-city-arrow {
        color: var(--ep-stone-300);
        transition: transform 160ms ease, color 160ms ease;
}

.ep-city-card:hover .ep-city-arrow {
        transform: translateX(3px);
        color: var(--ep-emerald-600);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 31. PÁGINAS LEGALES (page.php)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-legal-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
}

@media (min-width: 1024px) {
        .ep-legal-grid {
                grid-template-columns: 260px 1fr;
        }
}

.ep-legal-side {
        display: none;
}

@media (min-width: 1024px) {
        .ep-legal-side {
                display: block;
        }
}

.ep-legal-side-sticky {
        position: sticky;
        top: calc(var(--ep-header-h) + 16px);
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.ep-legal-card {
        padding: 16px;
}

.ep-legal-card-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 12px;
}

.ep-legal-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

.ep-legal-nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 10px;
        border-radius: var(--ep-radius-sm);
        font-size: 0.86rem;
        font-weight: 500;
        color: var(--ep-stone-600);
        transition: background 160ms ease, color 160ms ease;
}

.ep-legal-nav a:hover {
        background: var(--ep-stone-100);
        color: var(--ep-stone-900);
}

.ep-legal-nav a.is-active {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-700);
        font-weight: 700;
}

.ep-helpcard {
        padding: 16px;
}

.ep-helpcard-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
}

.ep-helpcard-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--ep-amber-700);
}

.ep-helpcard-text {
        font-size: 0.82rem;
        color: var(--ep-amber-700);
        margin-top: 2px;
}

.ep-helpcard-text a {
        font-weight: 700;
        text-decoration: underline;
}

.ep-page-article {
        min-width: 0;
}

.ep-page-head {
        margin-bottom: 4px;
}

.ep-page-head-row {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
}

.ep-page-updated {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: var(--ep-muted);
        margin-top: 8px;
}

.ep-next-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 20px;
        padding: 16px 18px;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius);
        background: #fff;
        font-size: 0.9rem;
        color: var(--ep-stone-600);
        transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ep-next-link:hover {
        border-color: var(--ep-primary-border);
        box-shadow: var(--ep-shadow-sm);
        color: var(--ep-stone-800);
}

.ep-next-link .ep-icon {
        color: var(--ep-emerald-600);
}

/* Contenido markdown/prose */
.ep-prose {
        font-size: 0.94rem;
        color: var(--ep-stone-700);
}

.ep-prose h1,
.ep-prose h2,
.ep-prose h3,
.ep-prose h4 {
        margin: 1.4em 0 0.5em;
        color: var(--ep-stone-900);
}

.ep-prose h1 {
        font-size: 1.4rem;
}

.ep-prose h2 {
        font-size: 1.2rem;
}

.ep-prose h3 {
        font-size: 1.05rem;
}

.ep-prose p,
.ep-prose ul,
.ep-prose ol {
        margin: 0.7em 0;
}

.ep-prose ul,
.ep-prose ol {
        padding-left: 1.4em;
}

.ep-prose li {
        margin: 0.3em 0;
}

.ep-prose li::marker {
        color: var(--ep-emerald-600);
}

.ep-prose a {
        text-decoration: underline;
        text-underline-offset: 2px;
}

.ep-prose blockquote {
        margin: 1em 0;
        padding: 10px 16px;
        border-left: 3px solid var(--ep-emerald-300);
        background: var(--ep-emerald-50);
        border-radius: 0 var(--ep-radius-sm) var(--ep-radius-sm) 0;
        color: var(--ep-stone-600);
}

.ep-prose code {
        font-family: var(--ep-font-mono);
        font-size: 0.85em;
        background: var(--ep-stone-100);
        border: 1px solid var(--ep-border-soft);
        border-radius: 6px;
        padding: 1px 5px;
}

.ep-prose pre {
        background: var(--ep-stone-900);
        color: var(--ep-stone-100);
        border-radius: var(--ep-radius);
        padding: 14px 16px;
        overflow-x: auto;
        font-family: var(--ep-font-mono);
        font-size: 0.84rem;
}

.ep-prose pre code {
        background: transparent;
        border: 0;
        padding: 0;
        color: inherit;
}

.ep-prose table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.88rem;
        margin: 1em 0;
}

.ep-prose th,
.ep-prose td {
        border: 1px solid var(--ep-border-soft);
        padding: 8px 10px;
        text-align: left;
}

.ep-prose th {
        background: var(--ep-stone-50);
}

.ep-prose hr {
        margin: 1.4em 0;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 32. LISTADO DE POSTS (index.php) + 404
 * ──────────────────────────────────────────────────────────────────────── */
.ep-post-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 8px;
}

.ep-postcard {
        padding: 20px;
}

.ep-postcard-title {
        font-size: 1.15rem;
}

.ep-postcard-title a:hover {
        color: var(--ep-emerald-700);
}

.ep-postcard-meta {
        font-size: 0.8rem;
        color: var(--ep-muted);
        margin-top: 4px;
}

.ep-postcard-excerpt {
        font-size: 0.9rem;
        color: var(--ep-stone-600);
        margin-top: 8px;
}

.ep-postcard-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--ep-emerald-700);
}

.ep-404 {
        padding-block: 40px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 33. PUBLICIDAD
 * Los slots VACÍOS no reservan espacio (display:none). Solo se pinta algo
 * cuando el admin configura un anuncio: código manual (.ep-ad-unit) o
 * slot de AdSense activo. La pista .is-admin-hint solo la ve el admin.
 * ──────────────────────────────────────────────────────────────────────── */
.ep-ad,
.ep-ad-placeholder {
        display: none;
}

/* Pista discreta SOLO para administradores (el plugin la imprime con la
   clase is-admin-hint; los visitantes no reciben ningún markup). */
.ep-ad-placeholder.is-admin-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-block: 14px;
        padding: 8px 12px;
        min-height: 0;
        border: 1px dashed var(--ep-border);
        border-radius: var(--ep-radius);
        background: #fafaf9;
        color: var(--ep-stone-400);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        overflow: hidden;
}

/* Unidad con anuncio activo (código manual pegado por el admin). */
.ep-ad-unit {
        margin-block: 24px;
}

.ep-ad-unit ins.adsbygoogle {
        display: block;
}

.ep-ad-unit span,
.ep-ad-placeholder.is-admin-hint span {
        color: var(--ep-stone-400);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 34. TOASTS
 * ──────────────────────────────────────────────────────────────────────── */
.ep-toasts {
        position: fixed;
        right: 16px;
        bottom: 84px;
        z-index: 80;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: min(360px, calc(100vw - 32px));
        pointer-events: none;
}

.ep-toast {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: var(--ep-radius);
        background: var(--ep-stone-900);
        color: #fff;
        font-size: 0.88rem;
        font-weight: 500;
        box-shadow: var(--ep-shadow-xl);
        border-left: 3px solid var(--ep-emerald-500);
        pointer-events: auto;
        cursor: pointer;
        animation: ep-toast-in 240ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

.ep-toast--ok {
        border-left-color: var(--ep-emerald-500);
}

.ep-toast--err {
        border-left-color: var(--ep-red-600);
}

.ep-toast.is-leaving {
        animation: ep-toast-out 200ms ease both;
}

@keyframes ep-toast-in {
        from {
                opacity: 0;
                transform: translateY(12px) scale(0.98);
        }

        to {
                opacity: 1;
                transform: translateY(0) scale(1);
        }
}

@keyframes ep-toast-out {
        from {
                opacity: 1;
                transform: translateY(0) scale(1);
        }

        to {
                opacity: 0;
                transform: translateY(8px) scale(0.98);
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 35. DIÁLOGO DE CONFIRMACIÓN
 * ──────────────────────────────────────────────────────────────────────── */
.ep-confirm-overlay {
        position: fixed;
        inset: 0;
        z-index: 75;
        display: grid;
        place-items: center;
        padding: 16px;
        background: rgba(28, 25, 23, 0.55);
        animation: ep-fade-in 180ms ease both;
}

.ep-confirm {
        width: 100%;
        max-width: 430px;
        background: #fff;
        border-radius: var(--ep-radius-lg);
        padding: 24px;
        box-shadow: var(--ep-shadow-xl);
        animation: ep-pop-in 200ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

.ep-confirm-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 8px;
}

.ep-confirm-desc {
        font-size: 0.88rem;
        color: var(--ep-muted);
}

.ep-confirm-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
        flex-wrap: wrap;
}

@keyframes ep-fade-in {
        from {
                opacity: 0;
        }

        to {
                opacity: 1;
        }
}

@keyframes ep-pop-in {
        from {
                opacity: 0;
                transform: scale(0.94) translateY(8px);
        }

        to {
                opacity: 1;
                transform: scale(1) translateY(0);
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 36. BANNER DE CONSENTIMIENTO DE COOKIES
 * ──────────────────────────────────────────────────────────────────────── */
.ep-consent {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 70;
        display: flex;
        justify-content: center;
        pointer-events: none;
}

.ep-consent-card {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        width: 100%;
        max-width: 760px;
        background: #fff;
        border: 1px solid var(--ep-primary-border);
        border-radius: var(--ep-radius-lg);
        padding: 16px 20px;
        box-shadow: var(--ep-shadow-xl);
        animation: ep-toast-in 260ms ease both;
}

.ep-consent-text {
        flex: 1;
        min-width: 240px;
}

.ep-consent-text strong {
        display: block;
        font-size: 0.92rem;
        color: var(--ep-stone-900);
}

.ep-consent-text p {
        font-size: 0.8rem;
        color: var(--ep-muted);
        margin-top: 3px;
}

.ep-consent-text a {
        font-weight: 600;
        text-decoration: underline;
}

.ep-consent-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
        flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 37. BOTÓN VOLVER ARRIBA
 * ──────────────────────────────────────────────────────────────────────── */
.ep-scroll-top {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 65;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--ep-emerald-600);
        color: #fff;
        box-shadow: 0 8px 20px rgba(5, 150, 105, 0.4);
        transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
}

.ep-scroll-top.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
}

.ep-scroll-top:hover {
        background: var(--ep-emerald-700);
        transform: translateY(-2px);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 38. ESTADOS VACÍOS
 * ──────────────────────────────────────────────────────────────────────── */
.ep-empty {
        text-align: center;
        padding: 48px 20px;
        border: 1px dashed var(--ep-border);
        border-radius: var(--ep-radius-lg);
        background: #fff;
}

.ep-empty-icon {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: var(--ep-stone-100);
        color: var(--ep-stone-400);
}

.ep-empty-icon .ep-icon {
        width: 28px;
        height: 28px;
}

.ep-empty-title {
        font-size: 1.1rem;
        font-weight: 700;
}

.ep-empty-desc {
        max-width: 460px;
        margin: 6px auto 0;
        font-size: 0.88rem;
        color: var(--ep-muted);
}

.ep-empty-action {
        margin-top: 18px;
        display: flex;
        justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 39. SKELETON (cargas del cliente: guardados, comparador)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-skeleton {
        position: relative;
        overflow: hidden;
        background: var(--ep-stone-100);
        border-radius: var(--ep-radius-sm);
        min-height: 14px;
}

.ep-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
        transform: translateX(-100%);
        animation: ep-shimmer 1.4s infinite;
}

.ep-skeleton--card {
        min-height: 150px;
        border-radius: var(--ep-radius);
}

@keyframes ep-shimmer {
        to {
                transform: translateX(100%);
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 40. FOOTER
 * ──────────────────────────────────────────────────────────────────────── */
.ep-footer {
        background: var(--ep-stone-900);
        color: var(--ep-stone-300);
        margin-top: auto;
        padding: 48px 0 24px;
        flex-shrink: 0;
}

.ep-footer-brand {
        max-width: 560px;
        margin-bottom: 36px;
}

.ep-footer-about {
        margin-top: 14px;
        font-size: 0.88rem;
        color: rgba(214, 211, 209, 0.75);
}

.ep-footer-cols {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
        padding-bottom: 36px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
        .ep-footer-cols {
                grid-template-columns: repeat(4, 1fr);
        }
}

@media (min-width: 1024px) {
        .ep-footer-cols {
                grid-template-columns: repeat(5, 1fr);
        }
}

.ep-footer-col h3 {
        color: #fff;
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 14px;
}

.ep-footer-col ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 9px;
}

.ep-footer-col a {
        font-size: 0.86rem;
        color: var(--ep-stone-400);
        transition: color 160ms ease;
}

.ep-footer-col a:hover {
        color: var(--ep-emerald-400);
}

.ep-footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 24px;
}

.ep-footer-copy,
.ep-footer-note {
        font-size: 0.8rem;
        color: rgba(214, 211, 209, 0.55);
}

.ep-footer-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ep-footer-meta a {
        font-size: 0.75rem;
        color: rgba(214, 211, 209, 0.4);
}

.ep-footer-meta a:hover {
        color: var(--ep-emerald-400);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 41. RESPONSIVE GLOBAL
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
        .ep-section {
                padding-block: 36px;
        }

        .ep-hero {
                padding-block: 52px 44px;
        }

        .ep-hero-form {
                padding: 8px;
        }

        .ep-block,
        .ep-detail-card,
        .ep-form-card,
        .ep-alert-card,
        .ep-calc-form,
        .ep-res-section {
                padding: 18px;
        }

        .ep-actions .ep-btn {
                flex: 1 1 calc(50% - 5px);
        }

        .ep-jobcard-salary {
                margin-left: 0;
                width: 100%;
        }

        .ep-toasts {
                right: 12px;
                bottom: 78px;
        }
}

@media (min-width: 640px) {
        .ep-container {
                padding-inline: 24px;
        }
}

@media (min-width: 1280px) {
        .ep-container {
                padding-inline: 32px;
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 42. MOVIMIENTO REDUCIDO
 * ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
        }

        .ep-progress-fill {
                transition: none;
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 43. IMPRESIÓN
 * ──────────────────────────────────────────────────────────────────────── */
@media print {
        .ep-header,
        .ep-footer,
        .ep-overlay,
        .ep-panel,
        .ep-toasts,
        .ep-scroll-top,
        .ep-consent,
        .ep-ad,
        .ep-ad-placeholder,
        .ep-actions,
        .ep-hamburger,
        .ep-filters-aside,
        .ep-filters-toggle {
                display: none !important;
        }

        body {
                background: #fff;
                color: #000;
        }

        .ep-card,
        .card-job {
                box-shadow: none;
                border-color: #ccc;
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 39. MODAL GLOBAL "CREAR ALERTA DE EMPLEO" (idéntico al preview)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-modal {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
}

.ep-modal-overlay {
        position: absolute;
        inset: 0;
        background: rgba(28, 25, 23, 0.55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        animation: ep-fade-in 200ms ease both;
}

.ep-modal-card {
        position: relative;
        width: 100%;
        max-width: 448px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        background: #fff;
        border: 1px solid var(--ep-border-soft);
        border-radius: var(--ep-radius-lg);
        box-shadow: var(--ep-shadow-xl);
        padding: 24px;
        animation: ep-modal-in 220ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

@keyframes ep-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
}

@keyframes ep-modal-in {
        from {
                opacity: 0;
                transform: translateY(14px) scale(0.97);
        }

        to {
                opacity: 1;
                transform: translateY(0) scale(1);
        }
}

.ep-modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: var(--ep-stone-400);
        transition: background 160ms ease, color 160ms ease;
}

.ep-modal-close:hover {
        background: var(--ep-stone-100);
        color: var(--ep-stone-700);
}

.ep-modal-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
        padding-right: 32px;
}

.ep-modal-icon {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        flex: none;
        border-radius: 10px;
        background: var(--ep-emerald-100);
        color: var(--ep-emerald-700);
}

.ep-modal-title {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -0.01em;
}

.ep-modal-desc {
        font-size: 0.85rem;
        color: var(--ep-muted);
        margin-top: 3px;
        line-height: 1.5;
}

.ep-form-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
}

@media (max-width: 480px) {
        .ep-form-grid-2 {
                grid-template-columns: 1fr;
        }
}

.ep-modal .ep-form {
        margin-top: 4px;
}

/* Frecuencia: tarjetas de radio como el RadioGroup del preview */
.ep-modal .ep-freq-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.ep-modal .ep-freq-group .ep-radio {
        padding: 8px 14px;
        border-radius: var(--ep-radius-pill);
        font-size: 0.85rem;
        font-weight: 600;
}

/* Estado de éxito (replica el done-state del Dialog del preview) */
.ep-alert-success {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 28px 8px 12px;
        text-align: center;
}

.ep-alert-success-icon {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        margin-bottom: 6px;
        border-radius: 50%;
        background: var(--ep-emerald-100);
        color: var(--ep-emerald-600);
}

.ep-alert-success-icon .ep-icon {
        width: 30px;
        height: 30px;
}

.ep-alert-success-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--ep-emerald-800);
}

.ep-alert-success-sub {
        font-size: 0.85rem;
        color: var(--ep-muted);
}

/* Bloqueo de scroll con el modal abierto */
body.ep-no-scroll {
        overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 42. IMPRESIÓN — detalle de empleo y comparador limpios en papel/PDF
 * ──────────────────────────────────────────────────────────────────────── */
@media print {
        body {
                background: #fff !important;
        }

        .ep-header,
        .ep-footer,
        .ep-scroll-top,
        .ep-consent,
        .ep-modal,
        .ep-toasts,
        .ep-sheeter,
        .ep-sheet,
        .ep-chip-clear,
        .ep-pagination,
        .ep-back-link,
        .ep-actions,
        .ep-detail-chips,
        .ep-ad-slot,
        .ep-ad-box {
                display: none !important;
        }

        .ep-container,
        .ep-container--narrow,
        .ep-container--wide,
        .ep-page {
                max-width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
        }

        .ep-card,
        .card-job {
                box-shadow: none !important;
                border: 1px solid #ddd !important;
                break-inside: avoid;
        }

        a {
                text-decoration: none !important;
                color: inherit !important;
        }

        /* El comparador imprime como tabla completa, sin scroll */
        .ep-table-wrap {
                overflow: visible !important;
        }

        .ep-cmp-table {
                min-width: 0 !important;
        }

        .ep-cmp-table thead th.ep-cmp-row-label,
        .ep-cmp-table tbody tr.ep-cmp-row th {
                position: static !important;
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 43. VIGENCIA DE OFERTAS (chips de fecha límite / vacantes / abierta)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-vchip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.2;
        border: 1px solid transparent;
        white-space: nowrap;
}

.ep-vchip--ok {
        background: var(--ep-emerald-50);
        border-color: var(--ep-emerald-200);
        color: var(--ep-emerald-800);
}

.ep-vchip--warn {
        background: var(--ep-amber-50);
        border-color: var(--ep-amber-200);
        color: var(--ep-amber-700);
}

.ep-vchip--muted {
        background: var(--ep-stone-100);
        border-color: var(--ep-border-soft);
        color: var(--ep-stone-500);
}

/* Aviso ámbar en el detalle (cierra hoy / quedan pocos días) */
.ep-vig-banner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 14px;
        padding: 12px 14px;
        border: 1px solid var(--ep-amber-200);
        border-radius: 12px;
        background: var(--ep-amber-50);
        color: var(--ep-amber-700);
        font-size: 0.9rem;
        font-weight: 600;
}

.ep-vig-banner p {
        margin: 0;
}

.ep-vig-banner .ep-icon--amber {
        flex: none;
        width: 20px;
        height: 20px;
        color: var(--ep-amber-600);
        margin-top: 1px;
}

/* Celda destacada del comparador: valor en esmeralda + píldora (como el preview) */
.ep-cmp-cell--best {
        background: transparent;
        color: var(--ep-emerald-700);
        font-weight: 700;
}

.ep-cmp-best-badge {
        display: inline-block;
        margin-left: 6px;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--ep-emerald-200);
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-800);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        white-space: nowrap;
        vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 44. CONVOCATORIAS Y NOTICIAS DE EMPLEO (portal /convocatorias/)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-conv-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
}

.ep-conv-head .ep-badge--new {
        flex: none;
        margin-top: 6px;
}

.ep-results-count {
        margin: 0 0 14px;
        font-size: 0.9rem;
        color: var(--ep-muted);
}

.ep-results-count strong {
        color: var(--ep-stone-900);
}

/* Filtros por tipo */
.ep-chip-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 22px;
}

.ep-chip-filter {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        border: 1px solid var(--ep-border);
        background: #fff;
        color: var(--ep-stone-700);
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.ep-chip-filter:hover {
        border-color: var(--ep-emerald-300);
        color: var(--ep-emerald-700);
}

.ep-chip-filter.is-active {
        background: var(--ep-emerald-600);
        border-color: var(--ep-emerald-600);
        color: #fff;
}

.ep-chip-count {
        display: inline-block;
        padding: 0 7px;
        border-radius: 999px;
        background: var(--ep-stone-100);
        color: var(--ep-stone-600);
        font-size: 11px;
        font-weight: 700;
        line-height: 17px;
}

.ep-chip-filter.is-active .ep-chip-count {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
}

/* Grid + tarjeta de convocatoria */
.ep-news-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
}

@media (min-width: 640px) {
        .ep-news-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (min-width: 1024px) {
        .ep-news-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }
}

.ep-newscard {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 18px;
        background: #fff;
        border: 1px solid var(--ep-border);
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
        transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.ep-newscard:hover {
        border-color: var(--ep-emerald-200);
        box-shadow: 0 8px 22px rgba(5, 150, 105, 0.1);
        transform: translateY(-2px);
}

/* Imagen destacada de la tarjeta (opcional, 16:9 con zoom suave al hover) */
.ep-newscard-thumb {
        margin: 0;
        border-radius: 10px;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background: var(--ep-stone-100);
}

.ep-newscard-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 350ms ease;
}

.ep-newscard:hover .ep-newscard-thumb img {
        transform: scale(1.04);
}

.ep-newscard-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
}

.ep-newscard-type {
        background: var(--ep-amber-50);
        border: 1px solid var(--ep-amber-200);
        color: var(--ep-amber-700);
}

.ep-newscard-title {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1.35;
        color: var(--ep-stone-900);
}

.ep-newscard-title a {
        color: inherit;
        text-decoration: none;
}

.ep-newscard-title a:hover {
        color: var(--ep-emerald-700);
}

.ep-newscard-excerpt {
        margin: 0;
        font-size: 0.88rem;
        line-height: 1.55;
        color: var(--ep-stone-600);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.ep-newscard-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px dashed var(--ep-border-soft);
        font-size: 12px;
        color: var(--ep-stone-500);
}

.ep-newscard-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
}

.ep-newscard-meta-item .ep-icon--xs {
        width: 13px;
        height: 13px;
        flex: none;
        color: var(--ep-emerald-600);
}

.ep-newscard-more {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--ep-emerald-700);
}

.ep-newscard-more .ep-icon--xs {
        transition: transform 160ms ease;
}

.ep-newscard:hover .ep-newscard-more .ep-icon--xs {
        transform: translateX(3px);
}

/* ── Detalle de convocatoria ──────────────────────────────────────────── */
.ep-news-top-chips {
        margin-bottom: 12px;
}

.ep-news-date {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ep-stone-500);
}

.ep-news-title {
        font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);
        line-height: 1.25;
        margin: 0 0 10px;
}

.ep-news-lede {
        margin: 0 0 18px;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--ep-stone-600);
}

.ep-news-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 4px 0 16px;
        padding: 16px;
        border: 1px solid var(--ep-border);
        border-radius: 14px;
        background: var(--ep-stone-50);
}

@media (min-width: 640px) {
        .ep-news-facts {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }
}

.ep-news-fact .ep-meta-label {
        margin-bottom: 3px;
}

.ep-news-fact .ep-meta-value {
        font-size: 0.92rem;
        font-weight: 600;
}

.ep-news-fact-strong {
        color: var(--ep-emerald-700);
}

.ep-news-cta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        margin-bottom: 14px;
}

.ep-news-cta-note {
        margin: 0;
        font-size: 12.5px;
        color: var(--ep-stone-500);
}

.ep-news-share {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 14px;
        border-top: 1px solid var(--ep-border-soft);
}

/* Imagen destacada del artículo (opcional) */
.ep-news-figure {
        margin: 16px 0 4px;
        border-radius: 12px;
        overflow: hidden;
        background: var(--ep-stone-100);
        border: 1px solid var(--ep-border-soft);
}

.ep-news-figure img {
        display: block;
        width: 100%;
        height: auto;
}

.ep-news-figure figcaption {
        padding: 8px 12px;
        font-size: 12.5px;
        color: var(--ep-stone-500);
        text-align: center;
        border-top: 1px solid var(--ep-border-soft);
}

/* FAQ de la convocatoria (acordeón nativo <details>, contadores esmeralda) */
.ep-news-faq .ep-faq-heading {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 14px;
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--ep-stone-900);
}

.ep-faq-list {
        counter-reset: epfaq;
        display: grid;
        gap: 10px;
}

.ep-faq-item {
        counter-increment: epfaq;
        background: #ffffff;
        border: 1px solid var(--ep-border-soft);
        border-radius: 12px;
        overflow: hidden;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ep-faq-item[open] {
        border-color: #a7f3d0;
        box-shadow: 0 2px 12px rgba(16, 185, 129, 0.1);
}

.ep-faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 11px 14px;
        cursor: pointer;
        list-style: none;
        font-size: 0.93rem;
        font-weight: 700;
        color: var(--ep-stone-900);
        transition: color 0.12s ease, background 0.12s ease;
}

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

.ep-faq-item summary::marker {
        content: '';
}

.ep-faq-item summary:hover {
        color: #047857;
        background: rgba(236, 253, 245, 0.55);
}

.ep-faq-q {
        display: flex;
        align-items: baseline;
        gap: 9px;
        min-width: 0;
}

.ep-faq-q::before {
        content: counter(epfaq) '.';
        flex-shrink: 0;
        font-weight: 800;
        color: #10b981;
}

.ep-faq-chev {
        position: relative;
        width: 11px;
        height: 11px;
        flex-shrink: 0;
        color: var(--ep-stone-400);
        transition: color 0.15s ease;
}

.ep-faq-chev::before,
.ep-faq-chev::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 4.5px;
        width: 2px;
        height: 9px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.18s ease;
}

.ep-faq-chev::before {
        transform: rotate(45deg);
}

.ep-faq-chev::after {
        transform: rotate(-45deg);
}

.ep-faq-item[open] .ep-faq-chev {
        color: #10b981;
}

.ep-faq-item[open] .ep-faq-chev::before {
        transform: rotate(-45deg);
}

.ep-faq-item[open] .ep-faq-chev::after {
        transform: rotate(45deg);
}

.ep-faq-a {
        padding: 10px 16px 13px 37px;
        border-top: 1px dashed var(--ep-border-soft);
        font-size: 0.9rem;
        line-height: 1.66;
        color: var(--ep-stone-700);
}

.ep-faq-a a {
        color: #047857;
        text-decoration: underline;
}

/* Cuerpo del artículo (the_content) con tipografía cuidada */
.ep-news-body {
        font-size: 0.98rem;
        line-height: 1.72;
        color: var(--ep-stone-800);
}

.ep-news-body h2 {
        margin: 26px 0 10px;
        font-size: 1.22rem;
        font-weight: 800;
        color: var(--ep-stone-900);
        padding-left: 12px;
        border-left: 4px solid var(--ep-emerald-500);
}

.ep-news-body h3 {
        margin: 20px 0 8px;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--ep-emerald-800);
}

.ep-news-body p {
        margin: 0 0 14px;
}

.ep-news-body a {
        color: var(--ep-emerald-700);
        text-decoration: underline;
        text-underline-offset: 2px;
}

.ep-news-body ul,
.ep-news-body ol {
        margin: 0 0 16px;
        padding-left: 22px;
}

.ep-news-body li {
        margin-bottom: 6px;
}

.ep-news-body ul li::marker {
        color: var(--ep-emerald-600);
}

.ep-news-body ol li::marker {
        color: var(--ep-emerald-700);
        font-weight: 700;
}

.ep-news-body table {
        width: 100%;
        margin: 6px 0 18px;
        border-collapse: collapse;
        font-size: 0.88rem;
        border: 1px solid var(--ep-border);
        border-radius: 10px;
        overflow: hidden;
}

.ep-news-body th,
.ep-news-body td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--ep-border-soft);
        text-align: left;
        vertical-align: top;
}

.ep-news-body thead th {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-900);
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
}

.ep-news-body tbody tr:nth-child(even) {
        background: var(--ep-stone-50);
}

/* Citas de la web (excluye embeds de TikTok/Instagram/X que usan <blockquote>) */
.ep-news-body blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet) {
        margin: 0 0 16px;
        padding: 12px 16px;
        border-left: 4px solid var(--ep-amber-400);
        background: var(--ep-amber-50);
        border-radius: 0 10px 10px 0;
        color: var(--ep-amber-700);
}

.ep-news-body blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet) p {
        margin: 0 0 6px;
}

.ep-news-body blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet) p:last-child {
        margin-bottom: 0;
}

.ep-news-body img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
}

/* Resto de encabezados del contenido */
.ep-news-body h4,
.ep-news-body h5,
.ep-news-body h6 {
        margin: 18px 0 8px;
        font-size: 0.98rem;
        font-weight: 700;
        color: var(--ep-emerald-800);
}

/* Separador, código y resaltado */
.ep-news-body hr {
        margin: 22px 0;
        border: 0;
        border-top: 1px dashed var(--ep-stone-300);
}

.ep-news-body code {
        background: var(--ep-stone-100);
        border: 1px solid var(--ep-border-soft);
        border-radius: 6px;
        padding: 1px 6px;
        font-size: 0.85em;
        color: var(--ep-emerald-800);
}

.ep-news-body pre {
        background: var(--ep-stone-900);
        color: var(--ep-stone-100);
        border-radius: 12px;
        padding: 14px 16px;
        overflow-x: auto;
        margin: 0 0 16px;
        font-size: 0.85rem;
}

.ep-news-body pre code {
        background: transparent;
        border: 0;
        padding: 0;
        color: inherit;
}

.ep-news-body mark {
        background: var(--ep-amber-100);
        color: var(--ep-amber-900);
        padding: 0 3px;
        border-radius: 4px;
}

/* Imágenes con pie (WordPress las envuelve en figure) */
.ep-news-body figure {
        margin: 0 0 16px;
}

.ep-news-body figcaption {
        margin-top: 6px;
        font-size: 12.5px;
        color: var(--ep-stone-500);
        text-align: center;
}

.ep-news-body figure.wp-block-table {
        margin: 6px 0 18px;
}

.ep-news-body figure.wp-block-table table {
        margin: 0;
}

/* Videos incrustados (TikTok, YouTube, Vimeo…): siempre responsive */
.ep-news-body iframe,
.ep-news-body video {
        max-width: 100%;
        border: 0;
        border-radius: 12px;
}

.ep-news-body iframe[src*="youtube"],
.ep-news-body iframe[src*="youtu.be"],
.ep-news-body iframe[src*="vimeo"],
.ep-news-body .ep-video-embed {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
}

/* Embeds sociales: sin el estilo de cita ámbar ni anchos mínimos forzados */
.ep-news-body blockquote.tiktok-embed,
.ep-news-body blockquote.instagram-media,
.ep-news-body blockquote.twitter-tweet {
        margin: 0 auto 16px;
        background: transparent;
        border: 0;
        padding: 0;
        color: inherit;
        border-radius: 0;
        min-width: 0 !important;
        max-width: 100%;
}

/* En móvil SOLO la tabla se desplaza: los títulos y el resto quedan fijos */
@media (max-width: 640px) {
        .ep-news-body table,
        .ep-news-body figure.wp-block-table {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
        }

        .ep-news-facts {
                grid-template-columns: 1fr 1fr;
        }
}

/* Buscador del apartado de convocatorias */
.ep-conv-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 14px 0 4px;
        padding: 4px 4px 4px 14px;
        background: #fff;
        border: 1px solid var(--ep-border);
        border-radius: 999px;
        transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ep-conv-search:focus-within {
        border-color: var(--ep-emerald-400);
        box-shadow: 0 0 0 3px var(--ep-emerald-100);
}

.ep-conv-search-icon {
        display: inline-flex;
        color: var(--ep-stone-400);
        flex-shrink: 0;
}

.ep-conv-search input[type="search"] {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        font: inherit;
        font-size: 0.92rem;
        color: var(--ep-stone-800);
        padding: 8px 0;
        outline: none;
        -webkit-appearance: none;
}

.ep-conv-search input[type="search"]::placeholder {
        color: var(--ep-stone-400);
}

.ep-conv-search-btn {
        flex-shrink: 0;
        white-space: nowrap;
}

/* CTA cruzado: de convocatoria → ofertas activas */
.ep-cross-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px 18px;
        margin: 18px 0;
        padding: 16px 18px;
        background: var(--ep-amber-50);
        border: 1px solid var(--ep-amber-200);
        border-radius: 16px;
}

.ep-cross-main h2 {
        margin: 0 0 3px;
        font-size: 1.02rem;
        font-weight: 800;
        color: var(--ep-stone-900);
}

.ep-cross-main p {
        margin: 0;
        font-size: 0.86rem;
        color: var(--ep-stone-600);
        max-width: 52ch;
}

@media (max-width: 640px) {
        .ep-cross-cta {
                flex-direction: column;
                align-items: stretch;
        }

        .ep-conv-search {
                padding-left: 12px;
        }

        .ep-conv-search-btn {
                padding: 8px 14px;
        }
}

/* ── Índice de contenidos (TOC) del detalle de convocatoria ────────────── */
.ep-news-toc {
        margin: 0 0 20px;
        padding: 16px 18px;
        background: linear-gradient(180deg, var(--ep-emerald-50), #fff);
        border: 1px solid var(--ep-emerald-200);
        border-radius: 14px;
}

.ep-news-toc-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ep-emerald-800);
}

.ep-news-toc-list {
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
        counter-reset: eptoc;
}

.ep-news-toc-list li {
        counter-increment: eptoc;
        margin: 0;
}

.ep-news-toc-list a {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 7px 10px;
        border-radius: 9px;
        color: var(--ep-stone-800);
        font-size: 0.92rem;
        font-weight: 600;
        text-decoration: none;
        transition: background 150ms ease, color 150ms ease;
}

.ep-news-toc-list a::before {
        content: counter(eptoc) ".";
        min-width: 20px;
        color: var(--ep-emerald-600);
        font-weight: 800;
}

.ep-news-toc-list a:hover,
.ep-news-toc-list a:focus-visible {
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-800);
}

/* El heading anclado no queda tapado por el header fijo */
.ep-news-body h2[id] {
        scroll-margin-top: calc(var(--ep-header-h, 64px) + 26px);
}

/* ── Chip «N preguntas» (FAQ) en la tarjeta de convocatoria ────────────── */
.ep-faq-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 9px;
        border: 1px solid var(--ep-emerald-200);
        border-radius: 999px;
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-700);
        font-size: 0.7rem;
        font-weight: 700;
        white-space: nowrap;
}

/* ── Filtro por cobertura en el archivo de convocatorias ───────────────── */
.ep-conv-cov {
        display: inline-flex;
        align-items: center;
        color: var(--ep-stone-400);
        flex-shrink: 0;
}

.ep-conv-search select#ep-conv-cov {
        flex-shrink: 0;
        max-width: 200px;
        padding: 8px 26px 8px 10px;
        border: 1px solid var(--ep-border);
        border-radius: 999px;
        background-color: var(--ep-stone-50, #fafaf9);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 9px center;
        font: inherit;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ep-stone-700);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 160ms ease, background-color 160ms ease;
}

.ep-conv-search select#ep-conv-cov:hover,
.ep-conv-search select#ep-conv-cov:focus-visible {
        border-color: var(--ep-emerald-400);
        outline: none;
}

/* Filtro activo: chip «Cobertura: X · ✕ Quitar» */
.ep-conv-active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 0 2px;
}

@media (max-width: 640px) {
        .ep-conv-search {
                flex-wrap: wrap;
                border-radius: 18px;
                padding: 10px 12px;
        }

        .ep-conv-search input[type="search"] {
                flex-basis: 100%;
                order: 2;
                padding: 6px 0;
        }

        .ep-conv-search-icon {
                order: 1;
        }

        .ep-conv-search select#ep-conv-cov {
                order: 3;
                flex: 1 1 100%;
                max-width: none;
        }

        .ep-conv-cov {
                order: 4;
        }

        .ep-conv-search-btn {
                order: 5;
        }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 45. BOLETÍN DE CONVOCATORIAS (suscripción en /convocatorias/)
 * ──────────────────────────────────────────────────────────────────────── */

/* Aviso del fallback sin JavaScript (?boletin=ok|ya|error) */
.ep-bol-notice {
        margin: 0 0 14px;
        padding: 11px 14px;
        border: 1px solid var(--ep-emerald-200);
        border-radius: 12px;
        background: var(--ep-emerald-50);
        color: var(--ep-emerald-800);
        font-size: 0.9rem;
        font-weight: 600;
}

.ep-bol-notice--err {
        border-color: var(--ep-amber-200);
        background: var(--ep-amber-50);
        color: var(--ep-amber-700);
}

/* Tarjeta de suscripción */
.ep-bol-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-top: 26px;
        padding: 20px;
        border: 1px solid var(--ep-emerald-200);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.ep-bol-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--ep-emerald-50);
        border: 1px solid var(--ep-emerald-200);
        color: var(--ep-emerald-700);
}

.ep-bol-icon .ep-icon {
        width: 22px;
        height: 22px;
}

.ep-bol-main {
        flex: 1;
        min-width: 0;
}

.ep-bol-title {
        margin: 0 0 4px;
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--ep-stone-900);
}

.ep-bol-desc {
        margin: 0 0 14px;
        font-size: 0.88rem;
        line-height: 1.55;
        color: var(--ep-stone-600);
}

.ep-bol-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
}

.ep-bol-input {
        flex: 1 1 220px;
        min-width: 0;
        min-height: 46px; /* target táctil */
        padding: 10px 14px;
        border: 1px solid var(--ep-stone-300);
        border-radius: 12px;
        background: #fff;
        color: var(--ep-stone-900);
        font-size: 0.92rem;
        transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ep-bol-input:focus {
        outline: none;
        border-color: var(--ep-emerald-500);
        box-shadow: 0 0 0 3px var(--ep-emerald-100);
}

.ep-bol-btn {
        min-height: 46px; /* target táctil */
        padding: 10px 20px;
        border-radius: 12px;
        font-size: 0.92rem;
        white-space: nowrap;
}

.ep-bol-btn:disabled {
        opacity: 0.7;
}

/* Línea de estado (éxito verde / error ámbar, coherente con la paleta) */
.ep-bol-status {
        margin: 10px 0 0;
        padding: 10px 12px;
        border-radius: 10px;
        background: var(--ep-emerald-50);
        border: 1px solid var(--ep-emerald-200);
        color: var(--ep-emerald-800);
        font-size: 0.86rem;
        font-weight: 600;
}

.ep-bol-status--err {
        background: var(--ep-amber-50);
        border-color: var(--ep-amber-200);
        color: var(--ep-amber-700);
}

@media (max-width: 640px) {
        .ep-bol-card {
                flex-direction: column;
                gap: 12px;
        }

        .ep-bol-row {
                flex-direction: column;
        }

        .ep-bol-row .ep-bol-input,
        .ep-bol-row .ep-bol-btn {
                flex: none;
                width: 100%;
        }
}

/* ══════════════════════════════════════════════════════════════════════
   19. Resumen de la oferta + descripción formateada
   (core 1.2.0 / tema 1.1.4 — resumen editorial y listas de viñetas)
   ══════════════════════════════════════════════════════════════════════ */
.ep-resume {
        border-left: 4px solid var(--ep-primary);
}

.ep-resume-text {
        margin: 0 0 12px;
        line-height: 1.75;
        color: var(--ep-text);
}

.ep-resume-note {
        margin: 0;
        padding-top: 10px;
        border-top: 1px dashed var(--ep-border-soft);
        font-size: 13px;
        color: var(--ep-muted);
}

/* Tema 1.2.0 — «¿Para quién puede ser adecuada?» (mismo patrón del resumen). */
.ep-fit-audience {
        border-left: 4px solid var(--ep-primary);
}

/* Tema 1.2.0 — Análisis EmpleoPerú: semáforo por dimensión. */
.ep-analysis {
        margin: 14px 0 18px;
        padding: 12px 14px;
        list-style: none;
        background: var(--ep-soft, rgba(5, 150, 105, .06));
        border: 1px solid var(--ep-border-soft);
        border-radius: 12px;
        display: grid;
        gap: 8px;
}

.ep-analysis-item {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 14px;
        line-height: 1.55;
}

.ep-analysis-dot {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--ep-muted, #a8a29e);
        align-self: center;
}

.ep-analysis--ok .ep-analysis-dot {
        background: var(--ep-primary);
        box-shadow: 0 0 0 3px rgba(5, 150, 105, .15);
}

.ep-analysis--mid .ep-analysis-dot {
        background: #d97706;
        box-shadow: 0 0 0 3px rgba(217, 119, 6, .15);
}

.ep-analysis--low .ep-analysis-dot {
        background: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

.ep-analysis--na .ep-analysis-dot {
        background: var(--ep-muted, #a8a29e);
}

.ep-analysis-label {
        font-weight: 600;
        color: var(--ep-text);
        white-space: nowrap;
}

.ep-analysis-text {
        color: var(--ep-muted);
}

/* Tema 1.2.0 — nota al pie del detalle estructurado. */
.ep-detail-note {
        margin: 16px 0 0;
        padding-top: 10px;
        border-top: 1px dashed var(--ep-border-soft);
        font-size: 12.5px;
        line-height: 1.6;
        color: var(--ep-muted);
}

/* Tema 1.2.0 — nivel «No especificado»: gris neutro, sin inventar color. */
.ep-exp--other {
        background: #f5f5f4;
        color: #57534e;
        border: 1px solid #e7e5e4;
}

/* Descripción: párrafos y listas que genera empleoperu_job_text_html(). */
.ep-desc p {
        margin: 0 0 14px;
        line-height: 1.75;
}

.ep-desc p:last-child {
        margin-bottom: 0;
}

.ep-desc-list {
        margin: 0 0 16px;
        padding: 0;
        list-style: none;
}

.ep-desc-list li {
        position: relative;
        padding: 5px 0 5px 22px;
        line-height: 1.65;
}

/* Viñeta redonda solo para ítems sin emoji propio (los emoji conservan
 * su marcador original: ✅ ❌ 🕐 …). */
.ep-desc-list li.ep-li-plain::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 14px;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--ep-primary);
}

/* Encabezados de sección recuperados del texto plano (core 1.2.2):
 * REQUISITOS:, FUNCIONES GENERALES:, Ofrecemos… */
.ep-desc-h {
        margin: 22px 0 10px;
        padding: 7px 12px;
        font-size: 13.5px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #047857;
        background: rgba(16, 185, 129, 0.08);
        border-left: 3px solid var(--ep-primary);
        border-radius: 6px;
}

.ep-desc-h:first-child {
        margin-top: 0;
}

.ep-desc > .ep-desc-h + p,
.ep-desc > .ep-desc-h + ul {
        margin-top: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 35. CTA DE CONTACTO TELEFÓNICO (robot 1.1.0 — ofertas sin postulación web)
 * ──────────────────────────────────────────────────────────────────────── */
.ep-phones-note {
        font-size: 0.8rem;
        color: var(--ep-muted);
        line-height: 1.5;
        margin-top: 2px;
}

.ep-source-mini {
        font-size: 0.8rem;
        color: var(--ep-muted);
        margin-top: 2px;
}

.ep-source-mini a {
        color: var(--ep-primary);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: text-decoration-color 160ms ease;
}

.ep-source-mini a:hover {
        text-decoration-color: currentColor;
}

/* T37 (perf+layout): directorio /empresas/ con 2200+ tarjetas.
 * 1) Columnas SIEMPRE iguales: nombres/sectores con white-space:nowrap tienen
 *    min-content grande y expanden pistas 1fr (=minmax(auto,1fr)) de forma
 *    desigual -> scroll horizontal (~2351px) y tarjetas fuera de viewport.
 * 2) Pintado diferido por grupo de letra: la pagina mide ~72k px de alto y el
 *    navegador no compone todos los tiles (rectangulos negros en scroll rapido).
 *    content-visibility:auto renderiza solo los grupos cercanos al viewport.
 *    No afecta al buscador en vivo (el DOM y data-search-text siguen intactos). */
.ep-coh-grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.ep-coh-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.ep-coh-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ep-coh-card {
	min-width: 0;
}

.ep-letter-group {
	content-visibility: auto;
	contain-intrinsic-size: auto 640px;
}