/* Configuración global */
:root {
    --color-primary: #8C002B; /* Rojo Vino/Carmesí (MORENA) */
    --color-secondary: #0A6B30; /* Verde Oscuro/Esmeralda (Complementario MORENA / Naturaleza) */
    --color-accent: #FFD100; /* Amarillo Oro/Tierra (MORENA / Regional) */
    --color-text: #2c3e50; /* Gris Oscuro */
    --color-light-bg: #fdfdfd; /* Fondo claro */
    --color-accent-darker: #cc9a00; /* Un dorado más oscuro para el icono al seleccionar */
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    background-color: var(--color-light-bg);
}

.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-secondary { color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.text-accent { color: var(--color-accent); }

/* Navegación general */
/*.nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    cursor: pointer;
}*/

/*.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}*/

/* Estilos para el nuevo menú de botones cuadrados */
.btn-menu-square {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem; /* Ajuste para que se vea bien en 3 */
    border-radius: 0.75rem; /* Rounded-xl */
    background-color: white;
    color: #BC955C; /* Texto por defecto: BC955C */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    transition: all 0.3s ease;
    text-align: center;
    flex-grow: 1; 
    text-decoration: none;
    flex-shrink: 0; 
    min-width: 30%; /* Asegura que no se achiquen demasiado en móvil */
}

.btn-menu-square:hover, .btn-menu-square.active-button {
    background-color: #BC955C; /* Fondo al hover/seleccionar: BC955C */
    color: #DDC9A3; /* Texto al hover/seleccionar: DDC9A3 */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); 
    transform: translateY(-3px);
}

/* Ajustes para el tamaño de iconos y color por defecto */
.btn-menu-square i, .btn-menu-square svg {
    width: 1.8rem; /* Aumentado ligeramente para 3 botones */
    height: 1.8rem;
    margin-bottom: 0.25rem; 
    color: #BC955C; /* Icono por defecto: BC955C */
}

/* Ajustes de color para iconos al seleccionar */
.btn-menu-square:hover i, .btn-menu-square.active-button i,
.btn-menu-square:hover svg, .btn-menu-square.active-button svg {
    color: #DDC9A3; /* Icono más claro al hover/seleccionar: DDC9A3 */
}

.btn-menu-square span {
    font-weight: 600; /* Semibold */
    font-size: 0.8rem; /* Aumentado ligeramente para mejor lectura */
    line-height: 1; 
}

/* Menú lateral de Transparencia */
.transparencia-menu-item {
    cursor: pointer;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: transparent;
    padding-left: 0.75rem;
    transition: all 0.15s;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    color: rgb(75 85 99); /* text-gray-700 */
}

.transparencia-menu-item:hover, .transparencia-menu-item.active-item {
    color: var(--color-secondary);
    border-left-color: var(--color-secondary);
    font-weight: 600;
}

 /* Menú lateral del sevac */
.sidebar-item {
    transition: all 0.2s ease;
    cursor: pointer;
    border-left: 5px solid transparent;
    min-height: 80px; /* Asegura un buen espacio táctil */
    align-items: center;
}

.sidebar-item:hover {
    background-color: #FEEEEE; /* Fondo muy suave al pasar el ratón */
    border-left-color: var(--color-secondary);
}

.sidebar-item.active {
    background-color: #FBD3DA; /* Tono de rosa pálido para el activo */
    font-weight: 600;
    border-left-color: var(--color-primary);
}

/* Contenedores con efecto "flotante" */
.floating-card {
    background-color: white;
    border-radius: 12px; /* Mayor redondeo */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra elevada */
}


.premium-card {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.08),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(140, 0, 43, 0.04);
}

.quote-highlight {
  position: relative;
  letter-spacing: -0.01em;
  border-left: 4px solid var(--color-accent);
  padding-left: 1.25rem;
  font-style: italic;
  line-height: 1.7;
}

.quote-highlight::before {
  content: "“";
  position: absolute;
  left: -0.35rem;
  top: -1.1rem;
  font-size: 4rem;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: rgba(140, 0, 43, 0.15);
  pointer-events: none;
}

.btn-premium {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.president-image-frame {
  position: relative;
  overflow: hidden;
}

.president-image-frame img {
  transition: transform 0.6s ease;
}

.president-image-frame:hover img {
  transform: scale(1.03);
}

.section-kicker {
  letter-spacing: 0.2em;
  text-transform: uppercase;
}


/* =========================
   HEADER PREMIUM
========================= */

.site-header {
  position: relative;
  z-index: 50;
}

.header-topbar {
  background:
    linear-gradient(90deg, rgba(140, 0, 43, 1) 0%, rgba(122, 0, 37, 1) 100%);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.header-topbar-inner {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-topbar-left,
.header-topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.topbar-link:hover {
  color: var(--color-accent);
}

.topbar-caption {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}

.topbar-social {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.topbar-social:hover {
  transform: translateY(-1px);
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}

.header-mainbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.header-mainbar.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
}

.header-mainbar-inner {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-block {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
  text-decoration: none;
}

.brand-logo-wrap {
  position: relative;
  flex-shrink: 0;
}

.brand-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(188, 149, 92, 0.18) 0%, rgba(188, 149, 92, 0) 72%);
  z-index: 0;
}

.brand-logo {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(10, 107, 48, 0.18);
  box-shadow:
    0 10px 25px rgba(140, 0, 43, 0.10),
    0 0 0 6px rgba(255, 255, 255, 0.8);
}

.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-secondary);
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.brand-title {
  font-size: clamp(1.3rem, 1.8vw, 1.85rem);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.03em;
}

.brand-subtitle {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-premium-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  color: #334155;
  font-weight: 600;
  font-size: 0.95rem;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.nav-premium-link i,
.nav-premium-link svg {
  color: var(--color-secondary);
  opacity: 0.92;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.nav-premium-link:hover {
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.06);
  transform: translateY(-1px);
}

.nav-premium-link.active {
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.08);
  box-shadow: inset 0 0 0 1px rgba(140, 0, 43, 0.08);
}

.nav-premium-link.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), #bc955c);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), #b01149);
  box-shadow: 0 14px 28px rgba(140, 0, 43, 0.18);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
  letter-spacing: 0.02em;
}

.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(140, 0, 43, 0.22);
  filter: saturate(1.05);
}

.mobile-toggle-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(140, 0, 43, 0.08);
  background: white;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.mobile-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
  background: rgba(140, 0, 43, 0.03);
}

.mobile-menu-panel {
  position: absolute;
  inset-inline: 0;
  z-index: 39;
  padding-top: 0.5rem;
}

.mobile-menu-shell {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  padding: 1rem;
}

.mobile-menu-header {
  padding: 0.35rem 0.35rem 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  margin-bottom: 0.75rem;
}

.mobile-menu-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-secondary);
  font-weight: 700;
}

.mobile-menu-title {
  margin-top: 0.25rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary);
}

.mobile-menu-links {
  display: grid;
  gap: 0.45rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  text-decoration: none;
  color: #334155;
  font-weight: 600;
  background: #fff;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.mobile-nav-link:hover {
  background: rgba(140, 0, 43, 0.05);
  color: var(--color-primary);
  transform: translateX(2px);
}

.mobile-nav-link-accent {
  background: linear-gradient(135deg, rgba(140, 0, 43, 0.07), rgba(188, 149, 92, 0.10));
  color: var(--color-primary);
}

.quick-access-strip {
  padding: 1.15rem 0 1.55rem;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(255, 255, 255, 1) 100%);
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
}

.quick-access-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 1rem 0.75rem;
  border-radius: 1.15rem;
  text-decoration: none;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  color: #8b7355;
  border: 1px solid rgba(188, 149, 92, 0.14);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease;
}

.quick-access-card i,
.quick-access-card svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 0.6rem;
}

.quick-access-card span {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.quick-access-card:hover,
.quick-access-card.active-card {
  transform: translateY(-4px);
  color: var(--color-primary);
  border-color: rgba(140, 0, 43, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #fcf7f9 100%);
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(140, 0, 43, 0.06) inset;
}

.brand-logo {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.brand-block:hover .brand-logo {
  transform: scale(1.05) rotate(-1deg);
  box-shadow:
    0 18px 35px rgba(140, 0, 43, 0.18),
    0 0 0 8px rgba(255, 255, 255, 0.9);
}

.section-spacing {
  padding-top: 4rem;
  padding-bottom: 4rem;
}


/* =========================
   SECCIÓN MUNICIPIO / INEGI PREMIUM
========================= */

.municipio-section {
  position: relative;
  padding: 5rem 0;
  background:
    linear-gradient(135deg, #0b4f2c 0%, #08361f 38%, #0f172a 100%);
  color: white;
}

.municipio-bg-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.42;
}

.municipio-bg-glow-left {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.12);
}

.municipio-bg-glow-right {
  width: 20rem;
  height: 20rem;
  right: -5rem;
  bottom: 1rem;
  background: rgba(140, 0, 43, 0.18);
}

.municipio-grid-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 85%);
}

.municipio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}

.municipio-stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.municipio-hero-card,
.municipio-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
  backdrop-filter: blur(16px);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.municipio-hero-card::before,
.municipio-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 209, 0, 0.10), transparent 34%);
  pointer-events: none;
}

.municipio-hero-card {
  padding: 1.8rem 1.8rem 1.6rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.municipio-hero-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 55px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.municipio-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: white;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

.municipio-card-label {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.70);
  font-weight: 700;
}

.municipio-card-number {
  margin-top: 0.8rem;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: white;
  text-wrap: balance;
}

.municipio-card-copy {
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}

.municipio-card-footer {
  margin-top: 2rem;
}

.municipio-source-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.52rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  background: var(--color-accent);
  box-shadow: 0 10px 24px rgba(255, 209, 0, 0.24);
}

.municipio-side-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.municipio-stat-card {
  padding: 1.35rem 1.3rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.municipio-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.municipio-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.municipio-stat-label {
  margin-top: 1rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: rgba(255,255,255,0.68);
}

.municipio-stat-value {
  margin-top: 0.45rem;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: white;
}

.municipio-stat-meta {
  margin-top: 0.45rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.80);
}

.municipio-footnote {
  margin-top: 1.25rem;
  text-align: center;
}

.municipio-footnote p {
  display: inline-block;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.68);
  padding-top: 0.35rem;
}

@media (max-width: 1023px) {
  .municipio-stats-layout {
    grid-template-columns: 1fr;
  }

  .municipio-hero-card {
    padding: 1.5rem 1.4rem;
  }

  .municipio-side-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .municipio-section {
    padding: 4rem 0;
  }

  .municipio-side-grid {
    grid-template-columns: 1fr;
  }

  .municipio-card-number {
    font-size: 2.9rem;
  }

  .municipio-card-copy,
  .municipio-stat-meta {
    font-size: 0.95rem;
  }
}


/* =========================
   SECCIÓN TRÁMITES / ÁREAS PREMIUM
========================= */

.tramites-section {
  position: relative;
  padding: 5rem 0;
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f8fafc 100%);
}

.tramites-bg-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.45;
}

.tramites-bg-orb-left {
  width: 18rem;
  height: 18rem;
  top: 2rem;
  left: -5rem;
  background: rgba(140, 0, 43, 0.08);
}

.tramites-bg-orb-right {
  width: 20rem;
  height: 20rem;
  right: -6rem;
  bottom: 1rem;
  background: rgba(188, 149, 92, 0.14);
}

.tramites-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 88%);
}

.tramites-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
  backdrop-filter: blur(10px);
}

.tramites-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: 1.25rem;
  align-items: stretch;
}

.tramites-feature-card,
.tramites-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    background-color 0.32s ease;
}

.tramites-feature-card::before,
.tramites-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(188, 149, 92, 0.10), transparent 32%);
}

.tramites-feature-card:hover,
.tramites-card:hover {
  transform: translateY(-5px);
  border-color: rgba(140, 0, 43, 0.14);
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.11),
    0 0 0 1px rgba(140, 0, 43, 0.05) inset;
}

.tramites-feature-card {
  padding: 1.8rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(252,247,249,0.96) 100%);
}

.tramites-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tramites-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.tramites-icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.06);
  border: 1px solid rgba(140, 0, 43, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.feature-badge {
  width: 3.25rem;
  height: 3.25rem;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), #b01149);
  border-color: transparent;
  box-shadow: 0 18px 35px rgba(140, 0, 43, 0.18);
}

.tramites-card-kicker {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 800;
  color: var(--color-secondary);
}

.tramites-feature-title {
  margin-top: 0.9rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: var(--color-primary);
}

.tramites-feature-copy {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #475569;
  max-width: 32rem;
}

.tramites-feature-footer {
  margin-top: 2rem;
}

.tramites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.tramites-card {
  min-height: 250px;
  padding: 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.tramites-card-title {
  margin-top: 0.9rem;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.tramites-card-copy {
  margin-top: 0.75rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: #64748b;
  flex-grow: 1;
}

.tramites-link-text {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-primary);
  transition: gap 0.25s ease, color 0.25s ease;
}

.tramites-feature-card:hover .tramites-link-text,
.tramites-card:hover .tramites-link-text {
  gap: 0.6rem;
}

.tramites-card-accent {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,251,243,0.98) 100%);
}

@media (max-width: 1023px) {
  .tramites-layout {
    grid-template-columns: 1fr;
  }

  .tramites-feature-card {
    padding: 1.5rem;
  }
}

@media (max-width: 767px) {
  .tramites-section {
    padding: 4rem 0;
  }

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

  .tramites-feature-title {
    font-size: 2.2rem;
  }

  .tramites-card {
    min-height: auto;
  }
}


/* =========================
   FOOTER PREMIUM
========================= */

.footer-premium {
  position: relative;
  padding: 4.75rem 0 1.5rem;
  color: white;
  background:
    linear-gradient(135deg, #5e001d 0%, #8c002b 38%, #0b4f2c 100%);
}

.footer-bg-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.35;
}

.footer-bg-orb-left {
  width: 18rem;
  height: 18rem;
  left: -5rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.18);
}

.footer-bg-orb-right {
  width: 22rem;
  height: 22rem;
  right: -7rem;
  bottom: 0;
  background: rgba(255, 255, 255, 0.08);
}

.footer-grid-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 88%);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none;
  color: white;
}

.footer-brand-logo-wrap {
  position: relative;
  flex-shrink: 0;
}

.footer-brand-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,209,0,0.22) 0%, rgba(255,209,0,0) 75%);
}

.footer-brand-logo {
  position: relative;
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 0 6px rgba(255,255,255,0.08);
}

.footer-brand-copy {
  min-width: 0;
}

.footer-brand-kicker {
  display: inline-block;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--color-accent);
}

.footer-brand-title {
  margin-top: 0.5rem;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: white;
}

.footer-brand-subtitle {
  margin-top: 0.7rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}

.footer-contact-cards {
  display: grid;
  gap: 0.9rem;
}

.footer-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1rem;
  border-radius: 1rem;
  text-decoration: none;
  color: white;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition:
    transform 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.footer-contact-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    0 16px 28px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.footer-contact-card i,
.footer-contact-card svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--color-accent);
}

.footer-contact-label {
  display: inline-block;
  margin-bottom: 0.2rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: rgba(255,255,255,0.72);
}

.footer-contact-card p {
  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.footer-social-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: rgba(255,255,255,0.68);
}

.footer-social-link {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.footer-social-link:hover {
  transform: translateY(-2px);
  color: var(--color-accent);
  background: rgba(255,255,255,0.14);
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.footer-column-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.footer-links-list {
  display: grid;
  gap: 0.8rem;
}

.footer-links-list li {
  list-style: none;
}

.footer-links-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 0.96rem;
  line-height: 1.5;
  transition: color 0.25s ease, transform 0.25s ease, gap 0.25s ease;
}

.footer-links-list a::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255, 209, 0, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.10);
  flex-shrink: 0;
}

.footer-links-list a:hover {
  color: white;
  transform: translateX(2px);
  gap: 0.7rem;
}

.footer-cta-band {
  margin-top: 2rem;
  padding: 1.35rem 1.4rem;
  border-radius: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.footer-cta-kicker {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--color-accent);
}

.footer-cta-title {
  margin-top: 0.45rem;
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 900;
  color: white;
  letter-spacing: -0.02em;
}

.footer-cta-text {
  margin-top: 0.4rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
}

.footer-cta-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}

.footer-cta-button,
.footer-cta-secondary {
  text-decoration: none;
  font-weight: 800;
  border-radius: 999px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.footer-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 1rem;
  color: #0f172a;
  background: var(--color-accent);
  box-shadow: 0 14px 28px rgba(255, 209, 0, 0.18);
}

.footer-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(255, 209, 0, 0.24);
}

.footer-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 1rem;
  color: white;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}

.footer-cta-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
}

.footer-bottom {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.footer-copy {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.70);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-legal-links a,
.footer-legal-links span {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-legal-links a:hover {
  color: white;
}

@media (max-width: 1023px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-cta-band {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-cta-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal-links {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .footer-premium {
    padding-top: 4rem;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-brand-logo {
    width: 58px;
    height: 58px;
  }

  .footer-links-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .footer-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-cta-button,
  .footer-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}


/* Responsive */
@media (max-width: 1279px) {
  .quick-access-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .header-topbar-left {
    display: none;
  }

  .header-topbar-inner {
    min-height: 42px;
    justify-content: center;
  }

  .header-mainbar-inner {
    min-height: 78px;
  }

  .brand-logo {
    width: 52px;
    height: 52px;
  }

  .brand-subtitle {
    max-width: 180px;
  }

  .quick-access-strip {
    padding-top: 0.9rem;
  }

  .quick-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .quick-access-card {
    min-height: 98px;
    padding: 0.9rem 0.65rem;
  }
}


/* =========================
   TRANSPARENCIA PREMIUM
========================= */

.transparency-hero {
  position: relative;
  color: white;
  background:
    linear-gradient(135deg, #5e001d 0%, #8c002b 42%, #0b4f2c 100%);
}

.transparency-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.34;
}

.transparency-hero-orb-left {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.18);
}

.transparency-hero-orb-right {
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -2rem;
  background: rgba(255, 255, 255, 0.10);
}

.transparency-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 88%);
}

.transparency-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.transparency-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.transparency-main-shell {
  position: relative;
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.transparency-layout {
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.transparency-sidebar {
  position: sticky;
  top: 6.5rem;
}

.transparency-sidebar-shell {
  border-radius: 1.6rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.72) inset;
  padding: 1.25rem;
  backdrop-filter: blur(14px);
}

.transparency-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.transparency-sidebar-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), #b01149);
  box-shadow: 0 16px 30px rgba(140, 0, 43, 0.18);
}

.transparency-sidebar-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--color-secondary);
}

.transparency-sidebar-title {
  margin-top: 0.2rem;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.transparency-sidebar-copy {
  margin-top: 1rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #64748b;
}

.transparency-nav-list {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.85rem;
}

.transparency-nav-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  text-decoration: none;
  padding: 1rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #fff;
  color: inherit;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.transparency-nav-item:hover {
  transform: translateY(-2px);
  border-color: rgba(140, 0, 43, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #fcf7f9 100%);
  box-shadow:
    0 18px 32px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(140, 0, 43, 0.04) inset;
}

.transparency-nav-item.active {
  border-color: rgba(140, 0, 43, 0.16);

  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,247,249,1) 100%);
  box-shadow:
    0 20px 34px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(140, 0, 43, 0.05) inset;
}

.transparency-nav-item-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.06);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.transparency-nav-item.active .transparency-nav-item-icon {
  color: white;
  background: linear-gradient(135deg, var(--color-primary), #b01149);
  border-color: transparent;
}

.transparency-nav-item-copy {
  min-width: 0;
}

.transparency-nav-item-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
}

.transparency-nav-item-text {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.transparency-nav-item-arrow {
  color: #94a3b8;
  margin-top: 0.25rem;
}

.transparency-nav-item.active .transparency-nav-item-arrow {
  color: var(--color-primary);
}

.transparency-content-area {
  min-width: 0;
}

.transparency-content-shell {
  border-radius: 1.8rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 22px 46px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  overflow: hidden;
  min-height: 720px;
}

.transparency-content-header {
  padding: 2rem 2rem 1.2rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(255,255,255,1) 100%);
}

.transparency-content-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.transparency-content-title {
  margin-top: 1rem;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.transparency-content-subtitle {
  margin-top: 0.8rem;
  max-width: 50rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
}

.transparency-empty-state {
  padding: 2.5rem 2rem 3rem;
  text-align: center;
}

.transparency-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  margin: 0 auto;
  border-radius: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), #b01149);
  box-shadow: 0 20px 36px rgba(140, 0, 43, 0.18);
}

.transparency-empty-title {
  margin-top: 1.4rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.transparency-empty-text {
  margin: 0.9rem auto 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
}

.transparency-empty-pills {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.transparency-empty-pills span {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.06);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

@media (max-width: 1023px) {
  .transparency-layout {
    grid-template-columns: 1fr;
  }

  .transparency-sidebar {
    position: static;
    display: block !important;
  }

  .transparency-content-shell {
    min-height: 640px;
  }
}

@media (max-width: 767px) {
  .transparency-content-header,
  .transparency-empty-state {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .transparency-content-shell {
    border-radius: 1.35rem;
  }

  .transparency-sidebar-shell {
    border-radius: 1.3rem;
  }

  .transparency-empty-title {
    font-size: 1.25rem;
  }
}


/* =========================
   REFINAMIENTO PREMIUM DEL CONTENIDO PRINCIPAL - TRANSPARENCIA
========================= */

#content-display {
  overflow: hidden;
}

/* Título principal del contenido dinámico */
#content-display .content-title,
#content-display .module-title,
#content-display .obligation-title,
#content-display h1:first-of-type,
#content-display h2:first-of-type {
  display: block;
  padding: 1.5rem 1.5rem 0;
  margin: 0;
/*  font-size: clamp(1.7rem, 2.8vw, 2.35rem);*/
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}

/* Ocultar icono forzado del título principal */
#content-display .content-title i,
#content-display .content-title svg,
#content-display .module-title i,
#content-display .module-title svg,
#content-display .obligation-title i,
#content-display .obligation-title svg,
#content-display h1:first-of-type i,
#content-display h1:first-of-type svg,
#content-display h2:first-of-type i,
#content-display h2:first-of-type svg {
  display: none !important;
}

/* Párrafo descriptivo bajo el título */
#content-display .content-description,
#content-display .module-description,
#content-display .obligation-description,
#content-display h1:first-of-type + p,
#content-display h2:first-of-type + p {
  max-width: 58rem;
  padding: 0.95rem 2rem 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: #5b6677;
  text-align: justify;
  text-justify: inter-word;
}

/* Línea editorial bajo el párrafo */
#content-display .content-description::after,
#content-display .module-description::after,
#content-display .obligation-description::after,
#content-display h1:first-of-type + p::after,
#content-display h2:first-of-type + p::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 1.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* Subtítulo secundario tipo editorial */
#content-display .section-title,
#content-display .block-title,
#content-display h3 {
  margin-top: 1.35rem;
  margin-bottom: 0.9rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-primary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Contenedor de secciones / acordeón con mejor respiración superior */
#content-display .accordion-wrapper,
#content-display .accordion-container,
#content-display .sections-wrapper,
#content-display .compliance-sections {
  padding: 0.35rem 1.4rem 1.5rem;
}

/* Espaciado del primer item respecto al subtítulo */
#content-display .accordion-item:first-child {
  margin-top: 0.55rem;
}

/* Márgenes laterales y separación vertical de acordeones */
#content-display .accordion-item {
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  margin-bottom: 0.75rem;
}

/* Shell más elegante */
.transparency-content-shell {
  border-radius: 1.8rem;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 22px 46px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  overflow: hidden;
  min-height: 720px;
}

@media (max-width: 767px) {
  #content-display .content-title,
  #content-display .module-title,
  #content-display .obligation-title,
  #content-display h1:first-of-type,
  #content-display h2:first-of-type {
    padding: 1.35rem 1.25rem 0;
    font-size: 1.45rem;
  }

  #content-display .content-description,
  #content-display .module-description,
  #content-display .obligation-description,
  #content-display h1:first-of-type + p,
  #content-display h2:first-of-type + p,
  #content-display .section-title,
  #content-display .block-title,
  #content-display h3 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  #content-display .accordion-wrapper,
  #content-display .accordion-container,
  #content-display .sections-wrapper,
  #content-display .compliance-sections {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #content-display .accordion-item {
    margin-left: 0;
    margin-right: 0;
  }
}


/* Responsive */
@media (min-width: 1024px) { /* lg */
    .sticky-lg {
        position: sticky;
        top: 6rem; /* Deja espacio para el menú principal sticky */
    }
}

@media (min-width: 768px) { /* md */
    .btn-menu-square {
        padding: 0.75rem 1rem; /* Más espacio en desktop */
        min-width: 150px; /* Tamaño mínimo para desktop */
    }
    .btn-menu-square svg {
        width: 2.5rem; /* Icono más grande en desktop */
        height: 2.5rem;
    }
    .btn-menu-square span {
        font-size: 0.9rem; /* Texto más grande en desktop */
    }
}

/* =========================
   GACETA PREMIUM
========================= */

.gaceta-hero {
  position: relative;
  color: white;
  background:
    linear-gradient(135deg, #0b4f2c 0%, #8c002b 46%, #5e001d 100%);
}

.gaceta-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.34;
}

.gaceta-hero-orb-left {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.16);
}

.gaceta-hero-orb-right {
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -2rem;
  background: rgba(255, 255, 255, 0.10);
}

.gaceta-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 88%);
}

.gaceta-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.gaceta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.gaceta-main-shell {
  position: relative;
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.gaceta-layout {
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.gaceta-sidebar {
  position: sticky;
  top: 6.5rem;
}

.gaceta-sidebar-shell {
  border-radius: 1.6rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.72) inset;
  padding: 1.25rem;
  backdrop-filter: blur(14px);
}

.gaceta-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.gaceta-sidebar-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--color-secondary), #118347);
  box-shadow: 0 16px 30px rgba(10, 107, 48, 0.18);
}

.gaceta-sidebar-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--color-secondary);
}

.gaceta-sidebar-title {
  margin-top: 0.2rem;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.gaceta-sidebar-copy {
  margin-top: 1rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #64748b;
}

.gaceta-nav-list {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.85rem;
}

.gaceta-nav-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  text-decoration: none;
  padding: 1rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #fff;
  color: inherit;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.gaceta-nav-item:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 107, 48, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 100%);
  box-shadow:
    0 18px 32px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(10, 107, 48, 0.04) inset;
}

.gaceta-nav-item.active {
  border-color: rgba(10, 107, 48, 0.16);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,252,248,1) 100%);
  box-shadow:
    0 20px 34px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(10, 107, 48, 0.05) inset;
}

.gaceta-nav-item-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  background: rgba(10, 107, 48, 0.06);
  border: 1px solid rgba(10, 107, 48, 0.08);
}

.gaceta-nav-item.active .gaceta-nav-item-icon {
  color: white;
  background: linear-gradient(135deg, var(--color-secondary), #118347);
  border-color: transparent;
}

.gaceta-nav-item-copy {
  min-width: 0;
}

.gaceta-nav-item-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
}

.gaceta-nav-item-text {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.gaceta-nav-item-arrow {
  color: #94a3b8;
  margin-top: 0.25rem;
}

.gaceta-nav-item.active .gaceta-nav-item-arrow {
  color: var(--color-secondary);
}

.gaceta-content-area {
  min-width: 0;
}

.gaceta-content-shell {
  border-radius: 1.8rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 22px 46px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  overflow: hidden;
  min-height: 720px;
}

.gaceta-content-header {
  padding: 2rem 2rem 1.2rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(255,255,255,1) 100%);
}

.gaceta-content-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-secondary);
  background: rgba(10, 107, 48, 0.07);
  border: 1px solid rgba(10, 107, 48, 0.08);
}

.gaceta-content-title {
  margin-top: 1rem;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.gaceta-content-subtitle {
  margin-top: 0.8rem;
  max-width: 50rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
}

.gaceta-empty-state {
  padding: 2.5rem 2rem 3rem;
  text-align: center;
}

.gaceta-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  margin: 0 auto;
  border-radius: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--color-secondary), #118347);
  box-shadow: 0 20px 36px rgba(10, 107, 48, 0.18);
}

.gaceta-empty-title {
  margin-top: 1.4rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.gaceta-empty-text {
  margin: 0.9rem auto 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
}

.gaceta-empty-pills {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.gaceta-empty-pills span {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-secondary);
  background: rgba(10, 107, 48, 0.06);
  border: 1px solid rgba(10, 107, 48, 0.08);
}

@media (max-width: 1023px) {
  .gaceta-layout {
    grid-template-columns: 1fr;
  }

  .gaceta-sidebar {
    position: static;
    display: block !important;
  }

  .gaceta-content-shell {
    min-height: 640px;
  }
}

@media (max-width: 767px) {
  .gaceta-content-header,
  .gaceta-empty-state {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .gaceta-content-shell {
    border-radius: 1.35rem;
  }

  .gaceta-sidebar-shell {
    border-radius: 1.3rem;
  }

  .gaceta-empty-title {
    font-size: 1.25rem;
  }
}

/* =========================
   SEVAC PREMIUM
========================= */

.sevac-hero {
  position: relative;
  color: white;
  background:
    linear-gradient(135deg, #0f172a 0%, #0b4f2c 38%, #8c002b 100%);
}

.sevac-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.34;
}

.sevac-hero-orb-left {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.14);
}

.sevac-hero-orb-right {
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -2rem;
  background: rgba(255, 255, 255, 0.10);
}

.sevac-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 88%);
}

.sevac-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.sevac-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.sevac-main-shell {
  position: relative;
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.sevac-layout {
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.sevac-sidebar {
  position: sticky;
  top: 6.5rem;
}

.sevac-sidebar-shell {
  border-radius: 1.6rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.72) inset;
  padding: 1.25rem;
  backdrop-filter: blur(14px);
}

.sevac-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.sevac-sidebar-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, #0f172a, var(--color-secondary));
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
}

.sevac-sidebar-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--color-secondary);
}

.sevac-sidebar-title {
  margin-top: 0.2rem;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.sevac-sidebar-copy {
  margin-top: 1rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #64748b;
}

.sevac-nav-list {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.85rem;
}

.sevac-nav-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  text-decoration: none;
  padding: 1rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #fff;
  color: inherit;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.sevac-nav-item:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 107, 48, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 100%);
  box-shadow:
    0 18px 32px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(10, 107, 48, 0.04) inset;
}

.sevac-nav-item.active {
  border-color: rgba(10, 107, 48, 0.16);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,252,248,1) 100%);
  box-shadow:
    0 20px 34px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(10, 107, 48, 0.05) inset;
}

.sevac-nav-item-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  background: rgba(10, 107, 48, 0.06);
  border: 1px solid rgba(10, 107, 48, 0.08);
}

.sevac-nav-item.active .sevac-nav-item-icon {
  color: white;
  background: linear-gradient(135deg, var(--color-secondary), #118347);
  border-color: transparent;
}

.sevac-nav-item-copy {
  min-width: 0;
}

.sevac-nav-item-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
}

.sevac-nav-item-text {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.sevac-nav-item-arrow {
  color: #94a3b8;
  margin-top: 0.25rem;
}

.sevac-nav-item.active .sevac-nav-item-arrow {
  color: var(--color-secondary);
}

.sevac-content-area {
  min-width: 0;
}

.sevac-content-shell {
  border-radius: 1.8rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 22px 46px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  overflow: hidden;
  min-height: 720px;
}

.sevac-content-header {
  padding: 2rem 2rem 1.2rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(255,255,255,1) 100%);
}

.sevac-content-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-secondary);
  background: rgba(10, 107, 48, 0.07);
  border: 1px solid rgba(10, 107, 48, 0.08);
}

.sevac-content-title {
  margin-top: 1rem;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.sevac-content-subtitle {
  margin-top: 0.8rem;
  max-width: 50rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
}

.sevac-empty-state {
  padding: 2.5rem 2rem 3rem;
  text-align: center;
}

.sevac-empty-icon {
  width: 4.75rem;
  height: 4.75rem;
  margin: 0 auto;
  border-radius: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--color-secondary), #118347);
  box-shadow: 0 20px 36px rgba(10, 107, 48, 0.18);
}

.sevac-empty-title {
  margin-top: 1.4rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.sevac-empty-text {
  margin: 0.9rem auto 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
}

.sevac-empty-pills {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.sevac-empty-pills span {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-secondary);
  background: rgba(10, 107, 48, 0.06);
  border: 1px solid rgba(10, 107, 48, 0.08);
}

@media (max-width: 1023px) {
  .sevac-layout {
    grid-template-columns: 1fr;
  }

  .sevac-sidebar {
    position: static;
    display: block !important;
  }

  .sevac-content-shell {
    min-height: 640px;
  }
}

@media (max-width: 767px) {
  .sevac-content-header,
  .sevac-empty-state {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sevac-content-shell {
    border-radius: 1.35rem;
  }

  .sevac-sidebar-shell {
    border-radius: 1.3rem;
  }

  .sevac-empty-title {
    font-size: 1.25rem;
  }
}

/* =========================
   DIRECTORIO PREMIUM
========================= */

.directorio-hero {
  position: relative;
  color: white;
  background:
    linear-gradient(135deg, #8c002b 0%, #0b4f2c 40%, #0f172a 100%);
}

.directorio-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.34;
}

.directorio-hero-orb-left {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.14);
}

.directorio-hero-orb-right {
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -2rem;
  background: rgba(255, 255, 255, 0.10);
}

.directorio-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 88%);
}

.directorio-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.directorio-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.directorio-main-shell {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.directorio-filters-shell {
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  padding: 1rem;
  margin-bottom: 2rem;
}

.directorio-filters-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
}

.directorio-filter-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.directorio-input,
.directorio-select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: #334155;
}

.directorio-section {
  margin-top: 2.5rem;
}

.directorio-section-head {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

.directorio-section-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.directorio-section-title {
  margin-top: 0.9rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.1;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.directorio-section-copy {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #64748b;
}

.directorio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.directorio-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.directorio-card {
  border-radius: 1.6rem;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.72) inset;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.directorio-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px rgba(15, 23, 42, 0.11),
    0 0 0 1px rgba(140, 0, 43, 0.05) inset;
}

.directorio-card-featured {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,247,249,1) 100%);
}

.directorio-photo-wrap {
  aspect-ratio: 4 / 4.3;
  background: #e5e7eb;
  overflow: hidden;
}

.small-photo {
  aspect-ratio: 4 / 3.5;
}

.directorio-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.directorio-card-body {
  padding: 1.35rem 1.25rem 1.4rem;
}

.directorio-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.directorio-name {
  margin-top: 0.9rem;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.directorio-position {
  margin-top: 0.45rem;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.directorio-level {
  margin-top: 0.3rem;
  font-size: 0.86rem;
  color: #64748b;
}

.directorio-meta-list {
  margin-top: 1rem;
  display: grid;
  gap: 0.7rem;
}

.directorio-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
}

.directorio-meta-item i,
.directorio-meta-item svg {
  flex-shrink: 0;
  margin-top: 0.12rem;
  color: var(--color-primary);
}

.directorio-card-cta {
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-primary);
}

.directorio-note-shell {
  margin-top: 3rem;
  border-radius: 1.6rem;
  padding: 1.8rem;
  background: linear-gradient(135deg, rgba(140,0,43,0.05), rgba(10,107,48,0.06));
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.directorio-note-kicker {
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.directorio-note-title {
  margin-top: 0.7rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.directorio-note-text {
  margin-top: 0.65rem;
  max-width: 55rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #64748b;
}

@media (max-width: 1023px) {
  .directorio-filters-grid,
  .directorio-grid,
  .directorio-grid-compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .directorio-card-body {
    padding: 1.15rem 1rem 1.2rem;
  }

  .directorio-section-title {
    font-size: 1.75rem;
  }

  .directorio-note-shell {
    padding: 1.25rem;
  }
}

.directorio-hero-btn,
.directorio-hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 50px;
  padding: 0 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.directorio-hero-btn {
  color: #0f172a;
  background: var(--color-accent);
  box-shadow: 0 14px 28px rgba(255, 209, 0, 0.22);
}

.directorio-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(255, 209, 0, 0.28);
}

.directorio-hero-btn-secondary {
  color: white;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.directorio-hero-btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

/* =========================
   MENSAJE DEL PRESIDENTE PREMIUM
========================= */

.mensaje-hero {
  position: relative;
  color: white;
  background:
    linear-gradient(135deg, #8c002b 0%, #5e001d 38%, #0b4f2c 100%);
}

.mensaje-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.34;
}

.mensaje-hero-orb-left {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.16);
}

.mensaje-hero-orb-right {
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -2rem;
  background: rgba(255, 255, 255, 0.10);
}

.mensaje-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 88%);
}

.mensaje-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.mensaje-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.mensaje-main-shell {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.mensaje-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.mensaje-aside {
  position: sticky;
  top: 6.5rem;
}

.mensaje-photo-shell {
  border-radius: 1.6rem;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.72) inset;
}

.mensaje-photo-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e5e7eb;
}

.mensaje-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mensaje-aside-caption {
  padding: 1.2rem 1.2rem 1.35rem;
}

.mensaje-aside-kicker {
  display: inline-flex;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.mensaje-aside-title {
  margin-top: 0.9rem;
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.mensaje-aside-text {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: #64748b;
}

.mensaje-content-shell {
  border-radius: 1.8rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 22px 46px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  overflow: hidden;
}

.mensaje-content-header {
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(255,255,255,1) 100%);
}

.mensaje-content-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.mensaje-content-title {
  margin-top: 1rem;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.12;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.mensaje-content-intro {
  margin-top: 0.85rem;
  max-width: 52rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #64748b;
}

.mensaje-editorial-body {
  padding: 2rem;
  display: grid;
  gap: 1.25rem;
}

.mensaje-editorial-body p {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.9;
  color: #334155;
  text-align: justify;
  text-justify: inter-word;
}

.mensaje-principios-shell {
  margin-top: 2.25rem;
  border-radius: 1.8rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 22px 46px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  padding: 2rem;
}

.mensaje-section-kicker {
  display: inline-flex;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.mensaje-section-title {
  margin-top: 0.9rem;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  max-width: 56rem;
}

.mensaje-principios-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.mensaje-principio-card {
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,247,249,1) 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  padding: 1.25rem;
}

.mensaje-principio-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), #b01149);
  box-shadow: 0 16px 30px rgba(140, 0, 43, 0.18);
}

.mensaje-principio-title {
  margin-top: 1rem;
  font-size: 1.08rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.mensaje-principio-text {
  margin-top: 0.6rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: #64748b;
}

.mensaje-cierre-shell {
  margin-top: 2.25rem;
  border-radius: 1.8rem;
  padding: 2.2rem 2rem;
  background:
    linear-gradient(135deg, rgba(140,0,43,0.05), rgba(10,107,48,0.06));
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.mensaje-cierre-content {
  max-width: 58rem;
  margin: 0 auto;
  text-align: center;
}

.mensaje-cierre-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #334155;
  text-align: justify;
  text-justify: inter-word;
}

.mensaje-firma-block {
  margin-top: 2rem;
}

.mensaje-firma-kicker {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.mensaje-firma-nombre {
  margin-top: 0.75rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.mensaje-firma-cargo {
  margin-top: 0.35rem;
  font-size: 1.05rem;
  color: #64748b;
}

.mensaje-firma-cargo span {
  color: var(--color-primary);
  font-weight: 800;
}

.mensaje-firma-line {
  width: min(420px, 100%);
  height: 4px;
  margin: 1.3rem auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #8c002b 0%,
    #bc955c 30%,
    #0ea5e9 62%,
    #475569 100%
  );
}

@media (max-width: 1023px) {
  .mensaje-layout {
    grid-template-columns: 1fr;
  }

  .mensaje-aside {
    position: static;
  }

  .mensaje-principios-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .mensaje-content-header,
  .mensaje-editorial-body,
  .mensaje-principios-shell,
  .mensaje-cierre-shell {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .mensaje-content-title,
  .mensaje-section-title {
    font-size: 1.6rem;
  }

  .mensaje-firma-nombre {
    font-size: 2rem;
  }
}


/* =========================
   ORGANIGRAMA PREMIUM REFINADO
========================= */

.organigrama-hero {
  position: relative;
  color: white;
  background: linear-gradient(135deg, #0b4f2c 0%, #8c002b 42%, #0f172a 100%);
}

.organigrama-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.34;
}

.organigrama-hero-orb-left {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  top: 2rem;
  background: rgba(255, 209, 0, 0.16);
}

.organigrama-hero-orb-right {
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -2rem;
  background: rgba(255, 255, 255, 0.10);
}

.organigrama-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 34px 34px;
}

.organigrama-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.organigrama-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.organigrama-hero-btn,
.organigrama-hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 50px;
  padding: 0 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.organigrama-hero-btn {
  color: #0f172a;
  background: var(--color-accent);
  box-shadow: 0 14px 28px rgba(255, 209, 0, 0.22);
}

.organigrama-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(255, 209, 0, 0.28);
}

.organigrama-hero-btn-secondary {
  color: white;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.organigrama-hero-btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

.organigrama-main-shell {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.organigrama-tools-shell,
.organigrama-shell,
.organigrama-mobile-shell,
.organigrama-note-shell {
  border-radius: 1.4rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(255,255,255,0.7) inset;
}

.organigrama-tools-shell {
  padding: 1rem;
  margin-bottom: 2rem;
}

.organigrama-tools-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 1rem;
  align-items: center;
}

.organigrama-filter-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.organigrama-input,
.organigrama-select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: #334155;
}

.organigrama-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.organigrama-action-btn,
.organigrama-action-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: #fff;
  color: #0f172a;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.organigrama-action-btn:hover,
.organigrama-action-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.organigrama-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.organigrama-stat-card {
  border-radius: 1rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.organigrama-stat-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
}

.organigrama-stat-value {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.15rem;
  color: #0f172a;
  line-height: 1.3;
}

.organigrama-shell,
.organigrama-mobile-shell {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.organigrama-shell-header {
  max-width: 54rem;
  margin-bottom: 1.5rem;
}

.organigrama-section-kicker,
.organigrama-note-kicker {
  display: inline-flex;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(140, 0, 43, 0.07);
  border: 1px solid rgba(140, 0, 43, 0.08);
}

.organigrama-section-title,
.organigrama-note-title {
  margin-top: 0.9rem;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.organigrama-section-copy,
.organigrama-note-text {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #64748b;
}

/* =========================
   CANVAS / ÁRBOL
========================= */

.organigrama-canvas {
  --tree-gap: 0.7rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.75rem 0 1.5rem;
  scroll-behavior: smooth;
}

.tree-root,
.tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-root {
  display: flex;
  justify-content: center;
  min-width: max-content;
  padding: 0 1rem;
}

.tree-node {
  position: relative;
  text-align: center;
  padding: 1rem 0.45rem 0;
  min-width: 0;
  z-index: 1;
}

.tree-node > .tree-card {
  position: relative;
  z-index: 3;
}

.tree-node > .tree-children {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: var(--tree-gap);
  margin-top: 1rem;
  min-width: max-content;
  overflow: visible;
  z-index: 1;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    margin-top 0.28s ease;
  opacity: 1;
  transform: translateY(0);
}

.tree-node.collapsed > .tree-children {
  display: none;
}

.tree-node.filtered-out {
  display: none !important;
}

/* =========================
   NODOS / CARDS
========================= */

.tree-card {
  width: 196px;
  min-height: 96px;
  margin: 0 auto;
  padding: 0.85rem 0.9rem 0.9rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  text-align: left;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.tree-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(140, 0, 43, 0.04) inset;
}

.tree-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.tree-card-type {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.58rem;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
  white-space: nowrap;
}

.tree-card-title {
  margin-top: 0.62rem;
  font-size: 0.88rem;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: pretty;
}

.tree-toggle-btn {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  flex-shrink: 0;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease,
    color 0.24s ease;
}

/* RAÍZ */
.tree-card-raiz {
  width: 230px;
  min-height: 104px;
  background: linear-gradient(135deg, #750020 0%, #9d163f 55%, #b01b4a 100%);
  border: 1px solid rgba(122, 0, 37, 0.38);
  box-shadow:
    0 18px 38px rgba(122, 0, 37, 0.24),
    0 0 0 1px rgba(255,255,255,0.08) inset;
}

.tree-card-raiz .tree-card-title,
.tree-card-raiz .tree-card-type {
  color: #ffffff;
}

.tree-card-raiz .tree-card-type {
  background: rgba(255,255,255,0.16);
}

.tree-card-raiz .tree-toggle-btn {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.20);
  color: #ffffff;
}

/* ÓRGANO SUPERIOR */
.tree-card-organo_superior {
  background: linear-gradient(180deg, #f3fbf7 0%, #ffffff 100%);
  border-color: rgba(10, 107, 48, 0.22);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(10, 107, 48, 0.05) inset;
}

.tree-card-organo_superior .tree-card-type {
  background: rgba(10, 107, 48, 0.10);
  color: #0b6b30;
}

.tree-card-organo_superior .tree-card-title {
  color: #14532d;
}

/* DIRECCIÓN */
.tree-card-direccion {
  background: linear-gradient(180deg, #fffaf8 0%, #ffffff 100%);
  border-color: rgba(188, 149, 92, 0.28);
}

.tree-card-direccion .tree-card-type {
  background: rgba(188, 149, 92, 0.12);
  color: #8b5e2e;
}

/* UNIDAD */
.tree-card-unidad {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-color: rgba(59, 130, 246, 0.22);
}

.tree-card-unidad .tree-card-type {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
}

/* DEPARTAMENTO */
.tree-card-departamento {
  background: linear-gradient(180deg, #fbfbfc 0%, #ffffff 100%);
  border-color: rgba(100, 116, 139, 0.22);
}

.tree-card-departamento .tree-card-type {
  background: rgba(100, 116, 139, 0.10);
  color: #475569;
}

/* APOYO */
.tree-card-apoyo {
  background: linear-gradient(180deg, #fff8f2 0%, #ffffff 100%);
  border-color: rgba(245, 158, 11, 0.22);
}

.tree-card-apoyo .tree-card-type {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

/* GRUPO */
.tree-card-grupo {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-color: rgba(71, 85, 105, 0.18);
}

.tree-card-grupo .tree-card-type {
  background: rgba(71, 85, 105, 0.10);
  color: #475569;
}

/* =========================
   CONECTORES EXACTOS DEL ÁRBOL
========================= */

.tree-node {
  position: relative;
  text-align: center;
  padding: 1rem 0.5rem 0;
  min-width: 0;
  z-index: 1;
}

.tree-node > .tree-card {
  position: relative;
  z-index: 3;
}

.tree-node > .tree-children {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.7rem;
  margin-top: 1rem;
  min-width: max-content;
  overflow: visible;
  z-index: 1;

  /* variables calculadas por JS */
  --connector-top: -0.95rem;
  --connector-left: 50%;
  --connector-width: 0px;
}

/* Vertical que baja del padre */
.tree-node > .tree-children::before {
  content: "";
  position: absolute;
  top: var(--connector-top);
  left: 50%;
  width: 2px;
  height: 0.95rem;
  background: #64748b;
  transform: translateX(-50%);
  z-index: 1;
}

/* Horizontal exacta calculada por JS */
.tree-node > .tree-children.has-multiple-children::after {
  content: "";
  position: absolute;
  top: var(--connector-top);
  left: var(--connector-left);
  width: var(--connector-width);
  height: 2px;
  background: #64748b;
  z-index: 1;
}

/* Si solo hay un hijo, no hay horizontal */
.tree-node > .tree-children.is-single-child::after {
  display: none;
}

/* Vertical por cada hijo */
.tree-node > .tree-children > .tree-node::before {
  content: "";
  position: absolute;
  top: var(--connector-top);
  left: 50%;
  width: 2px;
  height: 0.95rem;
  background: #64748b;
  transform: translateX(-50%);
  z-index: 2;
}

/* Nunca dibujar horizontales por hijo */
.tree-node > .tree-children > .tree-node::after {
  display: none !important;
}

/* =========================
   ESTADOS ACTIVOS
========================= */

.tree-node.is-active > .tree-card {
  border-color: rgba(140, 0, 43, 0.30);
  box-shadow:
    0 0 0 2px rgba(140, 0, 43, 0.08),
    0 18px 36px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.tree-node.is-ancestor > .tree-card {
  border-color: rgba(10, 107, 48, 0.28);
  box-shadow:
    0 0 0 1px rgba(10, 107, 48, 0.08),
    0 12px 26px rgba(15, 23, 42, 0.08);
}

.tree-node.is-active > .tree-card .tree-card-title {
  color: var(--color-primary);
}

.tree-node.is-ancestor > .tree-card .tree-card-title {
  color: var(--color-secondary);
}

.tree-node.is-active > .tree-card .tree-toggle-btn {
  border-color: rgba(140, 0, 43, 0.18);
  color: var(--color-primary);
}

.tree-node.is-ancestor > .tree-card .tree-toggle-btn {
  border-color: rgba(10, 107, 48, 0.18);
  color: var(--color-secondary);
}

/* Excepción para el nodo raíz */
.tree-node.is-active > .tree-card-raiz .tree-card-title,
.tree-node.is-ancestor > .tree-card-raiz .tree-card-title {
  color: #ffffff;
}

.tree-node.is-active > .tree-card-raiz .tree-card-type,
.tree-node.is-ancestor > .tree-card-raiz .tree-card-type {
  color: #ffffff;
  background: rgba(255,255,255,0.18);
}

.tree-node.is-active > .tree-card-raiz .tree-toggle-btn,
.tree-node.is-ancestor > .tree-card-raiz .tree-toggle-btn {
  color: #ffffff;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}

/* =========================
   MÓVIL
========================= */

.organigrama-mobile-list {
  display: grid;
  gap: 0.8rem;
}

.organigrama-mobile-node {
  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,0.14);
  background: #fff;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(255,255,255,0.72) inset;
}

.organigrama-mobile-node.filtered-out {
  display: none !important;
}

.organigrama-mobile-header {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem;
  transition:
    background-color 0.24s ease,
    color 0.24s ease,
    transform 0.24s ease;
}

.organigrama-mobile-title {
  font-size: 0.92rem;
  font-weight: 800;
}

.organigrama-mobile-type {
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  line-height: 1.2;
}

.organigrama-mobile-children {
  padding: 0 0.7rem 0.7rem 1rem;
  overflow: hidden;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
  opacity: 1;
  transform: translateY(0);
}

.organigrama-mobile-node.collapsed > .organigrama-mobile-children {
  display: none;
}

.organigrama-mobile-arrow {
  color: #64748b;
  margin-top: 0.15rem;
  flex-shrink: 0;
  transition: transform 0.24s ease;
}

.organigrama-mobile-node.collapsed .organigrama-mobile-arrow {
  transform: rotate(-90deg);
}

.organigrama-mobile-node.is-active {
  border-color: rgba(140, 0, 43, 0.24);
  box-shadow:
    0 0 0 2px rgba(140, 0, 43, 0.06),
    0 14px 28px rgba(15, 23, 42, 0.08);
}

.organigrama-mobile-node.is-ancestor {
  border-color: rgba(10, 107, 48, 0.22);
  box-shadow:
    0 0 0 1px rgba(10, 107, 48, 0.06),
    0 10px 22px rgba(15, 23, 42, 0.06);
}

.organigrama-mobile-node.is-active .organigrama-mobile-title {
  color: var(--color-primary);
}

.organigrama-mobile-node.is-ancestor .organigrama-mobile-title {
  color: var(--color-secondary);
}

.organigrama-note-shell {
  padding: 1.8rem;
}

@media (max-width: 1279px) {
  .tree-card {
    width: 182px;
    min-height: 92px;
    padding: 0.8rem 0.82rem 0.84rem;
  }

  .tree-card-raiz {
    width: 220px;
  }

  .tree-card-title {
    font-size: 0.84rem;
  }

  .tree-node {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .tree-node > .tree-children {
    gap: 0.55rem;
  }
}

@media (max-width: 1023px) {
  .organigrama-tools-grid {
    grid-template-columns: 1fr;
  }

  .organigrama-stats-grid {
    grid-template-columns: 1fr;
  }

  .organigrama-actions {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .organigrama-shell,
  .organigrama-mobile-shell,
  .organigrama-tools-shell,
  .organigrama-note-shell {
    padding: 1rem;
  }

  .organigrama-section-title,
  .organigrama-note-title {
    font-size: 1.45rem;
  }

  .organigrama-mobile-title {
    font-size: 0.9rem;
  }
}

.hero-transparency-cta{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;

    padding: 0.95rem 1.6rem;

    border-radius: 1rem;

    font-weight: 800;
    font-size: 0.98rem;
    letter-spacing: 0.01em;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #D4A017 0%,
            #F4C542 45%,
            #E0A800 100%
        );

    box-shadow:
        0 12px 30px rgba(212, 160, 23, 0.30),
        0 4px 12px rgba(0,0,0,0.18);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;

    z-index: 2;
}

.hero-transparency-cta::before{
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.30),
            rgba(255,255,255,0)
        );

    opacity: 0.8;

    pointer-events: none;
}

.hero-transparency-cta:hover{
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(212,160,23,0.40),
        0 10px 20px rgba(0,0,0,0.22);

    filter: brightness(1.03);
}

.hero-transparency-cta:active{
    transform: translateY(-1px) scale(0.99);
}

.hero-transparency-cta-icon{
    width: 2rem;
    height: 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: rgba(255,255,255,0.18);

    backdrop-filter: blur(6px);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.hero-transparency-cta:hover .hero-transparency-cta-icon{
    transform: translateX(3px);

    background: rgba(255,255,255,0.28);
}