/* ===== style2.css ===== */
/* =========================
   VARIABLES + THEMES
========================= */
:root {
  --primary-dark: #071b9d;
  --primary-light: #4dc8f4;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-xs: 0 4px 14px rgba(3, 8, 23, 0.08);
  --shadow-sm: 0 10px 24px rgba(3, 8, 23, 0.12);
  --shadow: 0 18px 40px rgba(3, 8, 23, 0.18);
  --shadow-lg: 0 28px 60px rgba(3, 8, 23, 0.22);

  --transition-fast: 0.2s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;

  --container: min(1200px, 92%);
}

/* Tema oscuro por defecto si falta data-theme */
html {
  color-scheme: dark;
}

html:not([data-theme]),
html[data-theme="dark"] {
  --bg: #030817;
  --bg-main: #030817;
  --bg-soft: #07122f;
  --bg-elevated: #0d1d45;
  --bg-card: rgba(10, 25, 80, 0.54);
  --bg-card-strong: rgba(16, 34, 89, 0.88);

  --card: var(--bg-card);

  --text: #f8fbff;
  --text-strong: #ffffff;
  --muted: #b7c8ef;
  --muted-2: #8fa8d8;

  --border: rgba(77, 200, 244, 0.18);
  --border-strong: rgba(77, 200, 244, 0.3);

  --hero-overlay-1: rgba(7, 27, 157, 0.92);
  --hero-overlay-2: rgba(77, 200, 244, 0.38);
  --hero-glow: rgba(255, 255, 255, 0.1);

  --input-bg: rgba(255, 255, 255, 0.08);
  --input-text: #ffffff;
  --input-placeholder: rgba(255, 255, 255, 0.7);

  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-text: #e8f3ff;

  --footer-logo-filter: brightness(0) invert(1);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f8ff;
  --bg-main: #f5f8ff;
  --bg-soft: #eaf1ff;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-strong: rgba(255, 255, 255, 0.98);

  --card: var(--bg-card);

  --text: #0c1836;
  --text-strong: #071b9d;
  --muted: #51627f;
  --muted-2: #6b7a96;

  --border: rgba(7, 27, 157, 0.11);
  --border-strong: rgba(7, 27, 157, 0.18);

  --hero-overlay-1: rgba(7, 27, 157, 0.9);
  --hero-overlay-2: rgba(77, 200, 244, 0.32);
  --hero-glow: rgba(255, 255, 255, 0.16);

  --input-bg: #ffffff;
  --input-text: #102143;
  --input-placeholder: #6d7f9d;

  --chip-bg: rgba(7, 27, 157, 0.06);
  --chip-text: #12306b;

  --footer-logo-filter: none;
}

/* =========================
   RESET / BASE
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at top, rgba(77, 200, 244, 0.08), transparent 30%),
    linear-gradient(180deg, var(--bg-main), var(--bg));
  color: var(--text);
  line-height: 1.65;
  transition:
    background var(--transition),
    color var(--transition);
}

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

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

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

/* El desplegable nativo hereda el fondo del <select>: como es translúcido,
   el navegador dibuja el panel casi blanco y el texto claro queda invisible.
   Se fuerza un fondo opaco del tema para las opciones. */
select option,
select optgroup {
  background-color: var(--bg-elevated);
  color: var(--text);
}

button {
  cursor: pointer;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   SKIP LINK
========================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}

.skip-link:focus,
.skip-link:active {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--text-strong);
  color: var(--bg-main);
  box-shadow: var(--shadow-sm);
  outline: 3px solid rgba(77, 200, 244, 0.3);
}

/* =========================
   HERO
========================= */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  color: #ffffff;
  background:
    linear-gradient(135deg, var(--hero-overlay-1), var(--hero-overlay-2)),
    linear-gradient(160deg, #04115e 0%, #0c1f77 45%, #4dc8f4 100%);
}

/* =========================
   HERO BASE CON IMAGEN POR PAGINA
========================= */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.95;
  filter: saturate(110%) contrast(105%);
}

/* fallback por si alguna página no tiene clase específica */
.page-hero .hero-bg {
  background-image:
    linear-gradient(
      135deg,
      rgba(7, 27, 157, 0.95) 0%,
      rgba(7, 27, 157, 0.72) 45%,
      rgba(77, 200, 244, 0.58) 100%
    ),
    url("index.jpg");
}

/* =========================
   25 VARIANTES
========================= */

.hero-alcance-vigencia .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("alcance.jpg");
}

.hero-ambiente-laboral .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("ambiente.jpg");
}

.hero-carrera .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("carrera.jpg");
}

.hero-concursos-jefaturas .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("jefatura.jpg");
}

.hero-cuerpos-paritarios .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("paritarios.jpg");
}

.hero-derechos-sindicales .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("sindicales2.jpg");
}

.hero-discapacidad .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("discapacidad.jpg");
}

.hero-fondo-evaluacion .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("recibo.jpg");
}

.hero-genero .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.92) 0%, rgba(88,70,180,0.70) 45%, rgba(77,200,244,0.52) 100%),
    url("genero.jpg");
}

.hero-impuesto-ganancias .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("ganancias.jpg");
}

.hero-indemnizaciones-beneficios .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("beneficios.jpg");
}

.hero-ingreso-relacion-laboral .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("ingreso.jpg");
}

.hero-jornada-laboral .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("jornadalaboral.jpg");
}

.hero-licencias .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("licencias.jpg");
}

.hero-maternidad-paternidad .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.92) 0%, rgba(7,27,157,0.68) 45%, rgba(77,200,244,0.50) 100%),
    url("maternidad.jpg");
}

.hero-obligaciones .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("obligaciones.jpg");
}

.hero-pases-traslados .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("traslados.jpg");
}

.hero-previsional .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("jubilacion.jpg");
}

.hero-invalidez .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("discapacidad.jpg");
}

.hero-principales-derechos .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("derechosprincipales.jpg");
}

.hero-prohibiciones .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("prohibiciones.jpg");
}

.hero-regimen-disciplina .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("disciplina.jpg");
}

.hero-salario .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("salario.jpg");
}

.hero-viaticos-movilidad .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("viaticosmovilidad.jpg");
}

.hero-deberes .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("obligaciones.jpg");
}

.hero-contacto .hero-bg {
  background-image:
    linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
    url("oficina.jpg");
}

/* opcional para oscurecer un poco más en móvil */
@media (max-width: 768px) {
  .hero-bg {
    opacity: 0.98;
  }
}

/* contenido por encima del fondo */
.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.page-hero h1 {
  margin: 18px 0 12px;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.hero-text {
  max-width: 760px;
  margin: 0;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.92);
}

.hero-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  max-width: 900px;
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.hero-highlight i {
  margin-top: 2px;
  font-size: 1.2rem;
}

.hero-highlight p {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
}

.back-link {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 27, 157, 0.88);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.back-link:hover {
  transform: translateY(-2px);
  background: rgba(7, 27, 157, 0.96);
  border-color: rgba(255, 255, 255, 0.22);
}

.back-link:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

/* =========================
   SEARCH HERO
========================= */
.search-box {
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  max-width: 720px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.search-box > i {
  padding-left: 8px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
}

.search-box input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.94);
  color: #12203f;
  outline: none;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.search-box input::placeholder {
  color: #6c7d9a;
}

.search-box input:focus {
  border-color: rgba(7, 27, 157, 0.3);
  box-shadow: 0 0 0 4px rgba(77, 200, 244, 0.2);
}

.search-box button {
  min-height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: #ffffff;
  color: #12203f;
  font-weight: 700;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.search-box button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}

/* =========================
   MAIN SECTIONS
========================= */
.content-section {
  padding: 68px 0;
}

.section-heading {
  margin-bottom: 34px;
}

.section-heading h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.section-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.section-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--primary-light);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.84rem;
}

/* =========================
   FILTERS
========================= */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.filter-btn {
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.filter-btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.filter-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: var(--shadow-xs);
}

/* =========================
   INDEX CARDS
========================= */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--bg-card-strong);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
  cursor: pointer;
}

.topic-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}

.topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(7, 27, 157, 0.18), rgba(77, 200, 244, 0.22));
  color: var(--primary-light);
  font-size: 1.3rem;
}

.topic-card h3 {
  margin: 0 0 10px;
  line-height: 1.2;
  font-size: 1.15rem;
  color: var(--text-strong);
}

.topic-card p {
  margin: 0;
  color: var(--muted);
}

.topic-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--primary-light);
  font-weight: 800;
}

/* =========================
   INTERIOR LAYOUT
========================= */
.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
  gap: 28px;
  align-items: start;
}

.main-content,
.sidebar {
  min-width: 0;
}

.content-card,
.side-card {
  margin-bottom: 22px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--bg-card-strong);
  box-shadow: var(--shadow-xs);
}

.content-card > *:first-child,
.side-card > *:first-child {
  margin-top: 0;
}

.content-card > *:last-child,
.side-card > *:last-child {
  margin-bottom: 0;
}

.content-card h2,
.side-card h3 {
  margin: 0 0 16px;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--text-strong);
}

.content-card h2 {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
}

.side-card h3 {
  font-size: 1.15rem;
}

.content-card p,
.side-card p {
  margin: 0 0 14px;
  color: var(--muted);
}

.intro-copy,
.section-intro {
  margin-top: 16px;
  font-size: 1rem;
  color: var(--muted);
}

.mini-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(77, 200, 244, 0.12);
  border: 1px solid var(--border);
  color: var(--primary-light);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================
   ACTION BUTTONS
========================= */
.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.action-btn,
.cta-button,
.side-cta,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.action-btn,
.primary-btn,
.cta-button,
.side-cta {
  color: #ffffff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: var(--shadow-xs);
}

.action-btn:hover,
.primary-btn:hover,
.cta-button:hover,
.side-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.action-btn.ghost {
  color: var(--text-strong);
  border-color: var(--border);
  background: var(--bg-soft);
  box-shadow: none;
}

.action-btn.ghost:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}

/* =========================
   FEATURE / BENEFIT CARDS
========================= */
.feature-grid,
.benefits-grid,
/* =========================
   FEATURE / BENEFIT CARDS
========================= */
.salary-grid,
/* =========================
   FEATURE / BENEFIT CARDS
========================= */
.license-grid,
/* =========================
   FEATURE / BENEFIT CARDS
========================= */
.schedule-grid,
/* =========================
   FEATURE / BENEFIT CARDS
========================= */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.feature-card,
.benefit-card,
.salary-card,
.license-card,
.schedule-card,
.area-card {
  position: relative;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--bg-soft);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.feature-card:hover,
.benefit-card:hover,
.salary-card:hover,
.license-card:hover,
.schedule-card:hover,
.area-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

/* Feature / benefit cards que funcionan como enlace */
.feature-card-link,
.benefit-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.feature-card-link:hover,
.benefit-card-link:hover {
  border-color: var(--primary-light);
}

.feature-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--primary-light);
}

.feature-card-link:hover .feature-more,
.benefit-card-link:hover .feature-more {
  gap: 12px;
}

.feature-more i {
  transition: transform var(--transition-fast);
}

.feature-card-link:hover .feature-more i,
.benefit-card-link:hover .feature-more i {
  transform: translateX(3px);
}

/* =========================
   LICENCIAS: meta del acordeón (artículo CCT + SIPES)
========================= */
.licencia-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.sipes-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
}

.sipes-badge.si {
  background: rgba(224, 85, 85, 0.12);
  border-color: rgba(224, 85, 85, 0.38);
  color: #e05555;
}

.sipes-badge.no {
  background: rgba(45, 190, 120, 0.12);
  border-color: rgba(45, 190, 120, 0.38);
  color: #2dbe78;
}

.licencia-meta .action-btn {
  margin: 0;
}

.lic-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.2;
}

.lic-badge strong {
  color: var(--text-strong);
  font-weight: 800;
}

/* =========================
   RECORRIDOS DE CARRERA (cuadro moderno)
========================= */
.career-tracks {
  display: grid;
  gap: 16px;
}

.career-track {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--bg-soft);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.career-track:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

.career-track-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.career-track-header .career-track-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
}

.career-track-header h3 {
  margin: 0;
  font-size: 1.02rem;
  color: var(--text-strong);
}

.career-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}

.career-row:first-of-type {
  border-top: 0;
  margin-top: 8px;
}

.career-chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-strong);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
}

.career-chip.dest {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #fff;
}

.career-arrow {
  color: var(--primary-light);
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.career-cond {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.88rem;
}

.career-cond i {
  color: var(--primary-light);
  margin-top: 2px;
}

.feature-number,
.benefit-number,
.salary-number,
.license-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
}

.feature-icon,
.benefit-icon,
.salary-icon,
.license-icon,
.schedule-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(77, 200, 244, 0.12);
  color: var(--primary-light);
  font-size: 1.2rem;
}

.feature-card h3,
.benefit-card h3,
.salary-card h3,
.license-card h3,
.schedule-card h3,
.area-card h3 {
  margin: 0 0 10px;
  line-height: 1.25;
  color: var(--text-strong);
  font-size: 1.06rem;
}

.feature-card p,
.benefit-card p,
.salary-card p,
.license-card p,
.schedule-card p,
.area-card p {
  margin: 0;
  color: var(--muted);
}

/* =========================
   NUMBERED BLOCKS / LAW BLOCKS
========================= */
.numbered-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.numbered-card:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.number-badge,
.info-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #ffffff;
  font-weight: 800;
  box-shadow: var(--shadow-xs);
}

.numbered-card h3 {
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: 1.05rem;
}

.numbered-card p {
  margin: 0;
}

.law-block {
  margin-top: 18px;
  padding: 18px 18px 18px 20px;
  border-left: 4px solid var(--primary-light);
  border-radius: 0 18px 18px 0;
  background: rgba(77, 200, 244, 0.08);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.law-number {
  margin-bottom: 8px;
  color: var(--text-strong);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* =========================
   TAGS / ITEMS / SPECIALS
========================= */
.items-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.item-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--chip-text);
  font-weight: 700;
  font-size: 0.93rem;
}

.specials-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.special-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.special-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(77, 200, 244, 0.12);
  color: var(--primary-light);
}

.special-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-strong);
}

.custom-list,
.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-list li,
.summary-list li {
  position: relative;
  padding-left: 0;
  margin-bottom: 10px;
  color: var(--muted);
}

.custom-list li:last-child,
.summary-list li:last-child {
  margin-bottom: 0;
}

.custom-list li::before {
  content: "•";
  margin-right: 10px;
  color: var(--primary-light);
  font-weight: 900;
}

.summary-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.summary-list li i {
  margin-top: 4px;
  color: var(--primary-light);
}

/* =========================
   RELATED LINKS / SIDEBAR
========================= */
.related-list {
  display: grid;
  gap: 12px;
}

.related-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.related-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}

.related-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(77, 200, 244, 0.12);
  color: var(--primary-light);
}

.related-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-strong);
}

.related-item span {
  display: block;
  color: var(--muted);
  line-height: 1.5;
}

.sidebar {
  position: sticky;
  top: 28px;
}

.side-cta {
  width: 100%;
}

/* =========================
   FORMS
========================= */
.contact-form {
  margin-top: 10px;
}

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

.field {
  margin-bottom: 16px;
}

.field label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--text-strong);
  font-weight: 700;
}

.field input,
.field select,
.field textarea,
.footer-search-box input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--input-text);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.field input,
.field select {
  min-height: 50px;
  padding: 12px 14px;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
  padding: 14px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--input-placeholder);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.footer-search-box input:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px rgba(77, 200, 244, 0.15);
}

.primary-btn {
  border: none;
}

/* =========================
   FOOTER
========================= */
.site-footer {
  padding: 46px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  transition:
    background var(--transition),
    border-color var(--transition);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.footer-brand h3,
.footer-search h4,
.footer-cta h4 {
  margin: 0 0 12px;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}

.footer-brand p {
  margin: 0;
  max-width: 540px;
  color: var(--muted);
}

.footer-logo {
  max-width: 400px;
  margin-bottom: 14px;
  filter: var(--footer-logo-filter);
}

.footer-search-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.footer-search-box input {
  min-height: 54px;
  padding: 14px 16px;
}

.footer-search-box button {
  min-width: 54px;
  min-height: 54px;
  border: none;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.footer-search-box button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.cta-button {
  width: 100%;
}

/* =========================
   THEME TOGGLE
========================= */
.theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: var(--shadow);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.theme-toggle:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* =========================
   HELPERS
========================= */
.no-results {
  display: none;
  margin-top: 24px;
  text-align: center;
  color: var(--muted);
}

.compact {
  margin-top: 10px;
}

/* =========================
   ANIMATIONS
========================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.08s;
}

.reveal-delay-2 {
  transition-delay: 0.16s;
}

.reveal-delay-3 {
  transition-delay: 0.24s;
}

.reveal-card {
  opacity: 1;
  transform: none;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1050px) {
  .layout-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    top: auto;
  }
}

@media (max-width: 820px) {
  .page-hero {
    padding: 76px 0 60px;
  }

  .search-box {
    grid-template-columns: 1fr;
  }

  .search-box > i {
    display: none;
  }

  .hero-highlight,
  .numbered-card,
  .special-item,
  .related-item {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .content-section {
    padding: 54px 0;
  }

  .content-card,
  .side-card,
  .topic-card {
    padding: 20px;
    border-radius: 20px;
  }

  .page-hero h1 {
    font-size: 2.25rem;
  }

  .hero-text {
    font-size: 1rem;
  }

  .article-actions {
    flex-direction: column;
  }

  .action-btn,
  .action-btn.ghost,
  .primary-btn,
  .cta-button,
  .side-cta {
    width: 100%;
  }

  .theme-toggle {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }

  .footer-search-box {
    grid-template-columns: 1fr auto;
  }
}

/* =========================
   TABS / PRINCIPALES DERECHOS
========================= */
.tabs-card {
  overflow: hidden;
}

.tabs-header {
  margin-bottom: 22px;
}

.tabs-header h2 {
  margin: 0 0 8px;
}

.tabs-header p {
  margin: 0;
  color: var(--muted);
}

.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.tab-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

a.tab-btn {
  text-decoration: none;
}

.tab-btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}

.tab-btn.active,
.tab-btn[aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: var(--shadow-xs);
}

.tabs-panels {
  margin-top: 8px;
}

.tab-panel {
  display: none;
  animation: tabFade 0.25s ease;
}

.tab-panel.active {
  display: block;
}

.tab-panel h3 {
  margin-top: 0;
  margin-bottom: 14px;
  color: var(--text-strong);
  font-size: 1.15rem;
}

.tab-panel p {
  margin: 0 0 14px;
  color: var(--muted);
}

.tab-panel p:last-child {
  margin-bottom: 0;
}

@keyframes tabFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .tabs-nav {
    flex-direction: column;
  }

  .tab-btn {
    width: 100%;
    text-align: left;
  }
}
.retribuciones-compact {
  font-size: 0.88rem;
}

.retribuciones-compact h2 {
  font-size: 1.4rem;
}

.retribuciones-compact h3 {
  font-size: 1.05rem;
}

.retribuciones-compact p {
  font-size: 0.9rem;
  line-height: 1.5;
}

.retribuciones-compact .action-btn {
  font-size: 0.85rem;
  padding: 10px 14px;
}

.retribuciones-compact .side-card,
.retribuciones-compact .content-card {
  padding: 18px;
}




/* ===== retribuciones-extra.css ===== */
.hero-retribuciones .hero-bg { background-image: linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%), url("recibo.jpg"); }
    .retrib-layout { display:grid; grid-template-columns: 230px minmax(0,1fr); gap:24px; align-items:start; }
    .retrib-tabs { position:sticky; top:92px; display:grid; gap:6px; }
    .retrib-tab { width:100%; min-height:54px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--bg-soft); color:var(--text); font-weight:800; text-align:left; line-height:1.2; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
    .retrib-tab:hover { transform:translateY(-1px); border-color:var(--border-strong); }
    .retrib-tab.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--primary-dark),var(--primary-light)); box-shadow:var(--shadow-xs); }
    .retrib-content { min-width:0; }
    .retrib-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:22px; }
    .retrib-period { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(77,200,244,.12); border:1px solid var(--border); color:var(--primary-light); font-weight:800; white-space:nowrap; }
    .retrib-panel { display:none; }
    .retrib-panel.active { display:block; animation:fadeTab .25s ease; }
    @keyframes fadeTab { from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:none} }
    .retrib-panel h2 { margin:0 0 18px; color:var(--text-strong); text-align:center; }
    .retrib-panel h3 { margin:24px 0 12px; color:var(--text-strong); }
    .retrib-panel p { color:var(--muted); }
    .table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:18px; background:var(--bg-elevated); }
    .values-table { width:100%; border-collapse:collapse; min-width:560px; }
    .values-table th,.values-table td { padding:12px 14px; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; }
    .values-table th:first-child,.values-table td:first-child { text-align:left; }
    .values-table th { color:var(--text-strong); background:var(--bg-soft); text-transform:uppercase; font-size:.82rem; letter-spacing:.03em; }
    .values-table tr:last-child td { border-bottom:0; }
    .big-amount { margin:28px auto; text-align:center; font-size:clamp(2rem,5vw,3.4rem); line-height:1; font-weight:800; color:var(--muted); letter-spacing:-.04em; }
    .amount-list { display:grid; gap:14px; max-width:680px; margin:20px auto 0; }
    .amount-list h3 { color:var(--primary-light); margin:12px 0 4px; }
    .amount-list div { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
    .amount-list span,.title-list span,.residence-list strong { color:var(--muted); font-size:1.15rem; font-weight:800; }
    .title-list { display:grid; gap:16px; }
    .title-list div { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--border); }
    .title-list p { margin:0; }
    .round-link { display:flex; align-items:center; justify-content:center; margin:34px auto 0; width:54px; height:54px; border-radius:999px; background:linear-gradient(135deg,var(--primary-dark),var(--primary-light)); color:white; font-size:1.5rem; }
    .residence-list { display:grid; gap:14px; }
    .residence-list article { border:1px solid var(--border); border-radius:18px; overflow:hidden; background:rgba(77,200,244,.12); }
    .residence-list h4 { margin:0; padding:14px 18px; background:var(--bg-soft); color:var(--text-strong); display:flex; gap:12px; align-items:center; }
    .residence-list p { margin:0; padding:16px 18px 6px; text-transform:uppercase; }
    .residence-list strong { display:block; text-align:center; padding:0 18px 16px; }
    @media (max-width:900px) { .retrib-layout { grid-template-columns:1fr; } .retrib-tabs { position:static; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); } .retrib-head { flex-direction:column; } }
    @media (max-width:620px) { .title-list div,.amount-list div { grid-template-columns:1fr; gap:4px; } .retrib-tab { min-height:auto; } }

    /* ===== RETRIBUCIONES COMPACTO: SOLO ACHICA ESTA PÁGINA ===== */
    body.retribuciones-compact { font-size: 0.86rem; }
    body.retribuciones-compact .content-section { padding: 46px 0; }
    body.retribuciones-compact .content-card,
    body.retribuciones-compact .side-card { padding: 18px; border-radius: 20px; }
    body.retribuciones-compact .retrib-layout { grid-template-columns: 205px minmax(0,1fr); gap:18px; }
    body.retribuciones-compact .retrib-tabs { top:78px; gap:5px; }
    body.retribuciones-compact .retrib-tab { min-height:42px; padding:9px 11px; border-radius:12px; font-size:.78rem; }
    body.retribuciones-compact .retrib-head { margin-bottom:16px; }
    body.retribuciones-compact .retrib-period { padding:8px 11px; font-size:.8rem; }
    body.retribuciones-compact .retrib-panel h2 { font-size:1.3rem; margin-bottom:12px; }
    body.retribuciones-compact .retrib-panel h3 { font-size:1rem; margin:18px 0 9px; }
    body.retribuciones-compact .retrib-panel p { font-size:.86rem; line-height:1.45; margin-bottom:10px; }
    body.retribuciones-compact .values-table { min-width:500px; }
    body.retribuciones-compact .values-table th,
    body.retribuciones-compact .values-table td { padding:7px 9px; font-size:.78rem; }
    body.retribuciones-compact .values-table th { font-size:.68rem; }
    body.retribuciones-compact .big-amount { margin:20px auto; font-size:clamp(1.55rem,4vw,2.45rem); }
    body.retribuciones-compact .amount-list { gap:8px; margin-top:14px; }
    body.retribuciones-compact .amount-list div,
    body.retribuciones-compact .title-list div { padding:8px 0; gap:14px; }
    body.retribuciones-compact .amount-list span,
    body.retribuciones-compact .title-list span,
    body.retribuciones-compact .residence-list strong { font-size:.92rem; }
    body.retribuciones-compact .title-list { gap:10px; }
    body.retribuciones-compact .residence-list { gap:10px; }
    body.retribuciones-compact .residence-list h4 { padding:10px 14px; font-size:.9rem; }
    body.retribuciones-compact .residence-list p { padding:12px 14px 4px; font-size:.78rem; }
    body.retribuciones-compact .residence-list strong { padding:0 14px 12px; }
    body.retribuciones-compact .round-link { margin-top:24px; width:46px; height:46px; font-size:1.25rem; }
    @media (max-width:900px) { body.retribuciones-compact .retrib-layout { grid-template-columns:1fr; } }



/* ===== fondo-evaluacion.css ===== */
:root {
  --primary-dark: #071b9d;
  --primary-light: #4dc8f4;

  --bg-main: #030817;
  --bg-secondary: #07122f;
  --bg-card: rgba(8, 27, 90, 0.35);

  --border: rgba(77, 200, 244, 0.18);
  --border-strong: rgba(77, 200, 244, 0.45);

  --text: #eef6ff;
  --muted: #b7c8ef;
  --white: #ffffff;

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.35);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --container: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(77, 200, 244, 0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(7, 27, 157, 0.18), transparent 34%),
    linear-gradient(180deg, var(--bg-main), var(--bg));
}

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

.container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 9999;
  background: var(--white);
  color: #000;
  padding: 10px 14px;
  border-radius: 10px;
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 64px;
  border-bottom: 1px solid var(--border);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(7, 27, 157, 0.9), rgba(77, 200, 244, 0.22)),
    radial-gradient(circle at 20% 20%, rgba(77, 200, 244, 0.18), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(77, 200, 244, 0.1), transparent 22%);
}

.page-hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -140px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 200, 244, 0.25), transparent 65%);
  filter: blur(10px);
  animation: floatGlow 8s ease-in-out infinite;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--muted);
  font-weight: 600;
  transition: color 0.25s ease, transform 0.25s ease;
}

.back-link:hover {
  color: var(--primary-light);
  transform: translateX(-2px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(77, 200, 244, 0.12);
  border: 1px solid rgba(77, 200, 244, 0.28);
  backdrop-filter: blur(10px);
  color: var(--primary-light);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.page-hero h1 {
  margin: 18px 0 12px;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--white);
}

.hero-text {
  max-width: 900px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.8;
}

.hero-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 860px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-strong);
}

.hero-highlight i {
  color: var(--primary-light);
  margin-top: 2px;
}

.hero-highlight p {
  margin: 0;
  color: var(--white);
  line-height: 1.7;
}

.content-section {
  padding: 72px 0 90px;
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
  gap: 24px;
  align-items: start;
}

.main-content,
.sidebar {
  display: grid;
  gap: 24px;
}

.content-card,
.side-card {
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(77, 200, 244, 0.03)),
    var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.content-card {
  padding: 28px;
}

.side-card {
  padding: 22px;
}

.content-card h2,
.side-card h3 {
  margin: 0 0 16px;
  color: var(--white);
  letter-spacing: -0.02em;
}

.content-card h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: 1.12rem;
}

.content-card p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.8;
}

.content-card p:last-child {
  margin-bottom: 0;
}

.intro-copy,
.section-intro {
  margin-top: 18px !important;
}

.mini-label {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(77, 200, 244, 0.12);
  color: var(--primary-light);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 4px;
}

.action-btn,
.primary-btn,
.side-cta,
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.action-btn {
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: var(--white);
  font-weight: 800;
}

.action-btn.ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.action-btn:hover,
.primary-btn:hover,
.side-cta:hover,
.cta-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.feature-grid,
.salary-grid,
.license-grid,
.schedule-grid,
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature-card,
.salary-card,
.license-card,
.schedule-card,
.area-card {
  position: relative;
  padding: 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  overflow: hidden;
}

.feature-card::before,
.salary-card::before,
.license-card::before,
.schedule-card::before,
.area-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(77, 200, 244, 0.06), transparent 40%);
  pointer-events: none;
}

.feature-number,
.salary-number,
.license-number {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: var(--shadow-soft);
}

.feature-icon,
.salary-icon,
.license-icon,
.schedule-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(77, 200, 244, 0.22), rgba(7, 27, 157, 0.45));
  color: var(--primary-light);
  font-size: 1.3rem;
}

.numbered-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.numbered-card:last-child {
  margin-bottom: 0;
}

.number-badge,
.info-number {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(77, 200, 244, 0.22), rgba(7, 27, 157, 0.45));
  color: var(--primary-light);
  font-size: 1.1rem;
  font-weight: 800;
}

.law-block {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.law-block:last-child {
  margin-bottom: 0;
}

.law-number {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--primary-light);
  font-weight: 800;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.items-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.item-chip {
  padding: 14px 16px;
  border-radius: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--white);
  font-weight: 600;
}

.contact-form {
  display: grid;
  gap: 16px;
}

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

.field {
  display: grid;
  gap: 8px;
}

.field label {
  color: var(--text-strong);
  font-weight: 600;
}

.field input,
.field select,
.field textarea,
.footer-search-box input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--input-text);
  outline: none;
  font-family: inherit;
}

.field input::placeholder,
.field textarea::placeholder,
.footer-search-box input::placeholder {
  color: var(--input-placeholder);
}

.field textarea {
  resize: vertical;
  min-height: 150px;
}

.primary-btn {
  justify-content: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: var(--white);
  font-weight: 800;
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.summary-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.summary-list i {
  color: var(--primary-light);
  margin-top: 2px;
}

.related-list {
  display: grid;
  gap: 12px;
}

.related-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.related-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.06);
}

.related-item i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(77, 200, 244, 0.22), rgba(7, 27, 157, 0.45));
  color: var(--primary-light);
}

.related-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
}

.related-item span {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.side-cta,
.cta-button {
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  color: var(--white);
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.site-footer {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  background: rgba(2, 8, 24, 0.75);
  backdrop-filter: blur(10px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.9fr;
  gap: 24px;
}

.footer-brand h3,
.footer-search h4,
.footer-cta h4 {
  margin: 0 0 12px;
  color: var(--white);
}

.footer-brand p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.footer-search-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.footer-search-box button {
  width: 52px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: var(--white);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

@keyframes floatGlow {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(16px) translateX(-10px); }
}

@media (max-width: 1050px) {
  .layout-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .items-grid,
  .items-grid.compact,
  .salary-grid,
  .license-grid,
  .schedule-grid,
  .areas-grid {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 720px) {
  .page-hero {
    padding: 64px 0 48px;
  }

  .numbered-card {
    grid-template-columns: 1fr;
  }

  .article-actions {
    flex-direction: column;
  }

  .action-btn,
  .primary-btn,
  .side-cta,
  .cta-button {
    justify-content: center;
  }
}


/* ===== inline CSS extraído de adopcion.html ===== */

    .hero-adopcion .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
        url("maternidad.jpg");
    }

    .accordion-list {
      display: grid;
      gap: 10px;
    }

    .accordion-item {
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      background: var(--bg-card-strong);
      box-shadow: var(--shadow-xs);
    }

    .accordion-trigger {
      width: 100%;
      min-height: 56px;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px;
      text-align: left;
      color: #ffffff;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
      font-weight: 800;
      letter-spacing: .01em;
    }

    .accordion-trigger span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .accordion-trigger i {
      transition: transform .25s ease;
    }

    .accordion-item.active .accordion-trigger i {
      transform: rotate(45deg);
    }

    .accordion-panel {
      display: none;
      padding: 20px 22px;
      color: var(--muted);
      background: var(--bg-card-strong);
      border-top: 1px solid var(--border);
    }

    .accordion-item.active .accordion-panel {
      display: block;
      animation: fadePanel .22s ease;
    }

    .accordion-panel p {
      margin: 0 0 14px;
      color: var(--muted);
    }

    .accordion-panel p:last-child,
    .accordion-panel ol:last-child {
      margin-bottom: 0;
    }

    .accordion-panel a {
      color: var(--primary-light);
      font-weight: 800;
    }

    @keyframes fadePanel {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }
  


/* ===== inline CSS extraído de cct.html ===== */

    .cards-grid.cct-nav { margin-top: 28px; }
    .article-heading { margin-top: 0; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primary-light); font-weight: 800; }
    .article-card:target { scroll-margin-top: 90px; border-color: rgba(77, 200, 244, 0.6); box-shadow: 0 0 0 4px rgba(77, 200, 244, .14), var(--shadow-sm); }
    .article-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 8px; }
    .sticky-nav { position: sticky; top: 20px; }
    .toc-list { display:grid; gap:10px; }
    .toc-list a { padding: 12px 14px; border:1px solid var(--border); border-radius: 14px; background: var(--bg-soft); color: var(--text); font-weight:700; }
    .toc-list a:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
    .search-inline { margin-top: 20px; display:grid; grid-template-columns: 1fr auto; gap:12px; }
    .search-inline input { min-height: 50px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--input-bg); color: var(--input-text); }
    .muted-note { color: var(--muted); font-size: .96rem; }
    .result-hidden { display:none !important; }
    @media (max-width: 820px) { .search-inline { grid-template-columns:1fr; } }
  


/* ===== inline CSS extraído de concursos.html ===== */

    .concursos-hero-image {
      margin-top: 24px;
      max-width: 620px;
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadow-sm);
      background: rgba(255,255,255,.08);
    }

    .concursos-hero-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    .concursos-intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(210px, .42fr);
      gap: 28px;
      align-items: center;
    }

    .normativa-card {
      min-height: 190px;
      border-radius: 999px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      color: #fff;
      background: linear-gradient(135deg, #233964, var(--primary-dark), var(--primary-light));
      box-shadow: var(--shadow-sm);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .normativa-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }

    .normativa-card i {
      font-size: 2.4rem;
    }

    .normativa-card strong {
      color: #9ee8f5;
      font-size: 1.1rem;
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .step-card {
      padding: 24px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
      min-height: 100%;
    }

    .step-card .number-badge,
    .step-card .info-number {
      margin-bottom: 16px;
    }

    .step-card h3 {
      margin: 0 0 12px;
      color: var(--text-strong);
    }

    .step-card p {
      margin: 0;
      color: var(--muted);
    }

    .concursos-link {
      color: var(--primary-light);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    @media (max-width: 900px) {
      .concursos-intro-grid,
      .steps-grid {
        grid-template-columns: 1fr;
      }

      .normativa-card {
        border-radius: 26px;
        min-height: 150px;
      }
    }
  


/* ===== inline CSS extraído de fondo-evaluacion2.html ===== */

    .hero-fondo-evaluacion .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
        url("recibo.jpg");
    }

    .fund-hero-card {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 22px;
      align-items: center;
      margin-top: 24px;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 24px;
      background: rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
    }

    .fund-hero-card h2 {
      margin: 0 0 10px;
      color: #fff;
      font-size: clamp(1.35rem, 2.4vw, 2rem);
      line-height: 1.08;
      letter-spacing: -.03em;
    }

    .fund-hero-card p {
      margin: 0;
      color: rgba(255,255,255,.92);
    }

    .fund-illustration {
      min-height: 220px;
      border-radius: 22px;
      overflow: hidden;
      background:
        radial-gradient(circle at 28% 35%, rgba(255,255,255,.95) 0 18px, transparent 19px),
        radial-gradient(circle at 68% 105%, rgba(255,255,255,.92) 0 130px, transparent 131px),
        radial-gradient(circle at 12% 105%, rgba(255,255,255,.88) 0 92px, transparent 93px),
        linear-gradient(135deg, rgba(77,200,244,.38), rgba(255,255,255,.22));
      box-shadow: var(--shadow-sm);
    }

    .fund-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .fund-step {
      padding: 22px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: var(--bg-soft);
      box-shadow: var(--shadow-xs);
    }

    .fund-step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-bottom: 16px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
      font-weight: 800;
    }

    .fund-step p,
    .fund-step li {
      color: var(--muted);
      font-size: .96rem;
      line-height: 1.58;
    }

    .fund-step ul {
      margin: 12px 0 0;
      padding-left: 20px;
    }

    .fund-chart {
      display: grid;
      grid-template-columns: 2.2fr .9fr;
      min-height: 300px;
      margin-top: 18px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: var(--bg-elevated);
    }

    .chart-general,
    .chart-side-top,
    .chart-side-bottom {
      position: relative;
      display: flex;
      align-items: end;
      padding: 18px;
      color: #fff;
      font-weight: 800;
    }

    .chart-general {
      background: #f47b2a;
    }

    .chart-side {
      display: grid;
      grid-template-rows: 2fr 1fr;
    }

    .chart-side-top {
      background: #a9a9a9;
    }

    .chart-side-bottom {
      background: #4677c7;
      border-top: 4px solid var(--bg-elevated);
    }

    .chart-caption {
      margin-top: 10px;
      color: var(--muted);
      font-size: .9rem;
      text-align: center;
    }

    .legend {
      display: flex;
      justify-content: center;
      gap: 14px;
      margin-bottom: 16px;
      color: var(--muted);
      font-size: .9rem;
    }

    .legend span {
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }

    .legend i {
      width: 11px;
      height: 11px;
      border-radius: 3px;
      display: inline-block;
    }

    .legend .sipes { background:#4677c7; }
    .legend .general { background:#f47b2a; }
    .legend .calificado { background:#a9a9a9; }

    @media (max-width: 900px) {
      .fund-hero-card,
      .fund-steps {
        grid-template-columns: 1fr;
      }
    }
  


/* ===== inline CSS extraído de index nuevo de aefip.html ===== */

        body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
        .video-block {
            aspect-ratio: 16 / 9;
            width: 100%;
            object-fit: cover;
            border-radius: 2rem;
        }
        .bg-whatsapp { background-color: #25D366; }
        .bg-whatsapp:hover { background-color: #128C7E; }
        .fade-in { animation: fadeIn 0.8s ease-in; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        #chatWindow { display: none; }
        #chatWindow.show { display: block; }
    


/* ===== inline CSS extraído de jefaturas.html ===== */

    .jefaturas-intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(210px, .42fr);
      gap: 28px;
      align-items: center;
    }

    .normativa-card {
      min-height: 190px;
      border-radius: 999px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      color: #fff;
      background: linear-gradient(135deg, #233964, var(--primary-dark), var(--primary-light));
      box-shadow: var(--shadow-sm);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .normativa-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }

    .normativa-card i {
      font-size: 2.4rem;
    }

    .normativa-card strong {
      color: #9ee8f5;
      font-size: 1.1rem;
    }

    .two-columns-text {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .info-block {
      padding: 22px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
    }
    /* min-height:100% solo cuando van en la grilla de 2 columnas
       (igualar alturas). Apilados como hijos directos del card,
       inflaba cada bloque a la altura del padre y se superponían. */
    .two-columns-text .info-block {
      min-height: 100%;
    }

    .info-block h3 {
      margin-top: 0;
      color: var(--text-strong);
    }

    .info-block p:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 900px) {
      .jefaturas-intro-grid,
      .two-columns-text {
        grid-template-columns: 1fr;
      }

      .normativa-card {
        border-radius: 26px;
        min-height: 150px;
      }
    }
  


/* ===== inline CSS extraído de maternidad.html ===== */

    .hero-maternidad .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
        url("maternidad.jpg");
    }

    .accordion-card {
      padding: 0;
      overflow: hidden;
    }

    .accordion-item + .accordion-item {
      border-top: 1px solid var(--border);
    }

    .accordion-trigger {
      width: 100%;
      min-height: 58px;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 0;
      background: linear-gradient(135deg, rgba(7, 27, 157, 0.88), rgba(77, 200, 244, 0.75));
      color: #fff;
      text-align: left;
      font-weight: 800;
      letter-spacing: .01em;
      transition: filter .2s ease, background .2s ease;
    }

    .accordion-trigger:hover {
      filter: brightness(1.08);
    }

    .accordion-trigger i {
      width: 18px;
      text-align: center;
      font-size: .95rem;
    }

    .accordion-panel {
      display: none;
      padding: 22px;
      background: var(--bg-card-strong);
      color: var(--muted);
      line-height: 1.7;
    }

    .accordion-panel.active {
      display: block;
      animation: fadeTab .22s ease;
    }

    .accordion-panel p {
      margin: 0 0 14px;
      color: var(--muted);
    }

    .accordion-panel p:last-child {
      margin-bottom: 0;
    }

    .accordion-panel ol,
    .accordion-panel ul {
      margin: 12px 0 0 20px;
      color: var(--muted);
    }

    .accordion-panel li {
      margin-bottom: 8px;
    }

    @keyframes fadeTab {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
  


/* ===== inline CSS extraído de movilidad.html ===== */

    .hero-movilidad .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
        url("viaticosmovilidad.jpg");
    }

    .accordion-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .accordion-item {
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      background: var(--bg-card-strong);
      box-shadow: var(--shadow-xs);
    }

    .accordion-trigger {
      width: 100%;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border: 0;
      background: linear-gradient(135deg, rgba(7,27,157,0.95), rgba(77,200,244,0.86));
      color: #ffffff;
      text-align: left;
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    .accordion-trigger span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .accordion-trigger i {
      transition: transform .22s ease;
    }

    .accordion-item.active .accordion-trigger i {
      transform: rotate(45deg);
    }

    .accordion-panel {
      display: none;
      padding: 20px;
      background: var(--bg-elevated);
      border-top: 1px solid var(--border);
    }

    .accordion-item.active .accordion-panel {
      display: block;
      animation: fadeAccordion .22s ease;
    }

    @keyframes fadeAccordion {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }

    .accordion-panel p {
      color: var(--muted);
      margin: 0 0 14px;
    }

    .accordion-panel p:last-child,
    .accordion-panel ul:last-child {
      margin-bottom: 0;
    }

    .accordion-panel ul {
      margin: 10px 0 0;
      padding-left: 20px;
      color: var(--muted);
    }

    .accordion-panel li {
      margin-bottom: 8px;
    }

    .wide-highlight {
      display: block;
      width: 100%;
      margin-top: 18px;
      padding: 20px 22px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: rgba(77, 200, 244, 0.10);
      color: var(--text-strong);
      font-size: clamp(1.15rem, 2vw, 1.55rem);
      line-height: 1.18;
      font-weight: 800;
      letter-spacing: -0.03em;
    }
  


/* ===== inline CSS extraído de paternidad.html ===== */

    .hero-paternidad .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
        url("maternidad.jpg");
    }

    .accordion-card {
      padding: 0;
      overflow: hidden;
    }

    .accordion-item + .accordion-item {
      border-top: 1px solid var(--border);
    }

    .accordion-trigger {
      width: 100%;
      min-height: 58px;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 0;
      background: linear-gradient(135deg, rgba(7, 27, 157, 0.88), rgba(77, 200, 244, 0.75));
      color: #fff;
      text-align: left;
      font-weight: 800;
      letter-spacing: .01em;
      transition: filter .2s ease, background .2s ease;
    }

    .accordion-trigger:hover {
      filter: brightness(1.08);
    }

    .accordion-trigger i {
      width: 18px;
      text-align: center;
      font-size: .95rem;
    }

    .accordion-panel {
      display: none;
      padding: 22px;
      background: var(--bg-card-strong);
      color: var(--muted);
      line-height: 1.7;
    }

    .accordion-panel.active {
      display: block;
      animation: fadeTab .22s ease;
    }

    .accordion-panel p {
      margin: 0 0 14px;
      color: var(--muted);
    }

    .accordion-panel p:last-child {
      margin-bottom: 0;
    }

    .accordion-panel ol,
    .accordion-panel ul {
      margin: 12px 0 0 20px;
      color: var(--muted);
    }

    .accordion-panel li {
      margin-bottom: 8px;
    }

    @keyframes fadeTab {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
  


/* ===== inline CSS extraído de plus-vacacional.html ===== */

    .hero-plus-vacacional .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
        url("maternidad.jpg");
    }

    .plus-hero-card {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 24px;
      align-items: center;
      margin-top: 26px;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 24px;
      background: rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
      box-shadow: 0 16px 36px rgba(0,0,0,.14);
    }

    .plus-hero-card h2 {
      margin: 0 0 10px;
      color: #fff;
      font-size: clamp(1.45rem, 2.6vw, 2.15rem);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    .plus-hero-card p {
      margin: 0;
      color: rgba(255,255,255,.92);
    }

    .plus-illustration {
      min-height: 250px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.20);
      background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.92) 0 62px, transparent 63px),
        radial-gradient(circle at 50% 62%, rgba(255,255,255,.88) 0 104px, transparent 105px),
        linear-gradient(135deg, rgba(77,200,244,.55), rgba(255,255,255,.20));
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .plus-illustration::before {
      content: "AEFIP";
      position: absolute;
      top: 42px;
      left: 50%;
      transform: translateX(-50%);
      padding: 6px 18px;
      border-radius: 999px 999px 10px 10px;
      background: #071b9d;
      color: #fff;
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .plus-illustration::after {
      content: "";
      position: absolute;
      width: 115px;
      height: 145px;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      border-radius: 56px 56px 0 0;
      background: linear-gradient(160deg, #071b9d, #0d1d45);
      box-shadow: 0 -70px 0 -42px rgba(255,255,255,.95);
    }

    .plus-objective {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .plus-objective h2 {
      margin: 0;
      font-size: clamp(1.35rem, 2.4vw, 2rem);
      line-height: 1.08;
      color: var(--text-strong);
      letter-spacing: -.035em;
    }

    .cct-round {
      width: 160px;
      height: 160px;
      border-radius: 999px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #fff;
      background: linear-gradient(135deg, #263f68, #0f7fc1);
      box-shadow: var(--shadow-sm);
      text-align: center;
      font-weight: 800;
    }

    .cct-round i {
      font-size: 2.4rem;
    }

    .cct-round span {
      color: rgba(255,255,255,.78);
      font-size: .85rem;
      font-weight: 600;
    }

    .plus-steps {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-top: 22px;
    }

    .plus-step {
      padding: 22px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: var(--bg-soft);
      box-shadow: var(--shadow-xs);
    }

    .plus-step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-bottom: 16px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
      color: #fff;
      font-weight: 800;
    }

    .plus-step p {
      margin: 0;
      color: var(--muted);
      font-size: .96rem;
      line-height: 1.58;
    }

    .related-mini-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 18px;
    }

    .related-mini {
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--bg-soft);
    }

    .related-mini strong {
      display: block;
      margin-bottom: 8px;
      color: var(--text-strong);
      font-size: 1.02rem;
      line-height: 1.25;
    }

    .related-mini p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.5;
    }

    .convenio-title {
      margin: 8px 0 0;
      font-size: clamp(2rem, 4vw, 3.2rem);
      color: var(--text-strong);
      letter-spacing: -.05em;
      text-align: center;
    }

    .convenio-title span {
      display: inline-block;
      color: rgba(127, 153, 146, .9);
      border: 5px solid rgba(89, 127, 93, .9);
      border-radius: 50%;
      padding: 0 14px 4px;
      transform: rotate(-2deg);
    }

    @media (max-width: 900px) {
      .plus-hero-card,
      .plus-objective,
      .plus-steps,
      .related-mini-grid {
        grid-template-columns: 1fr;
      }

      .cct-round {
        width: 140px;
        height: 140px;
      }
    }
  


/* ===== inline CSS extraído de seccionales.html ===== */
        /* NOTA: el 'body { overflow:hidden }' original bloqueaba el scroll en
           TODAS las páginas. Se aplica solo dentro de la página del mapa. */
        body.page-seccionales { overflow: hidden; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .seccional-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-left-width: 4px; border-left-color: transparent; }
        .seccional-card.active { border-left-color: #1d4ed8; background-color: #eff6ff; transform: translateX(5px); }
        #map { height: calc(100vh - 80px); width: 100%; z-index: 1; }
        @media (max-width: 1024px) { 
            body { overflow: auto; }
            #map { height: 400px; } 
        }
    


/* ===== inline CSS extraído de tabla_licencias.html ===== */

    .hero-tabla-licencias .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,.95) 0%, rgba(7,27,157,.72) 45%, rgba(77,200,244,.58) 100%),
        url("licencias.jpg");
    }

    .licencias-table-wrap {
      overflow-x: auto;
      margin-top: 10px;
    }

    .licencias-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 560px;
    }

    .licencias-table th,
    .licencias-table td {
      padding: 18px 16px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      vertical-align: middle;
    }

    .licencias-table th {
      color: var(--text-strong);
      font-weight: 800;
      text-align: left;
      font-size: .95rem;
    }

    .licencias-table td:first-child {
      font-weight: 800;
      color: var(--text-strong);
    }

    .licencias-table td:last-child,
    .licencias-table th:last-child {
      text-align: center;
      font-weight: 800;
      font-size: 1.1rem;
    }

    .calculator-box {
      margin-top: 28px;
      padding: 22px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
    }

    .calculator-box label {
      display: block;
      color: var(--text-strong);
      font-weight: 800;
      margin-bottom: 6px;
    }

    .calculator-box p {
      margin: 0;
      color: var(--muted);
    }

    .calculator-box input {
      min-height: 54px;
      width: 220px;
      padding: 12px 16px;
      border-radius: 16px;
      border: 2px solid var(--border-strong);
      background: var(--input-bg);
      color: var(--input-text);
      outline: none;
      font-weight: 700;
    }

    .resultado-licencia {
      margin-top: 18px;
      padding: 18px 20px;
      border-radius: 18px;
      border: 1px solid rgba(77,200,244,.35);
      background: rgba(77,200,244,.10);
      color: var(--text-strong);
      font-weight: 800;
      display: none;
    }

    .resultado-licencia.show {
      display: block;
      animation: fadeResult .25s ease;
    }

    .resultado-licencia .lic-res-head {
      font-size: 1.05rem;
      margin-bottom: 10px;
    }

    .resultado-licencia .lic-res-sub {
      margin: 14px 0 6px;
      color: var(--primary-light);
      font-weight: 800;
    }

    .resultado-licencia .lic-res-list {
      margin: 0;
      padding-left: 20px;
      font-weight: 500;
    }

    .resultado-licencia .lic-res-list li {
      margin-bottom: 5px;
      line-height: 1.5;
    }

    .resultado-licencia .lic-res-list strong {
      color: var(--text-strong);
      font-weight: 800;
    }

    @keyframes fadeResult {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .step-card {
      padding: 22px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
    }

    .step-number {
      width: 42px;
      height: 42px;
      margin-bottom: 16px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
      color: #fff;
      font-weight: 800;
    }

    .step-card p {
      margin: 0;
      color: var(--muted);
    }

    .related-inline-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .related-inline-card {
      padding: 20px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--bg-soft);
      transition: transform .2s ease, border-color .2s ease;
    }

    .related-inline-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-strong);
    }

    .related-inline-card h3 {
      margin: 0 0 8px;
      color: var(--text-strong);
      font-size: 1rem;
    }

    .related-inline-card p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .calculator-box,
      .steps-grid,
      .related-inline-grid {
        grid-template-columns: 1fr;
      }

      .calculator-box input {
        width: 100%;
      }
    }
  


/* ===== inline CSS extraído de viaticos.html ===== */

    .hero-viaticos .hero-bg {
      background-image:
        linear-gradient(135deg, rgba(7,27,157,0.95) 0%, rgba(7,27,157,0.72) 45%, rgba(77,200,244,0.58) 100%),
        url("viaticosmovilidad.jpg");
    }


    /* Ajuste de hero para respetar el estilo institucional del resto del sitio */
    .hero-viaticos {
      padding: 88px 0 72px;
    }

    .hero-viaticos .hero-content {
      max-width: none;
    }

    .hero-viaticos .hero-badge {
      margin-bottom: 18px;
    }

    .hero-viaticos h1 {
      font-size: clamp(3rem, 7vw, 6rem);
      line-height: .95;
      letter-spacing: -0.06em;
    }

    .viaticos-cover {
      width: 100%;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);
      background: var(--bg-soft);
      margin-bottom: 22px;
    }

    .viaticos-cover img {
      width: 100%;
      height: clamp(260px, 38vw, 470px);
      object-fit: cover;
    }

    .viaticos-subtitle {
      display: block;
      width: 100%;
      margin: 0;
      padding: 24px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent),
        var(--bg-card-strong);
      color: var(--text-strong);
    
      line-height: 1.12;
      font-weight: 800;
      letter-spacing: -0.03em;
      box-shadow: var(--shadow-xs);
    }

    .accordion {
      display: grid;
      gap: 10px;
      margin-top: 22px;
    }

    .accordion-item {
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      background: var(--bg-card-strong);
      box-shadow: var(--shadow-xs);
    }

    .accordion-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border: 0;
      background: linear-gradient(135deg, rgba(77,200,244,0.28), rgba(77,200,244,0.14));
      color: var(--text-strong);
      text-align: left;
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    .accordion-trigger i {
      color: var(--primary-light);
      transition: transform .22s ease;
    }

    .accordion-item.active .accordion-trigger i {
      transform: rotate(45deg);
    }

    .accordion-panel {
      display: none;
      padding: 18px 20px 20px;
      border-top: 1px solid var(--border);
      color: var(--muted);
    }

    .accordion-item.active .accordion-panel {
      display: block;
      animation: openPanel .22s ease;
    }

    @keyframes openPanel {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .accordion-panel p {
      margin: 0 0 14px;
      color: var(--muted);
    }

    .accordion-panel p:last-child,
    .accordion-panel ul:last-child {
      margin-bottom: 0;
    }

    .accordion-panel strong {
      color: var(--text-strong);
    }

    .accordion-panel ul {
      margin: 10px 0 0;
      padding-left: 22px;
      color: var(--muted);
    }

    .accordion-panel li {
      margin-bottom: 8px;
    }
  


/* ===== estilos inline convertidos a clases CSP-safe ===== */
.auto-style-116e33d401{text-decoration:none}
.auto-style-42c573594d{color: white; font-size: 26px;}
.auto-style-6382e0e533{background: #1d4ed8; padding: 25px; color: white;}
.auto-style-74a4df2bac{position: absolute; bottom: 85px; right: 0; width: 340px; background: white; border-radius: 25px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); border: 1px solid #e2e8f0; overflow: hidden; font-family: sans-serif;}
.auto-style-78f6f2c97d{margin-top:12px;}
.auto-style-7a7d544dbc{background-color: #1d4ed8; width: 65px; height: 65px; border-radius: 50%; border: 4px solid white; box-shadow: 0 10px 30px rgba(0,0,0,0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s;}
.auto-style-87799cb067{width: 100%; border: none; background: #f1f5f9; padding: 12px 20px; border-radius: 25px; font-size: 14px; outline: none; box-sizing: border-box;}
.auto-style-8af126b76d{padding: 15px; border-top: 1px solid #f1f5f9; background: white;}
.auto-style-91930d3e7e{margin: 0; font-weight: 800; font-size: 17px;}
.auto-style-92d1733614{margin-top:10px;}
.auto-style-9bca1c313f{text-decoration:none; color:inherit;}
.auto-style-a844ce4b2d{height: 320px; padding: 20px; overflow-y: auto; background: #f8fafc; display: flex; flex-direction: column; gap: 15px;}
.auto-style-bfee7e591a{text-align: left; padding: 10px 15px; border: 1px solid #1d4ed8; color: #1d4ed8; border-radius: 12px; background: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.3s;}
.auto-style-c0c8583293{margin: 0; font-size: 11px; opacity: 0.8; text-transform: uppercase; letter-spacing: 1px;}
.auto-style-c3f837075c{margin-left:8px}
.auto-style-d7bb5fd21e{display: flex; flex-direction: column; gap: 8px;}
.auto-style-dcd65323ab{background: white; padding: 15px; border-radius: 20px; border-bottom-left-radius: 0; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); color: #334155; line-height: 1.5;}
.auto-style-e3fb6ff31c{position: fixed; bottom: 25px; right: 25px; z-index: 9999;}


/* ===== utilidades globales para componentes dinámicos ===== */
.reveal { opacity: 1; transform: none; }
.reveal.show { opacity: 1; transform: none; }
.retrib-panel { display: none; }
.retrib-panel.active { display: block; }
.accordion-panel { display: none; }
.accordion-panel.active, .accordion-item.active .accordion-panel { display: block; }
.accordion-trigger { cursor: pointer; }
.js-card-link { cursor: pointer; }
#formTema { color: var(--muted); font-weight: 600; margin: -4px 0 14px; }
#formTema strong { color: var(--text-strong); }
.form-error {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: #ef4444;
  font-weight: 600;
}
.form-error[hidden], #formTema[hidden] { display: none; }

.map-dot{background:#1d4ed8;width:18px;height:18px;border-radius:50%;border:3px solid white;box-shadow:0 0 15px rgba(29,78,216,.5);}

/* =========================================================
   MODO CLARO — alineado a la versión de prueba (style2.css):
   el HERO queda AZUL (texto blanco) y las CARDS BLANCAS, igual
   que la prueba. Acá solo se mantienen los arreglos necesarios
   (títulos/labels visibles e iconos de marca), porque el CSS base
   local tenía reglas que rompían el modo claro.
   La paleta de variables ya coincide con la prueba.
========================================================= */

/* --- ICONOS (chips) con la paleta de marca: sólido #071b9d -> #4dc8f4,
       glifo blanco. Reemplaza los fondos translúcidos que se veían grises.
       Aplica en modo claro y oscuro, en todas las páginas. --- */
.related-item i,
.special-item i,
.feature-icon,
.benefit-icon,
.number-badge,
.salary-icon,
.feature-number,
.step-number,
.topic-card .topic-icon,
.license-icon,
.schedule-icon,
.info-number,
.salary-number,
.license-number {
  background: linear-gradient(135deg, #071b9d 0%, #4dc8f4 100%);
  color: #ffffff;
}
.related-item i i,
.feature-icon i,
.benefit-icon i,
.salary-icon i,
.topic-card .topic-icon i,
.license-icon i,
.schedule-icon i { color: #ffffff; }

/* --- TÍTULOS Y TEXTOS que en el CSS base eran blancos (--white) o celeste:
       en modo claro deben pasar a color oscuro/azul para no perderse --- */
html[data-theme="light"] .content-card h2,
html[data-theme="light"] .content-card h3,
html[data-theme="light"] .side-card h3,
html[data-theme="light"] .related-item strong,
html[data-theme="light"] .step-card h3,
html[data-theme="light"] .numbered-card h3,
html[data-theme="light"] .accordion-trigger {
  color: var(--text-strong);
}
html[data-theme="light"] .field label,
html[data-theme="light"] .related-item span {
  color: var(--text);
}
/* etiquetas/acentos pequeños: celeste tiene poco contraste sobre claro */
html[data-theme="light"] .mini-label,
html[data-theme="light"] .law-number,
html[data-theme="light"] .section-kicker {
  color: var(--primary-dark);
}
html[data-theme="light"] .summary-list i { color: var(--primary-dark); }
/* Chips de "base de cálculo" (fondo-evaluación): el CSS base los deja con
   texto blanco (--white) sobre fondo claro. En modo claro van en azul oscuro. */
html[data-theme="light"] .item-chip { color: var(--text-strong); }

/* El hero sigue AZUL en modo claro, así que su texto (subtítulo y bloque
   destacado) debe ir en blanco para contrastar sobre el banner azul. */
html[data-theme="light"] .hero-text,
html[data-theme="light"] .hero-highlight p {
  color: rgba(255, 255, 255, 0.92);
}
/* Botón "Volver a temas": va sobre el hero azul, en blanco para contrastar. */
html[data-theme="light"] .back-link {
  color: #ffffff;
}

/* FOOTER en modo claro: el CSS base lo deja oscuro (rgba(2,8,24,.75)) en
   ambos temas. En claro lo pasamos a fondo claro, títulos azul oscuro y
   buscador blanco. (El modo oscuro queda como está.) */
html[data-theme="light"] .site-footer {
  background: var(--bg-soft);
  backdrop-filter: none;
}
html[data-theme="light"] .footer-brand h3,
html[data-theme="light"] .footer-search h4,
html[data-theme="light"] .footer-cta h4 {
  color: var(--text-strong);
}
html[data-theme="light"] .footer-search-box input {
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .footer-search-box input::placeholder {
  color: var(--input-placeholder);
}

/* Acordeones: el título va a la IZQUIERDA y el indicador +/- a la derecha.
   En el markup el ícono y el título van juntos dentro de un <span>, así que
   el span ocupa todo el ancho y el ícono se empuja al extremo derecho.
   Aplica a todas las páginas con acordeón. */
.accordion-trigger {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.accordion-trigger > span {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.accordion-trigger > span > i {
  order: 2;
  margin-left: auto;
}

/* =========================================================
   CARRUSEL DE FUNCIONES · Recorridos de carrera
   Datos: data.js · Lógica: funciones.js
   ========================================================= */
.cf-app {
  display: grid;
  gap: 20px;
  margin-top: 18px;
  min-width: 0;
}

/* Los contenedores son items de grid: sin esto crecen con el contenido
   del carrusel en lugar de contenerlo y generan scroll horizontal. */
#recorridos,
#explorar-grupo,
.cf-app > *,
.cf-stage > * {
  min-width: 0;
}

/* ---- filtros ---- */
.cf-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cf-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.cf-field label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.cf-field select,
.cf-field input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cf-field select:focus-visible,
.cf-field input:focus-visible,
.cf-search input:focus-visible {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 4px rgba(77, 200, 244, 0.18);
}

.cf-field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- buscador general ---- */
.cf-search {
  position: relative;
}

.cf-search .cf-search-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-light);
  pointer-events: none;
}

.cf-search input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}

.cf-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--bg-elevated);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 4px;
}

.cf-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cf-result:hover,
.cf-result:focus-visible {
  background: rgba(77, 200, 244, 0.12);
  outline: none;
}

.cf-result-tipo {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cf-result-txt {
  display: grid;
  min-width: 0;
}

.cf-result-txt strong {
  color: var(--text-strong);
  font-size: 0.94rem;
}

.cf-result-txt small {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---- panel de inicio ---- */
.cf-inicio {
  padding: 30px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 20px;
  background: var(--bg-soft);
  text-align: center;
}

.cf-inicio-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #fff;
  font-size: 1.3rem;
}

.cf-inicio h3 {
  margin: 0 0 6px;
  color: var(--text-strong);
}

.cf-inicio p {
  margin: 0 auto 22px;
  max-width: 460px;
  color: var(--muted);
}

.cf-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cf-stat {
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elevated);
}

.cf-stat b {
  display: block;
  color: var(--primary-light);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.cf-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

/* ---- carrusel ---- */
.cf-recorrido-tit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  color: var(--text-strong);
  font-size: 1.05rem;
  font-weight: 800;
}

.cf-recorrido-tit i {
  color: var(--primary-light);
}

.cf-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cf-viewport {
  flex: 1 1 0;
  overflow: hidden;
  padding: 16px 4px;
  cursor: grab;
  min-width: 0;
}

.cf-viewport:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
  border-radius: 18px;
}

.cf-viewport:active {
  cursor: grabbing;
}

.cf-track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.cf-track.is-dragging {
  transition: none;
}

/* Recorridos cortos: entran completos, se centran en el viewport. */
.cf-track.is-fit {
  justify-content: center;
}

.cf-card {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-soft);
  opacity: 0.62;
  transform: scale(0.95);
  cursor: pointer;
  user-select: none;
  transition: transform 0.32s ease, opacity 0.32s ease,
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cf-card:hover {
  opacity: 0.9;
  border-color: var(--border-strong);
}

.cf-card.is-past {
  opacity: 0.38;
}

.cf-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: 0 16px 34px rgba(7, 27, 157, 0.28);
  cursor: default;
}

.cf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cf-grupo {
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.cf-card.is-active .cf-grupo {
  background: rgba(255, 255, 255, 0.22);
}

.cf-etapa {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 700;
  white-space: nowrap;
}

.cf-card.is-active .cf-etapa {
  color: rgba(255, 255, 255, 0.85);
}

.cf-puesto {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  line-height: 1.3;
}

.cf-card.is-active .cf-puesto {
  color: #fff;
}

.cf-meta {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.79rem;
}

.cf-meta i {
  width: 14px;
  margin-right: 5px;
  color: var(--primary-light);
}

.cf-card.is-active .cf-meta {
  border-top-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.9);
}

.cf-card.is-active .cf-meta i {
  color: #fff;
}

.cf-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--primary-light);
  opacity: 0.5;
  font-size: 0.9rem;
}

.cf-nav {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-strong);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast),
    opacity var(--transition-fast);
}

.cf-nav:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #fff;
  transform: scale(1.06);
}

.cf-nav:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.cf-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
}

.cf-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast);
}

.cf-dot.is-active {
  width: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
}

/* ---- progreso ---- */
.cf-progress {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.cf-bar {
  height: 9px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}

.cf-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cf-bar-text {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: right;
}

/* ---- resumen ---- */
.cf-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}

.cf-res-item {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
}

.cf-res-item span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cf-res-item strong {
  color: var(--text-strong);
  font-size: 0.96rem;
  line-height: 1.35;
}

.cf-res-fin {
  grid-column: 1 / -1;
  border-color: rgba(77, 200, 244, 0.35);
  background: rgba(77, 200, 244, 0.1);
}

/* ---- explorar por grupo ---- */
.cf-exp-filters {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 14px;
  margin: 16px 0 20px;
}

.cf-grid-exp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.cf-gcard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-soft);
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.cf-gcard:hover {
  transform: translateY(-3px);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-xs);
}

.cf-gcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cf-gcard-plan {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 700;
}

.cf-gcard h4 {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.99rem;
  line-height: 1.3;
}

.cf-gcard p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.cf-gcard p i {
  margin-right: 6px;
  color: var(--primary-light);
}

.cf-gcard-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--primary-light);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    gap var(--transition-fast);
}

.cf-gcard-btn:hover {
  gap: 12px;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: #fff;
}

.cf-vacio {
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  background: var(--bg-soft);
  color: var(--muted);
  text-align: center;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .cf-filters {
    grid-template-columns: 1fr;
  }
  .cf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cf-exp-filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cf-card {
    flex: 0 0 210px;
  }
  .cf-nav {
    width: 38px;
    height: 38px;
  }
  .cf-grid-exp {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-track,
  .cf-card,
  .cf-bar span {
    transition: none;
  }
}


/* =========================================================
   CORRECCIONES DE AUDITORÍA
========================================================= */

/* .info-block que lleva numerador se arma en dos columnas, igual que
   .numbered-card. Sin esto el número quedaba apilado sobre el título. */
.info-block:has(> .info-number) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}

/* Modificador de advertencia para .law-block (usado en Pases y traslados). */
.law-block.warning {
  border-color: rgba(255, 176, 32, 0.5);
  background: rgba(255, 176, 32, 0.09);
}

.law-block.warning .law-number {
  color: #ffb020;
}

html[data-theme="light"] .law-block.warning {
  border-color: rgba(176, 106, 0, 0.35);
  background: rgba(255, 176, 32, 0.14);
}

html[data-theme="light"] .law-block.warning .law-number {
  color: #8a5200;
}

/* El logo del pie tenía un max-width fijo de 400px: en pantallas angostas
   superaba al contenedor, estiraba la columna del grid y arrastraba con ella
   al buscador y al botón, sacando todo el pie fuera de pantalla. */
.footer-logo {
  width: auto;
  max-width: min(400px, 100%);
  height: auto;
}

.footer-grid > * {
  min-width: 0;
}

/* Las tarjetas son items de grid: con min-width:auto crecen hasta el ancho de
   la tabla que contienen en vez de contenerla, y el scroll horizontal de
   .table-wrap nunca llega a activarse. */
.layout-grid > *,
.main-content > * {
  min-width: 0;
}

/* =========================================================
   FÓRMULA DEL HERO (Ganancias)
   Se lee como una cuenta: un término por renglón, el operador
   en una columna angosta a la izquierda y el resultado abajo,
   separado por una línea. Va sobre el degradado azul del hero,
   así que usa blancos translúcidos en ambos temas.
========================================================= */
.hero-formula {
  display: grid;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin-top: 26px;
  padding: 18px 22px 18px 18px;
  border-radius: var(--radius-lg, 22px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.hero-formula-line {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: baseline;
  gap: 12px;
  /* mismo sangrado que la fila del resultado, para que los operadores
     queden alineados en una sola columna */
  padding: 7px 16px 7px 12px;
}

.hero-formula-op {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  user-select: none;
}

.hero-formula-term {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.hero-formula-rule {
  height: 1px;
  margin: 8px 12px 4px;
  background: rgba(255, 255, 255, 0.28);
}

.hero-formula-line.is-result {
  align-items: center;
  margin-top: 4px;
  padding: 11px 16px 11px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #071b9d 0%, #4dc8f4 100%);
  box-shadow: 0 10px 24px rgba(7, 27, 157, 0.32);
}

.hero-formula-line.is-result .hero-formula-op {
  color: rgba(255, 255, 255, 0.9);
}

.hero-formula-line.is-result .hero-formula-term {
  font-weight: 800;
}

@media (max-width: 620px) {
  .hero-formula {
    width: 100%;
    padding: 16px;
  }

  .hero-formula-line {
    grid-template-columns: 18px 1fr;
    gap: 10px;
  }

  .hero-formula-term {
    font-size: 0.95rem;
  }
}