:root {
    color-scheme: dark;
    --background: #020107;
    --background-soft: #080313;
    --surface: rgba(13, 7, 25, 0.96);
    --surface-soft: rgba(27, 14, 50, 0.93);
    --text: #ffffff;
    --muted: #bdb5cc;
    --purple: #a34fff;
    --purple-strong: #7424e8;
    --purple-bright: #c27aff;
    --purple-soft: rgba(157, 77, 255, 0.18);
    --gold: #ffc34f;
    --green: #25d366;
    --green-strong: #18b854;
    --danger: #ff7e9a;
    --success: #6feaa1;
    --border: rgba(182, 125, 255, 0.3);
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
    --focus: 0 0 0 4px rgba(157, 77, 255, 0.3);
    --safe-bottom: max(20px, env(safe-area-inset-bottom));
    --safe-right: max(20px, env(safe-area-inset-right));
}

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

html {
    min-width: 320px;
    min-height: 100%;
    overflow-x: hidden;
    background: var(--background);
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-color: rgba(151, 74, 242, 0.65) #05020b;
    scrollbar-width: thin;
}

body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(91, 23, 164, 0.14), transparent 34%),
        radial-gradient(circle at 50% 88%, rgba(83, 25, 156, 0.11), transparent 34%),
        var(--background);
    color: var(--text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html.modal-open,
body.modal-open {
    overflow: hidden;
}

::selection {
    background: rgba(158, 72, 255, 0.42);
    color: #ffffff;
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

img,
svg {
    display: block;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2200;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
    color: #111111;
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-155%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ================================================================
   PRESENTACIÓN VERTICAL
   ================================================================ */

.landing {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    isolation: isolate;
}

.scene {
    --entry-x: 0px;
    --entry-y: 48px;
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    padding: max(22px, 3.2svh) max(18px, 3vw) max(88px, 10svh);
    place-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    isolation: isolate;
}

.scene::before,
.scene::after {
    position: absolute;
    right: 0;
    left: 0;
    z-index: -1;
    height: 18%;
    pointer-events: none;
    content: "";
}

.scene::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(2, 1, 7, 0.96), transparent);
}

.scene::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(2, 1, 7, 0.98), transparent);
}

.scene--automation {
    --entry-y: 56px;
}

.scene--dashboard {
    --entry-x: 52px;
    --entry-y: 18px;
}

.scene--results {
    --entry-y: 58px;
}

.scene__ambient {
    position: absolute;
    inset: -10%;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.32;
    filter: blur(90px);
    transform: translateZ(0);
}

.ambient-orb--one {
    top: 14%;
    left: 12%;
    width: min(36vw, 620px);
    aspect-ratio: 1;
    background: rgba(109, 28, 208, 0.28);
}

.ambient-orb--two {
    right: 7%;
    bottom: 8%;
    width: min(42vw, 720px);
    aspect-ratio: 1;
    background: rgba(75, 25, 152, 0.24);
}

.scene--brand .ambient-orb--one {
    top: 5%;
    left: 37%;
    width: min(28vw, 470px);
    background: rgba(225, 150, 33, 0.14);
}

.scene--brand .ambient-orb--two {
    right: 24%;
    bottom: 18%;
    background: rgba(112, 32, 221, 0.2);
}

.scene--automation .ambient-orb--one {
    top: 18%;
    left: 26%;
    width: min(48vw, 780px);
}

.scene--dashboard .ambient-orb--one {
    top: 27%;
    left: -4%;
    background: rgba(126, 32, 231, 0.24);
}

.scene--dashboard .ambient-orb--two {
    right: -2%;
    bottom: 10%;
    background: rgba(78, 28, 179, 0.28);
}

.scene--results .ambient-orb--one {
    top: 3%;
    left: 27%;
    width: min(45vw, 720px);
}

.ambient-grid {
    position: absolute;
    inset: 0;
    opacity: 0.13;
    background-image:
        linear-gradient(rgba(145, 75, 224, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(145, 75, 224, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
}

.ambient-stars {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        radial-gradient(circle at 13% 22%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 18%, rgba(255, 199, 91, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 73% 78%, rgba(188, 112, 255, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.52) 0 1px, transparent 2px),
        radial-gradient(circle at 92% 53%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px);
}

.scene__stage {
    --parallax-x: 0px;
    --parallax-y: 0px;
    position: relative;
    z-index: 2;
    width: min(96vw, 153svh, 1672px);
    aspect-ratio: 1672 / 941;
    transform-origin: center;
    will-change: opacity, transform, filter;
}

.scene__picture,
.scene__effects {
    position: absolute;
    inset: 0;
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

.scene__picture {
    z-index: 1;
    line-height: 0;
}

.scene__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 28px 70px rgba(0, 0, 0, 0.42));
    user-select: none;
    -webkit-user-drag: none;
    transform: translateZ(0) scale(1);
    transform-origin: center;
}

.scene__effects {
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.motion-enabled .scene__stage {
    opacity: 0.08;
    filter: blur(5px) saturate(0.72) brightness(0.55);
    transform: translate3d(var(--entry-x), var(--entry-y), 0) scale(0.935);
    transition:
        opacity 520ms ease,
        filter 620ms ease,
        transform 700ms cubic-bezier(0.2, 0.76, 0.18, 1);
}

.motion-enabled .scene.is-before .scene__stage {
    opacity: 0.1;
    filter: blur(3px) saturate(0.75) brightness(0.6);
    transform: translate3d(0, -52px, 0) scale(0.955);
}

.motion-enabled .scene.is-after .scene__stage {
    opacity: 0.08;
    transform: translate3d(var(--entry-x), 58px, 0) scale(0.94);
}

.motion-enabled .scene.is-active .scene__stage {
    animation: scene-enter 980ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.motion-enabled .scene.is-active .scene__image {
    animation: image-breathe 9s ease-in-out 1.05s infinite;
}

/* ================================================================
   CAPAS DE LUZ Y RELIEVE
   ================================================================ */

.fx {
    position: absolute;
    display: block;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.scene.is-active .fx {
    opacity: 1;
}

.fx--brand-aura {
    top: 4%;
    left: 24%;
    width: 52%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(116, 47, 227, 0.16), transparent 67%);
    filter: blur(15px);
    animation: purple-breathe 5.8s ease-in-out infinite;
}

.fx--brand-crown {
    top: 3%;
    left: 35%;
    width: 30%;
    height: 34%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 188, 67, 0.34), rgba(255, 153, 31, 0.08) 43%, transparent 71%);
    filter: blur(9px);
    animation: gold-breathe 3.7s ease-in-out infinite;
}

.fx--brand-sweep {
    top: 29%;
    left: 7%;
    width: 86%;
    height: 34%;
    opacity: 0;
    background: linear-gradient(103deg, transparent 40%, rgba(255, 255, 255, 0.46) 49%, rgba(203, 139, 255, 0.25) 52%, transparent 61%);
    filter: blur(2px);
    transform: translateX(-125%) skewX(-12deg);
    animation: metallic-sweep 6.4s ease-in-out 1.4s infinite;
}

.fx--brand-ball {
    top: 34%;
    left: 72.5%;
    width: 9.4%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 72% 22%, rgba(222, 145, 255, 0.72), rgba(126, 41, 255, 0.16) 35%, transparent 68%);
    filter: blur(5px);
    animation: violet-flash 4.8s ease-in-out 1.2s infinite;
}

.fx--automation-title {
    top: 16%;
    left: 3%;
    width: 94%;
    height: 48%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(123, 42, 231, 0.2), transparent 67%);
    filter: blur(14px);
    animation: purple-breathe 5s ease-in-out infinite;
}

.fx--automation-sweep {
    top: 19%;
    left: 5%;
    width: 90%;
    height: 39%;
    opacity: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.36) 49%, rgba(190, 97, 255, 0.22) 52%, transparent 61%);
    filter: blur(2px);
    transform: translateX(-125%) skewX(-12deg);
    animation: metallic-sweep 6.8s ease-in-out 0.75s infinite;
}

.fx--automation-neon {
    top: 64.1%;
    left: 18.2%;
    width: 65.5%;
    height: 16.2%;
    border: 1px solid rgba(185, 89, 255, 0.52);
    border-radius: 18%;
    box-shadow:
        inset 0 0 19px rgba(143, 50, 255, 0.24),
        0 0 16px rgba(143, 50, 255, 0.24),
        0 0 37px rgba(109, 30, 240, 0.18);
    animation: neon-breathe 2.8s ease-in-out infinite;
}

.fx--automation-whatsapp {
    top: 65.1%;
    left: 74.7%;
    width: 7.6%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 255, 140, 0.42), rgba(37, 211, 102, 0.12) 48%, transparent 72%);
    filter: blur(3px);
    animation: whatsapp-breathe 2.2s ease-in-out infinite;
}

.fx--feature-one,
.fx--feature-two,
.fx--feature-three {
    left: 3.6%;
    width: 11.8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 105, 255, 0.32), rgba(117, 39, 244, 0.12) 48%, transparent 72%);
    filter: blur(4px);
    animation: feature-pulse 3.2s ease-in-out infinite;
}

.fx--feature-one {
    top: 19.1%;
    animation-delay: 0.1s;
}

.fx--feature-two {
    top: 40.2%;
    animation-delay: 0.55s;
}

.fx--feature-three {
    top: 61.4%;
    animation-delay: 1s;
}

.fx--dashboard-sheen {
    top: 18.5%;
    left: 35%;
    width: 58%;
    height: 52%;
    opacity: 0;
    background: linear-gradient(109deg, transparent 37%, rgba(199, 140, 255, 0.2) 49%, rgba(255, 255, 255, 0.14) 52%, transparent 63%);
    clip-path: polygon(15% 8%, 100% 0, 90% 85%, 4% 90%);
    transform: translateX(-135%);
    animation: dashboard-sweep 6.6s ease-in-out 1.2s infinite;
}

.fx--devices-glow {
    top: 62%;
    left: 27%;
    width: 69%;
    height: 28%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(116, 37, 230, 0.28), transparent 69%);
    filter: blur(18px);
    animation: device-breathe 4.6s ease-in-out infinite;
}

.fx--phone-pulse {
    top: 26%;
    left: 84%;
    width: 8.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(165, 93, 255, 0.36), transparent 68%);
    filter: blur(4px);
    animation: feature-pulse 3.1s ease-in-out 0.8s infinite;
}

.fx--results-top,
.fx--results-bottom {
    left: 11%;
    width: 78%;
    border: 1px solid rgba(190, 92, 255, 0.44);
    border-radius: 20%;
    box-shadow:
        inset 0 0 18px rgba(145, 45, 255, 0.18),
        0 0 17px rgba(145, 45, 255, 0.21),
        0 0 42px rgba(116, 31, 235, 0.14);
    animation: neon-breathe 3.1s ease-in-out infinite;
}

.fx--results-top {
    top: 12.4%;
    height: 23.4%;
}

.fx--results-bottom {
    top: 64.3%;
    height: 23.1%;
    animation-delay: 0.8s;
}

.fx--benefit-one,
.fx--benefit-two,
.fx--benefit-three,
.fx--benefit-four {
    top: 43%;
    width: 13%;
    height: 17%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(174, 84, 255, 0.24), transparent 70%);
    filter: blur(5px);
    animation: benefit-pop 4.2s ease-in-out infinite;
}

.fx--benefit-one {
    left: 3%;
    animation-delay: 0.1s;
}

.fx--benefit-two {
    left: 29%;
    animation-delay: 0.45s;
}

.fx--benefit-three {
    left: 51%;
    animation-delay: 0.8s;
}

.fx--benefit-four {
    left: 73%;
    animation-delay: 1.15s;
}

/* ================================================================
   NAVEGACIÓN ENTRE ESCENAS
   ================================================================ */

.scene-nav {
    position: fixed;
    top: 50%;
    right: max(16px, env(safe-area-inset-right));
    z-index: 520;
    display: grid;
    gap: 13px;
    transform: translateY(-50%);
}

.scene-nav__link {
    display: flex;
    min-height: 28px;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    color: #b7adc5;
    text-decoration: none;
}

.scene-nav__dot {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.scene-nav__label {
    padding: 5px 9px;
    border: 1px solid rgba(179, 116, 255, 0.13);
    border-radius: 8px;
    background: rgba(7, 4, 14, 0.72);
    font-size: 0.69rem;
    font-weight: 780;
    letter-spacing: 0.07em;
    opacity: 0;
    transform: translateX(7px);
    transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
    backdrop-filter: blur(9px);
}

.scene-nav__link:hover .scene-nav__label,
.scene-nav__link:focus-visible .scene-nav__label,
.scene-nav__link.is-active .scene-nav__label {
    opacity: 1;
    transform: translateX(0);
}

.scene-nav__link.is-active {
    color: #ffffff;
}

.scene-nav__link.is-active .scene-nav__dot {
    border-color: rgba(211, 154, 255, 0.95);
    background: var(--purple);
    box-shadow: 0 0 0 5px rgba(154, 69, 255, 0.14), 0 0 18px rgba(164, 80, 255, 0.76);
    transform: scale(1.22);
}

.scene-nav__link:focus-visible {
    outline: none;
}

.scene-nav__link:focus-visible .scene-nav__dot {
    box-shadow: var(--focus);
}

.scroll-cue,
.back-to-top {
    position: absolute;
    bottom: max(21px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 8;
    display: flex;
    gap: 4px;
    align-items: center;
    color: rgba(237, 229, 248, 0.72);
    font-size: 0.68rem;
    font-weight: 780;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: color 160ms ease, opacity 160ms ease;
}

.scroll-cue {
    flex-direction: column;
    animation: cue-bob 2.2s ease-in-out infinite;
}

.scroll-cue svg,
.back-to-top svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.scroll-cue:hover,
.back-to-top:hover {
    color: #ffffff;
}

.back-to-top {
    gap: 8px;
}

/* ================================================================
   BOTÓN DE CONTACTO IDENTIFICABLE
   ================================================================ */

.contact-widget {
    position: fixed;
    right: var(--safe-right);
    bottom: var(--safe-bottom);
    z-index: 700;
}

.contact-toggle {
    position: relative;
    display: flex;
    min-width: 286px;
    height: 72px;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 7px 7px 20px;
    overflow: hidden;
    border: 1px solid rgba(111, 234, 161, 0.34);
    border-radius: 999px;
    background:
        linear-gradient(115deg, rgba(12, 7, 23, 0.97), rgba(25, 10, 44, 0.96)),
        var(--surface);
    box-shadow:
        0 19px 44px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(167, 94, 255, 0.11),
        0 0 34px rgba(68, 196, 113, 0.1);
    color: #ffffff;
    cursor: pointer;
    transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
    backdrop-filter: blur(18px);
}

.contact-toggle::before {
    position: absolute;
    top: -70%;
    bottom: -70%;
    left: -42%;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    content: "";
    transform: skewX(-18deg);
    animation: contact-sheen 6.5s ease-in-out 2.1s infinite;
}

.contact-toggle:hover {
    border-color: rgba(111, 234, 161, 0.62);
    box-shadow:
        0 23px 52px rgba(0, 0, 0, 0.54),
        0 0 0 1px rgba(167, 94, 255, 0.18),
        0 0 42px rgba(37, 211, 102, 0.17);
    transform: translateY(-3px) scale(1.012);
}

.contact-toggle:active {
    transform: translateY(0) scale(0.985);
}

.contact-toggle__copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 3px;
    min-width: 0;
    text-align: left;
}

.contact-toggle__copy strong,
.contact-toggle__copy small {
    display: block;
    white-space: nowrap;
}

.contact-toggle__copy strong {
    font-size: 0.98rem;
    font-weight: 860;
    line-height: 1.12;
}

.contact-toggle__copy small {
    color: #a9e9c0;
    font-size: 0.73rem;
    font-weight: 680;
    line-height: 1.15;
}

.contact-toggle__icon-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    place-items: center;
    background: linear-gradient(145deg, #32df75, var(--green-strong));
    box-shadow:
        0 11px 24px rgba(4, 99, 43, 0.37),
        inset 0 1px 1px rgba(255, 255, 255, 0.32);
    transition: transform 190ms ease;
}

.contact-widget.is-open .contact-toggle__icon-wrap {
    transform: rotate(8deg) scale(0.96);
}

.contact-toggle__icon {
    position: relative;
    z-index: 2;
    width: 33px;
    height: 33px;
    fill: #ffffff;
}

.contact-toggle__pulse {
    position: absolute;
    inset: -2px;
    z-index: -1;
    border: 2px solid rgba(37, 211, 102, 0.72);
    border-radius: 50%;
    animation: contact-pulse 2.25s ease-out infinite;
}

.contact-toggle:focus-visible,
.contact-action:focus-visible,
.modal__close:focus-visible,
.submit-button:focus-visible,
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.scroll-cue:focus-visible,
.back-to-top:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.contact-actions {
    position: absolute;
    right: 0;
    bottom: calc(100% + 15px);
    display: grid;
    width: 304px;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: rgba(10, 5, 20, 0.97);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(13px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 180ms ease, transform 180ms ease;
    backdrop-filter: blur(19px);
}

.contact-actions::after {
    position: absolute;
    right: 25px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(10, 5, 20, 0.97);
    content: "";
    transform: rotate(45deg);
}

.contact-widget.is-open .contact-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.contact-actions__heading {
    margin: 2px 5px 3px;
    color: #ded4ea;
    font-size: 0.72rem;
    font-weight: 790;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-action {
    display: grid;
    width: 100%;
    min-height: 66px;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.contact-action:hover {
    transform: translateX(-2px);
}

.contact-action--whatsapp:hover {
    border-color: rgba(37, 211, 102, 0.35);
    background: rgba(37, 211, 102, 0.11);
}

.contact-action--form:hover {
    border-color: rgba(157, 77, 255, 0.38);
    background: rgba(157, 77, 255, 0.12);
}

.contact-action__icon {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    place-items: center;
}

.contact-action--whatsapp .contact-action__icon {
    background: rgba(37, 211, 102, 0.16);
    color: var(--green);
}

.contact-action--form .contact-action__icon {
    background: var(--purple-soft);
    color: #bd8aff;
}

.contact-action__icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.contact-action strong,
.contact-action small {
    display: block;
}

.contact-action strong {
    margin-bottom: 3px;
    font-size: 0.98rem;
    line-height: 1.15;
}

.contact-action small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.2;
}

/* ================================================================
   MODAL Y FORMULARIO
   ================================================================ */

.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    padding: 22px;
    place-items: center;
    opacity: 0;
    transition: opacity 180ms ease;
}

.modal.is-visible {
    opacity: 1;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.76);
    cursor: default;
    backdrop-filter: blur(9px);
}

.modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    max-height: calc(100svh - 44px);
    padding: 32px;
    overflow-y: auto;
    border: 1px solid rgba(181, 119, 255, 0.37);
    border-radius: 25px;
    background:
        linear-gradient(145deg, rgba(26, 13, 48, 0.98), rgba(7, 4, 15, 0.99)),
        var(--surface);
    box-shadow:
        0 36px 95px rgba(0, 0, 0, 0.66),
        0 0 45px rgba(116, 36, 232, 0.16);
    transform: translateY(16px) scale(0.98);
    transition: transform 180ms ease;
}

.modal.is-visible .modal__panel {
    transform: translateY(0) scale(1);
}

.modal__close {
    position: absolute;
    top: 17px;
    right: 17px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    place-items: center;
    background: rgba(255, 255, 255, 0.05);
    color: #d9d0e8;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.modal__close svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.modal__heading {
    padding-right: 44px;
}

.modal__eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: #c996ff;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.modal__heading h2 {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    line-height: 1.08;
}

.modal__heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.contact-form {
    display: grid;
    gap: 19px;
    margin-top: 27px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field label {
    color: #f8f5ff;
    font-size: 0.9rem;
    font-weight: 780;
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    outline: none;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.form-field input {
    height: 51px;
    padding: 0 15px;
}

.form-field textarea {
    min-height: 145px;
    padding: 14px 15px;
    line-height: 1.48;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #82798f;
}

.form-field input:hover,
.form-field textarea:hover {
    border-color: rgba(190, 135, 255, 0.28);
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--purple);
    background: rgba(157, 77, 255, 0.08);
}

.form-field input.is-invalid,
.form-field textarea.is-invalid {
    border-color: var(--danger);
}

.form-field__hint,
.form-field__meta {
    color: #9990a8;
    font-size: 0.75rem;
    line-height: 1.35;
}

.form-field__meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.form-status {
    min-height: 1.35em;
    margin: -3px 0 -3px;
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1.4;
}

.form-status.is-success {
    color: var(--success);
}

.submit-button {
    position: relative;
    display: grid;
    min-height: 53px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--purple), var(--purple-strong));
    box-shadow: 0 14px 30px rgba(103, 31, 209, 0.28);
    color: #ffffff;
    font-weight: 850;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.submit-button::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.16), transparent 70%);
    content: "";
    transform: translateX(-130%);
    transition: transform 450ms ease;
}

.submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(103, 31, 209, 0.38);
}

.submit-button:hover:not(:disabled)::before {
    transform: translateX(130%);
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
}

.submit-button:disabled {
    opacity: 0.68;
    cursor: wait;
}

.submit-button__label {
    position: relative;
    z-index: 1;
}

.submit-button__spinner {
    position: absolute;
    z-index: 2;
    display: none;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.submit-button.is-loading .submit-button__label {
    visibility: hidden;
}

.submit-button.is-loading .submit-button__spinner {
    display: block;
}

.form-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1500;
    width: max-content;
    max-width: min(calc(100vw - 34px), 520px);
    padding: 13px 17px;
    border: 1px solid rgba(176, 120, 255, 0.34);
    border-radius: 13px;
    background: rgba(15, 8, 29, 0.97);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 680;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 18px);
    transition: opacity 180ms ease, transform 180ms ease;
    backdrop-filter: blur(14px);
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.is-error {
    border-color: rgba(255, 126, 154, 0.45);
}

.toast.is-success {
    border-color: rgba(111, 234, 161, 0.42);
}

.noscript-message {
    position: fixed;
    right: 18px;
    bottom: 18px;
    left: 18px;
    z-index: 1600;
    padding: 14px;
    border: 1px solid rgba(255, 126, 154, 0.45);
    border-radius: 12px;
    background: #1b0b16;
    color: #ffffff;
    text-align: center;
}

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

@keyframes scene-enter {
    0% {
        opacity: 0;
        filter: blur(7px) saturate(0.72) brightness(0.56);
        transform: translate3d(var(--entry-x), var(--entry-y), 0) scale(0.925);
    }

    58% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        filter: blur(0) saturate(1) brightness(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes image-breathe {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -3px, 0) scale(1.006);
    }
}

@keyframes purple-breathe {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.97);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes gold-breathe {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes metallic-sweep {
    0%,
    17% {
        opacity: 0;
        transform: translateX(-130%) skewX(-12deg);
    }

    25% {
        opacity: 0.72;
    }

    46% {
        opacity: 0;
        transform: translateX(130%) skewX(-12deg);
    }

    100% {
        opacity: 0;
        transform: translateX(130%) skewX(-12deg);
    }
}

@keyframes violet-flash {
    0%,
    73%,
    100% {
        opacity: 0.18;
        transform: scale(0.78);
    }

    81% {
        opacity: 1;
        transform: scale(1.16);
    }

    88% {
        opacity: 0.38;
        transform: scale(0.94);
    }
}

@keyframes neon-breathe {
    0%,
    100% {
        opacity: 0.45;
        filter: brightness(0.86);
        transform: scale(0.997);
    }

    50% {
        opacity: 1;
        filter: brightness(1.18);
        transform: scale(1.006);
    }
}

@keyframes whatsapp-breathe {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.82);
    }

    50% {
        opacity: 1;
        transform: scale(1.16);
    }
}

@keyframes feature-pulse {
    0%,
    100% {
        opacity: 0.42;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.13);
    }
}

@keyframes dashboard-sweep {
    0%,
    18% {
        opacity: 0;
        transform: translateX(-135%);
    }

    27% {
        opacity: 0.72;
    }

    49% {
        opacity: 0;
        transform: translateX(135%);
    }

    100% {
        opacity: 0;
        transform: translateX(135%);
    }
}

@keyframes device-breathe {
    0%,
    100% {
        opacity: 0.48;
        transform: scaleX(0.96) scaleY(0.9);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.04) scaleY(1.08);
    }
}

@keyframes benefit-pop {
    0%,
    100% {
        opacity: 0.22;
        transform: scale(0.84);
    }

    42%,
    58% {
        opacity: 0.9;
        transform: scale(1.11);
    }
}

@keyframes cue-bob {
    0%,
    100% {
        opacity: 0.58;
        transform: translate(-50%, 0);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, 7px);
    }
}

@keyframes contact-pulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    72%,
    100% {
        opacity: 0;
        transform: scale(1.48);
    }
}

@keyframes contact-sheen {
    0%,
    63% {
        left: -42%;
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    84% {
        left: 116%;
        opacity: 0;
    }

    100% {
        left: 116%;
        opacity: 0;
    }
}

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

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

@media (max-width: 900px) {
    .scene-nav__label {
        display: none;
    }

    .scene-nav {
        right: max(10px, env(safe-area-inset-right));
        gap: 10px;
    }

    .scene-nav__link {
        min-width: 28px;
        justify-content: center;
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    :root {
        --safe-bottom: max(12px, env(safe-area-inset-bottom));
        --safe-right: max(12px, env(safe-area-inset-right));
    }

    html {
        scroll-snap-type: y proximity;
    }

    .scene {
        padding: max(14px, 2svh) 10px 94px;
    }

    .scene__stage {
        width: min(96vw, 54svh, 1080px);
        aspect-ratio: 9 / 16;
    }

    .scene__picture,
    .scene__effects {
        transition-duration: 150ms;
    }

    .ambient-orb {
        opacity: 0.26;
        filter: blur(68px);
    }

    .ambient-grid {
        background-size: 48px 48px;
        opacity: 0.09;
    }

    .scroll-cue,
    .back-to-top {
        right: auto;
        bottom: max(18px, env(safe-area-inset-bottom));
        left: 18px;
        font-size: 0.59rem;
        transform: none;
    }

    .scroll-cue {
        align-items: flex-start;
        animation-name: cue-bob-mobile;
    }

    .scroll-cue svg,
    .back-to-top svg {
        width: 22px;
        height: 22px;
    }

    .scene-nav {
        top: max(10px, env(safe-area-inset-top));
        right: auto;
        left: 50%;
        display: flex;
        gap: 10px;
        transform: translateX(-50%);
    }

    .scene-nav__link {
        min-width: 20px;
        min-height: 24px;
    }

    .scene-nav__dot {
        width: 7px;
        height: 7px;
    }

    .scroll-cue span {
        font-size: 0;
    }

    .scroll-cue span::after {
        content: "Deslizá";
        font-size: 0.59rem;
    }

    .scroll-cue--compact span::after {
        content: "Seguí";
    }

    .fx--brand-aura {
        top: 22%;
        left: 5%;
        width: 90%;
        height: 45%;
    }

    .fx--brand-crown {
        top: 26%;
        left: 30%;
        width: 40%;
        height: 18%;
    }

    .fx--brand-sweep {
        top: 34%;
        left: 2%;
        width: 96%;
        height: 16%;
    }

    .fx--brand-ball {
        top: 40.5%;
        left: 70%;
        width: 12%;
    }

    .fx--automation-title {
        top: 15%;
        left: 0;
        width: 100%;
        height: 23%;
    }

    .fx--automation-sweep {
        top: 18%;
        left: 0;
        width: 100%;
        height: 18%;
    }

    .fx--automation-neon {
        top: 52.8%;
        left: 4.5%;
        width: 91%;
        height: 11.4%;
        border-radius: 16%;
    }

    .fx--automation-whatsapp {
        top: 54.3%;
        left: 75%;
        width: 12%;
    }

    .fx--feature-one,
    .fx--feature-two,
    .fx--feature-three {
        left: 9%;
        width: 18%;
    }

    .fx--feature-one {
        top: 7.2%;
    }

    .fx--feature-two {
        top: 20.1%;
    }

    .fx--feature-three {
        top: 33.1%;
    }

    .fx--dashboard-sheen {
        top: 61%;
        left: 9%;
        width: 84%;
        height: 24%;
        clip-path: polygon(11% 10%, 96% 0, 92% 86%, 5% 92%);
    }

    .fx--devices-glow {
        top: 72%;
        left: 0;
        width: 100%;
        height: 21%;
    }

    .fx--phone-pulse {
        top: 69%;
        left: 73%;
        width: 14%;
    }

    .fx--results-top {
        top: 6.3%;
        left: 2.8%;
        width: 94.4%;
        height: 20%;
    }

    .fx--benefit-one,
    .fx--benefit-two,
    .fx--benefit-three,
    .fx--benefit-four {
        width: 43%;
        height: 14%;
    }

    .fx--benefit-one {
        top: 31.5%;
        left: 2%;
    }

    .fx--benefit-two {
        top: 31.5%;
        left: 53%;
    }

    .fx--benefit-three {
        top: 46.5%;
        left: 2%;
    }

    .fx--benefit-four {
        top: 46.5%;
        left: 53%;
    }

    .fx--results-bottom {
        top: 66.4%;
        left: 2.8%;
        width: 94.4%;
        height: 21.8%;
    }

    .contact-toggle {
        min-width: 244px;
        height: 64px;
        gap: 10px;
        padding: 6px 6px 6px 16px;
    }

    .contact-toggle__copy strong {
        font-size: 0.86rem;
    }

    .contact-toggle__copy small {
        font-size: 0.66rem;
    }

    .contact-toggle__icon-wrap {
        width: 52px;
        height: 52px;
    }

    .contact-toggle__icon {
        width: 30px;
        height: 30px;
    }

    .contact-actions {
        width: min(286px, calc(100vw - 24px));
    }

    .toast {
        bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px));
    }

    .modal {
        padding: 14px;
        align-items: end;
    }

    .modal__panel {
        width: 100%;
        max-height: calc(100svh - 14px);
        padding: 27px 20px max(22px, env(safe-area-inset-bottom));
        border-radius: 24px 24px 17px 17px;
        transform: translateY(30px) scale(0.99);
    }

    .modal__close {
        top: 14px;
        right: 14px;
    }

    .form-field textarea {
        min-height: 125px;
    }
}

@keyframes cue-bob-mobile {
    0%,
    100% {
        opacity: 0.58;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(6px);
    }
}

@media (max-width: 390px) {
    .contact-toggle {
        min-width: 216px;
        height: 60px;
        padding-left: 14px;
    }

    .contact-toggle__copy strong {
        font-size: 0.8rem;
    }

    .contact-toggle__copy small {
        font-size: 0.61rem;
    }

    .contact-toggle__icon-wrap {
        width: 48px;
        height: 48px;
    }
}

@media (max-height: 660px) and (orientation: landscape) {
    .scene {
        padding-block: 12px 64px;
    }

    .scene__stage {
        width: min(92vw, 156svh, 1480px);
    }

    .scroll-cue,
    .back-to-top {
        bottom: 12px;
    }

    .contact-toggle {
        min-width: 224px;
        height: 60px;
    }

    .contact-toggle__copy small {
        display: none;
    }

    .contact-toggle__icon-wrap {
        width: 48px;
        height: 48px;
    }
}

@media (hover: none) {
    .scene-nav__label {
        display: none;
    }

    .contact-toggle:hover,
    .contact-action:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        scroll-snap-type: y proximity;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .motion-enabled .scene__stage,
    .motion-enabled .scene.is-before .scene__stage,
    .motion-enabled .scene.is-after .scene__stage,
    .motion-enabled .scene.is-active .scene__stage {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .scene__picture,
    .scene__effects {
        transform: none;
    }

    .fx {
        opacity: 0.35;
    }
}