.articulo{
    padding-bottom: 0px;
}



.articulo .slider{
    width: calc(60% - 60px) !important;
    height: 512px;
    display: flex;
    flex-direction: row-reverse;
    max-width: 630px;
    justify-content: flex-start;
}


.articulo .principal{
    margin: 0;
    text-decoration:none; 
    font-weight: bold;
    font-size: 12px;
    background: white;
}

.articulo .principal .movil{
    display: none;
}

.articulo .principal .nomovil{
    display: block;
}

.articulo .principal .content{
    width: 55%;
    display: table-cell;
    vertical-align: top;
    padding: 0px 20px 0 50px;
}



/* El H1 de la FICHA va en gris oscuro, no en granate: con el granate del logo,
   los iconos y los botones había demasiado rojo en pantalla. La referencia, un
   punto más clara, para que se lea como dato secundario del título.
   (El granate de --color-h1 se mantiene en los H1 de listado y familia.) */
.articulo h1{
    color: var(--color-text);
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    margin: 0px 0px 0px 0px;
    font-size: 30px;
    padding: 10px 0px 10px 0px;
}

/* Subtítulo H2 bajo el H1 de la ficha (editable en EditWebSubcatalogosArticulos).
   Selector específico para no heredar el h2 grande/uppercase del resto de la ficha. */
.articulo .principal .content .subtitulo{
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0px;
    margin-top: 25px;
    padding: 0px;
    cursor: pointer;
    color: var(--color-text-light);
    margin-bottom: 15px;
    font-size: 18px !important;
    border-bottom: 1px solid #7b90a7;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.articulo .colorsecundario{
   color: var(--color-catalogo) !important;
}

.articulo .etiquetas{
    padding: 15px;
}

.articulo .principal h2,
.articulo .principal h3,
.articulo .principal h4{
    color: var(--color-text);
    letter-spacing: 1px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
    margin: 0px 0px 0px 0px;
    font-size: 30px;
    padding: 10px 0px 10px 0px;
    font-size: 28px;
}

.articulo .principal h3{
    font-size: 22px !important;
    color: var(--color-text-light);
}

.articulo .principal .composicion{
    padding: 15px;
    font-size: 16px;
    color: var(--color-text);

}
.articulo .principal .composicion span{
    display: block;
    color: var(--color-text-muted);
    font-size: 15px;
}


.articulo .h2familia{
    color: var(--color-h1);
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    font-size: 30px;
    padding: 10px 0 10px 0;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 60px;
    margin-top: 50px;

}

.articulo .principal span.reference {
    font-weight: 500;
    color: var(--color-text-light);
    font-size: 24px;
    text-transform: uppercase;
}

.articulo .principal span.marca {
    font-weight: 500;
    color: var(--color-principal);
    font-size: 24px;
    display: block;

}

.articulo .principal .content h2,
.articulo .principal .content h3 {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0px;
    margin-top: 0px;
    padding: 0px;
    cursor: pointer;
    color: var(--color-text-light);
    margin-bottom: 15px;
    font-size: 18px !important;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.articulo .principal .content p{
    letter-spacing: 0px;
    font-size: 16px !important;
    font-weight: 400;
    text-transform: none;
    color: var(--color-text-light);
}

/* Botón Haz tu pedido */
.articulo .principal .hazpedido {
    margin: 20px 0 0 0;
}

.articulo .principal .hazpedido .hazpedido-scroll {
    background: var(--color-button);
    display: inline-block;
    padding: 8px 32px;
    font-size: 16px;
    font-weight: 600;
    /* margin: 10px 0px 10px 10px; */
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(97, 97, 97, 0.25);
}

.articulo .principal .hazpedido .hazpedido-scroll:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: #fff;
    text-decoration: none;
}

.articulo .principal .hazpedido .hazpedido-scroll:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.articulo .principal .hazpedido .hazpedido-flecha {
    flex-shrink: 0;
    color: inherit;
}

/* Vista pública (no logueado): tarjeta "¿Necesitas condiciones comerciales
   adaptadas?" con CTA a atención comercial. */
.articulo .principal .VisualizandoPublica {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 16px;
    padding: 28px 32px;
    margin: 30px 0px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.articulo .principal .VisualizandoPublica .vp-titulo {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #1e293b);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0 0 10px 0;
    padding: 0;
}

.articulo .principal .VisualizandoPublica .vp-texto {
    display: block;
    font-size: 16px;
    color: var(--color-text-light, #64748b);
    line-height: 1.6;
    font-weight: 400;
    text-transform: none;
    margin: 0 0 20px 0;
}

.articulo .principal .VisualizandoPublica .vp-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: var(--color-principal2);
    color: var(--color-white, #fff);
    font-weight: 600;
    text-decoration: none;
    padding: 16px 24px;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}

.articulo .principal .VisualizandoPublica .vp-boton svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
}

.articulo .principal .VisualizandoPublica .vp-boton:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.articulo .principal .VisualizandoPublica .vp-boton:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.articulo .principal .VisualizandoPublica .vp-nota {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.5;
    font-style: italic;
    text-transform: none;
    margin: 12px 0 0 0;
}
.articulo .principal .content .contendor_talla{
    display: inline-block;
    width: 35%;
    /*border-bottom: 1px solid black;*/
}
.articulo .principal .content .contendor_talla *{
    display: block;
    font-size: medium;
    color: black;
}

.articulo .principal .content .contendor_color{
    display: inline-block;
    width: 220px;
   /*  margin-left: 15px; */
    /*border-bottom: 1px solid black;*/
}

.articulo .principal .content .contendor_color *{
    display: block;
    font-size: medium;
    color: black;
}

.cajaselect {
    margin: 0px;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    width: 215px;
    position: relative;
 }
 
 .cajaselect select {
    background: transparent;
    border: none;
    font-size: 14px;
    height: 30px;
    padding: 5px;
    width: 250px;
    color: #7b7b7b;
    font-weight: normal;
 }
 .cajaselect select:focus{ outline: none;}
 
 .cajaselect::after{
     content:"\025be";
     display:table-cell;
     padding-top:7px;
     text-align:center;
     width:30px;
     height:30px;
     background-color:transparent;
     position:absolute;
     top:0;
     right:0px;	
     pointer-events: none;
 }


.articulo .principal .content .informacion_adicional {
    padding-bottom: 0%;
}
.articulo .principal .content .informacion_adicional .contenedor_imagen {
    display:inline-block;
    width:15%;
}
.articulo .principal .content .informacion_adicional .contenedor_imagen img {
    width: 0px;
    border: 0;
    text-decoration: none;
}

.articulo .principal .content .informacion_adicional .contenedor_texto{
    display:inline-block;
    width: 78%;
}

.articulo .principal .content .informacion_adicional .contenedor_texto p {
    margin:auto;
}

.articulo .principal .content .opciones_carro {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
}

.articulo .principal .content .opciones_carro .buttonaddcarro{
    overflow: hidden;
    transition: height 0.6s;
    margin: 10px 0px 5px 0px;
    height: 0px;
}
.articulo .principal .content .opciones_carro .buttonaddcarrosinstock{
    overflow: hidden;
    transition: height 0.6s;
    height: 0px;
    font-size: 17px;
    color: #a01c09;
    padding-left: 5px;
}

.articulo .principal .content .opciones_carro div{
    vertical-align: top;
}
.articulo .principal  .opciones_carro .divmasmenoscarro{
    display: inline-block;
    box-sizing: border-box;
}
.articulo .principal  .opciones_carro .divmasmenoscarro *{
    display: inline-block;
    box-sizing: border-box;
}
.articulo .principal  .opciones_carro .divmasmenoscarro input{
    box-sizing: border-box;
    height: 32px;
    font-size: 16px;
    width: 50px;
    color: var(--color-text);
    text-align: center;
    background: transparent;
    border: 1px solid #fff;
    margin: 1px -3px;
    position: relative;
    top: 5px;
}

.articulo .principal  .opciones_carro .divmasmenoscarro .botmas {
    background: white;
    color: var(--color-principal);
    border: none;
    display: block;
    padding:10px;
    border-radius: 20px;
    border-style: solid;
    border-color: var(--color-principal);
    border-width: 2px;
    height: 38px;
    width: 40px;
}
.articulo .principal  .opciones_carro .divmasmenoscarro .botmenos {
    background: white;
    color: var(--color-principal);
    border: none;
    display: block;
    padding:10px;
    border-radius: 20px;
    border-style: solid;
    border-color: var(--color-principal);
    border-width: 2px;
    height: 38px;
    width: 40px;
}
.articulo .principal .content .opciones_carro  .anadircarro {
    display: inline-block;
    vertical-align: bottom;
}
.articulo .principal .opciones_carro  #buttoncarro{
    width: 200px;
    margin-left: 10px;
    height: 40px;
    background: var(--color-white);
    color: var(--color-button);
    display: block;
    min-width: 125px;
    border-radius: 25px;
    border-style: solid;
    border-color: var(--color-button);
}

.articulo .principal .opciones_carro  #buttoncarro2{
    width: 50%;
    height: 40px;
    background: var(--color-button);
    color: var(--color-white);
    border: none;
    display: none;
    float: right;
}

.articulo .principal .opciones_carro  .buttoncarro #buttoncarro{font-size: 14px;}

.articulo .principal .content .tallascolores{
    width: 100%;
    margin: -1px 0;
    height: 50px;
    text-align: center;
    table-layout: fixed;
}

.articulo .principal .content .tallascolores tr td{
    border: 1px solid #e7e7e7;
    font-size: 14px;
    color: #494949;
    font-weight: normal;
}

.articulo .principal .content .tallascolores tr td:nth-child(1){
    width: 100px;
    font-weight: bold;
}


.articulo  .principal .content  .precio,
.articulo  .principal .movil  .precio{
    /* display: none; */
    margin: -10px 0px 0px -5px;
    border: none;
    text-decoration: none;
    color: #5a5a5a;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 1px;
    /* cursor: pointer; */
    transition: background 1s;
}


.articulo .principal .content .precio .pvp,
.articulo .principal .movil .precio .pvp{
    display: inline-block;
    font-size: 35px;
    padding: 4px;
    margin-bottom: 7px;
    font-weight: bold;
    /* background: var(--color-principal); */
    color: var(--color-principal);
}
.articulo .principal .content .precio span,
.articulo .principal .movil .precio span{
    display: inline-block;
    color: var(--color-principal);
    font-size: 25px;
    margin-left: -2px;
}
.articulo  .principal .content .precio .descuento,
.articulo  .principal .movil .precio .descuento{
    display: none;
    font-size: 20px;
    margin-left: 20px;
    background: #515859;
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    }

.articulo   .principal .content  .precio .descuento .pvpant,
.articulo   .principal .movil  .precio .descuento .pvpant{text-decoration: line-through;opacity: 0.7;color: #a6a6a6;}
.articulo  .principal .content   .dtopor,
.articulo  .principal .movil   .dtopor{
    float: right;
    transform: rotate(45deg);
    padding: 31px 54px 0px 44px;
    margin: 1px -78px;
    background: white;
    width: 180px;
    height: 71px;
    font-size: 25px;
    font-weight: bold;
    color: var(--color-text);
    /* border-bottom: 1px solid #ececec; */
}
.articulo  .principal .content  .dtopor span,
.articulo  .principal .movil  .dtopor span{
    font-size: 19px;
}




.articulo .contenedor_descripcion{
    margin: 1% 3%;
}
.articulo .h2articulo{
    letter-spacing: 1px;
    font-weight: bold;
    color: var(--color-principal);
    font-size: 21px;
    margin: 3% 0% 2% 3%;
    text-transform: uppercase;
}

.articulo .particulo{
    color: #6e6e6e;
    font-size: 12px;
    line-height: 19px;
    font-weight: normal;
    margin-bottom: 20px;
    margin: 20px 3% 20px 3%;
}





.articulo .principal .etiqueta {
    display: block;
    position: absolute;
    width: 100%;
    font-weight: bold;
    padding: 6px;
    color: #fff;
    text-align: center;
    margin-top: 7%;
    margin-left: -40%;
    z-index: 1;
    transform: rotate(-45deg);
}
.articulo .principal .etiqueta2 {
    display: block;
    position: absolute;
    float: right;
    width: 100%;
    font-weight: bold;
    font-size: 15px;
    padding: 6px;
    padding-left: 28px;
    color: #fff;
    margin-top: 7%;
    margin-right: -4px;
    margin-left: 85%;
    z-index: 1;
}
    .articulo .principal .agotado {background: #AA0000;}
    .articulo .principal .oferta {background: #43980d;}
    .articulo .principal .novedad {background: #e2a12b;}
    .articulo .principal .destacado {background: var(--color-principal);}
    .articulo .principal .outlet {background: var(--color-principal);}
    .articulo .principal .new {background: #AA0000;}

    .articulo .principal .agotado::after {content: "SIN STOCK"; }
    .articulo .principal .oferta::after {content: "OFERTA"; }
    .articulo .principal .novedad::after {content: "NOVEDAD"; }
    .articulo .principal .destacado::after {content: "RECOMENDADO"; }
    .articulo .principal .outlet::after {content: "OUTLET"; }
    .articulo .principal .new::after {content: "NEW";}


.articulo .principal .descuentoCam,
.articulo .principal .descuentoofe,
.articulo .principal .descuentoliq{margin-bottom: 20px;display: inline-block;}

    .articulo .principal .descuentoCam .preciodescuento,
    .articulo .principal .descuentoofe .preciodescuento,
    .articulo .principal .descuentoliq .preciodescuento{
        display: inline-block;
        background: #43980d;
        padding: 4px 12px;
        border-radius: 3px;
        font-size: 17px;
        color: white;
    }
    .articulo .principal .descuentoCam .textodescuento,
    .articulo .principal .descuentoofe .textodescuento,
    .articulo .principal .descuentoliq .textodescuento{
        display: inline-block;
        vertical-align: bottom;
        padding-left: 5px;
        color: #43980d;
        display: none;
    }
    .articulo .principal .descuentoliq .preciodescuento{background: #e2a12b;}
    .articulo .principal .descuentoliq .textodescuento{color: #e2a12b;}
    .articulo .principal .descuentoCam .preciodescuento{background: #349ea9;}
    .articulo .principal .descuentoCam .textodescuento{color: #349ea9;}
    
    .articulo .principal .destacado,
    .articulo .principal .outlet {
        background: var(--color-principal);
        margin-bottom: 20px;
        display: inline-block;
        padding: 4px 12px;
        border-radius: 3px;
        font-size: 17px;
        color: white;
    }

    .articulo .principal .novedaddesc{
        display: inline-block;
        background: #aa0000;
        padding: 4px 15px;
        border-radius: 3px;
        font-size: 17px;
        color: white;
        margin-bottom: 20px;
    }



    .articulo .catalogotc{
        margin: 30px 20px;
        padding: 25px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .articulo .catalogotc .catalogotc_group{
        display: block;
        width: 100%;
        margin: 0px 0px 25px 0px;
        vertical-align: top;
    }
    .articulo .catalogotc .catalogotc_group:last-child {
        margin-bottom: 0;
    }
    .articulo .catalogotc .catalogotc_group .catalogotc_elementos {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 15px;
    }
    .articulo .catalogotc .catalogotc_group .catalogotc_elementos div{
        border: 1px solid #e0e0e0;
        font-weight: 500;
        padding: 10px 16px;
        font-size: 14px;
        background: #f8f9fa;
        display: inline-block;
        min-width: 120px;
        text-align: center;
        border-radius: 6px;
        transition: all 0.3s ease;
        color: var(--color-text);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        cursor: default;
    }
    .articulo .catalogotc .catalogotc_group .catalogotc_elementos div:hover {
        background: var(--color-principal);
        border-color: var(--color-principal);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    }
    
    /* Mejora para el primer grupo (tallas) */
    .articulo .catalogotc .catalogotc_group:first-child .catalogotc_elementos div {
        background: #ffffff;
        border: 1px solid #d0d0d0;
    }
    
    .articulo .catalogotc .catalogotc_group .catalogotc_titulo{
        color: var(--color-principal);
        font-weight: 600;
        font-size: 18px;
        padding: 0px 0px 12px 0px;
        display: block;
        width: 100%;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e9ecef;
        margin-bottom: 15px;
    }

    .articulo .myCarouselarticulo{
        flex-direction: row-reverse;
    }

    .articulo .descripcion_larga{
        font-size: 15px;
        color: var(--color-text);
        padding: 30px 20px;
        margin: 0px !important;
        font-size: 13px;
        font-weight: normal;
    }
   
    .articulo .descripcion_larga table {
        font-size: 12px;
        /* width: 100%; */
        text-align: left;
        border-collapse: collapse;
    }
    
    .articulo .descripcion_larga th {
        font-size: 14px;
        font-weight: bold;
        padding: 8px 20px 8px 8px;
        background: #eeeeee;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #fff;
        color: var(--color-text); 
    }
    
    .articulo .descripcion_larga td {
        padding: 8px;
        background: #f9f9f9;
        border-bottom: 1px solid #fff;
        color: var(--color-text);
        border-top: 1px solid transparent;
        font-weight: 500;
        font-size: 12px;
    }
    
    /* .articulo .descripcion_larga tr:hover td {
        background: #d0dafd;
        color: var(--color-text);
    } */


    .articulo .sliderarticulo {
        width: 55% !important;
    }

@media all and (max-width:900px){ /*Modo movil*/
    .articulo .principal .content {
        width: 100%;
        margin-top: 20px;
    }

    .articulo .slider {
        width: 100% !important;
    }
    .articulo .sliderarticulo {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .articulo .sliderarticulo .slideshow-container {
        max-width: 100% !important;
    }
    .articulo h1{
        /* text-align: center; */
        padding-top: 10px;
    }

    .articulo .principal .content .precio{
        display: none;
    }
    .articulo .principal .content h2,
    .articulo .principal .content h3 {
        margin-top: 5px;
    }
  
    .articulo .principal .content .informacion_adicional .contenedor_imagen{
        width: 25%;
        vertical-align: top;
        text-align: left;
    }

    .articulo .principal .content .informacion_adicional .contenedor_texto{
        width: 70%;
    }

    .articulo .principal .content .informacion_adicional .contenedor_texto p {
        padding-left: 8%;
        margin-left:2px;
    }

    .articulo .principal .movil{ display:block;}
	.articulo .principal .nomovil{display: none;}


.articulo .principal .movil .contendor_talla select{
    outline: none;
    color: #575757;
    font-size: 12px;
    width: 100%;
    height: 37px;
    padding: 0px 10px;
    border: 1px solid #d9d9d9;
    /*background: #fff;*/
    background: transparent;
}

.articulo .principal .movil .contendor_talla select option{
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}




.articulo .principal .movil .contendor_color select{
    outline: none;
    color: #575757;
    font-size: 12px;
    width: 100%;
    height: 37px;
    padding: 0px 10px;
    border: 1px solid #d9d9d9;
    /*background: #fff*/
    /* background: transparent; */
}

.articulo .principal .movil .contendor_color select option{
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}

    .articulo .principal .movil .contendor_color,
    .articulo .principal .movil .contendor_talla{
        display: inline-block;
        width: 100%;
        padding-bottom: 2%;
    }
    .articulo .principal .movil .contendor_color *,
    .articulo .principal .movil .contendor_talla *{
        display: block;
        width: 100%;
    }

    .articulo .principal .movil .info_usuario ,
    .articulo .principal .movil .info_usuario *{
        display: inline;
    }

    .articulo .principal .movil .opciones_carro{
        display: block;
    }

    .articulo .principal .content .contendor_color,
    .articulo .principal .content .contendor_talla {
        display: none;
    }
    


.articulo .principal .movil .opciones_carro {
     background-color:transparent;  
    width: 100%;
    padding-bottom: 2%;
    /* height: 48px; */
}

.articulo .principal .movil .opciones_carro .buttonaddcarro{
    overflow: hidden;
    transition: height 0.6s;
    height: 0px;
}


.articulo .principal .movil .opciones_carro  .anadircarro {
    display: inline-block;
    margin-left: 2%;
    margin-top: 1%;
    vertical-align: bottom;
}


.articulo .principal .movil .opciones_carro .buttonaddcarrosinstock{
    overflow: hidden;
    transition: height 0.6s;
    height: 0px;
    font-size: 17px;
    color: #a01c09;
    padding-left: 5px;
}


.articulo .principal .content .opciones_carro{
    display: none;
}
    .articulo .principal .novedaddesc {
        display: none;
    }

    .cajaselect::after{
        top:2px;
        right:-7px;	
    }
   
}


#descargarimagenes {
    cursor: pointer;
    background: var(--color-principal2);
    border: none;
    color: #fff;
    padding: 15px 27px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 400;
}

@media all and (max-width:900px){
    /* Móvil: subir el H1 por encima de los colores manteniendo UN SOLO <h1>
       real y visible en el DOM (sin duplicar ni ocultar texto → 100% seguro
       para SEO; solo cambia el orden visual, que Google respeta).
       Como `order` solo aplica a hijos flex DIRECTOS y el <h1> está anidado en
       .content > div, aplanamos esos dos contenedores con display:contents:
       su caja desaparece pero siguen en el árbol DOM, así que los selectores
       .content .x y sus estilos se conservan. Pasamos de column-reverse a
       column y colocamos solo H1 (arriba), colores e imagen con `order`; el
       resto de la ficha queda en order:0 (debajo de la imagen, como hasta ahora). */
    .articulo .myCarouselarticulo{
        flex-direction: column !important;
    }
    /* .principal añade especificidad para ganar a las reglas posteriores
       `.articulo .principal .content{display:block}` de este mismo @media. */
    .articulo .principal .myCarouselarticulo > .content,
    .articulo .principal .myCarouselarticulo > .content > div{
        display: contents;
    }
    .articulo .myCarouselarticulo > .content h1{ order: -3; } /* H1 arriba del todo */
    .articulo .miniaturas-movil-wrapper{ order: -2; }         /* colores */
    .articulo .myCarouselarticulo > .articulo-media{ order: -1; } /* imágenes */

    .articulo {padding-left: 0px;}

    .articulo .slider {
        max-width: none;
    }
    .articulo .sliderarticulo {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .articulo .sliderarticulo .slideshow-container {
        max-width: 100% !important;
    }
    
    
    .galeria-colores-content {
        order: -1;
        margin-bottom: 15px;
    }


    .articulo .principal .gridcompra{
        width: calc(100% - 20px);
        margin: 10px;
    }

    .articulo .listadoteasers{
        width: calc(100% - 40px);
        margin: 20px;
    }


    .articulo .principal .content{
        display: block;
    }

    .articulo .principal .content {
        padding: 0;
    }


    .articulo .h2articulo {
        margin: 12% 0% 2% 3%;
    }

    .articulo .principal .content h2,
    .articulo .principal .content h3 {
        margin-top: 20px;
    }

    .articulo .descripcion_larga {
        padding: 30px 3px;
        overflow-y: auto;
    }
    .articulo .descripcion_larga th {
        padding: 8px 5px;
    }

    /* Estilos responsive para vista pública (no logueado) */
    .articulo .principal .VisualizandoPublica {
        padding: 28px 20px;
        margin: 20px 10px;
        border-radius: 12px;
    }

    .articulo .principal .VisualizandoPublica .vp-titulo {
        font-size: 19px;
    }

    .articulo .principal .VisualizandoPublica .vp-texto {
        font-size: 15px;
    }

    .articulo .principal .VisualizandoPublica .vp-boton {
        padding: 14px 18px;
        font-size: 14px;
    }

    .articulo .catalogotc {
        margin: 20px 10px;
        padding: 20px 15px;
    }

    .articulo .catalogotc .catalogotc_group .catalogotc_elementos {
        gap: 10px;
    }

    .articulo .catalogotc .catalogotc_group .catalogotc_elementos div {
        min-width: 100px;
        padding: 8px 12px;
        font-size: 13px;
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .articulo .catalogotc .catalogotc_group .catalogotc_titulo {
        font-size: 16px;
    }

}

/* === Iconos de confianza bajo la imagen (Experiencia, Calidad, Atención, Envíos, Stock) === */
.articulo .principal .articulo-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Mismo footprint que tenía .sliderarticulo cuando era hijo flex directo: sin esto,
       el wrapper colapsa a su contenido y el slider sale pequeño en escritorio. */
    width: 100%;
    max-width: 600px;
}
/* El slider ahora vive DENTRO de .articulo-media, que ya controla el ancho (~max-600).
   Hay una regla '.articulo .sliderarticulo{width:55% !important}' pensada para cuando el
   slider era hijo flex directo; dentro del wrapper ese 55% lo dejaba a ~330px (pequeño).
   Aquí lo forzamos al 100% del wrapper. */
.articulo .principal .articulo-media .sliderarticulo { width: 100% !important; max-width: 100% !important; }
/* ------------------------------------------------------------------
   MINIATURAS DE LAS FOTOS
   Debajo de la imagen principal. Ocupan el sitio del selector de colores,
   que este catálogo no usa. Si no caben, se deslizan en horizontal.
   ------------------------------------------------------------------ */
.articulo .principal .galeria-imagenes {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin: 14px 0 4px;
    padding: 4px 2px 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.articulo .principal .galeria-imagenes .thumb-imagen {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.articulo .principal .galeria-imagenes .thumb-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.articulo .principal .galeria-imagenes .thumb-imagen:hover {
    border-color: var(--color-principal-40);
}

.articulo .principal .galeria-imagenes .thumb-imagen.active {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 1px var(--color-principal);
}

@media all and (max-width: 480px) {
    .articulo .principal .galeria-imagenes .thumb-imagen { width: 56px; height: 56px; }
}


/* ------------------------------------------------------------------
   ATRIBUTOS DEL PRODUCTO
   Tira de iconos bajo la descripción (un SVG por codatributo, en
   tema/iconos-atributos) y, debajo, la tabla con el detalle.
   ------------------------------------------------------------------ */
/* width:100% a propósito: por debajo de 900px .content pasa a display:contents
   y estos bloques cuelgan directamente de un flex con align-items:flex-start,
   donde si no se encogen al ancho de su contenido. */
.articulo .atributos-iconos {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 10px;
    margin: 16px 0 4px;
    padding: 16px 0 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
}

.articulo .atributos-iconos .atributo-icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 1 1 78px;
    max-width: 104px;
    color: var(--color-principal);
}

.articulo .atributos-iconos .atributo-icono svg {
    width: 38px;
    height: 38px;
    display: block;
}

.articulo .atributos-iconos .atributo-icono span {
    font-size: 10px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

@media all and (max-width: 480px) {
    /* Dos columnas con el icono al lado del texto, como en la tarjeta del
       listado. Apretando cinco columnas en 390px el nombre del atributo se
       quedaba en 9px, que no hay quien lo lea. */
    .articulo .atributos-iconos { gap: 14px 10px; }
    .articulo .atributos-iconos .atributo-icono {
        flex: 1 1 calc(50% - 5px);
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 8px;
        min-width: 0;
    }
    .articulo .atributos-iconos .atributo-icono svg { width: 28px; height: 28px; flex: 0 0 28px; }
    .articulo .atributos-iconos .atributo-icono span { font-size: 11px; text-align: left; }
}

/* ------------------------------------------------------------------
   CARACTERÍSTICAS DEL PRODUCTO
   Tabla con los atributos públicos, bajo los iconos.
   ------------------------------------------------------------------ */
.articulo .caracteristicas {
    width: 100%;
    margin: 18px 0 24px;
}

.articulo .caracteristicas__titulo {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-h1);
}

.articulo .caracteristicas__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.articulo .caracteristicas__tabla th,
.articulo .caracteristicas__tabla td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.articulo .caracteristicas__tabla th {
    width: 70%;
    font-weight: 500;
    color: var(--color-text-medium);
}

.articulo .caracteristicas__tabla td {
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
}

.articulo .caracteristicas__tabla tr:nth-child(even) th,
.articulo .caracteristicas__tabla tr:nth-child(even) td {
    background: var(--color-bg);
}