Mapa «Dónde estamos» con cifras; botones en columna en móvil hacia el mapa, el panel y el contacto

This commit is contained in:
hacklab 2026-10-14 14:31:59 +02:00
parent 27a4ba5ca1
commit db898b9a42
13 changed files with 343 additions and 154 deletions

View file

@ -129,7 +129,36 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
.ejes, .principios { grid-template-columns: minmax(0, 1fr); }
.paises { gap: 14px; }
.pais p { overflow-wrap: anywhere; }
.bt { font-size: 22px; }
.bloque { padding: 32px 14px; }
.intro p { font-size: 18px; }
}
.impacto { padding-top: 32px; }
.cifras { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.cifras li { display: flex; align-items: baseline; gap: 8px; }
.cifras b { font: 400 54px/1 var(--bt); color: var(--neon); }
.cifras b a { text-decoration: none; }
.cifras span { font: 20px/1.1 var(--bt); text-transform: uppercase; letter-spacing: .03em; max-width: 11em; }
.impacto figure { margin: 0; }
.impacto-mapa { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 10px; box-shadow: 6px 6px 0 var(--fg); }
.impacto-mapa text { font: 600 14px var(--txt); fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.impacto-mapa .rot { font: 400 14px var(--bt); letter-spacing: .05em; text-transform: uppercase; }
.impacto-mapa a:hover use, .impacto-mapa a:focus use { transform-box: fill-box; transform-origin: center; transform: scale(1.3); }
.impacto figcaption { max-width: 900px; margin: 14px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 15px; }
.impacto figcaption p { margin: 0; }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.leyenda li { display: flex; align-items: center; gap: 6px; }
.impacto .base { max-width: 900px; margin: 6px auto 0; font-size: 13px; opacity: .75; }
.pais:target { outline: 3px solid var(--neon); outline-offset: 6px; border-radius: 4px; }
.contacto { margin: 22px 0 0; border: var(--bd); border-left: 14px solid var(--neon); border-radius: 10px; padding: 10px 16px; }
@media (max-width: 640px) {
.acciones { flex-direction: column; align-items: stretch; gap: 14px; max-width: 460px; margin: 18px auto 0; }
.bt { display: block; font-size: 30px; padding: 18px 16px 15px; text-align: center; }
.idiomas { gap: 8px; font-size: 22px; }
.idiomas a { padding: 8px 12px 6px; }
.cifras { gap: 8px 18px; }
.cifras b { font-size: 44px; }
.cifras span { font-size: 17px; }
.impacto-mapa { box-shadow: 4px 4px 0 var(--fg); }
.impacto-mapa text { font-size: 19px; }
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -129,7 +129,36 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
.ejes, .principios { grid-template-columns: minmax(0, 1fr); }
.paises { gap: 14px; }
.pais p { overflow-wrap: anywhere; }
.bt { font-size: 22px; }
.bloque { padding: 32px 14px; }
.intro p { font-size: 18px; }
}
.impacto { padding-top: 32px; }
.cifras { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.cifras li { display: flex; align-items: baseline; gap: 8px; }
.cifras b { font: 400 54px/1 var(--bt); color: var(--neon); }
.cifras b a { text-decoration: none; }
.cifras span { font: 20px/1.1 var(--bt); text-transform: uppercase; letter-spacing: .03em; max-width: 11em; }
.impacto figure { margin: 0; }
.impacto-mapa { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 10px; box-shadow: 6px 6px 0 var(--fg); }
.impacto-mapa text { font: 600 14px var(--txt); fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.impacto-mapa .rot { font: 400 14px var(--bt); letter-spacing: .05em; text-transform: uppercase; }
.impacto-mapa a:hover use, .impacto-mapa a:focus use { transform-box: fill-box; transform-origin: center; transform: scale(1.3); }
.impacto figcaption { max-width: 900px; margin: 14px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 15px; }
.impacto figcaption p { margin: 0; }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.leyenda li { display: flex; align-items: center; gap: 6px; }
.impacto .base { max-width: 900px; margin: 6px auto 0; font-size: 13px; opacity: .75; }
.pais:target { outline: 3px solid var(--neon); outline-offset: 6px; border-radius: 4px; }
.contacto { margin: 22px 0 0; border: var(--bd); border-left: 14px solid var(--neon); border-radius: 10px; padding: 10px 16px; }
@media (max-width: 640px) {
.acciones { flex-direction: column; align-items: stretch; gap: 14px; max-width: 460px; margin: 18px auto 0; }
.bt { display: block; font-size: 30px; padding: 18px 16px 15px; text-align: center; }
.idiomas { gap: 8px; font-size: 22px; }
.idiomas a { padding: 8px 12px 6px; }
.cifras { gap: 8px 18px; }
.cifras b { font-size: 44px; }
.cifras span { font-size: 17px; }
.impacto-mapa { box-shadow: 4px 4px 0 var(--fg); }
.impacto-mapa text { font-size: 19px; }
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long