:root{
    --azul_def: #3d455e;
    --gris_700: #4e5566;
}
.producto{
    .titulo_superior{
        background-color: var(--azul_def);
        color: #fff;
        float:left;
        width:100%;
        text-transform:uppercase;
        height: 80px;
        display: grid;
        align-items: center;
        align-content: center;
        h1{
            font-size:20px;
            font-weight:500;
        }
    }
    .fila1{
        padding:60px 0;
        float:left;
        width:100%;
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap:80px;
        .destacada{
            max-width: 100%;
            margin:12px 0 12px;
        }
        .imagenes{
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap:6px;
            img{
                width:100%;
            }
        }
        h2.nombre{
            font-size:60px;
            margin:0;
            color:var(--azul_def);
        }
        h2.subtitulo{
            font-size:28px;
            margin:0;
            color:var(--azul_def);
            width:100%;
            border-bottom:2px solid #bbb;
            padding-bottom:12px;
            margin-bottom: 24px;
        }
        .descripcion{
            font-size:20px;
            color: var(--gris_700);
            line-height:31px;
            max-width:100%;
            > div{
                /* max-width:50%; */
            }
        }
        .opciones{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
            float:left;
            width:100%;
            margin:24px 0 0;
            align-items: end;
            .periodo{
                cursor:pointer;
                font-size:24px;
                font-weight:500;
                line-height:31px;
                border-radius:6px;
                border:3px solid #D5D5D5;
                padding: 12px 24px;;
                color:#3F4148;
                width:260px;
                margin-bottom:30px;
            }
            .total{
                font-size: 37px;
                font-weight: 700;
                color: var(--azul_def);
            }
            .pvp{
                margin-top:12px;
                /*color: #c9c9c9;*/
                color: var(--azul_def);
                font-size: 30px;
                display: flex;
                flex-wrap: wrap;
                gap: 0 12px;
                flex-direction: column-reverse;
                .tachado{
                    color: #afafaf;
                    font-size: 24px;
                    text-decoration: line-through;
                    display: block;
                }
            }
            button{
                background-color: #ad8f1b;
                font-size:19px;
                color:#fff;
                text-transform:uppercase;
                border:0;
                float:right;
                border-radius:12px;
                padding: 18px 0;
                cursor:pointer;
                font-weight: 700;
                min-width: 260px;
                &:hover{
                    background-color: #c9a44b;
                }
            }
        }
        .no_disponible{
            font-size: 24px;
            font-weight: 800;
            color: darkred;
            width:100%;
            text-align:center;
            margin:40px auto;
            &.futuro{
                color: darkgoldenrod;
            }
        }
    }
    .fila2{
        float:left;
        width:100%;
        h3{
            width:calc((100% - 80px) / 2);
            text-transform: uppercase;
            font-size:28px;
            color:var(--azul_def);
            margin:0 0 24px;
            padding-bottom:12px;
            border-bottom:2px solid #bbb;
            font-weight: 700;
            float: left;
        }
        .que_incluye{
            float:left;
            width:100%;
            font-size:20px;
            color: var(--gris_700);
            line-height:31px;
            margin:0 0 24px;
        }
    }
    .caracteristicas{
        float:left;
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap: 24px 72px;
        margin-bottom:100px;
        .carac{
            font-family:'Inter';
            color: var(--gris_700);
            display:grid;
            grid-template-columns:120px 1fr;
            gap:6px;
            align-items: center;
            img{
                width: 96px;
                height: 96px;
                padding: 16px;
                box-sizing: border-box;
                object-fit: contain;
                background: #fff;
                border-radius: 30%;
                box-shadow: inset 0 5px 7px -4px rgba(130, 139, 156, 0.85), 0 8px 18px rgba(27, 45, 86, 0.12), inset 0 0 0 4px #f3f5f9;
            }
            div.texto{
                height:100% !important;
            }
            h3.titulo{
                font-family:'Inter';
                font-weight:800;
                margin:0 0 10px;
                font-size:19px;
                color: var(--gris_700);
            }
            ul{
                margin:0;
                padding-left: 24px;
            }
            .contenido{
                font-size:17px;
                color: var(--gris_700);
                line-height:31px;
            }
        }
    }
}

@media (max-width: 900px){
    .producto{
        img{
            max-width:100%;
        }
        .fila1{
            padding:12px 0;
            grid-template-columns:1fr;
            gap:36px;
            margin-bottom:42px;
            .destacada{
                order:2;
            }
            .imagenes{
                order:3;
                grid-template-columns: repeat(3, 1fr);
            }
            h2.nombre{
                font-size:40px;
            }
            h2.subtitulo{
                font-size:22px;
            }
            .opciones{
                justify-items: center;
                grid-template-columns:1fr;
                .periodo{
                    width:100%;
                }
                .total{
                    font-size: 30px;
                    text-align: center;
                }
                .pvp{
                    text-align: center;
                    font-size: 20px;
                    margin-top:0;
                }
                button{
                    margin:0 auto;
                }
            }
        }
        .fila2{
            h3{
                width:100%;
                font-size:22px;
            }
            .que_incluye{
                font-size:18px;
                line-height:28px;
            }
        }
        .caracteristicas{
            grid-template-columns:1fr;
            margin-bottom:60px;
            .carac{
                grid-template-columns:1fr;
                grid-template-rows: auto 1fr;
                div:has(img){
                    text-align:center;
                }
            }
        }
    }
}