/*
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__quienes {
  /* Más pequeña que la línea de cifras a propósito: esta frase explica, la otra
     impresiona. Si tuvieran el mismo cuerpo competirían y no ganaría ninguna. */
  margin: 0 0 22px !important;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem) !important;
  line-height: 1.6;
  max-width: 68ch;
}
/* Dentro de esta frase, `strong` es énfasis de lectura, no una cifra. Lleva el `p`
   en el selector a proposito: sin el empata en especificidad con `.sn-cifras strong`,
   que va despues en esta misma hoja y gana por orden. Pasó: la frase salio con medias
   palabras a 32 px en turquesa. */
.sn-cifras p.sn-cifras__quienes strong {
  font-size: inherit; line-height: inherit; font-weight: 700;
  color: var(--wp--preset--color--tinta);
}
.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; }
/* 24-10-2026, Damián: la firma va en su propia línea, debajo del título, no a renglón seguido. */
.sn-entrevista .sn-actividad__t, .sn-entrevista .sn-actividad__m { display: block; }
.sn-entrevista .sn-actividad__m { margin-top: 6px; }
.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: 1100px) { .sn-solo-movil { display: none !important; } }
@media (max-width: 1099px) { .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; }
/* El tipo de texto, encima del titulo. Pequeno y en turquesa: tiene que
   distinguirse de un vistazo sin competir con el titulo. */
.sn-entrada__tipo { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--turquesa-texto, #077480); }

.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); }

/* ==========================================================================
   Convocatorias (/convocatorias/ y sus hijas)
   Tokens del sistema; nada nuevo de color ni de tipografía.
   ========================================================================== */

.sn-conv-fecha {
  font-size: var(--wp--preset--font-size--peq);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--tinta-3);
}
.sn-conv-fecha strong { color: var(--wp--preset--color--turquesa-texto) }

/* Rejilla de tarjetas */
/* Cierra la entradilla de la convocatoria. Va sola, con aire arriba y abajo y
   una regla ambar encima, porque es la razon de todo lo anterior. */
.sn-conv-lema {
  margin: 28px 0 32px;
  padding-top: 20px;
  border-top: 3px solid var(--wp--preset--color--ambar, #D9962B);
  max-width: 34ch;
  font-size: var(--wp--preset--font-size--mediano, 1.25rem);
  line-height: 1.3;
}

.sn-conv-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 24px 0 32px;
}
@media (min-width: 700px) {
  .sn-conv-rejilla { grid-template-columns: 1fr 1fr; gap: 20px }
  .sn-conv-rejilla--amplia { grid-template-columns: 1fr }
}

.sn-conv-tarjeta {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  padding: 24px;
}
.sn-conv-tarjeta h3 {
  margin: 0 0 8px;
  font-size: var(--wp--preset--font-size--tarjeta);
  line-height: 1.3;
}
.sn-conv-tarjeta p { margin: 0; color: var(--wp--preset--color--tinta-2) }

.sn-conv-tarjeta--destacada {
  border-color: var(--wp--preset--color--turquesa-200);
  background: var(--wp--preset--color--turquesa-100);
  padding: 32px;
}
.sn-conv-tarjeta--destacada h3 { font-size: var(--wp--preset--font-size--seccion) }

.sn-conv-etiqueta {
  margin: 0 0 10px;
  font-size: var(--wp--preset--font-size--ante);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--turquesa-oscuro);
}

.sn-conv-boton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--turquesa-texto);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}
.sn-conv-boton:hover { background: var(--wp--preset--color--turquesa-oscuro); color: #FFFFFF }

/* Pasos numerados */
.sn-conv-pasos { display: flex; flex-direction: column; gap: 20px; margin: 24px 0 32px }
.sn-conv-paso {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  background: var(--wp--preset--color--superficie-2);
  border-radius: 16px;
}
.sn-conv-num {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--wp--preset--color--turquesa-texto);
  color: #FFFFFF;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--cuerpo);
}
.sn-conv-paso h3 { margin: 6px 0 8px; font-size: var(--wp--preset--font-size--tarjeta); line-height: 1.3 }
.sn-conv-paso p { margin: 0 0 8px; color: var(--wp--preset--color--tinta-2) }
.sn-conv-paso p:last-child { margin-bottom: 0 }
.sn-conv-enlace { font-weight: 600 }

/* Preguntas frecuentes, desplegables */
.sn-conv-faq { margin: 24px 0 8px; border-top: 1px solid var(--wp--preset--color--linea) }
.sn-conv-faq details { border-bottom: 1px solid var(--wp--preset--color--linea) }
.sn-conv-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 44px 18px 0;
  position: relative;
  font-weight: 600;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.sn-conv-faq summary::-webkit-details-marker { display: none }
.sn-conv-faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--wp--preset--color--turquesa-texto);
  border-bottom: 2px solid var(--wp--preset--color--turquesa-texto);
  transform: rotate(45deg);
  transition: transform var(--sn-transicion, 160ms ease-out);
}
.sn-conv-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px }
.sn-conv-faq details p { margin: 0 0 18px; color: var(--wp--preset--color--tinta-2) }

.sn-conv-imagen { margin: 20px 0 28px }
.sn-conv-imagen img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--wp--preset--color--linea) }

/* Botón de acción al cierre: ámbar sobre tinta, el único de la página que no
   es turquesa, para que se distinga de los enlaces de los pasos. */
.sn-conv-cta { margin: 28px 0 8px }
.sn-conv-boton--accion {
  margin-top: 0;
  background: var(--wp--preset--color--ambar);
  color: var(--wp--preset--color--tinta);
}
.sn-conv-boton--accion:hover {
  background: var(--wp--preset--color--ambar-texto);
  color: var(--wp--preset--color--tinta);
}

/* Con «Convocatorias» en el menú, los siete enlaces ya no caben en una linea
   entre 1000 y 1120 px y «La Fundacion» se caia a una segunda fila. Se aprieta
   el hueco entre enlaces en vez de acortar las etiquetas. */
@media (min-width: 1100px) and (max-width: 1240px) {
  .sn-nav .wp-block-navigation { column-gap: 18px }
}

/* El artículo respiraba poco: 720 px de columna sobre una pantalla ancha deja
   el texto encajonado en el centro. Se ensancha solo en las entradas, no en
   todo el sitio, y lo ancho —galerías, imágenes a lo ancho— se deja en paz. */
@media (min-width: 1100px) {
  body.single-post main.sn-seccion > :not(.alignwide):not(.alignfull),
  body.single-post .entry-content > :not(.alignwide):not(.alignfull) {
    max-width: 840px;
  }
}

/* Firma del artículo: foto, nombre y fecha. Las fotos venían guardadas en
   PublishPress Authors desde siempre; la plantilla no las pedía. */
.sn-firma{display:flex;align-items:center;gap:12px;margin:0 0 var(--wp--preset--spacing--e-6,32px)}
.sn-firma__foto,.sn-firma__inicial{width:44px;height:44px;border-radius:999px;flex:none;display:block;object-fit:cover}
.sn-firma__inicial{background:var(--wp--preset--color--turquesa-100);color:var(--wp--preset--color--turquesa-texto);
  display:grid;place-items:center;font-weight:700;font-size:18px}
.sn-firma__datos{display:flex;flex-direction:column;line-height:1.3}
.sn-firma__nombre{font-size:var(--wp--preset--font-size--peq);font-weight:600;color:var(--wp--preset--color--tinta-2)}
.sn-firma__fecha{font-size:var(--wp--preset--font-size--peq);color:var(--wp--preset--color--tinta-3)}

.sn-ficha-autor{display:flex;gap:16px;align-items:flex-start;margin:40px 0 0;padding:20px 22px;
  background:var(--wp--preset--color--superficie-2);border-radius:16px}
.sn-ficha-autor .sn-firma__foto,.sn-ficha-autor .sn-firma__inicial{width:64px;height:64px;font-size:24px}
.sn-ficha-autor__nombre{margin:0 0 4px;font-weight:600}
.sn-ficha-autor__resena{margin:0;color:var(--wp--preset--color--tinta-2)}

/* La llamada final ya no vive dentro del texto de cada entrada: está en la
   plantilla, después de la ficha de la autora. Así la bio queda antes y esto
   es lo último, que es su sitio. */
.sn-llamada{margin:28px 0 0;padding:22px 24px;border:1px solid var(--wp--preset--color--turquesa-200);
  background:var(--wp--preset--color--turquesa-100);border-radius:16px}
.sn-llamada__titulo{margin:0 0 4px;font-weight:600;font-size:var(--wp--preset--font-size--tarjeta)}
.sn-llamada__texto{margin:0;color:var(--wp--preset--color--tinta-2)}
.sn-llamada__boton{margin:14px 0 0}
.sn-llamada__boton a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;
  border-radius:10px;background:var(--wp--preset--color--turquesa-texto);color:#fff;
  font-weight:600;text-decoration:none}
.sn-llamada__boton a:hover{background:var(--wp--preset--color--turquesa-oscuro);color:#fff}

/* Dos ajustes de la firma y los bloques del final:
   1. box-sizing: sin esto el relleno se suma al ancho máximo y la ficha de la
      autora y la llamada salían 44 px más anchas que el texto.
   2. La firma iba pegada al titular, sin aire. */
.sn-ficha-autor, .sn-llamada { box-sizing: border-box }
.sn-firma { margin-top: 18px }

/* Las tarjetas recortan la foto al centro (object-position por omisión). Con
   fotos verticales de personas, el centro de la imagen es el pecho, así que la
   cabeza quedaba fuera. Se sube el punto de recorte al 25 %, que es donde suele
   estar la cara. En fotos apaisadas no cambia nada: ahí el recorte es lateral. */
.sn-entrada__img img,
.sn-entrevista img,
.sn-tarjeta__img img { object-position: 50% 25%; }

/* ---------------------------------------------------------------------------
   Lo que se metió en los artículos hace años, visto en un teléfono.

   Los textos vienen del editor clásico y traen medidas escritas a mano: un
   vídeo de YouTube con `width="1383"`, pies de foto con `style="width: 300px"`,
   imágenes con `width="1024"`. En una pantalla ancha no se nota; en 390 px
   obligan a mover la página de lado o a achicarla para leer.

   Esto no toca el contenido: lo encierra. Nada puede salirse del ancho de la
   columna, y los vídeos conservan su proporción en vez de su tamaño.
   --------------------------------------------------------------------------- */

.entry-content img,
.entry-content video,
.entry-content audio,
.entry-content canvas,
.entry-content svg {
  max-width: 100%;
  height: auto;
}

/* Vídeos y mapas: se estiran al ancho disponible y guardan la proporción. */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content .wp-block-embed__wrapper iframe {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 12px;
}

/* El reproductor de audio no es un vídeo: no lleva proporción. */
.entry-content audio {
  width: 100%;
  aspect-ratio: auto;
}

/* Cajas con un ancho escrito a mano en el propio artículo. */
.entry-content .wp-caption,
.entry-content figure,
.entry-content [style*="width:"] {
  max-width: 100% !important;
}

/* Las galerías del editor clásico son tablas con porcentajes fijos. */
@media (max-width: 699px) {
  .entry-content .gallery-item {
    width: 100% !important;
    float: none !important;
    margin: 0 0 16px !important;
  }
  .entry-content .gallery {
    display: block !important;
  }
  .entry-content .gallery img {
    width: 100%;
    height: auto;
  }
}

/* Nada dentro del artículo puede empujar la página a lo ancho. */
.entry-content {
  overflow-wrap: break-word;
}
.entry-content pre,
.entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* La línea que dice qué es SUIOS y qué es RUAC. Las siglas solas no identifican
   nada a quien no las conoce, y quien verifica una fundación desde fuera del
   Ecuador no tiene por qué conocerlas. */
.sn-datos__nota {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--peq);
	line-height: 1.4;
	color: var(--wp--preset--color--tinta-3, #6b6660);
}

/* ---- Presentación de /voces/ ----
   El lema va grande y la lista de artículos arranca después de una línea, para
   que se vea que la cabecera es una cosa y los textos son otra. */
.sn-voces-lema {
	margin: 4px 0 20px;
	font-size: var(--wp--preset--font-size--titular-peq, 1.5rem);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--turquesa-texto);
	text-wrap: balance;
}
.sn-voces-llamada { margin: 24px 0 0 }
.sn-voces-llamada a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 10px;
	background: var(--wp--preset--color--ambar, #c08a2e);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.sn-voces-llamada a:hover { filter: brightness(1.07); color: #fff }
.sn-voces-pie {
	margin: 14px 0 0;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--wp--preset--color--linea, #e7e0d6);
	font-size: var(--wp--preset--font-size--peq);
	color: var(--wp--preset--color--tinta-3, #6b6660);
}

/* ---- La rejilla de puertas con CINCO tarjetas (10-10-2026) ----
   Con cuatro cabían en una fila. Con cinco, la quinta quedaba huérfana al final.
   Se reparten sobre seis columnas: las tres primeras ocupan dos cada una y las
   dos últimas tres cada una, de modo que salen 3 + 2 sin ningún hueco y las de
   abajo quedan más anchas, que es donde va el texto más largo. */
@media (min-width: 900px) {
	.sn-rejilla-puertas { grid-template-columns: repeat(6, 1fr); }
	.sn-rejilla-puertas > .sn-puerta { grid-column: span 2; }
	.sn-rejilla-puertas > .sn-puerta:nth-child(4),
	.sn-rejilla-puertas > .sn-puerta:nth-child(5) { grid-column: span 3; }
}
/* Entre 600 y 899 van de dos en dos: la quinta ocupa el ancho entero en vez de
   quedarse sola a la izquierda. */
@media (min-width: 600px) and (max-width: 899px) {
	.sn-rejilla-puertas > .sn-puerta:nth-child(5) { grid-column: span 2; }
}

/* Miniatura del afiche en la lista de actividades anteriores (15-10-2026).
   Los afiches son verticales (1080x1350); la miniatura mantiene esa proporcion
   en 48x60. Un recorte cuadrado cae sobre el titulo del cartel y se lee como
   una mancha -- el mismo motivo por el que la portada los muestra enteros.
   El hueco `--sin` ocupa lo mismo: una linea sin afiche no debe correrse. */
.sn-talleres__a {
  width: 48px; height: 60px; display: block; border-radius: 5px;
  object-fit: cover; align-self: center;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
}
/* El hueco va INVISIBLE. Con fondo y borde, las cinco lineas de 2022 -que no
   tienen ficha ni afiche- parecian cinco imagenes rotas seguidas. La columna de
   48px ya mantiene la alineacion ella sola; el hueco no necesita verse. */
.sn-talleres__a--sin { background: none; box-shadow: none; }
.sn-talleres li { grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.sn-talleres__n, .sn-talleres__m { grid-column: 2; }
@media (min-width: 720px) {
  .sn-talleres li { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; }
  .sn-talleres__n { grid-column: 2; }
  .sn-talleres__m { grid-column: 3; text-align: right; }
}

/* Cita destacada y lista de fuentes en los textos de Voces (15-10-2026).
   Las entradas nuevas traen <blockquote class="sn-cita"> con su <cite>, y una
   <ul class="sn-fuentes"> al final. Sin estas reglas la cita se lee EXACTAMENTE
   igual que un parrafo normal -se comprobo en la previsualizacion- y deja de
   cumplir su funcion, que es que se vea de un vistazo. */
.sn-cita {
  margin: 36px 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--wp--preset--color--ambar, #D99A2B);
  font-size: var(--wp--preset--font-size--tarjeta, 1.35rem);
  line-height: 1.4;
  color: var(--wp--preset--color--tinta, #1C1A17);
}
.sn-cita p { margin: 0; font-style: normal; }
.sn-cita cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--tinta-3, #6B655D);
}

/* Las fuentes van al final y deben leerse como aparato, no como cuerpo:
   mas pequenas, mas apagadas y separadas por una regla. */
.sn-fuentes {
  margin: 8px 0 0;
  padding: 0 0 0 20px;
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  line-height: 1.55;
  color: var(--wp--preset--color--tinta-3, #6B655D);
}
.sn-fuentes li { margin: 0 0 8px; }
.sn-fuentes a { color: var(--wp--preset--color--turquesa-texto, #077480); }

/* Fotos dentro de los textos de Voces (15-10-2026).
   Las originales venian con alignleft/alignright y anchos fijos del tema viejo,
   que en este tema dejaban el texto rodeandolas de cualquier manera. Aqui van
   centradas, a lo ancho de la columna y con su proporcion, que es como se leen
   las demas imagenes del sitio. */
.sn-foto { margin: 32px 0; }
.sn-foto img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
}
.sn-foto figcaption {
  margin-top: 8px;
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  color: var(--wp--preset--color--tinta-3, #6B655D);
}

/* Comentarios de Voces (15-10-2026).
   El tema no los mostraba en ninguna parte: los cinco reales de 2022 llevaban
   anos invisibles en la base de datos. */
.sn-comentarios {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--linea, #E6E1D8);
}
.sn-comentarios__titulo { margin: 0 0 20px; font-size: var(--wp--preset--font-size--tarjeta, 1.35rem); }
.sn-comentarios__vacio,
.sn-comentarios__nota {
  color: var(--wp--preset--color--tinta-3, #6B655D);
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
}
.sn-comentarios__lista { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 24px; }
.sn-comentario {
  margin: 0; padding: 18px 20px;
  background: var(--wp--preset--color--superficie, #FAF8F4);
  border-radius: 12px;
}
.sn-comentario__quien { margin: 0 0 6px; font-weight: 600; }
.sn-comentario__cuando {
  font-weight: 400;
  color: var(--wp--preset--color--tinta-3, #6B655D);
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
}
.sn-comentario__texto p { margin: 0 0 10px; }
.sn-comentario__texto p:last-child { margin-bottom: 0; }

/* El aviso de «revisa tu correo» y sus hermanos. Sin esto, quien comenta vuelve
   a la pagina, no ve su comentario -porque no esta publicado- y lo reescribe. */
.sn-comentarios__aviso {
  margin: 0 0 24px; padding: 14px 18px; border-radius: 10px;
  background: var(--wp--preset--color--superficie, #FAF8F4);
  border-left: 3px solid var(--wp--preset--color--ambar, #D99A2B);
}
.sn-comentarios__aviso--bien { border-left-color: var(--wp--preset--color--turquesa-texto, #077480); }
.sn-comentarios__aviso--mal { border-left-color: #B3261E; }

/* El formulario que pinta comment_form(). */
.sn-comentarios__form { display: grid; gap: 14px; margin-top: 8px; }
.sn-comentarios__form p { margin: 0; }
.sn-comentarios__form label { display: block; margin-bottom: 4px; font-size: var(--wp--preset--font-size--peq, 0.875rem); }
.sn-comentarios__form input[type="text"],
.sn-comentarios__form input[type="email"],
.sn-comentarios__form input[type="url"],
.sn-comentarios__form textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--wp--preset--color--linea, #E6E1D8);
  background: #FFFFFF; font: inherit;
}
.sn-comentarios__form textarea { min-height: 140px; resize: vertical; }
.sn-comentarios__form .submit {
  justify-self: start; cursor: pointer;
  padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--wp--preset--color--turquesa-texto, #077480);
  color: #FFFFFF; font: inherit; font-weight: 600;
}
.sn-comentarios__form .submit:hover { background: var(--wp--preset--color--turquesa-oscuro, #055B64); }

/* Retrato en los comentarios y contador de lecturas (15-10-2026). */
.sn-comentario {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
}
.sn-comentario__retrato .sn-firma__foto,
.sn-comentario__retrato .sn-firma__inicial {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  object-fit: cover;
}
.sn-comentario__retrato .sn-firma__inicial {
  background: var(--wp--preset--color--turquesa-texto, #077480);
  color: #FFFFFF; font-weight: 600; font-size: 1.1rem;
}

/* El contador sale VACIO y solo aparece cuando el navegador trae el numero.
   Un «0 lecturas» mientras carga es peor que nada: se lee como un fracaso. */
.sn-vistas {
  display: none;
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  color: var(--wp--preset--color--tinta-3, #6B655D);
}
.sn-vistas--lista { display: inline; }
.sn-vistas__n { font-variant-numeric: tabular-nums; }

/* El comentario recien escrito, todavia sin confirmar (15-10-2026).
   Se le ensena a quien lo escribio, en su sitio y atenuado, con el aviso
   pegado debajo. Antes volvia a la pagina y NO VEIA SU COMENTARIO por ningun
   lado: solo un aviso arriba del todo, que ademas obligaba a buscar. */
.sn-comentario--pendiente {
  opacity: 0.6;
  border: 1px dashed var(--wp--preset--color--linea, #E6E1D8);
  background: transparent;
}
.sn-comentario--pendiente .sn-comentario__texto { color: var(--wp--preset--color--tinta-2, #3F3A33); }
.sn-comentario__espera {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--wp--preset--color--superficie, #FAF8F4);
  border-left: 3px solid var(--wp--preset--color--ambar, #D99A2B);
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  color: var(--wp--preset--color--tinta-2, #3F3A33);
  opacity: 1;
}

/* Al llegar con el enlace de confirmacion se cae justo encima del comentario;
   el resalte dice cual es sin que haya que buscarlo. */
.sn-comentario:target {
  animation: sn-resalte 2.4s ease-out 1;
  scroll-margin-top: 90px;
}
@keyframes sn-resalte {
  0%   { box-shadow: 0 0 0 3px var(--wp--preset--color--ambar, #D99A2B); }
  100% { box-shadow: 0 0 0 3px rgba(217, 150, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sn-comentario:target { animation: none; box-shadow: 0 0 0 2px var(--wp--preset--color--ambar, #D99A2B); }
}

/* La invitacion a completar el perfil, justo despues de confirmar y DEBAJO DEL
   PROPIO COMENTARIO (15-10-2026). Es el momento en que la persona esta mas
   dispuesta: acaba de confirmar su correo y esta viendo su comentario
   publicado. Pedirlo mas tarde, por correo, ya no la encuentra ahi. */
.sn-comentario__invita {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--wp--preset--color--superficie, #FAF8F4);
  border-left: 3px solid var(--wp--preset--color--turquesa-texto, #077480);
}
.sn-comentario__invita p { margin: 0 0 8px; }
.sn-comentario__invita p:last-child { margin-bottom: 0; }
.sn-comentario__invita-titulo { font-weight: 600; }
.sn-comentario__invita-boton { margin-top: 12px; }
.sn-comentario__invita-boton a {
  display: inline-block; text-decoration: none;
  padding: 10px 20px; border-radius: 999px;
  background: var(--wp--preset--color--turquesa-texto, #077480);
  color: #FFFFFF; font-weight: 600;
}
.sn-comentario__invita-boton a:hover { background: var(--wp--preset--color--turquesa-oscuro, #055B64); }
.sn-comentario__invita-nota {
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  color: var(--wp--preset--color--tinta-3, #6B655D);
}

/* El campo de contrasena del formulario de comentarios (15-10-2026).
   Sale cuando empiezan a escribir el correo: plantarle un campo de contrasena
   a quien solo queria comentar espanta mas de lo que suma. */
.sn-clave[hidden] { display: none; }
.sn-clave__opcional,
.sn-clave__ayuda {
  color: var(--wp--preset--color--tinta-3, #6B655D);
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
}
.sn-clave__ayuda { display: block; margin-top: 4px; }
.sn-comentarios__form input[type="password"] {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--wp--preset--color--linea, #E6E1D8);
  background: #FFFFFF; font: inherit;
}

/* El contador de lecturas, bajo la firma (15-10-2026). */
.sn-vistas {
  display: none;
  align-items: center; gap: 6px;
  margin: -8px 0 20px;
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  color: var(--wp--preset--color--tinta-3, #6B655D);
}
.sn-vistas--lista { display: flex; }
.sn-vistas__icono { flex: none; opacity: 0.85; }
.sn-vistas__n { font-variant-numeric: tabular-nums; font-weight: 600; }

/* La ventana para entrar sin salir del articulo. */
.sn-entrar-abre {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--wp--preset--color--turquesa-texto, #077480);
  text-decoration: underline;
}
.sn-entrar {
  border: 0; border-radius: 16px; padding: 0;
  max-width: 420px; width: calc(100% - 32px);
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.sn-entrar::backdrop { background: rgba(28,26,23,.55); }
.sn-entrar__caja { display: grid; gap: 8px; padding: 26px; }
.sn-entrar__titulo { margin: 0; font-size: var(--wp--preset--font-size--tarjeta, 1.35rem); }
.sn-entrar__texto {
  margin: 0 0 8px;
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
  color: var(--wp--preset--color--tinta-3, #6B655D);
}
.sn-entrar label { font-size: var(--wp--preset--font-size--peq, 0.875rem); }
.sn-entrar input {
  width: 100%; box-sizing: border-box; font: inherit;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--wp--preset--color--linea, #E6E1D8);
}
.sn-entrar__error {
  margin: 4px 0 0; padding: 8px 12px; border-radius: 8px;
  background: #FDECEA; color: #8C1D18;
  font-size: var(--wp--preset--font-size--peq, 0.875rem);
}
.sn-entrar__botones { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.sn-entrar__enviar {
  cursor: pointer; border: 0; border-radius: 999px; font: inherit; font-weight: 600;
  padding: 11px 24px;
  background: var(--wp--preset--color--turquesa-texto, #077480); color: #FFFFFF;
}
.sn-entrar__enviar[disabled] { opacity: .6; cursor: default; }
.sn-entrar__cierra {
  cursor: pointer; border: 0; background: none; font: inherit;
  color: var(--wp--preset--color--tinta-3, #6B655D); text-decoration: underline;
}
.sn-entrar__olvido { margin: 10px 0 0; font-size: var(--wp--preset--font-size--peq, 0.875rem); }

/* ─── La página de cada autora: /autoras/<slug>/ ──────────────────────────
   Su foto, su reseña y todos sus textos. Damián: «sería interesante poder
   dar clic sobre el autor para ver los otros artículos que tiene».
   El retrato reusa .sn-firma__foto / .sn-firma__inicial, así que basta con
   agrandarlo aquí: una sola forma de dibujar una cara en todo el sitio. */
.sn-autora{max-width:var(--wp--style--global--content-size,720px);margin:0 auto;
  padding:var(--wp--preset--spacing--e-7,48px) 0}
.sn-autora__cabecera{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.sn-autora__retrato .sn-firma__foto,.sn-autora__retrato .sn-firma__inicial{
  width:112px;height:112px;font-size:42px}
.sn-autora__nombre{margin:0;font-size:var(--wp--preset--font-size--titulo-2,2rem);line-height:1.15}
.sn-autora__resena{margin:10px 0 0;color:var(--wp--preset--color--tinta-2);max-width:46ch}

.sn-autora__titulo{margin:var(--wp--preset--spacing--e-7,48px) 0 16px;
  font-size:var(--wp--preset--font-size--peq);text-transform:uppercase;letter-spacing:.08em;
  color:var(--wp--preset--color--tinta-3);font-weight:600}

/* Una columna. Dos dejaban títulos de una línea al lado de títulos de tres,
   y el listado de Voces ya es así: lo que se reconoce no se vuelve a aprender. */
.sn-autora__lista{display:flex;flex-direction:column;gap:2px}
.sn-autora__texto{display:flex;gap:16px;align-items:center;padding:12px 14px;
  border-radius:14px;text-decoration:none;color:inherit;
  transition:background var(--sn-transicion)}
.sn-autora__texto:hover{background:var(--wp--preset--color--superficie-2)}
.sn-autora__texto img{width:72px;height:72px;flex:none;border-radius:10px;object-fit:cover;display:block}
.sn-autora__texto>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.sn-autora__texto-t{font-weight:600;line-height:1.3}
.sn-autora__texto-f{font-size:var(--wp--preset--font-size--peq);color:var(--wp--preset--color--tinta-3)}
.sn-autora__vacio{color:var(--wp--preset--color--tinta-3)}
.sn-autora__volver{margin:var(--wp--preset--spacing--e-7,48px) 0 0}
.sn-autora__volver a{color:var(--wp--preset--color--turquesa-texto);text-decoration:none;font-weight:600}
.sn-autora__volver a:hover{text-decoration:underline}

@media (max-width:599px){
  .sn-autora__retrato .sn-firma__foto,.sn-autora__retrato .sn-firma__inicial{width:84px;height:84px;font-size:32px}
  .sn-autora__texto img{width:56px;height:56px}
}

/* El nombre, ahora que lleva a alguna parte, tiene que parecerlo —pero sin
   subrayado permanente: va dentro de la firma, no es un enlace del texto. */
.sn-firma__enlace,.sn-ficha-autor__enlace{color:inherit;text-decoration:none}
.sn-firma__enlace:hover,.sn-ficha-autor__enlace:hover{text-decoration:underline}
.sn-ficha-autor__mas{margin:8px 0 0;font-size:var(--wp--preset--font-size--peq)}
.sn-ficha-autor__mas a{color:var(--wp--preset--color--turquesa-texto);font-weight:600;text-decoration:none}
.sn-ficha-autor__mas a:hover{text-decoration:underline}

/* ─── Buscador de Voces y tira de autoras ─────────────────────────────────
   Damián, 15-10-2026: poder buscar «por artista, por nombre, con mucha
   tolerancia, permitiendo errores ortográficos», y que la página de cada
   autora no quede relegada a quien entra por un artículo. */
/* El buscador es una banda estrecha, no una sección con su aire.
   `.sn-seccion` reparte hasta 96px arriba y abajo: entre el final de la
   presentación, el buscador y el principio del listado se juntaban casi
   trescientos píxeles de nada. Se recorta por los dos lados, y también el de
   la sección de antes y el de la de después. */
.sn-buscavoces{padding-top:0;padding-bottom:clamp(20px,3vw,32px)}
.sn-seccion:has(+ .sn-buscavoces){padding-bottom:clamp(20px,3vw,32px)}
.sn-buscavoces + .sn-seccion{padding-top:clamp(20px,3vw,32px)}
.sn-buscavoces__caja{display:block;max-width:560px}
.sn-buscavoces__etiqueta{display:block;margin:0 0 6px;font-size:var(--wp--preset--font-size--peq);
  font-weight:600;color:var(--wp--preset--color--tinta-2)}
.sn-buscavoces__campo{width:100%;box-sizing:border-box;min-height:52px;padding:0 16px;
  font-size:1rem;color:inherit;background:var(--wp--preset--color--superficie-2);
  border:1px solid var(--wp--preset--color--turquesa-200);border-radius:12px;
  transition:border-color var(--sn-transicion)}
.sn-buscavoces__campo:focus{outline:none;border-color:var(--wp--preset--color--turquesa-texto)}
.sn-buscavoces__ayuda{margin:8px 0 0;max-width:560px;
  font-size:var(--wp--preset--font-size--peq);color:var(--wp--preset--color--tinta-3)}
.sn-buscavoces__salida{margin:var(--wp--preset--spacing--e-6,32px) 0 0}
.sn-buscavoces__titulo{margin:var(--wp--preset--spacing--e-6,32px) 0 12px;
  font-size:var(--wp--preset--font-size--peq);text-transform:uppercase;letter-spacing:.08em;
  color:var(--wp--preset--color--tinta-3);font-weight:600}
.sn-buscavoces__titulo:first-child{margin-top:0}
.sn-buscavoces__nada{margin:0;color:var(--wp--preset--color--tinta-2)}
.sn-buscavoces__marca{width:72px;height:72px;flex:none;border-radius:10px;display:grid;
  place-items:center;font-weight:700;font-size:26px;
  background:var(--wp--preset--color--turquesa-100);color:var(--wp--preset--color--turquesa-texto)}

/* Sin cajas. Con fondo, la rejilla estira todas las fichas a la altura de la
   más alta y las que no tienen reseña quedan medio vacías: ocho recuadros
   desparejos. Sin fondo no hay nada que estirar y la línea de abajo las
   alinea igual. La reseña se corta a dos líneas por lo mismo. */
.sn-autoras-voces__titulo{margin:0 0 6px}
.sn-autoras-voces__lead{margin:0 0 var(--wp--preset--spacing--e-6,32px);max-width:56ch;
  color:var(--wp--preset--color--tinta-3)}
.sn-autoras-voces__rejilla{display:grid;gap:22px 32px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.sn-autoras-voces__ficha{display:flex;gap:12px;align-items:flex-start;
  text-decoration:none;color:inherit}
.sn-autoras-voces__ficha .sn-firma__foto,.sn-autoras-voces__ficha .sn-firma__inicial{
  width:48px;height:48px;font-size:19px}
.sn-autoras-voces__ficha>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.sn-autoras-voces__n{font-weight:600;line-height:1.35}
.sn-autoras-voces__ficha:hover .sn-autoras-voces__n{text-decoration:underline}
.sn-autoras-voces__c{font-size:var(--wp--preset--font-size--peq);color:var(--wp--preset--color--tinta-3)}
.sn-autoras-voces__r{font-size:var(--wp--preset--font-size--peq);
  color:var(--wp--preset--color--tinta-3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* `hidden` no gana contra `display:grid`, y el listado seguía ocupando su
   sitio —tarjetas en blanco— mientras se buscaba. No se ve en el HTML: hay
   que mirar la página. */
.sn-entradas[hidden],
.sn-paginacion[hidden],
.sn-autoras-voces[hidden],
.sn-buscavoces__salida[hidden]{display:none !important}

/* El papel de cada autora: «Pasante de Fundación Sensorial, 2022». Va en gris
   y pequeño porque sitúa, no es lo que se viene a leer. */
.sn-autora__rol{margin:6px 0 0;font-size:var(--wp--preset--font-size--peq);
  color:var(--wp--preset--color--tinta-3)}
.sn-autora__rol + .sn-autora__resena{margin-top:8px}
.sn-ficha-autor__rol{margin:0 0 6px;font-size:var(--wp--preset--font-size--peq);
  color:var(--wp--preset--color--tinta-3)}

/* ─── Citas numeradas, estilo Chicago-Deusto ──────────────────────────────
   El numerito va donde se usa el dato y lleva a su nota; la nota devuelve al
   punto exacto del texto con la flecha. Un dato sin fuente no vale nada, y
   una fuente al final que no se sabe a qué frase corresponde, tampoco.

   Una misma fuente conserva su número cada vez que se cita, en vez de repetir
   la ficha con otro número: en pantalla se consulta pinchando, no leyendo la
   lista en orden. */
.sn-nota-ref{font-size:.72em;line-height:0;vertical-align:super}
.sn-nota-ref a{color:var(--wp--preset--color--turquesa-texto);text-decoration:none;
  padding:0 1px;font-weight:600}
.sn-nota-ref a:hover{text-decoration:underline}

.sn-notas-aviso{font-size:var(--wp--preset--font-size--peq);
  color:var(--wp--preset--color--tinta-3);margin:0 0 16px}
.sn-notas{margin:0;padding-left:1.4em;font-size:var(--wp--preset--font-size--peq);
  color:var(--wp--preset--color--tinta-2);line-height:1.55}
.sn-notas li{margin-bottom:9px}
.sn-notas li::marker{color:var(--wp--preset--color--tinta-3)}
.sn-notas a{color:var(--wp--preset--color--turquesa-texto)}
.sn-notas-volver{text-decoration:none;font-weight:700;padding-left:2px}

/* Para que al pinchar un numerito la frase no quede pegada al borde de
   arriba, tapada por la cabecera fija. */
.sn-notas li:target,
[id^="ref-"]:target{scroll-margin-top:90px}
.sn-notas li:target{background:var(--wp--preset--color--turquesa-100);
  border-radius:6px;box-shadow:0 0 0 6px var(--wp--preset--color--turquesa-100)}

/* Las ilustraciones de los textos propios van más anchas que la columna de
   lectura: son horizontales 16:9 y dentro de 68ch se ven diminutas. Se salen
   un poco por los dos lados, y en móvil se quedan como están. */
.sn-foto--ancha{margin:36px 0;max-width:none}
.sn-foto--ancha img{width:100%;height:auto;border-radius:12px;display:block}
@media (min-width:900px){
  .sn-foto--ancha{width:min(100%, 880px);margin-left:calc((100% - min(100%, 880px)) / 2)}
}

/* ─── En móvil, las firmas se deslizan con el dedo ────────────────────────
   Nueve fichas en columna ocupaban media pantalla de scroll. Damián pidió
   compactarlo y pensó en un carrusel; esto hace lo mismo sin flechas, sin
   JavaScript y sin esconder a nadie: se empuja con el dedo, como todo lo
   demás en un teléfono.

   `scroll-snap` hace que cada ficha quede encuadrada al soltar, para que no
   se corte un nombre por la mitad. En escritorio no cambia nada: sigue la
   rejilla de siempre. */
@media (max-width: 767px){
  .sn-autoras-voces__rejilla{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Se sale por los dos lados hasta el borde de la pantalla, para que se
       vea que hay más a la derecha. El relleno lo devuelve a su sitio. */
    margin-inline:calc(clamp(16px, 4vw, 48px) * -1);
    padding-inline:clamp(16px, 4vw, 48px);
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .sn-autoras-voces__rejilla::-webkit-scrollbar{display:none}
  .sn-autoras-voces__ficha{
    flex:0 0 78%;
    scroll-snap-align:start;
  }
  /* Un poco de aire al final, para que la última no quede pegada al borde. */
  .sn-autoras-voces__rejilla::after{
    content:"";
    flex:0 0 clamp(16px, 4vw, 48px);
  }
}

@media (max-width: 767px){
  /* Tres líneas, no dos: las fichas son más estrechas que en la rejilla y la
     línea más larga —la de Coraima— se cortaba a media palabra. */
  .sn-autoras-voces__rejilla .sn-autoras-voces__r{-webkit-line-clamp:3}
}

/* ─── La tira en escritorio, cuando hay muchas firmas ─────────────────────
   Esta clase la pone el patrón solo cuando pasan de diez. Hoy son nueve, así
   que no se aplica: queda puesta para el día que entren más practicantes, sin
   que haya que volver a tocar nada.

   Mismo comportamiento que en móvil pero con fichas más estrechas, para que
   se vean cuatro a la vez y se entienda de un golpe que hay más a la derecha. */
@media (min-width: 768px){
  .sn-autoras-voces__rejilla--tira{
    display:flex;
    grid-template-columns:none;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-bottom:10px;
    scrollbar-width:thin;
  }
  .sn-autoras-voces__rejilla--tira > .sn-autoras-voces__ficha{
    flex:0 0 clamp(240px, 23%, 300px);
    scroll-snap-align:start;
  }
}