:root{
  --space-cadet:#233256;
  --catalina-blue:#0A1D7A;
 /* --cardinal:#CA1F3D;*/
  --cardinal:#233256;
  --jordy-blue:#8FBAE5;
  --ghost-white:#F9F9F9;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family:'Poppins',sans-serif;
  background:var(--ghost-white);
  overscroll-behavior-x: none;
}

/* Evita scroll horizontal accidental (y el "espacio blanco") */
body{ overflow-x:hidden; }

/* Hero */
.hero-animated{
  background:var(--catalina-blue);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-animated::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(143,186,229,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(202,31,61,0.15) 0%, transparent 50%);
  animation:gradient-shift 10s ease infinite;
  z-index:-1;
}
@keyframes gradient-shift{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* Cards */
.card-modern{
  background:#fff;
  border-radius:1rem;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.card-modern:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 20px 40px rgba(35,50,86,.15);
}

.glass-card{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
}

.badge{
  display:inline-block;
  padding:.25rem .75rem;
  border-radius:9999px;
  font-size:.75rem;
  font-weight:600;
}

/* FIX: Instagram embed puede generar overflow por min-width inline */
.instagram-embed-wrap{
  width:100%;
  overflow:hidden;
  border-radius:12px;
}
.instagram-media{
  max-width:100% !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}

/* Utilidad simple de clamp sin plugin */
.clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.clamp-3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Logos */
/* Logos (responsive) */
.logo-left{
  height: auto;
  width: clamp(170px, 18vw, 300px); /* móvil->desktop */
  max-height: 72px;                 /* evita que se haga gigante */
  object-fit: contain;
  display:block;
}

/* ============================================================
   QUICK SERVICES v2
   - Menos espacios en blanco (shell + gaps)
   - Mobile: horizontal scroll OR vertical list
   - Desktop: grid OR carousel
   - Íconos via data-icon (FA6 Free Solid) sin clases fa-*
============================================================ */

/* -------- Shell / contenedor padre -------- */
.qs-shell{
  background:#fff;
  border-radius: 1.5rem;
  border: 1px solid rgba(17,24,39,.06);
  box-shadow: 0 14px 30px rgba(35,50,86,.10);
  padding: 18px;
}
@media (min-width: 640px){
  .qs-shell{ padding: 22px; }
}

/* -------- Header -------- */
.qs-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px; /* menos aire */
}
.qs-title{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--space-cadet);
}

/* -------- Nav (desktop) -------- */
.qs-nav{ gap: 10px; }

.qs-nav-btn{
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  color: var(--space-cadet);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(35,50,86,.06);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.qs-nav-btn:hover{
  transform: translateY(-1px);
  filter: brightness(.99);
  box-shadow: 0 14px 22px rgba(35,50,86,.08);
}
.qs-nav-btn:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 3px;
}

/* -------- Scroller (horizontal) -------- */
.qs-scroller{
  display:flex;
  align-items: stretch;
  gap: 14px;                 /* menos espacio entre items */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;       /* menos aire abajo */
  scrollbar-width: none;
}
.qs-scroller::-webkit-scrollbar{ display:none; }

.qs-scroller:focus{
  outline: 2px solid rgba(10,29,122,.20);
  outline-offset: 6px;
  border-radius: 14px;
}

.qs-slide{
  flex: 0 0 auto;
  display:flex;
}
.qs-slide > *{ width:100%; }

/* -------- Desktop carousel wrap + fades + flechas flotantes -------- */
.qs-carousel-wrap{
  position: relative;
  overflow: visible;
}

/* Fades decorativos (no bloquean clicks) */
.qs-fade{
  pointer-events:none;
  position:absolute;
  top:0;
  bottom:0;
  width: 44px;
  z-index: 2;
}
.qs-fade-left{
  left:0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.qs-fade-right{
  right:0;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}

/* Flechas flotantes */
.qs-float-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  color: var(--space-cadet);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 24px rgba(35,50,86,.10);
  cursor:pointer;
  z-index: 5;
  font-size: 26px;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease;
}
.qs-float-prev{ left: -6px; }
.qs-float-next{ right: -6px; }

.qs-float-btn:hover{
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 16px 28px rgba(35,50,86,.12);
}
.qs-float-btn:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 3px;
}

/* -------- Desktop GRID -------- */
.qs-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; /* menos aire */
}
@media (max-width: 1200px){
  .qs-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .qs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------- Mobile vertical list: gap entre cards -------- */
.qs-vlist-grid{
  display: grid;
  gap: 10px; /* ✅ separación entre items */
}
@media (max-width: 360px){
  .qs-vlist-grid{ gap: 8px; }
}

/* -------- Link wrapper -------- */
.qs-link{
  display:block;
  text-decoration:none;
  color: inherit;
}

/* Focus en card */
.qs-link:focus-visible .qs-card{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 3px;
}

/* -------- Card base -------- */
.qs-card{
  background: var(--ghost-white);
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.06);
  padding: 14px; /* menos que p-6 */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width: 0;
}
.qs-link:hover .qs-card{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(35,50,86,.10);
  border-color: rgba(202,31,61,.18);
}

/* Variantes */
.qs-card--center{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  gap: 10px;
}

.qs-card--row{
  display:flex;
  flex-direction: row;
  align-items:center;
  text-align:left;
  gap: 12px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(35,50,86,.06); /* opcional suave, se ve mejor en lista */
}

/* -------- Icon box -------- */
.qs-iconbox{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.qs-iconbox--catalina{ background: var(--catalina-blue); }
.qs-iconbox--jordy{ background: var(--jordy-blue); }
.qs-iconbox--cardinal{ background: var(--cardinal); }
.qs-iconbox--space{ background: var(--space-cadet); }

.qs-icon[data-icon="truck-medical"]::before{ content:"\f0f9"; }
.qs-icon[data-icon="kit-medical"]::before{ content:"\f479"; }
.qs-icon[data-icon="shield"]::before{ content:"\f132"; }
.qs-icon[data-icon="user-shield"]::before{ content:"\f505"; }
.qs-icon[data-icon="fire-extinguisher"]::before{ content:"\f134"; }

/* -------- Text -------- */
.qs-text{ min-width: 0; }

.qs-item-title{
  font-weight: 900;
  color: var(--space-cadet);
  font-size: 16px;
  line-height: 1.15;
}

.qs-item-desc{
  margin-top: 4px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
}

/* -------- Responsive micro-ajustes -------- */
@media (max-width: 767px){
  .qs-shell{ padding: 16px; }
  .qs-iconbox{ width: 64px; height: 64px; border-radius: 16px; }
  .qs-card--row .qs-item-title{ font-size: 15px; }
}

/* ============================================================
   ÍCONOS (Font Awesome 6 Free Solid) - data-icon
   - No uses clases fa-*
   - Requiere que cargues FA6 Free en tu base (CSS o kit)
============================================================ */

.qs-icon{
  display:inline-block;
  line-height:1;
}

/* Default fallback (circle-info) */
.qs-icon::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.7rem;
  color:#fff;
  display:inline-block;
  content:"\f05a"; /* circle-info */
}

/* ===== Mapeo BASE (puedes pegar aquí tu catálogo completo) ===== */
.qs-icon[data-icon="house"]::before{ content:"\f015"; }
.qs-icon[data-icon="file-lines"]::before{ content:"\f15c"; }
.qs-icon[data-icon="calendar-check"]::before{ content:"\f274"; }
.qs-icon[data-icon="lightbulb"]::before{ content:"\f0eb"; }
.qs-icon[data-icon="circle-info"]::before{ content:"\f05a"; }
.qs-icon[data-icon="user"]::before{ content:"\f007"; }
.qs-icon[data-icon="building-columns"]::before{ content:"\f19c"; }
.qs-icon[data-icon="landmark"]::before{ content:"\f66f"; }

/* ✅ Continúa aquí con TODO tu mapeo (trash-can, traffic-light, etc.) */

/* Mapeo base */
.qs-icon[data-icon="house"]::before{ content:"\f015"; }
.qs-icon[data-icon="file-lines"]::before{ content:"\f15c"; }
.qs-icon[data-icon="calendar-check"]::before{ content:"\f274"; }
.qs-icon[data-icon="lightbulb"]::before{ content:"\f0eb"; }
.qs-icon[data-icon="circle-info"]::before{ content:"\f05a"; }
.qs-icon[data-icon="user"]::before{ content:"\f007"; }
.qs-icon[data-icon="building-columns"]::before{ content:"\f19c"; }
.qs-icon[data-icon="landmark"]::before{ content:"\f66f"; }
.qs-icon[data-icon="road"]::before{ content:"\f018"; }
.qs-icon[data-icon="bus"]::before{ content:"\f207"; }
.qs-icon[data-icon="tree"]::before{ content:"\f1bb"; }
.qs-icon[data-icon="heart"]::before{ content:"\f004"; }
.qs-icon[data-icon="shield-halved"]::before{ content:"\f3ed"; }
.qs-icon[data-icon="graduation-cap"]::before{ content:"\f19d"; }
.qs-icon[data-icon="briefcase"]::before{ content:"\f0b1"; }
.qs-icon[data-icon="receipt"]::before{ content:"\f543"; }
.qs-icon[data-icon="credit-card"]::before{ content:"\f09d"; }
.qs-icon[data-icon="location-dot"]::before{ content:"\f3c5"; }
.qs-icon[data-icon="phone"]::before{ content:"\f095"; }
.qs-icon[data-icon="envelope"]::before{ content:"\f0e0"; }

/* Trámites / documentos / gobierno */
.qs-icon[data-icon="file"]::before{ content:"\f15b"; }
.qs-icon[data-icon="folder-open"]::before{ content:"\f07c"; }
.qs-icon[data-icon="file-circle-check"]::before{ content:"\e5a0"; }
.qs-icon[data-icon="file-signature"]::before{ content:"\f573"; }
.qs-icon[data-icon="clipboard-list"]::before{ content:"\f46d"; }
.qs-icon[data-icon="stamp"]::before{ content:"\f5bf"; }
.qs-icon[data-icon="id-card"]::before{ content:"\f2c2"; }
.qs-icon[data-icon="address-card"]::before{ content:"\f2bb"; }
.qs-icon[data-icon="building"]::before{ content:"\f1ad"; }
.qs-icon[data-icon="scale-balanced"]::before{ content:"\f24e"; }
.qs-icon[data-icon="gavel"]::before{ content:"\f0e3"; }
.qs-icon[data-icon="book"]::before{ content:"\f02d"; }
.qs-icon[data-icon="circle-question"]::before{ content:"\f059"; }

/* Pagos / finanzas */
.qs-icon[data-icon="money-bill"]::before{ content:"\f0d6"; }
.qs-icon[data-icon="money-bill-1"]::before{ content:"\f3d1"; }
.qs-icon[data-icon="cash-register"]::before{ content:"\f788"; }
.qs-icon[data-icon="wallet"]::before{ content:"\f555"; }
.qs-icon[data-icon="file-invoice"]::before{ content:"\f570"; }
.qs-icon[data-icon="file-invoice-dollar"]::before{ content:"\f571"; }
.qs-icon[data-icon="barcode"]::before{ content:"\f02a"; }
.qs-icon[data-icon="qrcode"]::before{ content:"\f029"; }

/* Atención ciudadana / comunicación */
.qs-icon[data-icon="headset"]::before{ content:"\f590"; }
.qs-icon[data-icon="comments"]::before{ content:"\f086"; }
.qs-icon[data-icon="bullhorn"]::before{ content:"\f0a1"; }
.qs-icon[data-icon="bell"]::before{ content:"\f0f3"; }
.qs-icon[data-icon="triangle-exclamation"]::before{ content:"\f071"; }
.qs-icon[data-icon="handshake"]::before{ content:"\f2b5"; }
.qs-icon[data-icon="users"]::before{ content:"\f0c0"; }
.qs-icon[data-icon="user-check"]::before{ content:"\f4fc"; }

/* Citas / turnos */
.qs-icon[data-icon="calendar-days"]::before{ content:"\f073"; }
.qs-icon[data-icon="clock"]::before{ content:"\f017"; }
.qs-icon[data-icon="ticket"]::before{ content:"\f145"; }
.qs-icon[data-icon="location-crosshairs"]::before{ content:"\f601"; }

/* Servicios urbanos */
.qs-icon[data-icon="trash-can"]::before{ content:"\f2ed"; }
.qs-icon[data-icon="recycle"]::before{ content:"\f1b8"; }
.qs-icon[data-icon="faucet-drip"]::before{ content:"\e006"; }
.qs-icon[data-icon="bolt"]::before{ content:"\f0e7"; }
.qs-icon[data-icon="road-bridge"]::before{ content:"\e563"; }
.qs-icon[data-icon="person-digging"]::before{ content:"\f85e"; }
.qs-icon[data-icon="traffic-light"]::before{ content:"\f637"; }
.qs-icon[data-icon="car"]::before{ content:"\f1b9"; }
.qs-icon[data-icon="bus-simple"]::before{ content:"\f55e"; }
.qs-icon[data-icon="parking"]::before{ content:"\f540"; }

/* Negocios / licencias / datos */
.qs-icon[data-icon="store"]::before{ content:"\f54e"; }
.qs-icon[data-icon="shop"]::before{ content:"\f54f"; }
.qs-icon[data-icon="certificate"]::before{ content:"\f0a3"; }
.qs-icon[data-icon="file-contract"]::before{ content:"\f56c"; }
.qs-icon[data-icon="chart-line"]::before{ content:"\f201"; }
.qs-icon[data-icon="hand-holding-dollar"]::before{ content:"\f4c0"; }

/* ============================================================
   HERO SLIDER (full-width, responsive, accesible)
   - Track transform para rotación
   - Botones visibles en móvil/desktop
   - Overlay configurable
   - Botón CTA real, siempre dentro del banner
============================================================ */

.hs {
  width: 100%;
}

/* Wrapper */
.hs-wrap {
  position: relative;
  width: 100%;
}

/* Viewport: recorta el track */
.hs-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;  /* CLAVE */
  outline: none;
}

/* Track: slides en fila */
.hs-track {
  display: flex;     /* CLAVE */
  width: 100%;
  transform: translateX(0%);
  transition: transform 500ms ease;
  will-change: transform;
}

/* Slide ocupa 100% */
.hs-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}

/* ---------- SLIDE INNER (banner) ---------- */
.hs-slide-inner {
  position: relative; /* CLAVE: ancla overlays y contenido */
  width: 100%;
  height: clamp(360px, 45vw, 640px); /* alto responsive */
  overflow: hidden;
  background: #0a1d7a; /* fallback */
}

/* Imagen como fondo */
.hs-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Fit */
.hs-fit-cover { object-fit: cover; }
.hs-fit-contain { object-fit: contain; background: #0a1d7a; }

/* Position */
.hs-pos-top { object-position: top; }
.hs-pos-center { object-position: center; }
.hs-pos-bottom { object-position: bottom; }
.hs-pos-left { object-position: left; }
.hs-pos-right { object-position: right; }

/* Overlay */
.hs-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hs-overlay-soft {
  background: linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.05));
}

.hs-overlay-strong {
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.10));
}

.hs-overlay-none {
  background: transparent;
}

/* Contenido encima de la imagen */
.hs-content {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  max-width: min(680px, 92vw);
  padding: 20px;
  color: #fff;
}

/* Posiciones */
.hs-content-left {
  left: clamp(14px, 4vw, 70px);
  text-align: left;
}

.hs-content-right {
  right: clamp(14px, 4vw, 70px);
  text-align: left;
}

.hs-content-center {
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Texto */
.hs-kicker {
  font-size: 14px;
  opacity: .92;
  margin: 0 0 8px 0;
}

.hs-title {
  font-size: clamp(22px, 3vw, 44px);
  font-weight: 800;
  margin: 0 0 10px 0;
  line-height: 1.1;
}

.hs-subtitle {
  font-size: clamp(14px, 1.35vw, 18px);
  opacity: .95;
  margin: 0 0 18px 0;
  line-height: 1.45;
}

/* ✅ CTA Button (si se ve como texto, esto lo corrige) */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--cardinal, #CA1F3D);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease;
}

.hs-btn:hover {
  filter: brightness(.98);
  transform: translateY(-1px);
}

.hs-btn:active {
  transform: translateY(0px) scale(.99);
}

.hs-btn:focus-visible {
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 4px;
}

/* ---------- Botones prev/next ---------- */
.hs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--space-cadet, #233256);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.hs-nav span {
  font-size: 28px;
  line-height: 1;
}

.hs-prev { left: 18px; }
.hs-next { right: 18px; }

.hs-nav:hover { filter: brightness(.98); }
.hs-nav:active { transform: translateY(-50%) scale(.98); }

.hs-nav:focus-visible {
  outline: 3px solid rgba(10,29,122,.30);
  outline-offset: 4px;
}

/* ---------- Dots ---------- */
.hs-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.hs-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}

.hs-dot.is-active {
  background: rgba(255,255,255,.95);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hs-slide-inner {
    height: clamp(340px, 72vw, 540px);
  }

  .hs-content {
    padding: 14px;
    max-width: 92vw;
  }

  .hs-nav {
    width: 44px;
    height: 44px;
  }
  .hs-prev { left: 10px; }
  .hs-next { right: 10px; }

  .hs-dots {
    bottom: 10px;
  }

  .hs-btn {
    padding: 12px 18px;
    border-radius: 12px;
  }
}

/* ============================================================
   HERO SLIDER - CTA flotante posicionable (hs-cta-pos-*)
============================================================ */

.hs-cta{
  position: absolute;
  z-index: 3; /* arriba del overlay */
  padding: clamp(10px, 2vw, 18px);
}

/* Esquinas */
.hs-cta-pos-tl{ top: 10px; left: 10px; }
.hs-cta-pos-tr{ top: 10px; right: 10px; }
.hs-cta-pos-bl{ bottom: 10px; left: 10px; }
.hs-cta-pos-br{ bottom: 10px; right: 10px; }

/* Centros horizontales */
.hs-cta-pos-tc{ top: 10px; left: 50%; transform: translateX(-50%); }
.hs-cta-pos-bc{ bottom: 10px; left: 50%; transform: translateX(-50%); }

/* Centros verticales */
.hs-cta-pos-ml{ top: 50%; left: 10px; transform: translateY(-50%); }
.hs-cta-pos-mr{ top: 50%; right: 10px; transform: translateY(-50%); }

/* Centro absoluto */
.hs-cta-pos-mc{ top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Mobile: un poco más adentro */
@media (max-width: 640px){
  .hs-cta-pos-tl{ top: 8px; left: 8px; }
  .hs-cta-pos-tr{ top: 8px; right: 8px; }
  .hs-cta-pos-bl{ bottom: 8px; left: 8px; }
  .hs-cta-pos-br{ bottom: 8px; right: 8px; }

  .hs-cta-pos-tc{ top: 8px; }
  .hs-cta-pos-bc{ bottom: 8px; }

  .hs-cta-pos-ml{ left: 8px; }
  .hs-cta-pos-mr{ right: 8px; }
}

/* ============================================================
   HERO METRICS (bloque tipo “Tu ciudad…”)
   - Variantes de fondo (tonos parecidos)
   - Badge con icono sin FontAwesome (evita choque gob.mx)
============================================================ */

/* Base (ya lo tienes, lo dejo compatible) */
.hero-animated{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Sutil textura/luces (puede vivir con cualquier fondo) */
.hero-animated::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(143,186,229,0.16) 0%, transparent 52%),
    radial-gradient(circle at 80% 80%, rgba(202,31,61,0.16) 0%, transparent 55%);
  animation:gradient-shift 10s ease infinite;
  z-index:-1;
}
@keyframes gradient-shift{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* ===== Fondos (elige en Wagtail) ===== */
.hero-bg-catalina{ background: var(--catalina-blue); }
.hero-bg-space{ background: var(--space-cadet); }

.hero-bg-gradient_1{
  background: linear-gradient(135deg, var(--catalina-blue), var(--space-cadet));
}
.hero-bg-gradient_2{
  background: linear-gradient(135deg, var(--space-cadet), var(--catalina-blue));
}
.hero-bg-gradient_3{
  background: radial-gradient(circle at 15% 35%, rgba(143,186,229,.25), transparent 45%),
              radial-gradient(circle at 85% 75%, rgba(202,31,61,.18), transparent 50%),
              linear-gradient(135deg, var(--catalina-blue), var(--space-cadet));
}

/* Badge */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* Icono del badge: SVG embebido por CSS (sin FA) */
.hero-badge-icon{
  width:18px;
  height:18px;
  display:inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3c.6 1.1 1 2.4 1 3.8c0 .6-.1 1.2-.2 1.7l4.2 4.2c.6.6.6 1.5 0 2.1l-2 2c-.6.6-1.5.6-2.1 0L10.7 15c-.5.1-1.1.2-1.7.2C7.4 15.2 6.1 14.8 5 14.2l2.4-2.4c.2-.2.4-.3.7-.3h1.4V10c0-.3.1-.5.3-.7L12.2 7C12.8 6.4 13.4 5.2 14 3Zm-9 14l3 3l-2 2H3v-3l2-2Zm11.7-8.3l-1.4-1.4c.1-.4.2-.8.2-1.3c0-.6-.1-1.1-.2-1.6c.5 1 1.1 2 1.9 2.8l.5.5l-1 1Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3c.6 1.1 1 2.4 1 3.8c0 .6-.1 1.2-.2 1.7l4.2 4.2c.6.6.6 1.5 0 2.1l-2 2c-.6.6-1.5.6-2.1 0L10.7 15c-.5.1-1.1.2-1.7.2C7.4 15.2 6.1 14.8 5 14.2l2.4-2.4c.2-.2.4-.3.7-.3h1.4V10c0-.3.1-.5.3-.7L12.2 7C12.8 6.4 13.4 5.2 14 3Zm-9 14l3 3l-2 2H3v-3l2-2Zm11.7-8.3l-1.4-1.4c.1-.4.2-.8.2-1.3c0-.6-.1-1.1-.2-1.6c.5 1 1.1 2 1.9 2.8l.5.5l-1 1Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tarjetas métricas */
.glass-card{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
}

/* Para evitar “brincos” en layouts muy chicos */
.hero-metric-card{
  min-height: 120px;
}

/* Botones del hero (sin depender de Tailwind para lo crítico) */
.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 16px 28px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration:none;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease, color .15s ease;
  outline: none;
}

.hero-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.45);
}

.hero-btn-primary{
  background: #fff;
  color: var(--catalina-blue);
}
.hero-btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
}

.hero-btn-secondary{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.9);
}
.hero-btn-secondary:hover{
  background: #fff;
  color: var(--catalina-blue);
}

/* Responsive micro-ajustes */
@media (max-width: 640px){
  .hero-btn{
    padding: 14px 22px;
    border-radius: 12px;
  }
  .hero-metric-card{
    min-height: 110px;
  }
}


/* ============================================================
   FEATURED SERVICES (Servicios destacados)
   - Cards con icono (reutiliza catálogo .qs-icon)
   - Bullets tipo checklist
   - CTA siempre al fondo, con aire suficiente (móvil/desktop)
   - Fondo configurable (white / ghost)
============================================================ */

/* Sección */
.fs-section{
  background:#fff;
}
.fs-section.fs-bg-ghost{
  background: var(--ghost-white);
}

/* Header */
.fs-header{
  text-align:center;
  margin-bottom: 3rem;
}
@media (min-width: 640px){
  .fs-header{ margin-bottom: 4rem; }
}

.fs-heading{
  color: var(--space-cadet);
  font-weight: 800;
  line-height: 1.1;
}

.fs-subtitle{
  color:#6b7280; /* gray-600 */
}

/* Grid */
.fs-grid{
  display:grid;
  gap: 1.5rem;
}
@media (min-width: 640px){
  .fs-grid{ gap: 2rem; }
}
@media (min-width: 1024px){
  .fs-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Card base */
.fs-card{
  background:#fff;
  border:2px solid #f3f4f6; /* gray-100 */
  border-radius: 1.25rem;   /* ~rounded-2xl */
  padding: 2rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;
  flex-direction: column;   /* permite empujar CTA */
  min-height: 100%;
}

.fs-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(35,50,86,.10);
  border-color: rgba(202,31,61,.35); /* cardinal suave */
}

/* Icon wrapper (cuadro) */
.fs-icon-wrap{
  width: 64px;
  height: 64px;
  border-radius: 18px; /* ~rounded-2xl */
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 1.5rem;
}

/* Colores del icono (mismo set que quick_services) */
.fs-icon-bg-catalina{ background: var(--catalina-blue); }
.fs-icon-bg-jordy{ background: var(--jordy-blue); }
.fs-icon-bg-cardinal{ background: var(--cardinal); }
.fs-icon-bg-space{ background: var(--space-cadet); }

/* El icono en sí (reutiliza tu .qs-icon::before) */
.fs-icon-wrap .qs-icon::before{
  font-size: 1.6rem; /* ~text-2xl */
  color:#fff;
}

/* Textos */
.fs-card-title{
  color: var(--space-cadet);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem); /* 20-24px */
  margin: 0 0 .75rem 0;
  line-height: 1.15;
}

.fs-card-desc{
  color:#6b7280;
  margin: 0 0 1.25rem 0;
  line-height: 1.55;
}

/* Bullets tipo checklist */
.fs-features{
  margin: 0 0 26px 0;     /* ✅ más aire antes del CTA */
  padding: 0;
  list-style: none !important;
  display: grid;
  gap: 12px;
}

.fs-feature{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color:#374151;         /* gray-700 */
  font-size: .95rem;
  line-height: 1.35;
}

/* “check” sin FontAwesome (evita conflictos) */
.fs-check{
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: rgba(16,185,129,.16); /* emerald-500 suave */
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 26px;
  margin-top: 2px;
}
.fs-check::before{
  content:"";
  width: 14px;
  height: 14px;
  background: #10b981; /* emerald-500 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* CTA: siempre al fondo del card */
.fs-cta{
  margin-top: auto;     /* empuja hacia abajo */
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--catalina-blue);
  color:#fff;
  font-weight: 800;
  text-decoration:none;
  text-align:center;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 24px rgba(10,29,122,.18);
}

.fs-cta:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 14px 30px rgba(10,29,122,.22);
}

.fs-cta:active{
  transform: translateY(0px) scale(.99);
}

.fs-cta:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 4px;
}

/* Mobile micro-ajustes */
@media (max-width: 640px){
  .fs-card{ padding: 1.5rem; }
  .fs-icon-wrap{ width: 60px; height: 60px; border-radius: 16px; }
  .fs-cta{ border-radius: 12px; }
}


/* ============================================================
   BLOG POST (bp-*)
   - Header + meta
   - Imagen principal o Slider (data-slider)
   - Body tipografía buena
   - CTA opcional
============================================================ */

.bp-section{
  background:#fff;
  padding: 56px 0;
}

@media (min-width: 640px){
  .bp-section{ padding: 72px 0; }
}

.bp-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
.bp-header{
  text-align: center;
  margin-bottom: 24px;
}

.bp-title{
  color: var(--space-cadet);
  font-weight: 900;
  line-height: 1.08;
  font-size: clamp(28px, 3.3vw, 52px);
  margin: 0 0 12px 0;
}

.bp-excerpt{
  color:#4b5563; /* gray-600/700 */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  margin: 0 auto 14px auto;
  max-width: 850px;
}

.bp-meta{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap: wrap;
  color:#6b7280;
  font-size: 14px;
}

.bp-meta-item{
  display:inline-flex;
  gap: 8px;
  align-items:center;
}

/* Cover */
.bp-cover{
  margin: 22px 0 26px 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.08);
  background: #0a1d7a;
}

.bp-cover-img{
  width:100%;
  height: auto;
  display:block;
  object-fit: cover;
}

.bp-cover-caption{
  padding: 10px 14px;
  font-size: 13px;
  color:#6b7280;
  background:#fff;
}

/* ===== Gallery Slider ===== */
.bp-gallery{
  position: relative;
  margin: 22px 0 26px 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.08);
  background: #0a1d7a;
}

.bp-gallery-viewport{
  width: 100%;
  overflow: hidden;
  outline: none;
}

.bp-gallery-track{
  display:flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 500ms ease;
  will-change: transform;
}

.bp-gallery-slide{
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  position: relative;
  background: #0a1d7a;
}

.bp-gallery-img{
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  object-fit: cover;
  display:block;
}

/* caption sobre la imagen */
.bp-gallery-caption{
  position:absolute;
  left: 14px;
  bottom: 14px;
  max-width: min(86%, 720px);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--space-cadet);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

/* nav */
.bp-gallery-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--space-cadet);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 5;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  font-size: 28px;
  line-height: 1;
}

.bp-gallery-prev{ left: 12px; }
.bp-gallery-next{ right: 12px; }

.bp-gallery-nav:hover{ filter: brightness(.98); }
.bp-gallery-nav:active{ transform: translateY(-50%) scale(.98); }

.bp-gallery-nav:focus-visible{
  outline: 3px solid rgba(10,29,122,.30);
  outline-offset: 4px;
}

/* dots */
.bp-gallery-dots{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 5;
}

.bp-gallery-dot{
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.bp-gallery-dot.is-active{
  background: rgba(255,255,255,.95);
}

/* Body (richtext) */
.bp-body{
  max-width: 900px;
  margin: 0 auto;
  color:#111827; /* gray-900 */
  line-height: 1.8;
  font-size: 17px;
}

.bp-body h2{
  margin: 32px 0 12px 0;
  color: var(--space-cadet);
  font-weight: 900;
  line-height: 1.2;
  font-size: 28px;
}

.bp-body h3{
  margin: 26px 0 10px 0;
  color: var(--space-cadet);
  font-weight: 800;
  line-height: 1.25;
  font-size: 22px;
}

.bp-body p{
  margin: 0 0 16px 0;
  color:#374151;
}

.bp-body a{
  color: var(--catalina-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bp-body ul,
.bp-body ol{
  margin: 0 0 18px 18px;
  color:#374151;
}

.bp-body blockquote{
  margin: 22px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(10,29,122,.45);
  background: rgba(10,29,122,.05);
  border-radius: 12px;
  color:#374151;
}

/* CTA final */
.bp-cta-wrap{
  max-width: 900px;
  margin: 28px auto 0 auto;
  display:flex;
  justify-content:center;
}

.bp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--catalina-blue);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(10,29,122,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.bp-cta:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 14px 30px rgba(10,29,122,.22);
}

.bp-cta:active{
  transform: translateY(0px) scale(.99);
}

.bp-cta:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 4px;
}

/* Mobile tweaks */
@media (max-width: 640px){
  .bp-header{ margin-bottom: 18px; }
  .bp-gallery-nav{ width: 42px; height: 42px; }
  .bp-gallery-prev{ left: 10px; }
  .bp-gallery-next{ right: 10px; }
  .bp-gallery-dots{ bottom: 10px; }
  .bp-body{ font-size: 16px; }
}

/* ============================================================
   NEWS + INSTAGRAM (nei-*)
   - Incluye slider (nei-slider-*)
   - Fix responsive (no rompe en móvil)
============================================================ */

.nei-section{
  padding: 64px 0;
  background: #fff;
}
@media (min-width: 640px){
  .nei-section{ padding: 80px 0; }
}

.nei-bg-ghost{ background: var(--ghost-white); }
.nei-bg-white{ background: #fff; }

.nei-container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.nei-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 640px){
  .nei-head{ flex-direction:column; align-items:flex-start; }
}

.nei-title{
  font-size: clamp(28px, 3.2vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 8px 0;
  color: var(--space-cadet);
}

.nei-subtitle{
  margin: 0;
  color:#6b7280;
  font-size: clamp(16px, 1.5vw, 20px);
}

.nei-viewall{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background:#fff;
  color: var(--catalina-blue);
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 10px 20px rgba(35,50,86,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nei-viewall:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(35,50,86,.10);
}

.nei-grid{
  display:grid;
  gap: 24px;
}
@media (min-width: 1024px){
  .nei-grid{
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items:start;
  }
}

.nei-news{ min-width:0; }

/* ===================== Feature card (reutilizable) ===================== */

.nei-feature{
  overflow:hidden;
  border-radius: 18px;
}

/* ✅ Media: en todos los casos ocupa 100% y no rompe */
.nei-feature-media{
  display:block;
  width: 100%;
  background: var(--catalina-blue);
  overflow:hidden;
}

/* ✅ Imagen responsive robusta */
.nei-feature-img{
  display:block;
  width:100%;
  height:auto;
}

/* ✅ Placeholder */
.nei-feature-ph{
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nei-ph-ico{
  font-size: 56px;
  color: rgba(255,255,255,.75);
}

.nei-feature-body{
  padding: 22px;
}
@media (min-width: 640px){
  .nei-feature-body{ padding: 26px; }
}

.nei-meta{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 10px;
}

.nei-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--cardinal);
  color:#fff;
  font-size: 12px;
  font-weight: 800;
}

.nei-date{
  font-size: 13px;
  color:#6b7280;
}

.nei-feature-title{
  margin: 0 0 10px 0;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  color: var(--space-cadet);
}
.nei-feature-title a{
  color: inherit;
  text-decoration:none;
}
.nei-feature-title a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nei-feature-excerpt{
  margin: 0 0 14px 0;
  color:#4b5563;
  line-height: 1.6;
}

.nei-readmore{
  display:inline-flex;
  gap: 8px;
  color: var(--catalina-blue);
  font-weight: 800;
  text-decoration:none;
}
.nei-readmore:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================== Empty state ===================== */

.nei-empty{
  padding: 26px;
  border-radius: 18px;
  display:flex;
  gap: 16px;
  align-items:center;
}
.nei-empty-ico{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,29,122,.10);
  font-size: 26px;
  flex: 0 0 56px;
}
.nei-empty-title{
  margin: 0 0 6px 0;
  color: var(--space-cadet);
  font-weight: 900;
}
.nei-empty-sub{
  margin: 0;
  color:#6b7280;
}

/* ===================== Instagram ===================== */

.nei-ig{
  padding: 18px;
  border-radius: 18px;
  min-width:0;
}
@media (min-width: 640px){
  .nei-ig{ padding: 22px; }
}

.nei-ig-head{
  display:flex;
  gap: 14px;
  align-items:center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--ghost-white);
}

.nei-ig-badge{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--cardinal);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .5px;
}

.nei-ig-title{
  margin: 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: 18px;
}
.nei-ig-user{
  margin: 2px 0 0 0;
  color:#6b7280;
  font-size: 13px;
}

.nei-ig-embed{
  width:100%;
  overflow:hidden;
  border-radius: 14px;
}

/* FIX embed instagram overflow */
.instagram-media{
  max-width:100% !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}

.nei-ig-noscript{
  padding: 12px;
  color:#6b7280;
  font-size: 13px;
}

.nei-ig-cta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cardinal);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 24px rgba(202,31,61,.18);
}
.nei-ig-cta:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 14px 30px rgba(202,31,61,.22);
}

/* ===================== NEWS slider (nei-slider-*) ===================== */

.nei-slider{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* ✅ viewport */
.nei-slider-viewport{
  width: 100%;
  overflow: hidden; /* CLAVE */
  outline: none;
}

/* ✅ track */
.nei-slider-track{
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 500ms ease;
  will-change: transform;
}

/* ✅ slide ocupa 100% siempre */
.nei-slider-slide{
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}

/* ✅ Arregla alturas en responsive: media con aspect-ratio */
.nei-slider .nei-feature-media{
  aspect-ratio: 16 / 9;
}
@media (min-width: 640px){
  .nei-slider .nei-feature-media{
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 1024px){
  .nei-slider .nei-feature-media{
    aspect-ratio: 16 / 9;
  }
}

/* ✅ asegúrate que la imagen llene el espacio del aspect-ratio */
.nei-slider .nei-feature-img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* placeholder también debe respetar ratio */
.nei-slider .nei-feature-ph{
  min-height: unset;
  width: 100%;
  height: 100%;
}

/* Nav */
.nei-slider-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--space-cadet);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 6;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  font-size: 28px;
  line-height: 1;
}

.nei-slider-prev{ left: 12px; }
.nei-slider-next{ right: 12px; }

.nei-slider-nav:hover{ filter: brightness(.98); }
.nei-slider-nav:active{ transform: translateY(-50%) scale(.98); }

.nei-slider-nav:focus-visible{
  outline: 3px solid rgba(10,29,122,.30);
  outline-offset: 4px;
}

/* Dots */
.nei-slider-dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 6;
}

.nei-slider-dot{
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.nei-slider-dot.is-active{
  background: rgba(255,255,255,.95);
}

@media (max-width: 640px){
  .nei-slider-nav{ width: 42px; height: 42px; }
  .nei-slider-prev{ left: 10px; }
  .nei-slider-next{ right: 10px; }
  .nei-slider-dots{ bottom: 10px; }

  /* ✅ En móvil reduce padding del body para que no “apriete” */
  .nei-feature-body{ padding: 16px; }

  /* ✅ Titulos más compactos */
  .nei-feature-title{ font-size: 20px; }
}


/* =========================================
   NEWS INDEX (ni-*) - defensivo responsive
   (no es obligatorio, solo refuerza)
========================================= */

/* Evita que cards o imágenes provoquen overflow en grids */
.ni-grid,
.ni-card,
.ni-media,
.ni-body {
  min-width: 0;
}

/* Imágenes siempre fluidas */
.ni-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Inputs en iOS a veces generan zoom raro si font < 16px */
.ni-search input {
  font-size: 16px;
}

/* ============================================================
   INTERNAL PAGE HERO (ip-*)
============================================================ */

.ip-hero { width: 100%; background: #0a1d7a; }
.ip-hero__wrap { position: relative; width: 100%; overflow: hidden; }

.ip-hero--sm .ip-hero__wrap { height: clamp(240px, 28vw, 360px); }
.ip-hero--md .ip-hero__wrap { height: clamp(300px, 34vw, 460px); }
.ip-hero--lg .ip-hero__wrap { height: clamp(360px, 42vw, 620px); }

.ip-hero__media { position: absolute; inset: 0; }
.ip-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ip-hero__overlay { position: absolute; inset: 0; }
.ip-hero__overlay--none { background: transparent; }
.ip-hero__overlay--soft {
  background: linear-gradient(to right, rgba(0,0,0,.40), rgba(0,0,0,.10));
}
.ip-hero__overlay--strong {
  background: linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.18));
}

.ip-hero__content{
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  max-width: min(760px, 92vw);
  padding: 18px;
  color: #fff;
}

.ip-hero__content--left { left: clamp(14px, 4vw, 70px); text-align: left; }
.ip-hero__content--center { left: 50%; transform: translate(-50%, -50%); text-align: center; }
.ip-hero__content--right { right: clamp(14px, 4vw, 70px); text-align: left; }

.ip-hero__title{
  margin: 0 0 10px 0;
  font-size: clamp(24px, 3.4vw, 56px);
  font-weight: 900;
  line-height: 1.05;
}

.ip-hero__subtitle{
  margin: 0 0 16px 0;
  font-size: clamp(14px, 1.35vw, 20px);
  opacity: .95;
  line-height: 1.5;
}

.ip-hero__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--cardinal, #CA1F3D);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease;
}
.ip-hero__cta:hover { transform: translateY(-1px); filter: brightness(.98); }
.ip-hero__cta:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 4px; }

@media (max-width: 640px){
  .ip-hero__content{ padding: 14px; }
  .ip-hero__cta{ padding: 12px 18px; border-radius: 12px; }
}

/* ============================================================
   MISION / VISION / COMPROMISOS (mvv-*)
   - 2 cards arriba (Misión / Visión)
   - Compromisos abajo full-width
   - Estilo similar a tu HTML demo (section-card + section-title)
============================================================ */

.mvv{
  padding: 64px 0;
  background: transparent; /* tu body ya es ghost-white */
}
@media (min-width: 640px){
  .mvv{ padding: 84px 0; }
}

.mvv__container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Heading de sección (opcional) */
.mvv__heading{
  margin: 0 0 22px 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.1;
}

/* Grid Mission/Vision */
.mvv__grid{
  display: grid;
  gap: 22px;
}
@media (min-width: 768px){
  .mvv__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

/* Card base tipo "section-card" */
.mvv__card{
  background: #fff;
  border-radius: 1.5rem;
  padding: clamp(22px, 2.8vw, 48px);
  box-shadow: 0 4px 20px rgba(35, 50, 86, 0.08);
  border: 1px solid rgba(35, 50, 86, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
  min-width: 0;
}
.mvv__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(35, 50, 86, 0.10);
}

/* Variante simple: más sobrio (sin “elevación”) */
.mvv--simple .mvv__card{
  box-shadow: none;
}
.mvv--simple .mvv__card:hover{
  transform: none;
}

/* Título tipo "section-title" */
.mvv__title{
  color: var(--space-cadet);
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 34px);
  margin: 0 0 16px 0;
  position: relative;
  padding-bottom: 12px;
  line-height: 1.15;
}
.mvv__title::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--cardinal) 0%, var(--jordy-blue) 100%);
  border-radius: 2px;
}

/* Rich text */
.mvv__rich{
  color: #374151;
  line-height: 1.75;
  font-size: 17px;
}
.mvv__rich p{ margin: 0 0 14px 0; }
.mvv__rich p:last-child{ margin-bottom: 0; }
.mvv__rich a{
  color: var(--catalina-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mvv__rich ul, .mvv__rich ol{
  margin: 0 0 14px 18px;
}

/* Commitments wrapper */
.mvv__commitments{
  margin-top: 22px;
}
@media (min-width: 768px){
  .mvv__commitments{ margin-top: 28px; }
}
.mvv__card--wide{
  width: 100%;
}

/* Lista tipo "function-item" */
.mvv__list{
  margin: 0;
  padding: 0;
  list-style: none !important;
  display: grid;
  gap: 14px;
}
.mvv__item{
  padding: 18px;
  background: var(--ghost-white);
  border-radius: 1rem;
  border-left: 4px solid var(--cardinal);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mvv__item:hover{
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(202, 31, 61, 0.10);
}

/* Empty state */
.mvv__empty{
  margin: 0;
  color: #6b7280;
}


/* ============================================================
   TABS (itabs-*)
============================================================ */

.itabs{
  background: #fff;
  padding: 56px 0;
}
@media (min-width: 640px){ .itabs{ padding: 72px 0; } }

.itabs__container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.itabs__heading{
  margin: 0 0 10px 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 34px);
}

.itabs__intro{
  margin: 0 0 18px 0;
  color: #6b7280;
  line-height: 1.6;
}

.itabs__wrap{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.06);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 22px rgba(35,50,86,.06);
}

.itabs__tablist{
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--ghost-white);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.itabs__tablist::-webkit-scrollbar{ display:none; }

.itabs__tab{
  border: 0;
  background: #fff;
  color: var(--space-cadet);
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.itabs__tab:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(35,50,86,.08); }
.itabs__tab.is-active{
  background: var(--catalina-blue);
  color: #fff;
}

.itabs__panels{ padding: 18px; }
@media (min-width: 640px){ .itabs__panels{ padding: 22px; } }

.itabs__rich{
  color:#374151;
  line-height: 1.8;
  font-size: 16px;
}
.itabs__rich h2{
  margin: 18px 0 10px 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: 24px;
}
.itabs__rich h3{
  margin: 16px 0 8px 0;
  color: var(--space-cadet);
  font-weight: 800;
  font-size: 20px;
}
.itabs__rich p{ margin: 0 0 14px 0; }
.itabs__rich a{ color: var(--catalina-blue); text-decoration: underline; text-underline-offset: 3px; }
.itabs__rich ul, .itabs__rich ol{ margin: 0 0 14px 18px; }


/* ============================================================
   MTY A11Y WIDGET (mty-a11y-*)
   - Flotante bottom-right
   - Panel accesible responsive
   - Efectos globales activados por clases en <html>
============================================================ */

:root{
  --mty-a11y-accent: var(--catalina-blue, #0A1D7A);
  --mty-a11y-danger: var(--cardinal, #CA1F3D);
  --mty-a11y-ink: var(--space-cadet, #233256);
  --mty-a11y-bg: #fff;
  --mty-a11y-soft: var(--ghost-white, #F9F9F9);
}

/* Contenedor flotante */
.mty-a11y{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 999999;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Botón FAB */
.mty-a11y__fab{
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  background: var(--mty-a11y-accent);
  color: #fff;
  box-shadow: 0 14px 28px rgba(10,29,122,.22);
  display:flex;
  align-items:center;
  justify-content:center;
}
.mty-a11y__fab:hover{ filter: brightness(.98); }
.mty-a11y__fab:active{ transform: scale(.99); }
.mty-a11y__fab:focus-visible{
  outline: 3px solid rgba(255,255,255,.70);
  outline-offset: 4px;
}

/* Panel */
.mty-a11y__panel{
  position: absolute;
  right: 0;
  bottom: calc(56px + 12px);
  width: min(380px, calc(100vw - 24px));
  max-height: min(600px, calc(100vh - 140px));
  overflow: auto;
  background: var(--mty-a11y-bg);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(35,50,86,.16);
  padding: 14px;
}

/* Header panel */
.mty-a11y__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.mty-a11y__title{
  font-weight: 900;
  color: var(--mty-a11y-ink);
  font-size: 18px;
}
.mty-a11y__subtitle{
  color:#6b7280;
  font-size: 13px;
  margin-top: 2px;
}
.mty-a11y__close{
  border:0;
  background: transparent;
  cursor:pointer;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color:#6b7280;
  font-size: 18px;
}
.mty-a11y__close:hover{ background: rgba(17,24,39,.06); }
.mty-a11y__close:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 2px;
}

.mty-a11y__body{
  display:grid;
  gap: 12px;
}
.mty-a11y__group{
  background: var(--mty-a11y-soft);
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 16px;
  padding: 12px;
}
.mty-a11y__group--full{
  background: transparent;
  border: 0;
  padding: 0;
}
.mty-a11y__label{
  font-weight: 800;
  color: var(--mty-a11y-ink);
  font-size: 13px;
  margin-bottom: 10px;
}
.mty-a11y__row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mty-a11y__col{
  display:grid;
  gap: 10px;
}

/* Botones */
.mty-a11y__btn,
.mty-a11y__chip{
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  color: var(--mty-a11y-ink);
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(35,50,86,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mty-a11y__btn:hover,
.mty-a11y__chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(35,50,86,.08);
}
.mty-a11y__btn:focus-visible,
.mty-a11y__chip:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 2px;
}
.mty-a11y__btn--danger{
  width: 100%;
  background: var(--mty-a11y-danger);
  color: #fff;
  box-shadow: 0 12px 24px rgba(202,31,61,.18);
}
.mty-a11y__hint{
  margin-top: 10px;
  font-size: 12px;
  color:#6b7280;
  line-height: 1.4;
}
.mty-a11y__micro{
  margin-top: 10px;
  font-size: 12px;
  color:#6b7280;
  line-height: 1.4;
}

/* Toggles */
.mty-a11y__toggle{
  display:flex;
  gap: 10px;
  align-items:center;
  background:#fff;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(17,24,39,.06);
}
.mty-a11y__toggle input{ width: 18px; height: 18px; }

/* Overlays */
.mty-a11y__guide{
  position: fixed;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(202,31,61,.85);
  z-index: 999998;
  pointer-events: none;
  top: 50%;
}

.mty-a11y__mask{
  position: fixed;
  inset: 0;
  z-index: 999997;
  pointer-events: none;
}
.mty-a11y__maskTop,
.mty-a11y__maskBottom{
  position:absolute;
  left:0; right:0;
  background: rgba(0,0,0,.55);
}
.mty-a11y__maskBand{
  position:absolute;
  left:0; right:0;
  height: 120px;
  background: rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.mty-a11y__noscript{
  margin-top: 10px;
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  color:#6b7280;
}

/* Responsive */
@media (max-width: 640px){
  .mty-a11y{
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .mty-a11y__fab{ width: 52px; height: 52px; }
  .mty-a11y__panel{ bottom: calc(52px + 10px); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .mty-a11y__btn,
  .mty-a11y__chip{
    transition: none;
  }
}

/* ============================================================
   EFECTOS GLOBALES (solo cuando el usuario activa)
   Nota: NO bloqueamos forced-colors (Windows High Contrast).
============================================================ */

html{
  --mty-a11y-font-scale: 1;
}
html.mty-a11y-font{
  font-size: calc(16px * var(--mty-a11y-font-scale));
}

/* Alta legibilidad: sin bajar fuentes externas */
html.mty-a11y-legible body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Cursor grande (sin imágenes externas) */
html.mty-a11y-cursor *{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='10' cy='10' r='6' fill='%230A1D7A'/%3E%3C/svg%3E") 10 10, auto !important;
}

/* Resaltar enlaces */
html.mty-a11y-links a{
  background: rgba(202,31,61,.12) !important;
  box-shadow: 0 0 0 3px rgba(202,31,61,.18) inset !important;
  border-radius: 6px;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Grises */
html.mty-a11y-gray{
  filter: grayscale(1);
}

/* Contraste alto oscuro (sin filtros, mejor práctica) */
html.mty-a11y-contrast-dark body{
  background: #0b1220 !important;
  color: #ffffff !important;
}
html.mty-a11y-contrast-dark a{ color: #8FBAE5 !important; }
html.mty-a11y-contrast-dark header,
html.mty-a11y-contrast-dark footer{
  background: #111827 !important;
  color: #ffffff !important;
}
html.mty-a11y-contrast-dark :focus-visible{
  outline: 3px solid rgba(255,255,255,.65) !important;
  outline-offset: 3px;
}

/* Contraste alto claro */
html.mty-a11y-contrast-light body{
  background: #ffffff !important;
  color: #111827 !important;
}
html.mty-a11y-contrast-light a{ color: #0A1D7A !important; }
html.mty-a11y-contrast-light :focus-visible{
  outline: 3px solid rgba(10,29,122,.28) !important;
  outline-offset: 3px;
}



/* ============================================================
   HERO TITULAR DEPENDENCIA (htd-*) - v3
   Patrón: “Overlapped Profile Card” (muy usado actualmente)
   - Hero limpio (texto)
   - Card centrado, sobrepuesto al borde inferior del hero
============================================================ */

.htd-hero .ip-hero__overlay{
  opacity: var(--htd-overlay, .55);
}

/* cuando no hay imagen */
.htd-hero--noimg .ip-hero__media{
  background:
    radial-gradient(circle at 18% 40%, rgba(143,186,229,.18) 0%, transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(202,31,61,.14) 0%, transparent 55%),
    linear-gradient(135deg, var(--catalina-blue), var(--space-cadet));
}

.htd-hero .ip-hero__title,
.htd-hero .ip-hero__subtitle,
.htd-hero .htd-hero__desc{
  text-shadow: 0 10px 25px rgba(0,0,0,.45);
}

.htd-hero__desc{
  margin-top: 10px;
  color: rgba(255,255,255,.95);
  line-height: 1.65;
  font-size: 16px;
}
.htd-hero__desc p{ margin: 0 0 12px 0; }
.htd-hero__desc a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -----------------------
   Overlapped card wrapper
------------------------ */
.htd-strip{
  position: relative;
  z-index: 5;
  margin-top: -72px;          /* la “sobreposición” */
  padding-bottom: 14px;       /* separa del siguiente bloque */
}

.htd-strip__container{
  max-width: min(1240px, 94vw);
  margin: 0 auto;
  padding: 0 16px;
}

/* card centrado y con ancho controlado para monitores grandes */
.htd-strip__card{
  width: min(1100px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;

  padding: clamp(16px, 2vw, 22px);
  border-radius: 22px;

  background: linear-gradient(135deg, var(--catalina-blue), var(--space-cadet));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

/* avatar */
.htd-strip__avatar{
  width: clamp(72px, 6vw, 92px);
  height: clamp(72px, 6vw, 92px);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.htd-strip__avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.htd-strip__initial{
  font-weight: 900;
  font-size: 28px;
  color: rgba(255,255,255,.95);
}

/* info */
.htd-strip__info{ min-width: 0; }

.htd-strip__label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35px;
  opacity: .92;
  margin-bottom: 6px;
  color: rgba(255,255,255,.92);
}

.htd-strip__name{
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  word-break: break-word;
}

.htd-strip__role{
  margin-top: 6px;
  font-size: 14px;
  opacity: .92;
  color: rgba(235,245,255,.95);
  line-height: 1.35;
  word-break: break-word;
}

.htd-strip__meta{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.htd-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
  text-decoration: none;
  font-size: 13px;
}
.htd-chip i{ opacity: .95; }

/* actions */
.htd-strip__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.htd-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}

.htd-btn:focus{ outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }

.htd-btn--solid{
  background: #fff;
  color: var(--catalina-blue);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.htd-btn--solid:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

.htd-btn--outline{
  border: 2px solid rgba(255,255,255,.9);
  color: #fff;
  background: transparent;
}
.htd-btn--outline:hover{
  background: #fff;
  color: var(--catalina-blue);
}

/* -----------------------
   Responsive
------------------------ */
@media (max-width: 960px){
  /* evita cortes del hero en mobile */
  .htd-hero.ip-hero--sm .ip-hero__wrap,
  .htd-hero.ip-hero--md .ip-hero__wrap,
  .htd-hero.ip-hero--lg .ip-hero__wrap{
    height: auto;
    min-height: 420px;
    padding: 26px 0 74px; /* espacio para que “respire” antes del card */
  }

  .htd-hero .ip-hero__content{
    position: relative;
    top: auto;
    transform: none;
    padding: 0 16px;
    max-width: 100%;
  }

  .htd-strip{ margin-top: -56px; }

  .htd-strip__card{
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas:
      "avatar info"
      "actions actions";
    align-items: start;
  }

  .htd-strip__avatar{ grid-area: avatar; }
  .htd-strip__info{ grid-area: info; }
  .htd-strip__actions{
    grid-area: actions;
    justify-content: flex-start;
    margin-top: 6px;
  }
}

@media (max-width: 520px){
  .htd-strip{ margin-top: -44px; }

  .htd-strip__card{
    gap: 14px;
    padding: 14px;
  }

  .htd-strip__actions{ width: 100%; }
  .htd-btn{
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   HERO TITULAR DEPENDENCIA (htd-*) - v3
   - Hero + “profile card” centrada debajo (overlap)
============================================================ */

/* overlay editable por variable */
.htd-hero .ip-hero__overlay{ opacity: var(--htd-overlay, .55); }

/* cuando no hay imagen, fondo más rico */
.htd-hero--noimg .ip-hero__media{
  background:
    radial-gradient(circle at 18% 40%, rgba(143,186,229,.18) 0%, transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(202,31,61,.14) 0%, transparent 55%),
    linear-gradient(135deg, var(--catalina-blue), var(--space-cadet));
}

/* ancho contenido hero */
.htd-hero .ip-hero__content{
  max-width: min(1240px, 94vw);
}

/* tipografía/contraste */
.htd-hero__title,
.htd-hero__subtitle,
.htd-hero__desc{
  text-shadow: 0 10px 25px rgba(0,0,0,.45);
}
.htd-hero__desc{
  margin-top: 10px;
  opacity: .95;
  color: rgba(255,255,255,.95);
  line-height: 1.65;
  font-size: 16px;
}
.htd-hero__desc p{ margin: 0 0 12px 0; }
.htd-hero__desc a{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* botones base */
.htd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid transparent;
  text-decoration:none;
  white-space:nowrap;
}
.htd-btn--primary{
  background: var(--catalina-blue);
  color:#fff;
  box-shadow: 0 10px 24px rgba(10,29,122,.22);
}
.htd-btn--primary:hover{ filter: brightness(1.05); }
.htd-btn--ghost{
  background: #fff;
  color: var(--space-cadet);
  border-color: rgba(35,50,86,.14);
}
.htd-btn--ghost:hover{ background: rgba(249,249,249,1); }

/* ============================================================
   PROFILE CARD (debajo del hero)
============================================================ */
.htd-profile{
  position: relative;
  z-index: 5;
  margin-top: -52px;          /* overlap */
  margin-bottom: 18px;
}
.htd-profile__container{
  max-width: min(1240px, 94vw);
  margin: 0 auto;
  padding: 0 16px;
}
.htd-profile__card{
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(35,50,86,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 18px;
}

/* foto */
.htd-profile__media{
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(35,50,86,.10);
  background: rgba(10,29,122,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.htd-profile__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.htd-profile__placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.htd-profile__initial{
  font-weight: 900;
  font-size: 34px;
  color: var(--space-cadet);
  opacity: .85;
}

/* cuerpo */
.htd-profile__body{ min-width: 0; flex: 1 1 auto; }
.htd-profile__kicker{
  font-size: 12px;
  font-weight: 900;
  color: rgba(35,50,86,.65);
  letter-spacing: .4px;
  margin-bottom: 4px;
}
.htd-profile__name{
  font-size: 20px;
  font-weight: 900;
  color: var(--space-cadet);
  line-height: 1.2;
}
.htd-profile__role{
  margin-top: 4px;
  font-size: 14px;
  color: rgba(35,50,86,.80);
  line-height: 1.35;
}

/* meta */
.htd-profile__meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.htd-profile__meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  color: rgba(35,50,86,.82);
  text-decoration:none;
}
.htd-profile__meta-item:hover{ text-decoration: underline; }
.htd-dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(202,31,61,.85);
}

/* acciones */
.htd-profile__actions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* responsive */
@media (max-width: 960px){
  /* evita cortes en mobile */
  .htd-hero.ip-hero--sm .ip-hero__wrap,
  .htd-hero.ip-hero--md .ip-hero__wrap,
  .htd-hero.ip-hero--lg .ip-hero__wrap{
    height: auto;
    min-height: 420px;
    padding: 26px 0 64px;
  }
  .htd-hero .ip-hero__media{ position:absolute; inset:0; }
  .htd-hero .ip-hero__content{
    position: relative;
    top:auto;
    transform:none;
    padding: 0 16px;
    max-width: 100%;
  }

  .htd-profile{ margin-top: -40px; }
  .htd-profile__card{
    flex-direction: column;
    align-items: flex-start;
  }
  .htd-profile__media{
    width: 110px;
    height: 110px;
  }
}

@media (max-width: 640px){
  .htd-hero.ip-hero--sm .ip-hero__wrap,
  .htd-hero.ip-hero--md .ip-hero__wrap,
  .htd-hero.ip-hero--lg .ip-hero__wrap{
    min-height: 380px;
    padding: 22px 0 58px;
  }

  .htd-profile__actions .htd-btn{
    width: 100%;
  }
}

/* ============================================================
   ITABS (COMPLETO - reemplaza TODO tu bloque actual)
   - Tabs accesibles + progressive enhancement
   - Funciones / Estructura / Directorio
   - ✅ Directorio jerárquico colapsable (details/summary)
   - ✅ Botones Expandir/Colapsar todo
   - ✅ Responsive sólido
============================================================ */

/* Progressive enhancement:
   Sin JS: muestra todos los paneles
   Con JS: muestra solo el activo */
.itabs[data-itabs-ready="1"] .itabs__panel { display: none; }
.itabs[data-itabs-ready="1"] .itabs__panel.is-active { display: block; }

.itabs--ghost { background: var(--ghost-white); }

/* Títulos dentro de panel */
.itabs__paneltitle{
  margin: 0 0 16px 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: 24px;
}

/* ============================================================
   FUNCIONES
============================================================ */
.itabs__fn-list{
  margin: 0;
  padding: 0;
  list-style: none !important;
  display: grid;
  gap: 14px;
}

.itabs__fn-item{
  padding: 18px;
  background: var(--ghost-white);
  border-radius: 1rem;
  border-left: 4px solid var(--cardinal);
  transition: transform .2s ease, box-shadow .2s ease;
}

.itabs__fn-item:hover{
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(202, 31, 61, 0.10);
}

.itabs__fn-title{
  color: var(--space-cadet);
  font-weight: 900;
  margin: 0 0 8px 0;
}

/* ============================================================
   ESTRUCTURA
============================================================ */
.itabs__org-grid{
  display: grid;
  gap: 18px;
}
@media (min-width: 768px){
  .itabs__org-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.itabs__org-card{
  background: #fff;
  border-radius: 1rem;
  padding: 18px;
  text-align: center;
  border: 2px solid var(--ghost-white);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.itabs__org-card:hover{
  border-color: var(--jordy-blue);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(35,50,86,0.10);
}

.itabs__org-ico{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px auto;
}

.itabs__org-ico .qs-icon::before{
  font-size: 1.6rem;
  color: #fff;
}

.itabs__org-ico--cardinal{ background: linear-gradient(135deg, var(--cardinal), #E53758); }
.itabs__org-ico--catalina{ background: linear-gradient(135deg, var(--catalina-blue), var(--jordy-blue)); }
.itabs__org-ico--jordy{ background: linear-gradient(135deg, var(--jordy-blue), var(--catalina-blue)); }
.itabs__org-ico--space{ background: linear-gradient(135deg, var(--space-cadet), var(--catalina-blue)); }

.itabs__org-title{
  color: var(--space-cadet);
  font-weight: 900;
  margin: 0 0 6px 0;
}

.itabs__org-desc{
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
}

.itabs__org-link{
  margin-top: 10px;
  color: var(--catalina-blue);
  font-weight: 900;
  font-size: 13px;
}

/* CTA estructura */
.itabs__cta-wrap{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.itabs__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--cardinal);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(202,31,61,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.itabs__cta:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 14px 30px rgba(202,31,61,.22);
}


/* ============================================================
   CONTACT SECTION (csec-*)
   - 100% responsive
   - Reutilizable como bloque
============================================================ */

.csec{
  padding: 64px 0;
  background: var(--ghost-white);
}
@media (min-width: 640px){
  .csec{ padding: 84px 0; }
}

.csec__container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.csec__card{
  background: #fff;
  border-radius: 1.5rem;
  padding: clamp(18px, 3vw, 40px);
  box-shadow: 0 4px 20px rgba(35, 50, 86, 0.08);
  border: 1px solid rgba(35, 50, 86, 0.05);
}

.csec__grid{
  display: grid;
  gap: 28px;
}
@media (min-width: 900px){
  .csec__grid{
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: start;
  }
}

.csec__h{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 0 0 16px 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: 22px;
}
.csec__hico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--catalina-blue), var(--jordy-blue));
  display:flex;
  align-items:center;
  justify-content:center;
}
.csec__hico .qs-icon::before{ color:#fff; font-size: 1.15rem; }

.csec__items{
  display: grid;
  gap: 14px;
}

.csec__item{
  display:flex;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.06);
}
.csec__itemico{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--catalina-blue), var(--jordy-blue));
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 48px;
}
.csec__itemico .qs-icon::before{ color:#fff; font-size: 1.1rem; }

.csec__itembody{ min-width: 0; }
.csec__itemtitle{
  font-weight: 900;
  color: var(--space-cadet);
  margin-bottom: 4px;
}
.csec__itemtext{
  color: #374151;
  line-height: 1.55;
  font-size: 14px;
}
.csec__itemtext p{ margin: 0 0 8px 0; }
.csec__itemtext p:last-child{ margin-bottom: 0; }

.csec__itemlink{
  margin-top: 8px;
  font-weight: 900;
}
.csec__itemlink a{
  color: var(--catalina-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.csec__formcard{
  background: #fff;
  border-radius: 18px;
  border: 2px solid rgba(17,24,39,.06);
  padding: 18px;
}
@media (min-width: 640px){
  .csec__formcard{ padding: 22px; }
}

.csec__formtitle{
  font-weight: 900;
  color: var(--space-cadet);
  font-size: 18px;
  margin-bottom: 12px;
}

.csec__ok{
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.25);
  color: #065f46;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  margin-bottom: 12px;
}

.csec__form{
  display:grid;
  gap: 12px;
}

.csec__field{ display:grid; gap: 6px; }
.csec__label{
  font-size: 13px;
  font-weight: 900;
  color: var(--space-cadet);
}
.csec__req{ color: var(--cardinal); }

.csec__form input,
.csec__form textarea,
.csec__form select{
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  border: 2px solid rgba(17,24,39,.12);
  outline: none;
  font-size: 16px; /* evita zoom iOS */
  transition: border-color .15s ease, box-shadow .15s ease;
  background: #fff;
}
.csec__form textarea{ min-height: 120px; resize: vertical; }

.csec__form input:focus,
.csec__form textarea:focus,
.csec__form select:focus{
  border-color: rgba(202,31,61,.55);
  box-shadow: 0 0 0 4px rgba(202,31,61,.12);
}

.csec__help{ font-size: 12px; color:#6b7280; }
.csec__err{ font-size: 12px; color: var(--cardinal); font-weight: 800; }
.csec__field.has-error input,
.csec__field.has-error textarea,
.csec__field.has-error select{
  border-color: rgba(202,31,61,.65);
}

.csec__submit{
  margin-top: 4px;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: var(--cardinal);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(202,31,61,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.csec__submit:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 14px 30px rgba(202,31,61,.22);
}

.csec__hp{ display:none; }

.csec__empty{
  padding: 14px;
  border-radius: 16px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.06);
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.csec__emptyico{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,29,122,.10);
  color: var(--space-cadet);
  font-weight: 900;
  flex: 0 0 40px;
}
.csec__emptyt{ margin:0 0 4px 0; font-weight:900; color: var(--space-cadet); }
.csec__emptys{ margin:0; color:#6b7280; font-size: 13px; line-height: 1.4; }


/* ============================================================
   MIXED UPDATES CAROUSEL (mu-*)
   - Avisos + Convocatorias mezclados por fecha
   - Mobile-first: swipe horizontal
   - Desktop: flechas prev/next
   - ✅ Espaciado vertical compacto (sin “huecos” entre secciones)
============================================================ */

.mu{
  padding: 56px 0 24px;     /* ✅ top / bottom (compacto) */
  background: #fff;
}
@media (min-width: 640px){
  .mu{
    padding: 72px 0 32px;
  }
}

/* Variantes opcionales (por si quieres controlar “aire” por bloque) */
.mu--tight{ padding: 44px 0 18px; }
@media (min-width: 640px){
  .mu--tight{ padding: 60px 0 24px; }
}

.mu__container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.mu__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px){
  .mu__head{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom: 14px;
  }
}

.mu__title{
  margin: 0;
  font-weight: 900;
  color: var(--space-cadet);
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.1;
}

.mu__subtitle{
  margin: 8px 0 0 0;
  color: #6b7280;
  line-height: 1.5;
  max-width: 860px;
}

.mu__nav{
  display:none;
  gap: 10px;
}
@media (min-width: 768px){
  .mu__nav{ display:flex; }
}

.mu__navbtn{
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  color: var(--space-cadet);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(35,50,86,.06);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.mu__navbtn:hover{
  transform: translateY(-1px);
  filter: brightness(.99);
  box-shadow: 0 14px 22px rgba(35,50,86,.08);
}
.mu__navbtn:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 3px;
}

/* Carrusel */
.mu__carousel{
  position: relative;
}

/* Scroller (swipe) */
.mu__scroller{
  display:flex;
  gap: 14px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  padding-bottom: 6px;     /* ✅ pequeño, evita “aire” extra */
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.mu__scroller::-webkit-scrollbar{ display:none; }

.mu__scroller:focus{
  outline: 2px solid rgba(10,29,122,.18);
  outline-offset: 6px;
  border-radius: 14px;
}

/* Card */
.mu__card{
  flex: 0 0 auto;
  width: min(86vw, 360px);     /* ✅ móvil */
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 22px rgba(35,50,86,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  scroll-snap-align: start;
}
@media (min-width: 768px){
  .mu__card{ width: 340px; }
}
@media (min-width: 1280px){
  .mu__card{ width: 360px; }
}

.mu__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(35,50,86,.10);
  border-color: rgba(202,31,61,.25);
}
.mu__card:focus-visible{
  outline: 3px solid rgba(10,29,122,.22);
  outline-offset: 3px;
}

/* Media */
.mu__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--catalina-blue);
  overflow: hidden;
}
.mu__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Placeholder cuando no hay imagen */
.mu__ph{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 40%, rgba(143,186,229,.22), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(202,31,61,.16), transparent 55%),
    linear-gradient(135deg, var(--catalina-blue), var(--space-cadet));
}
.mu__phico{
  color: rgba(255,255,255,.88);
  font-size: 46px;
  font-weight: 900;
}

/* Body */
.mu__body{
  padding: 16px;
}

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

.mu__badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 9999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .16em;
  line-height: 1;
  white-space: nowrap;
}

.mu__badge--aviso{
  background: rgba(202,31,61,.12);
  color: var(--cardinal);
  border: 1px solid rgba(202,31,61,.18);
}
.mu__badge--conv{
  background: rgba(10,29,122,.10);
  color: var(--catalina-blue);
  border: 1px solid rgba(10,29,122,.18);
}

.mu__date{
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.mu__cardtitle{
  margin: 0 0 8px 0;
  font-weight: 900;
  color: var(--space-cadet);
  font-size: 16px;
  line-height: 1.2;
}

.mu__excerpt{
  margin: 0 0 12px 0;
  color:#4b5563;
  font-size: 13px;
  line-height: 1.5;
}

.mu__cta{
  display:inline-flex;
  color: var(--catalina-blue);
  font-weight: 900;
  font-size: 13px;
}

/* Empty state */
.mu__empty{
  width: 100%;
  padding: 18px;
  border-radius: 18px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.06);
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.mu__emptyico{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,29,122,.10);
  color: var(--space-cadet);
  font-weight: 900;
  flex: 0 0 44px;
}

.mu__emptyt{
  margin:0 0 4px 0;
  font-weight:900;
  color: var(--space-cadet);
}

.mu__emptys{
  margin:0;
  color:#6b7280;
  font-size: 13px;
  line-height: 1.4;
}

/* Micro-ajustes en móvil */
@media (max-width: 420px){
  .mu__body{ padding: 14px; }
  .mu__cardtitle{ font-size: 15px; }
  .mu__excerpt{ font-size: 12.75px; }
}


/* ===== MU: botón Ver todos (en carrusel) ===== */

.mu__actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

.mu__viewall{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background:#fff;
  color: var(--catalina-blue);
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 20px rgba(35,50,86,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mu__viewall:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(35,50,86,.10);
}

/* ===== SUPER SEARCH (ss-*) ===== */

.ss{
  padding: 56px 0 64px;
  background: #fff;
}

.ss__container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.ss__head{
  margin-bottom: 14px;
}

.ss__title{
  margin: 0;
  font-weight: 900;
  color: var(--space-cadet);
  font-size: clamp(24px, 2.8vw, 46px);
  line-height: 1.08;
}

.ss__sub{
  margin: 10px 0 0 0;
  color: #6b7280;
  line-height: 1.55;
}

/* Tabs */
.ss__tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 14px 0;
}

.ss__tab{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 9999px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.08);
  color: var(--space-cadet);
  font-weight: 900;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ss__tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(35,50,86,.08);
}
.ss__tab.is-active{
  background: var(--catalina-blue);
  color: #fff;
}

/* Form bar */
.ss__form{ margin-bottom: 10px; }

.ss__bar{
  display:grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.06);
}

@media (min-width: 900px){
  .ss__bar{
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
  }
}

.ss__label{
  display:block;
  font-size: 12px;
  font-weight: 900;
  color: var(--space-cadet);
  margin-bottom: 6px;
}

.ss__q{
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  border: 2px solid rgba(17,24,39,.12);
  outline: none;
  font-size: 16px;
  background: #fff;
}
.ss__q:focus{
  border-color: rgba(202,31,61,.55);
  box-shadow: 0 0 0 4px rgba(202,31,61,.12);
}

.ss__filters{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:end;
}

.ss__field{ display:grid; gap: 6px; }

.ss__input,
.ss__select{
  border-radius: 14px;
  padding: 12px 14px;
  border: 2px solid rgba(17,24,39,.12);
  background: #fff;
  font-size: 16px;
  outline: none;
}

.ss__toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.10);
  font-weight: 900;
  color: var(--space-cadet);
}

.ss__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  cursor:pointer;
  background: var(--cardinal);
  color: #fff;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 10px 18px rgba(202,31,61,.16);
}
.ss__btn:hover{ transform: translateY(-1px); }

.ss__btn--ghost{
  background: #fff;
  color: var(--space-cadet);
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 10px 18px rgba(35,50,86,.06);
}

.ss__meta{
  margin: 12px 0 12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ss__count{
  color: var(--space-cadet);
  font-weight: 900;
}
.ss__hint{
  margin-left: 10px;
  font-weight: 800;
  color: #6b7280;
}

/* Grid resultados (reutiliza mu__card) */
.ss__grid{
  display:grid;
  gap: 14px;
}
@media (min-width: 640px){
  .ss__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
}
@media (min-width: 1024px){
  .ss__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
}
.ss__grid .mu__card{ width:auto; }

/* Badges */
.ss-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9999px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  color: var(--space-cadet);
}
.ss-badge--news{
  background: rgba(202,31,61,.12);
  border-color: rgba(202,31,61,.20);
  color: var(--cardinal);
}
.ss-badge--avisos{
  background: rgba(10,29,122,.10);
  border-color: rgba(10,29,122,.18);
  color: var(--catalina-blue);
}
.ss-badge--conv{
  background: rgba(35,50,86,.10);
  border-color: rgba(35,50,86,.18);
  color: var(--space-cadet);
}

/* ============================================================
   UPDATES INDEX (mu-index) — grid + cards + pager
============================================================ */

.mu-index{
  padding: 44px 0 64px;
  background: #fff;
}

.mu-index__head{
  margin-bottom: 14px;
}

.mu-index__title{
  margin: 0;
  font-weight: 900;
  color: var(--space-cadet);
  font-size: clamp(24px, 2.6vw, 44px);
  line-height: 1.08;
}

.mu-index__subtitle{
  margin: 10px 0 0 0;
  color: #6b7280;
  line-height: 1.55;
  max-width: 900px;
}

.mu-debug{
  margin: 10px 0 16px;
  padding: 12px;
  border-radius: 14px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.08);
}
.mu-debug__sum{
  cursor:pointer;
  font-weight: 900;
  color: var(--space-cadet);
}
.mu-debug__body{
  margin-top: 10px;
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
}

.mu-filters{
  margin: 14px 0 10px;
}
.mu-filters__bar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  padding: 14px;
  border-radius: 18px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.06);
}
.mu-filters__field{
  display:grid;
  gap: 6px;
}
.mu-filters__label{
  display:block;
  font-weight: 900;
  color: var(--space-cadet);
  font-size: 12px;
}
.mu-filters__input{
  border-radius: 14px;
  padding: 12px 14px;
  border: 2px solid rgba(17,24,39,.12);
  background:#fff;
  font-size: 16px;
}
.mu-filters__toggle{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background:#fff;
  border: 1px solid rgba(17,24,39,.10);
  font-weight: 900;
  color: var(--space-cadet);
}

.mu-filters__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.mu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration:none;
  border: 0;
  cursor:pointer;
}
.mu-btn--primary{
  background: var(--cardinal);
  color:#fff;
}
.mu-btn--ghost{
  background:#fff;
  color: var(--space-cadet);
  border: 1px solid rgba(17,24,39,.12);
}
.mu-btn--dark{
  background:#111827;
  color:#fff;
}

.mu-index__meta{
  margin: 12px 0 14px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}
.mu-index__count{
  font-weight: 900;
  color: var(--space-cadet);
}
.mu-index__perpage{
  display:flex;
  align-items:center;
  gap: 8px;
  color:#6b7280;
  font-weight: 800;
  font-size: 13px;
}
.mu-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 9999px;
  background:#fff;
  border: 1px solid rgba(17,24,39,.12);
  color: var(--space-cadet);
  text-decoration:none;
  font-weight: 900;
}
.mu-chip.is-active{
  background: var(--catalina-blue);
  color:#fff;
  border-color: rgba(10,29,122,.35);
}

/* Grid: 1 / 2 / 3 cols */
.mu-index__grid{
  display:grid;
  gap: 14px;
}
@media (min-width: 640px){
  .mu-index__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
}
@media (min-width: 1024px){
  .mu-index__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
}

/* Card tweaks for grid */
.mu__card--grid{
  width: auto;                 /* <- evita “gigante” */
  scroll-snap-align: unset;    /* no es carrusel */
}

/* Media fixed ratio */
.mu__media--grid{
  aspect-ratio: 16 / 9;
  background: var(--catalina-blue);
}
.mu__media--grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* <- clave anti-imagen gigante */
  display:block;
}

/* Pager (tu estilo, pero más compact) */
.mu-pager{
  margin-top: 18px;
}
.mu-pager__inner{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  padding: 14px;
  border-radius: 18px;
  background: var(--ghost-white);
  border: 1px solid rgba(17,24,39,.06);
}
.mu-pager__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  background:#fff;
  border: 1px solid rgba(17,24,39,.12);
  color: var(--space-cadet);
  font-weight: 900;
  text-decoration:none;
  white-space: nowrap;
}
.mu-pager__btn--disabled{
  opacity: .55;
  cursor: not-allowed;
}
.mu-pager__info{
  color: var(--space-cadet);
  font-weight: 900;
}
@media (max-width: 520px){
  .mu-pager__inner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mu-pager__btn{
    width: 100%;
  }
  .mu-pager__info{
    text-align:center;
  }
}

.itabs__dir-card--featured{
  background:
    linear-gradient(180deg, rgba(10,29,122,.04), rgba(10,29,122,0)) #fff;
  border: 1px solid rgba(10,29,122,.14);
  box-shadow: 0 18px 36px rgba(35,50,86,.10);
}

.itabs__dir-card--featured .itabs__dir-head{
  align-items: center;
}

.itabs__dir-area{
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px 0;
  padding: 6px 12px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--catalina-blue), var(--space-cadet));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(10,29,122,.14);
}

.itabs__dir-card--featured .itabs__dir-name{
  font-size: 20px;
  line-height: 1.15;
}

.itabs__dir-card--featured .itabs__dir-role{
  font-size: 14px;
  color: rgba(35,50,86,.84);
}

.itabs__dir-card--featured .itabs__dir-avatar{
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 16px;
  background: rgba(10,29,122,.06);
}

.itabs__node-area{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 4px 0;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(10,29,122,.08);
  border: 1px solid rgba(10,29,122,.14);
  color: var(--catalina-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.itabs__node-summary--featured{
  border-color: rgba(10,29,122,.14);
  box-shadow: 0 8px 20px rgba(35,50,86,.06);
}

/* ============================================================
   DIRECTORIO / ORGANIGRAMA NUEVO (dirorg-*)
============================================================ */

.dirorg{
  background: #fff;
  padding: 56px 0;
}
.dirorg--ghost{
  background: var(--ghost-white);
}

.dirorg__container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.dirorg__heading{
  margin: 0 0 10px 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.08;
}

.dirorg__intro{
  margin: 0 0 18px 0;
  color: #6b7280;
  line-height: 1.6;
  max-width: 900px;
}

.dirorg__grid{
  display: grid;
  gap: 18px;
}
@media (min-width: 900px){
  .dirorg__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dirorg__card{
  background: #fff;
  border: 1px solid rgba(35,50,86,.10);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(35,50,86,.08);
  overflow: hidden;
}

/* Encabezado de área: versión nueva más institucional */
.dirorg__areahead{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(35,50,86,.08);
}

.dirorg__areahead--topbar{
  position: relative;
}
.dirorg__areahead--topbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 6px;
  background: linear-gradient(90deg, var(--catalina-blue), var(--space-cadet));
}

.dirorg__areahead--accent{
  border-left: 6px solid var(--catalina-blue);
  padding-left: 16px;
}

.dirorg__areaeyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--catalina-blue);
  margin-bottom: 6px;
}

.dirorg__areatitle{
  margin: 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.2;
}

.dirorg__areadesc{
  margin: 8px 0 0 0;
  color: #6b7280;
  line-height: 1.5;
  font-size: 14px;
}

.dirorg__person{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px 14px;
}

.dirorg__avatar{
  width: 62px;
  height: 62px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10,29,122,.06);
  border: 1px solid rgba(35,50,86,.08);
  flex: 0 0 62px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dirorg__avatar-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.dirorg__avatar-ico::before{
  color: var(--catalina-blue);
  font-size: 1.4rem;
}

.dirorg__main{
  min-width: 0;
  flex: 1 1 auto;
}

.dirorg__name{
  margin: 0;
  color: var(--space-cadet);
  font-weight: 900;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.12;
}

.dirorg__role{
  margin: 4px 0 0 0;
  color: rgba(35,50,86,.85);
  font-size: 15px;
  line-height: 1.35;
}

.dirorg__loc{
  margin: 6px 0 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}

.dirorg__meta{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.dirorg__line{
  display:flex;
  gap: 8px;
  align-items: baseline;
  text-decoration:none;
  color:#374151;
  min-width:0;
}
.dirorg__line:hover{
  color: var(--catalina-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dirorg__line--muted{
  color:#6b7280;
}

.dirorg__label{
  font-weight: 900;
  color: var(--space-cadet);
  flex: 0 0 auto;
}
.dirorg__value--break{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Árbol */
.dirorg__tree{
  margin: 0 18px 18px;
  border-top: 1px solid rgba(35,50,86,.08);
  padding-top: 14px;
}

.dirorg__tree-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--ghost-white);
  border: 1px solid rgba(35,50,86,.08);
}
.dirorg__tree-summary::-webkit-details-marker{ display:none; }

.dirorg__tree-label{
  font-weight: 900;
  color: var(--space-cadet);
}

.dirorg__tree-count{
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(35,50,86,.10);
  color: var(--space-cadet);
  font-weight: 900;
}

.dirorg__tree-chev,
.dirorg__node-chev{
  width: 14px;
  height: 14px;
  display:inline-block;
  border-right: 2px solid rgba(35,50,86,.65);
  border-bottom: 2px solid rgba(35,50,86,.65);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

details[open] > .dirorg__tree-summary .dirorg__tree-chev,
details[open] > .dirorg__node-summary .dirorg__node-chev{
  transform: rotate(-135deg);
}

.dirorg__tree-list{
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none !important;
  display:grid;
  gap: 10px;
}

.dirorg__branch{
  position: relative;
  padding-left: 14px;
  border-left: 2px solid rgba(10,29,122,.10);
}
.dirorg__branch::before{
  content:"";
  position:absolute;
  left:-2px;
  top: 18px;
  width: 14px;
  height: 2px;
  background: rgba(10,29,122,.10);
}

.dirorg__node{
  border:0;
}

.dirorg__node-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(35,50,86,.08);
  box-shadow: 0 6px 18px rgba(35,50,86,.05);
}
.dirorg__node-summary::-webkit-details-marker{ display:none; }

.dirorg__node-left{
  display:flex;
  gap: 10px;
  min-width:0;
  flex: 1 1 auto;
}

.dirorg__node-avatar{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(10,29,122,.06);
  border: 1px solid rgba(35,50,86,.08);
  flex: 0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dirorg__node-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.dirorg__node-ico::before{
  color: var(--catalina-blue);
  font-size: 1.05rem;
}

.dirorg__node-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.dirorg__node-name{
  color: var(--space-cadet);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
}

.dirorg__node-role{
  color: rgba(35,50,86,.80);
  font-size: 13px;
  line-height: 1.3;
}

.dirorg__node-loc{
  color:#6b7280;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 2px;
}

.dirorg__chips{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dirorg__chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(10,29,122,.06);
  border:1px solid rgba(10,29,122,.10);
  color: var(--space-cadet);
  text-decoration:none;
  font-size: 12px;
  font-weight: 800;
  max-width:100%;
  overflow-wrap:anywhere;
}
.dirorg__chip:hover{
  color: var(--catalina-blue);
  border-color: rgba(10,29,122,.18);
}
.dirorg__chip--mail{
  background: rgba(202,31,61,.06);
  border-color: rgba(202,31,61,.12);
}

.dirorg__node-right{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top: 2px;
}
.dirorg__node-right--empty{
  width: 12px;
}

.dirorg__node-count{
  width: 28px;
  height: 28px;
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(35,50,86,.10);
  color: var(--space-cadet);
  font-size: 12px;
  font-weight: 900;
}

.dirorg__empty{
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  display:flex;
  gap: 14px;
  align-items:center;
}
.dirorg__empty-ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,29,122,.10);
  color: var(--space-cadet);
  font-weight: 900;
  flex: 0 0 46px;
}
.dirorg__empty-title{
  margin:0 0 4px 0;
  color: var(--space-cadet);
  font-weight: 900;
}
.dirorg__empty-sub{
  margin:0;
  color:#6b7280;
}

/* responsive */
@media (max-width: 640px){
  .dirorg{
    padding: 44px 0;
  }

  .dirorg__person{
    padding: 14px;
  }

  .dirorg__tree{
    margin: 0 14px 14px;
  }

  .dirorg__avatar{
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .dirorg__name{
    font-size: 22px;
  }
}

.dirorg__avatar-fallback,
.dirorg__node-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(10,29,122,.10), rgba(35,50,86,.16));
  color: var(--catalina-blue);
  font-weight: 900;
}

.dirorg__avatar-fallback{
  font-size: 24px;
}

.dirorg__node-fallback{
  font-size: 16px;
}


/* ============================================================
   MTY QUICK ACCESS BAR (mty-qbar__*)
   - Desktop: franja horizontal más compacta
   - Mobile: collapsible con icono de información
============================================================ */

.mty-qbar{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 50%, rgba(143,186,229,.07) 0%, transparent 38%),
    radial-gradient(circle at 82% 70%, rgba(143,186,229,.05) 0%, transparent 34%),
    linear-gradient(135deg, var(--space-cadet), var(--catalina-blue));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mty-qbar::before{
  content: "";
  position: absolute;
  inset: auto auto -82px 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  border-radius: 9999px;
  border: 22px solid rgba(255,255,255,.04);
  pointer-events: none;
}

.mty-qbar__container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

/* =========================
   DESKTOP / TABLET
========================= */
.mty-qbar__grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mty-qbar__item{
  min-width: 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px;
  text-decoration: none;
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.10);
  transition: background-color .18s ease;
}

.mty-qbar__item:first-child{
  border-left: 0;
}

.mty-qbar__item:hover{
  background: rgba(255,255,255,.05);
}

.mty-qbar__item:focus-visible{
  outline: 3px solid rgba(255,255,255,.62);
  outline-offset: -3px;
  background: rgba(255,255,255,.08);
}

.mty-qbar__number{
  display: block;
  font-size: clamp(1rem, .35vw + .82rem, 1.28rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.mty-qbar__label{
  display: block;
  font-size: .68rem;
  line-height: 1.22;
  color: rgba(255,255,255,.90);
  font-weight: 400;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tablet */
@media (max-width: 1100px){
  .mty-qbar__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mty-qbar__item{
    min-height: 68px;
  }

  .mty-qbar__item:nth-child(4){
    border-left: 0;
  }
}

/* =========================
   MOBILE COLLAPSIBLE
========================= */
.mty-qbar__mobile{
  display: none;
}

.mty-qbar__mobile-summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 0;
  cursor: pointer;
}

.mty-qbar__mobile-summary::-webkit-details-marker{
  display: none;
}

.mty-qbar__mobile-icon{
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  flex: 0 0 24px;
}

.mty-qbar__mobile-title{
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.mty-qbar__mobile-chevron{
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-right: 2px;
}

.mty-qbar__mobile[open] .mty-qbar__mobile-chevron{
  transform: rotate(-135deg);
}

.mty-qbar__mobile-panel{
  padding: 0 0 10px 0;
}

.mty-qbar__mobile-list{
  display: grid;
  gap: 8px;
}

.mty-qbar__mobile-item{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.mty-qbar__mobile-item:hover{
  background: rgba(255,255,255,.10);
}

.mty-qbar__mobile-item:focus-visible{
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 2px;
}

.mty-qbar__mobile-number{
  font-size: .98rem;
  line-height: 1.08;
  font-weight: 700;
  color: #fff;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mty-qbar__mobile-label{
  font-size: .76rem;
  line-height: 1.25;
  color: rgba(255,255,255,.88);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   MOBILE BREAKPOINT
========================= */
@media (max-width: 700px){
  .mty-qbar__container{
    padding: 0 12px;
  }

  .mty-qbar__grid{
    display: none;
  }

  .mty-qbar__mobile{
    display: block;
  }

  .mty-qbar::before{
    width: 180px;
    height: 180px;
    border-width: 14px;
    bottom: -30px;
  }
}

.mty-qbar__meta,
.mty-qbar__mobile-meta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mty-qbar__icon .qs-icon::before,
.mty-qbar__mobile-itemicon .qs-icon::before,
.qs-icon.mty-qbar__icon::before,
.qs-icon.mty-qbar__mobile-itemicon::before{
  font-size: .72rem;
  color: rgba(255,255,255,.82);
}

.mty-qbar__meta,
.mty-qbar__mobile-meta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mty-qbar__icon .qs-icon::before,
.mty-qbar__mobile-itemicon .qs-icon::before,
.qs-icon.mty-qbar__icon::before,
.qs-icon.mty-qbar__mobile-itemicon::before{
  font-size: .72rem;
  color: rgba(255,255,255,.82);
}

/* ============================================================
   MTY FOOTER (mty-footer__*)
   - Footer institucional moderno y administrable
============================================================ */

.mty-footer{
  background: #f2f2f2;
  color: #1f2937;
  padding: 56px 0 30px;
  border-top: 1px solid rgba(17,24,39,.08);
}

.mty-footer__container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.mty-footer__grid{
  display: grid;
  gap: 36px;
}

@media (min-width: 1024px){
  .mty-footer__grid{
    grid-template-columns: 1.2fr 1.2fr 1fr 1fr;
    align-items: start;
  }
}

.mty-footer__brand{
  min-width: 0;
}

.mty-footer__brandhead{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.mty-footer__brandmark{
  width: 74px;
  height: 74px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(35,50,86,.10);
  box-shadow: 0 8px 24px rgba(35,50,86,.08);
  color: var(--space-cadet);
  font-weight: 900;
  font-size: 28px;
  flex: 0 0 74px;
}

.mty-footer__brandtitle{
  margin: 0;
  color: var(--space-cadet);
  font-weight: 800;
  font-size: clamp(1rem, .7vw + .8rem, 1.5rem);
  line-height: 1.15;
}

.mty-footer__brandsub{
  margin: 6px 0 0 0;
  color: rgba(35,50,86,.72);
  font-size: clamp(.82rem, .35vw + .72rem, 1rem);
  line-height: 1.35;
}

.mty-footer__branddesc{
  margin: 0 0 20px 0;
  color: #4b5563;
  line-height: 1.7;
  max-width: 420px;
}

.mty-footer__socials{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mty-footer__social{
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4b5563;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.mty-footer__social:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 10px 18px rgba(35,50,86,.10);
}

.mty-footer__col{
  min-width: 0;
}

.mty-footer__title{
  margin: 0 0 10px 0;
  color: #111827;
  font-weight: 900;
  font-size: 16px;
}

.mty-footer__divider{
  height: 1px;
  background: rgba(17,24,39,.18);
  margin-bottom: 18px;
}

.mty-footer__contacttext{
  margin: 0 0 10px 0;
  color: #1f2937;
  line-height: 1.55;
  font-size: clamp(15px, 1.2vw, 18px);
}

.mty-footer__contactline{
  margin: 0 0 8px 0;
  color: #1f2937;
  line-height: 1.45;
}

.mty-footer__contactlabel{
  font-weight: 400;
  color: #111827;
}

.mty-footer__contactlink{
  color: #60a5fa;
  text-decoration: none;
}

.mty-footer__contactlink:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mty-footer__contactextra{
  margin: 10px 0 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.45;
}

.mty-footer__links{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.mty-footer__link{
  color: #60a5fa;
  text-decoration: none;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mty-footer__link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mty-footer__ext{
  color: rgba(17,24,39,.55);
  font-size: .95em;
}

.mty-footer__bottom{
  margin-top: 42px;
  padding-top: 22px;
  text-align: center;
}

.mty-footer__bottomlinks{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mty-footer__bottomlink{
  color: #60a5fa;
  text-decoration: none;
  font-size: clamp(14px, 1vw, 16px);
}

.mty-footer__bottomlink:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mty-footer__sep{
  color: rgba(17,24,39,.55);
}

.mty-footer__legal{
  margin: 0;
  color: #1f2937;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 1023px){
  .mty-footer{
    padding: 46px 0 28px;
  }

  .mty-footer__grid{
    gap: 28px;
  }

  .mty-footer__branddesc{
    max-width: none;
  }
}

@media (max-width: 640px){

  .mty-footer__brandhead{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
  }

  .mty-footer__brandmark{
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 24px;
  }

  .mty-footer__bottom{
    margin-top: 32px;
  }
}

.mty-footer__brandmark{
  width: 110px;
  height: 110px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 0 0 110px;
  overflow: hidden;
}

.mty-footer__brandlogo{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px){
  .mty-footer__brandmark{
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }
}