/* ========================================================================== GELÉE — footer.css Footer compartido por las 6 páginas. ========================================================================== */ .pie { flex: none; position: relative; /* El footer va en blanco, no en crema. Las seis páginas terminan en crema, así que la onda de abajo siempre separa dos colores distintos en vez de quedar como una línea suelta sobre un fondo continuo. */ background-color: var(--blanco); 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 trazo va en terracota al 35%, el mismo tratamiento que los separadores de la franja de datos, para que se lea como decoración y no como un borde. Los colores van escritos a mano (%23FFFFFF = --blanco, %23A27572 = --marca) porque dentro de un data URI no se pueden usar variables: si cambian los tokens, hay que cambiarlos aquí. */ .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='%23FFFFFF'/%3E%3Cpath d='M0 20 C 35 8, 105 8, 140 20 S 245 32, 280 20' fill='none' stroke='%23A27572' stroke-opacity='0.35' stroke-width='1.5'/%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(--marca); text-decoration: none; transition: color var(--transicion); } .pie__logo:hover { color: var(--marca-oscuro); } .pie__descriptor { margin-top: var(--esp-16); font-size: var(--t-chico); color: var(--texto-suave); max-width: 34ch; } /* --- Columnas --- */ .pie__titulo { font-family: var(--fuente-cuerpo); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); 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(--texto-suave); max-width: 34ch; } .pie__enlace { color: var(--texto); text-decoration: none; width: fit-content; transition: color var(--transicion); } .pie__enlace:hover { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; } /* --- Barra legal --- */ .pie__legal { display: flex; flex-direction: column; gap: var(--esp-8); margin-top: var(--esp-40); padding-top: var(--esp-24); border-top: 1px solid var(--linea); font-size: var(--t-chico); color: var(--texto-suave); } /* Neutraliza el `p + p` global: aquí el ritmo lo da el gap del flex */ .pie__legal p { margin: 0; max-width: none; } .pie__legal a { color: var(--texto-suave); text-decoration: none; transition: color var(--transicion); } .pie__legal a:hover { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- Escritorio -------------------------------------------------------------------------- */ @media (min-width: 900px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--esp-48); } .pie__legal { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--esp-24); } }