@import url('landing/_utilities.css');
@import url('landing/_disclaimer_strip.css');
@import url('landing/_hero.css');
@import url('landing/_four_layers.css');
@import url('landing/_trial_freemium.css');
@import url('landing/_asegurador_ia.css');
@import url('landing/_onramps.css');
@import url('landing/_probability.css');
@import url('landing/_guild.css');
@import url('landing/_section_typography.css');
@import url('landing/_stats.css');
@import url('landing/_premium_vs_elite.css');
@import url('landing/_dedicated_pages.css');
@import url('landing/_progressive_disclosure.css');
@import url('landing/_cta_final.css');
@import url('landing/_atmosphere.css');

/* ========================================
   TIPZ - Landing Page Disruptiva
   Tema: Fútbol + Trading Deportivo
   ======================================== */

/* ==================== VARIABLES CSS ==================== */
:root {
    /* Colores Tema Fútbol */
    --tipz-green-primary: #00A859;    /* Verde césped */
    --tipz-green-dark: #007A42;
    --tipz-white: #FFFFFF;
    --tipz-black: #1A1A1A;
    --tipz-gray-light: #F5F5F5;
    --tipz-gray-dark: #4A4A4A;

    /* Tokens dark sections (pricing, elite-tools, ticker) */
    --tipz-dark-surface: #0b0f14;      /* Fondo secciones oscuras */
    --tipz-text-on-dark: #f0f0f0;      /* Texto principal sobre fondo oscuro */
    --tipz-text-muted-dark: #8a8f98;   /* Texto muted sobre fondo oscuro */
    --tipz-text-secondary-dark: #c8ccd4; /* Texto secundario sobre fondo oscuro */
    --tipz-gray-medium: #6b7280;       /* Gris medio (labels, metadata) */
    --tipz-gray-text: #4b5563;         /* Gris texto (pricing muted) */

    /* === Tokens canónicos del rediseño E1 (alias semánticos) === */
    --tipz-text-secondary: #c8ccd4;    /* Alias de --tipz-text-secondary-dark, usable en componentes nuevos */
    --tipz-text-strong: #ffffff;        /* Texto énfasis sobre fondo oscuro */
    --tipz-border: rgba(255, 255, 255, 0.08);        /* Borde sutil sobre superficies oscuras */
    --tipz-border-strong: rgba(255, 255, 255, 0.16); /* Borde de mayor contraste */
    --motion-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #00A859 0%, #007A42 100%);
    --gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #4A4A4A 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.2);
    --shadow-glow: 0 0 20px rgba(0,168,89,0.4);
    --glow-green: rgba(0, 168, 89, 0.12);
    --glow-green-intense: rgba(0, 168, 89, 0.4);

    /* Transiciones */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;

    /* Type Scale (8 stops — base 16px)
       Usar estos tokens para nuevos componentes.
       Componentes existentes migrar gradualmente. */
    --fs-xs: 0.75rem;     /* 12px — badges, footnotes, meta */
    --fs-sm: 0.875rem;    /* 14px — captions, small labels */
    --fs-base: 1rem;      /* 16px — body text */
    --fs-md: 1.125rem;    /* 18px — emphasized body, subtitles */
    --fs-lg: 1.25rem;     /* 20px — card titles, large body */
    --fs-xl: 1.5rem;      /* 24px — section subtitles */
    --fs-2xl: 2.5rem;     /* 40px — section titles (mobile: 2rem) */
    --fs-3xl: 3.5rem;     /* 56px — hero title (mobile: 2.2rem) */
}

/* ==================== RESET Y BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-base);
    color: var(--tipz-black);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==================== HERO SECTION ====================
   Reglas movidas a `landing/_hero.css` por T05 (H1.1 rediseño con frase ancla).
   Razón: el rediseño Swiss Minimalism cambia tipografía (Space Grotesk + clamp),
   spacing, paleta y motion-tokens. Mantener ambos bloques causaba colisión por
   especificidad y el viejo dominaba (revisión código T05). Mantener este header
   como marker para futuros lectores.
   Keyframes hero-exclusivas (fadeInUp, bounce, gradientShift, ctaGlow) también
   se eliminan más abajo en este archivo — ya no se usan.
   ================================================================ */

/* ==================== SECTION TYPOGRAPHY ==================== */
.section-title {
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--tipz-black);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--gradient-primary);
    margin: 20px auto 0;
    border-radius: 2px;
}

/* Line-length control: max ~75 chars en subtítulos de sección (desktop ancho) */
.section-title + p,
.section-title + .section-subtitle,
.section-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Feature Cards */
.feature-card {
    background: var(--tipz-white);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
    height: 100%;
    border: 2px solid transparent;
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: var(--tipz-green-primary);
}

.feature-icon {
    font-size: 4rem;
    color: var(--tipz-green-primary);
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: var(--transition-normal);
}

.feature-card:hover .feature-icon {
    transform: scale(1.2) rotate(5deg);
}

.feature-card h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--tipz-black);
}

.feature-card p {
    color: var(--tipz-gray-dark);
    font-size: 1rem;
    line-height: 1.8;
}

/* ==================== PRICING SECTION ==================== */
.pricing-section {
    padding: 100px 0;
    background: var(--tipz-dark-surface);
    position: relative;
    overflow: hidden;
}

.pricing-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0,168,89,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.pricing-section .section-title {
    color: var(--tipz-text-on-dark);
}

.pricing-section .text-muted {
    color: var(--tipz-text-muted-dark) !important;
}

/* Billing Period Selector (Dark Pill) */
.billing-selector {
    display: inline-flex;
    background: rgba(255,255,255,0.06);
    border-radius: 60px;
    padding: 0.35rem;
    margin: 0 auto 3rem;
    gap: 0.25rem;
}

.billing-option {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tipz-text-muted-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.billing-option:hover {
    color: var(--tipz-text-secondary-dark);
}

.billing-option.active {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(0,168,89,0.3);
}

.billing-option.active .discount-badge {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.discount-badge {
    display: inline-block;
    background: rgba(0,168,89,0.3);
    color: var(--tipz-green-primary);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 2px;
}

.billing-total {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: italic;
}

/* Cards Grid */
.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    align-items: start;
}

/* Card Base */
.pricing-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 40px rgba(0, 0, 0, 0.3);
}

.pricing-card:hover {
    border-color: rgba(0,168,89,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Featured Card (ELITE) */
.pricing-card.featured {
    border: 2px solid rgba(0, 168, 89, 0.25);
    background: rgba(0, 168, 89, 0.06);
    transform: scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(0, 168, 89, 0.15),
        0 0 40px rgba(0, 168, 89, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 2;
    padding-top: 2.75rem;
}

.pricing-card.featured::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,168,89,0.6), transparent 50%, rgba(0,168,89,0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 0 50px rgba(0,168,89,0.25), 0 25px 70px rgba(0,0,0,0.35);
}

/* Badge Popular */
.badge-popular {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: white;
    padding: 0.35rem 1.25rem;
    border-radius: 0 0 12px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Card Header */
.pricing-card-header {
    margin-bottom: 1rem;
}

.pricing-card .plan-name {
    color: var(--tipz-text-muted-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Card Price */
.pricing-card-price {
    margin-bottom: 1.5rem;
}

.pricing-card .plan-price {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tipz-green-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(0, 168, 89, 0.3);
}

.pricing-card .plan-period {
    display: block;
    color: var(--tipz-gray-medium);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Card Features */
.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    text-align: left;
}

.pricing-card-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--tipz-text-secondary-dark);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pricing-card-features li:last-child {
    border-bottom: none;
}

.pricing-card-features .feature-icon {
    flex-shrink: 0;
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--tipz-text-secondary-dark);
    margin-bottom: 0;
    display: inline;
}

.pricing-card-features .feature-label {
    flex: 1;
}

.pricing-icon-muted {
    color: var(--tipz-gray-text) !important;
}

/* CTA Buttons */
.pricing-card-cta {
    margin-top: auto;
}

.btn-pricing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    text-align: center;
    padding: 0.875rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    background: transparent;
    border: 2px solid rgba(0,168,89,0.5);
    color: var(--tipz-green-primary);
}

.btn-pricing:hover {
    background: rgba(0,168,89,0.1);
    border-color: var(--tipz-green-primary);
    color: var(--tipz-green-primary);
    transform: translateY(-2px);
}

.btn-pricing.primary {
    background: var(--gradient-primary);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(0,168,89,0.3);
}

.btn-pricing.primary:hover {
    box-shadow: 0 6px 25px rgba(0,168,89,0.45);
    transform: translateY(-2px);
    color: white;
}

/* Button "Ver más" para features colapsables */
.btn-show-more {
    background: transparent;
    border: none;
    color: rgba(0,168,89,0.8);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 0;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    margin: 0 0 1rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-show-more:hover {
    color: var(--tipz-green-primary);
}

.btn-show-more i {
    transition: transform 0.3s ease;
}

.btn-show-more.expanded i {
    transform: rotate(180deg);
}

.feature-extra {
    transition: all 0.3s ease;
}

/* Responsive: Tablet */
@media (max-width: 1200px) {
    .pricing-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 992px) {
    .pricing-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-card.featured {
        transform: scale(1.02);
    }
    .pricing-card.featured:hover {
        transform: scale(1.02) translateY(-4px);
    }
}

@media (max-width: 768px) {
    .pricing-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-card.featured {
        transform: none;
    }
    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
    .billing-selector {
        flex-wrap: wrap;
        border-radius: 1rem;
        gap: 0.2rem;
    }
    .billing-option {
        flex: 1 1 45%;
        border-radius: 0.75rem;
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }
    .pricing-section {
        padding: 60px 0;
    }
}

@media (max-width: 576px) {
    .pricing-cards-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ==================== WIDGETS SECTION ==================== */
.widgets-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
}

.widgets-section .section-title {
    color: var(--tipz-white);
}

.widgets-carousel {
    max-width: 1600px;
    min-height: 500px;
    margin: 0 auto;
    background: var(--tipz-white);
    border-radius: 20px;
    padding: 30px 1rem;
    box-shadow: 0 20px 60px rgba(0,168,89,0.3);
    position: relative;
}

@media (min-width: 992px) {
    .widgets-carousel {
        padding: 30px 2rem;
    }
}

.widget-container {
    min-height: 420px;
    padding: 20px;
}

.widget-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--tipz-green-primary);
}

.widget-header i {
    font-size: 2.5rem;
    color: var(--tipz-green-primary);
    margin-right: 10px;
}

.widget-header h4 {
    font-size: 1.8rem;
    font-weight: 700;
    display: inline;
    color: var(--tipz-black);
}

.widget-body {
    overflow-y: auto;
    max-height: 360px;
}

/* Games Widget */
.match-row {
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 10px;
    transition: background 0.2s ease;
}

.match-row:hover {
    background: rgba(0,168,89,0.05);
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.team.away {
    flex-direction: row-reverse;
    text-align: right;
}

.team img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.team span {
    font-weight: 500;
    font-size: 0.95rem;
}

.match-score {
    text-align: center;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.match-score .score {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tipz-black);
}

.match-score .badge {
    font-size: 0.7rem;
    padding: 3px 8px;
}

/* Standings Widget */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.standings-table thead {
    background: var(--tipz-green-primary);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.standings-table th,
.standings-table td {
    padding: 10px 8px;
    text-align: center;
}

.standings-table .rank {
    font-weight: 700;
    color: var(--tipz-green-primary);
    font-size: 1rem;
}

.standings-table .team-name {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.standings-table .team-name img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.standings-table .team-name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.standings-table .points-col {
    background: rgba(0,168,89,0.1);
    font-weight: 600;
}

.standings-table .points {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--tipz-green-primary);
}

.standings-table tr.top-4 {
    background: rgba(0,168,89,0.05);
}

.standings-table tbody tr:hover {
    background: rgba(0,168,89,0.1);
}

/* H2H Widget */
.h2h-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
    gap: 15px;
}

.stat-box {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: var(--tipz-gray-light);
    flex: 1;
    transition: transform 0.2s ease;
}

.stat-box:hover {
    transform: translateY(-3px);
}

.stat-box.draws-box {
    background: rgba(0,168,89,0.1);
}

.stat-box .wins {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tipz-green-primary);
}

.stat-box .label {
    font-size: 0.85rem;
    color: var(--tipz-gray-dark);
    margin-top: 5px;
    font-weight: 500;
}

.h2h-matches h6 {
    font-weight: 600;
    color: var(--tipz-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.h2h-match {
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 0;
    transition: background 0.2s ease;
}

.h2h-match:hover {
    background: rgba(0,168,89,0.05);
}

.h2h-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.h2h-teams img {
    width: 26px;
    height: 26px;
}

.h2h-teams .team-name-h2h {
    font-weight: 500;
    font-size: 0.9rem;
    min-width: 120px;
}

.h2h-teams .score-h2h {
    font-weight: 700;
    font-size: 1.2rem;
    min-width: 60px;
    text-align: center;
    color: var(--tipz-black);
}

/* Carousel indicators mejorados - más visibles */
.widgets-carousel .carousel-indicators {
    bottom: -35px;
    gap: 8px;
    position: absolute;
    z-index: 10;
}

/* Espacio adicional para el texto de última actualización */
.widgets-carousel .text-center.mt-3 {
    margin-top: 3rem !important;
}

.widgets-carousel .carousel-indicators button {
    background-color: var(--tipz-green-primary);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    opacity: 1;
    border: 2px solid rgba(0,168,89,0.3);
    transition: all 0.3s ease;
    margin: 0 4px;
}

.widgets-carousel .carousel-indicators button:not(.active) {
    background-color: rgba(0,168,89,0.25);
    border-color: rgba(0,168,89,0.4);
}

.widgets-carousel .carousel-indicators button.active {
    background-color: var(--tipz-green-primary);
    border-color: var(--tipz-green-primary);
    transform: scale(1.4);
    box-shadow: 0 0 12px rgba(0,168,89,0.8), 0 2px 8px rgba(0,168,89,0.4);
}

.widgets-carousel .carousel-indicators button:hover {
    background-color: var(--tipz-green-primary);
    border-color: var(--tipz-green-primary);
    transform: scale(1.2);
}

/* Carousel control buttons (prev/next) mejorados - fuera del contenedor */
.widgets-carousel .carousel-control-prev,
.widgets-carousel .carousel-control-next {
    width: 50px;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
}

.widgets-carousel .carousel-control-prev {
    left: -70px; /* Posicionar fuera del contenedor blanco */
}

.widgets-carousel .carousel-control-next {
    right: -70px; /* Posicionar fuera del contenedor blanco */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 50px;
    height: 50px;
    background-color: var(--tipz-green-primary);
    border-radius: 50%;
    padding: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,168,89,0.3);
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--tipz-green-dark);
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(0,168,89,0.6);
}

/* ==================== STATS SECTION ==================== */
.stats-section {
    padding: 32px 0;
    background: var(--gradient-dark);
    color: var(--tipz-white);
}

@media (max-width: 768px) {
    .stats-section { padding: 28px 0; }
}

/* Tipografía editorial con peso visual recuperado:
   counter 3.25rem peso 700 verde + label uppercase tracking 0.10em.
   Separación con underline sutil verde abajo del counter para feel "dataset". */
.stat-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--tipz-green-primary);
    text-shadow: 0 0 24px rgba(0, 168, 89, 0.32);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    margin: 0 0 6px;
    display: block;
    line-height: 1;
    position: relative;
}

.stat-counter::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, #00A859, transparent);
    margin: 8px auto 0;
}

.stats-section p {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8A8F98;
    opacity: 1;
    margin: 0;
}

@media (max-width: 768px) {
    .stat-counter { font-size: 2.5rem; }
}

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

/* Keyframes `bounce` y `gradientShift` eliminadas por T05 (sólo se usaban en
   el hero legacy, ahora reemplazado por `landing/_hero.css`).
   `fadeInUp` se mantiene porque la usan footer.css y auth.css. */

/* ==================== RESPONSIVE ==================== */

/* Desktop Large (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }
}

/* Desktop (1024px - 1439px) */
@media (max-width: 1439px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.3rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    /* Ajustar botones del carousel en tabletas */
    .widgets-carousel .carousel-control-prev {
        left: -60px;
    }

    .widgets-carousel .carousel-control-next {
        right: -60px;
    }
}

/* Mobile (320px - 767px) */
@media (max-width: 767px) {
    .hero-section {
        min-height: 500px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        max-width: 300px;
    }

    .section-title {
        font-size: 2rem;
    }

    .pricing-section,
    .widgets-section {
        padding: 60px 0;
    }

    .feature-card,
    .pricing-card {
        padding: 30px;
    }

    .pricing-price {
        font-size: 2.5rem;
    }

    .stat-counter {
        font-size: 3rem;
    }

    /* Ajustar botones del carousel en móviles */
    .widgets-carousel .carousel-control-prev {
        left: -45px;
    }

    .widgets-carousel .carousel-control-next {
        right: -45px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 40px;
        height: 40px;
    }
}

/* Extra Small Mobile (320px) */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 15px 30px;
        font-size: 1rem;
    }
}

/* ==================== CALCULADORA DE COBERTURA SECTION ==================== */
.calculator-section {
    background: linear-gradient(135deg, #1A1A1A 0%, #00A859 50%, #1A1A1A 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.calculator-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0,168,89,0.05) 60px, rgba(0,168,89,0.05) 120px),
        repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(0,168,89,0.05) 60px, rgba(0,168,89,0.05) 120px);
    pointer-events: none;
}

/* Glass Card - Reusable glassmorphism effect */
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* Comparison Cards */
.comparison-card {
    padding: 2rem;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comparison-card:hover {
    transform: translateY(-5px);
}

.comparison-card.without-coverage {
    border: 2px solid rgba(220, 53, 69, 0.3);
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.2);
}

.comparison-card.without-coverage:hover {
    box-shadow: 0 8px 30px rgba(220, 53, 69, 0.3);
}

.comparison-card.with-coverage {
    border: 3px solid var(--tipz-green-primary);
    box-shadow: 0 4px 30px rgba(0, 168, 89, 0.3);
}

.comparison-card.with-coverage:hover {
    box-shadow: 0 8px 40px rgba(0, 168, 89, 0.5);
}

.comparison-header {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.comparison-header i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.without-coverage .comparison-header i {
    color: #dc3545;
}

.with-coverage .comparison-header i {
    color: var(--tipz-green-primary);
}

.comparison-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--tipz-black);
}

.risk-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risk-badge.high {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 2px solid #dc3545;
}

.risk-badge.low {
    background: rgba(0, 168, 89, 0.1);
    color: var(--tipz-green-primary);
    border: 2px solid var(--tipz-green-primary);
}

.comparison-body {
    color: var(--tipz-black);
}

.example-title {
    font-weight: 600;
    color: var(--tipz-gray-dark);
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.scenario-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.scenario-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    line-height: 1.5;
}

.scenario-list li i {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.scenario-win i {
    color: var(--tipz-green-primary);
}

.scenario-lose i {
    color: #dc3545;
}

.scenario-covered i {
    color: #0dcaf0;
}

.comparison-issues .issue,
.comparison-benefits .benefit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.comparison-issues .issue i {
    color: #ffc107;
}

.comparison-benefits .benefit i {
    color: var(--tipz-green-primary);
}

.elite-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: var(--tipz-black);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

.elite-badge i {
    margin-right: 0.25rem;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.8);
    }
}

/* Calculator Demo */
.calculator-demo {
    padding: 3rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.calculator-demo h3 {
    color: var(--tipz-black);
    font-weight: 700;
    font-size: 1.8rem;
}

.calculator-demo h3 i {
    color: var(--tipz-green-primary);
    margin-right: 0.5rem;
}

/* Calculator Benefits */
.calculator-benefit {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    height: 100%;
}

.calculator-benefit:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 168, 89, 0.3);
    border-color: var(--tipz-green-primary);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.calculator-benefit:hover .benefit-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 20px rgba(0, 168, 89, 0.5);
}

.benefit-icon i {
    font-size: 2.5rem;
    color: white;
}

.calculator-benefit h4 {
    color: var(--tipz-black);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.calculator-benefit p {
    color: var(--tipz-gray-dark);
    line-height: 1.6;
    margin: 0;
}

/* Disclaimer */
.calculator-disclaimer {
    margin-top: 3rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
}

.calculator-disclaimer p {
    color: white;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.calculator-disclaimer i {
    color: #ffc107;
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

/* TIPZ Info Alert - Branded green gradient alert */
.alert-tipz-info {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.alert-tipz-info .icon-large {
    font-size: 2.5rem;
    color: var(--tipz-green-primary);
}

.alert-tipz-info h6 {
    color: #00695C;
}

.alert-tipz-info p {
    color: #004D40;
}

/* Responsive Calculator Section */
@media (max-width: 991px) {
    .calculator-section {
        padding: 60px 0;
    }

    .calculator-demo {
        padding: 2rem;
    }

    .comparison-card {
        margin-bottom: 2rem;
    }

    .elite-badge {
        top: 10px;
        right: 10px;
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }

    .cta-content {
        padding: 2rem;
    }

    .cta-content h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .calculator-demo h3 {
        font-size: 1.5rem;
    }

    .btn-calculator {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    .benefit-icon {
        width: 60px;
        height: 60px;
    }

    .benefit-icon i {
        font-size: 2rem;
    }

    .calculator-benefit h4 {
        font-size: 1.1rem;
    }

    .cta-content i {
        font-size: 2.5rem;
    }

    .cta-content h3 {
        font-size: 1.4rem;
    }

    .btn-cta-calculator {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .calculator-section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .calculator-demo {
        padding: 1.5rem;
    }

    .calculator-form .col-md-4 {
        margin-bottom: 1rem;
    }

    .comparison-header h3 {
        font-size: 1.3rem;
    }

    .scenario-list li {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    .calculator-benefit {
        padding: 1.5rem;
    }

    .calculator-disclaimer {
        padding: 1rem;
    }

    .calculator-disclaimer p {
        font-size: 0.85rem;
    }
}

/* ==================== TIMELINE SIMULATION ==================== */
.match-timeline {
    padding: 2rem;
    height: 100%;
}

.timeline-header {
    text-align: center;
    margin-bottom: 2rem;
}

.btn-play-timeline {
    background: linear-gradient(135deg, var(--tipz-green-primary) 0%, var(--tipz-green-dark) 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 168, 89, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-play-timeline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 168, 89, 0.4);
}

.btn-play-timeline:active {
    transform: translateY(0);
}

.btn-play-timeline i {
    font-size: 1.3rem;
}

/* Timeline Events */
.timeline-events {
    position: relative;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

/* Vertical connecting line */
.timeline-events::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--tipz-green-primary), var(--tipz-green-dark));
    border-radius: 2px;
}

.timeline-event {
    position: relative;
    padding-left: 80px;
    margin-bottom: 2rem;
    opacity: 0.08;
    filter: blur(2px);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}

.timeline-event.revealed {
    opacity: 1;
    filter: blur(0);
    animation: slideInLeft 0.5s ease;
}

.timeline-event.active .timeline-content {
    border-color: var(--tipz-green-primary);
    box-shadow: 0 4px 20px rgba(0, 168, 89, 0.2);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Timeline Marker */
.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background: white;
    border: 4px solid var(--tipz-green-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.timeline-marker .minute {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--tipz-green-dark);
}

.timeline-marker.warning {
    border-color: #FFA500;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}

.timeline-marker.warning .minute {
    color: #E65100;
}

.timeline-marker.active {
    border-color: var(--tipz-green-primary);
    background: linear-gradient(135deg, var(--tipz-green-primary) 0%, var(--tipz-green-dark) 100%);
    box-shadow: 0 4px 20px rgba(0, 168, 89, 0.4);
}

.timeline-marker.active .minute {
    color: white;
}

/* Timeline Content */
.timeline-content {
    background: white;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.timeline-content h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1A1A1A;
}

.timeline-content p {
    margin: 0.5rem 0;
    color: #666;
    font-size: 0.95rem;
}

.timeline-content .badge {
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

/* Timeline Progress */
.timeline-progress {
    margin-top: 2rem;
}

.timeline-progress .progress {
    height: 8px;
    border-radius: 10px;
    background: #E0E0E0;
    overflow: hidden;
}

.timeline-progress .progress-bar {
    transition: width 0.1s linear;
    border-radius: 10px;
}

.timeline-progress small {
    margin-top: 0.5rem;
    color: #666;
    font-weight: 600;
}

/* ==================== VISUAL SIMULATOR ==================== */
.visual-simulator {
    padding: 2rem;
    height: 100%;
    position: relative;
}

.visual-simulator h5 {
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 0.5rem;
}

.visual-simulator p.small {
    color: #666;
}

/* Slider Groups */
.slider-group {
    margin-bottom: 1.5rem;
}

.slider-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #1A1A1A;
    font-size: 0.95rem;
}

.slider-label i {
    color: var(--tipz-green-primary);
    margin-right: 0.5rem;
}

.slider-label strong {
    color: var(--tipz-green-primary);
    font-size: 1.1rem;
}

/* Custom Range Input Styling */
.visual-range {
    width: 100%;
    height: 8px;
    border-radius: 10px;
    background: linear-gradient(to right, #E0E0E0 0%, var(--tipz-green-primary) 100%);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.visual-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--tipz-green-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.visual-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 168, 89, 0.3);
}

.visual-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--tipz-green-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.visual-range::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 168, 89, 0.3);
}

/* Visual Results */
.visual-results {
    margin-top: 2rem;
}

.visual-results h6 {
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1A1A1A;
}

.visual-bar-group {
    margin-bottom: 1.5rem;
}

.visual-bar-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.visual-bar {
    width: 100%;
    height: 40px;
    background: #F5F5F5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.visual-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    transition: width 0.5s ease;
    border-radius: 10px;
}

.visual-bar.danger .visual-bar-fill {
    background: linear-gradient(135deg, #DC3545 0%, #C82333 100%);
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.3);
}

.visual-bar.success .visual-bar-fill {
    background: linear-gradient(135deg, var(--tipz-green-primary) 0%, var(--tipz-green-dark) 100%);
    box-shadow: 0 2px 10px rgba(0, 168, 89, 0.3);
}

/* ELITE Lock Overlay */
.elite-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lock-content {
    text-align: center;
    padding: 2rem;
}

.lock-content i {
    font-size: 4rem;
    color: #FFD700;
    margin-bottom: 1rem;
    animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.lock-content h6 {
    font-weight: 800;
    font-size: 1.3rem;
    color: #1A1A1A;
    margin-bottom: 0.5rem;
}

.lock-content p {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 1rem;
    margin: 0;
}

/* ==================== RESPONSIVE - TIMELINE & VISUAL ==================== */
@media (max-width: 991px) {
    .match-timeline,
    .visual-simulator {
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .timeline-events::before {
        left: 20px;
    }

    .timeline-event {
        padding-left: 60px;
    }

    .timeline-marker {
        width: 50px;
        height: 50px;
    }

    .timeline-marker .minute {
        font-size: 0.8rem;
    }

    .timeline-content {
        padding: 1rem;
    }

    .timeline-content h5 {
        font-size: 0.9rem;
    }

    .btn-play-timeline {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .visual-simulator {
        padding: 1.5rem;
    }

    .slider-label {
        font-size: 0.85rem;
    }

    .visual-range {
        height: 6px;
    }

    .visual-range::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    .visual-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }

    .visual-bar {
        height: 35px;
    }

    .visual-bar-fill {
        font-size: 0.9rem;
    }

    .lock-content i {
        font-size: 3rem;
    }

    .lock-content h6 {
        font-size: 1.1rem;
    }

    .lock-content p {
        font-size: 0.9rem;
    }
}

/* ==================== HERO FEATURES & DISCLAIMER ==================== */
.hero-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-features span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-features i {
    color: var(--tipz-green-primary);
}

.hero-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.hero-disclaimer i {
    color: var(--tipz-green-primary);
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .hero-features {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .hero-disclaimer {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}

/* ==================== LEAGUE LOGOS MARQUEE ==================== */
/* Banda clara intencional — los logos se ven mejor sobre fondo claro.
   Pseudo-elementos ::before/::after con gradient dark fade fusionan
   los bordes top/bottom con las secciones dark adyacentes para evitar
   transición brusca y dar sensación de profundidad. */
.leagues-marquee {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg,
        #F5F6F8 0%,
        #FFFFFF 50%,
        #F5F6F8 100%);
    padding: 14px 0 12px;
    position: relative;
}

.leagues-marquee::before,
.leagues-marquee::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    pointer-events: none;
    z-index: 2;
}

.leagues-marquee::before {
    top: 0;
    background: linear-gradient(180deg,
        rgba(15, 15, 18, 0.55) 0%,
        rgba(15, 15, 18, 0.18) 45%,
        transparent 100%);
}

.leagues-marquee::after {
    bottom: 0;
    background: linear-gradient(0deg,
        rgba(15, 15, 18, 0.55) 0%,
        rgba(15, 15, 18, 0.18) 45%,
        transparent 100%);
}

.marquee-track {
    width: 100%;
    overflow: hidden;
    /* Fade edges — logos aparecen/desaparecen suavemente */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-content {
    display: flex;
    gap: 3rem;
    animation: marquee 40s linear infinite;
    width: max-content;
}

.league-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    opacity: 0.92;
    transition: opacity 250ms ease, transform 250ms ease;
}

.league-item .league-logo {
    filter: none;
    opacity: 1;
}

.league-item .league-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.league-item:hover {
    opacity: 1;
    transform: scale(1.08);
}

@media (max-width: 768px) {
    .league-item .league-logo {
        height: 28px;
    }
}

/* Trust-line editorial: live dot (animación pulse muy sutil) + monospace tracking
   ajusta colores para legibilidad sobre el fondo CLARO del marquee. */
.marquee-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    margin: 8px 0 0;
    color: #5A6068;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.marquee-subtitle::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00A859;
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.18);
    animation: marquee-pulse 2.2s ease-in-out infinite;
}

@keyframes marquee-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.18); }
    50% { box-shadow: 0 0 0 6px rgba(0, 168, 89, 0.06); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-subtitle::before { animation: none; }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pausa en hover */
.leagues-marquee:hover .marquee-content {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .marquee-content {
        gap: 2rem;
    }
}

/* Pricing Note (dark theme) */
.pricing-note {
    max-width: 700px;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--tipz-gray-medium);
}

.pricing-note i {
    color: rgba(0,168,89,0.6);
    margin-right: 0.5rem;
}

/* ==================== BADGE ELITE (Feature Tabs) ==================== */
.badge-elite {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, var(--tipz-green-primary) 0%, var(--tipz-green-dark) 100%);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-elite i {
    font-size: 0.7rem;
    color: white;
}

/* (Pricing note styles moved to pricing section block above) */

/* ==================== CTA FINAL SECTION ==================== */
.cta-final-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}

.cta-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 168, 89, 0.2);
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.cta-disclaimer i {
    font-size: 1.5rem;
    color: var(--tipz-green-primary);
    flex-shrink: 0;
}

.cta-disclaimer span {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

.cta-disclaimer strong {
    color: var(--tipz-black);
}

@media (max-width: 768px) {
    .cta-disclaimer {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
    }
}

/* ==================== JOBS MODAL ==================== */
.jobs-modal-content {
    border: none;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.jobs-modal-header {
    background: linear-gradient(135deg, var(--tipz-green-primary) 0%, var(--tipz-green-dark) 100%);
    padding: 2rem;
    border: none;
    position: relative;
}

.jobs-header-content {
    text-align: center;
    width: 100%;
    padding-right: 2rem;
}

.jobs-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(10px);
}

.jobs-modal-header .modal-title {
    color: white;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.jobs-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0;
}

.jobs-modal-header .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0.8;
}

.jobs-modal-header .btn-close:hover {
    opacity: 1;
}

.jobs-modal-body {
    padding: 2rem;
    background: #f8f9fa;
}

.jobs-section {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.jobs-section:last-of-type {
    margin-bottom: 0;
}

.jobs-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tipz-green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jobs-section-title i {
    font-size: 1.1rem;
}

/* Form Inputs */
.jobs-input,
.jobs-textarea,
.jobs-select {
    border: 2px solid #e9ecef;
    border-radius: 0.75rem;
    transition: var(--transition-normal);
}

.jobs-input:focus,
.jobs-textarea:focus,
.jobs-select:focus {
    border-color: var(--tipz-green-primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.1);
}

.jobs-textarea {
    resize: none;
    min-height: 70px;
}

.jobs-select {
    padding: 0.75rem 1rem;
    height: auto;
    cursor: pointer;
}

/* Questions */
.jobs-question-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--tipz-black);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.jobs-question-label i {
    font-size: 0.9rem;
}

/* Submit Section */
.jobs-submit-section {
    text-align: center;
    padding-top: 1rem;
}

.btn-jobs-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--tipz-green-primary) 0%, var(--tipz-green-dark) 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 4px 20px rgba(0, 168, 89, 0.3);
}

.btn-jobs-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 168, 89, 0.4);
}

.btn-jobs-submit:active {
    transform: translateY(0);
}

.jobs-privacy-note {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.jobs-privacy-note i {
    color: var(--tipz-green-primary);
}

/* Jobs Link in Navbar - Special Style */
.nav-link-landing.jobs-link {
    position: relative;
}

.nav-link-landing.jobs-link::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .jobs-modal-header {
        padding: 1.5rem;
    }

    .jobs-modal-header .modal-title {
        font-size: 1.4rem;
    }

    .jobs-subtitle {
        font-size: 0.9rem;
    }

    .jobs-modal-body {
        padding: 1rem;
    }

    .jobs-section {
        padding: 1rem;
    }

    .btn-jobs-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== TODAY'S MATCHES TICKER ==================== */
.todays-matches-section {
    background: var(--tipz-dark-surface);
    padding: 48px 0 40px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .todays-matches-section { padding: 40px 0 32px; }
}

.todays-matches-section .section-title {
    color: #fff;
}

.ticker-subtitle {
    color: var(--tipz-text-muted-dark);
    font-size: 1.05rem;
    margin-bottom: 0;
}

.live-indicator {
    color: var(--tipz-green-primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Pulse dot */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00A859;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* Ticker wrapper with edge fade */
.matches-ticker-wrapper {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    padding: 1rem 0;
}

/* Ticker track - infinite scroll */
.matches-ticker-track {
    display: flex;
    gap: 1.5rem;
    animation: tickerScroll 30s linear infinite;
    width: max-content;
}

.matches-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Match card */
.match-ticker-card {
    min-width: 280px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 168, 89, 0.15);
    border-radius: 16px;
    padding: 1.2rem 1.4rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.match-ticker-card:hover {
    border-color: rgba(0, 168, 89, 0.4);
    box-shadow: 0 0 20px rgba(0, 168, 89, 0.1);
}

/* League row */
.ticker-league {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.ticker-league img {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.ticker-league span {
    color: var(--tipz-text-muted-dark);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Teams row */
.ticker-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.ticker-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.ticker-team img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.ticker-team span {
    color: var(--tipz-text-secondary-dark);
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.ticker-vs {
    color: var(--tipz-green-primary);
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Time */
.ticker-time {
    color: var(--tipz-text-muted-dark);
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.live-badge {
    background: rgba(255, 59, 48, 0.15);
    color: #ff3b30;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

/* Analyzing indicator */
.ticker-analyzing {
    color: var(--tipz-green-primary);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticker-analyzing .pulse-dot {
    width: 6px;
    height: 6px;
}

/* Scan line effect */
.scan-line {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 168, 89, 0.03) 45%, rgba(0, 168, 89, 0.06) 50%, rgba(0, 168, 89, 0.03) 55%, transparent 100%);
    animation: scanLine 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes scanLine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Responsive */
@media (max-width: 768px) {
    .todays-matches-section {
        padding: 3.5rem 0 3rem;
    }

    .match-ticker-card {
        min-width: 240px;
        padding: 1rem 1.1rem;
    }

    .ticker-team img {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .match-ticker-card {
        min-width: 220px;
        padding: 0.9rem 1rem;
    }

    .ticker-team img {
        width: 36px;
        height: 36px;
    }

    .ticker-team span {
        font-size: 0.7rem;
        max-width: 70px;
    }
}

/* ============================================
   ACCESSIBILITY: prefers-reduced-motion
   ============================================
   Respeta usuarios con motion sickness / vestibular disorders.
   Silencia animaciones decorativas pero preserva indicadores
   funcionales (pulse-dot del SISTEMA ACTIVO).
   Activado por OS settings: macOS Reduce Motion / Windows Show
   animations off / iOS Settings>Accessibility>Motion. */

@media (prefers-reduced-motion: reduce) {

    /* 1. Hero video: ocultar y dejar solo el poster */
    .hero-video {
        display: none !important;
    }

    /* 2. Marquee de logos: pausar animación, logos visibles fijos */
    .marquee-track,
    .marquee-content {
        animation: none !important;
        transform: none !important;
    }

    /* 3. Scroll indicator: pausar bounce/animación */
    .scroll-indicator,
    .scroll-indicator i,
    .scroll-indicator * {
        animation: none !important;
        transition: none !important;
    }

    /* 4. AOS fade-up y similares: deshabilitar transiciones */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 5. Animaciones globales decorativas */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* 6. EXCEPCIÓN: pulse-dot sigue animándose porque es indicador
       funcional de "sistema en vivo", no decoración. */
    .pulse-dot,
    .pulse-dot::before,
    .pulse-dot::after {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}