/* ===========================================================================
   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 */
    overflow-x: hidden;
  }

  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; }
  .page-head--foto .page-head__bg img { width: 100%; height: 100%; object-fit: cover; }
  /* 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. */
  .figure--ancha img { aspect-ratio: 21 / 8; object-fit: cover; 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); } }

  .rail__box {
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .rail__box > h4 {
    font-size: var(--fs-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-950);
    padding: var(--s-4) 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: .7rem .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-5);
    display: grid;
    gap: var(--s-3);
  }
  .rail__cta h4 { color: var(--white); font-size: var(--fs-h4); }
  .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(4rem, 2.4rem + 8vw, 8.5rem);
    min-height: clamp(26rem, 20rem + 18vw, 34rem);
    display: flex;
    align-items: center;
  }
  .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); }

  .hero__dots {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(var(--stats-overlap) + 1.25rem);
    z-index: 2;
  }
  .hero__dots .container { display: flex; gap: .625rem; }
  .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); }

  /* --- B3: las cifras pisan el borde inferior del hero -------------------- */
  .stats-float { position: relative; z-index: 3; margin-top: calc(var(--stats-overlap) * -1); }
  .stats-card {
    background: var(--brand-900);
    color: var(--brand-100);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    box-shadow: var(--sh-3);
  }
  .stats-card__head { margin-bottom: var(--s-6); max-width: 46ch; }
  .stats-card__head h2 { color: var(--white); }
  .stats-card .eyebrow { color: var(--teal); }
  /* Filete ARRIBA de cada cifra (patron stats-grid de demarketing-ui): separa
     sin dibujar cajas y aguanta bien el salto a 2 columnas en movil. */
  .stats-card__grid {
    display: grid;
    gap: var(--s-6) var(--s-5);
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  @media (min-width: 900px) { .stats-card__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .stats-card__grid > .stat { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--s-4); }

  /* --- 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; }
  }
  /* La medida de lectura (68ch) se pone en los elementos de TEXTO, no en la
     columna: si va en .prose, la foto intercalada tampoco puede pasar de 68ch y
     queda ridiculamente angosta al lado de una columna de 820px. */
  .doc__layout > .prose { max-width: none; }
  .doc__layout > .prose > p,
  .doc__layout > .prose > h2,
  .doc__layout > .prose > h3,
  .doc__layout > .prose > h4,
  .doc__layout > .prose > ul,
  .doc__layout > .prose > .link-list { max-width: 68ch; }

  .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); }
}