/* =========================================================================
   GLOBAL SECTION: Layout And Footer
   ========================================================================= */

/* =========================================================================
   CITEM — Layout: "Sistema 2026" (Standalone Theme Folder)
   Full-width, sin max-width, bordes gruesos, footer crudo.
   ========================================================================= */

/* --- Container Core --- */
.container {
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* SYNC DS §3.3: en móvil pequeño --spacing-md (32px por lado) se come ~17%
   de un viewport de 375px. Esta regla vivía en pages/landing.responsive.css,
   así que solo la disfrutaba la home; el resto de páginas se quedaba con los
   32px. Es una regla de layout del container, no de una página. */
@media (max-width: 599px) {
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* ==========================================================================
   FOOTER — Sistema 2026
   Design principles:
   - Identidad canónica: kicker → wordmark → tagline (SSoT: docs/brand/IDENTIDAD_CITEM.md)
   - Zero magic numbers: solo design tokens
   - Links legibles: opacity mínimo 0.7, hover con color coral
   ========================================================================== */

.main-footer {
    background-color: var(--c-indigo);
    border-top: var(--border-w-accent) solid var(--c-coral);
}

/* ── Grid ── */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

@media (min-width: 900px) {
    /* Dos columnas: marca + navegación. Fue 2.2fr 1fr 1.5fr mientras hubo
       columna de CTA en el footer. */
    .footer-grid {
        grid-template-columns: 2.2fr 1fr;
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }
}

/* ── Brand column — orden canónico: kicker → wordmark → tagline ── */
/* SYNC DS §6.1/§8.2: el pie va sobre Índigo. Titulares pequeños en Papel
   (el Coral sobre Índigo solo vale grande: 3,10) y nada por debajo de 12 px. */
.footer-kicker {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--tracking-ui);
    color: var(--c-paper);
    margin-bottom: var(--space-sm);
}

/* El logotipo Papel sobre Índigo (§4.3), no la palabra en Gobold (§4.5). */
/* Área de respeto (§4.4): x = 14,6 % del alto del logo; a 84 px, 12,3 px.
   Los márgenes de arriba y abajo le dan algo más. */
.footer-logo {
    display: inline-block;
    margin: var(--space-md) 0;
}

.footer-logo img {
    width: 120px;
    height: auto;
}

.footer-tagline {
    color: var(--c-paper);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--c-text-muted-inverse);
    margin: 0;
}

/* ── Column headings ── */
.footer-heading {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--tracking-ui);
    color: var(--c-paper);
    margin-bottom: var(--space-lg);
}

/* ── Nav link list ── */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav ul li a {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-muted-inverse);
    /* El texto solo levanta 20px de alto; el padding lleva el área pulsable a
       44px (WCAG 2.5.8) sin mover el ritmo vertical: parte del margin-bottom
       pasa a ser padding. */
    padding: 0.75rem 0;
    margin-bottom: calc(var(--space-md) - 0.75rem);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.footer-nav ul li a:hover {
    color: var(--c-paper);
}

/* .footer-cta-text y .footer-cta-btn se retiraron junto con la columna de CTA
   del footer: el sitio tiene una sola acción principal y la lleva el header. */

/* ── Footer bottom ── */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-top: 1px solid rgb(var(--c-paper-rgb) / 0.15);
}

.footer-copyright {
    color: var(--c-text-muted-inverse);
    font-size: 0.75rem;
    font-weight: 400;
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: var(--space-xl);
}

.footer-legal a {
    /* inline-block + padding: sin esto el área pulsable eran los 17px que
       levanta el texto. Son los cuatro enlaces legales — los peores del sitio
       en proporción — y en móvil el footer se apila, así que el padding
       vertical no los junta con nada. */
    display: inline-block;
    padding: 0.85rem 0;   /* 0.75rem dejaba el objetivo en 41px, tres cortos */
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-muted-inverse);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.footer-legal a:hover {
    color: var(--c-paper);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    /* Centrar todo el footer en mobile */
    .main-footer {
        text-align: center;
    }

    .footer-nav ul li a {
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
    }
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
    .footer-nav ul li a,
    .footer-legal a {
        transition: none !important;
        transform: none !important;
    }
}