/* ============================================================
   DRAGOINFINY
   STYLE.CSS
============================================================ */


/* ============================================================
   PALETA DE COLORES
============================================================ */

:root {

    --fondo-principal: #1A1F33;
    --fondo-secundario: #2E324A;
    --gris-azulado: #4D4F63;
    --gris-oliva: #686259;
    --dorado: #A19A57;
    --blanco: #FFFFFF;

    --texto-secundario: #C6C8D2;

    --borde:
        rgba(
            255,
            255,
            255,
            0.10
        );

    --borde-dorado:
        rgba(
            161,
            154,
            87,
            0.35
        );

    --fondo-card:
        rgba(
            46,
            50,
            74,
            0.72
        );

    --sombra:
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.28
        );

    --radio:
        22px;

    --ancho-maximo:
        1200px;
}


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

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    width: 100%;

    max-width: 100%;

    scroll-behavior: smooth;

    overflow-x: hidden;

}


body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-width: 0;

    max-width: 100%;

    overflow-x: hidden;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(161, 154, 87, 0.13),
            transparent 26%
        ),

        radial-gradient(
            circle at 90% 12%,
            rgba(77, 79, 99, 0.35),
            transparent 30%
        ),

        var(--fondo-principal);

    color: var(--blanco);

    line-height: 1.6;

}


body.menu-open {

    overflow: hidden;

}


img,
svg,
video,
iframe {

    display: block;

    max-width: 100%;

}


img {

    height: auto;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    color: inherit;

    text-decoration: none;

}


ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


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

.container {

    width:
        min(
            calc(100% - 40px),
            var(--ancho-maximo)
        );

    margin-inline: auto;

    min-width: 0;

}


.section {

    position: relative;

    padding:
        105px 0;

}


.section-secondary {

    background:
        rgba(
            46,
            50,
            74,
            0.22
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.04
        );

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

}


/* ============================================================
   TÍTULOS
============================================================ */

.section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    max-width:
        100%;

    margin-bottom:
        18px;

    padding:
        7px 13px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        100px;

    background:
        rgba(
            161,
            154,
            87,
            0.08
        );

    color:
        #DDD9A9;

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

}


.section-label span {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--dorado);

    box-shadow:
        0 0 13px
        rgba(
            161,
            154,
            87,
            0.65
        );

}


.section-title {

    max-width:
        800px;

    margin:
        0;

    font-size:
        clamp(
            2rem,
            5vw,
            3.35rem
        );

    line-height:
        1.07;

    letter-spacing:
        -0.045em;

}


.section-description {

    max-width:
        720px;

    margin:
        18px 0 0;

    color:
        var(--texto-secundario);

    font-size:
        1rem;

}


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

.header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        1000;

    width:
        100%;

    padding:
        16px 0;

    transition:
        background 0.3s ease,
        padding 0.3s ease,
        border-color 0.3s ease;

}


.header.scrolled {

    padding:
        9px 0;

    background:
        rgba(
            26,
            31,
            51,
            0.93
        );

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}


.navbar {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    min-width:
        0;

}


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

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        0;

}


.brand-logo {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    object-fit:
        contain;

}


.brand-text {

    min-width:
        0;

    line-height:
        1.1;

}


.brand-text strong {

    display:
        block;

    color:
        var(--blanco);

    font-size:
        1.06rem;

    font-weight:
        900;

    letter-spacing:
        -0.02em;

}


.brand-text span {

    display:
        block;

    margin-top:
        4px;

    color:
        #AAA99E;

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


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

.nav-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    min-width:
        0;

}


.nav-menu a {

    display:
        block;

    padding:
        10px 13px;

    border-radius:
        10px;

    color:
        #D1D2D9;

    font-size:
        0.91rem;

    font-weight:
        650;

    transition:
        0.2s ease;

}


.nav-menu a:hover {

    color:
        var(--blanco);

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

}


.nav-menu .nav-button {

    margin-left:
        8px;

    padding:
        11px 18px;

    color:
        var(--fondo-principal);

    background:
        var(--dorado);

    font-weight:
        850;

}


.nav-menu .nav-button:hover {

    color:
        var(--fondo-principal);

    background:
        #B8B16C;

}


/* ============================================================
   BOTÓN MENÚ MÓVIL
============================================================ */

.menu-toggle {

    display:
        none;

    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    padding:
        10px;

    border:
        1px solid
        var(--borde);

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

}


.menu-toggle span {

    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        5px 0;

    border-radius:
        10px;

    background:
        var(--blanco);

    transition:
        0.25s ease;

}


.menu-toggle.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-toggle.active span:nth-child(2) {

    opacity:
        0;

}


.menu-toggle.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


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

.hero {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        100vh;

    padding:
        135px 0 80px;

    overflow:
        hidden;

}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items:
        center;

    gap:
        70px;

    min-width:
        0;

}


.hero-content {

    min-width:
        0;

}


.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    max-width:
        100%;

    margin-bottom:
        24px;

    padding:
        8px 13px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        100px;

    background:
        rgba(
            161,
            154,
            87,
            0.08
        );

    color:
        #D6D1A0;

    font-size:
        0.77rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.status-point {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        50%;

    background:
        var(--dorado);

    box-shadow:
        0 0 14px
        rgba(
            161,
            154,
            87,
            0.65
        );

}


.hero h1 {

    max-width:
        850px;

    margin:
        0;

    font-size:
        clamp(
            3.2rem,
            7vw,
            6.25rem
        );

    line-height:
        0.95;

    letter-spacing:
        -0.07em;

    overflow-wrap:
        break-word;

}


.hero h1 span {

    display:
        block;

    margin-top:
        8px;

    color:
        var(--dorado);

}


.hero-description {

    max-width:
        700px;

    margin:
        28px 0 35px;

    color:
        var(--texto-secundario);

    font-size:
        1.08rem;

}


.hero-description strong {

    color:
        var(--blanco);

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    min-width:
        0;

}


/* ============================================================
   BOTONES
============================================================ */

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        53px;

    max-width:
        100%;

    padding:
        0 22px;

    border:
        1px solid
        transparent;

    border-radius:
        13px;

    font-weight:
        800;

    text-align:
        center;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;

}


.button-primary {

    color:
        var(--fondo-principal);

    background:
        var(--dorado);

    box-shadow:
        0 15px 35px
        rgba(
            161,
            154,
            87,
            0.18
        );

}


.button-primary:hover {

    transform:
        translateY(-3px);

    background:
        #B9B16B;

}


.button-secondary {

    color:
        var(--blanco);

    border-color:
        rgba(
            255,
            255,
            255,
            0.15
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

}


.button-secondary:hover {

    transform:
        translateY(-3px);

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

}


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

.hero-benefits {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

    margin-top:
        39px;

    color:
        #AFB1BB;

    font-size:
        0.86rem;

    font-weight:
        650;

}


.hero-benefits div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.hero-benefits span {

    color:
        var(--dorado);

}


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

.hero-visual {

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        100%;

    max-width:
        520px;

    min-width:
        0;

    min-height:
        500px;

    margin-inline:
        auto;

    overflow:
        hidden;

}


.visual-background {

    position:
        absolute;

    inset:
        12%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(161, 154, 87, 0.13),
            rgba(46, 50, 74, 0.07) 45%,
            transparent 72%
        );

    pointer-events:
        none;

}


.visual-circle {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.visual-circle-large {

    width:
        min(390px, 82%);

    aspect-ratio:
        1;

    border:
        1px solid
        rgba(
            161,
            154,
            87,
            0.23
        );

}


.visual-circle-large::after {

    content:
        "";

    position:
        absolute;

    inset:
        31px;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        50%;

}


.visual-circle-small {

    width:
        min(225px, 48%);

    aspect-ratio:
        1;

    border:
        1px solid
        rgba(
            161,
            154,
            87,
            0.18
        );

}


.visual-logo-box {

    position:
        relative;

    z-index:
        4;

    display:
        grid;

    place-items:
        center;

    width:
        155px;

    aspect-ratio:
        1;

    padding:
        28px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        36px;

    background:
        linear-gradient(
            145deg,
            var(--fondo-secundario),
            var(--fondo-principal)
        );

    box-shadow:
        var(--sombra);

}


.visual-logo-box img {

    width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

}


/* ============================================================
   TARJETAS FLOTANTES
============================================================ */

.technology-card {

    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    width:
        min(190px, 43%);

    min-width:
        0;

    padding:
        13px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );

    border-radius:
        15px;

    background:
        rgba(
            26,
            31,
            51,
            0.88
        );

    box-shadow:
        0 17px 42px
        rgba(
            0,
            0,
            0,
            0.27
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.technology-card div {

    min-width:
        0;

}


.technology-card strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--blanco);

    font-size:
        0.85rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.technology-card small {

    display:
        block;

    overflow:
        hidden;

    margin-top:
        2px;

    color:
        #A9ABB5;

    font-size:
        0.68rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.card-indicator {

    width:
        9px;

    height:
        9px;

    flex:
        0 0 9px;

    border-radius:
        50%;

    background:
        var(--dorado);

    box-shadow:
        0 0 13px
        rgba(
            161,
            154,
            87,
            0.7
        );

}


.card-icon {

    display:
        grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        10px;

    color:
        var(--dorado);

    font-weight:
        900;

}


.card-support {

    top:
        12%;

    left:
        0;

}


.card-development {

    top:
        44%;

    right:
        0;

}


.card-hardware {

    bottom:
        9%;

    left:
        8%;

}


/* ============================================================
   RESUMEN
============================================================ */

.summary {

    position:
        relative;

    z-index:
        5;

    margin-top:
        -30px;

}


.summary-grid {

    display:
        grid;

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

    overflow:
        hidden;

    border:
        1px solid
        var(--borde);

    border-radius:
        var(--radio);

    background:
        rgba(
            46,
            50,
            74,
            0.72
        );

    box-shadow:
        var(--sombra);

    backdrop-filter:
        blur(15px);

}


.summary-grid article {

    min-width:
        0;

    padding:
        27px;

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

}


.summary-grid article:last-child {

    border-right:
        0;

}


.summary-grid strong {

    display:
        block;

    color:
        var(--dorado);

    font-size:
        1.65rem;

    letter-spacing:
        -0.035em;

}


.summary-grid span {

    display:
        block;

    margin-top:
        3px;

    color:
        #C5C6CD;

    font-size:
        0.83rem;

}


/* ============================================================
   SERVICIOS
============================================================ */

.services-grid {

    display:
        grid;

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

    gap:
        22px;

    margin-top:
        46px;

}


.service-card {

    position:
        relative;

    min-width:
        0;

    padding:
        31px;

    overflow:
        hidden;

    border:
        1px solid
        var(--borde);

    border-radius:
        var(--radio);

    background:
        linear-gradient(
            155deg,
            rgba(46, 50, 74, 0.92),
            rgba(26, 31, 51, 0.96)
        );

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

}


.service-card::after {

    content:
        "";

    position:
        absolute;

    top:
        -70px;

    right:
        -70px;

    width:
        180px;

    height:
        180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(161, 154, 87, 0.13),
            transparent 70%
        );

    pointer-events:
        none;

}


.service-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--borde-dorado);

    box-shadow:
        var(--sombra);

}


.service-icon {

    display:
        grid;

    place-items:
        center;

    width:
        58px;

    height:
        58px;

    margin-bottom:
        26px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        16px;

    background:
        rgba(
            161,
            154,
            87,
            0.08
        );

    color:
        var(--dorado);

    font-size:
        1.35rem;

    font-weight:
        900;

}


.service-card h3 {

    margin:
        0 0 11px;

    font-size:
        1.4rem;

    letter-spacing:
        -0.025em;

}


.service-card p {

    margin:
        0 0 23px;

    color:
        var(--texto-secundario);

    font-size:
        0.93rem;

}


.service-card ul {

    display:
        grid;

    gap:
        11px;

}


.service-card li {

    position:
        relative;

    padding-left:
        19px;

    color:
        #D1D2D8;

    font-size:
        0.88rem;

}


.service-card li::before {

    content:
        "";

    position:
        absolute;

    top:
        0.62em;

    left:
        0;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--dorado);

}


/* ============================================================
   NOSOTROS
============================================================ */

.about-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items:
        center;

    gap:
        70px;

    min-width:
        0;

}


.system-panel {

    min-width:
        0;

    overflow:
        hidden;

    padding:
        32px;

    border:
        1px solid
        var(--borde);

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(46, 50, 74, 0.95),
            rgba(26, 31, 51, 0.98)
        );

    box-shadow:
        var(--sombra);

}


.system-panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        25px;

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

}


.system-panel-header div {

    min-width:
        0;

}


.system-panel-header span {

    display:
        block;

    color:
        #AFAFAD;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.system-panel-header strong {

    display:
        block;

    margin-top:
        4px;

    font-size:
        1.02rem;

}


.system-panel-header .online-indicator {

    padding:
        6px 10px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        100px;

    color:
        var(--dorado);

    font-size:
        0.65rem;

}


.system-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 0;

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

}


.system-line div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    color:
        #D5D5DA;

    font-size:
        0.88rem;

}


.system-line strong {

    flex:
        0 0 auto;

    color:
        var(--dorado);

    font-size:
        0.67rem;

    letter-spacing:
        0.08em;

}


.system-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--dorado);

}


.system-footer {

    padding-top:
        24px;

    color:
        #898B99;

    font-family:
        Consolas,
        monospace;

    font-size:
        0.69rem;

    letter-spacing:
        0.08em;

}


.process-list {

    display:
        grid;

    gap:
        16px;

    margin-top:
        34px;

}


.process-card {

    display:
        flex;

    gap:
        18px;

    min-width:
        0;

    padding:
        19px;

    border:
        1px solid
        var(--borde);

    border-radius:
        17px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

}


.process-number {

    display:
        grid;

    place-items:
        center;

    width:
        39px;

    height:
        39px;

    flex:
        0 0 39px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        11px;

    color:
        var(--dorado);

    font-size:
        0.77rem;

    font-weight:
        900;

}


.process-card div:last-child {

    min-width:
        0;

}


.process-card h3 {

    margin:
        0;

    font-size:
        1rem;

}


.process-card p {

    margin:
        5px 0 0;

    color:
        var(--texto-secundario);

    font-size:
        0.86rem;

}


/* ============================================================
   SOLUCIONES
============================================================ */

.solutions-grid {

    display:
        grid;

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

    gap:
        20px;

    margin-top:
        46px;

}


.solution-card {

    display:
        flex;

    gap:
        18px;

    min-width:
        0;

    padding:
        27px;

    border:
        1px solid
        var(--borde);

    border-radius:
        19px;

    background:
        rgba(
            46,
            50,
            74,
            0.55
        );

    transition:
        0.22s ease;

}


.solution-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--borde-dorado);

}


.solution-number {

    display:
        grid;

    place-items:
        center;

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        13px;

    color:
        var(--dorado);

    font-size:
        0.76rem;

    font-weight:
        900;

}


.solution-card div:last-child {

    min-width:
        0;

}


.solution-card h3 {

    margin:
        0;

    font-size:
        1rem;

}


.solution-card p {

    margin:
        7px 0 0;

    color:
        var(--texto-secundario);

    font-size:
        0.87rem;

}


/* ============================================================
   CTA
============================================================ */

.cta {

    display:
        grid;

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

    align-items:
        center;

    gap:
        40px;

    min-width:
        0;

    padding:
        55px;

    overflow:
        hidden;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        28px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(161, 154, 87, 0.12),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            var(--fondo-secundario),
            var(--fondo-principal)
        );

    box-shadow:
        var(--sombra);

}


.cta > div {

    min-width:
        0;

}


.cta h2 {

    max-width:
        720px;

    margin:
        0;

    font-size:
        clamp(
            2rem,
            4vw,
            3.1rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.04em;

}


.cta p {

    max-width:
        680px;

    margin:
        16px 0 0;

    color:
        var(--texto-secundario);

}


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

.contact-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        28px;

    margin-top:
        45px;

    min-width:
        0;

}


.contact-information,
.contact-form {

    min-width:
        0;

    padding:
        31px;

    border:
        1px solid
        var(--borde);

    border-radius:
        22px;

    background:
        rgba(
            26,
            31,
            51,
            0.74
        );

}


.contact-information h3,
.contact-form h3 {

    margin:
        0 0 10px;

    font-size:
        1.25rem;

}


.contact-information > p {

    margin:
        0 0 27px;

    color:
        var(--texto-secundario);

}


.contact-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-top:
        20px;

    min-width:
        0;

}


.contact-icon {

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius:
        12px;

    color:
        var(--dorado);

    background:
        rgba(
            161,
            154,
            87,
            0.06
        );

}


.contact-item > div:last-child {

    min-width:
        0;

}


.contact-item strong {

    display:
        block;

    font-size:
        0.9rem;

}


.contact-item span {

    display:
        block;

    margin-top:
        2px;

    overflow-wrap:
        anywhere;

    color:
        var(--texto-secundario);

    font-size:
        0.83rem;

}


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

.form-grid {

    display:
        grid;

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

    gap:
        14px;

    min-width:
        0;

}


.form-field {

    display:
        grid;

    gap:
        7px;

    min-width:
        0;

}


.form-field.full {

    grid-column:
        1 / -1;

}


.form-field label {

    color:
        #D1D1D5;

    font-size:
        0.8rem;

    font-weight:
        700;

}


.form-field input,
.form-field textarea,
.form-field select {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );

    border-radius:
        12px;

    outline:
        none;

    color:
        var(--blanco);

    background:
        var(--fondo-principal);

    transition:
        0.2s ease;

}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        #858793;

}


.form-field select {

    color:
        #CCCDD4;

}


.form-field select option {

    background:
        var(--fondo-principal);

    color:
        var(--blanco);

}


.form-field textarea {

    min-height:
        125px;

    resize:
        vertical;

}


.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {

    border-color:
        var(--dorado);

    box-shadow:
        0 0 0 3px
        rgba(
            161,
            154,
            87,
            0.08
        );

}


.form-status {

    min-height:
        22px;

    margin-top:
        10px;

    color:
        #DAD59D;

    font-size:
        0.82rem;

}


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

.footer {

    padding:
        35px 0;

    border-top:
        1px solid
        var(--borde);

    background:
        rgba(
            20,
            24,
            40,
            0.55
        );

}


.footer-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    min-width:
        0;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;

}


.footer-brand img {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    object-fit:
        contain;

}


.footer-brand div {

    min-width:
        0;

}


.footer-brand strong {

    display:
        block;

    font-size:
        0.9rem;

}


.footer-brand span {

    display:
        block;

    margin-top:
        2px;

    color:
        #92949F;

    font-size:
        0.68rem;

}


.footer-copy {

    color:
        #9395A0;

    font-size:
        0.8rem;

    text-align:
        right;

}


/* ============================================================
   ANIMACIONES
============================================================ */

.reveal {

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* ============================================================
   RESPONSIVE
   LAPTOP / TABLET
============================================================ */

@media
(max-width: 1024px) {

    .hero-grid {

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

        gap:
            30px;

    }


    .hero {

        min-height:
            auto;

        padding-top:
            145px;

    }


    .hero-visual {

        max-width:
            600px;

        min-height:
            470px;

    }


    .services-grid {

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

    }


    .about-grid {

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

        gap:
            45px;

    }


    .contact-grid {

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

    }


    .cta {

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

    }

}


/* ============================================================
   RESPONSIVE
   MENÚ
============================================================ */

@media
(max-width: 800px) {

    .menu-toggle {

        display:
            block;

    }


    .nav-menu {

        position:
            absolute;

        top:
            calc(100% + 13px);

        left:
            0;

        right:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        width:
            100%;

        max-height:
            calc(100vh - 100px);

        padding:
            12px;

        overflow-y:
            auto;

        border:
            1px solid
            var(--borde);

        border-radius:
            17px;

        background:
            rgba(
                26,
                31,
                51,
                0.98
            );

        box-shadow:
            var(--sombra);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(-8px);

        transition:
            0.22s ease;

    }


    .nav-menu.active {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateY(0);

    }


    .nav-menu li {

        width:
            100%;

    }


    .nav-menu a {

        width:
            100%;

        padding:
            13px;

    }


    .nav-menu .nav-button {

        margin:
            5px 0 0;

        text-align:
            center;

    }


    .summary-grid {

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

    }


    .summary-grid article:nth-child(2) {

        border-right:
            0;

    }


    .summary-grid article:nth-child(1),
    .summary-grid article:nth-child(2) {

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

    }


    .solutions-grid {

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

    }


    .form-grid {

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

    }


    .form-field.full {

        grid-column:
            auto;

    }


    .section {

        padding:
            80px 0;

    }


    .footer-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .footer-copy {

        text-align:
            left;

    }

}


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

@media
(max-width: 600px) {

    .container {

        width:
            calc(100% - 28px);

        max-width:
            calc(100% - 28px);

    }


    .header {

        padding:
            11px 0;

    }


    .brand-logo {

        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;

    }


    .brand-text strong {

        font-size:
            0.98rem;

    }


    .brand-text span {

        display:
            none;

    }


    .hero {

        padding:
            115px 0 55px;

    }


    .hero-badge {

        font-size:
            0.66rem;

        line-height:
            1.4;

        white-space:
            normal;

    }


    .hero h1 {

        font-size:
            clamp(
                2.85rem,
                14vw,
                4.1rem
            );

        line-height:
            0.98;

        letter-spacing:
            -0.06em;

    }


    .hero-description {

        margin:
            23px 0 28px;

        font-size:
            0.97rem;

    }


    .hero-actions {

        display:
            grid;

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

        width:
            100%;

    }


    .hero-actions .button {

        width:
            100%;

    }


    .hero-benefits {

        display:
            grid;

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

        gap:
            10px;

        margin-top:
            30px;

    }


    /*
       IMPORTANTE:
       En móvil el gráfico deja de utilizar
       posiciones que puedan salir del viewport.
    */

    .hero-visual {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            11px;

        width:
            100%;

        max-width:
            100%;

        min-height:
            auto;

        margin:
            25px 0 0;

        padding:
            0;

        overflow:
            visible;

    }


    .visual-background,
    .visual-circle {

        display:
            none;

    }


    .visual-logo-box {

        position:
            relative;

        width:
            125px;

        margin:
            0 auto 15px;

        padding:
            23px;

        border-radius:
            28px;

    }


    .technology-card {

        position:
            static;

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

    }


    .technology-card strong,
    .technology-card small {

        white-space:
            normal;

        text-overflow:
            clip;

    }


    .summary {

        margin-top:
            0;

    }


    .summary-grid {

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

    }


    .summary-grid article {

        border-right:
            0;

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

    }


    .summary-grid article:last-child {

        border-bottom:
            0;

    }


    .service-card {

        padding:
            25px;

    }


    .section-title {

        font-size:
            2.15rem;

    }


    .section-description {

        font-size:
            0.94rem;

    }


    .system-panel {

        padding:
            23px;

    }


    .system-panel-header {

        align-items:
            flex-start;

    }


    .system-line {

        align-items:
            flex-start;

    }


    .system-line div {

        overflow-wrap:
            anywhere;

    }


    .process-card {

        padding:
            17px;

    }


    .solution-card {

        flex-direction:
            column;

        padding:
            23px;

    }


    .cta {

        padding:
            31px 22px;

    }


    .cta .button {

        width:
            100%;

    }


    .contact-information,
    .contact-form {

        padding:
            23px;

    }


    .form-field input,
    .form-field textarea,
    .form-field select {

        font-size:
            16px;

    }

}


/* ============================================================
   PANTALLAS MUY PEQUEÑAS
============================================================ */

@media
(max-width: 380px) {

    .container {

        width:
            calc(100% - 22px);

        max-width:
            calc(100% - 22px);

    }


    .brand {

        gap:
            9px;

    }


    .brand-logo {

        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

    }


    .brand-text strong {

        font-size:
            0.88rem;

    }


    .menu-toggle {

        width:
            41px;

        height:
            41px;

        flex-basis:
            41px;

    }


    .hero h1 {

        font-size:
            2.65rem;

    }


    .section-title {

        font-size:
            1.95rem;

    }


    .system-panel {

        padding:
            20px;

    }


    .system-panel-header {

        flex-direction:
            column;

        gap:
            12px;

    }


    .system-line {

        flex-direction:
            column;

        gap:
            7px;

    }

}


/* ============================================================
   REDUCIR ANIMACIONES
============================================================ */

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}