con display:flex se comporta como
bloque y ocupa el 100% del ancho disponible por sí mismo, sin
depender de align-items:stretch del padre — anulaba por
completo el efecto de "estirarse solo al ancho de las redes"
que se buscaba con .egs-footer__cta-width. Con inline-flex el
ancho vuelve a ser intrínseco (ajustado al texto/padding) y
entonces sí lo estira el align-items:stretch del wrapper. */
display: inline-flex;
margin-top: 0;
padding-inline: 28px;
}
/* Anclado abajo (como en el Figma): esta columna se estira
(align-items:stretch en .egs-footer__row) a la altura de la más
alta (--links), y el copyright debe quedar al fondo de ese
espacio, igual que "Aviso Legal" en la columna de al lado — no
fluyendo justo tras el botón/redes. */
/* order:3 explícito (mayor que redes:1 y botón:2): sin esto, el
copyright (order:initial → 0) competía en el ordenamiento flex
por delante del botón, y aunque margin-top:auto lo empujaba al
fondo del espacio disponible, quedaba VISUALMENTE entre las redes
y el botón en vez de después de ambos — dato confirmado por
captura. */
/* position:absolute (no en flujo normal, con margin-top:auto):
estando en flujo, el texto del copyright (dos líneas largas,
"... Todos los derechos reservados." / "Diseñado y desarrollado
por chillypills") seguía determinando el ancho intrínseco de la
columna --cta pese al flex:0 0 auto, dejando un hueco enorme
entre ella y la columna de logos (--certs) — dato confirmado por
captura. Sacarlo del flujo evita que su ancho de texto influya en
el de la columna: se ancla directamente contra .egs-footer (que
ya es position:relative) en su esquina inferior izquierda, con
el ancho completo del footer disponible para partirse en líneas
con más aire, sin condicionar el layout de las columnas de
encima. */
.egs-footer__col--cta .egs-footer__copy {
position: absolute;
/* Mismo padding lateral y max-width que .egs-container (no left:0
a secas): así queda alineado con el resto del contenido del
footer en vez de pegarse al borde real de la ventana. */
left: max(var(--gutter), calc(50% - var(--content-max) / 2 + var(--gutter)));
/* bottom = padding-bottom del footer (2em, ver .egs-footer arriba)
+ la diferencia de altura entre esta línea de texto (16px) y
la de "Aviso Legal" (36px, por su padding-top de 16px) — el
copyright es position:absolute respecto al padding-box de
.egs-footer, así que cualquier padding-bottom que se le añada
ahí desplaza igual el punto bottom:0 de este elemento, mientras
que "Aviso Legal" (en flujo normal) queda ANTES de ese padding
— dato confirmado por captura y medición exacta con puppeteer
(70px deja ambos alineados con el padding-bottom:2em actual). */
bottom: 70px;
/* width:max-content (antes calc(100% - 2*gutter), el ancho
completo del footer): aunque el texto se ve alineado a la
izquierda con text-align:left, la CAJA del seguía midiendo
todo ese ancho — su hitbox invisible (sin texto visible ahí,
pero sí clicable/interceptando eventos) se solapaba encima de
"Aviso Legal" y los enlaces legales, en la misma franja
horizontal, haciendo difícil clicarlos (dato confirmado con
DevTools: el rect real de .egs-footer__copy medía 1394px de
ancho, cubriendo toda la fila). max-content ciñe la caja del
elemento a su texto real. */
width: max-content;
max-width: calc(var(--content-max) - 2 * var(--gutter));
text-align: left;
margin: 0;
}
/* Oculto solo en desktop: en mobile (ancho estrecho) el salto de
línea sigue haciendo falta, pero aquí el footer tiene de sobra
para que todo el texto quepa en una sola línea, como en el
Figma. */
.egs-footer__copy-break { display: none; }
.egs-footer__col--certs {
display: flex;
/* flex-grow:0 (no 1 1 340px): con las 3 columnas creciendo por
igual para repartirse el ancho sobrante de --content-max
(1600px), esta columna (solo una imagen) ganaba mucho más ancho
del que necesitaba, y justify-content:center dejaba ese sobrante
como un hueco vacío a los lados de los logos, separándolos de
las columnas de texto. Con flex:0 0 auto se ciñe al ancho real
del contenido (la imagen), quedando pegada entre --cta y
--links, como en el Figma. */
flex: 0 0 auto;
align-items: flex-start;
justify-content: flex-start;
/* margin-top negativo (antes solo padding-top:4px): dato
confirmado por captura, los logos deben quedar más arriba,
alineados más cerca de la parte superior de "ENLACES"/
"CONTACTO", no varios px más abajo que ellos. */
margin-top: -16px;
margin-left: -80px;
padding-top: 4px;
/* Sin margin-left negativo (antes -90px): con el bloque
Enlaces/Contacto ahora pegado al borde derecho de su columna
(ver .egs-footer__col--links .egs-footer__cols más abajo), ese
desplazamiento ya no acercaba los logos al título, sino que
los desalineaba del resto — dato confirmado por captura. */
}
.egs-footer__col--certs .egs-certs-strip { margin: 0; }
.egs-footer__col--links {
/* flex-grow:0 (antes 1 1 420px, creciendo para llenar el espacio
sobrante de la fila): esa columna, más ancha que su propio
contenido (el bloque Enlaces/Contacto, ~560px, alineado a la
derecha con align-self:flex-end dentro de ella), dejaba un
hueco vacío A SU IZQUIERDA — el mismo gap:48px de la fila se
veía multiplicado por ese hueco extra, separando mucho más los
logos de "Enlaces" que de la columna del título. Con flex:0 0
auto la columna se ciñe a su contenido real, y el gap:48px de
la fila vuelve a ser la única separación entre ambos bloques.
align-items:flex-end (no la propia columna alineada a la
derecha del bloque interno): con flex:0 0 auto ya no hace falta
ese align-self en el hijo, el ancho de la columna coincide con
su contenido. */
/* flex-shrink:1 (no 0): puede encoger un poco en el rango
992-1024px si aún hace falta, ahora que su contenido interno
(.egs-footer__cols) ya tiene minmax en vez de un ancho fijo. */
flex: 0 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
/* Explícito (no confiar en el stretch por defecto): Enlaces/
Contacto y los enlaces legales quedan pegados al borde
izquierdo; el imagotipo es la excepción (align-self más abajo),
pegado a la derecha. */
align-items: flex-start;
}
/* gap horizontal reducido (antes 40px): dato confirmado por
captura, las columnas Enlaces/Contacto deben quedar más juntas
entre sí. */
/* grid-template-columns:auto auto (no repeat(2,1fr)): con 1fr cada
columna ocupaba la mitad exacta del ancho disponible sin importar
su contenido real, así que "Contacto" (mucho más ancho por sus
líneas de dirección/email) dejaba un hueco muerto entre el final
de "Enlaces" y donde arrancaba su propio contenido — el gap del
grid en sí ya era pequeño, pero no se notaba por ese ancho de
columna sobrante. auto ciñe cada columna a su contenido real. */
/* grid-template-columns con un ancho fijo igual en ambas pistas
(medido: "Contacto" ocupa ~370px de contenido real, más ancha
que "Enlaces"): con "auto auto" o con "repeat(2, max-content)"
cada columna del grid mide solo SU PROPIO contenido de forma
independiente (ninguna de las dos sintaxis iguala una pista al
ancho de la otra), así que "Enlaces" quedaba visiblemente más
estrecha que "Contacto" — dato confirmado por captura, se pide
el mismo ancho en ambas. Fijar el mismo valor en las dos pistas
es la única forma de igualarlas sin recurrir a JS. */
/* align-self:flex-end (no el flex-start heredado de --links): dato
confirmado por captura — el bloque Enlaces/Contacto debe quedar
pegado al borde derecho de su columna (como el "space-between"
de Elementor que compartiste), no al izquierdo. width:auto (no
100%) para que el bloque se ciña a su ancho real (2×260px + gap)
en vez de estirarse a ocupar toda la columna, que anularía el
efecto de "pegado a la derecha". */
/* minmax(180px, 260px) (no 260px fijo): con un ancho fijo, esta
fila (más el título ancho + los logos, todos flex:0 0 auto)
desbordaba horizontalmente en el rango 992-1024px — dato
confirmado con puppeteer, row.scrollWidth > row.clientWidth
justo ahí. minmax deja que la columna se encoja hasta 180px en
pantallas de escritorio más estrechas antes de forzar scroll,
sin necesidad de subir el breakpoint del layout de 3 columnas
completo (eso rompía el desktop normal, >1024px, cayendo al
layout apilado de mobile ahí también). */
.egs-footer__col--links .egs-footer__cols {
align-self: flex-end;
margin-bottom: 40px;
grid-template-columns: minmax(160px, 260px) minmax(160px, 260px);
justify-content: start;
gap: 32px 40px;
width: auto;
max-width: 100%;
}
/* El imagotipo va pegado a la derecha de la columna, no a la
izquierda como el resto de su contenido. */
.egs-footer__col--links .egs-footer__logo-link { display: block; align-self: flex-end; }
/* Reducido (antes 150px, se veía demasiado grande — dato confirmado
por captura), pero sin volver al 110px base: sigue algo mayor,
con más margen inferior que el tamaño base. */
.egs-footer__col--links .egs-footer__logo { width: 120px; margin: 0 0 40px; }
.egs-footer__col--links .egs-footer__legal {
/* Pegados a la derecha, alineados con el imagotipo (align-self:
flex-end) de encima, no a la izquierda como Enlaces/Contacto.
width:100% es imprescindible: la columna usa align-items:
flex-start, que encoge a cada hijo a su ancho de contenido, así
que sin esto el justify-content:flex-end no tenía espacio libre
donde empujar los enlaces y quedaban a la izquierda igual. */
width: 100%;
justify-content: flex-end;
padding-top: 20px;
/* Con align-items:stretch, esta columna es la más alta (referencia
de las otras dos): el separador de enlaces legales se ancla
abajo del todo, en vez de quedar pegado justo bajo el imagotipo. */
margin-top: auto;
}
}
/* Breakpoint intermedio (992-1199px): en vez de seguir comprimiendo
las columnas de Enlaces/Contacto hasta un mínimo (minmax(160px,...)
más abajo), directamente se baja la columna --links completa a su
propia línea, debajo de título+logos — dato pedido expresamente:
"cuando baje de x resolución que baje la columna abajo", en vez de
depender solo de la compresión flexible para rangos muy estrechos
de escritorio real. */
@media (min-width: 992px) and (max-width: 1199px) {
.egs-footer__row { flex-wrap: wrap; }
.egs-footer__col--links {
flex-basis: 100%;
margin-top: 24px;
}
/* Vuelve a la izquierda (no pegado a la derecha, ver align-self:
flex-end del bloque de arriba): al ocupar toda la fila propia,
"pegado a la derecha" ya no tiene sentido visual, dejaba
Enlaces/Contacto flotando lejos del resto del contenido. */
.egs-footer__col--links .egs-footer__cols {
align-self: flex-start;
}
.egs-footer__col--links .egs-footer__logo-link {
align-self: flex-start;
}
}
.egs-social {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-bottom: 34px;
}
.egs-social a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(134, 207, 202, .35);
color: var(--color-primary-light);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.egs-social a:hover { background: var(--color-primary); color: var(--color-white); }
.egs-social svg { width: 20px; height: 20px; }
.egs-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 18px;
padding-top: 16px;
/* Sin border-top (antes 1px solid rgba(255,255,255,.12)): dato
confirmado por captura, en Figma no hay línea separadora encima
de "Aviso Legal". */
font-family: var(--font-ui);
/* Dato exacto del panel de Figma ("Aviso Legal"): 13.74px, line-height 16px. */
font-size: clamp(12px, 0.2vw + 11px, 14px);
line-height: 16px;
}
/* padding vertical (sin margin negativo compensatorio, que
desalineaba el área clicable real respecto al texto visible —
dato confirmado: el cursor debía ponerse arriba o abajo del texto,
no encima, para activar el enlace): amplía el área clicable real
de cada enlace (antes solo el alto exacto del texto, 16px de
line-height, muy ajustado para el cursor). */
.egs-footer__legal a {
color: rgba(255, 255, 255, .66);
padding: 8px 0;
display: inline-block;
}
.egs-footer__legal a:hover { color: var(--color-primary-light); }
.egs-footer__legal .sep { opacity: .4; }
.egs-footer__copy {
margin-top: 14px;
text-align: center;
font-family: var(--font-ui);
/* Dato exacto del panel de Figma ("2026 Emergency Global System..."): 13.74px, line-height 16px. */
font-size: clamp(12px, 0.2vw + 11px, 14px);
line-height: 16px;
color: rgba(255, 255, 255, .5);
}
.egs-footer__copy a { color: var(--color-primary-light); }