/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   HOME HERO CAROUSEL V1
   ========================================================== */

:root {
    --hero-pink: #ef0f74;
    --hero-yellow: #ffbd0a;
    --hero-blue: #078ee9;
    --hero-green: #20d68c;
    --hero-cream: #efd4b8;
    --hero-dark: #080b0e;
}


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

.hero.hero-carousel {
    position: relative;

    width: 100%;
    height: auto;
    min-height: clamp(720px, 86vh, 900px);

    overflow: hidden;

    isolation: isolate;

    background: #080b0e;

    color: #fff;
}


.hero.hero-carousel::before,
.hero.hero-carousel::after {
    display: none !important;
    content: none !important;
}


.hero-carousel-track {
    position: relative;

    min-height: clamp(720px, 86vh, 900px);
}


/* ==========================================================
   SLIDES
   ========================================================== */

.hero-slide {
    --slide-accent: var(--hero-yellow);

    position: absolute;
    inset: 0;

    display: grid;

    min-height: clamp(720px, 86vh, 900px);

    align-items: center;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.015);

    transition:
        opacity 700ms ease,
        transform 900ms ease,
        visibility 700ms ease;

    pointer-events: none;
}


.hero-slide.is-active {
    opacity: 1;
    visibility: visible;

    transform: scale(1);

    pointer-events: auto;
}


.hero-slide::before {
    position: absolute;
    inset: 0;

    z-index: -3;

    content: "";

    background-image:
        var(
            --hero-slide-image,
            url("../assets/images/hero-montanas-huila.webp")
        );

    background-position: center 52%;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.025);
}


.hero-slide::after {
    position: absolute;
    inset: 0;

    z-index: -2;

    content: "";

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(255,255,255,.08),
            transparent 31%
        ),
        linear-gradient(
            90deg,
            rgba(18,5,5,.94) 0%,
            rgba(26,8,7,.88) 34%,
            rgba(8,11,14,.62) 68%,
            rgba(6,10,14,.45) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4,7,10,.12),
            rgba(4,7,10,.46)
        );
}


.hero-slide--coffee {
    --slide-accent: var(--hero-pink);
}


.hero-slide--construction {
    --slide-accent: var(--hero-yellow);
}


.hero-slide--farm {
    --slide-accent: var(--hero-green);
}


.hero-slide--services {
    --slide-accent: var(--hero-blue);
}


/* ==========================================================
   LAYOUT
   ========================================================== */

.hero-carousel-grid {
    position: relative;

    z-index: 4;

    display: grid;

    width:
        min(
            1320px,
            calc(100% - 64px)
        );

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, .92fr);

    gap: 72px;

    align-items: center;

    margin-inline: auto;

    padding:
        145px
        0
        118px;
}


/* ==========================================================
   COPY
   ========================================================== */

.hero-carousel-copy {
    position: relative;

    z-index: 6;

    max-width: 700px;
}


.hero-slide-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin:
        0
        0
        24px;

    color:
        var(--slide-accent);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.hero-slide-eyebrow::after {
    display: block;

    width: 52px;
    height: 1px;

    background:
        var(--slide-accent);

    content: "";
}


.hero-carousel-copy h1,
.hero-carousel-copy h2 {
    max-width: 720px;

    margin:
        0
        0
        25px;

    color: #fff;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            6.1vw,
            6.9rem
        );

    font-weight: 600;

    line-height: .91;

    letter-spacing: -.052em;
}


.hero-carousel-copy h2 {
    font-size:
        clamp(
            3.65rem,
            5.5vw,
            6.2rem
        );
}


.hero-carousel-description {
    max-width: 620px;

    margin: 0;

    color:
        rgba(255,255,255,.80);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.13rem
        );

    line-height: 1.65;
}


.hero-carousel-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;
}


.hero-carousel .hero-cta {
    display: inline-flex;

    min-height: 50px;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        12px
        23px;

    border:
        1px solid transparent;

    border-radius: 3px;

    font-size: .84rem;

    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}


.hero-cta--primary {
    background:
        var(--slide-accent);

    color: #111;
}


.hero-slide--coffee
.hero-cta--primary {
    color: #fff;
}


.hero-cta--secondary {
    border-color:
        rgba(255,255,255,.52);

    background:
        rgba(8,10,12,.24);

    color: #fff;

    backdrop-filter:
        blur(8px);
}


.hero-carousel .hero-cta:hover {
    transform:
        translateY(-2px);
}


/* ==========================================================
   VISUAL GENERAL
   ========================================================== */

.hero-carousel-visual {
    position: relative;

    display: grid;

    min-height: 520px;

    align-items: center;
    justify-items: center;
}


.hero-visual-orbit {
    position: absolute;

    width: 430px;
    height: 430px;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius: 50%;

    box-shadow:
        inset 0 0 70px
        rgba(255,255,255,.025);
}


.hero-visual-orbit::before {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 72%;
    height: 72%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--slide-accent) 40%,
            transparent
        );

    border-radius: 50%;

    content: "";
}


/* ==========================================================
   SLIDE 01 — INSTITUCIONAL
   ========================================================== */

.hero-origin-product {
    position: relative;

    z-index: 4;

    display: grid;

    width: min(100%, 510px);

    min-height: 510px;

    place-items: center;
}


.hero-origin-product::before {
    position: absolute;

    right: 5%;
    bottom: 4%;

    width: 90%;
    height: 185px;

    border:
        1px solid
        rgba(255,189,10,.72);

    border-radius:
        52% 52% 18px 18px;

    background:
        linear-gradient(
            180deg,
            rgba(75,17,13,.94),
            rgba(35,8,6,.98)
        );

    content: "";

    box-shadow:
        0 34px 75px
        rgba(0,0,0,.35);
}


.hero-origin-product img {
    position: relative;

    z-index: 4;

    width:
        min(
            68%,
            350px
        );

    max-height: 500px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 30px 30px
            rgba(0,0,0,.38)
        );

    transform:
        rotate(4deg);
}


.hero-origin-caption {
    position: absolute;

    z-index: 7;

    right: 0;
    bottom: 5px;

    min-width: 210px;

    padding:
        17px
        19px;

    border-left:
        1px solid
        var(--slide-accent);

    background:
        rgba(17,8,7,.94);
}


.hero-origin-caption span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--slide-accent);

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.hero-origin-caption strong {
    color: #fff;

    font-family:
        var(--serif);

    font-size: 1.15rem;
}


/* ==========================================================
   SLIDE 02 — CAFÉ / MAQUILA
   ========================================================== */

.hero-coffee-stack {
    position: relative;

    display: flex;

    width: min(100%, 550px);
    height: 500px;

    align-items: center;
    justify-content: center;
}


.hero-coffee-bag {
    position: absolute;

    width: 245px;

    filter:
        drop-shadow(
            0 28px 28px
            rgba(0,0,0,.45)
        );

    transition:
        transform 500ms ease;
}


.hero-coffee-bag--left {
    left: 5%;

    transform:
        rotate(-10deg)
        scale(.88);
}


.hero-coffee-bag--center {
    z-index: 3;

    transform:
        scale(1.06);
}


.hero-coffee-bag--right {
    right: 3%;

    transform:
        rotate(10deg)
        scale(.86);
}


.hero-coffee-tags {
    position: absolute;

    z-index: 7;

    right: 4%;
    bottom: 12px;

    display: flex;

    max-width: 430px;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}


.hero-coffee-tags span {
    padding:
        8px
        12px;

    border:
        1px solid
        rgba(239,15,116,.72);

    border-radius: 999px;

    background:
        rgba(8,10,12,.84);

    color: #fff;

    font-size: .64rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

    backdrop-filter:
        blur(8px);
}


/* ==========================================================
   SLIDE 03 — CONSTRUCCION
   ========================================================== */

.hero-construction-stage {
    position: relative;

    width:
        min(
            100%,
            540px
        );

    min-height: 470px;

    padding:
        38px;

    border:
        1px solid
        rgba(255,189,10,.62);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(8,11,14,.90),
            rgba(18,20,22,.72)
        );

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.34);

    backdrop-filter:
        blur(12px);
}


.hero-construction-stage::before {
    position: absolute;
    inset: 14px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 12px;

    content: "";
}


.hero-blueprint {
    position: relative;

    z-index: 3;

    height: 245px;

    margin-bottom: 25px;

    overflow: hidden;

    border:
        1px solid
        rgba(7,142,233,.42);

    background:
        linear-gradient(
            rgba(7,142,233,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7,142,233,.08) 1px,
            transparent 1px
        ),
        rgba(6,13,18,.64);

    background-size:
        24px 24px;
}


.hero-building-line {
    position: absolute;

    right: 10%;
    bottom: 15%;

    left: 10%;

    height: 63%;

    border:
        2px solid
        var(--hero-yellow);

    border-bottom-width:
        6px;

    clip-path:
        polygon(
            0 100%,
            0 46%,
            19% 46%,
            19% 26%,
            44% 26%,
            44% 8%,
            68% 8%,
            68% 32%,
            100% 32%,
            100% 100%
        );
}


.hero-construction-title {
    position: relative;

    z-index: 3;

    margin:
        0
        0
        20px;

    color: #fff;

    font-family:
        var(--serif);

    font-size: 2rem;

    line-height: 1.02;
}


.hero-construction-specs {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 10px;
}


.hero-construction-specs div {
    padding:
        13px
        12px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.025);
}


.hero-construction-specs span {
    display: block;

    color:
        var(--hero-yellow);

    font-size: .55rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.hero-construction-specs strong {
    display: block;

    margin-top: 5px;

    color: #fff;

    font-size: .78rem;
}


/* ==========================================================
   SLIDE 04 — ECOGRANJA
   ========================================================== */

.hero-farm-stage {
    position: relative;

    width:
        min(
            100%,
            540px
        );

    height: 470px;

    overflow: hidden;

    border:
        1px solid
        rgba(32,214,140,.58);

    border-radius: 24px;

    box-shadow:
        0 30px 72px
        rgba(0,0,0,.36);
}


.hero-farm-stage::before {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6,10,12,.04),
            rgba(6,10,12,.63)
        ),
        url("../assets/images/hero-montanas-huila.webp")
        center / cover;

    content: "";

    transform:
        scale(1.06);
}


.hero-farm-copy {
    position: absolute;

    z-index: 4;

    right: 26px;
    bottom: 25px;
    left: 26px;

    padding:
        22px;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        rgba(6,11,10,.69);

    backdrop-filter:
        blur(12px);
}


.hero-farm-copy small {
    display: block;

    color:
        var(--hero-green);

    font-size: .60rem;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.hero-farm-copy strong {
    display: block;

    margin-top: 8px;

    color: #fff;

    font-family:
        var(--serif);

    font-size: 1.9rem;

    line-height: 1;
}


.hero-farm-badges {
    position: absolute;

    z-index: 6;

    top: 24px;
    right: 22px;

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.hero-farm-badges span {
    padding:
        8px
        11px;

    border:
        1px solid
        rgba(32,214,140,.68);

    border-radius: 999px;

    background:
        rgba(4,10,9,.74);

    color: #fff;

    font-size: .60rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================
   SLIDE 05 — SERVICIOS
   ========================================================== */

.hero-services-stage {
    display: grid;

    width:
        min(
            100%,
            540px
        );

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 14px;
}


.hero-service-card {
    --service-accent:
        var(--hero-blue);

    position: relative;

    min-height: 185px;

    padding:
        24px;

    overflow: hidden;

    border:
        1px solid
        var(--service-accent);

    border-radius: 16px;

    background:
        rgba(7,11,15,.78);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.20);

    backdrop-filter:
        blur(10px);
}


.hero-service-card:nth-child(2) {
    --service-accent:
        var(--hero-yellow);
}


.hero-service-card:nth-child(3) {
    --service-accent:
        var(--hero-pink);
}


.hero-service-card:nth-child(4) {
    --service-accent:
        var(--hero-green);
}


.hero-service-index {
    display: grid;

    width: 30px;
    height: 30px;

    place-items: center;

    margin-bottom: 28px;

    border:
        1px solid
        var(--service-accent);

    border-radius: 50%;

    color:
        var(--service-accent);

    font-size: .60rem;

    font-weight: 800;
}


.hero-service-card strong {
    display: block;

    color: #fff;

    font-family:
        var(--serif);

    font-size: 1.45rem;

    line-height: 1.03;
}


.hero-service-card span:last-child {
    display: block;

    margin-top: 10px;

    color:
        rgba(255,255,255,.62);

    font-size: .72rem;

    line-height: 1.45;
}


/* ==========================================================
   CONTROLES
   ========================================================== */

.hero-carousel-controls {
    position: absolute;

    z-index: 20;

    right: 0;
    bottom: 28px;
    left: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    padding:
        0 26px;
}


.hero-carousel-control {
    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

    background:
        rgba(6,9,12,.54);

    color: #fff;

    cursor: pointer;

    backdrop-filter:
        blur(10px);
}


.hero-carousel-control svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.hero-carousel-meta {
    display: flex;

    min-width: 285px;

    align-items: center;

    gap: 14px;
}


.hero-carousel-counter {
    min-width: 54px;

    color: #fff;

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .10em;
}


.hero-carousel-counter span {
    color:
        var(--hero-yellow);
}


.hero-carousel-progress {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255,255,255,.20);
}


.hero-carousel-progress span {
    position: absolute;

    inset:
        0
        auto
        0
        0;

    width: 0;

    background:
        var(--hero-yellow);
}


.hero-carousel.is-running
.hero-carousel-progress span {
    animation:
        hero-carousel-progress
        7s
        linear
        forwards;
}


.hero-carousel-pause {
    width: 38px;
    height: 38px;

    font-size: .72rem;
}


.hero-carousel-dots {
    position: absolute;

    z-index: 20;

    bottom: 86px;
    left: 50%;

    display: flex;

    gap: 8px;

    transform:
        translateX(-50%);
}


.hero-carousel-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.46);

    border-radius: 50%;

    background:
        transparent;

    cursor: pointer;

    transition:
        width 220ms ease,
        border-radius 220ms ease,
        background 220ms ease;
}


.hero-carousel-dot.is-active {
    width: 28px;

    border-color:
        var(--hero-yellow);

    border-radius: 999px;

    background:
        var(--hero-yellow);
}


/* ==========================================================
   TRANSICION DEL CONTENIDO
   ========================================================== */

.hero-slide
.hero-carousel-copy,
.hero-slide
.hero-carousel-visual {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 650ms ease 160ms,
        transform 750ms ease 160ms;
}


.hero-slide.is-active
.hero-carousel-copy,
.hero-slide.is-active
.hero-carousel-visual {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1120px) {

    .hero-carousel-grid {
        width:
            min(
                930px,
                calc(100% - 42px)
            );

        grid-template-columns:
            minmax(0,1fr)
            minmax(330px,.78fr);

        gap: 32px;
    }


    .hero-carousel-copy h1,
    .hero-carousel-copy h2 {
        font-size:
            clamp(
                3.6rem,
                7vw,
                5.5rem
            );
    }


    .hero-carousel-visual {
        min-height: 470px;
    }


    .hero-visual-orbit {
        width: 360px;
        height: 360px;
    }
}


@media (max-width: 820px) {

    .hero.hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 900px;
    }


    .hero-carousel-grid {
        grid-template-columns: 1fr;

        align-content: start;

        gap: 20px;

        padding:
            120px
            0
            150px;
    }


    .hero-carousel-copy {
        max-width: 650px;
    }


    .hero-carousel-copy h1,
    .hero-carousel-copy h2 {
        max-width: 620px;

        font-size:
            clamp(
                3.2rem,
                10vw,
                5rem
            );
    }


    .hero-carousel-description {
        max-width: 550px;
    }


    .hero-carousel-visual {
        position: absolute;

        right: -6%;
        bottom: 100px;

        width: min(62%, 500px);

        min-height: 410px;

        opacity: .72;
    }


    .hero-origin-product {
        min-height: 400px;
    }


    .hero-origin-product img {
        max-height: 385px;
    }


    .hero-coffee-stack {
        height: 390px;
    }


    .hero-coffee-bag {
        width: 190px;
    }


    .hero-construction-stage,
    .hero-farm-stage {
        height: 385px;
        min-height: 385px;
    }


    .hero-services-stage {
        transform:
            scale(.86);

        transform-origin:
            right bottom;
    }
}


@media (max-width: 600px) {

    .hero.hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 860px;
    }


    .hero-carousel-grid {
        width:
            calc(100% - 30px);

        padding-top: 105px;
    }


    .hero-slide::after {
        background:
            linear-gradient(
                180deg,
                rgba(20,6,6,.92) 0%,
                rgba(17,7,7,.84) 50%,
                rgba(6,9,12,.69) 100%
            );
    }


    .hero-slide-eyebrow {
        margin-bottom: 18px;

        font-size: .62rem;
    }


    .hero-carousel-copy h1,
    .hero-carousel-copy h2 {
        font-size:
            clamp(
                2.9rem,
                14vw,
                4.2rem
            );

        line-height: .94;
    }


    .hero-carousel-description {
        font-size: .92rem;

        line-height: 1.55;
    }


    .hero-carousel-actions {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 24px;
    }


    .hero-carousel .hero-cta {
        width:
            min(
                100%,
                290px
            );
    }


    .hero-carousel-visual {
        right: -19%;
        bottom: 105px;

        width: 76%;

        opacity: .48;
    }


    .hero-origin-caption,
    .hero-coffee-tags {
        display: none;
    }


    .hero-farm-copy {
        right: 14px;
        bottom: 14px;
        left: 14px;
    }


    .hero-services-stage {
        grid-template-columns: 1fr 1fr;
    }


    .hero-service-card {
        min-height: 150px;

        padding: 17px;
    }


    .hero-carousel-controls {
        bottom: 23px;

        gap: 10px;
    }


    .hero-carousel-meta {
        min-width: 180px;
    }


    .hero-carousel-dots {
        bottom: 77px;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-slide,
    .hero-slide
    .hero-carousel-copy,
    .hero-slide
    .hero-carousel-visual {
        transition: none;
    }


    .hero-carousel-progress span {
        animation: none !important;
    }
}


@keyframes hero-carousel-progress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


/* ==========================================================
   HERO CAROUSEL V2 — BANNERS SIMPLIFICADOS
   - elimina visuales del lado derecho
   - centra todo el contenido
   - conserva textos, botones y navegación
   ========================================================== */

body[data-page="inicio"] .hero.hero-carousel {
    min-height: clamp(640px, 82vh, 860px);
}

body[data-page="inicio"] .hero.hero-carousel .hero-carousel-track,
body[data-page="inicio"] .hero.hero-carousel [data-hero-slide] {
    min-height: inherit;
}

body[data-page="inicio"] .hero.hero-carousel .hero-carousel-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 28px !important;
    min-height: clamp(640px, 82vh, 860px);
    text-align: center;
}

/* Ocultar todo el bloque visual derecho del slide */
body[data-page="inicio"] .hero.hero-carousel .hero-carousel-grid > :nth-child(2) {
    display: none !important;
}

/* Refuerzo por si existen variaciones de nombre */
body[data-page="inicio"] .hero.hero-carousel [class*="hero-"][class*="stage"],
body[data-page="inicio"] .hero.hero-carousel [class*="hero-"][class*="visual"],
body[data-page="inicio"] .hero.hero-carousel [class*="hero-"][class*="panel"]:not(.hero-carousel-copy):not(.hero-carousel-actions),
body[data-page="inicio"] .hero.hero-carousel [class*="hero-"][class*="media"]:not(.hero-carousel-copy):not(.hero-carousel-actions) {
    display: none !important;
}

body[data-page="inicio"] .hero.hero-carousel .hero-carousel-copy {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}

body[data-page="inicio"] .hero.hero-carousel .hero-slide-eyebrow {
    justify-content: center !important;
    text-align: center !important;
    margin-inline: auto !important;
}

body[data-page="inicio"] .hero.hero-carousel h1,
body[data-page="inicio"] .hero.hero-carousel #heroTitle {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-size: clamp(2.7rem, 5.7vw, 5.4rem) !important;
    line-height: 0.96 !important;
}

body[data-page="inicio"] .hero.hero-carousel .hero-carousel-description {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
    line-height: 1.7 !important;
}

body[data-page="inicio"] .hero.hero-carousel .hero-carousel-actions {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-top: 28px !important;
}

body[data-page="inicio"] .hero.hero-carousel .hero-cta,
body[data-page="inicio"] .hero.hero-carousel .hero-cta--primary,
body[data-page="inicio"] .hero.hero-carousel .hero-cta--secondary {
    min-height: 52px;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Si existe una línea de meta / datos auxiliares */
body[data-page="inicio"] .hero.hero-carousel .hero-carousel-meta,
body[data-page="inicio"] .hero.hero-carousel .hero-slide-meta,
body[data-page="inicio"] .hero.hero-carousel .hero-copy-meta {
    justify-content: center !important;
    text-align: center !important;
    margin-inline: auto !important;
}

/* Controles e indicadores centrados */
body[data-page="inicio"] .hero.hero-carousel .hero-carousel-controls,
body[data-page="inicio"] .hero.hero-carousel .hero-carousel-nav,
body[data-page="inicio"] .hero.hero-carousel .hero-carousel-footer {
    width: min(100%, 1120px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body[data-page="inicio"] .hero.hero-carousel .hero-carousel-dots,
body[data-page="inicio"] .hero.hero-carousel .hero-carousel-indicators {
    justify-content: center !important;
}

/* Ajuste de espaciamiento general del slide */
body[data-page="inicio"] .hero.hero-carousel [data-hero-slide] .container {
    padding-top: clamp(88px, 10vh, 126px) !important;
    padding-bottom: clamp(120px, 13vh, 160px) !important;
}

/* Móvil */
@media (max-width: 991px) {
    body[data-page="inicio"] .hero.hero-carousel {
        min-height: 680px;
    }

    body[data-page="inicio"] .hero.hero-carousel .hero-carousel-grid {
        min-height: 680px;
        gap: 22px !important;
    }

    body[data-page="inicio"] .hero.hero-carousel h1,
    body[data-page="inicio"] .hero.hero-carousel #heroTitle {
        font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
        line-height: 1 !important;
    }

    body[data-page="inicio"] .hero.hero-carousel .hero-carousel-description {
        max-width: 640px !important;
        font-size: 1rem !important;
    }

    body[data-page="inicio"] .hero.hero-carousel .hero-carousel-actions {
        gap: 12px !important;
    }

    body[data-page="inicio"] .hero.hero-carousel .hero-cta,
    body[data-page="inicio"] .hero.hero-carousel .hero-cta--primary,
    body[data-page="inicio"] .hero.hero-carousel .hero-cta--secondary {
        width: auto !important;
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    body[data-page="inicio"] .hero.hero-carousel .hero-carousel-copy {
        max-width: 100% !important;
    }

    body[data-page="inicio"] .hero.hero-carousel [data-hero-slide] .container {
        padding-top: 86px !important;
        padding-bottom: 126px !important;
    }

    body[data-page="inicio"] .hero.hero-carousel .hero-carousel-actions {
        flex-direction: column !important;
    }

    body[data-page="inicio"] .hero.hero-carousel .hero-cta,
    body[data-page="inicio"] .hero.hero-carousel .hero-cta--primary,
    body[data-page="inicio"] .hero.hero-carousel .hero-cta--secondary {
        width: min(100%, 340px) !important;
    }
}


/* ==========================================================
   HERO CAROUSEL V3
   AJUSTES DE LAYOUT Y ESPACIADO
   ========================================================== */

.hero.hero-carousel {
    min-height: clamp(780px, 92vh, 980px);
}

.hero-carousel-track,
.hero-slide {
    min-height: inherit;
}

.hero-carousel-grid {
    min-height: inherit;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    padding-top: clamp(110px, 12vh, 160px) !important;
    padding-bottom: clamp(120px, 12vh, 150px) !important;
}

.hero-carousel-copy {
    width: min(100%, 980px) !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.hero-slide-eyebrow {
    margin-bottom: 18px !important;
}

.hero-carousel-copy h1,
.hero-carousel-copy #heroTitle {
    max-width: 980px !important;
    margin: 0 auto 26px auto !important;

    font-size: clamp(4.3rem, 8vw, 7.6rem) !important;
    line-height: .92 !important;
    letter-spacing: -0.04em !important;
}

.hero-carousel-description {
    max-width: 840px !important;
    margin: 0 auto 34px auto !important;

    font-size: clamp(1.08rem, 1.5vw, 1.42rem) !important;
    line-height: 1.62 !important;
}

/* ----------------------------------------------------------
   BOTONES
   separarlos hacia izquierda y derecha
   dentro del bloque central
   ---------------------------------------------------------- */

.hero-carousel-actions {
    width: min(100%, 700px) !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 18px !important;
}

.hero-carousel-actions > *:first-child {
    justify-self: start !important;
}

.hero-carousel-actions > *:last-child {
    justify-self: end !important;
}

.hero-carousel-actions .hero-cta,
.hero-carousel-actions a,
.hero-carousel-actions button {
    min-width: 230px !important;
}

/* ----------------------------------------------------------
   CONTROLES INFERIORES
   quitar pausa y contador
   ---------------------------------------------------------- */

[data-hero-pause],
[data-hero-current],
[data-hero-total],
.hero-carousel-pause,
.hero-carousel-count,
.hero-carousel-counter,
.hero-carousel-status-count,
.hero-carousel-fraction {
    display: none !important;
}

/* si existe un wrapper especifico solo del contador */
.hero-carousel-meta .hero-carousel-count,
.hero-carousel-meta .hero-carousel-counter,
.hero-carousel-meta .hero-carousel-status-count {
    display: none !important;
}

/* mantener dots y flechas, redistribuir mejor */
.hero-carousel-dots {
    margin-top: 10px !important;
    justify-content: center !important;
}

.hero-carousel-nav,
.hero-carousel-controls {
    width: min(100%, 1100px) !important;
    margin: 0 auto !important;
}

/* flechas mas limpias */
[data-hero-prev],
[data-hero-next] {
    width: 54px !important;
    height: 54px !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .hero-carousel-copy {
        width: min(100%, 880px) !important;
    }

    .hero-carousel-copy h1,
    .hero-carousel-copy #heroTitle {
        font-size: clamp(3.6rem, 8vw, 6rem) !important;
        max-width: 860px !important;
    }

    .hero-carousel-description {
        max-width: 740px !important;
    }

    .hero-carousel-actions {
        width: min(100%, 620px) !important;
    }
}

@media (max-width: 768px) {
    .hero.hero-carousel {
        min-height: clamp(720px, 100svh, 920px);
    }

    .hero-carousel-grid {
        padding-top: 110px !important;
        padding-bottom: 100px !important;
    }

    .hero-carousel-copy h1,
    .hero-carousel-copy #heroTitle {
        font-size: clamp(2.7rem, 11vw, 4.4rem) !important;
        line-height: .96 !important;
        max-width: 100% !important;
    }

    .hero-carousel-description {
        max-width: 100% !important;
        font-size: 1rem !important;
        line-height: 1.58 !important;
        margin-bottom: 26px !important;
    }

    .hero-carousel-actions {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .hero-carousel-actions > *:first-child,
    .hero-carousel-actions > *:last-child {
        justify-self: center !important;
    }

    .hero-carousel-actions .hero-cta,
    .hero-carousel-actions a,
    .hero-carousel-actions button {
        min-width: min(100%, 290px) !important;
    }
}



/* ==========================================================
   HERO CAROUSEL V4
   CORRECCION DE LAYOUT
   ========================================================== */


/* ----------------------------------------------------------
   1. MAS AIRE REAL EN LA PARTE SUPERIOR

   Selector deliberadamente mas especifico para superar
   las reglas heredadas de la V2.
   ---------------------------------------------------------- */

body[data-page="inicio"]
.hero.hero-carousel
[data-hero-slide]
.hero-carousel-grid {
    min-height: clamp(800px, 92vh, 980px) !important;

    padding-top:
        clamp(155px, 17vh, 205px) !important;

    padding-bottom:
        clamp(125px, 14vh, 165px) !important;

    align-items:
        flex-start !important;
}


/* Mantener bloque editorial centrado */

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-copy {
    width: min(100%, 980px) !important;

    max-width: 980px !important;

    margin:
        0
        auto !important;

    text-align:
        center !important;
}


/* ----------------------------------------------------------
   2. RESTAURAR LOS CTA

   Ambos botones vuelven a estar juntos debajo del texto.
   ---------------------------------------------------------- */

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-actions {
    display: flex !important;

    width: auto !important;

    max-width: none !important;

    align-items: center !important;
    justify-content: center !important;

    flex-wrap: wrap !important;

    gap: 14px !important;

    margin:
        30px
        auto
        0 !important;
}


body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-actions
> *:first-child,

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-actions
> *:last-child {
    justify-self:
        auto !important;
}


body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-actions
.hero-cta {
    width: auto !important;

    min-width: 190px !important;

    max-width: none !important;
}


/* ----------------------------------------------------------
   3. CONTROLES DEL CARRUSEL

   El wrapper ocupa el hero completo.
   Las flechas se posicionan independientemente.
   ---------------------------------------------------------- */

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-controls {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        30 !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    pointer-events:
        none;
}


/* Flecha izquierda */

body[data-page="inicio"]
.hero.hero-carousel
[data-hero-prev] {
    position:
        absolute !important;

    top:
        50% !important;

    left:
        clamp(20px, 3vw, 48px) !important;

    right:
        auto !important;

    bottom:
        auto !important;

    transform:
        translateY(-50%) !important;

    pointer-events:
        auto;
}


/* Flecha derecha */

body[data-page="inicio"]
.hero.hero-carousel
[data-hero-next] {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        clamp(20px, 3vw, 48px) !important;

    left:
        auto !important;

    bottom:
        auto !important;

    transform:
        translateY(-50%) !important;

    pointer-events:
        auto;
}


/* Flechas ligeramente mas grandes y premium */

body[data-page="inicio"]
.hero.hero-carousel
[data-hero-prev],

body[data-page="inicio"]
.hero.hero-carousel
[data-hero-next] {
    width:
        56px !important;

    height:
        56px !important;

    border-color:
        rgba(255,255,255,.42) !important;

    background:
        rgba(5,8,11,.42) !important;

    backdrop-filter:
        blur(12px);
}


/* ----------------------------------------------------------
   4. BARRA DE PROGRESO ABAJO

   El contador permanece oculto.
   ---------------------------------------------------------- */

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-meta {
    position:
        absolute !important;

    bottom:
        38px !important;

    left:
        50% !important;

    display:
        flex !important;

    width:
        min(280px, 38vw) !important;

    min-width:
        0 !important;

    transform:
        translateX(-50%) !important;

    pointer-events:
        none;
}


body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-counter,

body[data-page="inicio"]
.hero.hero-carousel
[data-hero-current],

body[data-page="inicio"]
.hero.hero-carousel
[data-hero-pause],

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-pause {
    display:
        none !important;
}


/* La barra ocupa el ancho disponible */

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-progress {
    width:
        100% !important;

    flex:
        1 1 auto !important;
}


/* Dots algo por encima de la barra */

body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-dots {
    bottom:
        72px !important;
}


/* ----------------------------------------------------------
   5. TABLET
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-slide]
    .hero-carousel-grid {
        padding-top:
            135px !important;

        padding-bottom:
            130px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-prev] {
        left:
            16px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-next] {
        right:
            16px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-prev],

    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-next] {
        width:
            48px !important;

        height:
            48px !important;
    }
}


/* ----------------------------------------------------------
   6. MOVIL
   ---------------------------------------------------------- */

@media (max-width: 640px) {

    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-slide]
    .hero-carousel-grid {
        padding-top:
            120px !important;

        padding-bottom:
            130px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-carousel-actions {
        flex-direction:
            column !important;

        gap:
            11px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-carousel-actions
    .hero-cta {
        width:
            min(100%, 300px) !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-prev],

    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-next] {
        top:
            54% !important;

        width:
            42px !important;

        height:
            42px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-prev] {
        left:
            8px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    [data-hero-next] {
        right:
            8px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-carousel-meta {
        width:
            180px !important;
    }
}


/* ==========================================================
   HERO CAROUSEL V5
   AJUSTE FINO FINAL
   - ocultar dots y linea
   - corregir centrado de titulos en todos los slides
   ========================================================== */

/* ----------------------------------------------------------
   1) QUITAR INDICADORES VISUALES DEL CARRUSEL
   ---------------------------------------------------------- */

.hero-carousel [data-hero-dot],
.hero-carousel-dots,
.hero-carousel-progress,
.hero-carousel-progressbar,
.hero-carousel-line,
.hero-carousel-indicators,
.hero-carousel-pagination,
.hero-carousel-counter,
.hero-carousel-status,
.hero-carousel .hero-dots,
.hero-carousel .hero-line,
.hero-carousel .hero-progress,
.hero-carousel .hero-pagination,
.hero-carousel .hero-status {
    display: none !important;
}


/* ----------------------------------------------------------
   2) NORMALIZAR EL BLOQUE DE CONTENIDO DE TODOS LOS SLIDES
   ---------------------------------------------------------- */

.hero.hero-carousel .hero-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero.hero-carousel .hero-carousel-grid {
    min-height: clamp(700px, 84vh, 920px);

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding-top: clamp(128px, 15vh, 170px) !important;
    padding-bottom: clamp(110px, 13vh, 150px) !important;
}

.hero.hero-carousel .hero-carousel-copy {
    width: min(100%, 1040px) !important;

    margin-inline: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}

/* eyebrow */
.hero.hero-carousel .hero-slide-eyebrow,
.hero.hero-carousel .hero-carousel-copy .hero-slide-eyebrow,
.hero.hero-carousel .hero-carousel-copy .eyebrow {
    width: auto !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 22px !important;

    text-align: center !important;
    justify-content: center !important;
}

/* titulo */
.hero.hero-carousel .hero-carousel-copy h1,
.hero.hero-carousel .hero-carousel-copy h2,
.hero.hero-carousel .hero-carousel-copy .hero-title {
    width: min(100%, 980px) !important;
    max-width: 980px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 28px !important;

    text-align: center !important;
    line-height: 0.93 !important;
}

/* descripcion */
.hero.hero-carousel .hero-carousel-copy p:not(.hero-slide-eyebrow),
.hero.hero-carousel .hero-carousel-description,
.hero.hero-carousel .hero-carousel-copy .hero-description {
    width: min(100%, 860px) !important;
    max-width: 860px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 34px !important;

    text-align: center !important;
}

/* CTA conservados centrados */
.hero.hero-carousel .hero-carousel-actions {
    width: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
}

/* evitar corrimientos raros por slide */
.hero.hero-carousel [data-hero-slide] .hero-carousel-copy > * {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* ----------------------------------------------------------
   3) RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    .hero.hero-carousel .hero-carousel-grid {
        padding-top: 118px !important;
        padding-bottom: 100px !important;
    }

    .hero.hero-carousel .hero-carousel-copy h1,
    .hero.hero-carousel .hero-carousel-copy h2,
    .hero.hero-carousel .hero-carousel-copy .hero-title {
        width: min(100%, 92vw) !important;
    }

    .hero.hero-carousel .hero-carousel-description,
    .hero.hero-carousel .hero-carousel-copy p:not(.hero-slide-eyebrow),
    .hero.hero-carousel .hero-carousel-copy .hero-description {
        width: min(100%, 88vw) !important;
    }
}

@media (max-width: 767.98px) {
    .hero.hero-carousel .hero-carousel-grid {
        padding-top: 108px !important;
        padding-bottom: 90px !important;
    }

    .hero.hero-carousel .hero-carousel-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
}


/* ==========================================================
   HERO CAROUSEL V6
   AJUSTE DE AIRE SUPERIOR + CENTRADO VERTICAL
   ========================================================== */

.hero.hero-carousel {
    min-height: clamp(760px, 92vh, 980px);
}

.hero-carousel-track,
.hero-slide {
    min-height: inherit;
}

.hero-slide {
    display: flex;
    align-items: stretch;
}

.hero-carousel-grid {
    min-height: clamp(760px, 92vh, 980px);

    display: grid;
    place-items: center;

    padding-top: clamp(130px, 14vh, 170px) !important;
    padding-bottom: clamp(90px, 10vh, 130px) !important;
}

.hero-carousel-copy {
    width: min(100%, 980px);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    transform: translateY(18px);
}

.hero-carousel-copy > * {
    margin-left: auto;
    margin-right: auto;
}

.hero-carousel-copy h1,
.hero-carousel-copy .hero-title,
.hero-slide h1,
.hero-slide h2 {
    text-align: center !important;
}

.hero-carousel-description,
.hero-slide p {
    text-align: center;
}

.hero-carousel-actions {
    margin-top: 34px;
    justify-content: center;
    align-items: center;
    gap: 26px;
}


/* mantener ocultos dots y linea */
.hero-carousel-progress,
.hero-carousel-line,
.hero-carousel-dots,
.hero-carousel-dot-nav,
.hero-carousel-indicators,
.hero-carousel-counter,
.hero-carousel-status {
    display: none !important;
}


/* mantener flechas laterales */
.hero-carousel-control--prev {
    left: 40px !important;
}

.hero-carousel-control--next {
    right: 40px !important;
}


/* responsive */
@media (max-width: 1200px) {
    .hero-carousel-grid {
        padding-top: 140px !important;
        padding-bottom: 100px !important;
    }

    .hero-carousel-copy {
        width: min(100%, 860px);
        transform: translateY(10px);
    }
}

@media (max-width: 768px) {
    .hero-carousel-grid {
        min-height: auto;
        padding-top: 130px !important;
        padding-bottom: 90px !important;
    }

    .hero-carousel-copy {
        width: 100%;
        transform: none;
    }

    .hero-carousel-actions {
        gap: 16px;
    }

    .hero-carousel-control--prev {
        left: 18px !important;
    }

    .hero-carousel-control--next {
        right: 18px !important;
    }
}


/* ==========================================================
   HERO CAROUSEL V7
   CORRECCION DEFINITIVA DE POSICION VERTICAL

   La regla is-active original tenia mayor especificidad
   y anulaba el desplazamiento de V6.
   ========================================================== */


/* Más aire visual debajo del header */
body[data-page="inicio"]
.hero.hero-carousel
.hero-carousel-grid {
    padding-top: 155px !important;
    padding-bottom: 85px !important;
}


/* Desplazar REALMENTE todo el bloque editorial hacia abajo */
body[data-page="inicio"]
.hero.hero-carousel
.hero-slide
.hero-carousel-copy,

body[data-page="inicio"]
.hero.hero-carousel
.hero-slide.is-active
.hero-carousel-copy {
    transform: translateY(62px) !important;
}


/* Mantener exactamente la animación de opacidad */
body[data-page="inicio"]
.hero.hero-carousel
.hero-slide
.hero-carousel-copy {
    transition:
        opacity 650ms ease 160ms,
        transform 750ms ease 160ms !important;
}


/* Tablet */
@media (max-width: 900px) {

    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-carousel-grid {
        padding-top: 135px !important;
        padding-bottom: 90px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-slide
    .hero-carousel-copy,

    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-slide.is-active
    .hero-carousel-copy {
        transform: translateY(45px) !important;
    }
}


/* Móvil */
@media (max-width: 640px) {

    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-carousel-grid {
        padding-top: 120px !important;
        padding-bottom: 90px !important;
    }


    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-slide
    .hero-carousel-copy,

    body[data-page="inicio"]
    .hero.hero-carousel
    .hero-slide.is-active
    .hero-carousel-copy {
        transform: translateY(28px) !important;
    }
}