/**
 * Pie de página, replicado del de la landing autocaravanastrt.com.
 *
 * Los valores no se han sacado a ojo de una captura: son los del
 * `tailwind.config.ts` de la landing y los de las utilidades que usa su
 * `components/Footer.tsx`, traducidos a CSS plano.
 *
 *   bg-ink          -> #0A0A0A        max-w-content   -> 1200px
 *   text-bone       -> #FAFAFA        tracking-widest2-> .2em
 *   border-white/10 -> #ffffff1a      gap-10          -> 40px
 *   py-14           -> 56px           px-5 / md:px-8  -> 20px / 32px
 *
 * Los cortes son los de Tailwind: `md` en 768px (dos columnas) y `lg` en 1024px
 * (las cuatro, con la primera más ancha).
 *
 * ## Una desviación deliberada respecto a la landing
 *
 * La landing pinta el «Un servicio de…» y el aviso de derechos en `text-bone/40`,
 * que sobre el fondo da **3,66:1** — por debajo del mínimo AA de 4,5:1, y siendo
 * texto de 12px, que es donde menos margen hay. Aquí esa opacidad sube a 58%
 * (**6,61:1**, medido con `despliegue/comprobar-contraste-pie.js`). La diferencia
 * no se aprecia al lado del original y el texto pasa
 * a ser legible para quien no tiene vista de veinte años. Conviene llevar el
 * mismo arreglo a la landing.
 *
 * ## Por qué todo cuelga de `.trt-pie-sitio`
 *
 * Este CSS aterriza en una página que ya viste el tema (Astra) y, en producción,
 * también un constructor (Elementor). Cualquier selector suelto sobre `footer`,
 * `ul` o `a` chocaría con los suyos. Todo va anidado bajo `.trt-pie-sitio`, y lo que
 * hay que neutralizar del tema se neutraliza explícitamente en vez de a base de
 * `!important`.
 */

.trt-pie-sitio {
    /* Paleta de la landing. Ver tailwind.config.ts. */
    --trt-pie-sitio-fondo: #0a0a0a;
    --trt-pie-sitio-texto: #fafafa;
    --trt-pie-sitio-linea: rgb(255 255 255 / 10%);

    /*
     * Las opacidades del texto, como variables y no repetidas: son la escala de
     * jerarquía del pie y conviene poder leerla de un vistazo.
     */
    --trt-pie-sitio-suave: rgb(250 250 250 / 80%);   /* enlaces y datos   */
    --trt-pie-sitio-lema: rgb(250 250 250 / 60%);    /* descripción       */
    --trt-pie-sitio-titulo: rgb(250 250 250 / 50%);  /* encabezados       */
    --trt-pie-sitio-tenue: rgb(250 250 250 / 58%);   /* sello y derechos  */

    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--trt-pie-sitio-linea);
    background: var(--trt-pie-sitio-fondo);
    color: var(--trt-pie-sitio-texto);
    font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.5;
}

.trt-pie-sitio *,
.trt-pie-sitio *::before,
.trt-pie-sitio *::after {
    box-sizing: inherit;
}

.trt-pie-sitio__ancho {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 20px;
}

/*
 * Una sola columna en móvil. El `grid` con `gap` sustituye a los márgenes entre
 * bloques, así que no hay que ir limpiando el último.
 */
.trt-pie-sitio__rejilla {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
}

/* --- Columna de marca --- */

.trt-pie-sitio__logo {
    display: block;
    height: 56px;
    width: auto;
    max-width: 100%;
}

.trt-pie-sitio__lema {
    margin: 16px 0 0;
    max-width: 320px;
    color: var(--trt-pie-sitio-lema);
    font-size: 14px;
    line-height: 1.625;
}

.trt-pie-sitio__sello {
    margin: 12px 0 0;
    color: var(--trt-pie-sitio-tenue);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* --- Columnas de enlaces y datos --- */

/*
 * Son `<h2>` por jerarquía del documento, no por tamaño: el tema los pintaría
 * como titulares de sección. Aquí se devuelven al tamaño que les toca.
 */
.trt-pie-sitio__titulo {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    color: var(--trt-pie-sitio-titulo);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.5;
    text-transform: none;
}

.trt-pie-sitio__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.trt-pie-sitio__lista > li {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.trt-pie-sitio__lista > li:last-child {
    margin-bottom: 0;
}

.trt-pie-sitio__lista--datos {
    color: var(--trt-pie-sitio-suave);
}

.trt-pie-sitio a {
    color: var(--trt-pie-sitio-suave);
    text-decoration: none;
    /* Objetivo táctil holgado sin romper el interlineado de la lista. */
    padding: 2px 0;
}

.trt-pie-sitio a:hover,
.trt-pie-sitio a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/*
 * El foco tiene que verse sobre fondo casi negro: el `outline` por defecto de
 * algunos navegadores es negro y ahí desaparece.
 */
.trt-pie-sitio a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Un correo largo no debe desbordar la columna en un móvil estrecho. */
.trt-pie-sitio__parte {
    overflow-wrap: anywhere;
}

/* --- Barra inferior --- */

.trt-pie-sitio__abajo {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--trt-pie-sitio-linea);
    color: var(--trt-pie-sitio-tenue);
    font-size: 12px;
    text-align: center;
}

/* --- Tableta: dos columnas, como `md:grid-cols-2` --- */

@media (min-width: 768px) {
    .trt-pie-sitio__ancho {
        padding-left: 32px;
        padding-right: 32px;
    }

    .trt-pie-sitio__rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Escritorio: las cuatro, con la marca más ancha (`lg:grid-cols-[1.4fr_1fr_1fr_1fr]`) --- */

@media (min-width: 1024px) {
    .trt-pie-sitio__rejilla {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

/*
 * Quien haya pedido menos movimiento no gana nada con la transición del color,
 * pero tampoco la sufre: no hay animaciones aquí. Se deja la regla como recordatorio
 * de que cualquier efecto que se añada más adelante tiene que respetarla.
 */
@media (prefers-reduced-motion: reduce) {
    .trt-pie-sitio * {
        transition: none !important;
    }
}