:root {
    --blue: #1261eb;
    --blue-2: #2e82f7;
    --blue-pale: #e9f1ff;
    --ink: #101a36;
    --muted: #596783;
    --border: #dae6fa;
    --shadow: 0 24px 46px rgba(23, 48, 91, .12), 0 5px 14px rgba(23, 48, 91, .06);

    /* Colores específicos de productos */
    --gcm-blue: #2697f1;
    --viajes-green: #00a0a5;
    --winbrok-blue: #2166a5;
    --winbrok-blue-light: #3686cf;
    --winbrok-blue-dark: #155691;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #f9fbff;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==============================================================
   ESTRUCTURA GENERAL Y FONDO
   ============================================================== */

.page {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;
    padding: 38px 30px 28px;
    background:
        radial-gradient(circle at 18% -8%, rgba(104, 160, 250, .18), transparent 31%),
        radial-gradient(circle at 95% 5%, rgba(36, 115, 241, .19), transparent 22%),
        radial-gradient(circle at 5% 92%, rgba(41, 122, 247, .10), transparent 27%),
        linear-gradient(132deg, #fff 4%, #f7faff 47%, #fff 80%);
}

.blob,
.wave,
.dots {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.blob--right {
    top: -80px;
    right: -42px;
    width: 292px;
    height: 440px;
    background: linear-gradient(145deg, #368af6, #0756e5 64%);
    border-radius: 52% 0 0 61%;
    transform: rotate(-13deg);
    box-shadow:
        -29px 22px 0 rgba(32, 112, 241, .11),
        -64px 51px 0 rgba(32, 112, 241, .065);
}

.blob--right::after {
    content: "";
    position: absolute;
    inset: 40px -70px -35px 30px;
    border: 2px solid rgba(130, 180, 255, .35);
    border-radius: inherit;
    transform: rotate(-8deg);
}

.wave--right {
    top: 91px;
    right: -10px;
    width: 445px;
    height: 360px;
    opacity: .46;
    border-top: 2px solid #b6cff7;
    border-radius: 52% 0 0 0;
    transform: rotate(15deg);
}

.wave--right::after {
    content: "";
    position: absolute;
    inset: 23px 0 0 20px;
    border-top: 2px solid #d6e4fb;
    border-radius: inherit;
}

.blob--left {
    left: -130px;
    bottom: -142px;
    width: 515px;
    height: 295px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(33, 116, 246, .16), transparent 65%);
    transform: rotate(-15deg);
}

.dots::after {
    content: "";
    display: block;
    width: 94px;
    height: 76px;
    background-image: radial-gradient(circle, #adcbf9 4px, transparent 5px);
    background-size: 23px 23px;
}

.dots--left {
    top: 184px;
    left: clamp(26px, 6vw, 88px);
    opacity: .54;
}

.dots--right {
    top: 50px;
    right: clamp(38px, 5vw, 105px);
    opacity: .55;
}

/* ==============================================================
   LOGO PRINCIPAL DE ACTIVEXSOFT
   ============================================================== */

.brand-wrap {
    text-align: center;
}

.brand {
    display: inline-flex;
    align-items: center;
    transition: opacity .18s ease;
}

.brand:hover {
    opacity: .85;
}

.brand-logo {
    display: block;
    width: clamp(490px, 68vw, 780px);
    height: clamp(132px, 16vw, 184px);
    object-fit: contain;
    object-position: center;
}

/* ==============================================================
   HERO / PRESENTACIÓN
   ============================================================== */

.hero {
    max-width: 900px;
    margin: 24px auto 0;
    text-align: center;
}

.hero-line {
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 25px;
    background: #75abf9;
    border-radius: 30px;
}

.hero h1 {
    margin: 0;
    font-size: clamp(40px, 4.2vw, 55px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -.055em;
}

.hero h1 strong {
    color: var(--blue);
    font-weight: 800;
}

.hero p {
    margin: 22px auto 0;
    color: var(--muted);
    font-size: 18px;
    font-weight: 570;
    line-height: 1.55;
}

/* ==============================================================
   SECCIÓN DE HERRAMIENTAS
   ============================================================== */

.solutions {
    max-width: 1220px;
    margin: 41px auto 0;
}

.heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    margin-bottom: 29px;
}

.heading h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 770;
}

.heading span {
    width: 82px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1570f4);
}

.heading span:last-child {
    transform: rotate(180deg);
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ==============================================================
   TARJETAS DE PRODUCTO
   ============================================================== */

.product {
    position: relative;
    overflow: hidden;
    min-height: 374px;
    padding: 34px 25px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.product:hover {
    transform: translateY(-5px);
    box-shadow:
        0 27px 54px rgba(23, 48, 91, .15),
        0 6px 15px rgba(23, 48, 91, .07);
}

.product::after {
    content: "";
    position: absolute;
    inset: auto -22% -42% -22%;
    height: 56%;
    border-radius: 50%;
}

.gcm::after {
    background: radial-gradient(circle, rgba(18, 97, 235, .18), transparent 64%);
}

.viajes::after {
    background: radial-gradient(circle, rgba(7, 158, 164, .17), transparent 64%);
}

.brok::after {
    background: radial-gradient(circle, rgba(31, 101, 166, .17), transparent 64%);
}

/* ==============================================================
   TÍTULOS SUPERIORES DE LAS TARJETAS
   ============================================================== */

.wordmark {
    position: relative;
    z-index: 1;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(34px, 3vw, 41px);
    line-height: 1;
    letter-spacing: -.07em;
    font-weight: 800;
}

.wordmark b,
.wordmark strong {
    font-weight: 800;
}

/* GCMPRO */

.gcm .wordmark b {
    color: #155ddd;
}

.gcm .wordmark strong {
    color: #2e9af6;
}

.cloud {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 23px;
    margin-top: 10px;
    margin-right: 11px;
    border: 4px solid var(--gcm-blue);
    border-radius: 17px;
}

.cloud::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 9px;
    width: 20px;
    height: 20px;
    background: white;
    border: 4px solid var(--gcm-blue);
    border-bottom-color: white;
    border-radius: 50%;
}

/* VSVIAJES */

.viajes .wordmark b {
    margin-right: 5px;
    color: var(--viajes-green);
}

.viajes .wordmark strong {
    color: #27324a;
    font-weight: 750;
}

/*
   Este elemento antes era el marcador situado encima de VSViajes.
   Ahora se reutiliza como icono de avión delante del título.
*/

.pin {
    position: static;
    order: -1;
    display: block;
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    margin-right: 12px;
    background-color: var(--viajes-green);
    opacity: 1;
    border-radius: 0;
    transform: none;
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5C13 2.67 12.33 2 11.5 2S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5C13 2.67 12.33 2 11.5 2S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.pin::after {
    display: none;
}

/* WINBROK */

.brok .wordmark b {
    color: #111b37;
}

.brok .wordmark strong {
    color: var(--winbrok-blue);
}

/*
   Este elemento antes era el arco situado encima de Winbrok.
   Ahora se reutiliza como icono de coche delante del título.
*/

.arc {
    position: static;
    order: -1;
    display: block;
    flex: 0 0 auto;
    width: 47px;
    height: 47px;
    margin-right: 12px;
    background-color: var(--winbrok-blue);
    border: 0;
    border-radius: 0;
    transform: none;
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01A1.5 1.5 0 0 0 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v7c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-7l-2.08-5.99zM6.5 16A1.5 1.5 0 1 1 6.5 13a1.5 1.5 0 0 1 0 3zm11 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01A1.5 1.5 0 0 0 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v7c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-7l-2.08-5.99zM6.5 16A1.5 1.5 0 1 1 6.5 13a1.5 1.5 0 0 1 0 3zm11 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

/* ==============================================================
   LOGOS INTERNOS DE PRODUCTO CARGADOS MEDIANTE URL
   ============================================================== */

.product-logo-box {
    position: relative;
    z-index: 1;
    width: min(100%, 205px);
    height: 58px;
    margin: 8px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-logo {
    display: block;
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.product-logo--gcm {
    max-width: 196px;
}

.product-logo--viajes {
    max-width: 186px;
}

.product-logo--winbrok {
    max-width: 195px;
}

/* ==============================================================
   TEXTOS Y BOTONES DE PRODUCTO
   ============================================================== */

.product p {
    position: relative;
    z-index: 1;
    margin: 10px 0 auto;
    color: var(--muted);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.product a {
    position: relative;
    z-index: 1;
    min-height: 47px;
    margin-top: 26px;
    padding: 0 27px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #2781fb, #075be1);
    border-radius: 28px;
    box-shadow: 0 9px 18px rgba(16, 97, 235, .29);
    color: white;
    font-size: 15px;
    font-weight: 700;
    transition: transform .18s, box-shadow .18s;
}

.product a:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 24px rgba(16, 97, 235, .36);
}

.viajes a {
    background: linear-gradient(135deg, #10b0ac, #087d8c);
    box-shadow: 0 9px 18px rgba(4, 132, 140, .27);
}

.brok a {
    background: linear-gradient(135deg, var(--winbrok-blue-light), var(--winbrok-blue-dark));
    box-shadow: 0 9px 18px rgba(31, 101, 166, .29);
}

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

.contact {
    max-width: 850px;
    min-height: 102px;
    margin: 37px auto 0;
    padding: 18px 39px;
    display: flex;
    align-items: center;
    gap: 25px;
    background: rgba(255, 255, 255, .91);
    border: 1px solid #dae6fc;
    border-radius: 24px;
    box-shadow: 0 14px 28px rgba(23, 48, 91, .075);
}

.mail {
    position: relative;
    flex: 0 0 auto;
    width: 59px;
    height: 59px;
    background: #ebf3ff;
    border-radius: 50%;
}

.mail::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 19px;
    width: 29px;
    height: 21px;
    border: 3px solid var(--blue);
    border-radius: 4px;
}

.mail::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 21px;
    width: 18px;
    height: 17px;
    border-left: 3px solid var(--blue);
    border-bottom: 3px solid var(--blue);
    transform: rotate(-45deg);
}

.contact div {
    flex: 1;
}

.contact p {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
}

.contact a {
    color: var(--blue);
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -.03em;
}

.arrow {
    color: var(--blue);
    font-size: 33px;
    font-weight: 500;
}

/* ==============================================================
   PIE DE PÁGINA
   ============================================================== */

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 29px;
    margin: 30px 0 0;
    color: #64738d;
    font-size: 14px;
    font-weight: 550;
}

.footer span {
    width: 86px;
    height: 2px;
    background: #d1e2fe;
}

.footer p {
    margin: 0;
}

a:focus-visible {
    outline: 3px solid rgba(20, 105, 240, .35);
    outline-offset: 4px;
}

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

@media (max-width: 960px) {
    .page {
        padding: 31px 18px 27px;
    }

    .blob--right {
        width: 190px;
        height: 310px;
        opacity: .36;
    }

    .dots,
    .wave--right {
        display: none;
    }

    .cards {
        grid-template-columns: 1fr;
        max-width: 430px;
        margin: 0 auto;
    }

    .product {
        min-height: 350px;
    }
}

@media (max-width: 600px) {
    .brand-logo {
        width: min(92vw, 500px);
        height: 170px;
    }

    .hero h1 {
        font-size: clamp(31px, 9vw, 42px);
    }

    .hero p {
        font-size: 16px;
    }

    .heading {
        gap: 13px;
    }

    .heading span {
        width: 36px;
    }

    .heading h2 {
        font-size: 22px;
    }

    .wordmark {
        font-size: clamp(29px, 9vw, 37px);
    }

    .cloud,
    .pin,
    .arc {
        transform: scale(.88);
        margin-right: 7px;
    }

    .product-logo-box {
        width: min(100%, 190px);
        height: 52px;
    }

    .product-logo {
        max-height: 52px;
    }

    .contact {
        padding: 18px 20px;
        gap: 14px;
    }

    .contact a {
        font-size: clamp(16px, 5vw, 20px);
    }

    .arrow {
        display: none;
    }

    .footer span {
        display: none;
    }
}