:root {

    --idx-accent:            var( --fondo_header );
    --idx-accent-hover:      var( --fondo_primera_linea );
    --idx-bg:                var( --fondo_claro );
    --idx-border:            var( --borde_medio );
    --idx-gap:               18px;
    --idx-max:               1440px;
    --idx-muted:             var( --texto_secundario );
    --idx-radius:            14px;
    --idx-shadow:            0 10px 30px rgba(0,0,0,.08);
    --idx-soft:              #f6f6f6;
    --idx-text:              var( --texto_principal );
    --idx-w:                 95%;

}
/* CONTENEDOR */
.idx-container {

    margin:                 0 auto;
    max-width:              var( --idx-max );
    width:                  var( --idx-w );

}
.idx-section {

    padding:                34px 0;

}
.idx-section--soft {

    background:             var( --idx-soft );

}
.idx-head {

    align-items:            center;
    display:                flex;
    gap:                    12px;
    justify-content:        space-between;
    margin-bottom:          28px;

}
.idx-head--center {

    justify-content:        center;
    text-align:             center;

}
.idx-title {

    color:                  var( --idx-text );
    font-family:            var( --fuente_titulos );
    font-size:              1.35rem;
    font-weight:            var( --peso_extra_negrita );
    margin:                 0;

}
.idx-link {

    color:                  var( --idx-accent );
    font-family:            var( --fuente_textos );
    font-weight:            var( --peso_medio );
    text-decoration:        none;

}
.idx-link:hover {

    color:                  var( --idx-accent-hover );

}
/* CONTROLES SLIDER (REUTILIZABLE) */
.idx-controls {

    position:               relative;

}
.idx-arrow {

    align-items:            center;
    background:             rgba(255,255,255,.85);
    border:                 1px solid rgba(0,0,0,.08);
    border-radius:          999px;
    box-shadow:             0 6px 18px rgba(0,0,0,.12);
    cursor:                 pointer;
    display:                flex;
    height:                 42px;
    justify-content:        center;
    position:               absolute;
    top:                    50%;
    transform:              translateY( -50% );
    transition:             transform .15s ease, background .15s ease;
    width:                  42px;
    z-index:                20;

}
.idx-arrow:hover {

    background:             #fff;
    transform:              translateY( -50% ) scale( 1.03 );

}
.idx-arrow.prev { left:     6px; }
.idx-arrow.next { right:    6px; }
.idx-arrow i {

    color:                  #222;
    font-size:              20px;

}
/* DOTS (DEFAULT) */
.tns-nav {

    margin-top:             10px;
    text-align:             center;

}
.tns-nav button {

    background:             rgba(0,0,0,.18);
    border:                 none;
    border-radius:          99px;
    cursor:                 pointer;
    height:                 9px;
    margin:                 0 4px;
    width:                  9px;

}
.tns-nav button.tns-nav-active {

    background:             var( --idx-accent );

}

/* =========================================================
   HERO
========================================================= */

.idx-hero {

    padding:                10px 0;

}
.idx-hero-box {

    background:             var( --idx-bg );
    border-radius:          var( --idx-radius );
    box-shadow:             var( --idx-shadow );
    overflow:               hidden;
    position:               relative;

}
.idx-hero-slider img {

    display:                block;
    height:                 auto;
    object-fit:             cover;
    width:                  100%;

}
/* Por defecto: mobile visible */
.idx-hero-slider--desk { display: none; }
.idx-hero-slider--mob { display: block; }

.idx-controls--desk { display: none; }
.idx-controls--mob { display: block; }

/* Oculta los DOTS del slider que no toca */
.idx-hero-slider--desk + .tns-nav,
.idx-hero-slider--desk ~ .tns-nav { display: none; }

@media only screen and ( min-width: 768px ){

    .idx-hero-slider--desk { display: block; }
    .idx-hero-slider--mob { display: none; }

    .idx-controls--desk { display: block; }
    .idx-controls--mob { display: none; }

    .idx-hero-slider--mob + .tns-nav,
    .idx-hero-slider--mob ~ .tns-nav { display: none; }

    .idx-hero-slider--desk + .tns-nav { display: block; }

}

/* HERO: overlay controls (solo HERO) */
.idx-hero #controles_hero_desk,
.idx-hero #controles_hero_mob {

    inset:                  0;
    pointer-events:         none;
    position:               absolute;
    z-index:                50;

}
.idx-hero #controles_hero_desk .idx-arrow,
.idx-hero #controles_hero_mob .idx-arrow {

    pointer-events:         auto;
    position:               absolute;
    top:                    50%;
    transform:              translateY( -50% );

}
.idx-hero #controles_hero_desk .idx-arrow.prev,
.idx-hero #controles_hero_mob .idx-arrow.prev {

    left:                   5px;

}
.idx-hero #controles_hero_desk .idx-arrow.next,
.idx-hero #controles_hero_mob .idx-arrow.next {

    right:                  5px;

}
/* =========================================================
   BANNERS CON LINKS (TILES)
========================================================= */

.idx-tiles {

    display:                grid;
    gap:                    var( --idx-gap );
    grid-template-columns:  repeat( 2, 1fr );

}

.idx-tile {

    border:                 1px solid rgba(0,0,0,.06);
    border-radius:          var( --idx-radius );
    box-shadow:             var( --idx-shadow );
    display:                block;
    overflow:               hidden;

}

.idx-tile img {

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

}
@media only screen and ( min-width: 992px ){

    .idx-tiles {

        grid-template-columns:  repeat( 4, 1fr );

    }

}

/* =========================================================
   PRODUCTOS (MOCK)
========================================================= */

.idx-productos-slider {

    position:               relative;

}
.p-card {

    background:             #fff;
    border:                 1px solid rgba(0,0,0,.06);
    border-radius:          var( --idx-radius );
    box-shadow:             0 10px 24px rgba(0,0,0,.06);
    display:                flex;
    flex-direction:         column;
    gap:                    10px;
    height:                 100%;
    padding:                14px;

}
.p-media {

    border-radius:          12px;
    overflow:               hidden;
    position:               relative;

}
.p-img {

    background:             linear-gradient( 135deg, #eee, #f7f7f7 );
    border-radius:          12px;
    height:                 210px;
    width:                  100%;

}
.p-badge {

    background:             var( --idx-accent );
    border-radius:          999px;
    color:                  #fff;
    font-family:            var( --fuente_etiquetas );
    font-size:              .8rem;
    font-weight:            var( --peso_negrita );
    left:                   10px;
    padding:                6px 10px;
    position:               absolute;
    top:                    10px;

}
.p-title {

    color:                  var( --idx-text );
    font-family:            var( --fuente_titulos );
    font-size:              1rem;
    font-weight:            var( --peso_negrita );
    line-height:            1.2;
    margin:                 0;
    min-height:             2.4em;

}
.p-price {

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

}
.p-old {

    color:                  var( --idx-muted );
    font-family:            var( --fuente_precios );
    text-decoration:        line-through;

}
.p-new {

    color:                  var( --idx-accent );
    font-family:            var( --fuente_precios );
    font-size:              1.1rem;
    font-weight:            var( --peso_extra_negrita );

}
.p-btn {

    background:             var( --idx-accent );
    border:                 none;
    border-radius:          12px;
    color:                  #fff;
    cursor:                 pointer;
    font-family:            var( --fuente_botones );
    font-weight:            var( --peso_negrita );
    margin-top:             auto;
    padding:                12px 14px;
    transition:             background .15s ease;
    width:                  100%;

}
.p-btn:hover {

    background:             var( --idx-accent-hover );

}

/* =========================================================
   CATALOGO (SLIDER)
========================================================= */
.idx-news {

    border:                 1px solid rgba(0,0,0,.06);
    border-radius:          var( --idx-radius );
    box-shadow:             var( --idx-shadow );
    display:                block;
    overflow:               hidden;

}
.idx-news img {

    display:                block;
    height:                 260px;
    object-fit:             cover;
    width:                  100%;

}
.idx-links-slider {

    margin-top:             30px;

}
/* NAV scoped: CATALOGO */
.idx-links-wrap .tns-outer {

    padding-bottom:         34px;
    position:               relative;

}
.idx-links-wrap .tns-nav {

    left:                   50%;
    margin-top:             0;
    position:               absolute;
    transform:              translateX( -50% );
    z-index:                50;

}
/* =========================================================
   TESTIMONIOS (SLIDER)
========================================================= */
.idx-testimonio {

    border-radius:          var( --idx-radius );
    overflow:               hidden;

}
.idx-testimonio img {

    border-radius:          1em;
    display:                block;
    height:                 auto;
    margin:                 auto;
    object-fit:             cover;
    width:                  100%;

}
.idx-testimonios-slider {

    margin-top:             30px;

}
/* NAV scoped: TESTIMONIOS */
.idx-testimonios-wrap .tns-outer {

    padding-bottom:         34px;
    position:               relative;

}
.idx-testimonios-wrap .tns-nav {

    left:                   50%;
    margin-top:             0;
    position:               absolute;
    transform:              translateX( -50% );
    z-index:                50;

}
/* =========================================================
   BENEFICIOS
========================================================= */
.idx-beneficios {

    display:                grid;
    gap:                    var( --idx-gap );
    grid-template-columns:  1fr;

}
.idx-beneficio {

    background:             #fff;
    border:                 1px solid rgba(0,0,0,.06);
    border-radius:          var( --idx-radius );
    box-shadow:             var( --idx-shadow );
    overflow:               hidden;

}
.idx-beneficio img {

    display:                block;
    height:                 auto;
    width:                  100%;

}
@media only screen and ( min-width: 992px ){

    .idx-beneficios {

        display:                grid;
        gap:                    var( --idx-gap );
        grid-template-columns:  repeat( auto-fit, 280px );
        justify-content:        center;

    }

}
/* =========================================================
   MAPA
========================================================= */
.idx-map-box {

    background:             #fff;
    border:                 1px solid rgba(0,0,0,.06);
    border-radius:          var( --idx-radius );
    box-shadow:             var( --idx-shadow );
    overflow:               hidden;
    width:                  55%;
    margin:                 auto;

}
.idx-map-box iframe {

    border:                 0;
    display:                block;
    height:                 420px;
    width:                  100%;

}
@media ( min-width: 992px ){

    .idx-map-box iframe {

        height:                 480px;

    }

}
/* =========================================================
   SOCIAL LINKS (SOLO LOGOS)
========================================================= */
.idx-social-links {

    display:                grid;
    gap:                    10px;
    grid-template-columns:  repeat( auto-fit, 185px );
    justify-content:        center;

}
.idx-social-card {

    align-items:            center;
    background:             #fff;
    border:                 1px solid rgba(0,0,0,.06);
    border-radius:          var( --idx-radius );
    box-shadow:             var( --idx-shadow );
    color:                  var( --idx-text );
    display:                flex;
    gap:                    10px;
    padding:                12px 12px;
    text-decoration:        none;
    transition:             transform .15s ease;

}
.idx-social-card:hover {

    transform:              translateY( -1px );

}
.idx-social-ico {

    background:             rgba(0,0,0,.04);
    border-radius:          999px;
    display:                grid;
    flex:                   0 0 40px;
    height:                 40px;
    place-items:            center;
    width:                  40px;

}
.idx-social-ico i {

    color:                  #222;
    font-size:              18px;
    line-height:            1;

}
.idx-social-name {

    font-family:            var( --fuente_titulos );
    font-size:              .95rem;
    font-weight:            var( --peso_negrita );
    min-width:              0;
    overflow:               hidden;
    text-overflow:          ellipsis;
    white-space:            nowrap;

}
.idx-social-cta {

    color:                  var( --idx-accent );
    display:                none;
    font-family:            var( --fuente_textos );
    font-size:              .85rem;
    font-weight:            var( --peso_medio );
    margin-left:            auto;
    white-space:            nowrap;

}
@media ( min-width: 768px ){

    .idx-social-links {

        grid-template-columns:  repeat( auto-fit, 250px );

    }

    .idx-social-card {

        gap:                    12px;
        padding:                14px 16px;

    }

    .idx-social-ico {

        flex:                   0 0 44px;
        height:                 44px;
        width:                  44px;

    }

    .idx-social-ico i {

        font-size:              20px;

    }

    .idx-social-name {

        font-size:              1rem;

    }

    .idx-social-cta {

        display:                block;
        font-size:              .9rem;

    }

}
/* =========================================================
   PATCH INDEX: Cards reales con look mockup
   - Quita azul/subrayado del <a>
   - Chip promo igual a categorias
   - CTA: Ver producto (sin selects)
========================================================= */
.p-card a{

    color:                      inherit;
    text-decoration:            none;

}

.p-card a:hover{

    text-decoration:            none;

}

/* Imagen real en lugar de div.p-img mock */
.p-img{

    background:                 linear-gradient( 135deg, #eee, #f7f7f7 );
    border-radius:              12px;
    display:                    block;
    height:                     210px;
    object-fit:                 cover;
    width:                      100%;

}

/* Si tu HTML usa <img class="p-img"> dentro de .p-media */
.p-media{

    border-radius:              12px;
    overflow:                   hidden;
    position:                   relative;

}

/* Título: asegura que no herede estilos feos */
.p-title{

    color:                      var( --idx-text );
    font-family:                var( --fuente_titulos );
    font-size:                  1rem;
    font-weight:                var( --peso_negrita );
    line-height:                1.2;
    margin:                     0;
    min-height:                 2.4em;

}

.p-title a{

    color:                      inherit;
    text-decoration:            none;

}

.p-title a:hover{

    text-decoration:            none;

}

/* Precio: permite chip promo al final sin romper */
.p-price{

    align-items:                baseline;
    display:                    flex;
    flex-wrap:                  wrap;
    gap:                        10px;

}

/* Chip promo (igual que categorias) */
.insignia_chip{

    align-items:                center;
    border-radius:              999px;
    display:                    inline-flex;
    font-size:                  12px;
    font-weight:                800;
    line-height:                1;
    padding:                    6px 10px;
    user-select:                none;

}

.insignia_chip_promo{

    background:                 rgba( 229 , 57 , 53 , .12 );
    border:                     1px solid rgba( 229 , 57 , 53 , .22 );
    color:                      #b71c1c;

}

/* CTA Ver producto (mismo botón, solo que es link) */
.p-btn--view{

    align-items:                center;
    background:                 var( --idx-accent );
    border:                     none;
    border-radius:              12px;
    color:                      #fff;
    cursor:                     pointer;
    display:                    inline-flex;
    font-family:                var( --fuente_botones );
    font-weight:                var( --peso_negrita );
    justify-content:            center;
    margin-top:                 auto;
    padding:                    12px 14px;
    text-decoration:            none;
    transition:                 background .15s ease;
    width:                      100%;

}

.p-btn--view:hover{

    background:                 var( --idx-accent-hover );

}
.p-card .p-btn{

    color:                      var(--texto_sobre_oscuro);
    margin-top:                 10px;
    padding-top:                10px;

}