/* ============================================================
   AFIANZA · PÁGINAS 2026 — Sobre nosotros, Distributiva y Servicio
   ------------------------------------------------------------
   Port de los tres Figma del 2026-08-29:
     · Afianza_Sobre_Nosotros    (UfgTx2Jpw4j9KDpgYT7YJm, nodo 1:61)
     · Afianza_Distributiva_Area (x29J1gXXZPbhpxaBamZgda, nodo 4:69)
     · Afianza_Servioc           (lTERChaRcmayhNJ3jykSNQ, nodo 0:58)

   Se carga SIEMPRE junto a home26.css (tokens, reset, cabecera,
   pie, barra de llamada, botones y reveals viven allí) y solo en
   las plantillas de páginas 2026 y en el editor. Como en home26,
   NO pasa por Tailwind y todo cuelga de `.afzh` (el <body>) o
   `.afzh-b` (raíz de cada bloque, para la vista del editor).
   ============================================================ */

/* ---------- Tokens propios de estas páginas ---------- */
.afzh,
.afzh-b {
  --celeste: #C6D5DE;   /* afianza_light_new: tarjetas y bandas claras */
  --roto:    #F5FBFF;   /* blanco_roto_afianza                          */

  /* Shared height for the About, Sectors and individual sector heroes. */
  --afz-page-hero-height: 485px;

  /* Relleno lateral de las secciones: el gutter del diseño hasta 1440 y,
     por encima, lo que haga falta para CENTRAR la caja de contenido de
     1360px (los fondos siguen yendo a sangre). Sin esto, en pantallas
     anchas todo quedaba pegado a la izquierda. */
  --pad: max(var(--gut), calc(50% - 680px));
}

/* ============================================================
   CABECERA · variante clara (página de Servicio)
   ------------------------------------------------------------
   La misma barra de home26 sobre página blanca: textos y logo en
   navy (el <body> lleva `afzh-pag--clara` y el logo navy lo pone
   inc/paginas.php). Al hacer scroll la barra se vuelve blanca al
   92 % con desenfoque, en lugar de navy, para no comerse el logo.
   ============================================================ */
.afzh-pag--clara .afzh-header__tagline,
.afzh-pag--clara .afzh-nav__item > a,
.afzh-pag--clara .afzh-header__lang { color: var(--navy); }
.afzh-pag--clara .afzh-nav__item > a:hover { color: var(--cta-dark); }
.afzh-pag--clara .afzh-burger { color: var(--navy); }

.afzh-pag--clara .afzh-header.is-stuck {
  background: rgba(255, 255, 255, .92);
}
.afzh-pag--clara .afzh-header.is-stuck:hover,
.afzh-pag--clara .afzh-header.is-stuck:focus-within { background: rgba(255, 255, 255, 1); }

/* Con el megamenú abierto la barra se pinta navy: los textos vuelven a
   blanco para no desaparecer. */
.afzh-pag--clara .afzh-header:has(.afzh-nav__item--has-drop:hover) .afzh-nav__item > a,
.afzh-pag--clara .afzh-header:has(.afzh-nav__item--has-drop:focus-within) .afzh-nav__item > a,
.afzh-pag--clara .afzh-header:has(.afzh-nav__item--has-drop:hover) .afzh-header__tagline,
.afzh-pag--clara .afzh-header:has(.afzh-nav__item--has-drop:focus-within) .afzh-header__tagline,
.afzh-pag--clara .afzh-header:has(.afzh-nav__item--has-drop:hover) .afzh-header__lang,
.afzh-pag--clara .afzh-header:has(.afzh-nav__item--has-drop:focus-within) .afzh-header__lang { color: var(--white); }

/* ============================================================
   PIEZAS COMUNES
   ============================================================ */

/* Botón cian (CONTÁCTANOS de estas páginas; en el cuerpo del home los
   botones son acero, aquí el mock los pinta cian). Oscurece al hover. */
.afzh .afzp-btn--cta,
.afzh-b .afzp-btn--cta { background: var(--cta); }
.afzh .afzp-btn--cta:hover,
.afzh-b .afzp-btn--cta:hover { background: var(--cta-dark); }

/* En estas páginas también es cian el CONTÁCTANOS del cierre «Hola»
   (bloque de contacto reutilizado de la portada, que allí va en acero). */
.afzh-pag .afzh-contacto .afzh-btn { background: var(--cta); }
.afzh-pag .afzh-contacto .afzh-btn:hover { background: var(--cta-dark); }

/* Los bloques reutilizados de la portada (Casos de éxito y «Hola») se
   acotan aquí a la misma caja centrada de 1360; sus fondos y fotos a
   sangre no cambian. Solo en estas páginas: la portada no se toca. */
.afzh-pag .afzh-exito { padding-inline: var(--pad); }
.afzh-pag .afzh-contacto { padding-inline: var(--pad); }

/* Antetítulo/breadcrumb grande (18/SemiBold acero, «Area de práctica»,
   «Quienes somos», «Servicios / Tax & Legal / …»). */
.afzp-crumb {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--steel);
}

/* H1 de página (62/68 Medium, tracking -4%). */
.afzp-h1 {
  margin-top: 11px;
  font-size: 62px;
  line-height: 68px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--navy);
}

/* Titular de sección centrado (42/46 Medium). */
.afzp-htitle {
  max-width: 717px;
  margin: 0 auto;
  font-size: 42px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: -.04em;
  text-align: center;
  color: var(--navy);
}

/* Titular grande de columna (58/62 Medium, tracking -5%). */
.afzp-big {
  font-size: 58px;
  line-height: 62px;
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--navy);
}
.afzp-big--blanco { color: var(--white); }

/* Filete a todo el ancho. */
.afzp-hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--navy);
  opacity: .9;
}

/* Filete + titular de tramo («Áreas de servicio», «Creciendo con los
   mejores desde 2002»). */
.afzp-linea { padding: 0 var(--pad); }
.afzp-linea__title {
  margin-top: 25px;
  font-size: 42px;
  line-height: 42px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--navy);
}

/* Números «(01)» (13/Medium, leading amplio del diseño). */
.afzp-num {
  display: block;
  font-size: 13px;
  line-height: 33px;
  font-weight: 500;
  letter-spacing: -.05em;
}
.afzp-num--navy { color: var(--navy); }

/* Dos columnas titular/texto (460 + 674 sobre 1440). */
.afzp-2col {
  display: grid;
  grid-template-columns: 460px 674px;
  justify-content: space-between;
  align-items: start;
  padding: 0 var(--pad);
}
.afzp-2col__text {
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzp-2col__text p + p { margin-top: 36px; }
.afzp-2col__text--blanco { color: var(--white); }

/* ============================================================
   TARJETA CELESTE (subáreas y sub-servicios)
   ------------------------------------------------------------
   La card «Cumplimiento Normativo» del mock en navy ES el estado
   hover: fondo navy, textos en blanco y el filete al 30 %.
   ============================================================ */
.afzp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px 13px;
  padding: 0 var(--pad);
}
.afzp-cards--lista { gap: 14px 12px; align-items: start; }

.afzp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 292px;
  padding: 22px 31px 28px 35px;
  background: var(--celeste);
  color: var(--navy);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.afzp-card--alta { min-height: 313px; }

/* Filete decorativo del borde izquierdo (el de la tarjeta de éxito). */
.afzp-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background: url('../img/home/stroke-card.png') center / cover no-repeat;
  transition: opacity .35s var(--ease);
}

.afzp-card__title {
  max-width: 388px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -.05em;
}
.afzp-card__text {
  margin-top: auto;
  max-width: 369px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -.03em;
  padding-top: 18px;
}
.afzp-card__link { margin-top: 9px; color: inherit; }
.afzp-card__link i svg { width: 16px; height: 16px; }
.afzp-card__details { margin-top: 9px; }
.afzp-card__details summary { display: inline-flex; cursor: pointer; list-style: none; }
.afzp-card__details summary::-webkit-details-marker { display: none; }
.afzp-card__less-label,
.afzp-card__details[open] .afzp-card__more-label { display: none; }
.afzp-card__details[open] .afzp-card__less-label { display: inline; }
.afzp-card__details[open] summary svg { transform: rotate(45deg); }
.afzp-card__full { margin-top: 18px; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.afzp-card__full p + p { margin-top: 16px; }
.afzp-card__full a { text-decoration: underline; }
.afzp-card:has(> .afzp-card__details[open]) > .afzp-card__text { display: none; }
.afzp-card__details { min-width: 0; }
.afzp-card__details summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.afzp-card:hover { background: var(--navy); color: var(--white); }
.afzp-card:hover::before { opacity: .3; }

/* ============================================================
   DISTRIBUTIVA DE ÁREA
   ============================================================ */

/* Shared area hero: equal 150px spacing below the menu and below the content. */
.afzp-ahero {
  position: relative;
  min-height: 260px;
  padding: calc(150px + var(--afz-chrome-height, var(--header))) var(--pad) 150px;
}
.afzh:has(.afzp-ahero) .afzh-crumbs { top: calc(var(--stack) + 24px); }
.afzp-ahero__bg { position: absolute; inset: 0; overflow: hidden; }
.afzp-ahero__bg img { width: 100%; height: 100%; object-fit: cover; }
.afzp-ahero__inner { position: relative; }
.afzp-ahero .afzp-h1 { color: var(--white); }

/* --- Intro navy --- */
.afzp-aintro {
  background: var(--navy);
  padding: 62px var(--pad) 106px;
}
/* La columna de 674 va CENTRADA (en el diseño su centro coincide con el
   del lienzo: x383 + 674/2 = 720), no con un margen fijo a la izquierda. */
.afzp-aintro__col { max-width: 674px; margin-inline: auto; }
.afzp-aintro__title {
  font-size: 42px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--white);
}
.afzp-aintro__text {
  margin-top: 18px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -.03em;
  color: var(--white);
}
.afzp-aintro .afzp-btn--cta { margin-top: 14px; }
.afzp-aintro--sectores { background: var(--white); padding: 74px var(--pad) 84px; }
.afzp-aintro--sectores .afzp-aintro__col { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 674px); justify-content: space-between; gap: 56px; max-width: none; }
.afzp-aintro--sectores .afzp-aintro__title,
.afzp-aintro--sectores .afzp-aintro__text { color: var(--navy); margin-top: 0; }

/* --- Subáreas --- */
.afzp-subareas { background: var(--white); padding: 68px 0 116px; }
.afzp-subareas .afzp-htitle { margin-bottom: 47px; }

/* --- Equipo con fotografía --- */
.afzp-aequipo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 40px;
  align-items: start;
  background: var(--white);
  padding: 72px var(--pad) 120px;
}
.afzp-aequipo__title {
  max-width: 538px;
  margin-top: 0;
  font-size: 58px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--navy);
}
.afzp-aequipo__text {
  max-width: 562px;
  margin-top: 38px;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzp-aequipo__text strong { font-weight: 600; }
.afzp-aequipo .afzp-btn--cta { margin-top: 30px; }
.afzp-aequipo__photo { width: 100%; aspect-ratio: 1; margin: 0; overflow: hidden; }
.afzp-aequipo__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Las etiquetas de categoría acompañan a la tarjeta sin interrumpir sus filas. */
.afzp-card__group { margin-bottom: 16px; font-size: 13px; line-height: 18px; font-weight: 600; }

/* ============================================================
   SERVICIO
   ============================================================ */

/* --- Hero + intro --- */
.afzp-shero {
  position: relative;
  background: var(--white);
  padding: 135px var(--pad) 80px;
}
/* Filete vertical decorativo del hero (x=311 sobre 1440): baja desde el
   filete horizontal hasta la banda de expertos. */
.afzp-shero::before {
  content: none;
}
.afzp-shero .afzp-hr { margin-top: 68px; }
/* Columna de 674 centrada, como la intro de la distributiva. */
.afzp-shero__col { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 674px); justify-content: space-between; gap: 56px; }
.afzp-shero__heading {
  margin-top: 48px;
  font-size: 42px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--navy);
}
.afzp-shero__text {
  margin-top: 28px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzp-shero__body { padding-top: 48px; }
.afzp-shero__body .afzp-shero__text:first-child { margin-top: 0; }
.afzp-shero__body ul, .afzp-shero__body ol { padding-left: 1.25em; list-style-position: outside; }
.afzp-shero__body ul { list-style-type: disc; }
.afzp-shero__body ol { list-style-type: decimal; }
.afzp-shero__body li + li { margin-top: 16px; }

/* --- Banda de expertos --- */
.afzp-expertos {
  position: relative;
  background: var(--celeste);
  padding: 84px var(--pad) 129px;
}
.afzp-expertos .afzp-htitle { margin-bottom: 48px; }

.afzp-expertos__grid {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.afzp-expertos__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 331px;
  min-height: 491px;
  padding: 8px 24px 50px;
  background: var(--navy);
  color: var(--white);
}
.afzp-expertos__card .afzp-num { flex: none; }
/* Caja fija hasta y+285 de la tarjeta: el texto arranca a la misma altura
   en las tres tarjetas, como en el mock, pese a los iconos desiguales. */
.afzp-expertos__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 244px;
  padding: 0;
}
.afzp-expertos__icon img { max-width: 190px; max-height: 195px; }
.afzp-expertos__text {
  max-width: 282px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.03em;
}

/* --- Sub-servicios --- */
.afzp-slista { background: var(--white); padding: 101px 0 147px; }
.afzp-slista .afzp-htitle { margin-bottom: 49px; }
.afzp-slista__intro { max-width: 900px; margin: 0 auto 42px; font-size: 18px; line-height: 28px; }
.afzp-slista__group { grid-column: 1 / -1; margin: 36px 0 8px; font-size: 26px; line-height: 32px; font-weight: 500; }

/* --- CTA final sobre la textura --- */
.afzp-scta {
  position: relative;
  min-height: 358px;
  padding: 71px var(--pad) 64px;
}
.afzp-scta__bg { position: absolute; inset: 0; overflow: hidden; }
.afzp-scta__bg img { width: 100%; height: 100%; object-fit: cover; }
.afzp-scta__inner { position: relative; }
.afzp-scta__title {
  max-width: 578px;
  margin: 0 auto;
  font-size: 52px;
  line-height: 56px;
  font-weight: 500;
  letter-spacing: -.04em;
  text-align: center;
  color: var(--white);
}
.afzp-scta__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  margin-top: 22px;
}
.afzp-scta__note {
  max-width: 408px;
  padding-top: 10px;
  font-size: 22px;
  line-height: 34px;
  letter-spacing: -.03em;
  color: var(--white);
}
.afzp-scta__note strong { font-weight: 600; }

/* ============================================================
   SOBRE NOSOTROS
   ============================================================ */

/* --- Hero navy con foto/vídeo --- */
.afzp-sohero { position: relative; min-height: var(--afz-page-hero-height); background: var(--navy); }
.afzp-sohero__head { position: relative; z-index: 1; padding: 122px var(--pad) 60px; }
.afzp-sohero__title { max-width: 936px; color: var(--white); }
.afzp-sohero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.afzp-sohero__media img,
.afzp-sohero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Qué hacemos --- */
.afzp-quehacemos { background: var(--white); padding: 85px 0 174px; }
.afzp-quehacemos__eyebrow { padding: 0 var(--pad); margin-bottom: 6px; }
.afzp-quehacemos .afzp-linea { margin-top: 116px; }

/* Las cinco áreas se muestran completas en escritorio. */
/* --- Carrusel de áreas (swiper) ---
   El carril es un scroll horizontal nativo: sin JS sigue funcionando con
   rueda, teclado y gesto táctil. home26.js le añade el arrastre con ratón
   ([data-afzh-drag]) y las flechas, que inyecta él mismo — así no quedan
   botones muertos si el script no llega a cargar. */
.afzp-swiper { position: relative; }

.afzp-areas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 68px;
  padding: 0 var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
}
.afzp-areas::-webkit-scrollbar { display: none; }
.afzp-areas__card { display: block; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; }
.afzp-areas__card:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.afzp-areas__card:hover .afzh-link i, .afzp-areas__card:focus-visible .afzh-link i { background: var(--steel-deep); }

/* Los controles van BAJO el carril, alineados a la derecha: flotando sobre las
   fotos taparían la tarjeta que el mock deja asomando por el borde, que es
   justo la pista de que hay más. Aquí no estorban a ninguna anchura. */
.afzp-swiper__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding: 0 var(--pad);
}

.afzh .afzp-swiper__btn,
.afzh-b .afzp-swiper__btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), opacity .25s var(--ease);
}
.afzh .afzp-swiper__btn:hover,
.afzh-b .afzp-swiper__btn:hover {
  background: var(--steel);
  border-color: var(--steel);
  color: var(--white);
}
.afzp-swiper__btn svg { display: block; width: 20px; height: 20px; }
.afzp-swiper__btn--prev svg { transform: rotate(180deg); }

/* Extremo alcanzado: el botón sigue en el DOM (no salta el layout) pero
   deja de responder. Si todo cabe, el JS oculta la pareja entera. */
.afzh .afzp-swiper__btn[disabled],
.afzh-b .afzp-swiper__btn[disabled] {
  opacity: .3;
  cursor: default;
}
.afzh .afzp-swiper__btn[disabled]:hover,
.afzh-b .afzp-swiper__btn[disabled]:hover {
  background: var(--white);
  border-color: var(--line);
  color: var(--navy);
}
/* Si las tarjetas caben enteras no hay nada que deslizar. */
.afzp-swiper--quieto .afzp-swiper__nav { display: none; }
.afzp-areas__media {
  width: 100%;
  height: clamp(160px, 20vw, 280px);
  overflow: hidden;
}
.afzp-areas__media img { width: 100%; height: 100%; object-fit: cover; }
/* Centrar la pareja de la foto de Transactions, situada en su extremo derecho. */
.afzp-areas__media--people { position: relative; }
.afzp-areas__media--people img { position: absolute; right: 0; bottom: 0; width: 333.333333%; max-width: none; height: auto; transform-origin: 85% 65%; }
@media (max-width: 780px) {
  .afzp-areas__media--people img { top: 0; bottom: auto; translate: 0 -55.56%; }
}
.afzp-areas__title {
  margin-top: 41px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--navy);
}
.afzp-areas__card .afzh-link { margin-top: 15px; }
@media (max-width: 780px) {
  .afzp-areas { display: flex; }
  .afzp-areas__card { flex: 0 0 min(45vw, 300px); }
}
@media (max-width: 600px) {
  .afzp-areas__card { flex-basis: min(76vw, 300px); }
}

/* --- Nuestro equipo (navy) --- */
.afzp-soequipo { background: var(--navy); padding: 89px 0 123px; }
.afzp-soequipo__eyebrow { padding: 0 var(--pad); margin-bottom: 6px; }
.afzp-soequipo__fotos {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 171px;
  padding: 0 var(--pad);
}
.afzp-soequipo__foto { position: relative; overflow: hidden; }
.afzp-soequipo__foto img { width: 100%; height: 100%; object-fit: cover; }
.afzp-soequipo__foto--grande { flex: 1 1 auto; height: 579px; }
.afzp-soequipo__foto--corta { flex: none; width: 445px; height: 434px; }

/* --- Nuestra historia --- */
.afzp-historia { background: var(--white); padding-top: 72px; }
.afzp-historia__eyebrow { padding: 0 var(--pad); }
/* Margen lateral en vez de padding: con padding, el max-width (border-box)
   se comía el ancho del texto en pantallas anchas. */
.afzp-historia__title { margin: 6px var(--pad) 0; max-width: 760px; }
/* Columna de 674 centrada (x376 + 674/2 ≈ centro del lienzo), sin el
   margen fijo a la izquierda. */
.afzp-historia__text {
  max-width: min(674px, calc(100% - 2 * var(--gut)));
  margin: 48px auto 0;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzp-historia__text p + p { margin-top: 36px; }
.afzp-historia__text p:first-child { font-weight: 600; }
.afzp-historia .afzp-linea--historia { margin-top: 226px; }

/* Línea de tiempo: línea central, hitos alternos y el año «recortado»
   sobre la textura diagonal desenfocada (background-clip: text). */
.afzp-timeline {
  position: relative;
  margin: 44px var(--pad) 0;
}
.afzp-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--navy);
}
.afzp-timeline__item { position: relative; min-height: 208px; }
.afzp-timeline__contenido { max-width: 471px; }
.afzp-timeline__item--izq .afzp-timeline__contenido {
  margin-right: calc(50% + 44px);
  margin-left: auto;
  text-align: right;
}
.afzp-timeline__item--der .afzp-timeline__contenido {
  margin-left: calc(50% + 50px);
}
.afzp-timeline__year {
  display: inline-block;
  font-size: 90px;
  line-height: 90px;
  font-weight: 500;
  letter-spacing: -.04em;
  background: url('../img/paginas/textura-blur.jpg') center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.afzp-timeline__text {
  margin-top: 9px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzp-timeline__text strong { font-weight: 600; }

/* Marcador: disco exterior translúcido + anillo blanco + punto navy. */
.afzp-timeline__marca {
  position: absolute;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(198, 213, 222, .55);
  display: grid;
  place-items: center;
}
.afzp-timeline__marca::before {
  content: '';
  grid-area: 1 / 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
}
.afzp-timeline__marca i {
  grid-area: 1 / 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
  z-index: 1;
}

.afzp-historia__media {
  position: relative;
  height: 600px;
  margin-top: 130px;
  overflow: hidden;
}
.afzp-historia__media img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 145%;
  object-fit: cover;
}

/* --- Por qué Afianza (celeste) --- */
.afzp-porque { background: var(--celeste); padding: 92px 0 170px; }
.afzp-porque__eyebrow { padding: 0 var(--pad); margin-bottom: 6px; }
.afzp-porque .afzp-linea { margin-top: 106px; }
.afzp-bullets { margin: 97px var(--pad) 0; }
/* El bloque numeral+texto (656px en el diseño) va centrado, no empujado
   con un relleno fijo a la izquierda. */
.afzp-bullets__item {
  display: flex;
  align-items: flex-start;
  max-width: 656px;
  margin-inline: auto;
}
.afzp-bullets__item + .afzp-bullets__item { margin-top: 44px; }
.afzp-bullets__item .afzp-num { flex: none; width: 49px; padding-top: 2px; }
.afzp-bullets__text {
  max-width: 607px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzp-bullets__text strong { font-weight: 600; }

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Base 1440. A 1100 las dos columnas y las rejillas de tres
   pasan a menos; a 780 (el corte móvil de home26) todo apila.
   ============================================================ */
@media (max-width: 1280px) {
  .afzp-2col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
  .afzp-aintro__col { max-width: 780px; }
  .afzp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .afzp-aequipo { grid-template-columns: minmax(0, 1fr); }
  .afzp-shero::before { display: none; }
}

@media (max-width: 1100px) {
  .afzp-big { font-size: 44px; line-height: 50px; }
  .afzp-aequipo__title { font-size: 44px; line-height: 50px; }
  .afzp-2col { grid-template-columns: minmax(0, 1fr); }
  .afzp-aintro--sectores .afzp-aintro__col,
  .afzp-shero__col { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .afzp-shero__body { padding-top: 0; }
  .afzp-2col__text { margin-top: 28px; }
  .afzp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afzp-expertos__grid { flex-wrap: wrap; }
  .afzp-soequipo__foto--corta { width: 320px; height: 320px; }
}

@media (max-width: 780px) {
  .afzp-h1 { font-size: 38px; line-height: 44px; }
  .afzp-crumb { font-size: 14px; line-height: 20px; }
  .afzp-htitle { font-size: 28px; line-height: 34px; }
  .afzp-big,
  .afzp-aequipo__title { font-size: 32px; line-height: 38px; }
  .afzp-linea__title { font-size: 28px; line-height: 32px; }
  .afzp-2col__text,
  .afzp-aintro__text,
  .afzp-shero__text,
  .afzp-aequipo__text,
  .afzp-historia__text,
  .afzp-bullets__text { font-size: 18px; line-height: 28px; }
  .afzp-aintro__title,
  .afzp-shero__heading { font-size: 28px; line-height: 34px; }

  .afzp-ahero { min-height: 230px; }
  .afzp-aintro { padding: 44px var(--gut) 64px; }
  .afzp-aintro--sectores { padding: 44px var(--gut) 64px; }
  .afzp-subareas { padding: 48px 0 72px; }
  .afzp-cards { grid-template-columns: minmax(0, 1fr); }
  .afzp-card { min-height: 0; padding-bottom: 24px; }
  .afzp-card__text { padding-top: 26px; }

  .afzp-aequipo { padding: 48px var(--gut) 72px; }

  .afzp-shero { padding: 104px var(--gut) 64px; }
  .afzp-shero .afzp-hr { margin-top: 32px; }
  .afzp-shero__heading { margin-top: 36px; }
  .afzp-expertos { padding: 44px var(--gut) 64px; }
  .afzp-expertos__card { width: 100%; min-height: 0; padding-bottom: 40px; }
  .afzp-expertos__icon { height: auto; padding: 24px 0 32px; }
  .afzp-expertos__icon img { max-width: 140px; max-height: 140px; }
  .afzp-slista { padding: 56px 0 72px; }
  .afzp-scta { padding: 48px var(--gut) 48px; }
  .afzp-scta__title { font-size: 30px; line-height: 36px; }
  .afzp-scta__row { flex-direction: column; gap: 20px; align-items: flex-start; margin-top: 26px; }

  .afzh, .afzh-b { --afz-page-hero-height: 380px; }
  .afzp-sohero__head { padding-top: 96px; padding-bottom: 24px; }
  .afzp-sohero__title { font-size: clamp(28px, 8.7vw, 34px); line-height: 1.12; }
  .afzp-quehacemos { padding: 48px 0 80px; }
  .afzp-quehacemos .afzp-linea,
  .afzp-porque .afzp-linea { margin-top: 56px; }
  .afzp-areas { margin-top: 36px; }
  .afzp-areas__title { margin-top: 20px; }
  /* En móvil manda el gesto; las flechas sobran. */
  .afzp-swiper__nav { display: none; }
  .afzp-soequipo { padding: 48px 0 64px; }
  .afzp-soequipo__fotos { margin-top: 48px; flex-wrap: wrap; }
  .afzp-soequipo__foto--grande { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .afzp-soequipo__foto--corta { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .afzp-historia { padding-top: 48px; }
  .afzp-historia__text { margin-top: 28px; }
  .afzp-historia .afzp-linea--historia { margin-top: 72px; }
  .afzp-historia__media { height: 300px; margin-top: 56px; }

  /* Timeline móvil: la línea a la izquierda y todos los hitos al mismo lado. */
  .afzp-timeline::before { left: 12px; }
  .afzp-timeline__item { min-height: 0; padding: 0 0 44px 56px; }
  .afzp-timeline__item--izq .afzp-timeline__contenido,
  .afzp-timeline__item--der .afzp-timeline__contenido {
    margin: 0;
    text-align: left;
  }
  .afzp-timeline__marca { left: 12px; top: 8px; width: 40px; height: 40px; }
  .afzp-timeline__marca::before { width: 22px; height: 22px; }
  .afzp-timeline__marca i { width: 8px; height: 8px; }
  .afzp-timeline__year { font-size: 56px; line-height: 56px; }

  .afzp-porque { padding: 48px 0 72px; }
  .afzp-bullets { margin: 44px var(--gut) 0; }
  .afzp-bullets__item + .afzp-bullets__item { margin-top: 28px; }
}

/* Shared photo heroes: blue duotone with the news gradient. */
.afzp-sohero,.afzp-arhero {position:relative;isolation:isolate;overflow:hidden;background:#2d354c;}
.afzp-sohero__head,.afzp-arhero__head {position:relative;z-index:2;}
.afzp-sohero__media,.afzp-arhero__media {position:absolute;inset:0;z-index:-2;height:100%;}
.afzp-sohero__media img,.afzp-arhero__media img {width:100%;height:100%;object-fit:cover;opacity:1;}
.afzp-sohero::after,.afzp-arhero::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#2d354c 0%,rgba(45,53,76,.94) 24%,rgba(45,53,76,.7) 49%,rgba(45,53,76,.12) 92%);}
.afzp-sohero__head {min-height:560px;display:flex;flex-direction:column;justify-content:center;}
.afzp-areas__media {overflow:hidden;}
.afzp-areas__media img {transition:transform .45s ease;}
.afzp-areas__card:hover .afzp-areas__media img,.afzp-areas__card:focus-visible .afzp-areas__media img {transform:scale(1.06);}
@media(prefers-reduced-motion:reduce){.afzp-areas__media img{transition:none;}}
@media(max-width:780px){.afzp-sohero__head{min-height:460px;}}

.afzp-ahero {isolation:isolate;overflow:hidden;background:#2d354c;}
.afzp-ahero__bg img {filter:grayscale(1);mix-blend-mode:luminosity;opacity:.6;}
.afzp-ahero__bg::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2d354c,rgba(45,53,76,.15));}

/* Páginas legales: contenido editorial y enlaces accesibles. */
.afz-legal-page .site-content{background:#fff}
.afz-legal{max-width:1000px;margin:0 auto;padding:calc(var(--afz-chrome-height,114px) + 80px) var(--pad,24px) 100px;color:var(--navy,#272e42)}
.afz-legal h1{font-size:clamp(36px,5vw,64px);line-height:1.1;margin-bottom:48px}
.afz-legal__body{font-size:18px;line-height:1.65;overflow-wrap:anywhere}
.afz-legal__body p,.afz-legal__body ul,.afz-legal__body ol{margin:0 0 24px}
.afz-legal__body h2,.afz-legal__body h3,.afz-legal__body h4{font-size:26px;line-height:1.25;margin:40px 0 20px}
.afz-legal__body ul,.afz-legal__body ol{padding-left:1.5em;list-style-position:outside}
.afz-legal__body ul{list-style-type:disc}.afz-legal__body ol{list-style-type:decimal}
.afz-legal__body a{text-decoration:underline;text-underline-offset:3px}