@charset "UTF-8";

/* =====================================================
   TOPBAR
===================================================== */

.topbar{

    background:var(--blue);

    color:var(--white);

    font-size:13px;

    overflow:hidden;

    position:relative;

    z-index:30;
}

.topbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:8px 0;

    flex-wrap:wrap;
}

.topbar a{

    color:rgba(255,255,255,.92);

    margin-left:12px;

    text-decoration:none;

    transition:.25s ease;
}

.topbar a:hover{

    opacity:.82;
}

/* =====================================================
   HEADER PRINCIPAL
===================================================== */

.header{

    border-bottom:1px solid var(--border);

    background:#fff;

    position:relative;

    z-index:50;

    box-shadow:
        0 4px 18px rgba(15,23,42,.04);
}

.header-inner{

    display:flex;

    align-items:center;

    gap:28px;

    padding:22px 0;

    flex-wrap:nowrap;
}

/* =====================================================
   LOGO
===================================================== */

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;
}

.logo img{

    height:88px;

    display:block;

    object-fit:contain;

    transition:.25s ease;
}

/* =====================================================
   BUSCADOR
===================================================== */

.search-wrap{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

    width:100%;

    max-width:100%;
}

/* =====================================================
   FORM
===================================================== */

.search-form{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    max-width:100%;
}

/* =====================================================
   INPUT
===================================================== */

.search-form input{

    flex:1;

    width:100%;

    min-width:0;

    max-width:100%;

    height:54px;

    padding:0 18px;

    border:1px solid #dbe4f0;

    border-radius:16px;

    outline:none;

    font-size:14px;

    background:#fff;

    transition:.3s ease;

    box-shadow:
        0 4px 10px rgba(15,23,42,.03);
}

.search-form input:focus{

    border-color:var(--blue);

    box-shadow:
        0 0 0 5px rgba(37,99,235,.08);
}

/* =====================================================
   BOTON BUSCAR
===================================================== */

.btn-search{

    height:54px;

    padding:0 22px;

    border:none;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    box-shadow:
        0 10px 20px rgba(37,99,235,.18);

    transition:.35s ease;

    flex-shrink:0;
}

.btn-search:hover{

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 18px 30px rgba(37,99,235,.25);
}

.btn-search i{

    font-size:15px;

    pointer-events:none;
}

/* =====================================================
   SUGERENCIAS
===================================================== */

.search-suggest{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin-top:12px;

    padding-left:4px;

    font-size:13px;
}

.search-suggest a{

    color:#64748b;

    text-decoration:none;

    transition:.25s ease;
}

.search-suggest a:hover{

    color:var(--blue);

    transform:translateY(-1px);
}

/* =====================================================
   REDES
===================================================== */

.header-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    margin-left:8px;

    flex-shrink:0;
}

/* =====================================================
   TEXTO SUPERIOR
===================================================== */

.social-title{

    font-size:13px;

    font-weight:600;

    color:#64748b;

    letter-spacing:.3px;

    text-align:center;
}

/* =====================================================
   FILA REDES
===================================================== */

.social-row{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    justify-content:center;
}

/* =====================================================
   BOTONES
===================================================== */

.social-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;
    height:50px;

    border-radius:50px;

    overflow:hidden;

    text-decoration:none;

    color:#111827;

    background:#fff;

    transition:.38s ease;

    box-shadow:
        0 10px 25px rgba(15,23,42,.10);

    flex-shrink:0;
}

/* =====================================================
   ICONO
===================================================== */

.social-btn i{

    min-width:50px;

    text-align:center;

    font-size:20px;

    z-index:2;

    transition:.35s ease;
}

/* =====================================================
   TEXTO
===================================================== */

.social-btn span{

    position:absolute;

    right:22px;

    opacity:0;

    white-space:nowrap;

    font-size:14px;

    font-weight:600;

    transform:translateX(20px);

    transition:.35s ease;

    z-index:2;
}

/* =====================================================
   HOVER
===================================================== */

.social-btn:hover{

    width:155px;

    justify-content:flex-start;

    transform:translateY(-5px);

    box-shadow:
        0 18px 35px rgba(15,23,42,.16);
}

.social-btn:hover span{

    opacity:1;

    transform:translateX(0);
}

/* =====================================================
   COLORES
===================================================== */

.facebook:hover{

    background:#1877f2;

    color:#fff;
}

.youtube:hover{

    background:#ff0000;

    color:#fff;
}

.instagram:hover{

    background:
        linear-gradient(
            45deg,
            #f58529,
            #dd2a7b,
            #8134af,
            #515bd4
        );

    color:#fff;
}

.tiktok:hover{

    background:#000;

    color:#fff;
}

.whatsapp:hover{

    background:#25d366;

    color:#fff;
}

/* =====================================================
   BOTON MOVIL
===================================================== */

.mobile-menu-btn{

    display:none;

    border:1px solid var(--border);

    width:46px;
    height:46px;

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:.25s ease;
}

.mobile-menu-btn:hover{

    background:#f8fafc;
}

/* =====================================================
   MONITORES GRANDES
===================================================== */

@media (min-width:1600px){

    .topbar{

        font-size:15px;
    }

    .topbar .container{

        padding:10px 0;
    }

    .header-inner{

        gap:40px;

        padding:28px 0;
    }

    .logo img{

        height:110px;
    }

    .search-form input{

        height:60px;

        font-size:16px;
    }

    .btn-search{

        height:60px;

        font-size:16px;

        padding:0 28px;
    }

    .search-suggest{

        font-size:14px;
    }

    .social-btn{

        width:56px;
        height:56px;
    }

    .social-btn i{

        min-width:56px;

        font-size:22px;
    }

    .social-btn:hover{

        width:175px;
    }
}

/* =====================================================
   LAPTOPS
===================================================== */

@media (max-width:1200px){

    .header-inner{

        gap:18px;
    }

    .logo img{

        height:76px;
    }

    .header-actions{

        margin-left:0;
    }

    .social-btn:hover{

        width:145px;
    }
}

/* =====================================================
   TABLET HORIZONTAL
===================================================== */

@media (max-width:1100px){

    .header-inner{

        flex-wrap:wrap;
    }

    .search-wrap{

        order:3;

        width:100%;
    }

    .header-actions{

        width:100%;

        align-items:center;
    }

    .social-row{

        justify-content:center;
    }
}

/* =====================================================
   TABLET VERTICAL
===================================================== */

@media (max-width:768px){

    .header{

        padding-bottom:6px;
    }

    .topbar{

        font-size:11px;
    }

    .topbar .container{

        justify-content:center;

        text-align:center;

        gap:6px;

        padding:6px 0;
    }

    .header-inner{

        justify-content:center;

        gap:10px;

        padding:10px 0;
    }

    .logo{

        margin:auto;
    }

    .logo img{

        height:80px;
    }

    .search-wrap{

        width:100%;
    }

    .search-form{

        gap:8px;
    }

    .search-form input{

        height:44px;

        font-size:13px;

        border-radius:14px;
    }

    .btn-search{

        height:44px;

        font-size:13px;

        border-radius:14px;

        padding:0 16px;
    }

    .header-actions{

        width:100%;

        justify-content:center;

        align-items:center;

        gap:10px;
    }

    .social-row{

        justify-content:center;

        flex-wrap:wrap;

        gap:8px;
    }

    .social-btn{

        width:38px;
        height:38px;
    }

    .social-btn i{

        min-width:38px;

        font-size:15px;
    }

    .social-btn span{

        display:none;
    }

    .social-btn:hover{

        width:38px;

        transform:none;
    }

    .search-suggest{

        display:none;
    }

    .mobile-menu-btn{

        display:flex;

        align-items:center;

        justify-content:center;

        width:40px;
        height:40px;
    }
}

/* =====================================================
   TELEFONOS GRANDES
===================================================== */

@media (max-width:560px){

    .header-inner{

        gap:16px;
    }

    .logo img{

        height:80px;
    }

    .search-wrap{

        width:100%;
    }

  .search-form{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:10px;
}

/* INPUT */

.search-form input{

    width:100%;

    height:48px;

    min-height:48px;

    padding:0 16px;

    font-size:14px;

    line-height:48px;

    border-radius:14px;

    box-sizing:border-box;
}

/* BOTON */

.btn-search{

    width:100%;

    height:42px;

    min-height:42px;

    padding:0 14px;

    border-radius:14px;

    font-size:13px;

    font-weight:600;
}

    .search-suggest{

        font-size:12px;
    }

    .social-row{

        gap:10px;
    }

    .social-btn{

        width:42px;
        height:42px;
    }

    .social-btn i{

        min-width:42px;

        font-size:16px;
    }
}

/* =====================================================
   TELEFONOS PEQUEÑOS
===================================================== */

@media (max-width:420px){

    .topbar{

        font-size:11px;
    }

    .logo img{

        height:52px;
    }

    .search-form{

        gap:10px;
    }

  .search-form input{

    height:46px;

    min-height:46px;

    padding:0 14px;

    font-size:13px;

    line-height:46px;

    border-radius:13px;
}

.btn-search{

    height:40px;

    min-height:40px;

    padding:0 12px;

    font-size:12px;

    border-radius:12px;
}

    .search-suggest{

        font-size:11px;
    }

    .social-btn{

        width:40px;
        height:40px;
    }

    .social-btn i{

        min-width:40px;

        font-size:15px;
    }

    .mobile-menu-btn{

        width:42px;
        height:42px;
    }
}