.gallery-section {
    box-sizing:                 border-box;
    padding:                    2rem 0;
}

.container {
    box-sizing:                 border-box;
    margin:                     0 auto;
    max-width:                  1280px;
    padding:                    0 1rem;
    width:                      100%;
}

.breadcrumb {
    color:                      #333;
    font-family:                'Roboto', sans-serif;
    font-size:                  1rem;
    margin-bottom:              1rem;
}

.breadcrumb a {
    color:                      #1a73e8;
    text-decoration:            none;
}

.breadcrumb a:hover {
    text-decoration:            underline;
}

.breadcrumb i {
    color:                      #333;
    font-size:                  1rem;
    padding:                    0 0.5rem;
    vertical-align:             middle;
}

.producto-contenedor {
    box-sizing:                 border-box;
    display:                    flex;
    flex-direction:             column;
    gap:                        2rem;
}

.galeria-lado-izquierdo {
    box-sizing:                 border-box;
    flex:                       0 0 95%;
    max-width:                  95%;
}

.info-producto-lado-derecho {
    box-sizing:                 border-box;
    display:                    flex;
    flex:                       0 0 95%;
    flex-direction:             column;
    gap:                        1rem;
    max-width:                  100%;
}

.product-title {
    color:                      #333;
    font-family:                'Roboto', sans-serif;
    font-size:                  1.2rem;
    font-weight:                600;
    margin:                     0;
}

.product-description {
    color:                      #666;
    font-family:                'Roboto', sans-serif;
    font-size:                  0.9rem;
    margin:                     0;
}

.precio {
    background:                 black;
    color:                      white;
    display:                    inline-block;
    font-family:                'Roboto', sans-serif;
    font-size:                  1em;
    font-weight:                400;
    line-height:                1.5em;
    margin:                     0 auto;
    padding:                    .25em .5em;
    text-align:                 center;
    width:                      100%;
}

.meses {
    background:                 yellow;
    color:                      black;
    display:                    inline-block;
    font-family:                'Roboto', sans-serif;
    font-size:                  1em;
    font-weight:                400;
    line-height:                1.5em;
    margin:                     0 auto;
    padding:                    .25em .5em;
    text-align:                 center;
    width:                      100%;
}

.oferta {
    background:                 red;
    color:                      white;
    display:                    inline-block;
    font-family:                'Roboto', sans-serif;
    font-size:                  1em;
    font-weight:                400;
    line-height:                1.5em;
    margin:                     0 auto;
    padding:                    .25em .5em;
    text-align:                 center;
    width:                      100%;
}

.oferta span {
    font-size:                  1.5em;
}

.precio-descuento {
    display:                    inline-block;
    margin-left:                0.5em;
    vertical-align:             middle;
}

.precio-descuento svg text {
    font-size:                  1em;
}

.colores-contenedor {
    align-items:                center;
    display:                    flex;
    flex-wrap:                  wrap;
    gap:                        0.5rem;
}

.colores-contenedor h3 {
    color:                      #333;
    font-family:                'Roboto', sans-serif;
    font-size:                  1rem;
    margin:                     0 1rem 0 0;
}

.color-circulo {
    border:                     1px solid #ccc;
    border-radius:              50%;
    display:                    inline-block;
    height:                     40px;
    width:                      40px;
}

.btn-whatsapp {
    align-items:                center;
    background:                 #25d366;
    border-radius:              4px;
    color:                      #fff;
    display:                    flex;
    font-family:                'Roboto', sans-serif;
    font-size:                  1rem;
    gap:                        0.5rem;
    justify-content:            center;
    max-width:                  300px;
    padding:                    0.5rem;
    text-align:                 center;
    text-decoration:            none;
    transition:                 background 0.3s ease;
    width:                      100%;
}

.btn-whatsapp:hover {
    background:                 #1da851;
}

.atributos-precios, .atributos-informativos {
    display:                    flex;
    flex-direction:             column;
    gap:                        0.5rem;
}

.atributos-precios ul, .atributos-informativos ul {
    list-style:                 none;
    margin:                     0;
    padding:                    0;
}

.atributos-precios li, .atributos-informativos li {
    color:                      #333;
    font-family:                'Roboto', sans-serif;
    font-size:                  0.9rem;
}

.atributos-tabla {
    background:                 var(--fondo_header);
    border-collapse:            collapse;
    width:                      100%;
}

.atributos-tabla td {
    border-bottom:              1px solid #e0e0e0;
    color:                      var(--letras_header);
    font-family:                'Roboto', sans-serif;
    font-size:                  0.9rem;
    padding:                    0.5rem;
}

.atributos-tabla td:first-child {
    text-align:                 right;
}

.atributos-tabla td:last-child {
    text-align:                 left;
}

.galeria-contenedor {
    box-sizing:                 border-box;
    margin:                     0;
    max-width:                  100%;
    padding:                    20px 0;
}

.visualizacion-principal {
    align-items:                center;
    border:                     2px solid #333;
    border-radius:              5px;
    box-sizing:                 border-box;
    display:                    flex;
    height:                     200px;
    justify-content:            center;
    overflow:                   hidden;
    position:                   relative;
    width:                      100%;
}

.visualizacion-principal img, .visualizacion-principal video {
    cursor:                     pointer;
    display:                    none;
    height:                     auto;
    max-height:                 100%;
    max-width:                  100%;
    object-fit:                 contain;
    width:                      auto;
}

.visualizacion-principal .activo {
    display:                    block;
}

.flecha-navegacion {
    background:                 rgba(0, 0, 0, 0.5);
    color:                      white;
    cursor:                     pointer;
    font-size:                  24px;
    padding:                    10px;
    position:                   absolute;
    top:                        50%;
    transform:                  translateY(-50%);
    user-select:                none;
    z-index:                    10;
}

.flecha-anterior {
    left:                       10px;
}

.flecha-siguiente {
    right:                      10px;
}

.miniaturas {
    align-items:                center;
    box-sizing:                 border-box;
    display:                    none;
    margin:                     0 auto;
    margin-top:                 10px;
    overflow:                   hidden;
    position:                   relative;
    width:                      100%;
}

.miniaturas-contenedor {
    box-sizing:                 border-box;
    display:                    flex;
    justify-content:            flex-start;
    transition:                 transform 0.3s ease;
    width:                      100%;
}

.miniaturas img, .miniaturas .miniatura-video {
    border:                     2px solid transparent;
    box-sizing:                 border-box;
    cursor:                     pointer;
    flex-shrink:                0;
    height:                     60px;
    margin:                     0 5px;
    object-fit:                 cover;
    width:                      60px;
}

.miniaturas .miniatura-video {
    align-items:                center;
    box-sizing:                 border-box;
    color:                      #333;
    display:                    flex;
    font-size:                  18px;
    height:                     60px;
    justify-content:            center;
    width:                      60px;
}

.miniaturas .miniatura-video i {
    color:                      #333;
    font-size:                  18px;
}

.miniaturas .activo {
    border:                     2px solid #1a73e8;
}

.miniaturas-flecha {
    background:                 rgba(0, 0, 0, 0.5);
    color:                      white;
    cursor:                     pointer;
    font-size:                  20px;
    padding:                    5px;
    position:                   absolute;
    top:                        50%;
    transform:                  translateY(-50%);
    user-select:                none;
    z-index:                    10;
}

.miniaturas-anterior {
    left:                       0;
}

.miniaturas-siguiente {
    right:                      0;
}

.modal {
    align-items:                center;
    background:                 rgba(0, 0, 0, 0.8);
    display:                    none;
    height:                     100%;
    justify-content:            center;
    left:                       0;
    position:                   fixed;
    top:                        0;
    width:                      100%;
    z-index:                    10001000;
}

.modal img, .modal video {
    display:                    none;
    max-height:                 90%;
    max-width:                  90%;
    object-fit:                 contain;
}

.modal .activo {
    display:                    block;
}

.modal-cerrar {
    color:                      white;
    cursor:                     pointer;
    font-size:                  30px;
    position:                   absolute;
    right:                      20px;
    top:                        20px;
    user-select:                none;
}

/* RESPONSIVE DESIGN */
@media only screen and (min-width: 0px) {
    .btn-whatsapp {
        margin:                     0 auto;
    }
    .container {
        max-width:                  1280px;
        width:                      95%;
    }
}

@media only screen and (min-width: 992px) {
    .btn-whatsapp {
        margin:                     auto 0;
        max-width:                  100%;
    }
    .galeria-lado-izquierdo {
        flex:                       0 0 45%;
        max-width:                  45%;
    }
    .info-producto-lado-derecho {
        flex:                       0 0 55%;
        max-width:                  55%;
    }
    .miniaturas {
        display:                    flex;
    }
    .miniaturas img, .miniaturas .miniatura-video {
        height:                     80px;
        width:                      80px;
    }
    .miniaturas .miniatura-video i {
        font-size:                  24px;
    }
    .producto-contenedor {
        flex-direction:             row;
    }
    .visualizacion-principal {
        height:                     300px;
    }
}

@media only screen and (min-width: 1280px) {
    .colores-contenedor h3 {
        font-size:                  1.2rem;
    }
    .product-description {
        font-size:                  1rem;
    }
    .product-title {
        font-size:                  1.5rem;
    }
    .atributos-precios li, .atributos-informativos li, .atributos-tabla td {
        font-size:                  1rem;
    }
    .visualizacion-principal {
        height:                     400px;
    }
}

@media only screen and (min-width: 1600px) {
    .galeria-lado-izquierdo {
        flex:                       0 0 45%;
        max-width:                  45%;
    }
    .info-producto-lado-derecho {
        flex:                       0 0 55%;
        max-width:                  55%;
    }
}