/* ==========================================================================
FUNDACIÓN PUNTO 37 — hoja base de Inicio y Nosotros
--------------------------------------------------------------------------
Trazada sobre el arte aprobado por el cliente:
· FP37_WEB_INICIO/DISENOWEB_ajustes tamanos pag inicio.ai (1440 / 768 / 375)
· DISENOWEB_NOSOTROS_Carpeta 2/DISENOWEB_NOSOTROS.ai (1440 / 768 / 375)
Los colores salen del muestreo directo del arte y coinciden con el
Punto37_BRANDBOOK.pdf. Las tipografías son las del brandbook —Oliviar Sans y
Goodkids Rough— servidas desde /fuentes, no sustitutos de Google.
========================================================================== */
/* --- 1. TIPOGRAFÍAS DE MARCA ---------------------------------------------
El sitio anterior declaraba Outfit y Plus Jakarta Sans: parecidas de lejos,
pero ningún titular calzaba con el arte. Los OTF ya venían en el repo sin
usar. Pesan 55-67 KB cada uno, así que se sirven tal cual sin convertir. */
@font-face {
font-family: 'Oliviar Sans';
src: url('fuentes/OliviarSans-Thin.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Oliviar Sans';
src: url('fuentes/OliviarSans-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Oliviar Sans';
src: url('fuentes/OliviarSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Oliviar Sans';
src: url('fuentes/OliviarSans-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* La display manuscrita. En el arte aparece SOLO en cinco lugares: "NO LLEGAN",
"compromiso", "APOYO", "Misión" y "BOLETÍN". No es una fuente de titulares
general; usarla de más rompe la jerarquía que propone el diseño. */
@font-face {
font-family: 'Goodkids';
src: url('fuentes/Goodkids-Rough.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* --- 2. TOKENS ------------------------------------------------------------
Hex muestreados del .ai con promedio de parche de 28px, para no tomar un
píxel de grano por color plano. Coinciden con el brandbook. */
:root {
--rojo-hero: #FE1213;
/* fondo del hero de Inicio (tonos del .ai) */
--rojo: #FF3C00;
/* rojo de marca: botones Dona */
--rojo-hondo: #C81212;
/* Rojo de la barra de redes. Se midio sobre la captura de referencia de la
clienta en tres puntos distintos y da #DE0000 en los tres. No se reusa
ninguno de los rojos de arriba porque ninguno coincide: --rojo-hero es mas
claro y --rojo tira a naranja. */
--rojo-barra: #DE0000;
--coral: #FF4949;
/* tile Cultura y Música */
--azul: #00ACF9;
/* tile Educación, bandas de cielo, Misión, brochazo NO LLEGAN */
--azul-chip: #5BC0FB;
/* chip de cifra del hero: medido sobre el .ai original */
--rojo-chip: #E64040;
/* chip del medio del hero de Inicio: Isaías pidió cambiarlo de azul a
rojo; color muestreado directo del banner nuevo del cliente (centroide
de los píxeles rojos del chip "1.000+"), no --rojo/--coral a ojo. */
--azul-hondo: #3A81C7;
/* centro del degradado del hero de Nosotros */
--azul-claro: #69B5F0;
--verde: #70CC03;
/* tile Deporte */
--verde-mapa: #97D953;
--naranja: #FEAB00;
/* tile Jornadas sociales */
--morado: #A87DE5;
/* tile Intervención rural */
--morado-hondo: #492D91;
/* Visión 2030 */
--negro: #000;
--gris-banda: #EFEFEF;
--gris-marquee: #D2D2D2;
--ancho: 1240px;
--nav-alto: 78px;
/* Grano: el arte tiene los fondos de color texturizados, no planos. Va como
data-URI para que la página no dependa de ningún archivo extra. */
--grano: url("data:image/svg+xml;utf8,");
/* Máscara de nube para fotos: unión de nueve círculos sobre un cuadrado.
Es la forma con la que el arte recorta TODAS las fotos de programas.
preserveAspectRatio='none' + mask-size:100% 100% la hace elástica. */
/* Nube de las fotos. Antes los lobulos del medio iban en cy=18 y cy=82 con
r=19: 18-19 = -1 y 82+19 = 101, o sea SE SALIAN del viewBox 0..100 y el
recorte los dejaba planos ("la forma sale cortada en los bordes"). Ahora
todos los circulos cumplen cx-r >= 0 y cy+r <= 100: quedan tangentes al
borde como mucho, nunca cortados. Ocho lobulos, esquinas r=20 y medios
r=19, con el cuerpo un poco mas chico para que la silueta no se aplane. */
--nube-foto: url("data:image/svg+xml;utf8,");
/* Los chips de cifras del hero NO llevan la misma nube que las fotos: en el
arte son cuatro lóbulos grandes (2×2), bastante más rotundos. */
/* Chip de cifra. Tenia 4 circulos de r=29, que dan DOS lobulos por lado y ese
perfil grueso que la clienta rechazo. En el .ai original cada lado muestra
TRES lobulos, asi que van 8 circulos (4 esquinas + 4 puntos medios), con el
radio subido a 23 para que la hendidura entre lobulo y lobulo quede honda y
en punta como en el arte, no como una ondita. */
/* Forma de la nube-chip EXTRAÍDA del .ai (DISENOWEB_ajustes tamanos pag inicio):
cuatro lóbulos grandes en las esquinas y lados ligeramente cóncavos, no los
mid-bumps convexos de la versión anterior. Se usa la silueta real como
máscara para que coincida exactamente con el arte. */
--nube-chip: url("img/cifra-nube.webp");
/* Nube de tres lóbulos: la silueta con la que el arte de Nosotros presenta
a los directivos (un lóbulo arriba, dos abajo, base redondeada). */
/* Los tres lóbulos y la base tienen que SOLAPARSE. Con la base arrancando en
y=55 quedaba un hueco de cuatro unidades entre los dos lóbulos bajos y el
borde superior del rectángulo, justo en el centro: por ahí se veía el
blanco de la página y cada retrato salía con un cuadrito blanco encima.
La base sube a y=44 y llega hasta abajo. */
--nube-retrato: url("data:image/svg+xml;utf8,");
/* Máscara-nube para la tarjeta ANCHA de Misión: lóbulos redondos repartidos
por todo el perímetro. En el nosotros.ai la tarjeta azul tiene borde de
nube festoneado blanco, no un contorno a trazos. */
--nube-tarjeta: url("data:image/svg+xml;utf8,");
}
/* --- 3. BASE -------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto
}
}
body {
margin: 0;
background: #fff;
color: var(--negro);
font-family: 'Oliviar Sans', system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
}
img {
max-width: 100%;
display: block
}
a {
color: inherit;
text-decoration: none
}
button {
font: inherit;
color: inherit
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 900;
line-height: 1.05
}
p {
margin: 0 0 1em
}
.env {
width: min(100% - 48px, var(--ancho));
margin-inline: auto
}
.oculto {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap
}
.mano {
font-family: 'Goodkids', cursive;
font-weight: 400;
line-height: .92
}
/* Salta al contenido: la nav es fija y sin esto el teclado queda atrapado. */
.saltar {
position: absolute;
left: 12px;
top: -60px;
z-index: 100;
background: #fff;
color: #000;
padding: 10px 16px;
border-radius: 10px;
transition: top .16s;
}
.saltar:focus {
top: 12px
}
:focus-visible {
outline: 3px solid var(--azul);
outline-offset: 3px
}
/* --- 4. BARRA DE REDES + NAV ----------------------------------------------
La barra fina de redes va en ROJO, no en negro. El arte original la traia
negra y asi se habia montado, pero la clienta pidio el cambio y mando la
captura de referencia; el rojo medido ahi es --rojo-barra (#DE0000).
Debajo va una pildora blanca flotante con los enlaces. La pildora NO ocupa
todo el ancho: deja ver el fondo de color a ambos lados, y el boton Dona
vive fuera de ella. */
.social-top {
background: var(--rojo-barra);
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 18px;
padding: 7px max(24px, calc((100vw - var(--ancho))/2));
font-size: 13px;
}
.social-top a {
display: grid;
place-items: center;
opacity: .9
}
.social-top a:hover {
opacity: 1
}
.social-top svg {
width: 15px;
height: 15px;
fill: currentColor
}
.cabecera {
position: sticky;
top: 0;
z-index: 60;
display: flex;
align-items: center;
gap: 20px;
padding: 14px max(24px, calc((100vw - var(--ancho))/2));
background: transparent;
pointer-events: none;
}
.cabecera>* {
pointer-events: auto
}
.marca {
display: flex;
align-items: center;
flex: none;
position: relative;
z-index: 70;
}
.marca img,
.marca picture img {
height: 52px;
width: auto;
}
.hero-corte-pincel {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 52px;
background: url('img/hero-corte-pincel.webp') bottom center / 100% 100% no-repeat;
pointer-events: none;
z-index: 5;
}
.menu {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 34px;
background: #fff;
border-radius: 999px;
padding: 16px 40px;
margin: 0;
list-style: none;
box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
}
.menu a {
font-size: 16px;
font-weight: 400;
white-space: nowrap;
padding: 4px 0
}
.menu a:hover {
color: var(--rojo)
}
/* El enlace de la página actual (o la sección en vista) lleva un subrayado rojo
corto, como en el arte. Sin JS: subrayado bajo aria-current (la página). Con
JS (indicador.js marca html.js-nav): el subrayado lo lleva .nav-activo, que
sigue a la sección en vista y vuelve a la página arriba. Ver indicador.js. */
.menu a[aria-current="page"],
.menu a.nav-activo {
position: relative;
font-weight: 400
}
html:not(.js-nav) .menu a[aria-current="page"]::after,
html.js-nav .menu a.nav-activo::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: var(--rojo);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 12px;
cursor: pointer;
font-weight: 900;
letter-spacing: .01em;
padding: 15px 26px;
font-size: 17px;
transition: transform .14s ease, box-shadow .14s ease;
}
.btn svg {
width: 19px;
height: 19px;
fill: currentColor;
flex: none
}
.btn-dona {
background: var(--rojo);
color: #fff;
box-shadow: 0 3px 0 var(--rojo-hondo)
}
.btn-dona:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--rojo-hondo)
}
.btn-dona:active {
transform: translateY(1px);
box-shadow: 0 1px 0 var(--rojo-hondo)
}
.btn-hueco {
background: #fff;
color: var(--negro);
box-shadow: 0 0 0 2px var(--rojo) inset
}
.btn-hueco:hover {
transform: translateY(-2px)
}
.cabecera .btn-dona {
flex: none;
font-size: 19px;
padding: 15px 30px;
border-radius: 14px
}
.hamburguesa {
display: none
}
/* --- 5. BORDE DE NUBE (separador de secciones) ---------------------------
El arte separa cada bloque de color con un festón de nubes, no con una
línea recta. Se dibuja con tres pasadas del mismo trazo en fases distintas:
la unión de las tres siluetas no tiene periodo, así que el borde se lee
irregular en vez de repetido. Todas del mismo color, por eso lo que se ve
es un contorno de nube y no capas superpuestas. */
.nube {
position: absolute;
left: -2px;
width: calc(100% + 4px);
height: 64px;
display: block;
z-index: 3;
pointer-events: none;
}
/* Arriba: el festón lleva el color de SU sección y muerde hacia la de encima.
Abajo: lleva el color de la sección SIGUIENTE y se apoya dentro de ésta, de
modo que el canto lobulado quede mirando hacia abajo. Sin voltearlo: el
trazo ya tiene la base plana en y=64, que es la que sella contra el borde. */
.nube-arriba {
top: -62px
}
.nube-abajo {
bottom: -1px
}
/* El festón del hero de Nosotros va BAJO y sutil (no semicírculos altos): se le
da una altura corta para que los bumps queden poco pronunciados, como el .ai. */
.hero-nos .nube-feston {
height: 22px
}
/* --- 6. HERO DE INICIO ---------------------------------------------------- */
.hero-inicio {
position: relative;
overflow: hidden;
/* Fondo = banner real del cliente (FP37_banner_Moto): rojo con su textura/grano
exactos. Así no hay diferencia de color/textura con la figura (que trae el
mismo rojo del arte). Respaldo #F03424 por si la imagen tarda. */
background: #F03424 url('img/hero-banner.webp') top center/cover no-repeat;
margin-top: calc(-1 * var(--nav-alto) - 26px);
/* Sin padding inferior: el hero termina justo en la rueda del niño, para que
el corte de pincel (.hero-corte) y la nube del arte calcen con la figura y
no quede una franja de rojo muerta debajo. El corte (alto ~60px, anclado al
fondo) se solapa con la base de la rueda: el niño "entra" en la nube del
corte, como en el .ai. */
padding: calc(var(--nav-alto) + 74px) 0 0;
}
.hero-inicio::before {
content: none;
}
/* el grano ya viene en el banner */
/* Titular y cifras ocupan la columna izquierda en dos filas; la figura ocupa
la derecha entera. Se coloca explícitamente porque en tablet las cifras
pasan a cruzar todo el ancho y con flujo automático no se podría. */
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr .84fr;
gap: 14px 24px;
/* La fila del titular es `auto` (mide lo que el texto) y la de las cifras es
`1fr`. Antes ambas eran implicitas y la figura del nino, que abarca las dos,
las hacia crecer por igual: el sobrante caia como hueco ENTRE el titular y
las cifras, que es lo que la clienta marco como "demasiado espacio". Ahora
todo el sobrante lo absorbe la fila 1fr POR DEBAJO de las cifras, asi el
titular y las cifras quedan pegados arriba a la izquierda y la figura llena
su columna a la derecha. */
grid-template-rows: auto 1fr;
align-items: start;
}
.hero-txt {
grid-column: 1;
grid-row: 1;
/* En el .ai el titular arranca más hacia el centro, no pegado al borde
izquierdo del hero (ver nota en hero.css sobre la nube y el "cambio 7").
clamp en vez de un valor fijo: crece con el ancho igual que el resto
del hero, y se anula en el apilado de móvil (@600px) donde el titular
vuelve a quedar centrado como el resto de las filas. */
padding-left: clamp(28px, 8vw, 130px);
position: relative;
}
/* Titular como imagen (BANNER INICIO_TEXTO.png, recortado a su bbox real:
es el arte a mano completo "LLEGAMOS A DONDE OTROS NO LLEGAN" en blanco
sobre transparente, no garabatos sueltos — a simple vista en un visor con
fondo blanco el texto blanco se pierde y parece que sólo trae los acentos
de color). El h1 real queda oculto (.oculto en el HTML) para SEO/lectores
de pantalla, igual que .apoyo-plantilla. */
.hero-titulo-img {
display: block;
width: min(100%, clamp(200px, 22vw, 340px));
height: auto;
/* -70px: otros 30px más a la izquierda (era -40px) */
margin-left: -70px;
/* +30px: bajado 30px total (15+15) según ajuste visual 2026-08-24 */
margin-top: 30px;
}
.hero-grid .cifras {
grid-column: 1;
grid-row: 2;
/* Las cifras se subieron al reducir el título (la fila auto encogió).
Se bajan con align-self:end para que queden pegadas al fondo de su fila. */
align-self: end;
padding-bottom: 24px;
}
/* La figura sigue abarcando las dos filas para llenar la columna derecha, pero
se centra sola contra ellas sin estirarlas. */
.hero-figura {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center
}
.hero-capas .capa-arte {
position: relative !important;
z-index: 1 !important;
transform: translateX(-60px);
}
.hero-capas .capa-sombra {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 2 !important;
}
.hero-capas .capa-nino {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 5 !important;
}
.hero-capas .capa-casco {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 6 !important;
}
.hero-inicio h1 {
color: #fff;
font-size: clamp(40px, 4.6vw, 66px);
letter-spacing: -.01em;
}
/* En el arte sólo la primera línea va en Oliviar Black. "otros" y "NO LLEGAN"
están escritas con la manuscrita Goodkids, y la segunda sobre un brochazo
azul. Es la jerarquía del titular: dos registros, no uno. */
/* "Llegamos hasta donde" en DOS líneas y compactas, como el arte. line-height
corto para que las dos líneas queden pegadas. */
.hero-inicio h1 .liviana {
font-weight: 900;
display: block;
font-size: .92em;
line-height: 1.08
}
/* "otros" y "NO LLEGAN" se meten hacia arriba para encimarse con la línea de
arriba (el arte los solapa, no los separa). */
.hero-inicio h1 .grande {
display: block;
font-size: 1.9em;
line-height: .82;
margin-top: -.08em
}
/* El brochazo es el trazo de pincel del propio arte, no un rectángulo con las
esquinas mordidas: tiene cerdas y bordes rotos que ningún clip-path imita.
Va como fondo del propio elemento —no en un ::before con insets— para que
se estire exactamente con la caja del texto, mida lo que mida. */
.brochazo {
display: inline-block;
font-size: 1.62em;
line-height: .92;
letter-spacing: .012em;
margin-top: -.14em;
text-transform: uppercase;
padding: .02em .2em .18em;
background: url('img/brochazo.webp') center/100% 100% no-repeat;
}
/* Cada tramo de la palabra sube por su cuenta, con su propio span + transform,
sin tocar el padding de .brochazo (que estiraría distinto el fondo 100% 100%
si se usara para esto). "gan" quieto en su ajuste ya aprobado; "no lle" sube
aparte. */
.brochazo-base {
display: inline-block;
transform: translateY(-.1em);
}
.brochazo-alza {
display: inline-block;
transform: translateY(-.13em);
}
.cifras {
display: flex;
gap: 14px;
margin-top: 20px;
flex-wrap: wrap
}
/* La forma de nube va en un ::before (detrás), NO como máscara del contenido.
Antes se enmascaraba toda la .cifra, así que el texto pegado a los bordes
cóncavos de la nube se RECORTABA por abajo. Ahora la nube es el fondo y el
número/etiqueta van encima (z-index 1), sin recortarse nunca. */
.cifra {
position: relative;
width: 198px;
aspect-ratio: 1/.96;
display: grid;
place-content: center;
text-align: center;
gap: 1px;
color: var(--azul);
padding: 10px 20px;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.cifra::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: #fff;
-webkit-mask-image: var(--nube-chip);
mask-image: var(--nube-chip);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.cifra b,
.cifra span {
position: relative;
z-index: 1
}
/* El chip del medio iba en azul (--azul-chip); Isaías pidió cambiarlo a rojo
como único cambio a este bloque — el contador animado y el resto de la
nube de cifras siguen exactamente igual que siempre. */
.cifra:nth-child(2) {
color: #fff
}
.cifra:nth-child(2)::before {
background: var(--rojo-chip)
}
/* La cifra va en la tipografia de brochazo, no en la sans en peso 900. En el
arte se ven las motas de textura dentro de los trazos, que es justo lo que
distingue a Goodkids de una geometrica engordada. */
.cifra b {
display: block;
font-family: 'Goodkids', cursive;
font-weight: 400;
font-size: 47px;
line-height: .9;
letter-spacing: .01em;
}
/* La etiqueta va en Oliviar Black (peso 900), como el arte: redondeada y con
cuerpo, no en regular. */
.cifra span {
font-size: 15.5px;
font-weight: 900;
line-height: 1.12;
color: var(--negro)
}
.cifra:nth-child(2) span {
color: #fff
}
/* La figura del hero son dos capas: el line-art del arte original detrás y el
niño recortado delante. El niño se ancla abajo a la derecha del trazo, que
es la relación que tienen en el .ai. */
.hero-figura {
margin: 0;
justify-self: end;
align-self: center;
width: 100%
}
.hero-figura img {
width: 100%;
height: auto;
display: block
}
/* nubes blancas en las esquinas del hero */
.nube-esquina {
position: absolute;
z-index: 2;
color: #fff;
pointer-events: none
}
.nube-esquina svg {
display: block;
width: 100%;
height: auto
}
/* La nube de arriba a la izquierda es grande: el logo se posa dentro de ella.
La de abajo a la derecha acompaña al botón Dona flotante y es más chica. */
.nube-esquina.ne-izq {
top: -14px;
left: -34px;
width: min(330px, 34vw)
}
.nube-esquina.ne-der {
bottom: -30px;
right: -46px;
width: min(250px, 26vw)
}
/* --- 7. BANDA "EMPEZÓ CON UN GESTO" --------------------------------------- */
.gesto {
text-align: center;
padding: 96px 0 76px;
background: #fff
}
.gesto h2 {
font-size: clamp(30px, 3.4vw, 44px);
font-weight: 400;
line-height: 1.04
}
.gesto h2 b {
display: block;
font-weight: 900;
font-size: 1.12em;
margin-top: .02em
}
/* COMPROMISO más grande (pedido de la clienta) y las líneas más juntas: la
manuscrita Goodkids pesa poco de alto, así que a igual font-size se veía casi
como "se volvió un". Se sube el tamaño y se le come el interlineado con un
margin-top negativo para quitar el "mucho espacio entre líneas" que marcó. */
.gesto h2 .mano {
display: inline-block;
color: var(--coral);
font-size: clamp(72px, 9vw, 132px);
line-height: .9;
margin-top: -.17em;
position: relative;
}
/* Estrellita dorada del .ai: una grande + una pequeña de compañía, apoyadas
SOBRE la última O de "compromiso". */
.chispas {
position: absolute;
top: .10em;
right: -.40em;
width: .45em;
height: .120em;
pointer-events: none;
}
.chispas svg {
position: absolute;
fill: var(--naranja, #FFA800);
}
.chispas .chispa-g {
width: .34em;
height: .34em;
top: .08em;
left: 0;
}
.chispas .chispa-p {
width: .20em;
height: .20em;
top: 0;
right: 0;
}
.gesto .liga {
display: inline-block;
margin-top: 18px;
font-size: 17px;
border-bottom: 1.5px solid currentColor;
padding-bottom: 2px;
}
.chispa {
color: var(--naranja);
display: inline-block;
vertical-align: super
}
.chispa svg {
width: .5em;
height: .5em;
fill: currentColor
}
/* --- 8. TABLERO DE PROGRAMAS ---------------------------------------------
Damero 3×3: tiles de color plano alternados con fotos recortadas en nube.
En el arte el orden es tile-foto-tile / foto-tile-foto / tile-foto-tile. */
.programas {
padding: 20px 0 60px;
background: #fff
}
.tablero {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 46px;
align-items: center;
position: relative;
}
/* Destellos/rombos entre las tarjetas (como el .ai): rojo, cyan, verde, amarillo. */
.prog-chispa {
position: absolute;
z-index: 4;
pointer-events: none;
height: auto;
}
.prog-chispa use {
fill: currentColor
}
.pc-roja {
color: var(--coral);
width: 34px;
top: -2.5%;
left: 65.5%
}
.pc-cyan {
color: var(--azul);
width: 28px;
top: 31.5%;
left: 32%
}
.pc-verde {
color: #74D000;
width: 28px;
top: 65%;
left: 65.5%
}
.pc-amarilla {
color: #FFA800;
width: 30px;
top: 97.5%;
left: 32%
}
@media (max-width:600px) {
.prog-chispa {
display: none
}
}
/* grid distinto en móvil */
.tile {
border-radius: 26px;
aspect-ratio: 1/.94;
display: flex;
align-items: flex-end;
padding: 34px;
color: #fff;
position: relative;
}
.tile h3 {
font-size: clamp(20px, 1.8vw, 27px);
text-transform: uppercase;
letter-spacing: .005em
}
.t-educacion {
background: var(--azul)
}
.t-cultura {
background: var(--coral)
}
.t-deporte {
background: var(--verde)
}
.t-jornadas {
background: var(--naranja)
}
.t-rural {
background: var(--morado)
}
.foto-nube {
aspect-ratio: 1/.94;
overflow: hidden;
/* Marco festoneado del .ai (extraído de la imagen del cliente). */
-webkit-mask-image: url('img/foto-marco.webp');
mask-image: url('img/foto-marco.webp');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.foto-nube img {
width: 100%;
height: 100%;
object-fit: cover
}
/* destellos sueltos entre las piezas, como en el arte */
.tablero .destello {
position: absolute;
pointer-events: none
}
.tablero .destello svg {
width: 100%;
height: auto;
fill: currentColor
}
/* El detalle de cada programa vive en un panel que se abre: el arte solo
muestra el título, pero el contenido del cliente trae las viñetas. */
.detalle {
margin-top: 14px
}
.detalle summary {
cursor: pointer;
list-style: none;
font-weight: 900;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.detalle summary::-webkit-details-marker {
display: none
}
.detalle summary::after {
content: "+";
font-size: 19px;
line-height: 1
}
.detalle[open] summary::after {
content: "–"
}
.detalle ul {
margin: 12px 0 0;
padding-left: 18px;
font-size: 15px;
line-height: 1.45
}
.detalle li {
margin-bottom: 5px
}
/* --- 9. BANDA DE CIELO + MAPA -------------------------------------------- */
.territorio {
position: relative;
background: var(--azul);
color: #fff;
/* Padding superior recortado (104->54) para que el mapa suba y no quede el
espacio azul vacío que marcó la clienta. El .ai casi no deja intro antes
del mapa. */
padding: 54px 0 96px;
/* Isaías pidió reducir el aire entre "Qué hacemos" y el mapa (venía junto
con los 110px de padding-bottom de .programas, ~188px de vacío total). */
margin-top: 24px;
}
.territorio::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--grano);
opacity: .22;
mix-blend-mode: overlay;
pointer-events: none;
}
.territorio .env {
position: relative;
z-index: 2
}
.territorio h2 {
font-size: clamp(28px, 3.2vw, 42px);
margin-bottom: 10px
}
.territorio .bajada {
max-width: 56ch;
font-weight: 300;
margin-bottom: 20px
}
.mapa-grid {
display: grid;
grid-template-columns: 1.3fr .8fr;
gap: 38px;
align-items: start
}
.mapa-arte {
position: relative
}
.mapa-arte>img {
width: 100%;
height: auto
}
/* La brújula vive ahora colgada de la esquina superior derecha del PANEL, como
en el .ai (antes iba en la esquina del mapa). El panel es su contenedor
relativo; sobresale por el canto con top/right negativos. */
.panel-veredas {
position: relative
}
.compas {
position: absolute;
top: -40px;
right: -24px;
width: 96px;
height: auto;
z-index: 4;
}
.panel-veredas {
background: #fff;
color: var(--negro);
border-radius: 22px;
padding: 26px 28px 28px;
}
/* Borde de pincel blanco de doble línea del panel "Dónde estamos" (extraído del
.ai de Inicio) — reemplaza la sombra dura por el marco pintado a mano. */
.panel-veredas::after {
content: "";
position: absolute;
inset: -13px;
z-index: 2;
pointer-events: none;
border: 15px solid transparent;
border-image: url('img/mapa-panel-marco.webp') 66 / 15px / 0 stretch;
}
.panel-veredas h3 {
font-size: 21px;
margin-bottom: 12px
}
.panel-veredas ul {
margin: 0 0 18px;
padding-left: 18px;
font-size: 15.5px;
line-height: 1.6
}
/* Aquí vivía .panel-veredas .veredas, que enmarcaba img/mapa-veredas.webp: la
foto de un mapa impreso que estaba dentro de este panel. El mapa se rehízo
ilustrado y esa foto salió del marcado, así que la regla se quedó sin a qué
engancharse (medido en Inicio ya renderizada: .panel-veredas existe, y
.panel-veredas .veredas devuelve 0 elementos). Se borra en vez de dejarla:
una regla que no aplica invita a creer que el panel todavía lleva foto. */
.panel-veredas p {
font-size: 15px;
line-height: 1.5;
margin: 0;
font-weight: 300
}
/* --- 10. CTA "TU APOYO" --------------------------------------------------- */
.apoyo {
position: relative;
text-align: center;
background: #fff;
padding: 110px 0 160px;
overflow-x: clip;
overflow-y: visible;
}
.apoyo h2 {
font-size: clamp(20px, 1.8vw, 25px);
font-weight: 400 !important;
line-height: 1.15;
}
.apoyo h2 .tu-word {
font-weight: 400 !important;
font-size: 1.25em !important;
color: var(--negro, #141414);
display: inline-block;
transform: translate(6px, 5px);
margin-right: .12em;
}
.apoyo h2 .mano {
color: var(--coral, #FF4949);
font-size: 2.7em !important;
font-weight: 400 !important;
display: inline-block;
vertical-align: middle;
margin-left: .08em;
line-height: .85;
}
.apoyo p {
max-width: 44ch;
margin: 10px auto 24px;
font-weight: 300;
font-size: 13px
}
.apoyo .botones {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap
}
/* El lazo verde rodea el bloque: va detrás y desbordando el ancho de texto,
como en el arte, por eso se saca del flujo y se estira más allá del 100%. */
/* Las dos líneas verdes van como piezas SEPARADAS (recortadas del lazo original)
para poder anclar cada una a su letra, como el .ai: la izquierda pasa por encima
de la H de "hace" y la derecha cae sobre la O de APOYO. Se posicionan respecto al
centro (calc(50% ± px)) para seguir al título centrado en distintos anchos; el
top es fijo (px) calibrado para desktop. overflow:hidden del apoyo recorta lo que
sobresale por los lados (intencional, como en el arte). */
.apoyo .lazo-izq,
.apoyo .lazo-der {
position: absolute;
left: calc(50% + 83px);
top: -40px;
width: 760px;
height: auto;
z-index: 1;
}
/* Posición calibrada por ancla (botón Dona, fitz get_drawings + CDP
getBoundingClientRect) — left/top NO se tocan aquí, siguen siendo
correctos. Lo que sí estaba mal era el tamaño: 720/550 quedaba ~8% más
grande que el trazo real del .ai (DISENOWEB_ajustes tamanos pag inicio,
página escritorio). Recalibrado por ajuste de curva, no a ojo: se
renderizó el .ai a 1:1 (1pt=1px, confirmado con el propio botón Dona:
183.16pt en el .ai vs 184px en vivo), se extrajo la máscara de alpha del
propio .webp, y se buscó —para un rango de anchos, con el mismo left/top
de siempre— el que minimiza la distancia media de cada píxel del trazo
contra el trazo verde real del .ai (scipy distance_transform_edt). Mínimo
claro en 664px (lazo-izq) y 506px (lazo-der) — ambos con height:auto para
no forzar el aspect-ratio del archivo (557×456 / 678×537), que no
coincide exacto con el bbox del trazo vectorial y no hay que forzarlo
(ver skill §8.1). Casi el mismo factor de escala en los dos (≈0.92):
coherente con que ambos se agrandaron juntos en un ajuste anterior. */
.apoyo .lazo-izq {
left: calc(50% - 1020px);
top: -210px;
width: 830px;
height: auto;
}
.apoyo .lazo-der {
left: calc(50% + 83px);
top: -55px;
width: 760px;
height: auto;
z-index: 1;
}
/* Primer grupo de confetti, arriba a la izquierda (junto a Tu APOYO) */
.apoyo .confetti-izq-arriba {
position: absolute;
left: calc(50% - 290px);
top: 50px;
width: 125px;
z-index: 1;
}
/* Segundo grupo de confetti, abajo a la derecha (junto a los botones), tal
como en el .ai: mismo patron de 4 triangulos que el de "Tu APOYO", medido
y convertido igual (render 1:1 del .ai -> viewBox de esta caja chica). */
.apoyo .confetti-der-abajo {
position: absolute;
left: calc(50% + 340px);
bottom: 240px;
width: 125px;
z-index: 1;
}
.apoyo-caja {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.apoyo-txt {
flex: 0 1 620px
}
/* El título va CENTRADO ("Tu APOYO" centrado sobre "hace la diferencia", como el
arte) y el muñequito se conecta al final de "diferencia": se mete a la izquierda
con margen negativo hasta que los globos rozan la última letra y el lápiz queda
apuntando hacia arriba, hacia la O de APOYO. Así el conjunto queda simétrico y el
muñeco pegado al texto. El ancho real (180px) lo fija personaje.css. */
.apoyo .personaje {
width: 180px;
height: auto;
position: absolute;
left: calc(50% + 80px);
top: -22px;
z-index: 3;
}
/* El margen negativo (solape con el titular para que el lápiz toque la O) es solo
de desktop. En tablet la caja sigue en fila pero más angosta: se anula para que
el muñequito no se monte sobre el texto. En móvil (<600px) ya se centra aparte. */
@media (max-width:900px) {
.apoyo .personaje {
/* El comentario de arriba decía "se anula para que el muñequito no se
monte sobre el texto", pero nunca anulaba position/left/top — sólo
margin/align-self, que no hacen nada sobre un elemento absolute. El
muñeco seguía en position:absolute;top:-22px heredado de escritorio
y quedaba flotando encima de .botones (medido en 768px: se solapaba
con "Dona"/"Quiero ser voluntario"). En móvil (<600px) esto no se
nota porque esa otra media query, más abajo, sí pone su propio
position:absolute!important con coordenadas nuevas y gana por
!important y por ir después en el archivo. */
position: static;
left: auto;
top: auto;
align-self: flex-end;
margin-top: 0;
margin-left: 0;
margin-bottom: 12px
}
}
/* En páginas con rótulo (ul.apoyo-rotulo) el título APOYO baja ~55px dentro de
la caja; en DESKTOP el muñeco (align-self:flex-start) se baja lo mismo para que
el lápiz siga tocando la O y no apunte al rótulo. Tablet (<=900) usa flex-end y
no aplica; móvil (<=600) se ajusta con `top` en su bloque. Se acota a >900 para
no pisar la regla de tablet (que tiene menor especificidad que :has). */
@media (min-width:901px) {
.apoyo-caja:has(.apoyo-rotulo) .personaje {
margin-top: 81px
}
}
/* --- 11. PIE -------------------------------------------------------------- */
.pie {
background: var(--negro);
color: #fff;
padding: 78px 0 0;
position: relative;
}
.pie-corte-lineas {
position: absolute;
bottom: 100%;
margin-bottom: -2px;
left: -2px;
width: calc(100% + 4px);
height: auto;
display: block;
pointer-events: none;
z-index: 10;
}
.pie-grid {
display: grid;
grid-template-columns: 1.1fr .8fr 1fr 1.1fr;
gap: 40px;
align-items: start;
}
.pie img.logo {
height: 74px;
width: auto;
margin-bottom: 26px
}
.pie-redes {
display: flex;
gap: 20px
}
.pie-redes a {
display: grid;
place-items: center
}
.pie-redes svg {
width: 26px;
height: 26px;
fill: #fff
}
.pie h4 {
font-size: 16px;
margin-bottom: 14px;
letter-spacing: .02em
}
.pie ul {
list-style: none;
margin: 0;
padding: 0
}
.pie ul li {
margin-bottom: 12px
}
.pie ul a {
font-weight: 300;
font-size: 17px
}
.pie ul a:hover {
color: var(--verde)
}
.sede {
margin-bottom: 22px;
font-weight: 300
}
.sede b {
display: block;
font-weight: 900;
letter-spacing: .02em
}
.sede .princ {
color: var(--verde);
font-weight: 400
}
/* El .ai trae la tarjeta en dos verdes (--verde de base, --verde-mapa en las
franjas), no un verde liso. Franjas verticales con un borde suave en vez de
duro: en el arte ondulan un poco, y el blend de 12px es la aproximación en
gradiente que más se acerca sin tener que exportar una imagen. */
.boletin {
background: repeating-linear-gradient(90deg,
var(--verde-mapa) 0px, var(--verde-mapa) 28px,
var(--verde) 40px, var(--verde) 68px,
var(--verde-mapa) 80px);
border-radius: 14px;
padding: 20px 22px 22px;
color: var(--negro);
position: relative;
overflow: hidden;
}
.boletin::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--grano);
opacity: .3;
mix-blend-mode: multiply;
pointer-events: none;
}
.boletin>* {
position: relative
}
.boletin b {
display: block;
font-size: 17px
}
.boletin small {
display: block;
font-size: 13px;
font-weight: 300;
line-height: 1.3;
margin-bottom: 2px
}
.boletin .mano {
display: block;
color: #fff;
font-size: 56px;
margin: 2px 0 12px
}
.boletin form {
display: flex;
background: var(--negro);
border-radius: 999px;
padding: 6px 6px 6px 20px
}
.boletin input {
flex: 1;
border: 0;
background: transparent;
color: #fff;
font: inherit;
font-size: 15px;
min-width: 0;
}
.boletin input::placeholder {
color: #bdbdbd
}
.boletin input:focus {
outline: none
}
.boletin button {
flex: none;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--negro);
display: grid;
place-items: center;
cursor: pointer;
}
.boletin button svg {
width: 18px;
height: 18px;
fill: currentColor
}
.contacto-pie {
margin-top: 16px;
font-weight: 900;
font-size: 17px;
line-height: 1.45
}
.pie-legal {
margin-top: 60px;
border-top: 1px solid #2c2c2c;
padding: 18px 0 22px;
display: flex;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 300;
}
.pie-legal b {
font-weight: 900
}
.pie-legal nav {
display: flex;
gap: 26px;
flex-wrap: wrap
}
/* --- 12. HERO DE NOSOTROS ------------------------------------------------- */
/* 2026-08-24: banner nuevo del cliente (BANNER NOSOTROS_FONDO~2.jpg + BANNER
NOSOTROS TEXTO.png, aplanados en un solo archivo nos-hero-banner-*.webp;
offset del texto medido por diff de píxeles contra el BANNER NOSOTROS.png
de referencia: x897,y580 sobre el lienzo 6000×3119 original, sin escalar).
Reemplaza la composición anterior (título aparte + niño + 6 capas de
garabatos, cada una animada en nosotros-anim.css) — el fondo azul, la nube
de esquina y los garabatos ya vienen horneados en la foto nueva. Por eso
se cae a un solo a ancho completo en vez del grid título|figura:
ver profundidad.css para el resto de los ajustes de esta sección (fondo
CSS retirado, festón retirado). */
.hero-nos {
position: relative;
overflow: hidden;
margin-top: calc(-1 * var(--nav-alto) - 26px);
}
.hero-nos .nube-esquina {
display: none !important;
}
.hero-nos-grid {
position: relative;
display: block;
line-height: 0;
}
.hero-nos-grid img.hero-nos-fondo {
display: block;
width: 100%;
height: auto;
}
/* Texto "Más que un gesto un compromiso" en capa propia sobre el fondo, para
poder animarlo (gesto rv-mano, ver animaciones.js) — el fondo solo no lo
trae horneado. Offset por diff de píxeles contra el .ai del cliente (ver
comentario en nosotros.html): 14.95%/18.62% de left/top, ancho 47.18% del
lienzo 6000×3115. % en vez de cqw porque .hero-nos-grid no declara
container-type — como el ancho y el alto escalan juntos vía height:auto
del fondo, top/left/width en % del propio contenedor caen en el mismo
punto a cualquier ancho. */
.hero-nos-texto {
position: absolute;
left: 14.95%;
top: 18.62%;
width: 47.18%;
height: auto;
z-index: 2;
}
/* Banner morado con la princesa: solo se muestra en móvil (ver @media 600). */
.nos-hero-movil {
display: none
}
/* --- 13. HISTORIA (Nosotros) ---------------------------------------------- */
.historia {
padding: 100px 0 90px;
background: #fff
}
.historia-grid {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 56px;
align-items: center
}
.historia p {
font-size: 18px;
line-height: 1.45;
font-weight: 300
}
.historia p strong {
font-weight: 900
}
.historia figure {
margin: 0;
text-align: center
}
.historia figure img {
width: min(100%, 380px);
height: auto;
margin-inline: auto
}
/* Los muñequitos se paran SOBRE la tarjeta de Misión, como el nosotros.ai: se
cierra el hueco entre la historia y M/V y la figura baja para que los pies
caigan en el borde superior de la nube azul. z-index alto para ir por encima
de la tarjeta. */
.historia {
padding-bottom: 0
}
/* Los muñequitos van DELANTE de la tarjeta de Misión: se eleva la sección
historia por encima de M/V (z-index). Para que eso NO tape el sello de Visión
—que asoma en M/V— la historia va con fondo TRANSPARENTE: el body es blanco, así
que se ve idéntico y el sello se transparenta por debajo donde no hay muñeco. */
.historia {
position: relative;
z-index: 2;
background: transparent
}
.mv {
z-index: 1
}
.historia figure {
position: relative;
z-index: 8;
margin-bottom: -120px
}
/* La columna de texto no lleva el margen negativo de la figura, así que su
propio borde inferior SÍ marca dónde termina .historia (padding-bottom:0,
ver arriba). Medido: quedaba pegada a 0px del arranque de la banda azul de
Misión, sin aire — el texto "se subía" encima de la etiqueta "Misión".
Este margen es SOLO de la columna de texto: no toca la figura ni su
solape intencional con la nube. */
.historia-grid>div {
margin-bottom: 60px
}
/* --- 14. MISIÓN / VISIÓN -------------------------------------------------- */
/* En el .ai el azul NO es una tarjeta: es el fondo de toda la sección, de
borde a borde (ver los