/* =========================================================================
   Fundación Psicólogos Unidos Colombia — hoja de estilos del sitio
   -------------------------------------------------------------------------
   Se carga después de tokens.css, que define TODAS las variables (color,
   tipografía, forma, elevación, espaciado y rejilla). Este archivo no
   declara variables globales: solo las usa.

   Estándares: CSS del W3C en su versión vigente, por módulos
   (https://www.w3.org/TR/css/); Google HTML/CSS Style Guide; WCAG 2.2 AA;
   Material 3 con la actualización Material 3 Expressive (README.md,
   «Estándares de referencia»).

   Los colores claros de la marca (turquesa, amarillo, coral, lavanda, azul
   claro y menta) no tienen contraste suficiente como texto: se usan solo en
   fondos, bordes y decoración.

   Índice (de lo más general a lo más concreto):
   1. Fuentes
   2. Base: etiquetas HTML sin clase (cuerpo, títulos, enlaces, foco)
   3. Layout: contenedor, secciones y rejillas de página
   4. Componentes
      4.1 Íconos
      4.2 Botones y enlaces
      4.3 Encabezado y menú
      4.4 Pie de página, aviso de crisis y aviso de cookies
      4.5 Bloques de contenido (portada, tarjetas, testimonios, pasos…)
      4.6 Componentes de páginas concretas (psicólogos, transparencia,
          blog, donar, nosotros, inicio, contacto)
   5. Utilidades (texto solo para lectores de pantalla, enlace para saltar
      al contenido, marcador de contenido pendiente…)
   6. Movimiento reducido e impresión
   ========================================================================= */

/* 1. Fuentes ------------------------------------------------------------
   Nunito (licencia SIL OFL, ver /fonts/OFL.txt), solo subconjunto latino y
   solo los dos pesos que pide el manual de marca: Regular (400) y Bold (700).
   Sustituye a PP Pangram Sans Rounded, cuya licencia no permite alojarla. */
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/nunito-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/nunito-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Base ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Deja espacio para que el botón flotante de WhatsApp nunca tape el foco */
  scroll-padding-bottom: var(--pu-espacio-96);
  scroll-padding-top: var(--pu-espacio-16);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--pu-comp-pagina-fondo);
  color: var(--pu-comp-pagina-texto);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: var(--md-sys-typescale-body-large-weight);
  line-height: var(--md-sys-typescale-body-large-line-height);
  margin: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--pu-comp-titulos);
  font-family: var(--md-ref-typeface-brand);
  font-weight: var(--md-ref-typeface-weight-bold);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  margin: 0 0 var(--pu-espacio-sm);
  text-wrap: balance;
}

h1 {
  font-size: var(--md-sys-typescale-headline-large-size);
}

h2 {
  font-size: var(--md-sys-typescale-headline-small-size);
}

h3 {
  font-size: var(--md-sys-typescale-title-large-size);
}

h4 {
  font-size: var(--md-sys-typescale-title-medium-size);
}

p,
ul,
ol,
dl,
blockquote,
figure {
  margin: 0 0 var(--pu-espacio-sm);
}

ul,
ol {
  padding-left: var(--pu-espacio-20);
}

img,
svg,
picture {
  display: block;
  height: auto;
  max-width: 100%;
}

a {
  color: var(--pu-comp-enlace);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: var(--md-ref-typeface-weight-bold);
}

/* Datos de contacto: sin cursiva, con la misma separación que un párrafo */
address {
  font-style: normal;
  margin: 0 0 var(--pu-espacio-sm);
}

address > :last-child {
  margin-bottom: 0;
}

/* Foco siempre visible y con buen contraste */
:focus-visible {
  border-radius: var(--md-sys-shape-corner-extra-small);
  outline: 3px solid var(--pu-comp-foco);
  outline-offset: 3px;
}

/* 3. Layout ----------------------------------------------------------- */

/* Contenedor: centra el contenido, con el ancho máximo del sitio y los
   márgenes laterales de M3 (16 px en la clase compacta, 24 px en las
   demás; ver --pu-rejilla-margen en tokens.css) */
.contenedor {
  margin-inline: auto;
  max-width: var(--pu-ancho-max);
  padding-inline: var(--pu-rejilla-margen);
  width: 100%;
}

/* Rejilla de página de M3 ------------------------------------------------
   Clases de ventana de M3, de menor a mayor (mobile-first):
     compacta   < 600 px    4 columnas
     mediana    600-839 px  8 columnas   @media (min-width: 37.5rem)
     expandida  ≥ 840 px   12 columnas   @media (min-width: 52.5rem)
   El número de columnas, el margen y la separación cambian solos en
   tokens.css; aquí solo se decide cuántas columnas ocupa cada elemento.

   Rejillas de elementos iguales (.rejilla, .equipo y la franja de
   confianza): cada elemento ocupa --pu-rejilla-tramo columnas.
     .rejilla                    4 / 4 / 4   → 1, 2 y 3 por fila
     .rejilla.rejilla-amplia     4 / 8 / 6   → 1, 1 y 2 por fila (elementos anchos)
     .rejilla.rejilla-compacta   4 / 4 / 3   → 1, 2 y 4 por fila (elementos estrechos)
   Otras rejillas de página: portada (.portada-rejilla), texto e imagen
   (.texto-imagen), sección de texto (.rejilla-texto) y pie (.pie-rejilla). */
.rejilla,
.equipo,
.confianza ul,
.portada-rejilla,
.texto-imagen,
.pie-rejilla {
  column-gap: var(--pu-rejilla-separacion);
  display: grid;
  grid-template-columns: repeat(var(--pu-rejilla-columnas), minmax(0, 1fr));
}

.rejilla,
.equipo {
  --pu-rejilla-tramo: 4;
  row-gap: var(--pu-rejilla-separacion);
}

.rejilla > *,
.equipo > *,
.confianza li {
  grid-column: span var(--pu-rejilla-tramo);
}

/* Franja de confianza: una debajo de otra hasta la clase expandida */
.confianza ul {
  --pu-rejilla-tramo: 4;
  row-gap: var(--pu-espacio-sm);
}

@media (min-width: 37.5rem) {
  .rejilla-amplia {
    --pu-rejilla-tramo: 8;
  }

  .confianza ul {
    --pu-rejilla-tramo: 8;
  }
}

@media (min-width: 52.5rem) {
  .rejilla-amplia {
    --pu-rejilla-tramo: 6;
  }

  .rejilla-compacta {
    --pu-rejilla-tramo: 3;
  }

  .confianza ul {
    --pu-rejilla-tramo: 4;
  }
}

/* Portada y bloque de texto e imagen: una columna debajo de otra; en la
   clase expandida, mitad y mitad (6 + 6 columnas) */
.portada-rejilla,
.texto-imagen {
  align-items: center;
  row-gap: var(--pu-espacio-lg);
}

.portada-rejilla {
  position: relative;
  z-index: 1;
}

.portada-rejilla > *,
.texto-imagen > * {
  grid-column: 1 / -1;
}

@media (min-width: 52.5rem) {
  .portada-rejilla > *,
  .texto-imagen > * {
    grid-column: span 6;
  }
}

/* Pie de página: en la clase mediana, los datos de la Fundación arriba y
   Contacto y Mapa del sitio lado a lado (4 + 4); en la expandida, tres
   columnas iguales (4 + 4 + 4) */
.pie-rejilla {
  row-gap: var(--pu-espacio-lg);
}

.pie-rejilla > * {
  grid-column: 1 / -1;
}

@media (min-width: 37.5rem) {
  .pie-rejilla > :not(:first-child) {
    grid-column: span 4;
  }
}

@media (min-width: 52.5rem) {
  .pie-rejilla > :first-child {
    grid-column: span 4;
  }
}

/* Ancho de lectura: líneas de texto de no más de unos 75 caracteres */
.texto-legible {
  max-width: var(--pu-ancho-texto);
}

/* Sección de texto (.contenedor.rejilla-texto): hasta la clase mediana,
   título y texto uno debajo del otro; en la expandida, el título (h2)
   ocupa 4 columnas a la izquierda y el contenido las 8 de la derecha, para
   usar todo el ancho sin líneas de texto demasiado largas. */
@media (min-width: 52.5rem) {
  .rejilla-texto {
    align-items: start;
    column-gap: var(--pu-rejilla-separacion);
    display: grid;
    grid-template-columns: repeat(var(--pu-rejilla-columnas), minmax(0, 1fr));
  }

  .rejilla-texto > * {
    grid-column: 5 / -1;
  }

  .rejilla-texto > h2:first-child {
    font-size: var(--md-sys-typescale-headline-medium-size);
    grid-column: 1 / span 4;
    grid-row: 1 / span 40;
  }

  /* Dentro de la columna de contenido, los pasos van de dos en dos */
  .rejilla-texto .pasos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Secciones de página */
.seccion {
  padding-block: var(--pu-espacio-xl);
}

.seccion-alterna {
  background: var(--pu-comp-seccion-alterna-fondo);
}

.seccion-destacada {
  background: var(--md-sys-color-secondary-container);
}

.seccion-intro {
  margin-bottom: var(--pu-espacio-md);
  max-width: var(--pu-ancho-texto);
}

.seccion-intro p {
  font-size: var(--md-sys-typescale-title-medium-size);
}

.seccion-pie {
  margin-top: var(--pu-espacio-md);
}

/* Página de redirección y 404 */
.pagina-minima {
  display: grid;
  min-height: 60vh; /* Excepción: proporción de la ventana, no un espacio */
  padding: var(--pu-espacio-lg) var(--pu-espacio-16);
  place-items: center;
  text-align: center;
}

/* 4. Componentes ------------------------------------------------------ */

/* 4.1 Íconos */
.icono {
  fill: currentcolor;
  flex: none;
  height: 1.25em; /* Excepción: en em, el ícono sigue el tamaño del texto vecino */
  width: 1.25em;
}

/* Íconos de trazo (Lucide): sin relleno, el color sale de 'color' */
.icono-trazo {
  fill: none;
  stroke: currentcolor;
}

/* 4.2 Botones y enlaces */
.boton {
  align-items: center;
  background-color: var(--md-sys-color-primary);
  border: 2px solid var(--md-sys-color-primary);
  border-radius: var(--pu-comp-boton-forma);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-8);
  justify-content: center;
  line-height: 1.2;
  min-height: var(--pu-area-tactil);
  overflow-wrap: anywhere;
  padding: var(--pu-espacio-12) var(--pu-espacio-20);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

/* Botón con contorno (M3 «outlined button») */
.boton-secundario {
  background-color: transparent;
  color: var(--md-sys-color-primary);
}

/* Botón tonal (M3 «filled tonal button»): acción importante pero no la
   principal de la página */
.boton-tonal {
  background-color: var(--md-sys-color-secondary-container);
  border-color: var(--md-sys-color-secondary-container);
  color: var(--pu-comp-pagina-texto);
}

/* Capas de estado de M3: al pasar el puntero, enfocar con el teclado o
   presionar, se superpone el color del contenido (currentcolor) con la
   opacidad de --md-sys-state-* (ver tokens.css) */
.boton:hover,
.menu-boton:hover,
.menu-enlace:hover,
.nav a:hover,
.whatsapp-flotante:hover,
.redes a:hover {
  background-image: linear-gradient(var(--pu-capa-hover) 0 0);
}

.boton:focus-visible,
.menu-boton:focus-visible,
.menu-enlace:focus-visible,
.nav a:focus-visible,
.whatsapp-flotante:focus-visible,
.redes a:focus-visible {
  background-image: linear-gradient(var(--pu-capa-focus) 0 0);
}

.boton:active,
.menu-boton:active,
.menu-enlace:active,
.nav a:active,
.whatsapp-flotante:active,
.redes a:active {
  background-image: linear-gradient(var(--pu-capa-pressed) 0 0);
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-sm);
  margin-top: var(--pu-espacio-md);
}

/* Botones del mismo ancho, para pares de acciones que deben verse parejas
   (portada de Psicoterapia). Cada botón ocupa una columna fija de 18,5 rem,
   el ancho del más largo («Conoce a nuestros terapeutas»): van lado a lado
   si caben y, si no, uno debajo del otro con el mismo ancho. En rem, para
   que crezca con el texto. Si cambia el texto de un botón, revisa el ancho. */
.botones-iguales {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(100%, 18.5rem));
}

/* Enlace con flecha para 'Ver más' */
.enlace-flecha {
  align-items: center;
  display: inline-flex;
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-4);
  min-height: var(--pu-area-tactil);
}

.enlace-flecha::after {
  content: '→';
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.enlace-flecha:hover::after {
  transform: translateX(3px);
}

/* Icono pequeño de 'enlace externo' junto a enlaces que abren otra pestaña */
.externo {
  display: inline-block;
  height: 0.8em; /* Excepción: en em, sigue el tamaño del texto del enlace */
  margin-left: var(--pu-espacio-4);
  vertical-align: baseline;
  width: 0.8em;
}

/* Botón flotante de WhatsApp: siempre al alcance del pulgar */
.whatsapp-flotante {
  align-items: center;
  background-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-large);
  bottom: max(var(--pu-espacio-16), env(safe-area-inset-bottom));
  box-shadow: var(--md-sys-elevation-level3);
  color: var(--md-sys-color-on-primary);
  display: inline-flex;
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-8);
  min-height: var(--pu-espacio-56);
  padding: var(--pu-espacio-12) var(--pu-espacio-16);
  position: fixed;
  right: max(var(--pu-espacio-16), env(safe-area-inset-right));
  text-decoration: none;
  z-index: 40;
}

/* Mientras el aviso de cookies está abierto (clase con-aviso, ver main.js),
   la página reserva su alto (--pu-alto-aviso, medido por main.js) al
   final, y el desplazamiento con el teclado deja además un margen, para que
   el aviso no tape el contenido ni el foco (WCAG 2.4.11) */
html:has(.con-aviso) {
  scroll-padding-bottom: calc(var(--pu-alto-aviso) + var(--pu-espacio-16));
}

.con-aviso {
  padding-bottom: var(--pu-alto-aviso);
}

/* Mientras el aviso de cookies está abierto, el botón flotante se oculta (sin moverlo, para no
   provocar saltos de diseño); el botón de WhatsApp de la portada sigue visible */
.con-aviso .whatsapp-flotante {
  visibility: hidden;
}

/* En pantallas muy estrechas (menos de 360 px, por debajo de la clase
   compacta de M3) el botón muestra solo el ícono (el nombre accesible no
   cambia). Es un ajuste del componente, no un punto de quiebre de la rejilla. */
@media (max-width: 22.4375rem) {
  .whatsapp-flotante {
    justify-content: center;
    min-width: var(--pu-espacio-56);
    padding: var(--pu-espacio-12);
  }

  .whatsapp-flotante-texto {
    clip-path: inset(50%);
    height: 1px; /* Excepción: técnica para ocultar a la vista sin ocultar a lectores */
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

.whatsapp-flotante .icono {
  height: var(--pu-espacio-24);
  width: var(--pu-espacio-24);
}

.whatsapp-flotante:focus-visible {
  box-shadow: 0 0 0 6px var(--md-sys-color-on-surface);
  outline-color: var(--pu-comp-foco-sobre-color);
}

/* 4.3 Encabezado y menú */
.encabezado {
  background: var(--pu-comp-encabezado-fondo);
  border-bottom: 1px solid var(--pu-comp-borde);
  position: relative;
  z-index: 30;
}

.encabezado-barra {
  align-items: center;
  display: flex;
  gap: var(--pu-espacio-sm);
  justify-content: space-between;
  min-height: var(--pu-espacio-72);
}

/* Área de seguridad del logo: 16 px arriba y abajo, casi el doble de la
   altura del punto de la «ü» (9 px con el logo de 57 px). A los lados la
   dan los márgenes de la página (16 o 24 px). El logo no cambia de tamaño:
   la barra crece lo necesario. */
.encabezado-logo {
  display: inline-flex;
  padding: var(--pu-espacio-16) 0;
}

.encabezado-logo img {
  height: auto;
  width: clamp(140px, 30vw, 180px); /* Excepción: tamaño del logo */
}

.menu-boton,
.menu-enlace {
  align-items: center;
  background-color: transparent;
  border: 2px solid var(--md-sys-color-primary);
  border-radius: var(--pu-comp-boton-forma);
  color: var(--md-sys-color-primary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-8);
  min-height: var(--pu-area-tactil);
  min-width: var(--pu-area-tactil);
  padding: var(--pu-espacio-8) var(--pu-espacio-16);
  text-decoration: none;
}

.menu-boton[hidden],
.menu-enlace[hidden] {
  display: none;
}

.menu-boton .icono-cerrar {
  display: none;
}

.menu-boton[aria-expanded='true'] .icono-abrir {
  display: none;
}

.menu-boton[aria-expanded='true'] .icono-cerrar {
  display: block;
}

.nav {
  display: none;
  padding-bottom: var(--pu-espacio-md);
}

.nav.abierta {
  display: block;
}

.nav ul {
  display: grid;
  gap: var(--pu-espacio-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  align-items: center;
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--pu-comp-pagina-texto);
  display: flex;
  font-weight: var(--md-ref-typeface-weight-bold);
  min-height: var(--pu-area-tactil);
  padding: var(--pu-espacio-8) var(--pu-espacio-12);
  text-decoration: none;
}

.nav a[aria-current='page'] {
  background-color: var(--pu-comp-nav-actual-fondo);
  box-shadow: inset 4px 0 0 var(--pu-marca-turquesa);
  color: var(--md-sys-color-primary);
}

.nav .nav-donar {
  background-color: var(--pu-comp-donar-fondo);
  color: var(--pu-comp-donar-texto);
  justify-content: center;
  margin-top: var(--pu-espacio-8);
}

/* En /donar/, el botón Donar sigue amarillo: la regla de página actual no
   le cambia el fondo. La franja turquesa y aria-current siguen indicando la
   página actual (decisión de la Fundación, noviembre de 2026). */
.nav .nav-donar[aria-current='page'] {
  background-color: var(--pu-comp-donar-fondo);
  color: var(--pu-comp-donar-texto);
}

@media (min-width: 52.5rem) {
  .encabezado-barra {
    min-height: var(--pu-espacio-80);
  }

  .menu-boton,
  .menu-enlace {
    display: none;
  }

  .encabezado .contenedor {
    align-items: center;
    display: flex;
    gap: var(--pu-espacio-md);
    justify-content: space-between;
  }

  .nav,
  .nav.abierta {
    display: block;
    padding: 0;
  }

  .nav ul {
    align-items: center;
    display: flex;
    gap: var(--pu-espacio-4);
  }

  .nav a {
    font-size: var(--md-sys-typescale-label-large-size);
    padding: var(--pu-espacio-8);
  }

  .nav a[aria-current='page'] {
    box-shadow: inset 0 -3px 0 var(--pu-marca-turquesa);
  }

  .nav .nav-donar {
    margin: 0 0 0 var(--pu-espacio-8);
    padding-inline: var(--pu-espacio-16);
  }
}

/* 4.4 Pie de página, aviso de crisis y aviso de cookies */
.pie {
  background: var(--pu-comp-pie-fondo);
  border-top: 1px solid var(--pu-comp-pie-borde);
  color: var(--pu-comp-pie-texto);
  --pu-comp-foco: var(--pu-comp-foco-sobre-color);
  /* En móvil se deja justo el espacio del botón flotante de WhatsApp (56 px + margen) */
  font-size: var(--md-sys-typescale-body-medium-size);
  padding-block: var(--pu-espacio-lg) calc(var(--pu-espacio-56) + var(--pu-espacio-32));
}

@media (min-width: 52.5rem) {
  .pie {
    padding-bottom: var(--pu-espacio-md);
  }
}

.pie a {
  color: var(--pu-comp-pie-texto);
}

.pie h2 {
  color: var(--pu-comp-pie-texto);
  font-size: var(--md-sys-typescale-title-medium-size);
}

/* Aviso de crisis: siempre visible, discreto (franja amarilla a la izquierda) */
.aviso-crisis {
  align-items: flex-start;
  background: color-mix(in srgb, var(--pu-comp-pie-texto) 6%, transparent);
  border-left: 4px solid var(--pu-marca-amarillo);
  border-radius: var(--md-sys-shape-corner-medium);
  display: flex;
  font-size: var(--md-sys-typescale-body-medium-size);
  gap: var(--pu-espacio-12);
  margin-bottom: var(--pu-espacio-lg);
  padding: var(--pu-espacio-sm) var(--pu-espacio-md);
}

.aviso-crisis .icono {
  color: var(--pu-marca-amarillo);
  height: var(--pu-espacio-20);
  margin-top: var(--pu-espacio-4);
  width: var(--pu-espacio-20);
}

.aviso-crisis p {
  margin: 0;
}

.aviso-crisis a {
  font-weight: var(--md-ref-typeface-weight-bold);
}

.pie-logo {
  margin-bottom: var(--pu-espacio-sm);
  width: 180px; /* Excepción: tamaño del logo */
}

.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie li a,
.pie-contacto a {
  align-items: center;
  display: inline-flex;
  min-height: var(--pu-area-tactil);
}

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-8);
  margin-top: var(--pu-espacio-sm);
}

.redes a {
  align-items: center;
  border: 2px solid color-mix(in srgb, var(--pu-comp-pie-texto) 50%, transparent);
  border-radius: var(--md-sys-shape-corner-medium);
  display: inline-flex;
  height: var(--pu-area-tactil);
  justify-content: center;
  width: var(--pu-area-tactil);
}

.redes .icono {
  height: var(--pu-espacio-24);
  width: var(--pu-espacio-24);
}

.pie-legal {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--pu-comp-pie-texto) 25%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-sm) var(--pu-espacio-md);
  margin-top: var(--pu-espacio-lg);
  padding-top: var(--pu-espacio-md);
}

.pie-legal p {
  margin: 0;
}

.pie-legal a {
  align-items: center;
  display: inline-flex;
  min-height: var(--pu-area-tactil);
}

.boton-texto {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: var(--pu-area-tactil);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.boton-texto[hidden] {
  display: none;
}

/* Apariencia: botón segmentado de M3 (Sistema, Claro, Oscuro). Lo muestra
   js/apariencia.js; sin JavaScript queda oculto y el sitio sigue al sistema.
   La opción elegida lleva fondo y una marca ✓, no solo color. */
.apariencia {
  align-items: center;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-xs);
  margin: 0;
  padding: 0;
}

.apariencia[hidden] {
  display: none;
}

.apariencia legend {
  float: left;
  font-weight: var(--md-ref-typeface-weight-bold);
  margin-right: var(--pu-espacio-xs);
  padding: 0;
}

.apariencia-opciones {
  border: 1px solid color-mix(in srgb, var(--pu-comp-pie-texto) 50%, transparent);
  border-radius: var(--md-sys-shape-corner-full);
  display: inline-flex;
}

.apariencia label:first-child {
  border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full);
}

.apariencia label:last-child {
  border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0;
}

.apariencia label {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  gap: var(--pu-espacio-4);
  min-height: var(--pu-espacio-40);
  padding: var(--pu-espacio-4) var(--pu-espacio-12);
  position: relative;
}

/* Área táctil de 48 px aunque el botón mida 40 px a la vista, como el
   «touch target» de material-web (button/internal/_touch-target.scss) */
.apariencia label::after {
  content: '';
  inset: 50% 0 auto;
  min-height: var(--pu-area-tactil);
  position: absolute;
  transform: translateY(-50%);
}

.apariencia label + label {
  border-left: 1px solid color-mix(in srgb, var(--pu-comp-pie-texto) 50%, transparent);
}

.apariencia input {
  height: 1px; /* Excepción: control oculto a la vista (técnica de 1 px) */
  opacity: 0;
  position: absolute;
  width: 1px;
}

.apariencia label:hover {
  background-image: linear-gradient(var(--pu-capa-hover) 0 0);
}

.apariencia label:has(input:checked) {
  background-color: var(--pu-comp-eleccion-fondo);
  color: var(--pu-comp-eleccion-texto);
}

.apariencia label:has(input:checked)::before {
  content: '✓';
}

.apariencia label:has(input:focus-visible) {
  background-image: linear-gradient(var(--pu-capa-focus) 0 0);
  outline: 3px solid var(--pu-comp-foco);
  outline-offset: 3px;
  z-index: 1;
}

/* Aviso de cookies: Aceptar y Rechazar con el mismo peso visual */
.aviso-cookies {
  background: var(--pu-comp-tarjeta-fondo);
  border-top: 4px solid var(--pu-marca-turquesa);
  box-shadow: var(--md-sys-elevation-level3);
  color: var(--pu-comp-pagina-texto);
  inset: auto 0 0;
  padding: var(--pu-espacio-md) 0;
  position: fixed;
  z-index: 50;
  --pu-comp-foco: var(--md-sys-color-on-surface);
}

.aviso-cookies[hidden] {
  display: none;
}

.aviso-cookies a {
  color: var(--pu-comp-enlace);
}

.aviso-cookies h2 {
  color: var(--pu-comp-titulos);
  font-size: var(--md-sys-typescale-title-medium-size);
}

.aviso-cookies p {
  font-size: var(--md-sys-typescale-body-medium-size);
}

.aviso-cookies .botones {
  margin-top: var(--pu-espacio-sm);
}

.aviso-cookies .boton {
  flex: 1 1 10rem;
  max-width: 14rem;
}

/* 4.5 Bloques de contenido */

/* Portada (bloque principal de cada página) */
.portada {
  background: var(--pu-comp-portada-fondo);
  overflow: hidden;
  padding-block: var(--pu-espacio-lg);
  position: relative;
}

/* Formas gráficas del manual (arco amarillo y punto lavanda), decorativas */
.portada::before,
.portada::after {
  content: '';
  pointer-events: none;
  position: absolute;
}

.portada::before {
  aspect-ratio: 2 / 1;
  background: var(--pu-marca-amarillo);
  border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0;
  bottom: -1px; /* Excepción: tapa la línea de 1 px que deja el redondeo */
  opacity: 0.9;
  right: calc(-1 * var(--pu-espacio-40));
  width: clamp(120px, 22vw, 260px); /* Excepción: tamaño de la forma decorativa */
}

.portada::after {
  aspect-ratio: 1;
  background: var(--pu-marca-lavanda);
  border-radius: var(--md-sys-shape-corner-full);
  right: 24%;
  top: var(--pu-espacio-8);
  width: clamp(20px, 3vw, 40px); /* Excepción: tamaño de la forma decorativa */
}

.portada-subtitulo {
  font-size: var(--md-sys-typescale-title-medium-size);
  max-width: 34rem;
}

.portada-lema {
  color: var(--md-sys-color-primary);
  font-weight: var(--md-ref-typeface-weight-bold);
}

.portada-imagen img {
  margin-inline: auto;
  max-width: 560px;
  width: 100%;
}

.portada-simple {
  padding-block: var(--pu-espacio-lg);
}

.portada-simple .portada-subtitulo {
  max-width: var(--pu-ancho-texto);
}

/* Migas de pan */
.migas {
  font-size: var(--md-sys-typescale-body-medium-size);
  margin-bottom: var(--pu-espacio-sm);
  position: relative;
  z-index: 1;
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.migas li:not(:last-child)::after {
  color: var(--md-sys-color-primary);
  content: '/';
  margin-inline: var(--pu-espacio-8);
}

.migas a {
  align-items: center;
  display: inline-flex;
  min-height: var(--pu-area-tactil);
}

/* Franja de confianza */
.confianza {
  background: var(--pu-comp-destacado-fondo);
  color: var(--pu-comp-destacado-texto);
  padding-block: var(--pu-espacio-md);
  --pu-comp-foco: var(--pu-comp-foco-sobre-color);
}

.confianza ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.confianza li {
  align-items: center;
  display: flex;
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-12);
}

.confianza .icono {
  background: var(--pu-marca-turquesa);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--pu-marca-azul-noche);
  height: var(--pu-espacio-40);
  padding: var(--pu-espacio-8);
  width: var(--pu-espacio-40);
}

.tarjeta {
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.tarjeta img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.tarjeta-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--pu-espacio-md);
}

.tarjeta-cuerpo > :last-child {
  margin-bottom: 0;
}

/* Enlace o botón de acción de la tarjeta: siempre al pie, alineado entre tarjetas vecinas */
.tarjeta-cuerpo > .tarjeta-accion {
  margin-top: auto;
}

.tarjeta h3 a {
  color: inherit;
  text-decoration: none;
}

/* Toda la tarjeta es clicable, pero el enlace real es el del título */
.tarjeta h3 a::after {
  content: '';
  inset: 0;
  position: absolute;
}

.tarjeta:has(h3 a:focus-visible) {
  outline: 3px solid var(--pu-comp-foco);
  outline-offset: 3px;
}

.tarjeta h3 a:focus-visible {
  outline: none;
}

.tarjeta:hover {
  box-shadow: var(--pu-comp-tarjeta-elevacion-hover);
}

.tarjeta-texto {
  border-top: 6px solid var(--pu-marca-turquesa);
}

.tarjeta-meta {
  font-size: var(--md-sys-typescale-body-medium-size);
}

.foto img {
  border-radius: var(--pu-comp-tarjeta-forma);
  width: 100%;
}

/* Testimonios */
.testimonio {
  border-radius: var(--pu-comp-tarjeta-forma);
  color: var(--pu-comp-testimonio-texto);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--pu-espacio-lg) var(--pu-espacio-md) var(--pu-espacio-md);
  position: relative;
}

.testimonio:nth-child(1) {
  background: var(--pu-comp-testimonio-1-fondo);
}

.testimonio:nth-child(2) {
  background: var(--pu-comp-testimonio-2-fondo);
}

.testimonio:nth-child(3) {
  background: var(--pu-comp-testimonio-3-fondo);
}

.testimonio svg {
  color: var(--pu-comp-testimonio-texto);
  height: var(--pu-espacio-32);
  left: var(--pu-espacio-md);
  opacity: 0.85;
  position: absolute;
  top: var(--pu-espacio-sm);
  width: var(--pu-espacio-32);
}

/* El artículo lleva el fondo; la cita (figure) ocupa todo su alto para que
   el nombre (figcaption) quede abajo */
.testimonio figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

/* Título del testimonio: una frase literal del propio testimonio. Lleva el
   color del texto del testimonio, porque el verde de los títulos no tiene
   contraste suficiente sobre el azul claro ni el turquesa. Arriba deja el
   mismo espacio que antes dejaba la cita, debajo del ícono de comillas. */
.testimonio h3 {
  color: var(--pu-comp-testimonio-texto);
  font-size: var(--md-sys-typescale-title-medium-size);
  margin: var(--pu-espacio-sm) 0 0;
}

.testimonio blockquote {
  margin: var(--pu-espacio-sm) 0 var(--pu-espacio-sm);
}

.testimonio figcaption {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-ref-typeface-weight-bold);
  margin-top: auto;
}

/* Aliados: Alegra y Aleluya prestan sus programas gratis a la Fundación y
   piden mostrar su logo. Tarjetas centradas de ancho fijo, con el logo a
   40 px de alto, menos que el logo de la Fundación (de 45 a 57 px), para
   que se lean como un reconocimiento y no como publicidad. Las tarjetas van
   centradas; el título de la sección, a la izquierda como en las demás
   secciones. Sus manuales
   piden fondo blanco: la tarjeta es blanca también en el esquema oscuro. */
.aliados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-rejilla-separacion);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aliados li {
  flex: 0 1 16rem;
}

.aliados a {
  align-items: center;
  background: var(--pu-comp-logos-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  color: var(--pu-comp-logos-texto);
  display: flex;
  flex-direction: column;
  font-size: var(--md-sys-typescale-body-medium-size);
  gap: var(--pu-espacio-12);
  height: 100%;
  padding: var(--pu-espacio-md);
  text-align: center;
  text-decoration: none;
}

.aliados a:hover {
  box-shadow: var(--pu-comp-tarjeta-elevacion-hover);
}

.aliados img {
  height: 40px; /* Excepción: alto de los logos de aliados, menor que el de la Fundación */
  max-width: 100%;
  width: auto;
}

/* Invitación a donar */
.invitacion {
  align-items: center;
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--pu-comp-tarjeta-forma);
  display: grid;
  gap: var(--pu-espacio-md);
  padding: var(--pu-espacio-md) var(--pu-espacio-lg);
}

@media (min-width: 52.5rem) {
  .invitacion {
    grid-template-columns: 1fr auto;
  }
}

.invitacion h2 {
  font-size: var(--md-sys-typescale-title-large-size);
  margin-bottom: var(--pu-espacio-4);
}

.invitacion p {
  margin: 0;
}

/* Listas con iconos (beneficios, temas) */
.lista-iconos {
  display: grid;
  gap: var(--pu-espacio-sm);
  list-style: none;
  padding: 0;
}

@media (min-width: 37.5rem) {
  .lista-iconos-corta {
    grid-template-columns: 1fr 1fr;
  }
}

.lista-iconos li {
  align-items: flex-start;
  display: flex;
  gap: var(--pu-espacio-12);
}

.lista-iconos .icono {
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary);
  height: var(--pu-espacio-32);
  padding: var(--pu-espacio-8);
  width: var(--pu-espacio-32);
}

/* Temas que puedes abordar en terapia */
.temas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-8);
  list-style: none;
  padding: 0;
}

.temas li {
  background: var(--pu-comp-tarjeta-fondo);
  border: 2px solid var(--pu-marca-lavanda);
  border-radius: var(--md-sys-shape-corner-small);
  font-weight: var(--md-ref-typeface-weight-bold);
  padding: var(--pu-espacio-8) var(--pu-espacio-16);
}

.temas li:nth-child(3n + 2) {
  border-color: var(--pu-marca-turquesa);
}

.temas li:nth-child(3n) {
  border-color: var(--pu-marca-coral);
}

/* Pasos de un proceso */
.pasos {
  counter-reset: paso;
  display: grid;
  gap: var(--pu-espacio-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  list-style: none;
  padding: 0;
}

.pasos li {
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  display: flex;
  flex-direction: column;
  gap: var(--pu-espacio-8);
  padding: var(--pu-espacio-md);
}

.pasos .icono {
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-primary);
  height: var(--pu-espacio-56);
  padding: var(--pu-espacio-12);
  width: var(--pu-espacio-56);
}

.pasos li:nth-child(2) .icono {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}

.pasos li:nth-child(3) .icono {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.pasos li:nth-child(4) .icono {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.pasos h3 {
  font-size: var(--md-sys-typescale-title-medium-size);
  margin: var(--pu-espacio-4) 0 0;
}

.pasos p {
  margin: 0;
}

/* Resumen de un servicio: modalidad y tarifas */
.ficha {
  display: grid;
  gap: var(--pu-espacio-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
}

.ficha div {
  background: var(--pu-comp-tarjeta-fondo);
  border-left: 6px solid var(--pu-marca-turquesa);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--pu-espacio-md);
}

.ficha div:nth-child(2) {
  border-left-color: var(--pu-marca-amarillo);
}

.ficha dt {
  color: var(--md-sys-color-primary);
  font-weight: var(--md-ref-typeface-weight-bold);
}

.ficha dd {
  margin: var(--pu-espacio-4) 0 0;
}

/* Preguntas frecuentes */
.preguntas details {
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  margin-bottom: var(--pu-espacio-sm);
}

.preguntas summary {
  align-items: center;
  color: var(--md-sys-color-primary);
  cursor: pointer;
  display: flex;
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-16);
  justify-content: space-between;
  list-style: none;
  min-height: var(--pu-area-tactil);
  padding: var(--pu-espacio-sm) var(--pu-espacio-md);
}

.preguntas summary::-webkit-details-marker {
  display: none;
}

.preguntas summary::after {
  content: '+';
  flex: none;
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: 1;
}

.preguntas details[open] summary::after {
  content: '−';
}

.preguntas details > div {
  padding: 0 var(--pu-espacio-md) var(--pu-espacio-md);
}

/* Bloque de llamada a la acción de cada servicio */
.llamada {
  align-items: center;
  background: var(--pu-comp-destacado-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  color: var(--pu-comp-destacado-texto);
  display: grid;
  gap: var(--pu-espacio-4) var(--pu-espacio-md);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--pu-espacio-md) var(--pu-espacio-lg);
  --pu-comp-foco: var(--pu-comp-foco-sobre-color);
}

.llamada h2 {
  color: var(--pu-comp-destacado-texto);
  font-size: var(--md-sys-typescale-title-large-size);
  margin-bottom: var(--pu-espacio-4);
}

.llamada p {
  margin: 0;
}

.llamada .botones {
  margin-top: var(--pu-espacio-sm);
}

@media (min-width: 52.5rem) {
  .llamada {
    grid-template-columns: 1fr auto;
  }

  .llamada > :not(.botones) {
    grid-column: 1;
  }

  .llamada > .botones {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* Variante con los botones siempre debajo del texto (final de las entradas
   del blog, donde la columna es estrecha) */
@media (min-width: 52.5rem) {
  .llamada-apilada {
    grid-template-columns: minmax(0, 1fr);
  }

  .llamada-apilada > .botones {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--pu-espacio-sm);
  }
}

.llamada .boton {
  background-color: var(--pu-comp-donar-fondo);
  border-color: var(--pu-comp-donar-fondo);
  color: var(--pu-comp-donar-texto);
}

.llamada a:not(.boton) {
  color: var(--pu-comp-destacado-texto);
}

/* Persona destacada (mentora, autor) */
.persona {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-md);
}

.persona img {
  border: 4px solid var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
}

.persona > div {
  flex: 1 1 16rem;
}

.persona p {
  margin: 0;
}

/* 4.6 Componentes de páginas concretas */

/* Psicólogos: filtro y tarjetas de perfil */

/* Filtro: tres listas desplegables (servicio, enfoque y género) con el
   aspecto del campo con borde de M3 («outlined text field»): 56 px de
   alto, borde outline de 1 px, esquina extra-small y flecha desplegable.
   Son <select> nativos: funcionan con teclado, lector de pantalla y el
   selector propio del celular. Una lista con un filtro elegido lleva el
   borde primary de 2 px, como un campo activo. */
.filtro {
  border: 0;
  margin: 0 0 var(--pu-espacio-lg);
  padding: 0;
}

.filtro legend {
  color: var(--md-sys-color-primary);
  font-weight: var(--md-ref-typeface-weight-bold);
  margin-bottom: var(--pu-espacio-sm);
  padding: 0;
}

.filtro-campos {
  display: grid;
  gap: var(--pu-espacio-sm) var(--pu-rejilla-separacion);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--pu-espacio-4);
}

.campo label {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

.campo-control {
  position: relative;
}

.campo select {
  appearance: none;
  background-color: var(--pu-comp-pagina-fondo);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--pu-comp-pagina-texto);
  cursor: pointer;
  font: inherit;
  min-height: var(--pu-espacio-56);
  padding: var(--pu-espacio-8) var(--pu-espacio-48) var(--pu-espacio-8) var(--pu-espacio-16);
  width: 100%;
}

.campo select:hover {
  border-color: var(--md-sys-color-on-surface);
}

/* Filtro elegido (distinto de «Todos»): borde primary de 2 px */
.campo select:not(:has(option[value='todos']:checked)) {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.campo select:focus-visible {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.campo-flecha {
  color: var(--md-sys-color-on-surface-variant);
  height: var(--pu-espacio-24);
  pointer-events: none;
  position: absolute;
  right: var(--pu-espacio-12);
  top: 50%;
  transform: translateY(-50%);
  width: var(--pu-espacio-24);
}

.filtro-pie {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--pu-espacio-md);
  margin-top: var(--pu-espacio-sm);
}

.filtro-estado {
  font-size: var(--md-sys-typescale-body-medium-size);
  margin: 0;
}

.filtro-limpiar {
  color: var(--pu-comp-enlace);
  font-weight: var(--md-ref-typeface-weight-bold);
}

/* Filtro sin JavaScript: cada lista oculta los perfiles que no coinciden
   con la opción elegida, así que las tres se combinan solas. main.js
   además anuncia el resultado, muestra «Quitar filtros» y lee
   ?servicio=, ?enfoque= y ?genero= de la dirección. Si agregas un servicio
   o un enfoque nuevo, agrega aquí su regla. */
.filtrable:has(select[name='servicio'] option[value='psicoterapia']:checked) .perfil:not([data-servicios~='psicoterapia']),
.filtrable:has(select[name='servicio'] option[value='asesoria-psicologica']:checked) .perfil:not([data-servicios~='asesoria-psicologica']),
.filtrable:has(select[name='servicio'] option[value='desarrollo-profesional']:checked) .perfil:not([data-servicios~='desarrollo-profesional']),
.filtrable:has(select[name='servicio'] option[value='crianza']:checked) .perfil:not([data-servicios~='crianza']),
.filtrable:has(select[name='servicio'] option[value='mentoria']:checked) .perfil:not([data-servicios~='mentoria']),
.filtrable:has(select[name='enfoque'] option[value='cognitivo-conductual']:checked) .perfil:not([data-enfoque='cognitivo-conductual']),
.filtrable:has(select[name='enfoque'] option[value='humanista-existencial']:checked) .perfil:not([data-enfoque='humanista-existencial']),
.filtrable:has(select[name='enfoque'] option[value='psicodinamico']:checked) .perfil:not([data-enfoque='psicodinamico']),
.filtrable:has(select[name='genero'] option[value='mujer']:checked) .perfil:not([data-genero='mujer']),
.filtrable:has(select[name='genero'] option[value='hombre']:checked) .perfil:not([data-genero='hombre']) {
  display: none;
}

.equipo {
  list-style: none;
  margin: 0;
  padding: 0;
}

.perfil {
  align-items: center;
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  display: flex;
  flex-direction: column;
  padding: var(--pu-espacio-md);
  text-align: center;
}

.perfil[hidden] {
  display: none;
}

/* Cada tarjeta ocupa varias filas de la rejilla y comparte sus líneas con las tarjetas vecinas
   (subgrid): nombre con nombre, cargo con cargo, formación con formación, aunque los textos
   tengan distinto largo. Navegadores sin subgrid muestran la tarjeta normal. */
@supports (grid-template-rows: subgrid) {
  .perfil {
    align-content: start;
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    place-items: start center;
    row-gap: var(--pu-espacio-8);
  }

  .equipo-profesionales .perfil {
    grid-row: span 5;
  }

  /* Los servicios van siempre en la última fila, aunque falte el enfoque:
     así quedan alineados con los de las tarjetas vecinas */
  .equipo-profesionales .etiquetas {
    grid-row: -2 / -1;
  }

  .perfil > *,
  .perfil > p,
  .perfil > dl,
  .perfil > .etiquetas {
    margin: 0;
  }

  .perfil > picture {
    margin-bottom: var(--pu-espacio-xs);
  }

  .perfil img {
    margin-bottom: 0;
  }
}

.perfil img,
.perfil-sin-foto {
  border: 4px solid var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  height: 140px; /* Excepción: tamaño de la foto de perfil */
  margin-bottom: var(--pu-espacio-sm);
  object-fit: cover;
  width: 140px;
}

.perfil-sin-foto {
  background: var(--pu-comp-seccion-alterna-fondo);
  color: var(--md-sys-color-primary);
  display: grid;
  font-size: var(--md-sys-typescale-display-small-size);
  font-weight: var(--md-ref-typeface-weight-bold);
  place-items: center;
}

.perfil h3 {
  margin-bottom: var(--pu-espacio-4);
}

.perfil-cargo {
  font-weight: var(--md-ref-typeface-weight-bold);
}

.perfil p {
  margin-bottom: var(--pu-espacio-8);
}

.perfil-formacion {
  font-weight: var(--md-ref-typeface-weight-regular);
}

.perfil dl {
  margin: 0 0 var(--pu-espacio-sm);
}

.perfil dt {
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-ref-typeface-weight-bold);
}

.perfil dd {
  margin: 0 0 var(--pu-espacio-8);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-8);
  justify-content: center;
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}

.etiquetas li {
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--pu-comp-pagina-texto);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-ref-typeface-weight-bold);
  padding: var(--pu-espacio-4) var(--pu-espacio-8);
}

/* Privacidad: texto con índice, resumen, comparación de casos y datos
   guardados en el navegador */
.texto-principal {
  margin-inline: auto;
  max-width: var(--pu-ancho-texto);
}

.texto-principal > section + section {
  margin-top: var(--pu-espacio-xl);
}

.resumen {
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  color: var(--pu-comp-pagina-texto);
  padding: var(--pu-espacio-24);
}

.resumen h2 {
  color: inherit;
  margin-top: 0;
}

.resumen ul {
  display: grid;
  gap: var(--pu-espacio-8);
  padding-left: var(--pu-espacio-20);
}

.resumen > :last-child {
  margin-bottom: 0;
}

/* Los dos casos van uno debajo del otro: el de «Aceptar» es mucho más largo
   y, lado a lado en la columna de texto, dejaba un hueco grande */
.comparacion {
  display: grid;
  gap: var(--pu-espacio-16);
}

.comparacion-caso {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--pu-comp-tarjeta-forma);
  padding: var(--pu-espacio-20);
}

.comparacion-caso .etiquetas {
  justify-content: flex-start;
  margin: 0 0 var(--pu-espacio-8);
}

.comparacion-caso h3 {
  margin-top: 0;
}

.comparacion-caso > :last-child {
  margin-bottom: 0;
}

.etiquetas .etiqueta-neutra {
  background: var(--pu-comp-portada-fondo);
}

.datos-guardados {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--pu-comp-tarjeta-forma);
  margin: 0 0 var(--pu-espacio-16);
}

.datos-guardados > div {
  display: grid;
  gap: var(--pu-espacio-4) var(--pu-espacio-16);
  padding: var(--pu-espacio-12) var(--pu-espacio-16);
}

.datos-guardados > div + div {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

@media (min-width: 37.5rem) {
  .datos-guardados > div {
    grid-template-columns: 15rem minmax(0, 1fr); /* Excepción: ancho de la columna de nombres */
  }
}

.datos-guardados dt {
  font-weight: var(--md-ref-typeface-weight-bold);
}

.datos-guardados dd {
  margin: 0;
}

/* En los medios (Nosotros): cifras de la portada y tarjetas de cada
   aparición, agrupadas por año */
.medios-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-8);
  list-style: none;
  margin: var(--pu-espacio-md) 0 0;
  padding: 0;
}

.medios-resumen li {
  background: var(--pu-comp-tarjeta-fondo);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  font-size: var(--md-sys-typescale-body-medium-size);
  padding: var(--pu-espacio-4) var(--pu-espacio-16);
}

.medios-resumen strong {
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-title-medium-size);
}

/* En Nosotros: las tres apariciones más recientes, con la lista de
   documentos de Transparencia pero sin el ícono de documento */
.medios-recientes a::before {
  display: none;
}

.medios-reciente {
  display: flex;
  flex-direction: column;
  font-size: var(--md-sys-typescale-body-medium-size);
}

.medios-reciente-titulo {
  font-size: var(--md-sys-typescale-body-large-size);
}

.medios-anio + .medios-anio {
  margin-top: var(--pu-espacio-xl);
}

/* Año con una línea que lo separa del siguiente grupo */
.medios-anio-titulo {
  align-items: center;
  color: var(--md-sys-color-primary);
  display: flex;
  gap: var(--pu-espacio-16);
  margin: 0 0 var(--pu-espacio-md);
}

.medios-anio-titulo::after {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  content: '';
  flex: 1;
}

/* Línea de tiempo: una fila por aparición. En pantallas anchas, medio y
   fecha a la izquierda, título al centro y botón a la derecha. */
.medios-lista {
  display: grid;
  gap: var(--pu-espacio-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarjeta-medio {
  display: grid;
  gap: var(--pu-espacio-12);
  padding: var(--pu-espacio-20) var(--pu-espacio-md);
}

.tarjeta-medio h4,
.tarjeta-medio p {
  margin: 0;
}

.tarjeta-medio .etiquetas {
  justify-content: flex-start;
  margin: 0 0 var(--pu-espacio-4);
}

.medio-texto > .nota {
  margin-top: var(--pu-espacio-4);
}

@media (min-width: 52.5rem) {
  .tarjeta-medio {
    align-items: center;
    column-gap: var(--pu-espacio-lg);
    grid-template-columns: 16rem minmax(0, 1fr) auto; /* Excepción: ancho de la columna del medio */
  }
}

.medio-cabecera {
  align-items: center;
  display: flex;
  gap: var(--pu-espacio-12);
  line-height: 1.35;
}

.medio-cabecera time {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
}

.medio-icono {
  align-items: center;
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary);
  display: flex;
  flex: none;
  height: var(--pu-espacio-40);
  justify-content: center;
  width: var(--pu-espacio-40);
}

/* Recursos: tarjetas por público y botones de filtro (M3 «filter chips»).
   Las portadas de las guías son cuadradas y llevan texto: no se recortan. */
.tarjeta-recurso img {
  aspect-ratio: 1;
}

.tarjeta-recurso .etiquetas {
  justify-content: flex-start;
  margin: 0 0 var(--pu-espacio-12);
}

.tarjeta-recurso h3 {
  margin-top: 0;
}

.recursos-grupo + .recursos-grupo {
  margin-top: var(--pu-espacio-xl);
}

.recursos-grupo[hidden] {
  display: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-8);
  margin-bottom: var(--pu-espacio-lg);
}

.chip {
  align-items: center;
  background: var(--pu-comp-tarjeta-fondo);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-8);
  min-height: var(--pu-area-tactil);
  padding: 0 var(--pu-espacio-16);
}

.chip:hover {
  background-image: linear-gradient(var(--pu-capa-hover) 0 0);
}

.chip[aria-pressed='true'] {
  background-color: var(--md-sys-color-secondary-container);
  border-color: var(--md-sys-color-secondary-container);
  color: var(--pu-comp-pagina-texto);
}

/* Marca de verificación del chip elegido (Material Symbols «check») */
.chip[aria-pressed='true']::before {
  background-color: currentcolor;
  content: '';
  height: 18px; /* Excepción: tamaño del ícono de M3 en los chips */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 18px; /* Excepción: tamaño del ícono de M3 en los chips */
}

/* Transparencia */

/* Antetítulo: palabra breve sobre el título de la portada que dice en qué
   sección está la persona */
.antetitulo {
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-ref-typeface-weight-bold);
  letter-spacing: 0.06em;
  margin: 0 0 var(--pu-espacio-4);
  text-transform: uppercase;
}

/* Pestañas de años (M3 «primary tabs»). Las crea main.js a partir de las
   secciones .anio; sin JavaScript no existen y los años se ven uno debajo
   del otro. */
.pestanas {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  margin-bottom: var(--pu-espacio-md);
  overflow-x: auto;
}

.pestana {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  flex: 1 0 auto;
  font: inherit;
  font-weight: var(--md-ref-typeface-weight-bold);
  min-height: var(--pu-area-tactil);
  min-width: var(--pu-espacio-56);
  padding: 0 var(--pu-espacio-12);
}

/* Desde la clase mediana, las pestañas miden lo que su texto y van a la
   izquierda, como en M3 */
@media (min-width: 37.5rem) {
  .pestana {
    flex: none;
    min-width: var(--pu-espacio-80);
    padding: 0 var(--pu-espacio-20);
  }
}

.pestana:hover {
  background-image: linear-gradient(var(--pu-capa-hover) 0 0);
}

.pestana[aria-selected='true'] {
  border-bottom-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-primary);
}

.pestana:focus-visible {
  outline-offset: -3px;
}

.anio + .anio {
  margin-top: var(--pu-espacio-lg);
}

.anio[hidden] {
  display: none;
}

/* Con pestañas, el año ya lo dice la pestaña: el título queda solo para
   lectores de pantalla (main.js le pone la clase solo-lectores) */
.anio:focus-visible {
  outline-offset: 6px;
}

/* Lista de documentos (M3 «list» dentro de una tarjeta): una fila por
   documento, con ícono, nombre e indicador de enlace externo */
.documentos {
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  column-gap: var(--pu-espacio-md);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  list-style: none;
  margin: 0;
  padding: var(--pu-espacio-8);
}

.documentos li {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.documentos a {
  align-items: center;
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--pu-comp-pagina-texto);
  display: flex;
  gap: var(--pu-espacio-12);
  line-height: 1.35;
  min-height: var(--pu-espacio-56);
  padding: var(--pu-espacio-8) var(--pu-espacio-12);
  text-decoration: none;
}

.documentos a:hover {
  background-image: linear-gradient(var(--pu-capa-hover) 0 0);
  text-decoration: underline;
}

/* Ícono de documento (Material Symbols «description»), del color primary */
.documentos a::before {
  background-color: var(--md-sys-color-primary);
  content: '';
  flex: none;
  height: var(--pu-espacio-24);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16h8v2H8zm0-4h8v2H8zm6-10H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm4 18H6V4h7v5h5z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: var(--pu-espacio-24);
}

.documentos .externo {
  color: var(--md-sys-color-on-surface-variant);
  flex: none;
  height: var(--pu-espacio-20);
  margin-left: auto;
  width: var(--pu-espacio-20);
}

/* Blog */
.articulo {
  margin-inline: auto;
  max-width: var(--pu-ancho-texto);
}

.articulo p,
.articulo li {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: 1.7;
}

.articulo blockquote {
  border-left: 4px solid var(--pu-marca-lavanda);
  margin: var(--pu-espacio-md) 0;
  padding-left: var(--pu-espacio-md);
}

.articulo-imagen img {
  border-radius: var(--pu-comp-tarjeta-forma);
  width: 100%;
}

.articulo-meta {
  font-size: var(--md-sys-typescale-body-medium-size);
}

/* Fila de datos de la entrada (autor, tiempo de lectura y fecha) */
.articulo-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-8) var(--pu-espacio-24);
  list-style: none;
  margin: var(--pu-espacio-16) 0 0;
  padding: 0;
}

.articulo-datos li {
  align-items: center;
  display: flex;
  gap: var(--pu-espacio-8);
}

.articulo-datos img {
  border-radius: var(--md-sys-shape-corner-full);
  height: var(--pu-espacio-40);
  width: var(--pu-espacio-40);
}

.articulo-datos .icono {
  color: var(--md-sys-color-primary);
}

/* Índice de la entrada (M3 «list» en una tarjeta tonal). En pantallas
   anchas va en una columna a la izquierda y se queda a la vista al bajar. */
.indice {
  background: var(--pu-comp-portada-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  margin: 0 auto var(--pu-espacio-lg);
  max-width: var(--pu-ancho-texto);
  padding: var(--pu-espacio-16) var(--pu-espacio-24);
}

.indice h2 {
  font-size: var(--md-sys-typescale-title-medium-size);
  margin: 0 0 var(--pu-espacio-8);
}

.indice ol {
  display: grid;
  gap: var(--pu-espacio-4);
  margin: 0;
  padding-left: var(--pu-espacio-20);
}

.indice a {
  display: block;
  padding-block: var(--pu-espacio-4);
}

@media (min-width: 52.5rem) {
  .articulo-con-indice {
    align-items: start;
    column-gap: var(--pu-rejilla-separacion);
    display: grid;
    grid-template-columns: 15rem minmax(0, var(--pu-ancho-texto)); /* Excepción: ancho del índice */
    justify-content: center;
  }

  .articulo-con-indice .indice {
    margin: 0;
    position: sticky;
    top: var(--pu-espacio-24);
  }

  .articulo-con-indice > :not(.indice) {
    margin: 0;
  }
}

/* Etapas numeradas (círculo con el número, color de la marca) */
.etapas {
  counter-reset: etapa;
  display: grid;
  gap: var(--pu-espacio-16);
  list-style: none;
  margin: var(--pu-espacio-md) 0;
  padding: 0;
}

.etapas li {
  counter-increment: etapa;
  padding-left: calc(var(--pu-espacio-32) + var(--pu-espacio-12));
  position: relative;
}

.etapas li::before {
  align-items: center;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-primary);
  content: counter(etapa);
  display: flex;
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: var(--md-ref-typeface-weight-bold);
  height: var(--pu-espacio-32);
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0.15em; /* Excepción: en em, alinea el círculo con la primera línea */
  width: var(--pu-espacio-32);
}

.autor {
  background: var(--pu-comp-seccion-alterna-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  margin-top: var(--pu-espacio-lg);
  padding: var(--pu-espacio-md);
}

/* Portada ilustrada del blog sobre autosabotaje (formas de la marca) */
.ilustracion-rueda {
  aspect-ratio: 3 / 2;
  background: var(--pu-marca-azul-noche);
  width: 100%;
}

.tarjeta .ilustracion-rueda {
  border-radius: var(--md-sys-shape-corner-none);
}

/* Métodos de pago */
.metodos {
  display: grid;
  gap: var(--pu-espacio-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  list-style: none;
  padding: 0;
}

.metodos li {
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  padding: var(--pu-espacio-md);
}

/* Los logos de medios de pago van siempre sobre blanco (también en el
   esquema oscuro, donde la tarjeta es oscura y se ve la placa blanca) */
.metodos-logos {
  align-items: center;
  background: var(--pu-comp-logos-fondo);
  border-radius: var(--md-sys-shape-corner-small);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pu-espacio-24);
  margin-bottom: var(--pu-espacio-sm);
  padding: var(--pu-comp-logos-relleno);
}

/* Logos de medios de pago: siempre sobre blanco, sin deformar (alto fijo, ancho proporcional) */
.metodos-logos img {
  height: 40px; /* Excepción: alto de los logos de pago (ver su manual de marca) */
  width: auto;
}

.metodos-logos picture img {
  height: 60px;
}

/* Mercado Pago: área de protección libre alrededor del logo */
.metodos-logos .metodos-mp {
  height: 64px;
  margin: var(--pu-espacio-8);
}

.nota {
  font-size: var(--md-sys-typescale-body-medium-size);
}

/* Informes de gestión (Nosotros): introducción a la izquierda y lista de
   documentos (.documentos, la misma de Transparencia) a la derecha */
.informes {
  display: grid;
  gap: var(--pu-espacio-lg);
}

@media (min-width: 52.5rem) {
  .informes {
    align-items: start;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

.informes-intro h2 {
  margin-top: 0;
}

.informes-intro > :last-child {
  margin-bottom: 0;
}

.informes .documentos {
  grid-template-columns: minmax(0, 1fr);
}

/* Instagram: las publicaciones solo se cargan si la persona lo pide */
.instagram-lista {
  display: grid;
  gap: var(--pu-espacio-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  list-style: none;
  margin: 0 0 var(--pu-espacio-md);
  padding: 0;
}

.instagram-lista:empty {
  display: none;
}

.instagram-enlace .icono {
  color: var(--md-sys-color-primary);
  height: var(--pu-espacio-32);
  width: var(--pu-espacio-32);
}

.instagram-enlace {
  align-items: center;
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--pu-comp-tarjeta-forma);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  display: flex;
  flex-direction: column;
  font-weight: var(--md-ref-typeface-weight-bold);
  gap: var(--pu-espacio-8);
  justify-content: center;
  min-height: var(--pu-espacio-96);
  padding: var(--pu-espacio-md);
}

.instagram-marco {
  background: var(--pu-comp-logos-fondo);
  border: 0;
  border-radius: var(--pu-comp-tarjeta-forma);
  display: block;
  height: 560px; /* Excepción: alto que necesita la publicación incrustada de Instagram */
  width: 100%;
}

.instagram-consentimiento[hidden] {
  display: none;
}

.instagram-consentimiento {
  margin-bottom: var(--pu-espacio-md);
}

/* Redes sociales (Contacto) */
.redes-tarjetas {
  display: grid;
  gap: var(--pu-espacio-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.redes-tarjetas a {
  align-items: center;
  background: var(--pu-comp-tarjeta-fondo);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--pu-comp-tarjeta-elevacion);
  color: var(--pu-comp-pagina-texto);
  column-gap: var(--pu-espacio-16);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  min-height: var(--pu-espacio-72);
  padding: var(--pu-espacio-sm) var(--pu-espacio-md);
  text-decoration: none;
}

.redes-tarjetas a:hover {
  box-shadow: var(--pu-comp-tarjeta-elevacion-hover);
}

.redes-tarjetas-icono {
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary);
  display: grid;
  grid-row: 1 / span 2;
  height: var(--pu-espacio-40);
  place-items: center;
  width: var(--pu-espacio-40);
}

.redes-tarjetas-icono .icono {
  height: var(--pu-espacio-20);
  width: var(--pu-espacio-20);
}

.redes-tarjetas-nombre {
  color: var(--md-sys-color-primary);
  font-weight: var(--md-ref-typeface-weight-bold);
}

.redes-tarjetas-usuario {
  font-size: var(--md-sys-typescale-body-medium-size);
}

/* Tarjetas con filas alineadas (Contacto y medios de pago de Donar): cada
   tarjeta ocupa cuatro filas de la rejilla y las comparte con sus vecinas
   (subgrid), así que títulos, textos y botones quedan a la misma altura
   aunque los textos tengan distinto largo, como en los perfiles de
   Psicólogos. Si una tarjeta tiene menos partes, su última fila queda
   vacía. Navegadores sin subgrid muestran las tarjetas normales. */
@supports (grid-template-rows: subgrid) {
  .filas-alineadas > * {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .filas-alineadas > * > .tarjeta-cuerpo {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* 5. Utilidades ------------------------------------------------------- */

/* Un botón con el atributo hidden queda oculto: .boton fija display y, sin
   esta regla, ganaría al hidden del navegador (pasaba con «Configurar
   cookies» en Privacidad, que main.js muestra solo cuando funciona). */
.boton[hidden] {
  display: none;
}

.solo-lectores {
  border: 0;
  clip-path: inset(50%);
  height: 1px; /* Excepción: técnica para ocultar a la vista sin ocultar a lectores */
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.saltar-contenido {
  background: var(--md-sys-color-inverse-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-inverse-on-surface);
  font-weight: var(--md-ref-typeface-weight-bold);
  left: var(--pu-espacio-16);
  padding: var(--pu-espacio-12) var(--pu-espacio-16);
  position: absolute;
  top: calc(-1 * var(--pu-espacio-96));
  z-index: 100;
}

.saltar-contenido:focus {
  top: var(--pu-espacio-16);
}

/* Marcador de contenido pendiente de la Fundación: visible a propósito */
.pendiente {
  background: var(--md-sys-color-error-container);
  border: 2px dashed var(--pu-marca-coral);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-error-container);
  display: inline-block;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-ref-typeface-weight-bold);
  padding: var(--pu-espacio-4) var(--pu-espacio-8);
}

/* 6. Movimiento reducido e impresión ----------------------------------
   Movimiento reducido: no hace falta una regla aquí. Todas las transiciones
   usan --md-sys-motion-duration-*, y tokens.css las lleva a casi cero
   cuando la persona pide reducir el movimiento. Si agregas una transición o
   una animación, usa siempre esos tokens.

   Impresión: sin !important. Este bloque va al final del archivo y sus
   selectores tienen al menos la especificidad de las reglas que muestran
   esos elementos en pantalla (por ejemplo, .nav.abierta), así que ganan. */
@media print {
  .encabezado .nav,
  .nav.abierta,
  .menu-boton,
  .menu-enlace,
  .whatsapp-flotante,
  .aviso-cookies,
  .apariencia {
    display: none;
  }

  .pie {
    background: none;
    color: var(--md-sys-color-on-surface);
  }
}