/* =========================================
   CX PARAGUAY
   Identidad visual web
   ========================================= */

:root {
    --cx-bg: #07131d;
    --cx-bg-deep: #030a10;
    --cx-wine: #6f002b;
    --cx-magenta: #b00046;
    --cx-aqua: #00b8c8;
    --cx-white: #f5f7f8;
    --cx-muted: #a9b2b8;
    --cx-border: rgba(255, 255, 255, 0.10);
}


/* =========================================
   RESET
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--cx-white);

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(111, 0, 43, 0.58),
            transparent 31%
        ),
        radial-gradient(
            circle at 91% 75%,
            rgba(0, 184, 200, 0.18),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            var(--cx-bg-deep),
            var(--cx-bg)
        );
}

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


/* =========================================
   HEADER
   ========================================= */

.header {
    width: 100%;
    height: 110px;
    padding: 0 max(40px, calc((100vw - 1400px) / 2));
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(3, 10, 16, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--cx-border);
}


/* Logo + nombre */

.brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.brand span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 5px;
}


/* Navegación */

.nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav a {
    position: relative;

    padding: 10px 0;

    font-size: 14px;
    color: var(--cx-muted);

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.nav a:not(.nav-contact)::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 2px;

    width: 0;
    height: 1px;

    background: var(--cx-aqua);

    transition: width 0.25s ease;
}

.nav a:not(.nav-contact):hover {
    color: var(--cx-white);
}

.nav a:not(.nav-contact):hover::after {
    width: 100%;
}


/* Botón contacto del menú */

.nav .nav-contact {
    padding: 12px 20px;

    color: var(--cx-white);

    border: 1px solid rgba(0, 184, 200, 0.5);
    border-radius: 30px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.nav .nav-contact:hover {
    background: rgba(0, 184, 200, 0.10);
    border-color: var(--cx-aqua);
}


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

.hero {
    width: min(1400px, calc(100% - 80px));
    min-height: calc(100vh - 110px);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 58% 42%;
    align-items: center;

    position: relative;
}


/* Contenido */

.hero-content {
    position: relative;
    z-index: 3;

    padding: 70px 0 100px;
}


/* Pequeño encabezado */

.hero-label {
    margin-bottom: 28px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;

    color: var(--cx-muted);
}

.hero-label::before {
    content: "";

    display: inline-block;

    width: 55px;
    height: 2px;

    margin-right: 18px;
    vertical-align: middle;

    background: linear-gradient(
        90deg,
        var(--cx-magenta),
        var(--cx-aqua)
    );
}


/* Título */

.hero h1 {
    max-width: 930px;

    font-size: clamp(54px, 5.4vw, 88px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -3px;
}

.hero h1 span {
    display: block;

    color: var(--cx-aqua);
}


/* Disciplinas */

.hero-disciplines {
    margin-top: 34px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;

    font-size: 13px;
    color: var(--cx-white);
}

.hero-disciplines i {
    width: 5px;
    height: 5px;

    display: block;

    border-radius: 50%;
    background: var(--cx-aqua);
}


/* Descripción */

.hero-description {
    max-width: 650px;

    margin-top: 34px;

    font-size: 18px;
    line-height: 1.7;

    color: var(--cx-muted);
}


/* CTA */

.button-primary {
    width: fit-content;

    margin-top: 38px;
    padding: 17px 24px;

    display: flex;
    align-items: center;
    gap: 22px;

    border: 1px solid rgba(0, 184, 200, 0.55);
    border-radius: 4px;

    font-size: 14px;
    letter-spacing: 0.3px;

    background: rgba(0, 184, 200, 0.06);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.button-primary span {
    font-size: 20px;
    color: var(--cx-aqua);

    transition: transform 0.25s ease;
}

.button-primary:hover {
    background: rgba(0, 184, 200, 0.12);
    border-color: var(--cx-aqua);

    transform: translateY(-2px);
}

.button-primary:hover span {
    transform: translateX(4px);
}


/* =========================================
   GRÁFICO CIRCULAR
   ========================================= */

.hero-graphic {
    width: 680px;
    height: 680px;

    position: absolute;
    right: -270px;
    top: 50%;

    transform: translateY(-45%);

    border-radius: 50%;

    opacity: 0.82;
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;

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

    border: 1px solid rgba(0, 184, 200, 0.60);
    border-radius: 50%;
}

.orbit-1 {
    width: 100%;
    height: 100%;
}

.orbit-2 {
    width: 82%;
    height: 82%;
}

.orbit-3 {
    width: 64%;
    height: 64%;
}

.orbit-4 {
    width: 46%;
    height: 46%;
}

.orbit-5 {
    width: 28%;
    height: 28%;
}


/* Núcleo */

.graphic-core {
    width: 110px;
    height: 110px;

    position: absolute;
    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background: rgba(0, 184, 200, 0.18);

    box-shadow:
        0 0 60px rgba(0, 184, 200, 0.35),
        0 0 130px rgba(0, 184, 200, 0.18);
}


/* Puntos */

.orbit-dot {
    width: 14px;
    height: 14px;

    position: absolute;

    border-radius: 50%;

    background: var(--cx-aqua);

    box-shadow: 0 0 20px rgba(0, 184, 200, 0.8);
}

.dot-1 {
    top: 22%;
    left: 22%;
}

.dot-2 {
    top: 67%;
    left: 10%;
}
/* =========================================
   EXPERIENCIAS
   ========================================= */

.experiences {
    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;
    padding: 140px 0;

    position: relative;

    border-top: 1px solid var(--cx-border);
}


/* Introducción */

.section-intro {
    max-width: 920px;

    margin-bottom: 85px;
}

.section-eyebrow {
    margin-bottom: 25px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;

    color: var(--cx-aqua);
}

.section-intro h2 {
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.section-intro h2 span {
    display: block;

    color: var(--cx-muted);
}

.section-intro > p {
    max-width: 760px;

    margin-top: 32px;

    font-size: 18px;
    line-height: 1.75;

    color: var(--cx-muted);
}


/* Grid */

.experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--cx-border);
    border-bottom: 1px solid var(--cx-border);
}


/* Tarjetas */

.experience-card {
    min-height: 470px;

    padding: 42px;

    position: relative;

    border-right: 1px solid var(--cx-border);

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.experience-card:last-child {
    border-right: none;
}

.experience-card:hover {
    background:
        linear-gradient(
            180deg,
            rgba(0, 184, 200, 0.06),
            rgba(0, 184, 200, 0.01)
        );

    transform: translateY(-6px);
}


/* Número */

.card-number {
    font-size: 12px;
    letter-spacing: 3px;

    color: var(--cx-muted);
}


/* Línea */

.card-line {
    width: 45px;
    height: 2px;

    margin: 24px 0 35px;

    background: linear-gradient(
        90deg,
        var(--cx-magenta),
        var(--cx-aqua)
    );

    transition: width 0.35s ease;
}

.experience-card:hover .card-line {
    width: 90px;
}


/* Título */

.experience-card h3 {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;

    margin-bottom: 28px;
}


/* Texto */

.experience-card > p {
    max-width: 340px;

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

    color: var(--cx-muted);
}


/* Tags */

.card-tags {
    margin-top: 35px;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card-tags span {
    padding: 7px 10px;

    font-size: 11px;
    letter-spacing: 0.5px;

    color: var(--cx-muted);

    border: 1px solid var(--cx-border);
    border-radius: 20px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}

.experience-card:hover .card-tags span {
    color: var(--cx-white);

    border-color: rgba(0, 184, 200, 0.30);
}

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

@media (max-width: 1050px) {

    .header {
        width: min(100% - 40px, 1400px);
    }

    .nav {
        gap: 20px;
    }

    .nav a {
        font-size: 12px;
    }

    .hero {
        width: min(100% - 40px, 1400px);

        grid-template-columns: 1fr;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-graphic {
        right: -430px;

        opacity: 0.45;
    }
}


@media (max-width: 760px) {

    .header {
        height: 90px;
    }

    .brand img {
        width: 50px;
        height: 50px;
    }

    .brand span {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .nav {
        display: none;
    }

    .hero {
        min-height: calc(100vh - 90px);
    }

    .hero-content {
        padding: 60px 0 80px;
    }

    .hero-label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero-label::before {
        width: 35px;
        margin-right: 10px;
    }

    .hero h1 {
        font-size: clamp(44px, 13vw, 68px);
        letter-spacing: -2px;
    }

    .hero-disciplines {
        max-width: 450px;

        line-height: 1.6;
    }

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

    .hero-graphic {
        width: 520px;
        height: 520px;

        right: -390px;
    }
}
/* =========================================
   CÓMO TRABAJAMOS
   ========================================= */

.process {
    padding: 140px max(40px, calc((100vw - 1400px) / 2));

    position: relative;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(0, 184, 200, 0.10),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            rgba(0,0,0,0.12)
        );

    border-top: 1px solid var(--cx-border);
    border-bottom: 1px solid var(--cx-border);
}


/* Encabezado */

.process-header {
    max-width: 1000px;

    margin-bottom: 90px;
}

.process-header h2 {
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.process-header h2 span {
    display: block;

    color: var(--cx-aqua);
}

.process-header > p {
    max-width: 780px;

    margin-top: 32px;

    font-size: 18px;
    line-height: 1.75;

    color: var(--cx-muted);
}


/* Recorrido */

/* =========================================
   RECORRIDO VERTICAL
   ========================================= */

.process-path {
    max-width: 1000px;
    margin-top: 30px;
    margin-left: 20px;

    position: relative;
}


/* Línea vertical */

.process-path::before {
    content: "";

    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 70px;

    width: 1px;

    background: linear-gradient(
        180deg,
        var(--cx-magenta),
        var(--cx-aqua),
        rgba(0, 184, 200, 0.15)
    );
}


/* Cada etapa */

.process-step {
    min-height: 150px;

    padding: 0 0 55px 130px;

    position: relative;

    display: grid;
    grid-template-columns: 210px 1fr;
    grid-template-rows: auto auto;
    column-gap: 45px;
}


/* Número */

.step-number {
    position: absolute;
    left: 0;
    top: 5px;

    width: 40px;

    font-size: 11px;
    letter-spacing: 3px;

    color: var(--cx-muted);
}


/* Punto sobre la línea */

.step-dot {
    width: 13px;
    height: 13px;

    position: absolute;
    left: 64px;
    top: 5px;

    z-index: 2;

    border-radius: 50%;

    background: var(--cx-bg);
    border: 2px solid var(--cx-aqua);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.process-step:hover .step-dot {
    background: var(--cx-aqua);

    box-shadow: 0 0 22px rgba(0, 184, 200, 0.75);
}


/* Nombre de etapa */

.process-step h3 {
    grid-column: 1;
    grid-row: 1;

    margin: 0;

    font-size: 27px;
    font-weight: 600;
}


/* Descripción */

.process-step p {
    grid-column: 2;
    grid-row: 1;

    max-width: 600px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: var(--cx-muted);
}


/* Especialidad */

.step-detail {
    grid-column: 1;
    grid-row: 2;

    width: fit-content;

    margin-top: 14px;
    padding-top: 9px;

    font-size: 11px;
    letter-spacing: 1px;

    color: var(--cx-aqua);

    border-top: 1px solid rgba(0, 184, 200, 0.25);
}


/* Ya no necesitamos separación de filas */

.process-step:nth-child(n+5) {
    padding-top: 0;
}
/* =========================================
   CONVERSACIONES SOBRE EXPERIENCIA
   ========================================= */

.conversations {
    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;
    padding: 140px 0;

    position: relative;
}


/* Encabezado */

.conversations-header {
    margin-bottom: 80px;
}

.conversations-title {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;

    align-items: end;
}

.conversations-title h2 {
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -2px;
}

.conversations-title h2 span {
    display: block;

    color: var(--cx-aqua);
}

.conversations-title p {
    max-width: 520px;

    padding-bottom: 7px;

    font-size: 17px;
    line-height: 1.7;

    color: var(--cx-muted);
}


/* Artículos */

.conversation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--cx-border);
    border-bottom: 1px solid var(--cx-border);
}


.conversation-card {
    min-height: 470px;

    padding: 40px;

    display: flex;
    flex-direction: column;

    position: relative;

    border-right: 1px solid var(--cx-border);

    overflow: hidden;

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.conversation-card:last-child {
    border-right: none;
}


.conversation-card:hover {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 184, 200, 0.10),
            transparent 35%
        ),
        rgba(255, 255, 255, 0.015);

    transform: translateY(-5px);
}


/* Número + serie */

.conversation-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    font-size: 9px;
    letter-spacing: 1.5px;

    color: var(--cx-muted);
}

.conversation-meta span:first-child {
    font-size: 12px;

    color: var(--cx-aqua);
}


/* Línea de marca */

.conversation-accent {
    width: 55px;
    height: 2px;

    margin: 32px 0;

    background: linear-gradient(
        90deg,
        var(--cx-magenta),
        var(--cx-aqua)
    );

    transition: width 0.35s ease;
}

.conversation-card:hover .conversation-accent {
    width: 100px;
}


/* Título */

.conversation-card h3 {
    max-width: 350px;

    margin-bottom: 25px;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}


/* Bajada */

.conversation-card > p {
    max-width: 350px;

    font-size: 15px;
    line-height: 1.7;

    color: var(--cx-muted);
}


/* Link artículo */

.conversation-link {
    width: fit-content;

    margin-top: auto;
    padding-top: 35px;

    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 13px;

    color: var(--cx-white);

    transition: color 0.25s ease;
}

.conversation-link span {
    color: var(--cx-aqua);

    transition: transform 0.25s ease;
}

.conversation-link:hover {
    color: var(--cx-aqua);
}

.conversation-link:hover span {
    transform: translate(3px, -3px);
}


/* Pie de sección */

.conversations-footer {
    padding-top: 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.conversations-footer p {
    font-size: 14px;

    color: var(--cx-muted);
}


.linkedin-button {
    padding: 14px 20px;

    display: flex;
    align-items: center;
    gap: 15px;

    font-size: 13px;

    border: 1px solid rgba(0, 184, 200, 0.35);
    border-radius: 3px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.linkedin-button span {
    color: var(--cx-aqua);
}

.linkedin-button:hover {
    background: rgba(0, 184, 200, 0.08);
    border-color: var(--cx-aqua);
}
/* =========================================
   SOBRE CX PARAGUAY
   ========================================= */

.about {
    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;
    padding: 150px 0;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 120px;
    align-items: center;

    position: relative;

    border-top: 1px solid var(--cx-border);
}


/* =========================================
   ELEMENTO VISUAL
   ========================================= */

.about-visual {
    min-height: 560px;

    position: relative;

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


.about-rings {
    width: 470px;
    height: 470px;

    position: relative;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 184, 200, 0.10),
            transparent 55%
        );
}


.about-ring {
    position: absolute;
    top: 50%;
    left: 50%;

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

    border-radius: 50%;
    border: 1px solid rgba(0, 184, 200, 0.35);
}


.ring-a {
    width: 100%;
    height: 100%;
}

.ring-b {
    width: 76%;
    height: 76%;
}

.ring-c {
    width: 52%;
    height: 52%;
}

.ring-d {
    width: 28%;
    height: 28%;

    border-color: rgba(176, 0, 70, 0.55);
}


/* Centro */

.about-center {
    width: 90px;
    height: 90px;

    position: absolute;
    top: 50%;
    left: 50%;

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

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

    border-radius: 50%;

    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;

    color: var(--cx-white);

    background:
        linear-gradient(
            135deg,
            var(--cx-wine),
            var(--cx-bg)
        );

    border: 1px solid rgba(0, 184, 200, 0.40);

    box-shadow:
        0 0 60px rgba(176, 0, 70, 0.22),
        0 0 100px rgba(0, 184, 200, 0.12);
}


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

.about-content {
    max-width: 720px;
}


.about-content h2 {
    margin-bottom: 38px;

    font-size: clamp(44px, 5vw, 70px);
    line-height: 1.03;
    letter-spacing: -2px;
}


.about-content h2 span {
    display: block;

    color: var(--cx-aqua);
}


.about-content p {
    max-width: 680px;

    margin-bottom: 22px;

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

    color: var(--cx-muted);
}


.about-content .about-lead {
    font-size: 20px;
    line-height: 1.65;

    color: var(--cx-white);
}


.about-content strong {
    color: var(--cx-white);
    font-weight: 600;
}


/* Frase */

.about-content blockquote {
    max-width: 620px;

    margin: 42px 0 38px;
    padding: 5px 0 5px 25px;

    font-size: 22px;
    line-height: 1.5;
    font-weight: 500;

    color: var(--cx-white);

    border-left: 2px solid var(--cx-aqua);
}


/* LinkedIn */

.about-link {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 13px;

    color: var(--cx-muted);

    transition: color 0.25s ease;
}


.about-link span {
    color: var(--cx-aqua);

    transition: transform 0.25s ease;
}


.about-link:hover {
    color: var(--cx-white);
}


.about-link:hover span {
    transform: translate(3px, -3px);
}
/* =========================================
   CONTACTO
   ========================================= */

.contact {
    width: min(1400px, calc(100% - 80px));
    margin: 0 auto;
    padding: 150px 0;

    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 120px;

    border-top: 1px solid var(--cx-border);
}


/* Introducción */

.contact-intro h2 {
    max-width: 760px;
    margin-bottom: 32px;

    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.03;
    letter-spacing: -2px;
}

.contact-intro h2 span {
    display: block;
    color: var(--cx-aqua);
}

.contact-intro > p {
    max-width: 650px;

    font-size: 18px;
    line-height: 1.75;

    color: var(--cx-muted);
}


/* Contacto directo */

.contact-direct {
    max-width: 650px;
    margin-top: 60px;

    border-top: 1px solid var(--cx-border);
}

.contact-option {
    min-height: 95px;
    padding: 22px 5px;

    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 25px;
    align-items: center;

    border-bottom: 1px solid var(--cx-border);

    transition:
        padding 0.25s ease,
        background 0.25s ease;
}

.contact-option:hover {
    padding-left: 15px;
    background: rgba(0, 184, 200, 0.035);
}

.contact-type {
    font-size: 9px;
    letter-spacing: 2px;

    color: var(--cx-aqua);
}

.contact-option strong {
    font-size: 16px;
    font-weight: 500;
}

.contact-arrow {
    font-size: 20px;
    color: var(--cx-aqua);
}


/* =========================================
   FORMULARIO
   ========================================= */

.contact-form-wrapper {
    padding: 45px;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.035),
        rgba(0, 184, 200, 0.015)
    );

    border: 1px solid var(--cx-border);
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--cx-muted);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 0;

    font-family: inherit;
    font-size: 16px;

    color: var(--cx-white);
    background: transparent;

    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);

    outline: none;

    transition: border-color 0.25s ease;
}

.form-group textarea {
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(169, 178, 184, 0.45);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--cx-aqua);
}


/* Botón */

.form-button {
    width: 100%;
    margin-top: 15px;
    padding: 17px 20px;

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

    font-family: inherit;
    font-size: 14px;

    color: var(--cx-white);
    background: rgba(0, 184, 200, 0.07);

    border: 1px solid rgba(0, 184, 200, 0.45);
    border-radius: 3px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.form-button span {
    font-size: 20px;
    color: var(--cx-aqua);

    transition: transform 0.25s ease;
}

.form-button:hover {
    background: rgba(0, 184, 200, 0.13);
    border-color: var(--cx-aqua);
}

.form-button:hover span {
    transform: translateX(5px);
}


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

.footer {
    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;
    padding: 65px 0 35px;

    border-top: 1px solid var(--cx-border);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-brand img {
    width: 55px;
    height: 55px;

    object-fit: contain;
}

.footer-brand div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-brand strong {
    font-size: 12px;
    letter-spacing: 4px;
}

.footer-brand span {
    font-size: 12px;
    color: var(--cx-muted);
}


/* Navegación footer */

.footer-links {
    margin: 50px 0;

    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-links a {
    font-size: 12px;
    color: var(--cx-muted);

    transition: color 0.25s ease;
}

.footer-links a:hover {
    color: var(--cx-aqua);
}


/* Última línea */

.footer-bottom {
    padding-top: 25px;

    display: flex;
    justify-content: space-between;

    font-size: 10px;
    letter-spacing: 1px;

    color: rgba(169, 178, 184, 0.55);

    border-top: 1px solid var(--cx-border);
}
@media (max-width: 900px) {

    .experiences {
        width: min(100% - 40px, 1400px);

        padding: 100px 0;
    }

    .experience-grid {
        grid-template-columns: 1fr;
    }

    .experience-card {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid var(--cx-border);
    }

    .experience-card:last-child {
        border-bottom: none;
    }
}
@media (max-width: 950px) {

    .contact {
        width: min(100% - 40px, 1400px);

        padding: 100px 0;

        grid-template-columns: 1fr;
        gap: 70px;
    }

    .footer {
        width: min(100% - 40px, 1400px);
    }

}


@media (max-width: 600px) {

    .contact {
        padding: 80px 0;
    }

    .contact-intro h2 {
        font-size: 42px;
    }

    .contact-intro > p {
        font-size: 16px;
    }

    .contact-option {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .contact-type {
        grid-column: 1 / -1;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
    }

    .footer-links {
        flex-direction: column;
        gap: 18px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }

}

@media (max-width: 600px) {

    .experiences {
        padding: 80px 0;
    }

    .section-intro {
        margin-bottom: 55px;
    }

    .section-intro h2 {
        font-size: 42px;
    }

    .section-intro > p {
        font-size: 16px;
    }

    .experience-card {
        padding: 35px 20px;
    }

}
/* =========================================
   MENSAJE FORMULARIO ENVIADO
   ========================================= */

.contact-success {
    margin-bottom: 30px;
    padding: 20px 24px;

    display: flex;
    align-items: center;
    gap: 16px;

    background: rgba(0, 184, 200, 0.08);
    border: 1px solid rgba(0, 184, 200, 0.35);
    border-radius: 4px;

    opacity: 1;
    transform: translateY(0);

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

.contact-success > span {
    color: var(--cx-aqua);
    font-size: 22px;
}

.contact-success strong {
    display: block;
    margin-bottom: 4px;

    color: var(--cx-aqua);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-success p {
    margin: 0;
    color: var(--cx-muted);
    font-size: 13px;
    line-height: 1.5;
}

.contact-success.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}