/* ============================================================
   GUITARRA FÁCIL — FOOTER
   Archivo: public/assets/ecommerce/css/footer.css
   Cargado en: ecommerce/layouts/footer.blade.php via @push('head')
   ============================================================ */

/* ══════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════ */
.gf-footer {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    color: #fff;
}

/* ══════════════════════════════════════════════
   ZONA 1: Brand + Newsletter
   ══════════════════════════════════════════════ */
.gf-zone-brand {
    background: #1a1a1a;
    padding: 40px 0;
    border-top: 3px solid #c9a800;
}

.gf-brand-row {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.gf-tagline {
    flex: 1;
    min-width: 240px;
}

.gf-tagline p {
    font-size: 15px;
    line-height: 1.75;
    color: #bbb;
    margin: 0 0 20px;
}

.gf-tagline p strong {
    color: #fff;
    font-weight: 700;
}

.gf-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.gf-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: #c9a800;
    line-height: 1;
    display: block;
}

.gf-stat-label {
    font-size: 10px;
    color: #555;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}

.gf-newsletter-wrapper {
    flex: 1;
    max-width: 480px;
    min-width: 300px;
}

/* ══════════════════════════════════════════════
   ZONA 2: Nav Bar
   ══════════════════════════════════════════════ */
.gf-zone-nav {
    background: #141414;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 14px 0;
}

.gf-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gf-nav-sep {
    width: 1px;
    height: 12px;
    background: #2a2a2a;
    display: inline-block;
    margin: 0 6px;
    vertical-align: middle;
}

.gf-nav-links > li > a {
    color: #999 !important;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 12px;
    display: inline-block;
    transition: color 0.2s;
}
.gf-nav-links > li > a:hover { color: #fff !important; }
.gf-nav-links > li.gf-highlight > a { color: #c9a800 !important; }
.gf-nav-links > li.gf-highlight > a:hover { color: #e0bc00 !important; }

/* Dropdown footer */
.gf-dropdown { position: relative; }

.gf-dropdown-trigger {
    color: #999 !important;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.gf-dropdown-trigger::after {
    content: '▾';
    font-size: 9px;
    transition: transform 0.2s;
}

.gf-dropdown.is-open .gf-dropdown-trigger { color: #fff !important; }
.gf-dropdown.is-open .gf-dropdown-trigger::after { transform: rotate(180deg); }

.gf-dropdown-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    border: 1px solid #2a2a2a;
    border-bottom: 2px solid #c9a800;
    min-width: 200px;
    z-index: 9999;
    padding: 6px 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);
}

.gf-dropdown-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #c9a800;
}

.gf-dropdown.is-open .gf-dropdown-menu { display: block; }

.gf-dropdown-menu a {
    display: block;
    color: #999 !important;
    font-size: 12px;
    padding: 9px 18px;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.gf-dropdown-menu a:hover {
    color: #fff !important;
    background: #1a1a1a;
    padding-left: 22px;
}

/* ══════════════════════════════════════════════
   ZONA 3: Teléfono + Redes
   ══════════════════════════════════════════════ */
.gf-zone-contact {
    background: #141414;
    padding: 18px 0;
    border-bottom: 1px solid #1a1a1a;
}

.gf-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.gf-phone-block p {
    font-size: 10px;
    color: #555;
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gf-phone-block a {
    font-size: 20px;
    font-weight: 800;
    color: #c9a800 !important;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.2s;
}
.gf-phone-block a:hover { color: #e0bc00 !important; }

.gf-phone-block a.gf-address-link {
    font-size: 9px !important;
    color: #555 !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
    text-decoration: none;
    transition: color 0.2s;
}
.gf-phone-block a.gf-address-link:hover { color: #c9a800 !important; }

.gf-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gf-social-label {
    font-size: 10px;
    color: #555;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}

.gf-social-icons { display: flex; gap: 8px; }

.gf-social-icons a {
    width: 32px;
    height: 32px;
    border: 1px solid #2a2a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666 !important;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
}

.gf-social-icons a:hover {
    border-color: #c9a800;
    color: #c9a800 !important;
    background: rgba(201,168,0,0.08);
}

/* ══════════════════════════════════════════════
   ZONA 4: Línea base
   ══════════════════════════════════════════════ */
.gf-zone-base {
    background: #000;
    padding: 16px 0;
}

.gf-base-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.gf-base-logo img {
    width: 85px;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.gf-base-logo img:hover { opacity: 1; }

.gf-base-copy {
    font-size: 11px;
    color: #3a3a3a;
    text-align: center;
    flex: 1;
    margin: 0;
}

.gf-base-copy a {
    color: #484848 !important;
    text-decoration: none;
    transition: color 0.2s;
}
.gf-base-copy a:hover { color: #888 !important; }

.gf-base-payments { text-align: right; }

.gf-base-payments span {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 6px;
}

.gf-base-payments img {
    width: 230px;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.gf-base-payments img:hover { opacity: 1; }

/* ══════════════════════════════════════════════
   WHATSAPP FLOTANTE
   ══════════════════════════════════════════════ */
.gf-whatsapp-fixed {
    position: fixed;
    z-index: 9999;
    bottom: 24px;
    right: 24px;
    display: block; /* siempre visible */
    transition: transform 0.3s, filter 0.3s;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.gf-whatsapp-fixed:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 18px rgba(37,211,102,0.35));
}

/* ══════════════════════════════════════════════
   RESPONSIVE GENERAL
   ══════════════════════════════════════════════ */
@media (max-width: 992px) {
    .gf-newsletter-wrapper { max-width: 100%; }
}

@media (max-width: 768px) {

    .gf-brand-row       { flex-direction: column; gap: 24px; }
    .gf-newsletter-wrapper { min-width: 100%; }
    .gf-tagline         { text-align: center; }
    .gf-stats           { justify-content: center; }

    .gf-zone-nav        { padding: 16px 0; }

    .gf-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .gf-nav-sep                         { display: none !important; }
    .gf-nav-links > li:has(.gf-nav-sep) { display: none !important; }

    .gf-nav-links > li {
        width: auto;
        text-align: center;
    }

    .gf-nav-links > li > a,
    .gf-dropdown-trigger {
        text-align: center;
        width: auto !important;
        padding: 10px 12px !important;
        border-bottom: none;
    }

    .gf-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid #c9a800;
        background: transparent;
        padding: 4px 0 8px 0;
        margin: 0 0 4px 16px;
        width: auto;
    }

    .gf-dropdown-menu::after { display: none; }

    .gf-dropdown-menu a {
        padding: 8px 12px !important;
        font-size: 12px;
        border-bottom: none;
        color: #777 !important;
        white-space: normal;
    }

    .gf-dropdown-menu a:hover {
        padding-left: 16px !important;
        color: #fff !important;
        background: transparent;
    }

    .gf-contact-row  { flex-direction: column; align-items: center; text-align: center; }
    .gf-phone-block  { text-align: center; }
    .gf-social-row   { justify-content: center; }

    .gf-base-row     { flex-direction: column; align-items: center; text-align: center; }
    .gf-base-payments { text-align: center; }
    .gf-base-payments span { text-align: center; }
}