/* ***********------- INICIO DE ESTILOS PARA EL MENU ---------*********/
/* ***** Desde aca son los estilos para el menu de pantalla grande ****/
/* ***** Y tambien para el menu hamburguesa para celulares         ****/

a {
    text-decoration: none;
}

header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#menu-icon {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #333;
}

#logo {
    width: 350px; 
    height: auto;
    padding: 40px 40px 0 40px;
}

#contact-info {
    text-align: right;
    margin-top: 0;
    padding: 0px 20px 15px 0;
}

/* Ocultar ambas opciones del menú defecto */
#menu, #hamburguesa {
    display: none;
}

/* Estilo básico para el menú hamburguesa abierto */
#hamburguesa.mostrar {
    display: block;
    background-color: #000;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: large;
}

/* Mostrar el menú de navegador en pantallas grandes */
@media (min-width: 768px) {
    #menu {
    display:flex;
    width: 100%;
    }
    /* Estilo básico para el menú horizontal abierto */
    nav {
    background-color: #000;
    display: flex;
    align-items:start;
    flex-wrap: wrap;
    text-transform: uppercase;
    font-weight: bold;
    font-size: large;
    margin-bottom: 1px;
    padding-left: 30px;            
    }

    nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
    border-right: 1px solid #666;        
    }

    nav a:hover {
    background-color: #fbcb39;
    text-decoration: none;
    color: #fff;            
    }
    
}

/* Mostrar el menú hamburguesa en pantallas pequeñas */
@media (max-width: 767px) {
    #menu-icon {
            display: block;
    }

    #contact-info {
            padding: 5px 0px;
            text-align:center;
    }

    nav #hamburguesa{
            display: flex;
            align-items:start;
            flex-wrap: wrap;
            margin-bottom: 1px;
            padding-left: 30px;            
    }

    #hamburguesa a {
            color: white;
            padding: 10px 20px;
            transition: background-color 0.3s ease;
            border: 0;
            line-height: 40px;
    }

    #hamburguesa .submenu-content{
            padding-left: 30px;
    }
    #hamburguesa .submenu-content a{
            line-height: 40px;
            transition: background-color 0.3s ease;
    }
    #hamburguesa a:hover {
            background-color: #fbcb39;
            text-decoration: none;
            color: #fff;            
    }
}

.elevamos{
    background-color: #f7f7f7;
    padding: 10px 0;
}

/* ***********------- CIERRE DE ESTILOS PARA EL MENU ---------*********/

/* Nuevo bloque de Accesorios Tecnobenne para la imagen y el texto a la derecha */
.contenedor {
    display: flex;
    gap: 10px;
}

.izquierda {
    width: 35%;
}

.derecha {
    width: 65%;
}

.izquierda img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.derecha p {
    margin-bottom: 15px;
    text-align: justify;
}


/* Bloque de 2 DIVS con la Ficha y Folleto */
.parent {
/*    border: 1px solid black;*/
    margin: 1rem;
    padding: 2rem 2rem;
    text-align: center;
}
.child {
    display: inline-block;
/*    border: 1px solid red;*/
    padding: 1rem 1rem;
    vertical-align: bottom;
}

/* Tabla de especificaciones */

.ficha td{
    border: #666 1px solid;
    text-align: start;
    padding: 1px 10px;
}
.ficha th {
    background-color: #212529;
    color: #fff;
    font-size: medium;
    font-weight: bold;
    padding: 3px 0;
  }

/* Tabs de las E */
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0;font-weight:bolder}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}

.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}

/* Galeria de fotos */
.w3-display-container{position:relative}
.w3-display-container:hover span.w3-display-hover{display:inline-block}
.w3-display-container:hover .w3-display-hover{display:block}
.w3-display-topright{position:absolute;right:0;top:0}

.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-button{white-space:normal}
.w3-button{width:100%}
.w3-button:hover{color:#000!important;background-color:#ccc!important}

.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}

.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}

.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}

.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}

.w3-container,.w3-panel{padding:0.01em 16px}

.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}

.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}

.s3{width:24.99999%}

.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}

/* Para hacer responsivos los videos incrustados de YouTube */

iframe[src*="youtube.com"] { max-width:100%; height:auto; aspect-ratio:16/9; }

