` real (misma fuente del sitio, nunca pixela). */
.apoyo-txt {
position: absolute;
inset: 0;
}
.apoyo-txt h2 {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Posición por bbox real de píxeles del texto borrado (skill §8.1, no a
ojo): franja x:386-960,y:412-454 sobre el lienzo 1376×665 de
apoyo-plantilla.webp → top 29.94cqw. El left se resuelve centrando
(left:50%+translateX) en vez de calcar el x medido: el raster quedaba
con un ligero corrimiento propio del renderizado de fuente horneada,
mientras que el texto real ya hereda text-align:center de .apoyo —
centrarlo de verdad es más correcto que repetir ese corrimiento.
El raster tenía el salto de línea horneado entre "voluntario." y "Cada
gesto..." (dos oraciones cortas, no un párrafo que se ajusta solo). Sin
ese salto, el texto real hace wrap orgánico en un punto distinto y más
largo, que en escritorio se metía debajo/detrás del personaje rojo
(.apoyo .personaje, ver bug real capturado 2026-08-24). El `
` del HTML reproduce ese mismo salto SOLO en este
ancho (se activa aquí abajo); en tablet/móvil sigue oculto y el texto
seguía envolviendo solo como ya lo hacía antes de este cambio. El ancho
de la caja ya no necesita acotar el wrap (el salto ya lo hace): se deja
generoso (55cqw) para que cada línea rinda su ancho natural sin
re-envolver, y text-align:center (heredado de .apoyo) centra cada línea
por separado igual que en el .ai. */
/* Isaías pidió más tamaño ("2 aumentos") y la tipografía correcta después
de ver la primera versión: font-weight pasa de 300 (el light que .apoyo
p.apoyo-bajada usa para tablet/móvil, heredado sin pensar en este
contexto) a 400, el mismo regular que usa el resto del cuerpo del sitio
(`p{}` de estilo.css no fija weight, hereda el 400 del body) y el propio
".tu-word" del título — el 300 se leía más fino que el resto del cierre.
Tamaño, dos rondas: clamp(12,1.35cqw,15) → clamp(16,1.65cqw,19) → pedido
"un poco más grande" → clamp(18,1.85cqw,21).
top: mismo ajuste de recorte que .apoyo-texto-nuevo arriba —
29.94-13.01=16.93cqw (ver esa nota para el porqué del 13.01). */
.apoyo-txt p.apoyo-bajada {
position: absolute;
left: 50%;
top: 16.93cqw;
transform: translateX(-50%);
width: 55cqw;
max-width: none;
margin: 0;
font-size: clamp(18px, 1.85cqw, 21px);
font-weight: 400;
line-height: 1.4;
}
.apoyo-bajada .salto-apoyo {
display: inline;
}
/* transform:none cancela un translateX(115px) heredado de una regla vieja
sin scope de .apoyo .botones (más arriba en este archivo, pensada para
el diseño flex de antes) — sin esto, cualquier left en cqw calculado
aquí queda corrido 115px de más hacia la derecha, aunque el cálculo en
sí esté bien. */
.apoyo .botones {
position: absolute;
inset: 0;
display: block;
gap: 0;
transform: none;
}
.apoyo .botones .btn {
position: absolute;
margin: 0;
min-width: 0;
box-sizing: border-box;
font-size: clamp(14px, 1.32cqw, 19px);
}
/* min-width:0 cancela el 184px fijo de la regla vieja (calibrada para un
botón suelto sobre título real, más arriba en este archivo): aquí el
ancho lo da el cqw para que crezca/encoja pegado a la plantilla, que
también se escala dentro de los mismos 901–1240px de .env.
2026-08-10 (plantilla limpia, full-bleed, sin duplicado, 1376×768 ≈
misma proporción que la 5504×3072 de la ronda anterior — 4:1 exacto en
ambos ejes, por eso el top del subtítulo cae en el mismo 33% medido en
las dos). Subtítulo termina en y:453 de 768 (32.9cqw, ancho=base); fila
de botones con margen cómodo abajo. */
/* Centrado real: Dona(12.72cqw)+gap(1.58cqw)+Voluntario(19.72cqw)=34.02cqw
de ancho combinado; start=(100-34.02)/2=32.99cqw para que el conjunto
quede a centro (el commit f158e3a sólo corrió 3cqw, dejaba el bloque
con midpoint en 41.5cqw, no en 50). */
.apoyo .botones .btn-dona {
left: 33cqw;
top: 24.79cqw;
width: 12.72cqw;
height: 3.82cqw;
padding: 0;
}
.apoyo .botones .btn-hueco {
left: 47.3cqw;
top: 24.79cqw;
width: 19.72cqw;
height: 3.82cqw;
padding: 0;
}
/* 2026-08-10, recalibrado por ancla (skill §8.1), no a ojo. Medido en vivo:
con left:58.7cqw la punta del lápiz SÍ toca la O (x:862, objetivo x:855),
pero a ese left el CUERPO (.pr-nube, no sólo la caja completa del SVG)
arranca en x:914 mientras "hace la diferencia" termina en x:947.6 —
33px de solape, la "a" final quedaba tapada.
Es un conflicto geométrico del propio dibujo, no un error de medición:
tocar la O y no tapar "diferencia" a la vez sólo es posible si el
muñeco mide más del doble (≥493px de ancho en vez de 299px a 21cqw) —
demasiado grande para el layout. Este left es el máximo acercamiento
posible sin comerse la "a": con el cuerpo apenas libre de
"diferencia" (right≥947.6), la punta queda en x≈891 (a ~36px de la O
en vez de tocarla, pero visiblemente apuntando hacia ella). */
/* Isaías pidió más grande y 20px más a la derecha desde la posición de
Antigravity (61.3cqw+5px), y luego 30px de vuelta a la izquierda desde
ese resultado (61.3cqw+25px - 30px = 61.3cqw-5px, aún a la derecha del
límite seguro medido por ancla en 58.7cqw donde el cuerpo empezaba a
tapar "diferencia" — verificar con captura tras el cambio).
2026-08-24: sólo el `top` se corre por el recorte de marcos de
apoyo-plantilla.webp (misma cuenta que .apoyo-texto-nuevo/.apoyo-bajada
arriba: -13.01cqw). left/width NO se tocan — el recorte fue vertical,
y el left ya está calibrado al límite exacto contra "diferencia"
(skill §8.1 regla 4: cambiar sólo lo que el objetivo pide). */
.apoyo .personaje {
position: absolute !important;
left: calc(61.3cqw - 5px) !important;
top: calc(4.99cqw - 75px) !important;
width: 27cqw !important;
margin: 0 !important;
}
}
/* ==========================================================================
APOYO EN MÓVIL — plantilla aplanada (2026-08-10)
--------------------------------------------------------------------------
Mismo patrón que escritorio (arriba en este archivo), con la plantilla
propia que compartió Isaías para el artboard de móvil del .ai
(img/apoyo-plantilla-movil.webp, 896×1200). PASO 1 de su pedido: sólo la
plantilla, full-bleed, SIN botones ni muñeco todavía — los agrega una
vez confirmada la alineación (van uno debajo del otro en móvil, pendiente
de coordenadas).
Mismo full-bleed que en escritorio y por la misma razón: .apoyo-caja
hereda "env" (width:min(100% - 48px,1240px)) Y el bloque móvil de
estilo.css le suma padding-inline:24px encima — doble margen. Se anulan
los dos aquí para que la plantilla llegue de borde a borde real. */
.apoyo-plantilla-movil {
display: none;
}
@media (max-width:600px) {
/* Sin padding: la plantilla móvil ya trae 144px de aire propio bajo el
botón "Quiero ser voluntario" (medido: borde inferior de la imagen
menos borde inferior del botón). Los 40px de antes se sumaban encima. */
.apoyo {
padding: 0;
overflow: visible;
}
.apoyo-caja {
display: block;
position: relative;
container-type: inline-size;
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
.apoyo>.lazo-izq,
.apoyo>.lazo-der,
.apoyo>.confetti-izq-arriba,
.apoyo>.confetti-der-abajo,
.apoyo>.adorno {
display: none;
}
.apoyo-plantilla-movil {
display: block;
width: 100%;
height: auto;
}
.apoyo-txt {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.apoyo .botones {
position: absolute;
inset: 0;
display: block;
gap: 0;
}
.apoyo .botones .btn {
position: absolute;
margin: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: clamp(14px, 4cqw, 18px);
border-radius: 14px;
font-weight: 700;
}
/* top:68cqw (versión de Antigravity) quedaba montado sobre el subtítulo:
medido sobre la plantilla real, el subtítulo (3 líneas) termina en
y:705 de 896 de ancho = 78.7cqw, no en 68. Corrido a 84/97.5cqw con el
mismo left/width/height (esos ya estaban bien — el bug era sólo
vertical). */
/* Centrados: left=(100-width)/2 para cada uno (anchos distintos porque
"Quiero ser voluntario" es más largo que "Dona"), no un left compartido
— Isaías pidió centrar la fila, y con el mismo left quedaban alineados
a la izquierda, no centrados. */
.apoyo .botones .btn-dona {
left: 25cqw;
top: 84cqw;
width: 50cqw;
height: 10.5cqw;
padding: 0;
/* estilo.css trae, para el diseño móvil VIEJO ("Botones apilados
centrados"), transform:translateX(-60px)!important en .btn-dona y
translateX(80px)!important en .btn-hueco — pensados para OTRO layout
(flex column) que ya no se usa aquí. El transform:none de más arriba
en .apoyo .botones (línea ~1237) sólo cancela el del CONTENEDOR, no
el de estos dos botones en particular: sin este !important cada uno
queda corrido 60/80px del left en cqw ya calculado, y la fila se ve
descentrada y "Quiero ser voluntario" se sale por la derecha
(confirmado con getBoundingClientRect: right:395px sobre un viewport
de 375px). */
transform: none !important;
}
.apoyo .botones .btn-hueco {
left: 16cqw;
top: 97.5cqw;
width: 68cqw;
height: 10.5cqw;
padding: 0;
transform: none !important;
}
/* estilo.css trae, para el diseño móvil VIEJO (sin aplanar), una regla
con !important en cada propiedad (position/top/right/left/width) — sin
!important aquí esa regla ganaba pese a que cierre.css carga después,
y las coordenadas de abajo (calculadas por ancla) nunca llegaban a
aplicarse de verdad. Confirmado con getComputedStyle: sin !important
el navegador reportaba left:228px/top:29px/width:135px, los valores de
la regla vieja, no los de cqw de aquí. */
.apoyo .personaje {
display: block !important;
position: absolute !important;
left: calc(60cqw - 30px) !important;
top: calc(12cqw + 60px) !important;
width: 32cqw !important;
margin: 0 !important;
}
}