/*=========================================
DETALLE PRODUCTO
=========================================*/

.detalle-producto {

    margin-top: 140px;
    margin-bottom: 100px;

}

.detalle-contenedor {

    width: 80%;
    max-width: 1400px;
    margin: auto;


}

.detalle-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: start;


}

.detalle-galeria {
    object-fit: cover;
    height: auto;
}

.detalle-galeria img {

    width: 100%;

    display: block;

    object-fit: cover;




}

.categoria-producto {

    color: #dc0014;

    font-size: .9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-family: Arial, Helvetica, sans-serif;

    font-weight: 500;

}



.detalle-info h1 {

    font-size: 2.2rem;

    margin: 15px 0;

    font-family: Arial, Helvetica, sans-serif;

}

.detalle-info p {

    font-size: 1rem;

    color: #444;

    line-height: 1.4;
    font-family: Arial, Helvetica, sans-serif;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;


}

.linea {

    border: none;
    height: 1px;
    background-color: #ccc;
    margin: 20px 0;
    width: 100%;
}



.detalle-info h2 {

    font-size: 2.2rem;

    margin: 10px 0;

    font-family: Arial, Helvetica, sans-serif;

}

.cantidad-producto {

    display: flex;

    align-items: center;

    justify-content: left;

    margin: 30px 0;



}

.cantidad-producto label {

    font-size: 1rem;

    font-weight: 500;

    font-family: Arial, Helvetica, sans-serif;
    color: #444;

}





.selector-cantidad {

    display: flex;

    align-items: center;

}

.selector-cantidad button {

    width: 44px;

    height: 44px;

    border: 1px solid #ddd;

    background: #fff;

    cursor: pointer;

    font-size: 22px;

}

.selector-cantidad input {

        width: 70px;

    height: 42px;

    text-align: center;

    border: 1px solid #ddd;

    border-left: none;

    border-right: none;

    outline: none;

    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;


}

/* Ocultar flechas del input number */

.selector-cantidad input::-webkit-outer-spin-button,
.selector-cantidad input::-webkit-inner-spin-button{

    -webkit-appearance: none;

    margin: 0;

}

.btn-carrito {

    display: block;

    text-align: center;

    background: #dc0014;

    color: #fff;

    text-decoration: none;

    padding: 20px;

    font-size: 1rem;

    font-weight: bold;

    font-family: Arial, Helvetica, sans-serif;



}

.btn-carrito:hover {
    background-color: #aa0512;
}

.btn-cotizar {

    display: block;

    text-align: center;

    background: transparent;

    color: #000;

    border: 1px solid black;

    text-decoration: none;

    padding: 20px;

    margin-top: 15px;

    font-size: 1rem;

    font-weight: 600;

    transition: .3s;

    font-family: Arial, Helvetica, sans-serif;

}

.btn-cotizar:hover {

    background: #000;
    color: #fff;

}

/*=========================================
GALERÍA
=========================================*/

.detalle-galeria img {

    width: 100%;

    display: block;

}

#imagen-principal {

    border: 1px solid #ececec;



}

.miniaturas {

    display: flex;

    gap: 15px;

    margin-top: 20px;

}

.miniatura {

    width: 120px !important;

    height: 90px;

    object-fit: cover;

    cursor: pointer;

    border: 2px solid #ddd;

    transition: .3s;

}

.miniatura:hover {

    border-color: #dc0014;

}

.miniatura.activa {

    border-color: #dc0014;

}


/*=========================================
ESPECIFICACIONES TÉCNICAS
=========================================*/

.especificaciones-producto {

    width: 100%;
    margin-top: 90px;
    margin-bottom: 90px;
    font-family: Arial, Helvetica, sans-serif;


}

.especificaciones-producto h2 {

    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 30px;
    font-family: Arial, Helvetica, sans-serif;


}

.especificaciones-grid {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}

.columna {

    width: 100%;


}

.fila {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 0;

    border-bottom: 1px solid #e6e6e6;

}

.fila span {

    font-size: 1.2rem;

    color: #22395d;

    font-weight: 400;

    line-height: 1;

    font-family: Arial, Helvetica, sans-serif;

}

.fila strong {

    font-size: 1.2rem;

    color: #000;

    font-weight: 500;

    text-align: right;

    font-family: Arial, Helvetica, sans-serif;

}

.tabla-especificaciones{

    width:100%;

    border-collapse:collapse;

    margin-top:40px;

}

.tabla-especificaciones thead tr{

    background:#dc0014;

}

.tabla-especificaciones thead th{

    color:#fff;

    padding:15px;

    text-align:center;

}

.tabla-especificaciones tbody th{

    

    padding:15px;

    text-align:center;

    font-weight:400;

}

.tabla-especificaciones td{

    padding:15px;

    text-align:center;

}

.tabla-especificaciones th,
.tabla-especificaciones td{

    border:1px solid #ddd;

}



/*=========================================
CARACTERÍSTICAS PRINCIPALES
=========================================*/

.caracteristicas-producto {

    width: 90%;
    
    display: flex;

    margin: 0px auto;
    margin-bottom: 90px;
   

}

.caracteristicas-producto .detalle-contenedor {

    width: 90%;
    max-width: 1400px;
    margin: auto;

}

.caracteristicas-producto h2 {

    font-size: 2rem;
    margin-bottom: 40px;
    font-family: Arial, Helvetica, sans-serif;

}

.lista-caracteristicas {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 50px;

}

.item-caracteristica {

    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 1rem;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;

}

.item-caracteristica .icono {

    background-color: #dc0014;
    display: inline-block;
  width: 8px;
  height: 8px;
  align-items: center;
  border-radius: 50%;        
}

/*=========================================
PRODUCTOS RELACIONADOS
=========================================*/

.productos-relacionados{

     width: 90%;
    
    display: flex;

    margin: 0px auto;
    margin-bottom: 90px;

}

.productos-relacionados .detalle-contenedor{

    width:90%;
    max-width:1400px;
    margin:auto;
    

}

.productos-relacionados h2{

    font-size:2.5rem;
    margin-bottom:40px;
    font-family:Arial, Helvetica, sans-serif;
    

}

.grid-relacionados{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.card-relacionado{

    background:#fff;

    border:1px solid #eee;

    transition:.3s;
    

}

.card-relacionado:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.card-relacionado img{

    width:100%;
    height: auto;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

.contenido-relacionado{

    padding:20px;

}

.categoria{

    color:#dc0014;
    font-size:.8rem;
    text-transform:uppercase;
    font-weight:500;
    font-family: Arial, Helvetica, sans-serif;

}

.contenido-relacionado h3{

    margin:10px 0;
    font-size:20px;
    font-family: Arial, Helvetica, sans-serif;

}

.contenido-relacionado h3 a{

    color:#111;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    

}



.btn-ver-producto{

    display:block;

    text-align:center;

    background:#dc0014;

    color:#fff;

    text-decoration:none;

    padding:15px;

    transition:.3s;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 1rem;

}

.btn-ver-producto:hover{

    background:#b60011;

}

/*=========================================
ACCIONES EXTRA
=========================================*/

.acciones-extra{

    margin-top:45px;

    padding-top:30px;

    border-top:1px solid #e6e6e6;

    font-family: Arial, Helvetica, sans-serif;

}

.accion-extra{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    margin-bottom:20px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:1rem;

}

.material-symbols{

   

    font-size:22px;

}

.accion-extra:first-child{

    color:#dc0014;

    font-weight:600;

}

.accion-extra:last-child{

    color:#22395d;

}

.accion-extra:first-child:hover{
    color: #970713;
}

.accion-extra:last-child:hover{
    color: #000;
}

@media (max-width: 480px) {

    .detalle-producto{

        margin-top:90px;
        margin-bottom:50px;

    }

    .detalle-contenedor{

        width:95%;

    }

    .detalle-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    

    .miniaturas{

        justify-content:center;

        gap:10px;

        flex-wrap:wrap;

    }

    .miniatura{

        width:70px !important;

        height:70px;

    }

    .detalle-info h1{

        font-size:2rem;

        line-height:1.2;

    }

    .detalle-info p{

        font-size:1rem;

        line-height:1.7;

    }

    .detalle-info h2{

        font-size:2rem;

        margin:25px 0;

    }

    .cantidad-producto{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .selector-cantidad{

        width:100%;

        justify-content:flex-start;

    }

    .selector-cantidad button{

        width:45px;

        height:45px;

    }

    .selector-cantidad input{

        width:70px;

        height:45px;

    }

    .acciones-producto{

        display:flex;

        flex-direction:column;

        gap:15px;

    }

    

    .acciones-extra{

        margin-top:25px;

    }

    .especificaciones-grid{

        grid-template-columns:1fr;

        gap:0;

    }

    .fila{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .fila strong{

        text-align:left;

    }

    .lista-caracteristicas{

        grid-template-columns:1fr;

    }

    .grid-relacionados{

        grid-template-columns:1fr;

    }


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

.tabla-responsive{

    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;

}

.tabla-responsive table{

    min-width:900px;

}

.tabla-especificaciones th,
.tabla-especificaciones td{

    white-space:nowrap;

}

 }