@charset "UTF-8";

.landing-page {
    overflow-x: hidden;
}

.landing-page .public-topbar {
    background: var(--topbar-bg);
}

.landing-hero {
    position: relative;
    padding: 36px 20px 56px;
    isolation: isolate;
    background:
        radial-gradient(780px 320px at 12% 0%, var(--glow), transparent 70%),
        linear-gradient(180deg, rgba(15, 118, 110, 0.10), transparent 52%);
}

.landing-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 400px);
    gap: 40px;
    align-items: start;
}

.landing-kicker {
    margin: 0 0 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--brand-2);
}

.landing-hero-copy h1,
.landing-wrap h2 {
    margin: 0 0 14px;
    font-weight: 650;
    letter-spacing: -0.04em;
    line-height: 1.12;
    color: var(--text);
}

.landing-hero-copy h1 {
    font-size: clamp(32px, 4.6vw, 52px);
    max-width: 14ch;
}

.landing-wrap h2 {
    font-size: clamp(26px, 3.2vw, 36px);
}

.landing-lead {
    margin: 0 0 22px;
    max-width: 36em;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

.landing-lead-section {
    margin-bottom: 0;
}

.landing-section-head {
    max-width: 36em;
    margin: 0 0 32px;
}

.landing-section-head h2 {
    margin-bottom: 10px;
}

.landing-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.landing-pills li {
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--stroke2);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-btn-ghost {
    color: var(--text);
    border-color: var(--btn-border);
}

.landing-login-card {
    width: 100%;
    animation: landingCardIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-login-card h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
}

.landing-login-card .google-auth-sub {
    margin: 0 0 18px;
    font-size: 15px;
}

@keyframes landingCardIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
}

.landing-collage {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: 210px 210px;
    gap: 12px;
    margin-top: 36px;
}

.landing-collage figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: var(--panel);
    position: relative;
    min-height: 0;
    height: 100%;
}

.landing-collage-main {
    grid-row: 1 / span 2;
}

.landing-collage img,
.landing-mosaic-item img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.landing-collage figcaption,
.landing-mosaic-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 22px 14px 12px;
    background: linear-gradient(180deg, transparent, rgba(7, 17, 15, 0.86));
    color: var(--text-on-media);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.landing-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent 28%);
}

.landing-section--alt {
    background:
        radial-gradient(700px 280px at 80% 0%, rgba(15, 118, 110, 0.18), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.landing-feature {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px 20px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--panel);
}

.landing-feature-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: rgba(15, 118, 110, 0.22);
    color: var(--brand-2);
}

.landing-feature-ico svg {
    width: 20px;
    height: 20px;
}

.landing-feature h3,
.landing-step h3,
.landing-chat h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 650;
}

.landing-feature p,
.landing-step p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.landing-chat {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 28px;
    align-items: center;
    margin-top: 14px;
    padding: 28px 28px;
    border-radius: var(--radius);
    background: var(--brand-strong);
    color: #fff;
}

.landing-chat-badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-chat h3,
.landing-chat p {
    color: #fff;
}

.landing-chat p {
    margin: 0;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

.landing-chat-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.landing-chat-points li {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.landing-step {
    padding: 22px 20px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--panel);
}

.landing-step-n {
    display: block;
    margin-bottom: 10px;
    color: var(--brand-2);
    letter-spacing: 0.12em;
    font-size: 12px;
}

.landing-oficios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.landing-oficios li {
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
}

.landing-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 230px 230px 230px;
    gap: 12px;
}

.landing-mosaic-wide {
    grid-column: 1 / span 2;
}

.landing-mosaic-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: var(--panel);
    position: relative;
    min-height: 0;
    height: 100%;
}

.landing-planes-grid {
    margin-top: 8px;
}

.landing-faq-wrap h2 {
    margin-bottom: 8px;
}

.landing-faq {
    display: grid;
    gap: 10px;
    max-width: 720px;
}

.landing-faq details {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 4px 16px;
}

.landing-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
    font-weight: 600;
    color: var(--text);
}

.landing-faq summary::-webkit-details-marker,
.landing-faq summary::marker {
    display: none;
    content: "";
}

.landing-faq summary::after {
    content: "";
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease, margin 0.25s ease;
}

.landing-faq details[open] summary::after {
    margin-top: 4px;
    transform: rotate(225deg);
}

.landing-faq details p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.55;
}

.landing-contacto {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: start;
}

.landing-contacto p {
    color: var(--muted);
    line-height: 1.55;
}

.landing-contact-form {
    display: grid;
    gap: 8px;
    padding: 22px;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

.landing-label {
    font-size: 13px;
    font-weight: 650;
}

.landing-contact-form .input {
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(15, 118, 110, 0.22);
}

.landing-contact-msg {
    margin: 4px 0 0;
}

.landing-reveal {
    animation: landingRise 0.9s ease both;
    animation-timeline: view();
    animation-range: entry 8% cover 28%;
}

@keyframes landingRise {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to { opacity: 1; transform: none; }
}

.legal-main {
    align-items: stretch;
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 16px 64px;
}

.legal-card {
    padding: 28px 26px;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
}

.legal-card h1 {
    margin: 0 0 8px;
}

.legal-card h2 {
    margin: 22px 0 8px;
    font-size: 18px;
}

.footer-legal {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.footer-legal a {
    color: var(--brand-2);
    text-decoration: none;
    font-size: 13px;
}

.footer-legal a:hover {
    text-decoration: underline;
}

.landing-page .top-actions {
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .landing-features {
        grid-template-columns: 1fr 1fr;
    }

    .landing-chat {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .landing-hero-grid,
    .landing-contacto,
    .landing-steps {
        grid-template-columns: 1fr;
    }

    .landing-hero-copy h1 {
        max-width: none;
    }

    .landing-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 180px;
    }

    .landing-collage-main {
        grid-column: 1 / span 2;
        grid-row: auto;
    }

    .landing-mosaic {
        grid-template-rows: 200px 190px 200px;
    }
}

@media (max-width: 640px) {
    .landing-features {
        grid-template-columns: 1fr;
    }

    .landing-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 210px 150px;
    }

    .landing-collage-main {
        grid-column: 1 / span 2;
        grid-row: auto;
    }

    .landing-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 160px 180px;
    }

    .landing-mosaic-wide {
        grid-column: 1 / span 2;
    }

    .landing-hero {
        padding: 20px 16px 40px;
    }

    .landing-section {
        padding: 64px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-login-card,
    .landing-reveal {
        animation: none;
    }
}

html[data-theme="claro"] .landing-section {
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent 40%);
}

html[data-theme="claro"] .landing-hero {
    background:
        radial-gradient(780px 320px at 12% 0%, rgba(15, 118, 110, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent 52%);
}

html[data-theme="claro"] .landing-step,
html[data-theme="claro"] .landing-feature,
html[data-theme="claro"] .landing-faq details {
    background: var(--paper);
    color: var(--ink);
}

html[data-theme="claro"] .landing-feature h3,
html[data-theme="claro"] .landing-step h3,
html[data-theme="claro"] .landing-faq summary,
html[data-theme="claro"] .landing-hero-copy h1,
html[data-theme="claro"] .landing-wrap h2 {
    color: var(--ink);
}

html[data-theme="claro"] .landing-step p,
html[data-theme="claro"] .landing-feature p,
html[data-theme="claro"] .landing-faq details p,
html[data-theme="claro"] .landing-contacto p,
html[data-theme="claro"] .landing-lead {
    color: var(--muted);
}

html[data-theme="claro"] .landing-oficios li,
html[data-theme="claro"] .landing-pills li {
    background: var(--paper);
    color: var(--ink);
}

html[data-theme="claro"] .landing-btn-ghost {
    color: var(--ink);
}

html[data-theme="claro"] .landing-feature-ico {
    background: rgba(15, 118, 110, 0.12);
    color: var(--brand);
}

html[data-theme="claro"] .landing-hero .landing-kicker,
html[data-theme="claro"] .landing-section .landing-kicker {
    color: var(--brand);
}

.landing-page {
    padding-bottom: 88px;
}

.landing-pills li,
.landing-feature,
.landing-step,
.landing-faq details,
.landing-chat-points li,
.landing-page .precios-card {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.45s ease;
}

.landing-pills li:hover {
    transform: translate3d(0, -2px, 0);
    border-color: var(--brand-2);
    background: rgba(15, 118, 110, 0.22);
}

.landing-feature,
.landing-step,
.landing-faq details {
    backdrop-filter: blur(16px);
}

.landing-feature:hover,
.landing-step:hover {
    transform: translate3d(0, -8px, 0);
    border-color: var(--stroke2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    background: var(--panel2);
}

.landing-feature-ico {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}

.landing-feature:hover .landing-feature-ico {
    transform: scale(1.08) rotate(-6deg);
}

.landing-collage figure,
.landing-carousel-slide {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.landing-collage img {
    transform: scale(1.02) translate3d(0, var(--pan, 0px), 0);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
    filter: saturate(0.92);
}

.landing-collage figure:hover img {
    transform: scale(1.12) translate3d(0, var(--pan, 0px), 0);
    filter: saturate(1.08);
}

.landing-collage figure:hover,
.landing-carousel-slide:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.landing-chat {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.landing-chat:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 20px 46px rgba(15, 118, 110, 0.28);
}

.landing-chat-points li:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translate3d(6px, 0, 0);
}

.landing-page .precios-card:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: var(--shadow);
}

.landing-faq details[open] {
    border-color: var(--stroke2);
    background: var(--panel2);
}

.landing-hero [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
}

[data-reveal],
.landing-reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    filter: blur(8px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.85s ease;
}

[data-reveal="left"] {
    transform: translate3d(-40px, 0, 0);
}

[data-reveal="right"] {
    transform: translate3d(40px, 0, 0);
}

[data-reveal="scale"] {
    transform: translate3d(0, 18px, 0) scale(0.96);
}

[data-reveal].is-in,
.landing-reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

[data-stagger] > *:nth-child(1) { transition-delay: 0.04s; }
[data-stagger] > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger] > *:nth-child(3) { transition-delay: 0.2s; }
[data-stagger] > *:nth-child(4) { transition-delay: 0.28s; }

.landing-film {
    overflow: hidden;
    margin-top: 36px;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.landing-film-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: landingFilm 46s linear infinite;
}

.landing-film img {
    width: 220px;
    height: 138px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    opacity: 0.78;
    transition: opacity 0.35s ease, transform 0.45s ease;
}

.landing-film img:hover {
    opacity: 1;
    transform: scale(1.04);
}

.landing-film:hover .landing-film-track {
    animation-play-state: paused;
}

@keyframes landingFilm {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

.landing-marquee {
    overflow: hidden;
    margin: 0 0 22px;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.landing-marquee-track {
    display: flex;
    gap: 8px;
    width: max-content;
    animation: landingFilm 28s linear infinite;
}

.landing-marquee:hover .landing-marquee-track {
    animation-play-state: paused;
}

.landing-oficios {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-carousel {
    position: relative;
}

.landing-carousel-viewport {
    position: relative;
    height: 420px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: var(--panel);
}

.landing-carousel-track {
    height: 100%;
}

.landing-carousel-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-carousel-slide.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    z-index: 1;
}

.landing-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.landing-carousel-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 36px 18px 16px;
    background: linear-gradient(180deg, transparent, rgba(7, 17, 15, 0.88));
    color: var(--text-on-media);
    font-size: 16px;
    font-weight: 650;
}

.landing-carousel-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.landing-carousel-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--stroke);
    border-radius: 99px;
    background: var(--panel);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.landing-carousel-btn:hover {
    transform: scale(1.08);
    background: var(--panel2);
    border-color: var(--stroke2);
}

.landing-carousel-dots {
    display: flex;
    gap: 8px;
}

.landing-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: width 0.35s ease, background 0.35s ease;
}

.landing-carousel-dot.is-active {
    width: 22px;
    background: var(--brand-2);
}

.landing-wa-fab {
    position: fixed;
    z-index: 80;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border: 0;
    border-radius: 99px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
    animation: landingWaPulse 2.8s ease-in-out infinite;
}

.landing-wa-fab svg {
    color: var(--green);
    flex: 0 0 auto;
}

.landing-wa-fab-mark {
    fill: var(--paper);
}

.landing-wa-fab span {
    font-size: 14px;
    font-weight: 650;
}

.landing-page.is-wa-open .landing-wa-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
}

.landing-wa {
    position: fixed;
    z-index: 81;
    right: 22px;
    bottom: 88px;
    width: min(360px, calc(100vw - 28px));
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow);
    transform-origin: bottom right;
    animation: landingWaIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-wa-head {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 14px 14px 12px;
    background: var(--brand-strong);
    color: #fff;
}

.landing-wa-head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.landing-wa-name,
.landing-wa-status {
    margin: 0;
}

.landing-wa-name {
    font-weight: 650;
}

.landing-wa-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
}

.landing-wa-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.landing-wa-body {
    padding: 16px 14px 10px;
    background: rgba(15, 118, 110, 0.08);
}
.landing-wa-hilo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
}

.landing-wa-bubble-me {
    align-self: flex-end;
    border-radius: var(--radius-sm) 0 var(--radius-sm) var(--radius-sm);
    background: var(--brand-strong);
    color: #fff;
}

.landing-wa-bubble-me .landing-wa-author {
    color: rgba(255, 255, 255, 0.78);
}

.landing-wa-chip-open {
    border-color: var(--brand);
}

.landing-scroll-fab {
    position: fixed;
    z-index: 80;
    left: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
}

.landing-scroll-fab svg {
    display: block;
    transition: transform 0.35s ease;
}

.landing-scroll-fab[data-dir="up"] svg {
    transform: rotate(180deg);
}

.landing-page.is-wa-open .landing-scroll-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.landing-wa-bubble {
    max-width: 92%;
    padding: 10px 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(16, 33, 31, 0.08);
}

.landing-wa-author {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
}

.landing-wa-bubble p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.landing-wa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.landing-wa-chip {
    border: 1px solid rgba(15, 118, 110, 0.22);
    background: #fff;
    color: var(--brand);
    border-radius: 99px;
    padding: 8px 11px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.landing-wa-chip:hover,
.landing-wa-chip:focus-visible {
    background: var(--brand);
    color: var(--btn-primary-fg);
}

.landing-wa-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
    padding: 10px 12px 12px;
    background: var(--paper);
}

.landing-wa-form .input {
    background: #fff;
    color: var(--ink);
}

.landing-wa-form .btn.primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

.landing-wa-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

@keyframes landingWaIn {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.92); }
    to { opacity: 1; transform: none; }
}

@keyframes landingWaPulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
    50% { box-shadow: 0 10px 28px rgba(52, 211, 153, 0.35); }
}

@media (max-width: 640px) {
    .landing-carousel-viewport {
        height: 280px;
    }

    .landing-wa-fab span {
        display: none;
    }

    .landing-film img {
        width: 168px;
        height: 108px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-login-card,
    .landing-reveal,
    [data-reveal],
    .landing-film-track,
    .landing-marquee-track,
    .landing-wa,
    .landing-wa-fab,
    .landing-scroll-fab,
    .landing-carousel-slide,
    .landing-collage img {
        animation: none !important;
        transition: none !important;
        filter: none;
        transform: none;
        opacity: 1;
    }
}

html[data-theme="claro"] .landing-carousel-dot {
    background: rgba(16, 33, 31, 0.22);
}

html[data-theme="claro"] .landing-carousel-dot.is-active {
    background: var(--brand);
}

html[data-theme="claro"] .landing-carousel-btn {
    color: var(--ink);
    background: var(--paper);
}

html[data-theme="claro"] .landing-oficios li {
    background: var(--paper);
    color: var(--ink);
}

.landing-flujo {
    margin: 0 0 36px;
}

.landing-flujo-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: var(--bg1);
    overflow: hidden;
}

.flujo-shell { fill: var(--bg0); }
.flujo-topbar { fill: var(--topbar-bg); }
.flujo-logo { fill: var(--brand); }

.flujo-app-title,
.flujo-app-sub,
.flujo-board-title,
.flujo-board-sub,
.flujo-top-btn text,
.flujo-modal-copy,
.flujo-modal-label,
.flujo-paper-item-small,
.flujo-chat-sub {
    font-family: var(--font);
}

.flujo-app-title,
.flujo-board-title {
    fill: var(--text);
    font-size: 16px;
    font-weight: 800;
}

.flujo-app-sub,
.flujo-board-sub,
.flujo-modal-copy,
.flujo-chat-sub,
.flujo-paper-item-small {
    fill: var(--muted);
    font-size: 12px;
}

.flujo-board-title {
    font-size: 18px;
    font-weight: 900;
}

.flujo-top-btn rect,
.flujo-header-btn rect {
    stroke-width: 1;
}

.flujo-top-btn text {
    font-size: 12px;
    font-weight: 650;
}

.flujo-top-btn-ghost rect {
    fill: var(--btn-bg);
    stroke: var(--btn-border);
}

.flujo-top-btn-ghost text {
    fill: var(--text);
}

.flujo-top-btn-primary rect {
    fill: var(--btn-primary-bg);
}

.flujo-top-btn-primary text {
    fill: var(--btn-primary-fg);
}

.flujo-addbar rect,
.flujo-col-title-pill {
    fill: var(--panel);
    stroke: var(--stroke);
    stroke-width: 1;
}

.flujo-task,
.flujo-confirmar-col,
.flujo-confirmar-card,
.flujo-link-card {
    transform-box: fill-box;
    transform-origin: center;
}

.flujo-modal-copy,
.flujo-modal-label {
    fill: var(--muted);
}

.flujo-modal-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.flujo-confirmar-box,
.flujo-confirmar-card,
.flujo-chat-header,
.flujo-chat-input {
    fill: var(--panel);
    stroke: var(--stroke);
    stroke-width: 1;
}

.flujo-confirmar-card {
    fill: var(--paper);
}

.flujo-chat-header {
    fill: var(--card2);
}.flujo-brand {
    fill: var(--text);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 650;
}
.flujo-hsub,
.flujo-muted,
.flujo-item-t,
.flujo-col-title,
.flujo-card-title,
.flujo-pill-t,
.flujo-modal-h,
.flujo-field-t,
.flujo-url-t,
.flujo-paper-h,
.flujo-paper-sub,
.flujo-paper-card,
.flujo-paper-item,
.flujo-sello-t,
.flujo-chat-h,
.flujo-bubble-t,
.flujo-cite,
.flujo-bubble-me-t,
.flujo-btn-enlace text,
.flujo-btn-crear text,
.flujo-btn-ghost text,
.flujo-btn-wa text,
.flujo-btn-corr text {
    font-family: var(--font);
}

.flujo-hsub,
.flujo-muted,
.flujo-cite {
    fill: var(--muted);
    font-size: 12px;
}

.flujo-col-title,
.flujo-card-title,
.flujo-modal-h,
.flujo-paper-h,
.flujo-chat-h {
    fill: var(--text);
    font-size: 15px;
    font-weight: 650;
}

.flujo-item-t,
.flujo-field-t,
.flujo-url-t,
.flujo-paper-item,
.flujo-bubble-t,
.flujo-bubble-me-t {
    fill: var(--text);
    font-size: 13px;
}

.flujo-col-bg { fill: var(--card); }
.flujo-card,
.flujo-modal-bg,
.flujo-paper,
.flujo-chat-bg,
.flujo-bubble {
    fill: var(--card2);
    stroke: var(--stroke);
    stroke-width: 1;
}
.flujo-paper { fill: var(--paper); }
.flujo-paper-h,
.flujo-paper-card,
.flujo-paper-item,
.flujo-sello-t,
.flujo-field-t,
.flujo-url-t {
    fill: var(--ink);
}
.flujo-paper-sub { fill: rgba(16, 33, 31, 0.58); }

.flujo-check {
    fill: var(--brand);
    stroke: var(--brand);
}
.flujo-check-empty {
    fill: transparent;
    stroke: var(--stroke2);
    stroke-width: 1.4;
}
.flujo-tick {
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.flujo-photo {
    fill: rgba(15, 118, 110, 0.22);
    stroke: var(--stroke);
}
.flujo-photo-onpaper { fill: rgba(15, 118, 110, 0.14); }
.flujo-photo-dot { fill: var(--brand-2); }
.flujo-photo-mtn {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 1.4;
}

.flujo-pill { stroke-width: 1; }
.flujo-pill-done {
    fill: rgba(15, 118, 110, 0.16);
    stroke: rgba(15, 118, 110, 0.4);
}
.flujo-pill-pend {
    fill: rgba(232, 197, 114, 0.14);
    stroke: rgba(232, 197, 114, 0.4);
}
.flujo-pill-corr {
    fill: rgba(167, 139, 250, 0.16);
    stroke: rgba(167, 139, 250, 0.45);
}
.flujo-pill-t {
    font-size: 9px;
    font-weight: 700;
    fill: var(--text);
}

.flujo-btn-enlace rect { fill: var(--btn-primary-bg); }
.flujo-btn-enlace text,
.flujo-btn-crear text,
.flujo-btn-corr text,
.flujo-btn-wa text {
    fill: var(--btn-primary-fg);
    font-size: 12px;
    font-weight: 650;
}
.flujo-btn-crear rect,
.flujo-btn-corr rect,
.flujo-btn-wa rect { fill: var(--btn-primary-bg); }
.flujo-btn-ghost rect {
    fill: transparent;
    stroke: var(--stroke2);
}
.flujo-btn-ghost text {
    fill: var(--ink);
    font-size: 12px;
    font-weight: 650;
}

.flujo-dim { fill: rgba(7, 17, 15, 0.55); }
.flujo-field,
.flujo-url {
    fill: #fff;
    stroke: rgba(15, 118, 110, 0.22);
    stroke-width: 1;
}
.flujo-chat-bg { fill: var(--bg1); }
.flujo-bubble-me { fill: var(--brand-strong); }
.flujo-bubble-me-t { fill: #fff; font-size: 12px; }

.flujo-scene {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}
.landing-flujo[data-scene="0"] .flujo-s0,
.landing-flujo[data-scene="1"] .flujo-s1,
.landing-flujo[data-scene="2"] .flujo-s2,
.landing-flujo[data-scene="3"] .flujo-s3 {
    opacity: 1;
    pointer-events: auto;
}

.landing-flujo.is-play[data-scene="0"] .flujo-item-a { animation: flujoPop 0.5s ease 0.15s both; }
.landing-flujo.is-play[data-scene="0"] .flujo-item-b { animation: flujoPop 0.5s ease 0.45s both; }
.landing-flujo.is-play[data-scene="0"] .flujo-item-c { animation: flujoPop 0.5s ease 0.75s both; }
.landing-flujo.is-play[data-scene="0"] .flujo-task { animation: flujoPop 0.5s ease 0.2s both; }
.landing-flujo.is-play[data-scene="1"] .flujo-modal { animation: flujoPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.landing-flujo.is-play[data-scene="1"] .flujo-url { animation: flujoPop 0.4s ease 1.1s both; }
.landing-flujo[data-scene="1"] .flujo-btn-enlace rect { filter: brightness(1.15); }
.landing-flujo.is-play[data-scene="2"] .flujo-paper { animation: flujoPop 0.45s ease both; }
.landing-flujo.is-play[data-scene="2"] .flujo-btn-corr { animation: flujoFadeOut 0.35s ease 1.7s both; }
.landing-flujo.is-play[data-scene="2"] .flujo-sello { animation: flujoPop 0.4s ease 1.75s both; }
.landing-flujo.is-play[data-scene="3"] .flujo-chat { animation: flujoSlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.landing-flujo.is-play[data-scene="3"] .flujo-bubble { animation: flujoPop 0.4s ease 0.35s both; }
.landing-flujo.is-play[data-scene="3"] .flujo-bubble-me { animation: flujoPop 0.4s ease 0.85s both; }
.landing-flujo.is-play[data-scene="3"] .flujo-chat-input { animation: flujoPop 0.4s ease 1.15s both; }

.flujo-item-a, .flujo-item-b, .flujo-item-c, .flujo-modal, .flujo-url, .flujo-paper, .flujo-sello, .flujo-chat, .flujo-bubble, .flujo-bubble-me, .flujo-chat-input {
    transform-box: fill-box;
    transform-origin: center;
}
.flujo-ptr {
    fill: var(--text);
    transform: translate(190px, 148px);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.landing-flujo[data-scene="1"] .flujo-ptr { transform: translate(530px, 252px); }
.landing-flujo[data-scene="2"] .flujo-ptr { transform: translate(480px, 304px); }
.landing-flujo[data-scene="3"] .flujo-ptr { transform: translate(548px, 232px); }

@keyframes flujoPop {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
@keyframes flujoSlide {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}
@keyframes flujoFadeOut {
    to { opacity: 0; }
}

.landing-flujo-cap {
    margin: 14px 0 10px;
    text-align: center;
    color: var(--text);
    font-weight: 650;
}

.landing-flujo-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.landing-flujo-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: width 0.35s ease, background 0.35s ease;
}

.landing-flujo-dot.is-active {
    width: 22px;
    background: var(--brand-2);
}

html[data-theme="claro"] .landing-flujo-dot { background: rgba(16, 33, 31, 0.22); }
html[data-theme="claro"] .landing-flujo-dot.is-active { background: var(--brand); }
html[data-theme="claro"] .flujo-paper-sub { fill: var(--muted); }
html[data-theme="claro"] .landing-flujo-cap { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .flujo-item-a,
    .flujo-item-b,
    .flujo-item-c,
    .flujo-modal,
    .flujo-url,
    .flujo-paper,
    .flujo-btn-corr,
    .flujo-sello,
    .flujo-chat,
    .flujo-bubble,
    .flujo-bubble-me,
    .flujo-ptr,
    .flujo-scene {
        animation: none !important;
        transition: none !important;
    }
}

.landing-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    height: 3px;
    width: 0;
    background: var(--brand-2);
    box-shadow: 0 0 12px var(--glow);
    pointer-events: none;
    transform-origin: left center;
    transition: width 0.12s linear;
}

.landing-orb {
    position: fixed;
    z-index: 1;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow), transparent 68%);
    pointer-events: none;
    opacity: 0.55;
    transform: translate3d(-40vw, -20vh, 0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.landing-page.is-compact .public-topbar {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.landing-page .public-topbar {
    transition: box-shadow 0.35s ease, background 0.35s ease;
}

.landing-page .btn,
.landing-page .btn-google-oauth,
.landing-page .landing-carousel-btn,
.landing-page .landing-carousel-dot,
.landing-page .landing-flujo-dot,
.landing-page .landing-wa-chip,
.landing-page .landing-scroll-fab,
.landing-page .landing-wa-fab,
.landing-page .landing-wa-close,
.landing-page .landing-pills li {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease, opacity 0.25s ease, width 0.3s ease;
}

.landing-page .btn:hover,
.landing-page .btn-google-oauth:hover {
    transform: translate3d(0, -2px, 0);
}

.landing-page .btn:active,
.landing-page .btn-google-oauth:active,
.landing-page .is-press {
    transform: scale(0.96);
}

.landing-page .public-topbar-link.is-current {
    color: var(--ink);
    opacity: 1;
}

.landing-page .public-topbar-link.is-current::after {
    transform: scaleX(1);
    background: var(--brand-2);
}

.landing-section.is-jump {
    animation: landingJump 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes landingJump {
    0% { box-shadow: inset 0 0 0 0 transparent; }
    35% { box-shadow: inset 0 0 0 2px var(--brand-2); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}

.landing-faq details {
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.landing-faq details:hover {
    transform: translate3d(4px, 0, 0);
}

.landing-faq summary {
    transition: color 0.25s ease;
}

.landing-faq details p {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.35s ease;
}

.landing-faq details[open] p {
    max-height: 8em;
    opacity: 1;
    margin: 0 0 14px;
}

.landing-contact-form .input,
.landing-login-card .input {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.landing-contact-form .input:focus,
.landing-login-card .input:focus {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 0 0 3px var(--glow);
}

.landing-flujo-cap {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.landing-flujo.is-swap .landing-flujo-cap {
    animation: landingCap 0.4s ease;
}

@keyframes landingCap {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: none; }
}

html[data-theme="claro"] .landing-page .public-topbar-link.is-current {
    color: var(--brand);
}

html[data-theme="claro"] .landing-page .public-topbar-link.is-current::after {
    background: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
    .landing-orb,
    .landing-progress,
    .landing-section.is-jump,
    .landing-flujo.is-swap .landing-flujo-cap {
        animation: none !important;
        transition: none !important;
    }
}