/* =====================================================
   FPUC — Página: ¿Qué hacemos? (page-que-hacemos.php)
   -----------------------------------------------------
   Diseño qué hacemos.pdf (frame 1536×8139). Lo propio de esta
   página, en el orden en que se ve:

     · foto del hero montada sobre la banda teal
     · diagrama de capas (SVG) + fila de 4 tarjetas de color
     · lista de herramientas con línea punteada
     · tarjetas de audiencia con borde de color
     · ecosistema: foto + bloques con botón coral

   Sólo var(--fpuc-*): ni un hex ni un tamaño literal.
   ===================================================== */


/* =====================================================
   Hero: la foto monta sobre la banda
   ===================================================== */

/* El header va montado sobre la banda, así que el hero le reserva arriba el
   hueco del nav —el mismo valor que en equipo.css y en noticias.css, las otras
   internas con el header montado— y abajo, el aire que le come la foto. */
.fpuc-hero--band {
  padding-block: var(--fpuc-hero-band-top) 179px;
}

/* La banda es azul, como en Propósito, y del mismo azul que el "Dona" de las
   internas: se lo comería. Vuelve al coral. */
.fpuc-siteheader--band .fpuc-btn--donate {
  background: var(--fpuc-action-donate);
  border-color: var(--fpuc-action-donate);
}

/* La banda teal acaba en y680 y la foto arranca en y576: 104px montada.
   Va posicionada porque .fpuc-hero es `position: relative` y, sin z-index,
   la franja montada quedaría detrás del color. Mismo caso que la grilla de
   Equipo sobre su hero. */
.fpuc-qh-foto {
  position: relative;
  z-index: 1;
  margin-top: -104px;
}
/* 1234×545 en el frame del diseño (y576 → y1121, ancho del contenedor). */
.fpuc-qh-foto__img {
  aspect-ratio: 1234 / 545;
  border-radius: var(--fpuc-radius-md);
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}


/* =====================================================
   Cómo trabajamos: diagrama de capas
   ===================================================== */

.fpuc-qh-capas {
  max-width: 1060px;
  margin: var(--fpuc-space-8) auto 0;
}
.fpuc-qh-capas__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Los arcos: anillos de 1px en el gris de los divisores (#E6E9EE medido). */
.fpuc-qh-capas__arco {
  fill: none;
  stroke: var(--fpuc-border-subtle);
  stroke-width: 1;
}

/* Rótulo curvo de cada capa. En SVG el color es `fill`, no `color`. */
.fpuc-qh-capas__rotulo {
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-19);
  font-weight: var(--fpuc-weight-bold);
}
.fpuc-qh-capas__rotulo--sky   { fill: var(--fpuc-sky); }
.fpuc-qh-capas__rotulo--coral { fill: var(--fpuc-coral); }
.fpuc-qh-capas__rotulo--pink  { fill: var(--fpuc-pink); }
.fpuc-qh-capas__rotulo--teal  { fill: var(--fpuc-teal); }

/* Medio disco azul del centro. */
.fpuc-qh-capas__centro { fill: var(--fpuc-blue); }
.fpuc-qh-capas__centro-texto {
  fill: var(--fpuc-white);
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-22);
  font-weight: var(--fpuc-weight-bold);
  letter-spacing: var(--fpuc-tracking-wide);
  text-transform: uppercase;
}


/* =====================================================
   Cómo trabajamos: las 4 tarjetas de color
   ===================================================== */

.fpuc-qh-etapas { margin-top: var(--fpuc-space-9); }

/* 287×265 en el diseño (y2156 → y2421), en la rejilla de 4 columnas. */
.fpuc-qh-etapa {
  display: grid;
  align-content: start;
  gap: var(--fpuc-space-5);
  padding: var(--fpuc-space-6);
  border-radius: var(--fpuc-radius-md);
  text-align: center;
  color: var(--fpuc-text-on-dark);
}
.fpuc-qh-etapa__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-body-lg);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  /* El color va explícito y no heredado del contenedor, como en el resto de
     los títulos sobre fondo de color. */
  color: var(--fpuc-text-on-dark);
}
.fpuc-qh-etapa__text {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-on-dark);
}

.fpuc-qh-etapa--sky   { background: var(--fpuc-sky); }
.fpuc-qh-etapa--coral { background: var(--fpuc-coral); }
.fpuc-qh-etapa--pink  { background: var(--fpuc-pink); }
.fpuc-qh-etapa--teal  { background: var(--fpuc-teal); }


/* =====================================================
   Explora: presentación · perfiles · herramientas del perfil
   ===================================================== */

/* Tres columnas como en el diseño (x148, x624 y la línea en x986). */
.fpuc-qh-explora__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--fpuc-space-7);
}
.fpuc-qh-explora__intro .fpuc-section-header__intro { max-width: 36ch; }

/* Perfiles: texto grande en Signika, apagados salvo el elegido. */
.fpuc-qh-explora__perfiles {
  display: grid;
  justify-items: start;
}
.fpuc-qh-explora__perfil {
  padding: var(--fpuc-space-5) 0;
  border: 0;
  background: none;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-26);
  font-weight: var(--fpuc-weight-regular);
  line-height: var(--fpuc-leading-title);
  text-align: left;
  color: color-mix(in srgb, var(--fpuc-navy) 45%, var(--fpuc-white));
  cursor: pointer;
  transition: color var(--fpuc-transition);
}
.fpuc-qh-explora__perfil:first-child { padding-top: 0; }
.fpuc-qh-explora__perfil:hover { color: var(--fpuc-navy); }
.fpuc-qh-explora__perfil.is-active {
  font-weight: var(--fpuc-weight-semibold);
  color: var(--fpuc-navy);
}
.fpuc-qh-explora__perfil:focus-visible {
  outline: 2px solid var(--fpuc-blue);
  outline-offset: 4px;
}

/* Con JS el perfil ya se lee en su pestaña: el título del panel sólo queda
   para los lectores de pantalla. Sin JS es lo que separa una lista de otra. */
.fpuc-qh-explora__panel-title {
  margin: 0 0 var(--fpuc-space-3);
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h4);
  color: var(--fpuc-text);
}
.fpuc-qh-explora.is-js .fpuc-qh-explora__panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fpuc-qh-explora__panel + .fpuc-qh-explora__panel { margin-top: var(--fpuc-space-7); }
.fpuc-qh-explora.is-js .fpuc-qh-explora__panel + .fpuc-qh-explora__panel { margin-top: 0; }

/* Bajo 1000px las tres columnas se apilan (ver "Adaptación", al final). */
@media (max-width: 1000px) {
  .fpuc-qh-explora__inner { row-gap: var(--fpuc-space-7); }
  .fpuc-qh-explora__perfil {
    padding-block: var(--fpuc-space-2);
    font-size: var(--fpuc-text-body-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fpuc-qh-explora__perfil { transition: none; }
}

/* La línea punteada recorre la lista entera y le sobra por arriba y por abajo,
   como en el diseño; de ahí el padding vertical.

   La separación entre entradas va como padding de cada una y no como `gap`:
   así no quedan franjas muertas de 40px entre ellas y el puntero pasa de una
   fila a la siguiente sin que el punto se apague por el camino. Las medidas
   son las mismas: media separación por entrada suma la del diseño, y la lista
   pone la otra media arriba y abajo. */
.fpuc-qh-lista__items {
  display: grid;
  margin: 0;
  padding: calc(var(--fpuc-space-7) / 2) 0 calc(var(--fpuc-space-7) / 2) var(--fpuc-space-7);
  border-left: 1px dashed var(--fpuc-border);
  list-style: none;
}
.fpuc-qh-lista__item {
  position: relative;
  display: grid;
  gap: var(--fpuc-space-2);
  padding-block: calc(var(--fpuc-space-7) / 2);
}
/* El punto azul marca en qué herramienta está el puntero: lo llevan todas las
   entradas, pero sólo se ve la activa. En reposo es la primera, como en el
   diseño; al recorrer la lista salta a la que se está mirando. */
.fpuc-qh-lista__item::before {
  content: "";
  position: absolute;
  top: calc(var(--fpuc-space-7) / 2 + var(--fpuc-space-2));
  left: calc(-1 * var(--fpuc-space-7) - 9px);
  width: 18px;
  height: 18px;
  border-radius: var(--fpuc-radius-pill);
  background: var(--fpuc-blue);
  opacity: 0;
  transition: opacity var(--fpuc-transition);
}
.fpuc-qh-lista__item:first-child::before { opacity: 1; }

/* El puntero manda sobre el estado de reposo: apaga el punto de la primera y
   enciende el de la fila activa. Va tras `hover: hover` para que en pantallas
   táctiles —donde el hover se queda pegado— el punto siga en la primera. */
@media (hover: hover) {
  .fpuc-qh-lista__items:hover .fpuc-qh-lista__item:first-child::before { opacity: 0; }
  .fpuc-qh-lista__item:hover::before { opacity: 1; }
}

/* Con teclado el foco hace lo mismo que el puntero. */
.fpuc-qh-lista__items:focus-within .fpuc-qh-lista__item:first-child::before { opacity: 0; }
.fpuc-qh-lista__item:focus-within::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fpuc-qh-lista__item::before { transition: none; }
}
.fpuc-qh-lista__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h4);
  font-weight: var(--fpuc-weight-medium);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
/* El título es el enlace: hereda el tamaño y el color del encabezado en vez de
   salir como el CTA de 14px en versales que es .fpuc-link por defecto. */
.fpuc-qh-lista__title .fpuc-link {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: var(--fpuc-tracking-normal);
  text-transform: none;
  color: inherit;
}
/* El acento acompaña al punto: se enciende desde la fila entera, así que
   también responde cuando el puntero está sobre la bajada. */
.fpuc-qh-lista__title .fpuc-link { transition: color var(--fpuc-transition); }
.fpuc-qh-lista__title .fpuc-link:hover,
.fpuc-qh-lista__title .fpuc-link:focus-visible,
.fpuc-qh-lista__item:hover .fpuc-qh-lista__title .fpuc-link { color: var(--fpuc-text-accent); }

@media (prefers-reduced-motion: reduce) {
  .fpuc-qh-lista__title .fpuc-link { transition: none; }
}
.fpuc-qh-lista__text {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text);
}


/* =====================================================
   Nuestras audiencias
   ===================================================== */

.fpuc-qh-audiencias .fpuc-grid { margin-top: var(--fpuc-space-8); }

/* Caja clara con borde del color de la audiencia. El color va en una variable
   para no repetir borde, icono, título y CTA en cada modificador. */
.fpuc-qh-aud {
  --fpuc-qh-color: var(--fpuc-teal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fpuc-space-4);
  padding: var(--fpuc-space-6);
  border: 2px solid var(--fpuc-qh-color);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-ghost);
  text-align: center;
}
.fpuc-qh-aud--sky   { --fpuc-qh-color: var(--fpuc-sky); }
.fpuc-qh-aud--coral { --fpuc-qh-color: var(--fpuc-coral); }
.fpuc-qh-aud--pink  { --fpuc-qh-color: var(--fpuc-pink); }
.fpuc-qh-aud--teal  { --fpuc-qh-color: var(--fpuc-teal); }

.fpuc-qh-aud__icon {
  display: grid;
  place-items: center;
  /* En columna flexible el círculo se aplastaría al crecer el texto. */
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--fpuc-radius-pill);
  background: var(--fpuc-border-subtle);
  font-size: var(--fpuc-text-h4);
  line-height: var(--fpuc-leading-none);
  color: var(--fpuc-qh-color);
}
.fpuc-qh-aud__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h4);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-qh-color);
}
.fpuc-qh-aud__text {
  margin: 0;
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text);
}


/* =====================================================
   Ecosistema: mesa, estudios, seminarios y alianzas
   ===================================================== */

/* La foto sale por el borde izquierdo de la pantalla y un recuadro coral de
   1px, abierto por la derecha, envuelve el texto y sigue hasta el borde
   derecho; la foto monta sobre su línea izquierda. Medidas del diseño a
   1536: foto x0→x657, recuadro desde x602, texto x758→x1375.

   --fpuc-eco-sangre es lo que va del borde del contenido al de la pantalla. */
.fpuc-qh-eco {
  --fpuc-eco-sangre: max(var(--fpuc-space-5), calc((100vw - var(--fpuc-container)) / 2));
  overflow-x: clip;
}
.fpuc-qh-eco__inner {
  display: grid;
  grid-template-columns: minmax(0, 506fr) minmax(0, 628fr);
  align-items: stretch;
  column-gap: var(--fpuc-space-9);
}
/* Alto: el del recuadro menos 120px arriba y abajo, así queda centrada en él
   sea cual sea el largo del texto. */
.fpuc-qh-eco__media {
  position: relative;
  z-index: 1;
  min-height: 320px;
  margin-block: calc(var(--fpuc-space-9) + var(--fpuc-space-5));
  margin-left: calc(-1 * var(--fpuc-eco-sangre));
  border-radius: 0 var(--fpuc-radius-md) var(--fpuc-radius-md) 0;
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
}
/* El recuadro es un ::before del cuerpo: arranca 64px antes del final de la
   foto (bajo ella) y se estira hasta el borde derecho de la pantalla. */
.fpuc-qh-eco__body {
  position: relative;
  z-index: 0;
  padding-block: calc(var(--fpuc-space-9) + var(--fpuc-space-5)) var(--fpuc-space-9);
}
.fpuc-qh-eco__body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: calc(-1 * (var(--fpuc-space-9) + var(--fpuc-space-8)));
  right: calc(-1 * var(--fpuc-eco-sangre));
  border: 1px solid var(--fpuc-border-accent);
  border-right: 0;
  border-radius: var(--fpuc-radius-sm) 0 0 var(--fpuc-radius-sm);
  pointer-events: none;
}
/* Título opcional sobre la bajada, con el estilo de título de sección
   (.fpuc-section-header__title); acá sólo el aire hasta la bajada. */
.fpuc-qh-eco__title { margin: 0 0 var(--fpuc-space-4); }
.fpuc-qh-eco__intro {
  margin: 0 0 var(--fpuc-space-7);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-quote);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}

/* La lista es fpuc_link_list( style plain ). Del diseño salen el coral de los
   títulos, el navy del texto y el botón relleno en vez del de descarga. */
.fpuc-qh-eco .fpuc-link-list { gap: calc(var(--fpuc-space-7) + var(--fpuc-space-4)); }
.fpuc-qh-eco .fpuc-link-list__title {
  font-size: var(--fpuc-text-h3);
  color: var(--fpuc-text-coral);
}
.fpuc-qh-eco .fpuc-link-list__text { color: var(--fpuc-text); }
.fpuc-qh-eco .fpuc-btn--download {
  background: var(--fpuc-coral);
  border-color: var(--fpuc-coral);
  color: var(--fpuc-text-on-dark);
  font-size: var(--fpuc-text-small);
  font-weight: var(--fpuc-weight-semibold);
}
.fpuc-qh-eco .fpuc-btn--download:hover,
.fpuc-qh-eco .fpuc-btn--download:focus-visible {
  background: var(--fpuc-navy);
  border-color: var(--fpuc-navy);
}
/* Los botones del diseño llevan flecha. */
.fpuc-qh-eco .fpuc-btn--download::after { content: " →"; }


/* =====================================================
   Herramientas digitales (banda navy)
   ===================================================== */

.fpuc-qh-plataformas .fpuc-grid { margin-top: var(--fpuc-space-8); }
/* Cuatro por fila en vez de las tres de la portada: la tarjeta es más estrecha
   y el alto mínimo de 325px le sobra. */
.fpuc-qh-plataformas .fpuc-card--tool {
  gap: var(--fpuc-space-5);
  min-height: 0;
}


/* =====================================================
   Adaptación
   ===================================================== */

@media (max-width: 1000px) {
  /* Bajo 1000px el header deja de ir montado (layout/header.css), así que el
     hero pierde el hueco que le reservaba y la foto deja de montar. */
  .fpuc-hero--band { padding-block: var(--fpuc-space-8); }
  .fpuc-qh-foto { margin-top: var(--fpuc-space-8); }

  .fpuc-qh-explora__inner,
  .fpuc-qh-eco__inner { grid-template-columns: 1fr; }

  .fpuc-qh-eco__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
    margin: 0;
    border-radius: var(--fpuc-radius-md);
  }
  .fpuc-qh-eco__inner { row-gap: var(--fpuc-space-6); }
  /* Apilado, el recuadro deja de salir de la pantalla: envuelve el texto. */
  .fpuc-qh-eco__body { padding: var(--fpuc-space-7) var(--fpuc-space-5); }
  .fpuc-qh-eco__body::before {
    left: 0;
    right: 0;
    border-right: 1px solid var(--fpuc-border-accent);
    border-radius: var(--fpuc-radius-sm);
  }
}