/* =========================================================
   AJUSTES EXCLUSIVOS PARA VISTA MÓVIL (SITIO EN ESPAÑOL)
   No modifica la vista de escritorio.
   ========================================================= */

@media screen and (max-width: 767px) {

    html,
    body {
        overflow-x: hidden;
    }

    /* =====================================================
       MENÚ / HEADER
       ===================================================== */

    /* Compensa los márgenes negativos de Bootstrap y evita
       que el contenido del menú se salga del ancho del móvil. */
    .gtco-nav-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .menu-principal {
        margin-left: -15px;
        margin-right: -15px;
    }

    .fila-superior {
        width: 100% !important;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .menu_sup {
        width: 100% !important;
        min-width: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Deja espacio a la derecha para el botón hamburguesa y
       permite que teléfonos e idiomas pasen a otra línea. */
    .menu_sup ul {
        width: 100% !important;
        padding: 0 52px 0 8px !important;
        box-sizing: border-box;
    }

    .menu_sup ul li {
        margin-right: 6px;
    }

    .menu_sup ul li a {
        font-size: 12px;
        padding: 5px 4px;
    }

    .menu_sup ul li a i {
        font-size: 12px;
    }

    #gtco-logo {
        margin-left: 10px;
    }

    #gtco-logo img {
        max-width: 110px;
        height: auto;
    }

    .gtco-nav {
        padding: 10px 0;
    }

    /* Menú lateral que abre con el botón hamburguesa. */
    #gtco-offcanvas {
        width: 100%;
        max-width: 445px;
        padding-left: 25px;
        padding-right: 25px;
    }

    /* =====================================================
       TÍTULOS PRINCIPALES
       ===================================================== */

    #gtco-header .display-tc h1,
    #gtco-counter .display-tc h1,
    .gtco-cover .display-tc h1 {
        font-size: 30px;
        line-height: 1.25;
        padding-left: 8px;
        padding-right: 8px;
    }

    #gtco-header .display-tc h2,
    #gtco-counter .display-tc h2,
    .gtco-cover .display-tc h2 {
        font-size: 18px;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Permite que palabras largas no rompan el ancho. */
    #gtco-header h1,
    #gtco-header h2,
    .gtco-cover h1,
    .gtco-cover h2,
    h1,
    h2,
    h3,
    h4,
    p {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* =====================================================
       TARJETAS DE 3 COLUMNAS (INICIO Y CMG)
       ===================================================== */

    #gtco-features-3 .gtco-flex {
        gap: 0;
    }

    #gtco-features-3 .feature {
        width: 100% !important;
        margin-bottom: 25px;
    }

    /* =====================================================
       PANEL DE REDES SOCIALES
       ===================================================== */

    .sticky-container {
        top: auto;
        bottom: 85px;
        right: 20px;
        width: 44px;
    }

    /* Elimina el padding-left por defecto de la lista para que
       los iconos queden completos dentro de la pantalla. */
    .sticky {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .sticky li {
        height: 44px;
    }

    .sticky li img {
        width: 36px;
        height: 36px;
        margin: 4px;
    }

    .sticky li p {
        padding-top: 0;
    }

    /* =====================================================
       PESTAÑAS DE TECNOLOGÍA
       ===================================================== */

    .tab-wrap .parrent.pull-left,
    .tab-wrap .nav-tabs,
    .tab-wrap .nav-tabs > li,
    .tab-wrap .nav-tabs > li > a {
        width: 100% !important;
        float: none !important;
    }

    .tab-wrap .nav-tabs {
        border-right: 0;
    }

    .tab-wrap .nav-tabs > li > a {
        font-size: 16px;
        padding: 10px 12px;
    }

    .tab-wrap .nav-tabs > li.active > a:after {
        display: none;
    }

    /* =====================================================
       GALERÍAS
       ===================================================== */

    /* Esta página no tiene hero, por lo que el menú fijo tapaba
       el título. Se separa el contenido para dejarlo visible. */
    .page-galerias #gtco-products {
        padding-top: 160px;
    }

    /* =====================================================
       SLIDERS
       ===================================================== */

    #jssor_1,
    .jssor,
    .owl-carousel,
    .flexslider {
        max-width: 100%;
        overflow: hidden;
    }
}