/* ========================================================================== GELÉE — footer.css Footer compartido por las 6 páginas. ========================================================================== */ .pie { flex: none; position: relative; /* El footer va en el rosa de marca, el mismo de los botones de ordenar. Antes iba en blanco, que es más brillante que la crema del sitio y hacía que el pie se leyera como otra página en vez de como el cierre de esta. Ninguna página termina en rosa, así que la onda sigue separando dos colores distintos y no queda como una línea suelta sobre fondo continuo. Al ir sobre color, todo lo de dentro se invierte: el texto pasa a blanco y los tokens de gris y de línea no sirven aquí. */ background-color: var(--pie-fondo); color: var(--pie-texto); padding-block: var(--aire-seccion) var(--esp-40); } /* El hueco que deja libre la barra móvil va aquí y no en el : si va en el body se pinta con el fondo de la página y aparece una banda crema por debajo del footer blanco. */ @media (max-width: 899px) { .pie { padding-bottom: calc(var(--esp-40) + var(--barra-alto) + var(--barra-margen) * 2 + env(safe-area-inset-bottom, 0px)); } } /* La unión con el contenido no es una recta sino una onda. La franja se coloca *encima* del bloque anterior, no dentro del footer, y el dibujo trae dos cosas: el relleno blanco por debajo de la curva —el color del footer, subiendo— y el trazo sobre ella. El relleno se come los últimos 40px del bloque anterior, así que el corte entre crema y blanco deja de ser una recta y pasa a ser la curva. Es un mosaico de 160px que se repite en horizontal: la onda conserva su forma en cualquier ancho en vez de estirarse en pantallas grandes. El dibujo ya no lleva trazo encima. Cuando el footer era blanco hacía falta una línea para que la curva se notara contra la crema; ahora el corte de color la marca solo, y cualquier trazo encima quedaba de sobra. El color va escrito a mano (%23A27572 = --marca) porque dentro de un data URI no se pueden usar variables: si cambia el token, hay que cambiarlo aquí también. */ .pie::before { content: ""; position: absolute; left: 0; right: 0; /* +1px de solape para que no quede un pelo de fondo entre onda y footer */ top: calc(1px - var(--onda-alto)); height: var(--onda-alto); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='40' viewBox='0 0 280 40'%3E%3Cpath d='M0 20 C 35 8, 105 8, 140 20 S 245 32, 280 20 L280 40 L0 40 Z' fill='%23A27572'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: left bottom; background-size: 280px var(--onda-alto); } /* La onda sube sobre el último bloque de la página y le tapa 40px: se los devolvemos como aire para que el contenido no quede pegado a la curva. */ .sitio-main > :last-child { padding-bottom: calc(var(--aire-seccion) + var(--onda-alto)); } .pie__grid { display: grid; gap: var(--esp-40); text-align: left; } /* --- Bloque de marca --- */ .pie__logo { display: inline-block; font-family: var(--fuente-titulo); font-size: 1.375rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: var(--pie-texto); text-decoration: none; } /* Sin cambio de color al pasar el ratón: sobre el rosa no queda ningún tono por encima del blanco al que subir. */ .pie__descriptor { margin-top: var(--esp-16); font-size: var(--t-chico); color: var(--pie-texto); max-width: 34ch; } /* --- Columnas --- */ .pie__titulo { font-family: var(--fuente-cuerpo); font-size: 0.75rem; /* 600 es el peso más grueso de Lora que carga la página. El 700 el navegador lo tendría que falsear engordando el trazo, y a 12px en mayúsculas eso se ve embarrado en vez de fuerte. */ font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pie-texto); margin-bottom: var(--esp-16); } .pie__lista { display: flex; flex-direction: column; gap: var(--esp-8); font-size: var(--t-chico); line-height: 1.6; } .pie__direccion { font-style: normal; font-size: var(--t-chico); line-height: 1.6; color: var(--pie-texto); max-width: 34ch; } /* Sobre el rosa todo el texto va del mismo blanco. El enlace se distingue al pasar el ratón por el subrayado, que aquí es la única señal disponible: no hay un color más fuerte que el blanco al que cambiar. */ .pie__enlace { color: var(--pie-texto); text-decoration: none; width: fit-content; } .pie__enlace:hover { text-decoration: underline; text-underline-offset: 3px; } /* --- Bloque legal --- Va en columna en las dos medidas. Antes en escritorio se abría en fila con los extremos separados, pero el orden que se pide ahora es de arriba abajo: copyright, términos, un respiro y la firma. */ .pie__legal { display: flex; flex-direction: column; gap: var(--esp-8); margin-top: var(--esp-40); padding-top: var(--esp-24); /* --linea es un beige claro pensado para fondos crema: sobre el rosa no se vería. Aquí la raya es el propio blanco, bajado hasta que solo divide. */ border-top: 1px solid var(--pie-linea); font-size: var(--t-chico); color: var(--pie-texto); } /* Neutraliza el `p + p` global: aquí el ritmo lo da el gap del flex */ .pie__legal p { margin: 0; max-width: none; } /* El copyright y los términos, en un bloque. Son las dos líneas que hablan de GELÉE y se leen seguidas, con el hueco corto. El gap de .pie__legal no entra aquí dentro, y con el margin en cero de la regla de arriba las dos líneas quedarían pegadas, así que este bloque pone el suyo. */ .pie__legal-marca { display: flex; flex-direction: column; gap: var(--esp-8); } /* La firma de quien hizo el sitio, al final de todo. Va separada del bloque de arriba porque es un crédito y no información de GELÉE, y ese aire de más es lo que marca la diferencia. Y un punto más callada, que al mismo blanco competía con el copyright. El margen lleva el selector entero porque `.pie__legal p` de más arriba pone todos los márgenes en cero, y con una sola clase perdería. */ .pie__legal .pie__credito { margin-top: var(--esp-16); opacity: 0.72; } .pie__legal a { color: var(--pie-texto); text-decoration: none; } .pie__legal a:hover { text-decoration: underline; text-underline-offset: 3px; } /* El foco del teclado es un aro en --marca, o sea el mismo color del fondo de aquí dentro: sobre el footer desaparecía. Se cambia a blanco. */ .pie :focus-visible { outline-color: var(--pie-texto); } /* -------------------------------------------------------------------------- Escritorio -------------------------------------------------------------------------- */ @media (min-width: 900px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--esp-48); } }