/* =====================================================
   AYOSPT — FUTURE BUSINESS EXPERIENCE
   ===================================================== */


/* =====================================================
   VARIABLES
   ===================================================== */

:root {

    --navy-deep: #050B14;
    --navy: #0B1626;
    --navy-soft: #101F33;

    --teal: #2D8A8A;
    --teal-light: #59D4D0;

    --coral: #F97316;
    --coral-light: #FF9B58;

    --amber: #FEF3C7;

    --white: #F8FAFC;
    --gray: #91A0B5;
    --gray-dark: #526277;

    --border:
        rgba(148, 163, 184, 0.14);

    --radius: 24px;

    --transition:
        0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background:
        var(--navy-deep);

    color:
        var(--white);

    overflow-x:
        hidden;

}


body::selection {

    background:
        var(--coral);

    color:
        white;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


img {

    max-width:
        100%;

    display:
        block;

}


/* =====================================================
   ATMOSPHERE
   ===================================================== */

.noise {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0.035;

    z-index:
        999;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

}


.ambient {

    position:
        fixed;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(120px);

    opacity:
        0.18;

    z-index:
        0;

}


.ambient-one {

    width:
        420px;

    height:
        420px;

    top:
        10%;

    right:
        -150px;

    background:
        var(--teal);

}


.ambient-two {

    width:
        350px;

    height:
        350px;

    bottom:
        10%;

    left:
        -180px;

    background:
        var(--coral);

}


.ambient-three {

    width:
        250px;

    height:
        250px;

    top:
        50%;

    left:
        40%;

    background:
        #163A55;

}


/* =====================================================
   NAVBAR
   ===================================================== */

.navbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        1000;

    background:
        rgba(5, 11, 20, 0.72);

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

    backdrop-filter:
        blur(22px);

    transition:
        background 0.4s ease,
        box-shadow 0.4s ease;

}


.navbar.is-scrolled {

    background:
        rgba(5, 11, 20, 0.92);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35);

}


.nav-container {

    max-width:
        1280px;

    margin:
        auto;

    padding:
        13px 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


/* LOGO */

.brand {

    width:
        130px;

}


.brand img {

    width:
        100%;

    height:
        46px;

    object-fit:
        contain;

}


/* MENU */

.nav-menu {

    display:
        flex;

    gap:
        38px;

}


.nav-menu a {

    position:
        relative;

    padding:
        6px 0 9px;

    color:
        var(--gray);

    font-size:
        0.92rem;

    font-weight:
        600;

    transition:
        var(--transition);

}


/* Filete bajo cada enlace, como el de los pilares del hero:
   base tenue y un degradado que la recorre al señalar. */

.nav-menu a::before,
.nav-menu a::after {

    content:
        '';

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    border-radius:
        2px;

}


.nav-menu a::before {

    width:
        100%;

    height:
        1px;

    background:
        rgba(148, 163, 184, 0.22);

}


.nav-menu a::after {

    width:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--teal-light),
            var(--coral)
        );

    transition:
        width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

}


.nav-menu a:hover,
.nav-menu a:focus-visible {

    color:
        var(--white);

}


.nav-menu a:hover::after,
.nav-menu a:focus-visible::after {

    width:
        100%;

}


/* BUTTON */

.nav-button {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 20px;

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

    background:
        var(--coral);

    color:
        white;

    border-radius:
        50px;

    font-size:
        0.88rem;

    font-weight:
        700;

    box-shadow:
        0 8px 22px rgba(249, 115, 22, 0.22);

    transition:
        var(--transition);

}


.nav-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.nav-button--docs {

    border-color:
        #2FE3C8;

    background:
        #2FE3C8;

    color:
        var(--navy-deep);

    box-shadow:
        0 8px 22px rgba(47, 227, 200, 0.24);

}


.nav-button--docs:hover {

    background:
        #6AF0DA;

    border-color:
        #6AF0DA;

    box-shadow:
        0 14px 32px rgba(47, 227, 200, 0.4);

}


.nav-button span {

    color:
        var(--navy-deep);

    font-weight:
        900;

}


.nav-button:hover {

    background:
        #FB8A3C;

    border-color:
        #FB8A3C;

    box-shadow:
        0 14px 32px rgba(249, 115, 22, 0.36);

    transform:
        translateY(-2px);

}


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

.hero {

    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--navy-deep);

}


/* FONDO DE MARCA */

.hero-background {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            90deg,
            rgba(5,11,20,0.98) 0%,
            rgba(5,11,20,0.87) 48%,
            rgba(5,11,20,0.32) 100%
        ),
        url("../assets/images/fondo-navy-lineas.png");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        0.72;

}


.light-beam {

    position:
        absolute;

    width:
        450px;

    height:
        120%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(45,138,138,0.10),
            transparent
        );

    filter:
        blur(35px);

    transform:
        rotate(25deg);

}


.light-beam-one {

    right:
        20%;

    top:
        -30%;

}


.light-beam-two {

    right:
        5%;

    bottom:
        -35%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(249,115,22,0.08),
            transparent
        );

}


/* HERO CONTAINER */

.hero-container {

    position:
        relative;

    z-index:
        5;

    max-width:
        1280px;

    width:
        100%;

    margin:
        auto;

    padding:
        clamp(84px, 12vh, 120px) 32px clamp(44px, 7vh, 80px);

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        clamp(32px, 4vw, 60px);

}


/* HERO TEXT */

.hero-content {

    position:
        relative;

    max-width:
        680px;

    padding-left:
        34px;

}


/* Riel vertical con un destello que recorre */

.hero-rail {

    position:
        absolute;

    top:
        6px;

    bottom:
        6px;

    left:
        0;

    width:
        2px;

    overflow:
        hidden;

    border-radius:
        2px;

    background:
        linear-gradient(
            to bottom,
            rgba(89, 212, 208, 0.45),
            rgba(89, 212, 208, 0.10) 45%,
            rgba(249, 115, 22, 0.22)
        );

}


.hero-rail::after {

    content:
        '';

    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        26%;

    border-radius:
        2px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--teal-light),
            transparent
        );

    animation:
        railTravel 4.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;

}


@keyframes railTravel {

    0%   { top: -30%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 104%; opacity: 0; }

}


.hero-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 13px;

    border:
        1px solid rgba(89,212,208,0.18);

    background:
        rgba(45,138,138,0.08);

    border-radius:
        50px;

    color:
        var(--teal-light);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        1.8px;

    margin-bottom:
        clamp(14px, 2.6vh, 28px);

}


.status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--teal-light);

    box-shadow:
        0 0 16px var(--teal-light);

}


.hero-title {

    font-size:
        clamp(2.6rem, min(5.4vw, 9.2vh), 6.4rem);

    line-height:
        0.91;

    letter-spacing:
        -5px;

    font-weight:
        900;

    margin-bottom:
        clamp(18px, 3vh, 34px);

}


/* El relleno y el margen negativo se cancelan: dan aire
   a la máscara para que no corte trazos descendentes. */

.title-line {

    display:
        block;

    overflow:
        hidden;

    padding:
        0.30em 0 0.18em;

    margin:
        -0.30em 0 -0.18em;

}


.title-line > span {

    display:
        block;

    transform:
        translateY(112%);

    animation:
        lineRise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;

}


.title-line--accent {

    color:
        var(--coral);

}


.title-line:nth-child(2) > span {

    animation-delay:
        0.28s;

}


.title-line:nth-child(3) > span {

    animation-delay:
        0.40s;

}


@keyframes lineRise {

    to { transform: translateY(0); }

}


.title-rotator {

    position:
        relative;

    display:
        inline-block;

    white-space:
        nowrap;

}


.title-word {

    display:
        inline-block;

    transition:
        opacity 0.5s ease,
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);

}


.title-word.is-entering {

    opacity:
        0;

    transform:
        translateY(0.32em);

}


.title-word.is-leaving {

    position:
        absolute;

    top:
        0;

    left:
        0;

    opacity:
        0;

    transform:
        translateY(-0.32em);

}


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

    .title-line > span {

        transform:
            none;

        animation:
            none;

    }

    .hero-rail::after {

        animation:
            none;

    }

}


.hero-description {

    max-width:
        600px;

    color:
        var(--gray);

    font-size:
        clamp(0.96rem, 1.9vh, 1.15rem);

    line-height:
        1.7;

    margin-bottom:
        clamp(18px, 3.4vh, 38px);

}


/* ACTIONS */

.hero-actions {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;

}


.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        15px 24px;

    border-radius:
        50px;

    font-weight:
        800;

    font-size:
        0.92rem;

    transition:
        var(--transition);

}


.button-primary {

    background:
        var(--white);

    color:
        var(--navy-deep);

}


.button-primary:hover {

    background:
        var(--teal-light);

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(45,138,138,0.2);

}


.button-ghost {

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

    color:
        var(--white);

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

}


.button-ghost:hover {

    border-color:
        var(--teal);

    background:
        rgba(45,138,138,0.08);

    transform:
        translateY(-3px);

}


/* HERO STATS */

.hero-stats {

    display:
        grid;

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

    gap:
        20px;

    max-width:
        640px;

    margin-top:
        clamp(20px, 4.4vh, 58px);

}


.stat {

    position:
        relative;

    padding:
        18px 16px 2px 0;

}


.stat::before,
.stat::after {

    content:
        '';

    position:
        absolute;

    top:
        0;

    left:
        0;

    height:
        1px;

}


.stat::before {

    width:
        100%;

    background:
        var(--border);

}


.stat::after {

    width:
        0;

    background:
        linear-gradient(
            90deg,
            var(--teal-light),
            var(--coral)
        );

    transition:
        width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

}


.stat:hover::after {

    width:
        100%;

}


.stat-index {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--teal);

    font-size:
        0.66rem;

    font-weight:
        800;

    letter-spacing:
        2.2px;

}


.stat strong {

    display:
        block;

    color:
        var(--white);

    font-size:
        1.02rem;

    letter-spacing:
        -0.2px;

}


.stat small {

    display:
        block;

    max-width:
        19ch;

    margin-top:
        7px;

    color:
        var(--gray-dark);

    font-size:
        0.76rem;

    line-height:
        1.55;

}


/* ENTRADA ESCALONADA DEL HERO */

.hero-label,
.hero-description,
.hero-actions,
.hero-stats {

    opacity:
        0;

    animation:
        heroFade 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

}

.hero-label       { animation-delay: 0.05s; }
.hero-description { animation-delay: 0.52s; }
.hero-actions     { animation-delay: 0.66s; }
.hero-stats       { animation-delay: 0.80s; }


@keyframes heroFade {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}


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

.hero-visual {

    min-height:
        min(600px, 70vh);

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* ORBITS */

.visual-orbit {

    position:
        absolute;

    border:
        1px solid rgba(89,212,208,0.14);

    border-radius:
        50%;

}


.orbit-one {

    width:
        min(430px, 58vh);

    height:
        min(430px, 58vh);

    animation:
        orbitSpin 25s linear infinite;

}


.orbit-two {

    width:
        min(560px, 74vh);

    height:
        min(560px, 74vh);

    border-color:
        rgba(249,115,22,0.10);

    transform:
        rotateX(65deg);

    animation:
        orbitSpinReverse 35s linear infinite;

}


.orbit-three {

    width:
        min(660px, 88vh);

    height:
        min(300px, 40vh);

    border-color:
        rgba(89,212,208,0.08);

    transform:
        rotate(-25deg);

    animation:
        orbitSpin 40s linear infinite;

}


/* CORE */

.visual-core {

    position:
        relative;

    width:
        390px;

    height:
        390px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.core-glow {

    position:
        absolute;

    width:
        min(320px, 42vh);

    height:
        min(320px, 42vh);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(45,138,138,0.34),
            transparent 68%
        );

    filter:
        blur(15px);

    animation:
        corePulse 5s ease-in-out infinite;

}


/* LOGO CARD */

.logo-card {

    position:
        relative;

    width:
        280px;

    height:
        330px;

    border:
        1px solid rgba(89,212,208,0.22);

    border-radius:
        34px;

    background:
        linear-gradient(
            145deg,
            rgba(20,38,59,0.95),
            rgba(7,17,31,0.80)
        );

    backdrop-filter:
        blur(20px);

    box-shadow:

        0 30px 100px
        rgba(0,0,0,0.48),

        inset 0 0 50px
        rgba(45,138,138,0.06);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    animation:
        cardFloat 5s ease-in-out infinite;

    overflow:
        hidden;

}


.logo-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

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

    border-radius:
        27px;

}


.logo-card-shine {

    position:
        absolute;

    width:
        180px;

    height:
        500px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.09),
            transparent
        );

    transform:
        rotate(35deg)
        translateX(-250px);

    animation:
        shine 6s infinite;

}


/* LOGO */

.logo-card img {

    position:
        relative;

    width:
        210px;

    height:
        210px;

    object-fit:
        contain;

    z-index:
        2;

    filter:
        drop-shadow(
            0 20px 30px
            rgba(0,0,0,0.35)
        );

}


/* LABEL */

.logo-card-label {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;

    margin-top:
        12px;

}


.logo-card-label span {

    display:
        block;

    font-size:
        0.8rem;

    letter-spacing:
        4px;

    color:
        rgba(255,255,255,0.78);

}


.logo-card-label small {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--teal-light);

    font-size:
        0.54rem;

    letter-spacing:
        2px;

}


/* FLOATING CARDS */

.floating-card {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 16px;

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

    background:
        rgba(9,19,32,0.82);

    backdrop-filter:
        blur(15px);

    border-radius:
        16px;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.24);

}


.floating-icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(45,138,138,0.12);

    color:
        var(--teal-light);

}


.floating-card strong {

    display:
        block;

    font-size:
        0.72rem;

}


.floating-card small {

    display:
        block;

    color:
        var(--gray-dark);

    font-size:
        0.63rem;

    margin-top:
        2px;

}


.floating-card-one {

    top:
        18%;

    right:
        0;

    animation:
        cardFloat 5s ease-in-out infinite;

}


.floating-card-two {

    bottom:
        17%;

    left:
        0;

    animation:
        cardFloat 6s ease-in-out infinite reverse;

}


/* SCROLL */

.scroll-indicator {

    position:
        absolute;

    bottom:
        28px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--gray-dark);

    font-size:
        0.62rem;

    letter-spacing:
        2px;

}


.scroll-indicator span {

    display:
        block;

    width:
        20px;

    height:
        30px;

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

    border-radius:
        20px;

    position:
        relative;

}


.scroll-indicator span::after {

    content:
        "";

    position:
        absolute;

    top:
        6px;

    left:
        50%;

    width:
        3px;

    height:
        7px;

    transform:
        translateX(-50%);

    border-radius:
        10px;

    background:
        var(--teal-light);

    animation:
        scrollDot 1.8s infinite;

}


/* =====================================================
   SERVICES
   ===================================================== */

.services {

    position:
        relative;

    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(76px, 12vh, 110px) 32px clamp(28px, 5vh, 70px);

    background:
        #08111E;

    overflow:
        hidden;

}


.services-canvas {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    pointer-events:
        none;

}


.services-head {

    position:
        relative;

    max-width:
        720px;

    margin:
        0 auto clamp(18px, 3.5vh, 44px);

    text-align:
        center;

}


.services-head p {

    max-width:
        520px;

    margin:
        clamp(10px, 2vh, 22px) auto 0;

    color:
        var(--gray);

    line-height:
        1.8;

}


/* Sello de marca sobre la etiqueta: logo en blanco entre dos
   líneas que se desvanecen. El alto va ligado a vh porque a
   1366×657 la fase solo tiene 60px libres. */

.services-brand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-bottom:
        clamp(6px, 1.2vh, 12px);

}


.services-brand-line {

    width:
        clamp(52px, 7vw, 110px);

    height:
        1px;

    background:
        linear-gradient(90deg, rgba(89, 212, 208, 0), rgba(89, 212, 208, 0.75));

}


.services-brand-line:last-child {

    background:
        linear-gradient(90deg, rgba(89, 212, 208, 0.75), rgba(89, 212, 208, 0));

}


.services-head .section-label {

    font-size:
        clamp(0.78rem, 1.9vh, 0.92rem);

    letter-spacing:
        3px;

}


/* main.js lo repinta en blanco; oculto hasta entonces para
   no mostrar un instante el trazo navy original. */

.services-logo {

    width:
        auto;

    height:
        clamp(40px, 8vh, 72px);

    opacity:
        0;

    transition:
        opacity 0.6s ease;

}


.services-logo.is-painted {

    opacity:
        1;

}


/* =====================================================
   COREOGRAFÍA DE FASES
   ===================================================== */

/* Cada fase entra de una vez, no arrastrada por el scroll.

   Antes el desplazamiento iba ligado cuadro a cuadro a la
   posición de scroll: nunca había un momento nítido, solo
   un arrastre continuo de dos capas a distinta velocidad.
   Eso se veía sucio y a la vez pasaba desapercibido.

   Ahora main.js marca .is-live cuando la sección entra en
   cuadro y la animación corre en su propio tiempo, con su
   propia curva. El fondo no se mueve: lo que entra es el
   contenido, en bloque y de un lado. --dir da el lado. */

[data-phase-content] {

    opacity:
        0;

    transform:
        translate3d(calc(var(--dir, 0) * 110px), 26px, 0);

    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);

}


[data-phase].is-live [data-phase-content] {

    opacity:
        1;

    transform:
        none;

}


/* Los dos bloques de Servicios entran uno detrás del otro
   para que se lea como una secuencia y no como un salto. */

[data-phase].is-live .carousel {

    transition-delay:
        0.14s;

}


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

    [data-phase-content] {

        opacity:
            1;

        transform:
            none;

        transition:
            none;

    }

}


/* =====================================================
   INDICADOR DE FASE
   ===================================================== */

.phase-rail {

    position:
        fixed;

    top:
        50%;

    right:
        26px;

    z-index:
        900;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        18px;

    transform:
        translateY(-50%);

}


.phase-rail a {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--gray-dark);

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

    transition:
        var(--transition);

}


.phase-rail span {

    opacity:
        0;

    transform:
        translateX(8px);

    transition:
        var(--transition);

}


.phase-rail a::after {

    content:
        '';

    width:
        20px;

    height:
        2px;

    border-radius:
        2px;

    background:
        rgba(148, 163, 184, 0.32);

    transition:
        var(--transition);

}


/* El nombre solo aparece al señalarlo: dejarlo fijo en la
   fase activa lo montaba sobre el contenido en laptops,
   donde el margen lateral es de apenas 40px. La fase
   activa ya queda marcada por la barra en degradado. */

.phase-rail a:hover span,
.phase-rail a:focus-visible span {

    opacity:
        1;

    transform:
        none;

}


.phase-rail a.is-active {

    color:
        var(--white);

}


.phase-rail a.is-active::after {

    width:
        42px;

    background:
        linear-gradient(
            90deg,
            var(--teal-light),
            var(--coral)
        );

}


/* Sobre la sección crema el indicador se invierte */

body.on-light .phase-rail a {

    color:
        #8A9AA8;

}


body.on-light .phase-rail a.is-active {

    color:
        var(--navy-deep);

}


body.on-light .phase-rail a::after {

    background:
        rgba(15, 35, 55, 0.28);

}


@media (max-width: 900px) {

    .phase-rail {

        display:
            none;

    }

}


/* =====================================================
   COSTURAS ENTRE SECCIONES

   Cada corte entre bloques es un lienzo que derrite un
   color de sección en el siguiente. El alto mayor se
   reserva para los saltos oscuro ↔ crema.
   ===================================================== */

.seam {

    position:
        relative;

    height:
        clamp(72px, 9vh, 118px);

    overflow:
        hidden;

    line-height:
        0;

}


.seam--tall {

    height:
        clamp(112px, 15vh, 190px);

}


.seam canvas {

    display:
        block;

    width:
        100%;

    height:
        100%;

}


.section-container {

    position:
        relative;

    max-width:
        1280px;

    margin:
        auto;

}


.section-label {

    display:
        inline-block;

    color:
        var(--teal-light);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        2px;

    margin-bottom:
        clamp(10px, 2vh, 18px);

}


.services-head h2,
.solutions h2,
.about h2,
.cta h2 {

    font-size:
        clamp(2.2rem, min(4.2vw, 7.4vh), 4.6rem);

    line-height:
        0.95;

    letter-spacing:
        -3px;

}


.services-head h2 span {

    color:
        var(--coral);

}


/* =====================================================
   CANVAS DEL LOGO
   ===================================================== */

.hero-canvas {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        5;

    opacity:
        0;

    transition:
        opacity 1.1s ease;

}


.hero-visual.is-ready .hero-canvas {

    opacity:
        1;

}


.hero-logo-fallback {

    display:
        none;

}


.hero-visual--fallback .hero-logo-fallback {

    display:
        block;

    position:
        relative;

    z-index:
        4;

    width:
        min(60%, 290px);

}


/* =====================================================
   CARRUSEL 3D
   ===================================================== */

.carousel {

    --card-width:
        clamp(190px, min(25vw, 30vh), 380px);

    --card-height:
        clamp(250px, min(34vw, 40vh), 500px);

    position:
        relative;

    width:
        100%;

    max-width:
        1280px;

    margin:
        0 auto;

    outline:
        none;

}


.carousel-stage {

    position:
        relative;

    height:
        var(--card-height);

    perspective:
        1700px;

    transform-style:
        preserve-3d;

    touch-action:
        pan-y;

    cursor:
        grab;

}


.carousel.is-dragging .carousel-stage {

    cursor:
        grabbing;

}


/* TARJETA */

.c-card {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        var(--card-width);

    height:
        var(--card-height);

    overflow:
        hidden;

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

    border-radius:
        26px;

    background:
        var(--navy);

    box-shadow:
        0 38px 88px rgba(0, 0, 0, 0.55);

    transform-style:
        preserve-3d;

    will-change:
        transform, opacity;

    cursor:
        pointer;

    outline:
        none;

    transition:
        box-shadow 0.45s ease,
        border-color 0.45s ease;

}


.c-card.is-active {

    border-color:
        rgba(89, 212, 208, 0.40);

    box-shadow:
        0 50px 110px rgba(0, 0, 0, 0.62),
        0 0 76px rgba(45, 138, 138, 0.24);

}


.c-card:focus-visible {

    outline:
        2px solid var(--teal-light);

    outline-offset:
        4px;

}


/* VISUAL GENERATIVO */

.c-card-visual {

    position:
        absolute;

    inset:
        0;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

}


.c-card-visual canvas {

    display:
        block;

    width:
        100%;

    height:
        100%;

}


.c-card.is-active:hover .c-card-visual {

    transform:
        scale(1.07);

}


/* CONTENIDO */

.c-card-body {

    position:
        absolute;

    inset:
        auto 0 0 0;

    padding:
        clamp(26px, 6vh, 58px) 22px 22px;

    background:
        linear-gradient(
            to top,
            rgba(5, 11, 20, 0.98) 46%,
            rgba(5, 11, 20, 0.90) 68%,
            rgba(5, 11, 20, 0.55) 84%,
            rgba(5, 11, 20, 0)
        );

}


.c-card-number {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--teal-light);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        2.5px;

}


/* Ligado también al ancho de la tarjeta: en tarjetas angostas
   palabras largas como "Automatización" se salían del borde. */

.c-card h3 {

    font-size:
        min(
            clamp(1.25rem, 1.9vw, 1.65rem),
            calc((var(--card-width) - 44px) / 7.4)
        );

    line-height:
        1.12;

    letter-spacing:
        -0.5px;

}


.c-card-body p {

    max-height:
        0;

    margin:
        0;

    opacity:
        0;

    overflow:
        hidden;

    color:
        var(--gray);

    font-size:
        0.87rem;

    line-height:
        1.62;

    transition:
        max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        margin 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.4s ease;

}


.c-card.is-active .c-card-body p {

    max-height:
        140px;

    margin:
        12px 0 18px;

    opacity:
        1;

}


.c-card-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    opacity:
        0;

    transform:
        translateY(10px);

    color:
        var(--teal-light);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        1.4px;

    transition:
        opacity 0.45s ease 0.12s,
        transform 0.45s ease 0.12s;

}


.c-card.is-active .c-card-cta {

    opacity:
        1;

    transform:
        none;

}


.c-card.is-active:hover .c-card-cta span {

    transform:
        translateX(5px);

}


.c-card-cta span {

    transition:
        transform 0.35s ease;

}


/* FLECHAS */

.carousel-arrow {

    position:
        absolute;

    top:
        50%;

    z-index:
        300;

    width:
        56px;

    height:
        56px;

    display:
        grid;

    place-items:
        center;

    transform:
        translateY(-50%);

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

    border-radius:
        50%;

    background:
        rgba(9, 19, 32, 0.74);

    backdrop-filter:
        blur(14px);

    color:
        var(--white);

    font-size:
        1.05rem;

    cursor:
        pointer;

    transition:
        var(--transition);

}


.carousel-arrow:hover {

    background:
        var(--teal);

    border-color:
        transparent;

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

}


/* Se colocan justo por fuera del abanico de tarjetas,
   no en el borde del contenedor. */

.carousel-arrow--prev {

    left:
        max(0px, calc(50% - var(--card-width) * 1.85));

}


.carousel-arrow--next {

    right:
        max(0px, calc(50% - var(--card-width) * 1.85));

}


/* PUNTOS */

.carousel-dots {

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        clamp(14px, 3vh, 38px);

}


.carousel-dots button {

    width:
        30px;

    height:
        4px;

    padding:
        0;

    border:
        0;

    border-radius:
        4px;

    background:
        rgba(148, 163, 184, 0.22);

    cursor:
        pointer;

    transition:
        var(--transition);

}


.carousel-dots button.is-active {

    width:
        54px;

    background:
        var(--teal-light);

}


.carousel-hint {

    margin-top:
        clamp(8px, 1.6vh, 20px);

    text-align:
        center;

    color:
        var(--gray-dark);

    font-size:
        0.68rem;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;

}


/* =====================================================
   DETALLE A PANTALLA COMPLETA
   ===================================================== */

body.has-modal {

    overflow:
        hidden;

}


.service-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        1200;

    clip-path:
        inset(
            var(--origin-top, 40%)
            var(--origin-right, 40%)
            var(--origin-bottom, 40%)
            var(--origin-left, 40%)
            round 26px
        );

    transition:
        clip-path 0.82s cubic-bezier(0.76, 0, 0.24, 1);

}


.service-modal[hidden] {

    display:
        none;

}


.service-modal.is-open {

    clip-path:
        inset(0 0 0 0 round 0);

}


.service-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(3, 8, 15, 0.94);

}


.service-modal-panel {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    overflow:
        hidden;

    background:
        var(--navy-deep);

}


/* VISUAL CON REVELADO */

.service-modal-visual {

    position:
        relative;

    overflow:
        hidden;

}


.service-modal-visual canvas {

    display:
        block;

    width:
        100%;

    height:
        100%;

    transform:
        scale(1.14);

    transition:
        transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;

}


.service-modal.is-open .service-modal-visual canvas {

    transform:
        scale(1);

}


.service-modal-veil {

    position:
        absolute;

    inset:
        0;

    background:
        var(--navy-deep);

    transform:
        scaleX(1);

    transform-origin:
        right center;

    transition:
        transform 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.22s;

}


.service-modal.is-open .service-modal-veil {

    transform:
        scaleX(0);

}


/* Sello de marca sobre el dibujo: main.js lo repinta en
   blanco con relleno menta, legible en navy y en teal. */

.service-modal-logo {

    position:
        absolute;

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

    left:
        clamp(24px, 3vw, 40px);

    z-index:
        2;

    width:
        auto;

    height:
        clamp(42px, 7.5vh, 64px);

    opacity:
        0;

    filter:
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));

    transition:
        opacity 0.6s ease;

    pointer-events:
        none;

}


.service-modal.is-open .service-modal-logo.is-painted {

    opacity:
        1;

    transition-delay:
        0.7s;

}


/* CONTENIDO */

.service-modal-content {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    /* "safe" evita que el contenido más alto que el panel
       quede recortado por arriba y sin poder scrollear. */

    justify-content:
        center;

    justify-content:
        safe center;

    padding:
        clamp(38px, 5.5vw, 86px);

    padding-top:
        max(clamp(38px, 5.5vw, 86px), 96px);

    overflow-y:
        auto;

}


.service-modal-content > * {

    opacity:
        0;

    transform:
        translateY(26px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);

}


.service-modal.is-open .service-modal-content > * {

    opacity:
        1;

    transform:
        none;

}


.service-modal.is-open .service-modal-content > *:nth-child(1) {
    transition-delay: 0.34s;
}

.service-modal.is-open .service-modal-content > *:nth-child(2) {
    transition-delay: 0.42s;
}

.service-modal.is-open .service-modal-content > *:nth-child(3) {
    transition-delay: 0.50s;
}

.service-modal.is-open .service-modal-content > *:nth-child(4) {
    transition-delay: 0.58s;
}


.service-modal.is-swapping .service-modal-content > * {

    opacity:
        0;

    transform:
        translateY(14px);

    transition-duration:
        0.22s;

    transition-delay:
        0s;

}


.service-modal-content .button-coral {

    align-self:
        flex-start;

    margin-top:
        36px;

    transform:
        none;

    transition:
        opacity 0.6s ease 0.64s,
        background 0.35s ease,
        box-shadow 0.35s ease;

}


.service-modal.is-open .service-modal-content .button-coral {

    transform:
        none;

}


.service-modal-number {

    color:
        var(--teal-light);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.service-modal-panel h2 {

    margin:
        16px 0 20px;

    font-size:
        clamp(2.1rem, 3.8vw, 3.5rem);

    line-height:
        0.98;

    letter-spacing:
        -2px;

}


.service-modal-lead {

    max-width:
        46ch;

    color:
        var(--white);

    font-size:
        clamp(1rem, 1.25vw, 1.16rem);

    line-height:
        1.62;

}


.service-modal-detail {

    max-width:
        66ch;

    margin-top:
        24px;

}


.service-modal-detail p {

    max-width:
        50ch;

    color:
        var(--gray);

    line-height:
        1.8;

}


/* Dos columnas: los planes traen hasta diez puntos y en una
   sola columna no caben en una pantalla de laptop. */

.service-modal-detail ul {

    display:
        grid;

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

    gap:
        12px 28px;

    margin-top:
        22px;

    list-style:
        none;

}


@media (max-width: 800px) {

    .service-modal-detail ul {

        grid-template-columns:
            1fr;

    }

}


.service-modal-detail li {

    position:
        relative;

    padding-left:
        26px;

    color:
        var(--gray);

    font-size:
        0.92rem;

    line-height:
        1.5;

}


.service-modal-detail li::before {

    content:
        '';

    position:
        absolute;

    top:
        0.42em;

    left:
        0;

    width:
        10px;

    height:
        10px;

    border-radius:
        3px;

    background:
        linear-gradient(
            135deg,
            var(--teal-light),
            var(--teal)
        );

}


/* Variante ancha para las líneas de servicio: el texto es
   largo, así que la columna de contenido gana espacio. */

.service-modal.is-wide .service-modal-panel {

    grid-template-columns:
        0.72fr 1.28fr;

}


.service-modal.is-wide .service-modal-panel h2 {

    font-size:
        clamp(1.9rem, 2.9vw, 2.9rem);

}


.service-modal.is-wide .service-modal-lead {

    max-width:
        64ch;

}


.service-modal.is-wide .service-modal-detail ul {

    gap:
        9px 28px;

}


.service-modal.is-wide .service-modal-detail {

    max-width:
        86ch;

}


.detail-note {

    margin-top:
        26px;

    padding:
        16px 20px;

    border-left:
        3px solid var(--teal-light);

    border-radius:
        0 14px 14px 0;

    background:
        rgba(89, 212, 208, 0.07);

}


.detail-note strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--teal-light);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;

}


.service-modal-detail .detail-note p {

    max-width:
        none;

    color:
        rgba(248, 250, 252, 0.82);

    font-size:
        0.92rem;

    line-height:
        1.7;

}


@media (max-width: 800px) {

    .service-modal.is-wide .service-modal-panel {

        grid-template-columns:
            1fr;

    }

}


/* CONTROLES DEL DETALLE */

.service-modal-close {

    position:
        absolute;

    top:
        26px;

    right:
        28px;

    z-index:
        5;

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        rgba(9, 19, 32, 0.74);

    backdrop-filter:
        blur(12px);

    color:
        var(--white);

    font-size:
        1.7rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        var(--transition);

}


.service-modal-close:hover {

    background:
        var(--coral);

    border-color:
        transparent;

}


/* Sobre el dibujo y no sobre el texto: en la columna de
   contenido tapaba las últimas líneas de la lista. */

.service-modal-nav {

    position:
        absolute;

    left:
        clamp(24px, 3vw, 40px);

    bottom:
        28px;

    z-index:
        5;

    display:
        flex;

    gap:
        10px;

}


.service-modal-nav button {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        rgba(9, 19, 32, 0.74);

    backdrop-filter:
        blur(12px);

    color:
        var(--white);

    cursor:
        pointer;

    transition:
        var(--transition);

}


.service-modal-nav button:hover {

    background:
        var(--teal);

    border-color:
        transparent;

}


/* =====================================================
   DETALLE EN PALETA TEAL

   Las líneas de servicio se abren desde la fase Soluciones:
   el detalle conserva su teal, el turquesa de acento y el
   blanco, sin el navy ni el coral del detalle de planes.
   ===================================================== */

.service-modal.is-teal .service-modal-backdrop {

    background:
        rgba(4, 50, 53, 0.94);

}


.service-modal.is-teal .service-modal-panel {

    background:
        linear-gradient(165deg, #0E7879 0%, #0B6769 45%, #08575A 100%);

}


.service-modal.is-teal .service-modal-veil {

    background:
        #0B6769;

}


.service-modal.is-teal .service-modal-content {

    scrollbar-color:
        rgba(47, 227, 200, 0.45) transparent;

}


.service-modal.is-teal .service-modal-number,
.service-modal.is-teal .detail-note strong {

    color:
        #2FE3C8;

}


.service-modal.is-teal .service-modal-lead {

    color:
        rgba(255, 255, 255, 0.94);

}


.service-modal.is-teal .service-modal-detail li {

    color:
        rgba(255, 255, 255, 0.86);

}


.service-modal.is-teal .service-modal-detail li::before {

    background:
        linear-gradient(135deg, #2FE3C8, rgba(255, 255, 255, 0.85));

}


.service-modal.is-teal .detail-note {

    border-left-color:
        #2FE3C8;

    background:
        rgba(4, 50, 53, 0.4);

}


.service-modal.is-teal .service-modal-detail .detail-note p {

    color:
        rgba(255, 255, 255, 0.9);

}


.service-modal.is-teal .service-modal-content .button-coral {

    background:
        #2FE3C8;

    color:
        #06393C;

    box-shadow:
        0 18px 46px rgba(4, 50, 53, 0.45);

}


.service-modal.is-teal .service-modal-content .button-coral:hover {

    background:
        var(--white);

    box-shadow:
        0 24px 60px rgba(4, 50, 53, 0.55);

}


.service-modal.is-teal .service-modal-close,
.service-modal.is-teal .service-modal-nav button {

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

    background:
        rgba(4, 50, 53, 0.55);

}


.service-modal.is-teal .service-modal-close:hover,
.service-modal.is-teal .service-modal-nav button:hover {

    border-color:
        transparent;

    background:
        #2FE3C8;

    color:
        #06393C;

}


/* =====================================================
   SOLUTIONS
   ===================================================== */

.solutions {

    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        #0B6769;

}


.solutions-background {

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(5,11,20,0.78),
            rgba(5,11,20,0.92)
        ),

        url("../assets/images/fondo-navy-lineas.png");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        0.85;

}


.solutions-canvas {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    opacity:
        0.92;

}


.solutions-container {

    z-index:
        2;

    width:
        100%;

    max-width:
        1280px;

    margin:
        0 auto;

    padding:
        clamp(80px, 12vh, 112px) 32px clamp(32px, 5vh, 70px);

}


.solutions h2 {

    max-width:
        620px;

}


.solutions-lead {

    justify-self:
        end;

    max-width:
        470px;

    color:
        rgba(255, 255, 255, 0.84);

    font-size:
        clamp(0.96rem, 1.9vh, 1.08rem);

    line-height:
        1.7;

}


.solutions-head {

    display:
        grid;

    grid-template-columns:
        1.1fr 0.9fr;

    align-items:
        end;

    gap:
        clamp(24px, 4vw, 70px);

    margin-bottom:
        clamp(18px, 3.4vh, 36px);

}


/* Soluciones sigue la pieza gráfica de AYOSPT: fondo teal,
   logo y texto en blanco, acentos en turquesa. */

.solutions .section-label {

    color:
        #2FE3C8;

}


.solutions h2 span {

    color:
        #2FE3C8;

}


.solutions-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(16px, 2.2vw, 30px);

}


/* main.js lo repinta en blanco; se oculta hasta entonces
   para no mostrar un instante el trazo navy original. */

.solutions-logo {

    flex:
        none;

    width:
        auto;

    height:
        clamp(74px, 15vh, 128px);

    opacity:
        0;

    transition:
        opacity 0.6s ease;

}


.solutions-logo.is-painted {

    opacity:
        1;

}


.solutions-aside {

    justify-self:
        end;

    max-width:
        470px;

}


.solutions-rule {

    display:
        block;

    width:
        56px;

    height:
        3px;

    margin-bottom:
        clamp(10px, 2vh, 16px);

    border-radius:
        3px;

    background:
        #2FE3C8;

}


/* =====================================================
   PANELES DE SOLUCIONES

   Comparten el ancho: el abierto crece y los demás
   quedan como franjas con el nombre en vertical. Se
   anima flex-grow (0 → 1), que sí interpola; pasar
   flex-basis a "auto" saltaría sin transición.
   ===================================================== */

.panels {

    --panel-closed:
        clamp(64px, 6.5vw, 96px);

    display:
        flex;

    gap:
        clamp(8px, 0.9vw, 12px);

    height:
        clamp(280px, 50vh, 520px);

}


.panel {

    position:
        relative;

    flex:
        0 0 var(--panel-closed);

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        #0A5557;

    cursor:
        pointer;

    outline:
        none;

    transition:
        flex-grow 0.85s cubic-bezier(0.65, 0, 0.35, 1),
        border-color 0.5s ease;

}


.panel.is-open {

    flex-grow:
        1;

    border-color:
        rgba(47, 227, 200, 0.6);

    cursor:
        default;

}


.panel:not(.is-open):hover {

    border-color:
        rgba(47, 227, 200, 0.4);

}


.panel:focus-visible {

    outline:
        2px solid var(--teal-light);

    outline-offset:
        3px;

}


/* El lienzo mide siempre lo que mide un panel abierto
   (main.js escribe --panel-open): al ensancharse no hay
   que redimensionarlo, solo se revela más dibujo. */

.panel-canvas {

    position:
        absolute;

    top:
        0;

    left:
        0;

    display:
        block;

    width:
        var(--panel-open, 900px);

    height:
        100%;

    opacity:
        0.65;

    transition:
        opacity 0.8s ease;

}


.panel.is-open .panel-canvas {

    opacity:
        1;

}


/* Velo inferior para que el texto se lea sobre el dibujo */

.panel::after {

    content:
        '';

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:
        linear-gradient(
            to top,
            rgba(4, 50, 53, 0.94) 0%,
            rgba(4, 50, 53, 0.52) 40%,
            rgba(4, 50, 53, 0) 72%
        );

}


.panel-number {

    color:
        #2FE3C8;

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        2.2px;

}


/* Cerrado: número arriba, nombre en vertical abajo */

.panel-closed {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        22px 0;

    transition:
        opacity 0.35s ease 0.35s;

}


.panel.is-open .panel-closed {

    opacity:
        0;

    pointer-events:
        none;

    transition-delay:
        0s;

}


.panel-name {

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    color:
        var(--white);

    font-size:
        clamp(0.86rem, 1.1vw, 1.02rem);

    font-weight:
        800;

    letter-spacing:
        2.4px;

    text-transform:
        uppercase;

}


/* Abierto: el bloque de texto tiene el ancho final desde
   el principio, así no se reacomoda mientras el panel crece */

.panel-open {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    z-index:
        2;

    width:
        var(--panel-open, 900px);

    padding:
        clamp(22px, 4vh, 40px) clamp(22px, 3vw, 42px);

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity 0.3s ease,
        transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

}


.panel.is-open .panel-open {

    opacity:
        1;

    transform:
        none;

    transition-delay:
        0.34s;

}


.panel-open h3 {

    margin:
        8px 0 10px;

    color:
        var(--white);

    font-size:
        clamp(1.8rem, min(3.4vw, 6vh), 3.2rem);

    line-height:
        0.95;

    letter-spacing:
        -1.5px;

}


.panel-open p {

    max-width:
        42ch;

    color:
        rgba(255, 255, 255, 0.86);

    font-size:
        clamp(0.95rem, 1.9vh, 1.08rem);

    line-height:
        1.6;

}


.panel-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        14px;

    color:
        #2FE3C8;

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


.panel-cta span {

    transition:
        transform 0.35s ease;

}


.panel.is-open:hover .panel-cta span {

    transform:
        translateX(5px);

}


/* Número gigante en contorno, esquina superior */

.panel-ghost {

    position:
        absolute;

    top:
        clamp(12px, 3vh, 26px);

    right:
        clamp(18px, 2.4vw, 34px);

    z-index:
        2;

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(255, 255, 255, 0.34);

    font-size:
        clamp(4rem, min(9vw, 16vh), 9rem);

    font-weight:
        900;

    line-height:
        0.8;

    letter-spacing:
        -4px;

    opacity:
        0;

    transform:
        translateY(-14px);

    transition:
        opacity 0.4s ease,
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);

}


.panel.is-open .panel-ghost {

    opacity:
        1;

    transform:
        none;

    transition-delay:
        0.3s;

}


/* Se llena mientras el ciclo automático espera para abrir
   el siguiente panel */

.panel-progress {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    z-index:
        3;

    width:
        0;

    height:
        3px;

    background:
        linear-gradient(90deg, #2FE3C8, #FFFFFF);

}


.panels.is-cycling .panel.is-open .panel-progress {

    animation:
        panelFill var(--panel-cycle, 5200ms) linear forwards;

}


@keyframes panelFill {

    to { width: 100%; }

}


/* En pantallas angostas los paneles se apilan como acordeón */

@media (max-width: 800px) {

    .solutions-head {

        grid-template-columns:
            1fr;

        align-items:
            start;

    }

    .solutions-lead {

        justify-self:
            start;

    }

    .solutions-aside {

        justify-self:
            start;

    }

    .solutions-logo {

        height:
            64px;

    }

    .panels {

        flex-direction:
            column;

        height:
            auto;

    }

    .panel {

        flex:
            0 0 auto;

        height:
            64px;

        transition:
            height 0.7s cubic-bezier(0.65, 0, 0.35, 1),
            border-color 0.5s ease;

    }

    .panel.is-open {

        height:
            300px;

    }

    .panel-canvas,
    .panel-open {

        width:
            100%;

    }

    /* Apilados, los paneles crecen de alto (64 → 300px): el
       lienzo arranca con el alto abierto para no estirarse
       mientras el panel se despliega. */

    .panel-canvas {

        height:
            300px;

    }

    .panel-closed {

        flex-direction:
            row;

        justify-content:
            flex-start;

        gap:
            16px;

        padding:
            0 22px;

    }

    .panel-name {

        writing-mode:
            horizontal-tb;

        transform:
            none;

    }

}


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

    .panel {

        transition:
            none;

    }

    .panels.is-cycling .panel.is-open .panel-progress {

        animation:
            none;

    }

}


/* =====================================================
   ABOUT
   ===================================================== */

.about {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        100vh;

    /* Margen derecho mayor: el riel de fases se montaba
       sobre el final de los párrafos en laptops. */

    padding:
        clamp(76px, 11vh, 110px) clamp(32px, 6vw, 96px) clamp(36px, 6vh, 90px) 32px;

    background:
        #F9F2E6;

    color:
        var(--navy-deep);

    overflow:
        hidden;

}


.about-canvas {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

}


.about-container {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    align-items:
        center;

    gap:
        clamp(40px, 5vw, 76px);

}


/* TARJETA DE MARCA */

.about-visual {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}




/* La marca se dibuja directamente sobre el crema: sin
   tarjeta ni soporte, solo el efecto. */

.about-stage {

    position:
        relative;

    z-index:
        2;

    width:
        min(100%, 400px, 50vh);

    aspect-ratio:
        1 / 1;

}


.about-stage canvas {

    display:
        block;

    width:
        100%;

    height:
        100%;

}


.about-tagline {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    justify-items:
        center;

    margin-top:
        4px;

    text-align:
        center;

}


.about-tagline-rule {

    width:
        46px;

    height:
        3px;

    margin-bottom:
        16px;

    border-radius:
        3px;

    background:
        var(--teal);

}


.about-tagline p {

    color:
        #33475B;

    font-size:
        1.02rem;

    font-weight:
        600;

    line-height:
        1.5;

}


.about-tagline strong {

    color:
        var(--teal);

    font-weight:
        800;

}


/* CONTENIDO */

.about-content {

    max-width:
        640px;

}


.about-content .section-label {

    color:
        var(--teal);

}


.about-content h2 {

    margin-bottom:
        clamp(10px, 2vh, 18px);

}


.about-content > p {

    color:
        #5A6B7F;

    line-height:
        1.8;

    font-size:
        1rem;

    margin-bottom:
        clamp(14px, 2.6vh, 26px);

}


.about-points {

    display:
        grid;

    gap:
        clamp(8px, 1.6vh, 15px);

    margin-bottom:
        clamp(16px, 3vh, 30px);

    list-style:
        none;

}


.about-points li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    padding-bottom:
        clamp(8px, 1.6vh, 15px);

    border-bottom:
        1px solid rgba(15, 35, 55, 0.08);

}


.about-points li:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;

}


.about-point-index {

    flex:
        none;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(45, 138, 138, 0.10);

    color:
        var(--teal);

    font-size:
        0.66rem;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.about-points strong {

    display:
        block;

    color:
        var(--navy-deep);

    font-size:
        0.98rem;

}


.about-points small {

    display:
        block;

    margin-top:
        5px;

    color:
        #6B7C8F;

    font-size:
        0.86rem;

    line-height:
        1.6;

}


.about-content .button-primary {

    background:
        var(--navy-deep);

    color:
        white;

}


.about-content .button-primary:hover {

    background:
        var(--teal);

    color:
        white;

    box-shadow:
        0 16px 34px rgba(45, 138, 138, 0.28);

}


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

.cta {

    position:
        relative;

    min-height:
        min(780px, 100vh);

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        #07101C;

    text-align:
        center;

}


.cta-canvas {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

}


.cta-aurora {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(110px);

    mix-blend-mode:
        screen;

    pointer-events:
        none;

}


.cta-aurora--one {

    width:
        620px;

    height:
        620px;

    top:
        -14%;

    left:
        -8%;

    background:
        rgba(45, 138, 138, 0.30);

    animation:
        auroraOne 17s ease-in-out infinite;

}


.cta-aurora--two {

    width:
        520px;

    height:
        520px;

    right:
        -6%;

    bottom:
        -18%;

    background:
        rgba(249, 115, 22, 0.20);

    animation:
        auroraTwo 21s ease-in-out infinite;

}


@keyframes auroraOne {

    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(90px, 60px) scale(1.16); }

}


@keyframes auroraTwo {

    0%, 100% { transform: translate(0, 0) scale(1.08); }
    50%      { transform: translate(-80px, -50px) scale(1); }

}


/* Oscurece el centro para que el texto respire sobre
   las partículas. */

.cta-veil {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(4, 10, 19, 0.88) 0%,
            rgba(4, 10, 19, 0.62) 42%,
            rgba(4, 10, 19, 0) 72%
        );

}


.cta-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        880px;

    padding:
        clamp(40px, 6vh, 76px) 32px;

}


/* Marca en el punto al que convergen las partículas: logo
   en blanco con halo y ondas teal/coral que salen de él. */

.cta-brand {

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        clamp(84px, 16vh, 136px);

    height:
        clamp(84px, 16vh, 136px);

    margin:
        0 auto clamp(10px, 2vh, 18px);

}


.cta-brand::before {

    content:
        '';

    position:
        absolute;

    inset:
        -30%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(89, 212, 208, 0.26) 0%,
            rgba(89, 212, 208, 0.08) 45%,
            rgba(89, 212, 208, 0) 70%
        );

    animation:
        ctaGlow 4.8s ease-in-out infinite;

}


.cta-brand-ring {

    position:
        absolute;

    inset:
        0;

    border:
        1px solid rgba(89, 212, 208, 0.6);

    border-radius:
        50%;

    opacity:
        0;

    animation:
        ctaRing 4.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;

}


.cta-brand-ring--late {

    border-color:
        rgba(249, 115, 22, 0.55);

    animation-delay:
        2.1s;

}


.cta-logo {

    position:
        relative;

    width:
        auto;

    height:
        62%;

    opacity:
        0;

    filter:
        drop-shadow(0 0 16px rgba(89, 212, 208, 0.45));

    transition:
        opacity 0.6s ease;

    animation:
        ctaFloat 6s ease-in-out infinite;

}


.cta-logo.is-painted {

    opacity:
        1;

}


@keyframes ctaRing {

    0%   { transform: scale(0.55); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: scale(1.75); opacity: 0; }

}


@keyframes ctaGlow {

    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.12); opacity: 1; }

}


@keyframes ctaFloat {

    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }

}


.cta h2 {

    font-size:
        clamp(2.4rem, min(5vw, 8.2vh), 5.4rem);

    text-shadow:
        0 18px 60px rgba(0, 0, 0, 0.5);

}


.cta h2 span {

    color:
        var(--coral);

}


.cta p {

    max-width:
        540px;

    margin:
        clamp(14px, 2.6vh, 26px) auto clamp(20px, 4vh, 42px);

    color:
        var(--gray);

    font-size:
        1.06rem;

    line-height:
        1.8;

}


.cta-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

}


.cta-footnote {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        clamp(18px, 3.4vh, 30px);

    color:
        var(--gray-dark);

    font-size:
        0.72rem;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;

}


.button-coral {

    position:
        relative;

    overflow:
        hidden;

    padding:
        18px 34px;

    background:
        linear-gradient(
            120deg,
            var(--coral),
            #FB8A3C
        );

    color:
        white;

    font-size:
        1rem;

    box-shadow:
        0 18px 46px rgba(249, 115, 22, 0.30);

}


.button-coral:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 24px 60px rgba(249, 115, 22, 0.42);

}


.button-shine::after {

    content:
        '';

    position:
        absolute;

    top:
        0;

    left:
        -60%;

    width:
        40%;

    height:
        100%;

    pointer-events:
        none;

    transform:
        skewX(-18deg);

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, 0.42),
            transparent
        );

    animation:
        buttonShine 4.4s ease-in-out infinite;

}


@keyframes buttonShine {

    0%, 62% { left: -60%; }
    100%    { left: 130%; }

}


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

    .cta-aurora,
    .cta-brand::before,
    .cta-brand-ring,
    .cta-logo,
    .button-shine::after {

        animation:
            none;

    }

}


/* =====================================================
   WHATSAPP FLOTANTE
   ===================================================== */

.whatsapp-float {

    position:
        fixed;

    right:
        clamp(16px, 2.2vw, 30px);

    /* Netlify agrega su propio sello "Powered by Netlify"
       fijo en esta esquina en el plan gratuito: se sube el
       botón para que no quede tapado ni se monten. */

    bottom:
        clamp(74px, 11vh, 94px);

    z-index:
        1100;

    display:
        grid;

    place-items:
        center;

    width:
        58px;

    height:
        58px;

    border-radius:
        50%;

    background:
        #25D366;

    color:
        white;

    box-shadow:
        0 14px 32px rgba(37, 211, 102, 0.34),
        0 4px 14px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.35s ease;

}


.whatsapp-float::before {

    content:
        '';

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;

    border:
        2px solid rgba(37, 211, 102, 0.55);

    animation:
        whatsappPulse 2.8s ease-out infinite;

    pointer-events:
        none;

}


.whatsapp-float svg {

    width:
        30px;

    height:
        30px;

    fill:
        currentColor;

}


.whatsapp-float:hover,
.whatsapp-float:focus-visible {

    transform:
        translateY(-3px) scale(1.05);

    box-shadow:
        0 20px 40px rgba(37, 211, 102, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.3);

}


@keyframes whatsappPulse {

    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; }

}


@media (max-width: 600px) {

    .whatsapp-float {

        width:
            52px;

        height:
            52px;

    }


    .whatsapp-float svg {

        width:
            27px;

        height:
            27px;

    }

}


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

    .whatsapp-float::before {

        animation:
            none;

        opacity:
            0;

    }

}


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

footer {

    padding:
        30px 32px;

    background:
        #040912;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.footer-brand img {

    width:
        100px;

    height:
        48px;

    object-fit:
        contain;

}


.footer-brand span,
.footer-copy {

    color:
        var(--gray-dark);

    font-size:
        0.72rem;

}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

}


.footer-links a {

    color:
        var(--gray);

    font-size:
        0.74rem;

    font-weight:
        600;

    transition:
        color 0.35s ease;

}


.footer-links a:hover {

    color:
        var(--teal-light);

}


/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes cardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-13px);

    }

}


@keyframes corePulse {

    0%,
    100% {

        transform:
            scale(0.95);

        opacity:
            0.7;

    }

    50% {

        transform:
            scale(1.08);

        opacity:
            1;

    }

}


@keyframes orbitSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes orbitSpinReverse {

    from {

        transform:
            rotate(360deg)
            rotateX(65deg);

    }

    to {

        transform:
            rotate(0deg)
            rotateX(65deg);

    }

}


@keyframes shine {

    0% {

        transform:
            rotate(35deg)
            translateX(-320px);

    }

    35%,
    100% {

        transform:
            rotate(35deg)
            translateX(320px);

    }

}


@keyframes scrollDot {

    0% {

        opacity:
            0;

        transform:
            translate(-50%, 0);

    }

    30% {

        opacity:
            1;

    }

    100% {

        opacity:
            0;

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

    }

}


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

@media (max-width: 1050px) {

    .hero-container {

        grid-template-columns:
            1fr;

    }


    .hero-content {

        max-width:
            760px;

    }


    .hero-visual {

        min-height:
            520px;

    }


    .carousel-arrow {

        width:
            48px;

        height:
            48px;

    }


    .about-container {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }

}


@media (max-width: 800px) {

    .nav-menu {

        display:
            none;

    }


    .hero {

        min-height:
            auto;

    }


    .hero-container {

        padding:
            120px 24px 90px;

    }


    .hero-title {

        font-size:
            clamp(3.2rem, 12vw, 5.2rem);

        letter-spacing:
            -4px;

    }


    .hero-visual {

        min-height:
            500px;

    }


    .carousel-arrow {

        display:
            none;

    }


    .service-modal-panel {

        grid-template-columns:
            1fr;

        grid-template-rows:
            32vh 1fr;

    }


    /* Apilado, el dibujo es la franja superior de 32vh:
       los controles van en su esquina inferior. */

    .service-modal-nav {

        top:
            calc(32vh - 66px);

        bottom:
            auto;

        left:
            auto;

        right:
            20px;

    }


    .floating-card-one {

        right:
            0;

    }


    .floating-card-two {

        left:
            0;

    }

}


@media (max-width: 600px) {

    .nav-container {

        padding:
            14px 20px;

    }


    .nav-button {

        padding:
            10px 15px;

        font-size:
            0.8rem;

    }


    .nav-actions {

        gap:
            8px;

    }


    .brand {

        width:
            105px;

    }


    .hero-container {

        padding:
            110px 20px 80px;

    }


    .hero-description {

        font-size:
            1rem;

    }


    .hero-stats {

        grid-template-columns:
            1fr;

        gap:
            0;

        margin-top:
            42px;

    }


    .stat small {

        max-width:
            none;

    }


    .hero-visual {

        min-height:
            430px;

    }


    .visual-core {

        transform:
            scale(0.78);

    }


    .orbit-one {

        width:
            350px;

        height:
            350px;

    }


    .orbit-two {

        width:
            430px;

        height:
            430px;

    }


    .orbit-three {

        width:
            480px;

        height:
            240px;

    }


    .floating-card {

        transform:
            scale(0.85);

    }


    .floating-card-one {

        right:
            -10px;

    }


    .floating-card-two {

        left:
            -10px;

    }


    .services {

        padding:
            90px 20px;

    }


    .carousel {

        --card-width:
            clamp(230px, 72vw, 300px);

        --card-height:
            clamp(330px, 104vw, 430px);

    }


    .services-head {

        margin-bottom:
            40px;

    }


    .solutions-container {

        padding:
            84px 20px 44px;

    }


    .about {

        padding:
            90px 20px;

    }


    .about-stage {

        width:
            min(100%, 330px);

    }


    .cta {

        min-height:
            560px;

    }


    footer {

        flex-direction:
            column;

        text-align:
            center;

    }


    .footer-brand {

        flex-direction:
            column;

    }

}