/* ==========================================
   PESTAÑAS: PRODUCTOS
   ========================================== */
.custom-product-tabs {
    border-top: 1px solid var(--blanco-gris);
    color: var(--gris);
    padding: 20px 0 10px;
    height: auto;
    overflow: visible;
    margin-top: 10px;
}

.custom-product-tabs .tab-nav {
    align-items: flex-start;
    display: flex;
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.custom-product-tabs .tab-link {
    border-bottom: 1px solid var(--celeste);
    border-radius: 10px 10px 0 0;
    color: var(--gris);
    cursor: pointer;
    font-weight: 700;
    flex: 1;
    padding: 10px 20px;
    transition: all 0.3s;
    text-align: center;
    width: 50%;
}

.custom-product-tabs .tab-link.active {
    background-color: var(--celeste);
    color: var(--blanco);
    padding: 10px 20px;
}

.custom-product-tabs .tab-content {
    animation: fadeIn 0.4s;
    display: none;
    flex-direction: column;
    height: auto!important;
}

.custom-product-tabs .tab-content.active {
    display: flex;
    height: auto;
}

/* Tipografías */
.desc-principal-wysiwyg, .tab-content h3, .tab-content h4, .caja-info h3 {
    color: var(--gris)!important;
    font-size: var(--e-global-typography-7d368f5-font-size)!important;
    padding-bottom: 5px;
}

.custom-product-tabs h2 {
    color: var(--gris)!important;
    font-size: var( --e-global-typography-ba4bbcd-font-size )!important;
    font-weight: 500!important;
    padding-bottom: 20px;
}

.tab-content p {
    padding-bottom: 20px;
}

.tab-content p:last-child {
    padding-bottom: 0;
}

/* Cajas */
.grid-cajas-descripcion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.grid-catalogo.grid-cajas-descripcion {
    margin: 0 0 20px;
}

.caja-info {
    border-right: 1px solid var(--primario);
    padding-right: 20px;
}

.caja-info:last-child {
    border-right-width: 0;
    padding-right: 0;
}

/* Acordeón Beneficios */
.catalogo .desc-principal-wysiwyg {
    margin-bottom: 20px;
}

.beneficio-item {
    background-color: var(--blanco)!important;
    border: 1px solid var(--blanco-gris)!important;
    border-radius: 10px!important;
    margin-bottom: 10px;
}

.beneficio-header {
    align-items: center;
    background-color: transparent!important;
    border-color: transparent!important;
    color: var(--gris)!important;
    display: flex;
    font-size: var(--e-global-typography-7d368f5-font-size)!important;
    font-weight: 500!important;
    justify-content: space-between;
    padding: 15px!important;
    text-transform: none!important;
    width: 100%;
}

/* Flecha */
.icon-arrow {
    border-right: 1.5px solid var(--gris);
    border-bottom: 1.5px solid var(--gris);
    height: 10px;
    margin-right: 5px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    width: 10px;
}

.beneficio-item.is-open .icon-arrow {
    transform: rotate(-135deg);
}

/* Cuerpo del acordeón  */
.beneficio-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.beneficio-item.is-open .beneficio-body {
    max-height: 500px;
}

.beneficio-content p {
    border-top: 1px solid transparent;
    color: var(--gris);
    padding: 0;
    transition: all .4s;
}

.beneficio-item.is-open .beneficio-content p {
    border-top-color: var(--gris-claro);
    padding: 15px 0 15px;
}

.beneficio-content p {
    margin: 0;
}

/* Tabla técnico */

.tabla-tecnica-wrapper {
    border: 1px solid var(--gris-claro);
    border-radius: 10px;
    overflow: hidden;
}

table caption+thead tr:first-child td, table caption+thead tr:first-child th, table colgroup+thead tr:first-child td, table colgroup+thead tr:first-child th, table thead:first-child tr:first-child td, table thead:first-child tr:first-child th {
    border: 0!important;
}

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: transparent!important;
}

.tabla-datos-tecnicos tr:last-child td {
    border-bottom: none!important;
    border-left: none!important;
}

table.tabla-datos-tecnicos {
    margin: 0;
}

.tabla-datos-tecnicos {
    width: 100%;
    border-collapse: collapse;
}

/* Estilo para los encabezados */
.tabla-datos-tecnicos thead th {
    color: var(--gris);
    font-weight: 600;
    padding: 10px 5px;
    text-align: center;
}

/* Estilo para las celdas */
.tabla-datos-tecnicos td {
    border-top: 1px solid var(--gris-claro);
    padding: 0;
    text-align: center;
    color: var(--gris);
    vertical-align: middle;
}

/* Quitar el borde derecho de la última columna */
.tabla-datos-tecnicos td:last-child,  .tabla-datos-tecnicos th:last-child {
    border-right: none;
}

/* Estilo para la lista de textos dentro de la celda */
.lista-tecnica {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-tecnica li {
    border-bottom: 1px solid var(--gris-claro);
    padding: 10px 0;
}

.lista-tecnica li:last-child {
    border-bottom-width: 0;
}

.lista-tecnica li:nth-child(even) {
    background-color: var(--blanco-celeste);
}

/* Listado */
.texto-listado {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.texto-listado div {
    align-items: center;
    display: flex;
    gap: 5px;
}

/* ==========================================
   ANIMACIÓN
   ========================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   RESPONSIVE
   ========================================== */
/* Tablet */
@media (max-width: 950px) {
    .caja-info {
        border-right-width: 0!important;
        border-bottom: 1px solid var(--gris-claro)!important;
        padding-bottom: 10px!important;
    }
    
    .caja-info:last-child {
        border-bottom-width: 0!important;
        padding-bottom: 0!important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .grid-cajas-descripcion {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .tabla-tecnica-wrapper {
        overflow-x: auto;
    }
    
    .tabla-datos-tecnicos {
        min-width: 600px;
    }
}