/* ========================================
   TIPZ - Footer CSS
   Active version: V5 (Brutalismo Editorial Refined) — starts at line ~1528.
   Blocks below this are LEGACY (V1 through V4) — kept for reference only.
   The footer.html uses ONLY: .footer-container, .footer-tipz (base), and
   all .footer-tipz--v5 / .footer-*-v5 / .footer-*__* classes.
   ======================================== */

/* ============================================
   FULL-WIDTH LAYOUT - Footer Container
   ============================================ */
.footer-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 768px) {
    .footer-container {
        padding: 0 2rem;
    }
}

@media (min-width: 992px) {
    .footer-container {
        padding: 0 2.5rem;
    }
}

@media (min-width: 1400px) {
    .footer-container {
        padding: 0 3rem;
    }
}

/* ==================== BASE .footer-tipz (STILL ACTIVE — used as wrapper class) ==================== */
/* NOTE: background/color are overridden by .footer-tipz--v5. Only position/overflow/margin apply. */
.footer-tipz {
    position: relative;
    background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 50%, #1A1A1A 100%);
    color: #E0E0E0;
    overflow: hidden;
    margin-top: 0;
}

/* ==================== LEGACY V1 — Football-Themed (sub-classes orphaned, HTML removed) ==================== */
/* Patrón de campo de fútbol */
.footer-field-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* Líneas horizontales */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 60px,
            rgba(0, 168, 89, 0.03) 60px,
            rgba(0, 168, 89, 0.03) 120px
        ),
        /* Líneas verticales */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 60px,
            rgba(0, 168, 89, 0.03) 60px,
            rgba(0, 168, 89, 0.03) 120px
        );
    pointer-events: none;
    z-index: 1;
}

/* Contenido del Footer */
.footer-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 0 1.5rem 0; /* Compactado para look más profesional */
}

/* Branding */
.footer-brand {
    padding: 0.5rem 1rem 0.5rem 0.25rem;
}

@media (min-width: 992px) {
    .footer-brand {
        padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    animation: fadeInUp 0.6s ease;
}

.footer-logo i {
    font-size: 2.5rem;
    color: var(--tipz-green-primary, #00A859);
    margin-right: 0.75rem;
    animation: ballBounce 2s ease-in-out infinite;
}

.footer-logo-text {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #00A859 0%, #00C853 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-tagline {
    color: #00A859;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    animation: fadeInUp 0.6s ease 0.1s both;
}

.footer-description {
    color: #B0B0B0;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    animation: fadeInUp 0.6s ease 0.2s both;
}

/* Redes Sociales */
.footer-social {
    display: flex;
    gap: 0.75rem;
    animation: fadeInUp 0.6s ease 0.3s both;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 168, 89, 0.3);
    border-radius: 50%;
    color: #00A859;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 168, 89, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.social-link:hover::before {
    width: 100%;
    height: 100%;
}

.social-link:hover {
    background: var(--tipz-green-primary, #00A859);
    border-color: var(--tipz-green-primary, #00A859);
    color: #FFFFFF;
    transform: translateY(-5px) rotate(360deg);
    box-shadow: 0 5px 15px rgba(0, 168, 89, 0.4);
}

/* Footer Titles */
.footer-title {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0, 168, 89, 0.3);
    position: relative;
    animation: fadeInUp 0.6s ease;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #00A859 0%, transparent 100%);
}

.footer-title i {
    color: #00A859;
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
    animation: fadeInUp 0.6s ease;
}

.footer-links a {
    color: #B0B0B0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: 0;
}

.footer-links a i {
    font-size: 0.7rem;
    margin-right: 0.5rem;
    color: #00A859;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #00A859;
    padding-left: 8px;
}

.footer-links a:hover i {
    transform: translateX(4px);
}

/* Footer Contact */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.6rem;
    color: #B0B0B0;
    font-size: 0.85rem;
    animation: fadeInUp 0.6s ease;
}

.footer-contact i {
    color: #00A859;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    font-size: 1rem;
    min-width: 20px;
}

.footer-contact a {
    color: #B0B0B0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: #00A859;
}

/* Footer Badge */
.footer-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 168, 89, 0.1);
    border: 2px solid rgba(0, 168, 89, 0.3);
    border-radius: 10px;
    animation: fadeInUp 0.6s ease 0.4s both;
    transition: all 0.3s ease;
}

.footer-badge:hover {
    background: rgba(0, 168, 89, 0.15);
    border-color: rgba(0, 168, 89, 0.5);
    transform: translateY(-2px);
}

.footer-badge i {
    font-size: 1.5rem;
    color: #00A859;
}

.footer-badge-text {
    display: flex;
    flex-direction: column;
}

.footer-badge-text strong {
    color: #FFFFFF;
    font-size: 0.95rem;
}

.footer-badge-text small {
    color: #B0B0B0;
    font-size: 0.8rem;
}

/* Divider */
.footer-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 168, 89, 0.3) 50%,
        transparent 100%);
    margin: 1.5rem 0 1rem 0; /* Compactado */
}

/* Footer Bottom */
.footer-bottom {
    animation: fadeInUp 0.6s ease 0.5s both;
}

.footer-copyright {
    color: #808080;
    font-size: 0.9rem;
    margin: 0;
}

.footer-copyright strong {
    color: #00A859;
    font-weight: 700;
}

/* Tech Badges */
.footer-badges {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .footer-badges {
        justify-content: flex-end;
    }
}

.footer-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 168, 89, 0.3);
    border-radius: 50px;
    color: #B0B0B0;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.footer-tech-badge i {
    color: #00A859;
    font-size: 0.9rem;
}

.footer-tech-badge:hover {
    background: rgba(0, 168, 89, 0.1);
    border-color: rgba(0, 168, 89, 0.5);
    transform: translateY(-2px);
}

/* Balón decorativo */
.footer-ball {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 100px;
    opacity: 0.03;
    animation: rotateBall 30s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ballBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

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

/* ============================================
   COLLAPSIBLE FOOTER SECTIONS - Mobile Only
   ============================================ */

/* Chevron icon hidden by default (desktop) */
.footer-collapse-icon {
    display: none;
}

/* Desktop: always show content, disable collapse */
@media (min-width: 768px) {
    .footer-collapsible + .collapse,
    .footer-collapsible + div > .collapse {
        display: block !important;
        height: auto !important;
    }

    /* Also handle direct .collapse children of collapsible parents */
    .col-lg-3 .collapse {
        display: block !important;
        height: auto !important;
    }

    /* dashboard.css aplica `.collapse:not(.show) { opacity: 0 }` globalmente.
       En el footer las secciones (Producto, Aprende, Legal) no llevan .show
       en desktop porque están siempre expandidas vía display:block — pero
       quedaban invisibles. Restaurar opacity full en desktop. */
    .footer-tipz--v5 .collapse,
    .footer-tipz--v5 div.collapse {
        opacity: 1 !important;
    }
}

/* Mobile: enable collapsible behavior */
@media (max-width: 767px) {
    .footer-collapsible {
        cursor: pointer;
        display: flex;
        align-items: center;
        user-select: none;
        margin-bottom: 0;
        padding-bottom: 0.75rem;
    }

    .footer-collapse-icon {
        display: inline-block;
        font-size: 0.8rem;
        transition: transform 0.3s ease;
        color: rgba(255, 255, 255, 0.5);
    }

    .footer-collapsible[aria-expanded="true"] .footer-collapse-icon {
        transform: rotate(180deg);
    }

    /* Smooth padding on collapsed content */
    .footer-collapsible + .collapse,
    .footer-collapsible + div.collapse {
        padding-top: 0;
    }

    .footer-collapsible + .collapse.show,
    .footer-collapsible + div.collapse.show {
        padding-top: 0.5rem;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .footer-content {
        padding: 2rem 0 1.5rem 0;
    }

    .footer-brand {
        text-align: center;
        padding-right: 0;
        margin-bottom: 1.5rem;
    }

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

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

    .footer-title {
        text-align: center;
    }

    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links,
    .footer-contact {
        text-align: center;
    }

    .footer-links li,
    .footer-contact li {
        justify-content: center;
    }

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

    .footer-ball {
        font-size: 60px;
        bottom: 10px;
        right: 10px;
    }
}

@media (max-width: 576px) {
    .footer-logo-text {
        font-size: 1.5rem;
    }

    .footer-logo i {
        font-size: 2rem;
    }
}

/* === Footer alineado al posicionamiento — H1.14 === */
.footer-category {
    margin: 0 0 var(--space-3, 12px);
}

.footer-category-pill {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 168, 89, 0.12);
    border: 1px solid rgba(0, 168, 89, 0.3);
    color: var(--tipz-green-primary, #00A859);
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--r-pill, 999px);
}

.footer-disclaimer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tipz-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-md, 12px);
    margin: 24px 0;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--tipz-text-secondary, #C8CCD4);
    line-height: 1.6;
}

.footer-disclaimer .bi {
    color: var(--tipz-green-primary, #00A859);
    font-size: 1.25rem;
    margin-top: 2px;
}

.footer-disclaimer p { margin: 0; }

.footer-disclaimer a {
    color: var(--tipz-green-primary, #00A859);
    text-decoration: underline;
}

.footer-disclaimer a:hover { color: var(--tipz-green-dark, #007A42); }

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

@media (max-width: 768px) {
    .footer-disclaimer {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/* ==================== LEGACY V2 — Swiss Minimalism (sub-classes orphaned, HTML removed) ==================== */
/* ============================================================
   === Footer Pro v2 — Swiss Minimalism (override del legacy) ===
   Reglas ui-ux-pro-max aplicadas:
   - motion-meaning: eliminar animaciones decorativas (ball, fadeInUp, rotate 360°)
   - style-match: TIPZ es infraestructura matemática, no app de fútbol → quitar field pattern
   - weight-hierarchy: títulos uppercase 600, body 400, brand 700 — sin gradients tipográficos
   - color-semantic: tokens consistentes; eliminar verde indiscriminado
   - whitespace-balance: spacing-scale 4/8/12/16/24/32
   - elevation-consistent: shadows/borders mínimos, sin animaciones de elevación gratuitas
   - icon-style-consistent: social icons cuadrados redondeados 36×36, mismo idioma visual
   ============================================================ */

.footer-tipz {
    background: #0a0d12;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-tipz .footer-field-pattern,
.footer-tipz .footer-ball {
    display: none !important;
}

.footer-content {
    padding: 56px 0 24px !important;
}

@media (max-width: 991px) {
    .footer-content { padding: 40px 0 20px !important; }
}

/* Brand block */
.footer-brand { padding: 0; }

.footer-logo { margin-bottom: 16px; animation: none; }
.footer-logo i { animation: none !important; color: #2bd97c; }
.footer-logo-img { width: 110px; height: auto; }
.footer-logo-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.footer-category { margin: 0 0 12px; }
.footer-category-pill {
    padding: 4px 10px;
    background: rgba(0, 168, 89, 0.10);
    border: 1px solid rgba(0, 168, 89, 0.25);
    color: #2bd97c;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

.footer-tagline {
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.45;
    margin-bottom: 8px;
    animation: none !important;
}

.footer-description {
    color: #8A8F98 !important;
    font-size: 0.8125rem;
    line-height: 1.55;
    margin-bottom: 18px;
    animation: none !important;
}

/* Social cuadrados redondeados, sin rotate 360° */
.footer-social { gap: 8px; animation: none !important; }
.social-link {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #C8CCD4;
    font-size: 0.95rem;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.social-link::before { display: none !important; }
.social-link:hover {
    background: rgba(0, 168, 89, 0.12);
    border-color: rgba(0, 168, 89, 0.40);
    color: #2bd97c;
    transform: none !important;
    box-shadow: none !important;
}

/* Títulos uppercase pequeños, sin gradient ::after */
.footer-title {
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 18px;
    padding-bottom: 0;
    border-bottom: none;
    animation: none !important;
}
.footer-title::after { display: none !important; }
.footer-title i {
    color: #8A8F98 !important;
    font-size: 0.875rem;
    margin-right: 8px;
}

/* Links */
.footer-links li { margin-bottom: 10px; animation: none !important; }
.footer-links a {
    color: #C8CCD4;
    font-size: 0.875rem;
    padding-left: 0 !important;
    transition: color 150ms ease;
}
.footer-links a i {
    color: #2bd97c;
    font-size: 0.625rem;
    margin-right: 8px;
    transition: transform 150ms ease;
}
.footer-links a:hover { color: #2bd97c; padding-left: 0 !important; }
.footer-links a:hover i { transform: translateX(3px); }

/* Contact */
.footer-contact li { animation: none !important; font-size: 0.8125rem; color: #C8CCD4; }
.footer-contact a { color: #C8CCD4; }
.footer-contact a:hover { color: #2bd97c; }
.footer-contact i { color: #2bd97c; font-size: 0.875rem; }

/* Badge compliance */
.footer-badge {
    padding: 10px 12px;
    background: rgba(0, 168, 89, 0.08) !important;
    border-width: 1px !important;
    border-color: rgba(0, 168, 89, 0.25) !important;
    border-radius: 10px;
    animation: none !important;
    transition: border-color 150ms ease, background 150ms ease;
}
.footer-badge:hover { transform: none !important; }
.footer-badge i { font-size: 1.125rem; color: #2bd97c; }
.footer-badge-text strong { color: #FFFFFF; font-size: 0.875rem; font-weight: 700; }
.footer-badge-text small { color: #8A8F98; font-size: 0.75rem; }

/* Divider más sutil */
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 24px 0 18px !important;
}

/* Disclaimer integrado */
.footer-disclaimer {
    background: rgba(0, 168, 89, 0.04);
    border: 1px solid rgba(0, 168, 89, 0.18);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 18px 0;
    color: #C8CCD4;
    font-size: 0.8125rem;
    line-height: 1.6;
}
.footer-disclaimer .bi {
    color: #2bd97c;
    font-size: 1.125rem;
    margin-top: 2px;
}
.footer-disclaimer strong { color: #FFFFFF; }
.footer-disclaimer a { color: #2bd97c; text-decoration: underline; }

/* Bottom */
.footer-bottom { animation: none !important; }
.footer-copyright { color: #8A8F98 !important; font-size: 0.8125rem; }
.footer-copyright strong { color: #FFFFFF !important; font-weight: 700; }

/* Tech badges sutiles, sin transform */
.footer-tech-badge {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: #8A8F98;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 150ms ease, border-color 150ms ease;
}
.footer-tech-badge i { color: #2bd97c; font-size: 0.75rem; }
.footer-tech-badge:hover {
    background: transparent;
    border-color: rgba(0, 168, 89, 0.40);
    color: #C8CCD4;
    transform: none !important;
}

/* Mobile: brand block keep left aligned in pro look */
@media (max-width: 991px) {
    .footer-brand {
        text-align: left;
        padding-right: 0;
        margin-bottom: 8px;
    }
    .footer-logo { justify-content: flex-start; }
    .footer-social { justify-content: flex-start; }
    .footer-title { text-align: left; }
    .footer-links, .footer-contact { text-align: left; }
    .footer-links li, .footer-contact li { justify-content: flex-start; }
    .footer-badge { justify-content: flex-start; }
}

/* ==================== LEGACY V3 — Pro layout (sub-classes orphaned, HTML removed) ==================== */
/* ============================================================
   === Footer V3 — Pro layout (Swiss Minimalism + typographic) ===
   Aplica cuando el footer tiene la clase modificadora `--v3`.
   Estructura: brand 5/12 con tagline tipográfica + nav 7/12 (3 cols)
   + disclaimer + bottom bar con chips de confianza.
   ui-ux-pro-max rules aplicadas:
   - text-styles-system: type scale h3 1.5-1.75rem / body 0.875 / caption 0.75
   - weight-hierarchy: tagline 700, titles 600 uppercase, body 400
   - whitespace-balance: spacing 4/8/12/16/24/32/48/64
   - elevation-consistent: sin shadows excesivos; border-top sutil 1px
   - color-semantic: text primary #FFFFFF / secondary #C8CCD4 / tertiary #8A8F98
   - motion-meaning: solo hover transitions 150ms color, sin animaciones de entrada
   ============================================================ */

.footer-tipz--v3 {
    background:
        linear-gradient(180deg, transparent 0%, rgba(0, 168, 89, 0.025) 100%),
        #0a0d12 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative;
}

.footer-tipz--v3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 168, 89, 0.45) 20%,
        rgba(0, 168, 89, 0.45) 80%,
        transparent 100%);
    pointer-events: none;
}

.footer-tipz--v3 .footer-content {
    padding: 64px 0 24px !important;
}

@media (max-width: 991px) {
    .footer-tipz--v3 .footer-content { padding: 48px 0 20px !important; }
}

/* === Grid top: 5fr brand + 7fr nav === */
.footer-tipz--v3 .footer-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
    margin-bottom: 48px;
}

@media (max-width: 991px) {
    .footer-tipz--v3 .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 32px;
    }
}

/* === Brand block === */
.footer-tipz--v3 .footer-brand-v3 {
    max-width: 480px;
}

.footer-tipz--v3 .footer-eyebrow {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 168, 89, 0.10);
    border: 1px solid rgba(0, 168, 89, 0.25);
    color: #2bd97c;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 16px;
}

.footer-tipz--v3 .footer-tagline-v3 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 14px;
}

.footer-tipz--v3 .footer-description-v3 {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #8A8F98;
    margin: 0 0 24px;
    max-width: 440px;
}

.footer-tipz--v3 .footer-social-v3 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-tipz--v3 .social-link-v3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #C8CCD4;
    font-size: 0.9375rem;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.footer-tipz--v3 .social-link-v3:hover {
    background: rgba(0, 168, 89, 0.12);
    border-color: rgba(0, 168, 89, 0.40);
    color: #2bd97c;
}

.footer-tipz--v3 .social-link-v3:focus-visible {
    outline: 2px solid #2bd97c;
    outline-offset: 2px;
}

/* === Nav 3 cols === */
.footer-tipz--v3 .footer-nav-v3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 600px) {
    .footer-tipz--v3 .footer-nav-v3 { grid-template-columns: 1fr; gap: 4px; }
}

.footer-tipz--v3 .footer-col { min-width: 0; }

.footer-tipz--v3 .footer-title-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: none !important;
}

.footer-tipz--v3 .footer-title-v3::after { display: none !important; }
.footer-tipz--v3 .footer-title-v3 .footer-collapse-icon {
    color: #8A8F98;
    font-size: 0.875rem;
    transition: transform 200ms ease;
}

.footer-tipz--v3 .footer-links-v3 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-tipz--v3 .footer-links-v3 li { margin: 0 !important; animation: none !important; }

.footer-tipz--v3 .footer-links-v3 a {
    display: inline-flex;
    align-items: center;
    color: #C8CCD4 !important;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    padding: 0 !important;
    transition: color 150ms ease;
}

.footer-tipz--v3 .footer-links-v3 a:hover { color: #FFFFFF !important; padding-left: 0 !important; }
.footer-tipz--v3 .footer-links-v3 a:focus-visible {
    outline: 2px solid #2bd97c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* === Disclaimer V3 === */
.footer-tipz--v3 .footer-disclaimer-v3 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 24px;
}

.footer-tipz--v3 .footer-disclaimer-v3 .bi {
    color: #2bd97c;
    font-size: 1.125rem;
    margin-top: 1px;
}

.footer-tipz--v3 .footer-disclaimer-v3 p {
    margin: 0;
    color: #8A8F98;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.footer-tipz--v3 .footer-disclaimer-v3 strong { color: #C8CCD4; font-weight: 600; }
.footer-tipz--v3 .footer-disclaimer-v3 a { color: #2bd97c; text-decoration: underline; }

/* === Bottom bar V3 === */
.footer-tipz--v3 .footer-bottom-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.footer-tipz--v3 .footer-bottom-left,
.footer-tipz--v3 .footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-tipz--v3 .footer-logo-mini {
    height: 22px;
    width: auto;
    opacity: 0.85;
}

.footer-tipz--v3 .footer-copy-v3 {
    color: #6B7280;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

.footer-tipz--v3 .footer-chip-v3 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #8A8F98;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 150ms ease, border-color 150ms ease;
}

.footer-tipz--v3 .footer-chip-v3:hover {
    color: #C8CCD4;
    border-color: rgba(255, 255, 255, 0.16);
}

.footer-tipz--v3 .footer-chip-v3 .bi {
    color: #2bd97c;
    font-size: 0.75rem;
}

.footer-tipz--v3 .footer-chip-v3--age {
    color: #FFFFFF;
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.25);
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (max-width: 600px) {
    .footer-tipz--v3 .footer-bottom-v3 {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* === Mobile collapsible: chevron rota === */
@media (max-width: 600px) {
    .footer-tipz--v3 .footer-title-v3 {
        cursor: pointer;
        margin-bottom: 0 !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .footer-tipz--v3 .footer-title-v3[aria-expanded="true"] .footer-collapse-icon {
        transform: rotate(180deg);
    }
    .footer-tipz--v3 .footer-links-v3.collapse:not(.show) { display: none; }
    .footer-tipz--v3 .footer-links-v3.show { padding-top: 12px !important; padding-bottom: 4px !important; }
}

@media (min-width: 601px) {
    .footer-tipz--v3 .footer-title-v3 .footer-collapse-icon { display: none; }
    .footer-tipz--v3 .footer-links-v3.collapse { display: flex !important; height: auto !important; }
    .footer-tipz--v3 .footer-col .collapse { display: block !important; height: auto !important; }
}

/* ==================== LEGACY V4 — Editorial Quant (sub-classes orphaned, HTML removed) ==================== */
/* ============================================================
   === Footer V4 — Editorial Quant ===
   Direccional estética: editorial refined + atmósfera técnica.
   - Tagline EMBEDDED en el body text con strong + underline verde (técnica
     editorial real, no es "h3 + p" como SaaS-template).
   - Layout 2fr/3fr brand-nav que ELIMINA la sensación de "arrinconado" del v3.
   - Locality line con dot verde animation breath, signature de plataforma.
   - Meta bar inferior con versión (v2026.05 · ES) + chips refinados.
   - Tipografía: Space Grotesk para headlines/tagline strong, JetBrains Mono
     para version chip, system body para nav.
   ============================================================ */

.footer-tipz--v4 {
    background:
        radial-gradient(80% 100% at 50% 0%, rgba(0, 168, 89, 0.06), transparent 65%),
        #08080c !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    position: relative;
    overflow: hidden;
}

/* Línea sutil verde tipo "current data feed" arriba */
.footer-tipz--v4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 70%);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 168, 89, 0.50) 50%,
        transparent 100%);
    pointer-events: none;
}

.footer-tipz--v4 .footer-container {
    padding: 72px 24px 28px;
    max-width: 1280px;
    position: relative;
}

@media (min-width: 992px) {
    .footer-tipz--v4 .footer-container { padding: 80px 40px 32px; }
}
@media (min-width: 1400px) {
    .footer-tipz--v4 .footer-container { padding: 96px 48px 36px; }
}
@media (max-width: 768px) {
    .footer-tipz--v4 .footer-container { padding: 56px 20px 24px; }
}

/* === Main: brand 2fr | nav 3fr === */
.footer-tipz--v4 .footer-main-v4 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 80px;
    align-items: start;
    padding-bottom: 48px;
}

@media (max-width: 991px) {
    .footer-tipz--v4 .footer-main-v4 {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 32px;
    }
}

/* === Brand col === */
.footer-tipz--v4 .footer-brand-col-v4 {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 460px;
}

.footer-tipz--v4 .footer-brandmark {
    display: inline-block;
    line-height: 0;
}
.footer-tipz--v4 .footer-brandmark img {
    height: 36px;
    width: auto;
}

/* Mission: párrafo editorial — la tagline va EMBEDDED como <strong>
   con underline verde sutil; no como h3 separado.
   Esta técnica es de editorial print (NYT, Bloomberg) — eleva el feel inmediatamente. */
.footer-tipz--v4 .footer-mission-v4 {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #C8CCD4;
    margin: 0;
    letter-spacing: -0.005em;
}

.footer-tipz--v4 .footer-mission-v4 strong {
    color: #FFFFFF;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.015em;
    background-image: linear-gradient(180deg, transparent 84%, rgba(0, 168, 89, 0.55) 84%, rgba(0, 168, 89, 0.55) 96%, transparent 96%);
    background-size: 100% 100%;
    padding-bottom: 1px;
}

/* Social cuadrados refinados con hover sutil */
.footer-tipz--v4 .footer-social-v4 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-tipz--v4 .social-link-v4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #C8CCD4;
    font-size: 0.9375rem;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-tipz--v4 .social-link-v4:hover {
    background: rgba(0, 168, 89, 0.12);
    border-color: rgba(0, 168, 89, 0.40);
    color: #2bd97c;
    transform: translateY(-1px);
}

.footer-tipz--v4 .social-link-v4:focus-visible {
    outline: 2px solid #2bd97c;
    outline-offset: 2px;
}

/* Locality line — dot verde + texto signature */
.footer-tipz--v4 .footer-locality-v4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #6B7280;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    letter-spacing: 0.04em;
}

.footer-tipz--v4 .footer-locality-v4 .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00A859;
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.15);
    animation: footer-pulse-v4 2.4s ease-in-out infinite;
}

@keyframes footer-pulse-v4 {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(0, 168, 89, 0.04); }
}

/* === Nav === */
.footer-tipz--v4 .footer-nav-v4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

@media (max-width: 600px) {
    .footer-tipz--v4 .footer-nav-v4 { grid-template-columns: 1fr; gap: 0; }
}

.footer-tipz--v4 .footer-col-v4 { min-width: 0; }

.footer-tipz--v4 .footer-title-v4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #FFFFFF !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.8125rem !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
}

.footer-tipz--v4 .footer-title-v4::after { display: none !important; }
.footer-tipz--v4 .footer-title-v4 .footer-collapse-icon {
    color: #8A8F98;
    font-size: 0.875rem;
    transition: transform 200ms ease;
}

.footer-tipz--v4 .footer-links-v4 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-tipz--v4 .footer-links-v4 li { margin: 0 !important; animation: none !important; }

.footer-tipz--v4 .footer-links-v4 a {
    display: inline-flex;
    align-items: center;
    color: #9CA3AF !important;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    padding: 0 !important;
    transition: color 150ms ease;
    position: relative;
}

.footer-tipz--v4 .footer-links-v4 a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 4px;
    height: 1px;
    background: #2bd97c;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 150ms ease;
}

.footer-tipz--v4 .footer-links-v4 a:hover {
    color: #FFFFFF !important;
    padding-left: 0 !important;
}
.footer-tipz--v4 .footer-links-v4 a:hover::before { opacity: 1; }
.footer-tipz--v4 .footer-links-v4 a:focus-visible {
    outline: 2px solid #2bd97c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* === Disclaimer V4 === */
.footer-tipz--v4 .footer-disclaimer-v4 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 24px;
}

.footer-tipz--v4 .footer-disclaimer-v4 .bi {
    color: #2bd97c;
    font-size: 1.05rem;
    margin-top: 1px;
}

.footer-tipz--v4 .footer-disclaimer-v4 p {
    margin: 0;
    color: #8A8F98;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.footer-tipz--v4 .footer-disclaimer-v4 strong { color: #C8CCD4; font-weight: 600; }
.footer-tipz--v4 .footer-disclaimer-v4 a { color: #2bd97c; text-decoration: underline; }

/* === Meta bar inferior === */
.footer-tipz--v4 .footer-meta-v4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.footer-tipz--v4 .footer-meta-left,
.footer-tipz--v4 .footer-meta-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-tipz--v4 .footer-version-v4 {
    color: #6B7280;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.footer-tipz--v4 .footer-divider-v4 {
    color: #3A3F47;
    font-size: 0.75rem;
}

.footer-tipz--v4 .footer-copy-v4 {
    color: #6B7280;
    font-size: 0.75rem;
}

.footer-tipz--v4 .footer-chip-v4 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #8A8F98;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 150ms ease, border-color 150ms ease;
}

.footer-tipz--v4 .footer-chip-v4:hover {
    color: #C8CCD4;
    border-color: rgba(255, 255, 255, 0.14);
}

.footer-tipz--v4 .footer-chip-v4 .bi {
    color: #2bd97c;
    font-size: 0.75rem;
}

.footer-tipz--v4 .footer-chip-v4--age {
    color: #FFD700;
    background: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.25);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 10px;
}

.footer-tipz--v4 .footer-chip-v4--age:hover {
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.40);
}

@media (max-width: 768px) {
    .footer-tipz--v4 .footer-meta-v4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* Mobile collapsible */
@media (max-width: 600px) {
    .footer-tipz--v4 .footer-title-v4 {
        cursor: pointer;
        margin-bottom: 0 !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    .footer-tipz--v4 .footer-title-v4[aria-expanded="true"] .footer-collapse-icon {
        transform: rotate(180deg);
    }
    .footer-tipz--v4 .footer-links-v4.collapse:not(.show) { display: none; }
    .footer-tipz--v4 .footer-links-v4.show { padding-top: 14px !important; padding-bottom: 4px !important; }
}

@media (min-width: 601px) {
    .footer-tipz--v4 .footer-title-v4 .footer-collapse-icon { display: none; }
    .footer-tipz--v4 .footer-links-v4.collapse { display: flex !important; height: auto !important; }
    .footer-tipz--v4 .footer-col-v4 .collapse { display: block !important; height: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-tipz--v4 .footer-locality-v4 .dot { animation: none; }
    .footer-tipz--v4 .social-link-v4 { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   === Footer V5 — Brutalismo Editorial Refined ===
   Referentes: Linear · Vercel · Stripe footers.

   PRINCIPIOS ESTRICTOS:
   - 3 tamaños tipográficos únicos: display / body 14 / micro 11
   - 3 colores únicos: #FFFFFF · #8A8F98 · #2bd97c (hover only)
   - Background plano #08080c sin gradient
   - Cero animaciones decorativas (solo hover 150ms)
   - Statement display SIN background, SIN decoración — la frase ancla
     se sostiene por sola por su jerarquía tipográfica
   - Hairline 1px separadores entre zonas
   - "Solo +18" highlighted en bottom line (compliance preservada sin
     necesidad de pill dorado decorativo)

   ESTRATEGIA DE VENTAS PRESERVADA:
   - Frase ancla oficial del posicionamiento como display headline
   - Eyebrow "Sports Data Analytics" (categoría de marca H1.14)
   - data-cta attributes intactos para tracking de funnel
   - Disclaimer estratégico inline italic (4ª aparición regla H1.9)
   - +18 + SSL + KYC visibles en bottom line (compliance)
   ════════════════════════════════════════════════════════════════ */

.footer-tipz--v5 {
    background: #08080c !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #8A8F98;
    position: relative;
    overflow: hidden;
}

.footer-tipz--v5 .footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 24px !important;
    position: relative;
}

@media (min-width: 992px) {
    .footer-tipz--v5 .footer-container { padding: 64px 40px 24px !important; }
}
@media (min-width: 1400px) {
    .footer-tipz--v5 .footer-container { padding: 72px 48px 28px !important; }
}
@media (max-width: 768px) {
    .footer-tipz--v5 .footer-container { padding: 44px 20px 20px !important; }
}

/* === 1. Statement === */
.footer-tipz--v5 .footer-statement {
    margin-bottom: 36px;
}

@media (max-width: 768px) {
    .footer-tipz--v5 .footer-statement { margin-bottom: 28px; }
}

.footer-tipz--v5 .footer-statement__eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2bd97c;
    margin-bottom: 16px;
}

.footer-tipz--v5 .footer-statement__line {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0;
    max-width: 920px;
}

@media (max-width: 600px) {
    .footer-tipz--v5 .footer-statement__br { display: none; }
}

/* === Hairline rules === */
.footer-tipz--v5 .footer-rule {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    margin: 0 0 32px;
    opacity: 1;
}

@media (max-width: 768px) {
    .footer-tipz--v5 .footer-rule { margin-bottom: 24px; }
}

/* === 2. Grid 4 cols equi-anchas (1.4fr brand + 3 × 1fr nav) === */
.footer-tipz--v5 .footer-grid-v5 {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 36px;
    align-items: start;
}

@media (max-width: 991px) {
    .footer-tipz--v5 .footer-grid-v5 {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
    .footer-tipz--v5 .footer-brand-col-v5 { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .footer-tipz--v5 .footer-grid-v5 { grid-template-columns: 1fr; gap: 0; }
    .footer-tipz--v5 .footer-brand-col-v5 { margin-bottom: 16px; }
}

/* === Brand col === */
.footer-tipz--v5 .footer-brand-col-v5 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 320px;
}

.footer-tipz--v5 .footer-logo-link {
    display: inline-block;
    line-height: 0;
}
.footer-tipz--v5 .footer-logo-link img {
    height: 32px;
    width: auto;
}

.footer-tipz--v5 .footer-description-v5 {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #8A8F98;
    margin: 0;
}

.footer-tipz--v5 .footer-social-v5 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.footer-tipz--v5 .social-link-v5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: #8A8F98;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.footer-tipz--v5 .social-link-v5:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.footer-tipz--v5 .social-link-v5:focus-visible {
    outline: 2px solid #2bd97c;
    outline-offset: 2px;
}

/* === Nav cols === */
.footer-tipz--v5 .footer-col-v5 { min-width: 0; }

.footer-tipz--v5 .footer-col-v5__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.6875rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
}

.footer-tipz--v5 .footer-col-v5__title::after { display: none !important; }
.footer-tipz--v5 .footer-col-v5__title .footer-collapse-icon {
    color: #8A8F98;
    font-size: 0.875rem;
    transition: transform 200ms ease;
}

.footer-tipz--v5 .footer-col-v5__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-tipz--v5 .footer-col-v5__list li { margin: 0 !important; animation: none !important; }

.footer-tipz--v5 .footer-col-v5__list a {
    display: inline-block;
    font-size: 0.875rem;
    color: #8A8F98 !important;
    text-decoration: none;
    padding: 0 !important;
    transition: color 150ms ease;
}

.footer-tipz--v5 .footer-col-v5__list a:hover { color: #2bd97c !important; padding-left: 0 !important; }
.footer-tipz--v5 .footer-col-v5__list a:focus-visible {
    outline: 2px solid #2bd97c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* === 3. Disclaimer inline italic — sin caja, sin bordes, sin pill === */
.footer-tipz--v5 .footer-disclaimer-v5 {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #8A8F98;
    margin: 0 0 20px;
    max-width: 820px;
    border-left: 2px solid rgba(0, 168, 89, 0.30);
    padding-left: 14px;
}

.footer-tipz--v5 .footer-disclaimer-v5 em {
    font-style: italic;
}

.footer-tipz--v5 .footer-disclaimer-v5 strong {
    color: #FFFFFF;
    font-weight: 600;
    font-style: italic;
}

.footer-tipz--v5 .footer-disclaimer-v5 a {
    color: #2bd97c;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-tipz--v5 .footer-disclaimer-v5 a:hover { color: #FFFFFF; }

/* === 4. Bottom bar V5.1 — dos zonas justificadas con jerarquía semántica ===
   ui-ux-pro-max rules aplicadas:
   - whitespace-balance: distribución left/right en lugar de fila plana
   - weight-hierarchy: copyright + brand (signature) vs trust badges (cards)
   - field-grouping: zonas semánticas separadas
   - style-match: trust badges como mini-cards con icon + label
   - color-not-decorative-only: +18 con color + peso + letter-spacing
   - consistency: misma tipografía monospace, mismas reglas de hover
   ============================================================ */
.footer-tipz--v5 .footer-bottom-v5 {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Border-top con gradient sutil verde-centered (signature data feed). */
.footer-tipz--v5 .footer-bottom-v5 {
    position: relative;
}
.footer-tipz--v5 .footer-bottom-v5::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 168, 89, 0.20) 50%,
        transparent 100%);
    pointer-events: none;
}

/* === Signature izquierda: copyright + brand + identidad legal ===
   Layout en 2 líneas:
   · Línea 1 (inline): © Algoryx SAS · dot · brand
   · Línea 2 (full-width): identidad legal completa (Algoryx SAS + NIT + email)
   La identidad legal es requerida por payment processors (Stripe/LemonSqueezy)
   para trazabilidad entre marca comercial TIPZ y entidad fiscal Algoryx SAS. */
.footer-tipz--v5 .footer-bottom__signature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: #6B7280;
}

.footer-tipz--v5 .footer-bottom__copy,
.footer-tipz--v5 .footer-bottom__brand,
.footer-tipz--v5 .footer-bottom__dot {
    display: inline-block;
    vertical-align: middle;
}

.footer-tipz--v5 .footer-bottom__copy {
    color: #8A8F98;
    font-weight: 500;
    margin-right: 12px;
}

.footer-tipz--v5 .footer-bottom__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    margin-right: 12px;
}

.footer-tipz--v5 .footer-bottom__brand {
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 500;
}

/* Identidad legal completa — línea 2 del signature.
   Letra ligeramente menor, color discreto, no compite visualmente
   pero queda legible para revisor de Stripe / asesor legal. */
.footer-tipz--v5 .footer-bottom__legal {
    display: block;
    margin-top: 4px;
    color: #6B7280;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.625rem;
    line-height: 1.55;
    letter-spacing: 0.02em;
    max-width: 720px;
}

.footer-tipz--v5 .footer-bottom__legal strong {
    color: #C8CCD4;
    font-weight: 600;
}

.footer-tipz--v5 .footer-bottom__legal-link {
    color: #C8CCD4;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.20);
    padding-bottom: 1px;
    transition: color 150ms ease, border-color 150ms ease;
}

.footer-tipz--v5 .footer-bottom__legal-link:hover {
    color: #F1F5F9;
    border-bottom-color: rgba(255, 255, 255, 0.45);
}

/* Credit ALGORYX — attribution editorial sutil.
   Label "Built by" en gris ultra-discreto + nombre con dashed-underline pro.
   Aplicada rule `weight-hierarchy`: label (regular) < name (600 + underline). */
.footer-tipz--v5 .footer-bottom__credit {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.footer-tipz--v5 .footer-bottom__credit-label {
    color: #4A4F58;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.625rem;
    font-weight: 500;
}

.footer-tipz--v5 .footer-bottom__credit-link {
    color: #C8CCD4;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.20);
    padding-bottom: 1px;
    transition: color 150ms ease, border-color 150ms ease;
}

a.footer-tipz--v5 .footer-bottom__credit-link,
.footer-tipz--v5 a.footer-bottom__credit-link {
    cursor: pointer;
}

.footer-tipz--v5 .footer-bottom__credit-link:hover {
    color: #2bd97c;
    border-bottom-color: rgba(43, 217, 124, 0.55);
    border-bottom-style: solid;
}

.footer-tipz--v5 .footer-bottom__credit-link:focus-visible {
    outline: 2px solid #2bd97c;
    outline-offset: 3px;
    border-radius: 2px;
}

/* === Trust badges derecha === */
.footer-tipz--v5 .footer-bottom__trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-tipz--v5 .footer-trust {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: #8A8F98;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
    cursor: default;
}

.footer-tipz--v5 .footer-trust:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.footer-tipz--v5 .footer-trust__icon {
    font-size: 0.75rem;
    color: #2bd97c;
    transition: color 150ms ease;
}

.footer-tipz--v5 .footer-trust__label {
    font-weight: 600;
    text-transform: uppercase;
}

/* Compliance prominente: +18 dorado peso 700 — sin icon, label gigante */
.footer-tipz--v5 .footer-trust--age {
    background: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.28);
    padding: 5px 12px;
}

.footer-tipz--v5 .footer-trust--age .footer-trust__label {
    color: #FFD700;
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.10em;
}

.footer-tipz--v5 .footer-trust--age:hover {
    background: rgba(255, 215, 0, 0.10);
    border-color: rgba(255, 215, 0, 0.45);
}

.footer-tipz--v5 .footer-trust--age:hover .footer-trust__label { color: #FFD700; }

/* === Responsive: en mobile apilar verticalmente con alineación izquierda === */
@media (max-width: 600px) {
    .footer-tipz--v5 .footer-bottom-v5 {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .footer-tipz--v5 .footer-bottom__trust { flex-wrap: wrap; }
}

/* === Mobile collapsible === */
@media (max-width: 600px) {
    .footer-tipz--v5 .footer-col-v5__title {
        cursor: pointer;
        margin-bottom: 0 !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    .footer-tipz--v5 .footer-col-v5__title[aria-expanded="true"] .footer-collapse-icon {
        transform: rotate(180deg);
    }
    .footer-tipz--v5 .footer-col-v5__list.collapse:not(.show) { display: none; }
    .footer-tipz--v5 .footer-col-v5__list.show { padding-top: 12px !important; padding-bottom: 4px !important; }
}

@media (min-width: 601px) {
    .footer-tipz--v5 .footer-col-v5__title .footer-collapse-icon { display: none; }
    .footer-tipz--v5 .footer-col-v5__list.collapse { display: flex !important; height: auto !important; }
    .footer-tipz--v5 .footer-col-v5 .collapse { display: block !important; height: auto !important; }
}