/* Componentes compartidos (partials) del tema FIIB. Crece con cada bloque consumidor. */

/* button-primary (210×56, radius 8, uppercase) — contrato bloques-acf.md */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  min-width: 210px;
  padding: 20px;
  background: var(--color-primario);
  border: var(--stroke-border) solid var(--color-azul-100);
  border-radius: var(--radius-200);
  color: var(--color-blanco);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.button-primary:hover { background: var(--color-azul-100); }

/* button-primary--inversa (M09): fondo blanco, texto #333 */
.button-primary--inversa {
  background: var(--color-blanco);
  color: var(--color-negro-100);
  border-color: var(--color-blanco);
}
.button-primary--inversa:hover { background: var(--color-gris-03); }

/* header-seccion: kicker + título (+ descripción) — contrato bloques-acf.md */
.header-seccion { display: flex; flex-direction: column; gap: 16px; }
.header-seccion__kicker {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--color-primario);
  text-transform: uppercase;
  margin: 0;
}
.header-seccion__titulo {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 40px;
  line-height: normal;
  color: var(--color-negro-azul);
  margin: 0;
}
.header-seccion--compacta .header-seccion__titulo { font-size: 32px; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* card-area (286×166, p16) — icono 80×80 + título. Variantes clara/oscura. */
.card-area {
  display: flex;
  align-items: center;
  min-height: 166px;
  padding: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.card-area--clara { background: var(--color-azul-20); --stroke-0: var(--color-azul-100); }
.card-area--clara .card-area__titulo { color: var(--color-azul-100); }
.card-area--oscura { background: var(--color-azul-100); --stroke-0: var(--color-blanco); }
.card-area--oscura .card-area__titulo { color: var(--color-blanco); }
.card-area__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  gap: 16px;
}
.card-area__icono { display: block; width: 80px; height: 80px; }
.card-area__icono svg { display: block; width: 80px; height: 80px; }
.card-area__titulo {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  max-width: 195px;
}
.card-area__brain { position: relative; display: block; width: 80px; height: 80px; flex-shrink: 0; }
.card-area__brain img { position: absolute; top: 10px; width: 24.57px; height: 61.7px; max-width: none; object-fit: contain; }
.card-area__brain-l { left: 12.1px; }
.card-area__brain-r { left: 43.3px; }
/* hover A-005: realce sutil */
a.card-area:hover { transform: translateY(-2px); }

/* ghost-button (línea + "saber más" Cabinet Grotesk Bold #FEFEFE) — área táctil ≥24px (decisión 24) */
.ghost-button {
  /* `relative` para que quede POR ENCIMA de los overlays de las tarjetas. Un overlay
     posicionado (p. ej. el multiply de card-news-hero) se pinta por encima de los hermanos
     que están en flujo, así que sin esto el botón salía apagado en vez de #FEFEFE. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-height: 24px;
  padding-block: 3px;
}
.ghost-button__line { display: block; width: 18px; flex-shrink: 0; }
.ghost-button__line svg { display: block; width: 18px; height: auto; }
.ghost-button__texto {
  font-family: var(--font-ghost);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-piedra-03);
  text-transform: uppercase;
}
.ghost-button__line svg [stroke] { stroke: var(--color-piedra-03); }

/* card-proyecto (593×334, imagen + panel de info superpuesto) */
.card-proyecto {
  position: relative;
  width: 100%;
  aspect-ratio: 593 / 334;
  overflow: hidden;
  /* Respaldo cuando el contenido no tiene imagen destacada (p. ej. páginas en los resultados
     de búsqueda): sin esto la tarjeta queda transparente y se confunde con el #CCE3ED del
     fondo de la sección. Cuando hay imagen, la cubre por completo y este color no se ve. */
  background: rgba(0, 80, 112, 0.25);
  /* En tablet la rejilla pasa a una columna y el aspect-ratio disparaba la tarjeta hasta 489px
     de alto, con el panel flotando en medio de un vacío. Se topa a 350: el panel (302) cabe de
     sobra y la imagen recorta por object-fit. Por debajo de 640 se anula, porque ahí la tarjeta
     debe crecer con su contenido (si no, vuelve a recortar la etiqueta y el botón). */
  max-height: 350px;
  /* Y un mínimo igual al alto de Figma: con dos columnas estrechas (p. ej. 1024px, tarjeta de
     481px) el aspect-ratio daba 271 de alto y el panel de 302 volvía a salirse. */
  min-height: 334px;
}
.card-proyecto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-proyecto__info {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 281px;
  height: 302px;
  transform: translateY(-50%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.card-proyecto__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 27, 38, 0.85);
  backdrop-filter: blur(1.8px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.card-proyecto__label {
  position: relative;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-azul-20);
  margin: 0;
}
.card-proyecto__titulo {
  position: relative;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  color: var(--color-blanco);
  margin: 0;
}
/* Grupo fecha+título (variante con fecha, distributiva nodo 528:4691). */
.card-proyecto__grupo { position: relative; display: flex; flex-direction: column; gap: 16px; }
.card-proyecto__fecha {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.25px;
  color: var(--color-azul-20);
  margin: 0;
}
.card-proyecto .ghost-button { position: relative; }
/* hover A-006: zoom sutil de la imagen */
.card-proyecto:hover .card-proyecto__img { transform: scale(1.05); transition: transform .4s ease; }
/* En pantallas estrechas la tarjeta encoge por su aspect-ratio, pero el panel medía 302px
   fijos: con `overflow: hidden` en la tarjeta, el panel se salía y RECORTABA la etiqueta y el
   botón (a 372px se perdían 111px). Aquí la tarjeta pasa a crecer según su contenido y el
   panel a alto automático, así nunca se pierde nada.
   El panel se queda `relative` —no estático— para seguir pintándose sobre la imagen, que va
   posicionada: un elemento estático quedaría por debajo. */
@media (max-width: 640px) {
  .card-proyecto { aspect-ratio: auto; max-height: none; min-height: 0; }
  .card-proyecto__info {
    position: relative;
    top: auto;
    transform: none;
    width: auto;
    height: auto;
    margin: 16px;
    /* Con alto automático `justify-content: space-between` deja de separar nada, así que el
       aire lo da el gap; si no, etiqueta, fecha, título y botón quedan pegados. */
    gap: 16px;
  }
}

/* card-actualidad (286, imagen 160 + fecha + título) */
.card-actualidad { display: block; }
.card-actualidad__link { display: flex; flex-direction: column; gap: 20px; text-decoration: none; }
.card-actualidad__img-wrap { display: block; height: 160px; overflow: hidden; background: var(--color-azul-20); }
.card-actualidad__img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.card-actualidad__content { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 20px; }
.card-actualidad__fecha {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--color-azul-100);
  letter-spacing: -0.25px;
}
.card-actualidad__titulo {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--color-negro-azul);
}
/* hover A-007: zoom imagen + subrayado título */
.card-actualidad__link:hover .card-actualidad__img { transform: scale(1.03); }
.card-actualidad__link:hover .card-actualidad__titulo { text-decoration: underline; }

/* input-field (M09, buscador, search.php). Estados default/focus/filled/error/disabled. */
.input-field { display: flex; flex-direction: column; gap: 8px; }
.input-field__label {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-blanco);
}
.input-field__control {
  height: 50px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--color-azul-40);
  border-radius: var(--radius-200);
  color: var(--color-blanco);
  font-family: var(--font-base);
  font-size: 16px;
}
.input-field__control::placeholder { color: var(--color-azul-40); }
.input-field__control:focus-visible { outline: 2px solid var(--color-blanco); outline-offset: 1px; }
textarea.input-field__control { height: auto; min-height: 120px; padding: 12px 16px; resize: vertical; }
.input-field--error .input-field__control { border-color: #e5484d; }
.input-field__error { display: inline-flex; align-items: center; gap: 6px; color: #ffb4b4; font-size: 14px; }
.input-field__control:disabled { opacity: .6; cursor: not-allowed; }

/* checkbox-consent (RGPD, decisión 28 — propuesta del equipo) */
.checkbox-consent { display: flex; align-items: flex-start; gap: 8px; }
.checkbox-consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.checkbox-consent label { font-family: var(--font-base); font-size: 14px; line-height: 1.4; color: var(--color-blanco); }
.checkbox-consent a { color: var(--color-azul-40); }

/* form-status (confirmación / error, decisión 28) */
.form-status { padding: 12px 16px; border-radius: var(--radius-200); font-size: 16px; }
.form-status--ok { background: rgba(153,199,218,.2); color: var(--color-blanco); }
.form-status--error { background: rgba(229,72,77,.15); color: #ffb4b4; }

/* Kicker con contraste AA sobre fondos claros (#CCE3ED/#F0F0F0) — decisión 33 (desviación por accesibilidad). */
.header-seccion__kicker--aa { color: var(--color-azul-100); }

/* card-profile (M13-Patronato). Foto 269×227 + nombre + cargo, sobre sección oscura. */
/* width:100% + max-width: en columnas anchas queda en 285px (Figma); en estrechas encoge sin desbordar la columna del masonry. */
.card-profile { display: flex; flex-direction: column; width: 100%; max-width: 285px; break-inside: avoid; margin-bottom: 16px; }
.card-profile__foto { padding: 8px; background: rgba(204, 227, 237, 0.2); overflow: hidden; }
.card-profile__img { display: block; width: 100%; height: 227px; object-fit: cover; }
.card-profile__content { padding: 16px 8px; background: rgba(204, 227, 237, 0.2); }
.card-profile__text {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px; backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.01);
}
.card-profile__nombre {
  font-family: var(--font-base); font-weight: 500; font-size: 20px;
  line-height: 26px; letter-spacing: -0.4px; color: var(--color-blanco); margin: 0;
}
.card-profile__cargo {
  font-family: var(--font-base); font-weight: 400; font-size: 16px;
  line-height: 1.3; color: var(--color-blanco); margin: 0;
}
/* LF-005 hover */
.card-profile:hover { transform: translateY(-2px); transition: transform .2s ease; }

/* breadcrumbs (nodo 466:1913). Migas blancas 14px sobre el hero interior. */
.breadcrumbs__list { display: flex; align-items: center; gap: 8px; }
.breadcrumbs__item { display: flex; align-items: center; gap: 8px; }
.breadcrumbs__link, .breadcrumbs__current {
  font-family: var(--font-base); font-weight: 500; font-size: 14px;
  line-height: 1.1; letter-spacing: -0.3px; color: var(--color-blanco); text-decoration: none; white-space: nowrap;
}
.breadcrumbs__link:hover { text-decoration: underline; }
.breadcrumbs__sep { display: inline-block; width: 1px; height: 15px; background: var(--color-blanco); }

/* ─────────────────────────────────────────────────────────────────────────────
 * Vistas de listado sin diseño en Figma (archivos, búsqueda, 404, paginación).
 * Propuesta del equipo con los tokens del sitio; ver docs/vistas-sin-diseno.md.
 * ──────────────────────────────────────────────────────────────────────────── */

/* Hero de listado: el corto de M17, pero sin imagen ni descripción. */
.hero-single--listado { min-height: 302px; }

.resultados__descripcion {
  font-family: var(--font-base);
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-negro-azul);
  margin: 0 0 24px;
  max-width: 720px;
}

/* Paginación (V10). Coherente con los controles del carrusel de la distributiva:
   40px de área táctil, radio 2 y la misma pareja de azules. */
.paginacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
}
.paginacion__estado {
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--color-azul-100);
  margin: 0;
}
.paginacion__lista { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.paginacion__item { margin: 0; }
.paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 2px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-negro-azul);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
}
.paginacion a.page-numbers:hover { background: rgba(0, 27, 38, 0.06); border-color: var(--color-negro-azul); }
.paginacion a.page-numbers:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.paginacion .page-numbers.current { background: var(--color-negro-azul); color: var(--color-azul-20); }
.paginacion .page-numbers.dots { min-width: 24px; padding: 0; }

/* Estado sin resultados de la búsqueda (V2) y 404 (V3): mismo patrón —explicación,
   buscador para reintentar y atajos— para que no sean un callejón sin salida. */
.busqueda__vacio,
.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-block: var(--seccion-pad-y);
}
.busqueda__vacio { padding-block: 24px 0; }
.busqueda__vacio-texto,
.error-404__texto {
  font-family: var(--font-base);
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-negro-azul);
  margin: 0;
  max-width: 640px;
}
.busqueda__vacio-sugerencia,
.error-404__sugerencia {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.36px;
  color: var(--color-azul-100);
  margin: 0;
}
.busqueda__vacio-form,
.error-404__form { width: 100%; max-width: 640px; }
/* El buscador nace pensado para la barra oscura del header: aquí va sobre fondo claro. */
.busqueda__vacio-form .buscador,
.error-404__form .buscador { max-width: none; margin: 0; padding: 0; }
.busqueda__atajos,
.error-404__atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.busqueda__atajo,
.error-404__atajo { margin: 0; }
/* Los ghost button del tema son blancos (van sobre fondo oscuro); aquí el fondo es claro. */
.busqueda__vacio .ghost-button__texto,
.error-404__atajos .ghost-button__texto { color: var(--color-negro-azul); }
.busqueda__vacio .ghost-button__line svg [stroke],
.error-404__atajos .ghost-button__line svg [stroke] { stroke: var(--color-negro-azul); }

@media (max-width: 900px) {
  .paginacion__lista { flex-wrap: wrap; justify-content: center; }
  .busqueda__atajos,
  .error-404__atajos { flex-direction: column; gap: 16px; }
}