/*  PRODUCTO DETALLE */
/*  BASE */
.pdp {

    box-sizing:                 border-box;
    padding:                    22px 0;

}

.pdp * {

    box-sizing:                 border-box;

}

.pdp a {

    color:                      inherit;
    text-decoration:            none;

}

.pdp a:hover {

    text-decoration:            underline;

}

/*  NAVEGACIÓN */
.pdp_breadcrumb {

    align-items:                center;
    color:                      var( --color_texto_secundario );
    display:                    flex;
    flex-wrap:                  wrap;
    font-family:                var( --fuente_secundaria );
    font-size:                  0.95rem;
    gap:                        6px;
    margin:                     0 auto 16px;
    max-width:                  1280px;
    padding:                    0 16px;

}

.pdp_breadcrumb .sep {

    opacity:                    .6;

}

.pdp_breadcrumb a {

    color:                      var( --color_texto );

}

.pdp_breadcrumb .actual {

    color:                      var( --color_texto );
    font-weight:                var( --peso_seminegrita );

}

/*  CONTENEDOR PRINCIPAL */
.pdp_grid {

    display:                    grid;
    gap:                        18px;
    margin:                     0 auto;
    max-width:                  1280px;
    padding:                    0 16px;
    width:                      100%;

}

/*  TARJETAS PRINCIPALES */
.pdp_media,
.pdp_info {

    background:                 var( --color_blanco );
    border:                     1px solid var( --color_borde );
    border-radius:              14px;
    box-shadow:                 0 10px 30px rgba( 0 , 0 , 0 , .06 );
    padding:                    14px;

}

/*  MULTIMEDIA */
/*  IMAGEN PRINCIPAL */
.media_stage {

    position:                   relative;

}

.stage_box {

    align-items:                center;
    background:                 var( --color_blanco );
    border:                     1px solid var( --color_borde );
    border-radius:              12px;
    display:                    flex;
    justify-content:            center;
    overflow:                   hidden;
    position:                   relative;
    width:                      100%;

}

/*  PROPORCIÓN DE IMAGEN */
.stage_box::before {

    content:                    "";
    display:                    block;
    padding-top:                100%;

}

.stage_box > * {

    position:                   absolute;

}

.stage_main {

    height:                     100%;
    left:                       0;
    object-fit:                 contain;
    top:                        0;
    width:                      100%;

}

.stage_fallback {

    align-items:                center;
    color:                      var( --color_texto_secundario );
    display:                    flex;
    font-family:                var( --fuente_secundaria );
    inset:                      0;
    justify-content:            center;

}

.stage_nav {

    align-items:                center;
    background:                 rgba( 0 , 0 , 0 , .35 );
    border:                     none;
    border-radius:              999px;
    color:                      var( --color_blanco );
    cursor:                     pointer;
    display:                    inline-flex;
    font-size:                  22px;
    height:                     42px;
    justify-content:            center;
    line-height:                1;
    opacity:                    .85;
    transition:                 opacity .15s ease;
    width:                      42px;
    z-index:                    2;

}

.stage_nav:hover {

    opacity:                    1;

}

.stage_prev {

    left:                       12px;
    top:                        50%;
    transform:                  translateY( -50% );

}

.stage_next {

    right:                      12px;
    top:                        50%;
    transform:                  translateY( -50% );

}

.stage_video {

    background:                 var( --color_texto );
    height:                     100%;
    left:                       0;
    object-fit:                 contain;
    top:                        0;
    width:                      100%;

}

/*  MINIATURAS */
.media_thumbs {

    display:                    grid;
    gap:                        10px;
    grid-auto-columns:          76px;
    grid-auto-flow:             column;
    margin-top:                 12px;
    overflow-x:                 auto;
    padding-bottom:             2px;
    scroll-snap-type:           x mandatory;

}

.media_thumbs::-webkit-scrollbar {

    height:                     8px;

}

.media_thumbs::-webkit-scrollbar-thumb {

    background:                 rgba( 0 , 0 , 0 , .12 );
    border-radius:              999px;

}

.thumb {

    background:                 var( --color_blanco );
    border:                     1px solid var( --color_borde );
    border-radius:              12px;
    cursor:                     pointer;
    display:                    flex;
    height:                     76px;
    overflow:                   hidden;
    padding:                    0;
    position:                   relative;
    scroll-snap-align:          start;
    transition:                 border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    width:                      76px;

}

.thumb:hover {

    box-shadow:                 0 10px 20px rgba( 0 , 0 , 0 , .08 );
    transform:                  translateY( -1px );

}

.thumb.is-active {

    border-color:               var( --color_principal );
    box-shadow:                 0 0 0 2px rgba( 0 , 0 , 0 , .06 );

}

.thumb img {

    height:                     100%;
    object-fit:                 cover;
    width:                      100%;

}

.thumb_video {

    align-items:                center;
    justify-content:            center;

}

.thumb_video .play {

    align-items:                center;
    background:                 rgba( 0 , 0 , 0 , .6 );
    border-radius:              999px;
    color:                      var( --color_blanco );
    display:                    flex;
    font-size:                  14px;
    height:                     28px;
    justify-content:            center;
    left:                       50%;
    line-height:                1;
    padding-left:               2px;
    position:                   absolute;
    top:                        50%;
    transform:                  translate( -50% , -50% );
    width:                      28px;

}

.thumb_video .txt {

    bottom:                     6px;
    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  12px;
    font-weight:                var( --peso_seminegrita );
    position:                   absolute;

}

/*  COLORES */
.media_colors {

    margin-top:                 16px;

}

.media_colors_title {

    color:                      var( --color_texto );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;
    font-weight:                var( --peso_negrita );
    margin-bottom:              10px;

}

.media_colors_row {

    display:                    flex;
    flex-wrap:                  wrap;
    gap:                        10px;

}

.color_dot {

    border:                     2px solid rgba( 0 , 0 , 0 , .15 );
    border-radius:              999px;
    cursor:                     pointer;
    height:                     32px;
    padding:                    0;
    transition:                 transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    width:                      32px;

}

.color_dot:hover {

    transform:                  scale( 1.06 );

}

.color_dot:focus {

    box-shadow:                 0 0 0 4px rgba( 0 , 0 , 0 , .08 );
    outline:                    none;

}

/*  INFORMACIÓN */
.pdp_info {

    display:                    flex;
    flex-direction:             column;
    gap:                        14px;

}

/*  ENCABEZADO */
.info_top {

    display:                    flex;
    flex-direction:             column;
    gap:                        10px;

}

.badges {

    display:                    flex;
    flex-wrap:                  wrap;
    gap:                        8px;

}

.badge {

    align-items:                center;
    border-radius:              999px;
    display:                    inline-flex;
    font-family:                var( --fuente_secundaria );
    font-size:                  12px;
    font-weight:                var( --peso_negrita );
    padding:                    6px 10px;
    white-space:                nowrap;

}

.badge_dest {

    background:                 rgba( 225 , 0 , 152 , .12 );
    color:                      var( --color_principal_oscuro );

}

.badge_new {

    background:                 var( --color_principal );
    color:                      var( --color_blanco );

}

.badge_mode {

    background:                 var( --color_fondo_suave );
    color:                      var( --color_texto_secundario );

}

.title {

    color:                      var( --color_texto );
    font-family:                var( --fuente_principal );
    font-size:                  1.35rem;
    font-weight:                var( --peso_negrita );
    line-height:                1.2;
    margin:                     0;

}

.subline {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;

}

/*  TARJETAS */
.price_card,
.options_card,
.desc_card,
.vol_card {

    background:                 var( --color_blanco );
    border:                     1px solid var( --color_borde );
    border-radius:              14px;
    padding:                    14px;

}

.price_rows {

    display:                    grid;
    gap:                        10px;

}

.price_old,
.price_now {

    align-items:                baseline;
    display:                    flex;
    gap:                        12px;
    justify-content:            space-between;

}

.price_old .label,
.price_now .label {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  0.95rem;

}

.price_old .value {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_principal );
    font-size:                  1.05rem;
    font-weight:                var( --peso_negrita );

}

.pdp_grid.has_promo .price_old .value {

    text-decoration:            line-through;

}

.price_now .value {

    color:                      var( --color_texto );
    font-family:                var( --fuente_principal );
    font-size:                  1.55rem;
    font-weight:                var( --peso_extra_negrita );

}

.price_na {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  1rem;

}

.promo_row {

    align-items:                center;
    display:                    flex;
    gap:                        10px;
    margin-top:                 10px;

}

.promo_badge {

    background:                 rgba( 225 , 0 , 152 , .10 );
    border:                     1px solid rgba( 225 , 0 , 152 , .22 );
    border-radius:              999px;
    color:                      var( --color_principal_oscuro );
    font-family:                var( --fuente_secundaria );
    font-size:                  12px;
    font-weight:                var( --peso_extra_negrita );
    padding:                    6px 10px;

}

.promo_hint {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;

}

.qty_row {

    margin-top:                 12px;

}

.qty_label {

    color:                      var( --color_texto );
    display:                    grid;
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;
    gap:                        8px;

}

.qty_input {

    border:                     1px solid var( --color_borde );
    border-radius:              12px;
    font-family:                var( --fuente_secundaria );
    font-size:                  1rem;
    padding:                    10px 12px;
    width:                      100%;

}

.qty_input:focus {

    box-shadow:                 0 0 0 4px rgba( 0 , 0 , 0 , .06 );
    outline:                    none;

}

/*  BOTONES */
.btn {

    align-items:                center;
    border:                     none;
    border-radius:              12px;
    cursor:                     pointer;
    display:                    inline-flex;
    font-family:                var( --fuente_secundaria );
    font-size:                  1rem;
    font-weight:                var( --peso_negrita );
    gap:                        10px;
    justify-content:            center;
    padding:                    12px 14px;
    text-align:                 center;
    text-decoration:            none;
    transition:                 transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
    user-select:                none;
    width:                      100%;

}

.btn:hover {

    box-shadow:                 0 12px 25px rgba( 0 , 0 , 0 , .10 );
    text-decoration:            none;
    transform:                  translateY( -1px );

}

.btn_primary {

    background:                 var( --color_principal );
    color:                      var( --color_blanco );

}

.btn_soft {

    background:                 rgba( 0 , 0 , 0 , .06 );
    color:                      var( --color_texto_secundario );

}

.btn_disabled {

    background:                 rgba( 0 , 0 , 0 , .10 );
    color:                      var( --color_texto_secundario );
    cursor:                     not-allowed;
    opacity:                    .9;

}

.buy_row {

    display:                    grid;
    gap:                        10px;
    margin-top:                 14px;

}

.price_actions {

    margin-top:                 14px;

}

/*  OPCIONES */
.options_card {

    display:                    grid;
    gap:                        12px;

}

.opt {

    display:                    grid;
    gap:                        8px;

}

.opt_label {

    color:                      var( --color_texto );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;
    font-weight:                var( --peso_negrita );

}

.opt_select {

    border:                     1px solid var( --color_borde );
    border-radius:              12px;
    font-family:                var( --fuente_secundaria );
    font-size:                  1rem;
    padding:                    10px 12px;
    width:                      100%;

}

.opt_select:focus {

    box-shadow:                 0 0 0 4px rgba( 0 , 0 , 0 , .06 );
    outline:                    none;

}

.opt_note {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .92rem;
    line-height:                1.4;

}

/*  DESCRIPCIÓN */
.desc_card h2,
.vol_card h2 {

    color:                      var( --color_texto );
    font-family:                var( --fuente_principal );
    font-size:                  1.05rem;
    font-weight:                var( --peso_extra_negrita );
    margin:                     0 0 10px;

}

.desc_text {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  0.98rem;
    line-height:                1.65;

}

/*  VOLUMEN */
.vol_rows {

    display:                    grid;
    gap:                        8px;

}

.vol_row {

    align-items:                center;
    border:                     1px solid var( --color_borde );
    border-radius:              12px;
    display:                    grid;
    gap:                        8px;
    grid-template-columns:      1fr auto;
    padding:                    10px 12px;

}

.vol_range {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;
    font-weight:                var( --peso_negrita );

}

.vol_val {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;

}

/*  RESPONSIVE */
@media ( min-width: 992px ) {

    .pdp_grid {

        align-items:                start;
        grid-template-columns:      1.02fr .98fr;

    }

    .pdp_media {

        position:                   sticky;
        top:                        90px;

    }

    .title {

        font-size:                  1.6rem;

    }

    .price_now .value {

        font-size:                  1.85rem;

    }

    .buy_row {

        grid-template-columns:      1.3fr .7fr;

    }

    .media_thumbs {

        grid-auto-columns:          86px;

    }

    .thumb {

        height:                     86px;
        width:                      86px;

    }

}

@media ( min-width: 1280px ) {

    .pdp_grid {

        gap:                        22px;

    }

    .pdp_media,
    .pdp_info {

        padding:                    16px;

    }

    .stage_nav {

        height:                     46px;
        width:                      46px;

    }

}

@media ( max-width: 420px ) {

    .media_thumbs {

        grid-auto-columns:          68px;

    }

    .thumb {

        height:                     68px;
        width:                      68px;

    }

}

.btn.is-disabled,
.btn:disabled {

    cursor:                     not-allowed;
    opacity:                    .6;
    pointer-events:             none;

}

/*  ATRIBUTOS EXTRA */
.pdp_extra {

    display:                    grid;
    gap:                        18px;
    margin:                     18px auto 0;
    max-width:                  1280px;
    padding:                    0 16px;

}

.extra_card {

    background:                 var( --color_blanco );
    border:                     1px solid var( --color_borde );
    border-radius:              14px;
    box-shadow:                 0 10px 30px rgba( 0 , 0 , 0 , .06 );
    padding:                    14px;

}

.extra_card h2 {

    color:                      var( --color_texto );
    font-family:                var( --fuente_principal );
    font-size:                  1.05rem;
    font-weight:                var( --peso_extra_negrita );
    margin:                     0 0 10px;

}

.extra_note {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .92rem;
    line-height:                1.45;
    margin-bottom:              12px;

}

/*  ESPECIFICACIONES */
.specs_table {

    display:                    grid;
    gap:                        10px;

}

.spec_row {

    border:                     1px solid var( --color_borde );
    border-radius:              12px;
    display:                    grid;
    gap:                        8px;
    grid-template-columns:      220px 1fr;
    padding:                    10px 12px;

}

.spec_k {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;
    font-weight:                var( --peso_extra_negrita );

}

.spec_v {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95rem;
    line-height:                1.55;

}

/*  PARTES CON PRECIO */
.parts_list {

    display:                    grid;
    gap:                        10px;

}

.part_row {

    align-items:                center;
    border:                     1px solid var( --color_borde );
    border-radius:              12px;
    display:                    grid;
    gap:                        10px;
    grid-template-columns:      1fr auto;
    padding:                    10px 12px;

}

.part_name {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .98rem;
    font-weight:                var( --peso_negrita );

}

.part_price {

    color:                      var( --color_texto );
    font-family:                var( --fuente_principal );
    font-size:                  1.05rem;
    font-weight:                var( --peso_extra_negrita );
    white-space:                nowrap;

}

@media ( max-width: 640px ) {

    .spec_row {

        grid-template-columns:      1fr;

    }

}

/*  MÉTODOS DE PAGO */
.pdp_payments {

    align-items:                center;
    display:                    flex;
    flex-wrap:                  wrap;
    gap:                        10px;
    margin-top:                 12px;

}

.pay_label {

    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .9rem;
    font-weight:                var( --peso_seminegrita );

}

.pay_icons {

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

}

.pay_icons img {

    filter:                     grayscale( 100% );
    height:                     24px;
    opacity:                    .6;
    transition:                 opacity .15s ease, transform .15s ease, filter .15s ease;
    width:                      auto;

}

.pay_icons img:hover {

    filter:                     grayscale( 0% );
    opacity:                    1;
    transform:                  translateY( -1px );

}

@media ( max-width: 480px ) {

    .pay_icons img {

        height:                     20px;

    }

}