/* ============================================================
   AFIANZA · HOME 2026 — sistema de diseño de la portada
   ------------------------------------------------------------
   Port del diseño de Figma «Afianza Web Design»:
     · V1 → 01Afianza_Home_Desktop (nodo 657:719)
     · V2 → 00Afianza_Home_Desktop (nodo 649:14314)

   Las dos variantes comparten TODO menos la cabecera del hero:
   V1 lleva el botón circular de scroll y V2 la tira de accesos
   directos a los cinco servicios. La diferencia vive en el
   bloque «Home — Hero», no aquí.

   IMPORTANTE — este archivo NO pasa por Tailwind: se escribe a
   mano y se carga tal cual (ver inc/home.php). El resto del tema
   sigue usando assets/css/main.css y las vistas AVANT avant.css.

   TODO está acotado a `.afzh` (que el tema pone en el <body> de
   las plantillas de portada) o a `.afzh-b` (la clase que llevan
   las raíces de los bloques, para que la vista previa del editor
   también se pinte). Así no se filtra ni una regla al resto del
   sitio, que conserva los diseños anteriores.
   ============================================================ */

/* ---------- Fuentes ---------- */
@font-face {
  font-family: 'Indivisible HOME';
  src: url('../fonts/Indivisible-Regular.woff2') format('woff2'),
       url('../fonts/Indivisible-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Indivisible HOME';
  src: url('../fonts/Indivisible-Medium.woff2') format('woff2'),
       url('../fonts/Indivisible-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Indivisible HOME';
  src: url('../fonts/Indivisible-SemiBold.woff2') format('woff2'),
       url('../fonts/Indivisible-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Indivisible HOME';
  src: url('../fonts/Indivisible-Bold.woff2') format('woff2'),
       url('../fonts/Indivisible-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ----------
   Variables de Figma, con su nombre original entre paréntesis.  */
.afzh,
.afzh-b {
  --navy:       #272E42;   /* Global Blue          */
  --navy-mid:   #3C465E;   /* Global Blue Middle   */
  --navy-deep:  #1A1E2B;   /* Global Extradark     */
  --cta:        #68BFE9;   /* Afianza CTA          */
  --cta-dark:   #3FA7DC;   /* hover: el CTA oscurecido, nunca aclarado */
  --steel:      #7A99AC;   /* Afianza Grey Blue    */
  --steel-soft: #E1F1FB;   /* Afianza Grey Blue Light */
  --steel-dark: #C4DDEE;   /* hover de los botones blancos */
  --steel-deep: #62808F;   /* hover de los botones acero: se oscurecen, como los demás */
  --white:      #FFFFFF;
  --line:       #D9D9D9;   /* filetes entre filas  */
  --line-dark:  #464E66;   /* filetes sobre navy   */

  --gut:    40px;          /* margen lateral del diseño (39-43px) */
  --header: 80px;          /* alto de la barra superior           */
  --sbar:   36px;          /* alto de la barra de servicios (portales);
                              0 cuando no se pinta (≤1100)        */
  --stack:  calc(var(--sbar) + var(--header)); /* barra de servicios + cabecera */
  --radius: 4px;
  --pin: clamp(200px, 42vh, 440px);  /* recorrido del pinneo del hero */

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 0, .15, 1);
}

/* ---------- Reset (acotado) ---------- */
.afzh,
.afzh *,
.afzh *::before,
.afzh *::after,
.afzh-b,
.afzh-b *,
.afzh-b *::before,
.afzh-b *::after { box-sizing: border-box; }

.afzh {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: 'Indivisible HOME', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, no `hidden`: `hidden` convertiría al body en contenedor de
     scroll y rompería el `position: sticky` de la foto del hero. */
  overflow-x: clip;
  /* Hueco para la barra de servicios fija: así los desplazamientos de los
     heros (que cuentan desde la cabecera) siguen valiendo sin tocarlos. */
  padding-top: var(--sbar);
}

.afzh img,
.afzh-b img { max-width: 100%; display: block; }

/* `:where()` otra vez: `.afzh a` tenía MÁS especificidad que `.afzh-btn` y el
   texto de los botones heredaba el color de la sección (blanco sobre el azul
   claro del CTA en las bandas navy). Así gana siempre el componente. */
.afzh :where(a) { color: inherit; text-decoration: none; }

/* `:where()` no suma especificidad: así los márgenes de cada componente
   (que son selectores de clase) siguen ganando a este reset. */
.afzh :where(h1, h2, h3, h4, p, figure, ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.afzh button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Anclas del menú: el scroll se para justo debajo de la barra superior. */
html:has(.afzh) { scroll-behavior: smooth; }
.afzh-b { scroll-margin-top: var(--stack); }

/* Los bloques ACF salen envueltos por el editor; que no impongan ancho. */
.afzh .site-content > .wp-block-group,
.afzh .entry-content { max-width: none; }

/* ============================================================
   ÁTOMOS
   ============================================================ */

/* --- Antetítulo (10/28 Bold, tracking 2px) --- */
.afzh-eyebrow {
  font-size: 10px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--steel);
}

/* --- Botón sólido (btn-12 de Figma: 12/28 SemiBold, tracking 1px) ---
   Update 2026-08: los botones del cuerpo pasan del cian al acero; el cian
   queda solo para el CONTACTO de la barra superior. */
.afzh-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 15px 22px 15px 37px;
  border-radius: var(--radius);
  background: var(--steel);
  color: var(--navy);
  font-size: 12px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.afzh-btn svg { flex: none; }
/* El hover oscurece el botón; nunca lo aclara. */
.afzh-btn:hover { background: var(--steel-deep); }

.afzh-btn--white { background: var(--white); }
.afzh-btn--white:hover { background: var(--steel-dark); }

/* El CONTACTO de la barra superior es el único que conserva el cian. */
.afzh-header__cta { background: var(--cta); }
.afzh-header__cta:hover { background: var(--cta-dark); }

/* --- Flecha animada (chevron → flecha) ---
   Port del sistema `.btn-arrow` del proyecto hermano «Afianza Avant», con
   nuestros colores, espaciado y tipografía. En reposo solo se ve el chevron,
   retraído 3px; al pasar el ratón se desplaza a su sitio y aparece el asta,
   que completa la flecha con un pelín de retardo. */
.afzh-arrow {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
}
.afzh-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(-3px);
  transition: transform .4s var(--ease);
}
.afzh-arrow__shaft {
  opacity: 0;
  transition: opacity .25s ease;
}

/* Disparadores: además del botón y del enlace con círculo, la fila entera de
   servicios y las celdas de accesos del hero de V2, que también son enlaces. */
.afzh-btn:hover .afzh-arrow svg,
.afzh-link:hover .afzh-arrow svg,
.afzh-row:hover .afzh-arrow svg,
.afzh-quicknav__item:hover .afzh-arrow svg,
.afzh-news:hover .afzh-arrow svg { transform: translateX(0); }

.afzh-btn:hover .afzh-arrow__shaft,
.afzh-link:hover .afzh-arrow__shaft,
.afzh-row:hover .afzh-arrow__shaft,
.afzh-quicknav__item:hover .afzh-arrow__shaft,
.afzh-news:hover .afzh-arrow__shaft { opacity: 1; transition-delay: .06s; }

/* --- Enlace con círculo («Ver servicios ⟶») --- */
.afzh-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -.45px;
  color: var(--navy);
}
.afzh-link span { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.afzh-link i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--steel);
  color: var(--white);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.afzh-link:hover i { background: var(--steel-deep); }

/* Sobre fondo oscuro. */
.afzh-link--light { color: var(--white); }

/* ============================================================
   BARRA DE SERVICIOS (portales)
   ------------------------------------------------------------
   Figma «AFIANZA WEB DESIGN EVO» (nodo 1048:48422): tira fija de
   36px por ENCIMA de la cabecera con «Portal del Cliente» y
   «Portal del empleado» a la derecha. El body reserva su hueco
   con `padding-top: var(--sbar)`; por debajo de 1100 (hamburguesa)
   no se pinta y `--sbar` pasa a 0.
   ============================================================ */
.afzh-sbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 91;
  height: var(--sbar);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  padding: 0 38px;               /* el mock apura el margen: 38, no 40 */
  background: #10131B;           /* más oscuro que --navy-deep, literal del mock */
}
.afzh-sbar__link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--white);
  transition: color .3s var(--ease);
}
.afzh-sbar__link:hover { color: var(--cta); }
.afzh-sbar__link svg { flex: none; }

/* ============================================================
   MIGA DE PAN (todas las páginas menos la portada)
   ------------------------------------------------------------
   Figma EVO (nodo 1067:11094): «Home › Página» justo bajo la
   cabecera (10px), a 42px del borde. Blanca sobre las cabeceras
   oscuras; navy en las páginas claras (`afzh-pag--clara`).
   ============================================================ */
.afzh-crumbs {
  position: absolute;
  z-index: 20;
  top: calc(var(--stack) + 10px);
  left: var(--pad, var(--gut));
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--white);
}
.afzh-crumbs a { transition: color .3s var(--ease); }
.afzh-crumbs a:hover { color: var(--cta); }
.afzh-crumbs svg { display: block; }
.afzh-pag--clara .afzh-crumbs { color: var(--navy); }

/* ============================================================
   BARRA SUPERIOR
   ------------------------------------------------------------
   Fija. Transparente sobre el hero; al hacer scroll adopta el
   navy al 90 % con desenfoque y al pasar el ratón sube al 100 %
   (petición explícita del diseño).
   ============================================================ */
.afzh-header {
  position: fixed;
  inset: var(--sbar) 0 auto;
  z-index: 90;
  height: var(--header);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gut);
  background: transparent;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.afzh-header.is-stuck {
  background: rgba(39, 46, 66, .9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.afzh-header.is-stuck:hover,
.afzh-header.is-stuck:focus-within { background: rgba(39, 46, 66, 1); }

/* Con el megamenú abierto la barra se pinta navy sólido aunque esté a
   scroll 0 (mock 40:1916: barra y panel forman una sola pieza). */
.afzh-header:has(.afzh-nav__item--has-drop:hover),
.afzh-header:has(.afzh-nav__item--has-drop:focus-within) { background: var(--navy); }

.afzh-header__brand { display: flex; align-items: center; gap: 22px; flex: none; }
.afzh-header__logo { width: 168px; height: auto; }
.afzh-header__tagline {
  font-size: 13.9px;
  line-height: 16px;
  font-weight: 500;
  color: var(--white);
  white-space: pre-line;
}

.afzh-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}
/* Sin `position: relative`: el megamenú (absoluto) debe anclarse a la
   cabecera entera, no al item. */
.afzh-nav__item { display: flex; align-items: center; gap: 7px; }
.afzh-nav__item > a {
  font-size: 12px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  transition: color .3s var(--ease);
}
.afzh-nav__item > a:hover { color: var(--cta); }
.afzh-nav__item svg { opacity: .8; }

/* ---- Megamenú de «Servicios» (Figma 40:1916) ----------------
   Panel navy a TODO el ancho pegado bajo la barra, con una
   columna por área: título, filete vertical y sus enlaces. Se
   abre al pasar el ratón por el item y también con teclado
   (`:focus-within`, por eso se oculta con `visibility` y no con
   `display`). Va en `absolute` anclado a la BARRA (que es fija y
   a todo el ancho), no en `fixed` al viewport: el
   `backdrop-filter` de `.is-stuck` convierte a la barra en
   containing block de sus descendientes `fixed` y el panel caía
   36px más abajo (el alto de la barra de portales) con scroll.
   Sigue siendo descendiente del item: el hover no se corta. El
   `::before` hace de puente invisible sobre el hueco entre la
   línea del menú y el borde inferior de la barra.
   ------------------------------------------------------------ */
.afzh-nav__item--has-drop:hover > svg,
.afzh-nav__item--has-drop:focus-within > svg { transform: rotate(180deg); }
.afzh-nav__item--has-drop > svg {
  transition: transform .3s var(--ease);
}

.afzh-nav__drop {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header);
  min-height: 423px;
  padding: 56px 106px 40px 165px;
  max-height: calc(100vh - var(--stack));
  overflow-y: auto;
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  pointer-events: none;
}
.afzh-nav__drop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
}
.afzh-nav__item--has-drop:hover > .afzh-nav__drop,
.afzh-nav__item--has-drop:focus-within > .afzh-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Cinco columnas al paso del mock (227px por área a 1440, sin gap: el
   respiro lo da el ancho sobrante de cada texto). */
.afzh-megamenu {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 227px));
}
.afzh-megamenu__title {
  display: block;
  min-height: 52px;              /* dos líneas: los títulos quedan alineados */
  font-size: 22px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--white);
  white-space: pre-line;         /* respeta los \n del mock */
  transition: color .3s var(--ease);
}
.afzh-megamenu__title:hover,
.afzh-megamenu__title:focus-visible { color: var(--cta); }
.afzh-megamenu__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 14px;
  padding-left: 19px;
  border-left: 1px solid var(--line-dark);
}
.afzh-megamenu__list a {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--white);
  transition: color .3s var(--ease);
}
.afzh-megamenu__list a:hover,
.afzh-megamenu__list a:focus-visible { color: var(--cta); }

.afzh-header__cta { flex: none; }
.afzh-header__lang {
  flex: none;
  font-size: 12px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Hamburguesa y panel del menú móvil (PDF móvil, 2026-08) ----
   La hamburguesa releva al menú horizontal por debajo de 1100px (hasta
   ahora ese tramo se quedaba sin navegación). Las tres líneas se dibujan
   en CSS y se funden en un aspa al abrir. */
.afzh-burger {
  display: none;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--white);
}
.afzh-burger__box { position: relative; display: block; width: 24px; height: 18px; }
.afzh-burger__line,
.afzh-burger__box::before,
.afzh-burger__box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .25s ease, top .35s var(--ease);
}
.afzh-burger__box::before { top: 0; }
.afzh-burger__line { top: 8px; }
.afzh-burger__box::after { top: 16px; }
.afzh-burger.is-open .afzh-burger__box::before { top: 8px; transform: rotate(45deg); }
.afzh-burger.is-open .afzh-burger__box::after { top: 8px; transform: rotate(-45deg); }
.afzh-burger.is-open .afzh-burger__line { opacity: 0; transform: scaleX(.4); }

/* El panel: navy a pantalla completa bajo la barra (z 85: por encima de la
   barra de llamada, por debajo de la cabecera para poder cerrar). El
   atributo `hidden` del marcado es el estado sin JS; el script lo quita al
   arrancar y a partir de ahí manda `.is-open`. */
.afzh-menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  padding: calc(var(--header) + 40px) var(--gut) 110px;
  background: var(--navy);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.afzh-menu[hidden] { display: none; }
.afzh-menu.is-open { opacity: 1; visibility: visible; transform: none; }

/* Items como la nav de escritorio (token `btn-text`: 12/28 SemiBold, ls 1px,
   mayúsculas); el texto cae en x=33 del mock (gut 20 + 13 de sangría). */
.afzh-menu__list { display: flex; flex-direction: column; gap: 28px; }
.afzh-menu__list > li > a,
.afzh-menu__toggle {
  display: block;
  padding-left: 13px;
  font-size: 12px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  transition: color .3s var(--ease);
}
.afzh-menu__list > li > a:hover { color: var(--cta); }

/* --- Acordeón de «Servicios»: botón con chevron a la derecha y caja
   `navy-mid` con los rótulos de las cinco áreas. --- */
.afzh-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 0;
}
.afzh-menu__toggle svg { flex: none; transition: transform .3s var(--ease); }
.afzh-menu__item--acc.is-open .afzh-menu__toggle svg { transform: rotate(180deg); }

.afzh-menu__sub {
  display: none;
  flex-direction: column;
  gap: 22px;
  margin-top: 30px;
  padding: 24px 14px 28px;
  background: var(--navy-mid);
  border-radius: var(--radius);
}
.afzh-menu__item--acc.is-open .afzh-menu__sub { display: flex; }
.afzh-menu__sub a {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--white);
}
.afzh-menu__sub a:hover { color: var(--cta); }

/* Con el menú abierto la página no scrollea, la barra se funde con el panel
   y la barra de llamada queda A LA VISTA por encima (mock 805:7033). */
.afzh.afzh-menu-open { overflow: hidden; }
.afzh-menu-open .afzh-header { background: var(--navy); }
.afzh-menu-open .afzh-sticky { transform: none; opacity: 1; visibility: visible; }

/* ============================================================
   HERO
   ============================================================ */
/* El hero crea contexto de apilado por debajo de la sección siguiente: esa
   sube por encima de la foto mientras la foto se queda clavada (ver más
   abajo, «Parallax»). */
.afzh-hero { position: relative; z-index: 0; background: var(--navy); }

/* Los desplazamientos son los del diseño: el antetítulo cae en y=270 (V1)
   y en y=190 (V2), contando desde el borde superior de la página. */
.afzh-hero__head {
  padding: calc(var(--header) + 190px) var(--gut) 0;
}
.afzh-hero--v2 .afzh-hero__head { padding-top: calc(var(--header) + 110px); }

.afzh-hero__eyebrow {
  font-size: 24px;
  line-height: 52px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--steel);
}

.afzh-hero__title {
  margin-top: 8px;
  font-size: 94.9px;
  line-height: 106.5px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--white);
  max-width: 960px;
}

/* Trazo bajo la palabra destacada («futuro»). */
.afzh-hero__title u {
  position: relative;
  text-decoration: none;
}
.afzh-hero__title u::after {
  content: '';
  position: absolute;
  left: 0;
  right: -2%;
  bottom: .06em;
  height: 7px;
  background: url('../img/home/stroke-underline.png') left center / 100% 100% no-repeat;
  transform-origin: left center;
  animation: afzh-underline .75s var(--ease) .9s both;
}
@keyframes afzh-underline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Entrada del titular: cada línea sube enmascarada al cargar la página. Es
   más visible que un simple fundido, que era lo que había antes. */
.afzh-hero__title .afzh-line { display: block; overflow: hidden; }
.afzh-hero__title .afzh-line > span {
  display: block;
  animation: afzh-line-in 1.05s var(--ease-soft) both;
  animation-delay: calc(.08s + var(--i, 0) * .13s);
}
@keyframes afzh-line-in {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* El antetítulo entra justo antes que el titular, y la tira de accesos justo
   después. Todo el hero entra al cargar, no al hacer scroll. */
.afzh-hero__eyebrow { animation: afzh-fade-up .8s var(--ease-soft) both; }
.afzh-quicknav { animation: afzh-fade-up .8s var(--ease-soft) .5s both; }
@keyframes afzh-fade-up {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Botón circular de scroll (solo V1). */
.afzh-hero__scroll {
  position: absolute;
  z-index: 2;
  right: var(--gut);
  top: calc(var(--header) + 393px);
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: var(--white);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.afzh-hero__scroll:hover { background: var(--cta); color: var(--navy); transform: translateY(4px); }

/* --- Tira de accesos a servicios (solo V2) --- */
/* Bloque a sangre: se sale del margen lateral del hero con márgenes
   negativos y no lleva filetes en los extremos, solo entre celdas. */
.afzh-quicknav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 53px calc(var(--gut) * -1) 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.afzh-quicknav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 118px;
  padding: 20px 24px;
  border-left: 1px solid var(--line-dark);
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--white);
  text-align: center;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.afzh-quicknav__item:first-child { border-left: 0; }
.afzh-quicknav__item i {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy-mid);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.afzh-quicknav__item:hover { background: var(--steel); color: var(--white); }
.afzh-quicknav__item:hover i { background: var(--navy); color: var(--white); }

/* --- Imagen a sangre con parallax ---
   Dos capas, como en joelefrank.com:

   1. La foto se queda **clavada** arriba de la ventana (`sticky`) y la
      sección siguiente sube por encima de ella hasta taparla. El recorrido
      del pinneo es `--pin`, que se compensa exactamente con el hueco que
      deja `.afzh-hero__pin`: la altura total de la página no cambia.
   2. Dentro del marco, la foto (más alta que él) se desplaza en sentido
      contrario al scroll. Esto da la profundidad; lo mueve home26.js.       */
.afzh-hero__media {
  position: sticky;
  top: 0;
  height: 649px;
  margin-top: 88px;
  overflow: hidden;
}
.afzh-hero--v2 .afzh-hero__media { height: 653px; margin-top: 0; }

/* Pista del pinneo: es el hueco que la sección siguiente se «come». */
.afzh-hero__pin { height: var(--pin); }

.afzh-hero + .afzh-b {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--pin) * -1);
}

/* Contenedor genérico de parallax (lo mueve home26.js): cualquier marco con
   `data-afzh-parallax` recorta y su foto, más alta que él, se desplaza dentro.
   Ese excedente de altura es TODO el recorrido. A más altura, más movimiento
   — y más recorte a los lados, porque los encuadres son apaisados.

   ⚠️ Esta regla y la del hero empatan en especificidad, así que **tiene que
   ir antes**: si no, el 118% genérico pisaría el 145% del hero. */
/* Solo recorta: el `position` lo pone cada componente (el hero es `sticky`,
   el caso de éxito `absolute`, las fotos de sectores `relative`). Si esta
   regla lo declarara, empataría en especificidad y **anularía el pinneo del
   hero**, que es justo lo que pasó una vez. */
.afzh-parallax,
[data-afzh-parallax] { overflow: hidden; }

[data-afzh-parallax] > img,
[data-afzh-parallax] > video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 118%;
  object-fit: cover;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

/* El hero y el caso de éxito llevan más recorrido: 145% ≈ 290px en el hero,
   que se lee sin perder la composición del encuadre. */
.afzh-hero .afzh-hero__media > img,
.afzh-hero .afzh-hero__media > video { height: 145%; }
.afzh-hero__media > video { display: block; }

/* ============================================================
   CLAIM  (párrafo de entrada + botón)
   ------------------------------------------------------------
   Entrada línea a línea, como el `home_claim` de lumena-partners:
   cada línea se enmascara y sube a su sitio con retardo.
   ============================================================ */
/* 136/131: del nodo de Figma 750:4953 (la entradilla cae en y=1424 con la
   sección arrancando en 1288, y tras el botón quedan 131). */
.afzh-claim {
  background: var(--navy);
  padding: 136px var(--gut) 131px;
}
/* ~900px centrados: el texto arranca en x≈270 a 1440, como en el PDF (el
   pelín extra hace que el párrafo corte por las mismas palabras que el mock). */
.afzh-claim__inner { max-width: 900px; margin-inline: auto; }

/* Update 2026-08 (2ª entrega): el párrafo baja a cuerpo de texto (28/38)
   y arranca con la primera frase en negrita. */
/* Tracking -1.12px/28 = -.04em y negrita SemiBold: son los del nodo de
   Figma 757:873 (con -.02em el párrafo rompía una línea antes que el mock). */
.afzh-claim__text {
  font-size: 28px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: -.04em;
  color: var(--white);
}
.afzh-claim__text strong { font-weight: 600; }
/* Entradilla destacada (update 2026-08, 2ª entrega): ya no es el párrafo en
   negrita sino un titular grande, del corte de los títulos de sección. */
.afzh-claim__text--lead {
  font-size: 58px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -.04em;
  margin-bottom: 32px;
}
.afzh-claim__btn { display: flex; margin-top: 41px; }

/* Líneas partidas por JS. */
.afzh-lines .afzh-line { display: block; overflow: hidden; }
.afzh-lines .afzh-line > span {
  display: block;
  transform: translateY(110%);
  opacity: 0;
}
.afzh-lines.is-in .afzh-line > span {
  transform: translateY(0);
  opacity: 1;
  transition: transform .95s var(--ease-soft), opacity .95s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* Sin JS (o en el editor) el texto se ve tal cual. */
.no-js .afzh-lines .afzh-line > span { transform: none; opacity: 1; }

/* ============================================================
   SERVICIOS
   ============================================================ */
/* Sin relleno inferior: la última fila cierra la sección. */
/* Los 74 de abajo: en el mock quedan 97px entre la última foto y el navy de
   Sectores, y la propia fila ya aporta ~23 de su padding inferior. */
.afzh-servicios { background: var(--white); color: var(--navy); padding: 65px 0 74px; }

.afzh-servicios__head {
  display: grid;
  grid-template-columns: 570px 674px;
  gap: 0;
  align-items: start;
  padding: 0 var(--gut);
  margin-bottom: 80px;
}
.afzh-servicios__title {
  margin-top: 5px;
  font-size: 58px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--navy);
  white-space: pre-line;
}
.afzh-servicios__intro {
  margin-top: 43px;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzh-servicios__intro strong { font-weight: 600; }
.afzh-servicios__intro .afzh-btn { margin-top: 26px; }

/* --- Filas ---
   El fondo del estado hover va a sangre (0→1440 en el diseño) mientras que
   los filetes quedan metidos en el margen lateral. Por eso la línea no es
   un `border` de la fila sino un pseudo-elemento: así el navy la tapa. */
.afzh-rows { padding: 0; }

.afzh-row {
  display: block;
  position: relative;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.afzh-row::before,
.afzh-row:last-child::after {
  content: '';
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  height: 1px;
  background: var(--line);
  transition: opacity .4s var(--ease);
}
.afzh-row::before { top: 0; }
.afzh-row:last-child::after { bottom: 0; }

/* Medidas de Figma a 1440 (202 / 50 / 522 / 447 / 219) expresadas en
   porcentaje: así la distancia entre el texto y la foto escala igual en
   pantallas más anchas en vez de estirarse solo la columna de texto. */
.afzh-row__inner {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 43.86%;
  gap: 0;
  align-items: start;
  padding: 27px 15.21% 17px 14.03%;
}

/* `transition` no se hereda: sin declararla en cada descendiente, el color
   que heredan del hover de la fila cambiaría de golpe mientras el fondo se
   funde. Con esto entran y salen a la vez. */
.afzh-row__inner,
.afzh-row__num,
.afzh-row__body,
.afzh-row__title,
.afzh-row__link,
.afzh-row__link span { transition: color .4s var(--ease); }

.afzh-row__num {
  font-size: 13px;
  line-height: 52px;
  font-weight: 500;
  letter-spacing: -.05em;
}
.afzh-row__body { padding-top: 5px; }
.afzh-row__title {
  display: block;
  font-size: 42px;
  line-height: 42px;
  font-weight: 500;
  letter-spacing: -.05em;
  white-space: pre-line;
}
/* El enlace de la fila es un <span> (la fila entera ya es un <a>). */
/* Descripción del servicio (update 2026-08): plegada en reposo y desplegada
   en la fila con hover, que es lo que enseña la fila navy del diseño. La
   animación va por la fila de rejilla (0fr → 1fr), no por max-height, para
   no adivinar la altura del texto. */
.afzh-row__desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s var(--ease), opacity .3s var(--ease);
}
.afzh-row__desc p {
  overflow: hidden;
  min-height: 0;          /* sin esto la rejilla no puede plegarlo del todo */
  max-width: 432px;
  padding-top: 18px;      /* padding y no margin: queda dentro del recorte */
  font-size: 16px;
  line-height: 27px;
  letter-spacing: -.02em;
}
.afzh-row:hover .afzh-row__desc { grid-template-rows: 1fr; opacity: 1; }

.afzh-row__link { display: inline-flex; margin-top: 24px; color: inherit; }

.afzh-row__media { display: block; aspect-ratio: 447 / 302; overflow: hidden; }
.afzh-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

/* Estado hover del diseño: la fila entera pasa a navy. */
.afzh-row:hover { background: var(--navy); color: var(--white); }
.afzh-row:hover::before,
.afzh-row:hover::after,
.afzh-row:hover + .afzh-row::before { opacity: 0; }
.afzh-row:hover .afzh-row__link i { background: var(--steel-deep); }
.afzh-row:hover .afzh-row__media img { transform: scale(1.05); }

/* Fila sin sitio propio (la quinta comparte grupo en Figma). */
.afzh-row--tall .afzh-row__inner { padding-bottom: 60px; }

/* ============================================================
   SECTORES
   ============================================================ */
.afzh-sectores { background: var(--navy); padding: 67px 0 134px; }

.afzh-sectores__head {
  display: grid;
  grid-template-columns: 574px 674px;
  align-items: start;
  padding: 0 var(--gut);
}
.afzh-sectores__title {
  margin-top: 11px;
  font-size: 58px;
  line-height: 66px;
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--white);
  max-width: 460px;
}
.afzh-sectores__intro {
  margin-top: 47px;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -.03em;
  color: var(--white);
}
.afzh-sectores__intro strong { font-weight: 600; }
.afzh-sectores__intro .afzh-btn { margin-top: 24px; }

.afzh-sectores__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  align-items: start;
  margin-top: 126px;
  padding: 0 var(--gut);
}
.afzh-sectores__grid figure { position: relative; overflow: hidden; }
.afzh-sectores__grid figure:nth-child(1) { aspect-ratio: 445 / 311; }
.afzh-sectores__grid figure:nth-child(2) { aspect-ratio: 444 / 423; }
.afzh-sectores__grid figure:nth-child(3) { aspect-ratio: 445 / 514; }
/* El recorte y el parallax los pone la regla genérica de arriba. */

/* ============================================================
   ACTUALIDAD
   ============================================================ */
.afzh-actualidad { background: var(--white); color: var(--navy); padding: 123px var(--gut) 160px; }

/* Las dos tarjetas comparten `1fr`: antes la segunda se comía el espacio
   sobrante y se veía más grande que la primera. */
.afzh-actualidad__grid {
  display: grid;
  grid-template-columns: 446px repeat(2, 1fr);
  column-gap: 11px;
  align-items: stretch;
}
/* min-width:0 para que la columna pueda encogerse: los enlaces van en una
   sola línea (nowrap) y si no, desbordarían la rejilla. */
.afzh-actualidad__col { display: flex; min-width: 0; }

.afzh-actualidad__title {
  margin-top: 14px;
  font-size: 58px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -.05em;
}
.afzh-actualidad__intro {
  margin-top: 25px;
  max-width: 330px;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -.03em;
}
.afzh-actualidad__intro strong { font-weight: 600; }

/* Las tarjetas arrancan 48px por debajo del antetítulo, como en el diseño.
   Son columnas flexibles con las acciones abajo del todo: así los dos
   botones quedan alineados aunque un titular ocupe una línea menos. */
.afzh-news { display: flex; flex-direction: column; flex: 1; margin-top: 48px; }
.afzh-news__media { display: block; height: 302px; overflow: hidden; }
.afzh-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.afzh-news:hover .afzh-news__media img { transform: scale(1.05); }
.afzh-news__title {
  margin-top: 20px;
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -.05em;
}
.afzh-news__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 22px;
}

/* ============================================================
   CASO DE ÉXITO
   ============================================================ */
.afzh-exito {
  position: relative;
  min-height: 632px;
  display: flex;
  align-items: flex-start;
  padding: 165px var(--gut) 87px;
  overflow: hidden;
  background: var(--navy-deep);
}
.afzh-exito__bg { position: absolute; inset: 0; }
.afzh-exito .afzh-exito__bg > img { height: 145%; }

.afzh-exito__card {
  position: relative;
  width: 601px;
  max-width: 100%;
  margin-left: 26px;
  padding: 60px 19px 74px 59px;
  background: var(--white);
  color: var(--navy);
}
/* Filete decorativo del borde izquierdo. */
.afzh-exito__card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: url('../img/home/stroke-card.png') center / cover no-repeat;
}
.afzh-exito__title {
  margin-top: 0;
  max-width: 461px;
  font-size: 36px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -.05em;
}
.afzh-exito__text {
  max-width: 461px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 27px;
}
.afzh-exito__actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 26px;
}

/* ============================================================
   CONTACTO  («Hola»)
   ============================================================ */
.afzh-contacto {
  position: relative;
  min-height: 801px;
  background: var(--white);
  color: var(--navy);
  padding: 153px var(--gut) 0;
}
.afzh-contacto__media {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 497px;
  overflow: hidden;
}
.afzh-contacto__media img { width: 100%; height: 100%; object-fit: cover; }

.afzh-contacto__inner { position: relative; max-width: 860px; }
.afzh-contacto__lead {
  margin-top: 12px;
  max-width: 560px;
  font-size: 58px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -.05em;
}
.afzh-contacto__word {
  display: block;
  margin: 22px 0 0 -18px;
  font-size: 300px;
  line-height: .82;
  font-weight: 500;
  letter-spacing: -.09em;
}
.afzh-contacto__btn { display: flex; margin-top: 44px; }
/* El CONTÁCTANOS es cian en los tres PDFs del update (desktop y móvil): es la
   excepción, junto al CONTACTO de la barra, al acero de los botones del cuerpo. */
.afzh-contacto__btn .afzh-btn { background: var(--cta); }
.afzh-contacto__btn .afzh-btn:hover { background: var(--cta-dark); }

/* ============================================================
   BANDA AFIANZA AVANT  (update 2026-08)
   ------------------------------------------------------------
   Cierre antes del pie: navy con un degradado verde que sube
   desde la esquina inferior izquierda, titular + texto + botón
   a la izquierda y el logo de Afianza Avant a la derecha.
   ============================================================ */
/* Medidas del nodo de Figma 750:4953 (Group 8941 + Group 8956): texto en
   x=154 y caja de 578, banda de 79 de padding vertical, logo a 383. */
.afzh-avant {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  background:
    radial-gradient(720px 480px at -80px 108%, rgba(33, 106, 85, .9), rgba(33, 106, 85, 0) 68%),
    var(--navy);
  color: var(--white);
  padding: 79px 269px 79px 154px;
}
.afzh-avant__title {
  max-width: 578px;
  font-size: 52px;
  line-height: 56px;
  font-weight: 500;
  letter-spacing: -.04em;
}
.afzh-avant__text {
  margin-top: 6px;
  max-width: 558px;
  font-size: 22px;
  line-height: 34px;
  letter-spacing: -.03em;
  color: var(--white);
}
.afzh-avant__btn { display: flex; margin-top: 31px; }

.afzh-avant__brand img { display: block; width: 383px; height: auto; }
.afzh-avant__tagline {
  margin-top: 2px;
  text-align: center;
  font-size: 17.3px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ============================================================
   PIE
   ============================================================ */
.afzh-footer { background: var(--navy-deep); padding: 36px var(--gut) 24px; }

.afzh-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 176px;
}
.afzh-footer__logo { width: 184px; height: auto; }
.afzh-footer__social { display: flex; align-items: center; gap: 12px; }
.afzh-footer__follow {
  margin-right: 6px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.afzh-footer__social a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--steel);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.afzh-footer__social a:hover { color: var(--cta); transform: translateY(-2px); }

.afzh-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px;
  line-height: 28px;
  letter-spacing: .01em;
}
.afzh-footer__copy { font-weight: 600; }
.afzh-footer__legal { display: flex; flex-wrap: wrap; gap: 26px; opacity: .7; }
.afzh-footer__legal a:hover { opacity: 1; text-decoration: underline; }

/* ============================================================
   BARRA DE LLAMADA PEGAJOSA
   ------------------------------------------------------------
   Fija abajo a la derecha. Aparece tras un poco de scroll y se
   puede cerrar (queda cerrada el resto de la sesión).
   ============================================================ */
/* Update 2026-08 (Update_Afianza_Home_Desktop.pdf): fondo acero, texto a la
   izquierda, teléfono en grande y un único botón blanco con calendario. */
.afzh-sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  /* 88: sobre el panel del menú móvil (85) —el mock la deja a la vista con
     el menú abierto— y bajo la cabecera (90). */
  z-index: 88;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 860px;
  max-width: 100%;
  height: 79px;
  /* Derecha: 16 (hasta el aspa) + 24 (aspa) + 12 (hasta el borde). */
  padding: 0 52px 0 30px;
  background: rgba(122, 153, 172, .94);   /* --steel al 94 % sobre la foto */
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color: var(--navy);
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition: transform .55s var(--ease), opacity .55s var(--ease), visibility .55s;
}
.afzh-sticky.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }

/* Mientras la barra está fuera, el pie deja hueco para que no tape el
   copyright ni los enlaces legales. */
.afzh.afzh-has-sticky .afzh-footer { padding-bottom: 103px; }

.afzh-sticky__text {
  flex: none;
  font-size: 18px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
}

/* --- Teléfono en grande («Llamanos al / 911 843 258») --- */
.afzh-sticky__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;         /* empuja el grupo de acciones a la derecha */
  color: var(--navy);
  white-space: nowrap;
}
.afzh-sticky__phone svg { color: var(--white); }   /* el auricular va en blanco */
.afzh-sticky__phone-txt { display: block; }
.afzh-sticky__phone-txt small {
  display: block;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
}
.afzh-sticky__phone-txt strong {
  display: block;
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.afzh-sticky__phone:hover .afzh-sticky__phone-txt strong { text-decoration: underline; text-underline-offset: 3px; }

/* El botón blanco es más bajo que el `btn-12` estándar (44px en el diseño)
   y lleva el calendario como único icono, sin flecha. */
.afzh-sticky .afzh-btn {
  flex: none;
  justify-content: center;
  gap: 12px;
  height: 44px;
  min-height: 0;
  padding: 0 22px;
}
.afzh-sticky__close {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  /* Sin el relleno que Chrome le pone a los <button>: descentraba el aspa. */
  padding: 0;
  width: 24px;
  height: 24px;
  color: var(--navy);
  transition: color .3s var(--ease);
}
/* Sin giro: el aspa se queda quieta y solo cambia de color. */
.afzh-sticky__close:hover { color: var(--white); }

/* ============================================================
   REVEALS GENÉRICOS
   ============================================================ */
/* El reveal va con `animation`, NO con `transition`, a propósito: la regla
   `.afzh-rev.is-in` es más específica que la del componente y, si usara
   `transition`, se cargaría la del hover (la fila de servicios cambiaba de
   fondo de golpe en vez de fundirse). Una animación no toca `transition`. */
.afzh-rev { opacity: 0; transform: translateY(28px); }
.afzh-rev.is-in {
  animation: afzh-rise .9s var(--ease-soft) calc(var(--d, 0) * 90ms) both;
}
@keyframes afzh-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.no-js .afzh-rev { opacity: 1; transform: none; }

/* Filas arrastrables (carruseles con la scrollbar oculta): el JS de
   home26.js las mueve con el ratón; aquí solo los cursores. */
.afzh [data-afzh-drag] { cursor: grab; }
.afzh [data-afzh-drag].is-grabbing { cursor: grabbing; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .afzh { --pin: 0px; }
  .afzh-rev,
  .afzh-lines .afzh-line > span { opacity: 1 !important; transform: none !important; animation: none !important; }
  .afzh-hero__media img,
  .afzh-exito__bg img { height: 100%; }
  .afzh-arrow svg { transform: none; }
  .afzh-arrow__shaft { opacity: 1; }
  html:has(.afzh) { scroll-behavior: auto; }
  .afzh-hero__title .afzh-line > span,
  .afzh-hero__eyebrow,
  .afzh-hero__title u::after { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   El diseño base son 1440px. Por debajo se reescala la
   tipografía grande y las rejillas de dos y tres columnas
   pasan a una.
   ============================================================ */
/* 1439, no 1440: el diseño base ES 1440 y con `max-width: 1440px` estas
   reglas pisaban las medidas de Figma justo a la anchura del diseño (las
   fotos de las filas salían a 34% en vez de a 447px). */
@media (max-width: 1439px) {
  .afzh-nav__drop { padding-left: 40px; padding-right: 40px; }
  .afzh-megamenu { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .afzh-servicios__head { grid-template-columns: 42% 1fr; column-gap: 40px; }
  .afzh-sectores__head  { grid-template-columns: 42% 1fr; column-gap: 40px; }
  .afzh-actualidad__grid { grid-template-columns: 30% 1fr 1fr; column-gap: 26px; }
  .afzh-row__inner { grid-template-columns: 50px minmax(0, 1fr) 34%; padding-right: calc(var(--gut) + 8%); padding-left: calc(var(--gut) + 10%); }
  .afzh-row__media { width: 100%; height: auto; aspect-ratio: 447 / 302; }
  .afzh-hero__title { font-size: 6.6vw; line-height: 1.12; }
  .afzh-contacto__word { font-size: 21vw; }
}

@media (max-width: 1280px) {
  .afzh-header { gap: 16px; }
  .afzh-header__tagline { display: none; }
  .afzh-nav { gap: 20px; }
  .afzh-sticky { width: 100%; }
}

@media (max-width: 1100px) {
  /* La barra de servicios es solo de escritorio: fuera con ella y con su
     hueco (las DOS clases, como los tokens de 780). */
  .afzh,
  .afzh-b { --sbar: 0px; }
  .afzh-sbar { display: none; }
  .afzh-nav { display: none; }
  /* Sin menú horizontal, entra la hamburguesa; el CONTACTO se pega a ella. */
  .afzh-burger { display: grid; }
  .afzh-header__cta { margin-left: auto; }
  .afzh-servicios__head,
  .afzh-sectores__head { grid-template-columns: 1fr; row-gap: 30px; }
  .afzh-servicios__title,
  .afzh-sectores__title { font-size: 46px; line-height: 52px; margin-top: 16px; }
  .afzh-servicios__intro,
  .afzh-sectores__intro { margin-top: 0; }
  .afzh-actualidad__grid { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .afzh-actualidad__col--intro { grid-column: 1 / -1; }
  .afzh-quicknav { grid-template-columns: repeat(2, 1fr); }
  .afzh-quicknav__item { border-top: 1px solid var(--line-dark); }
  .afzh-contacto__media { position: static; width: 100%; height: 320px; margin-top: 60px; }
  .afzh-contacto { min-height: 0; padding-bottom: 0; }
  /* El párrafo ANTES que la entradilla: la entradilla lleva las dos clases
     y, a igual especificidad, ganaría la regla que fuera después. */
  .afzh-claim__text { font-size: 24px; line-height: 34px; }
  .afzh-claim__text--lead { font-size: 46px; line-height: 52px; }
  .afzh-row__inner { padding-left: var(--gut); padding-right: var(--gut); grid-template-columns: 50px minmax(0, 1fr) 36%; }
}

/* ------------------------------------------------------------
   ≤ 780 — puro PDF móvil (AFIANZA_home_mobile.pdf, 2026-08).
   El mock es un artboard de 360pt, así que sus medidas son px CSS
   directos a esa anchura.
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  /* Las DOS clases: los bloques (.afzh-b) declaran los tokens sobre sí
     mismos y, con solo `.afzh`, se quedarían con los valores de 1440. */
  .afzh,
  .afzh-b { --gut: 20px; --header: 60px; }

  /* Botones: en el mock son más bajos (48px) y con el rótulo a 11px. El
     radio sigue siendo el global (4): el 8 que se veía en el PDF era un
     artefacto de escala del rasterizado. */
  .afzh-btn {
    min-height: 48px;
    padding: 8px 18px 8px 24px;
    font-size: 11px;
    line-height: 24px;
  }
  .afzh-link { font-size: 13px; }
  .afzh-eyebrow { font-size: 9px; }

  /* --- Cabecera: logo pequeño, lema visible otra vez (así va en el mock)
     y solo la hamburguesa a la derecha; CONTACTO y ENG viven en el panel. */
  .afzh-header { gap: 12px; }
  .afzh-header__brand { gap: 14px; }
  .afzh-header__logo { width: 134px; }
  .afzh-header__tagline { display: block; font-size: 11px; line-height: 15px; }
  .afzh-header > .afzh-header__cta,
  .afzh-header > .afzh-header__lang { display: none; }
  .afzh-burger { margin-left: auto; }

  /* --- Hero: claim a 52px, sin tira de accesos (el mock no la lleva) y
     foto en vertical, más alta que ancha. */
  /* Con las dos variantes: la regla base de V2 (dos clases) ganaría a un
     selector simple también dentro de la media query. */
  .afzh-hero__head,
  .afzh-hero--v2 .afzh-hero__head { padding-top: calc(var(--header) + 76px); }
  /* El max-width fuerza el corte del mock: «Afianza, Consultoría y /
     Servicios Profesionales». */
  .afzh-hero__eyebrow { max-width: 240px; font-size: 20px; line-height: 24px; }
  .afzh-hero__title { margin-top: 6px; font-size: 52px; line-height: 56px; }
  /* Los renglones fijos del campo son los de escritorio: en móvil el mock
     corta «Con el futuro / de todas las / empresas», así que las cajas
     pasan a inline (refloweo natural) y la entrada anima el H1 entero. */
  .afzh-hero__title .afzh-line,
  .afzh-hero__title .afzh-line > span { display: inline; animation: none; }
  .afzh-hero__title { animation: afzh-fade-up .9s var(--ease-soft) .15s both; }
  .afzh-hero__scroll { display: none; }
  .afzh-quicknav { display: none; }
  .afzh-hero__media,
  .afzh-hero--v2 .afzh-hero__media { height: 126vw; margin-top: 94px; }

  /* --- Claim --- */
  /* El párrafo antes que la entradilla: misma especificidad (la entradilla
     lleva las dos clases) y aquí decide el orden. */
  .afzh-claim { padding: 64px var(--gut) 110px; }
  .afzh-claim__text { font-size: 16px; line-height: 26px; }
  .afzh-claim__text--lead { font-size: 32px; line-height: 40px; margin-bottom: 32px; }
  .afzh-claim__btn { margin-top: 34px; }

  /* --- Servicios: «(01) Título» en una línea, descripción siempre
     abierta, foto debajo y sin enlace «Ver servicios» (mock). */
  .afzh-servicios { padding-top: 56px; }
  .afzh-servicios__head { margin-bottom: 52px; }
  .afzh-servicios__title,
  .afzh-sectores__title { font-size: 46px; line-height: 50px; margin-top: 12px; }
  .afzh-servicios__intro,
  .afzh-sectores__intro { font-size: 16px; line-height: 26px; }
  .afzh-row__inner { grid-template-columns: auto minmax(0, 1fr); padding: 16px var(--gut) 26px; }
  .afzh-row__num { font-size: 10px; line-height: 34px; padding-right: 10px; }
  .afzh-row__body { padding-top: 0; }
  .afzh-row__title { font-size: 28px; line-height: 34px; }
  .afzh-row__desc { grid-template-rows: 1fr; opacity: 1; }
  .afzh-row__desc p { max-width: none; font-size: 13px; line-height: 21px; padding-top: 14px; }
  .afzh-row__link { display: none; }
  .afzh-row__media { grid-column: 1 / -1; margin-top: 19px; width: 100%; aspect-ratio: 320 / 191; }
  /* En táctil el hover navy solo parpadearía al tocar para navegar. */
  .afzh-row:hover { background: transparent; color: inherit; }
  .afzh-row:hover::before,
  .afzh-row:hover::after,
  .afzh-row:hover + .afzh-row::before { opacity: 1; }
  .afzh-row:hover .afzh-row__media img { transform: none; }

  /* --- Sectores: collage del mock (dos fotos arriba, la segunda más
     pequeña y caída; la tercera debajo, centrada), todas apaisadas. */
  .afzh-sectores { padding: 56px 0 86px; }
  .afzh-sectores__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 13px;
    margin-top: 54px;
  }
  .afzh-sectores__grid figure:nth-child(1) { width: 51%; aspect-ratio: 445 / 311; }
  .afzh-sectores__grid figure:nth-child(2) { width: 39%; aspect-ratio: 445 / 311; margin-top: 26px; }
  .afzh-sectores__grid figure:nth-child(3) { width: 51%; margin-inline: auto; aspect-ratio: 445 / 311; }

  /* --- Actualidad: tarjetas a todo el ancho, foto apaisada. --- */
  .afzh-actualidad { padding: 55px var(--gut) 77px; }
  .afzh-actualidad__title { font-size: 46px; line-height: 50px; }
  .afzh-actualidad__intro { max-width: none; font-size: 16px; line-height: 26px; }
  /* Ritmo del mock: intro→primera tarjeta 30, tarjeta→tarjeta 80 (30 de
     gap + 50 de margen a partir de la segunda). */
  .afzh-actualidad__grid { grid-template-columns: 1fr; row-gap: 30px; }
  .afzh-actualidad__col:nth-child(n+3) { margin-top: 50px; }
  .afzh-news { margin-top: 0; }
  .afzh-news__media { height: auto; aspect-ratio: 320 / 173; }
  .afzh-news__title { font-size: 24px; line-height: 32px; }
  .afzh-news__actions { flex-wrap: wrap; padding-top: 12px; }

  /* --- Caso de éxito: mucha foto sobre la tarjeta, que va A SANGRE por
     la izquierda (mock: la card arranca en x=0 y llega a x=340). */
  .afzh-exito { min-height: 0; padding: 250px 20px 42px 0; }
  .afzh-exito__card { margin-left: 0; padding: 52px 20px 88px 40px; }
  .afzh-exito__title { font-size: 24px; line-height: 32px; }
  .afzh-exito__actions { flex-wrap: wrap; }

  /* --- Contacto («Hola» a 172px) --- */
  .afzh-contacto { padding-top: 75px; }
  .afzh-contacto__lead { font-size: 46px; line-height: 50px; }
  .afzh-contacto__word { font-size: 172px; margin: 10px 0 0 -12px; }
  .afzh-contacto__btn { margin-top: 88px; }
  /* A SANGRE (mock 699:7856): anula el width:100% del tramo ≤1100 para que
     los márgenes negativos saquen la foto hasta los bordes. */
  .afzh-contacto__media { width: auto; height: 73vw; margin: 80px calc(-1 * var(--gut)) 0; }

  /* --- Banda Afianza Avant: en columna y con el orden del mock
     (titular → texto → logo → botón). El botón vive dentro de
     `__body`, así que `display: contents` deja reordenar. */
  .afzh-avant { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 90px var(--gut) 104px; }
  .afzh-avant__body { display: contents; }
  .afzh-avant__title { order: 1; font-size: 48px; line-height: 50px; }
  .afzh-avant__text { order: 2; margin-top: 23px; font-size: 16px; line-height: 26px; }
  .afzh-avant__brand { order: 3; margin-top: 8px; }
  .afzh-avant__brand img { width: 209px; }
  .afzh-avant__tagline { text-align: left; margin: 6px 0 0 30px; font-size: 9.5px; line-height: 14px; }
  /* Su botón conserva el de escritorio (mock: 176×58, rótulo a 12px). */
  .afzh-avant__btn { order: 4; margin-top: 17px; }
  .afzh-avant .afzh-btn { min-height: 58px; padding: 15px 22px 15px 37px; font-size: 12px; line-height: 28px; }

  /* --- Pie --- */
  .afzh-footer__top { flex-direction: column; align-items: flex-start; padding-bottom: 60px; }
  .afzh-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* --- Barra de llamada: solo teléfono + «Agendar llamada» (el mock
     quita el texto, el «una» y el aspa de cerrar). */
  .afzh-sticky { width: 100%; height: 79px; gap: 16px; padding: 0 20px; }
  .afzh-sticky__text { display: none; }
  .afzh-sticky__close { display: none; }
  .afzh-sticky__una { display: none; }
  .afzh-sticky__phone { margin-left: 0; margin-right: auto; }
  /* «AGENDAR LLAMADA» conserva los 12px en el mock móvil. */
  .afzh-sticky .afzh-btn { padding: 0 20px; font-size: 12px; }
}