/* ======= estilos base ======= */
.ibm {
    background: #fff;
    border-radius: 12px;
    overflow: hidden
}

.ibm__wrap {
    max-width: 1100px;
    margin: 24px auto;
    padding: 12px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    min-height: 560px
}

.left_side, .machine, .phone_container {
    position: relative
}

/* ======= izquierda ======= */
.left_side {
    width: 90px;
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 0
}

    .left_side .lines {
        height: 6px;
        background: linear-gradient(90deg,#9ec5d4,#cfe4ec);
        border-radius: 4px;
        position: relative;
        overflow: hidden
    }

        .left_side .lines:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,transparent,#fff,transparent);
            transform: translateX(-100%);
            animation: scan 2.2s linear infinite
        }

@keyframes scan {
    to {
        transform: translateX(100%)
    }
}

/* ======= máquina ======= */
.machine {
    flex: 1;
    min-width: 420px
}

.hopper {
    height: 90px;
    display: flex;
    align-items: flex-end;
    gap: 8px
}

.smoke_container {
    position: relative;
    width: 110px;
    height: 70px
}

.smoke {
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 16px;
    height: 16px;
    background: #dde7ee;
    border-radius: 50%;
    opacity: 0;
    transform: translateY(0) scale(.8)
}

    .smoke.s1 {
        animation: smk 3.6s ease-in-out infinite .2s
    }

    .smoke.s2 {
        animation: smk 3.9s ease-in-out infinite .8s
    }

    .smoke.s3 {
        animation: smk 4.2s ease-in-out infinite 1.1s
    }

@keyframes smk {
    10% {
        opacity: .6
    }

    60% {
        opacity: .2
    }

    100% {
        transform: translateY(-60px) scale(1.4);
        opacity: 0
    }
}

.middle_box {
    width: 120px;
    height: 46px;
    border: 2px solid #96b7c7;
    border-radius: 6px;
    background: #f3f8fb
}

.base {
    height: 14px;
    background: #244a5c;
    border-radius: 4px;
    flex: 1
}

.machine_box {
    position: relative;
    border: 2px solid #96b7c7;
    background: #c6d7e0;
    padding: 12px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 3px #e6eff4
}

/* indicadores */
.circle_indicator {
    width: 88px;
    height: 88px;
    border: 2px solid #244a5c;
    border-radius: 50%;
    background: #f8fbfd;
    margin-right: 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0
}

    .circle_indicator .gauge {
        position: relative;
        width: 68px;
        height: 40px;
        border: 2px solid #244a5c;
        border-bottom: none;
        border-top-left-radius: 68px;
        border-top-right-radius: 68px;
        margin-top: 6px;
        background: #fff
    }

    .circle_indicator .niddle {
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 2px;
        height: 40px;
        background: #e4572e;
        transform-origin: 50% 100%;
        animation: needle 2.4s ease-in-out infinite
    }

    .circle_indicator .cap {
        width: 44px;
        height: 10px;
        background: #244a5c;
        border-radius: 6px;
        margin-bottom: 8px
    }

@keyframes needle {
    0% {
        transform: translateX(-50%) rotate(-35deg)
    }

    50% {
        transform: translateX(-50%) rotate(35deg)
    }

    100% {
        transform: translateX(-50%) rotate(-35deg)
    }
}

/* barras */
.bars_container {
    display: inline-flex;
    gap: 8px;
    vertical-align: top;
    margin-left: 10px
}

.bar {
    width: 18px;
    height: 90px;
    background: #e6eef3;
    border: 2px solid #244a5c;
    border-radius: 6px;
    position: relative;
    overflow: hidden
}

    .bar .dot {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #244a5c;
        animation: dotmove 1.8s ease-in-out infinite
    }

    .bar:nth-child(2) .dot {
        animation-delay: .3s
    }

    .bar:nth-child(3) .dot {
        animation-delay: .6s
    }

    .bar:nth-child(4) .dot {
        animation-delay: .9s
    }

@keyframes dotmove {
    0% {
        top: 72px
    }

    50% {
        top: 6px
    }

    100% {
        top: 72px
    }
}

/* medidores */
.meters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px
}

.meter_up_down {
    width: 16px;
    height: 76px;
    border: 2px solid #244a5c;
    border-radius: 6px;
    background: #f8fbfd;
    position: relative;
    overflow: hidden
}

    .meter_up_down .inner {
        position: absolute;
        left: 2px;
        right: 2px;
        bottom: 2px;
        height: 20px;
        background: #2a9d8f;
        border-radius: 4px;
        animation: ud 1.9s ease-in-out infinite
    }

    .meter_up_down.m2 .inner {
        animation-delay: .5s
    }

@keyframes ud {
    0% {
        height: 16px
    }

    50% {
        height: 62px
    }

    100% {
        height: 16px
    }
}

.vertical_meter {
    width: 26px;
    height: 76px;
    border: 2px solid #244a5c;
    border-radius: 6px;
    background: #f8fbfd;
    position: relative
}

    .vertical_meter .pin {
        position: absolute;
        left: 4px;
        right: 4px;
        top: 36px;
        height: 4px;
        background: #e4572e;
        animation: pin 2.2s ease-in-out infinite
    }

@keyframes pin {
    0% {
        top: 64px
    }

    50% {
        top: 10px
    }

    100% {
        top: 64px
    }
}

.dial {
    width: 56px;
    height: 56px;
    border: 2px solid #244a5c;
    border-radius: 50%;
    position: relative;
    background: #f8fbfd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px
}

    .dial .inner {
        width: 36px;
        height: 36px;
        border: 2px solid #244a5c;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #244a5c;
        font-weight: 700
    }

.row2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px
}

.hmeters {
    display: flex;
    gap: 8px
}

.h_meter {
    width: 90px;
    height: 16px;
    border: 2px solid #244a5c;
    border-radius: 6px;
    background: #f8fbfd;
    position: relative;
    overflow: hidden
}

    .h_meter .pin {
        position: absolute;
        top: 2px;
        left: 2px;
        right: auto;
        width: 20px;
        bottom: 2px;
        background: #2a9d8f;
        border-radius: 4px;
        animation: hslide 1.9s ease-in-out infinite
    }

    .h_meter.hm2 .pin {
        animation-delay: .5s
    }

@keyframes hslide {
    0% {
        left: 2px;
        width: 22px
    }

    50% {
        left: 65px;
        width: 18px
    }

    100% {
        left: 2px;
        width: 22px
    }
}

/* humos laterales */
.smoke_side {
    position: absolute;
    bottom: 10px
}

    .smoke_side.sL {
        left: -12px
    }

    .smoke_side.sR {
        right: -12px
    }

    .smoke_side .smoke {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #e7f0f6;
        border-radius: 50%;
        margin: 0 4px;
        opacity: 0;
        transform: translateY(0)
    }

        .smoke_side .smoke:nth-child(1) {
            animation: smk 3s ease-in-out infinite
        }

        .smoke_side .smoke:nth-child(2) {
            animation: smk 3.4s ease-in-out infinite .6s
        }

/* tubería y flujos */
.pipe {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 120px;
    height: 12px;
    background: #244a5c;
    border-radius: 6px;
    transform: translateX(-50%)
}

    .pipe .flow {
        position: absolute;
        top: 2px;
        left: 6px;
        width: 22px;
        height: 8px;
        background: linear-gradient(90deg,#fff,rgba(255,255,255,.2));
        border-radius: 4px;
        animation: flow 1.4s linear infinite
    }

        .pipe .flow:nth-child(2) {
            animation-delay: .7s
        }

@keyframes flow {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(88px)
    }
}

/* elementos en curso */
.ongoing {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #e4572e;
    border-radius: 50%;
    opacity: .9;
    animation: og 2.8s linear infinite
}

.o1 {
    left: 10%;
    top: 40%
}

.o2 {
    left: 22%;
    top: 44%;
    animation-delay: .4s
}

.o3 {
    left: 34%;
    top: 36%;
    animation-delay: .8s
}

.o4 {
    left: 46%;
    top: 42%;
    animation-delay: 1.2s
}

@keyframes og {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }

    100% {
        transform: translateY(0)
    }
}

/* ======= teléfono (derecha) ======= */
.phone_container {
    width: 300px;
    display: flex;
    align-items: flex-end;
    gap: 10px
}

.top_plug {
    width: 60px;
    height: 10px;
    border-radius: 6px;
    border: 2px solid #244a5c;
    background: #f8fbfd
}

.phone {
    flex: 1;
    border: 2px solid #244a5c;
    border-radius: 22px;
    background: #f5f9fb;
    overflow: hidden;
    box-shadow: inset 0 0 0 3px #e6eff4
}

    .phone .top {
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eaf2f7
    }

    .phone .speaker {
        width: 60px;
        height: 6px;
        border-radius: 6px;
        background: #bcd0db
    }

    .phone .screen {
        position: relative;
        height: 360px;
        margin: 10px;
        border: 2px solid #244a5c;
        border-radius: 14px;
        background: #ffffff;
        overflow: hidden
    }

    .phone .bottom {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eaf2f7
    }

    .phone .btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #244a5c;
        background: #fff
    }

/* “contenido” animado de la pantalla (barras) */
.screen .blk {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 10px;
    background: #e9f1f6;
    border-radius: 6px
}

.b1 {
    top: 16px;
    animation: blink 2.2s ease-in-out infinite
}

.b2 {
    top: 36px
}

.b3 {
    top: 56px;
    animation: blink 2.6s ease-in-out infinite .3s
}

.b4 {
    top: 86px
}

.b5 {
    top: 106px;
    animation: blink 2.4s ease-in-out infinite .5s
}

.b6 {
    top: 136px
}

.b7 {
    top: 176px
}

.b8 {
    top: 206px;
    animation: blink 2.8s ease-in-out infinite .7s
}

.b9 {
    bottom: 56px
}

.b10 {
    bottom: 26px;
    animation: blink 2.3s ease-in-out infinite .9s
}

@keyframes blink {
    50% {
        opacity: .6
    }
}

/* panel de texto DENTRO de la pantalla (lado derecho) */
.ib-text {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 58%;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    padding: 12px 14px;
    color: #111;
    pointer-events: none
}

    .ib-text .kicker {
        font: 700 10px/1 system-ui,Segoe UI,Roboto,sans-serif;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #666;
        margin-bottom: 6px
    }

    .ib-text .title {
        margin: 0 0 6px;
        font-weight: 800;
        font-size: 16px;
        line-height: 1.2
    }

    .ib-text .body {
        margin: 0;
        color: #444;
        font-size: 13px;
        line-height: 1.45
    }

.caret {
    display: inline-block;
    margin-left: 3px
}

/* responsive mínimo */
@media (max-width: 980px) {
    .ibm__wrap {
        flex-direction: column;
        align-items: center
    }

    .phone_container {
        width: 100%;
        justify-content: center
    }

    .ib-text {
        position: absolute;
        right: 10px;
        left: 10px;
        width: auto
    }
}







/* ===== Envoltura (fondo blanco) ===== */
.ib-3d-cards {
    background: #fff;
    padding: clamp(28px, 5vw, 72px) 0;
    display: grid;
    place-items: center;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Slideshow con los mismos principios del Pen =====
   - Cada .slide usa --i para escalonar el delay
   - Bucle infinito con duración calculada por --count * --step
*/
.slideshow {
    position: relative;
    width: 360px;
    height: 480px;
    transform-style: preserve-3d;
    perspective: 1000px;
    /* Control de tiempo por CSS vars */
    --count: 6; /* se sobreescribe inline (8) */
    --step: 35s; /* se sobreescribe inline (5s) */
    --dur: calc(var(--count) * var(--step));
}

    .slideshow .slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: start;
        justify-content: start;
        transform: rotateY(270deg);
        transform-style: preserve-3d;
        animation: animate var(--dur) linear infinite;
        animation-delay: calc(var(--i) * var(--step)); /* <- igual al Pen */
    }

/* Animación del Pen: el “frente” está entre 0% y 10% del ciclo de cada slide */
@keyframes animate {
    0% {
        transform: rotateY(270deg);
    }

    10%, 100% {
        transform: rotateY(90deg);
    }
}

/* Imagen de fondo de cada tarjeta */
.slideshow .slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    filter: contrast(1.03) saturate(1.03);
}

/* Título (igual orientación del Pen con rotateY 180 y Z para “flotar”) */
.slideshow .slide h2 {
    position: relative;
    z-index: 2;
    color: #000; /* texto oscuro para fondo blanco/mixto */
    font-size: 2.1em;
    font-weight: 900;
    transform: rotateY(180deg) translateY(80px) translateZ(60px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    line-height: 0.95;
}

    .slideshow .slide h2 span {
        position: absolute;
        top: 52%;
        left: 0;
        font-size: .65em;
        font-weight: 300;
        letter-spacing: .5px;
        transform: translateZ(60px);
        backface-visibility: hidden;
        color: #111;
    }

/* Meta extra (lista + CTA) también “mirando” a cámara */
.slideshow .slide .meta {
    position: relative;
    z-index: 2;
    transform: rotateY(180deg) translateY(150px) translateZ(60px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,.88);
    border-radius: 12px;
    margin-left: 6px;
}

    .slideshow .slide .meta ul {
        margin: 0;
        padding-left: 18px;
        color: #222;
        font-size: .92rem;
    }

    .slideshow .slide .meta li {
        margin: 2px 0;
    }

    .slideshow .slide .meta .cta {
        justify-self: start;
        display: inline-block;
        text-decoration: none;
        font-weight: 700;
        background: #0ea5e9;
        color: #fff;
        padding: .45rem .7rem;
        border-radius: 10px;
        box-shadow: 0 10px 22px rgba(14,165,233,.25);
    }

/* Responsive (opcional) */
@media (max-width: 520px) {
    .slideshow {
        width: 320px;
        height: 430px;
    }

        .slideshow .slide h2 {
            transform: rotateY(180deg) translateY(70px) translateZ(55px);
        }

        .slideshow .slide .meta {
            transform: rotateY(180deg) translateY(135px) translateZ(55px);
        }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
    .slideshow .slide {
        animation: none;
        transform: rotateY(90deg);
    }
}

/* ====== TIPOGRAFÍA MÁS GRANDE (overrides) ====== */
.slideshow {
    /* Ajusta estos valores a tu gusto */
    --title-size: 6em; /* antes 2.1em */
    --subtitle-size: 2.9em; /* antes .65em */
    --meta-size: 1.25rem; /* antes .92rem */
    /* Compensa el nuevo tamaño moviendo el texto */
    --title-shift: 150px; /* antes 80px (sube el título) */
    --meta-shift: 165px; /* antes 150px (baja meta) */
}

    /* Título grande */
    .slideshow .slide h2 {
        font-size: var(--title-size);
        transform: rotateY(180deg) translateY(var(--title-shift)) translateZ(60px);
    }

        /* Subtítulo más grande */
        .slideshow .slide h2 span {
            font-size: var(--subtitle-size);
        }

    /* Meta (lista + CTA) más grande y recolocada */
    .slideshow .slide .meta {
        font-size: var(--meta-size);
        transform: rotateY(180deg) translateY(var(--meta-shift)) translateZ(60px);
    }

        /* Botón ligeramente más grande */
        .slideshow .slide .meta .cta {
            font-size: calc(var(--meta-size) * 0.95);
        }

/* (Opcional) haz también la tarjeta un poco más grande para que respire */
.slideshow {
    width: 400px; /* antes 360px */
    height: 540px; /* antes 480px */
}

/* Responsivo: baja un poco en móviles para que no se corte */
@media (max-width: 520px) {
    .slideshow {
        width: 340px;
        height: 460px;
    }

    .slideshow {
        --title-size: 2.4em;
        --subtitle-size: .8em;
        --meta-size: 1rem;
        --title-shift: 60px;
        --meta-shift: 140px;
    }
}











/* ===== Variables y base (hereda de la versión previa) */
.features.ib-styled.v2 {
    --ib-line: #0ea5e9;
    --ib-muted: #475569;
    --ib-text: #0f172a;
    --ib-stroke: rgba(2,6,23,.10);
    --ib-glow: rgba(14,165,233,.25);
    --ib-card: rgba(255,255,255,.82);
    background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.06), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(99,102,241,.06), transparent 60%), linear-gradient(180deg, #f3f7ff, #ffffff);
    padding-top: 70px;
    padding-bottom: 80px;
}

    .features.ib-styled.v2 .navy-line {
        width: 84px;
        height: 4px;
        margin: 0 auto 16px;
        background: linear-gradient(90deg,var(--ib-line),#60a5fa);
        border-radius: 999px
    }

    .features.ib-styled.v2 h1 {
        font-weight: 800;
        letter-spacing: .2px;
        margin-bottom: 10px;
        color: var(--ib-text)
    }

    .features.ib-styled.v2 p {
        color: var(--ib-muted);
        margin-bottom: 36px
    }

    /* Tarjetas laterales “glass” */
    .features.ib-styled.v2 .ib-card {
        background: var(--ib-card);
        border: 1px solid var(--ib-stroke);
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 20px 60px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.25);
        backdrop-filter: blur(6px);
    }

    .features.ib-styled.v2 .ib-card--right {
        text-align: right
    }

    .features.ib-styled.v2 .ib-card h2 {
        font-size: 1.35rem;
        font-weight: 800;
        margin: 4px 0 10px;
        color: var(--ib-text)
    }

    .features.ib-styled.v2 .ib-card p {
        color: var(--ib-muted);
        margin-bottom: 14px
    }

    .features.ib-styled.v2 .ib-pill {
        display: inline-block;
        background: #fff;
        color: var(--ib-text);
        font-weight: 800;
        font-size: .72rem;
        letter-spacing: .3px;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid var(--ib-stroke);
        box-shadow: 0 10px 22px rgba(2,6,23,.06)
    }

    .features.ib-styled.v2 .ib-btn {
        border-radius: 12px;
        border: 0;
        font-weight: 700;
        background: linear-gradient(180deg,#0ea5e9,#0369a1);
        box-shadow: 0 10px 28px var(--ib-glow)
    }

        .features.ib-styled.v2 .ib-btn:hover {
            filter: brightness(1.05);
            transform: translateY(-1px)
        }

    /* Video marco */
    .features.ib-styled.v2 .ib-video-wrap {
        position: relative;
        padding: 18px;
        border-radius: 20px;
        background: #ffffffcc;
        border: 1px solid var(--ib-stroke);
        box-shadow: 0 20px 60px rgba(2,6,23,.10)
    }

        .features.ib-styled.v2 .ib-video-wrap::before {
            content: "";
            position: absolute;
            inset: -8% -6%;
            background: radial-gradient(50% 60% at 50% 40%, rgba(14,165,233,.18), transparent 70%);
            filter: blur(30px);
            border-radius: 24px;
            z-index: 0
        }

    .features.ib-styled.v2 .ib-video-frame {
        position: relative;
        z-index: 1;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 12px 34px rgba(2,6,23,.16), 0 0 0 1px rgba(2,6,23,.06) inset;
        background: #000;
        aspect-ratio: 16/9
    }

        .features.ib-styled.v2 .ib-video-frame > iframe {
            width: 100%;
            height: 100%;
            display: block;
            border: 0
        }

@supports not (aspect-ratio:16/9) {
    .features.ib-styled.v2 .ib-video-frame {
        position: relative;
        height: 0;
        padding-top: 56.25%
    }

        .features.ib-styled.v2 .ib-video-frame > iframe {
            position: absolute;
            inset: 0
        }
}

/* ===== Modales “cool” ===== */
.ib-modal .modal-content.ib-modal__content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255,255,255,.9);
    box-shadow: 0 30px 90px rgba(2,6,23,.25);
    backdrop-filter: blur(8px);
}

.ib-modal__header {
    padding: 18px 20px;
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .ib-modal__header .modal-title {
        margin: 0;
        font-weight: 800;
        letter-spacing: .2px
    }

.ib-modal__body {
    padding: 18px 20px
}

.ib-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    opacity: .9
}

    .ib-close:hover {
        opacity: 1
    }

/* Chips + lista con checks */
.ib-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px
}

.ib-chip {
    background: #eef6ff;
    color: #0f172a;
    border: 1px solid rgba(2,6,23,.08);
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .82rem
}

.ib-list {
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
}

    .ib-list li {
        position: relative;
        padding-left: 28px;
        margin: 10px 0;
        color: #334155
    }

        .ib-list li:before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: conic-gradient(#0ea5e9, #22c55e);
            box-shadow: 0 6px 16px rgba(14,165,233,.25);
            mask: radial-gradient(circle 9px at 9px 9px,#0000 8px,#000 8px);
        }

.ib-modal__cta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px
}

    .ib-modal__cta .btn-link {
        color: #0ea5e9;
        font-weight: 700;
        text-decoration: none
    }

/* Responsive */
@media (max-width: 575px) {
    .features.ib-styled.v2 h1 {
        font-size: 1.6rem
    }

    .features.ib-styled.v2 .ib-card h2 {
        font-size: 1.15rem
    }
}

/* Solo invierte la imagen de la tarjeta (si no quieres tocar el archivo) */
.slideshow .slide img {
    transform: scaleX(-1);
}

























/* =========================
   PRICING – clon del snippet
   aplicado a #pricing
   ========================= */
#pricing {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

    /* Fondo animado tipo zoom */
    #pricing::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url('https://images.unsplash.com/photo-1542281286-9e0a16bb7366') center/cover no-repeat;
        filter: blur(8px) brightness(.7);
        animation: ib-bgZoom 20s infinite alternate;
    }

@keyframes ib-bgZoom {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.2)
    }
}

/* Layout 3D */
#pricing .row > [class*="col-"] {
    perspective: 1000px
}

/* Tarjeta (tu UL .pricing-plan) */
#pricing .pricing-plan {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,.5);
    transform: rotateY(20deg); /* estado base igual al snippet */
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform, box-shadow;
}

    /* overlay de líneas diagonales */
    #pricing .pricing-plan::before,
    #pricing .pricing-plan::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, transparent 75%, transparent);
        background-size: 50px 50px;
        transition: opacity .3s ease;
    }

    #pricing .pricing-plan:hover::before {
        opacity: 0
    }

    /* Hover (el JS también lo fuerza, pero dejamos fallback CSS) */
    #pricing .pricing-plan:hover {
        transform: rotateY(0) translateY(-20px);
        box-shadow: 0 0 50px rgba(255,255,255,.7), 0 0 100px rgba(255,255,255,.4);
    }

    /* Título de plan (li.pricing-title) estilo pill */
    #pricing .pricing-plan > li.pricing-title {
        display: block;
        margin: 0 auto 18px;
        width: 78%;
        background: #1abc9c;
        color: #fff;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        border-radius: 10px;
        padding: 10px 14px;
        border-top: none;
    }

    /* Descripción y precio (coinciden con tu estructura) */
    #pricing .pricing-plan > li.pricing-desc {
        color: rgba(255,255,255,.85);
        font-size: .95rem;
        line-height: 1.55;
        margin-bottom: 10px;
        border-top: none;
    }

    #pricing .pricing-plan > li.pricing-price {
        font-weight: 800;
        font-size: 1.55rem;
        margin: 10px 0 16px;
        border-top: none;
        color: #fff;
    }

        #pricing .pricing-plan > li.pricing-price span {
            display: block;
            font-size: 2rem;
            font-weight: 900;
            color: #2ee5b9;
        }

    /* Items */
    #pricing .pricing-plan > li {
        color: rgba(255,255,255,.9);
        padding: 9px 0;
        border-top: 1px dashed rgba(255,255,255,.12);
    }

    /* Botón (tu <a class="btn ...">) estilo del snippet */
    #pricing .pricing-plan a.btn {
        display: inline-block;
        border: 0;
        border-radius: 25px;
        padding: 10px 20px;
        font-weight: 700;
        text-decoration: none;
        color: #000;
        background: #fff;
        position: relative;
        z-index: 2;
        transition: background .3s ease, color .3s ease, transform .3s ease;
    }

        #pricing .pricing-plan a.btn:hover {
            background: #000;
            color: #fff;
            transform: scale(1.1)
        }

    /* Plan destacado (.selected de tu HTML) */
    #pricing .pricing-plan.selected {
        background: rgba(255,255,255,.85);
        color: #0b1220;
        border-color: rgba(11,18,32,.12);
    }

        #pricing .pricing-plan.selected > li {
            color: #0b1220;
            border-top: 1px dashed rgba(11,18,32,.12)
        }

            #pricing .pricing-plan.selected > li.pricing-desc {
                color: #5b6b83
            }

            #pricing .pricing-plan.selected > li.pricing-price span {
                color: #13a581
            }

/* Evita que WOW/animate cause “doble” animación visible */
#pricing .wow.zoomIn {
    animation: none !important
}


/* ===== Compactar altura de la sección ===== */
#pricing {
    padding-block: 36px;
}
    /* antes seguro eran 80–120px */

    /* recorta separaciones superiores / inferiores */
    #pricing .row.m-b-lg,
    #pricing .row.m-t-lg {
        margin: 16px 0 !important;
    }

    #pricing .container > .col-lg-12.text-center { /* el CTA suelto fuera de .row */
        margin: 10px 0 0;
    }

    /* tarjetas más delgadas */
    #pricing .pricing-plan {
        padding: 16px;
    }

        #pricing .pricing-plan > li {
            padding: 6px 0;
        }

            /* títulos y precios un poco más compactos */
            #pricing .pricing-plan > li.pricing-title {
                margin-bottom: 12px;
                padding: 8px 12px;
            }

            #pricing .pricing-plan > li.pricing-desc {
                margin-bottom: 8px;
            }

            #pricing .pricing-plan > li.pricing-price {
                margin: 8px 0 12px;
            }

        /* botón menos alto */
        #pricing .pricing-plan a.btn {
            padding: 9px 16px;
        }

        /* Hover con menos “salto” para no crecer visualmente */
        #pricing .pricing-plan:hover {
            transform: rotateY(0) translateY(-12px);
        }

    /* textos legales compactos */
    #pricing .m-t-lg p {
        margin: 4px 0;
        line-height: 1.35;
        font-size: .95rem;
    }

/* opcional: en móviles, aún más compacto */
@media (max-width: 767px) {
    #pricing {
        padding-block: 24px;
    }

        #pricing .row.m-b-lg, #pricing .row.m-t-lg {
            margin: 12px 0 !important;
        }

        #pricing .pricing-plan {
            padding: 14px;
        }

            #pricing .pricing-plan > li {
                padding: 5px 0;
            }
}





/* ===== CTA "Crear Cuenta" – Animado (scoped) ===== */
#pricing .row.m-b-lg {
    animation: ib-fadeUp .7s cubic-bezier(.2,.9,.2,1) both;
}

    #pricing .row.m-b-lg .navy-line {
        height: 4px;
        width: 160px;
        margin: 0 auto 10px;
        border-radius: 999px;
        background: linear-gradient(90deg,#22d3ee,#6366f1,#22d3ee);
        background-size: 200% 100%;
        animation: ib-line 2.8s linear infinite;
    }

    /* Título con brillo sutil */
    #pricing .row.m-b-lg h1 {
        font-weight: 900;
        letter-spacing: .2px;
        margin-bottom: 6px;
        background: linear-gradient(90deg,#ffffff,#c0e7ff,#ffffff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: ib-glow 8s linear infinite;
        text-shadow: 0 0 12px rgba(255,255,255,.15);
    }

    /* Subtítulo */
    #pricing .row.m-b-lg p {
        color: #e6f2ff;
        margin: 0 0 6px;
    }

    /* Badge: NO SE REQUIERE TARJETA */
    #pricing .row.m-b-lg .navy {
        display: inline-block;
        margin-left: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #10b981;
        color: #02130e;
        font-weight: 900;
        font-size: .82rem;
        box-shadow: 0 14px 30px -16px rgba(16,185,129,.95);
        position: relative;
        isolation: isolate;
        animation: ib-pillPulse 2.6s ease-in-out infinite 1.1s;
    }

        #pricing .row.m-b-lg .navy::before {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: inherit;
            background: radial-gradient(closest-side, rgba(16,185,129,.35), transparent 70%);
            filter: blur(6px);
            z-index: -1;
            animation: ib-pillAura 2.6s ease-in-out infinite 1.1s;
        }

/* CTA principal (solo el botón suelto debajo del título) */
#pricing > .col-lg-12.text-center .btn {
    --c1: #3b82f6;
    --c2: #8b5cf6;
    border: 0;
    border-radius: 14px;
    padding: 14px 26px;
    font-size: 1.05rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #fff;
    background: linear-gradient(120deg,var(--c1),var(--c2));
    box-shadow: 0 20px 42px -18px rgba(77,88,245,.9), inset 0 -2px 0 rgba(255,255,255,.12);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    animation: ib-ctaBreathe 4.5s ease-in-out infinite 1.2s, ib-pop .8s cubic-bezier(.2,.9,.2,1) both;
}

    #pricing > .col-lg-12.text-center .btn::after {
        content: "";
        position: absolute;
        top: -40%;
        left: -20%;
        width: 40%;
        height: 180%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-20deg) translateX(-160%);
        mix-blend-mode: screen;
        opacity: .75;
        animation: ib-shine 3.6s ease-in-out infinite;
    }

    #pricing > .col-lg-12.text-center .btn:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 26px 56px -22px rgba(77,88,245,1), inset 0 -2px 0 rgba(255,255,255,.12);
    }

/* Textos legales más compactos y legibles */
#pricing .row.m-t-lg p {
    color: #e6f2ff;
    line-height: 1.45;
    margin: 6px 0;
}

#pricing .row.m-t-lg a {
    color: #93c5fd;
}

/* ===== Animations ===== */
@keyframes ib-line {
    0% {
        background-position: 0% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes ib-glow {
    0% {
        text-shadow: 0 0 12px rgba(255,255,255,.12)
    }

    50% {
        text-shadow: 0 0 20px rgba(255,255,255,.22)
    }

    100% {
        text-shadow: 0 0 12px rgba(255,255,255,.12)
    }
}

@keyframes ib-pillPulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

@keyframes ib-pillAura {
    0%,100% {
        opacity: .55
    }

    50% {
        opacity: .85
    }
}

@keyframes ib-ctaBreathe {
    0%,100% {
        transform: translateZ(0)
    }

    50% {
        transform: translateZ(0) translateY(-2px) scale(1.02)
    }
}

@keyframes ib-shine {
    0% {
        transform: skewX(-20deg) translateX(-160%)
    }

    100% {
        transform: skewX(-20deg) translateX(380%)
    }
}

@keyframes ib-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes ib-fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    #pricing * {
        animation: none !important;
        transition: none !important
    }
}

/* Mantiene el tamaño del logo dentro de la barra sin cambiar su ubicación */
.navbar-brand.brand-logo .brand-img {
    display: inline-block;
    height: 86px; /* ajusta según la altura de tu navbar */
    width: auto;
}

/* Logo sin fondo */
.navbar-brand.brand-logo,
.navbar-brand.brand-logo:hover,
.navbar-brand.brand-logo:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important; /* evita bloques coloreados de la navbar */
}

    /* La imagen tampoco debe tener fondo aplicado por CSS */
    .navbar-brand.brand-logo .brand-img {
        display: inline-block;
        background: transparent !important;
        border-radius: 0 !important;
    }



/* Despegar el footer: que NO siga el scroll */
section#contact.ib-contact {
    position: relative !important; /* cancela fixed/sticky previos */
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important; /* por si usan inset */
    z-index: auto !important;
}

/* por si algún CSS global le pone sticky/fixed con más especificidad */
body section#contact.ib-contact,
.gray-section.contact.ib-contact {
    position: relative !important;
}

/* ================================
   invoiceBin · Contact Footer (SCOPED)
   Solo afecta a <section class="ib-contact">
   ================================ */
.ib-contact {
    --bg1: #0b1220;
    --bg2: #101b34;
    --txt: #e6f2ff;
    --muted: #b7c6db;
    --accent: #10b981;
    --link: #9ec5ff;
    --linkH: #cfe2ff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 64px 18px 48px;
    background: linear-gradient(180deg,var(--bg1),var(--bg2) 55%, var(--bg1));
    color: var(--txt);
}

    /* Fondo decorativo propio del bloque */
    .ib-contact::before {
        content: "";
        position: absolute;
        inset: -15% -10% -10%;
        background: radial-gradient(680px 380px at 10% 8%, rgba(34,211,238,.18), transparent 60%), radial-gradient(620px 360px at 92% 0%, rgba(99,102,241,.18), transparent 65%), radial-gradient(900px 520px at 50% 100%, rgba(16,185,129,.14), transparent 60%);
        animation: ibc-aurora 16s ease-in-out infinite alternate;
        z-index: 0;
        pointer-events: none;
    }

@keyframes ibc-aurora {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(0)
    }
}

/* Contenedor interno (no usa bootstrap) */
.ib-contact .ibc-wrap {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Título + subtítulo */
.ib-contact .ibc-title {
    margin: 0 0 6px;
    font-weight: 900;
    letter-spacing: .3px;
    font-size: clamp(24px,3.2vw,36px);
    background: linear-gradient(90deg,#fff,#c0e7ff,#fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 12px rgba(255,255,255,.12);
    animation: ibc-glow 8s linear infinite;
}

@keyframes ibc-glow {
    0%,100% {
        text-shadow: 0 0 12px rgba(255,255,255,.12)
    }

    50% {
        text-shadow: 0 0 20px rgba(255,255,255,.24)
    }
}

.ib-contact .ibc-sub {
    margin: 6px 0 14px;
    line-height: 1.55;
}

/* Email como badge */
.ib-contact .ibc-mail {
    display: inline-block;
    margin-left: 8px;
    padding: 6px 12px;
    background: var(--accent);
    color: #02130e;
    font-weight: 900;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 14px 30px -16px rgba(16,185,129,.95);
    position: relative;
    overflow: hidden;
}

    .ib-contact .ibc-mail::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -20%;
        width: 40%;
        height: 200%;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
        transform: skewX(-20deg) translateX(-160%);
        opacity: .7;
        mix-blend-mode: screen;
        animation: ibc-shine 3.6s ease-in-out infinite;
    }

@keyframes ibc-shine {
    to {
        transform: skewX(-20deg) translateX(360%)
    }
}

/* Redes sociales */
.ib-contact .ibc-social {
    list-style: none;
    padding: 0;
    margin: 10px 0 8px;
}

    .ib-contact .ibc-social li {
        display: inline-block;
        margin: 0 8px;
    }

    .ib-contact .ibc-social a {
        width: 46px;
        height: 46px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        color: #fff;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 12px 24px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
        text-decoration: none;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        position: relative;
        overflow: hidden;
    }

        .ib-contact .ibc-social a::after {
            content: "";
            position: absolute;
            top: -40%;
            left: -20%;
            width: 40%;
            height: 180%;
            background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
            transform: skewX(-20deg) translateX(-160%);
            opacity: .7;
            mix-blend-mode: screen;
            transition: transform .6s ease;
        }

        .ib-contact .ibc-social a:hover {
            transform: translateY(-2px) scale(1.05);
            background: linear-gradient(120deg,#3b82f6,#8b5cf6);
            box-shadow: 0 22px 46px -18px rgba(77,88,245,.95);
        }

            .ib-contact .ibc-social a:hover::after {
                transform: skewX(-20deg) translateX(360%)
            }

/* Lugar/flag */
.ib-contact .ibc-place {
    margin: 8px 0 0;
}

.ib-contact .ibc-flag {
    vertical-align: middle;
    margin-left: 6px;
    border-radius: 4px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Copy */
.ib-contact .ibc-copy {
    margin-top: 24px;
}

    .ib-contact .ibc-copy p {
        color: var(--muted);
        margin: 0;
    }

    .ib-contact .ibc-copy strong {
        color: #fff;
    }

/* Enlaces dentro del bloque */
.ib-contact a:not(.ibc-mail):not(.ibc-social a) {
    color: var(--link);
    text-decoration: none;
}

    .ib-contact a:not(.ibc-mail):not(.ibc-social a):hover {
        color: var(--linkH);
        text-decoration: underline;
    }

/* Responsive */
@media (max-width:768px) {
    .ib-contact {
        padding: 48px 16px 40px;
    }

        .ib-contact .ibc-social a {
            width: 42px;
            height: 42px;
        }
}

/* Respeto a reduce-motion */
@media (prefers-reduced-motion:reduce) {
    .ib-contact * {
        animation: none !important;
        transition: none !important
    }
}