/*  CONTENEDOR */
.idx-container {

    margin:                 0 auto;
    max-width:              1440px;
    width:                  95%;

}
.idx-section {

    padding:                34px 0;

}
.idx-section--soft {

    background:             var( --color_fondo_suave );

}
.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( --color_texto );
    font-family:            var( --fuente_principal );
    font-size:              1.35rem;
    font-weight:            var( --peso_negrita );
    margin:                 0;

}
.idx-link {

    color:                  var( --color_principal );
    font-family:            var( --fuente_secundaria );
    font-weight:            var( --peso_medio );
    text-decoration:        none;

}
.idx-link:hover {

    color:                  var( --color_principal_oscuro );

}

/*  CONTROLES SLIDER */
.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:             var( --color_blanco );
    transform:              translateY( -50% ) scale( 1.03 );

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

    color:                  var( --color_texto );
    font-size:              20px;

}

/*  DOTS */
.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( --color_principal );

}

   HERO

.idx-hero {

    padding:                10px 0;

}
.idx-hero-box {

    background:             var( --color_blanco );
    border-radius:          14px;
    box-shadow:             0 10px 30px rgba( 0 , 0 , 0 , .08 );
    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 */
.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:                    18px;
    grid-template-columns:  repeat( 2, 1fr );

}
.idx-tile {

    border:                 1px solid rgba( 0 , 0 , 0 , .06 );
    border-radius:          14px;
    box-shadow:             0 10px 30px rgba( 0 , 0 , 0 , .08 );
    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:             var( --color_blanco );
    border:                 1px solid rgba( 0 , 0 , 0 , .06 );
    border-radius:          14px;
    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, var( --color_fondo_suave ), var( --color_blanco ) );
    border-radius:          12px;
    height:                 210px;
    width:                  100%;

}
.p-badge {

    background:             var( --color_principal );
    border-radius:          999px;
    color:                  var( --color_blanco );
    font-family:            var( --fuente_secundaria );
    font-size:              .8rem;
    font-weight:            var( --peso_seminegrita );
    left:                   10px;
    padding:                6px 10px;
    position:               absolute;
    top:                    10px;

}
.p-title {

    color:                  var( --color_texto );
    font-family:            var( --fuente_principal );
    font-size:              1rem;
    font-weight:            var( --peso_seminegrita );
    line-height:            1.2;
    margin:                 0;
    min-height:             2.4em;

}
.p-price {

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

}
.p-old {

    color:                  var( --color_texto_secundario );
    font-family:            var( --fuente_principal );
    text-decoration:        line-through;

}
.p-new {

    color:                  var( --color_principal );
    font-family:            var( --fuente_principal );
    font-size:              1.1rem;
    font-weight:            var( --peso_negrita );

}
.p-btn {

    background:             var( --color_principal );
    border:                 none;
    border-radius:          12px;
    color:                  var( --color_blanco );
    cursor:                 pointer;
    font-family:            var( --fuente_secundaria );
    font-weight:            var( --peso_seminegrita );
    margin-top:             auto;
    padding:                12px 14px;
    transition:             background .15s ease;
    width:                  100%;

}
.p-btn:hover {

    background:             var( --color_principal_oscuro );

}

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

    border:                 1px solid rgba( 0 , 0 , 0 , .06 );
    border-radius:          14px;
    box-shadow:             0 10px 30px rgba( 0 , 0 , 0 , .08 );
    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:          14px;
    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:                    18px;
    grid-template-columns:  1fr;

}
.idx-beneficio {

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

}
.idx-beneficio img {

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

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

    .idx-beneficios {

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

    }

}

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

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

}
.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:             var( --color_blanco );
    border:                 1px solid rgba( 0 , 0 , 0 , .06 );
    border-radius:          14px;
    box-shadow:             0 10px 30px rgba( 0 , 0 , 0 , .08 );
    color:                  var( --color_texto );
    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:                  var( --color_texto );
    font-size:              18px;
    line-height:            1;

}
.idx-social-name {

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

}
.idx-social-cta {

    color:                  var( --color_principal );
    display:                none;
    font-family:            var( --fuente_secundaria );
    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, var( --color_fondo_suave ), var( --color_blanco ) );
    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( --color_texto );
    font-family:                var( --fuente_principal );
    font-size:                  1rem;
    font-weight:                var( --peso_seminegrita );
    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 */
.insignia_chip{

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

}

.insignia_chip_promo{

    background:                 rgba( 225 , 0 , 152 , .10 );
    border:                     1px solid rgba( 225 , 0 , 152 , .22 );
    color:                      var( --color_principal_oscuro );

}

/*  CTA Ver producto */
.p-btn--view{

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

}

.p-btn--view:hover{

    background:                 var( --color_principal_oscuro );

}
.p-card .p-btn{

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

}