/* ==========================================================================
VOLUNTARIOS.CSS — página de voluntarios, contra DISENOWEB_VOLUNTARIOS.ai
(1440, único ancho que trae el documento).
--------------------------------------------------------------------------
Va LA ÚLTIMA del de voluntarios.html. Reusa lo que ya existe:
· .seccion-voluntarios / .v-card / .voluntarios-grid (equipo-comunidad.css)
· .seccion-faq / .faq-* / .marco-punteado.m-faq (equipo-comunidad.css)
· .btn-dona / .btn-hueco (estilo.css)
Sólo son nuevos: el hero de dos capas y el bloque de intro (párrafo +
botón + estrella) que va antes de la grilla.
========================================================================== */
/* La barra de redes en negro ahora se centraliza en paginas.css (que esta
página también carga) — ver el comentario de .social-top ahí. */
/* ========================== 1. HERO (dos capas) ==========================
DISENOWEB_VOLUNTARIOS.ai NO trae el hero aplanado como el de Eventos: el
cliente entregó el fondo (BANNER AMARILLO.png, con el corte de nube ya
horneado abajo) y el gráfico "Equipo/Familia" + flor (BANNER_VOLUNTARIOS.
png, transparente) como DOS archivos separados. Se recortan a su bbox real
y se posicionan como dos independientes — el fondo al 100% del
ancho, el gráfico encima en porcentaje. */
.vol-hero{
position:relative; overflow:hidden; line-height:0;
margin-top:calc(-1 * var(--nav-alto));
background:transparent;
}
/* BUG encontrado: --nav-alto (estilo.css) vale 78px fijo, pero .cabecera
real mide 86.5px de alto en escritorio (padding 14px arriba/abajo +
contenido) — 8.5px que --nav-alto no cubre. Eso dejaba una franja blanca
entre la tira negra de redes (.social-top) y el hero, porque el margin-top
negativo no subía lo suficiente. Se corrige puntualmente en el breakpoint
de escritorio (>900px, donde .cabecera pasa a su alto completo — a
≤900px ya no hace falta, el hueco ahí es de sólo ~2px, casi imperceptible).
Mismo bug confirmado en Eventos y Dona (misma fórmula) — corregido ahí
también, ver eventos.css/dona.css. */
@media (min-width:901px){
.vol-hero{ margin-top:calc(-1 * var(--nav-alto) - 8.5px) }
}
.vol-hero-bg{ display:block; width:100%; height:auto }
/* Posición del gráfico: la primera calibración (top:31.6%) lo dejaba a caballo
entre el fondo amarillo y el corte de abajo, porque la proporción real del
recorte (3241x1938, 1.673:1) da más alto de lo medido por color en el .ai —
con eso el gráfico se salía por debajo de los 620px de alto del hero. Subido
y encogido un poco para que quede completo DENTRO del amarillo, con aire
antes del corte, como pide el documento. */
.vol-hero-grafico{
position:absolute; z-index:2; pointer-events:none;
left:26%; top:16%; width:47%; height:auto;
}
/* Animación ligera: la pieza (corazón+brazos abrazando, flor, "Equipo/
Familia") es un solo gráfico horneado — igual que el hero de Eventos, no
se puede animar sólo el corazón. Un pulso muy sutil de toda la pieza lee
como el abrazo "respirando" sin romper el encuadre. */
@media (prefers-reduced-motion: no-preference){
.vol-hero-grafico{
animation: vol-abrazo 3.2s ease-in-out infinite;
transform-origin: center 55%;
}
@keyframes vol-abrazo{
0%, 100% { transform: scale(1); }
50% { transform: scale(1.025); }
}
}
/* Nube de esquina (mismo recurso recurrente que Eventos, FINALES/ELEMENTOS
RECURRENTE/NUBE.png) detrás del logo — sin ella el logo cae directo sobre
el fondo amarillo saturado y pierde contraste. */
.vol-hero-nube{
position:absolute; z-index:1; pointer-events:none;
top:-55px; left:-45px; width:280px; height:auto;
}
@media (max-width:900px){
.vol-hero{ aspect-ratio:4/3 }
.vol-hero-bg{
width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
/* El gráfico (vol-hero-grafico.webp) trae "Más que" (blanco) PEGADO justo
encima de "Equipo" — se ve perfecto en escritorio porque ahí "Más que"
cae de lleno sobre el amarillo. El problema no era el logo en sí: es
.vol-hero-nube (la nube blanca de esquina, 190×153px FIJOS — no escala
con el viewport), que se extiende bastante más abajo que el logo. Con
top:18%, el arranque de "Más que" quedaba DENTRO de esa nube blanca —
texto blanco sobre nube blanca, ilegible/con pinta de "cortado" aunque
técnicamente nada se recortaba. 28% baja el gráfico lo suficiente para
que "Más que" caiga ya sobre el amarillo, despejado de la nube, en todo
este rango (601-900px). */
.vol-hero-grafico{ left:12%; top:28%; width:80%; z-index:2 }
.vol-hero-nube{ top:-20px; left:-40px; width:190px }
}
/* 2026-09-02: a 601-900px la nube quedaba visiblemente más chica que la
MISMA pieza en Eventos (190px contra 280px) — Isaías la comparó lado a
lado y pidió parejarlas. No se puede simplemente subir el 190px del
bloque de arriba: ese valor también rige ≤600px (mismo bloque,
max-width:900px sin mínimo), donde el margen contra "Más que" ya está
documentado en ~0.3px a 320px — cualquier aumento ahí rompe ese ajuste.
Esta regla, aparte y DESPUÉS, sólo sube el ancho en la ventana 601-900
(gana por orden con la misma especificidad); ≤600px sigue con los
190px de siempre. 210px es el máximo verificado sin que la nube
alcance a "Más que Equipo" en todo ese rango (601 y 768px medidos, con
9px de aire de sobra en el más angosto). */
@media (min-width:601px) and (max-width:900px){
.vol-hero-nube{ width:210px }
}
@media (max-width:600px){
.vol-hero{ aspect-ratio:1/1 }
/* 42%/88% despejaba la nube arriba pero, a los anchos más anchos de este
mismo rango (~400-480px), empujaba "Familia" hasta pisar el festón
blanco de abajo — el mismo problema de arriba, sólo que en el otro
extremo: la nube es de tamaño FIJO en px pero el hero crece con el
ancho, así que un único top% no puede despejar ambos bordes a la vez
si el gráfico es tan grande. Se encoge (88%→70%) para ganar aire
vertical real; con menos alto, top:41% despeja la nube arriba en el
extremo angosto (320px) Y el festón abajo en el extremo ancho (600px)
— verificado sin tocar ninguno de los dos bordes en
320/375/406/480/600px.
Isaías pidió agrandarlo más (70%→76%) y subirlo 20px, válido para todo
el rango — PERO en el extremo angosto (320px) el margen contra la nube
ya era de ~0.3px con el 41% original (verificado arriba): CUALQUIER
corrimiento hacia arriba ahí toca la nube (probado: "Más que" quedó
ilegible sobre blanco a 320px al aplicar los 20px a todo el rango por
igual). No hay aire para subirlo por debajo de ~375px. Por eso el ancho
grande (76%) va para TODO el rango ≤600px, pero el corrimiento de 20px
(calc(41% - 20px)) sólo se aplica desde 375px en adelante — ver el
override de abajo. */
.vol-hero-grafico{ left:15%; top:41%; width:76% }
}
@media (min-width:375px) and (max-width:600px){
/* Corrimiento de 20px real, sólo donde hay margen (ver comentario arriba):
a 375px el margen contra la nube queda en ~2.9px, y crece con el ancho
— verificado 375/390/480/600px sin tocar la nube ni el festón. */
.vol-hero-grafico{ top:calc(41% - 20px) }
}
/* La banda blanca (intro + grilla + "otros") no es blanco plano en el .ai:
trae "VOLUNTARIOS" repetido en marca de agua (crema pálido, filas al
tresbolillo) por TODA la sección, más un ligero calentamiento del blanco
hacia el crema según baja. La palabra en sí no se pudo extraer limpia del
.ai (el color real -rgb 255,254,250- es casi blanco puro: es el propio
documento el que la pinta así de tenue, no un artefacto de conversión),
así que se reconstruyó con la tipografía real del sitio (Oliviar Sans
Black, la misma del resto de la marca) en vez de una silueta imprecisa
recortada a mano — mismo texto, mismo patrón de filas, más nítida a
cualquier tamaño de pantalla. Las dos capas van juntas: la marca de agua
(se repite) ARRIBA y el degradado (no se repite) ABAJO. */
/* Fondo de Voluntarios — FONDOFOTOS_VOLUNTARIOS.png aplicado como fondo
continuo de la sección completa (no como mosaico repetido de 240px).
El arte ya trae su propio degradado blanco → crema y su marca de agua
debidamente compuesta a lo largo de toda la altura. */
.vol-fondo{
position:relative;
background-color:#ffffff;
}
.vol-fondo::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:url('img/vol-fondo-completo.webp?v=2');
background-repeat:no-repeat;
background-position:top center;
background-size:cover;
}
.vol-fondo > .env{ position:relative; z-index:1 }
/* ========================== 2. INTRO ==========================
Sólo el párrafo — el botón y la estrella ya NO van aquí, ver §2.1. */
.vol-intro{ margin-bottom:48px }
.vol-intro .intro{
/* Medido contra el .ai (4 líneas completas, Rect(60,760,1250,960)): el
interlineado real ronda 45pt en un documento a escala 1:1 con el sitio
(1440pt = 1440px) — mucho más grande que el 17px que traía. */
max-width:62ch; margin:0;
font-weight:400; font-size:22px; line-height:1.45; text-align:left;
}
/* ==================== 2.1 CTA — botón + estrella (celda de grilla) ====
En el .ai el botón "Quiero ser voluntario" y la estrella NO son un
bloque aparte: ocupan la 3ª celda de la primera fila de .voluntarios-grid
(junto a Casadiego y Jhon), y el botón se apoya literalmente SOBRE la
cabeza de la estrella, como un sombrero — es el gesto de la mascota, con
los brazos arriba celebrando lo que tiene en la cabeza. Por eso van
superpuestos (position:absolute), no en fila. */
.v-cta-card{
position:relative;
display:flex; align-items:flex-end; justify-content:center;
min-height:280px;
}
.vol-estrella{
width:78%; height:auto;
pointer-events:none;
}
/* Animación ligera: la estrella "salta" un poquito bajo el botón, como si
flotara con el sombrero puesto — el botón queda quieto (es el ancla),
sólo la estrella se mueve en Y. */
@media (prefers-reduced-motion: no-preference){
.vol-estrella{ animation: vol-salto 2.4s ease-in-out infinite; }
@keyframes vol-salto{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
}
.v-cta-card .btn-voluntario-red{
position:absolute; top:2%; left:50%; transform:translateX(-50%);
white-space:nowrap; z-index:1;
}
/* ============ CORTE DEL PIE — líneas dibujadas, no bultos de nube =========
Mismo trato que eventos.css: el