/* ============================================================
   PRECISION CUT TINT
   PORTAL DE ACCESO — CSS
   ============================================================ */

:root {
    --pct-blue: #2c3a98;
    --pct-blue-dark: #17266f;
    --pct-blue-light: #4261d4;

    --pct-black: #050505;
    --pct-white: #ffffff;

    --pct-gray: #596174;
    --pct-soft: #929aaf;

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

    --pct-ease:
        cubic-bezier(.22, .61, .36, 1);
}


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

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

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body.pct-portal {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;

    overflow: hidden;

    background: #ffffff;
    color: #000000;

    font-family: var(--pct-font);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[data-theme="dark"] body.pct-portal { background:#111827; color:#f3f4f6; }


/* ============================================================
   ESCENA GENERAL
   ============================================================ */

.pct-scene {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


/* ============================================================
   FONDO BASE
   ============================================================ */

.pct-background {
    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        radial-gradient(
            ellipse at 86% 28%,
            rgba(44, 58, 152, .075),
            transparent 39%
        ),
        radial-gradient(
            ellipse at 10% 58%,
            rgba(64, 94, 211, .075),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 43%,
            #f8faff 72%,
            #ffffff 100%
        );
}


/* ============================================================
   GLOWS GENERALES
   ============================================================ */

.pct-background-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(55px);

    opacity: .75;

    z-index: 1;
}

.pct-background-glow--left {
    width: 34vw;
    height: 55vh;

    left: -9vw;
    top: 22vh;

    background: rgba(72, 105, 224, .10);
}

.pct-background-glow--right {
    width: 42vw;
    height: 68vh;

    right: -13vw;
    top: 12vh;

    background: rgba(75, 103, 205, .10);
}

.pct-background-glow--bottom {
    width: 55vw;
    height: 24vh;

    left: 22vw;
    bottom: -14vh;

    background: rgba(44, 58, 152, .055);
}


/* ============================================================
   GEOMETRÍA IZQUIERDA

   El contenedor recibe el parallax desde main.js usando
   "translate".

   Los triángulos usan "transform" independientemente.
   ============================================================ */

.pct-left-geometry {
    position: absolute;
    inset: 0;

    z-index: 2;

    will-change: translate;
}


/* ============================================================
   PLANO GRANDE TRASERO
   ============================================================ */

.pct-left-plane {
    position: absolute;

    width: 36vw;
    height: 92vh;

    left: -13vw;
    top: 13vh;

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

    background:
        linear-gradient(
            145deg,
            rgba(83, 118, 226, .04),
            rgba(44, 58, 152, .15),
            rgba(44, 58, 152, .025)
        );

    transform-origin: 40% 55%;

    will-change: transform;

    animation:
        pct-float-plane 34s
        ease-in-out
        infinite;
}


/* ============================================================
   TRIÁNGULO PRINCIPAL
   ============================================================ */

.pct-main-triangle {
    position: absolute;

    width: 34vw;
    height: 76vh;

    left: -7vw;
    top: 3vh;

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

    background:
        linear-gradient(
            145deg,
            rgba(58, 88, 204, .34),
            rgba(69, 105, 222, .16) 56%,
            rgba(69, 105, 222, .035)
        );

    filter:
        drop-shadow(
            20px
            25px
            28px
            rgba(50, 78, 188, .06)
        );

    transform-origin: 42% 57%;

    will-change: transform;

    animation:
        pct-float-main 27s
        ease-in-out
        infinite;
}


/* ============================================================
   TRIÁNGULO SECUNDARIO
   ============================================================ */

.pct-secondary-triangle {
    position: absolute;

    width: 26vw;
    height: 59vh;

    left: -8vw;
    top: 29vh;

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

    background:
        linear-gradient(
            125deg,
            rgba(44, 58, 152, .03),
            rgba(65, 98, 210, .10),
            rgba(65, 98, 210, .015)
        );

    transform-origin: 48% 50%;

    will-change: transform;

    animation:
        pct-float-secondary 31s
        ease-in-out
        infinite;
}


/* ============================================================
   GLOW DE LOS TRIÁNGULOS
   ============================================================ */

.pct-triangle-glow {
    position: absolute;

    width: 30vw;
    height: 57vh;

    left: -3vw;
    top: 20vh;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(62, 94, 211, .13),
            rgba(62, 94, 211, .045) 45%,
            transparent 73%
        );

    filter: blur(34px);

    will-change: transform;

    animation:
        pct-float-glow 38s
        ease-in-out
        infinite;
}


/* ============================================================
   PLANO DIAGONAL BLANCO
   ============================================================ */

.pct-white-diagonal {
    position: absolute;

    z-index: 3;

    left: 25vw;
    top: -25vh;

    width: 31vw;
    height: 150vh;

    transform: rotate(31deg);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .82),
            rgba(241, 245, 255, .20),
            transparent
        );
}


/* ============================================================
   GRUPOS DE BARRAS HORIZONTALES
   ============================================================ */

.pct-speed-group {
    position: absolute;

    z-index: 4;

    display: flex;
    flex-direction: column;

    gap:
        clamp(
            13px,
            1.35vw,
            25px
        );

    pointer-events: none;

    will-change:
        transform,
        translate;
}


/* SUPERIOR DERECHA */

.pct-speed-group--top-right {
    top: 13vh;
    right: -2vw;

    width: 40vw;

    align-items: flex-end;

    animation:
        pct-bars-right 25s
        ease-in-out
        infinite;
}


/* INFERIOR IZQUIERDA */

.pct-speed-group--bottom-left {
    left: -4vw;
    top: 64vh;

    width: 33vw;

    align-items: flex-start;

    animation:
        pct-bars-left 19s
        ease-in-out
        infinite;
}


/* DETRÁS DEL AUTOMÓVIL */

.pct-speed-group--car {
    right: 2vw;
    top: 55vh;

    width: 39vw;

    align-items: flex-end;

    z-index: 4;

    animation:
        pct-bars-right 31s
        ease-in-out
        infinite
        reverse;
}


/* ============================================================
   BARRAS HORIZONTALES

   Ahora NO existe el reflejo fuerte.

   Cada barra contiene un degradado amplio que se desplaza
   lentamente de forma independiente.
   ============================================================ */

.pct-speed-line {
    position: relative;

    display: block;

    height:
        clamp(
            6px,
            .62vw,
            11px
        );

    border-radius: 1px;

    overflow: hidden;

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

    background:
        linear-gradient(
            90deg,
            rgba(44, 58, 152, .015) 0%,
            rgba(75, 105, 205, .07) 17%,
            rgba(44, 58, 152, .22) 40%,
            rgba(105, 133, 225, .13) 61%,
            rgba(55, 77, 174, .055) 82%,
            rgba(44, 58, 152, .015) 100%
        );

    background-size: 220% 100%;

    will-change:
        background-position,
        opacity;

    animation:
        pct-gradient-flow-a 17s
        ease-in-out
        infinite;
}


/* ============================================================
   DEGRADADOS DESFASADOS

   Cada barra tiene un ritmo distinto para evitar que
   todas respiren al mismo tiempo.
   ============================================================ */

.pct-speed-line:nth-child(1) {
    animation:
        pct-gradient-flow-a 17s
        ease-in-out
        infinite;

    animation-delay: -3s;
}

.pct-speed-line:nth-child(2) {
    animation:
        pct-gradient-flow-b 23s
        ease-in-out
        infinite;

    animation-delay: -9s;
}

.pct-speed-line:nth-child(3) {
    animation:
        pct-gradient-flow-c 19s
        ease-in-out
        infinite;

    animation-delay: -13s;
}

.pct-speed-line:nth-child(4) {
    animation:
        pct-gradient-flow-b 27s
        ease-in-out
        infinite;

    animation-delay: -18s;
}


/* ============================================================
   LONGITUD DE BARRAS
   ============================================================ */

.pct-speed-line--100 {
    width: 100%;
}

.pct-speed-line--93 {
    width: 93%;
}

.pct-speed-line--88 {
    width: 88%;
}

.pct-speed-line--82 {
    width: 82%;
}

.pct-speed-line--72 {
    width: 72%;
}

.pct-speed-line--65 {
    width: 65%;
}

.pct-speed-line--56 {
    width: 56%;
}


/* ============================================================
   DESACTIVAR COMPLETAMENTE EL REFLEJO ANTIGUO

   Esto permite mantener los <i class="pct-light-sweep">
   en el HTML sin que aparezcan.

   Después podemos limpiar el HTML si queremos, pero no es
   necesario para que funcione correctamente.
   ============================================================ */

.pct-light-sweep,
.pct-light-sweep--delay {
    display: none !important;
}


/* ============================================================
   AUTOMÓVIL
   ============================================================ */

.pct-car-layer {
    position: absolute;

    inset: 0;

    z-index: 5;

    will-change: translate;
}


/* ============================================================
   GLOW DETRÁS DEL AUTOMÓVIL
   ============================================================ */

.pct-car-glow {
    position: absolute;

    right: -6vw;
    bottom: -5vh;

    width: 52vw;
    height: 72vh;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(55, 89, 211, .14),
            rgba(55, 89, 211, .045) 48%,
            transparent 73%
        );

    filter: blur(40px);
}


/* ============================================================
   CONTENEDOR AUTOMÓVIL
   ============================================================ */

.pct-car {
    position: absolute;

    right: -4vw;
    bottom: -5vh;

    width:
        clamp(
            650px,
            43vw,
            1050px
        );

    opacity: .62;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .05) 8%,
            rgba(0, 0, 0, .38) 25%,
            #000000 52%,
            #000000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .05) 8%,
            rgba(0, 0, 0, .38) 25%,
            #000000 52%,
            #000000 100%
        );
}


/* ============================================================
   IMAGEN AUTOMÓVIL
   ============================================================ */

.pct-car__image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    user-select: none;

    filter:
        saturate(.72)
        contrast(.91)
        brightness(1.13);
}


/* ============================================================
   TONO FRÍO DEL AUTOMÓVIL
   ============================================================ */

.pct-car__cool-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, .46),
            transparent 39%
        ),
        linear-gradient(
            205deg,
            rgba(48, 78, 190, .12),
            transparent 62%
        );

    mix-blend-mode: screen;
}


/* ============================================================
   LUZ SUTIL SOBRE EL AUTOMÓVIL
   ============================================================ */

.pct-car__light {
    position: absolute;

    left: 22%;
    right: -5%;
    top: 58%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(70, 114, 255, .65),
            rgba(255, 255, 255, .90),
            transparent
        );

    filter: blur(2px);

    opacity: .50;

    transform: rotate(-4deg);
}


/* ============================================================
   GEOMETRÍA DELANTERA
   ============================================================ */

.pct-foreground-geometry {
    position: absolute;

    inset: 0;

    z-index: 6;

    will-change: translate;
}

.pct-foreground-shape {
    position: absolute;

    display: block;

    opacity: .45;
}

.pct-foreground-shape--one {
    width: 13vw;
    height: 29vh;

    left: -2vw;
    bottom: -4vh;

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

    background:
        linear-gradient(
            150deg,
            rgba(44, 58, 152, .08),
            transparent 70%
        );
}

.pct-foreground-shape--two {
    width: 16vw;
    height: 32vh;

    right: 11vw;
    bottom: -15vh;

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

    background:
        linear-gradient(
            150deg,
            rgba(44, 58, 152, .045),
            transparent 72%
        );
}


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

.pct-content {
    position: relative;

    z-index: 10;

    height: 100vh;
    height: 100dvh;

    display: flex;

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

    padding:
        2rem
        4vw;
}


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

.pct-hero {
    width:
        min(
            850px,
            92vw
        );

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

    transform:
        translateY(-4vh);
}


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

.pct-logo {
    margin: 0;

    line-height: 0;

    width:
        clamp(
            560px,
            42vw,
            820px
        );

    max-width: 90vw;

    opacity: 0;

    animation:
        pct-rise
        .65s
        var(--pct-ease)
        .05s
        forwards;
}

.pct-logo__image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* ============================================================
   MANAGEMENT SYSTEM
   Ajuste de posición para compensar el espacio transparente
   interno del nuevo SVG.
   ============================================================ */

.pct-subtitle {
    margin:
        clamp(
            -145px,
            -8.2vw,
            -105px
        )
        0
        0;

    position: relative;
    z-index: 11;

    font-size:
        clamp(
            .68rem,
            .86vw,
            .94rem
        );

    font-weight: 300;

    letter-spacing: .48em;

    text-transform: uppercase;

    color: #626b7d;

    opacity: 0;

    animation:
        pct-rise
        .55s
        var(--pct-ease)
        .22s
        forwards;
}


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

.pct-access-button {
    pointer-events: auto;

    position: relative;
    z-index: 11;

    display: grid;

    grid-template-columns:
        28px
        1fr
        28px;

    align-items: center;

    width:
        clamp(
            350px,
            28vw,
            480px
        );

    height: 72px;

    margin-top:
        clamp(
            29px,
            3.8vh,
            42px
        );

    padding:
        0
        25px;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size:
        clamp(
            .76rem,
            .85vw,
            .94rem
        );

    font-weight: 600;

    letter-spacing: .13em;

    border: 0;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #3550c7 0%,
            var(--pct-blue) 56%,
            var(--pct-blue-dark) 100%
        );

    box-shadow:
        0 15px 35px rgba(44, 58, 152, .22),
        0 4px 9px rgba(44, 58, 152, .10);

    opacity: 0;

    animation:
        pct-rise
        .55s
        var(--pct-ease)
        .36s
        forwards;

    transition:
        transform .28s var(--pct-ease),
        box-shadow .28s var(--pct-ease),
        filter .28s var(--pct-ease);
}


/* ============================================================
   TAGLINE
   ============================================================ */

.pct-tagline {
    position: relative;
    z-index: 11;

    margin-top:
        clamp(
            39px,
            4.8vh,
            54px
        );

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 17px;

    opacity: 0;

    animation:
        pct-rise
        .50s
        var(--pct-ease)
        .48s
        forwards;
}


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

.pct-access-button {
    pointer-events: auto;

    display: grid;

    grid-template-columns:
        28px
        1fr
        28px;

    align-items: center;

    width:
        clamp(
            350px,
            28vw,
            480px
        );

    height: 72px;

    margin-top:
        clamp(
            29px,
            3.8vh,
            42px
        );

    padding:
        0
        25px;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size:
        clamp(
            .76rem,
            .85vw,
            .94rem
        );

    font-weight: 600;

    letter-spacing: .13em;

    border: 0;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #3550c7 0%,
            var(--pct-blue) 56%,
            var(--pct-blue-dark) 100%
        );

    box-shadow:
        0 15px 35px rgba(44, 58, 152, .22),
        0 4px 9px rgba(44, 58, 152, .10);

    opacity: 0;

    animation:
        pct-rise
        .55s
        var(--pct-ease)
        .36s
        forwards;

    transition:
        transform .28s var(--pct-ease),
        box-shadow .28s var(--pct-ease),
        filter .28s var(--pct-ease);
}

.pct-access-button__lock,
.pct-access-button__arrow {
    display: flex;

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

.pct-access-button__arrow {
    transition:
        transform
        .28s
        var(--pct-ease);
}


/* HOVER */

.pct-access-button:hover,
.pct-access-button:focus-visible {
    transform:
        translateY(-2px);

    filter:
        brightness(1.07);

    box-shadow:
        0 19px 42px rgba(44, 58, 152, .29),
        0 5px 10px rgba(44, 58, 152, .12);
}

.pct-access-button:hover
.pct-access-button__arrow,

.pct-access-button:focus-visible
.pct-access-button__arrow {
    transform:
        translateX(5px);
}


/* FOCUS */

.pct-access-button:focus-visible {
    outline:
        2px
        solid
        var(--pct-blue-light);

    outline-offset: 4px;
}


/* ACTIVE */

.pct-access-button:active {
    transform:
        translateY(0);

    filter:
        brightness(.98);
}


/* ============================================================
   TAGLINE
   ============================================================ */

.pct-tagline {
    margin-top:
        clamp(
            39px,
            4.8vh,
            54px
        );

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 17px;

    opacity: 0;

    animation:
        pct-rise
        .50s
        var(--pct-ease)
        .48s
        forwards;
}

.pct-tagline__line {
    display: block;

    width: 72px;
    height: 3px;

    background:
        var(--pct-blue);

    border-radius: 2px;
}

.pct-tagline__text {
    margin: 0;

    color: #858da1;

    text-transform: uppercase;

    font-size:
        clamp(
            .58rem,
            .66vw,
            .72rem
        );

    letter-spacing: .27em;

    font-weight: 400;
}


/* ============================================================
   VALORES SUPERIORES
   ============================================================ */

.pct-values {
    position: fixed;

    z-index: 12;

    top:
        clamp(
            22px,
            4vh,
            44px
        );

    right:
        clamp(
            28px,
            5vw,
            76px
        );

    display: flex;

    align-items: center;

    gap: 17px;

    color: #6f778a;

    text-transform: uppercase;

    font-size:
        clamp(
            .57rem,
            .64vw,
            .71rem
        );

    letter-spacing: .23em;

    font-weight: 500;
}

.pct-values i {
    display: block;

    width: 1px;
    height: 12px;

    background:
        rgba(
            44,
            58,
            152,
            .25
        );
}


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

.pct-footer {
    position: fixed;

    z-index: 12;

    left:
        clamp(
            24px,
            4.5vw,
            72px
        );

    bottom:
        clamp(
            20px,
            3.8vh,
            42px
        );

    color: #737b8f;

    font-size:
        clamp(
            .56rem,
            .63vw,
            .69rem
        );

    letter-spacing: .025em;
}


/* ============================================================
   WINDOW TINT SOLUTIONS
   ============================================================ */

.pct-bottom-brand {
    position: fixed;

    z-index: 12;

    right:
        clamp(
            28px,
            5vw,
            76px
        );

    bottom:
        clamp(
            20px,
            3.8vh,
            42px
        );

    display: flex;

    align-items: center;

    gap: 12px;

    color: #5f6779;

    text-transform: uppercase;

    font-size:
        clamp(
            .58rem,
            .68vw,
            .73rem
        );

    letter-spacing: .22em;

    font-weight: 500;
}

.pct-bottom-brand__symbol {
    display: flex;
}


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

@keyframes pct-rise {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   BAMBOLEO TRIÁNGULO PRINCIPAL
   ============================================================ */

@keyframes pct-float-main {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    18% {
        transform:
            translate3d(8px, -10px, 0)
            rotate(.7deg);
    }

    37% {
        transform:
            translate3d(14px, 4px, 0)
            rotate(1.3deg);
    }

    56% {
        transform:
            translate3d(4px, 13px, 0)
            rotate(.2deg);
    }

    74% {
        transform:
            translate3d(-9px, 5px, 0)
            rotate(-.8deg);
    }

    89% {
        transform:
            translate3d(-5px, -7px, 0)
            rotate(-.4deg);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }
}


/* ============================================================
   BAMBOLEO PLANO TRASERO
   ============================================================ */

@keyframes pct-float-plane {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    21% {
        transform:
            translate3d(-11px, 7px, 0)
            rotate(-.5deg);
    }

    43% {
        transform:
            translate3d(5px, 16px, 0)
            rotate(.4deg);
    }

    67% {
        transform:
            translate3d(16px, -3px, 0)
            rotate(.9deg);
    }

    84% {
        transform:
            translate3d(4px, -12px, 0)
            rotate(.3deg);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }
}


/* ============================================================
   BAMBOLEO TRIÁNGULO SECUNDARIO
   ============================================================ */

@keyframes pct-float-secondary {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    16% {
        transform:
            translate3d(10px, 8px, 0)
            rotate(.8deg);
    }

    34% {
        transform:
            translate3d(2px, 18px, 0)
            rotate(.2deg);
    }

    53% {
        transform:
            translate3d(-13px, 9px, 0)
            rotate(-.9deg);
    }

    72% {
        transform:
            translate3d(-8px, -9px, 0)
            rotate(-.4deg);
    }

    88% {
        transform:
            translate3d(7px, -12px, 0)
            rotate(.6deg);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }
}


/* ============================================================
   MOVIMIENTO DEL GLOW
   ============================================================ */

@keyframes pct-float-glow {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    25% {
        transform:
            translate3d(10px, -5px, 0)
            scale(1.025);
    }

    50% {
        transform:
            translate3d(5px, 11px, 0)
            scale(1.04);
    }

    75% {
        transform:
            translate3d(-8px, 5px, 0)
            scale(1.015);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}


/* ============================================================
   MOVIMIENTO GENERAL DE LOS GRUPOS DE BARRAS

   Es muy lento y de poco recorrido.

   El degradado interno se mueve independientemente.
   ============================================================ */

@keyframes pct-bars-right {

    0%,
    100% {
        transform:
            translateX(-18px);
    }

    50% {
        transform:
            translateX(24px);
    }
}


@keyframes pct-bars-left {

    0%,
    100% {
        transform:
            translateX(-22px);
    }

    50% {
        transform:
            translateX(30px);
    }
}


/* ============================================================
   DEGRADADO OSCILANTE A

   No existe un punto blanco ni un destello.
   Solo cambia suavemente la concentración del azul.
   ============================================================ */

@keyframes pct-gradient-flow-a {

    0% {
        background-position: 5% 50%;
        opacity: .72;
    }

    23% {
        background-position: 42% 50%;
        opacity: .86;
    }

    51% {
        background-position: 92% 50%;
        opacity: .69;
    }

    76% {
        background-position: 58% 50%;
        opacity: .82;
    }

    100% {
        background-position: 5% 50%;
        opacity: .72;
    }
}


/* ============================================================
   DEGRADADO OSCILANTE B
   ============================================================ */

@keyframes pct-gradient-flow-b {

    0% {
        background-position: 88% 50%;
        opacity: .65;
    }

    31% {
        background-position: 51% 50%;
        opacity: .81;
    }

    57% {
        background-position: 12% 50%;
        opacity: .70;
    }

    81% {
        background-position: 38% 50%;
        opacity: .85;
    }

    100% {
        background-position: 88% 50%;
        opacity: .65;
    }
}


/* ============================================================
   DEGRADADO OSCILANTE C
   ============================================================ */

@keyframes pct-gradient-flow-c {

    0% {
        background-position: 25% 50%;
        opacity: .76;
    }

    19% {
        background-position: 63% 50%;
        opacity: .68;
    }

    48% {
        background-position: 96% 50%;
        opacity: .84;
    }

    73% {
        background-position: 47% 50%;
        opacity: .71;
    }

    100% {
        background-position: 25% 50%;
        opacity: .76;
    }
}


/* ============================================================
   TABLET / LAPTOP PEQUEÑO
   ============================================================ */

@media (max-width: 1100px) {

    .pct-main-triangle {
        width: 44vw;
        left: -14vw;
    }

    .pct-left-plane {
        width: 46vw;
        left: -19vw;
    }

    .pct-speed-group--top-right {
        width: 47vw;
    }

    .pct-speed-group--bottom-left {
        width: 42vw;
    }

    .pct-car {
        right: -15vw;

        width: 65vw;
        min-width: 620px;

        opacity: .46;
    }

    .pct-logo {
        width:
            min(
                65vw,
                650px
            );
    }
}


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

@media (max-width: 700px) {

    .pct-hero {
        transform:
            translateY(-3vh);
    }

    .pct-logo {
        width:
            min(
                86vw,
                520px
            );
    }

    .pct-subtitle {
        letter-spacing: .32em;
    }

    .pct-access-button {
        width:
            min(
                88vw,
                390px
            );

        height: 64px;

        padding:
            0
            20px;
    }


    /* Triángulos */

    .pct-main-triangle {
        width: 68vw;
        height: 58vh;

        left: -31vw;
        top: 9vh;

        opacity: .72;
    }

    .pct-left-plane {
        width: 70vw;

        left: -35vw;

        opacity: .70;
    }


    /* Barras */

    .pct-speed-group--top-right {
        width: 68vw;

        right: -25vw;
        top: 14vh;
    }

    .pct-speed-group--bottom-left {
        width: 67vw;

        left: -22vw;
        top: 68vh;
    }

    .pct-speed-group--car {
        display: none;
    }


    /* Automóvil */

    .pct-car {
        width: 95vw;

        min-width: 0;

        right: -45vw;
        bottom: 1vh;

        opacity: .19;
    }


    /* Diagonal */

    .pct-white-diagonal {
        left: 20vw;
        width: 55vw;
    }


    /* Footer */

    .pct-bottom-brand {
        display: none;
    }

    .pct-footer {
        left: 0;
        right: 0;

        bottom: 18px;

        padding:
            0
            14px;

        text-align: center;
    }


    /* Valores superiores */

    .pct-values {
        right: 18px;
        top: 18px;

        gap: 9px;

        font-size: .52rem;

        letter-spacing: .12em;
    }


    .pct-tagline {
        margin-top: 34px;
    }
}


/* ============================================================
   PANTALLAS BAJAS / LANDSCAPE
   ============================================================ */

@media
(max-height: 620px)
and
(min-width: 701px) {

    .pct-hero {
        transform:
            translateY(-1vh);
    }

    .pct-logo {
        width:
            min(
                48vw,
                580px
            );
    }

    .pct-access-button {
        height: 60px;
        margin-top: 22px;
    }

    .pct-tagline {
        margin-top: 26px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }


    .pct-logo,
    .pct-subtitle,
    .pct-access-button,
    .pct-tagline {
        opacity: 1 !important;
        transform: none !important;
    }


    .pct-main-triangle,
    .pct-left-plane,
    .pct-secondary-triangle,
    .pct-triangle-glow {
        animation: none !important;
        transform: none !important;
    }


    .pct-speed-line {
        animation: none !important;

        background-position:
            50%
            50% !important;

        opacity: .75;
    }


    [data-parallax] {
        translate: none !important;
    }
}


/* ============================================================
   MODAL DE ACCESO
   ============================================================ */

body.pct-modal-open {
    overflow: hidden;
}

.pct-access-button {
    cursor: pointer;
    font-family: inherit;
}

.pct-access-modal {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .22s var(--pct-ease), visibility .22s;
}

.pct-access-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.pct-access-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 13, 28, .38);
    backdrop-filter: blur(3px);
}

.pct-access-dialog {
    position: relative;
    width: min(430px, 100%);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    padding: 34px 34px 28px;
    border: 1px solid rgba(44, 58, 152, .14);
    border-radius: 16px;
    background: var(--pct-white);
    box-shadow: 0 30px 80px rgba(17, 25, 57, .25), 0 8px 24px rgba(17, 25, 57, .10);
    text-align: center;
    transform: translateY(12px) scale(.985);
    transition: transform .24s var(--pct-ease);
}

.pct-access-modal.is-open .pct-access-dialog {
    transform: translateY(0) scale(1);
}

.pct-access-dialog__close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #737b8f;
    cursor: pointer;
}

.pct-access-dialog__close:hover,
.pct-access-dialog__close:focus-visible {
    background: #f4f6fb;
    color: var(--pct-blue);
}

.pct-access-dialog__close svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.pct-access-dialog__logo {
    display: block;
    width: min(225px, 70%);
    height: auto;
    margin: -20px auto -38px;
}

.pct-access-dialog__eyebrow {
    margin: 0 0 9px;
    color: var(--pct-blue);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.pct-access-dialog h2 {
    margin: 0;
    color: var(--pct-black);
    font-size: 1.45rem;
}

.pct-access-dialog__description {
    margin: 9px 0 24px;
    color: #7b8395;
    font-size: .84rem;
    line-height: 1.5;
}

.pct-access-form {
    display: grid;
    gap: 12px;
    text-align: left;
}

.pct-access-field label {
    display: block;
    margin-bottom: 8px;
    color: #454d5d;
    font-size: .76rem;
    font-weight: 600;
}

.pct-access-field__control {
    position: relative;
}

.pct-access-field input {
    width: 100%;
    height: 52px;
    padding: 0 52px 0 14px;
    border: 1px solid #dfe4ee;
    border-radius: 10px;
    outline: 0;
    background: #fff;
    color: #111318;
    font: inherit;
    transition: border-color .18s, box-shadow .18s;
}

.pct-access-field input:focus {
    border-color: var(--pct-blue-light);
    box-shadow: 0 0 0 3px rgba(44, 58, 152, .11);
}

.pct-access-field.has-error input {
    border-color: #d94141;
    box-shadow: 0 0 0 3px rgba(217, 65, 65, .08);
}

.pct-access-field__toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #737c8e;
    cursor: pointer;
}

.pct-access-field__toggle:hover,
.pct-access-field__toggle:focus-visible {
    background: #f4f6fb;
    color: var(--pct-blue);
}

.pct-access-field__toggle svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.pct-access-form__error {
    min-height: 18px;
    margin: 7px 0 0;
    color: #c93434;
    font-size: .72rem;
    line-height: 1.4;
}

.pct-access-form__submit,
.pct-access-form__cancel {
    width: 100%;
    border-radius: 11px;
    font: inherit;
    cursor: pointer;
}

.pct-access-form__submit {
    position: relative;
    height: 54px;
    border: 0;
    background: linear-gradient(135deg, #3550c7, var(--pct-blue) 56%, var(--pct-blue-dark));
    color: #fff;
    box-shadow: 0 12px 25px rgba(44, 58, 152, .18);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pct-access-form__submit:disabled {
    cursor: wait;
    opacity: .78;
}

.pct-access-form__spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin-left: 9px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -3px;
    animation: pct-access-spin .7s linear infinite;
}

.pct-access-form__submit.is-loading .pct-access-form__spinner {
    display: inline-block;
}

.pct-access-form__cancel {
    height: 42px;
    border: 1px solid #e2e6ee;
    background: #fff;
    color: #687184;
    font-size: .75rem;
    font-weight: 600;
}

.pct-access-form__cancel:hover,
.pct-access-form__cancel:focus-visible {
    border-color: rgba(44, 58, 152, .3);
    color: var(--pct-blue);
    background: #f8f9fc;
}

.pct-access-dialog button:focus-visible {
    outline: 2px solid var(--pct-blue-light);
    outline-offset: 2px;
}

@keyframes pct-access-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
    .pct-access-modal {
        place-items: safe center;
        padding-inline: 14px;
    }

    .pct-access-dialog {
        padding: 30px 22px 22px;
        border-radius: 14px;
    }
}

@media (max-height: 580px) {
    .pct-access-modal {
        align-items: start;
    }

    .pct-access-dialog__logo {
        width: 180px;
        margin-bottom: -32px;
    }

    .pct-access-dialog__description {
        margin-bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pct-access-modal,
    .pct-access-dialog {
        transition: none !important;
    }

    .pct-access-form__spinner {
        animation: none !important;
    }
}