/*
Theme Name: Sensorial
Theme URI: https://sensorial.org.ec
Author: Fundación Sensorial
Description: Tema de bloques para sensorial.org.ec. Implementa el sistema gráfico de DESIGN.md (21-09-2026). Sin plugins de maquetación.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sensorial
Tags: block-theme, accessibility-ready, translation-ready
*/

/* ==========================================================================
   Modo oscuro — redefine los tokens de theme.json.

   EL SITIO SALE SIEMPRE EN CLARO. Antes seguía a `prefers-color-scheme`, así que
   a quien tuviera el sistema en oscuro le aparecía oscuro sin haberlo pedido, y
   ésa no es la primera impresión que queremos dar. Ahora el modo oscuro es una
   elección explícita: se activa con el interruptor y se recuerda en el navegador.

   Si algún día se quiere volver a seguir al sistema, basta con envolver el bloque
   de abajo en `@media (prefers-color-scheme: dark) { html:not([data-tema="claro"]) }`,
   que es justo lo que se quitó.
   ========================================================================== */

:root { color-scheme: light; }

html[data-tema="oscuro"] {
  color-scheme: dark;
  --wp--preset--color--fondo: #15191A;
  --wp--preset--color--superficie: #1E2426;
  --wp--preset--color--superficie-2: #262D2F;
  --wp--preset--color--linea: #384143;
  --wp--preset--color--linea-fuerte: #52605F;
  --wp--preset--color--tinta: #F2EEE8;
  --wp--preset--color--tinta-2: #C8C2B8;
  --wp--preset--color--tinta-3: #9A938A;
  --wp--preset--color--turquesa-texto: #4FB8C2;
  --wp--preset--color--turquesa-oscuro: #7FCCD4;
  --wp--preset--color--turquesa-100: #173538;
  --wp--preset--color--turquesa-200: #1F4A4E;
  --wp--preset--color--enlace: #6FB8DA;
  --wp--preset--color--ambar: #E5AE4F;
  --wp--preset--color--ambar-texto: #F1CE8A;
  --wp--preset--color--ambar-100: #332A17;
  --wp--preset--color--error: #F0A092;
  --wp--preset--color--error-100: #3A2320;
  --sn-texto-boton: #0F1F21;
  --sn-sombra: 0 8px 24px rgba(0,0,0,.5);
}

:root {
  --sn-texto-boton: #FFFFFF;
  --sn-sombra: 0 8px 24px rgba(31,29,27,.10);
  --sn-transicion: 160ms ease-out;
}

/* El texto del botón principal cambia en oscuro (DESIGN.md §8 «Botones») */
.wp-block-button__link { color: var(--sn-texto-boton) !important; }

/* ==========================================================================
   Base
   ========================================================================== */

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { text-wrap: balance; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--turquesa);
  outline-offset: 3px;
}

/* Toque mínimo 48×48 (DESIGN.md §5) */
.wp-block-button__link,
.sn-icono-red,
.sn-menu-boton { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Antetítulo
   ========================================================================== */

.sn-ante {
  font-size: var(--wp--preset--font-size--ante);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--tinta-3);
  margin: 0;
}

.sn-ante--claro { color: #FFFFFF; display: flex; align-items: center; gap: 10px; }
.sn-ante--claro::before {
  content: ""; width: 10px; height: 10px; border-radius: 999px;
  /* Literal: este antetítulo solo se usa sobre el héroe, que no cambia entre modos. */
  background: #D9962B; flex: none;
}

/* ==========================================================================
   Cabecera — DESIGN.md §8
   ========================================================================== */

/* Las tres piezas de primer nivel —cabecera, main y pie— cuelgan de `.wp-site-blocks`,
   no del `main`, así que el `blockGap` del raíz dejaba 24 px entre la cabecera y el
   héroe. Se anula solo en ese nivel: el espaciado interno de las páginas no se toca. */
.wp-site-blocks > * { margin-block-start: 0; }

.sn-cabecera {
  position: static;
  /* Altura exacta de DESIGN.md §8: 72 px. Sin padding vertical —lo llevaba y la subía
     a 86—; el contenido se centra con flex dentro del alto mínimo. */
  min-height: 72px;
  display: flex;
  align-items: center;
  padding-block: 0;
  background: var(--wp--preset--color--fondo);
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
.sn-cabecera > * { width: 100%; }
.sn-cabecera img { height: 40px; width: auto; }

.sn-nav a {
  font-size: var(--wp--preset--font-size--cuerpo);
  color: var(--wp--preset--color--tinta);
  text-decoration: none;
  transition: color var(--sn-transicion);
}
.sn-nav a:hover { color: var(--wp--preset--color--turquesa-texto); text-decoration: underline; }
/* Entre 900px y el ancho en que la cabecera va holgada, el botón de la derecha se
   queda sin sitio y parte la palabra por la mitad —se leía «Don ar»—. No se corrige
   ensanchando la cabecera, porque el que aprieta es el menú: basta con prohibirle
   al botón que parta. */
.sn-nav .wp-block-button__link { white-space: nowrap; }

@media (max-width: 899px) {
  .sn-cabecera { min-height: 64px; }
  .sn-cabecera img { height: 36px; }
}

/* ==========================================================================
   Héroe de Inicio — DESIGN.md §8
   ========================================================================== */

.sn-heroe {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Literal, no el token: el héroe es oscuro en los DOS modos (DESIGN.md §2.2 «el héroe
     y el pie no cambian entre modos»). `--tinta` es el color de TEXTO y en modo oscuro
     vale crema, así que usarlo de fondo invertía el bloque y dejaba texto blanco sobre
     crema. Mismo criterio que el pie. */
  background: #1F1D1B;
}
.sn-heroe__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.sn-heroe::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,18,17,.88) 0%, rgba(20,18,17,.55) 45%, rgba(20,18,17,.10) 100%),
    linear-gradient(to right, rgba(20,18,17,.55) 0%, rgba(20,18,17,0) 60%);
}
.sn-heroe__cuerpo {
  position: relative;
  /* 760 de columna de texto + 48 de padding a cada lado. El `box-sizing` va explícito
     aquí y no se hereda del reset: en staging una hoja ajena lo pisaba y el bloque
     salía 96 px más ancho, empujando el texto sobre la laptop de la imagen. */
  box-sizing: border-box;
  max-width: 856px;
  padding: 0 48px 72px;
  color: #FFFFFF;
}

/* Variante con el texto a la derecha: se usa cuando el foco de la imagen está a la
   izquierda. El degradado horizontal se invierte con ella. */
.sn-heroe--derecha { justify-content: flex-end; }
.sn-heroe--derecha::before {
  background:
    linear-gradient(to bottom, rgba(20,18,17,.88) 0%, rgba(20,18,17,.55) 45%, rgba(20,18,17,.10) 100%),
    /* Calibrado sobre la foto definitiva simulando el recorte real del héroe —1440×680,
       `object-position: 30% center`— y midiendo el PEOR punto dentro de cada caja de
       texto, con media local de 5×5 px, que es el grosor de un trazo.

       Lo que fallaba no era la opacidad máxima sino la CAÍDA: bajo el titular hay un
       píxel de luminancia 0,999 —la página blanca del cuaderno, una superficie grande y
       continua, no ruido— y el degradado ya se había desvanecido ahí. Por eso ahora hay
       una meseta que cubre la columna de texto entera y la caída empieza fuera de ella.

       Medido con estos valores: antetítulo 6,14:1 · titular 4,62:1 (umbral 3 por ser
       texto grande) · bajada 5,66:1. Es el valor más bajo probado que pasa con margen:
       apagar más la foto era el reparo original. Se desvía del .55 de DESIGN.md §8
       porque el documento no conocía esta imagen. */
    linear-gradient(to left, rgba(20,18,17,.78) 0%, rgba(20,18,17,.76) 50%, rgba(20,18,17,.28) 66%, rgba(20,18,17,0) 80%);
}

/* El punto de interés es la persona y sus manos, a la izquierda. Al recortar en
   pantallas anchas se conserva ese lado; el derecho, que es donde va el texto, es el
   que puede perderse sin costo. */
.sn-heroe--derecha .sn-heroe__img { object-position: 30% center; }
.sn-heroe--derecha .sn-heroe__cuerpo { text-align: left; }
.sn-heroe h1 {
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 600;
  color: #FFFFFF;
  margin: 12px 0 14px;
}
.sn-heroe__bajada {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.45;
  color: #EDE8E0;
  margin: 0 0 28px;
}
.sn-heroe__linea {
  position: absolute; bottom: 0; left: 0; right: 0;
  /* Literal por el mismo motivo que el fondo: el héroe no cambia entre modos. */
  height: 8px; background: #098D9A;
}

/* Botón ámbar: excepción única, solo sobre fotografía (DESIGN.md §2) */
/* Los dos botones del héroe son anclas sueltas, no bloques de WordPress: necesitan su
   propio centrado. Sin `display:flex` el `height` no se aplica y el texto queda arriba
   a la izquierda, que es como se veía en el teléfono. La maqueta los centra con flex. */
.sn-boton-ambar,
.sn-boton-contorno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--sn-transicion);
}

.sn-boton-ambar .wp-block-button__link,
a.sn-boton-ambar {
  /* Literales: el botón vive sobre el héroe, que es oscuro en los dos modos. Con el
     token, en oscuro el ámbar se aclaraba y el botón cambiaba de color sin motivo. */
  background: #D9962B;
  color: #1F1D1B !important;
}
.sn-boton-ambar:hover .wp-block-button__link,
a.sn-boton-ambar:hover { background: #F0AE45; }

.sn-boton-contorno {
  background: transparent;
  color: #FFFFFF !important;
  border: 1.5px solid #FFFFFF;
}
.sn-boton-contorno:hover { background: rgba(255,255,255,.14); }

@media (max-width: 599px) {
  .sn-heroe {
    min-height: 0; display: block;
    background: #1F1D1B;
  }
  .sn-heroe::before { display: none; }
  .sn-heroe__img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .sn-heroe__cuerpo {
    position: relative;
    margin-top: -56px;
    padding: 0 16px 40px;
  }
  /* El degradado acaba en el BORDE INFERIOR DE LA FOTO, no donde empieza el texto.
     La maqueta lo ancla a la imagen. Anclado al texto, los 56 px de solape quedan sin
     nada encima y ahí caía el antetítulo —blanco, 13 px— sobre la foto cruda.
     La foto termina 56 px bajo el inicio del cuerpo: -104 + 160 = +56.

     160 px y no los 120 de DESIGN.md §8, medido sobre la foto definitiva: en la franja
     donde cae el antetítulo el punto más claro de la imagen —la maceta del borde
     derecho— dejaba el blanco en 3,23:1, por debajo del 4,5 que exige un texto de 13 px.
     Con 160 px la media iba sobrada pero el peor punto se quedaba en 4,47:1, tres
     centésimas por debajo del umbral. Con 200 px la opacidad a esa altura sube de 0,65
     a 0,72 y el peor punto queda holgado. El documento no conocía esta imagen. */
  .sn-heroe__cuerpo::before {
    content: ""; position: absolute; left: 0; right: 0; top: -144px; height: 200px;
    background: linear-gradient(to bottom, rgba(31,29,27,0), #1F1D1B);
    pointer-events: none;
  }
  /* El `::before` está POSICIONADO y sus hermanos no, así que se pinta por encima del
     texto aunque vaya antes en el DOM: los elementos posicionados forman una capa que va
     sobre el contenido estático. El degradado velaba el antetítulo y los primeros 27 px
     del `h1`, y eso era la línea que cortaba «Construimos» por la mitad.
     Al posicionar los hijos, pasan a la misma capa y el orden del DOM decide. */
  .sn-heroe__cuerpo > * { position: relative; }
  .sn-heroe .wp-block-buttons { flex-direction: column; }
  .sn-heroe .wp-block-button { width: 100%; }
  .sn-heroe .wp-block-button__link,
  .sn-heroe a.sn-boton-ambar,
  .sn-heroe a.sn-boton-contorno { width: 100%; }
  .sn-heroe__linea { position: static; height: 6px; }
}

/* ==========================================================================
   Cuatro puertas — DESIGN.md §8 «Tarjeta puerta»
   ========================================================================== */

/* Fondo literal, no el token. `--turquesa-oscuro` se redefine en modo oscuro a #7FCCD4
   —un turquesa claro— y esta banda lleva el texto en blanco fijo: en oscuro daba 1,83:1.
   Es una superficie oscura por diseño, no un color que deba seguir el tema. Ver la regla
   al final de este archivo. */
.sn-puertas { background: #055A63; }
.sn-puertas h2, .sn-puertas .sn-puertas__bajada { color: #FFFFFF; }
.sn-puertas .sn-puertas__bajada { color: #E3F3F4; font-size: var(--wp--preset--font-size--lead); }

.sn-rejilla-puertas {
  display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px;
}
@media (min-width: 600px) { .sn-rejilla-puertas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sn-rejilla-puertas { grid-template-columns: repeat(4, 1fr); } }

.sn-puerta {
  display: block;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  padding: 28px 24px;
  text-decoration: none;
  transition: border-color var(--sn-transicion);
}
.sn-puerta:hover { border-color: var(--wp--preset--color--linea-fuerte); }
.sn-puerta__num {
  display: block; font-size: 2.125rem; font-weight: 600; line-height: 1;
  color: var(--wp--preset--color--turquesa);
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.sn-puerta h3 { margin: 0 0 8px; color: var(--wp--preset--color--tinta); }
.sn-puerta p { margin: 0 0 14px; color: var(--wp--preset--color--tinta-2); }
.sn-puerta__ir {
  color: var(--wp--preset--color--enlace);
  text-decoration: underline; text-underline-offset: 3px;
  font-size: var(--wp--preset--font-size--peq); font-weight: 600;
}

/* ==========================================================================
   Línea de cifras — DESIGN.md §8
   ========================================================================== */

.sn-cifras { background: var(--wp--preset--color--ambar-100); }
.sn-cifras p {
  max-width: 1100px; margin: 0;
  /* 26 px en escritorio, como la maqueta. No usa `--lead` (22) porque esta frase es la
     única de la portada que lleva cifras intercaladas y necesita más cuerpo para que
     los números no la dominen. La tabla de DESIGN.md §3.1 dice 22; la maqueta dice 26,
     y es la maqueta la que Damián aprobó mirando. */
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  line-height: 1.5; color: var(--wp--preset--color--tinta-2);
}
.sn-cifras strong {
  font-size: var(--wp--preset--font-size--cifra);
  line-height: 1; font-weight: 600;
  color: var(--wp--preset--color--turquesa-texto);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Cómo se financia
   ========================================================================== */

.sn-financia { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .sn-financia { grid-template-columns: 5fr 7fr; gap: 64px; } }
.sn-financia img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; display: block;
}
.sn-regla-ambar { width: 48px; height: 4px; background: var(--wp--preset--color--ambar); border: 0; margin: 0 0 18px; }

/* ==========================================================================
   Agenda y entrevistas
   ========================================================================== */

.sn-dos-columnas { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .sn-dos-columnas { grid-template-columns: 1fr 1fr; gap: 64px; } }

.sn-lista-tarjeta {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px; overflow: hidden; margin: 20px 0;
}
.sn-actividad {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--linea);
  transition: background var(--sn-transicion);
}
.sn-actividad:last-child { border-bottom: 0; }
.sn-actividad:hover { background: var(--wp--preset--color--fondo); }
.sn-fecha {
  flex: none; width: 56px; height: 56px; border-radius: 8px;
  background: var(--wp--preset--color--turquesa-100);
  color: var(--wp--preset--color--turquesa-texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sn-fecha b { font-size: 1.25rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.sn-fecha span { font-size: var(--wp--preset--font-size--ante); text-transform: uppercase; letter-spacing: .08em; }
.sn-actividad__t { font-size: var(--wp--preset--font-size--cuerpo); font-weight: 600; color: var(--wp--preset--color--tinta); margin: 0 0 4px; }
.sn-actividad__m { font-size: var(--wp--preset--font-size--peq); color: var(--wp--preset--color--tinta-3); margin: 0; }

.sn-entrevista { display: flex; gap: 16px; align-items: center; padding: 16px 0; text-decoration: none; }
.sn-entrevista img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex: none; }
@media (max-width: 899px) { .sn-entrevista img { width: 72px; height: 72px; } }

.sn-enlace-mas {
  display: inline-block;
  color: var(--wp--preset--color--enlace);
  text-decoration: underline; text-underline-offset: 3px;
  font-weight: 600;
}

/* ==========================================================================
   Etiqueta pill y estados vacíos — DESIGN.md §8
   ========================================================================== */

.sn-pill {
  display: inline-block; font-size: var(--wp--preset--font-size--peq);
  background: var(--wp--preset--color--turquesa-100);
  color: var(--wp--preset--color--turquesa-texto);
  padding: 4px 12px; border-radius: 999px;
}

.sn-franja-pasadas {
  background: var(--wp--preset--color--ambar-100);
  color: var(--wp--preset--color--ambar-texto);
  font-size: var(--wp--preset--font-size--peq);
  padding: 12px 24px; margin: 0;
  border-bottom: 1px solid var(--wp--preset--color--linea);
}

.sn-vacio {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px; padding: 24px;
}
.sn-vacio form { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; }
.sn-vacio input[type="email"] {
  flex: 1 1 220px; height: 48px; padding: 0 14px;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea-fuerte);
  border-radius: 8px; color: var(--wp--preset--color--tinta);
  font: inherit;
}
.sn-nota { font-size: var(--wp--preset--font-size--peq); color: var(--wp--preset--color--tinta-3); margin: 0; }

/* ==========================================================================
   Pie — DESIGN.md §8. Oscuro en los dos modos.
   ========================================================================== */

.sn-pie {
  background: #1F1D1B;
  color: #F2EEE8;
  padding-top: 64px; padding-bottom: 40px;
}
.sn-pie a { color: #F2EEE8; text-decoration: none; }
.sn-pie a:hover { text-decoration: underline; }
.sn-pie img { height: 56px; width: auto; }
.sn-pie h2, .sn-pie h3 { color: #F2EEE8; }
.sn-pie .sn-ante { color: #9A938A; }
.sn-pie__meta { color: #9A938A; font-size: var(--wp--preset--font-size--peq); }
.sn-pie__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* Las celdas de una rejilla no se encogen por debajo de su contenido salvo que se les
   diga: sin `min-width: 0`, un correo largo como el institucional empuja su columna
   y saca 27 px de barrido lateral a TODAS las páginas. Medido a 375 px. */
.sn-pie__rejilla > * { min-width: 0; }
.sn-pie a, .sn-pie__lista, .sn-pie .sn-ante { overflow-wrap: anywhere; }
@media (max-width: 480px) { .sn-pie__rejilla { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .sn-pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.sn-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.sn-validar {
  color: #6FB8DA !important;
  text-decoration: underline !important; text-underline-offset: 3px;
  font-weight: 600;
}

.sn-redes { display: flex; gap: 8px; margin-top: 16px; }
.sn-icono-red {
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid #52605F; color: currentColor;
  transition: background var(--sn-transicion), border-color var(--sn-transicion);
}
.sn-icono-red:hover { background: var(--wp--preset--color--turquesa); border-color: var(--wp--preset--color--turquesa); }
.sn-icono-red svg { width: 20px; height: 20px; }

.sn-pie__cierre {
  border-top: 1px solid #384143;
  margin-top: 40px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
}
/* El interruptor de claro/oscuro. Vivía en el pie, que es oscuro siempre, y por eso
   llevaba el borde y el texto escritos a mano en claro. Ahora vive en la cabecera, que
   cambia de color con el tema: con aquellos valores fijos quedaba texto casi blanco
   sobre fondo blanco. Va con tokens, que es lo que lo hace seguir al tema.

   Es deliberadamente discreto: compite en la misma fila con «Apoyar», y el que tiene
   que llamar la atención es «Apoyar». */
.sn-tema-boton {
  background: transparent;
  border: 1px solid var(--wp--preset--color--linea);
  color: var(--wp--preset--color--tinta-2);
  border-radius: 8px; height: 44px; padding: 0 14px; font: inherit; font-size: .9rem;
  cursor: pointer;
  transition: border-color var(--sn-transicion), color var(--sn-transicion);
}
.sn-tema-boton:hover {
  border-color: var(--wp--preset--color--turquesa);
  color: var(--wp--preset--color--tinta);
}
/* Dentro del menú móvil ocupa su propia línea, separado de los enlaces. */
.sn-panel .sn-tema-boton { margin-top: 24px; width: 100%; }

/* ==========================================================================
   Menú móvil
   ========================================================================== */

.sn-menu-boton {
  width: auto; min-width: 48px; height: 48px; padding: 0 14px;
  background: transparent; border: 1px solid var(--wp--preset--color--linea-fuerte);
  border-radius: 8px; color: var(--wp--preset--color--tinta); font: inherit; cursor: pointer;
}
.sn-panel {
  position: fixed; inset: 0; z-index: 90;
  background: var(--wp--preset--color--fondo);
  box-shadow: var(--sn-sombra);
  padding: 24px 16px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  overflow-y: auto;
}
.sn-panel ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.sn-panel a {
  display: block; padding: 14px 4px; font-size: var(--wp--preset--font-size--lead);
  color: var(--wp--preset--color--tinta); text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--linea);
}

@media (min-width: 900px) { .sn-solo-movil { display: none !important; } }
@media (max-width: 899px) { .sn-solo-escritorio { display: none !important; } }

/* ==========================================================================
   Utilidades de sección
   ========================================================================== */

/* Las bandas de la portada se tocan: en la maqueta no hay aire entre secciones y ese
   hueco se lee como un borde. WordPress reparte `blockGap` entre los hijos del grupo
   `main`, así que el margen se anula aquí además de poner `blockGap: 0` en theme.json. */
.sn-seccion, .sn-puertas, .sn-cifras, .sn-heroe { margin-block: 0; }
.sn-seccion { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); }
.sn-ancho { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.sn-texto { max-width: 68ch; }
.sn-solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Respaldo tipográfico cuando una entrevista no tiene imagen destacada.
   Hoy ninguna de las 22 la tiene, y conseguirlas significa pedir 22 permisos.
   Con esto el listado no queda cojo y no bloquea la portada. */
.sn-entrevista__marca {
  flex: none;
  width: 96px; height: 96px; border-radius: 10px;
  background: var(--wp--preset--color--turquesa-100);
  color: var(--wp--preset--color--turquesa-texto);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.125rem; font-weight: 600; line-height: 1;
}
@media (max-width: 899px) {
  .sn-entrevista__marca { width: 72px; height: 72px; font-size: 1.5rem; }
}

/* ==========================================================================
   REGLA QUE NO SE SALTA
   ==========================================================================

   Ningún token que se redefina en modo oscuro puede usarse como FONDO si el
   texto que va encima es un color fijo.

   Ya ocurrió dos veces el 22-09-2026, en dos sitios distintos y con dos tokens
   distintos:

     · El héroe usaba `--tinta` de fondo. En oscuro `--tinta` vale crema, así que
       el bloque se invertía y quedaba texto blanco sobre crema.
     · La banda de puertas usaba `--turquesa-oscuro` de fondo. En oscuro vale
       #7FCCD4, y con el texto blanco fijo daba 1,83:1.

   Los dos son el mismo error: un token pensado para TEXTO —o que cambia de
   claridad entre modos— usado como superficie, con lo de encima sin cambiar.

   Cuando una superficie es oscura por diseño y no debe seguir el tema, su color
   va literal, con un comentario diciendo por qué. Hoy son tres: el héroe, la
   banda de puertas y el pie.

   Y al medir contraste, medir en los DOS modos y por las DOS vías: la
   preferencia del sistema y el interruptor del pie. El primero de estos fallos
   pasó dos veces por delante de una medición hecha en un solo modo.

   ---

   SEGUNDA REGLA, de la misma familia pero por otro motivo: orden de pintado.

   Un `::before` absoluto con color se pinta POR ENCIMA de los hermanos estáticos,
   aunque vaya antes en el DOM: los elementos posicionados forman una capa sobre el
   contenido sin posicionar. Si ese pseudoelemento lleva un degradado o un velo, hay
   que posicionar también a los hermanos —`position: relative`— o el adorno acaba
   tapando el texto que debía realzar.

   Pasó el 22-09-2026 en el héroe móvil: el degradado velaba el antetítulo y los
   primeros 27 px del titular. El héroe de escritorio no lo sufre porque allí el
   degradado cuelga de `.sn-heroe::before`, hermano de la imagen y no del texto.

   Y la lección de método: **esto no se ve leyendo el CSS, hay que mirar la página.**
   Una medición de contraste tampoco lo detecta, porque calcula el degradado como
   fondo cuando en realidad está delante.
   ========================================================================== */

/* ==========================================================================
   Páginas interiores
   ==========================================================================
   No introducen componentes nuevos: componen con la retícula, la regla ámbar,
   la banda alterna y las tarjetas que ya define DESIGN.md §8. El sistema se
   fijó con la portada; las interiores lo usan.
   ========================================================================== */

.sn-intro { max-width: 68ch; }
.sn-intro h1 { margin: 0 0 14px; }
.sn-lead {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.45;
  color: var(--wp--preset--color--tinta-2);
  margin: 0 0 18px;
}
.sn-cierre-seccion {
  max-width: 68ch;
  margin: 28px 0 0;
  color: var(--wp--preset--color--tinta-2);
}

/* Banda alterna. Se usa para separar secciones sin líneas: el cambio de papel
   a `--superficie-2` basta y evita sumar bordes, que DESIGN.md §5 reserva para
   tarjetas y campos. */
.sn-banda { background: var(--wp--preset--color--superficie-2); }

/* Los cuatro ejes. Lista numerada, no tarjetas: son conceptos, no destinos,
   y una tarjeta invita a hacer clic donde no hay a dónde ir. */
.sn-ejes {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 600px) { .sn-ejes { grid-template-columns: 1fr 1fr; gap: 32px 48px; } }
.sn-ejes li { margin: 0; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--linea-fuerte); }
.sn-ejes__num {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--wp--preset--font-size--ante);
  letter-spacing: .08em;
  color: var(--wp--preset--color--turquesa-texto);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.sn-ejes h3 { margin: 0 0 6px; }
.sn-ejes p { margin: 0; color: var(--wp--preset--color--tinta-2); }

/* Misión y visión. Dos bloques iguales: ninguno se destaca sobre el otro. */
.sn-mv { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .sn-mv { grid-template-columns: 1fr 1fr; gap: 32px; } }
.sn-mv__bloque {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-left: 3px solid var(--wp--preset--color--turquesa);
  border-radius: 16px;
  padding: 24px 26px;
}
.sn-mv__bloque p:last-child { margin: 0; color: var(--wp--preset--color--tinta-2); }
.sn-mv .sn-ante { margin-bottom: 10px; }

/* Datos institucionales. Lista de definiciones: es un registro, no un texto. */
.sn-datos { margin: 24px 0 0; display: grid; gap: 0; max-width: 68ch; }
.sn-datos > div {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 14px 0; border-bottom: 1px solid var(--wp--preset--color--linea);
}
@media (min-width: 600px) { .sn-datos > div { grid-template-columns: 200px 1fr; gap: 24px; } }
.sn-datos dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--wp--preset--font-size--ante);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--tinta-3);
}
.sn-datos dd { margin: 0; color: var(--wp--preset--color--tinta-2); }
.sn-datos__mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Talleres realizados: lista agrupada por año, no tabla. Decisión de DESIGN.md §8. */
.sn-anio { margin-top: 32px; }
.sn-anio__t {
  font-size: var(--wp--preset--font-size--seccion);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--turquesa-texto);
  margin: 0 0 4px;
}
.sn-talleres { list-style: none; margin: 0; padding: 0; }
.sn-talleres li {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 14px 0; margin: 0;
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
@media (min-width: 720px) {
  .sn-talleres li { grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; }
  .sn-talleres__m { text-align: right; }
}
.sn-talleres__n { font-weight: 600; color: var(--wp--preset--color--tinta); }
.sn-talleres__m { font-size: var(--wp--preset--font-size--peq); color: var(--wp--preset--color--tinta-3); }

/* Cierre con llamada a la acción. */
.sn-cta {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
}
@media (min-width: 720px) { .sn-cta { grid-template-columns: 1fr auto; gap: 48px; } }
.sn-cta h2 { margin: 0 0 6px; }

/* Grupos de una comunidad. Lista de enlaces externos, no tarjetas-puerta: llevan fuera
   del sitio, a WhatsApp, y conviene que se note antes de hacer clic. */
.sn-grupos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.sn-grupos li { margin: 0; }
.sn-grupos a {
  display: block;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color var(--sn-transicion);
}
.sn-grupos a:hover { border-color: var(--wp--preset--color--linea-fuerte); }
.sn-grupos__n {
  display: block; font-weight: 600;
  color: var(--wp--preset--color--enlace);
  text-decoration: underline; text-underline-offset: 3px;
  margin-bottom: 4px;
}
.sn-grupos__d { display: block; font-size: var(--wp--preset--font-size--peq); color: var(--wp--preset--color--tinta-2); }

/* Las maneras de participar. Numeradas porque el orden significa: va de lo que más
   compromiso pide a lo que menos, y quien no puede con lo primero sigue bajando. */
.sn-maneras { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.sn-maneras li {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  margin: 0; padding: 28px 0;
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
@media (min-width: 600px) { .sn-maneras li { grid-template-columns: 56px 1fr; gap: 24px; } }
.sn-maneras li:last-child { border-bottom: 0; }
.sn-maneras__num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--wp--preset--font-size--ante);
  letter-spacing: .08em;
  color: var(--wp--preset--color--turquesa-texto);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.sn-maneras h2 { font-size: var(--wp--preset--font-size--tarjeta); margin: 0 0 6px; }
.sn-maneras p { margin: 0 0 10px; color: var(--wp--preset--color--tinta-2); max-width: 66ch; }

/* ==========================================================================
   Directorio del Mapeo
   ==========================================================================
   Fichas de espacios y organizaciones, dentro de la web y no incrustadas.
   Hasta el 22-09-2026 esto eran hojas de cálculo en un iframe de SharePoint:
   se rompieron en silencio, las dieciséis páginas siguieron devolviendo 200 y
   nadie se enteró. Y para un buscador, lo que hay dentro de un iframe ajeno no
   es contenido de este sitio. Por las dos razones, el directorio vive aquí.
   ========================================================================== */

.sn-directorio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 720px) { .sn-directorio { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sn-directorio { grid-template-columns: 1fr 1fr 1fr; } }

.sn-ficha {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sn-ficha h3 { margin: 0; font-size: var(--wp--preset--font-size--tarjeta); }
.sn-ficha p { margin: 0; max-width: none; }

.sn-ficha__lugar {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--wp--preset--font-size--ante);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--turquesa-texto);
}
.sn-ficha__dir,
.sn-ficha__contacto { font-size: var(--wp--preset--font-size--peq); color: var(--wp--preset--color--tinta-2); }

/* La reseña se recorta a cuatro líneas: algunas pasan de 400 caracteres y una
   sola ficha desequilibraría la rejilla entera. */
.sn-ficha__resena {
  font-size: var(--wp--preset--font-size--peq);
  color: var(--wp--preset--color--tinta-3);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sn-ficha__enlaces {
  font-size: var(--wp--preset--font-size--peq);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--wp--preset--color--linea);
}
.sn-ficha__enlaces a { text-underline-offset: 3px; }

/* Aviso de la fecha de verificación. Va arriba del directorio, una sola vez. */
.sn-verificado {
  background: var(--wp--preset--color--ambar-100);
  color: var(--wp--preset--color--ambar-texto);
  font-size: var(--wp--preset--font-size--peq);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 20px;
}

/* ==========================================================================
   Listado del blog
   ========================================================================== */

.sn-entradas { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .sn-entradas { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1100px) { .sn-entradas { grid-template-columns: 1fr 1fr 1fr; } }

.sn-entrada {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--sn-transicion);
}
.sn-entrada:hover { border-color: var(--wp--preset--color--linea-fuerte); }

.sn-entrada__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.sn-entrada__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Respaldo para las 21 entrevistas sin imagen destacada. No es un parche temporal:
   conseguir esas fotos significa pedir 21 permisos. */
.sn-entrada__marca {
  width: 100%; height: 100%;
  background: var(--wp--preset--color--turquesa-100);
  color: var(--wp--preset--color--turquesa-texto);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 600; line-height: 1;
}

.sn-entrada__cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.sn-entrada__t { font-size: var(--wp--preset--font-size--tarjeta); margin: 0; line-height: 1.25; }
.sn-entrada__t a { color: var(--wp--preset--color--tinta); text-decoration: none; }
.sn-entrada__t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sn-entrada__artista { margin: 0; font-size: var(--wp--preset--font-size--peq); color: var(--wp--preset--color--tinta-2); }
.sn-entrada__meta {
  margin: auto 0 0; padding-top: 10px;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: var(--wp--preset--font-size--peq);
  color: var(--wp--preset--color--tinta-3);
}
/* La firma va primero y en color de texto normal: es la moneda con la que se paga una
   pasantía, no un metadato menor. */
.sn-entrada__firma { color: var(--wp--preset--color--tinta-2); font-weight: 600; }

.sn-paginacion { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sn-paginacion .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 8px;
  color: var(--wp--preset--color--enlace);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.sn-paginacion .page-numbers.current {
  background: var(--wp--preset--color--turquesa-100);
  border-color: var(--wp--preset--color--turquesa-200);
  color: var(--wp--preset--color--turquesa-texto);
  font-weight: 600;
}
.sn-paginacion .page-numbers:hover { border-color: var(--wp--preset--color--linea-fuerte); }

/* Etiqueta de grupo compartido entre dos disciplinas. Va aparte de la descripción, no
   dentro: la descripción es la misma en las dos páginas y solo cambia la etiqueta, así
   que el día que deje de ser compartido se borra un elemento y no se reescribe nada. */
.sn-grupos__compartido {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--wp--preset--font-size--ante);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--wp--preset--color--turquesa-100);
  color: var(--wp--preset--color--turquesa-texto);
  padding: 3px 9px;
  border-radius: 999px;
}

/* Etiqueta en inglés junto a los identificadores institucionales.
   POR QUÉ: quien valida a la Fundación en Google (y en Percent/TechSoup) lee en inglés
   y necesita reconocer «Acuerdo Ministerial» y «RUC» como identificadores de registro.
   Va en el flujo, no oculta: un dato que solo ven los lectores de pantalla no sirve
   para eso, y esconder texto para robots es justo lo que penaliza Google. */
.sn-datos__en {
	display: block;
	font-size: var(--wp--preset--font-size--peq);
	color: var(--wp--preset--color--tinta-3);
	font-weight: 400;
	letter-spacing: .01em;
}
.sn-datos dt .sn-datos__en { margin-top: 2px; }

/* Declaración de titularidad del dominio en /fundacion/.
   POR QUÉ: Google for Nonprofits rechazó dos veces la activación de Workspace porque
   «no se pudo verificar la relación entre Fundación Sensorial y sensorial.org.ec».
   No basta con que el nombre esté en el logo y el pie: hace falta la frase explícita.
   Va en texto normal y servida por el servidor — un verificador puede no ejecutar JS. */
.sn-declaracion {
	max-width: 66ch;
	margin: 0 0 var(--wp--preset--spacing--30);
}
.sn-declaracion--en { color: var(--wp--preset--color--tinta-3); }

/* Caja del ícono de disciplina — paquete de `design` del 23-09-2026.
   COLORES LITERALES A PROPÓSITO: la regla del final de este archivo dice que ningún
   token redefinido en modo oscuro puede usarse como fondo bajo un color fijo. Aquí el
   fondo y el trazo son un par cerrado, así que van los dos literales y el contraste
   está garantizado en los dos modos sin depender del tema. */
.sn-icono-caja {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #E3F3F4;
	color: #077480;
	/* El borde no es adorno. Medido en staging el 23-09-2026: la caja sobre la tarjeta
	   BLANCA del modo claro da 1,14:1 y prácticamente desaparece, dejando el ícono
	   flotando solo; sobre la tarjeta oscura da 12,27:1 y se lee sola. El borde hace
	   que la ficha exista en los dos modos sin tocar el fondo, que es lo que sostiene
	   el 4,82:1 del ícono.
	   Y la lección de método, otra vez la misma: yo había supuesto que las tarjetas
	   iban sobre la banda oscura. Tienen fondo propio. El riesgo estaba en el modo
	   contrario al que temía, y sólo se vio mirando. */
	box-shadow: inset 0 0 0 1px rgba(7, 116, 128, .35);
}
.sn-icono-caja svg { width: 24px; height: 24px; display: block; }

/* La cifra que acompaña al título de la tarjeta. Es un dato, no una etiqueta:
   va en el flujo del texto y no en una píldora, para que no parezca un estado. */
.sn-tarjeta__cifra {
	color: var(--wp--preset--color--tinta-3);
	font-variant-numeric: tabular-nums;
}

/* El ícono de WhatsApp junto al nombre del grupo. Va dentro del <span> del nombre para
   que no se separe de él al partirse la línea, y hereda el color: nunca el verde de la
   marca, que sobre la banda oscura se lee peor y además trae la marca de otro a una
   página nuestra. */
.sn-grupos__n svg {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
	margin-right: 8px;
	opacity: .75;
}

/* ===========================================================================
   MAPEO · buscador, filtros y mapa
   Los tres modos —mapa, lista, fichas— son el mismo conjunto visto distinto.
   =========================================================================== */

.sn-mapeo__barra {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
.sn-mapeo__barra input[type="search"],
.sn-mapeo__barra select {
	width: 100%;
	min-height: 48px; /* objetivo táctil de DESIGN.md §9 */
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 10px;
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--tinta);
	font: inherit;
	font-size: var(--wp--preset--font-size--peq);
}
.sn-mapeo__barra label { display: block; margin: 0; }

.sn-mapeo__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.sn-mapeo__cuenta {
	margin: 0;
	color: var(--wp--preset--color--tinta-3);
	font-size: var(--wp--preset--font-size--peq);
}
.sn-mapeo__vistas { display: flex; gap: 6px; }
.sn-mapeo__vistas button {
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--tinta);
	font: inherit;
	font-size: var(--wp--preset--font-size--peq);
	cursor: pointer;
}
.sn-mapeo__vistas button[aria-pressed="true"] {
	/* Literales: es una superficie oscura con texto claro encima, y un token
	   redefinido en modo oscuro la invertiría. Ver la regla del final. */
	background: #077480;
	border-color: #077480;
	color: #FFFFFF;
}

.sn-mapeo__mapa {
	height: 520px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--linea);
	margin-bottom: 20px;
	background: var(--wp--preset--color--superficie);
}
/* Los tres modos: sólo cambia qué se muestra, nunca qué se ha cargado. */
.sn-mapeo[data-sn-modo="lista"] .sn-mapeo__mapa,
.sn-mapeo[data-sn-modo="fichas"] .sn-mapeo__mapa { display: none; }
.sn-mapeo[data-sn-modo="mapa"] .sn-mapeo__resultados {
	max-height: 460px;
	overflow-y: auto;
}

.sn-ficha--compacta { padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--linea); }
.sn-ficha--compacta h3 { margin: 0; font-size: var(--wp--preset--font-size--cuerpo); }
.sn-ficha__tipo {
	margin: 6px 0 0;
	color: var(--wp--preset--color--tinta-3);
	font-size: var(--wp--preset--font-size--ante);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* El popup de Leaflet trae sus propios colores claros; en modo oscuro hay que
   devolvérselos al tema o queda un rectángulo blanco sobre un mapa oscuro. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--tinta);
}
.leaflet-popup-content { font-size: var(--wp--preset--font-size--peq); line-height: 1.45; }
.leaflet-container { font: inherit; }

@media (max-width: 860px) {
	.sn-mapeo__barra { grid-template-columns: 1fr 1fr; }
	.sn-mapeo__barra label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.sn-mapeo__barra { grid-template-columns: 1fr; }
	.sn-mapeo__mapa { height: 380px; }
	.sn-mapeo[data-sn-modo="mapa"] .sn-mapeo__resultados { max-height: none; }
}

/* ---------------------------------------------------------------------------
   MAPEO · cabecera, pulso de los puntos y lista oculta al entrar
   Cambios del 24-09-2026 pedidos por Damián.
   --------------------------------------------------------------------------- */

/* La cabecera se dejó CORTA a propósito. La primera versión traía título, bajada,
   un párrafo y un recuadro de instrucciones: 678 px antes del mapa en escritorio y
   967 px en móvil, o sea el mapa fuera de pantalla. Era exactamente el problema que
   Damián había pedido resolver —no encontraba el mapa— reaparecido por otra vía.
   La explicación larga vive ahora DEBAJO del mapa, en `.sn-mapeo__explica`.
   Si alguien vuelve a añadir texto aquí arriba, que mida antes en un móvil. */
.sn-mapeo__intro { max-width: 720px; margin-bottom: 20px; }
.sn-mapeo__intro h1 { margin-bottom: 8px; }
.sn-mapeo__intro .sn-lead { margin: 0; }

.sn-mapeo__explica { max-width: 720px; margin-top: 32px; }

/* Al entrar sólo se ve el mapa. La lista aparece al buscar, al filtrar o al
   pulsar un punto. Se oculta con CSS y no se dibuja: en esta página las fichas
   nunca estuvieron en el HTML —las pinta el script desde mapeo.json—, así que
   no hay nada indexable que perder. El directorio para buscadores son las
   páginas de cada disciplina. */
.sn-mapeo[data-sn-lista="no"] .sn-mapeo__resultados { display: none; }
.sn-mapeo[data-sn-lista="no"] .sn-mapeo__mapa { margin-bottom: 0; }

/* El pulso. Se anima el trazo, no el radio: cambiar el radio obliga al navegador
   a recalcular la geometría de 500 círculos en cada fotograma. */
@keyframes sn-pulso {
	0%, 100% { stroke-opacity: .35; stroke-width: 2; }
	50%      { stroke-opacity: 1;   stroke-width: 5; }
}
.sn-pulso { animation: sn-pulso 2.8s ease-in-out infinite; }
.sn-pulso--1 { animation-delay: .7s; }
.sn-pulso--2 { animation-delay: 1.4s; }
.sn-pulso--3 { animation-delay: 2.1s; }

/* NO NEGOCIABLE: quien pide menos movimiento, no ve ninguno.
   Un parpadeo continuo es de las cosas que peor le sientan a alguien con
   migraña o sensibilidad vestibular, y es justo el público que una fundación
   cultural no quiere echar de su web. */
@media (prefers-reduced-motion: reduce) {
	.sn-pulso { animation: none; stroke-opacity: 1; }
}

/* Los tres desplegables, plegables en móvil.
   POR QUÉ: apilados ocupan ~240 px y dejaban el mapa en una franja de 173 px en un
   teléfono de 375×812. Plegados, el mapa recupera más de 330 px, como en escritorio.
   El botón no existe en pantallas anchas: ahí los tres están siempre a la vista. */
.sn-mapeo__filtros { display: contents; }
.sn-mapeo__plegar { display: none; }

@media (max-width: 640px) {
	.sn-mapeo__plegar {
		display: block;
		width: 100%;
		min-height: 48px;
		border: 1px solid var(--wp--preset--color--linea);
		border-radius: 10px;
		background: var(--wp--preset--color--superficie);
		color: var(--wp--preset--color--tinta);
		font: inherit;
		font-size: var(--wp--preset--font-size--peq);
		cursor: pointer;
	}
	.sn-mapeo__plegar[aria-expanded="true"] { border-color: #077480; }
	.sn-mapeo__filtros {
		display: none;
		grid-column: 1 / -1;
		gap: 12px;
	}
	.sn-mapeo[data-sn-filtros-abiertos="si"] .sn-mapeo__filtros { display: grid; }
	/* Con los filtros plegados, el mapa gana el alto que sobra. */
	.sn-mapeo__mapa { height: 420px; }
}

/* Explicación breve arriba del mapa (título nuevo del 24-09-2026: «Mapeo»).
   Va arriba porque Damián la quiere antes del mapa, pero MUY CORTA: cada línea que
   se añade aquí empuja el mapa fuera de la pantalla del teléfono. El texto largo
   sigue debajo, en `.sn-mapeo__explica`. */
.sn-mapeo__breve {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--peq);
	color: var(--wp--preset--color--tinta-3);
	max-width: 68ch;
}
.sn-mapeo__como { color: var(--wp--preset--color--tinta); }

/* ---------------------------------------------------------------------------
   MAPEO · que los controles PAREZCAN controles
   Damián, desde su teléfono: «ni en la búsqueda ni en los filtros hay nada que
   indique que la búsqueda es un cajón para escribir, ni en los filtros que es un
   botón». Tenía razón y la causa era un fallo mío: las reglas de arriba usaban
   `var(--borde)`, `var(--fondo)` y `var(--tinta)`, que NO EXISTEN en este tema
   —aquí son `--wp--preset--color--linea`, `--fondo` y `--tinta`—. Una variable
   inexistente invalida la declaración entera, así que `border: 1px solid var(--borde)`
   se quedaba en `border-style: none` y anchura 0. Nunca se dibujó ningún borde.
   Corregidos los nombres, esto añade además relieve para que en un móvil —donde no
   hay cursor que cambie de forma— se vea que se puede tocar.
   --------------------------------------------------------------------------- */

.sn-mapeo__barra input[type="search"],
.sn-mapeo__barra select,
.sn-mapeo__plegar {
	/* El box-shadow va además del borde a propósito: sobrevive a cualquier reset
	   de formularios que pueda venir del tema padre o de un plugin. */
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea), 0 1px 2px rgba(31, 29, 27, .06);
	background-color: var(--wp--preset--color--superficie);
	border-style: solid;
	border-width: 1px;
	border-color: var(--wp--preset--color--linea);
}
.sn-mapeo__barra input[type="search"]::placeholder {
	color: var(--wp--preset--color--tinta-3);
	opacity: 1;
}
.sn-mapeo__barra input[type="search"]:hover,
.sn-mapeo__barra select:hover,
.sn-mapeo__plegar:hover {
	border-color: var(--wp--preset--color--linea-fuerte);
}

/* La flecha del desplegable, dibujada: sin ella «Música» parece texto suelto. */
.sn-mapeo__barra select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767068' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
}

/* Botón de recentrar. Siempre visible, no sólo tras mover el mapa: quien se perdió
   no puede adivinar que apareció un botón nuevo. */
.sn-mapeo__mapa { position: relative; }
.sn-mapeo__recentrar {
	position: absolute;
	right: 12px;
	bottom: 26px;
	z-index: 500;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 999px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--tinta);
	font: inherit;
	font-size: var(--wp--preset--font-size--peq);
	box-shadow: 0 2px 8px rgba(31, 29, 27, .18);
	cursor: pointer;
}
.sn-mapeo__recentrar:hover { border-color: var(--wp--preset--color--linea-fuerte); }

/* La atribución de OpenStreetMap se queda —la licencia ODbL la exige— pero discreta.
   Lo que sí se quita es el «Leaflet |», que es cortesía de la librería, no obligación. */
.leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255, 255, 255, .72);
	padding: 1px 6px;
}
.leaflet-control-attribution a { color: inherit; }

/* Lupa dentro del buscador. Damián, dos veces: no se ve que es un cajón para escribir.
   El borde ya estaba —medido— pero un borde solo no dice QUÉ se hace ahí. El icono sí. */
.sn-mapeo__barra input[type="search"] {
	padding-left: 42px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767068' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 13px center;
	background-size: 18px 18px;
}

/* En móvil, «Filtros» al lado del buscador y no debajo: ahorra ~60 px de altura y el
   mapa sube otro tanto. Idea de Damián.
   Lo que NO se hace es poner los tres desplegables en una fila: a 375 px quedarían en
   110 px cada uno y «Todas las disciplinas» no cabe. Se quedan apilados dentro del
   plegable, donde la altura ya no compite con el mapa. */
@media (max-width: 640px) {
	.sn-mapeo__barra { grid-template-columns: 1fr auto; align-items: start; }
	/* Especificidad: más arriba hay `.sn-mapeo__barra label:first-child { grid-column: 1 / -1 }`
	   para pantallas medianas, que hacía que el buscador ocupara toda la fila y el botón
	   cayera debajo. Este selector la iguala y, al ir después, gana. */
	.sn-mapeo__barra label.sn-mapeo__buscar { grid-column: 1; }
	.sn-mapeo__plegar { width: auto; padding: 0 18px; white-space: nowrap; }
	.sn-mapeo__filtros { grid-column: 1 / -1; }
}

/* ==========================================================================
   Radar — mapa del Ecuador por provincias

   El mapa es decorativo a efectos de accesibilidad: lleva aria-hidden y no recibe
   foco. La interfaz de verdad es la lista de 24 enlaces de abajo, que funciona con
   teclado, con lector de pantalla y sin JavaScript. Duplicar los 24 en el tabulador
   no añade nada y obliga a pasarlos todos para llegar al contenido.
   ========================================================================== */

.sn-radar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--e-5, 24px);
  align-items: start;
  margin-block: 32px;
}
@media (min-width: 900px) {
  .sn-radar { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
}

.sn-radar__mapa svg { width: 100%; height: auto; display: block; }

/* TODAS LAS PROVINCIAS USAN EL MISMO COLOR y sólo cambian de opacidad. Al principio
   iban con dos tonos de la paleta —turquesa-100 para 21 y turquesa a saco para 2— y el
   salto era tan grande que las 21 casi no se veían: justo lo contrario de lo que esta
   página tiene que conseguir, que es que se vea que existen las 24.

   La opacidad sale del mismo token, así que no hay ningún color inventado y el modo
   oscuro sigue funcionando solo. */
.sn-radar [data-sn-provincia] {
  fill: var(--wp--preset--color--turquesa);
  fill-opacity: .22;
  stroke: var(--wp--preset--color--fondo);
  stroke-width: 1.4;
  cursor: pointer;
  transition: fill-opacity var(--sn-transicion);
}
.sn-radar [data-sn-provincia]:hover { fill-opacity: .4; }

/* Las dos que se mueven. Es el único dato que el mapa dice por sí solo: de las demás
   no se afirma nada, que es lo que evita escribirles una etiqueta de disculpa. */
/* Las dos con movimiento: un escalón, no un abismo. Se distinguen sin aplastar al resto. */
.sn-radar [data-sn-marcada] { fill-opacity: .62; }
.sn-radar [data-sn-marcada]:hover { fill-opacity: .78; }

.sn-radar .sn-pro--elegida,
.sn-radar .sn-pro--elegida:hover { fill: var(--wp--preset--color--ambar); fill-opacity: 1; }

/* La zona sensible de Galápagos: recoge el clic y no se pinta nunca. Va después de
   las reglas de arriba a propósito — misma especificidad, gana la última. */
.sn-radar .sn-zona,
.sn-radar .sn-zona:hover,
.sn-radar .sn-zona.sn-pro--elegida { fill: transparent; fill-opacity: 0; }

.sn-mapa-ec__caja {
  fill: none; stroke: var(--wp--preset--color--linea); stroke-dasharray: 3 3;
}
.sn-mapa-ec__etiqueta {
  font-size: 11px; fill: var(--wp--preset--color--tinta-3); text-anchor: middle;
}

.sn-radar__panel {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 12px;
  padding: 20px;
  background: var(--wp--preset--color--superficie);
}
.sn-radar__panel h3 { margin: 0 0 4px; }
.sn-radar__panel p { margin: 0 0 16px; color: var(--wp--preset--color--tinta-2); }

/* La lista: es la página, no un apéndice del mapa. */
.sn-radar__lista {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.sn-radar__lista a,
.sn-radar__lista .sn-radar__sin {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
  color: var(--wp--preset--color--tinta);
}
.sn-radar__lista a:hover { box-shadow: inset 0 0 0 1px var(--wp--preset--color--turquesa); }
.sn-radar__lista .sn-radar__sin { opacity: .65; }
.sn-radar__pro { font-weight: 600; }
.sn-radar__ciu { color: var(--wp--preset--color--tinta-3); font-size: .9rem; }
.sn-radar__marca {
  margin-left: auto; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--wp--preset--color--turquesa-100);
  color: var(--wp--preset--color--turquesa-texto);
}
/* Cuando se llega desde el mapa, que se vea a cuál. */
.sn-radar__lista li:target a,
.sn-radar__lista li.sn-radar--elegida a {
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--ambar);
}

/* La petición de actividades. Es la única llamada a la acción de la página, así que se
   le da aire y un botón de verdad — un enlace de texto al pie de una lista de 24 no lo
   pulsa nadie. */
.sn-radar__pedir {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; font-weight: 600;
}

/* El afiche en la tarjeta de agenda de la portada. Va al final de la fila, con su
   proporción vertical: es un afiche, no una foto de perfil. */
.sn-actividad__afiche {
  margin-left: auto; flex-shrink: 0;
  width: 64px; height: 80px; object-fit: cover;
  border-radius: 8px; align-self: center;
}

/* ==========================================================================
   Ficha de una actividad de la Agenda
   ========================================================================== */

.sn-actividad-ficha {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start;
  margin-block: 8px 32px;
}
@media (min-width: 860px) {
  .sn-actividad-ficha { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; }
}
.sn-actividad-ficha__afiche img {
  width: 100%; height: auto; display: block; border-radius: 16px;
}
.sn-actividad-ficha__datos h1 { margin: 8px 0 20px; }
.sn-actividad-ficha__lista { margin: 0 0 24px; display: grid; gap: 12px; }
.sn-actividad-ficha__lista dt {
  font-family: var(--wp--preset--font-family--mono, inherit);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--tinta-3); margin-bottom: 2px;
}
.sn-actividad-ficha__lista dd { margin: 0; font-size: 1.05rem; }
.sn-actividad-ficha__cta { margin: 0 0 8px; }
.sn-actividad-ficha__texto { max-width: 66ch; }

/* Talleres abiertos en /aprendizaje/.
   La clase es `sn-abiertos` y NO `sn-talleres`: ese nombre ya lo usa la lista de
   talleres realizados que hay más abajo en la misma página. */
.sn-abiertos { display: grid; gap: 20px; margin-top: 16px; }
.sn-abiertos .sn-taller {
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start;
  background: var(--wp--preset--color--superficie);
  border-radius: 14px; padding: 18px;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
}
/* Con el mismo alcance que la regla base: si aquí pusiera sólo `.sn-taller`,
   tendría menos especificidad que `.sn-abiertos .sn-taller` y no ganaría nunca —
   la tarjeta se quedaba en una columna y el afiche salía a pantalla completa. */
@media (min-width: 640px) { .sn-abiertos .sn-taller { grid-template-columns: 180px minmax(0, 1fr); } }
.sn-taller__afiche img { width: 100%; height: auto; display: block; border-radius: 10px; }
.sn-taller h3 { margin: 0 0 6px; }
.sn-taller h3 a { text-decoration: none; color: inherit; }
.sn-taller h3 a:hover { text-decoration: underline; }
.sn-taller__cuando {
  margin: 0 0 10px; color: var(--wp--preset--color--tinta-3); font-size: .92rem;
}

/* El enlace de volver, arriba de la ficha de actividad. */
.sn-volver { margin: 0 0 14px; }
.sn-volver a {
  font-size: .92rem; text-decoration: none;
  color: var(--wp--preset--color--tinta-3);
}
.sn-volver a:hover { color: var(--wp--preset--color--turquesa-texto); text-decoration: underline; }

/* ── Validador de certificados ────────────────────────────────────────────────
   El plugin trae su propia paleta (`--scv-*`, azul #1f5f8b) y por eso los botones
   de /validar-certificado/ salían de otro color que los del resto del sitio.
   Se reasignan aquí, en el tema, y no en el plugin: así una actualización del
   plugin no deshace la homologación. La especificidad extra de `body` es lo que
   hace que esta regla gane, porque el plugin declara las variables con el mismo
   `.scv-validator` y su hoja se carga después. */
body .scv-validator {
  --scv-border:       var(--wp--preset--color--linea);
  --scv-text:         var(--wp--preset--color--tinta);
  --scv-muted:        var(--wp--preset--color--tinta-3);
  --scv-surface:      var(--wp--preset--color--superficie);
  --scv-soft:         var(--wp--preset--color--superficie-2);
  --scv-accent:       var(--wp--preset--color--turquesa);
  --scv-valid:        var(--wp--preset--color--turquesa-oscuro);
  --scv-valid-soft:   var(--wp--preset--color--turquesa-100);
  --scv-danger:       var(--wp--preset--color--error);
  --scv-danger-soft:  var(--wp--preset--color--error-100);
  --scv-warning:      var(--wp--preset--color--ambar-texto);
  --scv-warning-soft: var(--wp--preset--color--ambar-100);
}
/* El anillo de foco del campo llevaba el azul del plugin escrito a mano, fuera de
   las variables; sin esta línea seguiría saliendo azul sobre un botón turquesa. */
body .scv-validator .scv-search-row input:focus { outline-color: rgba(9, 141, 154, .28); }