/*
Theme Name: RaD.Ar CIPPEC
Theme URI:
Description: Landing front-end inspirada en cippec.org. Child theme de Twenty Twenty-Three (block theme / FSE).
Author: Kevin Monaco
Template: twentytwentythree
Version: 1.0.0
Text Domain: radar-cippec
*/

:root{
  /* PALETA CIPPEC. Los cinco de arriba son los oficiales del manual; los de
     abajo se derivan de ellos por calculo, no a ojo, y cada uno que lleva texto
     verifica el contraste que pide WCAG. Ver MARCA-CIPPEC.md en la raiz del
     proyecto. Si hay que cambiar un color, se cambia aca y en ningun otro lado. */
  --teal:#23343D;            /* base: titulos, texto, fondos de seccion */
  --gris-bg:#F7F7F7;         /* fondo general de pagina, no blanco puro */
  --cyan:#4ACEED;            /* acento secundario: subrayados, lineas, bullets */
  --coral:#EA3175;           /* acento fuerte: ganchos y numeros. Con moderacion */
  --amarillo:#FFF64D;        /* acento grafico puntual y decorativo */

  /* derivados del teal */
  --teal-0:#293C46;          /* superficie oscura de pagina: el teal x1,15 */
  --teal-2:#394850;          /* fondos y bordes sobre oscuro */
  --teal-3:#4B5960;          /* idem, un paso mas claro */
  --tinta:#23343D;           /* color del texto de lectura */
  --tinta-2:#657177;         /* texto secundario, 4,8:1 sobre el fondo */
  --tinta-3:#7F898E;         /* texto chico y decorativo */
  --tinta-4:#A3AAAE;         /* texto sobre fondo oscuro */
  --tinta-5:#C8CCCE;         /* texto suave sobre fondo oscuro */
  --linea:#E5E7E8;           /* filetes y bordes */

  /* derivados de los acentos, para cuando el tono puro no tiene contraste */
  --cyan-d:#2B7789;          /* cyan legible como texto, 4,8:1 */
  --coral-d:#C72A63;         /* coral legible como texto, 5,0:1 */
  --coral-tinte:#FCE6EE;     /* fondo de recuadro */
  /* LOS DOS TINTES SON PARA RECUADROS CHICOS Y ETIQUETAS, NO PARA BANDAS.
     Se probó usarlos como fondo de media página y se ven como colores ajenos a la
     marca: la paleta no tiene pasteles, tiene teal, cyan, coral y amarillo plenos.
     Y de paso el contraste no da: sobre --coral-tinte un enlace en --cyan-d mide
     4,31:1 y la norma pide 4,5. Para separar un bloque grande, la clase es
     .franja-teal, que va en el teal pleno del manual. */
  --cyan-tinte:#E9F9FD;      /* superficie secundaria clara, para separar bloques */
  --amarillo-d:#99942E;      /* unico amarillo con 3:1 para un trazo */

  --blanco:#fff;
  --fuente:Raleway,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  --fuente-titulo:"Playfair Display",Georgia,"Times New Roman",serif;
}
.radar *{box-sizing:border-box;margin:0;padding:0}
/* LA SUPERFICIE DEL SITIO
   El fondo general es el gris #F7F7F7 del manual y NO blanco puro. Sobre ese
   gris, las tarjetas van en blanco: esa sola diferencia arma la jerarquia sin
   agregar ni una linea mas de trama. La pagina es la mesa y las tarjetas son las
   hojas apoyadas encima.

   EL GRIS SE PINTA EN EL DOCUMENTO, no aca. Esta en theme.json, en
   styles.color.background. Primero se habia puesto en .radar y el resultado eran
   bandas: una pagina tiene varios envoltorios .radar separados, con bloques de
   WordPress en el medio, y entre uno y otro se veia el blanco del tema padre. El
   fondo tiene que ser del documento para que no haya nada entre medio. Aca .radar
   queda transparente a proposito. */
.radar{font-family:var(--fuente);color:var(--tinta);line-height:1.5;background:transparent}
.radar a{color:inherit;text-decoration:none}
.radar img{max-width:100%;display:block}
.radar .container{max-width:1160px;margin:0 auto;padding:0 24px}

/* HEADER */
/* ENCABEZADO EN TEAL PLENO
   Se probo blanco y quedaba como un corte mas. En teal es una barra de marca: el
   color base del manual, con el logo en su version negativa. Y de paso resuelve
   el pedido de un encabezado de color sin inventar un azul que no este en la
   paleta: el teal ES el azul del manual. */
.radar .header{background:var(--teal);border-bottom:none}
/* El encabezado venia finito para el peso que tiene ahora que es una barra de
   color. Mas aire arriba y abajo, y el menu con mas altura de linea. */
/* La fila de la marca lleva ahora también el botón de novedades, así que puede
   envolver: en una ventana angosta las redes y el botón bajan juntos a su propio
   renglón en lugar de apretar el logo. */
.radar .header-top{display:flex;align-items:center;justify-content:space-between;
                   padding:30px 0 18px;flex-wrap:wrap;gap:14px}
/* LA MARCA DEL SITIO Y LA INSTITUCIONAL, JUNTAS
   RaD.Ar se escribe con el mismo tratamiento que el logotipo de CIPPEC: peso
   liviano, letras separadas, sin negrita. Al lado va el logo institucional en su
   archivo original, sin recolorear ni deformar, con la firma "un proyecto de".
   Asi se lee de quien es el proyecto sin que las dos marcas compitan. */
.radar .marca{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.radar .logo{font-size:30px;font-weight:300;letter-spacing:3px;color:#fff;position:relative}
/* La firma va discreta: es el credito institucional, no el titulo. Antes el logo
   media 17px de alto y competia con RaD.Ar. */
.radar .por-cippec{display:inline-flex;align-items:center;gap:7px;font-size:8px;
                   font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
                   color:var(--tinta-4);white-space:nowrap;opacity:.9;transition:opacity .2s}
.radar .por-cippec:hover{opacity:1}
.radar .por-cippec img{height:12px;width:auto}
.radar .logo span{color:var(--cyan);font-size:12px;vertical-align:super;margin-left:2px}
.radar .header-tools{display:flex;align-items:center;gap:18px;color:var(--tinta-4)}
/* El botón separado de los iconos: son dos cosas distintas —una acción y cuatro
   enlaces— y con el mismo aire parecían una fila de cinco. */
.radar .header-tools .cta{margin-right:8px}
/* Sin cursor:pointer en general: lo lleva solo lo que se puede apretar. */
.radar .header-tools svg{width:17px;height:17px;fill:currentColor;display:block}
.radar .red{display:block;color:inherit;transition:color .2s,transform .2s}
.radar .red:hover{color:var(--cyan);transform:translateY(-2px)}
.radar .red:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:3px}
/* EL BOTON QUE PLIEGA EL MENU. Apagado por defecto: en pantalla de escritorio no
   existe, y en el celular lo enciende la regla del bloque de abajo —pero solo
   cuando el JavaScript le puso al encabezado la clase «menu-plegable», o sea solo
   cuando hay alguien que lo pueda volver a abrir—. */
.radar .nav-boton{display:none;align-items:center;gap:9px;background:none;
                  border:1px solid rgba(255,255,255,.28);border-radius:4px;color:#fff;
                  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.5px;
                  text-transform:uppercase;padding:9px 13px;cursor:pointer}
.radar .nav-boton:hover{border-color:var(--cyan);color:var(--cyan)}
.radar .nav-boton:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* Las tres barras se dibujan con CSS y no con un icono: son tres rectangulos, y un
   SVG mas para bajar por tres rectangulos no se justifica. */
.radar .nav-boton .barras{display:grid;gap:3px;width:16px}
.radar .nav-boton .barras span{display:block;height:2px;background:currentColor;border-radius:1px;
                               transition:transform .18s,opacity .18s}
/* Abierto, las tres barras se vuelven una cruz. El desplazamiento es 5 px porque es
   lo que separa a cada barra de la del medio: 2 de alto mas 3 de hueco. */
.radar .header.menu-abierto .nav-boton .barras span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.radar .header.menu-abierto .nav-boton .barras span:nth-child(2){opacity:0}
.radar .header.menu-abierto .nav-boton .barras span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .radar .nav-boton .barras span{transition:none}
}
.radar .nav-row{display:flex;align-items:center;justify-content:space-between;padding:0 0 16px;flex-wrap:wrap;gap:12px}
/* 22 y no 26: los seis nombres del menú entran cómodos en una línea hasta 1.160 px
   —el ancho del contenedor— con lugar de sobra para que uno crezca. Con 26 y los
   nombres nuevos quedaba al filo, y quedar al filo es volver a partirse. */
.radar .nav{display:flex;gap:22px;flex-wrap:wrap}
.radar .nav a{font-size:12.5px;letter-spacing:.5px;color:#fff;padding:12px 0;text-transform:uppercase}
.radar .nav a:hover{color:var(--cyan)}

/* DESPLEGABLE DE TEMAS
   Se abre con el mouse y también con el teclado (focus-within). El enlace padre
   sigue funcionando: en pantallas táctiles, donde no hay hover, tocarlo lleva a
   la página, que tiene el mismo menú en forma de útiles. */
.radar .nav-item{position:relative;display:inline-flex}
.radar .nav-item > a{display:inline-flex;align-items:center;gap:5px}
.radar .nav-item .flecha{font-size:8px;line-height:1;transition:transform .15s;color:var(--cyan)}
.radar .nav-item:hover .flecha{transform:translateY(1px) rotate(180deg)}
.radar .submenu{position:absolute;top:100%;left:-16px;min-width:216px;z-index:40;
                background:#fff;border:1px solid var(--linea);border-top:3px solid var(--cyan);
                border-radius:0 0 10px 10px;box-shadow:0 12px 26px rgba(29,46,56,.13);
                padding:10px 0 8px;opacity:0;visibility:hidden;transform:translateY(-5px);
                transition:opacity .15s ease,transform .15s ease,visibility .15s}
.radar .nav-item:hover .submenu,.radar .nav-item:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.radar .submenu-tit{font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
                    color:#7F898E;padding:0 18px 7px}
.radar .submenu a,.radar .submenu .submenu-pronto{display:block;padding:8px 18px;font-size:13px;
                    letter-spacing:0;text-transform:none;line-height:1.3}
.radar .submenu a{color:var(--teal);font-weight:600}
.radar .submenu a:hover{background:var(--gris-bg);color:var(--coral)}
.radar .submenu .submenu-pronto{color:#7F898E;cursor:default}
.radar .submenu small{font-size:8.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
                      color:var(--cyan);margin-left:7px}
@media(max-width:760px){
  .radar .submenu{display:none}
  .radar .nav-item .flecha{display:none}
}
.radar .cta{background:var(--cyan);color:var(--teal);font-weight:700;font-size:12.5px;letter-spacing:.5px;padding:11px 20px;text-transform:uppercase;transition:background .2s}
.radar .cta:hover{background:#fff;color:var(--teal)}

/* HERO — hoja escolar rayada */
/* La portada comparte el gris del documento. La hoja rayada queda contenida en
   el hero: es un gesto de apertura, no una trama para todo el sitio. */
/* LOS RENGLONES VUELVEN A LA PORTADA.
   Se habian sacado junto con el margen vertical, que era el que se desfasaba. El
   problema era ese, no los renglones: son horizontales, arrancan del borde
   superior y no tienen con que desalinearse. El margen vertical, en cambio, queda
   solo en el hero, que es el unico lugar donde lo dibuja alguien. */
/* LA HOJA, EN LA PAGINA
   El renglon y el margen del cuaderno los dibuja la portada entera, un solo
   lugar. Con el hero corto, una hoja que viviera solo en el hero alcanzaria a
   dibujarse tres veces y se leeria como una guarda; corrida a la pagina vuelve a
   ser una hoja, y el hero pasa a ser su primer tramo. Las tarjetas son blancas y
   opacas, asi que la trama aparece en los margenes y en el aire entre bloques,
   que es donde funciona y no molesta detras de ningun texto. */
.radar.hoja{
  background-color:var(--gris-bg);
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 33px,rgba(74,206,237,.22) 33px 34px),
    linear-gradient(to right,transparent 0 62px,rgba(234,49,117,.28) 62px 63px,transparent 63px 69px,rgba(234,49,117,.28) 69px 70px,transparent 70px);
  background-position:left 12px,left top;
}
@media(max-width:820px){
  .radar.hoja{background-image:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(74,206,237,.18) 33px 34px)}
}
.radar.hoja .hero{border-bottom:none}

/* El hero no dibuja lineas propias: las pinta la pagina. Cuando las dibujaban
   los dos, aparecian dos pares desfasados entre si. Aca queda solo la diagonal,
   que es la que da la sensacion de hoja apoyada. */
.radar .hero{position:relative;overflow:hidden;background-color:transparent}
.radar .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(29,46,56,.05) 0 18%,transparent 18% 34%,rgba(29,46,56,.04) 34% 47%,transparent 47% 66%,rgba(29,46,56,.05) 66% 80%,transparent 80%)}
.radar .hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px 0 40px;flex-wrap:wrap}
/* El hero bajo no es un hero chico: es un hero sin botones. Con 30px arriba y
   26px abajo el bloque quedaba apretado contra el encabezado y contra las
   tarjetas, y toda la portada parecia comprimida. 56 y 48 le devuelven el aire
   sin volver a los 44+40 de cuando tenia dos botones adentro. */
.radar .hero-bajo .hero-inner{padding:56px 0 48px}
/* El bloque del hero se centra en lugar de quedar pegado a la izquierda con un
   vacio grande a la derecha. Centrado, el aire queda repartido y la asimetria
   deja de leerse como un error de armado. */
.radar .hero-center{flex:1;min-width:260px;max-width:760px;margin:0 auto;padding-left:0}
.radar .hero-eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--tinta-2);
  font-size:11px;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px}
.radar .hero-eyebrow img{height:21px;width:auto}
/* El titulo pasa a Playfair, que es lo que el manual reserva para los titulos
   jerarquicos y este es el mas jerarquico del sitio. Venia en Raleway 800: por eso
   se veia demasiado grueso. En Playfair Bold la misma medida pesa menos y el
   contraste con la bajada en Raleway ordena la jerarquia. */
.radar .hero-title{font-family:var(--fuente-titulo);color:var(--teal);font-size:62px;
  font-weight:700;letter-spacing:-1px;line-height:1}
.radar .hero-bajo .hero-title{font-size:56px}
/* La bajada baja de 800 a 600: acompana al titulo en vez de competirle. */
.radar .hero-title small{display:block;font-family:var(--fuente);font-size:25px;
  font-weight:600;font-style:italic;letter-spacing:-.2px;color:var(--coral);margin-top:8px}
.radar .hero-title small span{color:var(--cyan)}
.radar .hero-lead{max-width:560px;margin-top:30px;color:var(--teal);font-size:15.5px;font-weight:500;line-height:1.6}
.radar .hero-bajo .hero-lead{margin-top:20px;font-size:15.5px}
.radar .hero-acciones{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.radar .btn{font-size:14px;font-weight:600;padding:12px 24px;border-radius:6px;white-space:nowrap;transition:background .2s,color .2s;border:1.5px solid var(--teal)}
.radar .btn-solido{background:var(--teal);color:#fff}
.radar .btn-solido:hover{background:var(--cyan);border-color:var(--cyan);color:var(--teal)}
.radar .btn-linea{background:transparent;color:var(--teal);font-weight:500}
.radar .btn-linea:hover{background:var(--teal);color:#fff}
@media(max-width:760px){
  .radar .hero-title{font-size:44px}
  .radar .hero-title small{font-size:19px}
  .radar .hero-center{padding-left:24px}
}

/* SECCIONES */
.radar .section{padding:52px 0}
/* RESALTADOR
   El amarillo pasa de ser una barra de 4px a un trazo de fibra: dos pasadas
   superpuestas, bordes irregulares y una leve inclinación, por detrás de las
   palabras. Va solo en los títulos de página; si se repitiera en cada bloque
   dejaría de leerse como un gesto hecho a mano. */
.radar .section-title{display:inline-block;font-family:var(--fuente-titulo);font-size:34px;
                      font-weight:700;color:var(--teal);margin-bottom:28px;position:relative}
/* El trazo va POR ENCIMA del texto con mix-blend-mode:multiply, como la tinta
   real de un resaltador: el amarillo se multiplica sobre el papel y sobre la
   letra, así que el navy sigue leyéndose. Antes iba detrás con z-index:-1 y
   quedaba tapado por el fondo blanco de .radar. */
.radar .section-title::before,.radar .section-title::after{content:"";position:absolute;
                      pointer-events:none;background:var(--amarillo);mix-blend-mode:multiply}
.radar .section-title::before{left:-11px;right:-15px;top:48%;bottom:1%;opacity:.85;
                      border-radius:4px 11px 5px 12px;transform:rotate(-1deg)}
.radar .section-title::after{left:-5px;right:-9px;top:63%;bottom:-8%;opacity:.7;
                      border-radius:11px 4px 12px 5px;transform:rotate(.7deg)}

/* DESTACADOS DINAMICOS (Query Loop) */
.radar .radar-featured-query .wp-block-post-template{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.radar .radar-featured-query li.wp-block-post{display:flex;flex-direction:column;margin:0}
.radar .radar-featured-query li.wp-block-post::before{content:"";display:block;height:190px;margin-bottom:14px;border-radius:2px;background:var(--teal) url(assets/edu-fallback.svg) center/cover no-repeat}
.radar .radar-featured-query li.wp-block-post:has(.wp-block-post-featured-image)::before{display:none}
.radar .radar-featured-query .wp-block-post-featured-image{margin:0 0 14px;border-radius:2px;overflow:hidden}
.radar .radar-featured-query .wp-block-post-featured-image a,
.radar .radar-featured-query .wp-block-post-featured-image img{display:block;width:100%;height:190px;object-fit:cover}
.radar .radar-featured-query .wp-block-post-title{margin:0 0 8px;font-size:19px;font-weight:600;line-height:1.25}
.radar .radar-featured-query .wp-block-post-title a{color:var(--cyan);text-decoration:none}
.radar .radar-featured-query .wp-block-post-title a:hover{color:var(--cyan-d)}
.radar .radar-featured-query .wp-block-post-excerpt{margin:0}
.radar .radar-featured-query .wp-block-post-excerpt p{color:var(--tinta-2);font-size:13.5px;font-weight:300;line-height:1.55;margin:0}
.radar .radar-featured-query .wp-block-post-excerpt__more-link{display:inline-block;margin-top:8px;color:var(--cyan);font-size:12.5px;text-transform:uppercase;letter-spacing:1px}
@media(max-width:900px){.radar .radar-featured-query .wp-block-post-template{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.radar .radar-featured-query .wp-block-post-template{grid-template-columns:1fr}}

/* VIDRIERA DE TEMAS (útiles escolares)
   Menú de los cuatro temas de Docencia en datos. Cada tema es un útil: planilla
   de asistencia, calculadora, guardapolvo y libros. Los que todavía no tienen
   contenido no son enlaces: llevan la marca "Pronto" en vez de un link muerto.
   El tema abierto se marca con el resaltador amarillo, no con un recuadro. */
.radar .vidriera{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
                 max-width:940px;margin:0 auto}
/* FRANJA DE TEMAS
   Se probo en teal pleno y en un tinte de cyan; las dos veces sumaba un color que
   no hacia falta. Va en el gris de base, el mismo de toda la pagina, y lo que la
   separa son los dos filetes: el bloque se distingue por su borde y no por
   cambiar de color. */
.radar .franja-temas{background:var(--gris-bg);padding:34px 0 30px;margin:0 0 44px;
                     border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}

/* LOS TEMAS, EN CÍRCULOS DE COLOR
   La forma sale del propio isotipo de CIPPEC: un círculo pleno con un dibujo de
   línea adentro. Es el gesto más reconocible de la marca, así que los temas lo
   repiten en lugar de inventar otro.

   Se probó antes con fichas blancas y no funcionó: agregaban un marco y una
   barra de color que competían con las tarjetas de la portada. El círculo no
   necesita marco porque el color ya lo delimita.

   El pictograma NO es siempre blanco: va del color que se lee sobre su círculo.
   Blanco sobre cyan da 1,73:1 y sobre amarillo 1,06:1, o sea invisible. Sobre
   los círculos oscuros el dibujo va blanco; sobre los claros, en teal. Los
   cuatro quedan arriba de 4:1. */
.radar .util{flex:none;width:172px;display:flex;flex-direction:column;align-items:center;
             gap:14px;transition:transform .2s}
.radar a.util:hover{transform:translateY(-4px)}
.radar .util-dib{width:92px;height:92px;display:block;transition:transform .2s ease-out}
.radar a.util:hover .util-dib{transform:scale(1.04)}
.radar a.util:focus-visible{outline:2px solid var(--teal);outline-offset:6px;border-radius:6px}
.radar .util-txt{font-size:13.5px;font-weight:600;line-height:1.3;text-align:center;
                 color:var(--teal);position:relative}
.radar .util-txt small{display:block;font-size:9px;font-weight:700;letter-spacing:1.2px;
                       text-transform:uppercase;color:var(--tinta-2);margin-top:5px}
.radar .util.pronto{cursor:default}
/* Los tres temas que faltan se apagan. Que el único círculo con color pleno sea
   el publicado es la señal más clara de en qué estado está cada uno. */
.radar .util.pronto .util-dib{opacity:.5;filter:saturate(.18)}
.radar .util.pronto .util-txt{color:var(--tinta-2)}
/* Trazo de fibra detrás del tema activo: dos pasadas, borde irregular, inclinado. */
.radar .util.activo .util-txt::before{content:"";position:absolute;pointer-events:none;
  left:-9px;right:-9px;top:12%;bottom:-8%;background:var(--amarillo);opacity:.85;
  mix-blend-mode:multiply;border-radius:3px 9px 4px 10px;transform:rotate(-1.4deg)}
.radar .util.activo .util-txt::after{content:"";position:absolute;pointer-events:none;
  left:-4px;right:-13px;top:32%;bottom:2%;background:var(--amarillo);opacity:.7;
  mix-blend-mode:multiply;border-radius:8px 3px 9px 4px;transform:rotate(.8deg)}
@media(max-width:1000px){
  .radar .vidriera{justify-content:center;gap:34px 40px;max-width:560px}
}
@media(max-width:620px){
  .radar .vidriera{gap:26px 20px;max-width:none}
  .radar .util{width:140px}
  .radar .util-dib{width:76px;height:76px}
  .radar .util-txt{font-size:12.5px}
}

/* SUBTITULOS DE TEMA
   Formato distinto al título de página (que va en Playfair con subrayado
   amarillo): acá Raleway con una barra magenta al costado. */
.radar .sub-cabeza{border-left:4px solid var(--coral);padding-left:15px;margin-bottom:18px}
.radar .sub-title{font-family:var(--fuente);font-size:25px;font-weight:700;color:var(--teal);line-height:1.2}

/* TABLERO EMBEBIDO
   El tablero vive en graficos/salario-en-datos.html y entra por iframe. Avisa
   su altura por postMessage, así que no lleva scroll propio ni deja huecos.
   Queda dentro de .container, o sea centrado y alineado con el resto. */
.radar .tablero-seccion{padding:0 0 60px;scroll-margin-top:20px}
.radar .tablero-bajada{font-size:14px;color:var(--tinta-2);line-height:1.6;max-width:760px;margin-bottom:22px}
.radar .tablero-bajada b{color:var(--teal);font-weight:600}
.radar .tablero-marco{display:block;width:100%;height:520px;border:0;overflow:hidden}
.radar .tablero-fuente{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);font-size:12px;color:var(--tinta-2);line-height:1.55}
@media(max-width:900px){ .radar .tablero-marco{height:900px} }
@media(max-width:620px){ .radar .tablero-marco{height:1200px} }

/* GRAFICOS EMBEBIDOS
   El gráfico vive en un archivo aparte (graficos/*.html) y se muestra en un
   iframe. El propio gráfico avisa su altura por postMessage y el script de la
   plantilla la aplica, así no queda una barra de scroll interna. */
.radar .grafico-seccion{padding:0 0 56px}
/* Sin fondo propio: adentro va el tablero, que trae su propio gris. Cuando este
   envoltorio pintaba blanco, el resultado era un marco blanco alrededor de una
   superficie gris. */
.radar .grafico-caja{border:1px solid var(--teal);border-radius:12px;overflow:hidden;background:transparent;max-width:860px}
.radar .grafico-cuerpo{padding:16px 20px 18px}
.radar .grafico-kicker{font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--coral);margin-bottom:8px}
/* La altura inicial es la que suele medir el gráfico ya dibujado: así no se ve
   un salto ni queda una franja vacía antes de que avise su alto real. */
.radar .grafico-marco{display:block;width:100%;height:540px;border:0;overflow:hidden}
.radar .grafico-ayuda{margin-top:12px;font-size:12.5px;color:var(--tinta-2);line-height:1.55;max-width:660px}
@media(max-width:600px){
  .radar .grafico-cuerpo{padding:14px 14px 16px}
  .radar .grafico-marco{height:600px}
}

/* PAGINAS INTERNAS */
/* Sin min-height. Con 50vh, una pagina de texto corto abria un hueco de media
   pantalla entre el titulo y lo que seguia: era el vacio grande de Docencia en
   datos. Y sin el borde de arriba, que volvia a cortar la superficie continua. */
.radar.pagina .section{padding:44px 0 60px}
.radar.pagina h1.section-title{font-size:40px;margin-bottom:26px}
.radar.pagina p{color:var(--tinta);font-size:16px;line-height:1.7;margin-bottom:16px;max-width:760px}

/* EL HUECO ENTRE LA BAJADA Y EL CONTENIDO
   Las cuatro paginas internas estan hechas de dos piezas: arriba el titulo y el
   texto que se escribe en WordPress, abajo un bloque con lo que arma el tema o un
   plugin. Entre las dos se acumulaban tres espacios distintos y sumaban un vacio
   de unos 150 pixeles:

     60px  el padding de abajo del bloque de WordPress
     ~24px la separacion que WordPress pone entre bloques hermanos
     ~43px un parrafo vacio que queda en el editor al apretar Enter de mas

   Las tres se resuelven aca y no en cada plantilla, asi que valen para las cuatro
   paginas y para las que vengan.

   1. Un parrafo sin nada adentro no ocupa lugar. Pasa seguido: se aprieta Enter al
      final del texto y WordPress guarda un parrafo vacio que nadie ve en el
      editor pero que en la pagina mide un renglon entero. */
.radar.pagina p:empty{display:none;margin:0}

/* 2. Si al bloque de WordPress le sigue otro bloque nuestro, el padding de abajo
      se reduce: el que separa es el de abajo, no los dos. :has() pregunta "tenes
      un hermano justo despues"; en un navegador viejo que no lo entienda, la
      pagina se ve como antes, con el hueco, y nada mas.

      LA BANDA DEL TITULO QUEDA AFUERA de esta regla. Es una banda de color, no un
      bloque de texto: su padding de abajo es lo que la hace una banda y no una raya.
      Desde que la bajada entro adentro de la banda, en Tendencias y en Dialogos la
      banda es lo unico que hay en el main, asi que sin esta excepcion se le comia el
      aire de abajo y el titulo quedaba pegado al borde del teal. */
main.radar.pagina:has(+ .radar) .section:not(.pag-banda){padding-bottom:12px}

/* 3. Y se saca la separacion automatica que WordPress mete entre los dos
      bloques, que es la que no se ve venir porque no esta escrita en ninguna
      plantilla. */
main.radar.pagina + .radar{margin-top:0}
.radar.pagina h2{font-family:var(--fuente-titulo);font-size:26px;color:var(--teal);margin:32px 0 12px}
.radar.pagina h3{font-size:19px;font-weight:700;color:var(--teal);margin:24px 0 10px}
.radar.pagina ul,.radar.pagina ol{margin:0 0 18px 22px;max-width:760px}
.radar.pagina li{font-size:16px;line-height:1.7;margin-bottom:6px}
/* El subrayado es para los enlaces DENTRO de un texto. Una ficha entera que es un
   enlace —un recurso, una tarjeta— no se subraya: el subrayado se hereda y salían
   subrayados el título, la bajada y el pie. Se excluye por clase y no se anula desde
   abajo, porque text-decoration no se puede desactivar en un descendiente. */
.radar.pagina a:not(.btn):not(.rec-item){color:var(--cyan-d);text-decoration:underline}

/* FOOTER */
.radar .footer{background:var(--teal);color:#C8CCCE;padding:52px 0 26px}
.radar .footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.radar .footer-logo img{height:34px;width:auto}
/* Las redes del pie son mas grandes que las del encabezado: aca no compiten con
   nada y el pie es el lugar donde uno busca a quien seguir. */
.radar .footer-redes{display:flex;gap:16px;margin-top:20px;color:var(--tinta-5)}
.radar .footer-redes svg{width:19px;height:19px;fill:currentColor;display:block}
.radar .footer-cols{display:flex;gap:56px;flex-wrap:wrap}
.radar .footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#4ACEED;margin-bottom:14px}
.radar .footer-col a{display:block;font-size:13.5px;color:#C8CCCE;padding:5px 0}
.radar .footer-col a:hover{color:var(--cyan)}
/* CON EL APOYO DE.
   Una tira propia entre el cuerpo del pie y la linea de contacto, con su filete
   arriba: no es parte de la navegacion ni del domicilio, es otra cosa.
   Los logos van al 85% de opacidad y llegan al 100% al pasar el mouse. Blanco puro
   sobre teal grita mas que el CIPPEC de arriba, que es el dueno del sitio, y el orden
   de importancia tiene que leerse. */
.radar .footer-apoyo{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  border-top:1px solid #394850;margin-top:34px;padding-top:22px}
.radar .footer-apoyo-titulo{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#A3AAAE}
.radar .footer-apoyo-logos{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.radar .footer-apoyo-logos a{display:block;opacity:.85;transition:opacity .18s}
.radar .footer-apoyo-logos a:hover{opacity:1}
/* Alturas distintas a proposito: ver el comentario del pie en parts/footer.html. */
.radar .footer-apoyo img.apoyo-zurich{height:48px;width:auto;display:block}
.radar .footer-apoyo img.apoyo-unesco{height:26px;width:auto;display:block}
/* Cuando el apoyo esta arriba, la linea de contacto ya no necesita su propio filete
   ni el margen grande: quedaban dos rayas seguidas. */
.radar .footer-apoyo + .footer-bottom{border-top:0;margin-top:22px;padding-top:0}
.radar .footer-bottom{border-top:1px solid #394850;margin-top:34px;padding-top:20px;font-size:12.5px;color:#A3AAAE}

/* RESPONSIVE */
@media(max-width:900px){
}

/* EL ENCABEZADO EN EL CELULAR, APRETADO.
   En una pantalla de 375 px el encabezado medía 434 px de alto: el 53% de lo que se
   ve al abrir el sitio era el menú, y la página empezaba abajo del pliegue. Pasaba
   porque acá arriba está todo pensado para una barra ancha —logo de 30 px, botón
   grande, seis nombres en una fila— y en el celular eso no se acomoda, se apila:
   la marca, el botón con las redes, y el menú en cuatro renglones con 12 px de aire
   arriba y abajo de cada uno.

   Acá se achica cada pieza lo justo, sin sacar ninguna. Sacar el menú detrás de un
   botón de hamburguesa sería lo habitual, y no se hizo: son seis destinos, dos de
   ellos todavía sin contenido, y un sitio que recién se lanza gana más mostrando de
   qué se trata que escondiéndolo detrás de un ícono.

   Lo único que no se toca es el alto de los enlaces del menú: bajan de 41 a 33 px,
   que sigue siendo un blanco cómodo para el dedo. Apretarlos más entra en el
   terreno donde uno le erra al que quería tocar.

   EL CORTE ES 760 y no 620, que era el primero que se probó: a 620 el encabezado
   medía 188 px y a 640 saltaba a 272, o sea que un teléfono apenas más ancho volvía
   a tener el encabezado grande. 760 es además el corte que el tema ya usa para
   apagar el submenú de Datos —el ancho a partir del cual esta barra deja de
   comportarse como una barra de escritorio—, así que no agrega una frontera nueva:
   usa la que ya estaba. */
@media(max-width:760px){
  .radar .header-top{padding:16px 0 8px;gap:10px}
  .radar .marca{gap:12px}
  .radar .logo{font-size:24px;letter-spacing:2px}
  .radar .logo span{font-size:10px}
  /* El botón se va contra el margen izquierdo y las cuatro redes contra el derecho,
     JUNTAS. Con space-between los cinco elementos repartían el ancho por igual y en
     una tablet los iconos quedaban desparramados de punta a punta, como si fueran
     cuatro secciones y no cuatro enlaces al mismo lugar. El margen automático empuja
     al grupo entero; el gap de 14 los mantiene pegados entre sí. */
  .radar .header-tools{width:100%;gap:14px;justify-content:flex-start}
  .radar .header-tools .cta{margin-right:auto}
  /* El botón entraba en dos renglones («RECIBÍ / NOVEDADES») y por eso era tan alto. */
  .radar .cta{padding:9px 14px;font-size:11.5px;letter-spacing:.3px;white-space:nowrap}
  .radar .nav-row{padding:0 0 10px;gap:8px}
  .radar .nav{gap:2px 14px}
  .radar .nav a{padding:8px 0}

  /* EL MENU, PLEGADO DETRAS DEL BOTON.
     Las tres reglas piden «menu-plegable», que es una clase que pone el JavaScript
     del encabezado. Sin script no se cumple ninguna: el boton sigue escondido y el
     menu, desplegado. Es la unica manera de que un archivo que no cargue no deje al
     sitio sin navegacion.
     El menu abierto se dibuja como una columna y no como los renglones apretados de
     la barra: cuando ocupa la pantalla ya no hay que ahorrar alto, y una lista en
     columna con cada nombre en su renglon se recorre mucho mejor con el pulgar. */
  .radar .header.menu-plegable .nav-boton{display:inline-flex}
  .radar .header.menu-plegable .nav-row{display:none}
  .radar .header.menu-plegable.menu-abierto .nav-row{display:flex;padding-bottom:14px}
  .radar .header.menu-plegable.menu-abierto .nav{flex-direction:column;gap:0;width:100%}
  .radar .header.menu-plegable.menu-abierto .nav > *{width:100%}
  .radar .header.menu-plegable.menu-abierto .nav a{padding:11px 0;border-top:1px solid rgba(255,255,255,.12)}
  /* «Docencia en datos» viene envuelto en un span —el que sostiene el submenú en
     escritorio— y su enlace es inline-flex, asi que su renglon quedaba mas corto que
     los otros cinco y la linea divisoria se cortaba a la mitad. En columna, ese
     enlace ocupa el ancho como los demas. */
  .radar .header.menu-plegable.menu-abierto .nav-item{display:block}
  .radar .header.menu-plegable.menu-abierto .nav-item > a{display:flex;width:100%}
}


/* =========================================================================
   LAS TRES VIDRIERAS DE LA PORTADA
   =========================================================================

   No son iguales y no se muestran iguales. Docencia en datos tiene series de 23
   anios y se lleva el bloque grande; Tendencias y Dialogos van mas chicas. La
   jerarquia visual dice la verdad sobre el proyecto en lugar de prometer tres
   cosas y entregar una.

   Y las cifras estan ACA, en la portada, no detras de un clic. Quien entra,
   mira cinco segundos y se va, igual se lleva tres numeros. Antes se iba sin
   nada.
   ========================================================================= */
.radar .vidrieras{padding:0 0 56px}
.radar .mosaico{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:stretch}
.radar .vd{background:#fff;border:1px solid var(--linea);border-radius:12px;
           padding:20px 22px 18px;display:flex;flex-direction:column;
           border-top:3px solid var(--linea);transition:border-color .2s,box-shadow .2s}
.radar .vd:hover{box-shadow:0 8px 24px rgba(35,52,61,.08)}
.radar .vd-datos{border-top-color:var(--coral)}
.radar .vd-tendencias{border-top-color:var(--cyan-d)}
/* Dialogos ocupa las dos columnas y es la tarjeta mas alta que la tapa que
   tiene adentro: por eso el texto se estira (stretch) en vez de quedar pegado
   arriba, y el bloque de texto se centra contra la tapa. Asi la cita ocupa la
   tarjeta en lugar de dejar un hueco abajo. */
.radar .vd-dialogos{border-top-color:var(--amarillo);grid-column:1 / -1;
                    flex-direction:row;gap:34px;align-items:stretch;padding:22px 26px 20px}
.radar .vd-kicker{font-size:9.5px;font-weight:700;letter-spacing:1.5px;
                  text-transform:uppercase;color:var(--tinta-2)}

/* El enlace explicito. Reemplaza a los botones del hero: la tarjeta entera
   invita, y este renglon dice adonde lleva. Sin el, la portada quedaria linda
   y muda. */
.radar .vd-ver{margin-top:auto;padding-top:14px;font-size:12px;font-weight:600;
               color:var(--cyan-d);align-self:flex-start}
.radar .vd-ver:hover{color:var(--coral)}
.radar .vd-pie{font-size:11px;color:var(--tinta-2);line-height:1.4;margin-top:3px}

/* Las tres cifras. El unico numero en coral es el que avisa: el coral significa
   alerta y no "numero grande", asi que los otros dos van en teal. */
.radar .vd-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.radar .vd-num{font-size:34px;font-weight:700;line-height:1;letter-spacing:-1px;color:var(--teal)}
.radar .vd-num-alerta{color:var(--coral)}
/* LA MINI SERIE
   El alto sale del viewBox (1000 x 100) y no de una medida fija: height:auto
   deja que el navegador respete la proporcion. Cuando el alto estaba clavado en
   52px y el SVG traia preserveAspectRatio="none", el dibujo se estiraba tres
   veces mas a lo ancho que a lo alto y los circulos de los extremos salian
   ovalados. El trazo y los aros se miden en unidades del viewBox, asi que
   engordan y adelgazan junto con la tarjeta. */
.radar .vd-serie{width:100%;height:auto;margin-top:20px;display:block;overflow:visible}
.radar .vd-area{fill:var(--coral);opacity:.07}
.radar .vd-eje{stroke:var(--linea);stroke-width:2}
.radar .vd-linea{fill:none;stroke:var(--coral);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.radar .vd-pico{fill:#fff;stroke:var(--coral);stroke-width:3}
.radar .vd-hoy{fill:var(--coral)}
/* Los anios van en HTML y no adentro del SVG: adentro escalarian con el dibujo
   y quedarian de un cuerpo distinto al del resto de la pagina. */
.radar .vd-serie-pie{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
                     font-size:10px;color:var(--tinta-3);letter-spacing:.4px;margin-top:6px}
.radar .vd-serie-que{color:var(--tinta-2)}

/* TENDENCIAS: una nota por vez, con flechas.
   Las notas se apilan en el mismo lugar con grid y solo una es visible, asi la
   tarjeta no cambia de alto al pasar de una a otra. */
.radar .vd-cabeza{display:flex;align-items:center;justify-content:space-between;gap:10px}
.radar .vd-flechas{display:flex;align-items:center;gap:7px}
.radar .vd-flecha{width:22px;height:22px;border:1px solid var(--linea);border-radius:50%;
                  background:#fff;color:var(--teal);font-size:13px;line-height:1;cursor:pointer;
                  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.radar .vd-flecha:hover{border-color:var(--coral);color:var(--coral)}
.radar .vd-conteo{font-size:10.5px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.radar .vd-conteo b{color:var(--teal);font-weight:700}
.radar .vd-notas{display:grid;margin-top:16px}
.radar .vd-nota{grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity .18s}
.radar .vd-nota-visible{visibility:visible;opacity:1}
/* LA FOTO DE PORTADA
   Sale del borde de la tarjeta con margenes negativos que igualan su padding
   lateral, asi la imagen llega hasta el filo y no queda flotando en un marco
   blanco. Alto fijo y object-fit:cover: las fotos vienen de cualquier tamanio y
   todas las notas tienen que medir lo mismo, porque estan apiladas en la misma
   celda y el carrusel no debe cambiar de alto al pasar de una a otra.

   Si la nota no tiene imagen destacada, este bloque no se dibuja: la tarjeta
   queda con titulo, bajada y pie, y se ve bien igual. */
.radar .vd-nota-img{margin:0 -22px 13px;overflow:hidden;background:var(--gris-bg)}
.radar .vd-nota-img img{width:100%;height:152px;object-fit:cover;display:block;
                        transition:transform .3s ease-out}
.radar .vd-nota:hover .vd-nota-img img{transform:scale(1.03)}
.radar .vd-nota-tit{font-size:15.5px;font-weight:700;color:var(--teal);line-height:1.3}
.radar .vd-nota:hover .vd-nota-tit{color:var(--coral)}
/* La bajada entra tambien en la vidriera: con el titulo solo, la tarjeta quedaba
   con un hueco grande abajo, y son los renglones que deciden si alguien entra. */
.radar .vd-nota-bajada{font-size:12.5px;color:var(--tinta-2);line-height:1.5;margin-top:6px}
.radar .vd-nota .vd-pie{margin-top:9px}

/* Los cinco guiones. Sin ellos las flechas no dicen cuanto hay, y una flecha
   que no promete cantidad no invita a apretarla. */
.radar .vd-guiones{display:flex;gap:4px;margin-top:16px}
.radar .vd-guion{height:3px;width:20px;border-radius:2px;background:var(--linea);transition:background .2s}
.radar .vd-guion-activo{background:var(--cyan-d)}

/* DIALOGOS: la unica vidriera con voz.
   Es la unica con serif y la unica con una cita. Ese contraste de registro la
   destaca sin mas color ni mas tamanio, y va a lo ancho porque una cita se lee
   mal en columna angosta. */
.radar .vd-dialogos-texto{flex:1;display:flex;flex-direction:column;justify-content:center}
/* La cita crece de 20 a 28px y el ancho baja de 44 a 27em. Las dos cosas van
   juntas: agrandar la letra sin acortar el renglon habria dado una sola linea
   larguisima. Con 27em entran unas tres lineas y el bloque llena la tarjeta.
   El margen de arriba de vd-ver se anula, porque con el texto centrado no tiene
   que empujar nada al piso. */
.radar .vd-cita{font-family:var(--fuente-titulo);font-size:28px;line-height:1.35;
                color:var(--teal);margin-top:14px;max-width:27em}
.radar .vd-dialogos .vd-ver{margin-top:0;padding-top:18px}

/* LA TAPA DEL DOCUMENTO
   Copia la estructura de la tapa de los documentos de politicas publicas de
   CIPPEC: fondo teal, etiqueta coral arriba a la derecha, el logotipo en blanco
   con el isotipo cyan, el titulo alternando cyan y blanco, la fecha abajo a la
   izquierda. Un objeto que se puede abrir pesa mas que la palabra "documento". */
.radar .tapa{width:150px;height:212px;flex:none;background:var(--teal);border-radius:6px;
             position:relative;overflow:hidden;padding:14px 13px;display:block;
             transition:transform .2s}
.radar .tapa:hover{transform:translateY(-3px)}
.radar .tapa-etiqueta{position:absolute;top:0;right:0;background:var(--coral);color:#fff;
                      font-size:7px;line-height:1.4;padding:5px 7px;text-align:right;
                      letter-spacing:.3px;max-width:74px}
.radar .tapa-logo{display:block;color:#fff;font-size:11px;letter-spacing:2px;margin-top:22px}
.radar .tapa-logo i{color:var(--cyan);font-style:normal;font-size:6px;vertical-align:super}
.radar .tapa-titulo{display:block;font-family:var(--fuente-titulo);font-size:17px;
                    line-height:1.2;color:#fff;margin-top:34px}
.radar .tapa-titulo b{color:var(--cyan);font-weight:700}
.radar .tapa-fecha{position:absolute;bottom:13px;left:13px;color:#fff;font-size:7.5px;opacity:.75}

/* En preparacion: punteada y apagada. Mostrar algo que todavia no existe solo
   funciona si el estado es explicito; si no, es una promesa vacia. */
.radar .tapa-plano{background:transparent;border:1px dashed var(--tinta-4)}
.radar .tapa-plano .tapa-etiqueta{background:var(--tinta-4)}
.radar .tapa-plano .tapa-logo{color:var(--tinta-2)}
.radar .tapa-plano .tapa-logo i{color:var(--tinta-4)}
.radar .tapa-plano .tapa-titulo{color:var(--tinta-2)}
.radar .tapa-plano .tapa-titulo b{color:var(--tinta-2)}
.radar .tapa-plano .tapa-fecha{color:var(--tinta-2)}

@media(max-width:900px){
  .radar .mosaico{grid-template-columns:1fr}
  .radar .vd-dialogos{flex-direction:column;gap:18px}
  .radar .tapa{align-self:flex-start}
}
@media(max-width:620px){
  .radar .vd-cifras{grid-template-columns:1fr;gap:12px}
  .radar .vd-num{font-size:30px}
  .radar .vd-cita{font-size:21px;max-width:none}
}


/* =========================================================================
   TENDENCIAS EN POLITICA DOCENTE — la seccion
   =========================================================================

   La pagina estaba vacia. Ahora muestra la forma que va a tener: el menu de
   ejes con el criterio de siempre (el que existe en color, los que faltan
   apagados y con "Pronto") y cinco fichas de muestra.

   Las fichas de muestra NO son enlaces. Un enlace que no abre nada es peor que
   ningun enlace: el visitante hace clic, no pasa nada y concluye que el sitio
   esta roto. Son articulos con una etiqueta que dice que son.
   ========================================================================= */
.radar .seccion-notas{padding:0 0 60px}
/* 16 px: es texto de entrada de sección, o sea lo mismo que el de Diálogos y el de
   las páginas. Medía 14 y era la letra más chica de todas las entradas del sitio,
   sin ningún motivo. Ver la escala en el bloque «LA ESCALA DE CUERPOS». */
.radar .tn-bajada{font-size:16px;color:var(--tinta-2);line-height:1.7;max-width:760px;margin-bottom:24px}

/* EL AVISO
   Recuadro con el filete coral al costado, el mismo gesto que el sub-titulo.
   Va arriba de todo y en el cuerpo del texto de lectura, no en letra chica:
   avisar en 10px lo que importa es no avisar. */
.radar .tn-aviso{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--coral);
                 border-radius:0 8px 8px 0;padding:16px 20px;margin-bottom:34px;
                 font-size:14px;line-height:1.6;color:var(--tinta-2);max-width:820px}
.radar .tn-aviso b{color:var(--teal);font-weight:700}

/* LOS FILTROS DE TEMA
   Son botones de verdad y no enlaces con #: filtran en la misma pagina, no
   navegan. Hay que resetear la tipografia porque un <button> no hereda la fuente
   del documento. */
.radar .tn-ejes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.radar .tn-eje{display:inline-flex;align-items:baseline;gap:8px;padding:9px 15px;
               border:1px solid var(--linea);border-radius:100px;background:#fff;
               font-family:inherit;font-size:13px;font-weight:600;color:var(--tinta-2);
               cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.radar .tn-eje:hover{border-color:var(--cyan-d);color:var(--cyan-d)}
/* EL TEMA ELEGIDO VA EN AMARILLO, y es el único amarillo pleno de la página.
   Es el color de este componente y este es el lugar donde puede ser fondo: un botón
   chico, con el teal encima a 11,4:1. Y no es un color puesto al azar: es el mismo
   resaltador con el que se marca el tema abierto en «Docencia en datos».
   Antes iba en teal, o sea del mismo color que el panel de la entrada y que la banda
   del título: el botón elegido no se distinguía de los otros por color sino solo por
   ser oscuro. */
.radar .tn-eje-activo,.radar .tn-eje-activo:hover{background:var(--amarillo);
  border-color:var(--amarillo);color:var(--teal)}
.radar .tn-eje:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.radar .tn-vacio{font-size:14px;color:var(--tinta-2);margin-top:22px}

/* LAS FICHAS */
.radar .tn-grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.radar .tn-ficha{background:#fff;border:1px solid var(--linea);border-radius:12px;
                 padding:18px 20px 16px;display:flex;flex-direction:column}
/* ESTO NO ES OPCIONAL, ES EL FILTRO
   Se esconde con una clase nuestra y no con el atributo hidden. El atributo
   funciona por una regla del navegador (display:none) que pierde contra cualquier
   regla nuestra que diga display, y la de arriba dice display:flex. Una clase
   propia, declarada aca abajo y por lo tanto despues, no depende de nada. */
.radar .tn-oculto{display:none}
.radar .tn-ficha-alto{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
/* LOS TRES TIPOS DE NOTA
   Analisis, opinion y divulgacion se distinguen por color de etiqueta y no por
   icono: son tres palabras cortas, un icono no agregaria nada. Analisis va en
   teal pleno porque es el registro de la casa; opinion en cyan, que marca que
   ahi habla alguien; divulgacion en coral claro. */
.radar .tn-tag{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
               padding:4px 8px;border-radius:4px}
.radar .tn-tag-analisis{background:var(--teal);color:#fff}
.radar .tn-tag-opinion{background:var(--cyan-tinte);color:var(--cyan-d)}
.radar .tn-tag-divulgacion{background:var(--coral-tinte);color:var(--coral-d)}
/* Un tipo nuevo, agregado en WordPress, cae en el gris neutro. Es mejor que
   quedarse sin etiqueta o pintarla de un color que ya significa otra cosa. */
.radar .tn-tag-otro{background:var(--linea);color:var(--tinta-2)}
/* El eje va del otro lado de la ficha, en el lugar donde las de muestra dicen
   "Muestra". Sin recuadro: es una referencia, no una etiqueta mas. */
.radar .tn-eje-nombre{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
                      color:var(--tinta-3);text-align:right;line-height:1.3}
.radar .tn-muestra{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
                   color:var(--tinta-3)}
.radar .tn-ficha-tit{font-family:var(--fuente);font-size:15.5px;font-weight:700;
                     color:var(--teal);line-height:1.3;margin:0 0 8px}
.radar .tn-ficha-bajada{font-size:14px;color:var(--tinta-2);line-height:1.55;margin:0}
.radar .tn-ficha-pie{margin-top:auto;padding-top:14px;font-size:11.5px;color:var(--tinta-3);
                     letter-spacing:.3px;line-height:1.5}
/* De que parte la nota. Es el dato que separa una nota de opinion suelta de una
   nota de RaD.Ar: siempre hay un origen citado. */
.radar .tn-desde{display:block;color:var(--tinta-2)}
/* El texto de muestra va en gris y con el titulo mas apagado que una nota real:
   cuando haya notas de verdad, la diferencia entre las dos se va a ver de lejos. */
.radar .tn-ficha-muestra .tn-ficha-tit{color:var(--tinta-2)}

/* LAS FICHAS DE VERDAD
   La tarjeta entera es el enlace. Por eso el "a partir de" va como texto y no
   como enlace: un enlace no puede tener otro adentro, y el navegador arma un
   desastre silencioso si se lo pone. */
.radar a.tn-ficha-real{transition:box-shadow .2s,transform .2s,border-color .2s}
.radar a.tn-ficha-real:hover{box-shadow:0 8px 24px rgba(35,52,61,.08);transform:translateY(-2px)}
.radar a.tn-ficha-real:hover .tn-ficha-tit{color:var(--coral)}
.radar a.tn-ficha-real:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* La imagen se recorta a una proporcion fija para que cuatro fichas en fila
   queden parejas, aunque las fotos vengan de cualquier tamanio. Los margenes
   negativos la hacen llegar hasta el borde de la tarjeta. */
.radar .tn-ficha-img{margin:-18px -20px 14px;border-radius:11px 11px 0 0;overflow:hidden;
                     background:var(--gris-bg)}
.radar .tn-ficha-img img{width:100%;height:150px;object-fit:cover;display:block}

/* La ultima baldosa no finge ser una nota: es el hueco donde va la primera de
   verdad. Punteada, como la tapa en preparacion, para que sea el mismo idioma. */
.radar .tn-ficha-hueco{background:transparent;border-style:dashed;border-color:var(--tinta-4)}
.radar .tn-ficha-cta{margin-top:auto;padding-top:14px;font-size:12px;font-weight:600;
                     color:var(--cyan-d);align-self:flex-start}
.radar .tn-ficha-cta:hover{color:var(--coral)}

/* LA VIDRIERA SIN NINGUNA NOTA TODAVIA.
   El cartel es una ficha más, con el filete amarillo de Tendencias arriba para que se
   distinga de una nota de verdad, y al lado dos siluetas punteadas que dicen, sin
   escribirlo, que acá van a haber más. La altura mínima es la de una ficha con imagen:
   sin eso, las siluetas se achican hasta la nada y el conjunto parece un error de
   armado en lugar de una sección esperando contenido. */
.radar .tn-ficha-pronto{border-top:4px solid var(--amarillo)}
.radar .tn-tag-pronto{background:var(--amarillo);color:var(--teal)}
.radar .tn-pronto-cuando{color:var(--tinta-2);border-top:1px solid var(--linea)}
.radar .tn-ficha-silueta{background:transparent;border-style:dashed;border-color:var(--tinta-4);
  min-height:220px}

@media(max-width:900px){
  .radar .tn-grilla{grid-template-columns:1fr 1fr}
  /* Con dos columnas sobra una silueta: quedaría sola en un renglón. */
  .radar .tn-grilla-pronto .tn-ficha-silueta:last-child{display:none}
}
@media(max-width:620px){
  .radar .tn-grilla{grid-template-columns:1fr}
  /* En una columna las siluetas no dicen nada: son dos rectángulos vacíos que hay que
     scrollear. Se van y queda el cartel solo, que es lo que importa. */
  .radar .tn-grilla-pronto .tn-ficha-silueta{display:none}
}


/* =========================================================================
   LA PAGINA DE UNA NOTA
   =========================================================================

   Hereda casi todo de .radar.pagina, que ya sabe dibujar texto de lectura:
   parrafos de 16px con 760px de ancho maximo, subtitulos, listas y enlaces
   subrayados. Lo unico propio es la cabecera: la vuelta a la seccion, las
   etiquetas, la firma y de que parte la nota.
   ========================================================================= */
/* Arriba y abajo. Quien llega desde un enlace que le mandaron no sabe que existe
   una seccion: si el unico camino estuviera al final, habria que leer la nota
   entera para descubrirlo. */
.radar .nota-volver{display:inline-block;font-size:12.5px;font-weight:600;
                    color:var(--cyan-d);margin-bottom:18px}
.radar .nota-volver:hover{color:var(--coral)}
/* El titulo de la nota va sin el trazo de resaltador: ese gesto es de los
   titulos de seccion, y si apareciera en cada nota dejaria de ser un gesto. */
.radar .nota-titulo{font-family:var(--fuente-titulo);font-size:38px;font-weight:700;
                    color:var(--teal);line-height:1.15;margin:0 0 16px;max-width:20em}
.radar .nota-datos{border-bottom:1px solid var(--linea);padding-bottom:18px;margin-bottom:26px}
.radar .nota-etiquetas{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.radar .nota-etiquetas .tn-eje-nombre{text-align:left}
.radar .nota-firma{font-size:13.5px;color:var(--tinta-2)}
.radar .nota-firma b{color:var(--teal);font-weight:700}
.radar .nota-desde{font-size:13px;color:var(--tinta-2);line-height:1.6;margin:10px 0 0;max-width:700px}
.radar .nota-desde b{color:var(--teal);font-weight:700}
.radar .nota-desde a{color:var(--cyan-d);text-decoration:underline}
/* La imagen de portada, a todo el ancho de la columna de lectura. */
.radar .nota-tapa{margin:0 0 26px;border-radius:12px;overflow:hidden}
.radar .nota-tapa img{width:100%;height:auto;display:block}
.radar .nota-pie{border-top:1px solid var(--linea);margin-top:38px;padding-top:22px}
.radar .nota-pie .nota-volver{margin-bottom:0}
/* LA HOJA DE LA NOTA
   Es la hoja blanca compartida, con dos medidas propias: un poco más ancha, porque
   una nota tiene imagen de portada además de texto, y con más aire adentro, porque
   acá se lee de corrido y no se mira un bloque. */
/* Esta hoja SÍ conserva un ancho de lectura, porque una nota se lee de corrido y no
   se mira como un bloque. Y como la hoja es el propio contenedor, que va con
   margin:0 auto, el aire que sobra queda repartido a los dos lados en lugar de
   acumularse a la derecha: es la misma solución que el bloque del hero de la
   portada, y por el mismo motivo. */
.radar .nota-hoja{max-width:960px;padding:36px 44px 30px}

@media(max-width:620px){
  .radar .nota-titulo{font-size:29px}
  .radar .nota-hoja{padding:24px 20px}
}


/* =========================================================================
   DIALOGOS POR LA DOCENCIA — la seccion
   =========================================================================

   Dos documentos y dos estados: uno existe y se baja, el otro esta en
   preparacion y se muestra como plano. La diferencia se ve sin leer una
   palabra, porque el primero tiene su tapa de verdad y el segundo un contorno
   punteado.
   ========================================================================= */
.radar .seccion-docs{padding:0 0 60px}
/* El relato del proceso, antes de los documentos: explica de donde salen. */
.radar .dc-intro{font-size:16px;color:var(--tinta);line-height:1.7;max-width:800px;margin-bottom:16px}
.radar .dc-intro b{font-weight:700;color:var(--teal)}
.radar .dc-intro a{color:var(--cyan-d);text-decoration:underline}

/* LAS CIFRAS DEL PROCESO
   Dos casilleros, no una tarjeta: la escala del trabajo se dice con dos numeros y
   punto. Van con el filete coral al costado, el mismo gesto del sub-titulo, para
   que no compitan con las cifras del salario, que son las unicas que van grandes
   y en coral pleno. */
.radar .dc-proceso{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 28px}
.radar .dc-hito{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--cyan);
                border-radius:0 8px 8px 0;padding:14px 20px;display:flex;align-items:baseline;gap:10px;
                max-width:420px}
.radar .dc-hito b{font-size:30px;font-weight:700;line-height:1;letter-spacing:-1px;color:var(--teal)}
.radar .dc-hito span{font-size:12.5px;color:var(--tinta-2);line-height:1.4}

.radar .dc-lista{display:flex;flex-direction:column;gap:20px}
/* Cuando todavía no hay publicaciones cargadas. La sección no puede quedar vacía y
   muda: a quien edita el sitio se le dice dónde cargarlas, y a quien visita, que
   están por venir. */
.radar .dc-vacio{font-size:14.5px;color:var(--tinta-2);line-height:1.6;
  border-left:3px solid var(--linea);padding-left:14px;margin:0}
.radar .dc-ficha{background:#fff;border:1px solid var(--linea);border-radius:12px;
                 padding:26px 28px;display:flex;gap:30px;align-items:flex-start}
.radar .dc-tapa{flex:none;width:200px;display:block;border-radius:6px;overflow:hidden;
                box-shadow:0 4px 14px rgba(35,52,61,.12);transition:transform .2s}
.radar .dc-tapa:hover{transform:translateY(-3px)}
.radar .dc-tapa img{width:200px;height:auto;display:block}
.radar .dc-txt{flex:1;min-width:0}
.radar .dc-etiqueta{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:1.4px;
                    text-transform:uppercase;color:var(--tinta-2);
                    border:1px solid var(--linea);border-radius:4px;padding:4px 8px;margin-bottom:12px}
/* El que ya existe lleva la etiqueta en coral pleno; el que esta en
   preparacion, en gris con borde. Mismo lugar, distinto peso. */
.radar .dc-etiqueta-hay{background:var(--coral);border-color:var(--coral);color:#fff}
.radar .dc-tit{font-family:var(--fuente-titulo);font-size:28px;font-weight:700;
                color:var(--teal);line-height:1.2;margin:0 0 8px}
.radar .dc-meta{font-size:12.5px;color:var(--tinta-2);margin-bottom:14px}
.radar .dc-meta a{color:var(--cyan-d);text-decoration:underline}
.radar .dc-bajada{font-size:14px;color:var(--tinta);line-height:1.65;margin:0 0 12px;max-width:62em}
.radar .dc-bajada b{font-weight:700;color:var(--teal)}

/* EL INDICE DEL DOCUMENTO
   Empezo siendo solo para los documentos que faltaban —decir que va a contener es
   lo que convierte una promesa en un plan— y desde el 2 de septiembre de 2026 se
   muestra tambien en los publicados: ahi es lo que deja ver de que trata sin bajar
   un PDF entero. Los numeros los pone el contador de la lista, no el texto, asi
   que agregar o sacar un punto no obliga a renumerar a mano. */
.radar .dc-indice{list-style:none;counter-reset:idx;margin:14px 0 16px;max-width:62em}
.radar .dc-indice li{counter-increment:idx;position:relative;padding-left:30px;
                     font-size:14px;color:var(--tinta-2);line-height:1.6;margin-bottom:9px}
.radar .dc-indice li::before{content:counter(idx);position:absolute;left:0;top:1px;
                     width:20px;height:20px;border-radius:50%;background:var(--cyan-tinte);
                     color:var(--cyan-d);font-size:10.5px;font-weight:700;
                     display:flex;align-items:center;justify-content:center}
.radar .dc-indice b{font-weight:700;color:var(--teal)}
.radar .dc-ver{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--cyan-d)}
.radar .dc-ver:hover{color:var(--coral)}
/* Sin documento no hay enlace: el renglon dice por que, en gris, y no se puede
   apretar. */
.radar .dc-ver-mudo{color:var(--tinta-3);font-weight:500;cursor:default}
.radar .dc-ver-mudo:hover{color:var(--tinta-3)}

/* LA TAPA GRANDE
   La misma tapa de la portada a 200x283, o sea un tercio mas. Todas las medidas
   de adentro se multiplican por lo mismo: si se agrandara la caja sin agrandar
   la tipografia, el titulo quedaria flotando en un rectangulo vacio. */
.radar .tapa-grande{width:200px;height:283px;padding:19px 17px}
.radar .tapa-grande .tapa-etiqueta{font-size:9.5px;padding:7px 9px;max-width:98px}
.radar .tapa-grande .tapa-logo{font-size:14.5px;letter-spacing:2.6px;margin-top:29px}
.radar .tapa-grande .tapa-logo i{font-size:8px}
.radar .tapa-grande .tapa-titulo{font-size:22.5px;margin-top:45px}
.radar .tapa-grande .tapa-fecha{bottom:17px;left:17px;font-size:10px}

@media(max-width:760px){
  .radar .dc-ficha{flex-direction:column;gap:20px}
}


/* =========================================================================
   RECIBI NOVEDADES — la caja de correo
   =========================================================================

   El formulario lo dibuja el plugin "RaD.Ar - Novedades", que es donde vive el
   nonce; las clases nv-* las define el tema, que es donde vive el diseno. Esa
   division es a proposito: cambiar como se ve la caja no obliga a tocar el
   codigo que guarda los correos, y al reves tampoco.

   Si algun dia se renombra una clase nv-* hay que renombrarla en los dos lados.
   Estan todas juntas aca abajo para que se vea de una que son pocas.
   ========================================================================= */
.radar .seccion-novedades{padding:0 0 70px}
/* Dos columnas: a la izquierda que se recibe, a la derecha la caja. Nadie deja
   su correo sin saber que le va a llegar. */
.radar .nv-marco{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
                 background:#fff;border:1px solid var(--linea);border-top:3px solid var(--cyan);
                 border-radius:12px;padding:34px 36px}
.radar .nv-tit{font-family:var(--fuente-titulo);font-size:27px;font-weight:700;
               color:var(--teal);line-height:1.2;margin-bottom:12px}
.radar .nv-bajada{font-size:16px;color:var(--tinta-2);line-height:1.65;margin-bottom:16px}
.radar .nv-lista{list-style:none;margin:0}
/* La vinieta es el punto del isotipo, en cyan: el mismo gesto de la marca en
   lugar de un bullet cualquiera. */
.radar .nv-lista li{position:relative;padding-left:18px;font-size:16px;color:var(--tinta);
                    line-height:1.6;margin-bottom:8px}
.radar .nv-lista li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
                    border-radius:50%;background:var(--cyan)}

/* LA CAJA DE CORREO, EN TEAL PLENO.
   Era el gris del sitio adentro de una tarjeta blanca: dos grises pegados, y la
   única acción de toda la página quedaba siendo lo más apagado de la pantalla. En
   teal, el botón cyan que tiene adentro pasa a ser lo primero que se ve, que es
   exactamente lo que se quiere de un formulario de una sola línea.
   Los textos de adentro suben de contraste porque el fondo cambió de claro a oscuro:
   el rótulo a blanco (12,9:1), la línea del consentimiento a --tinta-5 (8,0:1) y la
   letra chica a --tinta-4 (5,5:1). El --tinta-2 y el --tinta-3 que tenían antes dan
   1,8 y 2,4 sobre teal, o sea ilegibles. */
.radar .nv-caja{background:var(--teal);border:0;border-radius:10px;padding:24px}
.radar .nv-label{display:block;font-size:11px;font-weight:700;letter-spacing:1.2px;
                 text-transform:uppercase;color:var(--blanco);margin-bottom:8px}
.radar .nv-caja .nv-acepto{color:var(--tinta-5)}
.radar .nv-caja .nv-chico{color:var(--tinta-4)}
.radar .nv-caja a{color:var(--cyan)}
/* El campo y el boton pegados: es una sola accion, no dos. En pantalla angosta
   se separan, porque un boton de 90px al lado de un campo de 90px no sirve. */
.radar .nv-juntos{display:flex;gap:0}
.radar .nv-input{flex:1;min-width:0;font-family:inherit;font-size:15px;color:var(--tinta);
                 background:#fff;border:1px solid var(--tinta-4);border-right:none;
                 border-radius:8px 0 0 8px;padding:13px 15px}
.radar .nv-input::placeholder{color:var(--tinta-4)}
.radar .nv-input:focus{outline:none;border-color:var(--cyan-d);box-shadow:inset 0 0 0 1px var(--cyan-d)}
.radar .nv-boton{flex:none;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.6px;
                 text-transform:uppercase;color:var(--teal);background:var(--cyan);
                 border:1px solid var(--cyan);border-radius:0 8px 8px 0;padding:13px 22px;
                 cursor:pointer;transition:background .2s,border-color .2s}
.radar .nv-boton:hover{background:var(--cyan-d);border-color:var(--cyan-d);color:#fff}
.radar .nv-boton:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.radar .nv-acepto{display:flex;align-items:flex-start;gap:9px;margin-top:16px;
                  font-size:12.5px;color:var(--tinta-2);line-height:1.5;cursor:pointer}
.radar .nv-acepto input{margin-top:2px;flex:none;accent-color:var(--cyan-d);width:15px;height:15px}
.radar .nv-chico{font-size:11.5px;color:var(--tinta-3);line-height:1.5;margin-top:14px}

/* EL RESULTADO DEL ENVIO
   Va arriba de la caja y con role="status", asi un lector de pantalla lo canta
   sin que la persona tenga que ir a buscarlo. */
.radar .nv-aviso{font-size:14px;line-height:1.5;padding:12px 15px;border-radius:8px;margin-bottom:16px}
.radar .nv-aviso-bien{background:var(--cyan-tinte);color:var(--teal);border:1px solid var(--cyan)}
.radar .nv-aviso-mal{background:var(--coral-tinte);color:var(--coral-d);border:1px solid var(--coral)}

/* Sin el plugin activo, el tema pone un enlace de correo en lugar de la marca. */
.radar .nv-sin-plugin{font-size:15px;color:var(--tinta);line-height:1.6;
                      background:var(--gris-bg);border:1px solid var(--linea);
                      border-radius:10px;padding:24px}
.radar .nv-sin-plugin a{color:var(--cyan-d);text-decoration:underline}

@media(max-width:820px){
  .radar .nv-marco{grid-template-columns:1fr;gap:26px;padding:26px 24px}
}
@media(max-width:520px){
  .radar .nv-juntos{flex-direction:column;gap:10px}
  .radar .nv-input{border-right:1px solid var(--tinta-4);border-radius:8px}
  .radar .nv-boton{border-radius:8px;width:100%}
}

/* ==========================================================================
   PORTADA · EL HERO SOBRE EL PIZARRON Y EL RELATO DE LOS CINCO

   Reescrito el 28 de agosto de 2026. Reemplaza al pizarron enmarcado con cuatro
   paradas y a la grilla de cinco tarjetas.

   POR QUE UN PIZARRON, QUE NO CAMBIO
   Veniamos usando fondo oscuro porque quedaba bien. Aca el oscuro SIGNIFICA
   algo: es un pizarron, y eso ubica al proyecto en la escuela sin dibujar
   ninguna escuela. El granulado y las pasadas de trapo son lo que lo sostiene;
   sin ellas es un rectangulo verde y la idea no se lee.

   QUE SI CAMBIO
   - Va a sangre, sin marco: un pizarron con marco es un objeto adentro de una
     pagina, sin marco la pagina ES el pizarron. Y el ancho completo es lo que
     deja lugar a cinco paradas en una fila.
   - Las pasadas subieron de seis a once y de entre el 2,2 y el 4 % de blanco a
     entre el 2,6 y el 5,5 %. El hero es ahora casi todo superficie vacia y con
     los valores viejos se veia liso. Nada pasa del 5,5 %: si se nota como
     textura esta bien, si se nota como dibujo esta mal.
   - No hay ninguna marca vertical. Se probaron dos, imitando lo que deja el
     borrador al pasar de arriba abajo, y un degradado con paradas tan juntas no
     se lee como un borron: se lee como una linea con bordes duros.

   Todos los colores salen de las variables de :root. Ninguno escrito a mano,
   salvo el #20302C del pizarron y el #E8EEEA de la tiza, que son la superficie
   y el material y no son colores de marca.
   ========================================================================== */
.radar .pz{background:var(--teal)}
.radar .pz-pizarra{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 24% 10%, rgba(255,255,255,.05), rgba(255,255,255,0) 58%),
             #20302C}
/* el grano */
.radar .pz-pizarra::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.68;
  mix-blend-mode:overlay;background-size:120px 120px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.14'/></svg>")}
/* LAS PASADAS DEL TRAPO. Anchas y bajas —del orden de 60 % de ancho por 12 % de
   alto— porque el trapo se mueve de costado: una mancha redonda no se lee como
   una pasada, se lee como una mancha de humedad. */
.radar .pz-pizarra::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 11% at 22% 18%, rgba(255,255,255,.055), rgba(255,255,255,0) 70%),
    radial-gradient(46% 9%  at 74% 27%, rgba(255,255,255,.042), rgba(255,255,255,0) 72%),
    radial-gradient(64% 12% at 44% 62%, rgba(255,255,255,.048), rgba(255,255,255,0) 70%),
    radial-gradient(40% 8%  at 84% 74%, rgba(255,255,255,.036), rgba(255,255,255,0) 74%),
    radial-gradient(52% 10% at 12% 82%, rgba(255,255,255,.038), rgba(255,255,255,0) 72%),
    radial-gradient(34% 7%  at 60% 44%, rgba(255,255,255,.030), rgba(255,255,255,0) 76%),
    radial-gradient(56% 10% at 88% 46%, rgba(255,255,255,.034), rgba(255,255,255,0) 72%),
    radial-gradient(48% 9%  at 34% 36%, rgba(255,255,255,.030), rgba(255,255,255,0) 74%),
    radial-gradient(60% 11% at 68% 88%, rgba(255,255,255,.032), rgba(255,255,255,0) 70%),
    radial-gradient(38% 8%  at 16% 54%, rgba(255,255,255,.028), rgba(255,255,255,0) 76%),
    radial-gradient(44% 9%  at 92% 12%, rgba(255,255,255,.026), rgba(255,255,255,0) 74%),
    /* dos barridos largos, casi horizontales: la mano no va en diagonal */
    linear-gradient(93deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.038) 34%, rgba(255,255,255,0) 56%),
    linear-gradient(-86deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.030) 58%, rgba(255,255,255,0) 78%),
    /* la viñeta: los bordes de un pizarron siempre estan mas oscuros */
    radial-gradient(120% 100% at 50% 46%, rgba(0,0,0,0) 44%, rgba(0,0,0,.30) 100%)}

.radar .pz-adentro{position:relative;z-index:2;padding-top:44px;padding-bottom:40px}
.radar .pz-eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--tinta-5);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;margin-bottom:16px}
.radar .pz-eyebrow img{height:21px;width:auto}

/* EL TITULO, GRANDE DE VERDAD. Hasta 92 px: es una marca nueva y la primera
   pantalla es donde se aprende. Abajo, el nombre completo en cyan y en
   mayusculas espaciadas. */
.radar .pz-titulo{font-family:var(--fuente-titulo);color:var(--blanco);font-weight:700;
  font-size:clamp(52px,7.4vw,92px);line-height:.9;letter-spacing:-.035em;margin:0}
.radar .pz-titulo span{display:block;font-family:var(--fuente);color:var(--cyan);
  font-size:clamp(11px,1.5vw,16px);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;margin-top:15px;line-height:1.3}

/* EL MENSAJE, PARTIDO EN DOS.
   La frase corta va en la serif y grande; el resto en catorce y medio, abajo. Es
   el mismo texto que habia: lo que cambia es que se lee en dos tiempos.
   La palabra en cyan es una <b> del texto editable, no una clase: asi se puede
   cambiar cual se destaca desde el panel. */
.radar .pz-frase{font-family:var(--fuente-titulo);color:var(--blanco);font-weight:700;
  font-size:clamp(21px,2.9vw,33px);line-height:1.2;margin:24px 0 0;max-width:20ch}
.radar .pz-frase b{color:var(--cyan);font-weight:inherit}
.radar .pz-lead{font-size:14.5px;line-height:1.62;color:var(--tinta-5);margin:14px 0 0;max-width:58ch}
.radar .pz-lead b{color:var(--blanco);font-weight:600}

/* --------------------------------------------------------------------------
   LA LINEA DE TIZA CON LAS CINCO PARADAS

   La linea la dibujan dos pseudoelementos a la altura del centro de los
   circulos: continua hasta la tercera parada, punteada desde ahi. Antes era un
   SVG estirado a lo ancho, y se cambio por una razon concreta: el rotulo de cada
   parada tiene que conservar su cuerpo en cualquier ancho, y un texto adentro de
   un SVG que escala se achica con el dibujo.

   El area de clic es todo el bloque —el circulo Y el rotulo— y no solo el
   circulo: cuarenta pixeles de diametro son un blanco chico, sobre todo en un
   celular, donde la recomendacion es no bajar de 44.
   -------------------------------------------------------------------------- */
.radar .pz-viaje{position:relative;margin-top:34px;padding-top:6px}
.radar .pz-viaje::before{content:"";position:absolute;left:2%;right:2%;top:26px;height:2px;
  background:linear-gradient(to right,rgba(232,238,234,.55) 0 62%,rgba(232,238,234,0) 62%)}
.radar .pz-viaje::after{content:"";position:absolute;left:62%;right:2%;top:26px;height:2px;
  background:repeating-linear-gradient(to right,rgba(232,238,234,.45) 0 7px,transparent 7px 15px)}
.radar .pz-paradas{position:relative;display:flex;list-style:none;margin:0;padding:0}
.radar .pz-parada{flex:1;text-align:center}
.radar .pz-parada a{display:block;text-decoration:none;padding:0 6px 4px;border-radius:10px}
.radar .pz-b{width:40px;height:40px;margin:0 auto;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:17px;font-weight:800;
  color:var(--teal);transition:transform .18s ease}
.radar .pz-1 .pz-b{background:var(--cyan)}
.radar .pz-2 .pz-b{background:var(--amarillo)}
/* EL TERCERO VA EN CORAL-D Y NO EN CORAL PLENO. El número mide 17 px en negrita,
   o sea que necesita 4,5:1, y el blanco sobre coral pleno mide 4,04. Sobre coral-d
   mide 5,33. Es el mismo coral de la marca un paso más oscuro —el que :root
   declara como «coral legible»— así que la parada se sigue leyendo coral. */
.radar .pz-3 .pz-b{background:var(--coral-d);color:var(--blanco)}
/* LOS DOS QUE FALTAN VAN RELLENOS, no vacios. Se probaron con el circulo
   transparente y el numero adentro no se leia sobre el verde. Con el tinte de su
   color y el borde punteado se lee, y el punteado sigue diciendo "todavia no". */
.radar .pz-4 .pz-b{background:var(--cyan-tinte);border:2px dashed rgba(35,52,61,.45)}
.radar .pz-5 .pz-b{background:var(--coral-tinte);border:2px dashed rgba(35,52,61,.45)}
.radar .pz-parada a:hover .pz-b{transform:scale(1.1)}
.radar .pz-rot{display:block;margin-top:10px;font-size:11.5px;font-weight:700;
  color:var(--tinta-5);line-height:1.35;letter-spacing:.03em}
.radar .pz-parada a:hover .pz-rot{color:var(--blanco)}
.radar .pz-parada a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* LA CLASE «viene», EN LAS DOS PARADAS QUE TODAVIA NO TIENEN CONTENIDO.
   Su color y su borde punteado los pone .pz-4 y .pz-5, cada una con su tinte, así
   que esta regla no cambia nada de lo que se ve. Existe porque la clase se usa en
   el marcado y «Estado del sitio» comprueba que TODA clase escrita en una
   plantilla tenga una regla: una clase sin regla es, casi siempre, un estilo que
   alguien esperaba y no está. Acá el aviso era correcto y la respuesta es esta
   regla, que además deja escrito en el CSS que esas dos paradas son distintas.
   El rótulo va un punto más apagado: es lo único que las diferencia además del
   círculo, y alcanza. */
.radar .pz-parada.viene .pz-rot{color:var(--tinta-4)}
.radar .pz-parada.viene a:hover .pz-rot{color:var(--tinta-5)}

/* EL ENLACE DE BAJADA, NO UN BOTON. En una pantalla que tiene tres cosas, un
   boton de color era la cuarta. */
.radar .pz-bajar{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  color:var(--tinta-5);padding:10px 0;margin-top:22px;
  border-bottom:1px solid rgba(255,255,255,.25);transition:color .2s,border-color .2s}
.radar .pz-bajar:hover{color:var(--cyan);border-color:var(--cyan)}
.radar .pz-bajar svg{flex:none}

/* el borde de tiza, abajo: el detalle que confirma que es un pizarron */
.radar .pz-tiza{position:relative;z-index:2;display:flex;gap:9px;align-items:center;
  padding:9px 24px;background:var(--teal-3)}
.radar .pz-tiza i{display:block;height:6px;border-radius:4px;background:#E8EEEA;opacity:.85}
.radar .pz-tiza i:nth-child(1){width:52px}
.radar .pz-tiza i:nth-child(2){width:30px;opacity:.5}
.radar .pz-tiza i:nth-child(3){width:20px;opacity:.4;background:var(--cyan)}

/* ==========================================================================
   PORTADA · EL RELATO DE LOS CINCO

   Antes esto era una grilla de cinco tarjetas. Las cinco se veian al mismo
   tiempo, con lo cual ninguna se leia: era un catalogo. Ahora son cinco pasos
   que se recorren con el scroll, con la ronda de la izquierda marcando en cual
   estas. La ganancia no es estetica: es que en cada momento hay UNA cosa para
   leer.

   EL FONDO ES LA HOJA RAYADA, AL 9 % Y NO AL 18 %. El mismo renglon cada 33 px
   que usa el resto del sitio, apenas insinuado sobre blanco: a ese valor se
   percibe como papel y no como una grilla encima del texto.

   NADA DE ESTO DEPENDE DE QUE EL JAVASCRIPT CORRA, y esa fue una decision
   explicita. El atenuado de los pasos vive en .rl-vivo, una clase que agrega el
   script; si el script no esta, los cinco pasos se ven al 100 % y la pagina se
   lee entera. Al reves —atenuar por defecto y aclarar con JavaScript— un error
   en el script dejaba la portada ilegible.
   ========================================================================== */
.radar .rl{border-top:1px solid var(--linea);background-color:var(--blanco);
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,
                   rgba(74,206,237,.09) 33px 34px);
  background-position:left 12px}
.radar .rl-grilla{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:50px;align-items:start}

/* LA RONDA, PEGADA MIENTRAS PASAN LOS PASOS.
   Cinco puntos cada 72 grados exactos sobre una circunferencia de radio 72, y el
   hilo es un arco de esa misma circunferencia: solido del 1 al 3, punteado del 3
   al 1 pasando por los dos que faltan.

   EL TRAMO RECORRIDO se pinta con stroke-dashoffset sobre un circulo rotado
   −90°, para que empiece arriba, en el punto 1, y no a las tres en punto, que es
   donde arranca un circulo de SVG. El largo del trazo —2·π·72 = 452,4— esta
   escrito tambien en el CSS y no solo en el script: asi, sin JavaScript, el
   tramo queda invisible en lugar de tapar la parte punteada. */
.radar .rl-figura{position:sticky;top:24px;align-self:start;padding:30px 0}
.radar .rl-ronda{width:100%;max-width:300px;display:block;margin:0 auto}
.radar .rl-hilo{fill:none;stroke:var(--tinta-5);stroke-width:2.6;stroke-linecap:round}
.radar .rl-hilo-viene{stroke-dasharray:7 9}
.radar .rl-hilo-hecho{stroke:var(--teal);stroke-dasharray:452.4;stroke-dashoffset:452.4;
  transition:stroke-dashoffset .5s ease}
.radar .rl-pt{transition:opacity .4s ease,transform .4s ease;
  transform-origin:center;transform-box:fill-box}
.radar .rl-ronda[data-activo] .rl-pt{opacity:.3}
.radar .rl-ronda[data-activo="1"] .rl-pt-1,
.radar .rl-ronda[data-activo="2"] .rl-pt-2,
.radar .rl-ronda[data-activo="3"] .rl-pt-3,
.radar .rl-ronda[data-activo="4"] .rl-pt-4,
.radar .rl-ronda[data-activo="5"] .rl-pt-5{opacity:1;transform:scale(1.14)}
.radar .rl-pt-n{font-family:var(--fuente);font-size:13px;font-weight:800}
.radar .rl-centro-v{font-family:var(--fuente);font-size:10.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;fill:var(--tinta-3)}
.radar .rl-centro-n{font-family:var(--fuente-titulo);font-size:16px;fill:var(--teal)}
.radar .rl-avance{display:flex;gap:5px;align-items:center;max-width:300px;margin:16px auto 0}
.radar .rl-avance i{flex:1;height:3px;border-radius:3px;background:var(--linea);
  transition:background .4s ease}
.radar .rl-avance i.visto{background:var(--teal)}
.radar .rl-avance span{font-size:10.5px;font-weight:700;color:var(--tinta-3);
  margin-left:8px;white-space:nowrap}

/* LOS PASOS */
.radar .rl-pasos{padding:20px 0 10px}
.radar .rl-paso{padding:44px 0;min-height:56vh;display:flex;flex-direction:column;
  justify-content:center;transition:opacity .45s ease}
.radar .rl-vivo .rl-paso{opacity:.32}
.radar .rl-vivo .rl-paso.activo{opacity:1}
/* EL VERBO NO LLEVA EL COLOR DEL COMPONENTE, Y ESO SE MIDIO.
   Iba en --cc, o sea en el color de cada paso, y dos de los cinco no llegaban:
   sobre blanco, el coral de Diálogos mide 4,04:1 y el amarillo oscuro de
   Tendencias 3,17:1, cuando un texto de 10,5 px necesita 4,5:1. El amarillo
   oscuro, además, está declarado en :root como «el único amarillo con 3:1 para un
   TRAZO»: usarlo de texto era ir contra su propia nota.
   Ahora el verbo va en --tinta-2, que mide 4,8:1, y --cc se queda con el filete y
   con el número grande, donde sí alcanza: los dos pasan el 3:1 que la norma pide a
   partir de 18,66 px en negrita, y el número mide 38. */
.radar .rl-v{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2);margin-bottom:8px}
.radar .rl-tit{font-family:var(--fuente-titulo);font-size:31px;line-height:1.14;
  margin:0 0 10px;color:var(--teal)}
.radar .rl-preg{font-size:14px;font-weight:700;color:var(--tinta-2);margin:0 0 13px}
.radar .rl-txt{font-size:15.5px;line-height:1.68;color:var(--tinta-2);margin:0 0 20px;max-width:54ch}
/* EL DATO DE CADA PASO. Los que salen de los datos publicados entran por marca
   de cifras.php; los que son informacion del proyecto son textos del panel. El
   color del filete y del numero lo pone --cc, que cada paso declara abajo. */
.radar .rl-dato{border-left:3px solid var(--cc,var(--cyan-d));padding-left:16px;margin:0 0 22px}
.radar .rl-dato-g{display:block;font-family:var(--fuente-titulo);font-size:38px;line-height:1;
  color:var(--cc,var(--cyan-d))}
.radar .rl-dato-p{display:block;font-size:13px;color:var(--tinta-3);line-height:1.5;
  margin-top:7px;max-width:44ch}
/* EL PASO QUE TODAVIA NO TIENE DATO. El filete va punteado, igual que el borde de
   los circulos 4 y 5 de la ronda y de las paradas del hero: es el mismo lenguaje
   diciendo lo mismo en tres lugares distintos, y no hay que explicarlo. */
.radar .rl-dato-viene{border-left-style:dashed}
.radar .rl-pronto{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;background:var(--teal);color:var(--blanco);
  padding:7px 14px;border-radius:100px}
.radar .rl-botones{display:flex;gap:10px;flex-wrap:wrap}
.radar .rl-btn{display:inline-block;font-size:13.5px;font-weight:700;padding:11px 20px;
  border-radius:100px;transition:background .2s,border-color .2s,color .2s}
.radar .rl-btn-1{background:var(--teal);color:var(--blanco)}
.radar .rl-btn-1:hover{background:var(--coral)}
.radar .rl-btn-2{border:1px solid var(--tinta-4);color:var(--tinta-2);background:rgba(255,255,255,.7)}
.radar .rl-btn-2:hover{border-color:var(--teal);color:var(--teal)}
.radar .rl-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* EL COLOR DE CADA PASO. Van los tonos legibles sobre blanco —cyan-d, coral-d,
   amarillo-d— y no los plenos: el amarillo pleno sobre blanco mide 1,3:1 y el
   cyan pleno 1,9:1. Los cinco estan declarados juntos, en un solo lugar. */
.radar #c-dialogos{--cc:var(--coral)}
.radar #c-datos{--cc:var(--cyan-d)}
.radar #c-tendencias{--cc:var(--amarillo-d)}
.radar #c-valoracion{--cc:var(--cyan-d)}
.radar #c-voz{--cc:var(--coral-d)}

/* --------------------------------------------------------------------------
   LA FRANJA CON LA FRASE
   Coral a todo el ancho. Es el unico lugar de la portada donde el coral ocupa
   area grande, y por eso funciona: aparece una sola vez.
   -------------------------------------------------------------------------- */
.radar .franja-fuerte{background:var(--coral);padding:26px 0}
.radar .franja-fuerte p{margin:0;color:var(--blanco);font-family:var(--fuente-titulo);
  font-size:26px;line-height:1.34;max-width:64ch}

/* --------------------------------------------------------------------------
   LAS DOS PAGINAS QUE TODAVIA NO TIENEN CONTENIDO
   -------------------------------------------------------------------------- */
/* El filete de arriba lleva el color del componente, como las tarjetas de la
   portada y las hojas de las otras secciones: el cyan para el índice de valoración,
   el coral para la voz docente. Es lo único que distingue a las dos páginas en
   preparación, y alcanza. */
/* El recuadro se centra en lugar de quedar pegado a la izquierda con un vacío
   grande al costado. Es una página de un solo bloque: centrado, el aire queda
   repartido y la asimetría deja de leerse como un error de armado. */
.radar .pronto-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  border-top:4px solid var(--cyan);padding:32px 38px;max-width:88ch;margin:0 auto}
.radar .pronto-caja-coral{border-top-color:var(--coral)}
.radar .pronto-caja-coral .pronto-sello{background:var(--coral)}
/* El amarillo es el color de Tendencias. El sello lleva tinta oscura y no blanca:
   sobre amarillo, el blanco no se lee. Es la misma excepción que hace el cierre
   amarillo unas líneas más abajo. */
.radar .pronto-caja-amarillo{border-top-color:var(--amarillo)}
.radar .pronto-caja-amarillo .pronto-sello{background:var(--amarillo);color:var(--teal)}
.radar .pronto-sello{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;background:var(--teal);color:var(--blanco);padding:7px 14px;
  border-radius:20px;margin-bottom:18px}
.radar .pronto-caja h2{font-size:22px;margin:0 0 12px;color:var(--teal)}
.radar .pronto-caja p{font-size:16px;line-height:1.7;color:var(--tinta-2);margin:0 0 12px}
.radar .pronto-caja p:last-of-type{margin-bottom:0}
.radar .pronto-lista{margin:4px 0 16px;padding-left:20px}
.radar .pronto-lista li{font-size:16px;line-height:1.7;color:var(--tinta-2);margin-bottom:6px}
.radar .pronto-cuando{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea);
  font-size:13.5px;color:var(--tinta-2)}
.radar .pronto-cuando b{color:var(--teal)}

@media (max-width:900px){
  .radar .pz-adentro{padding-top:30px;padding-bottom:28px}
  .radar .pz-titulo{font-size:46px}
  .radar .pz-titulo span{font-size:12px;letter-spacing:.12em;margin-top:12px}
  .radar .pz-frase{font-size:24px;max-width:none;margin-top:20px}
  .radar .pz-lead{font-size:14.5px}
  /* ------------------------------------------------------------------------
     EN PANTALLA CHICA LA LINEA DE TIZA SE PARA, Y PASA POR EL MEDIO DE LOS
     CIRCULOS.

     Cinco paradas en fila no entran en 375 px, y achicarlas las vuelve
     ilegibles: pasan a columna. La primera version dejaba la linea como un borde
     al costado de la lista, y se veia raro con razon: era una raya suelta que no
     tocaba ningun circulo, o sea que dejaba de ser el recorrido y quedaba como
     un adorno. Ahora la linea va POR DETRAS de los circulos, pasando por su
     centro, y conserva lo que dice en la vista de computadora: solida hasta la
     tercera parada, punteada desde ahi.

     Va del centro del primer circulo al centro del quinto —de ahi el 17 px de
     arriba y de abajo, que es el radio— y no de borde a borde: una linea que
     sobresale del primero y del ultimo parece cortada.

     Y SE ESCONDEN LOS CORTES DE RENGLON DE LOS ROTULOS. Los rotulos traen un
     <br> escrito para que en computadora las cinco paradas queden en dos
     renglones parejos. En una columna ese corte no ayuda: parte «Tendencias en /
     politica docente» sin necesidad y estira la lista. Se anula con
     display:none, asi el texto fluye segun el ancho que haya.
     ------------------------------------------------------------------------ */
  .radar .pz-viaje{margin-top:26px;padding-top:0}
  .radar .pz-paradas{position:relative;flex-direction:column;gap:15px}
  .radar .pz-viaje::before,.radar .pz-viaje::after{display:none}
  .radar .pz-paradas::before,.radar .pz-paradas::after{content:"";position:absolute;
    left:17px;width:2px;z-index:0}
  .radar .pz-paradas::before{top:17px;bottom:50%;background:rgba(232,238,234,.55)}
  .radar .pz-paradas::after{top:50%;bottom:17px;
    background:repeating-linear-gradient(to bottom,rgba(232,238,234,.45) 0 7px,transparent 7px 15px)}
  .radar .pz-parada{text-align:left}
  .radar .pz-parada a{display:flex;align-items:center;gap:13px;padding:0}
  .radar .pz-b{margin:0;width:34px;height:34px;font-size:15px;flex:none;
    position:relative;z-index:1}
  .radar .pz-rot{margin-top:0;font-size:12.5px}
  .radar .pz-rot br{display:none}

  /* ------------------------------------------------------------------------
     EL RELATO EN UNA COLUMNA, Y LA RONDA REEMPLAZADA POR UNA BARRA PEGADA

     La ronda pegada al costado no tiene costado donde pegarse. Quedaba arriba,
     quieta, y en cuanto se bajaba un poco salia de la pantalla: se seguia
     actualizando y nadie la veia. Una figura que marca en cual de los cinco
     estas y no se ve mientras recorres los cinco no cumple ninguna funcion.

     Se esconde la ronda y en su lugar queda pegada arriba LA BARRA DE AVANCE,
     que ya existia debajo de la ronda y que el mismo script ya actualiza: cinco
     tramos que se van pintando y la cuenta «3 / 5». Es chica, se mueve, y dice
     exactamente lo que hacia falta.

     No hay marcado nuevo ni JavaScript nuevo: es la misma barra, en otro lugar.
     Un elemento aparte para celular seria una segunda cosa que mantener
     sincronizada con la primera, y ese es el error que este proyecto evita.

     LOS PASOS NO SE ATENUAN en pantalla chica. Con la barra pegada arriba
     diciendo donde estas, atenuar cuatro de cinco es solo estorbo: en una
     columna angosta el paso de al lado ya esta fuera de la pantalla.
     ------------------------------------------------------------------------ */
  .radar .rl-grilla{grid-template-columns:1fr;gap:0}
  .radar .rl-ronda{display:none}
  /* La barra sale del contenedor con margenes negativos para llegar a los dos
     bordes de la pantalla: una barra blanca pegada que deja ver la hoja rayada a
     los costados se lee como un recuadro flotando, no como una barra. Los 24 px
     son los que .container mete de padding, asi que el texto queda alineado con
     el resto de la pagina. */
  .radar .rl-figura{position:sticky;top:0;z-index:30;padding:0;margin:0 -24px;
    background:var(--blanco);box-shadow:0 1px 0 var(--linea)}
  .radar .rl-avance{max-width:none;margin:0;padding:9px 24px 8px}
  .radar .rl-avance i{height:4px}
  .radar .rl-paso{min-height:0;padding:26px 0}
  .radar .rl-vivo .rl-paso{opacity:1}
  .radar .rl-tit{font-size:25px}
  .radar .rl-dato-g{font-size:31px}
  .radar .franja-fuerte p{font-size:20px}
}

/* PANTALLAS BAJAS, PERO DE ESCRITORIO.
   El hero tiene que mostrar las cinco paradas sin scrollear, y en un portatil de
   768 px de alto —descontando el encabezado, que mide unos 120— el titulo a 92 px
   no deja lugar. Se achica el titulo y la frase, y se aprieta el aire. Sin esto,
   las paradas caen abajo del pliegue, que es exactamente lo que esta portada
   vino a resolver. */
@media (max-height:820px) and (min-width:901px){
  .radar .pz-adentro{padding-top:28px;padding-bottom:26px}
  .radar .pz-titulo{font-size:clamp(48px,5.6vw,68px)}
  .radar .pz-frase{font-size:clamp(20px,2.3vw,26px);margin-top:18px}
  .radar .pz-viaje{margin-top:26px}
  .radar .pz-bajar{margin-top:16px}
}

/* Los dos componentes que todavia no tienen contenido, en el menu de arriba:
   se ven pero avisan. Mismo criterio que el submenu de Datos. */
.radar .nav-pronto{display:inline-flex;align-items:baseline;gap:6px}
.radar .nav-pronto small{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);background:var(--amarillo);padding:2px 6px;border-radius:9px;line-height:1.4}

/* Cabeza de las paginas que no usan el titulo de WordPress —las dos que estan en
   preparacion—: mismo cuerpo y mismo aire que las demas secciones. */
.radar .pag-cabeza{max-width:74ch;margin-bottom:26px}
.radar .pag-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral-d);margin-bottom:10px}
.radar .pag-title{font-family:var(--fuente-titulo);color:var(--teal);font-size:38px;line-height:1.14;
  letter-spacing:-.02em;margin:0 0 12px;font-weight:700}
.radar .pag-lead{font-size:17px;line-height:1.6;color:var(--tinta-2);margin:0}
@media (max-width:900px){ .radar .pag-title{font-size:29px} }

/* --------------------------------------------------------------------------
   EL CIERRE DE LA PORTADA
   Reemplaza a las vidrieras de la portada anterior. Una sola idea y una sola
   accion: la credencial del proyecto y el boton de novedades.
   -------------------------------------------------------------------------- */
.radar .cierre-portada{background:var(--gris-bg);border-top:1px solid var(--linea)}
.radar .cierre-inner{display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  justify-content:space-between}
.radar .cierre-inner p{margin:0;font-size:16px;line-height:1.66;color:var(--teal);max-width:66ch}
.radar .cierre-inner p b{font-weight:700}
.radar .cierre-cta{background:var(--teal);color:var(--blanco);font-weight:700;font-size:13.5px;
  padding:14px 24px;border-radius:24px;text-decoration:none;white-space:nowrap;
  transition:background .2s ease}
.radar .cierre-cta:hover{background:var(--coral)}
/* VOLVER ARRIBA, al final de la portada. Se me quedó sin regla al armar la
   portada nueva —el prototipo la llamaba de otra manera— y «Estado del sitio» lo
   marcó: sin esto el enlace se veía como texto suelto, sin flecha alineada ni
   color propio. Va en gris chico porque es una comodidad, no una acción: la
   acción de esta sección es el botón de novedades. */
.radar .cierre-arriba{margin:0;flex-basis:100%;text-align:center}
.radar .cierre-arriba a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:700;color:var(--tinta-3);transition:color .2s}
.radar .cierre-arriba a:hover{color:var(--teal)}
.radar .cierre-arriba a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
@media (max-width:900px){ .radar .cierre-cta{width:100%;text-align:center} }

/* --------------------------------------------------------------------------
   LOS ADELANTOS: LA TAPA DEL DOCUMENTO Y LA ULTIMA NOTA

   OJO, 28 de agosto de 2026: LA PORTADA YA NO LOS MUESTRA. Entraban en las
   tarjetas de los cinco componentes, y las tarjetas se reemplazaron por el
   relato, donde cada paso tiene su propio dato. Este CSS se conserva porque las
   marcas de los dos plugins siguen existiendo y funcionando: alcanza con poner
   «radar-publicacion-ultima» o «radar-nota-ultima» —con llaves dobles— en
   cualquier plantilla para que el adelanto aparezca vestido.

   Si en seis meses nadie las volvio a usar, este bloque se puede borrar. Se deja
   escrito para que la decision sea deliberada y no un descubrimiento.

   Un bloque que solo describe se lee y se olvida; un bloque que muestra algo de
   lo que hay adentro invita a entrar. Los dos adelantos son sobrios a proposito:
   compiten con el texto del bloque, no con la portada.

   Ojo con las etiquetas, y con una precision que conviene tener escrita porque es
   facil equivocarse: el bloque entero es un <a>, y en HTML5 un enlace SI puede
   envolver parrafos y divs —su modelo de contenido es "transparente"—. Lo que no
   puede contener es otro elemento interactivo: un <a> adentro de un <a> es
   invalido y el navegador lo desarma.

   Por eso los parrafos del bloque son <p> normales, y en cambio el adelanto de la
   ultima nota esta hecho con <span> y SIN enlace propio: el bloque entero ya
   lleva al lugar correcto, y un segundo enlace adentro romperia la tarjeta.
   -------------------------------------------------------------------------- */
.radar .cp-mini{display:block;background:var(--gris-bg);border:1px solid var(--linea);
  border-radius:8px;padding:13px 14px 11px;margin:0 0 14px}
/* EL ADELANTO DE DATOS SE BORRO. Era la cifra grande con su mini serie dibujada
   —.cp-mini-num, .cp-mini-serie y las cuatro clases .cp-serie-*— y no lo ponia
   ningun plugin: estaba escrito en la plantilla de la portada vieja, que ya no
   existe. Se borro y no se comento, porque CSS que no lo escribe nadie no se
   puede volver a usar sin volver a escribir el HTML. La cifra sigue disponible
   como marca de cifras.php, que es como la usa el relato.
   Las clases que quedan abajo si las escriben los dos plugins. */
.radar .cp-mini-pie{display:block;font-size:11.5px;line-height:1.45;color:var(--tinta-2);
  margin-top:5px}

/* el adelanto de tendencias: la ultima nota */
.radar .cp-mini-nota{border-left:3px solid var(--amarillo)}
.radar .cp-mini-rot{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.radar .cp-mini-tit{display:block;font-family:var(--fuente-titulo);font-size:16px;line-height:1.26;
  color:var(--teal);margin-bottom:5px}
.radar .cp-mini-baj{display:block;font-size:12px;line-height:1.5;color:var(--tinta-2);margin-top:5px}

/* el adelanto de dialogos: la tapa del documento al costado del titulo */
.radar .cp-mini-pub{display:flex;gap:13px;align-items:flex-start;border-left:3px solid var(--coral)}
.radar .cp-pub-tapa{flex:0 0 62px;line-height:0}
.radar .cp-pub-tapa img{width:62px;height:auto;display:block;border:1px solid var(--linea);
  border-radius:2px;box-shadow:0 3px 9px rgba(35,52,61,.14)}
.radar .cp-pub-txt{flex:1;min-width:0}

/* el plano punteado en miniatura, para el documento que todavia no salio.
   Mismo lenguaje que la tapa grande de la seccion de Dialogos, en 62 px. */
.radar .cp-pub-plano{display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:3px;width:62px;height:88px;border:1px dashed var(--tinta-4);border-radius:2px;
  background:var(--blanco);padding:6px 5px;text-align:center;box-shadow:none}
.radar .cp-plano-logo{font-size:7.5px;font-weight:800;letter-spacing:.08em;color:var(--tinta-3)}
.radar .cp-plano-tit{font-family:var(--fuente-titulo);font-size:8.5px;line-height:1.15;
  color:var(--teal)}
.radar .cp-plano-fecha{font-size:6.5px;color:var(--tinta-3);letter-spacing:.02em}

/* ==========================================================================
   ENCABEZADOS DE LAS PAGINAS INTERNAS, SOBRE EL VERDE DEL PIZARRON
   Agregado el 14 de agosto de 2026, para que las secciones se sientan del mismo
   sitio que la portada.

   SOBRE LOS CONTRASTES, QUE ES LO QUE PIDIO CUIDARSE

   La banda es var(--teal) #23343D, el mismo color del encabezado del sitio. Medido
   con la formula de WCAG, sobre ese fondo:
     blanco #fff .................. 12,9:1   (el texto normal pide 4,5)
     --tinta-5 #C8CCCE ............  8,0:1
     --cyan #4ACEED ...............  7,0:1
     --tinta-4 #A3AAAE ............  5,5:1
     --tinta-3 #7F898E ............  3,6:1   NO USAR como texto
   La banda es de color plano, sin borrones, asi que estos numeros son los reales:
   no hay ninguna capa encima que aclare el fondo y baje el contraste.

   LO QUE SI HABIA QUE ARREGLAR: el resaltador amarillo del titulo. Esta hecho con
   mix-blend-mode:multiply, que sobre papel blanco funciona como tinta de verdad
   —el amarillo se multiplica y el navy sigue leyendose— pero sobre un fondo
   oscuro multiplica hacia el negro y se come el texto. Adentro de la banda se
   apaga y en su lugar va un subrayado cyan, que es el mismo recurso del hero.
   ========================================================================== */
/* EL MISMO COLOR QUE EL ENCABEZADO DEL SITIO, Y LEIDO DE LA MISMA VARIABLE.
   Estaba en #20302C —el verde del pizarrón— y contra el encabezado del sitio, que
   es var(--teal), se veía como dos oscuros distintos pegados. Ahora es
   literalmente la misma variable: no se pueden separar nunca, ni si mañana se
   cambia la paleta. Escribir el hexadecimal a mano era justamente la manera de que
   se separen sin que nadie se entere.

   El pizarrón queda solo en el hero de la portada, donde es un recurso deliberado
   y no una variante de color institucional. */
.radar .pag-banda{position:relative;padding:34px 0 30px;background:var(--teal)}

.radar .pag-banda .section-title,
.radar .pag-banda .pag-title{color:var(--blanco);margin-bottom:0}
/* el resaltador se apaga: sobre oscuro, multiply se come la letra */
.radar .pag-banda .section-title::before,
.radar .pag-banda .section-title::after{display:none}
/* y en su lugar, el subrayado cyan del hero */
.radar .pag-banda .section-title,
.radar .pag-banda .pag-title{padding-bottom:9px;
  border-bottom:3px solid var(--cyan)}
.radar .pag-banda .pag-eyebrow{color:var(--cyan)}
.radar .pag-banda .pag-lead{color:var(--tinta-5);margin-top:16px}
.radar .pag-banda .pag-cabeza{margin-bottom:0}
.radar .pag-banda a{color:var(--cyan)}

/* LA BAJADA QUE ESCRIBE EL EDITOR, ADENTRO DE LA BANDA
   En Tendencias y en Diálogos la bajada de un renglón sale del editor de la página y
   ahora va acá adentro, junto al título. Viene sin clase —un párrafo del editor es un
   <p> pelado—, así que no puede colgar de .pag-lead: se la estiliza por contexto.

   Y hay que hacerlo, no es opcional: sobre el teal, el color de lectura que trae
   .radar.pagina p es el navy del texto normal, o sea 1,0:1 contra el fondo. Invisible.
   En --tinta-5 mide 8,0:1.

   El cuerpo es 17 px, el mismo de .pag-lead, que es el otro texto que hace este mismo
   trabajo en las páginas que no usan el editor. */
.radar .pag-banda .wp-block-post-content p{color:var(--tinta-5);font-size:17px;
  line-height:1.6;margin:16px 0 0;max-width:70ch}
.radar .pag-banda .wp-block-post-content p b,
.radar .pag-banda .wp-block-post-content p strong{color:var(--blanco)}

/* La franja de tiza que había pensado para el pie de la banda se saca: con la
   banda del mismo color que el encabezado, el encabezado y el título de la página
   forman UN bloque oscuro continuo, y meterle una franja gris en el medio lo
   partía en dos por un detalle decorativo. */

@media (max-width:900px){
  .radar .pag-banda{padding:26px 0 22px}
  .radar.pagina .pag-banda h1.section-title{font-size:30px}
}

/* ==========================================================================
   PAGINA «QUE ES RaD.Ar» Y EL REPOSITORIO DE ANTECEDENTES
   ========================================================================== */
.radar .qe-texto{max-width:70ch}
.radar .qe-texto p{font-size:16px;line-height:1.7;color:var(--tinta);margin:0 0 18px}
/* EL PRIMER PÁRRAFO ENTRA MÁS GRANDE.
   Es la bajada del texto y hasta ahora medía igual que los otros cinco: seis
   párrafos del mismo cuerpo, uno atrás del otro, son un muro. Un punto y medio
   más y en teal alcanza para que se lea primero, sin agregar ningún recurso. */
.radar .qe-texto > p:first-child{font-size:17px;line-height:1.6;color:var(--teal)}
.radar .qe-texto p b{color:var(--teal);font-weight:700}
.radar .qe-fuentes{font-size:12.5px !important;line-height:1.6 !important;color:var(--tinta-2) !important;
  border-top:1px solid var(--linea);padding-top:14px;margin-top:26px !important}
.radar .qe-volver{margin:26px 0 0}
.radar .qe-volver a{font-size:14.5px;font-weight:700;color:var(--cyan-d)}

/* El mosaico de antecedentes. Tarjetas iguales y chicas: acá lo que comunica es la
   cantidad y la variedad —que se vea que hay una trayectoria detrás— y no el
   detalle de cada documento. */
/* El fondo de esta banda ya no está acá: la plantilla le pone .franja-teal, que
   es la banda compartida con el resto de las secciones. Tenerlo escrito en los dos
   lugares dejaba el resultado a merced del orden de las reglas, que es la clase de
   detalle que se rompe seis meses después y nadie entiende. */
.radar .ant-seccion{border-top:0}
.radar .ant-mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.radar .ant-card{display:flex;flex-direction:column;background:var(--blanco);
  border:1px solid var(--linea);border-top:3px solid var(--cyan);border-radius:9px;
  padding:17px 18px 15px;text-decoration:none;color:var(--tinta);
  transition:box-shadow .2s ease,transform .2s ease}
.radar a.ant-card:hover{box-shadow:0 12px 26px rgba(35,52,61,.10);transform:translateY(-2px)}
.radar .ant-eje{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral-d);margin-bottom:8px}
.radar .ant-tit{font-family:var(--fuente-titulo);font-size:17px;line-height:1.28;margin:0 0 8px;
  color:var(--teal)}
.radar .ant-pie{font-size:12.5px;color:var(--tinta-2);line-height:1.5}
.radar .ant-ver{margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:700;color:var(--cyan-d)}
.radar a.ant-card:hover .ant-ver{text-decoration:underline}

/* La sección del editor: sin alto propio si no hay nada escrito. */
.radar .qe-extra{padding:0}
.radar .qe-extra .wp-block-post-content:not(:empty){display:block;padding:44px 0}

/* ==========================================================================
   LA HOJA RAYADA, EN TODO EL SITIO
   Agregado el 21 de agosto de 2026.
   ==========================================================================

   POR QUÉ. La portada y «Docencia en datos» tenían identidad —la hoja de cuaderno
   una, la mesa oscura la otra— y el resto del sitio era gris liso. Una página de
   texto sobre gris liso no está mal hecha, está sin vestir: no se parece a nada, y
   por eso no se parece al resto del sitio.

   QUÉ SE USA. Nada nuevo. Los mismos cuatro recursos que ya estaban:

     1. la hoja rayada de la portada, ahora en todas las páginas;
     2. la hoja blanca apoyada encima, para el texto de lectura;
     3. una banda de color suave por página, para separar el bloque secundario;
     4. el color del componente en el filete de arriba de cada bloque.

   EL RENGLÓN SE PINTA EN EL BODY, NO EN CADA ENVOLTORIO. Es la misma lección que
   dejó escrito el fondo oscuro y la que explica por qué el gris vive en
   theme.json: una página interna está hecha de dos o tres envoltorios .radar
   separados, con bloques de WordPress en el medio. Si el renglón lo dibujara cada
   envoltorio, cada uno arrancaría a contar desde su propio borde y los renglones
   quedarían desfasados entre bloque y bloque. En el body hay una sola hoja y los
   renglones son continuos de arriba abajo.

   La portada sigue con su propia clase .radar.hoja, y por eso queda FUERA de esta:
   ahí el envoltorio es uno solo y abarca la página entera, así que no tiene con
   qué desfasarse. Las dos declaraciones comparten los valores de abajo; si se
   cambia el renglón, se cambia en las dos.

   LA PÁGINA OSCURA NO LLEVA HOJA. La mesa oscura es lo que hace saltar los
   gráficos; una trama encima le sacaría el silencio que necesita. functions.php
   pone una clase o la otra, nunca las dos. */
body.radar-hoja{
  background-color:var(--gris-bg);
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 33px,rgba(74,206,237,.22) 33px 34px),
    linear-gradient(to right,transparent 0 62px,rgba(234,49,117,.28) 62px 63px,transparent 63px 69px,rgba(234,49,117,.28) 69px 70px,transparent 70px);
  background-position:left 12px,left top;
}
/* En pantalla angosta el margen del cuaderno cae encima del texto, así que queda
   solo el renglón. Es la misma excepción que ya tenía la portada. */
@media(max-width:820px){
  body.radar-hoja{background-image:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(74,206,237,.18) 33px 34px)}
}

/* LA ESCALA DE CUERPOS
   Había once cuerpos distintos para cuatro trabajos: la entrada de Tendencias medía
   14, la de Diálogos 16, el texto de «Qué es» 16,5, el de las páginas 16, el de la
   caja de novedades 15, sus listas 14, y las de las páginas en preparación 14,5.
   Ninguna de esas diferencias significaba nada: eran cinco bloques escritos en
   momentos distintos. Cuando el cuerpo cambia sin motivo, el lector busca el motivo.

   Cinco cuerpos, uno por trabajo:

     17 px   el lead de la banda del título, y el primer párrafo de un texto largo
     16 px   texto de lectura, entradas de sección y listas
     14 px   texto adentro de una tarjeta
     12,5    letra chica de página: pies, fuentes, metadatos
     11,5    letra chica de tarjeta

   Más las etiquetas en mayúsculas, que van entre 9,5 y 11 y son otra cosa: no se
   leen, se reconocen.

   VARIAR SÍ, PERO PARA DECIR ALGO. El primer párrafo de «Qué es RaD.Ar» mide 17 y no
   16 porque es la bajada del texto; las cifras de Diálogos miden 30 porque son la
   escala del trabajo. Esas dos son diferencias con motivo.

   LO QUE NO SE TOCÓ: la portada y los tableros. Tienen su propia escala, están
   calibrados y funcionan. */

/* LA HOJA BLANCA APOYADA ENCIMA
   El texto de lectura no va directamente sobre el renglón: va sobre una hoja
   blanca, que es la metáfora que el sitio viene usando desde el principio —la
   página es la mesa, las tarjetas son las hojas apoyadas encima—. Y de paso
   resuelve lo único que el renglón hace mal: cruzarse con las líneas del texto.

   El filete de arriba lleva el color del componente, con las mismas variantes que
   las tarjetas de la portada. Sin filete, la hoja es una hoja y nada más. */
/* LA HOJA OCUPA TODO EL ANCHO DE LA COLUMNA, Y EL TEXTO TODO EL ANCHO DE LA HOJA.
   La primera versión medía 800 px de ancho máximo y el texto de adentro, 760: el
   ancho de lectura que el sitio venía usando cuando el texto iba directamente sobre
   el gris. Sobre el gris no se notaba; adentro de una hoja blanca, sí, porque el
   recuadro le pone borde al vacío. Quedaban trescientos píxeles blancos a la
   derecha en todas las páginas y se leía como un renglón cortado antes de tiempo.
   Ahora la hoja llega hasta donde llega la columna —1.112 px con el contenedor de
   1.160— y el texto llega hasta el borde de la hoja. Si en un monitor ancho los
   renglones resultan largos, el arreglo es partir el texto en dos columnas, no
   volver a angostar la hoja. */
/* ============================================================
   UN TEXTO QUE SE OCULTA A PROPOSITO NO DEJA UN HUECO

   Escribir «(nada)» en un campo del panel hace que ese texto salga vacío (está
   explicado en textos-sitio.php). Un párrafo vacío no se ve, pero OCUPA: deja
   sesenta píxeles de aire y un renglón de separación que se lee como un error de
   maqueta. Estas reglas esconden el elemento que quedó sin nada adentro.

   Por qué con CSS y no sacando el elemento del HTML: sacarlo obligaría a que algo
   recorte la plantilla con una expresión regular, adivinando dónde empieza y
   dónde termina el envoltorio de cada texto. Eso se rompe el día que alguien
   agregue una clase. Una regla de estilo no puede llevarse puesto nada.

   :empty es estricto —solo alcanza a los elementos que no tienen NI UN carácter
   adentro, ni un espacio— y eso es justo lo que hace falta: un elemento con
   contenido de verdad nunca entra acá por accidente.
   ============================================================ */
.radar p:empty,
.radar h2:empty,
.radar h3:empty,
.radar li:empty,
.radar .pag-lead:empty,
.radar .sub-title:empty,
/* El pie del dato de cada componente de la portada. Es un <span> con display:block,
   así que vacío no se ve pero deja su margen de arriba. Entra acá desde que el pie de
   los dos componentes en preparación se oculta con «(nada)». */
.radar .rl-dato-p:empty,
/* Y el pie de la ficha de «todavía no hay notas», que es un <div> con un filete
   arriba: vacío dejaría una rayita horizontal sola al fondo de la ficha, que se lee
   como un error de maqueta y no como un texto que alguien decidió sacar. */
.radar .tn-ficha-pie:empty,
.radar .dc-bajada:empty{display:none}
/* Y un enlace cuya dirección quedó vacía —las redes del pie, el destino de
   «Quiero colaborar»— tampoco tiene que quedar como un enlace muerto. */
.radar a[href=""]{display:none}

.radar .papel{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  padding:32px 38px;max-width:none}
.radar .papel > p:last-child{margin-bottom:0}
/* Los topes de ancho de cada texto se anulan ADENTRO de la hoja, y solo ahí: el
   mismo párrafo fuera de una hoja sigue con su medida de lectura. Los tres selectores
   son los que traían tope propio: los párrafos de página, las bajadas de Tendencias y
   las de Diálogos. */
.radar .papel p,.radar .papel li,.radar .papel ul,.radar .papel ol{max-width:none}
.radar .papel-cyan{border-top:3px solid var(--cyan)}
.radar .papel-coral{border-top:3px solid var(--coral)}
.radar .papel-amarillo{border-top:3px solid var(--amarillo)}

/* ---------------------------------------------------------------------------
   LAS HOJAS CON FONDO SÓLIDO

   DOS REGLAS QUE NO SON DE GUSTO, SON DE CONTRASTE, y conviene tenerlas escritas
   porque son la razón por la que el reparto de colores quedó como quedó.

   1. NINGÚN PÁRRAFO VA SOBRE AMARILLO NI SOBRE CORAL. Medido: sobre coral pleno,
      el blanco da 4,0:1 y el teal 3,2:1, y la norma pide 4,5 para texto normal
      —3:1 solo para texto grande—. O sea que el coral aguanta una frase de 26 px
      como la de la franja de la portada, o un número de 30, pero no un párrafo de
      16. El amarillo es al revés y peor: con teal da 11,4:1, pero un rectángulo
      amarillo del tamaño de media pantalla es un grito.
      Los dos fondos que SÍ aguantan texto seguido son el teal, con blanco 12,9:1 y
      con --tinta-5 8,0:1, y el cyan, con teal 7,0:1.

   2. SI HAY FONDO DE COLOR, NO HAY FILETE ARRIBA. El filete existe para decir de
      qué componente es una hoja blanca; cuando la hoja tiene color, el color ya lo
      dice, y las dos cosas juntas son dos señales para el mismo dato.

   Por eso el color del componente aparece en algo chico —la etiqueta, las cifras,
   la tira de cierre— cada vez que el color no puede ser el fondo. */
.radar .papel-teal{background:var(--teal);border:0}
.radar .papel-teal p,.radar .papel-teal li{color:var(--tinta-5)}
.radar .papel-teal p b,.radar .papel-teal p strong{color:var(--blanco)}
/* Los enlaces sobre teal van en cyan claro, en el texto y también en las listas: la
   regla general de los enlaces de página los pinta en cyan oscuro, que sobre teal no se
   lee. Los dos selectores llevan .radar.pagina para ganarle por especificidad. */
.radar .papel-teal a{color:var(--cyan)}
.radar.pagina .papel-teal p a,
.radar.pagina .papel-teal li a{color:var(--cyan)}
.radar .papel-cyan-solido{background:var(--cyan);border:0}
.radar .papel-cyan-solido p,.radar .papel-cyan-solido li{color:var(--teal)}
.radar .papel-cyan-solido a{color:var(--teal);text-decoration:underline}

/* Hubo una etiqueta «Componente 3 de RaD.Ar» arriba de cada entrada, para meter el
   color del componente en algo chico. Se sacó: el número de componente es del mapa
   del proyecto, no de la página, y arriba de un título que ya dice de qué se trata
   era una repetición con formato de sello. El color del componente ahora vive en
   elementos que hacen algo: las cifras de Diálogos y el botón del tema elegido en
   Tendencias. */

/* LAS CIFRAS, SÓLIDAS, SOBRE EL PANEL OSCURO
   Acá el coral sí puede ser fondo: el número mide 30 px, que para la norma es texto
   grande. El rótulo de al lado no, así que la caja va en --coral-d y todo el texto en
   blanco, y no hay que andar midiendo dos veces. Sin filete al costado, por la regla
   de arriba.

   LAS DOS REGLAS VAN JUNTAS Y EN ESTE ORDEN, y no es un detalle de estilo: la
   primera versión tenía la del gris cien líneas más abajo, así que le ganaba a la
   del coral por orden —misma especificidad, gana la última— y las cifras quedaron
   con fondo gris claro y texto blanco, o sea ilegibles. Cuando dos reglas se
   contradicen a propósito, tienen que estar a la vista una de la otra. */
.radar .papel .dc-hito{background:var(--gris-bg)}
.radar .papel-teal .dc-hito{background:var(--coral-d);border:0;border-radius:8px}
.radar .papel-teal .dc-hito b,.radar .papel-teal .dc-hito span{color:var(--blanco)}

/* LA BANDA DE CYAN PLENO, PARA LO QUE TIENE QUE DESTACARSE
   Las publicaciones de Diálogos son lo más importante de esa página y quedaban
   siendo lo menos visible: tarjetas blancas sobre una hoja casi blanca. El cyan
   levanta las tarjetas sin tocarlas.
   Se usa el cyan y no el teal porque arriba, en la misma página, ya hay un panel
   teal, y dos bloques oscuros seguidos se leen como uno solo.
   El subtítulo va en teal —7,0:1 sobre el cyan— y su filete también: el coral sobre
   cyan da 2,2:1 y desaparece. */
/* La banda necesita su propio aire arriba y abajo: .seccion-docs viene con
   padding-top en cero, que servía cuando era la continuación de la sección de
   arriba y no una banda de color con borde visible. Y la sección de la entrada, que
   ahora termina antes, acorta su aire de abajo para que entre las dos no queden cien
   píxeles de hoja vacía. */
.radar .franja-cyan{background:var(--cyan);padding:40px 0 48px}
.radar .seccion-docs:has(.dc-entrada){padding-bottom:26px}
.radar .franja-cyan .sub-cabeza{border-left-color:var(--teal)}
/* El aviso de «todavía no hay publicaciones cargadas» también se apoya directo sobre
   el cyan: iba en --tinta-2, que ahí da 2,4:1. */
.radar .franja-cyan .dc-vacio{color:var(--teal);border-left-color:var(--teal)}
/* Las tarjetas se levantan de la banda con una sombra. Sobre un fondo de color, un
   borde gris claro alrededor de una tarjeta blanca no separa nada. */
.radar .franja-cyan .dc-ficha{border-color:transparent;box-shadow:0 8px 22px rgba(35,52,61,.16)}

/* LA TIRA QUE CIERRA UNA TARJETA
   Reemplaza al filete gris y al «margen arriba» del cierre de las páginas en
   preparación: la fecha prevista es lo último que se lee y ahora tiene fondo propio.
   En el color del componente: cyan el 4, coral el 5. */
.radar .cierre-solido{border-top:0;border-radius:8px;padding:13px 15px;margin-top:24px}
.radar .cierre-cyan{background:var(--cyan);color:var(--teal)}
.radar .cierre-coral{background:var(--coral-d);color:var(--blanco)}
.radar .cierre-amarillo{background:var(--amarillo);color:var(--teal)}
.radar .cierre-solido a{text-decoration:underline}

/* ---------------------------------------------------------------------------
   EL COLOR DEL ENLACE ADENTRO DE UNA TIRA SOLIDA, Y POR QUE LOS SELECTORES SON
   TAN LARGOS

   Encontrado el 28 de agosto de 2026 mirando la página de La voz de los
   docentes: el enlace «anotate para recibir las novedades», sobre la tira coral,
   medía 1,04:1. O sea invisible; se adivinaba por el subrayado.

   La causa no era este bloque, que decía lo correcto —blanco sobre coral—, sino
   una regla general de más arriba:

       .radar.pagina a:not(.btn):not(.rec-item){color:var(--cyan-d)}

   Esa regla existe para los enlaces dentro del texto de una sección, sobre hoja
   blanca, donde el cyan oscuro mide 5,1:1 y está bien. El problema es su
   ESPECIFICIDAD: dos clases más dos :not() son cuatro, contra las dos que tenía
   «.radar .cierre-coral a». Gana por especificidad, no por orden, así que
   escribirla después no alcanzaba: hay que igualarla y pasarla.

   De ahí los selectores de abajo, con cinco clases cada uno. No es capricho ni
   adorno: es lo que hace falta para ganarle, y prefiero un selector largo con
   una explicación al lado que un !important sin ella. Un !important acá
   funcionaría igual y dejaría el próximo caso sin pista de por qué existe.

   La regla general no se toca porque es la correcta para el 95 % de los enlaces
   del sitio. Lo que se afina es la excepción.

   LOS TRES COLORES, MEDIDOS sobre su tira:
     blanco sobre coral-d    5,33:1
     teal sobre cyan pleno   6,96:1
     teal sobre amarillo    11,37:1
   --------------------------------------------------------------------------- */
.radar.pagina .cierre-solido.cierre-cyan b,
.radar.pagina .cierre-solido.cierre-cyan a:not(.btn){color:var(--teal)}
.radar.pagina .cierre-solido.cierre-coral b,
.radar.pagina .cierre-solido.cierre-coral a:not(.btn){color:var(--blanco)}
.radar.pagina .cierre-solido.cierre-amarillo b,
.radar.pagina .cierre-solido.cierre-amarillo a:not(.btn){color:var(--teal)}
/* Y las mismas sin .pagina, para cuando una tira aparezca fuera de una página
   interna —la portada, una nota—: ahí no hay regla general que competir y estas
   dos clases alcanzan. */
.radar .cierre-cyan b,.radar .cierre-cyan a{color:var(--teal)}
.radar .cierre-coral b,.radar .cierre-coral a{color:var(--blanco)}
.radar .cierre-amarillo b,.radar .cierre-amarillo a{color:var(--teal)}

/* ---------------------------------------------------------------------------
   LAS OTRAS SUPERFICIES DE COLOR DE LAS PAGINAS INTERNAS

   Estas cuatro NO tienen ningún enlace adentro hoy, así que esto no arregla nada
   que se vea. Está por prevención, y la prevención tiene una razón concreta: el
   texto de estas superficies se edita desde el panel, y el día que alguien
   escriba un enlace en el párrafo del panel oscuro de Diálogos o en la frase de
   la franja coral, ese enlace va a salir en cyan oscuro —porque gana la regla
   general— y va a medir 2,5:1 sobre el teal o 1,3:1 sobre el coral. No sería un
   error de quien lo escribió: sería una trampa esperando.

   Cada color elegido, medido sobre su fondo:
     cyan sobre teal        6,96:1
     teal sobre cyan pleno  6,96:1
     blanco sobre coral     4,04:1 — alcanza porque esa franja es de 26 px, y a
                            partir de 18,66 px en negrita la norma pide 3:1
   --------------------------------------------------------------------------- */
.radar.pagina .papel-teal p a:not(.btn),
.radar.pagina .franja-teal p a:not(.btn){color:var(--cyan)}
.radar.pagina .franja-cyan p a:not(.btn){color:var(--teal)}
.radar.pagina .franja-fuerte p a:not(.btn){color:var(--blanco)}
/* La hoja ancha es para lo que no es texto seguido: una entrada con cifras al
   costado, una lista de dos columnas. */
.radar .papel-ancho{max-width:none}
/* La hoja de entrada de una sección necesita aire abajo antes del subtítulo del
   bloque que sigue. La hoja no lo trae puesto porque no siempre es una entrada. */
.radar .tn-entrada,.radar .dc-entrada{margin-bottom:34px}

/* ---------------------------------------------------------------------------
   LOS PÁRRAFOS DE LAS ENTRADAS VIENEN SIN CLASE

   Desde el 21 de agosto de 2026 los párrafos de entrada de Tendencias y de Diálogos
   son marcas de texto editables desde el panel, así que en la plantilla son <p>
   pelados y no llevan .tn-bajada ni .dc-intro, que eran sus clases cuando estaban
   escritos a mano.

   No hizo falta agregar nada, y vale la pena decir por qué: las reglas que ya
   existían alcanzan, porque son reglas de CONTEXTO y no de clase. El cuerpo sale de
   .radar.pagina p —o de .radar p en los bloques que no son de página—, el ancho de
   .radar .papel p, y el color sobre el panel oscuro de .radar .papel-teal p.

   Lo único que se agrega es para el bloque de contenido del editor, que en estas dos
   páginas dibuja la bajada de un renglón debajo del título y algún día puede tener
   más de un párrafo. */
.radar .papel .wp-block-post-content > p:last-child{margin-bottom:0}
/* EL AIRE ADENTRO Y ALREDEDOR DE LOS PANELES DE ENTRADA
   Dos cosas que se rompieron al mover los textos, y las dos por el mismo motivo: el
   ORDEN de las reglas.

   1. LOS PARRAFOS NO TENIAN AIRE ENTRE UNO Y OTRO. Ahora vienen sin clase, y el que
      les daba el margen era .tn-bajada o .dc-intro. Sin eso queda el reset de arriba
      del archivo —.radar *{margin:0}— y los parrafos se pegan. Van con el cuerpo y
      la interlinea del texto de lectura del sitio.

   2. LA SECCION QUE SIGUE A LA BANDA NO TENIA AIRE ARRIBA. La regla estaba escrita
      doscientas lineas antes que .seccion-notas y .seccion-docs, que ponen el padding
      de arriba en cero, asi que perdia por orden: misma especificidad, gana la
      ultima. Escrita aca, despues de las dos, gana. */
.radar .tn-entrada p,.radar .dc-entrada p{font-size:16px;line-height:1.7;margin-bottom:16px}
.radar .tn-entrada p:last-child,.radar .dc-entrada p:last-child{margin-bottom:0}
.radar .tras-banda{padding-top:44px}

/* SI EL PANEL SE QUEDARA SIN TEXTO, NO SE DIBUJA.
   Con los textos de fábrica en el tema esto no puede pasar por accidente: haría
   falta borrar los dos campos desde el panel a propósito. Queda igual, porque un
   rectángulo de color con nada adentro parece un error del sitio, y una página sin su
   párrafo de entrada solo se ve incompleta.
   En un navegador que no entienda :has() la regla se descarta entera y el panel vacío
   se ve; es el peor caso y es el que había antes.

   OJO CON LOS BLOQUES AGREGADOS DESDE EL PANEL: ahora una caja de texto puede llevar
   fondo oscuro, y su contenido puede ser solo una lista. wpautop no envuelve un <ul> en
   <p>, así que sin el «li» de acá abajo esa caja pasaba el guardado, se imprimía, y el
   CSS la escondía. Se veía como si el bloque no se hubiera guardado. */
.radar .papel-teal:not(:has(p, li)){display:none}
/* El fondo de los casilleros de cifras está más abajo, junto al de la versión coral,
   porque las dos reglas se contradicen a propósito y tienen que verse juntas. */
/* LOS CASILLEROS, CENTRADOS EN EL ANCHO DEL PAPEL.
   Eran dos y arrancaban pegados al margen izquierdo, que con dos pasa desapercibido.
   Con el tercero —los referentes— la fila quedaba corrida y con un hueco a la
   derecha que se leía como si faltara algo. Centrados, los tres se leen como un
   grupo. El centrado va acá, en la regla de la entrada de Diálogos, y no en
   .dc-proceso: esa clase puede usarse en otra página con otra cantidad de
   casilleros, y ahí centrar puede no ser lo que corresponde. */
.radar .dc-entrada .dc-proceso{margin:24px 0 22px;justify-content:center}
@media(max-width:620px){
  .radar .papel{padding:22px 20px}
}

/* LA BANDA QUE SEPARA UN BLOQUE DEL SIGUIENTE
   Primero se hizo con dos tintes pálidos —un celeste y un rosa aguados— y no
   funcionó: al lado del teal, del cyan y del coral plenos del manual, un pastel se
   lee como un color que no es de la marca. La marca no tiene pasteles.

   VA EN TEAL PLENO. Se probaron tres: el gris del manual, que separa bien porque es
   opaco y tapa el renglón pero no agrega nada; el cyan pleno, que el manual reserva
   para subrayados y líneas y no para áreas grandes; y el teal, que es el que el
   manual sí destina a fondos de sección. Ganó el teal: es el mismo color del
   encabezado y del pie, y con las fichas blancas encima repite el gesto que ya
   funciona en «Docencia en datos» —la mesa oscura y las hojas apoyadas—.

   Y va UNA por página, en el bloque que cierra: si una sección tiene un solo bloque
   no lleva banda, porque no hay nada de qué separarlo.

   EL MARGEN DE ABAJO NO ES DECORATIVO. La banda es el último bloque de la página y
   el pie también es teal: sin nada en el medio, los dos se pegan y forman un solo
   bloque oscuro de trescientos píxeles donde no se entiende dónde termina el
   contenido y dónde empieza el pie. Los 44 px dejan ver una franja de la hoja
   rayada entre los dos, y eso solo alcanza para separarlos. Si algún día esta banda
   deja de ser la última, el margen se puede sacar. */
/* OJO CON QUÉ SE PONE EN BLANCO ACÁ DENTRO, que es un error que ya cometimos: en la
   primera versión esta regla incluía .ant-tit, que es el título de las fichas. Las
   fichas son BLANCAS: quedaron siete tarjetas con la etiqueta, el enlace y un hueco
   en el medio. Lo que va en blanco es lo que se apoya directo sobre el teal —el
   subtítulo del bloque y su bajada—, y nada de lo que vive adentro de una ficha. */
.radar .franja-teal{background:var(--teal);margin-bottom:44px}
.radar .franja-teal > .container > .comp-cabeza .sub-title{color:var(--blanco)}
.radar .franja-teal > .container > .comp-cabeza .comp-bajada{color:var(--tinta-5)}
/* Las fichas no llevan borde sobre el teal: un filete gris claro alrededor de una
   tarjeta blanca sobre fondo oscuro no separa nada, y encima ensucia el canto. El
   filete de arriba, que es el que dice de qué componente es, se queda. */
.radar .franja-teal .ant-card{border-color:transparent;border-top-color:var(--cyan)}

/* CON EL APOYO DE, EN CLARO
   La misma tira del pie, en versión chica y sobre fondo claro. Va al final del
   texto institucional de «Qué es RaD.Ar», que es donde alguien pregunta quién
   está detrás, y no llama la atención a propósito: filete finito, rótulo en gris
   chico y los logos al 90%. Acá van en COLOR, porque el fondo es claro; en el pie
   van en blanco. Son dos archivos distintos y los dos están en assets/apoyo/. */
.radar .apoyo-claro{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--linea);margin-top:34px;padding-top:18px}
.radar .apoyo-claro-rot{font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3)}
.radar .apoyo-claro-logos{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.radar .apoyo-claro-logos a{display:block;opacity:.9;transition:opacity .18s}
.radar .apoyo-claro-logos a:hover{opacity:1}
/* Alturas igualadas por peso óptico y no por número, igual que en el pie: el
   UNESCO es una tira horizontal y el Zurich es apilado. */
.radar .apoyo-claro img.apoyo-zurich{height:40px;width:auto}
.radar .apoyo-claro img.apoyo-unesco{height:22px;width:auto}

/* LA INVITACION A SUMARSE, EN EL MISMO RENGLON QUE LOS LOGOS.
   Va empujada a la derecha con margin-left:auto: en un renglón que ya tiene un
   rótulo y dos logos, poner un tercer elemento pegado convierte la fila en una
   lista de cosas. Con el aire del medio se lee lo que es: a la izquierda quiénes
   acompañan, a la derecha cómo sumarse.

   ES EL BOTON CLARO Y NO EL OSCURO, con el mismo criterio que en la portada: la
   invitación tiene que estar disponible sin pedir la atención que pide el
   contenido. El borde en --tinta-4 sobre hoja blanca mide 2,9:1, que alcanza para
   un borde —la norma pide 3:1 para elementos de interfaz y este es decorativo,
   el texto va en --tinta-2 y mide 5:1—; al pasar el mouse se va a teal y sube a
   12:1.

   En pantalla chica el renglón se parte solo, porque el contenedor ya tiene
   flex-wrap, y el margin-left:auto deja de tener efecto cuando el botón queda
   solo en su línea. No hace falta una consulta de pantalla para esto. */
/* EL SELECTOR LLEVA .pagina Y UN :not() DE MAS, y no es adorno: la regla general
   «.radar.pagina a:not(.btn):not(.rec-item)» tiene cuatro clases y le ganaba a
   este bloque, así que el botón salía en cyan y subrayado en lugar de gris con
   borde. Se probó: en la página se veía como un enlace suelto y no como un botón.
   Mismo motivo que las tiras de cierre, unas líneas más abajo. */
.radar.pagina .apoyo-claro .apoyo-claro-cta:not(.btn),
.radar .apoyo-claro-cta{margin-left:auto;display:inline-block;font-size:12.5px;
  font-weight:700;color:var(--tinta-2);border:1px solid var(--tinta-4);
  border-radius:100px;padding:9px 17px;white-space:nowrap;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s}
.radar.pagina .apoyo-claro .apoyo-claro-cta:not(.btn):hover,
.radar .apoyo-claro-cta:hover{border-color:var(--teal);color:var(--teal);background:var(--blanco)}
.radar .apoyo-claro-cta:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:900px){
  .radar .apoyo-claro-cta{margin-left:0}
}

/* ==========================================================================
   LA PAGINA DE CONTACTO

   Una sola oración y un correo. El correo va grande y en su propio renglón
   porque es lo único que la página pide hacer: dejarlo en la misma línea que el
   texto lo convertiría en una palabra más de una oración.

   EL CONTRASTE, MEDIDO: el cyan oscuro sobre la hoja blanca mide 5,1:1 y el teal
   del hover, 12,6:1. No se usó el cyan pleno, que sobre blanco mide 1,9:1 y sería
   ilegible en un texto de este tamaño.
   ========================================================================== */
/* LA TARJETA VA CENTRADA, y el texto adentro también.
   Quedaba pegada al margen izquierdo, con un vacío grande a la derecha: en una
   página de una sola tarjeta eso se lee como un error de armado y no como una
   decisión. Es el mismo criterio que ya usa el recuadro de las dos páginas en
   preparación —.pronto-caja— que se centró por lo mismo.
   El texto centrado también: son dos renglones y un correo, no un texto de
   lectura. Centrar un párrafo largo sería otra cosa y estaría mal. */
.radar .ct-texto{max-width:58ch;margin-left:auto;margin-right:auto;text-align:center}
.radar .ct-frase{font-size:17px;line-height:1.7;color:var(--tinta-2);margin:0}
.radar.pagina .ct-correo:not(.btn){display:inline-block;margin-top:14px;
  font-family:var(--fuente-titulo);font-size:clamp(20px,2.6vw,27px);line-height:1.2;
  color:var(--cyan-d);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:4px;transition:color .2s}
.radar.pagina .ct-correo:not(.btn):hover{color:var(--teal)}
.radar.pagina .ct-correo:not(.btn):focus-visible{outline:2px solid var(--cyan);
  outline-offset:4px;border-radius:4px}
/* Si no hay nada escrito en el editor de la página, esta sección no deja un hueco. */
.radar .ct-extra:empty,.radar .ct-extra .container:empty{padding:0}

/* ==========================================================================
   PÁGINA EN OSCURO — «DOCENCIA EN DATOS»
   ==========================================================================

   QUÉ CAMBIA Y QUÉ NO. Cambia la MESA, no las hojas. La página pasa del gris
   claro al teal oscuro; las baldosas de los tableros siguen blancas, con sus
   grises, sus tintes y sus líneas exactamente como estaban. Es la misma
   jerarquía de siempre —la página es la mesa, las tarjetas son las hojas
   apoyadas encima— con la mesa oscura, que es lo que hace saltar los gráficos.

   POR QUÉ SOLO ACÁ. Esta es la página que existe para mirar datos. En una página
   de texto largo el fondo oscuro cansa la vista; en una de gráficos, al revés,
   levanta el color de las líneas y las barras. El resto del sitio queda en el
   gris del manual.

   EL COLOR NO SE PINTA ACÁ SINO EN EL BODY, con la clase .radar-oscura que pone
   functions.php. Una página está hecha de varios envoltorios .radar separados,
   con bloques de WordPress en el medio; si el color se pinta en cada envoltorio,
   entre uno y otro asoma el fondo del tema y la página queda a bandas. Es el
   mismo motivo por el que el gris general vive en theme.json y no en .radar.

   QUÉ TAN OSCURO. El primer intento fue #1D2A32, el teal por 0,82. Quedaba
   pesado: con las baldosas blancas encima, el salto era tan grande que la página
   se leía como un marco negro alrededor de unas hojas. Este es el teal del manual
   por 1,15, o sea un paso MÁS CLARO que el color de marca: sigue siendo una
   superficie oscura, pero la distancia con las baldosas baja de 14,7:1 a 11,5:1 y
   la página descansa. La banda del título y la franja de temas se quedan en el
   teal pleno, así que ahora son un poco más oscuras que la mesa y se distinguen
   solas.

   CONTRASTES, MEDIDOS SOBRE #293C46 (todos por encima de lo que pide WCAG AA):
     blanco   #FFFFFF  11,5:1     — títulos
     tinta-5  #C8CCCE   7,1:1     — texto de lectura
     tinta-4  #A3AAAE   4,9:1     — letra chica y fuentes
     cyan     #4ACEED   6,2:1     — enlaces
     amarillo #FFF64D  10,1:1     — el trazo del tema abierto
     baldosa  #FFFFFF  11,5:1     — las fichas contra la mesa
   El coral pleno da 2,8:1: alcanza para un filete o un borde, no para texto. Por
   eso los títulos de sección van en blanco y el coral queda en la barra lateral.
   Los filetes van en --teal-3 y no en --teal-2: sobre esta superficie más clara,
   el teal-2 da 1,2:1 y no se ve.
   ========================================================================== */
body.radar-oscura{background:var(--teal-0)}

/* El texto de la página. Los títulos en blanco, la lectura en tinta-5. */
.radar-oscura .radar{color:var(--tinta-5)}
.radar-oscura .radar.pagina p{color:var(--tinta-5)}
.radar-oscura .radar.pagina p b,
.radar-oscura .radar.pagina p strong{color:var(--blanco)}
.radar-oscura .radar.pagina h2,
.radar-oscura .radar.pagina h3{color:var(--blanco)}
.radar-oscura .radar.pagina li{color:var(--tinta-5)}
.radar-oscura .radar.pagina p a{color:var(--cyan)}

/* LA FRANJA DE TEMAS
   En claro se separaba solo con dos filetes, sin cambiar de color. Acá hace
   falta un paso más: sobre el fondo oscuro, dos filetes solos no alcanzan para
   marcar el bloque. Va en el teal pleno —un punto más clara que la mesa— con los
   filetes en teal-2. Sigue sin inventar ningún color. */
.radar-oscura .radar .franja-temas{background:var(--teal);
  border-top-color:var(--teal-3);border-bottom-color:var(--teal-3)}
.radar-oscura .radar .util-txt{color:var(--tinta-5)}
.radar-oscura .radar .util-txt small{color:var(--tinta-4)}
.radar-oscura .radar a.util:focus-visible{outline-color:var(--cyan)}
/* Los temas que faltan: sobre oscuro no alcanza con bajarles la saturación,
   porque el círculo del guardapolvo es blanco y quedaba siendo lo más brillante
   de la franja. Se les baja también el brillo. */
.radar-oscura .radar .util.pronto .util-dib{opacity:.5;filter:saturate(.15) brightness(.62)}
.radar-oscura .radar .util.pronto .util-txt{color:var(--tinta-4)}

/* EL TRAZO DEL TEMA ABIERTO
   En claro el resaltador va POR ENCIMA de la palabra con mix-blend-mode:multiply,
   como la tinta de un fibrón: el amarillo se multiplica sobre el papel y sobre la
   letra, y el navy sigue leyéndose. Sobre fondo oscuro esa misma cuenta da casi
   negro y el trazo desaparece.

   Acá el trazo pasa a ir DETRÁS de la palabra, sin mezcla, y la palabra se da
   vuelta a teal para leerse sobre el amarillo (12,3:1). El z-index:0 de .util-txt
   es lo que lo hace posible: abre un contexto de apilado propio, así los ::before
   con z-index:-1 quedan por encima del fondo de la página y por debajo del texto.
   Sin ese z-index:0 se irían detrás del fondo del body y no se verían. */
.radar-oscura .radar .util.activo .util-txt{color:var(--teal);z-index:0}
.radar-oscura .radar .util.activo .util-txt::before,
.radar-oscura .radar .util.activo .util-txt::after{mix-blend-mode:normal;z-index:-1}

/* LOS TABLEROS */
.radar-oscura .radar .sub-title{color:var(--blanco)}
.radar-oscura .radar .tablero-bajada{color:var(--tinta-5)}
.radar-oscura .radar .tablero-bajada b{color:var(--blanco)}
.radar-oscura .radar .tablero-fuente{color:var(--tinta-4);border-top-color:var(--teal-3)}
.radar-oscura .radar .tablero-fuente a{color:var(--cyan)}
/* El iframe arranca con el fondo del tablero ya puesto: sin esto, mientras el
   archivo carga se ve un rectángulo blanco del alto del tablero. El color es el
   mismo --teal-0 que tienen adentro cantidad-docentes.html y salario-en-datos.html;
   si se cambia uno, se cambian los tres. */
.radar-oscura .radar .tablero-marco{background:var(--teal-0)}

/* ==========================================================================
   LAS CAJAS DE TEXTO A DEMANDA
   Las agrega quien edita el sitio desde el panel, sin pedir código, y aparecen
   al final de la página que elija. Son una hoja como cualquier otra: no tienen
   opciones de diseño, a propósito. La idea es poder agregar texto, no poder
   inventar maquetas.
   ========================================================================== */
/* ---------------------------------------------------------------------------
   LOS RECURSOS: VIDEOS, BIBLIOGRAFIA Y DEMAS

   Un recurso se inserta como bloque en cualquier página, así que la ficha tiene que
   funcionar sobre la hoja rayada, sobre la mesa oscura de «Docencia en datos» y al lado
   de cualquier otra cosa.

   LA FORMA ES LA DE LOS DOCUMENTOS DE DIALOGOS, UN PASO MAS CHICA: miniatura a la
   izquierda, texto a la derecha, 190 píxeles de miniatura contra 200 y título de 21
   contra 28. La diferencia es de jerarquía, no de decoración: un documento de Diálogos es
   el contenido de su sección; un recurso acompaña a otra cosa.
   La primera versión estaba a la mitad justa —128 píxeles y título de 17— y era
   demasiado: al publicar el primer recurso parecía una nota al pie en lugar de contenido.
   Discreto no es chico.
   --------------------------------------------------------------------------- */
.radar .rec-lista{display:flex;flex-direction:column;gap:16px}
.radar .rec-item{display:flex;gap:24px;align-items:flex-start;background:var(--blanco);
  border:1px solid var(--linea);border-radius:10px;padding:20px 22px;text-decoration:none}
.radar a.rec-item{transition:box-shadow .2s,transform .2s,border-color .2s}
.radar a.rec-item:hover,.radar .rec-video:hover{box-shadow:0 6px 18px rgba(35,52,61,.09);
  transform:translateY(-2px);border-color:var(--cyan)}
.radar a.rec-item:focus-visible,.radar .rec-video:focus-visible{outline:2px solid var(--teal);
  outline-offset:3px}

/* LA MINIATURA. La proporción está fija en 16 por 9 para que todas las fichas de una
   lista queden alineadas sin importar qué imagen trajo cada plataforma. */
.radar .rec-mini{flex:none;width:190px;aspect-ratio:16/9;position:relative;overflow:hidden;
  border-radius:6px;background:var(--teal-2)}
.radar .rec-mini img{width:100%;height:100%;object-fit:cover;display:block}
.radar .rec-mini iframe{width:100%;height:100%;border:0;display:block}
/* Con el reproductor abierto la ficha se agranda: un video de 128 píxeles no se puede
   mirar. Es el único momento en que un recurso ocupa lugar de verdad, y es porque
   alguien lo pidió. */
.radar .rec-video-abierto{display:block}
.radar .rec-video-abierto .rec-mini{width:100%;margin-bottom:14px;border-radius:8px}

.radar .rec-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:rgba(35,52,61,.82);
  border:2px solid rgba(255,255,255,.9)}
/* El triángulo se dibuja con bordes y no con una imagen: es una figura de tres líneas y
   una imagen más por cada video no se justifica. */
.radar .rec-play::after{content:"";position:absolute;left:53%;top:50%;
  transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff}
.radar .rec-video{cursor:pointer}
.radar .rec-video:hover .rec-play{background:var(--coral);border-color:var(--coral)}
/* Con el reproductor puesto la ficha dejó de ser un botón: el cursor de mano invitaría a
   un clic que ya no hace nada. */
.radar .rec-video-abierto{cursor:default}
.radar .rec-video-abierto:hover{box-shadow:none;transform:none;border-color:var(--linea)}

.radar .rec-txt{flex:1;min-width:0}
.radar .rec-etq{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--cyan-d);background:var(--cyan-tinte);
  border-radius:4px;padding:3px 7px;margin-bottom:7px}
.radar .rec-tit{font-family:var(--fuente);font-size:21px;font-weight:700;color:var(--teal);
  line-height:1.28;margin:0 0 7px}
.radar a.rec-item:hover .rec-tit,.radar .rec-video:hover .rec-tit{color:var(--cyan-d)}
.radar .rec-video-abierto:hover .rec-tit{color:var(--teal)}
.radar .rec-baja{font-size:14.5px;color:var(--tinta-2);line-height:1.6;margin:0 0 10px;
  max-width:70ch}
.radar .rec-meta{font-size:12.5px;color:var(--tinta-3);display:flex;flex-wrap:wrap;gap:12px;
  align-items:baseline}
.radar .rec-ver{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--cyan-d)}

/* El bloque de recursos, cuando lleva título propio. */
.radar .caja-recursos{margin-bottom:22px}
.radar .caja-recursos:last-child{margin-bottom:0}
.radar .caja-recursos .sub-cabeza{margin-bottom:14px}

/* En la mesa oscura de «Docencia en datos» la ficha sigue siendo una hoja blanca, y su
   tinta también: sin estas líneas heredaría el texto en claro de esa página y quedaría
   una hoja blanca con letras casi blancas. Es lo mismo que pasó con las cajas de texto. */
.radar-oscura .radar .rec-item{background:var(--blanco)}
.radar-oscura .radar.pagina .rec-tit{color:var(--teal)}
.radar-oscura .radar.pagina .rec-baja{color:var(--tinta-2)}
.radar-oscura .radar.pagina .rec-meta{color:var(--tinta-3)}

@media(max-width:620px){
  /* En pantalla angosta la miniatura al costado deja el texto en una columna de nada:
     pasa arriba, a lo ancho. */
  .radar .rec-item{flex-direction:column;gap:12px}
  .radar .rec-mini{width:100%}
  .radar .rec-ver{margin-left:0}
}

/* EL AIRE DE LOS BLOQUES AGREGADOS DESDE EL PANEL.

   Primero les saqué el aire de arriba, porque al final de la página el suyo más el del
   bloque anterior daba un hueco de casi cien píxeles. Pero los bloques ya no van solo
   al final: puestos «arriba» quedaban pegados al título de la página y al hero de la
   portada, sin un milímetro de separación. Un bloque que toca la banda oscura no se lee
   como un bloque aparte sino como parte de ella.

   Así que ahora tienen aire propio, la mitad del de una sección normal: alcanza para
   que se separe de lo de arriba y no abre un hueco cuando cae al final. */
.radar.radar-cajas .section{padding:34px 0}
.radar .caja-texto{margin-bottom:22px}
.radar .caja-texto:last-child{margin-bottom:0}
.radar .caja-texto > h2.sub-title{margin-top:0}
.radar .caja-texto ul,
.radar .caja-texto ol{margin:0 0 14px 20px;max-width:70ch}
.radar .caja-texto li{margin-bottom:6px}
/* EN LA MESA OSCURA DE «DOCENCIA EN DATOS», LA TINTA TAMBIEN.
   La hoja seguía siendo blanca —esa línea ya estaba— pero el texto no: esa página pone
   toda su tinta en claro, para que se lea sobre el teal, y adentro de la hoja blanca
   heredaba el mismo claro. Resultado: hoja blanca con letras casi blancas. Ilegible, y
   yo lo publiqué así.
   Las cuatro reglas devuelven la tinta normal SOLO adentro de la caja. Van con la misma
   cantidad de clases que las que pintan en claro, y después, así que ganan. */
.radar-oscura .radar .caja-texto{background:var(--blanco)}
.radar-oscura .radar.pagina .caja-texto p,
.radar-oscura .radar.pagina .caja-texto li{color:var(--tinta)}
.radar-oscura .radar.pagina .caja-texto p b,
.radar-oscura .radar.pagina .caja-texto p strong{color:var(--teal)}
.radar-oscura .radar.pagina .caja-texto h2,
.radar-oscura .radar.pagina .caja-texto h2.sub-title{color:var(--teal)}
.radar-oscura .radar.pagina .caja-texto p a{color:var(--cyan-d)}

/* EL PANEL OSCURO, cuando se elige ese estilo en el panel.
   Es la misma hoja de teal pleno que usan las entradas de Tendencias y de Diálogos, así
   que no hay un diseño nuevo: hay dos que ya existían y ahora se pueden elegir. Sirve
   para lo que se quiere destacar de verdad, y en «Docencia en datos» —donde la página ya
   es oscura— para lo contrario: fundirse en lugar de saltar. */
.radar .caja-texto.papel-teal,
.radar-oscura .radar .caja-texto.papel-teal{background:var(--teal);border:0}
.radar .caja-texto.papel-teal p,
.radar .caja-texto.papel-teal li,
.radar-oscura .radar.pagina .caja-texto.papel-teal p,
.radar-oscura .radar.pagina .caja-texto.papel-teal li{color:var(--tinta-5)}
.radar .caja-texto.papel-teal h2,
.radar .caja-texto.papel-teal h2.sub-title,
.radar .caja-texto.papel-teal p b,
.radar .caja-texto.papel-teal p strong,
.radar-oscura .radar.pagina .caja-texto.papel-teal h2,
.radar-oscura .radar.pagina .caja-texto.papel-teal h2.sub-title,
.radar-oscura .radar.pagina .caja-texto.papel-teal p b,
.radar-oscura .radar.pagina .caja-texto.papel-teal p strong{color:var(--blanco)}
.radar .caja-texto.papel-teal p a,
.radar-oscura .radar.pagina .caja-texto.papel-teal p a{color:var(--cyan)}

/* El renglón de la fuente, abajo de cada gráfico de los tableros. Vive dentro de
   los iframes, así que su estilo está en cada tablero y no acá: esta línea existe
   solo para que quede escrito dónde buscarlo. */