/* FILE: productos.css */
body{
    background:#ece9f7 url('/imagenes/modulos/cssyjava/productos-bg-stars.svg') center top / cover no-repeat fixed !important;
}
#medio{
    width:90% !important;
    max-width:1920px !important;
    margin:120px auto 0 auto !important;
    padding:50px 0 0 0 !important;
    background:transparent !important;
}

.prd-page{
    width:90%;
    max-width:none;
    margin:0 auto;
    padding:50px 0 30px 0;
    position:relative;
}
.prd-breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    color:#69718b;
    font-size:14px;
    margin:0 0 18px 4px;
}
.prd-breadcrumbs a,
.prd-breadcrumbs strong{
    color:#69718b !important;
    text-decoration:none;
    font-weight:600;
}
.prd-breadcrumbs i{ margin-right:5px; }
.prd-hero{
    display:grid;
    grid-template-columns:minmax(420px, 1.05fr) minmax(420px, .95fr);
    gap:34px;
    align-items:start;
}
.prd-left,
.prd-right{ min-width:0; }
.prd-gallery-card{
    position:relative;
    min-height:610px;
}
.prd-main-image{
    min-height:610px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:30px;
    background:rgba(255,255,255,.04);
}
.prd-main-image img{
    display:block;
    max-width:95%;
    max-height:590px;
    object-fit:contain;
    filter:drop-shadow(0 28px 30px rgba(0,0,0,.17));
}
.prd-corner{
    position:absolute;
    z-index:4;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:100px;
    height:36px;
    padding:0 18px;
    border-radius:12px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.prd-corner-offer{ top:16px; left:16px; background:#cc4652; }
.prd-corner-new{ top:60px; left:16px; background:#356cc2; }
.prd-no-stock{
    position:absolute;
    right:18px;
    top:18px;
    z-index:4;
    background:rgba(0,0,0,.78);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    border-radius:999px;
    padding:8px 14px;
}
.prd-thumbs-wrap{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:12px;
}
.prd-nav{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:0 8px 18px rgba(54,61,100,.12);
    color:#6e7490 !important;
    font-size:32px !important;
    line-height:42px !important;
    padding:0 !important;
    min-height:0 !important;
    text-indent:0 !important;
}
.prd-thumbs-track{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:4px 0;
    scroll-behavior:smooth;
    max-width:100%;
}
.prd-thumbs-track::-webkit-scrollbar{ height:7px; }
.prd-thumbs-track::-webkit-scrollbar-thumb{ background:#c9cee0; border-radius:999px; }
.prd-thumb-btn{
    width:76px;
    min-width:76px;
    height:60px;
    border:0 !important;
    padding:5px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:0 8px 18px rgba(44,53,92,.10);
    cursor:pointer;
    min-height:0 !important;
    line-height:normal !important;
}
.prd-thumb-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.prd-thumb-btn.active{
    outline:3px solid #356fc0;
}
.prd-state-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:146px;
    height:34px;
    border-radius:12px;
    background:#ca4552;
    color:#fff;
    font-weight:900;
    font-size:14px;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:14px;
}
.prd-title{
    margin:0 0 22px 0 !important;
    color:#2e3550 !important;
    font-size:54px !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    text-transform:none !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-weight:900 !important;
}
.prd-buy-card{
    background:rgba(255,255,255,.68);
    border-radius:26px;
    padding:18px 22px 18px 22px;
    box-shadow:0 20px 40px rgba(52,61,104,.10);
    backdrop-filter: blur(4px);
}
.prd-mini-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:34px;
    padding:0 14px;
    border-radius:11px;
    background:#ca4552;
    color:#fff;
    font-size:13px;
    font-weight:900;
    margin-bottom:16px;
}
.prd-loyalty-line{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    color:#8a3448;
    font-weight:700;
    margin-bottom:16px;
}
.prd-loyalty-line strong{ color:#8a3448 !important; }
.prd-loyalty-ico{ font-size:26px; }
.prd-price{
    font-size:50px;
    line-height:1;
    font-weight:900;
    color:#118080;
    margin-bottom:8px;
}
.prd-price-sub{
    color:#596178;
    font-size:14px;
    margin-bottom:14px;
}
.prd-discount-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-bottom:16px;
}
.prd-old-price{
    color:#9b7a84;
    text-decoration:line-through;
    font-size:16px;
}
.prd-save{
    background:#fff2d0;
    color:#8d6430;
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
}
.prd-actions{
    display:grid;
    grid-template-columns:minmax(260px,1fr) 220px;
    gap:16px;
    align-items:center;
}
.prd-cart-btn,
.prd-cart-btn:visited,
.prd-cart-btn:hover{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
    width:100%;
    border-radius:15px;
    text-decoration:none;
    color:#fff !important;
    font-size:15px;
    font-weight:900;
    letter-spacing:.01em;
    padding:0 14px;
    background:linear-gradient(180deg,#4d93e2 0%, #245fa7 100%);
    box-shadow:0 8px 14px rgba(32,88,152,.18), inset 0 2px 0 rgba(255,255,255,.18);
}

.prd-cart-btn i{
    font-size:18px !important;
}
.prd-cart-btn span{
    display:inline-block;
    line-height:1.1;
}
.prd-cart-disabled{
    opacity:.55;
    pointer-events:none;
}
.prd-subactions{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:12px;
}
.prd-points-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:14px;
    background:linear-gradient(180deg,#f6e89e 0%, #efd66a 100%);
    color:#604f1d;
    font-size:16px;
    font-weight:900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.prd-heart-btn{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    box-shadow:0 12px 18px rgba(0,0,0,.10);
    color:#da3e49 !important;
    font-size:24px !important;
}
.prd-heart-btn.active{ background:#ffe4e7; }
.prd-shipping-box{
    min-height:82px;
    border-radius:18px;
    background:rgba(255,249,242,.94);
    color:#9a5e4f;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:14px;
}
.prd-shipping-title{
    font-weight:900;
    font-size:14px;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:4px;
}
.prd-shipping-sub{
    font-size:13px;
    font-weight:700;
}
.prd-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:18px;
}
.prd-meta-item{
    width:48px;
    text-align:center;
}
.prd-meta-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin:0 auto 6px auto;
    background:linear-gradient(180deg,#4f78be 0%, #315b9b 100%);
    color:#fff;
    font-size:20px;
}
.prd-meta-item em{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:20px;
    background:#ecd86f;
    border-radius:999px;
    color:#4d4a2d;
    font-size:12px;
    font-style:normal;
    font-weight:700;
}
.prd-spec-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(3,minmax(100px,1fr));
    gap:10px;
}
.prd-spec{
    background:rgba(255,255,255,.68);
    border-radius:14px;
    padding:12px 14px;
    box-shadow:0 10px 16px rgba(0,0,0,.05);
}
.prd-spec strong{
    display:block;
    font-size:11px;
    color:#7c849b;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:6px;
}
.prd-spec span{
    display:block;
    font-size:16px;
    font-weight:800;
    color:#2f3550;
}
.prd-highlight{
    margin-top:12px;
    border-radius:14px;
    padding:12px 14px;
    background:rgba(255,255,255,.75);
    color:#43506e;
    font-size:14px;
    font-weight:700;
}
.prd-highlight i{ margin-right:8px; }
.prd-highlight-warn{ background:#fff7df; color:#9f5a35; }
.prd-highlight-danger{ background:#ffe8e8; color:#a03d3d; }
.prd-admin-box{
    margin-top:14px;
    border-radius:16px;
    background:rgba(34,44,79,.70);
    color:#fff;
    padding:14px;
}
.prd-admin-top{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:8px;
}
.prd-admin-top a{
    color:#fff !important;
    font-weight:700;
    font-size:13px;
}
.prd-admin-data{
    font-size:12px;
    line-height:1.55;
}
.prd-opciones-btn,
.prd-opciones-btn:hover{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:14px;
    background:linear-gradient(180deg,#f3de8f 0%, #ebc955 100%);
    color:#5e4f22 !important;
    font-size:14px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.prd-tabs-shell{
    width:100%;
    max-width:none;
    margin:18px auto 0 auto;
}
.prd-tabs{
    background:rgba(255,255,255,.18);
    border-radius:22px;
}
.prd-tabs .ui-tabs-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:0 0 12px 0;
    margin:0 0 10px 0;
    border:0 !important;
    background:transparent !important;
}
.prd-tabs .ui-tabs-nav li{
    list-style:none;
    border:0 !important;
    background:transparent !important;
    margin:0 !important;
    top:0 !important;
    padding:0 !important;
}
.prd-tabs .ui-tabs-nav li a{
    display:block;
    min-height:52px;
    line-height:52px;
    padding:0 22px;
    border-radius:14px;
    background:rgba(244,245,250,.92);
    color:#5f667d !important;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
}
.prd-tabs .ui-tabs-nav li.ui-tabs-active a{
    background:linear-gradient(180deg,#3e78ba 0%,#295f9d 100%);
    color:#fff !important;
    box-shadow:0 10px 18px rgba(41,95,157,.18);
}
.prd-tabs .ui-tabs-panel{
    background:rgba(255,255,255,.82);
    border-radius:22px;
    padding:24px 24px 30px 24px;
}
.prd-tab-card{ width:100%; }
.prd-desc-title{
    color:#33384e;
    font-size:18px;
    font-weight:900;
    margin-bottom:16px;
}
.prd-ludo-extra{
    margin-top:22px;
    background:#f7f8fc;
    border-radius:16px;
    padding:18px;
    color:#4a536b;
}
.prd-ludo-extra h3{
    font-size:16px !important;
    margin:0 0 10px 0 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
}
.prd-empty{
    padding:20px;
    border-radius:16px;
    background:#f6f7fb;
    color:#596176;
    font-size:15px;
}
.prd-review{
    margin-bottom:14px;
    border-radius:16px;
    background:#f8f9fc;
    overflow:hidden;
}
.prd-review-head{
    background:#edf1f9;
    color:#455069;
    padding:12px 16px;
    font-weight:900;
}
.prd-review-body{
    padding:16px;
    color:#454d64;
    line-height:1.7;
}
.prd-review-form{
    margin-top:22px;
    background:#f7f8fc;
    border-radius:18px;
    padding:18px;
}
.prd-form-title{
    color:#38435c;
    font-size:17px;
    font-weight:800;
    margin-bottom:10px;
}
.prd-form-sub{
    color:#6b748d;
    font-size:14px;
    margin-bottom:12px;
}
.prd-textarea{
    width:100%;
    max-width:100%;
    border-radius:16px !important;
    border:1px solid rgba(160,160,160,0.25) !important;
    background:#fff !important;
    padding:16px !important;
    font-size:16px;
    line-height:1.6;
    min-height:160px;
}
.prd-mechanics-grid,
.prd-info-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(140px,1fr));
    gap:12px;
}
.prd-mech,
.prd-info-box{
    background:#f7f8fc;
    border-radius:16px;
    padding:16px;
}
.prd-mech strong,
.prd-info-box strong{
    display:block;
    color:#7a829a;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:8px;
}
.prd-mech span,
.prd-info-box span{
    display:block;
    color:#2f3550;
    font-size:16px;
    font-weight:800;
}
.prd-info-box a{ color:#245fa7 !important; }
.prd-admin-list{
    margin-bottom:18px;
    border-radius:16px;
    background:#f7f8fc;
    padding:18px;
}
.prd-admin-list h3{
    margin:0 0 12px 0 !important;
    font-size:17px !important;
    letter-spacing:0 !important;
    text-transform:none !important;
}
.prd-admin-row{
    padding:8px 0;
    border-top:1px solid #e7ebf4;
    color:#4f566d;
    font-size:14px;
}
.prd-admin-row:first-of-type{ border-top:0; }
.prd-admin-stats{
    margin-top:14px;
    color:#38435c;
    font-weight:700;
}
.prd-cta-footer{
    width:100%;
    max-width:none;
    margin:22px auto 0 auto;
    display:flex;
    justify-content:flex-end;
}
.prd-cta-inner{
    min-width:420px;
    max-width:520px;
    background:linear-gradient(135deg, rgba(106,132,217,.78), rgba(98,77,175,.62));
    color:#fff;
    padding:22px 24px;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(54,61,100,.15);
    display:flex;
    align-items:center;
    gap:16px;
}
.prd-cta-icon{ font-size:36px; }
.prd-cta-inner strong{
    color:#ffe38a !important;
    font-size:21px;
}
.prd-cta-inner span{
    color:#fff;
    font-size:17px;
}
.art_titulo_box,
.familias_link,
.fidelizacion,
.cta-box,
.art_box_izq,
.art_box_der,
.producto_imgs,
.precios_box,
.info_data_art{
    all:unset;
}
.descripcion,
.descripcion h2{
    font-family:Arial, Helvetica, sans-serif !important;
    color:#31364a !important;
    letter-spacing:0 !important;
    text-align:left !important;
}
.descripcion{
    font-size:18px !important;
    line-height:1.85 !important;
}
.descripcion h2{
    font-size:42px !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    margin:0 0 18px 0 !important;
}
#art_box_contenido,
#item_1,
.clear,
.adiosflex{
    display:none !important;
}
#tabs-3:empty,
#tabs-4:empty{
    display:none;
}
#opc_bgg{
    background-color: rgba(92,133,214,.88) !important;
}
@media screen and (max-width: 1280px){
    #medio{ width:94% !important; }
    .prd-hero{
        grid-template-columns:1fr;
        gap:24px;
    }
    .prd-gallery-card,
    .prd-main-image{
        min-height:480px;
    }
    .prd-main-image img{
        max-height:460px;
    }
    .prd-title{
        font-size:46px !important;
    }
}
@media screen and (max-width: 900px){
    #medio{ width:96% !important; }
    .prd-actions{
        grid-template-columns:1fr;
    }
    .prd-spec-grid,
    .prd-mechanics-grid,
    .prd-info-grid{
        grid-template-columns:repeat(2,minmax(130px,1fr));
    }
}
@media screen and (max-width: 700px){
   body{
        background:
            linear-gradient(180deg, rgba(241,237,247,.98) 0%, rgba(233,235,246,.98) 100%),
            url('/imagenes/modulos/cssyjava/productos-bg-stars.svg') center top / cover no-repeat !important;
    }
    #medio{
        width:90% !important;
        margin-top:105px !important;
        padding:50px 0 0 0 !important;
    }
    .prd-page{ padding:50px 0 20px 0; }
    .prd-title{ font-size:34px !important; }
    .prd-price{ font-size:42px; }
    .prd-gallery-card,
    .prd-main-image{
        min-height:320px;
    }
    .prd-main-image img{
        max-height:300px;
    }
    .prd-nav{
        width:38px; height:38px; flex-basis:38px; font-size:28px !important; line-height:38px !important;
    }
    .prd-thumb-btn{
        width:66px; min-width:66px; height:54px;
    }
    .prd-meta-row{ gap:10px; }
    .prd-meta-item{ width:44px; }
    .prd-meta-icon{ width:44px; height:44px; font-size:18px; }
    .prd-tabs .ui-tabs-nav li a{
        min-height:46px;
        line-height:46px;
        padding:0 16px;
        font-size:14px;
    }
    .prd-tabs .ui-tabs-panel{ padding:20px 16px 24px 16px; }
    .descripcion{ font-size:16px !important; }
    .descripcion h2{ font-size:30px !important; }
    .prd-cta-inner{
        min-width:0;
        width:100%;
        padding:16px 18px;
    }
}
@media screen and (max-width: 520px){
    .prd-breadcrumbs{
        font-size:12px;
        gap:8px;
    }
    .prd-spec-grid,
    .prd-mechanics-grid,
    .prd-info-grid{
        grid-template-columns:1fr;
    }
    .prd-state-badge{
        min-width:122px;
        height:32px;
        font-size:13px;
    }
    .prd-buy-card{ padding:16px 14px; }
    .prd-cart-btn{ font-size:16px; min-height:52px; }
    .prd-points-pill{ font-size:14px; min-height:40px; }
    .prd-heart-btn{ width:44px; height:44px; font-size:22px !important; }
    .prd-cta-inner strong{ font-size:18px; }
    .prd-cta-inner span{ font-size:14px; }
}
html{
    background:#ece9f7 url('./imagenes/modulos/cssyjava/productos-bg-stars.svg') center top / cover no-repeat fixed !important;
}
body{
    min-height:100vh;
}
#principal,
#medio,
.prd-page{
    background:transparent !important;
}

.prd-thumb-btn,
.prd-prev,
.prd-next{
    pointer-events:auto !important;
    position:relative;
    z-index:20;
}

.prd-thumbs-wrap,
.prd-thumbs-track{
    position:relative;
    z-index:15;
}

.prd-thumb-btn img{
    pointer-events:none !important;
}