/* ==========================================================================
   Equipo Neurodialéctico — hoja de estilos única
   --------------------------------------------------------------------------
   Índice:
     1. Variables (paleta y tipografía)
     2. Fuentes self-hosteadas
     3. Reset y base
     4. Texturas globales (grano)
     5. Utilidades (contenedor, antetítulo, botones, marco facetado)
     6. Header y navegación
     7. Hero (inicio)
     8. Secciones de inicio (enfoques, áreas, equipo editorial)
     9. Cabeceras de páginas interiores
    10. Quiénes somos y grilla del equipo
    11. Evaluaciones
    12. Guías, talleres y tarjetas
    13. Panel CTA
    14. Contacto
    15. Footer
    16. Animaciones y reduced motion
    17. Responsive
   --------------------------------------------------------------------------
   Dupla tipográfica: Poppins (display, pedido del cliente) + Switzer (texto).
   Ambas self-hosteadas en /fonts. Los fondos abstractos de images/fondos/ se
   generaron con IA (Higgsfield, recraft-v4-1) a partir de la paleta del logo.
   --------------------------------------------------------------------------
   Concepto: baja carga sensorial ejecutada con riqueza visual — profundidad
   (mesh gradients, sombras tintadas, grano sutil), escala tipográfica grande
   y composición editorial, pero sin carruseles, sin autoplay y con una única
   animación de entrada que respeta prefers-reduced-motion.
   Elemento firma: la geometría facetada del cerebro del logo, aplicada a los
   contenedores de imagen y a los fragmentos poligonales decorativos.
   ========================================================================== */

/* 1. Variables ----------------------------------------------------------- */
:root {
  /* Paleta muestreada del logo (cerebro poligonal violeta → azul → celeste) */
  --base: #fafbfe;
  --base-suave: #f3f5fc;
  --lavanda: #edf0fa;
  --lavanda-borde: #dde2f3;
  --celeste: #c9d4f5;
  --iris: #5b4fc4;
  --azul: #2e4bd8;
  --azul-claro: #4a7bf7;
  --violeta: #3e2b7a;
  --violeta-noche: #2a1e56;
  --tinta: #232746;
  --tinta-suave: #4d5370;

  --fuente-display: "Poppins", "Segoe UI", sans-serif;
  --fuente-texto: "Switzer", "Segoe UI", system-ui, sans-serif;

  --ancho-max: 1160px;
  --pad-lateral: clamp(1.25rem, 5vw, 3rem);
  --faceta: 34px;

  /* Sombras tintadas con el azul de la marca (nunca negro puro) */
  --sombra-suave: 0 1px 2px rgba(35, 39, 70, 0.05), 0 10px 30px -12px rgba(91, 79, 196, 0.16);
  --sombra-alta: 0 2px 4px rgba(35, 39, 70, 0.06), 0 22px 44px -16px rgba(91, 79, 196, 0.28);
}

/* 2. Fuentes -------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* 3. Reset y base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--tinta);
  margin: 0 0 0.55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 3.9vw, 3rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.texto-suave { color: var(--tinta-suave); }
.texto-grande { font-size: 1.15rem; }

a { color: var(--iris); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul); }

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
picture { display: block; }

ul { padding-left: 1.2em; }
li { margin-bottom: 0.5em; }

blockquote {
  margin: 3rem 0 0;
  padding-left: 1.75rem;
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--iris), var(--azul-claro)) 1;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  color: var(--violeta);
  max-width: 52rem;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--violeta);
  color: #fff;
  padding: 0.6em 1.2em;
  z-index: 100;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* 4. Texturas globales ------------------------------------------------------ */
/* Grano fino fijo que rompe la chatura digital. Estático (no anima). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 5. Utilidades ----------------------------------------------------------- */
.contenedor {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

.seccion { padding-block: clamp(4rem, 9vw, 7.5rem); }
.seccion--lavanda {
  background:
    radial-gradient(60rem 34rem at 110% -10%, rgba(201, 212, 245, 0.4), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, rgba(91, 79, 196, 0.07), transparent 55%),
    var(--lavanda);
}
/* Variante celeste-periwinkle para alternar temperaturas entre secciones */
.seccion--celeste {
  background:
    radial-gradient(56rem 30rem at -10% -20%, rgba(74, 123, 247, 0.1), transparent 55%),
    radial-gradient(50rem 30rem at 110% 120%, rgba(91, 79, 196, 0.12), transparent 60%),
    linear-gradient(180deg, #eef2fd, #e7ecfb);
}
/* Fondos de imagen sutiles para secciones con mucho texto (velo blanco encima
   para mantener la legibilidad y el contraste AA) */
.seccion--fondo-ondas {
  background:
    linear-gradient(180deg, rgba(250, 251, 254, 0.9), rgba(250, 251, 254, 0.72)),
    url("../images/fondos/cabecera-ondas.webp") center / cover no-repeat;
}
.seccion--fondo-puntos {
  background:
    linear-gradient(180deg, rgba(250, 251, 254, 0.82), rgba(250, 251, 254, 0.62)),
    url("../images/fondos/cabecera-puntos.webp") center / cover no-repeat;
}
.seccion--fondo-aurora {
  background:
    linear-gradient(180deg, rgba(250, 251, 254, 0.55), rgba(250, 251, 254, 0.35)),
    url("../images/fondos/seccion-aurora.webp") center / cover no-repeat;
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iris);
  margin-bottom: 1.1rem;
}
/* Cada antetítulo lleva un icono SVG contextual (inline en el HTML) */
.antetitulo svg { width: 16px; height: 16px; flex-shrink: 0; }

.columna-lectura { max-width: 46rem; }

.boton {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1em 1.8em;
  border-radius: 12px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
              transform 180ms ease, box-shadow 180ms ease;
}
.boton:active { transform: translateY(1px) scale(0.98); }

.boton--primario {
  background: linear-gradient(135deg, #46379c, var(--iris) 60%, #6a5fd6);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(62, 43, 122, 0.55);
}
.boton--primario:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(62, 43, 122, 0.6);
}

.boton--secundario {
  border-color: var(--lavanda-borde);
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.65);
}
.boton--secundario:hover {
  border-color: var(--iris);
  color: var(--iris);
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}

/* Botón claro para usar sobre el panel violeta */
.boton--claro {
  background: #fff;
  color: var(--violeta);
  box-shadow: 0 12px 28px -12px rgba(15, 10, 40, 0.5);
}
.boton--claro:hover { color: var(--violeta); transform: translateY(-2px); }

.grupo-botones { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 2.2rem; }

/* Elemento firma: arista facetada (una esquina cortada en diagonal) en los
   contenedores de imagen, derivada de la geometría del cerebro del logo. */
.marco-facetado {
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--faceta)),
    calc(100% - var(--faceta)) 100%,
    0 100%
  );
  overflow: hidden;
}

/* Fragmento poligonal decorativo (se posiciona por contexto) */
.faceta-decorativa {
  position: absolute;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.16), rgba(74, 123, 247, 0.08));
}

/* 6. Header y navegación --------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 251, 254, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.encabezado.con-scroll {
  border-bottom-color: var(--lavanda-borde);
  box-shadow: 0 8px 24px -18px rgba(62, 43, 122, 0.35);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 80px;
}

/* Lockup horizontal: isotipo + nombre compuesto en la display del sitio */
.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--tinta);
}
.marca img { width: 44px; height: auto; transition: transform 250ms ease; }
.marca:hover img { transform: rotate(-4deg) scale(1.05); }
.marca__nombre {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.08;
  letter-spacing: 0.005em;
}
.marca__nombre span { display: block; color: var(--violeta); }

.nav-principal ul {
  list-style: none;
  display: flex;
  gap: clamp(0.4rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
}
.nav-principal li { margin: 0; }
.nav-principal a {
  display: inline-block;
  padding: 0.45em 0.8em;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.nav-principal a:hover { color: var(--violeta); background: var(--lavanda); }
.nav-principal a[aria-current="page"] {
  color: var(--violeta);
  font-weight: 600;
  background: var(--lavanda);
}

.boton-menu {
  display: none;
  background: none;
  border: 1.5px solid var(--lavanda-borde);
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
}

/* 7. Hero (inicio) --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(76dvh, 48rem);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(52rem 32rem at 14% -14%, rgba(91, 79, 196, 0.13), transparent 60%),
    radial-gradient(48rem 32rem at 98% 16%, rgba(74, 123, 247, 0.17), transparent 58%),
    radial-gradient(40rem 28rem at 66% 100%, rgba(201, 212, 245, 0.55), transparent 62%),
    linear-gradient(180deg, #f2f4fc, var(--base));
}

/* Fragmentos poligonales flotando en el fondo, muy sutiles */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero::before {
  width: clamp(180px, 22vw, 340px);
  height: clamp(180px, 22vw, 340px);
  left: -4%;
  bottom: -12%;
  clip-path: polygon(0 35%, 62% 0, 100% 78%, 30% 100%);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.1), rgba(201, 212, 245, 0.35));
}
.hero::after {
  width: clamp(90px, 10vw, 150px);
  height: clamp(90px, 10vw, 150px);
  right: 30%;
  top: 8%;
  clip-path: polygon(50% 0, 100% 60%, 20% 100%, 0 40%);
  background: linear-gradient(135deg, rgba(74, 123, 247, 0.14), rgba(91, 79, 196, 0.06));
}

.hero .contenedor { position: relative; width: 100%; }

.hero__texto { max-width: 33rem; position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  margin-bottom: 0.5em;
}
/* La palabra clave del titular: gradiente de marca en movimiento lento */
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--violeta), var(--iris) 30%, var(--azul-claro) 55%, var(--iris) 80%, var(--violeta));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradiente-fluir 8s linear infinite;
}
@keyframes gradiente-fluir {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.hero__bajada {
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
  color: var(--tinta-suave);
  max-width: 32rem;
}

/* El cerebro del logo flotando sobre la red neuronal, a tamaño contenido
   (nunca por encima de su resolución nativa; hay versión @2x para retina). */
.hero__cerebro {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 8vw, 9rem);
  top: 48%;
  width: clamp(260px, 28vw, 400px);
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 30px 44px rgba(62, 43, 122, 0.25));
  animation: hero-flotar 7s ease-in-out infinite alternate;
}
@keyframes hero-flotar {
  from { transform: translateY(calc(-50% - 12px)) rotate(-1.2deg); }
  to   { transform: translateY(calc(-50% + 12px)) rotate(1.2deg); }
}

/* Red neuronal animada detrás del cerebro: nodos que laten y señales que
   recorren las conexiones. Decorativa (aria-hidden) y se apaga por completo
   con prefers-reduced-motion. */
.red-neuronal {
  position: absolute;
  z-index: 0;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(420px, 46vw, 700px);
  height: auto;
  pointer-events: none;
}
.red-neuronal line {
  stroke: rgba(91, 79, 196, 0.22);
  stroke-width: 1;
}
.red-neuronal .nodo {
  fill: rgba(91, 79, 196, 0.55);
  animation: nodo-latir 5s ease-in-out infinite;
}
.red-neuronal .nodo:nth-of-type(2n) { animation-delay: 1.2s; }
.red-neuronal .nodo:nth-of-type(3n) { animation-delay: 2.4s; }
.red-neuronal .nodo:nth-of-type(5n) { animation-delay: 3.4s; fill: rgba(74, 123, 247, 0.55); }
@keyframes nodo-latir {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}
/* Señales que viajan por las conexiones */
.red-neuronal .senal {
  fill: var(--azul-claro);
  animation: senal-viajar 6s linear infinite;
}
.red-neuronal .senal--b { animation-delay: 3s; fill: var(--iris); }
@keyframes senal-viajar {
  0%   { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  46%  { opacity: 1; }
  54%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Entrada escalonada del hero (una sola vez, al cargar) */
@keyframes hero-aparecer {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.js .hero__texto > * { animation: hero-aparecer 700ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.js .hero__texto > *:nth-child(1) { animation-delay: 60ms; }
.js .hero__texto > *:nth-child(2) { animation-delay: 160ms; }
.js .hero__texto > *:nth-child(3) { animation-delay: 260ms; }
.js .hero__texto > *:nth-child(4) { animation-delay: 360ms; }
.js .hero__cerebro { opacity: 0; animation: hero-cerebro 900ms 200ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards, hero-flotar 7s 1.1s ease-in-out infinite alternate; }
@keyframes hero-cerebro {
  from { opacity: 0; transform: translateY(calc(-50% + 26px)) scale(0.97); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* 8. Secciones de inicio ---------------------------------------------------- */
/* Enfoques: las siglas de los modelos terapéuticos como elemento gráfico */
.grilla-enfoques {
  list-style: none;
  padding: 0;
  margin: 3.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.grilla-enfoques li {
  margin: 0;
  flex: 1 1 260px;
  max-width: 320px;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sombra-suave);
  position: relative;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.32s ease, background 0.35s ease;
}
/* Arista facetada de color en el vértice superior de cada bloque */
.grilla-enfoques li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.16), rgba(74, 123, 247, 0.28));
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.35s ease;
}
/* Mantiene la transición del hover aunque el ítem tenga la animación de aparición (.revelar) */
.js .grilla-enfoques li.revelar {
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.32s ease, background 0.35s ease;
}
/* Movimiento y color al pasar el mouse */
.grilla-enfoques li:hover,
.js .grilla-enfoques li.revelar:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-alta);
  background: linear-gradient(160deg, #ffffff 0%, #f4f2ff 100%);
}
.grilla-enfoques li:hover::before,
.js .grilla-enfoques li.revelar:hover::before {
  width: 78px;
  height: 78px;
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.4), rgba(74, 123, 247, 0.55));
}
.grilla-enfoques li:hover .enfoque__sigla,
.js .grilla-enfoques li.revelar:hover .enfoque__sigla { color: var(--azul); }
.enfoque__sigla {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--violeta);
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}
.enfoque__sigla--texto {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  padding-top: 0.45em;
}
.enfoque__nombre {
  display: block;
  font-size: 0.95rem;
  color: var(--tinta-suave);
  line-height: 1.45;
}

/* Accesos a las áreas: filas editoriales grandes con flecha */
.lista-areas { list-style: none; padding: 0; margin: 3rem 0 0; }
.lista-areas li { margin: 0; }
.lista-areas li + li { border-top: 1px solid var(--lavanda-borde); }
.lista-areas a {
  display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 1.25rem;
  border-radius: 18px;
  text-decoration: none;
  color: var(--tinta);
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.area__icono {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--violeta);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.14), rgba(74, 123, 247, 0.1));
  transition: background 200ms ease, color 200ms ease;
}
.area__icono svg { width: 24px; height: 24px; }
.lista-areas a:hover .area__icono {
  background: linear-gradient(135deg, var(--violeta), var(--iris));
  color: #fff;
}
.lista-areas a:hover {
  background: #fff;
  box-shadow: var(--sombra-alta);
  transform: translateY(-2px);
}
.lista-areas .area__nombre {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.lista-areas a:hover .area__nombre { color: var(--violeta); }
.lista-areas .area__detalle {
  color: var(--tinta-suave);
  font-size: 0.98rem;
  line-height: 1.5;
}
.area__flecha {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--lavanda-borde);
  display: grid;
  place-items: center;
  color: var(--iris);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, color 200ms ease;
}
.area__flecha svg { width: 20px; height: 20px; }
.lista-areas a:hover .area__flecha {
  background: linear-gradient(135deg, var(--violeta), var(--iris));
  border-color: transparent;
  color: #fff;
  transform: translateX(6px);
}

/* Bloque destacado del equipo: foto protagonista a todo el ancho con una
   tarjeta blanca superpuesta sobre su borde inferior izquierdo */
.equipo-destacado__foto {
  --faceta: 56px;
  box-shadow: var(--sombra-alta);
}
.equipo-destacado__foto img { width: 100%; }
.equipo-destacado__tarjeta {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--sombra-alta);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 33rem;
  margin: clamp(-8rem, -10vw, -4rem) 0 0 clamp(1rem, 4vw, 3.5rem);
}
.equipo-destacado__tarjeta h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.equipo-destacado__tarjeta p { font-size: 1rem; }

/* 9. Cabeceras de páginas interiores ----------------------------------------- */
/* Fondos abstractos generados (images/fondos/cabecera-*.webp, 2K) con velo
   blanco a la izquierda para garantizar el contraste del texto. Tres variantes
   que se alternan entre páginas: facetas (default), ondas y puntos. */
.cabecera-pagina {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(95deg, rgba(250, 251, 254, 0.96) 12%, rgba(250, 251, 254, 0.7) 48%, rgba(250, 251, 254, 0.25) 100%),
    url("../images/fondos/cabecera-facetas.webp") center / cover no-repeat,
    linear-gradient(180deg, #f2f4fc, var(--base));
}
.cabecera-pagina--ondas {
  background:
    linear-gradient(95deg, rgba(250, 251, 254, 0.94) 12%, rgba(250, 251, 254, 0.6) 48%, rgba(250, 251, 254, 0.1) 100%),
    url("../images/fondos/cabecera-ondas.webp") center bottom / cover no-repeat,
    linear-gradient(180deg, #f2f4fc, var(--base));
}
.cabecera-pagina--puntos {
  background:
    linear-gradient(95deg, rgba(250, 251, 254, 0.9) 12%, rgba(250, 251, 254, 0.4) 48%, rgba(250, 251, 254, 0) 100%),
    url("../images/fondos/cabecera-puntos.webp") center top / cover no-repeat,
    var(--base);
}
.cabecera-pagina .contenedor { position: relative; z-index: 1; }
/* Menos aire muerto arriba del título */
.cabecera-pagina { padding-top: clamp(2.25rem, 4vw, 3.5rem); }
/* Los títulos de cabecera usan todo el ancho disponible: la columna angosta
   queda solo para los párrafos (evita saltos de línea prematuros del h1) */
.cabecera-pagina .columna-lectura { max-width: none; }
.cabecera-pagina .columna-lectura p { max-width: 46rem; }
.cabecera-pagina h1 { max-width: 30ch; }

/* Cabecera a dos columnas: texto + tarjeta lateral con contenido destacado */
.cabecera-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4.5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.tarjeta-lateral {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sombra-alta);
  padding: 1.9rem;
  margin-top: 2.4rem;   /* alinea ópticamente con el h1 */
}
.tarjeta-lateral h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.tarjeta-lateral ul { list-style: none; padding: 0; margin: 0; }
.tarjeta-lateral li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 0.9rem;
  font-size: 0.97rem;
  color: var(--tinta-suave);
}
.tarjeta-lateral li:last-child { margin-bottom: 0; }
.tarjeta-lateral li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--iris);
  margin-top: 0.15em;
}
.tarjeta-lateral .boton { margin-top: 1.25rem; }
.tarjeta-lateral > p { font-size: 0.97rem; color: var(--tinta-suave); }

/* 10. Quiénes somos y grilla del equipo -------------------------------------- */
/* Chips de los modelos terapéuticos */
.chips-modelos {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.chips-modelos li {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--violeta);
  background: #fff;
  border: 1px solid var(--lavanda-borde);
  border-radius: 99px;
  padding: 0.5em 1.1em;
  box-shadow: var(--sombra-suave);
}

/* Grilla de objetivos: tarjetas compactas con icono */
.grilla-objetivos {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
}
.objetivo {
  margin: 0;
  background: #fff;
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--sombra-suave);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.objetivo:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.objetivo__icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--violeta);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.14), rgba(74, 123, 247, 0.1));
  margin-bottom: 1rem;
}
.objetivo__icono svg { width: 22px; height: 22px; }
.objetivo h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.objetivo p { font-size: 0.92rem; color: var(--tinta-suave); margin: 0; }

/* Solapas (Quiénes somos / Terapia) --------------------------------------- */
.seccion--solapas { padding-top: 0; }
.solapas__nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.35rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--lavanda);
  border: 1px solid var(--lavanda-borde);
  border-radius: 99px;
}
.solapa-boton {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--tinta-suave);
  background: transparent;
  padding: 0.62em 1.5em;
  border-radius: 99px;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.solapa-boton:hover { color: var(--violeta); }
.solapa-boton[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--iris), var(--azul-claro));
  box-shadow: var(--sombra-suave);
}
.solapa-boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.solapa-panel[hidden] { display: none; }
.solapa-panel:focus { outline: none; }
.js .solapa-panel:not([hidden]) { animation: solapa-entra 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes solapa-entra {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Panel Terapia ----------------------------------------------------------- */
.terapia__lema {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 18ch;
  margin: 0 0 1.4rem;
  background: linear-gradient(115deg, var(--violeta) 15%, var(--azul-claro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.terapia__intro { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.terapia__intro p + p { margin-top: 1.1rem; }
.terapia .antetitulo { margin-bottom: 0.6rem; }
.terapia__subtitulo {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin: 0 0 1.75rem;
  color: var(--tinta);
}
.areas-terapia {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.area-terapia {
  margin: 0;
  background: #fff;
  border: 1px solid var(--lavanda-borde);
  border-radius: 18px;
  padding: 1.85rem 1.6rem;
  box-shadow: var(--sombra-suave);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}
.area-terapia:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.area-terapia__icono {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--violeta);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.15), rgba(74, 123, 247, 0.12));
  margin-bottom: 1.15rem;
}
.area-terapia__icono svg { width: 24px; height: 24px; }
.area-terapia h4 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--violeta);
  margin: 0 0 0.95rem;
}
.area-terapia ul { list-style: none; padding: 0; margin: 0; }
.area-terapia li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.55rem;
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.area-terapia li:last-child { margin-bottom: 0; }
.area-terapia li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--iris), var(--azul-claro));
}
.terapia__cierre {
  margin: 0;
  max-width: 62rem;
  background:
    radial-gradient(38rem 20rem at 115% -30%, rgba(74, 123, 247, 0.12), transparent 60%),
    var(--lavanda);
  border: 1px solid var(--lavanda-borde);
  border-left: 4px solid var(--iris);
  border-radius: 18px;
  padding: 1.75rem 1.9rem;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--tinta);
}

.doble-columna {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 2.5rem;
}
.doble-columna > div {
  background: #fff;
  border-radius: 22px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: var(--sombra-suave);
  position: relative;
  overflow: hidden;
}
.doble-columna > div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.12), rgba(74, 123, 247, 0.22));
}

/* Franja de imagen arriba de las tarjetas de misión y visión */
.tarjeta-mv__imagen {
  width: 100%;
  aspect-ratio: 3 / 1.15;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 1.5rem;
}

/* Kit Sensorial: texto + imagen ilustrativa */
.materiales-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.materiales-foto {
  --faceta: 44px;
  box-shadow: var(--sombra-alta);
}
.materiales-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 60%; }

/* Botón flotante de WhatsApp -------------------------------------------------- */
.wsp-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 22px -4px rgba(37, 211, 102, 0.55), 0 2px 6px rgba(35, 39, 70, 0.18);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.wsp-flotante svg { width: 32px; height: 32px; }
.wsp-flotante:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px -4px rgba(37, 211, 102, 0.7), 0 3px 8px rgba(35, 39, 70, 0.2); }
.wsp-flotante:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wsp-flotante { transition: none; } }

.grilla-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}
.grilla-equipo li { margin: 0; }

.retrato {
  position: relative;
  --faceta: 26px;
  background: var(--lavanda);
  box-shadow: var(--sombra-suave);
}
.retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Tratamiento unificador: leve desaturación común; a color al pasar el mouse */
  filter: saturate(0.72) contrast(1.02);
  transition: filter 350ms ease, transform 350ms ease;
}
.retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(91, 79, 196, 0.12), rgba(74, 123, 247, 0.05) 55%, rgba(62, 43, 122, 0.12));
  pointer-events: none;
  transition: opacity 350ms ease;
}
.ficha-integrante:hover .retrato img,
.ficha-integrante:focus-within .retrato img {
  filter: saturate(1) contrast(1);
  transform: scale(1.04);
}
.ficha-integrante:hover .retrato::after,
.ficha-integrante:focus-within .retrato::after { opacity: 0; }

.ficha-integrante h3 { font-size: 1.1rem; margin: 1rem 0 0.15rem; }
.ficha-integrante p { font-size: 0.92rem; color: var(--tinta-suave); margin: 0; }

/* 11. Evaluaciones ------------------------------------------------------------ */
.lista-evaluaciones { list-style: none; padding: 0; margin: 3.5rem 0 0; }
.lista-evaluaciones li {
  margin: 0;
  padding: 2.25rem 1.25rem;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 1rem 3rem;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.lista-evaluaciones li + li { border-top: 1px solid var(--lavanda-borde); }
.lista-evaluaciones li:hover { background: #fff; box-shadow: var(--sombra-suave); }
.lista-evaluaciones h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
/* Icono contextual de cada área de evaluación */
.evaluacion__icono {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--violeta);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.14), rgba(74, 123, 247, 0.1));
  margin-bottom: 0.9rem;
}
.evaluacion__icono svg { width: 23px; height: 23px; }
.evaluacion__meta {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--iris);
  margin: 0.5rem 0 0;
}
.lista-evaluaciones > li > p { color: var(--tinta-suave); margin: 0; align-self: center; }

/* 12. Guías, talleres y tarjetas --------------------------------------------- */
.grilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--sombra-suave);
  position: relative;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
/* Arista facetada en el vértice superior derecho de cada tarjeta */
.tarjeta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.12), rgba(74, 123, 247, 0.24));
}

.tarjeta > img {
  border-radius: 12px;
  margin-bottom: 0.5rem;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Guías: las portadas son tapas verticales completas (posters de libro).
   Se muestran enteras, sin recorte, con un borde sutil que las enmarca. */
#catalogo-guias .tarjeta > img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--lavanda-borde);
}
/* Talleres: todas las imágenes con el mismo tamaño (formato afiche 2:3).
   El flyer es 2:3 exacto → se ve entero; los fondos abstractos se recortan. */
#talleres-activos .tarjeta > img,
#talleres-realizados .tarjeta > img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.tarjeta__categoria {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violeta);
  background: var(--lavanda);
  border-radius: 8px;
  padding: 0.35em 0.9em;
}

.tarjeta h3 { margin: 0.2rem 0 0; font-size: 1.3rem; }
.tarjeta__descripcion { color: var(--tinta-suave); font-size: 0.98rem; flex-grow: 1; }
.tarjeta__meta { font-size: 0.9rem; color: var(--tinta-suave); margin: 0; }
.tarjeta__meta strong { color: var(--tinta); font-weight: 600; }
.tarjeta .boton { margin-top: 1rem; align-self: flex-start; }

.tarjeta__estado {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 0.35em 0.9em;
}
.tarjeta__estado--abierto { background: #e3f2e8; color: #1e6b3c; }
.tarjeta__estado--proximo { background: var(--lavanda); color: var(--violeta); }
.tarjeta__estado--finalizado { background: #eeeef2; color: var(--tinta-suave); }

.estado-vacio {
  margin-top: 3rem;
  padding: 3rem clamp(1.5rem, 4vw, 3rem);
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--sombra-suave);
  max-width: 46rem;
}
.estado-vacio h3 { margin-bottom: 0.4rem; }

.nota-aclaratoria {
  margin-top: 2.5rem;
  padding: 1.6rem 1.9rem;
  background: #fff;
  border-left: 4px solid var(--iris);
  border-radius: 0 18px 18px 0;
  box-shadow: var(--sombra-suave);
  font-size: 0.98rem;
  color: var(--tinta-suave);
  max-width: 46rem;
}

/* Banda full-bleed con foto real del equipo y cita destacada encima */
.banda-foto {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
.banda-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/equipo-grupal-1600.webp") center 30% / cover no-repeat;
}
.banda-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(30, 21, 62, 0.9), rgba(42, 30, 86, 0.75) 55%, rgba(42, 30, 86, 0.55));
}
.banda-foto .contenedor { position: relative; z-index: 1; }
.banda-foto blockquote {
  margin: 0;
  color: #fff;
  border-image: linear-gradient(180deg, #b9c2f2, #7f92ec) 1;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  max-width: 46rem;
}

/* Foto real en la cabecera (contacto) */
.cabecera-foto {
  --faceta: 40px;
  box-shadow: var(--sombra-alta);
  margin-top: 2.4rem;
}
.cabecera-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 13. CTA full-width ------------------------------------------------------------ */
/* Franja de contacto de ancho completo, violeta profundo, con el fondo
   abstracto generado (images/fondos/cta-malla.webp) derivando lentamente.
   El velo oscuro a la izquierda garantiza contraste AA del texto blanco. */
.cta-full {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--violeta-noche);
}
/* Capa de imagen sobredimensionada que deriva en diagonal (solo transform,
   acelerado por GPU); se detiene con prefers-reduced-motion */
.cta-full::before {
  content: "";
  position: absolute;
  inset: -7%;
  background: url("../images/fondos/cta-malla.webp") center / cover no-repeat;
  animation: fondo-derivar 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fondo-derivar {
  from { transform: translate3d(-1.6%, -1.2%, 0) scale(1); }
  to   { transform: translate3d(1.6%, 1.2%, 0) scale(1.07); }
}
.cta-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(30, 21, 62, 0.92) 0%, rgba(36, 25, 74, 0.72) 45%, rgba(42, 30, 86, 0.3) 100%);
}
.cta-full .contenedor { position: relative; z-index: 1; }
.cta-full h2 { color: #fff; max-width: 24ch; }
.cta-full p { color: #cfd3ec; max-width: 40rem; }
.cta-full .antetitulo { color: #b9c2f2; }
.cta-full .boton--secundario {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.cta-full .boton--secundario:hover { border-color: #fff; color: #fff; }

/* 14. Contacto ---------------------------------------------------------------- */
.lista-contacto { list-style: none; padding: 0; margin: 3rem 0 0; max-width: 46rem; }
.lista-contacto li {
  margin: 0 0 1.25rem;
  padding: 1.75rem 2rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sombra-suave);
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr);
  gap: 0.5rem 2rem;
}
.contacto__etiqueta {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.08rem;
}
.lista-contacto .contacto__valor { color: var(--tinta-suave); }
.lista-contacto .contacto__valor a { font-weight: 500; }

/* 15. Footer ------------------------------------------------------------------ */
.pie {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50rem 26rem at 100% 0%, rgba(91, 79, 196, 0.25), transparent 55%),
    linear-gradient(180deg, var(--tinta), #1c1836);
  color: #c9cde3;
  padding-block: 4rem 2rem;
  font-size: 0.95rem;
}
.pie::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: clamp(200px, 24vw, 380px);
  height: clamp(200px, 24vw, 380px);
  left: -6%;
  bottom: -34%;
  clip-path: polygon(0 35%, 62% 0, 100% 78%, 30% 100%);
  background: linear-gradient(135deg, rgba(91, 79, 196, 0.18), rgba(74, 123, 247, 0.06));
}
.pie__grilla {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 2.5rem;
  align-items: start;
}
.pie__marca { display: flex; flex-direction: column; gap: 0.9rem; }
.pie__marca img { width: 60px; }
.pie__marca strong {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.15;
}
.pie nav ul { list-style: none; padding: 0; margin: 0; }
.pie nav li { margin-bottom: 0.55rem; }
.pie a { color: #c9cde3; text-decoration: none; transition: color 150ms ease; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__titulo {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d93b8;
  margin-bottom: 1rem;
}
.pie__legal {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 205, 227, 0.18);
  font-size: 0.85rem;
  color: #8d93b8;
}
.pie__legal p { margin-bottom: 0.4em; }

/* 16. Animaciones y reduced motion ---------------------------------------------- */
/* Revelado al entrar en pantalla: una sola vez, sutil. Sin JS todo es visible. */
.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .revelar.visible { opacity: 1; transform: none; }

/* Cascada suave en grillas: los ítems entran con pequeños retrasos */
.js .grilla-tarjetas > .tarjeta:nth-child(3n+2),
.js .grilla-equipo > li:nth-child(3n+2),
.js .grilla-enfoques > li:nth-child(2) { transition-delay: 90ms; animation-delay: 90ms; }
.js .grilla-tarjetas > .tarjeta:nth-child(3n),
.js .grilla-equipo > li:nth-child(3n),
.js .grilla-enfoques > li:nth-child(3) { transition-delay: 180ms; animation-delay: 180ms; }
.js .grilla-enfoques > li:nth-child(4) { transition-delay: 270ms; }
.js .grilla-enfoques > li:nth-child(5) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .js .grilla-enfoques li.revelar { transition: none; }
  .grilla-enfoques li:hover, .js .grilla-enfoques li.revelar:hover { transform: none; }
  .js .hero__texto > *, .js .hero__cerebro { animation: none; opacity: 1; }
  .hero__cerebro, .hero h1 em, .cta-full::before,
  .red-neuronal .nodo, .red-neuronal .senal { animation: none !important; }
  .red-neuronal .senal { opacity: 0; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 17. Responsive ----------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero__cerebro { width: clamp(300px, 38vw, 480px); right: -8%; opacity: 0.9; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .red-neuronal { display: none; }
  .hero__texto { max-width: 36rem; }
  .hero__cerebro {
    position: static;
    transform: none;
    width: clamp(170px, 30vw, 240px);
    margin-bottom: 1.75rem;
    animation: none;
    filter: drop-shadow(0 20px 30px rgba(62, 43, 122, 0.2));
  }
  .js .hero__cerebro { animation: none; opacity: 1; }
  .hero .contenedor { display: flex; flex-direction: column; align-items: flex-start; }

  .grilla-enfoques { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .equipo-editorial { display: block; }
  .equipo-editorial__texto { padding-block: 0 2rem; }
  .equipo-editorial__texto h2 { width: auto; }
  .equipo-editorial__texto p { max-width: 34rem; }

  .doble-columna { grid-template-columns: 1fr; }
  .materiales-grid { grid-template-columns: 1fr; }
  .lista-evaluaciones li { grid-template-columns: 1fr; gap: 0.6rem; }
  .cabecera-grid { grid-template-columns: 1fr; }
  .tarjeta-lateral { margin-top: 0; }
  .pie__grilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .boton-menu { display: block; }
  .nav-principal {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--base);
    border-bottom: 1px solid var(--lavanda-borde);
    box-shadow: 0 20px 30px -20px rgba(62, 43, 122, 0.3);
    padding: 0.5rem var(--pad-lateral) 1.25rem;
  }
  .nav-principal.abierta { display: block; }
  .nav-principal ul { flex-direction: column; gap: 0.15rem; }
  .nav-principal a { display: block; padding: 0.7em 0.8em; font-size: 1.05rem; }

  .lista-areas a { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; }
  .lista-areas .area__icono { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .lista-areas .area__icono svg { width: 20px; height: 20px; }
  .lista-areas .area__nombre { grid-column: 2; grid-row: 1; }
  .lista-areas .area__flecha { grid-column: 3; grid-row: 1; }
  .lista-areas .area__detalle { grid-column: 1 / -1; grid-row: 2; margin-top: -0.35rem; }

  .lista-contacto li { grid-template-columns: 1fr; }
  .pie__grilla { grid-template-columns: 1fr; gap: 2rem; }

  .equipo-destacado__tarjeta { margin: -2.5rem 0.75rem 0; max-width: none; }
}

@media (max-width: 400px) {
  body { font-size: 1rem; }
  .grilla-enfoques { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .grilla-enfoques li { padding: 1.25rem 1rem 1.1rem; }
  .grilla-equipo { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .ficha-integrante h3 { font-size: 0.95rem; }
  .ficha-integrante p { font-size: 0.82rem; }
  .panel-cta { border-radius: 20px; }
}