DataScope26/WEB
0
1/* ─── FOOTER ────────────────────────────────────────────────────────────────── */2 3.footer {4 background: var(--surface-2);5 border-top: 0.0625rem solid rgba(38, 38, 38, 0.5);6 padding: 0 2rem;7 height: 11.25rem;8 display: flex;9 align-items: center;10 justify-content: space-between;11 gap: 2rem;12 font-family: 'Roboto', sans-serif;13}14 15.footer__brand,16.footer__brand2 {17 min-width: 16.25rem;18}19 20.footer__brand2 {21 display: flex;22 justify-content: flex-end;23}24 25.footer__brand h3 {26 font-size: 1.125rem;27 font-weight: 600;28 color: var(--green);29 margin-bottom: 0.5rem;30}31 32.footer__brand p {33 font-size: 0.8125rem;34 color: var(--muted);35 line-height: 1.5;36 max-width: 16.25rem;37}38 39.footer__links {40 display: flex;41 gap: 2.5rem;42 list-style: none;43}44 45.footer__links a {46 font-size: 0.8125rem;47 color: var(--muted);48 text-decoration: none;49 transition: color 0.2s;50}51 52.footer__links a:hover {53 color: var(--green);54}55 56.footer__links img {57 display: block;58 max-width: 2.1875rem;59 max-height: 2.1875rem;60 width: 3.75rem;61 height: 3.75rem;62 object-fit: contain;63 /* remove hover animation to keep icons static */64 transition: none;65}66 67.footer__links a:hover img {68 /* remove transform and shadow on hover */69 transform: none;70 box-shadow: none;71}72 73.footer__copy {74 font-size: 0.8125rem;75 color: var(--green-85);76 white-space: nowrap;77}78 79 80@media (max-width: 48rem) {81 .footer {82 flex-direction: column;83 height: auto;84 padding: 2rem 1.5rem;85 text-align: center;86 gap: 1.5rem; /* reemplaza el 2rem original, pensado para fila, no para columna */87 }88 89 .footer__brand {90 display: flex;91 flex-direction: column;92 align-items: center;93 }94 95 .footer__brand p {96 max-width: 20rem; /* centrado se ve mejor un poco más ancho */97 margin: 0 auto;98 }99 100 .footer__links {101 flex-wrap: wrap;102 justify-content: center;103 gap: 1.25rem;104 padding-right: 0; /* el 9% era para compensar espacio en fila, sobra en columna */105 }106 107 .footer__copy {108 white-space: normal; /* evita overflow si el texto no entra en una línea */109 order: 3; /* copyright siempre al final, sin depender del orden en el DOM */110 }111}112 113@media (max-width: 25rem) {114 .footer {115 padding: 1.5rem 1rem;116 gap: 1.25rem;117 }118 119 .footer__links {120 gap: 1rem 1.5rem; /* row-gap más chico, column-gap se mantiene legible */121 }122}