: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;

    /* sombra más suave e infantil */
    --idx-shadow:            0 8px 22px rgba(0,0,0,.08);

    /* fondo suave infantil */
    --idx-soft:              #FFF7D6;

    --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;
    text-decoration:        none;
    background:             #fff;

}

/* IMPORTANTE:
   - quita height:100%
   - fija formato 4:5 sin cambiar tu estilo */
.idx-tile img {

    display:                block;
    width:                  100%;
    aspect-ratio:           4 / 5;      /* tu formato */
    object-fit:             cover;

}

/* TITULO DE TILE */
.idx-tile-title {

    display:                block;
    padding:                10px 12px 12px;
    text-align:             center;

    font-family:            var( --fuente_titulos );
    font-weight:            var( --peso_negrita );
    font-size:              0.95rem;
    color:                  var( --idx-text );

    background:             #fff;

}

.idx-tile:hover .idx-tile-title {

    color:                  var( --idx-accent );

}

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

    .idx-tiles {

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

    }

}

/* =========================================================
   PRODUCTOS DESTACADOS
========================================================= */

.idx-productos-slider{
    position:               relative;
}

/* CARD (es un <a>) */
.p-card{
    background:             #fff;
    border:                 1px solid rgba(0,0,0,.06);
    border-radius:          var(--idx-radius);
    box-shadow:             0 8px 20px rgba(0,0,0,.06);
    display:                flex;
    flex-direction:         column;
    gap:                    10px;
    height:                 100%;
    padding:                14px;
    text-decoration:        none;
    color:                  inherit;
    transition:             transform .15s ease, box-shadow .15s ease;
}

.p-card:hover{
    transform:              translateY(-2px);
    box-shadow:             0 14px 28px rgba(0,0,0,.10);
}

/* IMAGEN */
.p-media{
    border-radius:          12px;
    overflow:               hidden;
}

.p-img{
    display:        block;
    width:          100%;
    height:         210px;
    object-fit:     cover;
    object-position: center top; /* ← clave */
    border-radius:  12px;
}

/* TITULO */
.p-title{
    color:                  var(--idx-text);
    font-family:            var(--fuente_titulos);
    font-size:              0.95rem;
    font-weight:            var(--peso_negrita);
    line-height:            1.25;
    margin:                 0;
    text-align:             center;

    /* evita descuadre */
    display:                -webkit-box;
    -webkit-line-clamp:     2;
    -webkit-box-orient:     vertical;
    overflow:               hidden;
    min-height:             2.5em;
}

/* BOTON VISUAL */
.p-btn{
    margin-top:         auto;
    background:         var(--idx-accent);
    border-radius:      10px;
    color:              #fff;
    font-family:        var(--fuente_botones);
    font-weight:        var(--peso_negrita);
    padding:            10px 12px;
    text-align:         center;
    display:            block;        /* ← importante */
    width:              100%;         /* ← importante */
    transition:         background .15s ease;
}


.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;

}
.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;

    }

}