/*
 *  @Copyright (c) 2016 - 2023. XPanel® Hostiberi - Powerful CMS
 *  @Author: Hostiberi
 *  @Email: info@hostiberi.com
 *  @Filename: responsive.css
 *  @Last modified by: hostiberi
 *  @web: www.hostiberi.com
 */

/* ============================================
   RESPONSIVE CSS - Organizado por breakpoints
   ============================================ */

/* ===========================================
   GRID BASE - Sin media query
   =========================================== */
.timeline .d-grid {
    grid-template-columns: repeat(5, 1fr);
}


/* ===========================================
   EXTRA SMALL DEVICES (max-width: 480px)
   Teléfonos pequeños
   =========================================== */
@media (max-width: 480px) {
    
    /* Team Avatar Racing */
    .team-avatar-racing {
        width: 100px;
        height: 100px;
    }
    
    .team-avatar-racing img,
    .team-avatar-racing > div {
        width: 90px !important;
        height: 90px !important;
    }
}


/* ===========================================
   SMALL DEVICES (max-width: 600px)
   Teléfonos en portrait
   =========================================== */
@media (max-width: 600px) {
    
    /* Racing Header Row */
    .racing-header-row {
        flex-direction: column;
        text-align: center;
    }
    
    .racing-title-block {
        text-align: center;
    }
}


/* ===========================================
   MOBILE (max-width: 576px)
   =========================================== */
@media (max-width: 576px) {
    
    /* Racing Tabs */
    .racing-tabs {
        flex-direction: column;
        gap: 4px;
    }
    
    .racing-tabs .nav-link {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
}


/* ===========================================
   MOBILE (max-width: 767px)
   Teléfonos en landscape
   =========================================== */
@media (max-width: 767px) {
    
    /* Navbar */
    .navbar-collapse {
        color: #000;
        background: #222;
        text-align: left;
        padding: .2rem 0 0 1rem;
        margin-top: .2rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    /* Hero */
    .hero h1 {
        font-size: 2rem !important;
        letter-spacing: 2px !important;
    }
    
    .hero p {
        font-size: 1rem !important;
    }
    
    /* Equipos */
    .equipos h2 {
        font-size: 1.8rem !important;
        letter-spacing: 2px !important;
    }
    
    .equipo {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 1rem auto;
        flex: 0 0 85%;
    }
    
    .grid-equipos {
        padding: 0;
    }
    
    /* Formulario Buscador */
    #formBuscador {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    #formBuscador input,
    #formBuscador select,
    #formBuscador button {
        width: 100%;
        text-align: center;
    }
    
    #formBuscador button {
        margin-top: 6px;
    }
    
    #formBuscador #reset_search {
        text-align: center;
        width: 100%;
        font-size: 0.9em;
    }
    
    /* Secciones Home */
    .como-funciona h2,
    .estadisticas h3 {
        font-size: 1.8rem !important;
    }
    
    /* Footer Social */
    .social a {
        font-size: 20px !important;
        margin: 0 6px !important;
    }
}


/* ===========================================
   MOBILE & TABLET (max-width: 768px)
   Dispositivos móviles y tablets pequeñas
   =========================================== */
@media (max-width: 768px) {
    
    /* Modal Racing */
    .modal-racing {
        border-radius: 12px !important;
    }
    
    .racing-input {
        padding: 0.65rem 0.85rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Racing Panel Hero */
    .racing-panel-hero {
        padding: 3rem 1.5rem;
        border-radius: 0 0 20px 20px;
    }
    
    .racing-panel-title {
        font-size: 2rem;
    }
    
    .title-main {
        font-size: 2.5rem;
    }
    
    .racing-actions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .racing-btn {
        padding: 1.25rem 1.5rem;
    }
    
    /* Sponsors Section */
    .sponsor-item {
        width: 200px;
        height: 130px;
        padding: 15px;
    }

    .sponsors-track {
        gap: 50px;
        animation-duration: 20s;
    }
    
    /* Roadmap Timeline */
    .roadmap-timeline::before {
        left: 30px;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        padding-left: 80px;
        padding-right: 0;
        justify-content: flex-start;
    }

    .timeline-node {
        left: 30px;
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .timeline-content {
        max-width: 100%;
    }

    .timeline-content::before,
    .timeline-item:nth-child(odd) .timeline-content::before,
    .timeline-item:nth-child(even) .timeline-content::before {
        left: -11px;
        transform: rotate(-45deg);
    }

    .roadmap-banner {
        padding: 1.5rem;
    }

    .community-cta {
        padding: 2rem 1.5rem;
    }
    
    /* FAQs - Role Tabs & Process Flow */
    .role-tab {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    .process-flow {
        flex-direction: column;
        align-items: center;
    }

    .process-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }

    .process-step {
        max-width: 200px;
    }
}


/* ===========================================
   TABLET (768px – 1023px)
   Tablets en portrait
   =========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    
    /* Navbar */
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


/* ===========================================
   LAPTOP (1024px – 1439px)
   Laptops y tablets en landscape
   =========================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
    
    /* Navbar */
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


/* ===========================================
   DESKTOP (1440px and up)
   Monitores de escritorio
   =========================================== */
@media (min-width: 1440px) {
    
    /* Navbar */
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}