/* ============================================================
   AFIANZA · PRENSA 2026 — Sala de prensa y artículo
   ------------------------------------------------------------
   Port de los Figma «Afianza Web Design»:
     · Sala de prensa → Afianza_Distributiva_Prensa (nodo 1039:891)
     · Artículo       → Afianza_Template_Blog_Articulo (nodo 1039:2729)

   Sustituyen al diseño AVANT (`avant.css`), que era el prototipo
   anterior: estas dos vistas pasan al sistema HOME 2026 y comparten
   su cabecera, su pie, su barra de llamada y sus tokens. Aquí van
   sólo las secciones propias, con el prefijo `afzn-` (noticias).

   Como el resto del paquete 2026, este archivo NO pasa por Tailwind:
   se escribe a mano (ver inc/prensa26.php) y cuelga de `.afzh` (en el
   <body>) o de `.afzh-b` (raíz de cada bloque, para el editor).
   ============================================================ */

/* ============================================================
   HERO
   ------------------------------------------------------------
   Misma banda de franjas que Empleo y Casos de éxito, 24px más
   alta (464 en vez de 440), así que reutilizamos `.afzs-chero`
   de sectores26.css y sólo cambiamos el alto.
   ============================================================ */
.afzs-chero__banda--prensa { min-height: 464px; }

/* ============================================================
   HERRAMIENTAS — filtros de categoría + buscador
   ------------------------------------------------------------
   Banda blanca. A la izquierda las píldoras de categoría (la
   activa en navy extradark) y a la derecha el buscador con el
   botón circular de acero.
   ============================================================ */
.afzn-tools {
  background: var(--white);
  padding: 38px var(--pad) 0;   /* la fila la marca el buscador, de 58px */
}
.afzn-tools__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.afzn-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* Las píldoras son <a>: el reset de `.afzh :where(a)` no les gana
   porque va con :where(), pero el color sí hay que fijarlo. */
.afzn-filtro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--white);
  font-size: 12px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--navy);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.afzn-filtro:hover { border-color: var(--steel); background: #F1F4F7; }
.afzn-filtro.is-on {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #EFFFF2;   /* avant-green-ultralight, literal del mock */
}
.afzn-filtro.is-on:hover { background: var(--navy); border-color: var(--navy); }

.afzn-buscador {
  position: relative;
  flex: none;
  width: 445px;
  max-width: 100%;
}
.afzn-buscador input {
  width: 100%;
  height: 58px;
  padding: 0 72px 0 12px;
  border: 1px solid #8E8E93;
  border-radius: 100px;
  background: var(--white);
  font-family: inherit;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--navy);
}
.afzn-buscador input::placeholder { color: #828797; }
.afzn-buscador input:focus { outline: none; border-color: var(--steel); }

/* El botón sí es <button>: el reset `.afzh button` le gana por
   especificidad, así que fondo y radio van con el doble selector
   (misma trampa que el ENVIAR de Empleo, no la deshagas). */
.afzh .afzn-buscador__btn,
.afzh-b .afzn-buscador__btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--steel);
  cursor: pointer;
  transition: background .25s var(--ease);
}
.afzh .afzn-buscador__btn:hover,
.afzh-b .afzn-buscador__btn:hover { background: var(--steel-deep); }
.afzn-buscador__btn img { width: 16px; height: 16px; }

/* ============================================================
   NOTICIA DESTACADA
   ------------------------------------------------------------
   1360×500: foto de 788 a sangre izquierda y panel celeste de 572
   a la derecha. Toda la pieza es un enlace.
   ============================================================ */
.afzn-destacada { background: var(--white); padding: 42px var(--pad) 107px; }

.afzn-dest {
  display: grid;
  grid-template-columns: 788px minmax(0, 1fr);
  min-height: 500px;
  background: var(--celeste);
  text-decoration: none;
  color: inherit;
}
.afzn-dest__media { position: relative; overflow: hidden; }
.afzn-dest__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.afzn-dest:hover .afzn-dest__media img { transform: scale(1.04); }

/* El mock no centra el panel: son 110px arriba y 91 abajo, que con los
   299 del contenido suman los 500 de alto de la pieza. */
.afzn-dest__body {
  align-self: center;
  padding: 110px 82px 91px 88px;
}
.afzn-dest__title {
  margin: 23px 0 0;
  max-width: 402px;
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -.04em;
  /* El mock pinta los titulares de las tarjetas en negro puro, no en
     el navy del resto del texto. */
  color: #000;
}
.afzn-dest__excerpt {
  margin: 19px 0 0;
  max-width: 401px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzn-dest .afzn-meta { margin-top: 21px; }

/* ============================================================
   PÍLDORAS DE CATEGORÍA Y META (comunes a destacada y tarjetas)
   ============================================================ */
.afzn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.afzn-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  padding: 4px 12px;
  border: 1px solid rgba(84, 84, 86, .34);
  border-radius: 100px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
}
/* Sobre el panel celeste las píldoras van sin fondo; en las tarjetas
   blancas el mock las pinta blancas con borde gris claro. */
.afzn-card .afzn-tag { background: var(--white); border-color: #D1D1D6; }

.afzn-meta {
  display: flex;
  align-items: center;
  gap: 21px;
  margin: 0;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: -.03em;
  color: var(--navy);
}

/* ============================================================
   REJILLA DE PUBLICACIONES
   ------------------------------------------------------------
   Tres columnas de 445 sobre la banda ultralight. La tarjeta es
   foto de 303,56 + cuerpo blanco.
   ============================================================ */
.afzn-grid { background: var(--ultra); padding: 52px var(--pad) 104px; }
.afzn-grid__title {
  margin: 0 0 27px;
  font-size: 36px;
  line-height: 52px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--navy);
}
.afzn-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.afzn-empty {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.03em;
  color: var(--navy);
}

.afzn-card {
  display: flex;
  flex-direction: column;
  min-height: 582px;
  background: var(--white);
  text-decoration: none;
  color: inherit;
}
.afzn-card__media {
  flex: none;
  height: 304px;
  overflow: hidden;
}
.afzn-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.afzn-card:hover .afzn-card__media img { transform: scale(1.04); }

/* Paddings asimétricos, como el mock: 21 a la izquierda y 32 a la derecha,
   que dejan la columna de texto en los 392 exactos del diseño. */
.afzn-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 32px 54px 21px;
}
.afzn-card__title {
  margin: 13px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: #000;
}
.afzn-card__excerpt {
  margin: 7px 0 0;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzn-card .afzn-meta { padding-top: 18px; }

/* Sin foto no dejamos el hueco: el cuerpo ocupa la tarjeta entera. */
.afzn-card--sin-foto .afzn-card__body { padding-top: 28px; }

/* Paginación (el mock no la dibuja; la heredamos del sistema). */
.afzn-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.afzn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(84, 84, 86, .34);
  border-radius: 100px;
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--navy);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.afzn-pagination .page-numbers:hover { background: var(--celeste); }
.afzn-pagination .page-numbers.current {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--white);
}

/* ============================================================
   ARTÍCULO — hero
   ------------------------------------------------------------
   Banda navy con el titular centrado, la firma y la barra de
   compartir, y la foto de 902×502 montando sobre el cuerpo.
   ============================================================ */
/* El navy no llega al final de la sección: se corta 273px antes para que la
   foto quede montada sobre el blanco. Va en un ::before y no como `background`
   de la sección porque un margen negativo en la foto encogería la caja pero no
   recortaría el fondo — el navy taparía la parte que debe quedar en blanco. */
/* Fondo blanco explícito: lo que el ::before deja sin cubrir asomaría al navy
   del <body> que pone home26.css. */
.afzn-ahero { position: relative; background: var(--white); }
.afzn-ahero::before {
  content: '';
  position: absolute;
  inset: 0 0 273px;
  z-index: 0;
  background: var(--navy-deep);
}
.afzn-ahero__inner {
  position: relative;
  z-index: 1;
  /* 80 de la barra superior (que es fija y no ocupa flujo) + los 71 del mock. */
  padding: 151px var(--pad) 0;
  text-align: center;
}
.afzn-ahero__title {
  margin: 0 auto;
  max-width: 804px;
  font-size: 52px;
  line-height: 60px;
  font-weight: 500;
  letter-spacing: -.04em;
  /* El mock reparte el titular en tres líneas parejas; `balance` lo consigue
     con cualquier titular, sin depender de dónde caiga el corte. */
  text-wrap: balance;
  color: var(--white);
}

.afzn-ahero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 21px;
  margin-top: 41px;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: -.03em;
  color: var(--white);
}
/* Filete vertical entre la firma y «Comparte» (Line 2 del mock). */
.afzn-ahero__sep {
  width: 1px;
  height: 23px;
  margin: 0 -3px;
  background: rgba(255, 255, 255, .4);
}

/* La foto cierra la sección: los últimos 273px caen ya sobre el blanco que
   deja el ::before del hero. */
.afzn-ahero__media {
  position: relative;
  margin: 65px auto 0;
  width: min(902px, 100% - var(--gut) * 2);
  height: 502px;
  overflow: hidden;
}
.afzn-ahero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   ARTÍCULO — cuerpo
   ------------------------------------------------------------
   Columna de 902 centrada. El primer párrafo hace de entradilla
   (36/44 Medium) y el resto va a 24/36.
   ============================================================ */
.afzn-art {
  padding: 70px var(--pad) 113px;
  background: var(--white);
}
.afzn-art__body {
  margin: 0 auto;
  max-width: 902px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -.03em;
  color: var(--navy);
}
.afzn-art__body > * { margin: 0 0 36px; }
.afzn-art__body > *:last-child { margin-bottom: 0; }

/* Entradilla: el primer párrafo del artículo, más grande. */
.afzn-art__body > p:first-child {
  margin-bottom: 50px;
  font-size: 36px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -.04em;
}

.afzn-art__body h2,
.afzn-art__body h3,
.afzn-art__body h4 {
  margin: 0 0 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--navy);
}
/* El mock pega las listas al párrafo que las introduce y al que las cierra, y
   sí pinta viñeta: el reset de home26 se la quita a todos los <ul>. */
.afzn-art__body ul,
.afzn-art__body ol { margin: 0; padding-left: 36px; list-style: disc; }
.afzn-art__body ol { list-style: decimal; }
.afzn-art__body li { margin: 0; }
/* En el mock el párrafo que introduce la lista y la lista son un solo bloque
   de texto corrido, sin salto entre ellos. */
.afzn-art__body p:has(+ ul),
.afzn-art__body p:has(+ ol) { margin-bottom: 0; }
.afzn-art__body strong { font-weight: 600; }
.afzn-art__body a { color: inherit; text-decoration: underline; }
.afzn-art__body a:hover { color: var(--steel-deep); }
.afzn-art__body img { max-width: 100%; height: auto; }

/* ============================================================
   ARTÍCULO — cita destacada
   ------------------------------------------------------------
   Filetes arriba y abajo, comillas en un cuadrado blanco que
   monta sobre el filete superior.
   ============================================================ */
/* La pieza mide 300px de alto en el mock y centra su contenido: de ahí el aire
   sobre la cita, que es lo que deja sitio a las comillas sobre el filete. */
.afzn-cita {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 60px auto 68px;
  padding: 10px 40px;
  max-width: 901px;
  min-height: 300px;
  border-top: 1px solid #C7C7CC;
  border-bottom: 1px solid #C7C7CC;
  text-align: center;
}
.afzn-cita__marca {
  position: absolute;
  top: -61px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: var(--white);
}
/* El SVG del Figma dibuja las comillas de cierre; el mock las usa
   volteadas en horizontal (rotate 180 + scaleY -1 = scaleX -1). */
.afzn-cita__marca img { width: 60px; height: 60px; transform: scaleX(-1); }

.afzn-cita__texto {
  margin: 0 auto;
  max-width: 766px;
  font-size: 42px;
  line-height: 50px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--navy);
}
.afzn-cita__autor {
  margin: 0;   /* la separación la pone el `gap` del contenedor */
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* ============================================================
   ARTÍCULO — barra «Comparte»
   ------------------------------------------------------------
   La del hero va en blanco sobre el navy; la del pie, en acero
   sobre el blanco.
   ============================================================ */
.afzn-share {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.afzn-share__links { display: inline-flex; align-items: center; gap: 15px; }
.afzn-share a { display: inline-flex; color: inherit; transition: opacity .25s var(--ease); }
.afzn-share a:hover { opacity: .7; }
.afzn-share svg { display: block; width: 20px; height: 20px; fill: currentColor; }

.afzn-ahero__meta .afzn-share { color: var(--white); gap: 11px; }
.afzn-ahero__meta .afzn-share svg { width: 19.9px; height: 19.9px; }

.afzn-art__share {
  margin: 62px auto 0;
  max-width: 902px;
  color: var(--steel);
}
.afzn-art__share .afzn-share { color: var(--navy); }
.afzn-art__share .afzn-share svg { width: 24px; height: 24px; fill: var(--steel); }

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Base 1440. A 1100 la destacada apila y el artículo se estrecha;
   a 780 (el corte móvil de home26) todo pasa a una columna.
   ============================================================ */
@media (max-width: 1280px) {
  .afzn-dest { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); }
  .afzn-dest__body { padding: 72px 48px; }
}

@media (max-width: 1100px) {
  .afzn-tools__inner { flex-wrap: wrap; }
  .afzn-buscador { width: 100%; }

  .afzn-destacada { padding-top: 96px; padding-bottom: 72px; }
  .afzn-dest { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .afzn-dest__media { height: 360px; }
  .afzn-dest__body { padding: 40px 40px 48px; }
  .afzn-dest__title,
  .afzn-dest__excerpt { max-width: none; }
  .afzn-dest .afzn-meta { margin-top: 28px; }

  .afzn-grid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .afzn-ahero__title { font-size: 42px; line-height: 50px; }
  .afzn-ahero::before { inset: 0 0 220px; }
  .afzn-ahero__media { height: 420px; }
}

@media (max-width: 780px) {
  .afzs-chero__banda--prensa { min-height: 340px; }

  .afzn-tools { padding-top: 32px; }
  .afzn-filtros { gap: 8px; }

  .afzn-destacada { padding-top: 56px; padding-bottom: 48px; }
  .afzn-dest__media { height: 240px; }
  .afzn-dest__body { padding: 28px 24px 32px; }
  .afzn-dest__title { font-size: 24px; line-height: 30px; }
  .afzn-dest__excerpt { margin-top: 18px; font-size: 16px; line-height: 24px; }

  .afzn-grid { padding: 40px var(--gut) 64px; }
  .afzn-grid__title { margin-bottom: 20px; font-size: 28px; line-height: 36px; }
  .afzn-grid__cards { grid-template-columns: minmax(0, 1fr); }
  .afzn-card { min-height: 0; }
  .afzn-card__media { height: 220px; }
  .afzn-card__body { padding: 20px 20px 28px; }
  .afzn-card__title { font-size: 22px; line-height: 28px; }
  .afzn-card__excerpt { font-size: 16px; line-height: 24px; }

  .afzn-ahero__inner { padding-top: 116px; }   /* 60 de cabecera móvil + 56 */
  .afzn-ahero__title { font-size: 30px; line-height: 38px; }
  .afzn-ahero__meta { margin-top: 28px; gap: 8px 16px; }
  .afzn-ahero__sep { display: none; }
  .afzn-ahero::before { inset: 0 0 140px; }
  .afzn-ahero__media { height: 260px; margin: 36px auto 0; }

  .afzn-art { padding: 44px var(--gut) 64px; }
  .afzn-art__body { font-size: 18px; line-height: 28px; }
  .afzn-art__body > * { margin-bottom: 28px; }
  .afzn-art__body > p:first-child { margin-bottom: 32px; font-size: 24px; line-height: 32px; }
  .afzn-art__body h2,
  .afzn-art__body h3,
  .afzn-art__body h4 { font-size: 18px; line-height: 28px; }
  .afzn-art__body ul,
  .afzn-art__body ol { margin-bottom: 28px; padding-left: 22px; }

  .afzn-cita { margin: 40px auto 44px; padding: 10px 0; min-height: 200px; }
  .afzn-cita__marca { top: -44px; width: 88px; height: 88px; }
  .afzn-cita__marca img { width: 44px; height: 44px; }
  .afzn-cita__texto { font-size: 26px; line-height: 32px; }

  .afzn-art__share { margin-top: 40px; }
}