/* =========================================================
   CONFIGURACIÓN GENERAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;

    color: #20252b;

    background: #ffffff;
}


/* =========================================================
   HEADER GLOBAL-TEC
   ESTILO CÁPSULA / FIJO
   ========================================================= */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 7px;
   
    backdrop-filter: blur(10px);
    pointer-events: none;
    transition: height 0.35s ease, padding-top 0.35s ease;
}

.header-pill {
    width: calc(100% - 74px);
    max-width: 1450px;
    height: 73px;
  background: radial-gradient(ellipse at 8% 20%, rgba(20, 199, 215, 0.08) 0%, transparent 34%), radial-gradient(ellipse at 92% 80%, rgb(255 255 255 / 20%) 0%, transparent 38%), linear-gradient(120deg, #ffffff 0%, #fffdf9 50%, #e9fbff 100%);
   border-radius: 30px 8px 30px 30px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    box-shadow: 0 5px 20px rgba(40, 55, 90, 0.08);
    border: 1px solid rgba(225, 229, 240, 0.85);
    pointer-events: auto;
    transition: width 0.35s ease, height 0.35s ease, border-radius 0.35s ease,
                box-shadow 0.35s ease, padding 0.35s ease;
}

.header-logo-link {
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.header-logo {
    width: 214px;
    height: auto;
    display: block;
    transition: width 0.35s ease;
}

.header-divider {
    width: 1px;
    height: 28px;
    background: #e4e7ee;
    margin-left: 18px;
    margin-right: 22px;
    flex-shrink: 0;
}

.header-navigation {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 45px;
    flex: 1;
}

.header-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #111111;
    text-decoration: none;
    transition: color 0.25s ease;
}

.header-nav-link:hover {
    color: #155d78;
}

.header-nav-dropdown {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.header-services-link i {
    font-size: 8px;
    margin-top: 2px;
    transition: transform 0.25s ease;
}

.header-nav-dropdown:hover .header-services-link i {
    transform: rotate(180deg);
}

.header-dropdown {
    position: absolute;
    top: calc(87% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 220px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.header-nav-dropdown:hover .header-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.header-dropdown a {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #222222;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.header-dropdown a:hover {
    background: #f2fafa;
    color: #155d78;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    flex-shrink: 0;
}

.header-access {
    width: 106px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient(90deg, #12dce7 0%, #1689bc 100%);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(22, 137, 188, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.header-access:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 137, 188, 0.22);
}

.main-header.header-scrolled {
    height: 72px;
    padding-top: 4px;
}

.main-header.header-scrolled .header-pill {
    height: 50px;
    width: calc(100% - 100px);
    border-radius: 27px;
    box-shadow: 0 6px 25px rgba(30, 45, 75, 0.13);
}

.main-header.header-scrolled .header-logo {
    width: 140px;
}

.main-header.header-scrolled .header-navigation {
    gap: 27px;
}

.main-header.header-scrolled .header-nav-link {
    font-size: 13px;
}

.main-header.header-scrolled .header-access {
    width: 102px;
    height: 36px;
    font-size: 12px;
}

.header-mobile-button {
    display: none;
}

body {
    padding-top: 82px;
}

html {
    scroll-padding-top: 95px;
}

@media (max-width: 991px) {
    .main-header {
        height: 76px;
        padding-top: 8px;
    }

    .header-pill {
        width: calc(100% - 30px);
        height: 60px;
        padding: 0 17px;
        border-radius: 30px;
    }

    .header-logo {
        width: 145px;
    }

    .header-divider {
        display: none;
    }

    .header-navigation,
    .header-actions {
        display: none;
    }

    .header-mobile-button {
        width: 42px;
        height: 42px;
        margin-left: auto;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #f2f5ff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
    }

    .header-mobile-button span {
        width: 17px;
        height: 2px;
        background: #155d78;
        border-radius: 2px;
    }

    .main-header.header-scrolled {
        height: 67px;
        padding-top: 4px;
    }

    .main-header.header-scrolled .header-pill {
        width: calc(100% - 20px);
        height: 58px;
    }

    .main-header.header-scrolled .header-logo {
        width: 138px;
    }

    body {
        padding-top: 76px;
    }
}

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


.global-hero {

    width: 100%;

   background: radial-gradient(ellipse at 10% 50%, rgba(20, 199, 215, 0.10), transparent 38%), radial-gradient(ellipse at 90% 30%, rgb(195 219 255 / 25%), transparent 40%), linear-gradient(115deg, rgb(255 255 255 / 25%) 0%, rgb(213 227 247 / 25%) 52%, #f6fbfa 100%);


    padding-top: 40px;

    padding-bottom: 60px;

    overflow: hidden;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.hero-heading h1 {

    font-family: 'Poppins', sans-serif;

    font-size: 30px;

    line-height: 1.25;

    font-weight: 500;

    letter-spacing: 1px;

    color: #20252b;

    margin: 0;
}


/* LÍNEA */

.hero-line {

    width: 265px;

    height: 5px;

        background: linear-gradient(90deg, rgba(134, 134, 134, 0.1) 23.861%, rgb(160 197 203 / 60%) 100%);

    margin: 23px auto 7px;
}


/* DESCRIPCIÓN */

.hero-heading p {

    font-family: 'Poppins', sans-serif;

    font-size: 18px;

    line-height: 1.45;

    color: #777777;

    margin: 0;
}


/* =========================================================
   CARRUSEL DE REDES SOCIALES
   ========================================================= */

.social-carousel {

    width: 430px;

    max-width: 100%;

    height: 82px;

    margin: 22px auto 0;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;
}


.social-carousel-track {

    width: 430px;

    height: 82px;

    position: relative;
}


/* =========================================================
   ICONOS DE REDES
   ========================================================= */

.social-icon {

    position: absolute;

    top: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    border-radius: 15px;

    box-sizing: border-box;

    transition:
        left 0.8s ease,
        width 0.8s ease,
        height 0.8s ease,
        font-size 0.8s ease,
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* =========================================================
   COLORES REDES
   ========================================================= */

.social-icon.whatsapp {

    background: #00c76b;
}


.social-icon.facebook {

    background: #2456d7;
}


.social-icon.instagram {

    background:
        linear-gradient(
            135deg,
            #7b22d1,
            #ed287d,
            #ffad32
        );
}


.social-icon.dribbble {

    background: #e91e8f;
}


.social-icon.telegram {

    background: #229ed9;
}


/* =========================================================
   POSICIONES DEL CARRUSEL
   ========================================================= */


/* EXTREMO IZQUIERDO */

.social-icon.social-pos-1 {

    left: 0;

    width: 46px;

    height: 46px;

    transform: translateY(-50%);

    font-size: 25px;

    opacity: 0.60;

    z-index: 1;
}


/* IZQUIERDA */

.social-icon.social-pos-2 {

    left: 70px;

    width: 56px;

    height: 56px;

    transform: translateY(-50%);

    font-size: 31px;

    opacity: 0.85;

    z-index: 2;
}


/* CENTRO - DESTACADA */

.social-icon.social-pos-3 {

    left: 180px;

    width: 70px;

    height: 70px;

    transform: translateY(-50%);

    font-size: 40px;

    opacity: 1;

    z-index: 5;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);
}


/* DERECHA */

.social-icon.social-pos-4 {

    left: 304px;

    width: 56px;

    height: 56px;

    transform: translateY(-50%);

    font-size: 31px;

    opacity: 0.85;

    z-index: 2;
}


/* EXTREMO DERECHO */

.social-icon.social-pos-5 {

    left: 384px;

    width: 46px;

    height: 46px;

    transform: translateY(-50%);

    font-size: 25px;

    opacity: 0.60;

    z-index: 1;
}


/* =========================================================
   IMAGEN + BURBUJAS
   ========================================================= */

.global-connect-visual {

    width: 100%;

    height: 365px;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: visible;
}


/* =========================================================
   IMAGEN CENTRAL
   ========================================================= */

.hero-image-wrapper {

    width: 100%;
top: 56PX;
    height: 365px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    position: relative;

    z-index: 2;
}


.hero-main-image {

    width: auto;

    max-width: 100%;

    height: auto;

    display: block;

    
}


/* MOVIMIENTO DE LA IMAGEN */

@keyframes imageFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}


/* =========================================================
   CONTENEDOR DE BURBUJAS
   ========================================================= */

.chat-bubbles {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   BURBUJA GENERAL
   ========================================================= */

.chat-bubble {

    position: absolute;

    width: 230px;

    min-height: 62px;

    padding: 9px 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.12);

    opacity: 0;

    transform:
        translateY(15px)
        scale(0.92);

    animation:
        chatMessage 15s ease-in-out infinite;
}


/* =========================================================
   ICONOS DE LAS BURBUJAS
   ========================================================= */

.bubble-icon {

    width: 32px;

    height: 32px;

    min-width: 32px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 18px;
}


.whatsapp-icon {

    background: #00c76b;
}


.instagram-icon {

    background:
        linear-gradient(
            135deg,
            #7b22d1,
            #ed287d,
            #ffad32
        );
}


.bot-icon {

    background: #7d8790;
}


.facebook-icon {

    background: #2456d7;
}


.support-icon {

    background: #155d78;
}


/* =========================================================
   TEXTO DE LAS BURBUJAS
   ========================================================= */

.bubble-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1.15;
}


.bubble-content strong {

    font-family: 'Poppins', sans-serif;

    font-size: 10px;

    font-weight: 600;

    color: #222222;

    margin-bottom: 3px;
}


.bubble-content span {

    font-family: 'Poppins', sans-serif;

    font-size: 8.5px;

    line-height: 1.3;

    color: #555555;
}


/* =========================================================
   POSICIONES DE LAS BURBUJAS
   MÁS CERCANAS A LA IMAGEN
   ========================================================= */

.bubble-1 {

    top: 15px;

    left: calc(42% + 10px);

    animation-delay: 0s;
}


.bubble-2 {

    top: 70px;

    left: calc(50% + 95px);

    animation-delay: 2.5s;
}


.bubble-3 {

    top: 105px;

    left: calc(50% - 285px);

    animation-delay: 5s;
}


.bubble-4 {

    top: 150px;

    left: calc(50% + 105px);

    animation-delay: 7.5s;
}


.bubble-5 {

    top: 195px;

    left: calc(50% - 270px);

    animation-delay: 10s;
}


.bubble-6 {

    top: 245px;

    left: calc(50% + 105px);

    animation-delay: 12.5s;
}


/* =========================================================
   ANIMACIÓN DE LOS MENSAJES
   ========================================================= */

@keyframes chatMessage {

    /* ESPERA */

    0% {

        opacity: 0;

        transform:
            translateY(15px)
            scale(0.90);
    }


    /* ENTRADA */

    5% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }


    /* SE MANTIENE */

    10% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }


    /* PERMANECE VISIBLE */

    35% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }


    /* PEQUEÑO MOVIMIENTO */

    40% {

        opacity: 1;

        transform:
            translateY(-2px)
            scale(1);
    }


    /* COMIENZA A DESAPARECER */

    47% {

        opacity: 0.85;

        transform:
            translateY(-5px)
            scale(0.98);
    }


    /* DESAPARECE */

    53% {

        opacity: 0;

        transform:
            translateY(-12px)
            scale(0.94);
    }


    /* ESPERA */

    100% {

        opacity: 0;

        transform:
            translateY(-12px)
            scale(0.94);
    }

}


/* =========================================================
   BENEFICIOS
   ========================================================= */

.benefits-box {

  width: 92%;
    max-width: 1205px;
    min-height: 247px;
    margin: 0 auto;
    padding: 13px 0 20px;
        background: linear-gradient(90deg, #01acb7 23.861%, #3f8399 100%);
    border-radius: 158px 158px 8px;
    border-radius: 181px 181px 17px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    position: relative;
    z-index: 3;
}


.benefit-item {

    min-height: 220px;

    padding: 0 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;
}


.benefit-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 10px;

    width: 2px;

    height: 220px;

    background: #ffffff;
}


.benefit-icon {

    width: 66px;

    height: 66px;

    border-radius: 50% 50% 0%;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    color: #168ebf;

    font-size: 26px;
}


.benefit-item h3 {

    margin: 0 0 2px;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 500;
}


.benefit-item p {

    margin: 0;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 400;
}


/* =========================================================
   ANIMACIÓN DE BENEFICIOS
   ========================================================= */

.reveal-item {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.reveal-item.show {

    opacity: 1;

    transform: translateY(0);
}


.benefit-item:nth-child(1) {

    transition-delay: 0.05s;
}


.benefit-item:nth-child(2) {

    transition-delay: 0.15s;
}


.benefit-item:nth-child(3) {

    transition-delay: 0.25s;
}


.benefit-item:nth-child(4) {

    transition-delay: 0.35s;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {
    .benefits-box {

        width: 94%;
    }


    .benefit-item {

        padding: 0 20px;
    }

}


/* =========================================================
   TABLET / MENÚ MOBILE
   ========================================================= */

@media (max-width: 991px) {
    .hero-heading h1 {

        font-size: 27px;
    }


    .hero-heading p {

        font-size: 17px;
    }


    /* VISUAL */

    .global-connect-visual {

        height: 330px;
    }


    .hero-image-wrapper {

        height: 330px;
    }


    .hero-main-image {

        width: 540px;
    }


    /* BURBUJAS */

    .chat-bubble {

        width: 205px;

        min-height: 58px;

        padding: 8px 10px;
    }


    .bubble-1 {

        left: calc(50% + 5px);
    }


    .bubble-2 {

        left: calc(50% + 80px);
    }


    .bubble-3 {

        left: calc(50% - 270px);
    }


    .bubble-4 {

        left: calc(50% + 90px);
    }


    .bubble-5 {

        left: calc(50% - 250px);
    }


    .bubble-6 {

        left: calc(50% + 90px);
    }


    .benefits-box {

        width: 94%;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 767px) {

    .global-hero {

        padding-top: 32px;

        padding-bottom: 45px;
    }


    .hero-heading h1 {

        font-size: 24px;

        letter-spacing: 0.5px;
    }


    .hero-line {

        width: 210px;

        height: 4px;

        margin-top: 20px;
    }


    .hero-heading p {

        padding: 0 15px;

        font-size: 15px;

        line-height: 1.5;
    }


    /* =====================================================
       REDES MOBILE
       ===================================================== */

    .social-carousel {

        width: 330px;

        height: 70px;

        margin-top: 20px;
    }


    .social-carousel-track {

        width: 330px;

        height: 70px;
    }


    .social-icon.social-pos-1 {

        left: 0;

        width: 40px;

        height: 40px;

        font-size: 22px;
    }


    .social-icon.social-pos-2 {

        left: 50px;

        width: 48px;

        height: 48px;

        font-size: 27px;
    }


    .social-icon.social-pos-3 {

        left: 134px;

        width: 62px;

        height: 62px;

        font-size: 35px;
    }


    .social-icon.social-pos-4 {

        left: 232px;

        width: 48px;

        height: 48px;

        font-size: 27px;
    }


    .social-icon.social-pos-5 {

        left: 290px;

        width: 40px;

        height: 40px;

        font-size: 22px;
    }


    /* =====================================================
       VISUAL MOBILE
       ===================================================== */

    .global-connect-visual {

        height: 300px;

        margin-top: 10px;
    }


    .hero-image-wrapper {

        height: 300px;

        align-items: center;
    }


    .hero-main-image {

        width: 88%;
    }


    /* =====================================================
       BURBUJAS MOBILE
       ===================================================== */

    .chat-bubble {

        width: 165px;

        min-height: 48px;

        padding: 7px 9px;

        gap: 7px;

        border-radius: 9px;
    }


    .bubble-icon {

        width: 27px;

        height: 27px;

        min-width: 27px;

        font-size: 14px;

        border-radius: 6px;
    }


    .bubble-content strong {

        font-size: 8px;

        margin-bottom: 2px;
    }


    .bubble-content span {

        font-size: 6.8px;

        line-height: 1.25;
    }


    /* POSICIONES MOBILE */

    .bubble-1 {

        top: 0;

        left: calc(50% - 25px);
    }


    .bubble-2 {

        top: 50px;

        left: calc(50% + 25px);
    }


    .bubble-3 {

        top: 90px;

        left: calc(50% - 160px);
    }


    .bubble-4 {

        top: 140px;

        left: calc(50% + 30px);
    }


    .bubble-5 {

        top: 190px;

        left: calc(50% - 150px);
    }


    .bubble-6 {

        top: 235px;

        left: calc(50% + 30px);
    }


    /* =====================================================
       BENEFICIOS MOBILE
       ===================================================== */

    .benefits-box {

        width: 94%;

        min-height: auto;

        padding: 15px 0;

        border-radius: 30px;

        grid-template-columns: 1fr;
    }


    .benefit-item {

        min-height: 190px;

        padding: 25px;
    }


    .benefit-item:not(:last-child)::after {

        top: auto;

        bottom: 0;

        right: 10%;

        width: 80%;

        height: 2px;
    }


    .benefit-item h3 {

        font-size: 16px;
    }


    .benefit-item p {

        font-size: 15px;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 575px) {
    /* REDES */

    .social-carousel {

        width: 300px;

        height: 64px;
    }


    .social-carousel-track {

        width: 300px;

        height: 64px;
    }


    .social-icon.social-pos-1 {

        left: 0;

        width: 36px;

        height: 36px;

        font-size: 19px;
    }


    .social-icon.social-pos-2 {

        left: 43px;

        width: 44px;

        height: 44px;

        font-size: 24px;
    }


    .social-icon.social-pos-3 {

        left: 121px;

        width: 58px;

        height: 58px;

        font-size: 32px;
    }


    .social-icon.social-pos-4 {

        left: 207px;

        width: 44px;

        height: 44px;

        font-size: 24px;
    }


    .social-icon.social-pos-5 {

        left: 264px;

        width: 36px;

        height: 36px;

        font-size: 19px;
    }


    /* VISUAL */

    .global-connect-visual {

        height: 270px;
    }


    .hero-image-wrapper {

        height: 270px;
    }


    .hero-main-image {

        width: 94%;
    }


    /* BURBUJAS */

    .chat-bubble {

        width: 145px;
    }


    .bubble-1 {

        left: calc(50% - 25px);
    }


    .bubble-2 {

        left: calc(50% + 20px);
    }


    .bubble-3 {

        left: calc(50% - 140px);
    }


    .bubble-4 {

        left: calc(50% + 25px);
    }


    .bubble-5 {

        left: calc(50% - 135px);
    }


    .bubble-6 {

        left: calc(50% + 25px);
    }

}/* =========================================================
   SECCIÓN: TE CONECTAMOS CON EL MUNDO
   ========================================================= */

.connect-world-section {
    width: 100%;
    background: #ffffff;
   padding: 150px 0;
}

.connect-world-content {
    text-align: center;
    margin: 0 auto;
}

.connect-world-content h2 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 35px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0px;
    color: #20252b;
}

.connect-world-line {
    width: 265px;
    height: 4px;
        background: linear-gradient(90deg, rgba(134, 134, 134, 0.1) 23.861%, rgb(160 197 203 / 60%) 100%);
    margin: 20px auto 13px;
}

.connect-world-content p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    color: #5f6266;
}


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

@media (max-width: 767px) {

    .connect-world-section {
        padding: 35px 20px 40px;
    }

    .connect-world-content h2 {
        font-size: 20px;
        letter-spacing: 2.5px;
    }

    .connect-world-line {
        width: 210px;
        height: 4px;
        margin: 17px auto 12px;
    }

    .connect-world-content p {
        font-size: 14px;
        line-height: 1.6;
    }

    .connect-world-content p br {
        display: none;
    }
}/* =========================================================
   GLOBAL CONNECT
   ========================================================= */

/* =====================================================
   CORRECCIÓN PUNTUAL: ICONOS DE BURBUJAS GLOBAL CONNECT
   No modifica posiciones, animaciones ni dimensiones.
   ===================================================== */

.global-connect-bubbles .gc-chat-icon.gc-green {
    background-color: #00c76b !important;
    color: #ffffff !important;
}

.global-connect-bubbles .gc-chat-icon.gc-pink {
    background-color: #ed3d91 !important;
    color: #ffffff !important;
}

.global-connect-bubbles .gc-chat-icon.gc-gray {
    background-color: #eeeeee !important;
    color: #263238 !important;
}

.global-connect-bubbles .gc-chat-icon.gc-blue {
    background-color: #286fe8 !important;
    color: #ffffff !important;
}

/* Mantener el color también en los iconos internos */
.global-connect-bubbles .gc-chat-icon i,
.global-connect-bubbles .gc-chat-icon svg {
    color: inherit !important;
    fill: currentColor;
}




.global-connect-section {
    width: 100%;
    background: #ffffff;
   padding: 0px 0px 150px;
}


/* =========================================================
   BLOQUE PRINCIPAL
   ========================================================= */

.global-connect-box {
    width: 95%;
    max-width: 1205px;
    height: 552px;

    margin: 0 auto;

    position: relative;


  

    border-radius: 32px;

    overflow: hidden;
}


/* =========================================================
   PUNTA SUPERIOR
   ========================================================= */

.global-connect-pointer {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #ffffff;

    z-index: 20;
}


/* =========================================================
   FILA
   ========================================================= */

.global-connect-row {
    height: 100%;
    margin: 0;
}


/* =========================================================
   BLOQUE IZQUIERDO
   ========================================================= */

.global-connect-left {
    height: 100%;

    padding-left: 72px;
    padding-right: 20px;

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

    position: relative;

    z-index: 5;
}


/* =========================================================
   LOGO
   ========================================================= */

.global-connect-logo {
    margin-bottom: 27px;
}

.global-connect-logo img {
    width: 330px;
    max-width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.global-connect-left h2 {
    max-width: 500px;

    margin: 0 0 25px;

    color: #4f4e4e;

    font-family: 'Poppins', sans-serif;

    font-size: 27px;
    line-height: 1.22;

    font-weight: 600;
}


/* =========================================================
   TEXTO
   ========================================================= */

.global-connect-left p {
    max-width: 455px;

    margin: 0 0 27px;

    color:#4f4e4e;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;
    line-height: 1.45;

    font-weight: 400;
}


/* =========================================================
   BOTÓN ACCESO
   ========================================================= */

.global-connect-access {
    width: 164px;
    height: 59px;

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

    border-radius: 15px;

    background: linear-gradient(
        90deg,
        #12dce7 0%,
        #1689bc 100%
    );

    color: #ffffff;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 24px;
    font-weight: 400;

    transition: all 0.3s ease;
}

.global-connect-access:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   BLOQUE DERECHO
   ========================================================= */

.global-connect-right {
    height: 100%;

    padding: 0;

    position: relative;
}


/* =========================================================
   ÁREA VISUAL
   ========================================================= */

.global-connect-visual {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: visible;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.global-connect-dashboard {
    position: absolute;

    width: 698px;
    max-width: none;

    height: auto;

    right: 0px;
    bottom: 0;

    display: block;

    z-index: 1;
}


/* =========================================================
   CONTENEDOR BURBUJAS
   ========================================================= */

.global-connect-bubbles {
    position: absolute;
    inset: 2;
    width: 122% !important;
    height: 100%;

    z-index: 10;

    pointer-events: none;
}


/* =========================================================
   BURBUJA DE CHAT
   ========================================================= */

.gc-chat-bubble {
    position: absolute;

    width: 220px;
    min-height: 58px;

    padding: 8px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: #ffffff;

    border-radius: 11px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.15);

    opacity: 0;

    transform:
        translateY(15px)
        scale(0.90);

    animation:
        gc-chat-sequence
        15s
        ease-in-out
        infinite;
}


/* =========================================================
   POSICIONES
   ========================================================= */

/*
   Estas posiciones corresponden a la zona
   donde aparecen las burbujas en tu referencia.
*/

.gc-chat-1 {
    top: 95px;
    left: 15px;
    animation-delay: 0s;
}

.gc-chat-2 {
    top: 175px;
    left: 15px;
    animation-delay: 2s;
}

.gc-chat-3 {
    top: 244px;
    left: 15px;
    animation-delay: 4s;
}

.gc-chat-4 {
    top: 319px;
    left: 15px;
    animation-delay: 6s;
}

.gc-chat-5 {
    top: 394px;
    left: 15px;
    animation-delay: 8s;
}


/* =========================================================
   ICONOS
   ========================================================= */

.gc-chat-icon {
    width: 36px;
    height: 36px;

    min-width: 36px;

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

    border-radius: 8px;

    color: #ffffff;

    font-size: 18px;
}


/* VERDE */

.gc-green {
    background: #00c76b;
}


/* ROSADO */

.gc-pink {
    background: #ed3d91;
}


/* GRIS */

.gc-gray {
    background: #eeeeee;

    color: #263238;
}


/* AZUL */

.gc-blue {
    background: #286fe8;
}


/* =========================================================
   TEXTO BURBUJAS
   ========================================================= */

.gc-chat-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.gc-chat-text strong {
    display: block;

    margin: 0 0 2px;

    color: #075f45;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;

    line-height: 1.25;

    font-weight: 600;
}


.gc-chat-text span {
    display: block;

    color: #075f45;

    font-family: 'Poppins', sans-serif;

    font-size: 9px;

    line-height: 1.25;

    font-weight: 400;
}

/* =========================================================
   POSICIÓN Y SECUENCIA DE LAS BURBUJAS
   ========================================================= */

.gc-chat-1 {
    top: 95px;
    left: 15px;
    animation: gc-chat-1 10s ease-in-out infinite;
}

.gc-chat-2 {
    top: 170px;
    left: 15px;
    animation: gc-chat-2 10s ease-in-out infinite;
}

.gc-chat-3 {
    top: 244px;
    left: 15px;
    animation: gc-chat-3 10s ease-in-out infinite;
}

.gc-chat-4 {
    top: 319px;
    left: 15px;
    animation: gc-chat-4 10s ease-in-out infinite;
}

.gc-chat-5 {
    top: 394px;
    left: 15px;
    animation: gc-chat-5 10s ease-in-out infinite;
}


/* =========================================================
   BURBUJA 1
   ========================================================= */

@keyframes gc-chat-1 {

    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.90);
    }

    5% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    68% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    73% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   BURBUJA 2
   ========================================================= */

@keyframes gc-chat-2 {

    0%,
    16% {
        opacity: 0;
        transform: translateY(15px) scale(0.90);
    }

    21% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    68% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    73% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   BURBUJA 3
   ========================================================= */

@keyframes gc-chat-3 {

    0%,
    32% {
        opacity: 0;
        transform: translateY(15px) scale(0.90);
    }

    37% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    68% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    73% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   BURBUJA 4
   ========================================================= */

@keyframes gc-chat-4 {

    0%,
    48% {
        opacity: 0;
        transform: translateY(15px) scale(0.90);
    }

    53% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    68% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    73% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   BURBUJA 5
   ========================================================= */

@keyframes gc-chat-5 {

    0%,
    64% {
        opacity: 0;
        transform: translateY(15px) scale(0.90);
    }

    69% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    73% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    78% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    100% {
        opacity: 0;
    }
}
/* =========================================================
   ANIMACIÓN

   15 segundos = ciclo completo

   1 → 2 → 3 → 4 → 5 → repetir
   ========================================================= */

@keyframes gc-chat-sequence {

    /* OCULTA */
    0% {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.90);
    }

    /* APARECE */
    4% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    /* PERMANECE */
    15% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    /* DESAPARECE */
    20% {
        opacity: 0;

        transform:
            translateY(-10px)
            scale(0.95);
    }

    /* OCULTA HASTA SU SIGUIENTE TURNO */
    100% {
        opacity: 0;

        transform:
            translateY(-10px)
            scale(0.95);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .global-connect-box {
        width: 94%;
        height: auto;
    }

    .global-connect-left {
        height: auto;

        padding: 75px 40px 35px;

        text-align: center;

        align-items: center;
    }

    .global-connect-logo {
        display: flex;
        justify-content: center;
    }

    .global-connect-left h2,
    .global-connect-left p {
        margin-left: auto;
        margin-right: auto;
    }

    .global-connect-right {
        height: 430px;
    }

    .global-connect-dashboard {
		
        width: 620px;

        right: 50%;

        transform: translateX(50%);
    }

    .gc-chat-bubble {
        left: 50% !important;

        transform:
            translateX(-50%)
            translateY(15px)
            scale(0.90);
    }

    .gc-chat-1 {
        top: 70px;
    }

    .gc-chat-2 {
        top: 134px;
    }

    .gc-chat-3 {
        top: 198px;
    }

    .gc-chat-4 {
        top: 262px;
    }

    .gc-chat-5 {
        top: 326px;
    }


    @keyframes gc-chat-sequence {

        0% {
            opacity: 0;

            transform:
                translateX(-50%)
                translateY(15px)
                scale(0.90);
        }

        4% {
            opacity: 1;

            transform:
                translateX(-50%)
                translateY(0)
                scale(1);
        }

        15% {
            opacity: 1;

            transform:
                translateX(-50%)
                translateY(0)
                scale(1);
        }

        20% {
            opacity: 0;

            transform:
                translateX(-50%)
                translateY(-10px)
                scale(0.95);
        }

        100% {
            opacity: 0;

            transform:
                translateX(-50%)
                translateY(-10px)
                scale(0.95);
        }
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 767px) {

    .global-connect-section {
        padding-bottom: 45px;
    }

    .global-connect-box {
        width: 94%;

        border-radius: 25px;
    }

    .global-connect-pointer {
        border-left-width: 28px;
        border-right-width: 28px;
        border-top-width: 28px;
    }

    .global-connect-left {
        padding: 55px 25px 30px;
    }

    .global-connect-logo img {
        width: 270px;
    }

    .global-connect-left h2 {
        font-size: 22px;
    }

    .global-connect-left p {
        font-size: 14px;
    }

    .global-connect-right {
        height: 350px;
    }

    .global-connect-dashboard {
        width: 500px;

        right: 50%;

        transform: translateX(50%);
    }

    .gc-chat-bubble {
        width: 195px;
        min-height: 52px;

        padding: 7px 9px;
    }

    .gc-chat-icon {
        width: 30px;
        height: 30px;

        min-width: 30px;

        font-size: 15px;
    }

    .gc-chat-text strong {
        font-size: 9px;
    }

    .gc-chat-text span {
        font-size: 8px;
    }

    .gc-chat-1 {
        top: 35px;
    }

    .gc-chat-2 {
        top: 90px;
    }

    .gc-chat-3 {
        top: 145px;
    }

    .gc-chat-4 {
        top: 200px;
    }

    .gc-chat-5 {
        top: 255px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 575px) {

    .global-connect-left {
        padding-top: 45px;
    }

    .global-connect-logo img {
        width: 230px;
    }

    .global-connect-left h2 {
        font-size: 20px;
    }

    .global-connect-right {
        height: 300px;
    }

    .global-connect-dashboard {
        width: 430px;
    }

    .gc-chat-bubble {
        width: 175px;
        min-height: 47px;
    }

    .gc-chat-1 {
        top: 28px;
    }

    .gc-chat-2 {
        top: 77px;
    }

    .gc-chat-3 {
        top: 126px;
    }

    .gc-chat-4 {
        top: 175px;
    }

    .gc-chat-5 {
        top: 224px;
    }
}

/* =========================================================
   AJUSTE DE ANCHO GENERAL DE LA PÁGINA
   Se conserva todo el CSS existente.
   ========================================================= */

@media (min-width: 1200px) {
    .container {
        max-width: 1380px;
    }

    .header-container {
        max-width: 1380px;
        width: 100%;
    }

    .benefits-box {
        width: 96%;
        max-width: 1380px;
    }

    .global-connect-box {
        width: 96%;
        max-width: 1380px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1440px;
    }

    .header-container {
        max-width: 1440px;
    }

    .benefits-box {
        width: 96%;
        max-width: 1400px;
    }

    .global-connect-box {
        width: 96%;
        max-width: 1400px;
    }
}


/* =========================================================
   AJUSTE FINAL - CHAT GLOBAL CONNECT
   Las 5 burbujas aparecen una a una, permanecen juntas
   durante más tiempo y luego desaparecen juntas.
   ========================================================= */

.global-connect-bubbles .gc-chat-bubble {
    animation-duration: 15s !important;
    animation-iteration-count: infinite !important;
}

/* Secuencia: 1 → 2 → 3 → 4 → 5 → pausa larga → reinicio */
.global-connect-bubbles .gc-chat-1 {
    animation-name: gc-final-1 !important;
}

.global-connect-bubbles .gc-chat-2 {
    animation-name: gc-final-2 !important;
}

.global-connect-bubbles .gc-chat-3 {
    animation-name: gc-final-3 !important;
}

.global-connect-bubbles .gc-chat-4 {
    animation-name: gc-final-4 !important;
}

.global-connect-bubbles .gc-chat-5 {
    animation-name: gc-final-5 !important;
}

@keyframes gc-final-1 {
    0%, 4% { opacity: 0; transform: translateY(15px) scale(.90); }
    7% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    88% { opacity: 0; transform: translateY(-8px) scale(.95); }
    100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}

@keyframes gc-final-2 {
    0%, 16% { opacity: 0; transform: translateY(15px) scale(.90); }
    19% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    88% { opacity: 0; transform: translateY(-8px) scale(.95); }
    100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}

@keyframes gc-final-3 {
    0%, 29% { opacity: 0; transform: translateY(15px) scale(.90); }
    32% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    88% { opacity: 0; transform: translateY(-8px) scale(.95); }
    100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}

@keyframes gc-final-4 {
    0%, 42% { opacity: 0; transform: translateY(15px) scale(.90); }
    45% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    88% { opacity: 0; transform: translateY(-8px) scale(.95); }
    100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}

@keyframes gc-final-5 {
    0%, 55% { opacity: 0; transform: translateY(15px) scale(.90); }
    58% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    88% { opacity: 0; transform: translateY(-8px) scale(.95); }
    100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}


/* =========================================================
   AJUSTE FINAL - PANTALLAS GRANDES
   1600px, 1800px, 2000px+
   Amplía el contenido sin cambiar tablet/móvil.
   ========================================================= */

@media (min-width: 1600px) {

    .container,
    .header-container {
        max-width: 1560px;
    }

    .benefits-box,
    .global-connect-box {
        width: 96%;
        max-width: 1500px;
    }

    /* Global Connect */
    .global-connect-box {
        height: 500px;
    }

    .global-connect-left {
        padding-left: 85px;
        padding-right: 30px;
    }

    .global-connect-logo img {
        width: 370px;
    }

    .global-connect-left h2 {
        max-width: 570px;
        font-size: 30px;
    }

    .global-connect-left p {
        max-width: 510px;
        font-size: 17px;
    }

    .global-connect-dashboard {
        width: 760px;
        right: 0;
    }

    .global-connect-bubbles .gc-chat-bubble {
        width: 235px;
        min-height: 62px;
        padding: 9px 13px;
    }

    .global-connect-bubbles .gc-chat-icon {
        width: 39px;
        height: 39px;
        min-width: 39px;
        font-size: 19px;
    }

    .global-connect-bubbles .gc-chat-text strong {
        font-size: 11px;
    }

    .global-connect-bubbles .gc-chat-text span {
        font-size: 10px;
    }
}


@media (min-width: 1800px) {

    .container,
    .header-container {
        max-width: 1720px;
    }

    .benefits-box,
    .global-connect-box {
        max-width: 1650px;
    }

    .global-connect-box {
        height: 540px;
    }

    .global-connect-left {
        padding-left: 100px;
    }

    .global-connect-logo img {
        width: 400px;
    }

    .global-connect-left h2 {
        max-width: 620px;
        font-size: 32px;
    }

    .global-connect-left p {
        max-width: 560px;
        font-size: 18px;
    }

    .global-connect-access {
        width: 175px;
        height: 63px;
        font-size: 25px;
    }

    .global-connect-dashboard {
        width: 830px;
    }

    .global-connect-bubbles .gc-chat-bubble {
        width: 250px;
        min-height: 66px;
    }

    .global-connect-bubbles .gc-chat-icon {
        width: 41px;
        height: 41px;
        min-width: 41px;
        font-size: 20px;
    }

    .global-connect-bubbles .gc-chat-text strong {
        font-size: 11px;
    }

    .global-connect-bubbles .gc-chat-text span {
        font-size: 10px;
    }
}


@media (min-width: 2000px) {

    .container,
    .header-container {
        max-width: 1900px;
    }

    .benefits-box,
    .global-connect-box {
        max-width: 1800px;
    }

    .global-connect-box {
        height: 570px;
    }

    .global-connect-left {
        padding-left: 115px;
    }

    .global-connect-logo img {
        width: 430px;
    }

    .global-connect-left h2 {
        max-width: 680px;
        font-size: 34px;
    }

    .global-connect-left p {
        max-width: 620px;
        font-size: 19px;
    }

    .global-connect-dashboard {
        width: 900px;
    }

    .global-connect-bubbles .gc-chat-bubble {
        width: 270px;
        min-height: 70px;
    }

    .global-connect-bubbles .gc-chat-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 21px;
    }

    .global-connect-bubbles .gc-chat-text strong {
        font-size: 12px;
    }

    .global-connect-bubbles .gc-chat-text span {
        font-size: 10.5px;
    }
}


/* =========================================================
   AJUSTE FINAL - BENEFICIOS MÁS ANGOSTO
   Solo modifica la sección de beneficios en pantallas grandes.
   ========================================================= */

@media (min-width: 1600px) {
    .benefits-box {
        width: 88%;
        max-width: 1380px;
    }
}

@media (min-width: 1800px) {
    .benefits-box {
        width: 70%;
        max-width: 1480px;
    }
}

@media (min-width: 2000px) {
    .benefits-box {
        width: 84%;
        max-width: 1550px;
    }
}


/* =========================================================
   INTERNET EMPRESARIAL
   ========================================================= */

.internet-empresarial-section {
    width: 100%;
    background: radial-gradient(ellipse at 10% 50%, rgba(20, 199, 215, 0.10), transparent 38%), radial-gradient(ellipse at 90% 30%, rgb(195 219 255 / 25%), transparent 40%), linear-gradient(115deg, rgb(255 255 255 / 25%) 0%, rgb(213 227 247 / 25%) 52%, #f6fbfa 100%);
    padding: 150px 0;
    overflow: hidden;
}

.internet-empresarial-header {
    text-align: center;
    margin-bottom: 30px;
}

.internet-empresarial-header h2 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 35px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0px;
    color: #20252b;
}

.internet-empresarial-line {
    width: 220px;
    height: 5px;
       background: linear-gradient(90deg, rgba(134, 134, 134, 0.1) 23.861%, rgb(160 197 203 / 60%) 100%);
    margin: 10px auto 0;
}

.internet-empresarial-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-left: 20px;
}

.internet-empresarial-track {
    display: flex;
    gap: 16px;
    width: max-content;
    transition: transform 0.8s ease;
}

.internet-card {
    width: 900px;
    height: 395px;
    flex: 0 0 900px;
    background: #ffffff;
   border-radius: 172px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.internet-card-2 {
    width: 900px;
    flex-basis: 900px;
}

.internet-card-content {
    width: 54%;
    padding-left: 62px;
    padding-right: 20px;
    position: relative;
    z-index: 2;
}

.internet-card-content h3 {
    margin: 0 0 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: 4px;
    color: #111111;
}

.internet-card-content p {
    margin: 0 0 32px;
    max-width: 390px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
    color: #63717a;
}

.internet-card-btn {
        width: 146px;
    height: 44px;
    margin-left: 19PX;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgb(18, 220, 231) 0%, rgb(22, 137, 188) 100%);
    color: #ffffff;
    border-radius: 15px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.internet-card-btn:hover {
    background: #155d78;
    color: #ffffff;
    transform: translateY(-2px);
}

.internet-card-image {
    position: absolute;
    right: 40px;
    top: 26px;
    width: 315px;
    height: 315px;
    border-radius: 50%;
    overflow: hidden;
}

.internet-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.internet-empresarial-bottom {
    width: calc(100% - 40px);
    max-width: 1400px;
    min-height: 92px;
    margin: 12px auto 0;
	background: linear-gradient(90deg, #fbfbfb 23.861%, #8bbcc5 100%);
	
  /*background: radial-gradient(ellipse at 51% 122%, rgba(25, 201, 214, 0.10) 0%, rgba(25, 201, 214, 0) 38%), radial-gradient(ellipse at 90% 30%, rgba(239, 211, 180, 0.18) 0%, rgba(239, 211, 180, 0) 42%), linear-gradient(115deg, #f9fdfb 0%, #fcf7f0 52%, #fffdf9 100%);*/
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.internet-empresarial-bottom p {
       margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: #071526;
}

/* Hover desktop: muestra completamente la segunda tarjeta */
@media (min-width: 992px) {
    .internet-empresarial-carousel {
        width: 100%;
        overflow: hidden;
    }

    .internet-empresarial-track {
        transition: transform 0.8s ease;
    }

    .internet-empresarial-carousel:hover .internet-empresarial-track {
        transform: translateX(calc(100vw - 1886px));
    }
}

/* =========================================================
   INTERNET EMPRESARIAL - PANTALLAS GRANDES
   ========================================================= */

@media (min-width: 1600px) {
    .internet-card {
        width: 950px;
        flex-basis: 950px;
        height: 420px;
    }

    .internet-card-2 {
        width: 950px;
        flex-basis: 950px;
    }

    .internet-card-content {
        padding-left: 75px;
    }

    .internet-card-content h3 {
        font-size: 27px;
    }

    .internet-card-content p {
        max-width: 420px;
        font-size: 17px;
    }

    .internet-card-image {
        width: 330px;
        height: 330px;
        right: 45px;
    }

    .internet-empresarial-carousel:hover .internet-empresarial-track {
        transform: translateX(calc(100vw - 1986px));
    }
}

@media (min-width: 1800px) {
    .internet-card {
        width: 1000px;
        flex-basis: 1000px;
        height: 430px;
    }

    .internet-card-2 {
        width: 1000px;
        flex-basis: 1000px;
    }

    .internet-card-content {
        padding-left: 80px;
    }

    .internet-card-content h3 {
        font-size: 28px;
    }

    .internet-card-content p {
        max-width: 440px;
        font-size: 17px;
    }

    .internet-card-image {
        width: 345px;
        height: 345px;
        right: 50px;
    }

    .internet-empresarial-carousel:hover .internet-empresarial-track {
        transform: translateX(calc(100vw - 2086px));
    }
}

/* =========================================================
   INTERNET EMPRESARIAL - TABLET
   ========================================================= */

@media (max-width: 991px) {
    .internet-empresarial-section {
        padding: 40px 0 30px;
    }

    .internet-empresarial-header h2 {
        font-size: 23px;
        letter-spacing: 4px;
    }

    .internet-card {
        width: 680px;
        flex: 0 0 680px;
        height: 360px;
        border-radius: 40px 40px 40px 0;
    }

    .internet-card-2 {
        width: 680px;
        flex-basis: 680px;
    }

    .internet-card-content {
        width: 58%;
        padding-left: 45px;
    }

    .internet-card-content h3 {
        font-size: 22px;
        letter-spacing: 3px;
    }

    .internet-card-content p {
        max-width: 330px;
        font-size: 15px;
    }

    .internet-card-image {
        width: 260px;
        height: 260px;
        right: 25px;
        top: 50px;
    }

    .internet-empresarial-carousel:hover .internet-empresarial-track {
        transform: translateX(-695px);
    }
}

/* =========================================================
   INTERNET EMPRESARIAL - MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .internet-empresarial-section {
        padding: 35px 0 28px;
    }

    .internet-empresarial-header {
        margin-bottom: 22px;
    }

    .internet-empresarial-header h2 {
        font-size: 20px;
        letter-spacing: 3px;
    }

    .internet-empresarial-line {
        width: 190px;
        height: 4px;
    }

    .internet-empresarial-carousel {
        padding-left: 20px;
    }

    .internet-card {
        width: 340px;
        flex: 0 0 340px;
        height: 480px;
        display: block;
        border-radius: 35px 35px 35px 0;
    }

    .internet-card-2 {
        width: 340px;
        flex-basis: 340px;
    }

    .internet-card-content {
        width: 100%;
        padding: 45px 30px 0;
    }

    .internet-card-content h3 {
        font-size: 21px;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    .internet-card-content p {
        max-width: none;
        font-size: 14px;
        margin-bottom: 22px;
    }

    .internet-card-image {
        width: 210px;
        height: 210px;
        right: 50%;
        transform: translateX(50%);
        top: 250px;
    }

    .internet-card-btn {
        width: 115px;
        height: 42px;
        font-size: 15px;
		padding: 30px;
    }

    .internet-empresarial-carousel:hover .internet-empresarial-track {
        transform: translateX(-250px);
    }

    .internet-empresarial-bottom {
        width: calc(100% - 30px);
        min-height: 105px;
        border-radius: 26px;
        padding: 15px;
    }

    .internet-empresarial-bottom p {
        font-size: 14px;
    }
}

/* =========================================================
   INTERNET EMPRESARIAL - MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 575px) {
    .internet-card {
        width: 310px;
        flex-basis: 310px;
        height: 450px;
    }

    .internet-card-2 {
        width: 310px;
        flex-basis: 310px;
    }

    .internet-card-content {
        padding: 38px 25px 0;
    }

    .internet-card-content h3 {
        font-size: 19px;
        letter-spacing: 1.5px;
    }

    .internet-card-content p {
        font-size: 13.5px;
    }

    .internet-card-image {
        width: 190px;
        height: 190px;
        top: 235px;
    }

    .internet-empresarial-carousel:hover .internet-empresarial-track {
        transform: translateX(-225px);
    }
}

/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */
 span {
    display: block;
    margin-top: 7px;
        font-family: 'POPPINS';
    
	 
    font-style: italic;
    font-weight: 400;
    color: #52647b;
}
.empresa-section {

    position: relative;

    width: 100%;

padding: 150px 0;

    overflow: hidden;

       background: radial-gradient(ellipse at 10% 50%, rgba(20, 199, 215, 0.10), transparent 38%), radial-gradient(ellipse at 90% 30%, rgb(195 219 255 / 25%), transparent 40%), linear-gradient(115deg, rgb(255 255 255 / 25%) 0%, rgb(213 227 247 / 25%) 52%, #f6fbfa 100%);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.empresa-container {

    position: relative;

    z-index: 2;

    width: 92%;

    max-width: 1205px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 32% 68%;

    align-items: center;

    gap: 25px;
}


/* =========================================================
   BLOQUE GLOBALTEC
   ========================================================= */

.empresa-brand {

    padding: 20px 25px 20px 10px;
}


/* =========================================================
   NOMBRE GLOBALTEC
   ========================================================= */

.empresa-brand h2 {

    position: relative;

    display: inline-block;

    margin: 0 0 48px;

    font-family: 'Poppins', sans-serif;

    font-size: 48px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -2px;

    color: #071526;
}


/* Halo muy suave detrás del nombre */

.empresa-brand h2::before {

    content: "";

    position: absolute;

    z-index: -1;

    width: 270px;

    height: 70px;

    left: -15px;

    top: -10px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(100, 224, 220, 0.13),
            transparent 70%
        );

    filter: blur(5px);

    pointer-events: none;
}


/* =========================================================
   TEXTO GLOBALTEC
   ========================================================= */

.empresa-brand p {

    max-width: 340px;

    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 12px;

    line-height: 1.65;

    font-weight: 400;

    color: #536170;
}


/* =========================================================
   CONTENEDOR DE LAS BURBUJAS
   ========================================================= */

.empresa-cards {

    display: grid;

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

    gap: 13px;

    width: 100%;
}


/* =========================================================
   BURBUJA DE CHAT
   ========================================================= */

.empresa-card {

    position: relative;

    min-height: 200px;

    padding: 20px 22px 22px;

    background: #ffffff;

    border: 1px solid #d4e0e5;

    /*
       Forma de burbuja tipo chat
    */

    border-radius: 18px 18px 18px 5px;

    box-shadow:
        0 8px 25px rgba(45, 75, 85, 0.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* =========================================================
   COLA DE LA BURBUJA
   ========================================================= */

.empresa-card::after {

    content: "";

    position: absolute;

    left: 16px;

    bottom: -9px;

    width: 18px;

    height: 18px;

    background: #ffffff;

    clip-path: polygon(
        0 0,
        100% 0,
        0 100%
    );

    border-left: 1px solid #d4e0e5;

    filter:
        drop-shadow(
            -2px 2px 2px rgba(45, 75, 85, 0.04)
        );

    pointer-events: none;
}


/* =========================================================
   HOVER
   ========================================================= */

.empresa-card:hover {

    transform: translateY(-5px);

    border-color: #9cc8d1;

    box-shadow:
        0 15px 32px rgba(45, 75, 85, 0.11);
}


/* =========================================================
   NÚMERO
   ========================================================= */

.empresa-card-number {

    margin-bottom: 15px;

    font-family: 'Poppins', sans-serif;

    font-size: 7px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 3px;

    color: #8299b6;
}


/* =========================================================
   ICONO
   ========================================================= */

.empresa-card-icon {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background: #e9f8f8;

    color: #08a6b7;

    font-size: 15px;
}


/* =========================================================
   TÍTULO DE LA BURBUJA
   ========================================================= */

.empresa-card h3 {

    margin: 0 0 8px;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 500;

    color: #101827;
}


/* =========================================================
   TEXTO DE LA BURBUJA
   ========================================================= */

.empresa-card p {

    margin: 0;

    max-width: 410px;

    font-family: 'Poppins', sans-serif;

    font-size: 10.5px;

    line-height: 1.55;

    font-weight: 400;

    color: #657487;
}


/* =========================================================
   DECORACIÓN CYAN
   ========================================================= */

.empresa-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 250px;

    left: -180px;

    bottom: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(19, 199, 215, 0.12),
            transparent 70%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* =========================================================
   DECORACIÓN BEIGE
   ========================================================= */

.empresa-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 260px;

    right: -180px;

    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(240, 213, 184, 0.18),
            transparent 70%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* =========================================================
   PANTALLAS GRANDES
   ========================================================= */

@media (min-width: 1600px) {

    .empresa-container {

        max-width: 1500px;

        grid-template-columns: 32% 68%;

        gap: 35px;
    }


    .empresa-brand h2 {

        font-size: 35px;

        margin-bottom: 52px;
    }


    .empresa-brand p {

        max-width: 400px;

        font-size: 13px;
    }


    .empresa-card {

        min-height: 230px;

        padding: 24px 24px 26px;
    }


    .empresa-card-number {

        font-size: 8px;

        margin-bottom: 20px;
    }


    .empresa-card-icon {

        width: 34px;

        height: 34px;

        font-size: 17px;

        margin-bottom: 15px;
    }


    .empresa-card h3 {

        font-size: 17px;
    }


    .empresa-card p {

        font-size: 12px;

        line-height: 1.6;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .empresa-section {

        padding: 55px 0 60px;
    }


    .empresa-container {

        width: 90%;

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .empresa-brand {

        padding: 0;
    }


    .empresa-brand h2 {

        margin-bottom: 25px;

        font-size: 46px;
    }


    .empresa-brand p {

        max-width: 600px;

        font-size: 13px;
    }


    .empresa-card {

        min-height: 220px;
    }


    .empresa-card h3 {

        font-size: 18px;
    }


    .empresa-card p {

        font-size: 12px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575px) {

    .empresa-section {

        padding: 45px 0 50px;
    }


    .empresa-container {

        width: 88%;

        gap: 30px;
    }


    .empresa-brand h2 {

        font-size: 40px;

        letter-spacing: -1.5px;

        margin-bottom: 22px;
    }


    .empresa-brand p {

        font-size: 12px;

        line-height: 1.65;
    }


    .empresa-cards {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .empresa-card {

        min-height: auto;

        padding: 23px;
    }


    .empresa-card h3 {

        font-size: 17px;
    }


    .empresa-card p {

        font-size: 12px;

        line-height: 1.6;
    }
}

/* =========================================================
   COLA TIPO CHAT
   ========================================================= */

.empresa-card::after {
    content: "";

    position: absolute;

    left: 18px;
    bottom: -8px;

    width: 18px;
    height: 16px;

    background: #ffffff;

    /*
       Forma de cola tipo mensaje
    */
    clip-path: polygon(
        0 0,
        100% 0,
        25% 100%
    );

    border: none;

    filter:
        drop-shadow(
            1px 2px 1px rgba(45, 75, 85, 0.06)
        );

    pointer-events: none;
}

.empresa-card {
    position: relative;

    min-height: 200px;

    padding: 20px 22px 22px;

    background: #ffffff;

    border: 1px solid #d4e0e5;

    border-radius: 18px 18px 18px 4px;

    box-shadow:
        0 8px 25px rgba(45, 75, 85, 0.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}



/* =========================================================
   CLIENTES
   ========================================================= */

.clientes-section {

    position: relative;

    width: 100%;

    padding: 75px 0 90px;

    overflow: hidden;

       background: radial-gradient(ellipse at 10% 50%, rgba(20, 199, 215, 0.10), transparent 38%), radial-gradient(ellipse at 90% 30%, rgb(195 219 255 / 25%), transparent 40%), linear-gradient(115deg, rgb(255 255 255 / 25%) 0%, rgb(213 227 247 / 25%) 52%, #f6fbfa 100%);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.clientes-container {

    position: relative;

    z-index: 2;

    width: 92%;

    max-width: 1205px;

    margin: 0 auto;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.clientes-heading {

    text-align: center;

    margin-bottom: 60px;
}


/* =========================================================
   ETIQUETA
   ========================================================= */

.clientes-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    font-family: 'Poppins', sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;

    color: #155d78;
}


.clientes-label::before,
.clientes-label::after {

    content: "";

    width: 45px;

    height: 1px;

    background: #b9cbd0;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.clientes-heading h2 {

    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 45px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -1.5px;

    color: #101827;
}


.clientes-heading h2 span {

    display: block;

    margin-top: 7px;

        font-family: 'POPPINS';

    font-size: 42px;

    font-style: italic;

    font-weight: 400;

    color: #52647b;
}


/* =========================================================
   TEXTO
   ========================================================= */

.clientes-heading p {

    max-width: 580px;

    margin: 22px auto 0;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.65;

    color: #657487;
}


/* =========================================================
   ÁREA DEL CARRUSEL
   ========================================================= */

.clientes-carousel {

    position: relative;

    width: 100%;

    height: 145px;

    overflow: visible;
}


/* =========================================================
   TRACK
   ========================================================= */

.clientes-track {

    position: relative;

    width: 100%;

    height: 100%;
}


/* =========================================================
   BURBUJA CLIENTE
   ========================================================= */

.cliente-bubble {

    position: absolute;

    top: 50%;

    width: 205px;

    height: 85px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border: 1px solid #d5e0e5;

    border-radius: 20px 20px 20px 5px;

    box-shadow:
        0 8px 25px rgba(45, 75, 85, 0.08);

    transform:
        translateY(-50%)
        scale(.82);

    opacity: 0;

    transition:
        left .7s ease,
        opacity .6s ease,
        transform .7s ease,
        filter .7s ease;

    z-index: 1;
}


/* =========================================================
   COLA DE CHAT
   ========================================================= */

.cliente-bubble::after {

    content: "";

    position: absolute;

    left: 17px;

    bottom: -9px;

    width: 18px;

    height: 17px;

    background: #ffffff;

    clip-path: polygon(
        0 0,
        100% 0,
        25% 100%
    );

    filter:
        drop-shadow(
            1px 2px 1px rgba(45, 75, 85, 0.06)
        );
}


/* =========================================================
   LOGO
   ========================================================= */

.cliente-logo {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


.cliente-logo img {

    display: block;

    width: auto;

    max-width: 145px;

    max-height: 48px;

    object-fit: contain;
}


/* =========================================================
   5 POSICIONES VISIBLES
   ========================================================= */

/* izquierda extrema */

.cliente-pos-1 {

    left: 0%;

    opacity: .55;

    transform:
        translateY(-50%)
        scale(.78);
}


/* izquierda */

.cliente-pos-2 {

    left: 20%;

    opacity: .85;

    transform:
        translateY(-50%)
        scale(.90);
}


/* centro */

.cliente-pos-3 {

    left: 40%;

    opacity: 1;

    transform:
        translateY(-50%)
        scale(1.05);

    z-index: 5;

    box-shadow:
        0 12px 35px rgba(45, 75, 85, 0.14);
}


/* derecha */

.cliente-pos-4 {

    left: 60%;

    opacity: .85;

    transform:
        translateY(-50%)
        scale(.90);
}


/* derecha extrema */

.cliente-pos-5 {

    left: 80%;

    opacity: .55;

    transform:
        translateY(-50%)
        scale(.78);
}


/* =========================================================
   BURBUJAS OCULTAS
   ========================================================= */

.cliente-hidden {

    left: 100% !important;

    opacity: 0 !important;


    pointer-events: none;

    transform:
        translateY(-50%)
        scale(.65) !important;
}


/* =========================================================
   DECORACIONES
   ========================================================= */

.clientes-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 280px;

    left: -220px;

    bottom: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(20, 199, 215, 0.12),
            transparent 70%
        );

    filter: blur(10px);
}


.clientes-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 280px;

    right: -220px;

    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(239, 211, 180, 0.20),
            transparent 70%
        );

    filter: blur(10px);
}


/* =========================================================
   PANTALLAS GRANDES
   ========================================================= */

@media (min-width: 1600px) {

    .clientes-container {

        max-width: 1500px;
    }

    .cliente-bubble {

        width: 235px;

        height: 95px;
    }

    .cliente-logo img {

        max-width: 170px;

        max-height: 55px;
    }

    .clientes-heading h2 {

        font-size: 35px;
    }

    .clientes-heading h2 span {

        font-size: 23px;
		letter-spacing: 3px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .clientes-section {

        padding: 60px 0 70px;
    }

    .clientes-carousel {

        height: 130px;
    }

    .cliente-bubble {

        width: 170px;

        height: 75px;
    }

    .cliente-logo img {

        max-width: 125px;

        max-height: 42px;
    }

    .clientes-heading h2 {

        font-size: 38px;
    }

    .clientes-heading h2 span {

        font-size: 36px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575px) {

    .clientes-section {

        padding: 50px 0 60px;
    }

    .clientes-heading {

        margin-bottom: 40px;
    }

    .clientes-heading h2 {

        font-size: 34px;
    }

    .clientes-heading h2 span {

        font-size: 31px;
    }

    .clientes-heading p {

        font-size: 12px;
    }

    .clientes-carousel {

        height: 115px;
    }

    .cliente-bubble {

        width: 125px;

        height: 62px;

        padding: 8px 12px;

        border-radius: 15px 15px 15px 4px;
    }

    .cliente-logo img {

        max-width: 95px;

        max-height: 35px;
    }

    .cliente-pos-1 {
        left: -8%;
    }

    .cliente-pos-2 {
        left: 17%;
    }

    .cliente-pos-3 {
        left: 42%;
    }

    .cliente-pos-4 {
        left: 67%;
    }

    .cliente-pos-5 {
        left: 92%;
    }
}



/* =========================================================
   FOOTER GLOBAL-TEC
   ========================================================= */

.site-footer {

    width: 100%;

    padding: 35px 0 28px;

       background: radial-gradient(ellipse at 10% 50%, rgba(20, 199, 215, 0.10), transparent 38%), radial-gradient(ellipse at 90% 30%, rgb(195 219 255 / 25%), transparent 40%), linear-gradient(115deg, rgb(255 255 255 / 25%) 0%, rgb(213 227 247 / 25%) 52%, #f6fbfa 100%);
}


/* =========================================================
   BURBUJA PRINCIPAL
   ========================================================= */

.footer-bubble {

   position: relative;
    width: 80%;
    max-width: 1400px;
    min-height: 390px;
    margin: 0 auto;
    padding: 60px 133px;
    display: grid;
    grid-template-columns: 1.45fr .8fr 1.25fr;
    column-gap: 70px;
    background: linear-gradient(120deg, #00232a, #104f64 72%, #155d78);
    border-radius: 198px 198px 33px;
    box-shadow: 0 18px 45px rgba(30, 63, 72, 0.12);
    box-sizing: border-box;
}


/* =========================================================
   DECORACIÓN INTERIOR
   ========================================================= */

.footer-bubble::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 220px;

    right: -180px;
    bottom: -120px;

    border-radius: 50%;

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

    transform: rotate(-12deg);

    pointer-events: none;
}


.footer-bubble::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 180px;

    left: -150px;
    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(18, 216, 225, .08),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   MARCA
   ========================================================= */

.footer-brand {

    position: relative;

    z-index: 2;
}


/* LOGO */

.footer-logo {

    width: 230px;

    margin-bottom: 28px;
}


.footer-logo img {

    display: block;

    width: 100%;

    height: auto;

    /*
       Si tu logo original es oscuro,
       lo convertimos a blanco.
   

    filter:
        brightness(0)
        invert(1); */
}


/* DESCRIPCIÓN */

.footer-brand p {

    max-width: 390px;

    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    line-height: 1.55;

    font-weight: 400;

    color: rgba(255,255,255,.94);
}


/* =========================================================
   REDES
   ========================================================= */

.footer-social {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 35px;
}


.footer-social-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    color: #ffffff;

    font-size: 25px;

    text-decoration: none;

    transition:
        transform .3s ease,
        color .3s ease;
}


.footer-social-link:hover {

    color: #18d0da;

    transform: translateY(-3px);
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.footer-navigation {

    position: relative;

    z-index: 2;

    padding-top: 5px;
}


.footer-navigation ul {

    list-style: none;

    padding: 0;


    margin: 0;
}


.footer-navigation li {

    position: relative;

    margin-bottom: 3px;

    padding-left: 25px;
}


/* PUNTO */

.footer-navigation li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #ffffff;

    transform: translateY(-50%);
}


/* LINKS */

.footer-navigation a {

    color: #ffffff;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    font-weight: 400;

    transition:
        color .3s ease,
        padding-left .3s ease;
}


.footer-navigation a:hover {

    color: #18d0da;

    padding-left: 4px;
}


/* =========================================================
   CONTACTO
   ========================================================= */

.footer-contact {

    position: relative;

    z-index: 2;

    padding-top: 0;
}


.footer-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-bottom: 3px;
}


/* PUNTO CONTACTO */

.footer-bullet {

    flex: 0 0 auto;

    width: 10px;

    height: 10px;

    margin-top: 7px;

    border-radius: 50%;

    background: #ffffff;
}


/* TÍTULO */

.footer-contact-item strong {

    display: block;

    margin-bottom: 3px;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.35;

    font-weight: 500;

    color: #ffffff;
}


/* TEXTO */

.footer-contact-item p {

    max-width: 310px;

    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 400;

    color: rgba(255,255,255,.94);
}


/* EMAIL */

.footer-contact-item a {

    color: #ffffff;

    text-decoration: none;

    transition: color .3s ease;
}


.footer-contact-item a:hover {

    color: #18d0da;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.footer-copyright {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 32px;

    text-align: center;

    z-index: 3;
}


.footer-copyright p {

    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.4;

    font-weight: 400;

    color: #ffffff;
}


/* =========================================================
   1600PX+
   ========================================================= */

@media (min-width: 1600px) {

    .footer-bubble {

        max-width: 1550px;

       
        column-gap: 14px;
    }


    .footer-logo {

        width: 250px;
    }


    .footer-brand p {

        font-size: 16px;

        max-width: 430px;
    }


    .footer-navigation a {

        font-size: 15px;
    }


    .footer-contact-item strong {

        font-size: 15px;
    }


    .footer-contact-item p {

        font-size: 15px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .site-footer {

        padding: 30px 0 25px;
    }


    .footer-bubble {

        width: 90%;

        padding: 50px 45px 90px;

        grid-template-columns:
            1fr
            1fr;

        gap: 45px;

        border-radius: 42px;
    }


    .footer-brand {

        grid-column: 1 / -1;
    }


    .footer-brand p {

        max-width: 600px;
    }


    .footer-navigation {

        grid-column: 1;
    }


    .footer-contact {

        grid-column: 2;
    }


    .footer-copyright {

        bottom: 25px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575px) {

    .site-footer {

        padding: 20px 0;
    }


    .footer-bubble {

        width: 92%;

        padding:
            40px
            25px
            90px;

        display: flex;

        flex-direction: column;

        gap: 30px;

        border-radius: 32px;
    }


    .footer-logo {

        width: 190px;

        margin-bottom: 22px;
    }


    .footer-brand p {

        font-size: 13px;

        line-height: 1.55;
    }


    .footer-social {

        margin-top: 25px;

        gap: 18px;
    }


    .footer-social-link {

        font-size: 22px;
    }


    .footer-navigation li {

        margin-bottom: 17px;
    }


    .footer-navigation a {

        font-size: 15px;
    }


    .footer-contact-item {

        margin-bottom: 22px;
    }


    .footer-contact-item strong {

        font-size: 15px;
    }


    .footer-contact-item p {

        font-size: 14px;
    }


    .footer-copyright {

        bottom: 28px;

        padding: 0 20px;
    }


    .footer-copyright p {

        font-size: 13px;
    }
}


/* =========================================================
   ANIMACIONES AL HACER SCROLL — GLOBAL-TEC
   ========================================================= */

/*
   Estas clases trabajan con el IntersectionObserver
   incluido en index.html.
*/

/* ---------------------------------------------------------
   APARICIÓN DESDE ABAJO
   --------------------------------------------------------- */

.scroll-reveal {
    opacity: 0;
    transform: translateY(45px);
    will-change: opacity, transform;
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   APARICIÓN DESDE LA IZQUIERDA
   --------------------------------------------------------- */

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    will-change: opacity, transform;
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ---------------------------------------------------------
   APARICIÓN DESDE LA DERECHA
   --------------------------------------------------------- */

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    will-change: opacity, transform;
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ---------------------------------------------------------
   APARICIÓN CON ZOOM SUAVE
   --------------------------------------------------------- */

.scroll-reveal-zoom {
    opacity: 0;
    transform: scale(0.92);
    will-change: opacity, transform;
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-zoom.is-visible {
    opacity: 1;
    transform: scale(1);
}


/* ---------------------------------------------------------
   APARICIÓN ESCALONADA
   Cada elemento aparece después del anterior.
   --------------------------------------------------------- */

.scroll-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.scroll-stagger.is-visible > *:nth-child(1) {
    transition-delay: 0.05s;
}

.scroll-stagger.is-visible > *:nth-child(2) {
    transition-delay: 0.15s;
}

.scroll-stagger.is-visible > *:nth-child(3) {
    transition-delay: 0.25s;
}

.scroll-stagger.is-visible > *:nth-child(4) {
    transition-delay: 0.35s;
}

.scroll-stagger.is-visible > *:nth-child(5) {
    transition-delay: 0.45s;
}

.scroll-stagger.is-visible > *:nth-child(6) {
    transition-delay: 0.55s;
}

.scroll-stagger.is-visible > *:nth-child(7) {
    transition-delay: 0.65s;
}

.scroll-stagger.is-visible > *:nth-child(8) {
    transition-delay: 0.75s;
}

.scroll-stagger.is-visible > *:nth-child(9) {
    transition-delay: 0.85s;
}

.scroll-stagger.is-visible > *:nth-child(10) {
    transition-delay: 0.95s;
}


/* =========================================================
   ANIMACIONES ESPECÍFICAS DE GLOBAL-TEC
   ========================================================= */

/* Beneficios */
.benefits-box.scroll-stagger > .benefit-item {
    opacity: 0;
    transform: translateY(35px) scale(0.97);
}

.benefits-box.scroll-stagger.is-visible > .benefit-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Tarjetas de empresa */
.empresa-cards.scroll-stagger > .empresa-card {
    opacity: 0;
    transform: translateY(35px);
}

.empresa-cards.scroll-stagger.is-visible > .empresa-card {
    opacity: 1;

    transform: translateY(0);
}


/* Tarjetas de Internet Empresarial */
.internet-empresarial-track.scroll-stagger > .internet-card {
    opacity: 0;
    transform: translateY(35px);
}

.internet-empresarial-track.scroll-stagger.is-visible > .internet-card {
    opacity: 1;
    transform: translateY(0);
}


/* Logos de clientes */
.clientes-track.scroll-stagger > .cliente-bubble {
    opacity: 0;
    transform: translateY(25px) scale(0.96);
}

.clientes-track.scroll-stagger.is-visible > .cliente-bubble {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* =========================================================
   REDUCIR ANIMACIONES SI EL USUARIO LO PREFIERE
   ========================================================= */

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

    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-zoom,
    .scroll-stagger > *,
    .benefits-box.scroll-stagger > .benefit-item,
    .empresa-cards.scroll-stagger > .empresa-card,
    .internet-empresarial-track.scroll-stagger > .internet-card,
    .clientes-track.scroll-stagger > .cliente-bubble {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =========================================================
   CORRECCIÓN DEFINITIVA — EVITAR SCROLL HORIZONTAL
   ========================================================= */

/* El documento nunca debe generar desplazamiento lateral */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Compatibilidad con navegadores que no soportan clip */
@supports not (overflow-x: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* Contenedor principal */
main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Header fijo */
.main-header {
    width: 100%;
    max-width: 100%;
}

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

.global-hero {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.global-connect-visual {
    max-width: 100%;
    overflow-x: clip;
}

/* =========================================================
   BENEFICIOS
   ========================================================= */

.benefits-box {
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}

/* =========================================================
   GLOBAL CONNECT
   ========================================================= */

.global-connect-section {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.global-connect-box {
    max-width: calc(91% - 40px);
    box-sizing: border-box;
}

.global-connect-right,
.global-connect-visual {
    max-width: 100%;
}

/* =========================================================
   INTERNET EMPRESARIAL
   ========================================================= */

.internet-empresarial-section {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.internet-empresarial-carousel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.internet-empresarial-track {
    max-width: none;
}

/*
   El track puede ser más ancho internamente porque funciona
   como carrusel. El contenedor es el que debe recortarlo.
*/
.internet-card {
    flex-shrink: 0;
}

/* =========================================================
   QUIÉNES SOMOS / CLIENTES
   ========================================================= */

.empresa-section,
.clientes-section {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.clientes-carousel,
.clientes-track {
    max-width: 100%;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.footer-bubble {
    max-width: calc(100% - 40px);
    overflow: hidden;
}

/* =========================================================
   ELEMENTOS VISUALES
   ========================================================= */

img,
svg,
video,
iframe {
    max-width: 100%;
}

/*
   Evita que elementos posicionados absolutamente o con
   transformaciones creen ancho extra en el documento.
*/
.global-hero,
.global-connect-section,
.internet-empresarial-section,
.empresa-section,
.clientes-section,
.site-footer {
    contain: paint;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .header-pill {
        max-width: calc(100% - 30px);
    }

    .global-connect-box,
    .benefits-box {
        max-width: calc(100% - 30px);
    }

    .footer-bubble {
        max-width: calc(100% - 30px);
    }

}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575px) {

    .header-pill {
        max-width: calc(100% - 20px);
    }

    .global-connect-box,
    .benefits-box {
        max-width: calc(100% - 20px);
    }

    .footer-bubble {
        max-width: calc(100% - 20px);
    }

}


/* =========================================================
   CORRECCIÓN — CARRUSEL DE CLIENTES
   La animación scroll-stagger NO debe sobrescribir las
   posiciones, escalas ni opacidades del carrusel.
   ========================================================= */

/* La transición del carrusel vuelve a tener prioridad */
.clientes-track.scroll-stagger > .cliente-bubble {
    transition:
        left .7s ease,
        opacity .6s ease,
        transform .7s ease,
        filter .7s ease !important;

    transition-delay: 0s !important;
}

/* POSICIONES DEL CARRUSEL */
.clientes-track.scroll-stagger.is-visible > .cliente-pos-1 {
    left: 0% !important;
    opacity: .55 !important;
    transform: translateY(-50%) scale(.78) !important;
    z-index: 1 !important;
}

.clientes-track.scroll-stagger.is-visible > .cliente-pos-2 {
    left: 20% !important;
    opacity: .85 !important;
    transform: translateY(-50%) scale(.90) !important;
    z-index: 2 !important;
}

.clientes-track.scroll-stagger.is-visible > .cliente-pos-3 {
    left: 40% !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.05) !important;
    z-index: 5 !important;
}

.clientes-track.scroll-stagger.is-visible > .cliente-pos-4 {
    left: 60% !important;
    opacity: .85 !important;
    transform: translateY(-50%) scale(.90) !important;
    z-index: 2 !important;
}

.clientes-track.scroll-stagger.is-visible > .cliente-pos-5 {
    left: 80% !important;
    opacity: .55 !important;
    transform: translateY(-50%) scale(.78) !important;
    z-index: 1 !important;
}

/* Los clientes que están esperando su turno permanecen ocultos */
.clientes-track.scroll-stagger > .cliente-hidden {
    left: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) scale(.65) !important;
    z-index: 0 !important;
}

/* No aplicar el stagger genérico a este carrusel */
.clientes-track.scroll-stagger.is-visible > .cliente-bubble {
    animation: none !important;
}


/* =========================================================
   IMÁGENES DE CLIENTES
   Evita que una imagen rota deforme la tarjeta.
   ========================================================= */

.cliente-logo {
    overflow: hidden;
}

.cliente-logo img {
    display: block;
    width: auto;
    max-width: 145px;
    max-height: 48px;
    object-fit: contain;
}

@media (min-width: 1600px) {
    .cliente-logo img {
        max-width: 170px;
        max-height: 55px;
    }
}


/* =========================================================
   IMPORTANTE
   El track NO debe tener max-width:100%;
   Los elementos están posicionados dentro del área
   del carrusel y el contenedor controla el recorte.
   ========================================================= */

.clientes-track {
    width: 100%;
    max-width: none !important;
}


/* =========================================================
   BURBUJAS DE MENSAJES — ESTILO WHATSAPP
   ========================================================= */

.chat-bubble {
    border-radius: 16px 16px 16px 5px !important;
    position: absolute;
    background: #ffffff;
    box-shadow:
        0 5px 18px rgba(30, 45, 75, 0.12),
        0 1px 3px rgba(30, 45, 75, 0.06);
}

.chat-bubble::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -9px;
    width: 0;
    height: 0;
    border-top: 10px solid #ffffff;
    border-right: 10px solid transparent;
}

.chat-bubble::before {
    content: none !important;
}

.gc-chat-bubble {
    border-radius: 16px 16px 5px 16px !important;
    position: absolute;
    background: #ffffff;
    box-shadow:
        0 5px 18px rgba(30, 45, 75, 0.13),
        0 1px 3px rgba(30, 45, 75, 0.06);
}

.gc-chat-bubble::after {
       content: "";
    position: absolute;
    right: 10px;
    bottom: -9px;
    width: 0;
    height: 0;
    border-top: 10px solid #ffffff;
    border-left: 10px solid transparent;
}

.gc-chat-bubble::before {
    content: none !important;
}

.chat-bubble .bubble-icon,
.gc-chat-bubble .gc-chat-icon {
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .chat-bubble {
        border-radius: 14px 14px 14px 5px !important;
    }

    .chat-bubble::after {
        bottom: -8px;
        border-top-width: 9px;
        border-right-width: 9px;
    }

    .gc-chat-bubble {
        border-radius: 14px 14px 14px 5px !important;
    }

    .gc-chat-bubble::after {
        bottom: -8px;
        border-top-width: 9px;
        border-right-width: 9px;
    }
}


/* =========================================================
   MENÚ HAMBURGUESA MOBILE — FUNCIONAL
   ========================================================= */

@media (max-width: 991px) {

    .header-pill {
        position: relative;
        z-index: 100000;
    }

    .header-mobile-button {
        position: relative;
        z-index: 100002;
        flex-shrink: 0;
    }

    .header-mobile-button span {
        transition:
            transform .25s ease,
            opacity .2s ease;
    }

    /* Animación hamburguesa → X */
    .header-mobile-button.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .header-mobile-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .header-mobile-button.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .header-mobile-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 95px);
        overflow-y: auto;
        padding: 12px;
        background: #ffffff;
        border: 1px solid #e7e9ef;
        border-radius: 22px;
        box-shadow: 0 16px 40px rgba(30, 45, 75, 0.16);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px) scale(.98);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;

        z-index: 100001;
    }

    .header-mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .header-mobile-menu > a,
    .header-mobile-services-button {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #20252b;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
    }

    .header-mobile-menu > a:hover,
    .header-mobile-services-button:hover {
        background: #f2fafa;
        color: #155d78;
    }

    .header-mobile-services-button i {
        font-size: 10px;
        transition: transform .25s ease;
    }

    .header-mobile-services-button.is-open i {
        transform: rotate(180deg);
    }

    .header-mobile-services-list {
        display: none;
        padding: 4px 0 6px;
    }

    .header-mobile-services-list.is-open {
        display: block;
    }

    .header-mobile-services-list a {
        width: 100%;
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 0 15px 0 30px;
        border-radius: 10px;
        color: #5f6266;
        background: transparent;
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-weight: 400;
        text-decoration: none;
    }

    .header-mobile-services-list a:hover {
        background: #f6fbfc;
        color: #155d78;
    }

    .header-mobile-access {
        margin-top: 8px;
        justify-content: center !important;
        min-height: 44px !important;
        color: #ffffff !important;
        background: linear-gradient(90deg, #12dce7 0%, #1689bc 100%) !important;
    }

    body.mobile-menu-open {
        overflow-x: clip;
    }
}

@media (min-width: 992px) {
    .header-mobile-menu {
        display: none !important;
    }
}

/* =========================================================
   GLOBAL CONNECT
   ANTES VS. DESPUÉS
   ========================================================= */

.gc-comparison {
    width: 100%;
    padding: 95px 20px 110px;
    background: transparent;
    overflow: hidden;
}

.gc-comparison-container {
    width: min(1120px, 100%);
    margin: 0 auto;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gc-comparison-heading {
    text-align: center;
    margin-bottom: 55px;
}

.gc-section-label {
    display: inline-block;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 5px;

    color: #159cc5;

    margin-bottom: 15px;
}

.gc-section-label::after {
    content: "";
    display: block;

    width: 38px;
    height: 2px;

    margin: 11px auto 0;

    background: #18d3dc;
}


.gc-comparison-heading h2 {
    margin: 0;

    font-family: 'Poppins', sans-serif;
    font-size: clamp(38px, 4.5vw, 39px);
    line-height: 1.05;
    font-weight: 600;

    color: #071827;

    letter-spacing: -2px;
}


.gc-comparison-heading h2 em {
    display: block;

    margin-top: 4px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.78em;
    font-weight: 400;
    font-style: italic;

    color: #7c7c7c;

    letter-spacing: -1px;
}


.gc-comparison-heading p {
    max-width: 760px;

    margin: 22px auto 0;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.8;

    color: #526b82;
}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.gc-comparison-grid {
    display: grid;

    grid-template-columns:
        1fr
        1.12fr
        1.12fr;

    gap: 18px;

    align-items: start;
}


/* =========================================================
   COLUMNAS
   ========================================================= */

.gc-column {
    display: flex;
    flex-direction: column;

    gap: 10px;

    min-width: 0;
}


/* =========================================================
   ENCABEZADOS
   ========================================================= */

.gc-column-header {
    min-height: 68px;

    padding: 15px 20px;

    border-radius: 18px;

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

    text-align: center;

    margin-bottom: 2px;
}


.gc-column-header strong {
    display: block;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.2;
}


.gc-column-header span {
    display: block;

    margin-top: 5px;

    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    font-weight: 500;

    letter-spacing: 1.2px;

    line-height: 1.2;
}


/* ASPECTO */

.gc-aspect-header {
    background: #eef4f7;
    color: #132a3b;
}

.gc-aspect-header span {
    color: #71869a;
}


/* ANTES */

.gc-before-header {
    background: #f9f9f9;
    color: #59636b;
}

.gc-before-header span {
    color: #8a9298;
}


/* DESPUÉS */

.gc-after-header {
   background: linear-gradient(90deg, rgb(18, 220, 231) 0%, rgb(22, 137, 188) 100%);

    color: #ffffff;

    border: 1px solid rgba(21, 156, 197, 0.12);
}

.gc-after-header span {
    color: #fff;
}


/* =========================================================
   BURBUJAS
   ========================================================= */

.gc-chat-item {
    position: relative;

    min-height: 74px;

    border-radius: 17px;

    display: flex;
    align-items: center;

    padding: 13px 17px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* PEQUEÑA COLA DE CHAT */

.gc-chat-item::after {
    content: "";

    position: absolute;

    bottom: -6px;
    left: 15px;

    width: 12px;
    height: 12px;

    transform: rotate(45deg);

    background: inherit;

    border-right: inherit;
    border-bottom: inherit;

    z-index: 0;
}


/* =========================================================
   ASPECTOS
   ========================================================= */

.gc-aspect-item {
    background: #ffffff;

    border: 1px solid #f7f7f7;

    box-shadow: 0 5px 18px rgba(30, 80, 100, 0.035);

    gap: 13px;
}

.gc-aspect-item:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(30, 80, 100, 0.08);
}


.gc-aspect-item > div:last-child {
    display: flex;
    flex-direction: column;
}


.gc-aspect-item strong {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;

    color: #132a3b;
}


.gc-aspect-item span {
    margin-top: 4px;

    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    font-weight: 500;

    letter-spacing: 1.1px;

    color: #7890a0;
}


/* =========================================================
   ICONOS DE ASPECTOS
   ========================================================= */

.gc-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

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

    font-size: 14px;
}


.gc-icon-phone {
    background: #e5f8fa;
    color: #159cc5;
}

.gc-icon-whatsapp {
    background: #e9f8f1;
    color: #18a866;
}

.gc-icon-chat {
    background: #e8f1ff;
    color: #2677d9;
}

.gc-icon-crm {
    background: #f0eaff;
    color: #7052c7;
}

.gc-icon-supervision {
    background: #e8f1ff;
    color: #2374d8;
}

.gc-icon-cost {
    background: #e4f8fa;
    color: #159cc5;
}


/* =========================================================
   ANTES
   ========================================================= */

.gc-before-item {
    background: #f9f9f9;

    border: 0px solid #e5e5e5;

    color: #68727a;
}


.gc-before-item:hover {
    transform: translateY(-2px);

    background: #f7f7f7;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}


.gc-before-item p {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 19px;
    line-height: 1.25;

    font-style: italic;

    color: #6b7379;
}


/* =========================================================
   DESPUÉS
   ========================================================= */

.gc-after-item {
    background: #f7ffff;

    border: 0px solid rgba(24, 211, 220, 0.22);

    gap: 13px;

    box-shadow:
        0 5px 18px rgba(21, 156, 197, 0.035);
}


.gc-after-item:hover {
    transform: translateY(-2px);

    border-color: rgba(24, 211, 220, 0.42);

    box-shadow:
        0 10px 25px rgba(21, 156, 197, 0.09);
}


.gc-after-item > div:last-child {
    min-width: 0;
}


.gc-after-item p {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 19px;
    line-height: 1.25;

    font-style: italic;

    color: #45627b;
}


.gc-after-item small {
    display: block;

    margin-top: 5px;

    font-family: 'Poppins', sans-serif;

    font-size: 9px;
    line-height: 1.45;

    color: #71899a;
}


/* =========================================================
   ICONOS X / CHECK
   ========================================================= */

.gc-status-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

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

    font-size: 12px;

    position: relative;
    z-index: 2;
}


/* ANTES */

.gc-before-item .gc-status-icon {
    background: #e7e9eb;

    color: #7c858b;
}


/* DESPUÉS */

.gc-after-item .gc-status-icon {
    background: rgba(24, 211, 220, 0.13);

    color: #159cc5;
}


/* =========================================================
   PIE
   ========================================================= */

.gc-comparison-footer {
    text-align: center;

    margin-top: 45px;
}


.gc-comparison-footer span {
    display: block;

    width: 48px;
    height: 2px;

    margin: 0 auto 17px;

    background: #18d3dc;
}


.gc-comparison-footer p {
    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    color: #71879a;
}


.gc-comparison-footer strong {
    color: #12637e;
    font-weight: 600;
}


/* =========================================================
   ANIMACIÓN DE ENTRADA
   ========================================================= */

.gc-column {
    opacity: 0;
    transform: translateY(25px);

    animation: gcColumnReveal 0.8s
        cubic-bezier(.22, 1, .36, 1)
        forwards;
}


.gc-aspect-column {
    animation-delay: 0.05s;
}

.gc-before-column {
    animation-delay: 0.15s;
}

.gc-after-column {
    animation-delay: 0.25s;
}


@keyframes gcColumnReveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .gc-comparison {
        padding: 75px 18px 90px;
    }

    .gc-comparison-container {
        width: min(760px, 100%);
    }

    .gc-comparison-grid {
        grid-template-columns:
            0.85fr
            1fr
            1fr;

        gap: 12px;
    }

    .gc-chat-item {
        padding: 12px;
    }

    .gc-aspect-item strong {
        font-size: 11px;
    }

    .gc-aspect-item span {
        font-size: 7px;
    }

    .gc-before-item p,
    .gc-after-item p {
        font-size: 16px;
    }

    .gc-after-item small {
        font-size: 8px;
    }

    .gc-status-icon {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .gc-comparison {
        padding: 65px 16px 75px;
    }


    .gc-comparison-heading {
        margin-bottom: 35px;
    }


    .gc-section-label {
        font-size: 10px;
        letter-spacing: 4px;
    }


    .gc-comparison-heading h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }


    .gc-comparison-heading h2 em {
        font-size: 0.8em;
    }


    .gc-comparison-heading p {
        font-size: 12px;
        line-height: 1.7;
    }


    /*
       En móvil cada columna ocupa todo el ancho.
       Se mantienen las burbujas y el orden:
       ASPECTO → ANTES → DESPUÉS
    */

    .gc-comparison-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .gc-column {
        gap: 9px;
    }


    .gc-column-header {
        min-height: 62px;

        border-radius: 16px;
    }


    .gc-chat-item {
        min-height: 68px;

        border-radius: 16px;

        padding: 11px 14px;
    }


    .gc-chat-item::after {
        left: 13px;
    }


    .gc-aspect-item strong {
        font-size: 11px;
    }


    .gc-aspect-item span {
        font-size: 7px;
    }


    .gc-before-item p,
    .gc-after-item p {
        font-size: 17px;
    }


    .gc-after-item small {
        font-size: 8px;
    }


    .gc-comparison-footer {
        margin-top: 35px;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .gc-comparison {
        padding-left: 12px;
        padding-right: 12px;
    }


    .gc-comparison-heading h2 {
        font-size: 30px;
    }


    .gc-comparison-heading p {
        font-size: 11px;
    }


    .gc-column-header strong {
        font-size: 12px;
    }


    .gc-chat-item {
        min-height: 64px;
    }


    .gc-before-item p,
    .gc-after-item p {
        font-size: 15px;
    }


    .gc-after-item small {
        font-size: 7.5px;
    }

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

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

    .gc-column {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .gc-chat-item {
        transition: none;
    }

}


/* =========================================================
   GLOBAL CONNECT
   ¿QUÉ ES GLOBAL CONNECT?
========================================================= */

:root {

    --gc-cyan: #18D3DC;
    --gc-turquoise: #16C8D5;
    --gc-blue: #159CC5;

    --gc-dark: #00232A;
    --gc-dark-blue: #155D78;

    --gc-text: #38546C;
    --gc-text-light: #536B7C;

    --gc-border: rgba(21,156,197,.22);
}


/* =========================================================
   SECCIÓN PRINCIPAL
========================================================= */

.gc-about-section {

    width: 100%;
    max-width: 100%;

    padding: 0 0 125px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F5FBFC 100%
        );

    position: relative;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.gc-about-container {

    width: 92%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 44% 56%;

    align-items: center;

    gap: 20px;

    box-sizing: border-box;
}


/* =========================================================
   CONTENIDO IZQUIERDO
========================================================= */

.gc-about-content {

    max-width: 540px;

    position: relative;

    z-index: 10;
}


/* =========================================================
   ETIQUETA
========================================================= */

.gc-about-label {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--gc-blue);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* =========================================================
   TÍTULO
========================================================= */

.gc-about-content h2 {

    margin: 0 0 22px;

    color: var(--gc-dark);

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 39px);

    font-weight: 600;

    line-height: 1.04;

    letter-spacing: -2.5px;
}


.gc-about-content h2 span {

    display: block;

    margin-top: 8px;

    color: #7c7c7c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: .72em;

    font-weight: 400;

    font-style: italic;

    letter-spacing: -1px;
}


/* =========================================================
   PÁRRAFOS
========================================================= */

.gc-about-content p {

    margin: 0 0 15px;

    color: var(--gc-text-light);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   BOTÓN
========================================================= */

.gc-about-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 13px;

    padding: 12px 19px;

    border-radius: 30px;

    background:
        linear-gradient(
            100deg,
            var(--gc-cyan),
            var(--gc-blue)
        );

    color: #FFFFFF;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 10px;

    font-weight: 500;

    text-decoration: none;

    box-shadow:
        0 8px 22px
        rgba(21,156,197,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.gc-about-button span {

    font-size: 16px;

    line-height: 1;
}


.gc-about-button:hover {

    color: #FFFFFF;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(21,156,197,.25);
}


/* =========================================================
   ÁREA VISUAL
========================================================= */

.gc-about-visual {

    width: 100%;

    height: 520px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;

    box-sizing: border-box;
}


/* =========================================================
   CÍRCULOS DECORATIVOS
========================================================= */

.gc-visual-orbit {

    position: absolute;

border-radius: 50% 50% 9px;

    pointer-events: none;
}


.orbit-1 {

    width: 430px;

    height: 430px;

    background:
        linear-gradient(
            145deg,
            #E6FAFD,
            #CCEEF5
        );

    opacity: .85;

    z-index: 1;
}


.orbit-2 {

    width: 350px;

    height: 350px;

    border:
        0px solid
        rgba(21,156,197,.18);

    z-index: 2;

    animation:
        gcOrbitPulse
        7s
        ease-in-out
        infinite;
}


@keyframes gcOrbitPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .55;
    }

    50% {

        transform:
            scale(1.06);

        opacity: .9;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

.gc-laptop {

    width: 470px;

    position: absolute;

    left: 50%;

    top: 52%;

    transform:
        translate(-50%, -50%)
        rotateX(3deg);

    z-index: 5;

    filter:
        drop-shadow(
            0 25px 25px
            rgba(0,35,42,.20)
        );

    animation:
        gcLaptopFloat
        6s
        ease-in-out
        infinite;

    transform-origin:
        center center;
}


@keyframes gcLaptopFloat {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            translateY(0)
            rotateX(3deg);
    }

    50% {

        transform:
            translate(-50%, -50%)
            translateY(-7px)
            rotateX(3deg);
    }
}


/* =========================================================
   PANTALLA DEL LAPTOP
========================================================= */

.gc-laptop-screen {

    width: 100%;

    

  

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #DCE3E7,
            #8D9CA5
        );

    border-radius:
        18px 18px 7px 7px;

    border:
        4px solid
        #202D33;

    position: relative;

    overflow: hidden;
}


.gc-laptop-screen::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.20),
            transparent 40%
        );

    pointer-events: none;

    z-index: 2;
}


.gc-laptop-screen img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 4px;
}


/* =========================================================
   BASE LAPTOP
========================================================= */

.gc-laptop-base {

    width: 108%;

    height: 22px;

    margin-left: -4%;

    background:
        linear-gradient(
            180deg,
            #B8C2C7,
            #75838A
        );

    border-radius:
        0 0 20px 20px;

    position: relative;

    transform:
        perspective(300px)
        rotateX(55deg);

    transform-origin:
        top center;

    box-shadow:
        0 9px 10px
        rgba(0,35,42,.18);
}


.gc-laptop-keyboard {

    position: absolute;

    left: 12%;

    top: 3px;

    width: 76%;

    height: 10px;

    border-radius: 3px;

    background:
        repeating-linear-gradient(
            90deg,
            #4D5A60 0 5px,
            transparent 5px 8px
        );

    opacity: .65;
}


.gc-laptop-trackpad {


    position: absolute;

    left: 43%;

    top: 4px;

    width: 14%;

    height: 9px;

    border:
        1px solid
        rgba(40,50,55,.35);

    border-radius: 3px;
}


/* =========================================================
   TARJETAS FLOTANTES
========================================================= */

.gc-floating-screen {

    position: absolute;

    width: 225px;

    min-height: 145px;

    padding: 14px;

    box-sizing: border-box;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid
        rgba(21,156,197,.18);

    border-radius: 18px;

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

    backdrop-filter:
        blur(10px);

    z-index: 8;
}


/* =========================================================
   HEADER DE LAS TARJETAS
========================================================= */

.gc-screen-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;

    color: var(--gc-text);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 8px;
}


.gc-screen-title {

    display: flex;

    align-items: center;

    gap: 7px;
font-size: 13px;
    font-weight: 600;
}


.gc-screen-icon {

    width: 25px;

    height: 25px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(24,211,220,.12);

    color: var(--gc-blue);

    font-size: 11px;
}


.gc-chat-icon {

    background:
        rgba(22,200,213,.12);
}


.gc-screen-menu {

    color: #AAB9C0;
}


/* =========================================================
   LLAMADAS
========================================================= */

.gc-screen-calls {

    left: 0;

    top: 80px;

    min-height: 180px;

    opacity: 0;

    transform:
        translateX(-100px)
        scale(.78);

    animation:
        gcCallsCycle
        16s
        cubic-bezier(.22,1,.36,1)
        infinite;
}


@keyframes gcCallsCycle {

    0% {

        opacity: 0;

        transform:
            translateX(-100px)
            scale(.78);
    }

    7% {

        opacity: 1;

        transform:
            translateX(-40px)
            scale(.88);
    }

    60% {

        opacity: 1;

        transform:
            translateX(-40px)
            scale(.88);
    }

    70% {

        opacity: 0;

        transform:
            translateX(-100px)
            scale(.78);
    }

    70%,
    100% {

        opacity: 0;
    }
}


/* =========================================================
   FILAS DE LLAMADAS
========================================================= */

.gc-screen-calls .gc-call-row {

    display: grid;

    grid-template-columns:
        18px 1fr auto;

    gap: 7px;

    align-items: center;

    padding: 7px 0;

    border-bottom:
        1px solid #EDF3F5;
}


.gc-screen-calls .gc-call-row:last-child {

    border-bottom: none;
}


.gc-call-status {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 8px;
}


.gc-call-status.incoming {

    color: #16C8A5;
}


.gc-call-status.active {

    color: #18D3DC;

    animation:
        gcCallPulse
        1.8s
        ease-in-out
        infinite;
}


.gc-call-status.outgoing {

    color: #159CC5;
}


@keyframes gcCallPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .55;
    }

    50% {

        transform:
            scale(1.15);

        opacity: 1;
    }
}


.gc-call-row strong {

    display: block;

    color: var(--gc-text);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 10px;
}


.gc-call-row small {

    display: block;

    margin-top: 2px;

    color: #9AAAB2;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 5.5px;
}


.gc-call-time {

    color: #9AAAB2;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 5.5px;
}


/* =========================================================
   CHAT
========================================================= */

.gc-screen-chat {

    right: -5px;

    top: 25px;

    min-height: 190px;

    opacity: 0;

    transform:
        translateX(90px)
        scale(.78);

    animation:
        gcChatCycle
        16s
        cubic-bezier(.22,1,.36,1)
        infinite;
}


@keyframes gcChatCycle {

    0%,
    10% {

        opacity: 0;

        transform:
            translateX(90px)
            scale(.78);
    }

    17% {

        opacity: 1;

        transform:
            translateX(25px)
            scale(.90);
    }

    60% {

        opacity: 1;

        transform:
            translateX(25px)
            scale(.90);
    }

    70% {

        opacity: 0;

        transform:
            translateX(90px)
            scale(.78);
    }

    70%,
    100% {

        opacity: 0;
    }
}


/* =========================================================
   CANALES
========================================================= */

.gc-channel-row {

    display: grid;

    grid-template-columns:
        27px 1fr auto;

    align-items: center;

    gap: 8px;

    padding: 7px 0;

    border-bottom:
        1px solid #EDF3F5;
}


.gc-channel-row:last-child {

    border-bottom: none;
}


.gc-channel-icon {

    width: 27px;

    height: 27px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFFFFF;

    font-size: 13px;

    flex-shrink: 0;
}


.gc-whatsapp {

    background: #25D366;
}


.gc-facebook {

    background: #1877F2;
}


.gc-web {

    background:
        linear-gradient(
            135deg,
            #18D3DC,
            #159CC5
        );
}


.gc-channel-info {

    min-width: 0;
}


.gc-channel-info strong {

    display: block;

    color: var(--gc-text);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 10px;

    font-weight: 600;
}


.gc-channel-info small {

    display: block;

    margin-top: 2px;

    max-width: 135px;

    color: #8B9BA3;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 5.5px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.gc-screen-online {

    color: #16B78E;

    font-size: 6px;
}


.gc-channel-status {

    min-width: 15px;

    height: 15px;

    padding: 0 4px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #E8F9FA;

    color: var(--gc-blue);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 5px;

    font-weight: 600;
}


/* =========================================================
   REPORTES
========================================================= */

.gc-screen-reports {

    right: 35px;

    bottom: 45px;

    width: 225px;

    min-height: 175px;

    opacity: 0;

    transform:
        translateY(70px)
        scale(.78);

    animation:
        gcReportsCycle
        16s
        cubic-bezier(.22,1,.36,1)
        infinite;
}


@keyframes gcReportsCycle {

    0%,
    20% {

        opacity: 0;

        transform:
            translateY(70px)
            scale(.78);
    }

    27% {

        opacity: 1;

        transform:
            translateY(0)
            scale(.88);
    }

    60% {

        opacity: 1;

        transform:
            translateY(0)
            scale(.88);
    }

    70% {

        opacity: 0;

        transform:
            translateY(70px)
            scale(.78);
    }

    70%,
    100% {

        opacity: 0;
    }
}


/* =========================================================
   REPORTE
========================================================= */

.gc-report-period {

    color: #8FA1A9;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 6px;
}


.gc-report-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 10px;
}


/* =========================================================
   GRÁFICO DE TORTA
========================================================= */

.gc-pie-chart {

    width: 86px;

    height: 86px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        conic-gradient(
            #25D366 0deg 173deg,
            #1877F2 173deg 270deg,
            #18D3DC 270deg 360deg
        );

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    animation:
        gcPieAppear
        1.2s
        ease-out
        both;
}


.gc-pie-chart::after {

    content: "";

    position: absolute;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #FFFFFF;
}


.gc-pie-center {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.gc-pie-center strong {

    color: var(--gc-dark);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 11px;

    line-height: 1;
}


.gc-pie-center small {

    margin-top: 3px;

    color: #8FA1A9;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 4.5px;
}


@keyframes gcPieAppear {

    0% {

        transform:
            scale(.7)
            rotate(-20deg);

        opacity: .2;
    }

    100% {

        transform:
            scale(1)
            rotate(0);

        opacity: 1;
    }
}


/* =========================================================
   LEYENDA DEL GRÁFICO
========================================================= */

.gc-report-legend {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.gc-report-legend > div {

    display: grid;

    grid-template-columns:
        7px 1fr auto;

    align-items: center;

    gap: 5px;
}


.gc-report-legend small {

    color: #71858F;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 5.5px;
}


.gc-report-legend strong {

    color: var(--gc-text);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 5.5px;
}


.gc-legend-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;
}


.gc-legend-whatsapp {

    background: #25D366;
}


.gc-legend-facebook {

    background: #1877F2;
}


.gc-legend-web {

    background: #18D3DC;
}


/* =========================================================
   RESULTADO DEL REPORTE
========================================================= */

.gc-report-result {

    margin-top: 11px;

    padding: 6px 8px;

    border-radius: 8px;

    background: #F0F9FA;

    color: var(--gc-text-light);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 5.5px;

    text-align: center;
}


.gc-report-result i {

    margin-right: 4px;

    color: #16C8A5;
}


/* =========================================================
   PUNTOS DECORATIVOS
========================================================= */

.gc-floating-dot {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--gc-cyan);

    opacity: .7;

    animation:
        gcDotFloat
        5s
        ease-in-out
        infinite;
}


.dot-1 {

    top: 80px;

    right: 23%;
}


.dot-2 {

    bottom: 75px;

    left: 20%;

    width: 6px;

    height: 6px;

    animation-delay: 1.5s;
}


.dot-3 {

    top: 45%;

    right: 8%;

    width: 5px;

    height: 5px;

    animation-delay: 3s;
}


@keyframes gcDotFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-10px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .gc-about-container {

        grid-template-columns:
            45% 55%;

        width: 94%;
    }


    .gc-laptop {

        width: 400px;
    }


    .gc-floating-screen {

        width: 190px;
    }


    .gc-screen-calls {

        left: -20px;
    }


    .gc-screen-chat {

        right: -20px;
    }


    .gc-screen-reports {

        width: 200px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .gc-about-section {

        padding:
            75px 0 80px;
    }


    .gc-about-container {

        width:
            calc(100% - 32px);

        display: flex;

        flex-direction: column;

        gap: 45px;
    }


    .gc-about-content {

        max-width:
            600px;

        text-align: center;
    }


    .gc-about-content h2 {

        font-size: 38px;
    }


    .gc-about-content p {

        font-size: 11px;

        text-align: left;
    }


    .gc-about-visual {

        width: 100%;

        height: 390px;

        transform:
            scale(.88);

        transform-origin:
            center center;
    }


    .gc-laptop {

        width: 350px;
    }


    .gc-floating-screen {

        width: 175px;

        min-height: 125px;
    }


    .gc-screen-calls {

        left: -5px;

        top: 70px;
    }


    .gc-screen-chat {

        right: -5px;

        top: 25px;
    }


    .gc-screen-reports {

        right: 10px;

        bottom: 25px;

        width: 190px;
    }


    .gc-pie-chart {

        width: 70px;

        height: 70px;
    }


    .gc-pie-chart::after {

        width: 43px;

        height: 43px;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 500px) {

    .gc-about-content h2 {

        font-size: 34px;
    }


    .gc-about-visual {

        height: 350px;

        transform:
            scale(.72);
    }


    .gc-about-container {

        gap: 15px;
    }
}


/* =========================================================
   MOBILE MUY PEQUEÑO
========================================================= */

@media (max-width: 380px) {

    .gc-about-content h2 {

        font-size: 31px;
    }


    .gc-about-visual {

        transform:
            scale(.64);
    }
}


/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

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

    .gc-laptop,
    .gc-floating-screen,
    .gc-floating-dot,
    .gc-visual-orbit,
    .gc-call-status.active,
    .gc-pie-chart {

        animation:
            none !important;
    }


    .gc-screen-calls,
    .gc-screen-chat,
    .gc-screen-reports {

        opacity: 1 !important;
    }
}







/* =========================================================
   GLOBAL CONNECT — MÓDULOS
   Colores corporativos Global-Tec
========================================================= */

.gc-solutions-section {
    --gc-cyan: #18D3DC;
    --gc-turquoise: #16C8D5;
    --gc-blue: #159CC5;
    --gc-dark: #00232A;
    --gc-dark-blue: #155D78;
    --gc-text: #38546C;
    --gc-muted: #718591;

    width: 100%;
    max-width: 100%;
    padding: 100px 0 90px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FBFDFD 55%,
        #F5FBFC 100%
    );
}

.gc-solutions-section *,
.gc-solutions-section *::before,
.gc-solutions-section *::after {
    box-sizing: border-box;
}

.gc-solutions-container {
    width: 100%;
    max-width: 1650px;
    margin: 0 auto;
    padding: 0 28px;
}

/* =========================================================
   ENCABEZADO
========================================================= */

.gc-solutions-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 48px;
}

.gc-solutions-heading {
    min-width: 0;
}

.gc-section-label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 23px;
    color: #7D92A0;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.gc-label-line {
    display: inline-block;
    width: 48px;
    height: 1px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        var(--gc-cyan),
        var(--gc-blue)
    );
}

.gc-solutions-heading h2 {
    margin: 0;
    color: var(--gc-dark);
    font-family: "Poppins", sans-serif;
    font-size: clamp(38px, 4.5vw, 39px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -2.5px;
}

.gc-solutions-heading h2 em {
    display: block;
    margin-top: 4px;
    color: #7c7c7c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .92em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -1.5px;
}

.gc-solutions-description {
    max-width: 520px;
    justify-self: end;
}

.gc-solutions-description p {
    margin: 0;
    color: var(--gc-text);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}

/* =========================================================
   GRID DE MÓDULOS
========================================================= */

.gc-modules-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* =========================================================
   TARJETAS
========================================================= */

.gc-module-card {
    --module-accent: #159CC5;
    --module-soft: rgba(21, 156, 197, .09);

    min-width: 0;
    min-height: 425px;
    padding: 27px 23px 24px;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    border: 1px solid #DCE9ED;
    border-radius: 25px 25px 25px 9px;

    background: linear-gradient(
        145deg,
        #FFFFFF 0%,
        #FCFEFE 100%
    );

    box-shadow: 0 8px 28px rgba(0, 35, 42, .035);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}

/* Resplandor decorativo sutil */

.gc-module-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -75px;
    right: -75px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--module-soft);
    opacity: .85;
    transition: transform .5s ease, opacity .5s ease;
}

.gc-module-card::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 32px;
    height: 2px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        var(--gc-cyan),
        var(--gc-blue)
    );
    opacity: .55;
    transition: width .35s ease, opacity .35s ease;
}

.gc-module-card:hover {
    transform: translateY(-6px);
    border-color: rgba(21, 156, 197, .45);
    box-shadow:
        0 18px 38px rgba(0, 35, 42, .075),
        0 0 0 1px rgba(24, 211, 220, .05);
}

.gc-module-card:hover::before {
    transform: scale(1.25);
    opacity: 1;
}

.gc-module-card:hover::after {
    width: 58px;
    opacity: 1;
}

/* =========================================================
   NÚMERO
========================================================= */

.gc-module-number {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 25px;
    color: #94AAB5;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
}

/* =========================================================
   ICONOS
========================================================= */

.gc-module-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    margin-bottom: 23px;

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

    border: 1px solid rgba(21, 156, 197, .12);
    border-radius: 17px 17px 17px 6px;

    color: var(--module-accent);
    background: var(--module-soft);

    transition:
        transform .4s ease,
        border-radius .4s ease,
        background .4s ease;
}

.gc-module-icon i {
    font-size: 23px;
    line-height: 1;
}

.gc-module-card:hover .gc-module-icon {
    transform: translateY(-2px) rotate(-3deg);
    border-radius: 17px;
}

/* Color específico por módulo */

.gc-icon-pbx {
    --module-accent: #159CC5;
    --module-soft: rgba(21, 156, 197, .10);
}

.gc-icon-callcenter {
    --module-accent: #155D78;
    --module-soft: rgba(21, 93, 120, .09);
}

.gc-icon-chat {
    --module-accent: #12B9C7;
    --module-soft: rgba(24, 211, 220, .13);
}

.gc-icon-ai {
    --module-accent: #1389AD;
    --module-soft: rgba(19, 137, 173, .10);
}

/* =========================================================
   CATEGORÍA
========================================================= */

.gc-module-category {
    display: block;
    margin-bottom: 10px;
    color: var(--module-accent);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.7px;
    line-height: 1.5;
}

/* =========================================================
   TÍTULO
========================================================= */

.gc-module-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 15px;
    color: var(--gc-dark);
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.4px;
}

/* =========================================================
   DESCRIPCIÓN
========================================================= */

.gc-module-description {
    position: relative;
    z-index: 1;
    margin: 0 0 22px;
    color: var(--gc-muted);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.85;
}

/* =========================================================
   LISTA DE FUNCIONES
========================================================= */

.gc-module-info {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 11px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.gc-module-info li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--gc-text);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.55;
}

.gc-module-info li i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--module-accent);
    font-size: 10px;
}

/* =========================================================
   ENLACE
========================================================= */

.gc-module-link {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: auto;
    padding-top: 15px;

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

    border-top: 1px solid #E8F0F2;

    color: var(--gc-dark-blue);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;

    transition: color .3s ease;
}

.gc-module-link span {
    width: 27px;
    height: 27px;
    flex-shrink: 0;

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

    border-radius: 50%;
    background: rgba(24, 211, 220, .12);
    color: var(--gc-blue);
    font-size: 15px;

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease;
}

.gc-module-link:hover {
    color: var(--gc-blue);
}

.gc-module-link:hover span {
    transform: translate(3px, -2px);
    color: #FFFFFF;
    background: linear-gradient(
        135deg,
        var(--gc-cyan),
        var(--gc-blue)
    );
}

/* =========================================================
   CIERRE DE SECCIÓN
========================================================= */

.gc-solutions-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    margin-top: 45px;
    text-align: center;
}

.gc-footer-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gc-cyan);
    box-shadow: 0 0 0 5px rgba(24, 211, 220, .10);
}

.gc-solutions-footer p {
    margin: 0;
    color: #718591;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    line-height: 1.8;
}

.gc-solutions-footer strong {
    color: var(--gc-dark-blue);
    font-weight: 600;
}

/* =========================================================
   ANIMACIÓN DE ENTRADA
   Funciona si JS agrega .is-visible al grid
========================================================= */

.gc-modules-grid > .gc-module-card {
    opacity: 1;
    transform: translateY(0);
}

.gc-modules-grid.gc-modules-animate > .gc-module-card {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .65s ease,
        transform .65s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.gc-modules-grid.gc-modules-animate.is-visible > .gc-module-card {
    opacity: 1;
    transform: translateY(0);
}

.gc-modules-grid.is-visible > .gc-module-card:nth-child(1) {
    transition-delay: .05s;
}

.gc-modules-grid.is-visible > .gc-module-card:nth-child(2) {
    transition-delay: .15s;
}

.gc-modules-grid.is-visible > .gc-module-card:nth-child(3) {
    transition-delay: .25s;
}

.gc-modules-grid.is-visible > .gc-module-card:nth-child(4) {
    transition-delay: .35s;
}

/* =========================================================
   PANTALLAS GRANDES
========================================================= */

@media (min-width: 1600px) {
    .gc-solutions-container {
        max-width: 1750px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .gc-modules-grid {
        gap: 20px;
    }

    .gc-module-card {
        min-height: 455px;
        padding: 30px 28px 25px;
    }

    .gc-module-card h3 {
        font-size: 21px;
    }

    .gc-module-description {
        font-size: 12px;
    }

    .gc-module-info li {
        font-size: 11px;
    }
}

@media (min-width: 1800px) {
    .gc-solutions-container {
        max-width: 1850px;
    }

    .gc-modules-grid {
        gap: 22px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
    .gc-solutions-container {
        max-width: 1000px;

    }

    .gc-solutions-intro {
        gap: 35px;
    }

    .gc-solutions-heading h2 {
        font-size: 48px;
    }

    .gc-module-card {
        min-height: 430px;
        padding: 24px 18px;
    }

    .gc-module-card h3 {
        font-size: 16px;
    }

    .gc-module-description {
        font-size: 10px;
    }

    .gc-module-info li {
        font-size: 9px;
    }
}

@media (max-width: 900px) {
    .gc-solutions-section {
        padding: 80px 0;
    }

    .gc-solutions-intro {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 38px;
    }

    .gc-solutions-description {
        justify-self: start;
        max-width: 650px;
    }

    .gc-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .gc-module-card {
        min-height: 400px;
        padding: 26px 23px;
    }

    .gc-module-card h3 {
        font-size: 19px;
    }

    .gc-module-description {
        font-size: 11px;
    }

    .gc-module-info li {
        font-size: 10px;
    }
}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {
    .gc-solutions-section {
        padding: 65px 0 60px;
    }

    .gc-solutions-container {
        padding: 0 18px;
    }

    .gc-solutions-intro {
        gap: 18px;
        margin-bottom: 30px;
    }

    .gc-section-label {
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .gc-solutions-heading h2 {
        font-size: clamp(36px, 10vw, 46px);
        letter-spacing: -1.8px;
    }

    .gc-solutions-description p {
        font-size: 12px;
        line-height: 1.8;
    }

    .gc-modules-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .gc-module-card {
        min-height: 0;
        padding: 23px 22px 20px;
        border-radius: 21px 21px 21px 8px;
    }

    .gc-module-number {
        margin-bottom: 19px;
    }

    .gc-module-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

    .gc-module-icon i {
        font-size: 21px;
    }

    .gc-module-card h3 {
        font-size: 19px;
        margin-bottom: 12px;
    }

    .gc-module-description {
        margin-bottom: 19px;
        font-size: 11px;
        line-height: 1.8;
    }

    .gc-module-info {
        gap: 10px;
        margin-bottom: 20px;
    }

    .gc-module-info li {
        font-size: 10px;
    }

    .gc-module-link {
        padding-top: 13px;
        font-size: 10px;
    }

    .gc-solutions-footer {
        align-items: flex-start;
        margin-top: 30px;
        padding: 0 5px;
        text-align: left;
    }

    .gc-solutions-footer p {
        font-size: 10px;
    }
}

/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .gc-module-card,
    .gc-module-card::before,
    .gc-module-card::after,
    .gc-module-icon,
    .gc-module-link span {
        transition: none !important;
    }

    .gc-modules-grid.gc-modules-animate > .gc-module-card {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   GLOBAL CONNECT — AJUSTE DE MÓDULOS
   Menos ancho y sin burbujas decorativas
========================================================= */

/* Contenedor más compacto */
.gc-solutions-container {
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Cuatro tarjetas con espacios equilibrados */
.gc-modules-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* Eliminar círculos y decoraciones de fondo */
.gc-module-card::before,
.gc-module-card::after {
    content: none !important;
    display: none !important;
}

/* Tarjetas más limpias */
.gc-module-card {
    min-width: 0;
    min-height: 410px;
    padding: 25px 22px;
    border-radius: 22px 22px 22px 8px;
    background: #ffffff;
    border: 1px solid #e0ebef;
    box-shadow: 0 6px 22px rgba(0, 35, 42, 0.035);
}

/* Hover sutil, sin adornos */
.gc-module-card:hover {
    transform: translateY(-4px);
    background: #ffffff;
    border-color: rgba(21, 156, 197, 0.4);
    box-shadow: 0 12px 28px rgba(0, 35, 42, 0.07);
}

/* Conservar los iconos, sin fondos decorativos extra */
.gc-module-icon {
    position: relative;
    z-index: 1;
}

/* Encabezado más compacto */
.gc-solutions-intro {
    gap: 45px;
    margin-bottom: 42px;
}

/* Pantallas medianas */
@media (max-width: 1100px) {
    .gc-solutions-container {
        width: 94%;
        max-width: 950px;
    }

    .gc-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .gc-module-card {
        min-height: 390px;
    }
}

/* Móviles */
@media (max-width: 600px) {
    .gc-solutions-container {
        width: calc(100% - 32px);
    }

    .gc-solutions-intro {
        gap: 18px;
        margin-bottom: 28px;
    }

    .gc-modules-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .gc-module-card {
        min-height: auto;
        padding: 23px 21px;
    }
}

/* =========================================================
   GLOBAL CONNECT — COMPARATIVA DE SOLUCIONES
========================================================= */

.gc-compare-bubbles-section {
    --gc-cyan: #18D3DC;
    --gc-blue: #159CC5;
    --gc-dark: #00232A;
    --gc-text: #38546C;
    --gc-muted: #718591;

    width: 100%;
    max-width: 100%;
    padding: 75px 20px 65px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        #F4FAFB 0%,
        #FFFFFF 48%,
        #F5FAFB 100%
    );
    font-family: "Poppins", sans-serif;
}

.gc-compare-bubbles-section *,
.gc-compare-bubbles-section *::before,
.gc-compare-bubbles-section *::after {
    box-sizing: border-box;
}

.gc-compare-bubbles-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

/* ENCABEZADO */

.gc-compare-bubbles-intro {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.gc-compare-bubbles-label {
    display: block;
    margin-bottom: 13px;
    color: #7D92A0;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}

.gc-compare-bubbles-intro h2 {
    margin: 0;
    color: var(--gc-dark);
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.3px;
}

.gc-compare-bubbles-intro p {
    max-width: 610px;
    margin: 15px auto 0;
    color: var(--gc-muted);
    font-size: 11px;
    line-height: 1.8;
}

.gc-compare-heading-line {
    display: block;
    width: 80px;
    height: 2px;
    margin: 19px auto 0;
    background: linear-gradient(
        90deg,
        var(--gc-cyan),
        #C9E7EB
    );
    border-radius: 5px;
}

/* COLUMNAS */

.gc-compare-carousel {
    width: 100%;
}

.gc-compare-track {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

.gc-compare-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ENCABEZADOS DE COLUMNA */

.gc-compare-column-header {
    min-height: 54px;
    padding: 11px 10px;
    margin-bottom: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 15px;
    text-align: center;
}

.gc-compare-column-header strong {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .3px;
}

.gc-compare-column-header small {
    font-size: 7px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .8px;
}

/* Funcionalidad */

.gc-column-aspect .gc-compare-column-header {
    background: #EAF3F6;
    color: #38546C;
}

/* Global Connect */

.gc-column-after .gc-compare-column-header {
    background: linear-gradient(
        110deg,
        #18D3DC,
        #159CC5
    );
    color: #FFFFFF;
}

/* Tradicionales */

.gc-column-before .gc-compare-column-header {
    background: #F0F2F3;
    color: #687982;
}

/* TARJETAS GENERALES */

.gc-compare-bubble {
    width: 100%;
    min-width: 0;
    min-height: 57px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E8EFF1;
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: 0 5px 16px rgba(0, 35, 42, .025);
    overflow-wrap: anywhere;
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.gc-compare-bubble:hover {
    border-color: #D4E8EC;
    box-shadow: 0 8px 20px rgba(0, 35, 42, .045);
}

/* FUNCIONALIDADES */

.gc-aspect-bubble {
    min-height: 57px;
    background: #FFFFFF;
}

.gc-compare-item-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gc-compare-item-copy strong {
    color: #263F50;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}

/* MARCAS DE ESTADO */

.gc-before-mark,
.gc-after-mark {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 11px;
}

/* GLOBAL CONNECT: TURQUESA SUAVE */

.gc-after-bubble {
    background: #F7FCFC;
    border-color: #EAF7F8;
}

.gc-after-mark {
    background: #DDF3E8;
    color: #16A765;
}

.gc-after-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gc-after-copy strong {
    color: #38546C;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

/* SOLUCIONES TRADICIONALES: GRIS */

.gc-before-bubble {
    background: #F7F8F9;
    border-color: #EDF0F1;
    color: #74828A;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.gc-before-mark {
    background: #FBE3E5;
    color: #F04450;
}

/* PIE DE SECCIÓN */

.gc-compare-bubbles-footer {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.gc-compare-footer-line {
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: var(--gc-cyan);
}

.gc-compare-bubbles-footer p {
    margin: 0;
    color: #718591;
    font-size: 10px;
    line-height: 1.8;
}

.gc-compare-bubbles-footer strong {
    color: #155D78;
    font-weight: 600;
}

/* INDICADORES OCULTOS EN ESCRITORIO */

.gc-compare-dots {
    display: none;
}

/* TABLET */

@media (max-width: 900px) {
    .gc-compare-bubbles-section {
        padding: 65px 18px 55px;
    }

    .gc-compare-track {
        gap: 10px;
    }

    .gc-compare-column {
        gap: 8px;
    }

    .gc-compare-bubble {
        min-height: 60px;
        padding: 9px;
        gap: 7px;
    }

    .gc-compare-column-header {
        min-height: 52px;
        padding: 9px 7px;
    }

    .gc-compare-column-header strong {
        font-size: 9px;
    }

    .gc-compare-item-copy strong {
        font-size: 9px;
    }

    .gc-after-copy strong,
    .gc-before-bubble {
        font-size: 10px;
    }
}

/* MÓVIL: CARRUSEL */

@media (max-width: 700px) {
    .gc-compare-bubbles-section {
        padding: 55px 15px 45px;
    }

    .gc-compare-bubbles-intro {
        margin-bottom: 27px;
    }

    .gc-compare-bubbles-intro h2 {
        font-size: clamp(27px, 7vw, 35px);
        letter-spacing: -.9px;
    }

    .gc-compare-bubbles-intro p {
        font-size: 10px;
    }

    .gc-compare-carousel {
        overflow: hidden;
        width: 100%;
    }

    .gc-compare-track {
        display: flex;
        width: 100%;
        gap: 0;
        align-items: stretch;
        transition: transform .45s cubic-bezier(.22, 1, .36, 1);
        touch-action: pan-y;
    }

    .gc-compare-column {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        gap: 9px;
        padding: 0 1px;
    }

    .gc-compare-column-header {
        min-height: 58px;
        border-radius: 15px;
    }

    .gc-compare-column-header strong {
        font-size: 11px;
    }

    .gc-compare-column-header small {
        font-size: 7px;
    }

    .gc-compare-bubble {
        min-height: 60px;
        padding: 12px 14px;
        gap: 11px;
        border-radius: 15px;
    }

    .gc-compare-item-copy strong {
        font-size: 11px;
    }

    .gc-after-copy strong,
    .gc-before-bubble {
        font-size: 15px;
    }

    .gc-before-mark,
    .gc-after-mark {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .gc-compare-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 19px;
    }

    .gc-compare-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #D6E3E7;
        cursor: pointer;
        transition:
            width .25s ease,
            background .25s ease;
    }

    .gc-compare-dot.active {
        width: 23px;
        border-radius: 8px;
        background: linear-gradient(
            90deg,
            var(--gc-cyan),
            var(--gc-blue)
        );
    }

    .gc-compare-bubbles-footer {
        margin-top: 25px;
    }

    .gc-compare-bubbles-footer p {
        max-width: 320px;
        font-size: 10px;
    }
}

/* MÓVIL PEQUEÑO */

@media (max-width: 360px) {
    .gc-compare-bubbles-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .gc-compare-bubbles-intro h2 {
        font-size: 26px;
    }

    .gc-after-copy strong,
    .gc-before-bubble {
        font-size: 13px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .gc-compare-track,
    .gc-compare-bubble,
    .gc-compare-dot {
        transition: none !important;
    }
}

/* =========================================================
   AJUSTE TIPOGRÁFICO HOME — títulos más elegantes y contenidos
   ========================================================= */
.global-hero { padding-top: clamp(34px, 5vw, 64px); padding-bottom: clamp(42px, 5vw, 68px); }
.hero-heading { width: min(92%, 1080px); margin-inline: auto; }
.hero-heading h1 { font-size: clamp(27px, 2.5vw, 34px); line-height: 1.25; letter-spacing: -.45px; }
.hero-heading p { max-width: 850px; margin-inline: auto; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }
.connect-world-section { padding: clamp(68px, 8vw, 105px) 20px; }
.connect-world-content { width: min(100%, 1120px); }
.connect-world-content h2 { max-width: 1000px; margin: 0 auto; font-size: clamp(27px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.4px; }
.connect-world-content h2 span { display: block; max-width: 1000px; margin: 10px auto 0; font-size: clamp(19px, 2vw, 26px); line-height: 1.45; font-style: italic; font-weight: 400; color: #566982; }
.connect-world-content p { max-width: 820px; margin: 0 auto; font-size: 14px; line-height: 1.7; }
.internet-empresarial-section { padding: clamp(68px, 8vw, 105px) 20px; }
.internet-empresarial-header { width: min(100%, 1120px); margin: 0 auto 30px; padding-inline: 12px; }
.internet-empresarial-header h2 { font-size: clamp(27px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.4px; }
.internet-empresarial-header h2 span { display: block; max-width: 1050px; margin: 10px auto 0; font-size: clamp(19px, 2vw, 26px); line-height: 1.45; font-style: italic; font-weight: 400; color: #566982; }
.clientes-section { padding-top: clamp(65px, 7vw, 100px); padding-bottom: clamp(65px, 7vw, 100px); }
.clientes-heading { width: min(92%, 1100px); margin: 0 auto 42px; }
.clientes-heading h2 { font-size: clamp(29px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -.7px; }
.clientes-heading h2 span { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; letter-spacing: 1.5px; }
@media (max-width: 767px) {
  .connect-world-section, .internet-empresarial-section { padding: 48px 18px; }
  .connect-world-content h2, .internet-empresarial-header h2 { font-size: 25px; letter-spacing: -.25px; }
  .connect-world-content h2 span, .internet-empresarial-header h2 span { font-size: 18px; line-height: 1.5; }
  .clientes-heading { margin-bottom: 30px; }
  .clientes-heading h2 { font-size: 29px; line-height: 1.2; }
  .clientes-heading h2 span { font-size: 21px; letter-spacing: .5px; }
}


/* =========================================================
   AJUSTES VISUALES OCTUBRE 2026
   Titulares compactos y sección Global Connect en fondo oscuro
   ========================================================= */

/* Sistema de titulares del Home, alineado con la página Global Connect */
.connect-world-content h2,
.internet-empresarial-header h2,
.clientes-heading h2 {
    width: min(100%, 980px);
    margin-left: auto;
    margin-right: auto;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(27px, 2.5vw, 35px);
    line-height: 1.24;
    letter-spacing: -0.55px;
    font-weight: 500;
    text-wrap: balance;
}
.connect-world-content h2 span,
.internet-empresarial-header h2 span,
.clientes-heading h2 span {
    display: block;
    max-width: 920px;
    margin: 10px auto 0;
    font-size: clamp(18px, 1.9vw, 25px);
    line-height: 1.45;
    letter-spacing: -0.2px;
    font-weight: 400;
    text-wrap: balance;
}
.connect-world-content p,
.internet-empresarial-header p,
.clientes-heading p {
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    line-height: 1.7;
}

/* Sección Global Connect: fondo oscuro como la página del producto */
.global-connect-section {
    background: #002f38;
    padding: clamp(56px, 7vw, 88px) 20px;
    position: relative;
    overflow: hidden;
}
.global-connect-box {
    width: min(100%, 1240px);
    max-width: 1240px;
    min-height: 520px;
    height: auto;
   
    border-radius: 28px;

}
.global-connect-left h2 {
    color: #ffffff;
    font-size: clamp(27px, 2.5vw, 36px);
    line-height: 1.22;
    letter-spacing: -.55px;
    font-weight: 600;
    text-wrap: balance;
}
.global-connect-left p {
    color: #c4dfe3;
    font-size: 15px;
    line-height: 1.7;
}
.global-connect-logo img {
    max-width: min(100%, 290px);
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.12));
}
.global-connect-section .internet-card-btn {
    align-self: flex-start;
    background: #13bdcc;
    color: #00323b;
    border-color: #13bdcc;
}
.global-connect-section .internet-card-btn:hover {
    background: #55e0e5;
    border-color: #55e0e5;
}
.global-connect-dashboard {
    border-radius: 14px;
  
}
@media (max-width: 991px) {
    .global-connect-section { padding: 48px 16px; }
    .global-connect-box { min-height: 0; height: auto; }
    .global-connect-left { padding: 44px 30px 24px; }
    .global-connect-right { padding: 10px 24px 42px; }
}
@media (max-width: 767px) {
    .connect-world-content h2, .internet-empresarial-header h2, .clientes-heading h2 { font-size: 26px; line-height: 1.25; }
    .connect-world-content h2 span, .internet-empresarial-header h2 span, .clientes-heading h2 span { font-size: 18px; line-height: 1.5; }
    .global-connect-section { padding: 36px 12px; }
    .global-connect-box { border-radius: 22px; }
    .global-connect-left { padding: 34px 22px 20px; }
    .global-connect-left h2 { font-size: 27px; }
    .global-connect-left p { font-size: 14px; }
    .global-connect-right { padding: 8px 12px 28px; }
}

/* =========================================================
   SISTEMA UNIFICADO DE TÍTULOS DEL HOME
   Alineado con la jerarquía tipográfica de Global Connect
   ========================================================= */
.global-hero .hero-heading {
    width: min(92%, 900px);
    margin-inline: auto;
}

.global-hero .hero-heading h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(38px, 4.2vw, 38px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.8px;
    max-width: 780px;
    margin: 0 auto;
}

.global-hero .hero-heading h1 span {
    display: block;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
    letter-spacing: -1.2px;
    color: #159fc4;
    margin-top: 5px;
}

.global-hero .hero-heading p {
    max-width: 680px;
    margin: 18px auto 0;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.8;
}

/* Títulos principales de las secciones del Home */
.connect-world-content h2,
.global-connect-left h2,
.internet-empresarial-header h2,
.empresa-brand h2,
.clientes-heading h2,
.gc-comparison-heading h2,
.gc-about-content h2,
.gc-solutions-heading h2,
.gc-compare-bubbles-intro h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(32px, 3.5vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.2px;
    text-wrap: balance;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.connect-world-content h2 span,
.global-connect-left h2 span,
.internet-empresarial-header h2 span,
.empresa-brand h2 span,
.clientes-heading h2 span,
.gc-comparison-heading h2 em,
.gc-about-content h2 em,
.gc-solutions-heading h2 em,
.gc-compare-bubbles-intro h2 em {
    font-weight: 400;
    color: #159fc4;
}

/* En móviles se mantiene la misma jerarquía, con proporciones menores */
@media (max-width: 767px) {
    .global-hero .hero-heading h1 {
        font-size: clamp(31px, 8vw, 39px);
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .global-hero .hero-heading h1 span {
        letter-spacing: -.6px;
    }

    .connect-world-content h2,
    .global-connect-left h2,
    .internet-empresarial-header h2,
    .empresa-brand h2,
    .clientes-heading h2,
    .gc-comparison-heading h2,
    .gc-about-content h2,
    .gc-solutions-heading h2,
    .gc-compare-bubbles-intro h2 {
        font-size: clamp(28px, 7vw, 34px);
        line-height: 1.18;
        letter-spacing: -.7px;
    }
}


/* =========================================================
   GLOBAL CONNECT EN HOME — HERO OSCURO MODERNO
   Estilo inspirado en la referencia visual del 28/10/2026
   ========================================================= */
.global-connect-section {
    padding: 109px 0 82px;
    background: radial-gradient(ellipse at 75% 48%, rgba(0, 113, 132, .52), transparent 45%), linear-gradient(112deg, #00272f 0%, #004653 54%, #075a6c 100%);
}

.global-connect-box {
    width: min(92%, 1640px);
    max-width: 1640px;
    height: 540px;
   
    border-radius: 30px;
    overflow: hidden;
   
}

.global-connect-row {
    min-height: 100%;
}

.global-connect-left {
    padding: 38px 30px 38px clamp(34px, 5.2vw, 96px);
    justify-content: center;
    z-index: 5;
}

.global-connect-logo {
    margin-bottom: 24px;
}

.global-connect-logo img {
    width: 325px;
    max-width: 88%;
    height: auto;
}

.global-connect-left h2 {
    max-width: 620px;
    margin: 0 0 24px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(32px, 2.55vw, 44px);
    line-height: 1.18;
    letter-spacing: -1.25px;
    font-weight: 700;
}

.global-connect-left p {
    max-width: 590px;
    margin: 0 0 28px;
    color: #c5e0e3;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
}

.global-connect-left .internet-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    min-width: 146px;
    min-height: 46px;
    padding: 12px 20px;
    margin-left: 18px;
    border: 0;
    border-radius: 14px;
    background: #13bfce;
    color: #00343b;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.global-connect-left .internet-card-btn:hover {
    color: #002f36;
    background: #35d4df;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.global-connect-right {
    min-height: 100%;
    padding: 0;
    position: relative;
    
}

.global-connect-visual {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: visible;
}

.global-connect-dashboard {
    position: absolute;
    width: 100%;
    max-width: none;
    height: 100%;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: left center;
    display: block;
    z-index: 1;
    border-radius: 26px 0 0 26px;
}

.global-connect-bubbles {
    z-index: 10;
    overflow: visible;
}

.gc-chat-bubble {
    width: clamp(205px, 17vw, 250px);
    min-height: 62px;
    padding: 10px 13px;
    border-radius: 16px;
    box-shadow: 0 9px 22px rgba(0, 22, 28, .16);
}

.gc-chat-1 { left: 2px; }
.gc-chat-2 { left: 2px; }
.gc-chat-3 { left: 2px; }
.gc-chat-4 { left: 2px; }
.gc-chat-5 { left: 2px; }

@media (max-width: 1199px) and (min-width: 992px) {
    .global-connect-box { height: 500px; width: 94%; }
    .global-connect-left { padding-left: 38px; padding-right: 20px; }
    .global-connect-left h2 { font-size: clamp(30px, 3vw, 38px); }
    .global-connect-logo img { width: 210px; }
    .gc-chat-bubble { width: 210px; }
}

@media (max-width: 991px) {
    .global-connect-section { padding: 34px 0 56px; }
    .global-connect-box { width: 92%; height: auto; min-height: 0; border-radius: 24px; }
    .global-connect-row { height: auto; }
    .global-connect-left { padding: 42px 28px 30px; text-align: left; align-items: flex-start; }
    .global-connect-logo { width: 100%; justify-content: flex-start; margin-bottom: 20px; }
    .global-connect-logo img { width: 210px; }
    .global-connect-left h2 { max-width: 640px; font-size: clamp(30px, 5vw, 40px); line-height: 1.18; letter-spacing: -.8px; }
    .global-connect-left p { font-size: 15px; }
    .global-connect-left .internet-card-btn { margin-left: 0; }
    .global-connect-right { height: 390px; min-height: 390px; }
    .global-connect-visual { height: 390px; min-height: 390px; }
    .global-connect-dashboard { width: 100%; height: 100%; object-position: center; border-radius: 0 0 22px 22px; }
    .gc-chat-bubble { left: 50% !important; width: min(245px, 72%); transform: translateX(-50%) translateY(15px) scale(.9); }
    .gc-chat-1 { top: 20px; }
    .gc-chat-2 { top: 88px; }
    .gc-chat-3 { top: 156px; }
    .gc-chat-4 { top: 224px; }
    .gc-chat-5 { top: 292px; }
}

@media (max-width: 575px) {
    .global-connect-section { padding: 24px 0 42px; }
    .global-connect-box { width: 94%; border-radius: 20px; }
    .global-connect-left { padding: 32px 22px 26px; }
    .global-connect-logo img { width: 180px; }
    .global-connect-left h2 { font-size: clamp(28px, 8vw, 34px); margin-bottom: 18px; }
    .global-connect-left p { font-size: 14px; line-height: 1.6; }
    .global-connect-right, .global-connect-visual { height: 350px; min-height: 350px; }
    .gc-chat-bubble { width: min(232px, 78%); }
    .gc-chat-text strong { font-size: 10px; }
    .gc-chat-text span { font-size: 9px; }
}






/* Sistema unificado de separadores y puntos animados Global-Tec */
.gc-intro-rule,.gi-rule,.gi-title-rule{display:flex;align-items:center;justify-content:center;gap:5px}
.gc-intro-rule span,.gi-rule i,.gi-title-rule i{display:block;width:9px;height:7px;flex:0 0 auto;border-radius:10px;background:#b7e9e9;opacity:.7;transform:scale(.88);animation:gt-unified-dot 1.8s ease-in-out infinite}
.gc-intro-rule span:nth-child(2),.gi-rule i:nth-child(2),.gi-title-rule i:nth-child(2){width:35px;background:#18d3dc;animation-delay:.2s}
.gc-intro-rule span:nth-child(3),.gi-rule i:nth-child(3),.gi-title-rule i:nth-child(3){animation-delay:.4s}
@keyframes gt-unified-dot{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.gc-intro-rule span,.gi-rule i,.gi-title-rule i{animation:none;opacity:1;transform:none}}



/* Unificación reforzada de puntos animados en todas las páginas */
.gc-intro-rule span,.gi-rule i,.gi-title-rule i{
  animation:gt-unified-dot 1.8s ease-in-out infinite !important;
  opacity:.7 !important;transform:scale(.88) !important;
}
.gc-intro-rule span:nth-child(2),.gi-rule i:nth-child(2),.gi-title-rule i:nth-child(2){animation-delay:.2s !important}
.gc-intro-rule span:nth-child(3),.gi-rule i:nth-child(3),.gi-title-rule i:nth-child(3){animation-delay:.4s !important}
@media(prefers-reduced-motion:reduce){
 .gc-intro-rule span,.gi-rule i,.gi-title-rule i{animation:none !important;opacity:1 !important;transform:none !important}
}



/* Global-Tec shared animated separator: three beats, consistently across pages */
.gc-intro-rule span,.gi-rule i,.gi-title-rule i{
  display:block !important;flex:0 0 auto !important;
  width:9px !important;height:7px !important;border-radius:20px !important;
  background:#b7e9e9 !important;opacity:.65 !important;
  animation:gt-separator-pulse 1.5s ease-in-out infinite !important;
}
.gc-intro-rule span:nth-child(2),.gi-rule i:nth-child(2),.gi-title-rule i:nth-child(2){
  width:35px !important;background:#18d3dc !important;animation-delay:.18s !important;
}
.gc-intro-rule span:nth-child(3),.gi-rule i:nth-child(3),.gi-title-rule i:nth-child(3){
  animation-delay:.36s !important;
}
@keyframes gt-separator-pulse{
  0%,100%{opacity:.45;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.12)}
}



/* Separador animado Global-Tec: regla final compartida para todas las páginas */
.gc-intro-rule,.gi-rule,.gi-title-rule{
 display:flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;
}
.gc-intro-rule span,.gi-rule i,.gi-title-rule i{
 display:block !important;flex:0 0 auto !important;width:9px !important;height:7px !important;
 min-width:9px !important;border-radius:99px !important;background:#b7e9e9 !important;
 opacity:1 !important;transform-origin:center !important;
 animation:gt-separator-active 1.25s ease-in-out infinite !important;
 animation-play-state:running !important;
}
.gc-intro-rule span:nth-child(2),.gi-rule i:nth-child(2),.gi-title-rule i:nth-child(2){
 width:35px !important;min-width:35px !important;background:#18d3dc !important;animation-delay:.16s !important;
}
.gc-intro-rule span:nth-child(3),.gi-rule i:nth-child(3),.gi-title-rule i:nth-child(3){animation-delay:.32s !important}
@keyframes gt-separator-active{
 0%,100%{opacity:.48;transform:scale(.78)}
 50%{opacity:1;transform:scale(1.13)}
}



/* Global-Tec: separador único tipo barra animada */
.gc-ba-rule{
  width:180px !important;height:4px !important;margin:24px auto 0 !important;
  background:rgba(181,220,224,.42) !important;border-radius:20px !important;
  overflow:hidden !important;position:relative !important;
}
.gc-ba-rule span{
  display:block !important;width:42% !important;height:100% !important;
  margin:0 !important;border-radius:20px !important;
  background:linear-gradient(90deg,#18d3dc,#159cc5) !important;
  animation:gt-ba-scan 2.4s ease-in-out infinite alternate !important;
}
@keyframes gt-ba-scan{
  from{transform:translateX(0)}
  to{transform:translateX(138%)}
}
/* Tipografía: mínimo legible de 14px para textos de lectura */
p,li,small,label,figcaption,blockquote,
input,textarea,select,
.gc-ba-heading p,.gi-section p,.gi-section li,
.gi-solution-content p,.gi-solution-content li,
.gi-included-item small,.gi-compare-column li{
  font-size:max(14px,1em) !important;
}
@media(prefers-reduced-motion:reduce){
 .gc-ba-rule span{animation:none !important;transform:translateX(70%)}
}



/* Sistema responsive Global Tec: márgenes laterales seguros en pantallas pequeñas */
:root{--gt-page-gutter:clamp(18px,4.2vw,64px);--gt-content-max:1250px}
html,body{max-width:100%;overflow-x:hidden}
.container,.container-fluid,.header-container,
.gc-container,.gi-container,
.benefits-box,.global-connect-box,
.gc-page .gc-container.gc-contact-grid{
 box-sizing:border-box
}
.gc-container,.gi-container{
 width:min(var(--gt-content-max),calc(100% - (var(--gt-page-gutter) * 2))) !important;
 max-width:var(--gt-content-max) !important;
 margin-left:auto !important;margin-right:auto !important
}
@media(max-width:767px){
 :root{--gt-page-gutter:20px}
 .container:not(.container-fluid),.header-container{
  width:calc(100% - 40px) !important;max-width:none !important;
  margin-left:auto !important;margin-right:auto !important
 }
 .gc-container,.gi-container,
 .gc-page .gc-container.gc-contact-grid{
  width:calc(100% - 40px) !important;max-width:none !important
 }
 .benefits-box,.global-connect-box{
  width:calc(100% - 40px) !important;max-width:none !important;
  margin-left:auto !important;margin-right:auto !important
 }
}
@media(max-width:420px){
 :root{--gt-page-gutter:18px}
 .container:not(.container-fluid),.header-container,
 .gc-container,.gi-container,
 .gc-page .gc-container.gc-contact-grid,
 .benefits-box,.global-connect-box{
  width:calc(100% - 36px) !important
 }
}