/* ===========================================================================
   Instituto de investigación y Laboratorio — Figma "FASE 2"

   Todo va acotado a .instituto-layout, el wrapper que comparten
   node--research-institute--full.html.twig y node--lab--full.html.twig. Los
   organismos son los mismos que usa el resto del sitio, así que ninguna regla
   puede salir de ese wrapper.

   La hoja va aparte, como css/start_to_way.css o css/accreditations.css, y no
   dentro de cada componente: son catorce secciones sobre nueve organismos
   compartidos y repartirlas dejaría el diseño de la página ilegible.
   =========================================================================== */

/* ---------------------------------------------------------------- Paleta ---
   El Figma es solo claro, pero la página hereda el dark mode del sitio. Como
   en Curso, los colores del diseño cuelgan de
   `:where(html:not([data-theme="dark"]))`, en oscuro manda la paleta del
   sitio, y los elementos de color fijo (hero, bandas rojas y negras, tarjetas
   rojas) se afirman fuera de los dos esquemas para ganar en ambos.

   En el Figma los títulos de sección son negros; el rojo se reserva para
   algunas bajadas y para los títulos de tarjeta. Varios de los organismos
   compartidos pintan su h2 en rojo, de ahí los !important. */
:where(html:not([data-theme="dark"])) .instituto-layout {
  --bs-heading-color: var(--dark);
  --bs-body-color: var(--dark);
  --bs-border-color: var(--secondary);
  color: var(--dark);
}

:where(html:not([data-theme="dark"])) .instituto-layout p,
:where(html:not([data-theme="dark"])) .instituto-layout li {
  color: var(--dark);
}

:where(html:not([data-theme="dark"])) .instituto-layout [data-component-id="usfq_theme:text_block"] .title,
:where(html:not([data-theme="dark"])) .instituto-layout [data-component-id="usfq_theme:text_block"] .subtitle {
  color: var(--dark) !important;
}

:where(html[data-theme="dark"]) .instituto-layout [data-component-id="usfq_theme:text_block"] .title,
:where(html[data-theme="dark"]) .instituto-layout [data-component-id="usfq_theme:text_block"] .subtitle,
:where(html[data-theme="dark"]) .instituto-layout [data-component-id="usfq_theme:section_list_link_with_image"] .title {
  color: var(--white) !important;
}

/* Las tarjetas claras pierden su fondo blanco en oscuro pero conservan el
   texto negro: negro sobre negro. Es el fallo que no se ve en modo claro. */
:where(html[data-theme="dark"]) .instituto-layout .card--bg-light .colegios_card-text,
:where(html[data-theme="dark"]) .instituto-layout .card--bg-light .textbottom_card-text,
:where(html[data-theme="dark"]) .instituto-layout .card--bg-light .textbottom_card-text span,
:where(html[data-theme="dark"]) .instituto-layout .lab-portfolio .card--bg-light .colegios_card-text span {
  color: var(--white) !important;
}

/* Sobre fondo rojo, negro o imagen el texto es blanco en los dos esquemas.
   Los botones quedan fuera: sobre tarjeta roja el botón es blanco con texto
   oscuro, y forzarlos aquí los dejaría en blanco sobre blanco. */
.instituto-layout [data-component-id="usfq_theme:section_hero"],
.instituto-layout [data-component-id="usfq_theme:section_hero"] p,
.instituto-layout [data-component-id="usfq_theme:section_hero"] li,
.instituto-layout [data-component-id="usfq_theme:section_hero"] [data-component-id="usfq_theme:text_block"] .title,
.instituto-layout [data-component-id="usfq_theme:section_hero"] [data-component-id="usfq_theme:text_block"] .subtitle,
.instituto-layout .section-list-links--bg-primary,
.instituto-layout .section-list-links--bg-primary p,
.instituto-layout .section-list-links--bg-primary li,
.instituto-layout .section-list-links--bg-primary [data-component-id="usfq_theme:text_block"] .title,
.instituto-layout .section-list-links--bg-primary [data-component-id="usfq_theme:text_block"] .subtitle,
.instituto-layout .section-list-links--bg-secondary,
.instituto-layout .section-list-links--bg-secondary p,
.instituto-layout .section-list-links--bg-secondary li,
.instituto-layout .section-list-links--bg-secondary [data-component-id="usfq_theme:text_block"] .title,
.instituto-layout .section-list-links--bg-secondary [data-component-id="usfq_theme:text_block"] .subtitle,
.instituto-layout .card--bg-primary .colegios_card-body,
.instituto-layout .card--bg-primary .colegios_card-body p,
.instituto-layout .card--bg-primary .colegios_card-title,
.instituto-layout .card--bg-primary .container-textbottom > *:not(.textbottom-cta),
.instituto-layout .card--bg-primary .textbottom_card-body > *:not(.textbottom-cta),
.instituto-layout .card--bg-primary .textbottom_card-text span,
.instituto-layout .card--bg-secondary .colegios_card-body,
.instituto-layout .card--bg-secondary .colegios_card-body p,
.instituto-layout .card--bg-secondary .colegios_card-title,
.instituto-layout .card--bg-secondary .container-textbottom > *:not(.textbottom-cta),
.instituto-layout .card--bg-secondary .textbottom_card-body > *:not(.textbottom-cta),
.instituto-layout .card--bg-secondary .textbottom_card-text span {
  color: var(--white) !important;
}

/* Bajadas en rojo: las secciones donde el Figma las usa como pregunta guía.
   El rojo funciona en los dos esquemas, así que va fuera de las media
   queries y después de ellas para ganarles. */
.instituto-layout .instituto-about [data-component-id="usfq_theme:text_block"] .subtitle,
.instituto-layout .instituto-services [data-component-id="usfq_theme:text_block"] .subtitle,
.instituto-layout .lab-programs [data-component-id="usfq_theme:text_block"] .subtitle {
  color: var(--primary) !important;
}

/* -------------------------------------------------------------- 1. Hero ---
   El subtítulo hace de descripción bajo el título: letra de cuerpo, no de
   titular. */
.instituto-layout .instituto-hero .subtitle {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
}

@media (min-width: 1025px) {
  .instituto-layout .instituto-hero .subtitle {
    font-size: 1.25rem;
  }
}

/* El logo va bajo el texto, en una caja blanca como en el Figma. */
.instituto-layout .instituto-hero__logo {
  margin-top: 2rem;
  background: var(--white);
  padding: 0.75rem;
  width: fit-content;
  max-width: 220px;
}

.instituto-layout .instituto-hero__logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90px;
  object-fit: contain;
}

/* --------------------------------------------- 3, 8, 11, L2, L6. Tarjetas --
   Todas las secciones de tarjetas usan section_cards_colegios en su rama de
   retícula (sin carrusel en desktop, ver el prop number_slide). Las columnas
   se alinean a la izquierda y las tarjetas ocupan el ancho de su columna: el
   max-width de card--colegios está pensado para el carrusel de colegios. */
.instituto-layout [data-component-id="usfq_theme:section_cards_colegios"] .section-align-usfq > .row > .col-12 {
  padding-left: 0;
  padding-right: 0;
}

/* La rejilla recupera los margenes negativos de la fila de Bootstrap, que
   app.scss anula en todo el sitio (`.row { margin: 0 }`): sin ellos la primera
   tarjeta quedaba media gotera (12px) por dentro del titular. Asi todas las
   columnas conservan el mismo acolchado y la primera va a ras del titular.
   El organismo, ademas, centra la rejilla: una fila incompleta (1, 2, 4 o 5
   tarjetas con 3 por fila) quedaba en el medio. */
.instituto-layout .section-cards-colegios__grid {
  justify-content: flex-start;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.instituto-layout .section-cards-colegios__grid > [class*="col-"] {
  justify-content: flex-start !important;
}

.instituto-layout .section-cards-colegios__grid .card {
  max-width: none;
  width: 100%;
  margin-bottom: 0;
}

.instituto-layout .section-cards-colegios__grid .card-colegios_card-image img {
  max-width: none;
}

/* ------------------------------------------- 6. Carreras y programas ------
   Las fotos de las carreras vienen de tamanos muy distintos: se recortan a
   16:9 para que la fila no baile. */
.instituto-layout .instituto-courses .card-colegios_card-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* El marcador no se recorta: es un logo, se centra sobre un fondo neutro. */
.instituto-layout .instituto-courses .card-colegios_card-image .unit-card__placeholder {
  padding: 2rem;
  background-color: rgb(0 0 0 / 6%);
  object-fit: contain;
}

.instituto-layout .instituto-courses .colegios_card-eyebrow {
  margin: 0.5rem 0 0.75rem;
  color: var(--primary);
  line-height: 1.6;
}

/* ------------------------------------------------- Color de las tarjetas ---
   En el Figma de este proyecto una tarjeta pintada de color es siempre el
   estado hover, nunca el de reposo: en reposo todas son caja blanca con título
   rojo y texto negro, también en oscuro. El color entra solo con el hover y
   arrastra título y cuerpo a blanco. Los selectores repiten clases para
   ganarle al bloque de oscuro de card.css, que pinta de negro toda
   `card--bg-light` con `!important`. */
.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom {
  background-color: var(--white) !important;
  color: var(--dark) !important;
}

.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios .colegios_card-title,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom .textbottom_card-title {
  color: var(--primary) !important;
}

.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios .colegios_card-text,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios .colegios_card-text *,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom .textbottom_card-text,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom .textbottom_card-text * {
  color: var(--dark) !important;
}

.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom:hover {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}

.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-title,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-text,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-text *,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom:hover .textbottom_card-title,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom:hover .textbottom_card-text,
.instituto-layout [data-component-id="usfq_theme:card"].card.card--textbottom.card-textbottom:hover .textbottom_card-text * {
  color: var(--white) !important;
}

/* Misión y Visión: dos columnas a partes iguales, a ras del titular de la
   sección y separadas por el gap, sin el acolchado de columna de Bootstrap
   (en el Figma de 1440: 620 + 72 + 620). Una sola tarjeta no se centra. */
.instituto-layout .instituto-mission .section-cards-colegios__grid {
  justify-content: flex-start;
  column-gap: 1.5rem;
  margin-left: 0;
  margin-right: 0;
}

.instituto-layout .instituto-mission .section-cards-colegios__grid > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .instituto-layout .instituto-mission .section-cards-colegios__grid > [class*="col-"] {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

@media (min-width: 1025px) {
  .instituto-layout .instituto-mission .section-cards-colegios__grid {
    column-gap: 4.5rem;
  }

  .instituto-layout .instituto-mission .section-cards-colegios__grid > [class*="col-"] {
    flex: 0 0 calc(50% - 2.25rem);
    max-width: calc(50% - 2.25rem);
  }
}

/* Las dos tarjetas van sin foto, así que el cuerpo asume el aire que en el
   resto de colegios da la imagen. El padding va en `.colegios_card-body` y no
   en `.card`: así el fondo del hover y del color de la tarjeta llega hasta el
   borde y el componente conserva su inversión de colores y su modo oscuro.
   El bloque de texto va centrado en vertical, con acolchado simétrico: uno
   mayor arriba bajaba el centro. */
.instituto-layout .instituto-mission .colegios_card-body {
  padding: 1.5rem;
  gap: 1rem;
  justify-content: center;
}

/* Estas tarjetas no llevan CTA y el contenedor vacío del botón se queda con un
   `margin-top: auto` que se come el hueco libre y empuja el texto arriba. */
.instituto-layout .instituto-mission .container-button:not(:has(*)) {
  display: none;
}

@media (min-width: 768px) {
  .instituto-layout .instituto-mission .card-colegios {
    min-height: 314px;
  }

  .instituto-layout .instituto-mission .colegios_card-body {
    padding: 2rem 1.5rem;
    gap: 0.875rem;
  }
}

@media (min-width: 1025px) {
  .instituto-layout .instituto-mission .card-colegios {
    min-height: 490px;
  }

  .instituto-layout .instituto-mission .colegios_card-body {
    padding: 3rem 1.5rem;
    gap: 1.9375rem;
  }
}

/* Sin foto, `card-colegios_card-img-top` deja el hueco de 16px del gap de la
   tarjeta. Mismo apaño que en `.curso-layout`, que tampoco lleva imagen. */
.instituto-layout .instituto-mission .card-colegios_card-img-top:not(:has(.card-colegios_card-image)) {
  display: none;
}

.instituto-layout .instituto-mission .colegios_card-title,
.instituto-layout .instituto-mission .colegios_card-text {
  margin-bottom: 0;
}

/* Tipografía del Figma: el título va al tamaño de h2 (32/24/20) y no al .h4
   del componente; el cuerpo, a 16/18 en todos los anchos, cuando el token de
   cuerpo baja a 14 por debajo de 992. El gap entre los dos se ajusta en cada
   tramo para dejar la separación de tinta del PNG (23 / 22 / 40 px). */
.instituto-layout .instituto-mission .colegios_card-title {
  font-size: var(--fs-h2);
  line-height: 1;
}

.instituto-layout .instituto-mission .colegios_card-text,
.instituto-layout .instituto-mission .colegios_card-text * {
  font-size: 1rem;
  line-height: 1.125rem;
}

/* En el Figma los CTA de las tarjetas van alineados a la izquierda; el
   organismo los manda a la derecha porque en colegios la tarjeta es estrecha. */
.instituto-layout .section-cards-colegios__grid .container-button {
  justify-content: flex-start;
}

/* Alianzas: seis tarjetas en dos filas de tres, como el Figma. */
.instituto-layout .instituto-alliances .card-colegios_card-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Conocer el laboratorio y Sobre el laboratorio: tarjetas de texto con CTA.
   La primera va en rojo y su botón en blanco.

   El acolchado vertical es el del Figma y no es simétrico: el título arranca
   bastante por debajo del borde y el botón se queda más cerca del inferior. */
.instituto-layout .instituto-labs .container-textbottom,
.instituto-layout .lab-about .container-textbottom {
  padding: 2.5rem 1.5rem 2rem;
}

/* El botón se separa del cuerpo con acolchado propio y no solo con el
   `margin-top: auto` que lo empuja al fondo: ese margen vale lo que sobre en
   la celda, así que la tarjeta de texto más largo se quedaba con el boton
   pegado a la descripción y la corta con un hueco enorme. El acolchado fija
   el minimo y el auto sigue repartiendo lo que sobre. */
.instituto-layout .instituto-labs .textbottom-cta,
.instituto-layout .lab-about .textbottom-cta {
  padding-top: 2rem;
}

@media (min-width: 1025px) {
  .instituto-layout .instituto-labs .container-textbottom,
  .instituto-layout .lab-about .container-textbottom {
    padding: 4rem 1.5rem 3rem;
  }

  .instituto-layout .instituto-labs .textbottom-cta,
  .instituto-layout .lab-about .textbottom-cta {
    padding-top: 3.5rem;
  }
}

.instituto-layout .instituto-labs .card--bg-primary .textbottom_card-title,
.instituto-layout .lab-about .card--bg-primary .textbottom_card-title {
  color: var(--white);
}

/* El CTA de las columnas de "Sobre el laboratorio" va perfilado en el Figma. */
.instituto-layout .lab-about .textbottom-cta .btn {
  background: transparent;
  border: 1px solid currentColor;
}

.instituto-layout .lab-about .card--bg-light .textbottom-cta .btn {
  color: var(--dark);
}

:where(html[data-theme="dark"]) .instituto-layout .lab-about .card--bg-light .textbottom-cta .btn {
  color: var(--white);
}

/* ------------------------------------------------------ 4. Chips de áreas --
   Etiquetas, no enlaces: pastilla de borde fino, como en el Figma. */
.instituto-layout .instituto-areas__group {
  margin-top: 2rem;
}

.instituto-layout .instituto-areas__label {
  margin-bottom: 0.75rem;
}

.instituto-layout .instituto-areas__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.instituto-layout .instituto-areas__chip {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}

/* -------------------------------------------------------------- 6. Cursos --
   El listado ya viene resuelto por views-view--cursos.html.twig; aquí solo se
   quita el doble padding (la vista trae su propio .section-align-usfq). */
.instituto-layout .instituto-courses .section-align-usfq {
  padding-left: 0;
  padding-right: 0;
}

.instituto-layout .instituto-courses [data-component-id="usfq_theme:section_cards_cursos"] .section-align-usfq--padded {
  padding-top: 2rem;
  padding-bottom: 0;
}

.instituto-layout .instituto-courses [data-component-id="usfq_theme:text_block"] .subtitle {
  font-size: 1rem;
  font-weight: 400;
}

/* --------------------------------------------------------------- 9. Hitos --
   Programas y unidades del laboratorio: la lista comparte columna con el
   título, que ya trae padding del organismo; sin esto las filas se pegan al
   borde de la página. */
.instituto-layout .lab-programs [data-component-id="usfq_theme:link"],
.instituto-layout .lab-units [data-component-id="usfq_theme:link"] {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .instituto-layout .lab-programs [data-component-id="usfq_theme:link"],
  .instituto-layout .lab-units [data-component-id="usfq_theme:link"] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* "Conoce más": en el Figma las reglas de las filas van del borde de la página
   a la imagen, así que la lista sale del acolchado de .section-align-usfq
   (2rem / 1.5rem / 4rem, con !important) con márgenes negativos y el acolchado
   pasa a cada fila. El texto va a la derecha, junto a la flecha. Medidas del
   PNG: fila 70 + regla 2 (54 + 2 en móvil), rótulo 14 / 24 / 32, flecha 32 /
   35 / 35 y 98 px entre rótulo y flecha. */
.instituto-layout .instituto-milestones [data-content-dialog-list] {
  margin-left: -2rem;
  margin-right: -2rem;
}

.instituto-layout .instituto-milestones .link--link-list .link--link-list-item {
  border-bottom-width: 2px;
}

.instituto-layout .instituto-milestones .link--link-list-item a {
  min-height: 3.375rem;
  padding: 0.5rem 2rem;
  gap: 1.5rem;
  font-size: 0.875rem;
}

/* Un rótulo largo parte por palabras dentro de su hueco y la que aun así no
   quepa se corta sin guion: hyphens está descartado en este tema. */
.instituto-layout .instituto-milestones .link-link-list-item__text {
  flex: 0 1 auto;
  min-width: 0;
  text-align: end;
  overflow-wrap: break-word;
}

.instituto-layout .instituto-milestones .link--link-list .link--link-list-item .link-link-list-item__icon .icon svg {
  width: 2rem;
  height: 2rem;
}

/* El atom pinta el hover con blanco al 20 %, invisible sobre el fondo claro.
   Mismo velo que las filas de una y dos columnas del atom. */
.instituto-layout .instituto-milestones .link--link-list-item:hover {
  background-color: var(--dark-opacity-20);
}

:where(html[data-theme="dark"]) .instituto-layout .instituto-milestones .link--link-list-item:hover {
  background-color: var(--light-opacity-20);
}

/* En móvil el Figma lleva la flecha a la izquierda y el rótulo a la derecha. */
@media (max-width: 767px) {
  .instituto-layout .instituto-milestones .link--link-list-item a {
    flex-direction: row-reverse;
  }
}

/* Columna de texto de 7/12, como el Figma (843 de 1440 y 458 de 768): a la
   mitad, "Líneas de investigación" partía en dos líneas a 1440. */
@media (min-width: 768px) {
  .instituto-layout .instituto-milestones > .row > .content {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .instituto-layout .instituto-milestones > .row > .container-img {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .instituto-layout .instituto-milestones [data-content-dialog-list] {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .instituto-layout .instituto-milestones .link--link-list-item a {
    justify-content: flex-end;
    min-height: 4.375rem;
    padding: 0.75rem 1.5rem;
    gap: 6.125rem;
    font-size: 1.5rem;
  }

  .instituto-layout .instituto-milestones .link--link-list .link--link-list-item .link-link-list-item__icon .icon svg {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}

/* Entre 1025 y 1440 la columna mide 598-840 px: el hueco hasta la flecha cede
   hasta 2.5rem para que un rótulo de dos o tres palabras siga en una línea. */
@media (min-width: 1025px) {
  .instituto-layout .instituto-milestones [data-content-dialog-list] {
    margin-left: -4rem;
    margin-right: -4rem;
  }

  .instituto-layout .instituto-milestones .link--link-list-item a {
    padding: 0.75rem 4rem;
    gap: clamp(2.5rem, calc(13.98vw - 6.45rem), 6.125rem);
    font-size: 2rem;
  }
}

/* ------------------------------------------------------------- 12. Equipo --
   Director grande a la izquierda y el resto en retícula, como el Figma. */
.instituto-layout .instituto-team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.instituto-layout .instituto-team__item--lead {
  grid-column: span 2;
}

/* Con field_er_team la tarjeta la pinta el view mode teaser de `teachers`, que
   trae su propio ancho: sin esto se desborda de la celda de la retícula. */
.instituto-layout .instituto-team--profiles .instituto-team__item > * {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

@media (min-width: 768px) {
  .instituto-layout .instituto-team__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .instituto-layout .instituto-team__item--lead {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (min-width: 1025px) {
  .instituto-layout .instituto-team__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* card-profesor centra su contenido para la retícula de docentes; aquí cada
   tarjeta ocupa su columna y el texto se alinea con la foto. */
.instituto-layout .instituto-team__grid .card-profesor {
  align-items: stretch;
  width: 100%;
}

/* Las fotos que acompañan a la destacada van cuadradas: es el recorte que ya
   hace el image style `teachers_card` (421x421), el mismo de la vista de
   docentes. La del director se queda vertical. */
.instituto-layout .instituto-team__grid .card-profesor_card-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.instituto-layout .instituto-team__item--lead .card-profesor_card-image img {
  height: auto;
  aspect-ratio: 3 / 4;
}

/* La ceja del director son dos lineas largas y el organismo la deja con una
   altura de una sola: se comia el enlace al perfil. */
.instituto-layout .instituto-team__item--lead .eyebrow {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

.instituto-layout .instituto-team__profile {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--primary);
}

/* ------------------------------------------------ 13. Sitio web externo ----
   Filas a ancho completo con el texto a la izquierda: el organismo empuja el
   texto con margin-left auto y lo deja centrado junto a la flecha. */
.instituto-layout [data-component-id="usfq_theme:section_list_link_with_image"] .link-image__text {
  margin-left: 0 !important;
  text-align: left;
}

.instituto-layout [data-component-id="usfq_theme:section_list_link_with_image"] .title {
  margin-bottom: 1.5rem;
}

:where(html:not([data-theme="dark"])) .instituto-layout [data-component-id="usfq_theme:section_list_link_with_image"] .title {
  color: var(--dark);
}

.instituto-layout .section-list-link-with-image--bg-light {
  background-color: transparent;
}

/* El organismo mide 100vh desde 1025 (section_list_link_with_image.css) y en
   la ficha suele ser la última sección, así que el alto sobrante quedaba como
   un hueco blanco antes del pie. Aquí la banda mide lo que su contenido. */
.instituto-layout [data-component-id="usfq_theme:section_list_link_with_image"] {
  min-height: 0;
}

/* ---------------------------------------------- 10, 14, L13. Bandas CTA ----
   El repositorio y "Explorar" son solo la banda con un enlace: sin bloque de
   texto no hace falta el padding-top de 10rem del organismo. Alto y aire del
   Figma: 98 / 92 / 100 px hasta la fila y 72 / 72 / 128 px debajo. */
.instituto-layout .instituto-repository,
.instituto-layout .lab-explore {
  padding-top: 6rem;
  padding-bottom: 4.5rem;
}

.instituto-layout .instituto-contact [data-component-id="usfq_theme:link"] {
  padding-right: 1rem;
}

@media (min-width: 1025px) {
  .instituto-layout .instituto-contact [data-component-id="usfq_theme:link"] {
    padding-right: 4rem;
  }
}

/* La fila del CTA va como las de "Conoce más": la regla llega al borde de la
   página (a todo el ancho hasta 1024, la mitad derecha desde 1025) y el
   acolchado pasa a la fila. Rótulo 20 / 24 / 32 y flecha 19 / 35 / 35; con
   la fila a la mitad menos 4rem de gotera, "Explorar el repositorio" partía en
   dos líneas a 1440. En móvil el rótulo va a la izquierda y el hueco hasta la
   flecha baja a 1rem: con 1.5rem el mismo rótulo no cabe a 375 por 2 px.
   La lista lleva .link--link-list para ganar al `:not(.link--link-button)` del
   organismo, y `width: auto` porque el `width: 100%` del atom anula los
   márgenes negativos. */
.instituto-layout .instituto-repository [data-component-id="usfq_theme:link"].link--link-list,
.instituto-layout .lab-explore [data-component-id="usfq_theme:link"].link--link-list {
  width: auto;
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 0;
}

.instituto-layout .instituto-repository [data-component-id="usfq_theme:link"] .link.link--link-list-item,
.instituto-layout .lab-explore [data-component-id="usfq_theme:link"] .link.link--link-list-item {
  border-bottom-width: 2px;
}

.instituto-layout .instituto-repository [data-component-id="usfq_theme:link"] .link.link--link-list-item a,
.instituto-layout .lab-explore [data-component-id="usfq_theme:link"] .link.link--link-list-item a {
  min-height: 2.75rem;
  padding: 0.5rem 2rem;
  gap: 1rem;
  text-align: start;
}

.instituto-layout .instituto-repository .link-link-list-item__text,
.instituto-layout .lab-explore .link-link-list-item__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.instituto-layout .instituto-repository .link--link-list .link--link-list-item .link-link-list-item__icon .icon svg,
.instituto-layout .lab-explore .link--link-list .link--link-list-item .link-link-list-item__icon .icon svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

@media (min-width: 768px) {
  .instituto-layout .instituto-repository,
  .instituto-layout .lab-explore {
    padding-top: 5.75rem;
  }

  .instituto-layout .instituto-repository [data-component-id="usfq_theme:link"].link--link-list,
  .instituto-layout .lab-explore [data-component-id="usfq_theme:link"].link--link-list {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .instituto-layout .instituto-repository [data-component-id="usfq_theme:link"] .link.link--link-list-item a,
  .instituto-layout .lab-explore [data-component-id="usfq_theme:link"] .link.link--link-list-item a {
    justify-content: flex-end;
    min-height: 4.375rem;
    padding: 0.75rem 1.5rem;
    gap: 6.125rem;
    text-align: end;
  }

  .instituto-layout .instituto-repository .link--link-list .link--link-list-item .link-link-list-item__icon .icon svg,
  .instituto-layout .lab-explore .link--link-list .link--link-list-item .link-link-list-item__icon .icon svg {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}

@media (min-width: 1025px) {
  .instituto-layout .instituto-repository,
  .instituto-layout .lab-explore {
    padding-top: 6.25rem;
    padding-bottom: 8rem;
  }

  .instituto-layout .instituto-repository [data-component-id="usfq_theme:link"].link--link-list,
  .instituto-layout .lab-explore [data-component-id="usfq_theme:link"].link--link-list {
    margin-left: -4rem;
    margin-right: -4rem;
  }

  .instituto-layout .instituto-repository [data-component-id="usfq_theme:link"] .link.link--link-list-item a,
  .instituto-layout .lab-explore [data-component-id="usfq_theme:link"] .link.link--link-list-item a {
    padding: 0.75rem 4rem;
    gap: clamp(2.5rem, calc(13.98vw - 6.45rem), 6.125rem);
  }
}

.instituto-layout .instituto-contact__role {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------ L5. Catálogo de servicios */
.instituto-layout .lab-services .dropdown__toggle {
  background: var(--primary);
  color: var(--white);
}

.instituto-layout .lab-services .dropdown__title {
  color: var(--white);
}

/* ---------------------------------------------------------- L6. Portafolio --
   Medidas del Figma de Laboratorio (XS 375, MD 772, XL 1444). La tarjeta del
   Figma lleva foto 16:9 y `lab_project` no tiene imagen: sin ella las
   distancias arrancan en el borde superior de la tarjeta, donde el Figma pone
   el pie de la foto. La línea de trabajo va en la ceja de la card y los
   investigadores dentro del texto. */

/* Por debajo de 768 el Figma es un carrusel de una tarjeta; desde 768, rejilla
   de tres columnas (node--lab--full pinta los dos). */
@media (max-width: 767px) {
  .instituto-layout .lab-portfolio .section-cards-colegios__grid {
    display: none;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__carousel {
    margin-top: 3rem;
  }

  /* Tarjeta de 231px a 375 con las flechas centradas sobre el borde del
     contenido, como el Figma (229px, flechas a 33px del borde de pantalla).
     El componente saca las flechas 3rem hacia fuera y aquí se saldrían. */
  .instituto-layout .lab-portfolio .lab-portfolio__carousel .carousel {
    padding: 0 2.5rem;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__carousel .carousel-slide:only-child {
    max-width: none;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__carousel .carousel-control-prev {
    left: -1.25rem;
    margin-left: 0;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__carousel .carousel-control-next {
    right: -1.25rem;
    margin-right: 0;
  }

  /* Chevron del Figma: 16 x 31 de tinta y trazo fino (el `small` del átomo
     da 10 x 20). */
  .instituto-layout .lab-portfolio .lab-portfolio__carousel .carousel-controls .icon {
    font-size: 31px;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__carousel .carousel-controls svg path {
    stroke-width: 2;
  }
}

@media (min-width: 768px) {
  .instituto-layout .lab-portfolio .lab-portfolio__carousel {
    display: none;
  }

  .instituto-layout .lab-portfolio .section-cards-colegios__grid > .col-md-6 {
    width: 33.33333333%;
  }
}

.instituto-layout .lab-portfolio .card-colegios_card-img-top:not(:has(.card-colegios_card-image)) {
  display: none;
}

/* Foto 16:9 del Figma, igual que Carreras; el marcador se centra sin recortar. */
.instituto-layout .lab-portfolio .card-colegios_card-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.instituto-layout .lab-portfolio .card-colegios_card-image .unit-card__placeholder {
  padding: 2rem;
  background-color: rgb(0 0 0 / 6%);
  object-fit: contain;
}

.instituto-layout .lab-portfolio .colegios_card-body {
  padding: 1rem 0.5rem 0.5rem;
}

.instituto-layout .lab-portfolio .colegios_card-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.instituto-layout .lab-portfolio .colegios_card-eyebrow {
  margin: 1.25rem 0 0;
  color: var(--primary);
}

.instituto-layout .lab-portfolio .colegios_card-text {
  margin: 0;
}

.instituto-layout .lab-portfolio .lab-portfolio__lead,
.instituto-layout .lab-portfolio .lab-portfolio__label,
.instituto-layout .lab-portfolio .lab-portfolio__people {
  display: block;
}

.instituto-layout .lab-portfolio .lab-portfolio__lead,
.instituto-layout .lab-portfolio .lab-portfolio__people {
  font-size: 0.75rem;
  line-height: 0.875rem;
}

.instituto-layout .lab-portfolio .lab-portfolio__lead {
  margin-top: 1.0625rem;
}

.instituto-layout .lab-portfolio .lab-portfolio__label {
  margin-top: 0.875rem;
}

/* El acolchado fija la separación mínima con los investigadores: el
   `margin-top: auto` del componente solo coloca. card.css añade 3rem de
   margen a todo `.btn` de la tarjeta, que el Figma no tiene. */
.instituto-layout .lab-portfolio .container-button {
  padding-top: 2rem;
}

.instituto-layout .lab-portfolio .container-button .btn {
  margin-top: 0;
}

/* Sin enlace no hay botón: el contenedor vacío pierde el acolchado y el
   cuerpo recupera abajo el aire que tiene arriba. */
.instituto-layout .lab-portfolio .container-button:not(:has(a, button)) {
  padding-top: 0;
}

.instituto-layout .lab-portfolio .colegios_card-body:not(:has(.container-button a, .container-button button)) {
  padding-bottom: 1rem;
}

/* Hasta 1024 el botón ocupa el ancho del cuerpo y mide 40px de alto; en
   desktop va a la derecha, como la card de colegios sin la regla de
   `.instituto-layout` que lo manda a la izquierda. El acolchado del átomo
   lleva `!important` y con él «Más información» no cabe en la columna de
   224px de tablet: se partía en dos líneas. */
.instituto-layout .lab-portfolio .container-button .btn {
  width: 100%;
  padding: 0.8125rem 0.5rem !important;
}

/* En el Figma el hover de estas tarjetas es negro, no el rojo del resto de
   la ficha; el botón pasa a blanco por card.css. */
.instituto-layout .lab-portfolio [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover {
  background-color: var(--dark) !important;
}

.instituto-layout .lab-portfolio [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-eyebrow {
  color: var(--white);
}

/* card.css pone el botón negro al pasar por encima (con `!important`), y
   sobre la tarjeta negra la píldora desaparecía: se queda en rojo. */
.instituto-layout .lab-portfolio [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .container-button .btn:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

/* `.colegios_card-title` no parte palabras: un término largo
   («Electroencefalografía») se salía de la tarjeta en tablet. Vale también
   para Misión y Carreras, que usan la misma card. */
.instituto-layout .card-colegios .colegios_card-title {
  overflow-wrap: break-word;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .instituto-layout .lab-portfolio .colegios_card-title {
    font-size: 1rem;
  }

  .instituto-layout .lab-portfolio .colegios_card-eyebrow {
    margin-top: 1.0625rem;
  }

  /* card.css deja aquí el contenedor en `display: contents` y su acolchado
     no separaría nada. */
  .instituto-layout .lab-portfolio .container-button {
    display: block;
  }
}

@media (min-width: 1025px) {
  .instituto-layout .lab-portfolio .section-cards-colegios__grid {
    --bs-gutter-x: 4rem;
    --bs-gutter-y: 4rem;
  }

  .instituto-layout .lab-portfolio .colegios_card-title {
    font-size: 1.5rem;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__lead,
  .instituto-layout .lab-portfolio .lab-portfolio__people {
    font-size: 1rem;
    line-height: 1.125rem;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__lead {
    margin-top: 0.875rem;
  }

  .instituto-layout .lab-portfolio .lab-portfolio__label {
    margin-top: 1.25rem;
  }

  .instituto-layout .lab-portfolio .container-button {
    padding-top: 2.125rem;
  }

  .instituto-layout .lab-portfolio .section-cards-colegios__grid .container-button {
    justify-content: flex-end;
  }

  .instituto-layout .lab-portfolio .container-button .btn {
    width: auto;
    padding: 1.125rem !important;
  }
}

/* Ajustes de la vista de Laboratorio (3 sep 2026), acotados a `.lab-layout`
   para no mover la de Instituto, que comparte organismos. */

/* El CTA del hero pasa a ser una banda propia bajo la imagen. */
.instituto-layout.lab-layout .lab-hero-cta {
  padding: 2rem 0 0;
}

/* "Sobre el laboratorio" quedaba pegado al hero. */
.instituto-layout.lab-layout .lab-about {
  padding-top: 4.5rem;
}

@media (max-width: 767px) {
  .instituto-layout.lab-layout .lab-about {
    padding-top: 2.5rem;
  }
}

/* ------------------------------------------------ Ajustes de QA (4 sep 2026) */

/* L2. En mobile la primera columna de "Sobre el laboratorio" quedaba media
   canaleta a la izquierda de las otras dos (40px vs 52px): el medio-gutter de
   Bootstrap no le llegaba. Se igualan las tres. */
@media (max-width: 767px) {
  .instituto-layout.lab-layout .lab-about .section-cards-colegios__grid > * {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }
}

/* Banda "Explorar el repositorio": el organismo pinta una linea arriba del
   enlace; el Figma solo lleva el subrayado de abajo. Se quita la de arriba. */
.instituto-layout .instituto-repository .link-image,
.instituto-layout .instituto-repository .link-image__text,
.instituto-layout .instituto-repository .link-divider__text {
  border-top: 0;
}

/* "Sitio web externo": las filas ya traen su linea (border del organismo), pero
   en bg-light es negra y sobre el fondo negro del modo oscuro no se ve. En
   oscuro pasa a blanca. */
:where(html[data-theme="dark"]) .instituto-layout .instituto-websites a {
  border-color: var(--white) !important;
}