/* =========================================================================
ACÁ ESTAMOS — sistema de diseño
Un solo color de marca. Tipografía condensada pesada. Inclinación.
Gesto de esténcil. Todo sale del logo, no se inventa nada.
========================================================================= */
:root{
/* --- Color --------------------------------------------------------- */
--violeta:#5c0f8b; /* Pantone 2597 C. Único color de marca */
--violeta-osc:#3d0a5c; /* para hover/profundidad */
--violeta-spray:#a08abf; /* el salpicado del logo. DECORATIVO SOLO: */
/* 2,9:1 sobre blanco, NUNCA para texto */
--papel:#f4f1ea; /* crema/hueso, el fondo del sitio */
--papel-claro:#fbfaf7;
--tinta:#1a1620; /* negro apenas violáceo */
--tinta-media:#5a5560;
--blanco:#fff;
/* --- Tipografía ---------------------------------------------------- */
--display:"Anton",system-ui,sans-serif; /* el bloque del logo */
--titulo:"Barlow Condensed",system-ui,sans-serif;/* dialoga con la Red */
--cuerpo:"Barlow",system-ui,sans-serif;
--t-xs:.78rem;
--t-s:.92rem;
--t-m:clamp(1rem,.95rem + .3vw,1.15rem);
--t-l:clamp(1.25rem,1.1rem + .8vw,1.6rem);
--t-xl:clamp(1.9rem,1.4rem + 2.4vw,3.2rem);
--t-xxl:clamp(3rem,1.5rem + 7vw,7rem);
--t-mega:clamp(4rem,1rem + 15vw,13rem);
/* --- Espacio y medida ---------------------------------------------- */
--ancho:1240px;
--gap:clamp(1.1rem,3vw,2.6rem);
--seccion-y:clamp(2.5rem,6vh,5rem);
--alto-cabecera:68px; /* alto MINIMO del interior de la barra */
/* Alto REAL de la barra: el interior mas el padding de la banda de esténcil
(.55rem arriba + .75rem abajo + .4rem del interior). Se separa en su
propia variable porque `--alto-cabecera` alimenta el min-height del
interior: si se usara la misma para el despeje, se realimentaria.
Con la variable chica el despeje quedaba 20px corto y los titulos
aterrizaban tapados — lo detecto una prueba de scroll. */
--alto-cabecera-total:92px;
/* --- Gesto --------------------------------------------------------- */
--inclina:-2.2deg; /* la inclinación del logo, trasladada */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--papel);color:var(--tinta);
font:400 var(--t-m)/1.6 var(--cuerpo);
}
img,svg{max-width:100%;height:auto}
h1,h2,h3{margin:0;line-height:1.05;text-wrap:balance}
p{margin:0 0 1.1rem}
a{color:inherit}
/* Foco: siempre visible, y con doble anillo para que funcione sobre
cualquier fondo, incluido el violeta del mapa. (1.4.11 y 2.4.13) */
/* La cabecera queda pegada arriba, asi que todo salto a un ancla necesita
despejarla; si no, el titulo de destino aterriza DEBAJO de la barra.
Se declara UNA sola vez, en el contenedor de scroll. Estaba tambien como
`scroll-margin-top` en cada destino y los dos valores SE SUMAN: cada salto
caia 216px abajo en vez de 108, o sea con media pantalla de la seccion
anterior todavia a la vista. Con `scroll-padding-top` alcanza, y ademas
cubre lo que `scroll-margin` no: el desplazamiento al mover el foco con el
teclado. */
html{scroll-padding-top:calc(var(--alto-cabecera-total) + 1rem)}
:focus-visible{
outline:3px solid var(--tinta);
outline-offset:2px;
box-shadow:0 0 0 6px var(--papel);
border-radius:2px;
}
/* La seccion se llama .mapa-videos: `.mapa` no existe y la regla estaba
muerta, asi que el foco caia al contorno oscuro sobre fondo oscuro. */
.mapa-videos :focus-visible{outline-color:var(--blanco);box-shadow:0 0 0 6px var(--tinta)}
.sr-only{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Fijo, no absoluto: con `absolute` el `top` es respecto de la pagina, asi
que si alguien vuelve al enlace desde el medio del sitio queda fuera de
pantalla. Fijo siempre aparece en la ventana. */
.skip-link{
position:fixed;left:8px;top:-70px;z-index:1000;
background:var(--violeta);color:var(--blanco);
padding:.8rem 1.2rem;text-decoration:none;
font:700 var(--t-s)/1 var(--titulo);text-transform:uppercase;letter-spacing:.08em;
transition:top .15s;
}
.skip-link:focus{top:8px}
/* =========================================================================
CABECERA
========================================================================= */
/* La banda de esténcil es un activo de marca, no un rectángulo:
trae sus propios bordes rasgados arriba y abajo. */
.cabecera{
position:sticky;top:0;z-index:200;
color:var(--blanco);
/* el padding vertical mantiene el contenido lejos de los bordes rasgados */
padding:.55rem 0 .75rem;
transition:transform .28s ease;
will-change:transform;
}
/* Filo blanco que sigue el borde rasgado.
Cuando la barra se superpone a la sección violeta del mapa, violeta sobre
violeta hacía desaparecer el borde de esténcil y la barra se fundía con el
fondo. Ahora la misma silueta se dibuja DOS veces: primero en blanco,
corrida 3px hacia abajo, y encima la banda violeta. Del blanco solo asoma
el filo de abajo, siguiendo el rasgado en vez de cortarlo con una línea
recta —que es lo que haría un `border-bottom`.
El orden importa: `::before` se pinta antes que `::after`, así que el
blanco queda debajo. Por eso la banda dejó de ser `background` de la
cabecera y pasó a ser el `::after`. */
.cabecera::before,
.cabecera::after{
content:"";position:absolute;left:0;right:0;
pointer-events:none;
}
.cabecera::before{
top:3px;bottom:-3px;
background:var(--blanco);
-webkit-mask:url("../images/fondo-nav.svg") no-repeat center/100% 100%;
mask:url("../images/fondo-nav.svg") no-repeat center/100% 100%;
}
.cabecera::after{
top:0;bottom:0;
/* La banda es el SVG usado como MASCARA y el color va aparte: asi la misma
silueta puede ser violeta o papel (la barra clara de la seccion del mapa)
y el cambio es un fundido de color, no un cambio de imagen. */
background:var(--violeta);
-webkit-mask:url("../images/fondo-nav.svg") no-repeat center/100% 100%;
mask:url("../images/fondo-nav.svg") no-repeat center/100% 100%;
transition:background-color .35s ease;
}
.cabecera::before{transition:background-color .35s ease}
/* Se esconde al bajar, vuelve al subir. La lógica está en nav.js,
que nunca la esconde si el foco está adentro (criterio 2.4.11). */
.cabecera.esta-oculta{transform:translateY(-115%)}
@media (prefers-reduced-motion:reduce){
.cabecera{transition:none}
}
.cabecera__interior{
/* Por encima de las dos siluetas del borde rasgado. */
position:relative;z-index:1;
/* El violeta de marca como fondo propio: es EXACTAMENTE el mismo #5c0f8b
con el que está dibujada la banda, así que no se ve —queda color sobre
color— pero hace dos cosas que importan. Deja al texto del menú con un
fondo real y medible (sin esto una auditoría de contraste lo lee como
blanco sobre el papel claro de la página: 1,13:1), y si el SVG no carga
el menú sigue siendo legible en vez de desaparecer. */
background:var(--violeta);
max-width:var(--ancho);margin-inline:auto;
min-height:var(--alto-cabecera);
/* Los extremos de la banda están rasgados y no llegan al borde:
el padding lateral mantiene el contenido dentro de la zona sólida. */
padding:.4rem clamp(1.6rem,4.5vw,4rem);
display:flex;align-items:center;justify-content:space-between;
gap:var(--gap);flex-wrap:wrap;
}
.logo--chico{display:grid}
.logo--chico img{width:clamp(120px,14vw,172px);display:block;grid-area:1/1}
.logo--chico .logo__violeta{opacity:0}
/* --- La barra clara, sobre la seccion violeta -------------
Violeta sobre violeta, la barra se perdia contra el mapa. Mientras pasa por
encima de esa seccion (nav.js le pone `.es-clara`), la banda va en papel,
el filo de abajo en violeta y el menu y el logo en violeta. Todo con
fundido. Contraste: violeta de marca sobre papel, 9,6:1. */
.cabecera.es-clara{color:var(--violeta)}
.cabecera.es-clara::after{background-color:var(--papel)}
.cabecera.es-clara::before{background-color:var(--violeta)}
.cabecera.es-clara .cabecera__interior{background:var(--papel)}
.cabecera.es-clara .nav__lista a::after{background:var(--violeta)}
.cabecera.es-clara .logo__claro{opacity:0}
.cabecera.es-clara .logo__violeta{opacity:1}
.cabecera.es-clara :focus-visible{outline-color:var(--violeta);box-shadow:0 0 0 6px var(--papel)}
.cabecera__interior{transition:background-color .35s ease,color .35s ease}
/* Sin bajada: lo que decia el cintillo lo
dice ahora la seccion de presentacion. El contenedor de la marca se queda:
el interior de la barra es un flex con `space-between`. */
.cabecera__marca{display:flex;align-items:center;min-width:0}
.nav__lista{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(.9rem,2vw,2rem);margin:0;padding:0}
.nav__lista a{
font:700 var(--t-s)/1 var(--titulo);
text-transform:uppercase;letter-spacing:.09em;text-decoration:none;
padding:.55rem .15rem;display:inline-block;position:relative;
}
.nav__lista a::after{
content:"";position:absolute;left:0;right:0;bottom:.15rem;height:3px;
background:var(--blanco);transform:scaleX(0);transform-origin:left;
transition:transform .18s;
}
.nav__lista a:hover::after,.nav__lista a:focus-visible::after{transform:scaleX(1)}
/* sobre la banda violeta el foco necesita anillo claro */
.cabecera :focus-visible{outline-color:var(--blanco);box-shadow:0 0 0 6px var(--violeta-osc)}
/* En el celular el menu va en UNA fila que se desliza de costado. Partido en
dos filas la barra medía casi 200px de un telefono de 812, y como la barra
vuelve al subir, eso era un cuarto de pantalla tapado cada vez. Con una fila
queda en ~120px y el ultimo item asoma cortado, que es lo que dice «hay mas
para el costado». */
@media (max-width:719px){
.cabecera__interior{row-gap:.15rem;padding-inline:1.2rem}
.nav{width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.nav::-webkit-scrollbar{display:none}
.nav__lista{flex-wrap:nowrap;gap:1.1rem}
.nav__lista a{white-space:nowrap;font-size:.82rem;letter-spacing:.07em}
}
/* ...pero a 375 el quinto item caia JUSTO en el borde y no asomaba: «Quienes
somos» quedaba escondido sin aviso. Ahora la letra y el aire
escalan con el ancho para que entren los cinco desde ~350px; mas angosto,
el deslizamiento de arriba sigue de red. */
@media (max-width:539px){
.cabecera__interior{padding-inline:1rem}
.nav__lista{justify-content:space-between;gap:clamp(.5rem,2.4vw,1.1rem)}
.nav__lista a{font-size:clamp(.66rem,3.1vw,.82rem);letter-spacing:.02em}
}
/* =========================================================================
SECCIONES APILABLES
En desktop cada sección se pega arriba y la siguiente se le monta encima.
En tablet y mobile: flujo normal, apiladas de toda la vida.
Siempre min-height, nunca height, para que crezca con zoom al 200% (1.4.4).
========================================================================= */
.seccion{
padding:var(--seccion-y) var(--gap);
position:relative;
background:var(--color-seccion,var(--papel));
}
.seccion__interior{max-width:var(--ancho);margin-inline:auto;width:100%}
/* Borde superior rasgado.
No es una textura inventada: es el borde de la misma banda de esténcil
del nav (`fondo-nav.svg`), usada como máscara. La banda mide 1931x219,
así que al escalarla alta y anclarla arriba, solo asoma su filo superior. */
.seccion--rasgada::before{
content:"";position:absolute;left:0;right:0;top:-26px;height:27px;
background:var(--color-seccion,var(--papel));
-webkit-mask:url("../images/fondo-nav.svg") no-repeat var(--rasgado-desde,top) center/100% 240px;
mask:url("../images/fondo-nav.svg") no-repeat var(--rasgado-desde,top) center/100% 240px;
transform:var(--rasgado-giro,none);
pointer-events:none;
}
/* Cuatro bordes distintos con el mismo recurso: se combina de qué filo de la
banda se toma el recorte (arriba o abajo, que son formas distintas) con un
espejado horizontal. Repetir el mismo cuatro veces se nota. */
.mapa-videos {--rasgado-desde:top; --rasgado-giro:none}
.videos {--rasgado-desde:top; --rasgado-giro:scaleX(-1)}
.descargas {--rasgado-desde:top; --rasgado-giro:scale(-1,1)}
.quienes {--rasgado-desde:bottom; --rasgado-giro:scaleY(-1)}
.pie {--rasgado-desde:bottom; --rasgado-giro:scale(-1,-1)}
@media (min-width:1024px){
.seccion--apilable{
position:sticky;top:0;
/* 100dvh exactos no dejan margen: en pantallas bajas el contenido roza
los bordes y la sección siguiente empieza a taparlo antes de que se
llegue a leer. El mínimo de alto asegura que sigan siendo secciones
de pantalla en monitores grandes. */
min-height:min(100dvh, max(560px, 92dvh));
display:flex;flex-direction:column;justify-content:center;
padding-top:calc(var(--alto-cabecera-total) + var(--seccion-y));
}
}
/* Sin apilado si la persona pidió menos movimiento */
@media (prefers-reduced-motion:reduce){
.seccion--apilable{position:static}
}
.seccion__titulo,
.is-style-seccion{
font:400 var(--t-xl)/.95 var(--display);
text-transform:uppercase;letter-spacing:.01em;
transform:rotate(var(--inclina));transform-origin:left center;
margin-bottom:.7rem;
}
.seccion__bajada,
.is-style-bajada{
font:600 var(--t-l)/1.15 var(--titulo);
color:var(--violeta);max-width:22ch;
}
/* =========================================================================
PRESENTACION
Lo primero que se lee: que es Acá Estamos. El logo manda y la frase va
debajo como bajada, mas chica y angosta. El bloque se apoya en el tercio de
arriba, no en el medio, y la seccion mide un poco menos que la pantalla:
el manifiesto asoma abajo e invita a bajar.
========================================================================= */
.presentacion{
--color-seccion:var(--papel);
/* Casi una pantalla. Medida por su texto dejaba un hueco de papel antes
del manifiesto; una pantalla exacta escondia que habia mas abajo. */
min-height:calc(88dvh - var(--alto-cabecera-total));
display:flex;flex-direction:column;justify-content:flex-start;
padding-top:clamp(2.5rem,11vh,7rem);
padding-bottom:clamp(2.5rem,8vh,5rem);
overflow:clip;
}
.presentacion .seccion__interior{position:relative;z-index:1}
/* En el celular, casi una pantalla dejaba ~300px de papel vacio debajo del
texto: mide lo que su contenido, mas un margen. */
@media (max-width:719.98px){
.presentacion{min-height:0;padding-top:4.5rem;padding-bottom:4rem}
}
/* El fondo: la imagen a toda la seccion, recortada como un afiche
(`object-fit:cover`, anclada a la derecha, que es donde estan la rosa y la
red). Encima, un degradé de papel desde la izquierda: tapa la imagen debajo
del logo y del texto, y se vuelve transparente hacia la derecha. */
.presentacion__fondo{
position:absolute;inset:0;z-index:0;pointer-events:none;
width:100%;height:100%;max-width:none;
object-fit:cover;object-position:right center;
animation:fondo-entra 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fondo-entra{
from{opacity:0;transform:translateX(3%)}
to{opacity:1;transform:none}
}
.presentacion::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(to right,
var(--papel) 0%, var(--papel) 28%,
rgba(244,241,234,.9) 38%, rgba(244,241,234,.5) 54%, rgba(244,241,234,0) 72%);
}
/* En el celular no hay mitad libre: el degradé baja de arriba y la imagen
queda como textura, mas tenue, detras del texto. */
@media (max-width:719px){
.presentacion::after{
background:linear-gradient(to bottom,
rgba(244,241,234,.9) 0%, rgba(244,241,234,.82) 60%, rgba(244,241,234,.55) 100%);
}
}
.presentacion__titulo{margin:0;line-height:0}
/* --- Variante con la portada centrada y sin ilustracion (.opcion-2) ----
La portada sin la ilustracion de fondo, con el logo y la frase centrados.
La activa la clase `opcion-2` del ; el
resto del sitio es el mismo. */
.opcion-2 .presentacion__fondo,.opcion-2 .presentacion::after{display:none}
.opcion-2 .presentacion{justify-content:center;text-align:center}
.opcion-2 .presentacion__logo{margin-inline:auto}
.opcion-2 .presentacion__texto{margin-inline:auto}
.opcion-2 .presentacion__texto::before{left:50%;translate:-50% 0}
/* El logo de la portada, fijo. Escala con la ventana entre 260 y 430px: en una
notebook de 14" ronda los 420. */
.presentacion__logo{display:block;width:clamp(260px, 30vw, 430px);height:auto}
/* Mientras el logo de la portada se ve, el de la barra no: el nombre no se
repite. Sigue siendo un enlace que funciona y que se puede tabular -no se
saca del orden-, solo que transparente. Vuelve con un fundido. */
html.logo-en-portada .cabecera .logo--chico{opacity:0}
.cabecera .logo--chico{transition:opacity .35s ease}
.cabecera .logo--chico img{transition:opacity .35s ease}
.presentacion__texto{
font:500 clamp(1.1rem,.85rem + .85vw,1.6rem)/1.38 var(--titulo);
max-width:30ch;color:var(--tinta);
text-wrap:pretty;
/* Separada del logo por el trazo a mano del manifiesto, corto, en el violeta
del salpicado: une la bajada al logo sin que compitan. */
position:relative;
margin:clamp(1.6rem,4vh,2.6rem) 0 0;
padding-top:clamp(1rem,2.4vh,1.5rem);
}
.presentacion__texto::before{
content:"";position:absolute;left:0;top:0;width:4.5rem;height:5px;
background:var(--violeta-spray);
-webkit-mask:var(--trazo-mano);mask:var(--trazo-mano);
}
/* Con el piso del clamp (17,6px) la bajada, condensada, se veia MAS CHICA que
el manifiesto en Barlow normal (16,3px pero mas ancha), y la portada tiene
que mandar. Queda a la par de los destacados del manifiesto. */
@media (max-width:719.98px){.presentacion__texto{font-size:1.32rem}}
/* La bajada centrada bajo el logo, como en la variante `.opcion-2`, y el bloque
centrado en la franja de papel libre de la izquierda, la que no tapa la rosa.
La franja es del ancho de la pantalla, no del contenedor: por
eso el interior se suelta del centrado y mide un 40% de la seccion. En el
celular no hay franja: centrado nomas. */
.presentacion .seccion__interior{
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.presentacion__texto::before{left:50%;translate:-50% 0}
@media (min-width:720px){
.presentacion .seccion__interior{margin-inline:0;width:40%;min-width:min(100%,440px)}
}
/* =========================================================================
MANIFIESTO
========================================================================= */
.manifiesto{--color-seccion:var(--papel)}
/* --- Fondo del manifiesto: textura, no foto --------------------
La entrada a la home no lleva fotos de personas: una portada no tiene el
consentimiento explicito que si tienen las caras de los videos. Una
textura rompe el pleno sin representar a nadie.
Es un salpicado -el gesto del logo- en `--violeta-spray`, a una opacidad
muy baja. Rompe el pleno y nada mas: el texto se sigue leyendo contra el
papel, no contra la textura.
El mosaico va pegado abajo como data-URI, asi que no suma un pedido a la
red. */
.manifiesto{background-repeat:repeat;background-position:0 0}
/* TEXTURA:INICIO */
.manifiesto,.sumate{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%2523a08abf' fill-opacity='0.14'%3E%3Ccircle cx='98.7' cy='104.8' r='2.12' opacity='0.93'/%3E%3Ccircle cx='41.6' cy='37.8' r='0.62' opacity='0.59'/%3E%3Ccircle cx='52.5' cy='139.2' r='1.96' opacity='0.49'/%3E%3Ccircle cx='34.2' cy='136.2' r='1.83' opacity='0.89'/%3E%3Ccircle cx='3.3' cy='115.7' r='0.60' opacity='0.89'/%3E%3Ccircle cx='123.6' cy='19.7' r='1.52' opacity='0.92'/%3E%3Ccircle cx='79.3' cy='0.2' r='2.13' opacity='0.76'/%3E%3Ccircle cx='79.3' cy='160.2' r='2.13' opacity='0.76'/%3E%3Ccircle cx='26.0' cy='128.4' r='1.09' opacity='0.52'/%3E%3Ccircle cx='32.3' cy='74.7' r='0.63' opacity='0.6'/%3E%3Ccircle cx='38.7' cy='50.3' r='0.69' opacity='0.42'/%3E%3Ccircle cx='78.9' cy='16.4' r='2.05' opacity='0.37'/%3E%3Ccircle cx='43.6' cy='89.4' r='0.82' opacity='1.0'/%3E%3Ccircle cx='110.3' cy='44.7' r='0.69' opacity='0.42'/%3E%3Ccircle cx='12.7' cy='61.0' r='1.75' opacity='0.9'/%3E%3Ccircle cx='7.2' cy='20.0' r='1.30' opacity='0.39'/%3E%3Ccircle cx='34.3' cy='135.8' r='1.05' opacity='0.71'/%3E%3Ccircle cx='122.9' cy='82.8' r='0.99' opacity='0.38'/%3E%3Ccircle cx='151.1' cy='121.1' r='0.83' opacity='0.6'/%3E%3Ccircle cx='126.8' cy='75.0' r='2.09' opacity='0.44'/%3E%3Ccircle cx='135.6' cy='110.1' r='0.68' opacity='0.91'/%3E%3Ccircle cx='57.8' cy='4.4' r='0.69' opacity='0.72'/%3E%3Ccircle cx='128.1' cy='44.5' r='0.66' opacity='0.4'/%3E%3Ccircle cx='158.0' cy='68.2' r='1.31' opacity='0.94'/%3E%3Ccircle cx='92.3' cy='136.6' r='1.15' opacity='0.88'/%3E%3Ccircle cx='28.4' cy='42.7' r='1.37' opacity='0.55'/%3E%3Ccircle cx='85.8' cy='70.1' r='0.61' opacity='0.87'/%3E%3C/g%3E%3C/svg%3E");
background-size:160px 160px;
}
/* TEXTURA:FIN */
/* --- El manifiesto, en columnas --------------------
El manifiesto tiene la pantalla para el solo, separado del mapa:
«horizontalizado» y compacto, en tres columnas. */
/* El titulo del manifiesto abre la seccion: en la letra del logo, en
mayuscula e inclinado como los demas titulos. En la condensada se leeria
como una nota. */
.manifiesto__entrada{
font:400 clamp(2.2rem,1.3rem + 2.6vw,3.9rem)/.95 var(--display);
text-transform:uppercase;color:var(--violeta);
transform:rotate(var(--inclina));transform-origin:left center;
margin:0 0 clamp(2rem,5vh,3.2rem);
position:relative;display:inline-block;
}
/* subrayado a mano alzada, como el del logo de la Red */
.manifiesto__entrada::after{
content:"";position:absolute;left:0;right:-6%;bottom:-.6rem;height:7px;
background:var(--violeta);
-webkit-mask:var(--trazo-mano);mask:var(--trazo-mano);
}
:root{
--trazo-mano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='6' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M2 3.6C40 1.2 92 .6 148 1.4c56 .8 104 2.2 150 3.4-44 1.4-96 1-152 .4C90 4.6 40 4.8 2 3.6z'/%3E%3C/svg%3E") no-repeat 0 0/100% 6px;
}
/* Tres columnas en escritorio, una debajo de 900px. Los cortes de verso estan
puestos a mano con
: son parte del poema, no los decide el navegador,
asi que no hay un paso intermedio de dos columnas que los dejaria colgando. */
.manifiesto__columnas{display:grid;gap:clamp(1.4rem,3vh,2.4rem);grid-template-columns:1fr}
@media (min-width:900px){
.manifiesto__columnas{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3.2rem)}
}
/* Recorte horizontal: nada del manifiesto tiene por que salirse por el
costado, y `clip` no crea contenedor de scroll -con `hidden` se romperia el
apilado pegajoso de las secciones de mas abajo-. */
.manifiesto{overflow-x:clip}
.manifiesto__col p{margin:0 0 1.05rem}
/* En el celular, un escalon mas chico: a 16,3px se veia grande
al lado de la bajada de la portada. Los destacados quedan como estan. */
@media (max-width:719.98px){.manifiesto__col p:not(.destacado,.is-style-destacado){font-size:var(--t-s)}}
/* En escritorio el manifiesto entra en una pantalla (en una
notebook de 14" se cortaba abajo). La letra, el interlineado y los espacios
se atan al ALTO de la ventana con un tope: en un monitor grande queda como
estaba, y en una pantalla baja se ajusta lo justo. */
@media (min-width:900px){
.manifiesto{padding-block:clamp(1.6rem,5vh,4rem)}
.manifiesto__entrada{font-size:clamp(2rem,1rem + 4.2vh,3.9rem);margin-bottom:clamp(1.2rem,3.5vh,3rem)}
.manifiesto__col{font-size:clamp(.92rem,.5rem + 1.25vh,1.12rem);line-height:1.45}
.manifiesto__col p{margin-bottom:clamp(.5rem,1.4vh,1.05rem)}
.manifiesto :is(.destacado,.is-style-destacado){font-size:clamp(1.05rem,.5rem + 1.9vh,1.6rem);margin-top:clamp(.6rem,1.6vh,1.3rem)}
}
.destacado,
.is-style-destacado{
font:700 var(--t-l)/1.1 var(--titulo);color:var(--violeta);
margin-top:1.3rem;
}
.destacado-inline{font-weight:700;color:var(--violeta)}
/* =========================================================================
VIDEOS
========================================================================= */
/* --- Carrusel de videos ------------------------------------------------
La grilla sigue siendo un contenedor con desplazamiento nativo: se desliza
con el dedo, con el trackpad y con el teclado. Las flechas son la
alternativa de un solo puntero que pide el criterio 2.5.7 (AA). */
.carrusel{position:relative;margin:clamp(1.2rem,3vh,2rem) 0 0}
.carrusel__flecha{
position:absolute;top:calc(50% - 1.6rem);transform:translateY(-50%);z-index:3;
width:clamp(46px,5.2dvh,62px);aspect-ratio:1;border-radius:50%;
display:grid;place-items:center;cursor:pointer;
background:rgba(26,22,32,.72);
border:2px solid var(--violeta-spray);
color:var(--blanco);
backdrop-filter:blur(6px);
transition:background .16s,transform .16s,border-color .16s;
}
.carrusel__flecha svg{width:46%;height:46%}
.carrusel__flecha:hover{background:var(--violeta);border-color:var(--blanco);transform:translateY(-50%) scale(1.08)}
.carrusel__flecha[hidden]{display:none}
.carrusel__flecha--anterior{left:calc(-1 * clamp(.6rem,2vw,1.6rem))}
.carrusel__flecha--siguiente{right:calc(-1 * clamp(.6rem,2vw,1.6rem))}
@media (prefers-reduced-motion:reduce){
.carrusel__flecha:hover{transform:translateY(-50%)}
}
.videos__grilla{
list-style:none;margin:0;padding:0 0 1rem;
display:grid;grid-auto-flow:column;
/* el ancho sale del alto disponible: son verticales 9:16 */
grid-auto-columns:clamp(150px, calc(50dvh * 9 / 16), 300px);
gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
/* Sin barra de scroll: la afordancia son las flechas. El contenedor sigue
siendo desplazable con dedo, trackpad y teclado. */
scrollbar-width:none;
overscroll-behavior-x:contain;
}
.videos__grilla::-webkit-scrollbar{display:none}
.videos__grilla:focus-visible{outline:3px solid var(--blanco);outline-offset:4px}
.video-card{scroll-snap-align:start}
.video-card__medio{
aspect-ratio:9/16;max-height:50dvh;background:var(--violeta-spray);
display:flex;align-items:center;justify-content:center;
font:600 var(--t-xs)/1 var(--titulo);text-transform:uppercase;
letter-spacing:.1em;color:var(--violeta-osc);
position:relative;
}
/* El reel llena su tarjeta. `preload="none"`: hasta que alguien toca play solo
viaja el poster, asi 25 videos no pesan nada al cargar la pagina. */
.video-card__medio video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.video-card__prov{
margin:.7rem 0 0;
font:700 var(--t-s)/1 var(--titulo);
text-transform:uppercase;letter-spacing:.08em;
/* blanco, no violeta: esta sección ahora tiene fondo oscuro con malla */
color:var(--blanco);
}
/* =========================================================================
MAPA — es el protagonista, así que cambia el fondo entero
========================================================================= */
/* Titulo y bajada en dos columnas: come menos alto, que es justo lo que hace
falta ahora que el titulo vive DENTRO de la seccion del mapa y comparte
pantalla con las referencias y el panel. */
.mapa__cabecera{
display:grid;gap:.4rem clamp(1.5rem,4vw,3.5rem);
grid-template-columns:1fr;align-items:end;
margin-bottom:clamp(.6rem,1.5vh,1.2rem);
}
@media (min-width:900px){
.mapa__cabecera{grid-template-columns:auto 1fr}
/* Arriba y no abajo: alineada al pie del título quedaba hundida contra la
segunda línea y se leía como una nota al pie. Arrancando a la altura de
la primera línea las dos frases entran juntas. */
.mapa__cabecera .seccion__bajada{
align-self:start;
padding-top:.35em;
font-size:clamp(1.05rem,1.45vw,1.5rem);
}
}
.mapa__cabecera .seccion__bajada{color:var(--violeta-spray)}
.mapa__figura{margin:0;display:block;position:relative;z-index:1}
/* La columna del mapa. El tope va en la regla base y no solo dentro de la
grilla: abajo de 1024px no hay dos columnas, y sin esto el mapa se estiraba
a todo el ancho disponible —831px de ancho por 2436 de alto en una tablet,
o sea tres pantallas de mapa. */
.mapa__columna{width:min(100%, var(--ancho-mapa));margin-inline:auto}
@media (min-width:900px){
/* Entre 900 y 1024px todavia no hay dos columnas: la muestra va sola, a lo
ancho, y el mapa debajo. El tope evita renglones larguisimos. */
.mapa__figura{max-width:min(100%, 640px)}
}
.mapa__lienzo{
/* SIN z-index a proposito. Un z-index aca crearia contexto de apilamiento
y encerraria a las chinches por debajo de las mitades de la seccion, que
es lo que las volvia imposibles de clickear.
Se descubrio con elementFromPoint; probarlas con .click() por codigo NO
lo detecta, porque saltea la deteccion de que elemento esta encima. */
/* `relative` y no `absolute`: el mapa es una COLUMNA de la grilla, no una
capa flotando por encima de la seccion. Asi esta vista muestra solo
muestra + mapa, y el ancho del mapa no depende del alto de la pantalla. */
position:relative;
width:100%;
/* La proporcion del dibujo del mapa. Si no coincide con el viewBox del
SVG, el SVG se centra dentro de su caja y TODAS las chinches quedan
desalineadas. */
aspect-ratio:1065/2199;
pointer-events:none; /* solo las chinches reciben clicks */
}
.mapa__svg{
width:100%;height:auto;display:block;
/* La Antartida se dibuja DEBAJO del lienzo: el viewBox es solo el
sector continental, para que las chinches y la proyeccion no cambien, y el
hielo asoma porque el SVG no recorta lo que queda afuera.
Por eso el esfumado del sur vive adentro del SVG, en el degradé
`g-antartida`, y no en una mascara: una mascara recortaria todo lo que
cae fuera de la caja del elemento. */
overflow:visible;
}
/* El sector antartico: mismo violeta que las provincias y el mismo borde de
papel, los dos en degradé hacia transparente (vienen en el SVG). Es
textura de fondo, no un territorio para leer: queda debajo de los videos. */
.mapa-antartida{pointer-events:none}
.antartida{stroke-width:2.6;stroke-linejoin:round}
/* Abajo de 1024px la ficha va justo debajo del mapa, asi que el hielo queda
detras del texto blanco y el contraste se rompe. Ahi va mas transparente;
en escritorio cae debajo de los videos y queda como esta. */
@media (max-width:1023.98px){.mapa-antartida{opacity:.3}}
/* El recuadro de Georgias y Sandwich del Sur, fuera de escala. Marco fino en
el violeta del salpicado: dice «esto es un recorte», no «esto es un mar». */
.mapa-recuadro__marco{fill:none;stroke:var(--violeta-spray);stroke-width:2;stroke-opacity:.75}
.prov--isla{stroke-width:1.2}
/* --- Provincias -------------------------------------------------------
TODAS DEL MISMO COLOR. El relleno no distingue una provincia de otra ni
marca las que tienen muestra: la informacion la dan solo las chinches, que
es donde tiene que estar.
Con un relleno unico, el LIMITE pasa a ser estructura y no adorno: es el
papel del sitio, opaco y grueso. Leido de lejos, el mapa se ve como un
rompecabezas de piezas despegadas. */
.prov{
fill:#8348b8;
stroke:var(--papel);
stroke-width:2.6;
stroke-linejoin:round;
}
/* Contorno exterior del pais: una copia de todas las provincias por debajo,
con un trazo mas grueso. Los limites internos quedan tapados por los
rellenos que se pintan encima, asi que de este trazo solo asoma el borde de
afuera. Sin esto, un mapa de un solo color se pega al fondo violeta de la
seccion y pierde silueta. */
.mapa-contorno{
fill:none;
stroke:var(--papel);
stroke-width:7;
stroke-linejoin:round;
stroke-opacity:.30;
pointer-events:none;
}
/* --- Rotulos de provincia ---------------------------------------------
Vienen en el SVG del mapa: cada nombre se probo contra la silueta de su
provincia (decision de diseno: sin lineas guia ni nombres al costado). Las
chicas llevan un cuerpo menor, en el propio .
El cuerpo va en unidades del lienzo, asi que escala con el mapa. Llevan
`aria-hidden` desde el SVG: el nombre accesible de cada provincia lo da el
de su <path>, y duplicarlo haria que un lector de pantalla lo diga
dos veces. */
/* En celular el mapa mide 280px de ancho, o sea que se dibuja a poco mas de
un cuarto de su lienzo: los nombres quedarian en ~7px y no se leen, asi
que se ocultan.
Los nombres siguen disponibles en el <title> de cada provincia y en la ficha
de la muestra. */
@media (max-width:1023px){
.mapa-rotulos{display:none}
}
/* Los chicos (Tucuman, Misiones, Tierra del Fuego, Salta) llevan su cuerpo
en el propio <text>. Con el trazo del grande se empastarian. */
.prov-rotulo--chico{stroke-width:2.2}
.prov-rotulo--recuadro{fill:var(--violeta-spray);stroke:none;font-weight:700;letter-spacing:.02em}
.prov-rotulo{
font:600 26px var(--titulo);
fill:var(--papel);
paint-order:stroke;
stroke:#5a1d84;
stroke-width:3.5;
stroke-linejoin:round;
pointer-events:none;
}
/* Marginalia: olitas, montañitas, estrellas y rosa de los vientos.
Decoración pura, ya viene con aria-hidden desde el SVG. */
.mapa-deco{color:var(--violeta-spray);opacity:.42;pointer-events:none}
.mapa-deco .rosa{opacity:.85}
/* --- Chinches ---------------------------------------------------------
Son <button> reales encima del mapa, NO formas del SVG.
44x44 de area tactil: cumple el criterio 2.5.8 (AA) por si mismo.
El punto visible es mas chico; el que tiene que ser grande es el boton. */
/* Dos capas separadas a proposito:
- el DIBUJO del mapa queda por DEBAJO de las mitades, para que el sector
antartico pase por detras de las tarjetas de video
- las CHINCHES van por ENCIMA, para que se puedan clickear
Funciona porque .mapa__lienzo no crea contexto de apilamiento. */
.mapa__chinches{position:absolute;inset:0;z-index:3;pointer-events:none}
.chinche{
position:absolute;transform:translate(-50%,-50%);
/* 26x26: el minimo del criterio 2.5.8 (AA) es 24x24. Los 44x44 que habia
antes son el umbral del criterio AAA 2.5.5, que no es el objetivo
y con 42 chinches amontonaba todo. */
width:26px;height:26px;padding:0;margin:0;
display:grid;place-items:center;
background:none;border:none;cursor:pointer;pointer-events:auto;
}
/* `hidden` tiene que ganarle al `display:grid` de arriba. Sin esto, las
chinches absorbidas por un grupo se seguian dibujando en su lugar real:
casi todas quedaban tapadas por su pastilla, pero las que estaban unos
pixeles corridas asomaban como puntos sueltos. */
.chinche[hidden]{display:none}
.chinche__punto{
width:11px;height:11px;background:var(--blanco);
filter:drop-shadow(0 1px 2px rgba(0,0,0,.75));
transition:transform .14s,background .14s;
}
.chinche:hover .chinche__punto,
.chinche:focus-visible .chinche__punto{transform:scale(1.8);background:var(--violeta-spray)}
/* --- Chinche de grupo ---------------------------------------------------
Muestra cuantas muestras hay amontonadas ahi. Es un boton normal, no un
interruptor: no lleva aria-pressed. */
.chinche--grupo{
width:auto;min-width:30px;height:30px;padding-inline:.42rem;
border-radius:999px;
background:var(--blanco);color:var(--tinta);
border:2px solid var(--violeta);
font:700 var(--t-xs)/1 var(--titulo);
box-shadow:0 2px 5px rgba(0,0,0,.55);
transition:transform .14s,background .14s;
}
.chinche--grupo:hover,
.chinche--grupo:focus-visible{transform:translate(-50%,-50%) scale(1.14);background:var(--violeta-spray)}
/* --- El grupo abierto ---------------------------------
Halo, hilos y rotulos. Para salir: la X que queda en el lugar del numero,
tocar afuera o Escape. */
.mapa__abanico{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Halo OSCURO: tapa las lineas y los nombres de provincia que quedan abajo,
y asi lo blanco del abanico (hilos, chinches, rotulos) salta. Un halo claro
se mezclaria con el dibujo del mapa. */
.mapa__halo{
fill:var(--violeta-osc);fill-opacity:.88;
stroke:var(--blanco);stroke-opacity:.9;stroke-width:1.5;stroke-dasharray:4 4;
}
.mapa__hilo{stroke:var(--blanco);stroke-width:1.8}
.mapa__real{fill:var(--blanco)}
.mapa__abanico.es-nuevo .mapa__halo{transform-box:fill-box;transform-origin:center;animation:halo-sale .28s cubic-bezier(.2,.8,.3,1.15)}
.mapa__abanico.es-nuevo .mapa__hilo{animation:hilo-sale .28s ease-out}
@keyframes halo-sale{from{transform:scale(0)}}
@keyframes hilo-sale{from{opacity:0}}
.chinche.en-abanico{
/* Cada chinche del abanico sobre su propio disco, como en el boceto: la
forma blanca no depende de lo que tenga abajo. */
background:var(--violeta);border:2px solid var(--blanco);border-radius:50%;
box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.chinche.en-abanico .chinche__punto{filter:none}
.chinche.en-abanico{transition:left .28s cubic-bezier(.2,.8,.3,1.15),top .28s cubic-bezier(.2,.8,.3,1.15)}
.chinche--grupo.es-abierto{min-width:26px;height:26px;padding-inline:0;font-size:.8rem}
/* Con un grupo abierto, el abanico va por encima de todo y el resto de las
chinches se atenua: se ve cual esta abierto y nada le tapa un rotulo. */
.chinche.en-abanico,.chinche--grupo.es-abierto{z-index:5}
.hay-grupo-abierto .chinche:not(.en-abanico):not(.es-abierto){opacity:.35}
/* Y quedan AISLADAS: con un grupo abierto, las de afuera no se tocan. Un
rotulo del abanico caia encima de la chinche de Cordoba y el clic en
«Victoria» abria Cordoba. Tocar donde estaba una de afuera cierra el grupo,
igual que tocar el mapa. Con teclado siguen alcanzables. */
.hay-grupo-abierto .chinche:not(.en-abanico):not(.es-abierto){pointer-events:none}
.hay-grupo-abierto .chinche:not(.en-abanico):not(.es-abierto):focus-visible{opacity:1}
/* El rotulo: la ciudad, o la sede si son todas de la misma ciudad. Blanco
sobre el violeta, como el globo, pero sin mayusculas para que entre. */
.chinche__rotulo{
position:absolute;left:calc(100% + 2px);top:50%;translate:0 -50%;
display:none;
background:var(--blanco);color:var(--tinta);
font:600 var(--t-xs)/1.2 var(--titulo);letter-spacing:.02em;
padding:.18rem .42rem;white-space:nowrap;
max-width:22ch;overflow:hidden;text-overflow:ellipsis;
box-shadow:0 2px 6px rgba(0,0,0,.45);
/* Recibe clics: esta adentro del boton, asi que tocar el nombre abre esa
muestra. Con `none` el clic lo atravesaba y caia en lo que hubiera abajo. */
pointer-events:auto;cursor:pointer;
}
.chinche.en-abanico .chinche__rotulo{display:block}
.chinche.rotulo-izquierda .chinche__rotulo{left:auto;right:calc(100% + 2px)}
/* En el abanico manda el rotulo y el globo del titulo no aparece. Al reves
-esconder el rotulo al pasar el mouse- era una trampa: el rotulo se
escondia debajo del cursor, dejaba de recibir el clic y este caia en lo
que hubiera abajo (tocabas «Victoria» y se abria Cordoba). */
.chinche.en-abanico .chinche__globo{display:none}
/* al pasar por encima la chinche se pone por delante de sus vecinas */
.chinche:hover,.chinche:focus-visible{z-index:3}
/* --- Las 4 formas = los 4 tipos de la leyenda de la maqueta ------------
La forma, no el color, es lo que distingue el tipo. Eso satisface el
criterio 1.4.1 (Uso del color) y funciona en escala de grises.
El tipo va ADEMÁS en el aria-label, porque la forma un lector no la ve. */
/* --- Compensacion optica de las cuatro formas ---------------------------
Con la MISMA caja no pesan lo mismo: sobre su cuadrado, el circulo rellena
el 79%, el rombo el 100% (y ademas su diagonal lo estira), el triangulo el
50% y la estrella apenas el 38%. Iguales en pixeles, la estrella se ve la
mitad de grande — y con el mapa acercado se nota mas todavia.
Se igualan por AREA, no por lado. A la estrella se le da ademas un poco
mas: sus puntas son finas y se pierden antes que un borde recto. */
.chinche--circulo .chinche__punto{border-radius:50%}
.chinche--rombo .chinche__punto{width:10px;height:10px;rotate:45deg;border-radius:2px}
.chinche--triangulo .chinche__punto{
width:14px;height:13px;
clip-path:polygon(50% 0,100% 100%,0 100%);
}
.chinche--estrella .chinche__punto{
width:17px;height:17px;
clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
/* Globo con el titulo. Aparece en hover Y en foco: si solo apareciera en
hover, quien navega con teclado nunca lo veria. */
.chinche__globo{
position:absolute;bottom:calc(100% - 4px);left:50%;translate:-50% 0;
background:var(--blanco);color:var(--tinta);
font:600 var(--t-xs)/1.25 var(--titulo);
text-transform:uppercase;letter-spacing:.05em;
padding:.4rem .6rem;white-space:nowrap;max-width:44vw;
overflow:hidden;text-overflow:ellipsis;
opacity:0;visibility:hidden;transition:opacity .14s;
box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:2;
}
.chinche:hover .chinche__globo,
.chinche:focus-visible .chinche__globo{opacity:1;visibility:visible}
/* =========================================================================
MAPA + VIDEOS — una sola seccion de dos pantallas
NO es apilable: una seccion apilable de 200vh solo mostraria su primera
pantalla, porque queda pegada arriba. Asi se scrollea normal.
========================================================================= */
.mapa-videos{
position:relative;
padding:0;
/* Malla que se ilumina hacia abajo: arriba, donde esta el mapa, queda
oscuro para que las chinches resalten; hacia el sur de la Antartida se
abre en violetas mas luminosos.
Verificado: el blanco sobre el tono mas claro de la base (#6b4a9e) da
6,78:1, holgado sobre el 4,5:1 que pide el criterio 1.4.3 (AA). */
/* Toda la seccion es VIOLETA, no gris azulado. Antes arrancaba en #1a1620,
que es casi negro y rompia la familia del logo.
Ahora arranca en #24073d: un violeta mas OSCURO que el de marca (#5c0f8b)
y de la misma familia. Empezar por debajo del violeta del logo es lo que
garantiza el contraste: blanco sobre #24073d da 15,9:1, muy holgado sobre
el 4,5:1 que pide el criterio 1.4.3 (AA), y deja lugar para que la malla
aclare hacia abajo sin acercarse nunca al limite. */
/* NINGUNA luz de la malla llega al borde de arriba, y es a proposito.
La primera estaba centrada en `12% 5%`: con un radio vertical del 24% eso
la hacia asomar en y=0 con casi un 30% de opacidad, justo del lado
izquierdo. Arriba quedaba una franja aclarada contra un separador de
color plano, y la juntura se veia como una linea.
Ahora cada luz esta lo bastante abajo como para no aportar nada en y=0
—distancia al borde mayor que su radio— y el degradado de base se queda
PLANO en `#24073d`, exactamente el color del separador, durante el primer
12%. Recien despues empieza a abrir. Asi el borde rasgado y la seccion
son literalmente el mismo color donde se tocan. */
background:
radial-gradient(58% 20% at 12% 26%, rgba(124,32,178,.40), transparent 72%),
radial-gradient(46% 18% at 88% 34%, rgba(168,120,214,.13), transparent 70%),
radial-gradient(66% 26% at 26% 66%, rgba(122,26,182,.52), transparent 74%),
radial-gradient(72% 30% at 82% 82%, rgba(138,40,200,.44), transparent 72%),
radial-gradient(90% 34% at 46% 104%, rgba(150,52,214,.48), transparent 74%),
/* Abajo cierra con el violeta de marca aclarado, no con un lavanda
grisado: mantiene la familia del #5c0f8b.
Blanco sobre #7818b4 da 8,11:1, tambien holgado sobre el 4,5:1. */
linear-gradient(to bottom,
#430f63 0%, #430f63 12%, #4b1172 38%, #571484 60%, #66169c 83%, #7818b4 100%);
color:var(--blanco);
/* `clip` en horizontal y `visible` en vertical, y no `overflow:hidden`.
El recorte horizontal es lo unico que hace falta —que el mapa no genere
barra lateral—; con `hidden` tambien se recortaba hacia arriba y se comia
el borde rasgado, que por definicion asoma 26px POR ENCIMA de la seccion
para morder la seccion anterior. */
overflow:clip visible;
/* El borde rasgado se pinta con `--color-seccion`, asi que tiene que ser el
MISMO tono con el que arranca el degradado. Antes era casi negro y el
recorte se leia como una franja pegada encima en vez de como el filo de
la seccion. */
--color-seccion:#430f63;
/* Medidas del mapa, definidas UNA sola vez. Las usan el lienzo (que se
posiciona con ellas) y el calculo del espacio libre a su izquierda: si
estuvieran repetidas, cambiar el tamaño del mapa desalinearia la columna.
El ancho se mide en ALTURA de ventana, no en pixeles fijos, para que entre
igual en una laptop de 14 pulgadas con la barra de Windows comiendo alto.
Bajo de 56dvh a 50dvh porque ahora el mapa arranca debajo de la banda de
encabezado: con el ancho anterior el extremo sur se pasaba de la seccion
y se derramaba sobre «quiénes somos». */
/* Ancho del mapa, ahora libre.
Mientras el mapa era una capa flotante que cruzaba a la mitad de videos,
su ancho no lo decidia el espacio horizontal sino el vertical: entonces
era 2,93 veces mas alto que ancho (hoy es 2,06, sin Antartida), asi que
habia que calcular cuanto alto le
sobraba a dos pantallas y dividir. Daba 358px y no habia forma de
agrandarlo sin que el extremo sur asomara sobre «quiénes somos».
Al pasar a ser una columna de verdad, la seccion crece con el y ese techo
desaparece: el ancho se elige por diseño y no por geometria. */
/* El ancho del mapa y su separacion se declaran UNA sola vez, en `:root`
(al final del archivo). Tenerlos dos veces hacia que el despeje del texto
se desalineara del mapa en cuanto uno de los dos cambiara. */
}
.mapa-videos__mitad{
min-height:min(100dvh, max(560px, 94dvh));
display:flex;flex-direction:column;justify-content:center;
padding:var(--seccion-y) var(--gap);
position:relative;z-index:1;
}
/* Se apunta por id: `:first-of-type` no servia porque el primer <div>
hermano es .mapa__lienzo, no la mitad del mapa. */
#mapa.mapa-videos__mitad{
/* SIN el alto de la cabecera sumado acá.
Estaba para que el título no quedara debajo de la barra pegajosa, pero era
un despeje duplicado: el aterrizaje del ancla ya lo resuelve el
`scroll-padding-top` del documento, que es quien decide dónde frena el
scroll. Este padding sólo agregaba 89px de aire —el alto exacto de la
barra— que con la barra auto-oculta se ve como un hueco vacío justo
debajo del borde rasgado.
No baja de ~2,6rem porque el borde rasgado mete dientes hasta 26px dentro
de la sección: menos que eso y el título queda mordido por el filo. */
padding-top:clamp(2.6rem,6vh,4.2rem);
padding-bottom:clamp(.9rem,2.2vh,2rem);
justify-content:flex-start;
}
/* Espacio libre a la IZQUIERDA del mapa. El mapa esta posicionado contra el
borde derecho, asi que este calculo —su ancho, mas su separacion del borde,
mas un respiro— es lo que puede ocupar el contenido sin pisarlo nunca.
Lo comparten la cabecera, las referencias y el panel: una sola cuenta, un
solo lugar donde corregirla. */
/* LAS DOS COLUMNAS: la muestra y el mapa.
La seccion no mide una pantalla exacta: mide lo que mide el mapa, que es
mas alto que la ventana a proposito. Obligarlo a entrar en una pantalla lo
dejaria en ~150px de ancho y las chinches serian intocables.
A cambio, mientras se recorre el mapa no aparece nada de las otras
secciones, que es justo lo que se busca. El titulo y la ficha lo acompañan
de punta a punta: ver «LA SECCION DEL MAPA» al final del archivo. */
#mapa.mapa-videos__mitad{min-height:0}
/* La mitad de videos arranca arriba, no centrada: asi el titulo sube y
ocupa el costado del sector antartico en vez de dejar un hueco. */
/* Es destino de ancla y la barra queda pegada arriba, asi que necesita su
propio despeje: sin esto el titulo aterriza 3px debajo de la barra —lo
marca una prueba de scroll, criterio 2.4.11. */
.mapa-videos__mitad.videos{
justify-content:flex-start;
/* Con el titulo a 89px -el alto exacto de la barra- el test de anclas lo
daba por bueno, pero quedaba al ras. Un poco mas de aire. */
padding-top:clamp(2.4rem,6vh,4rem);
scroll-margin-top:0;
}
.mapa-videos__mitad.videos .seccion__interior{position:relative;z-index:1}
/* Los videos a TODO el ancho, encima del hielo. El interior suelta
el tope de 1240px y el carrusel corre de borde a borde de la seccion. */
.mapa-videos__mitad.videos .seccion__interior{max-width:none}
.mapa-videos__mitad.videos{padding-bottom:clamp(4rem,12vh,8rem)}
/* En el celular ese aire quedaba como un bloque violeta vacio. */
@media (max-width:719px){.mapa-videos__mitad.videos{min-height:0;padding-bottom:2.5rem}}
/* Los videos van a todo el ancho: el mapa vive adentro de su propia seccion,
que termina antes. */
.mapa-videos .seccion__titulo{color:var(--blanco)}
/* --- La cola del mapa -----------------------
La Antartida no ocupa lugar en la pagina (esta afuera del viewBox) y se
pinta sobre la mitad de los videos, que vienen despues en el documento y
por eso quedan encima. Sin margenes negativos que dependan de la
proporcion exacta del mapa. */
@media (min-width:1024px){
#mapa.mapa-videos__mitad{padding-bottom:clamp(1.5rem,4vh,3rem)}
}
/* =========================================================================
SUMATE: la campaña en numeros, que se cuentan solos
Tres cifras grandes en la letra del logo, sobre el salpicado del manifiesto
(el mismo mosaico), una pregunta y un boton que baja a Recursos. Los
numeros cuentan de 0 al aparecer (mapa.js, CIFRAS).
========================================================================= */
.sumate{--color-seccion:var(--papel);text-align:center;padding-block:calc(var(--seccion-y) * 1.3)}
.sumate__cifras{
list-style:none;margin:0 auto;padding:0;max-width:60rem;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
}
.sumate__cifras li{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.sumate__numero{
font:400 clamp(3.2rem,2rem + 5vw,6.5rem)/.85 var(--display);
color:var(--violeta);font-variant-numeric:tabular-nums;
transform:rotate(var(--inclina));
}
.sumate__que{
font:700 clamp(.85rem,.75rem + .4vw,1.1rem)/1 var(--titulo);
text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-media);
}
.sumate__invita{
font:600 var(--t-l)/1.2 var(--titulo);color:var(--tinta);
margin:clamp(1.8rem,5vh,3rem) 0 1rem;
}
.sumate__boton,
.is-style-marca .wp-block-button__link{
display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
padding:.7rem 1.4rem;border:1.5px solid var(--violeta);
font:700 var(--t-s)/1 var(--titulo);text-transform:uppercase;letter-spacing:.09em;
color:var(--violeta);text-decoration:none;
transition:background-color .18s,color .18s;
}
.sumate__boton:hover,
.is-style-marca .wp-block-button__link:hover{background:var(--violeta);color:var(--blanco)}
/* En el celular siguen en UNA fila: apiladas ocupaban media
pantalla. Lo que se ajusta es la etiqueta, para que «localidades» entre en
su tercio. */
@media (max-width:540px){
.sumate__cifras{gap:.5rem}
.sumate__que{font-size:.72rem;letter-spacing:.06em}
}
/* --- El contador del menu (.opcion-2) ---------------------------
Chiquito, al estilo «● REC»: un punto que late lento -una vez cada cuatro
segundos, no un parpadeo- y el numero. Solo en la variante `.opcion-2` y en pantallas
anchas: en el celular la fila del menu ya va justa. Texto en lila claro y no
en el violeta del salpicado, que sobre la banda no llega al contraste. */
.cabecera__contador{display:none}
@media (min-width:900px){
.opcion-2 .cabecera__contador{
display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;
font:700 .72rem/1 var(--titulo);text-transform:uppercase;letter-spacing:.1em;
color:#e6dcf0;text-decoration:none;white-space:nowrap;
}
}
.cabecera__punto{
width:.55rem;height:.55rem;border-radius:50%;background:var(--violeta-spray);
animation:punto-late 4s ease-in-out infinite;
}
@keyframes punto-late{0%,100%{opacity:1}50%{opacity:.25}}
.cabecera.es-clara .cabecera__contador{color:var(--violeta)}
/* --- Variante `.opcion-1`: el contador al lado del titulo -------------------
En la misma linea que «Mapa federal», sin el trazo: ocupa menos alto. */
.opcion-1 #mapa .mapa__cabecera{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.2rem 1.2rem;margin-bottom:clamp(1.2rem,3vh,2rem)}
.opcion-1 #mapa .mapa__cabecera .seccion__titulo{margin-bottom:0;font-size:clamp(2.2rem,1.2rem + 2.3vw,3.6rem)}
.opcion-1 #mapa .mapa__cabecera{flex-wrap:nowrap}
.opcion-1 .mapa__contador{margin:0;padding-top:0}
.opcion-1 .mapa__contador::before{display:none}
/* Las referencias pasan al rincon de arriba a la derecha del mapa,
como la referencia de un mapa impreso, en la letra de los parrafos y en
minuscula (al lado del titulo, en la letra de los titulos,
hacian ruido). El encabezado se «disuelve» en la grilla (`display:contents`)
para que la leyenda pueda ir a la celda del mapa. Solo en escritorio. */
@media (min-width:1024px){
#mapa .mapa__encabezado{display:contents}
#mapa .mapa__cabecera{grid-area:encabezado;margin-bottom:clamp(1.2rem,3vh,2rem)}
#mapa .mapa__encabezado .mapa__leyenda{
grid-area:mapa;justify-self:end;align-self:start;
/* Corrida al margen derecho: en su lugar natural la ultima referencia caia
sobre la punta de Misiones. */
position:relative;z-index:4;margin:-1.5rem calc(-1 * clamp(.5rem,2.5vw,3rem)) 0 0;
border:0;padding:0;width:auto;max-width:15rem;
}
#mapa .mapa__leyenda-titulo{
font:600 .72rem/1 var(--cuerpo);text-transform:none;letter-spacing:.02em;
color:var(--violeta-spray);margin-bottom:.3rem;
}
#mapa .mapa__encabezado .leyenda{flex-direction:column;flex-wrap:nowrap;gap:.1rem}
#mapa .mapa__encabezado .leyenda__item{
font:400 .74rem/1.15 var(--cuerpo);text-transform:none;letter-spacing:0;color:#e6dcf0;
white-space:nowrap;gap:.4rem;
}
#mapa .mapa__encabezado .leyenda__forma{width:12px;height:12px}
/* La forma de adentro trae el tamaño de la chinche del mapa: se escala. */
#mapa .mapa__encabezado .leyenda__forma .chinche__punto{scale:.6}
}
/* =========================================================================
DESCARGAS: el kit y la marca para armar la muestra en cada lugar
Dos tarjetas grandes, todas enteras clickeables, con el nombre en la letra
del logo y el detalle debajo. La flecha se corre al pasar, como el enlace de
contacto: es el mismo gesto de «esto te lleva a otro lado».
========================================================================= */
.descargas{--color-seccion:var(--papel-claro);padding-bottom:calc(var(--seccion-y) * 1.4)}
.descargas .seccion__titulo{color:var(--violeta)}
.descargas__sobretitulo{
margin:0 0 .5rem;
font:700 var(--t-xs)/1 var(--titulo);
text-transform:uppercase;letter-spacing:.16em;color:var(--violeta);
}
.descargas__bajada{font:600 var(--t-l)/1.2 var(--titulo);color:var(--tinta-media);max-width:36ch}
/* El nombre de la campaña, en violeta: se distingue del resto de la frase. */
.descargas__marca{color:var(--violeta)}
.descargas__lista{
list-style:none;margin:clamp(1.4rem,4vh,2.4rem) 0 0;padding:0;
display:grid;gap:var(--gap);grid-template-columns:1fr;
}
@media (min-width:720px){.descargas__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
.descarga{
/* Solo contorno: rellenas de violeta pesaban demasiado. Al
pasar, el fondo se tiñe apenas y la flecha se corre. */
display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:end;
padding:clamp(1rem,2.4vw,1.6rem);min-height:44px;
background:transparent;color:var(--violeta);text-decoration:none;
border:1.5px solid var(--violeta);
transition:background-color .18s;
}
.descarga:hover{background:rgba(92,15,139,.06)}
.descarga__nombre{font:400 var(--t-l)/1 var(--display);text-transform:uppercase;grid-column:1}
.descarga__detalle{font:500 var(--t-s)/1.35 var(--titulo);color:var(--tinta-media);grid-column:1}
.descarga__ir{grid-column:2;grid-row:1 / span 2;font-size:1.5rem;transition:translate .16s}
.descarga:hover .descarga__ir,.descarga:focus-visible .descarga__ir{translate:.4rem 0}
.descarga:focus-visible{outline-color:var(--violeta);box-shadow:0 0 0 6px var(--papel)}
/* =========================================================================
QUIÉNES SOMOS
========================================================================= */
.quienes{--color-seccion:var(--papel)}
/* No se pega arriba: el texto mide mas que una pantalla de 14", y una
seccion pegajosa mas alta que la ventana deja su parte de abajo -el enlace
de contacto- imposible de ver. Fluye como las demas. */
.quienes.seccion--apilable{position:relative}
/* El aire de esta sección se declara, no se hereda.
Venía de `.seccion--apilable`, que le da alto de pantalla y CENTRA el
contenido. Como el texto es corto, el sobrante se repartía mitad arriba y
mitad abajo: los 134px de padding eran sólo la mitad del aire sobre el
título; la otra mitad era el centrado. Por eso se veía tanto arriba.
Acá el contenido arranca arriba y los dos paddings son explícitos, así el
aire es el que se decide y no el que sobra. */
@media (min-width:1024px){
.quienes.seccion--apilable{
justify-content:flex-start;
min-height:0;
/* El despeje de la barra NO puede ser menor que su alto: la sección es
pegajosa, así que mientras está fijada arriba lo que caiga en los
primeros 89px queda por debajo de la barra.
El título va en Anton con la inclinación de marca, y su caja se infla
21px hacia arriba respecto de donde arrancan las letras: el despeje se
calibró contra la caja REAL del texto, medida con un Range, no contra la
caja del elemento. */
padding-top:calc(var(--alto-cabecera-total) + clamp(2rem,4.5vh,3.2rem));
/* Aire generoso antes del pie. */
padding-bottom:clamp(8rem,22vh,13rem);
}
}
/* Dos columnas: el texto lee, el logo firma. Apilados peleaban entre sí,
porque el logo de la Red ya es un bloque de display y competía con el
título en Anton. */
.quienes__grilla{
display:grid;gap:clamp(1.6rem,4vw,3.5rem);
grid-template-columns:1fr;align-items:center;
margin-top:clamp(1.2rem,3vh,2rem);
}
@media (min-width:820px){
.quienes__grilla{grid-template-columns:1.15fr .85fr}
}
/* El texto va en el cuerpo normal: en --t-l se volveria una pared de texto. */
.quienes__texto{max-width:60ch;font-size:var(--t-m);line-height:1.6}
.quienes__texto p{margin:0}
/* En el celular, la misma letra que el manifiesto y la ficha. */
@media (max-width:719.98px){.quienes__texto{font-size:var(--t-s)}}
.quienes__texto p + p{margin-top:1rem}
.quienes__logo{width:min(400px,100%);height:auto;display:block;justify-self:end}
.quienes__contacto{margin:1.6rem 0 0}
/* Enlace con flecha. La flecha se corre al pasar y al enfocar. */
.enlace-flecha{
display:inline-flex;align-items:center;gap:.55rem;
font:700 var(--t-s)/1 var(--titulo);
text-transform:uppercase;letter-spacing:.09em;
color:var(--violeta);text-decoration:none;
padding:.5rem 0;min-height:44px; /* 2.5.8: area de toque suficiente */
border-bottom:2px solid var(--violeta);
}
.enlace-flecha span{transition:translate .16s}
.enlace-flecha:hover span,
.enlace-flecha:focus-visible span{translate:.3rem 0}
@media (max-width:819px){ .quienes__logo{justify-self:start} }
.quienes__texto strong{font-family:var(--titulo);text-transform:uppercase;letter-spacing:.04em}
/* =========================================================================
PIE
========================================================================= */
/* El pie es lo ultimo que llega, asi que rasga hacia arriba sobre el
contenido — mismo criterio que las secciones: el que llega rasga. */
.pie{
--color-seccion:var(--tinta);
position:relative; /* el ::before rasgado se posiciona contra esto */
background:var(--tinta);color:var(--papel);
padding:clamp(2.4rem,6vh,4rem) var(--gap) clamp(2rem,5vh,3.5rem);
}
.pie__interior{
max-width:var(--ancho);margin-inline:auto;
display:flex;flex-wrap:wrap;gap:var(--gap);
justify-content:space-between;align-items:flex-end;
}
/* Solo el logo y el correo: las redes, el hashtag y la firma se sacaron.
Logo a la izquierda, correo a la derecha; en el celular, uno
abajo del otro. */
.pie__interior{align-items:center}
.pie__logo{width:clamp(150px,16vw,210px);height:auto;display:block}
.pie__correo{margin:0}
/* Un sobre solo, en papel sobre el pie oscuro; 44px de area de toque (2.5.8).
Al pasar, toma el violeta del salpicado. */
.pie__correo a{
display:inline-grid;place-items:center;width:44px;height:44px;
color:var(--papel);transition:color .16s;
}
.pie__correo a:hover,.pie__correo a:focus-visible{color:var(--violeta-spray)}
/* Firma del estudio: una franja propia debajo del pie, aparte de lo que es de
la Red. Mismo formato que el resto de los sitios de Looop.ar: © a la
izquierda, «↗ Hecho en · looop.ar» a la derecha; el prefijo está colapsado y
se abre al pasar o al enfocar. Opacidad .62 y no .45: sobre este fondo, .45
no llega a 4.5:1 (1.4.3). */
.firma{
background:color-mix(in srgb,var(--tinta) 70%,#000);
padding:1rem var(--gap);
color:color-mix(in srgb,var(--papel) 62%,transparent);
}
.firma__interior{
max-width:var(--ancho);margin:0 auto;
display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
font-family:var(--titulo);font-size:var(--t-xs);font-weight:500;
letter-spacing:.22em;text-transform:uppercase;
}
.firma__enlace{color:inherit;text-decoration:none;transition:color .3s;font-size:.75em}
.firma__enlace:hover,.firma__enlace:focus-visible{color:var(--papel)}
.firma__prefijo{
display:inline-block;max-width:0;overflow:hidden;white-space:pre;
vertical-align:bottom;opacity:0;
transition:max-width .35s,opacity .25s;
}
.firma__enlace:hover .firma__prefijo,
.firma__enlace:focus-visible .firma__prefijo{max-width:8em;opacity:1}
@media (prefers-reduced-motion:reduce){
.firma__enlace,.firma__prefijo{transition:none}
}
/* =========================================================================
PANEL DE MUESTRA — al costado del mapa, no modal
========================================================================= */
.muestra{
align-self:start;width:100%;
/* Aca hubo un `overscroll-behavior:contain` y era justamente lo que trababa
la pagina: con el cursor sobre la ficha, la rueda quedaba presa en el
panel aunque no tuviera nada que desplazar, y solo se podia seguir
bajando por el costado del mapa. Sin el, si la ficha
scrollea, al terminar la rueda sigue con la pagina, que es lo esperable. */
/* Sin la barra vertical de la izquierda: con la ficha ancha
y el titulo grande, la pieza ya se lee sola. */
/* El objetivo es que la muestra entre entera sin scrollear, y por eso se
saco el bloque de video y se apretaron los espacios de adentro. Pero el
`auto` se queda igual como red de seguridad: con el texto al 200% —que es
el criterio 1.4.4, nivel AA— o con una ficha muy larga, el contenido
tiene que seguir siendo alcanzable en vez de quedar cortado. */
/* Sin tope propio: abajo de 1024px no hay dos columnas ni panel pegajoso,
asi que el panel fluye con la pagina y no tiene por que scrollear aparte.
El tope y el `overflow` los pone el bloque de escritorio, que es donde el
panel queda fijo al costado del mapa. */
overflow-y:auto;
/* Explicito, y no por omision. `overflow-x` arranca en `visible`, pero
`visible` no puede convivir con un `auto` en el otro eje: el navegador lo
convierte en `auto` y aparece una barra horizontal en el pie del panel por
cualquier hijo que se pase un pixel —la tira de fotos, un titulo largo—.
Ese scroll no lleva a ningun lado y ensucia la ficha.
`hidden` y no `clip`: `clip` tampoco puede convivir con `auto`. */
overflow-x:hidden;
}
/* Estado vacio: GRANDE y en el medio del panel, con una flecha que senala
el mapa. Es lo primero que se ve de la seccion y tiene que
decir que hacer. El panel ya tiene alto propio (min 640px), asi que el
centrado es vertical tambien. */
.muestra:has(> .muestra__vacio:not([hidden])){display:flex;align-items:center;justify-content:flex-end}
/* Pegado a la DERECHA, contra el mapa, y en otra letra que los titulos: con
la display en mayusculas competia con «Mapa federal» y se leia como un
titulo mas. Es una indicacion, no un titulo: condensada, en
minuscula, en el violeta de las etiquetas. */
.muestra__vacio{
display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;
margin:0 0 0 auto;max-width:16ch;text-align:right;
font:500 clamp(1.5rem,2.2vw,2.2rem)/1.15 var(--titulo);
color:var(--violeta-spray);
}
.muestra__vacio[hidden]{display:none}
.muestra__flecha{
width:clamp(90px,9vw,140px);height:auto;
fill:none;stroke:var(--violeta-spray);stroke-width:4;
stroke-linecap:round;stroke-linejoin:round;
animation:flecha-senala 1.6s ease-in-out infinite;
}
@keyframes flecha-senala{50%{transform:translateX(10px)}}
/* En el celular el mapa queda arriba: la flecha apunta para arriba */
@media (max-width:1023px){
/* ARRIBA del mapa y al centro. En el celular el mapa mide mas
que una pantalla: con la indicacion abajo se recorria todo sin saber que
hacer. Mientras no hay muestra abierta, el panel sube antes del mapa; al
abrir una, vuelve abajo, que es donde aparece la ficha. */
.mapa__cuerpo{display:flex;flex-direction:column}
.mapa__cuerpo:has(.muestra__vacio:not([hidden])) .mapa__figura{order:-1;margin-bottom:.8rem}
.muestra:has(> .muestra__vacio:not([hidden])){justify-content:center}
.muestra__vacio{align-items:center;text-align:center;margin:0 auto;max-width:20ch;gap:.3rem}
.muestra__flecha{rotate:90deg;width:48px;margin-left:.4rem} /* debajo del texto, apuntando al mapa */
@keyframes flecha-senala{50%{transform:translateX(8px)}}
}
.muestra__provincia{
/* Aire entre el sobretitulo y el titulo: pegados se leian como una sola
cosa. */
margin:0 0 .85rem;
/* Dos puntos mas chico que `--t-xs`: es el sobretitulo del titulo, tiene que
pesar menos que el. Sostiene el espaciado de letra, que es lo que lo hace
legible a este tamaño. */
font:700 .66rem/1 var(--titulo);
text-transform:uppercase;letter-spacing:.14em;color:var(--violeta-spray);
}
.muestra__titulo{
/* Más grande que `--t-l`: es el título de lo que se está mirando y competía
de igual a igual con la ficha. Sigue por debajo del título de sección,
que es su padre en la jerarquía. */
font:400 clamp(1.6rem,2.5vw,2.5rem)/.95 var(--display);
text-transform:uppercase;
color:var(--blanco);margin:0 0 .7rem;
}
.muestra__titulo:focus-visible{outline-color:var(--blanco)}
/* La ficha va en UNA LÍNEA, con separadores verticales entre los datos.
Apilada en filas —una etiqueta arriba y el valor abajo, por dato— se comía
media columna para tres cosas cortas. Envuelve sola cuando no entra, y el
separador desaparece con ella porque va como borde del propio dato. */
.muestra__ficha{
margin:0 0 .9rem;padding:0;
display:flex;
/* `nowrap`: Cuándo y Dónde se quedan SIEMPRE en la misma fila.
Con `wrap`, en cuanto la suma de los dos no entraba —al agrandar el texto
o con la ventana angosta— se partía la fila ENTERA y «Dónde» bajaba con su
separador colgando a la izquierda, separando de nada.
Ahora, si falta lugar, lo que envuelve es el valor adentro de su celda:
los dos datos siguen leyéndose uno al lado del otro. */
flex-wrap:nowrap;
}
/* `hidden` tiene que ganarle al `display:flex` de arriba. Sin esto, un campo
vacio escondido por mapa.js se seguia viendo: el rotulo «Observaciones»
aparecia solo, sin dato. */
.muestra__ficha[hidden],.muestra__ficha > div[hidden]{display:none}
.muestra__ficha > div{
display:flex;align-items:baseline;gap:.45rem;
padding-inline:.9rem;
/* Obligatorio para que puedan angostarse: un item de flex no baja de su
contenido mínimo mientras `min-width` sea `auto`, y sin esto se desborda
en lugar de envolver. */
min-width:0;
}
.muestra__ficha > div:first-child{padding-left:0}
.muestra__ficha > div + div{border-left:1px solid rgba(255,255,255,.28)}
/* Observaciones: un solo dato, sin separador que separe de nada */
/* Un solo dato: sin separador, porque no tiene con que compartir fila.
Y en FLUJO DE TEXTO, no en columnas: con `display:flex` el valor era una
caja al lado de la etiqueta, asi que al cortar en dos lineas la segunda
quedaba indentada bajo la primera linea del valor. En flujo, la etiqueta es
una palabra mas del parrafo y el texto sigue abajo de ella, como se lee. */
.muestra__ficha--sola > div{display:block;padding-left:0;border-left:0}
.muestra__ficha--sola > div > dt{display:inline;margin:0 .4rem 0 0}
.muestra__ficha--sola > div > dd{display:inline}
/* La etiqueta va en la MISMA letra y el MISMO tamaño que el dato, solo que en
negrita. Antes era versalita condensada con espaciado: se leia como un
rotulo de formulario y competia con el dato en vez de presentarlo. */
.muestra__ficha dt{
font-weight:700;font-size:var(--t-s);
color:var(--violeta-spray);
flex:0 0 auto;margin:0;
}
.muestra__ficha dd{margin:0;font-size:var(--t-s);color:var(--blanco)}
/* Iconos de la ficha. Lineales, con el trazo del color de la etiqueta, y
medidos en `em` para que acompañen al texto si alguien lo agranda.
`stroke` y no `fill`: son de linea, y asi el mismo dibujo sirve sobre
cualquier fondo sin tener que redibujarlo. */
.ficha__icono{
width:1.15em;height:1.15em;flex:0 0 auto;
fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;
/* baja apenas para sentarse sobre la linea de base del texto */
transform:translateY(.16em);
}
/* «Cuándo: … | Dónde: …» en UNA sola línea, sin que ninguno de los dos
envuelva por dentro.
Va con un mínimo de ancho y no siempre: medido, la fila más larga (Mar del
Plata) necesita 533px en una línea y hay 562 disponibles — 29px de margen.
Con el zoom al 120% el ancho disponible baja a ~468 y ya no entra.
Entonces: en una línea cuando hay lugar, y cuando alguien agranda —que es
una necesidad, no un capricho: es el criterio 1.4.4— el valor envuelve por
dentro en vez de desbordarse o cortarse. El zoom cambia el ancho del
viewport, así que la media query reacciona sola. */
/* Cuando y Donde, UNO ABAJO DEL OTRO. En una fila, con sedes
reales como «Facultad de Ciencias Politicas y Sociales, Universidad
Nacional de Cuyo», cada celda se partia en dos o tres renglones y la fecha
quedaba cortada al lado. Apilados, cada dato tiene el ancho entero. */
/* ...y de vuelta EN LA MISMA FILA: con la ficha ancha
entran juntos. Si un lugar es muy largo, baja entero a la fila de abajo en
vez de partirse al lado de la fecha (`wrap`). Sin raya separadora: cuando el
lugar baja, la raya quedaba colgando a la izquierda. Los separa el aire. */
.muestra__ficha:not(.muestra__ficha--sola){flex-direction:row;flex-wrap:wrap;gap:.35rem 1.6rem}
.muestra__ficha:not(.muestra__ficha--sola) > div{padding-inline:0}
.muestra__ficha:not(.muestra__ficha--sola) > div + div{border-left:0}
/* EL TEXTO DE LA MUESTRA: en --t-s porque es el texto completo, no un
resumen. `pre-line` respeta los puntos y aparte de la carga. Plegado
muestra cinco renglones; «Leer mas» lo abre (mapa.js). */
.muestra__descripcion{font-size:var(--t-s);line-height:1.5;color:var(--blanco);white-space:pre-line}
.muestra__texto.es-plegado .muestra__descripcion{
display:-webkit-box;-webkit-box-orient:vertical;
-webkit-line-clamp:5;line-clamp:5;overflow:hidden;
}
.muestra__texto .muestra__descripcion{margin-bottom:.75rem} /* aire hasta «Leer más» */
/* En el celular, un poco mas chico que el manifiesto: blanco
sobre violeta se ve mas grande que tinta sobre papel. Solo abajo de 1024px:
en escritorio manda el factor de achique de la ficha (ajustarFicha). */
@media (max-width:1023px){
.muestra__descripcion,.muestra__observaciones,
.muestra__ficha dt,.muestra__ficha dd{font-size:.85rem}
}
.muestra__texto{margin-bottom:1rem}
/* Boton con «+»: asi se ve que se puede tocar, mas que un link
subrayado. Misma familia que «Muestra anterior / siguiente» (borde fino,
versalitas condensadas) para que la ficha tenga un solo tipo de boton.
Abierto, el «+» pasa a «−»: se dibuja con dos rayas y la vertical se
esconde. 32px de alto, sobre el minimo de 24px del criterio 2.5.8. */
.muestra__leer{
display:inline-flex;align-items:center;gap:.5rem;
min-height:32px;padding:.35rem .8rem;cursor:pointer;
font:700 .72rem/1.2 var(--titulo);text-transform:uppercase;letter-spacing:.08em;
background:transparent;color:var(--blanco);
border:1px solid var(--violeta-spray);
}
.muestra__leer:hover{background:var(--violeta-spray);color:var(--tinta)}
.muestra__leer[hidden]{display:none}
.muestra__leer-signo{position:relative;width:.7rem;height:.7rem;flex:0 0 auto}
.muestra__leer-signo::before,.muestra__leer-signo::after{
content:"";position:absolute;background:currentColor;
}
.muestra__leer-signo::before{left:0;right:0;top:50%;height:2px;margin-top:-1px}
.muestra__leer-signo::after{top:0;bottom:0;left:50%;width:2px;margin-left:-1px}
.muestra__leer[aria-expanded="true"] .muestra__leer-signo::after{display:none}
.muestra__observaciones{font-size:var(--t-s);color:var(--blanco);opacity:.9}
.muestra__subtitulo{
font:700 var(--t-xs)/1 var(--titulo);text-transform:uppercase;
letter-spacing:.12em;color:var(--violeta-spray);margin:.9rem 0 .45rem;
}
/* Tira que SE DESLIZA: una sola fila, siempre.
Antes era una grilla que envolvia, asi que segun cuantas fotos tuviera la
muestra aparecia una segunda fila y el panel cambiaba de alto al pasar de
una muestra a otra.
Deslizar NO es la unica forma de recorrerla, que es lo que pide el criterio
2.5.7: la lista se recorre con el teclado, y como las miniaturas son
botones, al tabular el navegador va desplazando la tira solo. */
.muestra__galeria{
list-style:none;margin:0;padding:0 0 .45rem;
display:flex;gap:.45rem;
overflow-x:auto;
/* que la rueda no siga de largo hacia la seccion al terminarse la tira */
overscroll-behavior-x:contain;
scroll-snap-type:x proximity;
}
/* Miniaturas de 160px de ancho -a 4/3 dan 160x120-. Eran de 7em, ~99x74, y
a ese tamaño no se distinguia que foto era: solo daban textura. Siguen en
carrusel y no en grilla a proposito: hay muestras con muchas fotos, y el
detalle completo lo da el visor al tocar una. */
.muestra__galeria > li{flex:0 0 160px;scroll-snap-align:start}
/* Sin barra de scroll: la afordancia son las flechas, igual que en videos.
El contenedor sigue siendo desplazable con dedo, trackpad y teclado. */
.muestra__galeria{scrollbar-width:none}
.muestra__galeria::-webkit-scrollbar{display:none}
/* Las flechas del carrusel de fotos son las MISMAS que las de videos, solo
que a escala de una tira de miniaturas. */
.carrusel--fotos{margin:0}
.carrusel--fotos .carrusel__flecha{
width:34px;top:50%;
border-width:1px;
}
.carrusel--fotos .carrusel__flecha--anterior{left:6px}
.carrusel--fotos .carrusel__flecha--siguiente{right:6px}
/* Miniatura clickeable. Es un <button>, asi que hay que sacarle los estilos
que el navegador le pone por defecto. */
.muestra__foto{
aspect-ratio:4/3;background:var(--violeta-spray);
width:100%;display:block;padding:0;border:0;cursor:pointer;
overflow:hidden;
transition:transform .16s ease, outline-color .16s ease;
}
/* La foto llena la miniatura sin deformarse: recorta, no estira. */
.muestra__foto img{width:100%;height:100%;object-fit:cover;display:block}
.muestra__foto:hover{transform:scale(1.06)}
/* --- El video en la tira de fotos ------------------------------
Un cuadro mas, con el poster del video y un play encima: se reconoce sin
leer nada. El circulo va en el violeta de marca con borde blanco, como las
chinches del mapa. */
.muestra__foto--video{position:relative}
.muestra__play{
position:absolute;left:50%;top:50%;translate:-50% -50%;
width:44px;height:44px;border-radius:50%;
background:rgba(92,15,139,.85);border:2px solid var(--blanco);
pointer-events:none;
}
.muestra__play::after{
content:"";position:absolute;left:54%;top:50%;translate:-50% -50%;
border-style:solid;border-width:8px 0 8px 13px;
border-color:transparent transparent transparent var(--blanco);
}
video.visor__foto{background:#000}
/* --- Visor de fotos ------------------------------------------------------ */
.visor{
border:0;padding:0;background:transparent;color:var(--blanco);
max-width:min(92vw, 1100px);max-height:92dvh;
}
.visor::backdrop{background:rgba(15,4,26,.86)}
.visor__marco{
display:grid;gap:.8rem;
padding:clamp(1rem,3vw,2rem);
/* Fondo propio y solido, no el `::backdrop`. Apoyarse en el backdrop dejaba
al texto blanco sin una base medible: cualquier auditoria de contraste
—y cualquier navegador que no pinte el backdrop— lo veia sobre nada.
Blanco sobre #2b0846 da 15,3:1. */
background:#2b0846;
border:1px solid var(--violeta-spray);
}
.visor__titulo{
margin:0;font:400 var(--t-m)/1.1 var(--display);
text-transform:uppercase;letter-spacing:.01em;color:var(--blanco);
}
.visor__escenario{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:clamp(.5rem,2vw,1.2rem);
}
/* En el visor la foto entra ENTERA —`contain`, no `cover`—: acá se viene a
mirar la imagen, así que recortarla sería lo contrario de lo que se busca.
El rectángulo liso es la reserva de cuando todavía no hay archivo. */
.visor{--alto-foto:calc(92dvh - 16rem)}
.visor__foto{
/* El alto de la foto es lo que SOBRA del visor (92dvh) despues del titulo,
el contador, Cerrar, el padding y los espacios: unos 16rem. Con un 70dvh
fijo, en pantallas de ~880px de alto la suma pasaba el tope y el visor
sacaba barra de scroll. */
width:100%;max-height:var(--alto-foto);
object-fit:contain;
display:block;margin-inline:auto;
}
/* La reserva mide lo que va a medir una foto real, no lo minimo. El visor
se ajusta a su contenido: una <img> lo estira hasta el tope por su tamaño
propio, pero un div vacio no tiene tamaño propio y el visor quedaba
chiquito. Una foto apaisada 4:3 entra hasta el tope de alto
(--alto-foto) o de ancho (el visor, menos las dos flechas y el aire). */
div.visor__foto{
aspect-ratio:4/3;background:var(--violeta-spray);
width:min(calc(92vw - 12rem), calc(1100px - 12rem), calc(var(--alto-foto) * 4 / 3));
}
.visor__flecha{
width:48px;height:48px;flex:0 0 auto;cursor:pointer;
display:grid;place-items:center;
background:transparent;color:var(--blanco);
border:1px solid var(--violeta-spray);
}
.visor__flecha svg{width:24px;height:24px}
.visor__flecha:hover:not(:disabled){background:var(--violeta-spray);color:var(--tinta)}
/* Desactivado, pero SIN bajarlo a un gris ilegible: el criterio 1.4.3 no
exige contraste en controles inactivos, pero que no se lea para que se
sepa que existe es un mal negocio. */
.visor__flecha:disabled{opacity:.4;cursor:default}
.visor__contador{
margin:0;font:700 var(--t-xs)/1 var(--titulo);
text-transform:uppercase;letter-spacing:.12em;color:var(--violeta-spray);
}
.visor__cerrar{
justify-self:start;min-height:44px;padding:.5rem 1.2rem;cursor:pointer;
font:700 var(--t-xs)/1 var(--titulo);text-transform:uppercase;letter-spacing:.1em;
background:transparent;color:var(--blanco);border:1px solid var(--violeta-spray);
}
.visor__cerrar:hover{background:var(--violeta-spray);color:var(--tinta)}
.visor :focus-visible{outline-color:var(--blanco);box-shadow:0 0 0 6px rgba(15,4,26,.9)}
/* Recorrido entre muestras, en lugar del viejo boton de Cerrar. */
.muestra__paso{
display:flex;flex-wrap:wrap;gap:.5rem;
margin-top:.9rem;padding-top:.7rem;
border-top:1px solid rgba(255,255,255,.22);
}
.muestra__paso-boton{
/* Ya no se estiran a media fila cada uno: miden lo que mide su texto. Son
navegación, no la acción principal del panel, y ocupando todo el ancho
pesaban más que el título.
32px de alto: por encima del mínimo de 24px que pide el criterio 2.5.8
(AA), con margen. */
flex:0 0 auto;
min-height:32px;padding:.35rem .8rem;cursor:pointer;
font:700 .72rem/1.2 var(--titulo);text-transform:uppercase;
letter-spacing:.08em;
background:transparent;color:var(--blanco);
border:1px solid var(--violeta-spray);
}
.muestra__paso-boton:hover{background:var(--violeta-spray);color:var(--tinta)}
/* Pantallas de escritorio BAJAS —una laptop de 14 pulgadas con la barra de
Windows, que es donde se trabaja esto— tienen ancho de sobra y alto justo.
La columna se aprieta un poco para que la muestra entre sin scrollear.
Quedó MUY reducido respecto de lo que era. La mayor parte de este bloque
achicaba tipografías para ganar alto, y esa presión desapareció por dos
cambios de estructura: el mapa pasó a ser una columna y la sección crece
con él, y la ficha pasó a una sola línea con separadores. Lo que
sobrevive es sólo el aire entre bloques.
Lo que NO se toca acá: el tamaño del título de sección ni el de la bajada.
Achicarlos rompía la jerarquía con «Videos que nos hacen fuerza». */
@media (min-width:1024px) and (max-height:880px){
.mapa__leyenda-titulo{margin-bottom:.45rem}
.leyenda{gap:.45rem clamp(.9rem,2.4vw,1.8rem)}
.muestra__titulo{margin-bottom:.5rem}
.muestra__descripcion{line-height:1.45}
.muestra__ficha{row-gap:.3rem;margin-bottom:.6rem}
.muestra__subtitulo{margin:.6rem 0 .35rem}
.muestra__galeria{gap:.4rem}
.muestra__paso{margin-top:.7rem;padding-top:.55rem}
}
/* La chinche activa se distingue del resto */
.chinche.es-activa{z-index:2}
.chinche.es-activa .chinche__punto{
background:var(--violeta-spray);transform:scale(1.9);
}
/* =========================================================================
Movimiento reducido
2.3.3 es AAA, no obligatorio para AA. Lo respetamos igual.
========================================================================= */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;
}
}
/* --- Leyenda del mapa --------------------------------------------------- */
/* Va ARRIBA del panel: es la clave de lectura del mapa, y leerla despues del
detalle de una muestra no servia de nada. */
.mapa__leyenda{
margin:0 0 clamp(.7rem,1.8vh,1.2rem);width:100%;max-width:38rem;
padding-bottom:clamp(.6rem,1.4vh,1rem);
border-bottom:1px solid rgba(255,255,255,.18);
position:relative;z-index:1;
}
.mapa__leyenda-titulo{
font:700 var(--t-xs)/1 var(--titulo);text-transform:uppercase;
letter-spacing:.13em;color:var(--violeta-spray);margin:0 0 .6rem;
}
.leyenda{
list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;
gap:.5rem clamp(.8rem,2.2vw,1.6rem);
}
.leyenda__item{
display:flex;align-items:center;gap:.4rem;
font:600 var(--t-xs)/1.2 var(--titulo);
text-transform:uppercase;letter-spacing:.04em;color:var(--blanco);
}
.leyenda__forma{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto}
/* En escritorio las referencias van en UNA fila, en la banda de arriba del
mapa. `nowrap` para que ningun nombre se parta y desarme la fila. */
@media (min-width:1024px){
#mapa .leyenda{flex-wrap:nowrap;gap:clamp(.7rem,1.6vw,1.4rem)}
#mapa .leyenda__item{white-space:nowrap}
#mapa .mapa__leyenda{border-bottom:0;padding-bottom:0}
}
/* =========================================================================
LA SECCION DEL MAPA
-------------------------------------------------------------------------
«Una seccion, una idea»: el manifiesto por un lado y el mapa con su
momento protagonico por el otro.
En escritorio, una banda arriba con el titulo, el contador y las
referencias, y debajo dos columnas: la ficha | EL MAPA. Con la banda
arriba, la ficha tiene todo el ancho que necesita.
El mapa va grande y es mas alto que la pantalla: se recorre bajando. La
ficha es pegajosa y acompaña al mapa de Jujuy a Tierra del Fuego: un
pegajoso dentro de una celda de grilla se queda quieto lo que mide la
fila, y la fila mide lo que mide el mapa.
Por que no entero en la pantalla, como en el celular: en una notebook de
14" el mapa quedaria de ~280px y los nombres de provincia en 7px. El mapa
ocupa lo maximo posible y lleva nombres hasta en las provincias chicas.
========================================================================= */
:root{
--ancho-mapa:clamp(280px, 40vw, 672px);
/* Apenas ladeado, como algo apoyado a mano. Ojo: la rosa de los vientos gira
con el mapa, asi que el norte del dibujo queda 1,5 grados corrido del
norte real. */
--giro-mapa:-1.5deg;
/* Donde se clavan los costados. Es el mismo despeje al que aterrizan los
titulos (`scroll-padding-top`). */
--despeje-mapa:calc(var(--alto-cabecera-total) + 1rem);
}
@media (min-width:1024px){
/* Dos columnas, y el mapa ocupa LAS DOS FILAS de la derecha: arranca en el
borde de arriba de la seccion, a la altura del titulo. Con el titulo en
una banda a todo el ancho, el mapa quedaba empujado una franja entera para
abajo. A la izquierda: titulo, contador y referencias, y
debajo la ficha, que es la que acompaña al mapa. */
#mapa > .seccion__interior{
display:grid;
grid-template-columns:minmax(0,1fr) var(--ancho-mapa);
grid-template-rows:auto 1fr;
grid-template-areas:"encabezado mapa" "ficha mapa";
column-gap:max(var(--gap), 4vw);
align-items:start;
}
/* El cuerpo junta mapa y ficha en el HTML, pero en la grilla cada uno va a
su celda. */
#mapa .mapa__cuerpo{display:contents}
#mapa .mapa__encabezado{grid-area:encabezado;margin-bottom:clamp(1.2rem,3vh,2rem)}
#mapa .mapa__leyenda{margin:0;width:auto;max-width:none}
#mapa .mapa__columna{
grid-area:mapa;
width:var(--ancho-mapa);max-width:none;margin:0;
transform:rotate(var(--giro-mapa));
}
#mapa .mapa__figura{
grid-area:ficha;
position:sticky;top:var(--despeje-mapa);
max-width:none;
transition:top .28s ease; /* la misma que la barra: se lee como un gesto */
}
/* Con la barra apartada, la ficha sube a ocupar su lugar. */
html:has(.cabecera.esta-oculta) #mapa .mapa__figura{top:1rem}
/* La ficha mide lo que la pantalla, menos el despeje: si pasara el alto de
la ventana dejaria de poder quedarse quieta al lado del mapa. */
#mapa .muestra{
height:calc(100dvh - var(--despeje-mapa) - 1.5rem);
min-height:0;max-height:none;
/* Si una ficha larga scrollea, la barra fina: la gruesa del sistema se
comia el borde derecho de la ficha. */
scrollbar-width:thin;scrollbar-color:var(--violeta-spray) transparent;
}
/* Con la barra apartada la ficha sube a 1rem del borde, y el alto tiene que
subir con ella: medido con el despeje de la barra quedaba un hueco violeta
abajo y las fotos se cortaban antes de tiempo (notebook 14"). */
html:has(.cabecera.esta-oculta) #mapa .muestra{height:calc(100dvh - 2.5rem)}
/* El estado vacio señala el mapa, que queda a la DERECHA de la ficha: son
las reglas generales de `.muestra__vacio`. */
}
/* Las referencias en el celular y la tablet: mismo estilo que en escritorio
(letra de los parrafos, minuscula, iconos chicos), pero en su lugar de
siempre, arriba del mapa y en fila: al costado del mapa no hay lugar. */
@media (max-width:1023px){
#mapa .mapa__leyenda-titulo{
font:600 .72rem/1 var(--cuerpo);text-transform:none;letter-spacing:.02em;
color:var(--violeta-spray);margin-bottom:.4rem;
}
#mapa .leyenda{gap:.25rem 1rem}
#mapa .leyenda__item{font:400 .8rem/1.2 var(--cuerpo);text-transform:none;letter-spacing:0;color:#e6dcf0}
#mapa .leyenda__forma{width:12px;height:12px}
#mapa .leyenda__forma .chinche__punto{scale:.6}
/* Titulo, contador y referencias CENTRADOS, y las referencias en UNA fila.
La letra baja con el ancho para que entren las cuatro. */
#mapa .mapa__cabecera,#mapa .mapa__leyenda{text-align:center;margin-inline:auto}
#mapa .leyenda{flex-wrap:nowrap;justify-content:center;gap:clamp(.5rem,2vw,1rem)}
#mapa .leyenda__item{white-space:nowrap;gap:.3rem;font-size:clamp(.68rem,1.9vw,.8rem)}
}
/* Mas angosto que ~540px las cuatro no entran en una fila con letra legible:
van de a dos, en una grilla que sigue centrada. */
@media (max-width:539px){
#mapa .leyenda{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:.3rem 1.2rem}
}
/* Abajo de 1024px: una columna, en el orden del documento -titulo, mapa,
ficha-, que es como se lee en un telefono. El mapa no gira.
La ficha fluye con la pagina y NO scrollea por dentro: con `auto`, la flecha
girada del estado vacio se pasaba 20px y volvia al panel un contenedor de
scroll que atrapaba el dedo (lo verifico una prueba de scroll). `clip` en horizontal sigue
cuidando que la tira de fotos no empuje el ancho. */
@media (max-width:1023px){
#mapa .mapa__columna{width:min(100%, var(--ancho-mapa));margin-inline:auto}
#mapa .muestra{overflow-x:clip;overflow-y:visible}
}
/* --- Titulo y contador: una sola pieza ----------
El titulo arriba, y abajo el contador como un sello: el numero en la letra
del logo, en blanco, y la frase al costado en la condensada, en mayuscula y
en dos renglones que miden lo mismo que el numero. Una raya fina a mano
alzada -el mismo trazo que subraya el manifiesto- los separa.
El numero del HTML es el total real; mapa.js lo anima de 0 la primera vez
que se ve. `tabular-nums` para que no baile de ancho mientras cuenta. */
#mapa .mapa__cabecera{display:block;margin:0}
#mapa .mapa__cabecera .seccion__titulo{
margin:0 0 clamp(.9rem,2vh,1.4rem);
font-size:clamp(2.4rem,1.4rem + 2.8vw,4.2rem);
}
.mapa__contador{
display:inline-flex;align-items:center;gap:.9rem;
/* Aire hasta la ficha de abajo: con menos, el numero y la volanta de la
muestra se leian juntos. */
margin:0 0 clamp(2rem,5vh,3.2rem);
/* El numero va girado como el titulo y su esquina de arriba sube: con un
aire en vh, en una notebook de 14" se pegaba al trazo. El
minimo fijo es lo que lo separa en cualquier pantalla. */
padding-top:clamp(1.5rem,2.6vh,2rem);
position:relative;
}
.mapa__contador::before{
content:"";position:absolute;left:0;right:-8%;top:0;height:5px;
background:var(--violeta-spray);opacity:.55;
-webkit-mask:var(--trazo-mano);mask:var(--trazo-mano);
}
.mapa__contador-numero{
font:400 clamp(3.4rem,2.2rem + 3.4vw,5.2rem)/.82 var(--display);
color:var(--blanco);font-variant-numeric:tabular-nums;
/* el numero se inclina como el titulo: son la misma pieza */
transform:rotate(var(--inclina));
min-width:2ch; /* que no salte de ancho de 9 a 10 */
}
.mapa__contador-texto{
font:700 clamp(.9rem,.8rem + .45vw,1.15rem)/1.12 var(--titulo);
text-transform:uppercase;letter-spacing:.08em;
color:var(--violeta-spray);
}
/* Las chinches esperan al titulo de Mapa federal (ver mapa.js). Invisibles
y sin clics, pero NO fuera del orden de tabulacion: si alguien llega con
Tab a una chinche, aparecen todas (`:focus-within`). */
@media (min-width:1024px){
/* El fundido va en la CAPA y no en cada chinche: una transicion por
chinche pisaba la de `left/top` que abre el abanico. */
.mapa__chinches.espera-titulo{transition:opacity .45s ease}
.mapa__chinches.espera-titulo:not(.a-la-vista):not(:focus-within){opacity:0}
.mapa__chinches.espera-titulo:not(.a-la-vista):not(:focus-within) > *{pointer-events:none}
}