/* ========================================================================== FUNDACIÓN PUNTO 37 — textura, sombra y profundidad -------------------------------------------------------------------------- El cliente lo dijo así: los colores "se sienten muy planos". La tentación fácil sería meter sombras difuminadas, y eso rompería la marca: el brandbook usa sombras SÓLIDAS desplazadas en todas sus piezas, sin una sola difusa. Así que la profundidad se consigue por otros tres caminos, que sí son del lenguaje del arte: 1. DEGRADADO INTERNO. Un color plano es plano porque tiene un solo valor. Con una caída muy leve de claro arriba a oscuro abajo, la superficie recibe luz y deja de ser una mancha. La caída es del orden del 6 al 10%: si se nota como degradado, está mal hecho. 2. GRANO. El arte del cliente ya trae los fondos texturizados, no lisos. Esa textura estaba sólo en las bandas grandes; aquí se extiende a las tarjetas y los chips, que era donde más se notaba la falta. 3. SOMBRA SÓLIDA EN DOS TONOS. Una sola sombra plana da un escalón. Dos capas, una fina de contacto y otra más larga de proyección, dan la sensación de que la pieza está apoyada sobre algo. Además, un filo de luz de un píxel en el borde superior: es lo que separa una superficie con volumen de un rectángulo pintado. Este archivo va DESPUÉS de los demás y sólo añade. Si estorbara, se quita el y el sitio vuelve exactamente a como estaba. ========================================================================== */ :root{ /* Grano más fino que el de las bandas: sobre una tarjeta pequeña, el grano grueso se lee como suciedad en vez de como textura. */ --grano-fino:url("data:image/svg+xml;utf8,"); /* Luz cenital: la misma dirección en todo el sitio. Si cada pieza se ilumina de un lado distinto, el conjunto se lee desordenado aunque cada una esté bien. */ --luz:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.10) 100%); } /* --- 1. SUPERFICIES DE COLOR -------------------------------------------- Se aplica con ::after para no tocar el background de cada regla original: así una tile conserva su color de marca y sólo recibe la luz encima. .vision salió de este grupo: ya no es una caja con fondo propio (ahora es sólo texto superpuesto sobre .vision-fondo, una imagen) — el brillo/ grano de esta capa no tiene ningún fondo sólido debajo donde pintarse, y el position:relative de aquí competía (misma especificidad, este archivo carga después) contra el position:absolute que .vision necesita para quedar ENCIMA de la imagen en vez de debajo, en flujo normal. */ .tile, .valor, .sede-ficha, .mision, .boletin, .cabecera-int, .evento, .ficha--color, .chip-fecha{ position:relative; isolation:isolate } .tile::after, .valor::after, .sede-ficha::after, .boletin::after, .cabecera-int::after, .ficha--color::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:var(--luz), var(--grano-fino); background-blend-mode:normal, overlay; opacity:.9; } /* Filo de luz en el canto superior. Un píxel basta: es la diferencia entre una superficie con volumen y un rectángulo pintado. */ .tile::before, .valor::before, .sede-ficha::before{ content:""; position:absolute; z-index:-1; left:6%; right:6%; top:0; height:1px; background:rgba(255,255,255,.34); border-radius:inherit; pointer-events:none; } /* --- 2. SOMBRAS EN DOS TONOS -------------------------------------------- Siempre sólidas, nunca difuminadas: el brandbook no usa ni una difusa. La primera capa es el contacto, corta y oscura. La segunda es la proyección, más larga y clara. Juntas dan apoyo, no escalón. */ .tile{ box-shadow:0 3px 0 rgba(0,0,0,.16), 0 10px 0 rgba(0,0,0,.07); } .valor{ box-shadow:0 3px 0 rgba(0,0,0,.14), 0 9px 0 rgba(0,0,0,.06); } .ficha, .evento, .doc, .panel-veredas, .tabla-legal{ box-shadow:0 3px 0 rgba(0,0,0,.10), 0 9px 0 rgba(0,0,0,.06); } .sede-ficha{ box-shadow:0 3px 0 rgba(0,0,0,.16), 0 8px 0 rgba(0,0,0,.07); } /* --- 3. LOS CHIPS DE NUBE ------------------------------------------------ Van recortados con máscara, así que NO admiten box-shadow: la sombra se recortaría con la propia máscara y aparecería un canto sucio. La profundidad se les da por dentro, con el degradado de luz de fondo. */ .cifra{ background-image:var(--luz), var(--grano-fino); background-blend-mode:normal, overlay; } .chip-fecha{ background-image:var(--luz); } /* --- 4. FONDOS DE BANDA --------------------------------------------------- Las bandas grandes ya tienen grano. Lo que les faltaba era la caída de luz, que es lo que impide que un azul de 900px de alto se lea como una pared. */ .territorio::after, .hero-inicio::after, .hero-nos::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; /* Además de la veladura de luz, el grano de textura: el .ai muestra el azul del hero de Nosotros con textura, no como un degradado liso ("no tienen las texturas"). El grano va en overlay para que no aclare ni oscurezca el tono, sólo le dé grano. */ background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,.12) 100%), var(--grano); background-blend-mode:normal, overlay; } /* El contenido de esas bandas ya va en z-index 2, así que la capa de luz cae por debajo del texto y por encima del fondo. Se declara aquí por si alguna sección futura olvida subir su contenido. */ .territorio .env, .hero-inicio .hero-grid, .hero-nos .env{ position:relative; z-index:2 } /* --- 5. EL PIE ----------------------------------------------------------- Negro plano sobre negro plano. Una veladura muy tenue en la parte alta separa el pie del cuerpo de la página sin dibujar una línea. */ .pie{ position:relative } .pie::before{ content:""; position:absolute; left:0; right:0; top:0; height:180px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0)); pointer-events:none; } /* Sólo el contenido (.env) se eleva sobre las capas decorativas del pie. Antes era `.pie > *`, que también convertía en position:relative las dos SVG decorativas (marca de agua y festón), metiéndolas EN FLUJO y dejando ~254px de hueco negro arriba del footer. Se acota al .env para devolverlas a absolute. */ .pie > .env{ position:relative } /* --- 6. RETRATOS DEL EQUIPO --------------------------------------------- La silueta de nube va enmascarada, así que tampoco admite sombra externa. Se le da cuerpo con una caída de luz dentro del propio color de fondo. */ .retrato{ background-image:var(--luz) } /* --- 7. MOVIMIENTO REDUCIDO Y ALTO CONTRASTE ---------------------------- La textura es decorativa. Quien pide más contraste la pierde, y está bien: el texto se lee mejor sobre color plano. */ @media (prefers-contrast:more){ .tile::after,.valor::after,.sede-ficha::after,.mision::after, .boletin::after,.cabecera-int::after,.ficha--color::after{ display:none } .cifra,.chip-fecha,.retrato{ background-image:none } } /* ========================================================================== EL PIE DEJA DE SER NEGRO -------------------------------------------------------------------------- Pedido del cliente: "coloca un color diferente al negro, un color más alegre dentro del estilo de la fundación". Se elige el morado hondo #492D91, que es color de marca del brandbook y ya trabaja en el sitio: es el fondo de la tarjeta Visión 2030 y el de varios retratos del equipo. Así el pie no estrena un color, cierra con uno que la página ya venía usando. Por qué ése y no otro de la paleta: un pie es una superficie grande y con mucho texto, así que necesita ser oscuro para que el blanco se lea. El azul #00ACF9 y el verde #70CC03 son demasiado claros para eso, y el rojo tiraría del ojo hacia abajo compitiendo con el botón Dona. El morado hondo es el único de la paleta que es alegre Y suficientemente oscuro. El blanco sobre él da un contraste de aproximadamente 9:1, muy por encima del mínimo. El festón de nube lleva su color en un atributo fill dentro del HTML de las cinco páginas. No se tocan: en SVG, una regla CSS le gana al atributo de presentación, así que basta con esta declaración para que el canto acompañe al fondo nuevo. Si mañana se cambia --pie-fondo, cambian los dos a la vez. ========================================================================== */ /* El pie va NEGRO, no morado (pedido de la clienta y confirmado en el .ai, que lo muestra en negro puro). El festón de nube que remata contra el pie hereda este color, así que muerde en negro contra la sección de arriba. */ :root{ --pie-fondo:#0F0F0F } .pie{ background:var(--pie-fondo) } .pie .nube use{ fill:var(--pie-fondo) } /* La veladura de arriba se aclara un punto: sobre morado, la misma que servía sobre negro se perdía. */ .pie::before{ background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,0)); } /* Separadores y cantos internos: el gris que funcionaba sobre negro se ve sucio sobre morado. Se pasan a blanco muy bajo, que es transparente al color de fondo y por tanto no ensucia. */ .pie-legal{ border-top-color:rgba(255,255,255,.18) } .pie .pie-redes a{ border-color:rgba(255,255,255,.22) } /* ========================================================================== LA BARRA DE REDES DEJA DE QUEDAR TAPADA -------------------------------------------------------------------------- El hero sube con margin-top negativo para meterse por debajo de la cabecera flotante, que es transparente. Ese cálculo contaba el alto de la cabecera pero NO los 44px de la barra negra de redes que va encima, así que el hero se la comía. Y como la barra es `static`, no tenía con qué defenderse: sin posición no participa del apilado y cualquier elemento posicionado le pasa por delante. Se le da posición y un z-index por encima del hero. No hace falta tocar el margen negativo, que sigue siendo el correcto para la cabecera. ========================================================================== */ .social-top{ position:relative; z-index:70 } /* ========================================================================== NOTA SOBRE LA GUARDA DE VISIBILIDAD, YA RETIRADA -------------------------------------------------------------------------- Aquí vivía una regla que forzaba `opacity:1 !important` sobre todo lo armado. Se puso cuando 43 de 45 elementos quedaban invisibles, pero resultó que aquello era una versión cacheada de esta misma hoja, no un fallo real. Y la guarda tenía un efecto secundario que el cliente detectó enseguida: al forzar la opacidad, los elementos ya se veían ANTES de entrar en pantalla, así que al llegarles el turno ejecutaban su desplazamiento de 24px de golpe. Eso es lo que se leía como que la página saltaba y parecía rota. Medido sin ella: cero elementos por debajo de opacity 0.05 tras recorrer Inicio entero. La capa se sostiene sola. ========================================================================== */ /* ========================================================================== ENTRADAS: VISIBLES Y SIN SALTO -------------------------------------------------------------------------- Dos hechos medidos en este sitio, que juntos obligan a esta decisión: 1. Con scroll rápido, el revelado no llega a todos. Bajando de 700 en 700 px quedaban 34 de 36 elementos en opacity 0. Bajando más despacio, 0. Es decir que el resultado depende de a qué velocidad baje la persona, y la gente baja rápido. 2. La guarda anterior arreglaba eso forzando la opacidad, pero producía el salto que reportó el cliente: al verse ya desde el principio, cuando por fin les tocaba el turno, los elementos ejecutaban su desplazamiento de 24px de golpe. Se leía como una página rota. Así que se corta por lo sano: el estado de reposo deja de esconder. No hay nada que revelar, luego no hay nada que pueda quedarse sin revelar, y al no haber desplazamiento pendiente tampoco hay salto. Lo que se pierde: la entrada al hacer scroll. Lo que se conserva, que es la mayor parte de lo que da vida: el niño y el gato flotando, el latido del botón Dona, la respiración de los festones, el marquee de valores, los muñequitos de Nosotros, el mapa y las transiciones entre páginas. Nada de eso depende del revelado. Para recuperar las entradas hay que arreglar el motor, no esta hoja: el observador necesita margen por debajo para disparar ANTES de que la pieza entre, y la red de apoyo del scroll no puede ir con freno de 120 ms, porque ése es justo el intervalo que se salta cuando alguien baja de un tirón. ========================================================================== */ html.anim .rv, html.anim .rv-on{ opacity:1 !important; transform:none !important; animation:none !important; } /* ========================================================================== EL BLANCO DE LAS SECCIONES PASA A AZUL PASTEL -------------------------------------------------------------------------- Pedido del cliente, en sus palabras: "para las secciones en blanco cambiar el color blanco por un azul pastel como color de adorno" y "a los colores dale profundidad". El pastel NO es un azul nuevo: es el azul de marca #00ACF9 llevado a hsl(206 80% 96%). Conserva el matiz de la familia y pierde casi toda la saturación, que es lo que hace que se lea como papel de color y no como una sección azul. Si mañana cambia el azul de marca, este valor hay que recalcularlo a mano: no se puede derivar en CSS sin relative color syntax, y eso todavía no es seguro en todos los navegadores del público. Medido sobre negro puro, que es el color de texto del sitio: 19.2:1. El mínimo AA es 4.5:1, así que el pastel no obliga a tocar ni un texto. Dónde se aplica, medido en las cinco páginas: Inicio .gesto · .programas · .apoyo Nosotros .historia · .mv · .equipo · .apoyo Interiores .bloque (que no pintaba fondo y enseñaba el del body) y .apoyo Más el propio body: en Inicio hay 64px de margen entre .programas y .territorio donde lo que se ve es el fondo del documento, y si el body se quedaba blanco ahí aparecía una franja. ========================================================================== */ :root{ /* BLANCO. El .ai muestra todas las secciones claras (Inicio: gesto y programas; Nosotros: historia, mv y equipo) en blanco puro, no en pastel. La clienta lo repitió: "el fondo es blanco, no azul". El grano suave se mantiene encima para que no sea un blanco muerto. Los festones que muerden estas secciones heredan este color por la llave #ffffff, así que también pasan a blanco. */ --papel:#FFFFFF; /* La banda de apoyo del papel. Explicación en el bloque de más abajo. */ --banda:#D8E8F5; /* hsl(207 59% 90%) */ /* Azul hondo del que salen TODOS los cantos y sombras de esta capa. Va en componentes sueltos porque se usa dentro de rgba() con alfas distintas. Es azul y no negro a propósito: sobre papel azul, una sombra neutra se lee gris sucio, igual que le pasaba al gris del pie sobre morado. */ --tinta:19,74,120; /* Grano del papel. Más suave que --grano-fino porque aquí cubre superficies de 2.300px de alto: el grano que da textura a una tarjeta de 200px, en una sección entera, se lee como suciedad. */ --grano-papel:url("data:image/svg+xml;utf8,"); /* Caída de luz para las bandas SATURADAS (hero rojo, cielo azul, cabeceras de las interiores). Sube del 10/12 que había al 14/16. La regla escrita arriba en esta hoja habla de caídas del 6 al 10%, y sigue valiendo: está pensada para una tarjeta de 200px, donde el 14% se vería. Repartido a lo largo de una banda de 900 a 1.400px la caída es de dos centésimas de por ciento por píxel, o sea imperceptible como degradado y perfectamente legible como luz. */ --luz-honda:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.16) 100%); /* Caída de luz para las bandas CLARAS (la banda de apoyo). La mitad de recorrido: sobre un color casi blanco, el mismo negro del 16% se ve. */ --luz-clara:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.03) 68%, rgba(0,0,0,.075) 100%); /* Luz de las piezas sueltas: tarjetas, chips, retratos. Aquí sí manda la regla del 6 al 10%. */ --luz-pieza:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.055) 100%); } /* --- El papel ------------------------------------------------------------ Fondo por background-color + background-image en la MISMA regla, no por un pseudoelemento: un ::after sobre .valores o sobre .equipo se pintaría por encima del texto (un absoluto con z-index auto va después del contenido en línea) y teñiría lo que hay debajo. Con capas de fondo eso no puede pasar. Y a propósito el papel NO lleva degradado, sólo grano: .historia y .equipo son dos secciones pastel seguidas (con .mv de por medio, que ahora es su propia banda azul con festón arriba/abajo — no papel), y si cada una arrancara su propia caída de luz se verían costuras horizontales donde no hay ningún borde. La profundidad del papel se la dan las piezas que tiene encima, no él mismo. .mv se sacó de este grupo: el .ai la pinta como banda azul propia (ver el fondo + festón en estilo.css), no como papel continuo con sus vecinas. */ body, .gesto, .programas, .apoyo, .historia, .equipo{ background-color:var(--papel); background-image:var(--grano-papel); background-blend-mode:soft-light; } /* .bloque de las páginas interiores no declara fondo: hereda el del documento, que acaba de cambiar. No hace falta regla propia y es mejor así, porque entonces el grano corre continuo de una sección a la siguiente. */ /* --- La banda de apoyo --------------------------------------------------- Consecuencia medida del cambio, no capricho: el gris #EFEFEF de .valores y de .bloque--gris contrastaba 1.155:1 contra el blanco. Contra el pastel baja a 1.05:1, o sea que la banda desaparecía; y además un gris neutro sobre un campo azulado se lee amarillento, el mismo defecto que esta hoja ya documenta para el gris del pie sobre morado. Se lleva al mismo escalón que tenía: #D8E8F5 contrasta 1.144:1 contra el papel, prácticamente el 1.155:1 original, y comparte matiz con él. Para devolverla al gris, basta con borrar este bloque y los dos festones de #EFEFEF de más abajo. */ .bloque--gris, .valores{ background-color:var(--banda); background-image:none; } /* --- Los festones --------------------------------------------------------- Un festón lleva el color de la sección con la que limita, y ese color va en un atributo fill dentro del HTML de las cinco páginas. En SVG una regla CSS le gana al atributo de presentación, así que se corrigen desde aquí y los HTML no se tocan: es el mismo mecanismo con el que esta hoja ya repinta el canto del pie. Se filtra POR VALOR y no por posición, que es lo seguro: hay festones de #00ACF9 y de #000000 que no deben moverse, y hay dos festones cuyo fill coincide con el de su propia sección (el de abajo de .territorio y el de abajo de .valores) y por tanto hoy son invisibles. Tocarlos los haría aparecer, que es un cambio que nadie pidió. Los ocho que sí cambian, medidos: nosotros .hero-nos abajo #ffffff eventos .cabecera-int.ci-azul abajo #ffffff eventos .bloque--gris abajo #ffffff contacto .cabecera-int.ci-verde abajo #ffffff contacto .bloque--gris abajo #ffffff legal .cabecera-int.ci-morado abajo #ffffff legal .bloque--gris abajo #ffffff (x2) Y los cuatro de #EFEFEF, que acompañan a la banda de apoyo. */ svg.nube use[fill="#ffffff" i]{ fill:var(--papel) } svg.nube use[fill="#EFEFEF" i]{ fill:var(--banda) } /* ========================================================================== MÁS PROFUNDIDAD -------------------------------------------------------------------------- Misma regla que ya estaba escrita arriba en esta hoja: ni una sombra difuminada. El cuerpo sale del degradado interno muy leve, del grano y de la sombra sólida en dos tonos. ========================================================================== */ /* --- 1. LAS BANDAS DE COLOR GRANDES -------------------------------------- Ya tenían caída de luz; se queda corta en superficies de este tamaño. Se sube a --luz-honda. La cabecera de las interiores no la tenía en absoluto: entra ahora al mismo régimen que el hero de Inicio y la banda de cielo. */ .territorio::after, .hero-inicio::after, .hero-nos::after{ background:var(--luz-honda); } .cabecera-int::after{ background:var(--luz-honda), var(--grano-fino); background-blend-mode:normal, overlay; opacity:1; } /* --- 2. LAS PIEZAS BLANCAS SOBRE EL PAPEL -------------------------------- Una tarjeta blanca sobre papel pastel contrasta 1.09:1: el ojo no encuentra el borde. La corrección es el canto, no aclarar el fondo. El canto va como box-shadow inset y no como border porque un border de 1px se come un píxel del relleno de cada tarjeta y desalinea el texto respecto al resto del sitio. Inset no ocupa sitio. Debajo, las dos capas de siempre: contacto corto y proyección larga, ahora en azul hondo en vez de negro, para que la sombra pertenezca al papel. */ .ficha, .doc, .evento, .tabla-legal, .panel-veredas{ box-shadow: 0 0 0 1px rgba(var(--tinta),.15) inset, 0 3px 0 rgba(var(--tinta),.20), 0 10px 0 rgba(var(--tinta),.09); } /* El grano y la luz interior sólo donde no hay foto a sangre que los tape. .evento arranca con la imagen pegada al canto superior, así que su background no se ve y no vale la pena declararlo. */ .ficha, .doc, .panel-veredas{ background-image:var(--luz-pieza), var(--grano-papel); background-blend-mode:normal, soft-light; } /* Piezas pequeñas: mismo canto, proyección más corta. Con la de 10px, un chip de 38px de alto parece flotar. */ .cinta-meses a{ box-shadow: 0 0 0 1px rgba(var(--tinta),.15) inset, 0 3px 0 rgba(var(--tinta),.18), 0 6px 0 rgba(var(--tinta),.08); } .cinta-meses a[aria-current="true"]{ box-shadow: 0 3px 0 rgba(0,0,0,.20), 0 6px 0 rgba(0,0,0,.09); } /* Los campos del formulario ya tenían canto propio, pero de un gris neutro que sobre papel azul se lee sucio. Se pasa a la misma tinta que todo lo demás. */ .campo input, .campo textarea, .campo select{ border-color:#CBDEEC; box-shadow:0 2px 0 rgba(var(--tinta),.09); } .campo input:focus, .campo textarea:focus, .campo select:focus{ border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,172,249,.18); } /* El aviso de "todavía no lo tenemos" ya trae su canto a trazos naranja; sólo le faltaba apoyarse. */ .pendiente{ box-shadow:0 3px 0 rgba(var(--tinta),.14), 0 9px 0 rgba(var(--tinta),.07); } /* --- 3. LOS CHIPS DE NUBE ------------------------------------------------- Van recortados con máscara, así que no admiten box-shadow: se recortaría con la propia máscara. El canto se les da POR DENTRO, con un radial que oscurece sólo el borde exterior. Como la máscara corta en el perfil de la nube, ese oscurecimiento sale con forma de nube: es un canto de verdad, no un halo. Sobre blanco el rim queda en #E0E8ED, que contrasta 1.14:1 contra el papel, el mismo escalón que separa la banda de apoyo. */ .cifra{ background-image: radial-gradient(122% 122% at 50% 40%, rgba(var(--tinta),0) 56%, rgba(var(--tinta),.16) 100%), var(--luz-pieza), var(--grano-papel); background-blend-mode:normal, normal, soft-light; } /* El chip de fecha es rojo saturado: ahí el rim tiene que ser negro, porque el azul de --tinta sobre rojo vira a morado y se nota. */ .chip-fecha{ background-image: radial-gradient(122% 122% at 50% 40%, rgba(0,0,0,0) 56%, rgba(0,0,0,.20) 100%), var(--luz-pieza); } /* --- 4. LOS RETRATOS DEL EQUIPO ------------------------------------------ La silueta de nube va enmascarada y por eso no puede proyectar sombra: la máscara recorta también lo que pinten sus pseudoelementos. Se resuelve desde el PADRE, que no está enmascarado: .persona::before es una copia de la misma silueta, desplazada y rellena de tinta, por detrás del retrato. Sale una sombra sólida con forma de nube, que es exactamente el recurso del brandbook. Las medidas no se inventan: left/right a 0 y aspect-ratio 1/1 reproducen la caja del retrato, que es el primer hijo, ocupa todo el ancho y es cuadrado. Si mañana el retrato deja de ser cuadrado, esta línea hay que seguirla. Al pasar el ratón el retrato crece un 4% y la sombra no: se separa de ella, que es justo lo que hace una pieza al levantarse. */ .persona{ position:relative } .persona::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:0; right:0; top:0; aspect-ratio:1/1; transform:translate(7px,9px); -webkit-mask-image:var(--nube-retrato); mask-image:var(--nube-retrato); mask-image:var(--nube-retrato); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; background:rgba(var(--tinta),.20); } .persona > *{ position:relative; z-index:1 } /* Luz interior más marcada que la de --luz: sobre un morado o un azul de marca, la caída anterior del 14% no llegaba a leerse. */ .retrato{ background-image: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.16) 100%), var(--grano-fino); background-blend-mode:normal, overlay; } /* --- 5. ALTO CONTRASTE --------------------------------------------------- Quien pide más contraste pierde la textura y los cantos de adorno, y gana bordes francos. El papel se queda: no estorba, contrasta 19.2:1 con el texto. */ @media (prefers-contrast:more){ .ficha,.doc,.panel-veredas,.cifra,.chip-fecha,.retrato{ background-image:none } .bloque--gris,.valores{ background-image:none } body,.gesto,.programas,.apoyo,.historia,.equipo{ background-image:none } .mv::before{ display:none } .ficha,.doc,.evento,.tabla-legal,.panel-veredas,.cinta-meses a{ box-shadow:0 0 0 2px rgba(var(--tinta),.55) inset, 0 3px 0 rgba(var(--tinta),.35); } .persona::before{ display:none } } /* El marquee de valores corre DENTRO de la banda de apoyo, y su gris #D2D2D2 es neutro: sobre un campo azulado se lee amarillento, el mismo defecto de siempre. Se pasa al azul equivalente, calculado para conservar la relación que tenía: 1.31:1 contra el gris viejo, 1.32:1 contra la banda nueva. Las palabras en negro del marquee no se tocan: son las que llevan el mensaje y miden 16.8:1 contra la banda. */ .valores .marquee{ color:#B6CDDF } /* ========================================================================== REJILLA DEL EQUIPO: LAS FILAS INCOMPLETAS VAN CENTRADAS -------------------------------------------------------------------------- Retirada la ficha de Francisco quedan 3 directivos y 7 voluntarios. En una rejilla de tres columnas, 7 da dos filas llenas y una última con una sola ficha pegada a la izquierda. Eso es lo que se ve disparejo. No se arregla con justify-content: las columnas son 1fr, ya ocupan todo el ancho y no sobra espacio que repartir. Por eso la rejilla pasa a ser una fila flexible que envuelve y centra, con cada ficha pidiendo un tercio del ancho descontando los huecos. Se siguen viendo tres por fila, pero la última se centra sola, tenga una ficha o dos. Queda independiente del número: si vuelve Francisco y son 8, o entra alguien y son 9, sigue pareja sin tocar nada. ========================================================================== */ .rejilla{ display:flex; flex-wrap:wrap; justify-content:center; gap:38px 34px; } .rejilla > .persona{ flex:0 1 calc((100% - 68px) / 3); min-width:0; max-width:360px; } @media (max-width:900px){ .rejilla > .persona{ flex-basis:calc((100% - 34px) / 2) } } @media (max-width:600px){ .rejilla > .persona{ flex-basis:100%; max-width:340px } } /* Mismo caso, otro hijo: las cinco fichas de "líneas de trabajo" de eventos.html (Educación, Deporte, Cultura y música, Jornadas sociales, Intervención rural) viven en el mismo .rejilla pero nunca tuvieron esta regla — sin flex-basis, cada .ficha se encoge a su contenido (fit-content) y queda sola en su fila, centrada, con muchísimo vacío a los lados. Mismo arreglo que arriba: un tercio del ancho, misma rejilla de 3 columnas que se centra sola cuando sobra una o dos. */ .rejilla > .ficha{ flex:0 1 calc((100% - 68px) / 3); min-width:0; max-width:360px; } @media (max-width:900px){ .rejilla > .ficha{ flex-basis:calc((100% - 34px) / 2) } } @media (max-width:600px){ .rejilla > .ficha{ flex-basis:100%; max-width:340px } } /* ========================================================================== SECCIÓN APOYO EN BLANCO (pedido de la clienta: "el fondo es blanco, no azul") El .ai muestra "Tu APOYO hace la diferencia" sobre blanco puro, no sobre el papel pastel del resto de secciones claras. Se saca del tratamiento de papel. ========================================================================== */ .apoyo{ background-color:#fff !important; background-image:none !important } .apoyo .nube use{ fill:#fff } /* ========================================================================== HERO DE NOSOTROS — ajustes contra el .ai -------------------------------------------------------------------------- La clienta pidió corregir la nube de la esquina, el azul del fondo y el corte. ========================================================================== */ /* 2026-08-24: el banner de escritorio/tablet dejó de ser un fondo CSS con background-size:cover (nosotros-banner-bg-2.jpg + el hack de +80px de sobra para poder desplazar la nube sin dejar franja blanca, ver historial de este bloque) — ahora es un real (nos-hero-banner-*.webp, estilo.css .hero-nos-grid img), porque el banner nuevo del cliente trae texto pegado al borde y "cover" lo recortaría en anchos que no calzan con su proporción. El bloque de posicionamiento a >1440px que vivía aquí queda retirado junto con el fondo. */ /* En móvil (documento DISENOTABMOB_NOSOTROS) el banner es el hero deportivo del niño en fondo azul, horneado como imagen de bloque en .nos-hero-movil (nos-hero-movil-banner.webp, estilo.css @media 600). El fondo del hero queda BLANCO: es el área del header (logo + hamburguesa) sobre la que flota la cabecera, y el propio banner trae su textura azul y sus nubes. */ @media (max-width:600px){ .hero-nos{ background:#fff !important; } } /* El banner ya trae su propia textura y nube: se retira el overlay de grano del ::after para no ensuciarlo. */ .hero-nos::after{ display:none !important } /* El asterisco morado no está en el .ai: se retira. */ .hero-nos .adorno--asterisco{ display:none !important } /* La nube-viaje animada quedaba mal en la esquina superior derecha (foto de la clienta). Se retira. */ .hero-nos .nube-viaje{ display:none !important } /* La nube ahora viene DENTRO del banner (espejada a la derecha): se ocultan las nubes CSS de esquina para no duplicarla. */ .hero-nos .nube-esquina{ display:none !important } /* 2026-08-24: el banner nuevo trae su propio festón blanco horneado abajo (igual que ya pasaba en móvil con nos-hero-movil) — se retira el festón CSS en escritorio/tablet también para no duplicar el corte. */ .hero-nos .nube-feston{ display:none !important } /* Botón Dona apoyado en el corte de nube de abajo del hero de Nosotros, a la derecha, como el .ai. z-index alto para quedar sobre el festón. */ .hero-nos .hero-dona{ position:absolute; z-index:6; right:28px; bottom:6px; } @media (max-width:600px){ .hero-nos .hero-dona{ right:14px; bottom:2px; font-size:15px; padding:11px 18px } } /* Botón Dona sobre el corte de nube del hero de INICIO (mismo patrón, artboard Inicio del .ai). El hero-inicio tiene overflow:hidden, así que se ancla dentro del canto, apoyado en el festón blanco de abajo a la derecha. Duplicado con el Dona del header en tablet/escritorio (>600px), donde .cabecera .btn-dona SÍ se ve: "arriba ya aparece" fue justo la queja del cliente. En móvil (<=600px) el header NO trae botón Dona por diseño (ver estilo.css, bloque "HEADER MÓVIL"), así que ahí este botón flotante es la única entrada a Dona desde el hero y se conserva. */ .hero-inicio{ position:relative } .hero-inicio .hero-dona{ display:none; } @media (max-width:600px){ .hero-inicio .hero-dona{ display:inline-flex; position:absolute; z-index:7; right:14px; bottom:10px; font-size:15px; padding:11px 18px; } }