/* =====================================================================
   Minifunkids · estilos propios de WordPress
   Todo lo que no existía en la versión estática: menú móvil, enlace de
   salto, migas, paginación, formularios, banda de entidades y las clases
   que genera el editor de bloques.
   Se carga después de estilos.css.
   ===================================================================== */

/* ---------------------------------------------------------------
   Utilidades de accesibilidad
   --------------------------------------------------------------- */

/* Hallazgo 25 · enlace para saltar la cabecera (WCAG 2.4.1). */
.mfk-saltar {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 14px 22px;
  border-radius: 0 0 12px 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.mfk-saltar:focus {
  left: 0;
  top: 0;
  outline: 3px solid var(--deep-cyan);
  outline-offset: -3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  margin: 0; padding: 10px 16px;
}

/* ---------------------------------------------------------------
   Hallazgo 01 · menú móvil
   --------------------------------------------------------------- */

.site-header-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mfk-menu-boton {
  display: none;                 /* Solo aparece cuando el menú de escritorio se oculta. */
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* Hallazgo 10 · área táctil. */
  padding: 10px 16px;
  border: 1px solid rgba(39, 48, 57, .16);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.mfk-menu-boton:hover { border-color: var(--deep-cyan); color: var(--deep-cyan); }
.mfk-menu-boton svg { width: 20px; height: 20px; fill: currentColor; }

.mfk-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 20px 7% 44px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.mfk-menu-panel[data-abierto] { opacity: 1; transform: none; }
.mfk-menu-panel[hidden] { display: none; }

html.mfk-menu-activo,
html.mfk-menu-activo body { overflow: hidden; }

.mfk-menu-panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.mfk-menu-panel-titulo {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mfk-menu-cerrar {
  display: grid;
  width: 44px; height: 44px;
  place-items: center;
  border: 1px solid rgba(39, 48, 57, .16);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.mfk-menu-cerrar svg { width: 20px; height: 20px; fill: currentColor; }

.mfk-menu-lista { margin: 0; padding: 0; list-style: none; }
.mfk-menu-lista > li + li { border-top: 1px solid var(--line-soft, rgba(39, 48, 57, .08)); }
.mfk-menu-lista a {
  display: flex;
  align-items: center;
  min-height: 56px;              /* Área táctil holgada. */
  padding: 8px 2px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
}
.mfk-menu-lista a:hover,
.mfk-menu-lista .current-menu-item > a { color: var(--deep-cyan); }

.mfk-menu-lista-secundaria a { min-height: 48px; font-size: 16px; font-weight: 600; color: var(--muted); }
.mfk-menu-subtitulo {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mfk-menu-pie {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mfk-menu-pie .contact-button { justify-content: center; text-align: center; }

@media (max-width: 1080px) {
  .desktop-nav,
  .desktop-nav-lista { display: none !important; }
  .mfk-menu-boton { display: inline-flex; }
}
@media (min-width: 1081px) {
  .mfk-menu-panel { display: none !important; }
}

/*
 * Sin JavaScript el panel no puede abrirse, así que la navegación se
 * muestra desplegada bajo la cabecera. Nunca se queda sin menú.
 */
html.sin-js .mfk-menu-boton { display: none !important; }
@media (max-width: 1080px) {
  html.sin-js .mfk-menu-panel {
    position: static;
    display: block !important;
    padding: 18px 7% 26px;
    opacity: 1;
    transform: none;
    border-bottom: 1px solid var(--line);
  }
  html.sin-js .mfk-menu-panel[hidden] { display: block !important; }
  html.sin-js .mfk-menu-cerrar { display: none; }
}

/* ---------------------------------------------------------------
   Hallazgo 12 · banda de entidades que ya confían
   --------------------------------------------------------------- */

.mfk-entidades {
  padding: 44px 7.1% 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffefa 0%, #f7f9ed 100%);
  text-align: center;
}
.mfk-entidades-titulo {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mfk-entidades-lista {
  display: flex;
  margin: 0 auto;
  padding: 0;
  max-width: 1120px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 46px;
  list-style: none;
}
.mfk-entidades-lista img {
  display: block;
  width: auto;
  max-width: 148px;
  max-height: 58px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter 200ms ease, opacity 200ms ease;
}
.mfk-entidades-lista li:hover img { filter: none; opacity: 1; }
.mfk-entidad-texto { color: var(--ink); font-size: 15px; font-weight: 700; }

@media (max-width: 760px) {
  .mfk-entidades { padding: 34px 7% 30px; }
  .mfk-entidades-lista { gap: 22px 30px; }
  .mfk-entidades-lista img { max-width: 108px; max-height: 44px; }
}

/* ---------------------------------------------------------------
   Hallazgo 17 · datos de contacto visibles
   --------------------------------------------------------------- */

.mfk-contacto-datos { display: flex; flex-direction: column; gap: 10px; }
.mfk-dato {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.mfk-dato svg { width: 17px; height: 17px; flex: 0 0 17px; fill: var(--deep-cyan); }
.mfk-dato a { color: var(--ink); font-weight: 650; }
.mfk-dato a:hover { color: var(--deep-cyan); text-decoration: underline; text-underline-offset: 3px; }
.mfk-dato-direccion,
.mfk-dato-horario { color: var(--muted); font-size: 14px; }

.global-footer { padding: 58px 7.1% 0; border-top: 1px solid var(--line); }
.global-footer-cuerpo {
  display: grid;
  max-width: 1320px;
  margin: 0 auto;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
}
.global-footer-lema { margin: 16px 0 0; max-width: 30ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
/* Ojo: la hoja original ya define .footer-nav como una rejilla de dos
   columnas para su propio maquetado de pie. Estas columnas usan un nombre
   propio para no heredarla; si no, el título y la lista se colocan uno al
   lado del otro y se pisan entre sí. */
.mfk-footer-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mfk-footer-nav a { color: var(--muted); font-size: 15px; }
.mfk-footer-nav a:hover { color: var(--ink); }
/* Objetivo táctil de 24px (WCAG 2.5.8), igual que hace la hoja original
   con sus propios enlaces de pie. */
.mfk-footer-nav a { position: relative; display: inline-flex; align-items: center; min-height: 24px; }
.mfk-footer-nav-titulo {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.global-footer-contacto { display: flex; flex-direction: column; gap: 16px; }
.global-footer-bottom {
  display: flex;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 0 40px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid var(--line);
}
.global-footer-legal { margin: 0; color: var(--muted); font-size: 13.5px; }
.legal-links ul { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: 20px; list-style: none; }
.legal-links a { color: var(--deep-cyan); font-size: 13.5px; font-weight: 650; }
.mfk-volver-arriba { color: var(--deep-cyan); font-size: 13.5px; font-weight: 650; }

@media (max-width: 1080px) { .global-footer-cuerpo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .global-footer-cuerpo { grid-template-columns: 1fr; gap: 30px; } }

/* ---------------------------------------------------------------
   Migas y paginación
   --------------------------------------------------------------- */

.mfk-migas { padding: 18px 7.1% 0; max-width: 1320px; margin: 0 auto; }
.mfk-migas ol { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 13.5px; color: var(--muted); }
.mfk-migas li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.mfk-migas a { color: var(--deep-cyan); }
.mfk-migas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mfk-migas [aria-current] { color: var(--ink); }

.mfk-paginacion { margin: 48px auto 90px; max-width: 1120px; padding: 0 7.1%; }
.mfk-paginacion .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.mfk-paginacion .page-numbers {
  display: inline-flex;
  min-width: 46px;
  min-height: 46px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39, 48, 57, .14);
  border-radius: 12px;
  background: #fffefa;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}
.mfk-paginacion .page-numbers:hover { border-color: var(--deep-cyan); color: var(--deep-cyan); }
.mfk-paginacion .page-numbers.current { border-color: var(--deep-cyan); background: var(--deep-cyan); color: #fff; }
.mfk-paginacion .dots { border: 0; background: transparent; }

/* ---------------------------------------------------------------
   Hallazgos 04 y 05 · formularios
   Estilos neutros que valen para Contact Form 7, WPForms y Gravity.
   --------------------------------------------------------------- */

.mfk-formulario { max-width: 640px; }
.mfk-formulario label,
.wpcf7 label,
.wpforms-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}
.mfk-formulario input[type="text"],
.mfk-formulario input[type="email"],
.mfk-formulario input[type="tel"],
.mfk-formulario select,
.mfk-formulario textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea,
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field select,
.wpforms-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid rgba(39, 48, 57, .18);
  border-radius: 12px;
  background: #fffefa;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;              /* 16px evita que iOS haga zoom al enfocar. */
  line-height: 1.5;
}
.mfk-formulario textarea,
.wpcf7 textarea { min-height: 140px; resize: vertical; }

.mfk-formulario input:focus,
.mfk-formulario select:focus,
.mfk-formulario textarea:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: 3px solid var(--deep-cyan);
  outline-offset: 2px;
  border-color: var(--deep-cyan);
}

.mfk-formulario .mfk-campo-fila { margin-bottom: 20px; }
.mfk-formulario .mfk-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 24px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.mfk-formulario .mfk-consentimiento input[type="checkbox"] {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  accent-color: var(--deep-cyan);
}
.mfk-formulario .mfk-consentimiento a { color: var(--deep-cyan); text-decoration: underline; text-underline-offset: 3px; }

.mfk-formulario button[type="submit"],
.wpcf7 input[type="submit"],
.wpforms-submit {
  min-height: 54px;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  color: #12353e;
  font-family: inherit;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 10px 23px rgba(0, 184, 224, .19);
}
.mfk-formulario button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover { filter: brightness(1.05); }

.mfk-form-aviso {
  padding: 16px 18px;
  border-radius: 12px;
  background: #eff8f5;
  color: #35494e;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Contenido del editor de bloques
   --------------------------------------------------------------- */

.mfk-contenido { max-width: 720px; margin: 0 auto; padding: 0 7.1%; }
.mfk-contenido > * + * { margin-top: 20px; }
.mfk-contenido p,
.mfk-contenido li { font-size: 16.5px; line-height: 1.78; color: #343a3d; }
.mfk-contenido h2 { margin-top: 44px; color: var(--deep-cyan); font-size: 25px; line-height: 1.3; }
.mfk-contenido h3 { margin-top: 32px; color: #33414a; font-size: 19px; line-height: 1.4; }
.mfk-contenido a { color: var(--deep-cyan); text-decoration: underline; text-underline-offset: 3px; }
.mfk-contenido img { border-radius: 10px; }
.mfk-contenido blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--cyan);
  color: var(--ink);
  font-size: 19px;
  line-height: 1.55;
}
.mfk-contenido table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mfk-contenido th,
.mfk-contenido td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.mfk-contenido figure { margin: 30px 0; }
.mfk-contenido figcaption { margin-top: 9px; color: var(--muted); font-size: 13.5px; }
.mfk-contenido .alignwide { max-width: 1120px; margin-left: calc(50% - 560px); }
.mfk-contenido .alignfull { max-width: none; margin-left: calc(50% - 50vw); width: 100vw; }
@media (max-width: 1180px) {
  .mfk-contenido .alignwide { max-width: 100%; margin-left: 0; }
}

.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignleft  { float: left;  margin: 6px 24px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 24px; }
@media (max-width: 640px) {
  .alignleft, .alignright { float: none; margin: 18px 0; }
}

/* ---------------------------------------------------------------
   Avisos del tema
   --------------------------------------------------------------- */

.mfk-nota-editor {
  max-width: 760px;
  margin: 30px auto;
  padding: 18px 22px;
  border: 1px dashed rgba(39, 48, 57, .25);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Hallazgo 27 · botón de contacto fijo en móvil una vez pasado el hero. */
.mfk-cta-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--cyan);
  color: #12353e;
  font-size: 15px;
  font-weight: 750;
  box-shadow: 0 12px 30px rgba(0, 138, 170, .32);
}
@media (max-width: 760px) {
  body.mfk-mostrar-cta-flotante .mfk-cta-flotante { display: inline-flex; }
  html.mfk-menu-activo .mfk-cta-flotante { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mfk-menu-panel { transition: none; }
}

/* =====================================================================
   Secciones que no existían en la versión estática y que las plantillas
   del tema necesitan. Siguen la misma paleta y los mismos radios que el
   diseño original.
   ===================================================================== */

/* --- Rejillas genéricas ------------------------------------------- */
.news-grid,
.neuro-edition-grid,
.news-related-grid,
.resource-grid,
.testimonial-grid,
.impact-grid,
.solutions-list {
  display: grid;
  max-width: 1320px;
  margin: 0 auto;
  gap: 22px;
}
.news-grid,
.neuro-edition-grid,
.news-related-grid,
.resource-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.testimonial-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); margin-top: 22px; }
.impact-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-top: 34px; }

.news-archive,
.neuro-archive,
.resource-grid-section,
.news-related,
.testimonials-section,
.news-section,
.impact-section,
.solutions-list,
.institutional-recognition { padding: 62px 7.1%; }

/* --- Cifras de impacto (hallazgo 19) ------------------------------ */
.impact-section { background: #174c58; color: #fffefa; }
.impact-section .section-kicker,
.impact-section h2 { color: #fffefa; }
.impact-section h2 > span { color: #8fd9e6; }
.impact-card {
  padding: 24px 22px;
  border: 1px solid rgba(255, 254, 250, .14);
  border-radius: 16px;
  background: rgba(255, 254, 250, .06);
}
.impact-number { margin: 0; color: #4dbfd4; font-size: clamp(30px, 4vw, 42px); font-weight: 750; line-height: 1; }
.impact-label  { margin: 12px 0 0; color: rgba(255, 254, 250, .86); font-size: 14.5px; line-height: 1.55; }
.impact-disclaimer {
  max-width: 70ch;
  margin: 30px auto 0;
  color: rgba(255, 254, 250, .72);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* --- Llamada a la acción intermedia (hallazgo 27) ----------------- */
.mfk-cta-intermedia {
  display: flex;
  max-width: 1320px;
  margin: 0 auto;
  padding: 26px 7.1%;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mfk-cta-intermedia p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 15.5px; }

/* --- Soluciones ---------------------------------------------------- */
.solutions-list { grid-template-columns: 1fr; gap: 30px; }
.solutions-card {
  display: grid;
  grid-template-columns: 72px 1fr 1.1fr;
  align-items: center;
  gap: 30px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fffefa;
  box-shadow: 0 16px 40px rgba(52, 66, 60, .06);
}
.solutions-card-num { margin: 0; color: var(--deep-cyan); font-size: 22px; font-weight: 750; }
.solutions-card-image img { display: block; width: 100%; height: auto; border-radius: 14px; }
.solutions-card-copy h2 { margin: 8px 0 12px; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.24; }
.solutions-card-copy p { margin: 0 0 16px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.solutions-ayuda {
  max-width: 780px;
  margin: 0 auto;
  padding: 44px 7.1% 70px;
  text-align: center;
}
.solutions-ayuda h2 { margin: 0 0 12px; font-size: clamp(23px, 2.8vw, 31px); }
.solutions-ayuda p  { margin: 0 0 22px; color: var(--muted); font-size: 15.5px; }

@media (max-width: 900px) {
  .solutions-card { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Recursos ------------------------------------------------------ */
.resource-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffefa;
}
.resource-card-tag {
  margin: 0;
  color: var(--deep-cyan);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.resource-card h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.resource-card-desc p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.resource-card .section-link { margin-top: auto; }

/* --- Contacto (hallazgo 04) ---------------------------------------- */
.mfk-contacto-seccion {
  display: grid;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 7.1% 70px;
  grid-template-columns: 1.35fr .9fr;
  gap: 56px;
  align-items: start;
}
.mfk-contacto-seccion h2 { margin: 0 0 10px; font-size: clamp(23px, 2.8vw, 31px); line-height: 1.2; }
.mfk-contacto-seccion .section-intro { margin: 0 0 26px; color: var(--muted); font-size: 15.5px; }
.mfk-contacto-columna-datos {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #eff8f5;
}
.mfk-contacto-asunto {
  display: flex;
  margin: 0 0 22px;
  padding: 12px 16px;
  align-items: baseline;
  gap: 9px;
  border-radius: 12px;
  background: rgba(0, 184, 224, .09);
  color: #37474b;
  font-size: 14.5px;
  line-height: 1.5;
}
.mfk-contacto-asunto > span { color: var(--deep-cyan); }
.mfk-contacto-asunto strong { color: var(--ink); font-weight: 700; }

.mfk-contacto-pasos ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.mfk-contacto-pasos li + li { margin-top: 8px; }

@media (max-width: 900px) {
  .mfk-contacto-seccion { grid-template-columns: 1fr; gap: 34px; }
}

/* Quinto color de etiqueta de categoría. La hoja original solo trae cuatro
   (cyan, yellow, lime, sky) porque el diseño estático usaba cuatro categorías;
   las reales de la web son cinco. Este es el que faltaba, tomado del coral de
   la paleta para que no compita con los otros cuatro. */
.news-category-coral { background: rgba(240, 138, 106, .20); }

/* --- Selector de idioma ---------------------------------------------
   La zona de widgets de la barra superior. Se le dan tamaños mínimos para
   que el desplegable de cualquier plugin cumpla el objetivo táctil de 24 px
   y no descuadre la barra. */
.mfk-idioma { display: inline-flex; align-items: center; }
.mfk-idioma select,
.mfk-idioma .gt_selector,
.mfk-idioma button {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid rgba(39, 48, 57, .18);
  border-radius: 8px;
  background: #fffefa;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.mfk-idioma a { display: inline-flex; min-height: 24px; align-items: center; gap: 6px; }
.mfk-idioma ul { display: flex; margin: 0; padding: 0; gap: 10px; list-style: none; }
.mfk-idioma img { display: inline-block; width: auto; height: 14px; }

/* --- Reconocimientos ---------------------------------------------- */
/* --- Reconocimientos ------------------------------------------------
   Las tarjetas usan el maquetado del diseño original (.about-recognition-*).
   Aquí solo van los ajustes que hacen falta al generarlas desde el gestor:
   tarjetas sin logotipo, títulos enlazados y la banda de financiación. */

/* El panel del logotipo: más aire alrededor y esquinas más suaves, para que
   un logotipo con su propio fondo blanco no se lea como un recorte pegado
   sobre el azul. object-fit:contain garantiza que nunca se corta, sea cual
   sea la proporción del archivo que subáis. */
.about-recognition-logo {
  /* La hoja original monta el panel como rejilla con los ítems centrados, y
     ahí Chromium no resuelve los porcentajes de alto del logotipo: la imagen
     crecía a su alto natural y el overflow:hidden del panel se comía la parte
     de abajo. Con flex el alto del contenedor sí es definido y el tope del
     100% funciona. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 76px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #fffefa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
/* Este es el que recortaba los logotipos por abajo. La regla genérica
   img { height: auto } de más abajo se estaba imponiendo a la del panel, así
   que la imagen crecía hasta su alto natural y el overflow:hidden del panel
   se comía la parte inferior —justo lo que se veía en la Diputación. Se
   declara aquí con la especificidad suficiente para que no vuelva a pasar. */
.about-recognition-card .about-recognition-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* El logotipo ya trae su propio fondo (un cuadrado negro, por ejemplo). Se
   muestra a sangre, como una insignia, en lugar de flotar dentro de un panel
   claro que no le pega. */
.about-recognition-logo-propio {
  width: 76px;
  padding: 0;
  overflow: hidden;
  background: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.about-recognition-card .about-recognition-logo-propio img { width: 100%; max-width: none; object-fit: cover; }

/* Versión en blanco del logotipo: la tarjeta ya es oscura, así que el panel
   sobra. Sin caja, sin sombra y con algo más de ancho para compensar. */
.about-recognition-logo-blanco {
  width: 138px;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Sin logotipo, el año hace de ancla visual y ocupa el hueco de la imagen,
   para que la tarjeta no quede vacía por arriba junto a las que sí lo tienen. */
.about-recognition-card:not(:has(.about-recognition-logo)) > span {
  display: block;
  margin-bottom: 14px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

/* El título enlaza a su noticia cuando la hay. Hereda el color de la tarjeta
   y solo se subraya al pasar por encima o al recibir el foco. */
.about-recognition-card h3 a { color: inherit; text-decoration: none; }
.about-recognition-card h3 a:hover,
.about-recognition-card h3 a:focus-visible { text-decoration: underline; }

/* La banda de financiación pública va en su propia sección clara. */
.institutional-recognition .institutional-scroll { margin-inline: auto; }

/* --- Piezas sueltas ------------------------------------------------ */
.guide-hero-visual img,
.hero-visual img,
.aula-hero-visual img { display: block; width: 100%; height: auto; border-radius: 22px; }

.aula-hero-volver { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--deep-cyan); font-size: 14px; font-weight: 650; }
.legal-actualizado { color: var(--muted); font-size: 14px; }
.brand-texto { color: var(--ink); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.mfk-portada-contenido { padding-top: 56px; padding-bottom: 20px; }
.neuro-suscripcion { padding: 56px 7.1% 80px; }
.neuro-suscripcion h2 { margin: 0 0 10px; font-size: clamp(23px, 2.8vw, 31px); }
.footer-widget { max-width: 1320px; margin: 0 auto 24px; }
.mfk-paginas-internas { max-width: 720px; margin: 30px auto; padding: 0 7.1%; font-size: 14.5px; }

.mfk-busqueda { max-width: 520px; margin-top: 20px; }
.mfk-busqueda label { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 650; }
.mfk-busqueda-fila { display: flex; gap: 8px; }
.mfk-busqueda input[type="search"] {
  flex: 1;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(39, 48, 57, .18);
  border-radius: 12px;
  background: #fffefa;
  font-family: inherit;
  font-size: 16px;
}
.mfk-busqueda button {
  min-height: 52px;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--deep-cyan);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* --- Clases de los patrones de bloques ----------------------------- */
.mfk-seccion { padding: 56px 0; text-align: center; }
.mfk-paso-num { margin: 0 0 8px; color: var(--deep-cyan); font-size: 15px; font-weight: 750; letter-spacing: .06em; }
.mfk-pasos, .mfk-areas { gap: 26px; }
.mfk-areas .wp-block-column,
.mfk-pasos .wp-block-column {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffefa;
}
.mfk-cta-bloque {
  margin: 44px auto;
  padding: 34px;
  border-radius: 22px;
  background: #eff8f5;
  text-align: center;
}
.mfk-nota-contexto { color: var(--muted); font-size: 13.5px; line-height: 1.65; }

/* ---------------------------------------------------------------
   Imágenes dentro de rejillas
   En WordPress las imágenes llevan width y height reales (a diferencia
   de la versión estática, que no declaraba ninguno). Eso es bueno para
   el CLS, pero significa que sin estas reglas una foto de 1.120 px
   desborda su tarjeta en móvil.
   --------------------------------------------------------------- */

img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

.news-grid > *,
.neuro-edition-grid > *,
.news-related-grid > *,
.resource-grid > *,
.testimonial-grid > *,
.impact-grid > *,
.solutions-list > *,
.mfk-premios-lista > * { min-width: 0; }

.news-card,
.neuro-edition-card,
.resource-card,
.testimonial-card,
.solutions-card { overflow: hidden; }

.news-card-photo,
.neuro-edition-image,
.solutions-card-image,
.testimonial-featured-video,
.neuro-article-cover,
.guide-hero-visual,
.hero-visual,
.aula-hero-visual { display: block; width: 100%; overflow: hidden; }

.news-card-photo img,
.neuro-edition-image img,
.solutions-card-image img,
.testimonial-featured-video img,
.neuro-article-cover img,
.news-card-image { display: block; width: 100%; height: auto; }

.mfk-contenido img,
.mfk-contenido video,
.mfk-contenido iframe { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------
   Cabecera en pantallas estrechas
   El logotipo, el botón de contacto y el de menú compiten por muy poco
   espacio. Por debajo de 520 px el botón «¿Hablamos?» se retira: la
   misma acción está, más grande, dentro del propio menú.
   --------------------------------------------------------------- */

@media (max-width: 1080px) {
  .site-header { height: auto; min-height: 76px; padding: 12px 7%; gap: 12px; }
  .brand-logo { width: 160px; }
}
@media (max-width: 520px) {
  .site-header { padding: 10px 6%; }
  .brand-logo { width: 132px; }
  .header-cta { display: none; }
  .mfk-menu-boton { padding: 10px 14px; }
  .site-social-topbar { padding: 8px 6%; }
  .site-social-topbar > span { display: none; }
  .site-social-topbar .social-links { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   Menú de escritorio con el marcado de WordPress
   El diseño original llevaba enlaces sueltos dentro de <nav>, pero
   wp_nav_menu() siempre genera <ul><li><a>. Sin estas reglas la
   navegación se ve como una lista con viñetas.
   --------------------------------------------------------------- */

.desktop-nav ul,
.desktop-nav-lista {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 37px;
  list-style: none;
}
.desktop-nav li { margin: 0; }
.desktop-nav a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

@media (max-width: 1240px) {
  .desktop-nav ul, .desktop-nav-lista { gap: 24px; }
}

/* ---------------------------------------------------------------
   Red de seguridad para los iconos
   Refuerza las dimensiones que ya llevan los propios SVG, para que
   nunca dependan solo de la hoja de estilos.
   --------------------------------------------------------------- */

svg { max-width: 100%; }
.social-link svg { width: 18px; height: 18px; fill: currentColor; }
.social-link {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Selector de idioma en la barra superior
   El widget del plugin de traducción se coloca en la zona «mfk-idioma»,
   entre el rótulo y las redes. Ese widget trae un ancho fijo de 173 px,
   y a 320 px no cabe en la misma línea que los iconos: la barra se salía
   15 px por la derecha. Dejamos que reparta en varias filas y que el
   desplegable nunca supere el ancho disponible.
   --------------------------------------------------------------- */

.site-social-topbar { flex-wrap: wrap; row-gap: 8px; }
.mfk-idioma,
.mfk-idioma .gtranslate_wrapper,
.mfk-idioma .gt_switcher { max-width: 100%; }

@media (max-width: 520px) {
  .site-social-topbar { justify-content: center; }
  .mfk-idioma { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   Filtros de Actualidad
   Ahora son enlaces a cada archivo de categoría, no botones que
   escondían tarjetas con JavaScript. La hoja original los pintaba
   como <button>; estas reglas les devuelven el mismo aspecto siendo
   <a>, y añaden el foco visible que un enlace necesita.
   --------------------------------------------------------------- */

.news-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.news-filter:hover { border-color: rgba(46, 62, 59, .34); }
.news-filter:focus-visible { outline: 3px solid var(--deep-cyan, #1c7a80); outline-offset: 2px; }
.news-filter.is-active:hover { border-color: var(--deep-cyan, #1c7a80); }

/* ---------------------------------------------------------------
   Portada de Actualidad y de las categorías
   La hoja original dibujaba este hero con un collage de fotos a la
   derecha y 665 px de alto mínimo. Las plantillas del gestor no llevan
   collage, así que la segunda columna quedaba vacía y sobraba mucho
   aire antes de los filtros: se veía sobre todo en los archivos de
   categoría, donde el titular es corto.
   --------------------------------------------------------------- */

.news-hero {
  min-height: 0;
  padding-bottom: 62px;
  grid-template-columns: minmax(0, 860px);
}

/* ---------------------------------------------------------------
   Cabecera de página sin imagen
   La hoja original monta esta cabecera en dos columnas —texto e
   imagen— con 625 px de alto mínimo. Casi todas las páginas del
   gestor no llevan imagen destacada, así que la segunda columna
   quedaba vacía y se abría un hueco enorme antes del contenido:
   se veía sobre todo en Contacto, donde el formulario aparecía
   media pantalla más abajo de lo necesario. Cuando sí hay imagen
   —Casos reales— la cabecera se queda como estaba.
   --------------------------------------------------------------- */

.guide-hero:not(:has(.guide-hero-visual)) {
  min-height: 0;
  padding-bottom: 56px;
  grid-template-columns: minmax(0, 860px);
}

/* ---------------------------------------------------------------
   Pie de página en pantallas estrechas
   Las columnas del pie estaban declaradas como «1fr», y en CSS Grid
   una columna 1fr nunca baja del ancho mínimo de su contenido. La
   fila de ocho iconos de redes mide 349 px de mínimo, así que a
   390 px la columna se plantaba en 405 px: los enlaces, la dirección
   y las propias redes se salían por la derecha y se cortaban —el
   teléfono desaparecía—. Con minmax(0, 1fr) la columna sí puede
   encoger, y dejando que las redes se repartan en dos filas ya cabe
   todo sin recortes.
   --------------------------------------------------------------- */

.global-footer-cuerpo {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}
.global-footer .social-links { flex-wrap: wrap; }

@media (max-width: 1080px) {
  .global-footer-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .global-footer-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------
   Contacto y tablas en pantallas estrechas
   Mismo motivo que en el pie: una columna «1fr» no baja del ancho
   mínimo de su contenido, y los campos del formulario dejaban la
   columna en 406 px dentro de una pantalla de 390. Con minmax(0, 1fr)
   encoge.
   Las tablas de la política de cookies las genera el plugin y son
   mucho más anchas que un móvil: se envuelven en un contenedor que
   se desplaza solo por dentro, que es lo que pide el criterio 1.4.10
   de WCAG. Lleva tabindex para poder desplazarla también con teclado.
   --------------------------------------------------------------- */

.mfk-contacto-seccion { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); }

@media (max-width: 900px) {
  .mfk-contacto-seccion { grid-template-columns: minmax(0, 1fr); }
}

.mfk-tabla {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mfk-tabla:focus-visible { outline: 3px solid var(--deep-cyan, #1c7a80); outline-offset: 2px; }
.mfk-tabla table { min-width: 100%; }

/* ---------------------------------------------------------------
   Kidsionario
   Un glosario se lee y se rastrea, no se explora: por eso las
   definiciones van abiertas —no en acordeón, como las preguntas
   frecuentes— y el orden es alfabético. Quien llega ya trae la
   palabra en la cabeza; lo que necesita es encontrarla rápido y
   leerla entera.
   --------------------------------------------------------------- */

.kids-seccion {
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 7.1% 20px;
}

/* --- Buscador e índice A–Z --- */

.kids-buscador {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 34px;
  padding: 18px 0 14px;
  background: linear-gradient(var(--papel, #fffefa) 78%, rgba(255, 254, 250, 0));
}

.kids-buscador-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  padding: 11px 16px;
  border: 1px solid rgba(46, 62, 59, .16);
  border-radius: 999px;
  background: #fffefa;
}
.kids-buscador-campo:focus-within {
  border-color: var(--deep-cyan, #1c7a80);
  box-shadow: 0 0 0 3px rgba(28, 122, 128, .14);
}
.kids-buscador-campo input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink, #273039);
  font-family: inherit;
  font-size: 16px;
}
.kids-buscador-campo input:focus { outline: none; }

.kids-abecedario {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
}
.kids-abecedario a {
  display: inline-flex;
  min-width: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(46, 62, 59, .14);
  border-radius: 9px;
  background: #fffefa;
  color: var(--deep-cyan, #1c7a80);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.kids-abecedario a:hover { border-color: var(--deep-cyan, #1c7a80); }
.kids-abecedario a:focus-visible {
  outline: 3px solid var(--deep-cyan, #1c7a80);
  outline-offset: 2px;
}
/* Sin resultados en esa letra: se apaga, pero no desaparece, para que
   el índice no baile mientras se escribe. */
.kids-abecedario a.is-apagada {
  opacity: .3;
  pointer-events: none;
}

.kids-estado {
  margin: 14px 0 0;
  color: var(--muted, #526164);
  font-size: 14.5px;
}

/* --- Lista de términos --- */

.kids-letra { margin-bottom: 42px; scroll-margin-top: 120px; }

.kids-letra-titulo {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(46, 62, 59, .12);
  color: var(--deep-cyan, #1c7a80);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .04em;
}

.kids-terminos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 16px;
}

.kids-termino {
  padding: 22px 24px;
  border: 1px solid rgba(46, 62, 59, .12);
  border-radius: 15px;
  background: #fffefa;
  scroll-margin-top: 130px;
}
.kids-termino.es-destacado {
  border-color: var(--deep-cyan, #1c7a80);
  box-shadow: 0 0 0 3px rgba(28, 122, 128, .16);
}

.kids-termino-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.kids-termino-cabeza h3 {
  margin: 0;
  color: var(--ink, #273039);
  font-size: 20px;
  line-height: 1.25;
}

.kids-bloque {
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef7f6;
  color: #3c6f72;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.kids-definicion { color: var(--muted, #526164); font-size: 15.5px; line-height: 1.65; }
.kids-definicion p { margin: 0 0 10px; }
.kids-definicion p:last-child { margin-bottom: 0; }

/* --- Sin resultados --- */

.kids-vacio {
  padding: 34px 24px;
  border: 1px dashed rgba(46, 62, 59, .22);
  border-radius: 15px;
  text-align: center;
}
.kids-vacio strong { display: block; margin: 10px 0 6px; color: var(--ink, #273039); font-size: 18px; }
.kids-vacio p { margin: 0 0 14px; color: var(--muted, #526164); }
.kids-vacio a { color: var(--deep-cyan, #1c7a80); font-weight: 650; }

/* --- Cierre --- */

.kids-cierre {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 7.1% 84px;
  text-align: center;
}
.kids-cierre h2 { margin: 8px 0 10px; color: var(--ink, #273039); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; }
.kids-cierre > p { margin: 0 auto 22px; max-width: 52ch; color: var(--muted, #526164); }

@media (max-width: 760px) {
  .kids-seccion { padding: 40px 7% 16px; }
  .kids-buscador { position: static; }
  .kids-terminos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kids-letra, .kids-termino { scroll-behavior: auto; }
}


/*
 * Capturas del propio juego dentro de «Soluciones».
 *
 * Las fotos de esta página se recortan para llenar la columna, y está bien:
 * en una foto suele sobrar fondo. En una captura de pantalla no. Ahí el
 * encuadre ES el contenido —el marcador, las vallas con la marca, las manos
 * del portero—, y recortarla por los lados es tirar justo lo que se quiere
 * enseñar. Además la altura de esa columna la marca el texto de al lado, que
 * cambia con cada tamaño de pantalla: sin esto, la misma captura salía casi
 * cuadrada en el móvil y vertical en la tablet.
 *
 * Con «es-captura» manda la imagen: la caja adopta su proporción 16:9 y se
 * centra en la fila en vez de estirarse. Se ve entera en cualquier pantalla.
 */
.solution-detail-media.es-captura {
  align-self: center;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.solution-detail-media.es-captura img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
}

/*
 * En una captura, el rótulo deja de ir encima y pasa a ser pie de foto: la
 * imagen mide poco de alto y cualquier cosa superpuesta se comía las manos
 * del portero, que es lo que se quiere enseñar.
 */
.solution-detail-media.es-captura .solution-detail-note {
  position: static;
  margin: 11px 2px 0;
  padding: 0;
  background: none;
  color: #5f6e71;
  font-weight: 600;
  text-align: left;
}

/*
 * Lo mismo en «Áreas de trabajo»: ahí el hueco es cuadrado y una captura
 * apaisada perdería el cartel del objetivo y el marcador, que es justo lo
 * que explica la actividad.
 */
.area-detail-photo.es-captura {
  align-self: center;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

/*
 * El rótulo de la foto de «Para quién es» sale del recuadro y se lee debajo,
 * como pie de foto. Con la foto anterior no molestaba, pero ahora ahí hay
 * cuatro personas y la pastilla blanca tapaba a una de ellas: justo lo que
 * el bloque quiere enseñar es el equipo entero.
 */
.audience-story > .audience-photo-note {
  position: static;
  display: block;
  width: 94%;
  margin: 11px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #5f6e71;
  font-size: 12.5px;
  font-weight: 620;
}

/*
 * Cabecera de «Quiénes somos» con una foto vertical.
 *
 * La original mide 720 × 1600: es altísima. La caja de la cabecera es
 * apaisada y cambia mucho de forma según la pantalla (de 0,63 en tablet a
 * 1,23 en monitor grande), así que recortarla dejaba fuera media escena y
 * además cortaba distinto en cada sitio.
 *
 * La caja se hace cuadrada, y la imagen ya viene montada con la foto entera
 * centrada sobre un fondo desenfocado de ella misma. Así se ve completa en
 * cualquier pantalla, sin franjas vacías y sin recortes que cambian solos.
 */
.about-hero-visual.es-vertical {
  height: auto;
  aspect-ratio: 1 / 1;
}

/*
 * La tarjeta «Nuestra fórmula favorita» baja de la foto de portada.
 *
 * Iba flotando sobre la esquina inferior izquierda, y ahí tapaba las gafas
 * verdes justo cuando la foto pasó a ser real. Debajo dice lo mismo, se lee
 * mejor y la foto se ve entera. La columna deja de tener alto fijo y se
 * apila: primero la foto, después la tarjeta.
 */
.hero-visual.con-tarjeta {
  height: auto;
  flex-direction: column;
}

.hero-visual.con-tarjeta > .floating-card {
  position: static;
  align-self: center;
  margin-top: 15px;
}

/*
 * Y lo mismo en «Nuestra historia»: captura apaisada dentro de un hueco
 * casi cuadrado. La caja se adapta a los 16:9 y el rótulo pasa debajo.
 */
.about-story-photo.es-captura {
  align-self: center;
  min-height: 0;
  overflow: visible;
}

.about-story-photo.es-captura img {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 24px 88px 24px 24px;
}

.about-story-photo.es-captura > span {
  position: static;
  margin: 11px 2px 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #5f6e71;
  text-align: left;
}

/*
 * Los dos rótulos del collage de «¿Y cómo funciona?» salen de encima de las
 * fotos y pasan a leerse debajo.
 *
 * «A su ritmo. Siempre.» tapaba las manos con los mandos y «Cada avance
 * cuenta» se comía la esquina de las gafas verdes. Con fotos reales eso ya
 * no es decoración sobre un fondo cualquiera: es tapar lo que se quiere
 * enseñar. Mismo criterio que en la portada, en «Para quién es» y en las
 * capturas de Soluciones.
 *
 * Los rótulos han salido de dentro de cada foto y ahora cuelgan del propio
 * collage, que crece para hacerles sitio sin mover ninguna de las dos fotos
 * (por eso la secundaria compensa con su «bottom»). En pantalla grande cada
 * uno se lee bajo su foto; a partir de tablet la foto secundaria ocupa todo
 * el ancho de abajo, así que se apilan los dos en la esquina inferior.
 */
.experience-collage.es-rotulos-fuera { min-height: 598px; }

.experience-collage.es-rotulos-fuera .experience-photo-secondary { bottom: 50px; }

.experience-collage.es-rotulos-fuera > .photo-tag {
  left: 2%;
  right: auto;
}

.experience-collage.es-rotulos-fuera > .photo-tag-main {
  top: 401px;
  bottom: auto;
}

.experience-collage.es-rotulos-fuera > .photo-tag-secondary {
  top: auto;
  bottom: 4px;
  right: 0;
  left: auto;
  border: 1px solid rgba(39, 48, 57, .1);
  background: #fffefa;
}

@media (max-width: 1080px) {
  .experience-collage.es-rotulos-fuera { min-height: 575px; }
  .experience-collage.es-rotulos-fuera .experience-photo-secondary { bottom: 104px; }
  .experience-collage.es-rotulos-fuera > .photo-tag-main { top: auto; bottom: 52px; }
  .experience-collage.es-rotulos-fuera > .photo-tag-secondary { right: auto; left: 2%; }
}

@media (max-width: 760px) {
  .experience-collage.es-rotulos-fuera { min-height: 505px; }
}

/*
 * Proyecto con institución dentro de «Testimonios».
 *
 * El bloque de envejecimiento activo con el Ayuntamiento de Dos Hermanas no
 * es un testimonio de familia: es un proyecto con una administración, y va
 * dirigido a otro lector —ayuntamientos, centros de día, residencias—. Por
 * eso reutiliza la pieza destacada pero con el vídeo al otro lado y con un
 * titular de verdad (h3) en lugar de una cita, que es lo que Google lee.
 */
.testimonial-featured.es-institucional {
  margin-top: 17px;
  grid-template-columns: .95fr 1.05fr;
}

.testimonial-featured.es-institucional .testimonial-featured-video { order: 2; }

/*
 * La miniatura de este vídeo es 16:9 (1280 × 720) y la de los testimonios
 * es 4:3. Con «height: 100%» sobre una caja de alto indefinido, el navegador
 * usa el alto natural de la imagen: la de 4:3 llenaba la columna y esta se
 * quedaba a media altura, dejando un rectángulo vacío debajo. Se ancla a los
 * cuatro lados para que llene siempre, sea cual sea la proporción.
 */
.testimonial-featured.es-institucional .testimonial-featured-video > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* Anclada a la izquierda: ahí están el escudo del Ayuntamiento y los dos
     logotipos, que es la prueba de quién está detrás del proyecto. */
  object-position: 12% center;
}

.testimonial-featured.es-institucional h3 {
  max-width: 460px;
  margin: 12px 0 0;
  color: var(--ink);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 620;
  line-height: 1.26;
  letter-spacing: -.7px;
}

.testimonial-featured.es-institucional .testimonial-featured-copy > p {
  max-width: 470px;
  margin: 13px 0 0;
}

.testimonial-featured.es-institucional .testimonial-featured-copy > p strong {
  color: var(--ink);
  font-weight: 700;
}

.testimonial-featured.es-institucional .testimonial-featured-footer { margin-top: 21px; }

@media (max-width: 760px) {
  /* La regla base de móvil apila en una columna, pero «.es-institucional»
     tiene más peso y la anulaba: aquí se repite con el mismo peso. */
  .testimonial-featured.es-institucional { grid-template-columns: 1fr; }
  .testimonial-featured.es-institucional .testimonial-featured-video { order: 0; }
  .testimonial-featured.es-institucional h3 { max-width: none; }
  .testimonial-featured.es-institucional .testimonial-featured-copy > p { max-width: none; font-size: 13.5px; }
}


/* --- 3 sept 2026: ajustes de movil ---------------------------- */
/* El boton del widget de accesibilidad se montaba sobre el texto a media
   altura. En movil baja a la esquina inferior izquierda, fuera de la lectura. */
@media (max-width: 760px) {
  #pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    top: auto !important;
    bottom: 12px !important;
  }
  #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
    top: auto !important;
    bottom: 0 !important;
  }
  #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 0 10px 0 0;
  }
}

/* Barra de consentimiento: ocupaba casi media pantalla en movil. */
@media (max-width: 760px) {
  #cookie-law-info-bar {
    padding: 11px 14px 13px !important;
    max-height: 42vh;
    overflow-y: auto;
  }
  #cookie-law-info-bar .cli-bar-container { gap: 9px; }
  #cookie-law-info-bar .cli-bar-message {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
  }
  #cookie-law-info-bar .cli-bar-btn_container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  #cookie-law-info-bar .cli-plugin-button,
  #cookie-law-info-bar .cli_action_button {
    margin: 0 !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
  }
}


/* Mientras la barra de consentimiento esta visible, el boton sube.
   Si el navegador no soporta :has(), simplemente se queda abajo. */
@media (max-width: 760px) {
  body:has(#cookie-law-info-bar:not([style*="none"])) #pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    bottom: 176px !important;
  }
}