/* ==========================================================================
FUNDACIÓN PUNTO 37 — TRAZOS BLANCOS DE LÍNEA
--------------------------------------------------------------------------
Pedido del cliente: "detalles en blanco parecidos a los del niño de Nosotros
pero en diferentes partes de la página, para que se vea más viva".
La referencia es el hero de Nosotros: alrededor del niño de los guayos hay
garabatos blancos de línea (medalla, guante, botín, cronómetro, silbato,
arcos y rombos). Ese es el lenguaje que esta hoja extiende al resto del
sitio. Los dibujos son nuevos, hechos aquí; los de Nosotros siguen siendo
los .webp del arte y no se tocan.
TRES DECISIONES QUE EXPLICAN TODO LO DEMÁS
-------------------------------------------------------------------------
1. POR QUÉ MÁSCARA Y NO IMAGEN DE FONDO.
El mismo dibujo tiene que salir blanco sobre el rojo del hero y azul
claro sobre el blanco de Programas. Si el color fuera dentro del SVG
harían falta dos copias de cada motivo y el archivo pesaría el doble.
Con máscara, el SVG es sólo un troquel: aporta la forma, y el color lo
pone `background` desde fuera con una variable. Un dibujo, cualquier
color. El sitio ya usa esta técnica para las nubes de las fotos
(--nube-foto en estilo.css), así que no estrena nada.
2. POR QUÉ NO HAY NI UN NODO NUEVO EN EL HTML.
Cada trazo vive en un ::before o un ::after de un elemento que ya
existe. Se revisaron antes las nueve hojas para no pisar ningún
pseudo-elemento ocupado: el grano de las bandas, la luz de
profundidad.css, las viñetas de marca.css y el subrayado de las ligas
siguen intactos. Sólo se ocupan ranuras libres.
Consecuencia práctica: para quitar los trazos basta con borrar el
de esta hoja. No queda basura en el marcado.
3. POR QUÉ NO HAY ENTRADAS AL HACER SCROLL.
Está medido en este sitio y anotado al final de profundidad.css: con
scroll rápido el revelado no llega a todos y quedaban 34 de 36 piezas
invisibles. Aquí NO hay ni un opacity:0 de reposo ni un observador de
por medio. Todos los trazos están pintados desde que carga la página.
Lo único que se mueve es una deriva de bucle, y sus dos extremos son
visibles: si el navegador congelara la animación en cualquier momento,
el dibujo seguiría ahí.
EL TRAZO
-------------------------------------------------------------------------
Línea blanca sin relleno, remates y uniones redondeados, y grosor
IRREGULAR: dentro de un mismo dibujo conviven trazos de 6, de 4 y de 2,8.
Eso es lo que separa un dibujo ingenuo de un icono de sistema. El único
motivo macizo es la chispa, igual que en la referencia.
EL COLOR, SECCIÓN POR SECCIÓN
-------------------------------------------------------------------------
Sobre banda de color (rojo, azul, verde, morado) el trazo va BLANCO, que
es la referencia literal.
Sobre fondo claro el blanco no existe, así que ahí va el azul de marca
aclarado, #7CC7F5. OJO: el papel de este sitio NO es blanco puro. Desde
profundidad.css las secciones claras van en --papel #EDF6FD, un azul muy
pálido, y eso baja el contraste del trazo. Medido contra ese fondo real y
no contra el blanco: 1,7:1. Se ve sin dudarlo y no compite con el texto.
Si algún día --papel se aclara hacia el blanco, el trazo GANA contraste,
así que el cambio es seguro en esa dirección.
La chispa es la excepción y va en azul de marca vivo, igual que en el hero
de Nosotros. Sobre las bandas azules, donde ese azul desaparecería, pasa
al naranja de marca.
========================================================================== */
:root{
/* libreta con espiral y lápiz. Línea Educación. */
--tz-utiles:url("data:image/svg+xml;utf8,");
--ar-tz-utiles:100/100;
/* balón con arcos de movimiento. Línea Deporte. */
--tz-balon:url("data:image/svg+xml;utf8,");
--ar-tz-balon:100/100;
/* dos corcheas con barra y una nota suelta. Línea Cultura y Música. */
--tz-notas:url("data:image/svg+xml;utf8,");
--ar-tz-notas:100/100;
/* acordeón de fuelle, botones a un lado y teclas al otro. */
--tz-acordeon:url("data:image/svg+xml;utf8,");
--ar-tz-acordeon:100/74;
/* dos montañitas con nieve en el pico y un sol. Paisaje de Cáchira. */
--tz-montanas:url("data:image/svg+xml;utf8,");
--ar-tz-montanas:100/68;
/* casa de dos aguas con humo en la chimenea. */
--tz-casita:url("data:image/svg+xml;utf8,");
--ar-tz-casita:100/92;
/* moto de trocha con escape y farola. Intervención rural. */
--tz-moto:url("data:image/svg+xml;utf8,");
--ar-tz-moto:100/66;
/* un corazón grande y uno pequeño. Cierre y donación. */
--tz-corazones:url("data:image/svg+xml;utf8,");
--ar-tz-corazones:100/88;
/* cuatro rombos de destello, macizos. Es el único motivo relleno. */
--tz-chispas:url("data:image/svg+xml;utf8,");
--ar-tz-chispas:100/100;
/* sobre de correo con líneas de envío. Contacto. */
--tz-sobre:url("data:image/svg+xml;utf8,");
--ar-tz-sobre:100/80;
/* teléfono con ondas de llamada a ambos lados. Contacto. */
--tz-telefono:url("data:image/svg+xml;utf8,");
--ar-tz-telefono:100/92;
/* tres arcos de movimiento y unas rayitas. Eco del hero de Nosotros. */
--tz-arcos:url("data:image/svg+xml;utf8,");
--ar-tz-arcos:100/100;
/* ---- TINTAS -----------------------------------------------------------
Sobre banda de color. .88 y no 1 porque el trazo del arte no es blanco
puro de imprenta: deja respirar el color de abajo. */
--tz-blanco:#fff;
/* Sobre papel. Es #00ACF9 (--azul) aclarado hasta 1,8:1 contra el blanco:
por debajo de eso el trazo se pierde, por encima empieza a pelearse con
el texto negro. */
--tz-tinta-clara:#7CC7F5;
/* ---- RED DE SEGURIDAD -------------------------------------------------
Un troquel VACÍO. Sirve de valor por defecto de --tz-img.
No es un adorno: es lo que impide un fallo silencioso. Si alguien añade
una ranura a la lista de la sección 1 y se olvida de darle motivo, sin
este valor la máscara quedaría inválida, y una máscara inválida no oculta
nada: la pieza se pintaría como un CUADRADO macizo del color de la tinta.
Pasó de verdad mientras se armaba esta hoja, y salieron tres cuadrados
blancos de 90 px, uno en Contacto y dos en Legal.
Con este troquel vacío, una ranura sin motivo no pinta nada. */
--tz-nada:url("data:image/svg+xml;utf8,");
/* La chispa. En la referencia es azul de marca vivo, no blanco. */
--tz-chispa:#00ACF9;
/* Sobre banda azul ese azul se borra; ahí la chispa toma el naranja de
marca, que ya trabaja en el titular del hero de Nosotros. */
--tz-chispa-sobre-azul:#FEAB00;
}
/* ==========================================================================
1. LA PIEZA
--------------------------------------------------------------------------
Un solo bloque de propiedades para las veintidós ranuras. Cada regla de
abajo se limita a decir QUÉ motivo, DÓNDE y DE QUÉ COLOR.
z-index:-1 en todas: el trazo va siempre por DEBAJO del contenido. Así,
aunque una pieza caiga cerca de un titular, el texto la tapa y nunca hay
que corregir a mano cuando el contenido crezca. Para que ese -1 no se
hunda por detrás del fondo de la propia sección, el contenedor necesita
ser contexto de apilado; eso se resuelve en el bloque 3.
pointer-events:none: son adorno, no capturan ni un clic.
Y como viven en pseudo-elementos, para el lector de pantalla no existen:
no hay nada que ocultar con aria-hidden porque no hay nodo que anunciar.
========================================================================== */
.hero-inicio .hero-grid::before,
.hero-inicio .hero-grid::after,
.gesto::before,
.gesto::after,
.programas::before,
.programas::after,
.tablero::before,
.territorio .env::before,
.territorio .env::after,
.territorio .bajada::after,
.historia-grid::before,
.historia-grid::after,
.equipo::before,
.valores-grid::after,
.ci-azul .env::before,
.ci-azul .env::after,
.ci-verde .env::before,
.ci-verde .env::after,
.ci-morado .env::before,
.ci-morado .env::after,
#archivo::before,
#escribenos::before,
.apoyo::before,
.apoyo::after,
.pie::after,
.pie-grid::before{
content:"";
position:absolute;
z-index:var(--tz-z,-1);
pointer-events:none;
width:var(--tz-w,90px);
aspect-ratio:var(--tz-ar,1);
/* El SVG es troquel, no dibujo: pone la forma y el color viene de fuera.
Se declara la versión con prefijo primero para que un Safari viejo la
lea y la moderna la pise donde ya no hace falta. */
-webkit-mask:var(--tz-img,var(--tz-nada)) center/contain no-repeat;
mask:var(--tz-img,var(--tz-nada)) center/contain no-repeat;
background:var(--tz-color,var(--tz-blanco));
opacity:var(--tz-op,.9);
/* La rotación de reposo va aquí y se repite dentro de la animación: si no
se repitiera, al arrancar el bucle la pieza pegaría un tirón hasta los
0 grados. */
transform:rotate(var(--tz-giro,0deg));
inset:var(--tz-arr,auto) var(--tz-der,auto) var(--tz-aba,auto) var(--tz-izq,auto);
animation:tz-deriva var(--tz-dur,17s) var(--tz-espera,0s) ease-in-out infinite alternate;
}
/* ==========================================================================
2. LA DERIVA
--------------------------------------------------------------------------
Un vaivén lentísimo, como el de una pieza de papel colgada. Va con
`alternate`, así que la pieza no salta de vuelta al terminar: se devuelve
por el mismo camino.
Los dos fotogramas son VISIBLES. Aquí no se anima la opacidad ni se parte
de un estado escondido: si alguien pausa la animación, o el navegador la
descarta, el trazo sigue exactamente donde estaba. Esa es la diferencia
con las entradas que hubo que apagar en profundidad.css.
Los recorridos son de 6 a 12 px y 3 a 5 grados. Si se nota que se mueve
mientras uno lee, está mal puesto: se tiene que percibir sólo cuando la
vista se queda quieta en esa zona.
========================================================================== */
@keyframes tz-deriva{
from{ transform:translate3d(0,0,0) rotate(var(--tz-giro,0deg)) }
to { transform:translate3d(var(--tz-dx,5px),var(--tz-dy,-9px),0)
rotate(calc(var(--tz-giro,0deg) + var(--tz-dgiro,4deg))) }
}
/* Quien pide menos movimiento se queda con el dibujo quieto, no sin dibujo.
Es justo lo contrario de lo que pasaba con las entradas: allí, apagar la
animación dejaba la pieza invisible. */
@media (prefers-reduced-motion:reduce){
.hero-inicio .hero-grid::before,.hero-inicio .hero-grid::after,
.gesto::before,.gesto::after,.programas::before,.programas::after,
.tablero::before,.territorio .env::before,.territorio .env::after,
.territorio .bajada::after,.historia-grid::before,.historia-grid::after,
.equipo::before,.valores-grid::after,.ci-azul .env::before,
.ci-azul .env::after,.ci-verde .env::before,.ci-verde .env::after,
.ci-morado .env::before,.ci-morado .env::after,#archivo::before,
#escribenos::before,.apoyo::before,.apoyo::after,.pie::after,
.pie-grid::before{ animation:none }
}
/* ==========================================================================
3. CONTEXTOS DE APILADO
--------------------------------------------------------------------------
Un hijo en z-index:-1 se mete por detrás del fondo de su antepasado
posicionado. Si esa antepasada es la sección, que tiene fondo propio (el
papel #EDF6FD, o el gris de banda), el trazo desaparece detrás de él.
`isolation:isolate` corta ese descenso: convierte la caja en contexto de
apilado propio, y entonces el -1 sólo baja hasta el fondo de ESA caja, o
sea que queda por encima del color de la sección y por debajo de su
contenido, que es exactamente donde va un adorno. Es el mismo recurso que
ya usan .tile y .fondo-trama.
Las que no aparecen en esta lista es porque ya lo traían de antes:
.cabecera-int .env, .territorio .env y .hero-inicio .hero-grid llevan
z-index:2, y eso ya las hace contexto de apilado.
========================================================================== */
.gesto,
.programas,
.tablero,
.equipo,
.pie,
#escribenos{ position:relative; isolation:isolate }
/* Historia cuelga de su rejilla, no de la sección, para que el trazo siga al
contenido: la rejilla es la que manda dónde empieza el texto, y si mañana
cambia el reparto de columnas el trazo se mueve con ella.
z-index:2 (no sólo position+isolation): isolation:isolate crea contexto de
apilamiento propio, pero SIN z-index explícito ese contexto entero apila
como "auto" frente a sus hermanos — en este caso pierde por ORDEN del DOM
contra el festón de Misión (.mv-feston-historia, hermano posterior dentro
de .historia). El z-index:8 de los muñecos (estilo.css, .historia-grid
figure) queda ATRAPADO dentro de este contexto aislado y no sirve para
competir hacia afuera: por eso el festón les mordía el brazo y las piernas
aunque su propio z-index fuera menor. Con la rejilla misma en z-index:2,
el contexto completo (muñecos incluidos) gana sin tocar el z-index interno
de nadie más. */
.historia-grid{ position:relative; isolation:isolate; z-index:2 }
/* Éstas ya traían position:relative de las hojas anteriores; lo que les
faltaba era el aislamiento. Se repite `position:relative` a propósito: si
alguien reordena las hojas o toca esas reglas, esta línea sostiene sola la
condición que el trazo necesita. */
.valores-grid,
#archivo,
.pie-grid,
.territorio .bajada{ position:relative; isolation:isolate }
/* POR QUÉ EL TRAZO DE VALORES CUELGA DE .valores-grid Y NO DE .valores.
Aislar la sección entera costaba una costura: en el canto donde Valores se
junta con Tu apoyo hay un festón de nubes que cruza el límite, y al
convertir la sección en contexto de apilado esa fila de un píxel pasaba de
rgb(216,232,245) a rgb(237,246,253). Medido fila por fila: 1.440 columnas
cambiadas en la fila 4925 y ninguna en el resto de la página.
Se ve poco, pero es un cambio que el trazo no necesitaba. Colgando la pieza
de la rejilla interior se consigue el mismo contexto de apilado sin tocar
ningún borde de sección: la rejilla no tiene fondo ni toca el festón. La
costura desaparece del todo, y está comprobado que sí. */
/* Tu apoyo es la excepción y por eso NO aparece arriba: sus dos trazos van
en z-index:1 para quedar por encima del lazo verde, así que no necesitan
que la sección se aísle. Aislarla, de hecho, sobraría: ya tiene
position:relative y overflow:hidden de estilo.css. */
/* LO ÚNICO QUE ESTA HOJA LE CAMBIA AL RESTO DEL SITIO, Y CUÁNTO.
Añadir un contexto de apilado hace que el navegador reparta la página en
otros mosaicos al rasterizar, y eso corre el antialias de algún borde
cercano. En Nosotros pasa con el sello de Visión 2030.
Se persiguió hasta el final por si era un desplazamiento de verdad, y no lo
es. Medido en la zona del sello, 26.000 píxeles:
diferencia por canal > 40 ....... 0 píxeles
diferencia máxima ............... 33 de 255
área de tinta del sello ......... 4.905 antes, 4.909 después
centro de masa .................. se mueve 0,05 px
O sea: no se mueve ni cambia de tamaño, sólo respiran 43 píxeles de borde.
No es evitable colgando la pieza de otro sitio: sale igual aislando .pie o
aislando .valores-grid, que están a miles de píxeles de ahí. Es el precio
de tener trazos en secciones con fondo propio, y es un precio de 33/255 en
43 píxeles.
Fuera de eso, la comprobación página por página (captura con y sin la hoja,
descontando lo que ya se movía solo) da exactamente los trazos esperados y
nada más: 14 en Inicio, 8 en Nosotros, 7 en Eventos, 7 en Contacto y 6 en
Legal. Cero manchas macizas, cero franjas, cero barra horizontal nueva en
375, 560, 700, 900, 1024, 1200, 1440 y 1680 px de ancho. */
/* ==========================================================================
4. DÓNDE VA CADA TRAZO
--------------------------------------------------------------------------
La regla que se siguió para repartirlos: NINGUNO cae en el centro de una
sección. Van al canto, al margen que deja el .env (93 px a cada lado en
pantalla de 1440) o al hueco de relleno que queda entre una sección y la
siguiente. Y ninguno se pone donde el arte ya puso algo suyo: el corazón
coral de Tu apoyo, la guirnalda de Eventos, el sello de Contacto, la trama
de Legal y el asterisco de Historia se midieron uno por uno y los trazos
se corrieron para no tocarlos.
Los números salen de medir el DOM, no de calcular a ojo.
========================================================================== */
/* --- INICIO · hero rojo ---------------------------------------------------
Los arcos son el eco directo del hero de Nosotros: allá salen disparados
del niño de los guayos, aquí acompañan al niño de la moto. Van al margen
izquierdo, a la altura del titular.
La chispa cierra abajo a la derecha, y cae justo encima del festón de nubes
que remata la banda. No es un accidente que se dejó pasar: sobre ese blanco
el azul de marca se lee mejor que sobre el rojo, y el grupo de rombos queda
apoyado en la nube en vez de flotando en el aire. Si se sube por encima del
festón, funciona igual pero pierde ese apoyo.
El hero recorta con overflow:hidden, así que en pantallas donde el margen
se estrecha la pieza se muerde contra el canto en vez de abrir barra. */
.hero-inicio .hero-grid::before{
--tz-img:var(--tz-arcos); --tz-ar:var(--ar-tz-arcos);
--tz-w:84px; --tz-izq:-86px; --tz-arr:128px; --tz-giro:-14deg;
--tz-dy:-11px; --tz-dur:19s;
}
.hero-inicio .hero-grid::after{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa); --tz-op:1;
--tz-w:76px; --tz-der:-58px; --tz-aba:-56px;
--tz-dx:-4px; --tz-dy:6px; --tz-dgiro:-6deg; --tz-dur:13s;
}
/* --- INICIO · "Empezó con un gesto" ---------------------------------------
Fondo blanco: aquí el trazo blanco no existiría, así que va en azul de
marca aclarado. Las notas quedan a la izquierda del titular, que está
centrado y deja libres los dos tercios laterales. */
.gesto::before{
--tz-img:var(--tz-notas); --tz-ar:var(--ar-tz-notas);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:86px; --tz-izq:3%; --tz-arr:20%; --tz-giro:-8deg;
--tz-dy:-8px; --tz-dur:21s;
}
/* La chispa sí va en azul vivo: el propio h2 de esta sección ya lleva una
chispa de marca dentro de la palabra "compromiso". */
.gesto::after{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa); --tz-op:.95;
--tz-w:68px; --tz-der:4%; --tz-aba:18%;
--tz-dx:5px; --tz-dy:5px; --tz-dur:15s; --tz-espera:-4s;
}
/* --- INICIO · Qué hacemos -------------------------------------------------
Tres motivos, uno por familia de programa, repartidos por el borde de la
rejilla de tarjetas: los útiles arriba a la izquierda (Educación), el
balón a media altura a la derecha (Deporte) y el acordeón colgando por
debajo de la rejilla (Cultura y Música), dentro de los 110 px de relleno
que la sección ya tenía vacíos. */
.programas::before{
--tz-img:var(--tz-utiles); --tz-ar:var(--ar-tz-utiles);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:82px; --tz-izq:1.6%; --tz-arr:2.5%; --tz-giro:6deg;
--tz-dy:-7px; --tz-dgiro:-3deg; --tz-dur:23s;
}
.programas::after{
--tz-img:var(--tz-balon); --tz-ar:var(--ar-tz-balon);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:88px; --tz-der:1.4%; --tz-arr:42%; --tz-giro:-5deg;
--tz-dx:-6px; --tz-dy:-6px; --tz-dgiro:7deg; --tz-dur:18s;
}
.tablero::before{
--tz-img:var(--tz-acordeon); --tz-ar:var(--ar-tz-acordeon);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:96px; --tz-izq:3%; --tz-aba:-100px; --tz-giro:4deg;
--tz-dx:7px; --tz-dy:-4px; --tz-dur:25s; --tz-espera:-9s;
}
/* --- INICIO · A dónde hemos ido (banda azul) ------------------------------
Aquí el trazo vuelve al blanco, que es la referencia literal. Los tres
motivos son los del territorio: la montaña por los 2.025 metros, la casita
por el casco urbano y la moto por la trocha.
Ojo con no competir con el mapa: los tres se quedan ARRIBA, en la franja
del titular y la bajada, salvo la moto, que baja al relleno del pie de la
banda. El mapa ocupa desde los 425 px de la caja hacia abajo y queda
limpio. */
.territorio .env::before{
--tz-img:var(--tz-montanas); --tz-ar:var(--ar-tz-montanas);
--tz-w:124px; --tz-der:1%; --tz-arr:-8px;
--tz-dy:-6px; --tz-dgiro:2deg; --tz-dur:22s;
}
.territorio .env::after{
--tz-img:var(--tz-moto); --tz-ar:var(--ar-tz-moto);
--tz-w:116px; --tz-izq:-74px; --tz-aba:-78px; --tz-giro:-3deg;
--tz-dx:9px; --tz-dy:0px; --tz-dgiro:2deg; --tz-dur:20s;
}
/* La casita se cuelga del párrafo de la bajada, que corta a 56ch y deja
libre más de medio ancho a su derecha. Anclarla al párrafo y no a la caja
es a propósito: si mañana el texto crece o mengua, la casita lo sigue. */
.territorio .bajada::after{
--tz-img:var(--tz-casita); --tz-ar:var(--ar-tz-casita);
--tz-w:96px; --tz-izq:106%; --tz-arr:-30px; --tz-giro:4deg;
--tz-dy:-7px; --tz-dur:24s; --tz-espera:-7s;
}
/* --- NOSOTROS ------------------------------------------------------------
Esta página ya tiene el hero de referencia, así que recibe poco y suave:
sólo un eco de los arcos y unas chispas. El asterisco morado del brandbook
ya ocupa la esquina inferior izquierda de Historia, por eso los arcos
entran por arriba. */
.historia-grid::before{
--tz-img:var(--tz-arcos); --tz-ar:var(--ar-tz-arcos);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:82px; --tz-izq:-84px; --tz-arr:-40px; --tz-giro:-10deg;
--tz-dy:-9px; --tz-dur:19s;
}
.historia-grid::after{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa); --tz-op:.95;
/* Pegada al canto derecho de la rejilla pero POR DENTRO, y descolgada hacia
el relleno inferior de la sección. Colgaba 78 px por fuera y ésa era la
única pieza del sitio que asomaba a la derecha sin un contenedor que la
recortara: medido, añadía 54 px de barra horizontal en Nosotros entre los
900 y los 1.240 px de ancho. Hacia la izquierda sí se puede desbordar,
porque ese lado no genera barra. */
--tz-w:70px; --tz-der:0; --tz-aba:-56px;
--tz-dx:5px; --tz-dur:14s; --tz-espera:-5s;
}
.equipo::before{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:64px; --tz-der:2%; --tz-arr:1.2%;
--tz-dx:-5px; --tz-dy:6px; --tz-dur:16s;
}
/* Banda gris. Misma tinta clara que sobre blanco: el gris #EFEFEF sólo es un
6 % más oscuro que el papel, no da para cambiar de tono. */
.valores-grid::after{
--tz-img:var(--tz-arcos); --tz-ar:var(--ar-tz-arcos);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:78px; --tz-izq:-80px; --tz-arr:8px; --tz-giro:8deg;
--tz-dy:-8px; --tz-dgiro:-5deg; --tz-dur:21s;
}
/* --- CABECERAS DE PÁGINA INTERIOR ----------------------------------------
Las tres bandas usan el mismo lado libre, el derecho, porque el h1 corta a
18ch y la bajada a 56ch. Pero cada página tiene ocupada una esquina
distinta de ese lado, así que la altura cambia en cada una:
Eventos el arte cuelga la guirnalda ABAJO → los trazos suben
Contacto el arte cuelga el sello ARRIBA → los trazos bajan
Legal la trama del brandbook va ABAJO → los trazos suben
------------------------------------------------------------------------ */
/* Eventos, banda azul. Sobre azul la chispa azul se borraría, así que toma
el naranja de marca, que es el mismo que remata el titular de Nosotros. */
.ci-azul .env::before{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa-sobre-azul); --tz-op:1;
--tz-w:70px; --tz-der:3%; --tz-arr:4%;
--tz-dx:-4px; --tz-dy:5px; --tz-dur:15s;
}
.ci-azul .env::after{
--tz-img:var(--tz-notas); --tz-ar:var(--ar-tz-notas);
--tz-w:92px; --tz-der:14%; --tz-arr:6%; --tz-giro:-6deg;
--tz-dy:-8px; --tz-dur:20s; --tz-espera:-6s;
}
/* Contacto, banda verde. Aquí la chispa sí puede ir en azul de marca. */
.ci-verde .env::before{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa); --tz-op:1;
--tz-w:68px; --tz-der:4%; --tz-aba:6%;
--tz-dx:-5px; --tz-dy:-5px; --tz-dur:14s;
}
.ci-verde .env::after{
--tz-img:var(--tz-sobre); --tz-ar:var(--ar-tz-sobre);
--tz-w:104px; --tz-der:16%; --tz-aba:4%; --tz-giro:-4deg;
--tz-dx:8px; --tz-dy:-4px; --tz-dur:18s; --tz-espera:-5s;
}
/* Legal, banda morada. Página sobria: sólo chispas y arcos, sin objeto. */
.ci-morado .env::before{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa); --tz-op:1;
--tz-w:68px; --tz-der:3%; --tz-arr:5%;
--tz-dy:6px; --tz-dur:16s;
}
.ci-morado .env::after{
--tz-img:var(--tz-arcos); --tz-ar:var(--ar-tz-arcos);
--tz-w:86px; --tz-der:13%; --tz-arr:8%; --tz-giro:6deg;
--tz-dy:-7px; --tz-dur:22s; --tz-espera:-8s;
}
/* --- CUERPO DE EVENTOS Y DE CONTACTO -------------------------------------- */
#archivo::before{
--tz-img:var(--tz-arcos); --tz-ar:var(--ar-tz-arcos);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:80px; --tz-izq:2%; --tz-arr:8%; --tz-giro:-12deg;
--tz-dy:-8px; --tz-dur:20s;
}
/* El teléfono va justo donde se pide un teléfono: el bloque del formulario. */
#escribenos::before{
--tz-img:var(--tz-telefono); --tz-ar:var(--ar-tz-telefono);
--tz-color:var(--tz-tinta-clara); --tz-op:1;
--tz-w:92px; --tz-der:2%; --tz-arr:6%; --tz-giro:5deg;
--tz-dx:-6px; --tz-dy:-6px; --tz-dur:19s;
}
/* --- CIERRE · Tu apoyo (las cinco páginas) --------------------------------
Corazones y chispas, que es lo que pidió el cliente para el cierre.
El corazón coral del brandbook ya está colgado a la IZQUIERDA de esta
sección, así que el par de corazones de trazo va a la derecha: leídos
juntos hacen pareja en vez de repetirse.
Aquí, y sólo aquí, el trazo NO va en z-index:-1 sino en 1. Motivo: el lazo
verde de fondo es una imagen absoluta de 1.500 px que ocupa casi toda la
sección, y por debajo de ella los corazones se perderían. En 1 quedan por
encima del lazo y por debajo del texto, que va en 2. */
.apoyo::before{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa); --tz-op:.9; --tz-z:1;
--tz-w:74px; --tz-izq:4%; --tz-aba:14%;
--tz-dx:5px; --tz-dy:-5px; --tz-dur:15s;
}
.apoyo::after{
--tz-img:var(--tz-corazones); --tz-ar:var(--ar-tz-corazones);
--tz-color:var(--tz-tinta-clara); --tz-op:1; --tz-z:1;
--tz-w:92px; --tz-der:3.5%; --tz-arr:15%; --tz-giro:7deg;
--tz-dy:-10px; --tz-dgiro:-4deg; --tz-dur:17s; --tz-espera:-6s;
}
/* --- CIERRE · el pie morado (las cinco páginas) --------------------------- */
.pie::after{
--tz-img:var(--tz-chispas); --tz-ar:var(--ar-tz-chispas);
--tz-color:var(--tz-chispa); --tz-op:1;
--tz-w:74px; --tz-der:4%; --tz-arr:6%;
--tz-dy:7px; --tz-dur:16s;
}
.pie-grid::before{
--tz-img:var(--tz-corazones); --tz-ar:var(--ar-tz-corazones);
--tz-w:86px; --tz-izq:-74px; --tz-arr:4%; --tz-giro:-6deg;
--tz-dy:-9px; --tz-dur:20s; --tz-espera:-5s;
}
/* ==========================================================================
5. EN PANTALLA DE MANO SOBRAN
--------------------------------------------------------------------------
Lo que en escritorio adorna, en 375 px estorba, por dos razones concretas
y medidas:
1. Casi la mitad de los trazos vive en el margen que deja el .env. Ese
margen es de 93 px en una pantalla de 1440 y de 24 px en una de 900.
Por debajo de eso no hay margen: la pieza se mete encima del contenido.
2. Las cabeceras cambian de maqueta. El h1, que en escritorio corta a 18ch
y deja libre la mitad derecha, en tablet pasa a ocupar el ancho entero.
El lado libre donde se apoyan estos trazos deja de existir.
Así que se van por tandas. Lo que queda en móvil son cuatro piezas, una
por tramo de página, y siguen siendo las que se ven siempre: aquí no se
apaga nada por scroll, sólo por ancho de pantalla.
========================================================================== */
@media (max-width:900px){
.hero-inicio .hero-grid::before,
.programas::before,
.programas::after,
.tablero::before,
.territorio .env::after,
.territorio .bajada::after,
.historia-grid::before,
.valores-grid::after,
.ci-azul .env::after,
.ci-verde .env::after,
.ci-morado .env::after,
#archivo::before,
#escribenos::before,
.pie-grid::before{ display:none }
/* Las que se quedan encogen: el mismo dibujo que a 1440 se lee como un
acento, a 900 se lee como una mancha si conserva el tamaño. */
.gesto::before{ --tz-w:66px; --tz-izq:2% }
.gesto::after{ --tz-w:54px }
.territorio .env::before{ --tz-w:92px; --tz-der:0 }
.equipo::before{ --tz-w:52px }
.apoyo::after{ --tz-w:72px; --tz-der:3% }
.apoyo::before{ --tz-w:58px }
.pie::after{ --tz-w:60px }
.ci-azul .env::before,
.ci-verde .env::before,
.ci-morado .env::before{ --tz-w:54px }
}
@media (max-width:560px){
/* En teléfono quedan TRES, y son tres medidas, no tres deseadas.
Aquí hay una trampa que sólo se ve comprobando de verdad: en escritorio
las piezas se colocan con porcentajes contra el alto de su sección, y en
el teléfono ese alto se dispara porque todo se apila en una columna. El
pie pasa de 1.125 a 2.350 px. Un "6% desde arriba" que en escritorio caía
en un canto vacío, en el teléfono cae a 141 px del borde, o sea encima del
festón de nubes y del logo, y como el trazo va por debajo del contenido,
el contenido lo tapa. No se rompe nada: simplemente no se ve.
Medido a 375 px comparando la página con y sin esta hoja: de las cinco que
quedaban, sólo pintaban dos. Las que sobrevivían eran las dos ancladas al
canal izquierdo (3,7 px y 18,5 px desde el borde), que en el teléfono
sigue estando vacío.
Así que la regla para el teléfono es otra: pegadas al canal izquierdo, no
a un porcentaje del alto. Las que no caben con esa regla se retiran. */
.hero-inicio .hero-grid::after,
.gesto::after,
.territorio .env::before,
.equipo::before,
.apoyo::after,
.ci-azul .env::before,
.ci-verde .env::before,
.ci-morado .env::before{ display:none }
.gesto::before{ --tz-w:52px; --tz-izq:1%; --tz-arr:8% }
.apoyo::before{ --tz-w:46px; --tz-izq:5% }
/* El pie se ancla abajo a la izquierda, junto a la barra legal, que es el
único hueco ancho que le queda en columna. */
.pie::after{ --tz-w:50px; --tz-izq:6%; --tz-der:auto; --tz-arr:auto; --tz-aba:4% }
}
/* ==========================================================================
6. ALTO CONTRASTE
--------------------------------------------------------------------------
Mismo criterio que profundidad.css con su textura: quien pide más
contraste está pidiendo menos ruido alrededor del texto. Los trazos son
ruido amable, pero ruido. Se retiran.
========================================================================== */
@media (prefers-contrast:more){
.hero-inicio .hero-grid::before,.hero-inicio .hero-grid::after,
.gesto::before,.gesto::after,.programas::before,.programas::after,
.tablero::before,.territorio .env::before,.territorio .env::after,
.territorio .bajada::after,.historia-grid::before,.historia-grid::after,
.equipo::before,.valores-grid::after,.ci-azul .env::before,
.ci-azul .env::after,.ci-verde .env::before,.ci-verde .env::after,
.ci-morado .env::before,.ci-morado .env::after,#archivo::before,
#escribenos::before,.apoyo::before,.apoyo::after,.pie::after,
.pie-grid::before{ display:none }
}
/* ==========================================================================
CAMBIO PEDIDO — pagina limpia (quitar TODOS los recursos sueltos)
La clienta: "los recursos sueltos son los detalles azules que estan alrededor
de la pagina... las estrellas, corazones, etc." Se apaga la capa entera de
garabatos de trazo fino de esta hoja de una sola vez: es exactamente el
"adorno suelto" que pidio quitar en todas las secciones. content:none elimina
cada pseudo-elemento; el resto de reglas de la hoja quedan inertes al no
existir el pseudo. Los cortes entre secciones los marca ahora el feston de
nube, no estos dibujitos.
========================================================================== */
.hero-inicio .hero-grid::before, .hero-inicio .hero-grid::after,
.gesto::before, .gesto::after,
.programas::before, .programas::after,
.tablero::before,
.territorio .env::before, .territorio .env::after, .territorio .bajada::after,
.historia-grid::before, .historia-grid::after,
.equipo::before, .valores-grid::after,
.ci-azul .env::before, .ci-azul .env::after,
.ci-verde .env::before, .ci-verde .env::after,
.ci-morado .env::before, .ci-morado .env::after,
#archivo::before, #escribenos::before,
.apoyo::before, .apoyo::after,
.pie::after, .pie-grid::before{ content:none }
/* Adornos sueltos que quedaban fuera de esta hoja (viven en marca.css): el
corazon de trazo y los lunares dispersos. La clienta los incluyo en "quitar
los recursos sueltos... estrellas, corazones". El sello de Vision y el marco
ondulado NO son .adorno, asi que no se tocan. */
.adorno--corazon,
.adorno--lunares{ display:none }