/* Google Sans es la fuente por defecto, no se necesitan clases específicas */
body {
    font-family: 'Google Sans', sans-serif;
    color: #fff;
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    animation: fadeSlideIn 0.9s ease-out forwards;
    animation-play-state: paused;
    animation-delay: var(--aos-delay, 0s);
}

.animate-on-scroll.animate {
    animation-play-state: running;
}

::selection {
    background-color: #56A9ED;
    color: #041221;
}

img[alt="Cliente"] {
    display: none !important;
}

/* Degradado radial azul para las secciones */
section {
    position: relative;
}

section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(86, 169, 237, 0.15) 0%, rgba(86, 169, 237, 0.05) 20%, transparent 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

section>* {
    position: relative;
    z-index: 1;
}

/* Brillos azules laterales específicos del hero */
.hero-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg, rgba(86, 169, 237, 0.5) 0%, rgba(86, 169, 237, 0.25) 1%, transparent 15%),
        linear-gradient(270deg, rgba(86, 169, 237, 0.5) 0%, rgba(86, 169, 237, 0.25) 1%, transparent 15%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.hero-glow::before {
    display: none;
}

/* Eliminar brillo azul del hero en páginas específicas */
.hero-no-glow::before {
    display: none;
}

/* Menú flotante */
.floating-header {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.floating-header:hover {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.floating-menu {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.floating-menu__content {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.65rem 2.25rem;
    border-radius: 999px;
    background: rgba(7, 11, 17, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.floating-menu__logo img {
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.floating-menu__cta {
    background: linear-gradient(135deg, #82b7ff, #56A9ED);
    color: #041221;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1.75rem;
    border-radius: 999px;
    transition: filter 0.2s ease;
}

.floating-menu__cta:hover {
    filter: brightness(1.1);
}

.floating-menu__toggle {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.floating-menu__toggle:hover {
    background: rgba(255, 255, 255, 0.16);
}

.floating-menu__panel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem 0.85rem;
    min-width: 180px;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 11, 17, 0.85);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.floating-menu__panel a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.floating-menu__panel a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.hero-title {
    font-size: clamp(2.4rem, 1.5rem + 4vw, 5.5rem);
    line-height: 1.05;
    text-wrap: balance;
}

.timeline {
    --timeline-progress: 0;
    --timeline-translate: 0;
    position: relative;
}

.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    left: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 0));
    opacity: 0.6;
    pointer-events: none;
    transform: translateX(var(--timeline-translate));
}

.timeline-line--progress {
    background: linear-gradient(180deg, rgba(86, 169, 237, 0) 0%, rgba(86, 169, 237, 0.8) 15%, rgba(86, 169, 237, 1) 50%, rgba(86, 169, 237, 0.8) 85%, rgba(86, 169, 237, 0));
    box-shadow: 0 0 48px rgba(86, 169, 237, 1), 0 0 96px rgba(86, 169, 237, 0.8), 0 0 144px rgba(86, 169, 237, 0.5), 0 0 192px rgba(86, 169, 237, 0.3);
    transform-origin: top;
    transform: translateX(var(--timeline-translate)) scaleY(var(--timeline-progress));
    opacity: 1;
    width: 4px;
}

.timeline-card {
    transition: all 0.4s ease;
}

.timeline-card.timeline-card--illuminated {
    box-shadow: 0 0 20px rgba(86, 169, 237, 0.4), 0 0 40px rgba(86, 169, 237, 0.2);
    border-color: rgba(86, 169, 237, 0.3);
    background: rgba(86, 169, 237, 0.08);
    transform: scale(1.01);
}

.timeline-card {
    width: 100%;
    max-width: 520px;
}

.timeline-card--right,
.timeline-card--left {
    margin-left: auto;
    margin-right: auto;
}

.timeline-item {
    position: relative;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-node {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(86, 169, 237, 0.6);
    background: rgba(86, 169, 237, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: white;
    z-index: 2;
    box-shadow: 0 0 14px rgba(86, 169, 237, 0.4);
    pointer-events: none;
}

@media (min-width: 640px) {
    .timeline-line {
        left: 50%;
        --timeline-translate: -50%;
    }

    .timeline-card {
        width: 100%;
        max-width: 520px;
    }

    .timeline-node {
        left: 50%;
    }
}

@media (max-width: 640px) {
    .floating-menu {
        top: 16px;
        bottom: auto;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
        padding: 0 0.5rem;
    }

    .floating-menu__content {
        width: 100%;
        padding: 0.5rem 1.25rem;
        gap: 0.85rem;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .floating-menu__cta {
        display: inline-flex;
        padding: 0.45rem 1.1rem;
        font-size: 0.75rem;
        flex: 1 1 auto;
        justify-content: center;
    }

    .floating-menu__logo img {
        width: 88px;
        height: auto;
    }

    .floating-menu__toggle {
        flex-shrink: 0;
    }

    .floating-menu__panel {
        width: 100%;
    }

    .floating-menu__panel a {
        text-align: center;
    }
}

.border-gradient {
    position: relative;
}

.border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: linear-gradient(225deg,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.0) 100%);
    pointer-events: none;
}

/* Animated Generate Button Styles */
.btn-wrapper {
    position: relative;
    display: inline-block;
}

.btn {
    --border-radius: 9999px;
    --padding: 4px;
    --transition: 0.4s;
    --button-color: #101010;
    --highlight-color-hue: 210deg;
    user-select: none;
    display: flex;
    justify-content: center;
    background-color: var(--button-color);
    box-shadow:
        inset 0px 1px 1px rgba(255, 255, 255, 0.2),
        inset 0px 2px 2px rgba(255, 255, 255, 0.15),
        inset 0px 4px 4px rgba(255, 255, 255, 0.1),
        inset 0px 8px 8px rgba(255, 255, 255, 0.05),
        inset 0px 16px 16px rgba(255, 255, 255, 0.05),
        0px -1px 1px rgba(0, 0, 0, 0.02),
        0px -2px 2px rgba(0, 0, 0, 0.03),
        0px -4px 4px rgba(0, 0, 0, 0.05),
        0px -8px 8px rgba(0, 0, 0, 0.06),
        0px -16px 16px rgba(0, 0, 0, 0.08);
    border: solid 1px #ffffff22;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition:
        box-shadow var(--transition),
        border var(--transition),
        background-color var(--transition);
}

.btn::before {
    content: "";
    position: absolute;
    top: calc(0px - var(--padding));
    left: calc(0px - var(--padding));
    width: calc(100% + var(--padding) * 2);
    height: calc(100% + var(--padding) * 2);
    border-radius: calc(var(--border-radius) + var(--padding));
    pointer-events: none;
    background-image: linear-gradient(0deg, #0004, #000a);
    z-index: -1;
    transition:
        box-shadow var(--transition),
        filter var(--transition);
    box-shadow:
        0 -8px 8px -6px #0000 inset,
        0 -16px 16px -8px #00000000 inset,
        1px 1px 1px #fff2,
        2px 2px 2px #fff1,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(0deg,
            #fff,
            hsl(var(--highlight-color-hue), 100%, 70%),
            hsla(var(--highlight-color-hue), 100%, 70%, 50%),
            8%,
            transparent);
    background-position: 0 0;
    opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
}

.btn-letter {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    color: #ffffff55;
    animation: letter-anim 2s ease-in-out infinite;
    transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}

.btn-svg {
    flex-grow: 1;
    height: 24px;
    margin-right: 0.5rem;
    fill: #e8e8e8;
    animation: flicker 2s linear infinite;
    animation-delay: 0.5s;
    filter: drop-shadow(0 0 2px #ffffff99);
    transition: fill var(--transition), filter var(--transition), opacity var(--transition);
}

@keyframes flicker {
    50% {
        opacity: 0.3;
    }
}

.btn:focus .btn-svg,
.btn:focus-visible .btn-svg {
    animation-duration: 1.2s;
    animation-delay: 0.2s;
}

.btn:focus::before,
.btn:focus-visible::before {
    box-shadow:
        0 -8px 12px -6px #fff3 inset,
        0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset,
        1px 1px 1px #fff3,
        2px 2px 2px #fff1,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.btn:focus::after,
.btn:focus-visible::after {
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
    filter: brightness(100%);
}

.btn:active {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.7);
    background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}

.btn:active::before {
    box-shadow:
        0 -8px 12px -6px #fffa inset,
        0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.8) inset,
        1px 1px 1px #fff4,
        2px 2px 2px #fff2,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.btn:active::after {
    opacity: 1;
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
    filter: brightness(200%);
}

.btn:hover {
    border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.4);
}

.btn:hover::before {
    box-shadow:
        0 -8px 8px -6px #fffa inset,
        0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.3) inset,
        1px 1px 1px #fff2,
        2px 2px 2px #fff1,
        -1px -1px 1px #0002,
        -2px -2px 2px #0001;
}

.btn:hover::after {
    opacity: 1;
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
}

.btn:hover .btn-svg {
    fill: #fff;
    filter:
        drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009);
    animation: none;
}

/* Etiqueta del CTA */
.btn-label {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-transform: none;
}

.video-placeholder {
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 65%);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* Todas las clases de fuente ahora usan Google Sans */
.font-geist,
.font-instrument-serif,
.font-roboto,
.font-montserrat,
.font-poppins,
.font-playfair,
.font-merriweather,
.font-bricolage,
.font-jakarta,
.font-manrope,
.font-space-grotesk,
.font-work-sans,
.font-pt-serif,
.font-geist-mono,
.font-space-mono,
.font-quicksand,
.font-nunito {
    font-family: 'Google Sans', sans-serif !important;
}

/* Marquee animation */
@keyframes marquee-left {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* Interruptor estilo iPhone */
.ios-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    font-family: 'Google Sans', sans-serif;
}

.ios-switch__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.ios-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ios-switch__track {
    position: relative;
    min-width: 320px;
    height: 64px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 100px;
    background: linear-gradient(135deg, #2f3543, #222632);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.6),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05),
        inset 0 0 12px rgba(0, 0, 0, 0.35);
    --ios-switch-fill-ratio: 0;
}

.ios-switch__track.is-dragging {
    user-select: none;
}

.ios-switch__track::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #82b7ff, #56A9ED);
    opacity: var(--ios-switch-fill-ratio, 0);
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 0;
}

.ios-switch__track::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0.4;
}

.ios-switch__thumb {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #d9dee5 60%, #cbd2df);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.45);
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.35s ease, box-shadow 0.35s ease;
    cursor: grab;
    touch-action: none;
}

.ios-switch__track.is-dragging .ios-switch__thumb {
    transition: none;
    cursor: grabbing;
}

.ios-switch__text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #f5f7ff;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    width: 100%;
    position: relative;
    z-index: 1;
}

.ios-switch__input:checked+.ios-switch__track {
    border-color: rgba(129, 169, 238, 0.8);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 0 14px rgba(53, 91, 148, 0.45),
        0 8px 16px rgba(86, 169, 237, 0.45);
    --ios-switch-fill-ratio: 1;
}

.ios-switch__input:checked+.ios-switch__track .ios-switch__thumb {
    left: calc(100% - 54px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.4);
}

.ios-switch__track.is-preview-on {
    border-color: rgba(129, 169, 238, 0.7);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 0 12px rgba(53, 91, 148, 0.35),
        0 6px 12px rgba(86, 169, 237, 0.35);
}

.ios-switch__track.is-preview-on .ios-switch__thumb {
    box-shadow: 0 9px 16px rgba(0, 0, 0, 0.35);
}

/* Estilos para transición de contenido en tarjetas de resultados */
.results-card-title,
.results-card-text {
    position: relative;
    display: block;
}

.results-card-title-before,
.results-card-title-after,
.results-card-text-before,
.results-card-text-after {
    display: block;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.results-card-title-before,
.results-card-text-before {
    opacity: 1;
    transform: translateY(0);
}

.results-card-title-after,
.results-card-text-after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
}

/* Transición gradual basada en el ratio */
.results-card[data-switch-ratio] .results-card-title-before,
.results-card[data-switch-ratio] .results-card-text-before {
    opacity: calc(1 - var(--switch-ratio, 0));
    transform: translateY(calc(var(--switch-ratio, 0) * -15px));
}

.results-card[data-switch-ratio] .results-card-title-after,
.results-card[data-switch-ratio] .results-card-text-after {
    opacity: var(--switch-ratio, 0);
    transform: translateY(calc((1 - var(--switch-ratio, 0)) * 15px));
    pointer-events: none;
}

.results-card-title {
    min-height: 1.75em;
    position: relative;
}

.results-card-text {
    min-height: 3.5em;
    position: relative;
}

/* Tinte azul translúcido en las tarjetas cuando el switch está activado */
.results-card {
    position: relative;
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.results-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: rgba(86, 169, 237, 0);
    pointer-events: none;
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.results-card[data-switch-ratio]::before {
    background-color: rgba(86, 169, 237, calc(var(--switch-ratio, 0) * 0.08));
}

.results-card > * {
    position: relative;
    z-index: 1;
}