/* ============================================================
   AVIR FUNDACIÓN — main.css
   Menú profesional | Prefijo: homher-
   Paleta del logo:
     Azul celeste  #3AAEDC
     Morado        #7B2F9E
     Magenta       #E5197D
     Naranja/oro   #F5A623
============================================================ */

/* ---- Reset mínimo ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #2a2a2a;
}

.homher-body-lock {
    overflow: hidden;
}

/* ============================================================
   TOPBAR — Fondo azul degradado con acento morado
============================================================ */
.homher-topbar {
    width: 100%;
    background: linear-gradient(100deg, #1a6fa3 0%, #2b95c9 45%, #3AAEDC 75%, #7B2F9E 100%);
    position: relative;
    overflow: hidden;
}

/* Brillo decorativo superior */
.homher-topbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.30);
}

/* Brillo inferior sutil */
.homher-topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.18);
}

.homher-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* ---- Izquierda: contacto ---- */
.homher-topbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.homher-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 20px;
    letter-spacing: 0.01em;
    transition: background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.homher-topbar-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.homher-topbar-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.homher-topbar-item:hover .homher-topbar-icon-wrap {
    background: rgba(255, 255, 255, 0.30);
}

.homher-topbar-icon-wrap svg {
    width: 12px;
    height: 12px;
    color: #fff;
    stroke: #fff;
}

.homher-topbar-text {
    letter-spacing: 0.01em;
}

/* Separador vertical */
.homher-topbar-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.28);
    margin: 0 2px;
    flex-shrink: 0;
}

/* ---- Derecha: redes sociales ---- */
.homher-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.homher-topbar-social-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.70);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
}

/* Botones de redes */
.homher-topbar-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    text-decoration: none;
    transition: background 0.28s ease, transform 0.25s ease,
        border-color 0.28s ease, box-shadow 0.28s ease;
}

.homher-topbar-social svg {
    width: 14px;
    height: 14px;
    color: #fff;
    stroke: #fff;
}

/* Hover con color de cada red */
.homher-topbar-social--fb:hover {
    background: #1877F2;
    border-color: #1877F2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.50);
}

.homher-topbar-social--ig:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 48, 108, 0.50);
}

.homher-topbar-social--yt:hover {
    background: #FF0000;
    border-color: #FF0000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.45);
}

/* ============================================================
   HEADER PRINCIPAL
============================================================ */
.homher-header {
    position: sticky;
    top: 0;
    z-index: 900;
    width: 100%;
    background: #ffffff;
    transition: box-shadow 0.35s ease;
}

/* Línea inferior animada con los 4 colores del logo */
.homher-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            #3AAEDC 0%, #7B2F9E 25%, #E5197D 50%, #F5A623 75%, #3AAEDC 100%);
    background-size: 200% 100%;
    animation: homher-border-flow 5s linear infinite;
}

@keyframes homher-border-flow {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.homher-header--scrolled {
    box-shadow: 0 6px 32px rgba(58, 174, 220, 0.16), 0 2px 8px rgba(0, 0, 0, 0.07);
}

.homher-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* ============================================================
   LOGO + TEXTO MARCA
============================================================ */
.homher-logo-wrap {
    flex-shrink: 0;
}

.homher-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    border-radius: 6px;
    outline-offset: 4px;
    transition: opacity 0.25s ease, transform 0.28s ease;
}

.homher-logo-link:hover {
    opacity: 0.90;
    transform: scale(1.02);
}

.homher-logo-img {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Texto AVIR / Fundación junto al logo */
.homher-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 1px;
}

.homher-logo-name {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    background: linear-gradient(135deg, #3AAEDC 20%, #7B2F9E 65%, #E5197D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-transform: uppercase;
}

.homher-logo-sub {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #888;
    padding-left: 2px;
}

/* ============================================================
   NAVEGACIÓN — ESCRITORIO
============================================================ */
.homher-nav {
    display: flex;
    align-items: center;
}

.homher-nav-mobile-head {
    display: none;
}

.homher-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.homher-nav-item {
    position: relative;
}

/* ---- Enlace ---- */
.homher-nav-link {
    position: relative;
    display: inline-block;
    padding: 9px 13px;
    font-size: 0.845rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    color: #3a3a50;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: color 0.25s ease;
    overflow: hidden;
}

/* Fondo hover */
.homher-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(135deg,
            rgba(58, 174, 220, 0.09),
            rgba(229, 25, 125, 0.06));
    opacity: 0;
    transition: opacity 0.26s ease;
}

/* Línea inferior animada */
.homher-nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 13px;
    right: 13px;
    height: 2.5px;
    border-radius: 4px;
    background: linear-gradient(90deg, #3AAEDC, #E5197D);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.homher-nav-link:hover {
    color: #3AAEDC;
}

.homher-nav-link:hover::before {
    opacity: 1;
}

.homher-nav-link:hover::after,
.homher-nav-link--active::after {
    transform: scaleX(1);
}

.homher-nav-link--active {
    color: #3AAEDC;
}

.homher-nav-link--active::before {
    opacity: 1;
}

/* ============================================================
   BOTÓN DONACIÓN
============================================================ */
.homher-nav-item--cta {
    margin-left: 14px;
}

.homher-btn-donacion {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 50px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    z-index: 0;
}

/* Fondo del botón */
.homher-btn-donacion::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, #E5197D 0%, #F5A623 100%);
    z-index: -1;
    transition: opacity 0.30s ease;
}

/* Fondo hover más brillante */
.homher-btn-donacion::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, #F5A623 0%, #E5197D 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.30s ease;
}

.homher-btn-donacion:hover::after {
    opacity: 1;
}

.homher-btn-donacion:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 32px rgba(229, 25, 125, 0.40),
        0 4px 12px rgba(245, 166, 35, 0.28);
}

.homher-btn-donacion:active {
    transform: translateY(-1px) scale(0.99);
}

/* SVG latido */
.homher-btn-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    animation: homher-heartbeat 2.4s ease-in-out infinite;
}

@keyframes homher-heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.24);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.12);
    }

    60% {
        transform: scale(1);
    }
}

.homher-btn-donacion span {
    position: relative;
    z-index: 1;
}

/* ============================================================
   HAMBURGUESA
============================================================ */
.homher-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    width: 46px;
    height: 46px;
    background: none;
    border: 2px solid #e6e8f0;
    border-radius: 12px;
    cursor: pointer;
    padding: 9px;
    flex-shrink: 0;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.homher-hamburger:hover {
    border-color: #3AAEDC;
    background: rgba(58, 174, 220, 0.06);
}

.homher-hamburger-bar {
    display: block;
    height: 2.5px;
    border-radius: 3px;
    background: linear-gradient(90deg, #3AAEDC, #7B2F9E);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s ease,
        width 0.25s ease;
    transform-origin: center;
}

.homher-hamburger-bar:nth-child(1) {
    width: 22px;
}

.homher-hamburger-bar:nth-child(2) {
    width: 15px;
}

.homher-hamburger-bar:nth-child(3) {
    width: 22px;
}

.homher-hamburger--active .homher-hamburger-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
    width: 22px;
}

.homher-hamburger--active .homher-hamburger-bar:nth-child(2) {
    opacity: 0;
    width: 0;
}

.homher-hamburger--active .homher-hamburger-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
    width: 22px;
}

/* ============================================================
   OVERLAY
============================================================ */
.homher-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 40, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 890;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s ease;
}

.homher-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================
   RESPONSIVE (< 1024px)
============================================================ */
@media (max-width: 1023px) {

    .homher-hamburger {
        display: flex;
    }

    .homher-overlay {
        display: block;
    }

    /* Panel lateral */
    .homher-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100dvh;
        background: #ffffff;
        z-index: 910;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: right 0.42s cubic-bezier(0.34, 1.10, 0.64, 1);
        box-shadow: -8px 0 48px rgba(58, 174, 220, 0.14);
    }

    /* Borde izquierdo degradado */
    .homher-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #3AAEDC, #7B2F9E, #E5197D, #F5A623);
    }

    .homher-nav--open {
        right: 0;
    }

    /* Cabecera del panel */
    .homher-nav-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 16px 24px;
        border-bottom: 1px solid #eef0f8;
        flex-shrink: 0;
        background: #f9fafe;
    }

    .homher-nav-mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .homher-nav-mobile-logo {
        height: 42px;
        width: auto;
        object-fit: contain;
    }

    .homher-nav-mobile-brand .homher-logo-name {
        font-size: 1.2rem;
    }

    .homher-nav-mobile-brand .homher-logo-sub {
        font-size: 0.6rem;
    }

    /* Botón cerrar */
    .homher-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1.5px solid #e0e3ee;
        border-radius: 9px;
        background: none;
        cursor: pointer;
        color: #666;
        transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }

    .homher-nav-close:hover {
        color: #E5197D;
        border-color: #E5197D;
        background: rgba(229, 25, 125, 0.06);
    }

    .homher-nav-close svg {
        width: 18px;
        height: 18px;
    }

    /* Lista móvil */
    .homher-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 16px 28px;
    }

    .homher-nav-item {
        width: 100%;
    }

    .homher-nav-item+.homher-nav-item {
        border-top: 1px solid #f0f1f9;
    }

    .homher-nav-item--cta {
        border-top: none !important;
        margin: 16px 0 0;
    }

    .homher-nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 12px;
        font-size: 0.96rem;
        border-radius: 10px;
        width: 100%;
    }

    /* Punto indicador */
    .homher-nav-link::before {
        content: '';
        position: relative;
        display: block;
        width: 7px;
        height: 7px;
        min-width: 7px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3AAEDC, #E5197D);
        opacity: 0.30;
        transform: scale(0.65);
        transition: opacity 0.24s ease, transform 0.24s ease;
        inset: auto;
    }

    .homher-nav-link::after {
        display: none;
    }

    .homher-nav-link:hover::before,
    .homher-nav-link--active::before {
        opacity: 1;
        transform: scale(1);
    }

    .homher-btn-donacion {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
        border-radius: 14px;
    }

    /* Topbar simplificado en tablet/móvil */
    .homher-topbar-left .homher-topbar-item:last-of-type {
        display: none;
    }

    .homher-topbar-divider {
        display: none;
    }

    .homher-topbar-social-label {
        display: none;
    }
}

/* ---- Pantallas muy pequeñas ---- */
@media (max-width: 480px) {
    .homher-header-inner {
        padding: 0 16px;
        height: 66px;
    }

    .homher-topbar-inner {
        padding: 0 16px;
    }

    .homher-logo-img {
        height: 46px;
    }

    .homher-topbar-left {
        display: none;
    }

    .homher-logo-name {
        font-size: 1.2rem;
    }

    .homher-logo-sub {
        font-size: 0.56rem;
    }
}

/* ============================================================
   AVIR FOOTER — Dark Gradient Theme (mismo que topbar)
   Prefijo: ftr-
   Paleta: #1a6fa3 → #2b95c9 → #3AAEDC → #7B2F9E + accents
============================================================ */

/* ── Contenedor principal ── */
.ftr {
    position: relative;
    background: linear-gradient(135deg, #0d4f7a 0%, #1a6fa3 30%, #2b95c9 60%, #7B2F9E 100%);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    /* Espacio para la ola CSS */
    padding-top: 70px;
}

/* ── Ola superior — puramente en CSS, sin ningún elemento HTML ── */
.ftr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    /* SVG inline de ola — coincide con el fondo #f8faff de las secciones superiores */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0,36 C180,72 360,0 540,36 C720,72 900,0 1080,36 C1260,72 1380,18 1440,36 L1440,0 L0,0 Z' fill='%23f8faff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

/* ── Orbes de fondo animados ── */
.ftr-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: ftr-orb-pulse 12s ease-in-out infinite alternate;
}

.ftr-orb--1 {
    width: 420px;
    height: 420px;
    top: -120px;
    right: -80px;
    background: radial-gradient(circle, rgba(123, 47, 158, 0.35) 0%, transparent 70%);
    animation-duration: 14s;
}

.ftr-orb--2 {
    width: 320px;
    height: 320px;
    bottom: 40px;
    left: -60px;
    background: radial-gradient(circle, rgba(58, 174, 220, 0.25) 0%, transparent 70%);
    animation-duration: 18s;
    animation-delay: -5s;
}

.ftr-orb--3 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 45%;
    background: radial-gradient(circle, rgba(229, 25, 125, 0.15) 0%, transparent 70%);
    animation-duration: 22s;
    animation-delay: -9s;
}

@keyframes ftr-orb-pulse {
    0%   { transform: scale(1) translate(0, 0); opacity: 0.7; }
    100% { transform: scale(1.2) translate(15px, -20px); opacity: 1; }
}

/* .ftr-wave eliminado — la ola ahora la genera .ftr::before */

/* ── Cuerpo ── */
.ftr-body {
    padding: 0 0 48px;
    position: relative;
    z-index: 2;
}

.ftr-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
    gap: 48px 36px;
    align-items: start;
}

/* ── Animación entrada columnas ── */
.ftr-col {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ftr-col:nth-child(1) { transition-delay: 0.05s; }
.ftr-col:nth-child(2) { transition-delay: 0.18s; }
.ftr-col:nth-child(3) { transition-delay: 0.30s; }
.ftr-col:nth-child(4) { transition-delay: 0.42s; }

.ftr-col--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================
   COLUMNA MARCA
======================================================== */
.ftr-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    margin-bottom: 18px;
    transition: transform 0.26s ease, opacity 0.26s ease;
}

.ftr-brand-link:hover { transform: scale(1.03); opacity: 0.9; }

.ftr-logo-frame { position: relative; flex-shrink: 0; }

.ftr-brand-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(58, 174, 220, 0.45));
    transition: filter 0.28s ease;
}

.ftr-brand-link:hover .ftr-brand-logo {
    filter: drop-shadow(0 6px 20px rgba(58, 174, 220, 0.70));
}

.ftr-logo-glow {
    position: absolute;
    inset: -8px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(58, 174, 220, 0.30) 0%, transparent 70%);
    animation: ftr-glow-pulse 3s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes ftr-glow-pulse {
    0%   { opacity: 0.5; transform: scale(0.95); }
    100% { opacity: 1;   transform: scale(1.08); }
}

.ftr-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 3px;
}

.ftr-brand-name {
    font-size: 1.60rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, #8DE0F2 60%, #3AAEDC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200%;
    animation: ftr-brand-shimmer 5s ease-in-out infinite alternate;
}

@keyframes ftr-brand-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.ftr-brand-sub {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #ffffff;
}

.ftr-desc {
    font-size: 0.96rem;
    line-height: 1.80;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 24px;
    max-width: 300px;
}

/* ── Redes sociales ── */
.ftr-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ftr-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: background 0.26s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.26s ease, border-color 0.26s ease, color 0.26s ease;
}

.ftr-social svg { width: 17px; height: 17px; flex-shrink: 0; }

.ftr-social:hover { transform: translateY(-5px); }

.ftr-social--fb:hover {
    background: #1877F2; border-color: #1877F2; color: #fff;
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.50);
}

.ftr-social--ig:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 24px rgba(225, 48, 108, 0.50);
}

.ftr-social--yt:hover {
    background: #FF0000; border-color: #FF0000; color: #fff;
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.45);
}

/* ========================================================
   TÍTULOS DE COLUMNA
======================================================== */
.ftr-col-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    position: relative;
}

.ftr-col-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 36px;
    height: 2.5px;
    border-radius: 3px;
    background: linear-gradient(90deg, #E5197D, #F5A623);
}

.ftr-col-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.ftr-col-title-icon svg { width: 14px; height: 14px; }

/* ========================================================
   LISTAS DE ENLACES
======================================================== */
.ftr-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ftr-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.975rem;
    padding: 7px 10px;
    border-radius: 8px;
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease, padding-left 0.22s ease;
}

.ftr-link-arrow {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.22s ease, transform 0.22s ease;
    flex-shrink: 0;
    line-height: 1;
}

.ftr-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    padding-left: 14px;
}

.ftr-link:hover .ftr-link-arrow {
    color: #E5197D;
    transform: translateX(3px);
}

/* ========================================================
   NEWSLETTER
======================================================== */
.ftr-newsletter-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.72;
    margin-bottom: 16px;
}

.ftr-newsletter-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #ffffff;
    margin-bottom: 8px;
}

.ftr-newsletter-row {
    display: flex;
    border-radius: 11px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    transition: border-color 0.28s ease, box-shadow 0.28s ease;
    backdrop-filter: blur(6px);
}

.ftr-newsletter-row:focus-within {
    border-color: #3AAEDC;
    box-shadow: 0 0 0 4px rgba(58, 174, 220, 0.18);
}

.ftr-newsletter-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 14px;
    font-size: 0.875rem;
    color: #ffffff;
    font-family: inherit;
}

.ftr-newsletter-input::placeholder { color: rgba(141, 224, 242, 0.35); }

.ftr-newsletter-input.ftr-input--error { animation: ftr-shake 0.40s ease; }

@keyframes ftr-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-6px); }
    75%       { transform: translateX(6px); }
}

.ftr-newsletter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #E5197D 0%, #F5A623 100%);
    border: none;
    cursor: pointer;
    color: #fff;
    border-radius: 0 9px 9px 0;
    transition: background 0.28s ease, transform 0.22s ease, box-shadow 0.28s ease;
    position: relative;
    overflow: hidden;
}

.ftr-newsletter-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3AAEDC 0%, #7B2F9E 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.ftr-newsletter-btn:hover::after { opacity: 1; }

.ftr-newsletter-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 18px rgba(229, 25, 125, 0.45);
}

.ftr-newsletter-btn svg {
    width: 15px; height: 15px;
    position: relative; z-index: 1;
}

.ftr-newsletter-ok { min-height: 20px; margin-top: 8px; }

.ftr-ok-msg {
    font-size: 0.82rem;
    font-weight: 700;
    color: #F5A623;
}

.ftr-newsletter-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.80rem;
    color: rgba(255, 255, 255, 0.80);
    margin-top: 12px;
}

.ftr-newsletter-privacy svg {
    width: 13px; height: 13px;
    stroke: rgba(255, 255, 255, 0.70);
    flex-shrink: 0;
}

/* ========================================================
   BARRA LEGAL
======================================================== */
.ftr-legal {
    position: relative;
    z-index: 2;
    padding: 16px 0;
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ftr-legal-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ftr-copyright {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.90);
}

.ftr-copyright strong {
    color: #ffffff;
    font-weight: 700;
}

.ftr-legal-nav {
    display: flex;
    align-items: center;
    gap: 4px 14px;
    flex-wrap: wrap;
}

.ftr-legal-link {
    font-size: 0.90rem;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    transition: color 0.22s ease;
    padding: 3px 0;
    position: relative;
}

.ftr-legal-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: #E5197D;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ftr-legal-link:hover { color: #3AAEDC; }
.ftr-legal-link:hover::after { transform: scaleX(1); }

.ftr-legal-sep {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.90rem;
}

/* ========================================================
   RESPONSIVE
======================================================== */
@media (max-width: 1023px) {
    .ftr-inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 28px;
    }

    .ftr-col--brand {
        grid-column: 1 / -1;
    }

    .ftr-desc { max-width: 100%; }
}

@media (max-width: 600px) {
    .ftr-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 16px;
    }

    .ftr-col--brand { grid-column: auto; }

    .ftr-body { padding: 40px 0 32px; }

    .ftr-wave svg { height: 48px; }

    .ftr-legal-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 0 16px;
    }

    .ftr-legal-nav {
        gap: 4px 8px;
    }
}

@media (max-width: 380px) {
    .ftr-legal-sep { display: none; }
    .ftr-legal-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── Header overflow fix ── */
.homher-topbar,
.homher-header {
    overflow: hidden;
    max-width: 100vw;
}

.homher-topbar-inner,
.homher-header-inner {
    overflow: hidden;
}

.homher-topbar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ============================================================
   NOTIFICACIONES — Sistema de toasts flotantes
   Prefijo: notific-
   Uso: contacto.php · footer.php (newsletter)
============================================================ */
.notific-wrap {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 48px);
}

.notific-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    pointer-events: all;
    opacity: 0;
    transform: translateX(110%);
    transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    border-left: 4px solid transparent;
    position: relative;
}

.notific-toast--visible { opacity: 1; transform: translateX(0); }
.notific-toast--out     { opacity: 0; transform: translateX(110%); }

.notific-toast--error   { border-left-color: #E5197D; }
.notific-toast--success { border-left-color: #22c55e; }
.notific-toast--loading { border-left-color: #3AAEDC; }

.notific-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 1px;
}

.notific-icon svg { width: 16px; height: 16px; }

.notific-toast--error   .notific-icon { background: rgba(229,25,125,0.10); color: #E5197D; }
.notific-toast--success .notific-icon { background: rgba(34,197,94,0.12);  color: #16a34a; }
.notific-toast--loading .notific-icon { background: rgba(58,174,220,0.12); color: #3AAEDC;
    animation: notific-spin 1.2s linear infinite; }

@keyframes notific-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.notific-msg {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.50;
    padding-top: 6px;
}

.notific-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease;
    margin-top: 3px;
}

.notific-close svg { width: 14px; height: 14px; }
.notific-close:hover { color: #374151; background: #f3f4f6; }

@media (max-width: 480px) {
    .notific-wrap { top: 12px; right: 12px; width: calc(100vw - 24px); }
}



/* ============================================================
   SISTEMA DE NOTIFICACIONES (TOASTS) — Prefijo: notific-
   ============================================================ */
.notific-wrap {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notific-toast {
    min-width: 320px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 14px;
    border-left: 5px solid #e2e8f0;
    transform: translateX(120%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.notific-toast--visible { transform: translateX(0); }
.notific-toast--out { transform: translateX(120%); opacity: 0; }

.notific-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notific-icon svg { width: 20px; height: 20px; }

.notific-toast--success { border-left-color: #22c55e; }
.notific-toast--success .notific-icon { background: #f0fdf4; color: #22c55e; }

.notific-toast--error { border-left-color: #dc2626; }
.notific-toast--error .notific-icon { background: #fef2f2; color: #dc2626; }

.notific-toast--loading { border-left-color: #3aaedc; }
.notific-toast--loading .notific-icon { background: #f0f9ff; color: #3aaedc; }
.notific-toast--loading .notific-icon svg { animation: spin 1s linear infinite; }

.notific-msg { font-size: 0.92rem; font-weight: 700; color: #1e293b; flex: 1; }

.notific-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    transition: color 0.2s;
}

.notific-close:hover { color: #475569; }
.notific-close svg { width: 18px; height: 18px; }

@keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }

@media (max-width: 600px) {
    .notific-wrap { right: 15px; left: 15px; top: 15px; }
    .notific-toast { min-width: 0; }
}