/* ===========================================================================
   MXGA — sistema de diseño
   ---------------------------------------------------------------------------
   Paleta tomada de las variables del tema vivo de mxga.mx (<style id="cssVariables">):
     --color_3 #04539C es el azul de marca. El resto de la rampa se deriva de ESE
     tono en OKLCH (mismo matiz, distinta luminosidad), para que ningun color del
     sitio sea inventado. El teal #68CCD1 y los rojos del bloque "Aviso importante"
     tambien salen del CSS del sitio real.

   Tipografias oficiales: Montserrat (titulos) + Open Sans (texto).

   Por que @layer: en v1 una regla de 1 clase (.mxnav-cta) perdio contra otra de
   clase+elemento (.mxnav-links>a) y dejo el boton con texto blanco sobre blanco.
   Con capas el ORDEN manda sobre la especificidad, asi que ese choque no puede
   volver a ocurrir: lo que este en `components` siempre gana a `layout`.
   =========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100%; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; }
  a { color: inherit; }
  ul, ol { padding: 0; list-style: none; }
  table { border-collapse: collapse; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* rampa de marca — misma H que #04539C */
    --brand-950:#001534;
    --brand-900:#002350;
    --brand-800:#00316b;
    --brand-700:#004185;
    --brand:    #04539C;   /* OFICIAL --color_3 */
    --brand-500:#1769bc;
    --brand-400:#4688d5;
    --brand-300:#77a8e2;
    --brand-200:#b2cdee;
    --brand-100:#d7e6f9;
    --brand-50: #edf5fd;

    /* neutros con una pizca del matiz de marca */
    --ink:  #161b21;
    --n-900:#25292f;
    --n-700:#4f5358;
    --n-600:#6e7277;
    --n-500:#898c91;
    --n-400:#a8abaf;
    --n-300:#ced1d5;
    --n-200:#e4e6e9;
    --n-100:#f1f3f5;
    --n-50: #f7f9fb;
    --white:#ffffff;

    /* acentos del sitio vivo */
    --accent:     #FB810E;   /* boton "Agendar cita de valoracion" del pie */
    --accent-700: #d96b06;
    --teal:     #68CCD1;
    --teal-600: #33969b;
    --alert-bg: #8C1F16;
    --alert-fg: #FFF6F4;
    --alert-ink:#A8261C;

    /* Tipografia OFICIAL, medida sobre mxga.mx (getComputedStyle en el sitio
       vivo): h1/h2/h3 salen Georgia bold y el cuerpo Open Sans. La hoja del
       tema declara Montserrat en `dmInner`, pero `dmContent` la pisa con
       Georgia y es esa la que se ve. Georgia es fuente de sistema: no hace
       falta pedirla a Google. */
    --ff-head: Georgia, 'Times New Roman', Times, serif;
    --ff-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --ff-ui:   'Open Sans', 'Segoe UI', system-ui, sans-serif;

    --fs-xs:    0.8125rem;
    --fs-sm:    0.875rem;
    --fs-base:  1rem;
    --fs-lg:    clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
    --fs-h5:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-h4:    clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
    --fs-h3:    clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem);
    --fs-h2:    clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
    --fs-h1:    clamp(2rem, 1.5rem + 2.2vw, 3.125rem);
    --fs-display:clamp(2.25rem, 1.5rem + 3.2vw, 4rem);

    /* escala 4pt */
    --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
    --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
    --s-9:6rem;   --s-10:8rem;

    /* ritmo vertical de seccion: mas aire en pantallas grandes */
    --sec-y: clamp(3.25rem, 2rem + 5vw, 6rem);
    --sec-y-lg: clamp(4rem, 2.2rem + 7vw, 8rem);

    /* El contenedor era fijo en 1200px: a 1920 dejaba el contenido en el 62% de
       la pantalla y se sentia acotado. Ahora escala con el viewport y solo topa
       en pantallas muy grandes, donde una linea mas ancha ya no se lee mejor.
         1440 -> 1339px (93%) · 1920 -> 1680px (88%) · 2560 -> 1680px */
    --wrap: min(1680px, 93vw);
    --wrap-narrow: 760px;

    --r-sm:4px; --r-md:6px; --r-lg:10px;

    /* sombras sobrias: una firma contable no necesita brillos */
    --sh-1: 0 1px 2px rgba(0,21,52,.06), 0 1px 1px rgba(0,21,52,.04);
    --sh-2: 0 4px 12px rgba(0,21,52,.07), 0 1px 3px rgba(0,21,52,.05);
    --sh-3: 0 12px 32px rgba(0,21,52,.10), 0 2px 8px rgba(0,21,52,.06);

    --ease: cubic-bezier(.2,.6,.3,1);
    --dur: 200ms;

    --nav-h: 76px;
    /* Cuanto pisa la tarjeta de cifras al hero. La usan el margen negativo de
       .stats-float Y la posicion de los puntos del carrusel, para que los
       puntos nunca queden tapados por la tarjeta. */
    --stats-overlap: clamp(2.5rem, 3vw + 1.25rem, 4.5rem);
  }
  @media (max-width: 860px) { :root { --nav-h: 64px; } }
}

/* ------------------------------------------------------------------- base */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    /* `clip` (no `hidden`) para no convertir la raiz en contenedor de scroll:
       asi el nav sticky sigue funcionando y nada se sale a lo ancho. */
    overflow-x: hidden;
    overflow-x: clip;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--n-900);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    /* Ningun elemento debe poder empujar el ancho del documento. OJO: aqui iba
       `hidden`, que convierte al body en contenedor de scroll y con eso rompe
       position:sticky en TODO lo que hay dentro (era la razon de que el panel
       lateral no se quedara fijo). `clip` recorta igual y no crea contenedor. */
    overflow-x: clip;
  }

  h1, h2, h3, h4, h5 {
    font-family: var(--ff-head);
    color: var(--brand-950);
    line-height: 1.22;
    letter-spacing: -0.005em;
    text-wrap: balance;
    font-weight: 700;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
  h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
  h5 { font-size: var(--fs-h5); font-weight: 600; line-height: 1.35; }

  p { text-wrap: pretty; }
  strong, b { font-weight: 600; color: var(--brand-950); }

  a { color: var(--brand); text-decoration: none; transition: color var(--dur) var(--ease); }
  a:hover { color: var(--brand-700); }

  :focus-visible {
    outline: 3px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection { background: var(--brand-100); color: var(--brand-950); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1.125rem, 4vw, 2.5rem);
  }
  .container--narrow { max-width: var(--wrap-narrow); }

  .section { padding-block: var(--sec-y); }
  .section--lg { padding-block: var(--sec-y-lg); }
  .section--tint { background: var(--n-50); }
  .section--line { border-top: 1px solid var(--n-200); }

  /* banda oscura de marca */
  .section--deep {
    background: var(--brand-900);
    color: var(--brand-100);
  }
  .section--deep h2, .section--deep h3, .section--deep h4, .section--deep strong { color: var(--white); }
  .section--deep a { color: var(--white); }

  .stack > * + * { margin-top: var(--s-4); }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* --- el motivo: una regla corta de marca, como el filete de un libro mayor */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--s-3);
  }
  .eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    flex: none;
  }
  .section--deep .eyebrow { color: var(--teal); }

  .sec-head { max-width: 62ch; margin-bottom: var(--s-6); }
  .sec-head p { color: var(--n-700); font-size: var(--fs-lg); margin-top: var(--s-3); }
  .section--deep .sec-head p { color: var(--brand-200); }

  .sec-head--split {
    display: grid;
    gap: var(--s-4) var(--s-7);
    align-items: end;
    max-width: none;
  }
  @media (min-width: 880px) {
    .sec-head--split { grid-template-columns: minmax(0,1fr) auto; }
  }

  /* --- botones */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    padding: .875rem 1.5rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  .btn--primary { background: var(--brand); color: var(--white); border-color: var(--brand); }
  .btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); box-shadow: var(--sh-2); }

  .btn--ghost { background: transparent; color: var(--brand); border-color: var(--n-300); }
  .btn--ghost:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }

  /* Naranja oficial del pre-pie de mxga.mx. Es el UNICO color de accion del
     sitio: no se usa en ningun otro sitio para que no pierda fuerza. */
  .btn--accent { background: var(--accent); color: var(--white); border-color: var(--accent); font-weight: 700; }
  .btn--accent:hover { background: var(--accent-700); border-color: var(--accent-700); color: var(--white); box-shadow: var(--sh-2); }

  .btn--onDark { background: var(--white); color: var(--brand-900); border-color: var(--white); }
  .btn--onDark:hover { background: var(--brand-100); color: var(--brand-950); }

  .btn--outlineDark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
  .btn--outlineDark:hover { background: rgba(255,255,255,.10); border-color: var(--white); color: var(--white); }

  /* enlace con flecha */
  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand);
  }
  .arrow-link .chev { transition: transform var(--dur) var(--ease); }
  .arrow-link:hover .chev { transform: translateX(3px); }

  /* --- barra de aviso (rojo del sitio vivo) */
  .alert-band {
    background: var(--alert-bg);
    color: var(--alert-fg);
  }
  .alert-band .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    padding-block: .875rem;
  }
  .alert-band__tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    flex: none;
  }
  .alert-band__tag svg { width: 18px; height: 18px; flex: none; }
  .alert-band p {
    font-size: var(--fs-sm);
    line-height: 1.55;
    margin: 0;
    flex: 1 1 22rem;
    min-width: 0;
  }
  .alert-band a.alert-band__cta {
    color: var(--white);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,.5);
    padding-bottom: 1px;
    flex: none;
  }
  .alert-band a.alert-band__cta:hover { border-bottom-color: var(--white); color: var(--white); }

  /* --- navegacion */
  .mxnav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--white);
    border-bottom: 1px solid var(--n-200);
    /* El nav YA era sticky; sin sombra no se leia como una capa encima del
       contenido y por eso no se sentia fijo. */
    box-shadow: 0 1px 3px rgba(0,21,52,.06);
    transition: box-shadow var(--dur) var(--ease);
  }
  .mxnav[data-scrolled="true"] { box-shadow: 0 6px 20px rgba(0,21,52,.12), 0 1px 3px rgba(0,21,52,.08); }
  .mxnav__bar {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }
  .mxnav__logo { flex: none; display: flex; align-items: center; }
  .mxnav__logo img { height: 48px; width: auto; }   /* +20% sobre los 40px de v2.0 */
  @media (max-width: 860px) { .mxnav__logo img { height: 38px; } }

  .mxnav__links {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
  }
  /* Se califica con .mxnav para que ninguna regla de enlace pise a los botones. */
  .mxnav .mxnav__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--n-900);
    padding: .625rem .75rem;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .mxnav .mxnav__link:hover { color: var(--brand); background: var(--brand-50); }
  .mxnav .mxnav__link[aria-current="page"] { color: var(--brand); }
  .mxnav .mxnav__link .caret { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }

  /* El item NO es el bloque contenedor: si lo fuera, el mega se ancla al boton
     (que vive a la derecha) y se sale 294px por la izquierda. Se ancla a .mxnav,
     que ya es posicionado por ser sticky, y se centra como el resto del sitio. */
  .mxnav__item { position: static; }
  .mxnav__item[data-open="true"] > .mxnav__link { color: var(--brand); background: var(--brand-50); }
  .mxnav__item[data-open="true"] > .mxnav__link .caret { transform: rotate(180deg); }

  /* mega menu de Áreas */
  .mxnav__mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(var(--wrap), calc(100vw - 2.5rem));
    margin-top: 10px;
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    padding: var(--s-5);
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--s-5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .mxnav__item[data-open="true"] .mxnav__mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  /* Puente invisible sobre el hueco de 10px: sin el, el puntero "sale" del item
     al bajar del boton al panel y el menu se cierra a media transicion. */
  .mxnav__mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }

  .mxnav__megaCol > a.mxnav__megaHead {
    display: block;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--brand-950);
    padding-bottom: .625rem;
    margin-bottom: .625rem;
    border-bottom: 2px solid var(--brand-100);
  }
  .mxnav__megaCol > a.mxnav__megaHead:hover { color: var(--brand); border-bottom-color: var(--brand); }
  .mxnav__megaCol ul { display: grid; gap: .125rem; }
  .mxnav__megaCol li > a {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--n-700);
    padding: .4rem .5rem;
    margin-inline: -.5rem;
    border-radius: var(--r-sm);
  }
  .mxnav__megaCol li > a:hover { color: var(--brand); background: var(--brand-50); }

  .mxnav__tools { display: flex; align-items: center; gap: var(--s-3); flex: none; }
  .mxnav .mxnav__lang {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--n-700);
    border: 1px solid var(--n-300);
    border-radius: var(--r-sm);
    padding: .5rem .625rem;
    line-height: 1;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .mxnav .mxnav__lang:hover { color: var(--brand); border-color: var(--brand-300); }
  .mxnav .mxnav__cta { padding: .75rem 1.25rem; }

  .mxnav__burger {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: 1px solid var(--n-300);
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--brand-950);
  }
  .mxnav__burger svg { width: 22px; height: 22px; }

  @media (max-width: 1100px) {
    .mxnav__links, .mxnav .mxnav__cta { display: none; }
    .mxnav__burger { display: inline-flex; }
    .mxnav__tools { margin-left: auto; }
  }

  /* panel movil */
  /* El panel entra en VERTICAL a proposito. Sacarlo por la derecha con
     translateX(100%) lo dejaba en x=375..750: al ser position:fixed escapa al
     overflow del body y ensanchaba el documento a 562px en movil. */
  .mxpanel {
    position: fixed;
    inset: var(--nav-h) 0 0;
    z-index: 55;
    background: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-5) 0 var(--s-8);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 220ms var(--ease), opacity 220ms var(--ease), visibility 220ms;
  }
  .mxpanel[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .mxpanel__group + .mxpanel__group { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--n-200); }
  .mxpanel h4 {
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--s-3);
  }
  .mxpanel a.mxpanel__link {
    display: block;
    font-family: var(--ff-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-950);
    padding: .625rem 0;
    border-bottom: 1px solid var(--n-100);
  }
  .mxpanel a.mxpanel__link:hover { color: var(--brand); }
  .mxpanel a.mxpanel__sub { font-weight: 400; font-size: var(--fs-sm); color: var(--n-700); padding-left: var(--s-3); }
  .mxpanel .btn { width: 100%; margin-top: var(--s-5); }

  /* --- migas */
  .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    color: var(--n-600);
  }
  .crumbs a { color: var(--n-700); }
  .crumbs a:hover { color: var(--brand); }
  .crumbs .sep { color: var(--n-400); }
  .crumbs [aria-current] { color: var(--brand); font-weight: 600; }

  /* --- encabezado de pagina */
  .page-head {
    background: var(--n-50);
    border-bottom: 1px solid var(--n-200);
    padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
    position: relative;
  }
  .page-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--brand);
  }
  .page-head h1 { margin-top: var(--s-3); max-width: 22ch; }

  /* --- B1: cabecera con foto de arquitectura + velo azul de marca ---------- */
  .page-head--foto {
    background: var(--brand-950);
    border-bottom: 0;
    padding-block: clamp(3rem, 2rem + 4.5vw, 6rem);
    overflow: hidden;
  }
  .page-head--foto .page-head__bg { position: absolute; inset: 0; }
  /* object-position hacia ARRIBA, no centrado: con fotos de gente el recorte de
     `cover` tiene que comerse el piso, nunca las cabezas.
     La banda de cabecera es 2.744:1 y esta caja llega a 3.9:1 en escritorio, asi
     que cover recorta ~15% arriba y ~15% abajo. Centrado, eso decapitaba a la
     gente en Conocenos, Control Interno, Planeacion Fiscal y Trabaja con
     Nosotros. Anclando en 22% se recorta casi todo por abajo, donde solo hay
     mesa y suelo. No se arregla imagen por imagen: es una sola regla y cubre
     las 10 cabeceras en todos los anchos. */
  .page-head--foto .page-head__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  /* El velo no es decorativo: sin el, el texto blanco no llega a 4.5:1 sobre
     una foto de cristal y cielo. */
  .page-head--foto .page-head__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,21,52,.93) 0%, rgba(0,21,52,.80) 48%, rgba(0,35,80,.60) 100%);
  }
  .page-head--foto > .container { position: relative; z-index: 1; }
  .page-head--foto h1 { color: var(--white); }
  .page-head--foto .page-head__lead { color: var(--brand-200); }
  .page-head--foto .crumbs { color: var(--brand-300); }
  .page-head--foto .crumbs a { color: var(--brand-200); }
  .page-head--foto .crumbs a:hover { color: var(--white); }
  .page-head--foto .crumbs .sep { color: var(--brand-400); }
  .page-head--foto .crumbs [aria-current] { color: var(--white); }
  .page-head__lead {
    margin-top: var(--s-4);
    font-size: var(--fs-lg);
    color: var(--n-700);
    max-width: 60ch;
  }

  /* --- tarjetas */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  a.card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); transform: translateY(-2px); }

  .card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--n-100); }
  .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
  a.card:hover .card__media img { transform: scale(1.035); }

  .card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
  .card__body h3 { font-size: var(--fs-h4); }
  a.card:hover .card__body h3 { color: var(--brand); }
  .card__body p { font-size: var(--fs-sm); color: var(--n-700); line-height: 1.6; }
  .card__foot { margin-top: auto; padding-top: var(--s-2); }

  .tag {
    display: inline-block;
    font-family: var(--ff-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-50);
    border-radius: 999px;
    padding: .3rem .625rem;
    line-height: 1;
    align-self: flex-start;
  }
  .date { font-size: var(--fs-xs); color: var(--n-600); }

  .grid { display: grid; gap: var(--s-5); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  /* auto-FIT, no auto-fill: con el contenedor ancho, auto-fill dejaba columnas
     vacias y los 3 boletines del home terminaban apretados a la izquierda con
     un hueco a la derecha. auto-fit colapsa las pistas vacias y los reparte. */
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  /* El indice si tiene decenas de tarjetas: se topa en 4 columnas porque a 5 la
     portada se hace demasiado pequena para leerse. */
  @media (min-width: 1400px) {
    [data-paged].grid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* --- lista de enlaces con filete (el motivo de libro mayor) */
  .link-list { display: grid; }
  .link-list > a,
  .link-list > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-950);
    padding: .8rem 0;
    border-bottom: 1px solid var(--n-200);
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
  }
  .link-list > span { color: var(--n-700); font-weight: 400; }
  .link-list > a .chev { flex: none; color: var(--n-400); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
  .link-list > a:hover { color: var(--brand); padding-left: .375rem; }
  .link-list > a:hover .chev { color: var(--brand); transform: translateX(3px); }

  /* --- lista de caracteristicas */
  .feature-list { display: grid; gap: .625rem; }
  .feature-list > li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--n-700);
    line-height: 1.6;
  }
  .feature-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--brand);
    transform: rotate(45deg);
  }
  .section--deep .feature-list > li { color: var(--brand-100); }

  /* --- cifras */
  .stat { display: flex; flex-direction: column; gap: .5rem; }
  .stat__n {
    font-family: var(--ff-head);
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
  }
  .stat__label {
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--teal);
  }
  .stat__desc { font-size: var(--fs-sm); color: var(--brand-200); line-height: 1.55; }
  .stat--light .stat__n { color: var(--brand); }
  .stat--light .stat__label { color: var(--brand-950); }
  .stat--light .stat__desc { color: var(--n-700); }

  /* --- figura de contenido */
  .figure { margin-block: var(--s-6); }
  .figure img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--n-200); }
  /* Foto de respiro a media pagina: panoramica para que corte el texto sin
     robarle protagonismo. */
  /* mismo criterio que la cabecera: el recorte se come el piso, no las cabezas. */
  .figure--ancha img { aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 25%; border: 0; }

  /* --- panel lateral */
  .rail { display: grid; gap: var(--s-5); align-content: start; }
  @media (min-width: 1000px) {
    .rail {
      position: sticky;
      top: calc(var(--nav-h) + 1.5rem);
      /* Sin esto el panel se estira al alto de la fila del grid y el sticky no
         tiene recorrido: parece que no funciona. */
      align-self: start;
      /* Sin scroll propio a proposito: un menu de navegacion con barra interna
         se siente roto. En vez de recortarlo, se aprieta el contenido (titulos
         mas chicos y ciudades en linea) para que quepa entero. */
      gap: var(--s-4);
    }
  }

  .rail__box {
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .rail__box > h4 {
    font-size: 0.75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-950);
    padding: .625rem var(--s-4);
    background: var(--n-50);
    border-bottom: 1px solid var(--n-200);
  }
  .rail__nav { display: grid; padding: .5rem; }
  .rail__nav > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--n-700);
    padding: .5rem .75rem;
    border-radius: var(--r-sm);
    line-height: 1.35;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .rail__nav > a .chev { flex: none; opacity: .5; }
  .rail__nav > a:hover { background: var(--brand-50); color: var(--brand); }
  .rail__nav > a[aria-current="page"] { background: var(--brand); color: var(--white); }
  .rail__nav > a[aria-current="page"] .chev { opacity: 1; }

  .rail__cta {
    background: var(--brand-900);
    color: var(--brand-100);
    border-radius: var(--r-md);
    padding: var(--s-4);
    display: grid;
    gap: .5rem;
  }
  .rail__cta h4 { color: var(--white); font-size: var(--fs-h5); }
  .rail__cta p { font-size: var(--fs-sm); color: var(--brand-200); }
  .rail__cta .btn { margin-top: var(--s-2); }

  /* --- pie: fondo blanco, como el del sitio vivo ------------------------- */
  .site-foot { background: var(--white); color: var(--n-700); border-top: 1px solid var(--n-200); }
  .site-foot a { color: var(--n-700); }
  .site-foot a:hover { color: var(--brand); }
  .site-foot__main {
    display: grid;
    gap: var(--s-6) var(--s-7);
    padding-block: var(--sec-y);
  }
  @media (min-width: 880px) {
    .site-foot__main { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  }
  .site-foot__brand img { height: 52px; width: auto; margin-bottom: var(--s-4); }
  .site-foot__brand p { font-size: var(--fs-sm); line-height: 1.65; max-width: 34ch; color: var(--n-700); }
  .site-foot h4 {
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-950);
    margin-bottom: var(--s-4);
  }
  .site-foot ul { display: grid; gap: .625rem; }
  .site-foot li > a { font-size: var(--fs-sm); }
  .site-foot__social { display: flex; gap: .625rem; margin-top: var(--s-5); }
  .site-foot__social > a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--n-300);
    border-radius: var(--r-sm);
    color: var(--n-600);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .site-foot__social > a svg { width: 17px; height: 17px; }
  .site-foot__social > a:hover { color: var(--white); background: var(--brand); border-color: var(--brand); }
  .site-foot__bottom {
    border-top: 1px solid var(--n-200);
    padding-block: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--n-600);
  }
  .site-foot__contact { display: grid; gap: .625rem; font-size: var(--fs-sm); }
  .site-foot__contact .row { display: flex; gap: .625rem; align-items: flex-start; }
  .site-foot__contact svg { width: 16px; height: 16px; flex: none; margin-top: .28em; color: var(--brand); }

  /* --- aparicion suave al hacer scroll */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  /* Sin JS (o con motion reducido) el contenido NUNCA debe quedarse invisible. */
  .no-js .reveal, html:not(.js) .reveal { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------------ pages */
@layer pages {

  /* ============================ HOME ============================ */
  .hero { position: relative; background: var(--brand-950); overflow: hidden; }
  .hero__track { position: relative; }
  .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 800ms var(--ease);
    pointer-events: none;
  }
  .hero__slide:first-child { position: relative; }
  .hero__slide[data-active="true"] { opacity: 1; pointer-events: auto; }
  .hero__bg { position: absolute; inset: 0; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,21,52,.94) 0%, rgba(0,21,52,.82) 42%, rgba(0,35,80,.55) 100%);
  }
  .hero__inner {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
    /* Alto de pantalla completa. `svh` y no `vh`: en movil `vh` cuenta la barra
       del navegador y el hero queda mas alto que la pantalla. Se descuenta el
       nav y la banda de aviso, que van ARRIBA del hero (--alerta-h la mide
       mxga.js, porque su alto depende de como envuelva el texto). */
    min-height: 34rem;
    min-height: calc(100svh - var(--nav-h) - var(--alerta-h, 0px));
    display: flex;
    align-items: center;
  }

  /* --- pie del hero: puntos + franja de cifras ---------------------------
     MOVIL: la franja fluye DEBAJO del hero, en banda solida. Meterla encima de
     la foto con 4 cifras y sus frases seria un muro ilegible, y esconder las
     frases con display:none seria quitar contenido de la pagina.
     ESCRITORIO: flota sobre la foto, translucida. */
  .hero__bottom { position: static; }
  .hero__stats { background: var(--brand-900); }
  .hero__statsInner { padding-block: var(--s-5); }

  .hero__statsTitle {
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: var(--s-4);
  }

  .hero__statsGrid {
    display: grid;
    gap: var(--s-5) 0;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .hstat { display: flex; flex-direction: column; min-width: 0; }
  .hstat__n {
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
  }
  .hstat__label {
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--brand-100);
    margin-top: .35rem;
  }
  /* La frase completa se conserva siempre, en un tono que no compite. */
  .hstat__desc {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: rgba(215,230,249,.72);
    margin-top: .25rem;
  }

  /* Flota solo con ancho Y alto suficientes. En una pantalla de 720p el espacio
     que reserva no cabe, y esconder las frases con display:none seria quitar
     contenido de la pagina: en ese caso la franja fluye debajo, como en movil. */
  @media (min-width: 900px) and (min-height: 821px) {
    /* Reserva para .hero__bottom, que va absoluto. A 900px (justo donde la
       franja empieza a flotar) el minimo anterior la dejaba pisando los botones
       por 5px, medido con Puppeteer. */
    .hero__inner { padding-bottom: clamp(17rem, 12rem + 9vw, 19rem); }
    .hero__bottom { position: absolute; inset: auto 0 0; z-index: 2; }
    .hero__stats {
      background: linear-gradient(180deg, rgba(0,21,52,.20) 0%, rgba(0,21,52,.74) 100%);
      border-top: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(2px);
    }
    .hero__statsInner { padding-block: clamp(1.25rem, .75rem + 1vw, 1.875rem); }
    .hero__statsGrid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
    .hstat { padding: 0 var(--s-5); }
    .hstat:first-child { padding-left: 0; }
    .hstat:last-child { padding-right: 0; }
    .hstat + .hstat { border-left: 1px solid rgba(255,255,255,.18); }
  }
  .hero__copy { max-width: 46rem; }
  .hero__copy .eyebrow { color: var(--teal); }
  /* Solo la primera diapositiva lleva <h1>: una pagina no puede tener tres.
     Las otras usan .hero__h, que se ve identico pero no es encabezado. */
  .hero h1, .hero .hero__h {
    font-family: var(--ff-head);
    font-weight: 700;
    line-height: 1.18;
    text-wrap: balance;
    color: var(--white);
    font-size: var(--fs-display);
    letter-spacing: -0.025em;
  }
  .hero__sub {
    margin-top: var(--s-4);
    font-size: var(--fs-lg);
    color: var(--brand-200);
    max-width: 48ch;
    line-height: 1.6;
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

  /* Los puntos ya no se posicionan solos: viven dentro de .hero__bottom, junto
     a la franja de cifras. Antes habia que calcular a mano cuanto subirlos para
     que la tarjeta de cifras no los tapara. */
  .hero__dots { padding-bottom: .875rem; }
  .hero__dots .container { display: flex; gap: .625rem; }
  /* En movil la franja va DEBAJO del hero, asi que los puntos se quedan sobre
     la foto y necesitan su propio aire. */
  @media (max-width: 899px) { .hero__dots { padding: 0 0 1.25rem; } }
  .hero__dot {
    width: 46px;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
  }
  .hero__dot[aria-selected="true"] { background: var(--teal); }
  .hero__dot:hover { background: rgba(255,255,255,.6); }

  /* --- B4: bento de areas ------------------------------------------------- */
  .bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; grid-auto-rows: 260px; }
  @media (min-width: 760px)  { .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1040px) {
    .bento { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 340px; }
    .bento > .acard--ancha { grid-column: span 2; }
  }

  /* Tarjeta-portal: la foto llena la tarjeta y el titulo va encima. Se quito
     la lista de servicios (vive en la pagina del area y en el menu): dejaba
     medio recuadro en blanco y competia con el titulo. */
  .acard {
    position: relative;
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--brand-900);
    isolation: isolate;
  }
  .acard__media { position: absolute; inset: 0; }
  .acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
  a.acard:hover .acard__media img { transform: scale(1.05); }
  /* El velo garantiza contraste del titulo blanco sobre cualquier foto. */
  .acard__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,21,52,.15) 0%, rgba(0,21,52,.55) 55%, rgba(0,21,52,.88) 100%);
  }
  .acard__cara {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .35rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }
  .acard__cara > h3 { color: var(--white); font-size: var(--fs-h3); }
  .acard__idx {
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--teal);
    line-height: 1;
  }
  .acard__ir {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--white);
    opacity: .85;
    margin-top: .35rem;
  }
  .acard__ir .chev { transition: transform var(--dur) var(--ease); }
  a.acard:hover .acard__ir { opacity: 1; }
  a.acard:hover .acard__ir .chev { transform: translateX(4px); }

  /* bloque partido imagen + texto */
  .split { display: grid; gap: var(--s-6) var(--s-7); align-items: center; }
  @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
  .split--rev > .split__media { order: -1; }
  @media (min-width: 900px) { .split--rev > .split__media { order: 2; } }
  /* Sin recorte, la foto vertical de la alianza se comia la seccion entera. */
  .split__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
  }
  .split__body > p { color: var(--n-700); margin-top: var(--s-4); }
  .split__body > p + p { margin-top: var(--s-3); }

  /* --- pre-pie: replica del bloque real de mxga.mx ------------------------ */
  .info-cta { padding-block: var(--s-7); background: var(--white); }
  .info-cta__box {
    background: var(--brand);
    border-radius: var(--r-md);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2.5vw, 3rem);
    display: grid;
    gap: var(--s-4) var(--s-6);
    align-items: center;
    justify-items: center;
    text-align: center;
  }
  /* El sitio vivo alinea la pregunta a la derecha de media caja, lo que deja un
     hueco grande a la izquierda. Se conserva la pareja pregunta+boton pero
     centrada como grupo: mismo mensaje, mejor equilibrio. */
  @media (min-width: 820px) {
    .info-cta__box {
      grid-template-columns: auto auto;
      justify-content: center;
      text-align: right;
      column-gap: var(--s-7);
    }
  }
  .info-cta__box h2 { color: var(--white); font-size: var(--fs-h3); max-width: 30ch; }
  .info-cta__box .btn { white-space: nowrap; }

  /* ====================== PAGINA DE CONTENIDO ====================== */
  .doc { padding-block: var(--sec-y); }
  .doc__layout { display: grid; gap: var(--s-7); }
  /* Escritorio: panel a la izquierda, texto a la derecha. El orden del DOM se
     deja contenido-primero para que en movil se lea el texto antes que el menu. */
  @media (min-width: 1000px) {
    .doc__layout { grid-template-columns: 20rem minmax(0,1fr); }
    .doc__layout > .prose { order: 2; }
    .doc__layout > .rail  { order: 1; }
  }
  /* El texto llega hasta el mismo borde que las imagenes. Antes se cortaba en
     68ch y al lado de una foto a todo el ancho de la columna parecia recortado.
     Para que la linea no se vuelva interminable en pantallas grandes, lo que se
     limita es la COLUMNA (imagenes incluidas), no el texto: asi los dos bordes
     coinciden siempre. */
  .doc__layout > .prose { max-width: 62rem; }

  .prose { max-width: 68ch; }
  .prose > * + * { margin-top: var(--s-4); }
  .prose > h2 { font-size: var(--fs-h2); margin-top: var(--s-7); }
  .prose > h3 { font-size: var(--fs-h3); margin-top: var(--s-6); }
  .prose > h4 { font-size: var(--fs-h4); margin-top: var(--s-5); }
  .prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
  .prose > p { color: var(--n-700); line-height: 1.75; }
  .prose > .link-list, .prose > .feature-list, .prose > .figure { margin-top: var(--s-5); }
  .prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

  /* bloque de contacto de oficina */
  /* Patron tailblocks-team-a: foto a la izquierda, datos a la derecha. */
  .office-card {
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: var(--s-4);
    background: var(--white);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .office-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); }
  .office-card__media {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--n-100);
  }
  .office-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .office-card__datos { min-width: 0; display: grid; gap: .3rem; }
  .office-card h3 { font-size: var(--fs-h5); }
  .office-card p { font-size: var(--fs-sm); color: var(--n-700); line-height: 1.55; }
  .office-card a { font-size: var(--fs-sm); font-weight: 600; }

  /* ========================== ARTICULO ========================== */
  .art-head { background: var(--n-50); border-bottom: 1px solid var(--n-200); padding-block: clamp(2.5rem,1.6rem+3.5vw,4rem) 0; position: relative; }
  .art-head::before { content:""; position:absolute; inset: 0 0 auto; height:3px; background: var(--brand); }
  .art-head__inner { max-width: 52rem; margin-inline: auto; text-align: center; }
  .art-head h1 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); max-width: none; }
  .art-head__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem var(--s-4);
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--n-600);
  }
  .art-head__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--n-400); }
  .art-cover {
    max-width: 60rem;
    margin: var(--s-6) auto calc(var(--s-7) * -1);
    position: relative;
    z-index: 1;
  }
  .art-cover img {
    width: 100%;
    aspect-ratio: 16/8;
    object-fit: cover;
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
  }
  .art-body-wrap { padding-block: calc(var(--sec-y) + var(--s-6)) var(--sec-y); }
  .art-body-wrap--nocover { padding-block: var(--sec-y); }
  .art-layout { display: grid; gap: var(--s-7); }
  @media (min-width: 1040px) { .art-layout { grid-template-columns: minmax(0,1fr) 17rem; } }

  /* El cuerpo viene tal cual de mxga.mx: se le da ritmo sin tocar su marcado. */
  .art-body { max-width: 70ch; font-size: 1.0625rem; line-height: 1.8; color: var(--n-700); }
  .art-body p { margin-bottom: var(--s-4); }
  .art-body h2 { font-size: var(--fs-h3); margin-top: var(--s-7); margin-bottom: var(--s-4); }
  .art-body h3 { font-size: var(--fs-h4); margin-top: var(--s-6); margin-bottom: var(--s-3); }
  .art-body h4 { font-size: var(--fs-h5); margin-top: var(--s-5); margin-bottom: var(--s-3); }
  .art-body ul, .art-body ol { margin: 0 0 var(--s-4) 1.35rem; display: grid; gap: .5rem; }
  .art-body ul > li { list-style: disc; }
  .art-body ol > li { list-style: decimal; }
  .art-body li::marker { color: var(--brand-400); }
  .art-body img { border-radius: var(--r-md); margin-block: var(--s-5); border: 1px solid var(--n-200); }
  .art-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
  .art-body blockquote {
    background: var(--n-50);
    border-radius: var(--r-md);
    padding: var(--s-5);
    margin-block: var(--s-5);
    font-size: var(--fs-lg);
    color: var(--brand-950);
  }
  /* Las tablas de Duda pueden ser mas anchas que la columna: se aislan en su
     propio contenedor con scroll para que el documento nunca se desborde. */
  .art-body .dmTable,
  .art-body .table-scroll { overflow-x: auto; margin-block: var(--s-5); max-width: 100%; }
  .art-body table {
    width: 100%;
    min-width: 34rem;
    font-size: var(--fs-sm);
    border: 1px solid var(--n-200);
    border-radius: var(--r-sm);
  }
  .art-body th, .art-body td {
    padding: .7rem .875rem;
    border-bottom: 1px solid var(--n-200);
    text-align: left;
    vertical-align: top;
  }
  .art-body th {
    background: var(--brand-900);
    color: var(--white);
    font-family: var(--ff-ui);
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: .04em;
  }
  .art-body tbody tr:nth-child(even) td { background: var(--n-50); }
  .art-body tr:last-child td { border-bottom: 0; }

  /* enlace a video externo, en vez de incrustar un reproductor con rastreadores */
  .video-link {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-block: var(--s-5);
    background: var(--n-50);
  }
  .video-link svg { width: 40px; height: 40px; color: var(--brand); flex: none; }
  .video-link strong { display: block; font-family: var(--ff-ui); color: var(--brand-950); }
  .video-link span { font-size: var(--fs-sm); color: var(--n-600); }

  .toc { display: grid; gap: .125rem; }
  .toc > a {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--n-700);
    padding: .5rem .75rem;
    border-left: 2px solid var(--n-200);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .toc > a:hover { color: var(--brand); border-left-color: var(--brand); background: var(--brand-50); }

  .art-foot { border-top: 1px solid var(--n-200); margin-top: var(--s-7); padding-top: var(--s-6); }

  /* ===================== INDICE DE PERSPECTIVAS ===================== */
  .featured {
    display: grid;
    gap: 0;
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--white);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .featured:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
  @media (min-width: 900px) { .featured { grid-template-columns: 1.15fr 1fr; } }
  .featured__media { position: relative; background: var(--n-100); min-height: 15rem; }
  .featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .featured__body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: flex; flex-direction: column; gap: var(--s-3); justify-content: center; }
  .featured__body h2 { font-size: var(--fs-h3); }
  .featured:hover .featured__body h2 { color: var(--brand); }
  .featured__body p { color: var(--n-700); font-size: var(--fs-sm); }

  .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--s-7); }
  .pager button {
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--n-700);
    border: 1px solid var(--n-300);
    border-radius: var(--r-sm);
    padding: .55rem .9rem;
    cursor: pointer;
    line-height: 1;
    transition: all var(--dur) var(--ease);
  }
  .pager button:hover { border-color: var(--brand-300); color: var(--brand); }
  .pager button[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: var(--white); }
  .pager button[disabled] { opacity: .4; cursor: not-allowed; }

  /* ========================== CONTACTO ========================== */
  .contact-grid { display: grid; gap: var(--s-7); }
  @media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1.1fr; } }
  .form-card {
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: var(--white);
    box-shadow: var(--sh-1);
  }
  .field { display: grid; gap: .375rem; margin-bottom: var(--s-4); }
  .field > label { font-family: var(--ff-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--brand-950); }
  .field > input, .field > textarea, .field > select {
    border: 1px solid var(--n-300);
    border-radius: var(--r-sm);
    padding: .7rem .875rem;
    font-size: var(--fs-sm);
    background: var(--white);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .field > input:focus, .field > textarea:focus, .field > select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
  }
  .field > textarea { resize: vertical; min-height: 7rem; }
  .form-note { font-size: var(--fs-xs); color: var(--n-600); margin-top: var(--s-3); }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 100;
    background: var(--brand);
    color: var(--white);
    padding: .75rem 1.25rem;
    border-radius: var(--r-sm);
    font-family: var(--ff-ui);
    font-weight: 600;
    transition: top 160ms var(--ease);
  }
  .skip-link:focus { top: 1rem; color: var(--white); }
  .mt-0 { margin-top: 0 !important; }
  .center { text-align: center; }
  .measure { max-width: 68ch; }
  .scroll-x { overflow-x: auto; max-width: 100%; }
}

/* ============================ complementos =============================== */
@layer components {
  /* variante angosta del desplegable (La Firma) */
  .mxnav__mega--sm {
    width: 17rem;
    grid-template-columns: 1fr;
    padding: var(--s-3);
    left: auto;
    right: max(1.25rem, calc((100vw - var(--wrap)) / 2 + 1.25rem));
    transform: translateY(-6px);
  }
  .mxnav__item[data-open="true"] .mxnav__mega--sm { transform: translateY(0); }
  .mxnav__mega--sm .mxnav__megaCol > ul { gap: 0; }
  .mxnav__mega--sm li > a { padding: .55rem .625rem; font-weight: 600; color: var(--brand-950); }

  /* etiqueta centrada (encabezado de articulo) */
  .tag--center { align-self: center; margin-top: var(--s-4); }

  /* indice del articulo: seccion en pantalla */
  .toc > a[data-active="true"] {
    color: var(--brand);
    border-left-color: var(--brand);
    background: var(--brand-50);
    font-weight: 600;
  }

  /* Titulos sueltos del indice vivo (p. ej. "Suscribirse a mailing"): su widget
     no viaja en la captura. Se conservan como nota, no como encabezado, para no
     anunciar una seccion que no existe. */
  .idx-notes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .idx-note {
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--n-600);
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: 999px;
    padding: .4rem .875rem;
  }

  /* --- B2: filtros del indice de Perspectivas ----------------------------- */
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-7); }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--n-700);
    background: var(--white);
    border: 1px solid var(--n-300);
    border-radius: 999px;
    padding: .5rem .95rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .chip > span {
    font-size: .6875rem;
    color: var(--n-600);
    background: var(--n-100);
    border-radius: 999px;
    padding: .15rem .4rem;
  }
  .chip:hover { color: var(--brand); border-color: var(--brand-300); }
  .chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--white); }
  .chip[aria-pressed="true"] > span { background: rgba(255,255,255,.2); color: var(--white); }
  .chips-vacio { margin-top: var(--s-6); color: var(--n-600); }

  /* La etiqueta hereda el color del grupo: el Flash es lo urgente y se distingue
     del boletin de fondo sin necesidad de leer. */
  .tag--flash { color: var(--alert-ink); background: var(--alert-fg); }
  .tag--normatividad { color: var(--teal-600); background: #e9f6f7; }
  .tag--perspectiva { color: var(--brand-800); background: var(--brand-100); }
  .tag--otras { color: var(--n-700); background: var(--n-100); }

  /* aviso de maqueta al enviar el formulario */
  .form-msg {
    margin-top: var(--s-4);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-sm);
    padding: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--brand-900);
  }
}

@layer utilities {
  .mt-6 { margin-top: var(--s-6); }
  .mt-7 { margin-top: var(--s-7); }
  .mb-5 { margin-bottom: var(--s-5); }
  .w-full { width: 100%; }
  .muted-rows { color: var(--n-700); }
  .muted-rows a { color: var(--brand); }
}

/* ================== Conocenos, vacantes y panel de oficinas ============== */
@layer components {
  /* Ciudades donde hay oficina, en el panel lateral de servicios. */
  /* Linea corrida en vez de 12 pastillas: misma informacion, la mitad del alto. */
  .rail__ciudades {
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--n-700);
    padding: .75rem var(--s-4) .5rem;
  }
  .rail__vermas {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand);
    padding: 0 var(--s-4) .75rem;
  }
  .rail__vermas .chev { transition: transform var(--dur) var(--ease); }
  .rail__vermas:hover .chev { transform: translateX(3px); }

  /* Foto de entrada de las paginas de area/servicio. */
  .figure--intro { margin-top: 0; margin-bottom: var(--s-6); }
  .figure--intro img { aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 25%; border: 0; }

  /* Nota de contenido de maqueta. */
  .nota-maqueta {
    font-size: var(--fs-sm);
    color: var(--n-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-sm);
    padding: var(--s-3) var(--s-4);
  }
}

@layer pages {
  /* --- Conocenos: cifras en una linea con filetes verticales --------------- */
  .cifras-linea {
    display: grid;
    gap: var(--s-5) 0;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  @media (min-width: 860px) { .cifras-linea { grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .cifras-linea > .stat { padding-top: var(--s-4); border-top: 1px solid var(--n-200); }
  @media (min-width: 860px) {
    .cifras-linea > .stat { border-top: 0; padding: 0 var(--s-5); }
    .cifras-linea > .stat:first-child { padding-left: 0; }
    .cifras-linea > .stat + .stat { border-left: 1px solid var(--n-200); }
  }
  .cifras-linea .stat__n {
    font-size: clamp(2.75rem, 1.75rem + 3.4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .cifras-linea .stat__label {
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-top: .6rem;
  }

  /* --- Mision / Vision ---------------------------------------------------- */
  .mv-grid { display: grid; gap: var(--s-5); }
  @media (min-width: 860px) { .mv-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } }
  .mv-card {
    background: var(--white);
    border: 1px solid var(--n-200);
    border-top: 3px solid var(--brand);
    border-radius: var(--r-md);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  }
  .mv-card > p { color: var(--n-700); line-height: 1.75; }
  .mv-card > p + p { margin-top: var(--s-3); }

  /* --- Valores: numerados, con filete, sin cajas -------------------------- */
  .valores {
    display: grid;
    gap: 0 var(--s-6);
    grid-template-columns: 1fr;
  }
  @media (min-width: 700px)  { .valores { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1100px) { .valores { grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .valor {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--n-200);
    font-family: var(--ff-head);
    font-size: var(--fs-h5);
    color: var(--brand-950);
  }
  .valor__n {
    font-family: var(--ff-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--brand-300);
    flex: none;
  }

  /* --- Vacantes (maqueta) ------------------------------------------------- */
  .vac {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: var(--s-5);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .vac:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); }
  .vac > h3 { font-size: var(--fs-h4); }
  .vac__meta { display: grid; grid-template-columns: auto 1fr; gap: .3rem var(--s-3); margin: 0; }
  .vac__meta dt {
    font-family: var(--ff-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--n-500);
    padding-top: .15rem;
  }
  .vac__meta dd { margin: 0; font-size: var(--fs-sm); color: var(--n-700); }
  .vac > .btn { margin-top: auto; align-self: flex-start; }
}

/* =============== Etiqueta sobre la portada (tarjetas del home) =========== */
@layer components {
  /* Reproduce en CSS la cinta diagonal que MXGA quema en sus portadas, pero con
     texto de verdad: se puede seleccionar, la lee un lector de pantalla y la
     categoria sale de la clasificacion, no de la imagen. */
  .card__media { position: relative; }
  .cover-label {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--brand);
    color: var(--white);
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: var(--fs-sm);
    line-height: 1;
    padding: .7rem 2.4rem .7rem 1.125rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.35rem) 100%, 0 100%);
    box-shadow: 0 2px 10px rgba(0,21,52,.22);
  }
  /* Filete teal al pie de la cinta: el mismo acento del resto del sitio. */
  .cover-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 1.35rem);
    height: 2px;
    background: var(--teal);
  }
}

/* ================= Hero a pantalla completa: casos apretados ============= */
@layer pages {
  /* La banda de aviso se comia 208px en movil (el parrafo a 3-4 lineas) y con
     eso el hero ya no cabia en la pantalla. Se compacta el ritmo, sin recortar
     una sola palabra del aviso. */
  @media (max-width: 899px) {
    .alert-band .container {
      padding-block: .875rem;
      gap: .5rem;
      align-items: flex-start;
    }
    /* Estaba a 12px por apretar el alto: para un aviso de fraude eso es
       ilegible. Sube a 13px con interlinea holgada; el hero se ajusta solo
       porque su alto es calc(100svh - nav - aviso). */
    .alert-band p { font-size: .8125rem; line-height: 1.55; flex-basis: 100%; }
    .alert-band__tag { font-size: .6875rem; letter-spacing: .1em; flex-basis: 100%; }
    /* El subrayado suelto se leia como un renglon perdido al pie de la banda, y
       22px de alto no se pueden tocar bien. Pasa a recuadro con 44px de toque. */
    .alert-band a.alert-band__cta {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: .5rem .875rem;
      border: 1px solid rgba(255,255,255,.45);
      border-radius: var(--r-sm);
      font-size: .8125rem;
    }
    .alert-band a.alert-band__cta:hover,
    .alert-band a.alert-band__cta:active {
      background: rgba(255,255,255,.12);
      border-color: var(--white);
    }
  }

  /* Cuando la franja NO flota por falta de alto, la reja de 4 columnas sigue
     siendo lo correcto en cuanto hay ancho: cambia de sitio, no de forma. */
  @media (min-width: 900px) and (max-height: 820px) {
    .hero__statsGrid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
    .hstat { padding: 0 var(--s-5); }
    .hstat:first-child { padding-left: 0; }
    .hstat:last-child { padding-right: 0; }
    .hstat + .hstat { border-left: 1px solid rgba(255,255,255,.18); }
  }
}

/* ============== Hero en telefono corto (667px de alto o menos) =========== */
@layer pages {
  /* Con un aviso de 207px sobre una pantalla de 667, al copy del hero le
     faltaban 31px. A ese alto el aire de 56px arriba y abajo sobra. */
  @media (max-width: 700px) and (max-height: 720px) {
    .hero__inner { padding-block: 2rem; }
  }
}

/* ============ 360x640: el hero gana el espacio al aviso =================== */
@layer pages {
  /* A peticion: en la pantalla mas chica manda el hero. El aviso conserva sus
     13px y su boton de 44px (no se toca la legibilidad); lo que se recorta es
     el aire: relleno, interlinea y los margenes del copy del hero. */
  @media (max-width: 700px) and (max-height: 700px) {
    .alert-band .container { padding-block: .5rem; gap: .375rem; }
    .alert-band p { line-height: 1.45; }
    .alert-band a.alert-band__cta { min-height: 40px; padding: .375rem .75rem; }

    .hero__inner { padding-block: 1.25rem; }
    .hero h1, .hero .hero__h { font-size: 1.875rem; }
    .hero__sub { margin-top: var(--s-2); font-size: 0.9375rem; }
    .hero__actions { margin-top: var(--s-4); gap: var(--s-2); }
    .hero .btn { padding: .7rem 1.1rem; }
  }
}