/* ═══════════════════════════════════════════════════════════════════════════
   «¿PARA QUIÉN?» — hoja común de las seis páginas
   /comunidades/ /administradores/ /proveedores/ /corporates/
   /aseguradoras/ /peritos/

   POR QUÉ UNA SOLA HOJA: son seis respuestas a la misma pregunta y el visitante
   salta de una a otra desde el mismo menú. Si cada una tiene su propio ritmo,
   su propio tamaño de tarjeta y su propia forma de titular, parecen seis webs.
   Comparten hoja para que compartan cara.

   El esqueleto es idéntico en las seis: hero con fotografía → banda de texto +
   fotografía → bloques de tarjetas → banda CTA negra. Lo que cambia es el
   contenido, nunca la forma.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO ──────────────────────────────────────────────────────────── */
/* Las seis abren igual: fotografía a sangre, velo oscuro para que el texto
   pase AA sobre cualquier foto, y el contenido a plomo con el resto. */
.paraquien-hero--photo {
  display: grid;
  place-items: center;
  min-height: clamp(26rem, 20rem + 18vw, 34rem);
  text-align: center;
}

.paraquien-hero--photo .section-title {
  color: var(--fx-on-dark-text);
  max-width: 20ch;
  margin-inline: auto;
}

.paraquien-hero--photo .section-desc {
  color: var(--fx-on-dark-muted);
  max-width: 58ch;
  margin-inline: auto;
}

/* ── 2. EL BLOQUE SEO DE /administradores/ ────────────────────────────── */
/* Era un titular centrado con un párrafo alineado a la izquierda debajo:
   dos ejes distintos en el mismo bloque, y de ahí la sensación de que no
   estaba alineado. Ahora es la banda .fx-split, con un solo eje. */
.section--seo-intro { padding-block: var(--fx-section-y); }
.section--seo-intro .fx-split { margin-bottom: 0; }
.section--seo-intro .fx-split__text > * { text-align: left; }

.section-subtitle--seo {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-2xl);
  font-weight: var(--fx-weight-bold);
  line-height: var(--fx-leading-snug);
  letter-spacing: var(--fx-tracking-snug);
  color: var(--fx-accent);
  margin: 0 0 var(--fx-space-4);
  max-width: 24ch;
}

/* ── 3. TARJETAS ──────────────────────────────────────────────────────── */
/* Las seis páginas usaban cuatro familias distintas (problema, solución,
   ficha completa y regulatoria) con paddings de 20, 24, 28 y 32px. Aquí se
   igualan: misma caja, mismo aire, mismo gesto al pasar por encima. */
.problema-card,
.solucion-card,
.paraquien-full-card,
.aseg-regulatory-card { padding: var(--fx-space-8); }

.problema-grid,
.solucion-cards,
.paraquien-full-grid { gap: var(--fx-space-6); }

/* El chip del icono: mismo tamaño y mismo azul en las cuatro familias. */
.problema-icon,
.solucion-icon,
.paraquien-big-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: var(--fx-radius-sm);
  background: var(--fx-accent-soft);
  color: var(--fx-accent);
  margin-bottom: var(--fx-space-4);
}

.problema-icon svg,
.solucion-icon svg,
.paraquien-big-icon svg { width: 1.375rem; height: 1.375rem; }

/* ── 4. TITULARES DE TARJETA GRANDE ───────────────────────────────────── */
/* /aseguradoras/ y /peritos/ llevaban el tamaño metido a mano en el atributo
   style de cada h3 (`font-size: var(--text-2xl)`), doce veces entre las dos.
   Se resuelve aquí para que el día que cambie la escala cambie sola. */
.mmock-block .section-title,
.aseg-feature-block .section-title { font-size: var(--fx-text-2xl); }

/* ── 5. RITMO ─────────────────────────────────────────────────────────── */
/* La cabecera de cada bloque respira lo mismo en las seis. */
.section > .container > .text-center,
.section > .container.text-center > .section-title { margin-bottom: var(--fx-space-12); }
.section > .container > .text-center:last-child { margin-bottom: 0; }