/*
 * footer-radvasc.css  —  v3.0
 * ===================================================
 * Footer de RadVasc Medical para el tema WordPress "Simplest"
 * Fondo: azul claro #EEF5FD | Texto: azul marino #002d56
 * ===================================================
 */

/* ════════════════════════════════════════
   RESET ACOTADO
   ⚠️ NUNCA aplicar font-family a ::before
   ni ::after → rompe los iconos Font Awesome
   que usan esos pseudoelementos.
════════════════════════════════════════ */
.rv-footer *,
.rv-footer *::before,
.rv-footer *::after {
    box-sizing: border-box;
}

/* Tipografía solo en elementos de texto, NO en pseudo-elementos */
.rv-footer,
.rv-footer a,
.rv-footer p,
.rv-footer span,
.rv-footer h1,
.rv-footer h2,
.rv-footer h3,
.rv-footer h4,
.rv-footer div,
.rv-footer nav,
.rv-footer li,
.rv-footer ul {
    font-family: "Poppins", sans-serif;
}

/* ════════════════════════════════════════
   FOOTER — BLOQUE EXTERIOR (ancho total)
════════════════════════════════════════ */
.rv-footer {
    background-color: #EEF5FD;
    color: #002d56;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
    margin-top: 0;
}

/* ════════════════════════════════════════
   CONTENEDOR INTERNO
════════════════════════════════════════ */
.rv-footer__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 6vw 32px;
}

/* ════════════════════════════════════════
   ROW 1 — Grid de 4 columnas (desktop)
════════════════════════════════════════ */
.rv-footer__row1 {
    display: grid;
    grid-template-columns: 1.5fr 1.4fr 1.1fr 0.9fr;
    gap: 48px 40px;
    align-items: start;
}

/* ── Columna base ── */
.rv-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Headings de columna */
.rv-footer__heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #002d56;
    margin: 0 0 20px 0;
    padding: 0;
    line-height: 1.3;
}

/* Links de navegación dentro de cada columna */
.rv-footer__col nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rv-footer__col nav a {
    display: block;
    font-size: 0.88rem;
    font-weight: 400;
    color: #436788;
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.22s;
    line-height: 1.5;
}

.rv-footer__col nav a:hover {
    color: #027df0;
}

/* ════════════════════════════════════════
   COLUMNA 1 — Logo + Social + Legal
════════════════════════════════════════ */
.rv-footer__col--brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Logo */
.rv-footer__logo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 20px;
    width: clamp(90px, 7vw, 130px);
}

.rv-footer__logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Redes sociales ──
   Los iconos Font Awesome usan font-family propia
   en el ::before del <i>. No interferimos con eso. */
.rv-footer__social {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rv-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Color oscuro visible sobre fondo claro */
    color: #002d56;
    /* Tamaño generoso para que el icono sea visible */
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.22s, transform 0.2s;
    background: none;
    border: none;
    padding: 0;
    /* Dimensiones mínimas para área de clic */
    min-width: 24px;
    min-height: 24px;
}

.rv-footer__social a:hover {
    color: #027df0;
    transform: translateY(-3px);
}

/* Asegura que el <i> dentro del <a> no herede Poppins */
.rv-footer__social a i {
    font-family: inherit; /* hereda la FA font, no Poppins */
    font-style: normal;
    line-height: 1;
    display: inline-block;
}

/* ── Legal links ── */
.rv-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rv-footer__legal a {
    display: block;
    font-size: 0.84rem;
    font-weight: 400;
    color: #436788;
    text-decoration: none;
    transition: color 0.22s;
    line-height: 1.5;
}

.rv-footer__legal a:hover {
    color: #027df0;
}

/* ════════════════════════════════════════
   DIVISOR HR
════════════════════════════════════════ */
.rv-footer__hr {
    border: none;
    border-top: 1px solid rgba(0, 45, 86, 0.15);
    margin: 48px 0 28px;
}

/* ════════════════════════════════════════
   ROW 2 — Copyright
════════════════════════════════════════ */
.rv-footer__row2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 36px;
}

.rv-footer__row2 span {
    display: inline-flex;
    align-items: center;
}

.rv-footer__row2 a {
    font-size: 0.84rem;
    color: #436788;
    text-decoration: none;
    transition: color 0.22s;
    line-height: 1.4;
    display: inline;
}

.rv-footer__row2 a:hover {
    color: #027df0;
}

.rv-footer__sep {
    color: rgba(0, 45, 86, 0.25);
    font-size: 1rem;
    user-select: none;
    display: inline-block;
}

/* ════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 1024px)
════════════════════════════════════════ */
@media (max-width: 1024px) {
    .rv-footer__row1 {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }

    .rv-footer__col--brand {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 40px;
        align-items: flex-start;
    }

    .rv-footer__logo {
        width: clamp(90px, 16vw, 140px);
    }
}

/* ════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 640px)
   TODO centrado horizontalmente
════════════════════════════════════════ */
@media (max-width: 640px) {
    .rv-footer__container {
        padding: 48px 1.25rem 24px;
    }

    /* Grid: 1 sola columna */
    .rv-footer__row1 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Todas las columnas centradas */
    .rv-footer__col {
        align-items: center;
        text-align: center;
    }

    /* Col del brand: columna centrada */
    .rv-footer__col--brand {
        grid-column: 1;
        flex-direction: column;
        align-items: center;
        gap: 0;
        text-align: center;
    }

    /* Logo centrado */
    .rv-footer__logo {
        width: 110px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 18px;
    }

    /* Redes sociales centradas */
    .rv-footer__social {
        justify-content: center;
        gap: 20px;
    }

    /* Links legales centrados */
    .rv-footer__legal {
        align-items: center;
        text-align: center;
    }

    /* Headings centrados */
    .rv-footer__heading {
        text-align: center;
    }

    /* Nav links centrados */
    .rv-footer__col nav {
        align-items: center;
    }

    .rv-footer__col nav a {
        text-align: center;
    }

    /* HR */
    .rv-footer__hr {
        margin: 32px 0 20px;
    }

    /* Copyright centrado en columna */
    .rv-footer__row2 {
        flex-direction: column;
        gap: 4px;
        text-align: center;
        padding-bottom: 28px;
    }

    .rv-footer__sep {
        display: none;
    }
}

@media (max-width: 480px) {
    .rv-footer__container {
        padding: 40px 1rem 20px;
    }
}