/* Sitio público — Fundación Por un Sueño by Academia Javier Mascherano
------------------------------------------------------------------
La bandera de Barranquilla (1910), a la hora en que se entrena.
Los tres colores siguen siendo los de la ciudad —rojo, amarillo, verde—, pero
medidos sobre las fotografías del propio sitio en vez de tomados en primario
digital. El muestreo de las cuatro imágenes dio: cielo en 214°, cálidos de
pared y hormigón entre 25° y 40°, césped entre 61° y 81°. El esmeralda que
usaba antes esta hoja (#0E6B45, matiz 157°) no aparecía en ninguna: por eso
las fotografías se veían pegadas encima en vez de dentro de la página.
De ahí el cambio de suelo. El fondo dominante ya no es un verde de marca sino
el azul del atardecer costeño, que es a la vez el cielo de las fotos y el
color del uniforme. Los tres de la bandera quedan donde el sitio los usa de
verdad:
marino ~60% cabecera, portada, bloques invertidos, contacto
neutros ~30% toda la lectura larga
ladrillo ~7% acentos, la acción (botones) y UN estado (en trámite)
ocre ~3% un solo punto de luz por pantalla
cancha — el verde sobrevive donde es césped: el estado «verificado»
El ocre NUNCA va sobre crema: 2.69:1. Solo vive sobre marino hondo, sobre
ladrillo, o relleno con `tinta` encima.
Los hexadecimales vienen de la skill `identidad-visual-caribe` y su contraste
está medido; no se aclara ni se oscurece ninguno.
Sin fuentes ni recursos externos: la CSP del servidor solo permite lo propio. */
:root {
/* Identidad — la bandera bajo la luz del Caribe a media tarde */
--marino: #1D3446;
--marino-hondo: #12212E;
--ladrillo: #A33A2B;
--ladrillo-vivo: #C9563F;
--ocre: #C8873A;
--ocre-claro: #E3B473;
/* Verde de césped medido en las fotos (81°), no verde de marca. */
--cancha: #55692F;
/* Neutros — la cal de las fachadas y la arena del Caribe */
--cal: #F7F2E7;
--arena: #DED2BE;
--tinta: #191510;
--humo: #6C6257;
/* Tintes de la cal para superficies sobre fondo claro y textos sobre marino.
No son colores nuevos: son la misma cal a distinta opacidad. */
--cal-vel: rgba(255, 255, 255, .58);
--sobre-marino: rgba(247, 242, 231, .82);
--sobre-marino-tenue: rgba(247, 242, 231, .58);
--filete-marino: rgba(247, 242, 231, .16);
--display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
--dato: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--ancho: 1120px;
--medida: 64ch;
--paso: clamp(64px, 9vw, 128px);
--curva: cubic-bezier(.2, .7, .3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cal);
color: var(--tinta);
font-family: var(--texto);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }
p { margin: 0; }
a { color: inherit; }
/* Foco: ladrillo sobre claro (5.88:1). Sobre los bloques marinos el ladrillo se
apaga, así que ahí manda el ocre (5.44:1). */
:focus-visible {
outline: 2px solid var(--ladrillo);
outline-offset: 3px;
border-radius: 2px;
}
.cabecera :focus-visible,
.portada :focus-visible,
.seccion-invertida :focus-visible,
.seccion-contacto :focus-visible,
.pie :focus-visible { outline-color: var(--ocre); }
.saltar {
position: absolute;
left: -9999px;
top: 0;
background: var(--marino-hondo);
color: var(--cal);
padding: 12px 18px;
z-index: 99;
}
.saltar:focus { left: 12px; top: 12px; }
/* ---------- Cabecera ---------- */
.cabecera {
position: sticky;
top: 0;
z-index: 20;
background: var(--marino-hondo);
border-bottom: 1px solid var(--filete-marino);
}
.aviso-prototipo {
margin: 0;
padding: 5px 20px;
background: var(--ladrillo);
color: var(--cal);
font-family: var(--dato);
font-size: 9.5px;
line-height: 1.4;
letter-spacing: .15em;
text-align: center;
text-transform: uppercase;
}
.cabecera-fila {
max-width: var(--ancho);
margin: 0 auto;
padding: 13px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
position: relative;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cal); }
/* El emblema es la bandera de la ciudad: tres rectángulos concéntricos y la
estrella de ocho puntas. Va en SVG dentro del HTML porque la CSP prohíbe
cualquier recurso externo. */
.marca-emblema { width: 34px; height: 34px; flex: none; display: block; }
.marca-texto b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: .01em; }
.marca-texto small {
display: block;
font-family: var(--dato);
font-size: 9.5px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--sobre-marino-tenue);
margin-top: 1px;
}
.navegacion { display: flex; align-items: center; gap: 17px; }
.menu-movil {
display: none;
align-items: center;
gap: 8px;
border: 1px solid var(--filete-marino);
border-radius: 2px;
padding: 8px 10px;
background: transparent;
color: var(--cal);
font: 600 11px/1 var(--dato);
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
.menu-movil-icono,
.menu-movil-icono::before,
.menu-movil-icono::after {
display: block;
width: 16px;
height: 1px;
background: currentColor;
content: "";
transition: transform .18s var(--curva), opacity .18s var(--curva);
}
.menu-movil-icono { position: relative; }
.menu-movil-icono::before { position: absolute; top: -5px; }
.menu-movil-icono::after { position: absolute; top: 5px; }
.menu-movil[aria-expanded="true"] .menu-movil-icono { background: transparent; }
.menu-movil[aria-expanded="true"] .menu-movil-icono::before { transform: translateY(5px) rotate(45deg); }
.menu-movil[aria-expanded="true"] .menu-movil-icono::after { transform: translateY(-5px) rotate(-45deg); }
.navegacion a {
color: var(--sobre-marino);
text-decoration: none;
font-size: 12.5px;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: color .18s, border-color .18s;
}
.navegacion a:hover { color: var(--cal); border-bottom-color: var(--ocre); }
/* La acción es roja en todo el sitio: un solo color para «esto hace algo». */
.navegacion .nav-cta {
background: var(--ladrillo);
border: 1px solid var(--ladrillo);
border-bottom-color: var(--ladrillo);
border-radius: 2px;
padding: 7px 16px;
color: var(--cal);
transition: background .18s, color .18s;
}
.navegacion .nav-cta:hover { background: transparent; color: var(--cal); border-color: var(--cal); }
/* ---------- Portada ---------- */
/* El relleno lateral centra la columna. No se usa `margin-inline: auto` en los
hijos: los que tienen su propio max-width quedarían centrados en lugar de
alineados con el resto. */
.portada {
background: var(--marino-hondo);
color: var(--cal);
padding: clamp(60px, 8vw, 104px) max(28px, calc((100% - var(--ancho)) / 2)) clamp(48px, 6vw, 76px);
position: relative;
overflow: hidden;
}
/* Retícula de medición en vez del resplandor radial anterior. El degradado
suave es el gesto por defecto de todo lo generado; una rejilla visible dice
«esto se mide», que es de lo que trata el sitio. */
.portada::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(to right, rgba(247, 242, 231, .055) 0 1px, transparent 1px 92px),
repeating-linear-gradient(to bottom, rgba(247, 242, 231, .055) 0 1px, transparent 1px 92px);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
pointer-events: none;
}
.portada > * { position: relative; z-index: 1; }
.denominacion {
font-family: var(--dato);
font-size: clamp(9.5px, 1.15vw, 11.5px);
letter-spacing: .2em;
color: var(--sobre-marino);
padding-left: 13px;
border-left: 2px solid var(--ladrillo);
margin-bottom: 26px;
}
.lema {
font-size: clamp(42px, 7.4vw, 90px);
letter-spacing: -.024em;
}
/* El único punto de luz de la portada. Ocre sobre marino hondo: 5.44:1. */
.lema em { font-style: italic; color: var(--ocre); }
.entrada {
margin-top: 30px;
max-width: 56ch;
font-size: clamp(16.5px, 1.75vw, 19.5px);
color: var(--sobre-marino);
}
/* Texto corrido editorial; las piezas breves y funcionales conservan bandera izquierda. */
:where(
.portada .entrada,
.prosa p,
.seccion-cabeza .bajada,
.proposito-texto,
.proposito-completo,
.dimensiones p,
.conviccion > p:not(.destacada),
.destinatarios-intro,
.destinatarios-nota,
.advertencia,
.advertencia-esencial p:not(.etiqueta),
.impacto > p:not([class]),
.preguntas details p,
.pie-legal > p:not(.pie-pendiente)
) {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
text-align-last: left;
}
/* La ficha es un registro, no un escaparate: toda en monoespaciada. */
.ficha {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--filete-marino);
}
.ficha > div { padding: 16px 20px 0 0; border-right: 1px solid var(--filete-marino); }
.ficha > div:last-child { border-right: 0; }
.ficha dt {
font-family: var(--dato);
font-size: 9.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--sobre-marino-tenue);
}
.ficha dd { margin: 7px 0 0; font-family: var(--dato); font-size: 13.5px; color: var(--cal); }
.nota-portada {
margin-top: 38px;
padding-left: 16px;
border-left: 2px solid var(--ocre);
max-width: 62ch;
font-size: 14.5px;
color: var(--sobre-marino);
}
.nota-portada a { color: var(--ocre); text-underline-offset: 3px; }
/* Ilustraciones originales: figuras en movimiento, sin personas identificables. */
.juego { display: block; width: 100%; max-width: var(--ancho); height: auto; margin-top: 40px; }
.cancha { display: block; width: 100%; height: auto; margin-bottom: 34px; }
/* ---------- Misión y visión ---------- */
/* Asimétrico a propósito: dos columnas idénticas son la firma de la plantilla. */
.proposito { display: grid; grid-template-columns: 1.12fr .88fr; gap: 1px; background: var(--arena); }
.proposito-bloque { background: var(--cal); padding: 36px 34px 36px 0; }
.proposito-bloque:nth-child(2) { padding-left: 34px; }
.proposito-texto {
font-family: var(--display);
font-size: clamp(19px, 2.2vw, 24px);
line-height: 1.45;
letter-spacing: -.008em;
max-width: 40ch;
}
.proposito-bloque:nth-child(2) .proposito-texto { font-size: clamp(17.5px, 1.9vw, 20.5px); color: var(--humo); }
.proposito-nota { margin-top: 26px; font-size: 13.5px; color: var(--humo); max-width: 66ch; }
/* ---------- Secciones ---------- */
.seccion {
max-width: var(--ancho);
margin-inline: auto;
padding: var(--paso) 28px;
}
.seccion-cabeza { max-width: var(--medida); margin-bottom: 48px; }
.etiqueta {
font-family: var(--dato);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ladrillo);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 9px;
}
/* Filete rojo corto: el acento de la bandera aparece como marca de sección, no
como relleno. Es la mayor parte del 7% de rojo del sitio. */
.etiqueta::before {
content: "";
width: 22px;
height: 2px;
background: var(--ladrillo);
flex: none;
}
.seccion-cabeza h2 { font-size: clamp(31px, 4.4vw, 47px); letter-spacing: -.015em; }
.bajada { margin-top: 18px; color: var(--humo); font-size: 16.5px; }
.seccion-invertida {
max-width: none;
background: var(--marino);
color: var(--cal);
padding-inline: max(28px, calc((100% - var(--ancho)) / 2));
}
.seccion-invertida .etiqueta { color: var(--ocre); }
.seccion-invertida .etiqueta::before { background: var(--ocre); }
.seccion-invertida .bajada { color: var(--sobre-marino); }
/* ---------- La ruta (numeración justificada: es una secuencia real) ---------- */
.ruta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ruta li {
display: grid;
grid-template-columns: 92px 1fr;
/* Solo separación entre columnas: el título y su párrafo son dos filas de la
misma columna y su distancia la fija el margen del , no la rejilla. */
column-gap: 28px;
row-gap: 0;
padding: 28px 0;
border-top: 1px solid var(--arena);
align-items: start;
}
.ruta li:last-child { border-bottom: 1px solid var(--arena); }
.ruta-num {
font-family: var(--dato);
font-size: 13px;
letter-spacing: .1em;
color: var(--ladrillo);
padding-top: 5px;
}
/* El
tiene tres hijos y la rejilla, dos columnas: sin esto la colocación
automática manda el párrafo a la segunda fila de la columna del número y lo
deja en 92 px de ancho. Ambos textos van a la columna 2, uno bajo el otro. */
.ruta h3, .ruta p { grid-column: 2; }
.ruta h3 { font-size: 25px; margin-bottom: 9px; }
.ruta p { color: var(--humo); max-width: 60ch; font-size: 15.5px; }
/* ---------- Pilares ---------- */
/* Rejilla desigual: el primer pilar manda y los otros tres callan. Cuatro
tarjetas idénticas en 2×2 son exactamente el patrón que delata la plantilla. */
.pilares { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1px; background: var(--filete-marino); }
.pilares article { background: var(--marino); padding: 30px 30px 30px 0; }
.pilares article:nth-child(even) { padding-left: 30px; }
.pilares article:first-child { grid-column: 1 / -1; padding-right: 0; border-bottom: 0; }
/* El último también cruza: con cuatro artículos y el primero extendido, quedaban
tres en dos columnas y la celda inferior derecha se abría como un agujero en
una rejilla con filetes. Extendido, el bloque enmarca —principio y decisión
a lo ancho, las dos reglas operativas emparejadas en medio. */
.pilares article:last-child { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
.pilares h3 { font-size: 20px; margin-bottom: 10px; color: var(--cal); }
.pilares article:first-child h3 { font-size: clamp(24px, 3vw, 31px); max-width: 22ch; }
.pilares p { color: var(--sobre-marino); font-size: 15px; max-width: 46ch; }
.pilares article:first-child p { font-size: 16.5px; max-width: 58ch; }
/* ---------- Expediente: el elemento distintivo ---------- */
.leyenda { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
/* Los chips sostienen la promesa del sitio. Monoespaciada, sin redondear, con
una marca de forma además del color: quien no distinga los colores igual
distingue lleno / medio / punteado. */
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--dato);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
padding: 5px 11px 5px 9px;
border-radius: 1px;
white-space: nowrap;
}
.chip::before {
content: "";
width: 7px; height: 7px;
flex: none;
}
/* Verificado = verde de césped: lo único que ya está sostenido. */
.chip.verificado { background: rgba(85, 105, 47, .1); color: var(--cancha); border: 1px solid rgba(85, 105, 47, .45); }
.chip.verificado::before { background: var(--cancha); }
/* En trámite = ladrillo en contorno. La skill reserva el rojo para «un estado»;
el ámbar habitual quedaría ilegible sobre crema (2.69:1) y relleno gastaría en
varias filas el único punto de ocre que admite la pantalla. */
.chip.en_tramite { background: transparent; color: var(--ladrillo); border: 1px solid rgba(163, 58, 43, .5); }
.chip.en_tramite::before { background: linear-gradient(90deg, var(--ladrillo) 50%, transparent 50%); border: 1px solid var(--ladrillo); }
/* Previsto = neutro punteado: todavía no es nada. */
.chip.previsto { background: transparent; color: var(--humo); border: 1px dashed rgba(108, 98, 87, .55); }
.chip.previsto::before { border: 1px solid var(--humo); }
.expediente { list-style: none; margin: 0; padding: 0; }
.expediente li {
display: grid;
grid-template-columns: 148px 1fr;
gap: 28px;
padding: 24px 0;
border-top: 1px solid var(--arena);
align-items: start;
}
.expediente li:last-child { border-bottom: 1px solid var(--arena); }
/* El chip se dimensiona por su texto: como celda de la rejilla se estiraría
hasta ocupar toda la columna y se leería como un botón. */
.expediente .chip { justify-self: start; margin-top: 3px; }
.expediente li.cargando {
display: block;
color: var(--humo);
font-family: var(--dato);
font-size: 13px;
border-bottom: 1px solid var(--arena);
}
.expediente h3 { font-size: 20px; margin-bottom: 8px; }
.expediente p { color: var(--humo); font-size: 15px; max-width: 62ch; }
.advertencia {
margin-top: 38px;
padding: 22px 26px;
background: var(--cal-vel);
border: 1px solid var(--arena);
border-left: 3px solid var(--ladrillo);
font-size: 14.5px;
color: var(--tinta);
max-width: 72ch;
}
.advertencia-esencial {
margin: 0 0 30px;
padding: 24px 26px;
border: 1px solid var(--arena);
border-left: 4px solid var(--ladrillo);
background: rgba(163, 58, 43, .055);
max-width: 76ch;
}
.advertencia-esencial .etiqueta { color: var(--ladrillo); margin-bottom: 10px; }
.advertencia-esencial h3 { font-size: clamp(20px, 2.4vw, 25px); margin-bottom: 14px; }
.advertencia-esencial p:not(.etiqueta) { color: var(--humo); font-size: 14.5px; }
.advertencia-esencial p + p { margin-top: 12px; }
.aviso-noscript {
margin: -12px 0 30px;
padding: 14px 16px;
border: 1px dashed var(--ladrillo);
color: var(--tinta);
font-size: 13.5px;
max-width: 76ch;
}
/* ---------- Tarjetas ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.tarjetas:empty { display: none; }
.tarjeta {
background: var(--cal-vel);
border: 1px solid var(--arena);
border-top: 2px solid var(--marino);
padding: 24px;
}
.tarjeta h3 { font-size: 20px; margin-bottom: 9px; }
.tarjeta p { color: var(--humo); font-size: 15px; }
.tarjeta .meta { font-family: var(--dato); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ladrillo); margin-bottom: 12px; }
.vacio {
grid-column: 1 / -1;
padding: 38px 26px;
border: 1px dashed var(--arena);
color: var(--humo);
font-family: var(--dato);
font-size: 13.5px;
line-height: 1.7;
}
/* ---------- Contacto ---------- */
.seccion-contacto { max-width: none; background: var(--marino-hondo); color: var(--cal); }
.contacto-envoltura {
max-width: var(--ancho);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(40px, 6vw, 88px);
align-items: start;
}
.seccion-contacto .etiqueta { color: var(--ocre); }
.seccion-contacto .etiqueta::before { background: var(--ocre); }
.seccion-contacto h2 { font-size: clamp(31px, 4.4vw, 47px); }
.seccion-contacto .bajada { color: var(--sobre-marino); }
.aviso-menores {
margin-top: 26px;
padding: 16px 18px;
border: 1px solid var(--filete-marino);
border-left: 2px solid var(--ladrillo-vivo);
font-size: 14px;
color: var(--sobre-marino);
}
.aviso-menores strong { color: var(--cal); }
/* Qué ocurre tras enviar: es un proceso real, por eso va numerado. */
.proceso { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.proceso li {
display: grid;
grid-template-columns: 26px 1fr;
gap: 12px;
align-items: baseline;
font-size: 14.5px;
color: var(--sobre-marino);
}
.proceso span {
font-family: var(--dato);
font-size: 11px;
color: var(--cal);
border: 1px solid var(--filete-marino);
width: 24px; height: 24px;
display: inline-grid;
place-items: center;
}
.nota-datos { margin-top: 22px; font-size: 13px; color: var(--sobre-marino-tenue); max-width: 44ch; }
.formulario { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo label {
font-family: var(--dato);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sobre-marino-tenue);
}
.opcional { text-transform: none; letter-spacing: 0; color: var(--sobre-marino-tenue); }
.campo input, .campo select, .campo textarea {
font: inherit;
font-size: 15.5px;
color: var(--cal);
background: rgba(247, 242, 231, .06);
border: 1px solid rgba(247, 242, 231, .2);
border-radius: 2px;
padding: 11px 13px;
width: 100%;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ocre); background: rgba(247, 242, 231, .1); }
.campo select option { color: var(--tinta); }
/* Rojo = acción, igual que en la cabecera. Cal sobre rojo patriota: 6.77:1. */
.boton {
font: inherit;
font-weight: 600;
font-size: 15px;
background: var(--ladrillo);
color: var(--cal);
border: 1px solid var(--ladrillo);
border-radius: 2px;
padding: 13px 26px;
cursor: pointer;
justify-self: start;
transition: background .18s, color .18s, border-color .18s;
}
.boton:hover { background: transparent; color: var(--cal); border-color: var(--cal); }
.boton[disabled] { opacity: .55; cursor: progress; }
.resultado { font-size: 14.5px; min-height: 1.2em; }
/* El acierto es «lo que se celebra»: ahí sí entra el sol. */
.resultado.ok { color: var(--ocre); }
/* En error el color no carga el significado (el rojo no contrasta sobre marino
hondo): lo carga el texto, y el filete solo acompaña. */
.resultado.error { color: var(--cal); padding-left: 11px; border-left: 2px solid var(--ladrillo-vivo); }
/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: var(--sobre-marino-tenue); padding: 60px 28px 26px; }
.pie-fila {
max-width: var(--ancho);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 48px;
padding-bottom: 34px;
border-bottom: 1px solid var(--filete-marino);
}
.pie-denominacion {
font-family: var(--dato);
font-size: 11px;
letter-spacing: .13em;
color: var(--cal);
line-height: 1.7;
padding-left: 12px;
border-left: 2px solid var(--ladrillo);
}
.pie-lugar { margin-top: 12px; font-size: 14px; }
.pie-legal { display: grid; gap: 12px; font-size: 13.5px; max-width: 70ch; color: var(--sobre-marino); }
.pie-base {
max-width: var(--ancho);
margin: 22px auto 0;
display: flex;
justify-content: space-between;
gap: 20px;
font-family: var(--dato);
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--sobre-marino-tenue);
}
.pie-base a { color: var(--sobre-marino); text-decoration: none; border-bottom: 1px solid rgba(200, 135, 58, .45); }
.pie-base a:hover { color: var(--ocre); }
/* ---------- Movimiento ----------
Un solo momento orquestado (la entrada de la portada) y un revelado sutil una
sola vez por elemento. Nada parpadea, nada flota, nada cuenta números. */
@media (prefers-reduced-motion: no-preference) {
.portada > * { animation: subir .8s var(--curva) backwards; }
.portada .denominacion { animation-delay: .05s; }
.portada .lema { animation-delay: .14s; }
.portada .entrada { animation-delay: .26s; }
.portada .ficha { animation-delay: .36s; }
.portada .nota-portada { animation-delay: .46s; }
.portada .juego { animation-delay: .54s; }
@keyframes subir {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* La ilustración entra como un escalón más de la portada, no con vida propia:
la trayectoria ya es discontinua y animar su `stroke-dashoffset` la haría
desfilar en vez de dibujarse. Un solo momento orquestado por página. */
.revelar { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--curva), transform .55s var(--curva); }
.revelar.visible { opacity: 1; transform: none; }
}
/* ---------- Adaptación ---------- */
@media (max-width: 900px) {
.proposito { grid-template-columns: 1fr; }
.proposito-bloque, .proposito-bloque:nth-child(2) { padding: 28px 0; }
.contacto-envoltura { grid-template-columns: 1fr; }
.pilares { grid-template-columns: 1fr; }
.pilares article, .pilares article:nth-child(even), .pilares article:first-child { padding: 26px 0; }
.pie-fila { grid-template-columns: 1fr; gap: 28px; }
.ficha { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.ficha > div:nth-child(2) { border-right: 0; }
}
@media (max-width: 680px) {
body { font-size: 16px; }
.juego { margin-top: 30px; }
.aviso-prototipo { padding-inline: 12px; font-size: 8.5px; letter-spacing: .11em; }
.cabecera-fila { padding: 11px 20px; flex-wrap: wrap; gap: 12px; }
.navegacion {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 14px;
padding-top: 10px;
border-top: 1px solid var(--filete-marino);
}
.navegacion a,
.navegacion .nav-cta { display: block; padding: 8px 0; background: transparent; border: 0; color: var(--sobre-marino); }
.js .cabecera-fila { flex-wrap: nowrap; }
.js .menu-movil { display: inline-flex; }
.js .navegacion {
display: none;
position: absolute;
z-index: 30;
top: 100%;
left: 0;
right: 0;
width: auto;
padding: 12px 18px 16px;
background: var(--marino-hondo);
border: 1px solid var(--filete-marino);
border-top-color: transparent;
box-shadow: 0 18px 34px rgba(18, 33, 46, .24);
}
.js .navegacion.abierta { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.js .navegacion .nav-cta { color: var(--cal); }
.portada { padding-inline: 20px; }
.seccion { padding-inline: 20px; }
.pie { padding-inline: 20px; }
.ruta li, .expediente li { grid-template-columns: 1fr; gap: 12px; }
/* Una sola columna: el `grid-column: 2` del escritorio ya no existe aquí. */
.ruta h3, .ruta p { grid-column: 1; }
.ruta-num { padding-top: 0; }
.campo-par { grid-template-columns: 1fr; }
.pie-base { flex-direction: column; gap: 10px; }
}
/* ---------- Fotografía ----------
Toda imagen con personas es de referencia y lo dice encima, con el mismo
lenguaje de chips del expediente: el sitio no puede sostener su tesis de
transparencia y a la vez insinuar una actividad que no existe.
El encuadre se recorta con object-fit en vez de deformarse, y cada figura
reserva su espacio con aspect-ratio para que nada salte al cargar. */
.banda { margin: 0; position: relative; }
/* `height: auto` es obligatorio: los atributos width/height del HTML —que están
para reservar el espacio y evitar el salto al cargar— actúan como altura
declarada, y con una altura declarada el navegador ignora `aspect-ratio`. Sin
esto la banda se estiraba a 540 px en un móvil de 844. */
.banda img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
max-height: min(64vh, 580px);
object-fit: cover;
object-position: 50% 42%;
}
.banda figcaption,
.figura figcaption {
font-family: var(--dato);
font-size: 11px;
letter-spacing: .04em;
color: var(--humo);
line-height: 1.6;
}
.banda figcaption {
max-width: var(--ancho);
margin-inline: auto;
padding: 12px 28px 0;
}
.banda .chip { position: absolute; top: 18px; left: 18px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.figura { margin: 0; position: relative; }
.figura img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border: 1px solid var(--arena);
}
.figura .chip { position: absolute; top: 12px; left: 12px; }
.figura figcaption { margin-top: 12px; }
/* A todo el ancho de la columna: el recorte se abre a 16:9 para que una imagen
sola no se coma la pantalla de alto. */
.figura.ancha img { aspect-ratio: 16 / 9; object-position: 50% 38%; }
/* La cal opaca detrás del chip lo mantiene legible sobre cualquier fotografía:
sobre imagen no hay contraste garantizado, así que se fabrica uno. */
.chip.referencia {
background: var(--cal);
color: var(--humo);
border: 1px solid var(--arena);
max-width: calc(100% - 24px);
white-space: normal;
line-height: 1.45;
}
.chip.referencia::before { border: 1px solid var(--humo); }
/* Archivo ausente: en vez del icono roto del navegador, el mismo hueco
punteado que ya usa el expediente para lo que todavía no existe. */
.figura.sin-archivo img,
.banda.sin-archivo img { display: none; }
.lugar-hueco {
aspect-ratio: 3 / 2;
display: grid;
place-content: center;
gap: 12px;
justify-items: center;
text-align: center;
padding: 20px;
border: 1px dashed var(--arena);
background:
repeating-linear-gradient(45deg, rgba(222, 210, 190, .22) 0 10px, transparent 10px 20px);
color: var(--humo);
}
.banda .lugar-hueco { aspect-ratio: 16 / 9; max-height: min(64vh, 580px); }
.lugar-hueco p { font-size: 13.5px; max-width: 34ch; }
/* ---------- Cómo apoyar ---------- */
.apoyos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--filete-marino); }
.apoyo { background: var(--marino); padding: 30px 26px 30px 0; }
.apoyo:not(:first-child) { padding-left: 26px; }
/* Numeración justificada: son tres vías distintas, no una secuencia; el número
ordena la lectura, por eso queda tenue y no compite con el titular. */
.apoyo-num {
font-family: var(--dato);
font-size: 12px;
letter-spacing: .1em;
color: var(--ocre);
margin-bottom: 14px;
}
.apoyo h3 { font-size: 21px; margin-bottom: 10px; color: var(--cal); }
.apoyo > p { color: var(--sobre-marino); font-size: 15px; }
.apoyo-estado {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
font-size: 13px;
color: var(--sobre-marino-tenue);
}
.seccion-invertida .chip.previsto { color: var(--sobre-marino-tenue); border-color: var(--filete-marino); }
.seccion-invertida .chip.previsto::before { border-color: var(--sobre-marino-tenue); }
.seccion-invertida .chip.en_tramite { color: var(--ocre); border-color: var(--ocre); }
.seccion-invertida .chip.en_tramite::before { background: linear-gradient(90deg, var(--ocre) 50%, transparent 50%); border-color: var(--ocre); }
.apoyo-cta {
display: inline-block;
margin-top: 18px;
font-size: 14px;
color: var(--ocre);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .18s;
}
.apoyo-cta:hover { border-bottom-color: var(--ocre); }
.apoyo-nota { margin-top: 30px; font-size: 13.5px; color: var(--sobre-marino-tenue); max-width: 70ch; }
@media (max-width: 900px) {
.par { grid-template-columns: 1fr; }
.apoyos { grid-template-columns: 1fr; }
.apoyo, .apoyo:not(:first-child) { padding: 26px 0; }
}
/* ---------- Contenido institucional ----------
Bloques añadidos al incorporar el contenido aprobado: quiénes somos, las
cinco dimensiones del modelo, los valores, a quiénes acompaña la Fundación,
qué se va a medir y las preguntas frecuentes.
Ninguno estrena un lenguaje visual propio. Todos reutilizan los tres que el
sitio ya tenía —la fila con filete, el bloque marino y el distintivo de
estado— porque una sección nueva con su propia gramática es lo que convierte
una página en un catálogo de plantillas. */
/* Lectura corrida. La medida manda: 62ch es el límite en el que un párrafo
sigue siendo legible sin que el ojo pierda el renglón al volver. */
.prosa { display: grid; gap: 20px; max-width: 62ch; }
.prosa p { font-size: 16.5px; }
/* Frase destacada: la misma marca roja de sección, girada a filete vertical.
No se centra ni se pone entre comillas —eso es el gesto por defecto—; se
alinea con el texto y se distingue por tipografía y aire. */
.destacada {
margin-top: 34px;
padding-left: 18px;
border-left: 3px solid var(--ladrillo);
font-family: var(--display);
font-size: clamp(19px, 2.1vw, 23px);
line-height: 1.35;
letter-spacing: -.008em;
max-width: 46ch;
}
/* Sobre marino el ladrillo se apaga: manda el ocre, y es el único de la sección. */
.destacada-clara { border-left-color: var(--ocre); color: var(--cal); }
/* Misión y visión: la formulación breve arriba, en display; la aprobada
completa debajo, en texto de lectura. */
.proposito-completo { margin-top: 18px; font-size: 15px; color: var(--humo); max-width: 52ch; }
/* ---------- Modelo: cinco dimensiones ---------- */
/* Filas con filete, sin numerar: son simultáneas, no una secuencia. El título a
la izquierda y el desarrollo a la derecha repiten el compás del expediente. */
.dimensiones { display: grid; }
.dimensiones article {
display: grid;
grid-template-columns: 27ch 1fr;
column-gap: 32px;
padding: 26px 0;
border-top: 1px solid var(--filete-marino);
align-items: start;
}
.dimensiones article:last-child { border-bottom: 1px solid var(--filete-marino); }
.dimensiones h3 { font-size: 21px; color: var(--cal); max-width: 20ch; }
.dimensiones p { color: var(--sobre-marino); font-size: 15px; max-width: 62ch; }
.conviccion { margin-top: 46px; max-width: 62ch; }
.conviccion h3 { font-size: clamp(22px, 2.6vw, 28px); color: var(--cal); margin-bottom: 14px; }
.conviccion p { color: var(--sobre-marino); font-size: 15.5px; }
/* ---------- Valores ---------- */
/* Lista de definición, no tarjetas: el rótulo es una etiqueta de registro
—monoespaciada, como todo dato en este sitio— y el peso lo lleva la frase. */
.valores { margin-top: 52px; }
/* Encabezado en display y no en la etiqueta monoespaciada: es una frase, no un
rótulo, y en el móvil ocupaba tres renglones de ocre. */
.valores h3 { font-size: clamp(20px, 2.4vw, 25px); color: var(--cal); margin-bottom: 26px; }
.valores dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.valores dl > div {
display: grid;
grid-template-columns: 15ch 1fr;
column-gap: 20px;
padding: 14px 0;
border-top: 1px solid var(--filete-marino);
align-items: baseline;
}
.valores dt {
font-family: var(--dato);
font-size: 10.5px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--cal);
}
.valores dd { margin: 0; color: var(--sobre-marino); font-size: 14.5px; }
/* ---------- A quiénes acompañamos ---------- */
.destinatarios { margin-top: 46px; }
.destinatarios h3 { font-size: clamp(22px, 2.8vw, 29px); max-width: 24ch; }
.destinatarios-intro { margin-top: 16px; color: var(--humo); font-size: 15.5px; max-width: 66ch; }
.destinatarios-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.destinatarios-grid article { border-top: 2px solid var(--marino); padding-top: 16px; }
.destinatarios-grid h4 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0 0 8px; }
.destinatarios-grid p { color: var(--humo); font-size: 14.5px; }
.destinatarios-nota { margin-top: 30px; font-size: 14px; color: var(--humo); max-width: 68ch; }
/* ---------- Impacto: lo que se medirá, no lo que se logró ---------- */
.impacto { margin-top: 44px; max-width: 72ch; }
.impacto h3 { font-size: clamp(21px, 2.5vw, 27px); margin-bottom: 14px; }
.impacto p { color: var(--humo); font-size: 15.5px; }
.impacto-estado {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
font-size: 14.5px;
}
.impacto-titulo {
margin-top: 26px;
font-family: var(--dato);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--humo);
}
/* Los indicadores son un índice de campos, no una lista de logros: en
monoespaciada, en columnas, sin viñeta redonda ni número. */
.indicadores {
margin: 14px 0 0;
padding: 0;
list-style: none;
columns: 2;
column-gap: 44px;
font-family: var(--dato);
font-size: 12.5px;
line-height: 2;
color: var(--humo);
}
.indicadores li { break-inside: avoid; border-top: 1px solid var(--arena); }
/* ---------- Programas ---------- */
.subseccion {
font-family: var(--dato);
font-weight: 400;
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--humo);
margin: 0 0 16px;
}
.subseccion + .tarjetas + .subseccion,
.tarjetas + .subseccion { margin-top: 40px; }
.tarjeta .chip { margin-bottom: 12px; }
.advertencia a { color: var(--ladrillo); text-underline-offset: 3px; }
/* ---------- Preguntas frecuentes ---------- */
/* nativo: apertura, teclado y búsqueda del navegador sin JavaScript.
Se sustituye el triángulo del sistema por un signo alineado a la derecha, que
es lo único que hay que dibujar. */
.preguntas details { border-top: 1px solid var(--arena); }
.preguntas details:last-child { border-bottom: 1px solid var(--arena); }
.preguntas summary {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
padding: 22px 0;
cursor: pointer;
font-family: var(--display);
font-size: clamp(18px, 2vw, 21px);
line-height: 1.3;
list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
content: "+";
font-family: var(--dato);
font-size: 19px;
line-height: 1;
color: var(--ladrillo);
flex: none;
}
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p {
padding: 0 0 24px;
color: var(--humo);
font-size: 15.5px;
max-width: 66ch;
}
/* ---------- Pie ---------- */
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.pie-enlaces a { color: var(--sobre-marino); text-decoration: none; border-bottom: 1px solid transparent; }
.pie-enlaces a:hover { color: var(--cal); border-bottom-color: var(--ocre); }
.pie-pendiente { color: var(--sobre-marino-tenue); font-size: 12.5px; }
@media (max-width: 900px) {
.valores dl { grid-template-columns: 1fr; }
.destinatarios-grid { grid-template-columns: 1fr; gap: 22px; }
.indicadores { columns: 1; }
}
@media (max-width: 680px) {
.dimensiones article { grid-template-columns: 1fr; row-gap: 10px; }
.dimensiones h3 { max-width: none; }
.valores dl > div { grid-template-columns: 1fr; row-gap: 6px; }
}