/* RESET */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    font-family: "Inter", sans-serif;

    color: var(--color-text);
    background: var(--color-background);

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

body.menu-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

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

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* VARIABLES */

:root {

    --color-primary: #f0640a;
    --color-primary-dark: #d84e00;
    --color-primary-soft: #fff0e5;

    --color-background: #ffffff;
    --color-background-warm: #fff9f5;

    --color-surface: #f7f8fa;
    --color-surface-soft: #fbfbfc;

    --color-text: #151923;
    --color-text-soft: #394150;
    --color-text-muted: #68707f;

    --color-border: #e7e8eb;
    --color-border-strong: #d9dce1;

    --color-dark: #111827;
    --color-dark-surface: #1a2232;

    --color-success: #1f9d74;
    --color-warning: #e8a13a;
    --color-danger: #dd5454;
    --color-blue: #3973e8;

    --font-heading: "Manrope", sans-serif;
    --font-body: "Inter", sans-serif;

    --container-width: 1240px;

    --radius-sm: 0.75rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.875rem;

    --shadow-soft:
        0 1rem 3rem rgba(17, 24, 39, 0.07);

    --shadow-product:
        0 2rem 5rem rgba(17, 24, 39, 0.12);

    --transition: 180ms ease;
    --section-space: clamp(5rem, 8vw, 8rem);
}


/* GLOBAL */

.container {
    width: min(
        calc(100% - clamp(2rem, 5vw, 6rem)),
        var(--container-width)
    );

    margin-inline: auto;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

body {
    line-height: 1.5;
}

section[id] {
    scroll-margin-top: 5.5rem;
}

::selection {
    color: #ffffff;
    background: var(--color-primary);
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.04em;
}

button,
a {
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        opacity var(--transition);
}

:focus-visible {
    outline: 3px solid rgba(240, 100, 10, 0.3);
    outline-offset: 4px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    width: fit-content;

    padding: 0.5rem 0.75rem;

    border: 1px solid rgba(240, 100, 10, 0.17);
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;

    color: var(--color-primary-dark);
    background: rgba(255, 255, 255, 0.7);

    backdrop-filter: blur(10px);
}

.eyebrow svg {
    width: 0.95rem;
    height: 0.95rem;
}


/* BUTTONS */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    min-height: 3.25rem;

    padding: 0.85rem 1.25rem;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-size: 0.9rem;
    font-weight: 700;
}

.btn svg {
    width: 1rem;
    height: 1rem;
}

.btn-primary {
    color: #ffffff;
    background: var(--color-primary);

    box-shadow:
        0 0.75rem 1.75rem rgba(240, 100, 10, 0.2);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    border-color: var(--color-border-strong);

    color: var(--color-text);
    background: rgba(255, 255, 255, 0.75);
}

.btn-secondary:hover {
    border-color: #c5c9d0;
    background: #ffffff;
}


/* HEADER */

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;

    width: 100%;

    border-bottom: 1px solid transparent;

    background: rgba(255, 249, 245, 0.72);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.site-header.scrolled {
    border-color: rgba(21, 25, 35, 0.07);

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

    box-shadow:
        0 0.6rem 2rem rgba(17, 24, 39, 0.04);
}

.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;

    min-height: 4.75rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    width: fit-content;
}

.site-brand-mark {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 0.55rem;

    color: #ffffff;
    background: var(--color-text);
}

.site-brand-mark svg {
    width: 1.05rem;
    height: 1.05rem;
}

.site-brand-text {
    display: flex;
    align-items: baseline;
    gap: 0.32rem;

    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;

    letter-spacing: -0.03em;
}

.site-brand-text small {
    font-size: 0.76rem;
    font-weight: 600;

    color: var(--color-text-muted);
}

.desktop-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.3rem, 2.5vw, 2.4rem);
}

.desktop-navigation a {
    position: relative;

    padding-block: 1rem;

    font-size: 0.82rem;
    font-weight: 600;

    color: var(--color-text-soft);
}

.desktop-navigation a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0.7rem;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background: var(--color-primary);

    transform: translateX(-50%);

    transition: width var(--transition);
}

.desktop-navigation a:hover {
    color: var(--color-text);
}

.desktop-navigation a:hover::after,
.desktop-navigation a[aria-current="location"]::after {
    width: 1.1rem;
}

.desktop-navigation a[aria-current="location"] {
    color: var(--color-text);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    min-height: 2.75rem;

    padding: 0.7rem 1rem;

    border-radius: 0.65rem;

    font-size: 0.78rem;
    font-weight: 700;

    color: #ffffff;
    background: var(--color-text);
}

.header-cta svg {
    width: 0.9rem;
    height: 0.9rem;
}

.header-cta:hover {
    background: var(--color-primary);
    transform: translateY(-1px);
}

.mobile-menu-button {
    display: none;
    place-items: center;

    width: 2.75rem;
    height: 2.75rem;

    border-radius: 0.7rem;

    color: var(--color-text);
    background: #ffffff;

    cursor: pointer;
}

.mobile-menu-button svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mobile-navigation {
    display: none;
}


/* HERO */

.hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100svh;

    padding:
        6.6rem
        0
        3rem;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--color-background-warm) 0%,
            #ffffff 90%
        );
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.28;

    background-image:
        radial-gradient(
            circle,
            rgba(240, 100, 10, 0.24) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 22%,
            #000 78%,
            transparent
        );
}

.hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1px);
}

.hero-glow-one {
    top: 5%;
    right: 3%;

    width: min(38rem, 55vw);
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            rgba(255, 183, 128, 0.22),
            transparent 68%
        );
}

.hero-glow-two {
    bottom: -25%;
    left: 32%;

    width: 35rem;
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            rgba(240, 100, 10, 0.1),
            transparent 70%
        );
}

.hero-container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}

.hero-content {
    max-width: 42rem;
}

.hero-title {
    margin:
        1.1rem
        0
        1.15rem;

    max-width: 14ch;

    font-size: clamp(2.8rem, 4.2vw, 4.35rem);
    font-weight: 800;
    line-height: 0.98;

    color: var(--color-text);
}

.hero-title span {
    color: var(--color-primary);
}

.hero-description {
    max-width: 36rem;

    margin-bottom: 1.35rem;

    font-size: clamp(0.95rem, 1vw, 1.05rem);
    line-height: 1.6;

    color: var(--color-text-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;

    margin-bottom: 1.35rem;
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
}

.hero-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    font-size: 0.72rem;
    font-weight: 600;

    color: var(--color-text-muted);
}

.hero-benefits svg {
    width: 0.88rem;
    height: 0.88rem;

    color: var(--color-primary);
}


/* HERO MOCKUP */

.hero-visual {
    position: relative;

    width: 100%;
}

.crm-stage {
    position: relative;

    width: 100%;

    perspective: 1600px;
}

.crm-window {
    position: relative;

    width: min(100%, 45rem);

    margin-left: auto;

    border: 1px solid rgba(21, 25, 35, 0.08);
    border-radius: var(--radius-md);

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 2.5rem 6rem rgba(17, 24, 39, 0.14);

    transform: none;
    isolation: isolate;
}

.crm-window-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    min-height: 2.85rem;

    padding-inline: 1rem;

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

    background: rgba(250, 250, 251, 0.96);
}

.window-controls {
    display: flex;
    gap: 0.32rem;
}

.window-controls span {
    width: 0.55rem;
    height: 0.55rem;

    border-radius: 50%;

    background: #d8dade;
}

.window-controls span:first-child {
    background: #ff755e;
}

.window-controls span:nth-child(2) {
    background: #ffbe45;
}

.window-controls span:nth-child(3) {
    background: #42c45a;
}

.crm-window-title {
    font-size: 0.66rem;
    font-weight: 700;

    color: var(--color-text-muted);
}

.crm-window-user {
    justify-self: end;

    display: grid;
    place-items: center;

    width: 1.55rem;
    height: 1.55rem;

    border-radius: 50%;

    font-size: 0.55rem;
    font-weight: 700;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.crm-layout {
    display: grid;
    grid-template-columns: 8.8rem minmax(0, 1fr);

    min-height: 25rem;
}

.crm-sidebar {
    display: flex;
    flex-direction: column;

    padding: 1rem 0.75rem 0.75rem;

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

    background: #fbfbfc;
}

.crm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0 0.35rem 1.3rem;

    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 800;
}

.crm-sidebar-logo {
    display: grid;
    place-items: center;

    width: 1.5rem;
    height: 1.5rem;

    border-radius: 0.4rem;

    color: #ffffff;
    background: var(--color-primary);
}

.crm-sidebar-logo svg {
    width: 0.8rem;
    height: 0.8rem;
}

.crm-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.crm-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    width: 100%;

    padding: 0.55rem 0.6rem;

    border-radius: 0.5rem;

    font-size: 0.61rem;
    font-weight: 600;

    color: #767d8a;
    background: transparent;

    cursor: default;
}

.crm-nav-item svg {
    width: 0.78rem;
    height: 0.78rem;
}

.crm-nav-item.active {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.crm-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    margin-top: auto;

    padding: 0.7rem 0.4rem 0;

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

.crm-avatar {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 1.55rem;
    height: 1.55rem;

    border-radius: 50%;

    font-size: 0.5rem;
    font-weight: 700;

    color: #ffffff;
    background: var(--color-text);
}

.crm-sidebar-user strong,
.crm-sidebar-user span {
    display: block;
}

.crm-sidebar-user strong {
    margin-bottom: 0.1rem;

    font-size: 0.66rem;
}

.crm-sidebar-user span {
    font-size: 0.47rem;

    color: var(--color-text-muted);
}

.crm-main {
    min-width: 0;

    padding: 1rem;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfc
        );
}

.crm-main-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1rem;
}

.crm-overline,
.crm-card-overline {
    display: block;

    margin-bottom: 0.16rem;

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--color-text-muted);
}

.crm-main-title,
.crm-card-title {
    margin: 0;

    letter-spacing: -0.03em;
}

.crm-main-title {
    font-size: 1rem;
}

.crm-icon-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border: 1px solid var(--color-border);
    border-radius: 0.55rem;

    color: var(--color-text-soft);
    background: #ffffff;
}

.crm-icon-button svg {
    width: 0.85rem;
    height: 0.85rem;
}

.notification-dot {
    position: absolute;
    top: 0.38rem;
    right: 0.38rem;

    width: 0.32rem;
    height: 0.32rem;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: var(--color-primary);
}

.crm-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;

    margin-bottom: 0.65rem;
}

.crm-stat {
    padding: 0.85rem;

    border: 1px solid var(--color-border);
    border-radius: 0.8rem;

    background: #ffffff;
}

.crm-stat-highlight {
    border-color: rgba(240, 100, 10, 0.22);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7f1
        );
}

.crm-stat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.55rem;

    font-size: 0.64rem;
    font-weight: 600;

    color: var(--color-text-muted);
}

.crm-stat-heading svg {
    width: 0.78rem;
    height: 0.78rem;

    color: var(--color-primary);
}

.crm-stat strong {
    display: block;

    margin-bottom: 0.35rem;

    font-family: var(--font-heading);
    font-size: 1.15rem;
}

.crm-stat small {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    font-size: 0.6rem;
    font-weight: 500;

    color: var(--color-success);
}

.crm-stat small svg {
    width: 0.58rem;
    height: 0.58rem;
}

.crm-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(9rem, 0.75fr);
    gap: 0.65rem;
}

.pipeline-card,
.activity-card {
    min-width: 0;

    padding: 0.9rem;

    border: 1px solid var(--color-border);
    border-radius: 0.85rem;

    background: #ffffff;
}

.crm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.85rem;
}

.crm-card-title {
    font-size: 0.72rem;
}

.crm-card-header button {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    padding: 0;

    font-size: 0.62rem;
    font-weight: 600;

    color: var(--color-primary);
    background: transparent;
}

.crm-card-header button svg {
    width: 0.6rem;
    height: 0.6rem;
}

.pipeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}

.pipeline-column {
    min-width: 0;

    padding: 0.45rem;

    border-radius: 0.6rem;

    background: #f7f8fa;
}

.pipeline-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.45rem;

    font-size: 0.58rem;
    font-weight: 700;

    color: var(--color-text-muted);
}

.pipeline-column-header small {
    display: grid;
    place-items: center;

    min-width: 1.05rem;
    height: 1.05rem;

    padding-inline: 0.2rem;

    border-radius: 999px;

    font-size: 0.55rem;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.lead-card {
    margin-bottom: 0.38rem;

    padding: 0.55rem;

    border: 1px solid var(--color-border);
    border-radius: 0.55rem;

    background: #ffffff;

    box-shadow:
        0 0.3rem 0.9rem rgba(17, 24, 39, 0.025);
}

.lead-card:last-child {
    margin-bottom: 0;
}

.lead-card-primary {
    border-color: rgba(240, 100, 10, 0.24);
}

.lead-card-company {
    display: block;

    margin-bottom: 0.25rem;

    overflow: hidden;

    font-size: 0.56rem;
    font-weight: 600;

    color: var(--color-primary);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-card strong {
    display: block;

    margin-bottom: 0.5rem;

    overflow: hidden;

    font-size: 0.64rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lead-card-footer > span:first-child {
    display: flex;
    align-items: center;
    gap: 0.15rem;

    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.lead-card-footer svg {
    width: 0.48rem;
    height: 0.48rem;
}

.mini-avatar {
    display: grid;
    place-items: center;

    width: 1.1rem;
    height: 1.1rem;

    border-radius: 50%;

    font-size: 0.35rem;
    font-weight: 700;

    color: #ffffff;
    background: var(--color-text);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;

    padding: 0.5rem 0;

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

.activity-item:last-child {
    border-bottom: 0;
}

.activity-icon {
    display: grid;
    place-items: center;

    width: 1.6rem;
    height: 1.6rem;

    border-radius: 0.45rem;

    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.activity-icon svg {
    width: 0.7rem;
    height: 0.7rem;
}

.activity-item strong,
.activity-item span {
    display: block;
}

.activity-item strong {
    margin-bottom: 0.1rem;

    font-size: 0.62rem;
}

.activity-item span,
.activity-item time {
    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.activity-item time {
    white-space: nowrap;
}


/* FLOATING CARDS */

.floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 0.7rem;

    padding: 0.75rem;

    border: 1px solid rgba(21, 25, 35, 0.08);
    border-radius: 0.8rem;

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

    box-shadow:
        0 1rem 2.5rem rgba(17, 24, 39, 0.12);

    backdrop-filter: blur(12px);
}

.floating-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    border-radius: 0.6rem;

    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.floating-icon-success {
    color: var(--color-success);
    background: rgba(31, 157, 116, 0.1);
}

.floating-icon-blue {
    color: var(--color-blue);
    background: rgba(57, 115, 232, 0.1);
}

.floating-icon svg {
    width: 0.88rem;
    height: 0.88rem;
}

.floating-card small,
.floating-card strong,
.floating-card span {
    display: block;
}

.floating-card small {
    margin-bottom: 0.12rem;

    font-size: 0.48rem;

    color: var(--color-text-muted);
}

.floating-card strong {
    font-size: 0.62rem;
}

.floating-card > div > span {
    margin-top: 0.12rem;

    font-size: 0.45rem;

    color: var(--color-text-muted);
}

.floating-card > svg {
    width: 0.8rem;
    height: 0.8rem;

    margin-left: 0.5rem;

    color: var(--color-success);
}

.floating-status {
    margin-left: 0.35rem;

    padding: 0.28rem 0.45rem;

    border-radius: 999px;

    font-size: 0.58rem !important;
    font-weight: 700;

    color: var(--color-primary-dark) !important;
    background: var(--color-primary-soft);
}

.floating-lead {
    top: -2rem;
    left: -1.5rem;

    animation:
        floatingLead 7s ease-in-out infinite;
}

.floating-assignment {
    right: -1rem;
    bottom: 7.5rem;

    animation:
        floatingAssignment 7s 0.8s ease-in-out infinite;
}

.floating-task {
    right: 4rem;
    bottom: -2.2rem;

    animation:
        floatingTask 7s 1.6s ease-in-out infinite;
}

@keyframes floatingLead {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.55rem);
    }
}

@keyframes floatingAssignment {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.5rem);
    }
}

@keyframes floatingTask {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.45rem);
    }
}

/* PROBLEMA */

.problem-section {
    position: relative;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 8vw, 8rem);

    overflow: hidden;

    background: #ffffff;
}

.problem-heading {
    max-width: 60rem;

    margin:
        0
        auto
        clamp(3.5rem, 6vw, 5.5rem);

    text-align: center;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 1.1rem;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: var(--color-primary);
}

.section-label svg {
    width: 0.9rem;
    height: 0.9rem;
}

.problem-heading h2 {
    margin-bottom: 1.2rem;

    font-size: clamp(2.25rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.03;

    color: var(--color-text);
}

.problem-heading h2 span {
    color: var(--color-primary);
}

.problem-heading p {
    max-width: 46rem;

    margin:
        0
        auto;

    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.7;

    color: var(--color-text-muted);
}


/* ESCENA */

.problem-experience {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
}

.problem-scene {
    position: relative;

    min-height: 34rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(240, 100, 10, 0.06),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #fbfbfc,
            #fffaf7
        );
}

.problem-scene::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.24;

    background-image:
        radial-gradient(
            circle,
            rgba(21, 25, 35, 0.18) 1px,
            transparent 1px
        );

    background-size: 22px 22px;
}


/* ORBITAS */

.problem-orbit {
    position: absolute;
    top: 50%;
    left: 50%;

    border: 1px dashed rgba(240, 100, 10, 0.17);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.problem-orbit-one {
    width: 20rem;
    height: 20rem;
}

.problem-orbit-two {
    width: 27rem;
    height: 27rem;

    border-color: rgba(21, 25, 35, 0.08);
}


/* CLIENTE */

.problem-client {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 11.5rem;

    padding:
        1.5rem
        1rem
        1.1rem;

    border: 1px solid rgba(240, 100, 10, 0.19);
    border-radius: 1.35rem;

    text-align: center;

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

    box-shadow:
        0 1.5rem 3.5rem rgba(17, 24, 39, 0.1);

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

    backdrop-filter: blur(12px);
}

.problem-client-avatar {
    display: grid;
    place-items: center;

    width: 3rem;
    height: 3rem;

    margin-bottom: 0.75rem;

    border-radius: 50%;

    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;

    color: #ffffff;
    background: var(--color-text);
}

.problem-client > span {
    margin-bottom: 0.18rem;

    font-size: 0.6rem;
    font-weight: 600;

    color: var(--color-text-muted);
}

.problem-client strong {
    margin-bottom: 0.8rem;

    font-family: var(--font-heading);
    font-size: 0.85rem;
}

.problem-client-status {
    padding: 0.5rem 0.6rem;

    border-radius: 0.55rem;

    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1.35;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}


/* FUENTES */

.problem-source {
    position: absolute;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 0.65rem;

    min-width: 9.5rem;

    padding: 0.7rem 0.8rem;

    border: 1px solid var(--color-border);
    border-radius: 0.8rem;

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

    box-shadow:
        0 0.8rem 2rem rgba(17, 24, 39, 0.06);

    backdrop-filter: blur(10px);
}

.problem-source-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    border-radius: 0.6rem;

    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.problem-source-icon svg {
    width: 0.88rem;
    height: 0.88rem;
}

.problem-source strong,
.problem-source span {
    display: block;
}

.problem-source strong {
    margin-bottom: 0.13rem;

    font-size: 0.65rem;
}

.problem-source span {
    font-size: 0.62rem;

    color: var(--color-text-muted);
}

.problem-orbit-item {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    animation: problemOrbit var(--orbit-duration) linear infinite;
    animation-delay: var(--orbit-delay);
    will-change: transform;
}

.problem-orbit-item .problem-source {
    top: 0;
    left: var(--orbit-radius);
    width: 10.5rem;
    animation: problemCounterOrbit var(--orbit-duration) linear infinite;
    animation-delay: var(--orbit-delay);
    transform: translate(-50%, -50%);
    will-change: transform;
}

.problem-orbit-item {
    --orbit-radius: 13.5rem;
    --orbit-duration: 48s;
}

.problem-orbit-item-excel { --orbit-delay: 0s; }
.problem-orbit-item-email { --orbit-delay: -8s; }
.problem-orbit-item-whatsapp { --orbit-delay: -16s; }
.problem-orbit-item-notes { --orbit-delay: -24s; }
.problem-orbit-item-files { --orbit-delay: -32s; }
.problem-orbit-item-phone { --orbit-delay: -40s; }

@media (max-width: 1240px) and (min-width: 961px) {
    .problem-orbit-item {
        width: auto;
        height: auto;
        animation: none;
        transform: none;
        will-change: auto;
    }

    .problem-orbit-item .problem-source {
        top: 0;
        left: 0;
        animation: none;
        transform: translate(-50%, -50%);
        will-change: auto;
    }

    .problem-orbit-item-excel { top: 12%; left: 16%; }
    .problem-orbit-item-email { top: 12%; left: 84%; }
    .problem-orbit-item-phone { top: 50%; left: 9%; }
    .problem-orbit-item-whatsapp { top: 50%; left: 91%; }
    .problem-orbit-item-files { top: 87%; left: 18%; }
    .problem-orbit-item-notes { top: 87%; left: 82%; }
}

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

@keyframes problemCounterOrbit {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}


/* CONSECUENCIAS */

.problem-consequences {
    display: flex;
    flex-direction: column;
}

.problem-consequence {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;

    padding:
        1.7rem
        0;

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

.problem-consequence:first-child {
    padding-top: 0;
}

.problem-consequence:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.problem-number {
    display: grid;
    place-items: center;

    width: 2.4rem;
    height: 2.4rem;

    border-radius: 50%;

    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.problem-consequence h3 {
    margin-bottom: 0.5rem;

    font-size: clamp(1rem, 1.35vw, 1.2rem);
    font-weight: 750;
    line-height: 1.25;

    letter-spacing: -0.025em;
}

.problem-consequence p {
    margin: 0;

    font-size: 0.88rem;
    line-height: 1.65;

    color: var(--color-text-muted);
}

/* SOLUCIÓN */

.solution-section {
    position: relative;
    padding: var(--section-space) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 18%, rgba(240, 100, 10, 0.10), transparent 28%),
        linear-gradient(180deg, #fff9f5 0%, #ffffff 100%);
}

.solution-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image: radial-gradient(circle, rgba(21, 25, 35, 0.14) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to left, #000, transparent 62%);
    pointer-events: none;
}

.solution-container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(17rem, 0.62fr) minmax(0, 1.38fr);
    grid-template-rows: auto auto minmax(8rem, auto) auto auto;
    align-items: start;
    gap: 1rem clamp(2rem, 4vw, 4rem);
}

.solution-content {
    display: contents;
}

.solution-content h2 {
    margin: 0 0 1.2rem;
    font-size: clamp(2.35rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
}

.solution-content h2 span {
    display: block;
    color: var(--color-primary);
}

.solution-content > .section-label {
    grid-column: 1;
    grid-row: 1;
    align-self: end;

    margin-bottom: 0;
}

.solution-content > h2 {
    grid-column: 1;
    grid-row: 2;
    align-self: start;

    margin-bottom: 0;
}

.solution-point:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;

    width: min(100%, 34rem);
}

.solution-point:nth-child(2) {
    grid-column: 1;
    grid-row: 4;
    align-self: center;

    width: 100%;
}

.solution-point:nth-child(3) {
    grid-column: 2;
    grid-row: 5;
    justify-self: end;

    width: min(100%, 34rem);
}

.solution-intro {
    grid-column: 1;
    grid-row: 3;
    align-self: start;

    max-width: 31rem;
    margin: 0;

    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.68;

    color: var(--color-text-muted);
}

.solution-points {
    display: contents;
}

.solution-point {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.9rem;

    min-width: 0;

    padding: 1rem 1.05rem;

    border: 1px solid rgba(21, 25, 35, 0.09);
    border-radius: 0.9rem;

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

    box-shadow:
        0 0.75rem 2rem rgba(17, 24, 39, 0.045);
}


.solution-point-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(240, 100, 10, 0.16);
    border-radius: 0.75rem;
    color: var(--color-primary);
    background: #ffffff;
    box-shadow: 0 0.55rem 1.4rem rgba(17, 24, 39, 0.04);
}

.solution-point-icon svg {
    width: 1rem;
    height: 1rem;
}

.solution-point h3 {
    margin-bottom: 0.28rem;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.solution-point p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.solution-link {
    grid-column: 1;
    grid-row: 5;
    align-self: center;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    width: fit-content;

    font-size: 0.9rem;
    font-weight: 700;

    color: var(--color-primary-dark);
}

.solution-link svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition);
}

.solution-link:hover svg {
    transform: translateX(0.25rem);
}

.solution-visual {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: center;

    min-width: 0;
    width: 100%;
}

.solution-flow {
    display: grid;
    grid-template-columns: minmax(8rem, 0.9fr) auto minmax(14.5rem, 1.35fr) auto minmax(8rem, 0.9fr);
    align-items: center;
    gap: 0.55rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid rgba(21, 25, 35, 0.09);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2rem 5rem rgba(17, 24, 39, 0.08);
}

.solution-flow-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.solution-flow-title {
    margin-bottom: 0.1rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.solution-flow-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 0.55rem 1.5rem rgba(17, 24, 39, 0.04);
}

.solution-flow-card > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.solution-flow-card svg {
    width: 0.85rem;
    height: 0.85rem;
}

.solution-flow-card strong,
.solution-flow-card small {
    display: block;
}

.solution-flow-card strong {
    margin-bottom: 0.08rem;
    font-size: 0.76rem;
}

.solution-flow-card small {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.solution-flow-connector {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--color-primary);
}

.solution-flow-connector span {
    width: 0.5rem;
    height: 1px;
    background: rgba(240, 100, 10, 0.28);
}

.solution-flow-connector svg {
    width: 0.8rem;
    height: 0.8rem;
}

.solution-core {
    position: relative;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid rgba(240, 100, 10, 0.24);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 100, 10, 0.12), transparent 38%),
        #ffffff;
    box-shadow: 0 1.3rem 3rem rgba(17, 24, 39, 0.09);
}

.solution-core-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.solution-core-badge svg {
    width: 0.78rem;
    height: 0.78rem;
}

.solution-core > strong {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.solution-core > p {
    margin-bottom: 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.solution-core-pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.solution-core-pipeline span {
    padding: 0.45rem 0.25rem;
    border-radius: 0.5rem;
    min-width: 0;
    font-size: 0.58rem;
    font-weight: 650;
    text-align: center;
    white-space: nowrap;
    color: var(--color-text-muted);
    background: var(--color-surface);
}

.solution-core-pipeline .done {
    color: var(--color-success);
    background: rgba(31, 157, 116, 0.09);
}

.solution-core-pipeline .active {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

/* BENEFICIOS */

.benefits-section {
    position: relative;

    padding:
        clamp(5.5rem, 9vw, 8.5rem)
        0;

    overflow: hidden;

    color: #ffffff;
    background: var(--color-dark);
}

.benefits-section::before {
    content: "";

    position: absolute;
    top: -18rem;
    left: 50%;

    width: 60rem;
    height: 38rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(240, 100, 10, 0.14),
            transparent 68%
        );

    transform: translateX(-50%);

    pointer-events: none;
}

.benefits-section::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.12;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.32) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 58%
        );

    pointer-events: none;
}

.benefits-section > .container {
    position: relative;
    z-index: 2;
}


/* CABECERA */

.benefits-heading {
    max-width: 72rem;

    margin:
        0
        auto
        clamp(3.5rem, 6vw, 5rem);

    text-align: center;
}

.benefits-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 1.1rem;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: #ff9b58;
}

.benefits-label svg {
    width: 0.9rem;
    height: 0.9rem;
}

.benefits-heading h2 {
    margin-bottom: 1.3rem;

    font-size: clamp(2.5rem, 4.8vw, 4.7rem);
    font-weight: 800;
    line-height: 1.01;

    color: #ffffff;
}

.benefits-heading h2 span {
    color: inherit;
}

.benefits-lines span {
    display: block;
    white-space: nowrap;
}

.benefits-lines span:nth-child(2) {
    color: var(--color-primary);
}

.benefits-heading p {
    max-width: 42rem;

    margin:
        0
        auto;

    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.62);
}


/* GRID */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.benefit-item {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 34rem;

    padding: clamp(1.25rem, 2vw, 1.7rem);

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transition:
        border-color 220ms ease,
        transform 220ms ease,
        background-color 220ms ease;
}

.benefit-item:hover {
    border-color: rgba(240, 100, 10, 0.32);

    transform: translateY(-0.35rem);
}

.benefit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1.6rem;
}

.benefit-top > span {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;

    color: rgba(255, 255, 255, 0.28);
}

.benefit-icon {
    display: grid;
    place-items: center;

    width: 2.6rem;
    height: 2.6rem;

    border: 1px solid rgba(240, 100, 10, 0.22);
    border-radius: 0.75rem;

    color: #ff9954;
    background: rgba(240, 100, 10, 0.1);
}

.benefit-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.benefit-copy {
    margin-bottom: 2rem;
}

.benefit-copy h3 {
    margin-bottom: 0.65rem;

    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    font-weight: 750;
    line-height: 1.15;

    color: #ffffff;
}

.benefit-copy p {
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.65;

    color: rgba(255, 255, 255, 0.57);
}

.benefit-visual {
    margin-top: auto;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;

    background: rgba(9, 14, 25, 0.58);

    box-shadow:
        0 1.5rem 3rem rgba(0, 0, 0, 0.14);
}


/* AHORRO */

.cost-visual {
    padding: 0.85rem;
}

.cost-tools {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cost-tool {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    padding: 0.55rem;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.65rem;

    background: rgba(255, 255, 255, 0.035);
}

.cost-tool-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 1.75rem;
    height: 1.75rem;

    border-radius: 0.5rem;

    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

.cost-tool-icon svg {
    width: 0.72rem;
    height: 0.72rem;
}

.cost-tool > span:last-child {
    min-width: 0;
}

.cost-tool strong,
.cost-tool small {
    display: block;
}

.cost-tool strong {
    margin-bottom: 0.1rem;

    font-size: 0.76rem;

    color: rgba(255, 255, 255, 0.88);
}

.cost-tool small {
    font-size: 0.66rem;

    color: rgba(255, 255, 255, 0.5);
}

.cost-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;

    padding: 0.65rem 0.2rem;
}

.cost-divider > span {
    height: 1px;

    background: rgba(255, 255, 255, 0.07);
}

.cost-divider > div {
    display: grid;
    place-items: center;

    width: 1.6rem;
    height: 1.6rem;

    border-radius: 50%;

    color: var(--color-primary);
    background: rgba(240, 100, 10, 0.12);
}

.cost-divider svg {
    width: 0.65rem;
    height: 0.65rem;
}

.cost-result {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;

    padding: 0.7rem;

    border: 1px solid rgba(240, 100, 10, 0.18);
    border-radius: 0.7rem;

    background: rgba(240, 100, 10, 0.075);
}

.cost-result > div {
    display: grid;
    place-items: center;

    width: 1.85rem;
    height: 1.85rem;

    border-radius: 0.55rem;

    color: var(--color-primary);
    background: rgba(240, 100, 10, 0.14);
}

.cost-result > div svg {
    width: 0.75rem;
    height: 0.75rem;
}

.cost-result small,
.cost-result strong {
    display: block;
}

.cost-result small {
    margin-bottom: 0.1rem;

    font-size: 0.64rem;

    color: rgba(255, 255, 255, 0.52);
}

.cost-result strong {
    font-size: 0.78rem;
}

.cost-result > svg {
    width: 0.8rem;
    height: 0.8rem;

    color: var(--color-success);
}


/* PRODUCTIVIDAD */

.productivity-visual {
    padding: 0.85rem;
}

.productivity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.75rem;

    font-size: 0.76rem;
    font-weight: 600;

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

.productivity-status {
    padding: 0.25rem 0.4rem;

    border-radius: 999px;

    font-size: 0.64rem;

    color: var(--color-success);
    background: rgba(31, 157, 116, 0.1);
}

.productivity-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.productivity-task {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;

    padding: 0.6rem;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.65rem;

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

.productivity-task > div {
    display: grid;
    place-items: center;

    width: 1.65rem;
    height: 1.65rem;

    border-radius: 0.5rem;

    color: rgba(255, 255, 255, 0.44);
    background: rgba(255, 255, 255, 0.055);
}

.productivity-task > div svg {
    width: 0.66rem;
    height: 0.66rem;
}

.productivity-task.completed > div {
    color: var(--color-success);
    background: rgba(31, 157, 116, 0.1);
}

.productivity-task.active {
    border-color: rgba(240, 100, 10, 0.22);

    background: rgba(240, 100, 10, 0.07);
}

.productivity-task.active > div {
    color: var(--color-primary);
    background: rgba(240, 100, 10, 0.13);
}

.productivity-task strong,
.productivity-task small {
    display: block;
}

.productivity-task strong {
    margin-bottom: 0.1rem;

    font-size: 0.74rem;

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

.productivity-task small {
    font-size: 0.64rem;

    color: rgba(255, 255, 255, 0.5);
}

.task-now {
    padding: 0.24rem 0.4rem;

    border-radius: 999px;

    font-size: 0.6rem;
    font-weight: 700;

    color: #ff9c5a;
    background: rgba(240, 100, 10, 0.12);
}

.productivity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 0.7rem;
    padding-top: 0.7rem;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

    font-size: 0.66rem;

    color: rgba(255, 255, 255, 0.52);
}

.productivity-footer svg {
    width: 0.65rem;
    height: 0.65rem;

    color: var(--color-primary);
}


/* CONTROL */

.control-visual {
    padding: 0.85rem;
}

.control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.75rem;
}

.control-header span,
.control-header strong {
    display: block;
}

.control-header span {
    margin-bottom: 0.1rem;

    font-size: 0.64rem;

    color: rgba(255, 255, 255, 0.5);
}

.control-header strong {
    font-size: 0.8rem;
}

.control-header button {
    display: grid;
    place-items: center;

    width: 1.7rem;
    height: 1.7rem;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.5rem;

    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
}

.control-header button svg {
    width: 0.68rem;
    height: 0.68rem;
}

.control-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;

    margin-bottom: 0.75rem;
}

.control-metrics > div {
    padding: 0.55rem;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.6rem;

    background: rgba(255, 255, 255, 0.035);
}

.control-metrics span,
.control-metrics strong {
    display: block;
}

.control-metrics span {
    margin-bottom: 0.25rem;

    font-size: 0.6rem;

    color: rgba(255, 255, 255, 0.48);
}

.control-metrics strong {
    font-family: var(--font-heading);
    font-size: 1rem;
}

.control-activity {
    display: flex;
    flex-direction: column;
}

.control-activity-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;

    padding: 0.55rem 0;

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

.control-activity-row:last-child {
    border-bottom: 0;
}

.control-dot {
    width: 0.4rem;
    height: 0.4rem;

    border-radius: 50%;

    background: var(--color-primary);
}

.control-dot-success {
    background: var(--color-success);
}

.control-dot-warning {
    background: var(--color-warning);
}

.control-activity-row strong,
.control-activity-row small {
    display: block;
}

.control-activity-row strong {
    margin-bottom: 0.08rem;

    font-size: 0.72rem;

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

.control-activity-row small,
.control-activity-row time {
    font-size: 0.62rem;

    color: rgba(255, 255, 255, 0.48);
}


/* CIERRE */

.benefits-closing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;

    margin-top: clamp(3rem, 5vw, 4.5rem);

    text-align: center;
}

.benefits-closing > span {
    padding: 0.45rem 0.65rem;

    border: 1px solid rgba(240, 100, 10, 0.2);
    border-radius: 999px;

    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: #ff9c5a;
    background: rgba(240, 100, 10, 0.08);
}

.benefits-closing p {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.5vw, 1.3rem);

    color: rgba(255, 255, 255, 0.58);
}

.benefits-closing strong {
    color: #ffffff;
}

/* FUNCIONALIDADES */

.features-section {
    padding:
        clamp(5.5rem, 9vw, 8.5rem)
        0;

    background: #ffffff;
}

.features-heading {
    max-width: 62rem;

    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.features-heading h2 {
    margin-bottom: 1.2rem;

    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.03;
}

.features-heading h2 span {
    color: var(--color-primary);
}

.features-heading p {
    max-width: 48rem;

    margin: 0;

    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.7;

    color: var(--color-text-muted);
}


/* SHOWCASE */

.features-showcase {
    display: grid;
    grid-template-columns: minmax(15rem, 0.32fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);

    align-items: stretch;
}


/* NAVEGACIÓN */

.features-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;

    padding: 0.6rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface-soft);
}

.feature-tab {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;

    width: 100%;

    padding: 0.85rem;

    border: 1px solid transparent;
    border-radius: 0.8rem;

    text-align: left;

    color: var(--color-text-muted);
    background: transparent;

    cursor: pointer;
}

.feature-tab:hover {
    background: #ffffff;
}

.feature-tab.active {
    border-color: rgba(240, 100, 10, 0.14);

    color: var(--color-text);
    background: #ffffff;

    box-shadow:
        0 0.6rem 1.8rem rgba(17, 24, 39, 0.055);
}

.feature-tab-icon {
    display: grid;
    place-items: center;

    width: 2.35rem;
    height: 2.35rem;

    border-radius: 0.65rem;

    color: var(--color-text-muted);
    background: #ffffff;
}

.feature-tab.active .feature-tab-icon {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.feature-tab-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.feature-tab-copy {
    min-width: 0;
}

.feature-tab-copy strong,
.feature-tab-copy small {
    display: block;
}

.feature-tab-copy strong {
    margin-bottom: 0.17rem;

    font-size: 0.78rem;
}

.feature-tab-copy small {
    overflow: hidden;

    font-size: 0.7rem;

    color: var(--color-text-muted);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-tab > svg {
    width: 0.85rem;
    height: 0.85rem;

    opacity: 0;

    color: var(--color-primary);

    transform: translateX(-0.3rem);
}

.feature-tab.active > svg {
    opacity: 1;

    transform: translateX(0);
}


/* PRODUCTO */

.features-product {
    min-width: 0;

    border: 1px solid rgba(21, 25, 35, 0.09);
    border-radius: var(--radius-md);

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 2rem 5rem rgba(17, 24, 39, 0.09);
}

.features-product-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    min-height: 2.8rem;

    padding-inline: 1rem;

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

    background: #fafafb;
}

.product-dots {
    display: flex;
    gap: 0.3rem;
}

.product-dots span {
    width: 0.5rem;
    height: 0.5rem;

    border-radius: 50%;

    background: #d8dade;
}

.product-dots span:first-child {
    background: #ff755e;
}

.product-dots span:nth-child(2) {
    background: #ffbe45;
}

.product-dots span:nth-child(3) {
    background: #42c45a;
}

.features-product-bar > span {
    font-size: 0.58rem;
    font-weight: 700;

    color: var(--color-text-muted);
}

.product-user {
    justify-self: end;

    display: grid;
    place-items: center;

    width: 1.6rem;
    height: 1.6rem;

    border-radius: 50%;

    font-size: 0.5rem;
    font-weight: 700;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}


/* PANELES */

.feature-panels {
    min-height: 34rem;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fafb
        );
}

.feature-panel {
    min-height: 34rem;

    padding: clamp(1.2rem, 2.3vw, 2rem);

    animation:
        featurePanelIn
        300ms
        ease;
}

.feature-panel[hidden] {
    display: none;
}

@keyframes featurePanelIn {

    from {
        opacity: 0;
        transform: translateY(0.35rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;

    margin-bottom: 1.6rem;
}

.feature-panel-heading > div {
    max-width: 33rem;
}

.feature-panel-label {
    display: block;

    margin-bottom: 0.4rem;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--color-primary);
}

.feature-panel-heading h3 {
    margin-bottom: 0.55rem;

    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.feature-panel-heading p {
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.6;

    color: var(--color-text-muted);
}

.feature-panel-heading > button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    flex: 0 0 auto;

    padding: 0.55rem 0.7rem;

    border-radius: 0.55rem;

    font-size: 0.66rem;
    font-weight: 700;

    color: #ffffff;
    background: var(--color-primary);
}

.feature-panel-heading > button svg {
    width: 0.65rem;
    height: 0.65rem;
}


/* CLIENTES */

.feature-client-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(13rem, 0.85fr);
    gap: 0.8rem;
}

.feature-client-profile,
.feature-client-side article {
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;

    background: #ffffff;
}

.feature-client-profile {
    padding: 1rem;
}

.feature-client-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;

    padding-bottom: 1rem;

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

.feature-client-avatar {
    display: grid;
    place-items: center;

    width: 2.7rem;
    height: 2.7rem;

    border-radius: 0.75rem;

    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;

    color: #ffffff;
    background: var(--color-text);
}

.feature-client-top h4 {
    margin: 0 0 0.2rem;

    font-family: var(--font-heading);
    font-size: 0.78rem;
}

.feature-client-top div > span {
    display: inline-flex;

    padding: 0.22rem 0.4rem;

    border-radius: 999px;

    font-size: 0.56rem;
    font-weight: 700;

    color: var(--color-success);
    background: rgba(31, 157, 116, 0.09);
}

.feature-client-top button {
    display: grid;
    place-items: center;

    width: 1.8rem;
    height: 1.8rem;

    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: 0.5rem;

    color: var(--color-text-muted);
    background: #ffffff;
}

.feature-client-top button svg {
    width: 0.75rem;
    height: 0.75rem;
}

.feature-client-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;

    padding:
        1rem
        0;
}

.feature-client-data > div {
    padding: 0.65rem;

    border-radius: 0.6rem;

    background: var(--color-surface);
}

.feature-client-data span,
.feature-client-data strong {
    display: block;
}

.feature-client-data span {
    margin-bottom: 0.18rem;

    font-size: 0.58rem;

    color: var(--color-text-muted);
}

.feature-client-data strong {
    font-size: 0.8rem;
}

.feature-client-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.feature-client-tags span {
    padding: 0.3rem 0.45rem;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    font-size: 0.58rem;
    font-weight: 600;

    color: var(--color-text-muted);
}

.feature-client-side {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.feature-client-side article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;

    padding: 0.75rem;
}

.feature-client-side article > span:first-child {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 0.55rem;

    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.feature-client-side article > span:first-child svg {
    width: 0.8rem;
    height: 0.8rem;
}

.feature-client-side small,
.feature-client-side strong {
    display: block;
}

.feature-client-side small {
    margin-bottom: 0.12rem;

    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.feature-client-side strong {
    font-size: 0.65rem;
}

.feature-client-side b {
    font-size: 0.65rem;

    color: var(--color-primary-dark);
}

.feature-client-side article > svg {
    width: 0.7rem;
    height: 0.7rem;

    color: var(--color-text-muted);
}


/* KANBAN */

.feature-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.feature-kanban-column {
    padding: 0.55rem;

    border-radius: 0.75rem;

    background: #f4f5f7;
}

.feature-kanban-column.active {
    background: #fff5ee;
}

.feature-kanban-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.55rem;

    font-size: 0.6rem;
    font-weight: 700;

    color: var(--color-text-muted);
}

.feature-kanban-heading small {
    display: grid;
    place-items: center;

    min-width: 1.2rem;
    height: 1.2rem;

    border-radius: 999px;

    font-size: 0.54rem;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.feature-kanban-column article {
    margin-bottom: 0.45rem;

    padding: 0.65rem;

    border: 1px solid var(--color-border);
    border-radius: 0.65rem;

    background: #ffffff;

    box-shadow:
        0 0.5rem 1.5rem rgba(17, 24, 39, 0.035);
}

.feature-kanban-column article:last-child {
    margin-bottom: 0;
}

.feature-kanban-column article > span {
    display: block;

    margin-bottom: 0.25rem;

    font-size: 0.56rem;

    color: var(--color-primary);
}

.feature-kanban-column article > strong {
    display: block;

    margin-bottom: 0.8rem;

    font-size: 0.66rem;
}

.feature-kanban-column article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feature-kanban-column article small {
    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.feature-kanban-column article b {
    display: grid;
    place-items: center;

    width: 1.25rem;
    height: 1.25rem;

    border-radius: 50%;

    font-size: 0.34rem;

    color: #ffffff;
    background: var(--color-text);
}

.feature-kanban-column article.won {
    border-color: rgba(31, 157, 116, 0.18);
}

.feature-kanban-column article.won svg {
    width: 0.75rem;
    height: 0.75rem;

    color: var(--color-success);
}


/* TIMELINE */

.feature-timeline {
    max-width: 39rem;

    margin:
        1rem
        auto
        0;
}

.feature-timeline article {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;

    min-height: 5rem;
}

.feature-timeline-line {
    position: absolute;
    top: 2.1rem;
    bottom: 0;
    left: 1rem;

    width: 1px;

    background: var(--color-border);
}

.feature-timeline-icon {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border: 1px solid rgba(240, 100, 10, 0.15);
    border-radius: 0.6rem;

    color: var(--color-primary);
    background: #ffffff;
}

.feature-timeline-icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

.feature-timeline-content > span {
    display: block;

    margin-bottom: 0.15rem;

    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.feature-timeline-content strong {
    display: block;

    margin-bottom: 0.22rem;

    font-size: 0.68rem;
}

.feature-timeline-content p {
    margin: 0;

    font-size: 0.6rem;
    line-height: 1.5;

    color: var(--color-text-muted);
}

.feature-timeline-tag {
    height: fit-content;

    padding: 0.28rem 0.42rem;

    border-radius: 999px;

    font-size: 0.54rem;
    font-weight: 600;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}


/* DOCUMENTOS */

.feature-documents {
    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: 0.85rem;

    background: #ffffff;
}

.feature-document-header,
.feature-documents article {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 0.7fr 0.7fr auto;
    align-items: center;
    gap: 1rem;
}

.feature-document-header {
    padding: 0.65rem 0.8rem;

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

    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--color-text-muted);
    background: #fafafb;
}

.feature-documents article {
    padding: 0.75rem 0.8rem;

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

.feature-documents article:last-child {
    border-bottom: 0;
}

.feature-file {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    min-width: 0;
}

.feature-file > span {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    border-radius: 0.55rem;

    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.feature-file svg {
    width: 0.75rem;
    height: 0.75rem;
}

.feature-file strong,
.feature-file small {
    display: block;
}

.feature-file strong {
    overflow: hidden;

    margin-bottom: 0.12rem;

    font-size: 0.64rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-file small,
.feature-documents time {
    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.file-type {
    width: fit-content;

    padding: 0.28rem 0.4rem;

    border-radius: 999px;

    font-size: 0.54rem;
    font-weight: 600;

    color: var(--color-text-soft);
    background: var(--color-surface);
}

.feature-documents article > button {
    display: grid;
    place-items: center;

    width: 1.8rem;
    height: 1.8rem;

    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: 0.5rem;

    color: var(--color-text-muted);
    background: #ffffff;
}

.feature-documents article > button svg {
    width: 0.7rem;
    height: 0.7rem;
}


/* EQUIPO */

.feature-period {
    flex: 0 0 auto;

    padding: 0.4rem 0.55rem;

    border: 1px solid var(--color-border);
    border-radius: 0.5rem;

    font-size: 0.42rem;
    font-weight: 600;

    color: var(--color-text-muted);
    background: #ffffff;
}

.feature-team-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;

    margin-bottom: 0.8rem;
}

.feature-team-summary article {
    padding: 0.75rem;

    border: 1px solid var(--color-border);
    border-radius: 0.7rem;

    background: #ffffff;
}

.feature-team-summary article > span,
.feature-team-summary strong,
.feature-team-summary small {
    display: block;
}

.feature-team-summary article > span {
    margin-bottom: 0.35rem;

    font-size: 0.58rem;

    color: var(--color-text-muted);
}

.feature-team-summary strong {
    margin-bottom: 0.2rem;

    font-family: var(--font-heading);
    font-size: 0.85rem;
}

.feature-team-summary small {
    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.feature-team-summary article > div,
.team-progress > div {
    height: 0.3rem;

    margin-top: 0.65rem;

    overflow: hidden;

    border-radius: 999px;

    background: var(--color-surface);
}

.feature-team-summary article > div > span,
.team-progress > div > span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--color-primary);
}

.feature-team-list {
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;

    overflow: hidden;

    background: #ffffff;
}

.feature-team-list > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.8fr);
    align-items: center;
    gap: 1rem;

    padding: 0.7rem 0.8rem;

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

.feature-team-list > article:last-child {
    border-bottom: 0;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.team-member > span {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 50%;

    font-size: 0.55rem;
    font-weight: 700;

    color: #ffffff;
    background: var(--color-text);
}

.team-member strong,
.team-member small {
    display: block;
}

.team-member strong {
    margin-bottom: 0.1rem;

    font-size: 0.45rem;
}

.team-member small {
    font-size: 0.35rem;

    color: var(--color-text-muted);
}

.team-progress > span {
    display: flex;
    justify-content: space-between;

    font-size: 0.36rem;
}

.team-progress small {
    color: var(--color-text-muted);
}

.team-progress strong {
    font-size: 0.62rem;
}


/* AUTOMATIZACIONES */

.automation-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    flex: 0 0 auto;

    padding: 0.38rem 0.5rem;

    border-radius: 999px;

    font-size: 0.56rem;
    font-weight: 700;

    color: var(--color-success);
    background: rgba(31, 157, 116, 0.08);
}

.automation-live svg {
    width: 0.4rem;
    height: 0.4rem;

    fill: currentColor;
}

.automation-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 37rem;

    margin-inline: auto;

    padding: 1rem;

    border: 1px dashed var(--color-border-strong);
    border-radius: 1rem;

    background:
        radial-gradient(
            circle,
            rgba(21, 25, 35, 0.13) 1px,
            transparent 1px
        );

    background-size: 20px 20px;
}

.automation-node {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;

    width: min(100%, 22rem);

    padding: 0.7rem;

    border: 1px solid var(--color-border);
    border-radius: 0.7rem;

    background: #ffffff;

    box-shadow:
        0 0.75rem 1.8rem rgba(17, 24, 39, 0.06);
}

.automation-node > span {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 0.55rem;

    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.automation-node > span svg {
    width: 0.8rem;
    height: 0.8rem;
}

.automation-node small,
.automation-node strong {
    display: block;
}

.automation-node small {
    margin-bottom: 0.1rem;

    font-size: 0.56rem;

    color: var(--color-text-muted);
}

.automation-node strong {
    font-size: 0.65rem;
}

.automation-node > svg {
    width: 0.7rem;
    height: 0.7rem;

    color: var(--color-success);
}

.automation-trigger {
    border-color: rgba(240, 100, 10, 0.22);
}

.automation-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.automation-connector span {
    width: 1px;
    height: 1rem;

    background: var(--color-border-strong);
}

.automation-connector svg {
    width: 0.7rem;
    height: 0.7rem;

    color: var(--color-text-muted);
}

.automation-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;

    width: 100%;
}

.automation-split .automation-node {
    width: 100%;
}

/* CÓMO TRABAJAMOS */

.process-section {
    position: relative;
    padding: var(--section-space) 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
}

.process-container {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: clamp(4rem, 8vw, 8rem);
}

.process-content {
    position: sticky;
    top: 8rem;
    max-width: 36rem;
}

.process-content h2 {
    margin: 0 0 1.2rem;
    font-size: clamp(2.35rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
}

.process-content h2 span {
    display: block;
    color: var(--color-primary);
}

.process-content > p {
    margin-bottom: 1.6rem;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.68;
    color: var(--color-text-muted);
}

.process-highlight {
    padding: 1rem 1.1rem;
    border-left: 3px solid var(--color-primary);
    border-radius: 0 0.8rem 0.8rem 0;
    background: linear-gradient(90deg, var(--color-primary-soft), rgba(255,255,255,0));
}

.process-highlight p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.process-highlight strong {
    color: var(--color-text);
}

.process-steps {
    display: flex;
    flex-direction: column;
}

.process-step {
    position: relative;
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 1.25rem;
    min-height: 11rem;
}

.process-step-number {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border: 1px solid rgba(240, 100, 10, 0.22);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    background: #ffffff;
    box-shadow: 0 0.75rem 1.8rem rgba(17, 24, 39, 0.06);
}

.process-step-line {
    position: absolute;
    top: 3.6rem;
    bottom: 0;
    left: 1.68rem;
    width: 1px;
    background: linear-gradient(to bottom, rgba(240, 100, 10, 0.34), var(--color-border));
}

.process-step-content {
    margin-bottom: 1.5rem;
    padding: 0.2rem 0 1.8rem;
    border-bottom: 1px solid var(--color-border);
}

.process-step:last-child .process-step-content {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.process-step-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.process-step-content h3 {
    margin-bottom: 0.45rem;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.2;
}

.process-step-content p {
    max-width: 31rem;
    margin: 0 0 0.8rem;
    font-size: 0.88rem;
    line-height: 1.62;
    color: var(--color-text-muted);
}

.process-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.process-tags span {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 650;
    color: var(--color-text-muted);
    background: #ffffff;
}

/* CALI */

.cali-section {
    position: relative;

    padding:
        clamp(5.5rem, 9vw, 8.5rem)
        0;

    overflow: hidden;

    color: #ffffff;
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(240, 100, 10, 0.15),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #111827,
            #0c1322
        );
}

.cali-section::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.12;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.28) 1px,
            transparent 1px
        );

    background-size: 26px 26px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 30%,
            #000 80%,
            transparent
        );
}

.cali-container {
    position: relative;
    z-index: 2;
    display: block;
}


/* CONTENIDO */

.cali-content {
    max-width: 56rem;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
    text-align: center;
}

.cali-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 1.1rem;

    padding:
        0.45rem
        0.65rem;

    border:
        1px solid
        rgba(240, 100, 10, 0.28);

    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #ff9a56;

    background:
        rgba(240, 100, 10, 0.08);
}

.cali-eyebrow svg {
    width: 0.85rem;
    height: 0.85rem;
}

.cali-content h2 {
    margin:
        0
        0
        1.3rem;

    font-size:
        clamp(2.4rem, 4vw, 4rem);

    font-weight: 800;
    line-height: 1.02;

    color: #ffffff;
}

.cali-content h2 span {
    display: block;

    color: var(--color-primary);
}

.cali-intro {
    margin-bottom: 1.8rem;

    font-size:
        clamp(0.98rem, 1.1vw, 1.06rem);

    line-height: 1.7;

    color:
        rgba(255, 255, 255, 0.6);
}


/* BENEFICIOS */

.cali-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 2rem 0 1.8rem;
    text-align: left;
}

.cali-benefits > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;

    padding: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
}


.cali-benefits > div > svg {
    width: 1rem;
    height: 1rem;

    color: #ff9854;
}

.cali-benefits strong,
.cali-benefits small {
    display: block;
}

.cali-benefits strong {
    margin-bottom: 0.15rem;

    font-size: 0.78rem;

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

.cali-benefits small {
    font-size: 0.7rem;
    line-height: 1.45;

    color:
        rgba(255, 255, 255, 0.42);
}


/* CTA */

.cali-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    min-height: 3rem;

    padding:
        0.8rem
        1rem;

    border-radius: 0.7rem;

    font-size: 0.78rem;
    font-weight: 700;

    color: #ffffff;

    background:
        var(--color-primary);

    box-shadow:
        0 0.8rem 2rem
        rgba(240, 100, 10, 0.2);
}

.cali-cta:hover {
    background:
        var(--color-primary-dark);

    transform:
        translateY(-2px);
}

.cali-cta svg {
    width: 0.9rem;
    height: 0.9rem;
}


/* VISUAL */

.cali-visual {
    width: min(100%, 72rem);
    min-width: 0;
    margin-inline: auto;
}

.cali-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1.08fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 0.8rem;
}


/* CARDS */

.cali-flow-card {
    min-width: 0;

    padding: 1rem;

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

    border-radius: 0.9rem;

    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.14);
}


/* FLECHAS */

.cali-flow-arrow {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cali-flow-arrow > span {
    width: 0.6rem;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.12);
}

.cali-flow-arrow > div {
    display: grid;
    place-items: center;

    width: 1.6rem;
    height: 1.6rem;

    border-radius: 50%;

    color:
        var(--color-primary);

    background:
        rgba(240, 100, 10, 0.12);
}

.cali-flow-arrow svg {
    width: 0.65rem;
    height: 0.65rem;
}


/* BUSCADOR */

.cali-flow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.7rem;
}

.cali-flow-header > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    font-size: 0.78rem;
    font-weight: 700;

    color: #ff9854;
}

.cali-flow-header svg {
    width: 0.78rem;
    height: 0.78rem;
}

.cali-flow-header small {
    font-size: 0.64rem;

    color:
        rgba(255, 255, 255, 0.35);
}

.cali-search-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cali-search-fields div {
    padding: 0.62rem;

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

    border-radius: 0.55rem;

    background:
        rgba(255, 255, 255, 0.035);
}

.cali-search-fields span,
.cali-search-fields strong {
    display: block;
}

.cali-search-fields span {
    margin-bottom: 0.12rem;

    font-size: 0.64rem;

    color:
        rgba(255, 255, 255, 0.48);
}

.cali-search-fields strong {
    overflow: hidden;

    font-size: 0.76rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.cali-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    margin-top: 0.65rem;

    padding: 0.62rem;

    border-radius: 0.55rem;

    font-size: 0.72rem;
    font-weight: 700;

    color: #ffffff;

    background:
        var(--color-primary);
}

.cali-search-button svg {
    width: 0.72rem;
    height: 0.72rem;
}


/* RESULTADOS */

.cali-results-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;

    margin-bottom: 0.65rem;
}

.cali-results-top span,
.cali-results-top strong {
    display: block;
}

.cali-results-top > div > span {
    margin-bottom: 0.1rem;

    font-size: 0.64rem;

    color:
        rgba(255, 255, 255, 0.48);
}

.cali-results-top strong {
    font-size: 0.76rem;
}

.cali-results-count {
    padding:
        0.25rem
        0.35rem;

    border-radius: 999px;

    font-size: 0.62rem !important;
    font-weight: 700;

    color: #ff9b58 !important;

    background:
        rgba(240, 100, 10, 0.11);
}

.cali-company-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cali-company-list article {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 0.5rem;

    padding: 0.58rem;

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

    border-radius: 0.55rem;

    background:
        rgba(255, 255, 255, 0.025);
}

.cali-company-list article.selected {
    border-color:
        rgba(240, 100, 10, 0.18);

    background:
        rgba(240, 100, 10, 0.06);
}

.cali-company-check {
    display: grid;
    place-items: center;

    width: 1.4rem;
    height: 1.4rem;

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

    border-radius: 0.35rem;
}

.selected .cali-company-check {
    color: #ffffff;

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);
}

.cali-company-check svg {
    width: 0.55rem;
    height: 0.55rem;
}

.cali-company-list strong,
.cali-company-list small {
    display: block;
}

.cali-company-list strong {
    margin-bottom: 0.1rem;

    font-size: 0.74rem;
}

.cali-company-list small {
    font-size: 0.62rem;

    color:
        rgba(255, 255, 255, 0.48);
}

.cali-company-contact {
    font-size: 0.62rem;

    color:
        rgba(255, 255, 255, 0.3);
}


/* CRM */

.cali-crm-top {
    display: grid;
    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.65rem;
}

.cali-crm-icon {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 0.5rem;

    color:
        var(--color-primary);

    background:
        rgba(240, 100, 10, 0.12);
}

.cali-crm-icon svg {
    width: 0.75rem;
    height: 0.75rem;
}

.cali-crm-top span,
.cali-crm-top strong {
    display: block;
}

.cali-crm-top > div:nth-child(2) > span {
    margin-bottom: 0.08rem;

    font-size: 0.64rem;

    color:
        rgba(255, 255, 255, 0.48);
}

.cali-crm-top strong {
    font-size: 0.76rem;
}

.cali-live {
    display: inline-flex !important;
    align-items: center;
    gap: 0.22rem;

    font-size: 0.62rem !important;

    color:
        var(--color-success);
}

.cali-live svg {
    width: 0.35rem;
    height: 0.35rem;

    fill: currentColor;
}


/* LEADS CRM */

.cali-crm-lead {
    display: grid;
    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 0.45rem;

    padding:
        0.62rem
        0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
}

.cali-crm-avatar {
    display: grid;
    place-items: center;

    width: 1.55rem;
    height: 1.55rem;

    border-radius: 0.45rem;

    font-size: 0.62rem;
    font-weight: 700;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.1);
}

.cali-crm-lead span,
.cali-crm-lead strong,
.cali-crm-lead small {
    display: block;
}

.cali-crm-lead span {
    margin-bottom: 0.07rem;

    font-size: 0.62rem;

    color:
        var(--color-primary);
}

.cali-crm-lead strong {
    margin-bottom: 0.07rem;

    font-size: 0.74rem;
}

.cali-crm-lead small {
    font-size: 0.62rem;

    color:
        rgba(255, 255, 255, 0.46);
}

.cali-crm-lead > svg {
    width: 0.6rem;
    height: 0.6rem;

    color:
        rgba(255, 255, 255, 0.3);
}

.cali-crm-footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;

    margin-top: 0.6rem;

    padding: 0.45rem;

    border-radius: 0.5rem;

    font-size: 0.64rem;

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

    background:
        rgba(31, 157, 116, 0.07);
}

.cali-crm-footer svg {
    width: 0.6rem;
    height: 0.6rem;

    color:
        var(--color-success);
}


/* RESUMEN */

.cali-flow-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    margin-top: 1.1rem;
}

.cali-flow-summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    font-size: 0.7rem;
    font-weight: 600;

    color:
        rgba(255, 255, 255, 0.6);
}

.cali-flow-summary span svg {
    width: 0.7rem;
    height: 0.7rem;

    color:
        var(--color-primary);
}

.cali-flow-summary > svg {
    width: 0.7rem;
    height: 0.7rem;

    color:
        rgba(255, 255, 255, 0.22);
}

/* TESTIMONIOS */

.testimonials-section {
    position: relative;
    padding: var(--section-space) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(240, 100, 10, 0.07), transparent 24%),
        linear-gradient(180deg, #ffffff, #fffaf7);
}

.testimonials-heading {
    max-width: 58rem;
    margin: 0 auto 1.7rem;
    text-align: center;
}

.testimonials-heading h2 {
    margin-bottom: 1.1rem;
    font-size: clamp(2.35rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.03;
}

.testimonials-heading h2 span {
    color: var(--color-primary);
}

.testimonials-heading p {
    max-width: 40rem;
    margin: 0 auto;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.68;
    color: var(--color-text-muted);
}


.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 20rem;
    padding: clamp(1.3rem, 2.2vw, 1.7rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: 0 1rem 3rem rgba(17, 24, 39, 0.05);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.testimonial-card:hover {
    transform: translateY(-0.3rem);
    border-color: rgba(240, 100, 10, 0.2);
    box-shadow: 0 1.5rem 3.5rem rgba(17, 24, 39, 0.08);
}

.testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.35rem;
}

.testimonial-stars {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    color: var(--color-primary);
}

.testimonial-stars svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

.testimonial-tag {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
}

.testimonial-card blockquote {
    margin: 0 0 1.8rem;
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(145deg, var(--color-text), #303848);
}

.testimonial-author strong,
.testimonial-author span {
    display: block;
}

.testimonial-author strong {
    margin-bottom: 0.12rem;
    font-size: 0.8rem;
}

.testimonial-author span {
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* RESPONSIVE */

@media (max-width: 1120px) {

    .desktop-navigation {
        gap: 1.2rem;
    }

    .desktop-navigation a {
        font-size: 0.76rem;
    }

    .header-cta {
        font-size: 0.72rem;
    }

    .hero-container {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 3rem;
    }

    .crm-window {
        transform: none;
    }

    .floating-lead {
        left: -0.5rem;
    }

    .floating-assignment {
        right: -0.5rem;
    }
}

@media (max-width: 960px) {

    .header-container {
        grid-template-columns: 1fr auto;
    }

    .desktop-navigation,
    .header-cta {
        display: none;
    }

    .mobile-menu-button {
        display: grid;
    }

    .mobile-navigation {
        position: fixed;
        z-index: 999;
        top: 4.75rem;
        left: 0;

        display: flex;
        flex-direction: column;
        gap: 0.4rem;

        width: 100%;

        padding:
            1rem
            max(1rem, calc((100% - var(--container-width)) / 2))
            1.5rem;

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

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

        box-shadow:
            0 1rem 2.5rem rgba(17, 24, 39, 0.07);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-0.75rem);

        transition:
            opacity var(--transition),
            visibility var(--transition),
            transform var(--transition);
    }

    .mobile-navigation.open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .mobile-navigation a {
        padding: 0.9rem 1rem;

        border-radius: 0.7rem;

        font-size: 0.9rem;
        font-weight: 600;
    }

    .mobile-navigation a:hover {
        background: var(--color-surface);
    }

    .mobile-navigation-cta {
        margin-top: 0.4rem;

        text-align: center;

        color: #ffffff;
        background: var(--color-primary);
    }

    .mobile-navigation .mobile-navigation-cta:hover {
        background: var(--color-primary-dark);
    }

    .hero {
        min-height: auto;

        padding-top: 8rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .hero-content {
        max-width: 44rem;

        text-align: center;

        margin-inline: auto;
    }

    .hero-content .eyebrow {
        margin-inline: auto;
    }

    .hero-title {
        max-width: 13ch;

        margin-inline: auto;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-benefits {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 48rem);

        margin-inline: auto;
    }

    .crm-window {
        margin-inline: auto;
    }

        .problem-experience {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .problem-scene {
        width: min(100%, 44rem);

        margin-inline: auto;
    }

    .problem-consequences {
        width: min(100%, 40rem);

        margin-inline: auto;
    }

        .solution-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 3rem;
    }

    .solution-content {
        display: block;

        max-width: 42rem;

        margin-inline: auto;

        text-align: center;
    }

    .solution-content > .section-label,
    .solution-content > h2,
    .solution-intro,
    .solution-link {
        grid-column: auto;
        grid-row: auto;
    }

    .solution-content > h2 {
        margin-bottom: 1.2rem;
    }

    .solution-intro {
        max-width: 38rem;
        margin: 0 auto 1.7rem;
    }

    .solution-points {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;

        margin-bottom: 1.6rem;

        text-align: left;
    }

    .solution-point,
    .solution-point:nth-child(1),
    .solution-point:nth-child(2),
    .solution-point:nth-child(3) {
        grid-column: auto;
        grid-row: auto;

        width: 100%;
    }

    .solution-link {
        margin-inline: auto;
    }

    .solution-visual {
        grid-column: auto;
        grid-row: auto;

        width: min(100%, 47rem);

        margin-inline: auto;
    }

        .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;

        width: min(100%, 43rem);

        margin-inline: auto;
    }

    .benefit-item {
        min-height: auto;
    }

    .benefit-copy {
        max-width: 34rem;
    }

    .benefit-visual {
        margin-top: 1rem;
    }

        .features-showcase {
        grid-template-columns: 1fr;
    }

    .features-navigation {
        display: flex;
        flex-direction: row;
        gap: 0.45rem;

        padding: 0.5rem;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .features-navigation::-webkit-scrollbar {
        display: none;
    }

    .feature-tab {
        flex: 0 0 auto;

        width: auto;
        min-width: 10rem;
    }

    .feature-tab > svg {
        display: none;
    }

    .features-product {
        width: 100%;
    }

    .process-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .process-content {
        position: static;

        max-width: 43rem;

        margin-inline: auto;

        text-align: center;
    }

    .process-highlight {
        max-width: 34rem;

        margin-inline: auto;

        text-align: left;
    }

    .process-steps {
        width: min(100%, 42rem);

        margin-inline: auto;
    }

        .cali-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .cali-content {
        max-width: 43rem;

        margin-inline: auto;

        text-align: center;
    }

    .cali-benefits {
        max-width: 35rem;

        margin:
            0
            auto
            1.8rem;

        text-align: left;
    }

    .cali-visual {
        width: min(100%, 47rem);

        margin-inline: auto;
    }

        .testimonials-grid {
        grid-template-columns: 1fr;

        width: min(100%, 43rem);

        margin-inline: auto;
    }

    .testimonial-card {
        min-height: auto;
    }


}

@media (max-width: 680px) {

    .container {
        width: min(
            calc(100% - 2rem),
            var(--container-width)
        );
    }

    .header-container {
        min-height: 4.25rem;
    }

    .site-brand-text small {
        display: none;
    }

    .mobile-navigation {
        top: 4.25rem;
    }

    .hero {
        padding:
            7.2rem
            0
            5rem;
    }

    .hero::before {
        opacity: 0.18;
    }

    .hero-title {
        max-width: 11.5ch;

        margin-top: 1.25rem;

        font-size: clamp(2.6rem, 12vw, 3.7rem);
    }

    .hero-description {
        max-width: 31rem;

        font-size: 0.96rem;
        line-height: 1.65;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .btn {
        width: 100%;
    }

    .hero-benefits {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;

        gap: 0.7rem;
    }

    .hero-container {
        gap: 3.2rem;
    }

    .hero-visual {
        width: min(100%, 25rem);
        margin-inline: auto;
    }

    .crm-stage {
        padding: 0.3rem 0 3rem;
    }

    .crm-window {
        border-radius: 1rem;
    }

    .crm-window-header {
        min-height: 2.5rem;
    }

    .crm-layout {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .crm-sidebar {
        display: none;
    }

    .crm-main {
        padding: 0.72rem;
    }

    .crm-main-top {
        margin-bottom: 0.7rem;
    }

    .crm-stats {
        gap: 0.35rem;
    }

    .crm-stat {
        padding: 0.6rem;
    }

    .crm-stat-heading {
        font-size: 0.43rem;
    }

    .crm-stat-heading svg {
        display: none;
    }

    .crm-stat strong {
        font-size: 0.85rem;
    }

    .crm-stat small {
        font-size: 0.55rem;
    }

    .crm-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .activity-card {
        display: none;
    }

    .pipeline-card {
        padding: 0.65rem;
    }

    .pipeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .pipeline-column:nth-child(3) {
        display: none;
    }

    .pipeline-column {
        padding: 0.3rem;
    }

    .lead-card {
        padding: 0.4rem;
    }

    .lead-card-company {
        font-size: 0.5rem;
    }

    .lead-card strong {
        font-size: 0.56rem;
    }

    .floating-card {
        padding: 0.62rem;
        transform: scale(0.82);
        box-shadow: 0 0.8rem 2rem rgba(17, 24, 39, 0.1);
    }

    .floating-lead {
        top: -1.7rem;
        left: -1.4rem;

        transform-origin: left center;
    }

    .floating-assignment {
        display: none;
    }

    .floating-task {
        right: -1.1rem;
        bottom: 0.15rem;

        transform-origin: right center;
    }

        .problem-section {
        padding:
            4.5rem
            0;
    }

    .problem-heading {
        margin-bottom: 3rem;
    }

    .problem-heading h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .problem-scene {
        min-height: 30rem;
    }

    .problem-orbit-one {
        width: 15rem;
        height: 15rem;
    }

    .problem-orbit-two {
        width: 23rem;
        height: 23rem;
    }

    .problem-client {
        width: 9.8rem;

        padding:
            1.1rem
            0.8rem
            0.9rem;
    }

    .problem-source {
        min-width: 0;

        padding: 0.55rem;

        border-radius: 0.65rem;
    }

    .problem-source-icon {
        width: 1.8rem;
        height: 1.8rem;
    }

    .problem-source div:last-child {
        display: none;
    }

    .problem-orbit-item {
        width: auto;
        height: auto;
        animation: none;
        transform: none;
        will-change: auto;
    }

    .problem-orbit-item .problem-source {
        top: 0;
        left: 0;
        width: auto;
        animation: problemMobileFloat 6s ease-in-out infinite;
        transform: translate(-50%, -50%);
        will-change: transform;
    }

    .problem-orbit-item-excel { top: 10%; left: 14%; }
    .problem-orbit-item-email { top: 12%; left: 84%; }
    .problem-orbit-item-phone { top: 43%; left: 7%; }
    .problem-orbit-item-whatsapp { top: 43%; left: 93%; }
    .problem-orbit-item-files { top: 88%; left: 18%; }
    .problem-orbit-item-notes { top: 87%; left: 82%; }

    .problem-orbit-item-email .problem-source,
    .problem-orbit-item-whatsapp .problem-source,
    .problem-orbit-item-notes .problem-source {
        animation-delay: -3s;
    }

    .problem-consequence {
        gap: 0.9rem;

        padding:
            1.4rem
            0;
    }

        .solution-section {
        padding:
            4.5rem
            0;
    }

    .solution-content h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .solution-flow {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .solution-flow-connector {
        justify-content: center;
        transform: rotate(90deg);
    }

    .solution-flow-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .solution-flow-title {
        grid-column: 1 / -1;
    }

    .solution-flow-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .solution-flow-card small {
        display: none;
    }

    .solution-point {
        gap: 0.75rem;
    }

    .benefits-lines span {
        white-space: normal;
    }

    .benefits-section {
        padding:
            4.5rem
            0;
    }

    .benefits-heading {
        margin-bottom: 3rem;
    }

    .benefits-heading h2 {
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    .benefit-item {
        padding: 1.15rem;

        border-radius: 1rem;
    }

    .benefit-copy {
        margin-bottom: 1.3rem;
    }

    .benefit-copy p {
        font-size: 0.82rem;
    }

    .control-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .control-metrics > div {
        padding: 0.45rem;
    }

    .productivity-task {
        padding: 0.5rem;
    }

    .benefits-closing {
        flex-direction: column;
        gap: 0.8rem;

        margin-top: 3rem;
    }

    .benefits-closing p {
        max-width: 20rem;

        line-height: 1.45;
    }

        .features-section {
        padding:
            4.5rem
            0;
    }

    .features-heading {
        margin-bottom: 2.8rem;
    }

    .features-heading h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .feature-tab {
        min-width: 9rem;

        padding: 0.65rem;
    }

    .feature-tab-icon {
        width: 2rem;
        height: 2rem;
    }

    .feature-tab-copy small {
        display: none;
    }

    .features-product {
        border-radius: 1rem;
    }

    .feature-panel,
    .feature-panels {
        min-height: 30rem;
    }

    .feature-panel {
        padding: 1rem;
    }

    .feature-panel-heading {
        flex-direction: column;
        gap: 0.9rem;

        margin-bottom: 1.3rem;
    }

    .feature-client-layout {
        grid-template-columns: 1fr;
    }

    .feature-client-data {
        grid-template-columns: 1fr 1fr;
    }

    .feature-kanban {
        display: flex;

        margin-right: -1rem;
        padding-right: 1rem;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .feature-kanban::-webkit-scrollbar {
        display: none;
    }

    .feature-kanban-column {
        flex: 0 0 9rem;
    }

    .feature-document-header {
        display: none;
    }

    .feature-documents article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .feature-documents article > .file-type,
    .feature-documents article > time {
        display: none;
    }

    .feature-team-summary {
        grid-template-columns: 1fr;
    }

    .feature-team-list > article {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .feature-timeline article {
        grid-template-columns: auto 1fr;
    }

    .feature-timeline-tag {
        display: none;
    }

    .automation-split {
        grid-template-columns: 1fr;
    }

    .automation-split .automation-node {
        width: min(100%, 22rem);

        margin-inline: auto;
    }

    .process-section {
        padding:
            4.5rem
            0;
    }

    .process-content h2 {
        font-size:
            clamp(2rem, 10vw, 2.8rem);
    }

    .process-step {
        grid-template-columns: 2.7rem minmax(0, 1fr);
        gap: 0.85rem;
        min-height: 0;
    }

    .process-step-number {
        width: 2.7rem;
        height: 2.7rem;
        font-size: 0.72rem;
    }

    .process-step-line {
        top: 2.9rem;
        left: 1.33rem;
    }


        .cali-section {
        padding:
            4.5rem
            0;
    }

    .cali-content h2 {
        font-size:
            clamp(2rem, 10vw, 2.8rem);
    }

    .cali-benefits {
        grid-template-columns: 1fr;
        max-width: 29rem;
        margin-inline: auto;
    }

    .cali-benefits > div {
        padding: 0.9rem;
    }

    .cali-flow {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .cali-flow-card {
        width: 100%;
    }

    .cali-flow-arrow {
        flex-direction: column;
        justify-content: center;
    }

    .cali-flow-arrow > span {
        width: 1px;
        height: 0.5rem;
    }

    .cali-flow-arrow > div {
        transform: rotate(90deg);
    }

    .cali-flow-summary {
        flex-wrap: wrap;

        gap: 0.55rem;

        margin-top: 1.3rem;
    }

    .cali-flow-summary > svg {
        width: 0.55rem;
        height: 0.55rem;
    }

        .testimonials-section {
        padding:
            4.5rem
            0;
    }

    .testimonials-heading h2 {
        font-size:
            clamp(2rem, 10vw, 2.8rem);
    }

    .testimonial-card {
        padding: 1.15rem;

        border-radius: 1rem;
    }

    .testimonial-card blockquote {
        font-size: 1rem;
    }


}


/* INTERACCIONES */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
        opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.card-interactive {
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.card-interactive:hover {
    transform: translateY(-0.25rem);
}

/* REDUCED MOTION */

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

    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* FUNCIONALIDADES - AJUSTE FINAL */

.features-section {
    position: relative;
    display: block;
    width: 100%;
    padding: clamp(5.5rem, 9vw, 8.5rem) 0;
    background: #ffffff;
}

.features-section .container {
    display: block;
}

.features-heading {
    display: block;
    max-width: 48rem;
    margin: 0 0 clamp(3rem, 5vw, 4.5rem);
}

.features-showcase {
    display: grid;
    grid-template-columns: minmax(13rem, 15.5rem) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
}

.features-navigation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    gap: clamp(0.55rem, 1.1vh, 0.9rem);

    min-width: 0;
    min-height: 100%;

    padding: 0.75rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface-soft);
}

.feature-tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;

    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 4.15rem;

    padding: 0.85rem;

    border: 1px solid transparent;
    border-radius: 0.8rem;

    text-align: left;

    color: var(--color-text-muted);
    background: transparent;

    cursor: pointer;
}

.feature-tab:hover {
    background: #ffffff;
}

.feature-tab.active {
    border-color: rgba(240, 100, 10, 0.14);
    color: var(--color-text);
    background: #ffffff;
    box-shadow: 0 0.6rem 1.8rem rgba(17, 24, 39, 0.055);
}

.feature-tab-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
    color: var(--color-text-muted);
    background: #ffffff;
}

.feature-tab.active .feature-tab-icon {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.feature-tab-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.feature-tab-copy {
    display: block;
    min-width: 0;
}

.feature-tab-copy strong,
.feature-tab-copy small {
    display: block;
}

.feature-tab-copy strong {
    margin-bottom: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.25;
}

.feature-tab-copy small {
    overflow: hidden;
    font-size: 0.6rem;
    line-height: 1.3;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-tab > svg {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0;
    color: var(--color-primary);
    transform: translateX(-0.2rem);
}

.feature-tab.active > svg {
    opacity: 1;
    transform: translateX(0);
}

.features-product {
    display: block;
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(21, 25, 35, 0.09);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2rem 5rem rgba(17, 24, 39, 0.09);
}

.features-product-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 2.8rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--color-border);
    background: #fafafb;
}

.feature-panels {
    display: block;
    min-height: 31rem;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
}

.feature-panel {
    display: block;
    min-height: 31rem;
    padding: clamp(1.2rem, 2.2vw, 1.8rem);
}

.feature-panel[hidden] {
    display: none;
}

.feature-client-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(10.5rem, 0.8fr);
    gap: 0.8rem;
}

.feature-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(7rem, 1fr));
    gap: 0.55rem;
    min-width: 0;
}

.feature-panel small,
.feature-client-data span,
.feature-client-side small,
.feature-kanban-column article > span,
.feature-kanban-column article small,
.feature-timeline-content > span,
.feature-timeline-tag,
.feature-document-header,
.feature-file small,
.feature-documents time,
.feature-team-summary small,
.team-member small,
.team-progress > span,
.automation-node small {
    font-size: 0.65rem;
}

.feature-client-data strong,
.feature-client-side strong,
.feature-kanban-column article > strong,
.feature-timeline-content strong,
.feature-file strong,
.team-member strong,
.automation-node strong {
    font-size: 0.72rem;
}

@media (max-width: 1180px) and (min-width: 961px) {

    .features-showcase {
        grid-template-columns: 13rem minmax(0, 1fr);
    }

    .feature-tab {
        gap: 0.55rem;
        padding: 0.7rem;
    }

    .feature-tab-copy strong {
        font-size: 0.7rem;
    }

    .feature-tab-copy small {
        font-size: 0.6rem;
    }

    .feature-panel {
        padding: 1.15rem;
    }

    .feature-client-layout {
        grid-template-columns: 1fr;
    }

    .feature-client-side {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-kanban {
        overflow-x: auto;
        grid-template-columns: repeat(4, minmax(8rem, 1fr));
    }
}

@media (max-width: 960px) {

    .features-showcase {
        grid-template-columns: 1fr;
    }

    .features-navigation {
        flex-direction: row;
        justify-content: flex-start;

        min-height: 0;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .features-navigation::-webkit-scrollbar {
        display: none;
    }

    .feature-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 10rem;
    }

    .feature-tab > svg {
        display: none;
    }

    .features-product {
        width: 100%;
    }
}

@media (max-width: 680px) {

    .features-section {
        padding: 4.5rem 0;
    }

    .features-heading {
        margin-bottom: 2.8rem;
    }

    .feature-tab {
        min-width: 9rem;
        padding: 0.65rem;
    }

    .feature-tab-copy small {
        display: none;
    }

    .feature-panel,
    .feature-panels {
        min-height: 30rem;
    }

    .feature-panel {
        padding: 1rem;
    }

    .feature-client-layout {
        grid-template-columns: 1fr;
    }

    .feature-kanban {
        display: flex;
        overflow-x: auto;
        margin-right: -1rem;
        padding-right: 1rem;
        scrollbar-width: none;
    }

    .feature-kanban::-webkit-scrollbar {
        display: none;
    }

    .feature-kanban-column {
        flex: 0 0 9rem;
    }
}

/* FAQ */

.crm-faq2-section {
    position: relative;
    width: 100%;
    padding: clamp(5.5rem, 8vw, 8rem) 0;
    overflow: hidden;
    background: #f7f8fa;
}

.crm-faq2-section::before {
    content: "";
    position: absolute;
    top: -18rem;
    right: -14rem;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(240, 100, 10, 0.09),
        transparent 70%
    );
    pointer-events: none;
}

.crm-faq2-section > .container {
    position: relative;
    z-index: 2;
}

.crm-faq2-heading {
    max-width: 49rem;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
    text-align: center;
}

.crm-faq2-heading h2 {
    margin: 0 0 1.15rem;
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.03;
    color: var(--color-text);
}

.crm-faq2-heading h2 span {
    color: var(--color-primary);
}

.crm-faq2-heading p {
    max-width: 40rem;
    margin: 0 auto;
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.crm-faq2-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    max-width: 68rem;
    margin-inline: auto;
}

.crm-faq2-contact {
    position: sticky;
    top: 7rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(240, 100, 10, 0.22),
            transparent 35%
        ),
        var(--color-dark);
    box-shadow: 0 1.5rem 3.5rem rgba(17, 24, 39, 0.1);
}

.crm-faq2-contact-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.35rem;
    border-radius: 0.85rem;
    color: #ffffff;
    background: var(--color-primary);
    box-shadow: 0 0.7rem 1.6rem rgba(240, 100, 10, 0.22);
}

.crm-faq2-contact-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.crm-faq2-contact-label {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ff9b58;
}

.crm-faq2-contact h3 {
    margin: 0 0 0.8rem;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.15;
    color: #ffffff;
}

.crm-faq2-contact > p {
    margin: 0 0 1.35rem;
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.58);
}

.crm-faq2-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.9rem;
    padding: 0.75rem 0.95rem;
    border-radius: 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--color-primary);
}

.crm-faq2-contact-link:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.crm-faq2-contact-link svg {
    width: 0.85rem;
    height: 0.85rem;
}

.crm-faq2-contact-note {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 0.7rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.48);
}

.crm-faq2-contact-note svg {
    width: 0.85rem;
    height: 0.85rem;
    color: #ff9b58;
}

.crm-faq2-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}

.crm-faq2-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(17, 24, 39, 0.025);
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.crm-faq2-item:hover {
    border-color: rgba(240, 100, 10, 0.2);
    box-shadow: 0 0.8rem 2rem rgba(17, 24, 39, 0.045);
}

.crm-faq2-control {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.crm-faq2-question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 4.4rem;
    padding: 1rem 1.1rem 1rem 1.2rem;
    font-family: var(--font-heading);
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.crm-faq2-control:focus-visible + .crm-faq2-question {
    outline: 3px solid rgba(240, 100, 10, 0.28);
    outline-offset: -3px;
}

.crm-faq2-toggle {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    transition:
        transform 220ms ease,
        color 220ms ease,
        background-color 220ms ease;
}

.crm-faq2-toggle svg {
    width: 0.82rem;
    height: 0.82rem;
}

.crm-faq2-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 260ms ease,
        opacity 200ms ease;
}

.crm-faq2-answer > div {
    min-height: 0;
    overflow: hidden;
}

.crm-faq2-answer p {
    max-width: 43rem;
    margin: 0;
    padding: 0 4.2rem 1.15rem 1.2rem;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.crm-faq2-control:checked + .crm-faq2-question {
    color: var(--color-primary-dark);
}

.crm-faq2-control:checked + .crm-faq2-question .crm-faq2-toggle {
    color: #ffffff;
    background: var(--color-primary);
    transform: rotate(45deg);
}

.crm-faq2-control:checked ~ .crm-faq2-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.crm-faq2-item:has(.crm-faq2-control:checked) {
    border-color: rgba(240, 100, 10, 0.25);
    box-shadow: 0 0.9rem 2.2rem rgba(17, 24, 39, 0.05);
}

@media (max-width: 960px) {

    .crm-faq2-layout {
        grid-template-columns: 1fr;
        width: min(100%, 44rem);
    }

    .crm-faq2-contact {
        position: static;
    }

}

@media (max-width: 680px) {

    .crm-faq2-section {
        padding: 4.5rem 0;
    }

    .crm-faq2-heading {
        margin-bottom: 2.7rem;
    }

    .crm-faq2-heading h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .crm-faq2-contact {
        padding: 1.2rem;
        border-radius: 1rem;
    }

    .crm-faq2-question {
        min-height: 4rem;
        padding: 0.9rem;
        font-size: 0.82rem;
    }

    .crm-faq2-toggle {
        width: 1.8rem;
        height: 1.8rem;
    }

    .crm-faq2-answer p {
        padding: 0 0.9rem 1rem;
        font-size: 0.78rem;
    }

}

/* CONTACTO */

.contact-section {
    position: relative;
    padding: var(--section-space) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(240, 100, 10, 0.10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fff8f3 100%);
}

.contact-heading {
    position: relative;
    z-index: 2;
    max-width: 58rem;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}

.contact-heading h2 {
    margin: 0 0 1rem;
    font-size: clamp(2.35rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.03;
}

.contact-heading h2 span {
    display: block;
    color: var(--color-primary);
}

.contact-heading p {
    max-width: 42rem;
    margin: 0 auto;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.68;
    color: var(--color-text-muted);
}

.contact-wrapper {
    position: relative;
    z-index: 2;
    width: min(100%, 54rem);
    margin-inline: auto;
}

.contact-form-card {
    scroll-margin-top: 6.25rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(21, 25, 35, 0.09);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2rem 5rem rgba(17, 24, 39, 0.09);
    backdrop-filter: blur(12px);
}

.contact-form-header {
    max-width: 37rem;
    margin-bottom: 1.8rem;
}

.contact-form-header > span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.contact-form-header h3 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.55rem, 2.3vw, 2rem);
    font-weight: 800;
}

.contact-form-header p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.58;
    color: var(--color-text-muted);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-field {
    min-width: 0;
}

.form-field-full {
    margin-top: 1rem;
}

.form-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--color-text-soft);
}

.form-field label > span {
    color: var(--color-primary);
}

.form-field label small {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.form-control {
    position: relative;
}

.form-control > svg {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0.95rem;
    width: 0.95rem;
    height: 0.95rem;
    color: #8b929e;
    transform: translateY(-50%);
    pointer-events: none;
}

.form-control input,
.form-control textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: #fafafb;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.form-control input {
    min-height: 3.35rem;
    padding: 0.78rem 0.95rem 0.78rem 2.75rem;
}

.form-control textarea {
    display: block;
    min-height: 7.5rem;
    padding: 0.95rem 0.95rem 0.95rem 2.75rem;
    resize: vertical;
    line-height: 1.55;
}

.form-control-textarea > svg {
    top: 1.05rem;
    transform: none;
}

.form-control input::placeholder,
.form-control textarea::placeholder {
    color: #9ca2ac;
}

.form-control input:focus,
.form-control textarea:focus {
    border-color: rgba(240, 100, 10, 0.48);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(240, 100, 10, 0.08);
}

.form-control input.is-invalid,
.consent-item input.is-invalid + .custom-checkbox {
    border-color: var(--color-danger);
}

.contact-consents {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.consent-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
}

.consent-item input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.custom-checkbox {
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.05rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.32rem;
    color: transparent;
    background: #ffffff;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.custom-checkbox svg {
    width: 0.68rem;
    height: 0.68rem;
}

.consent-item input:checked + .custom-checkbox {
    border-color: var(--color-primary);
    color: #ffffff;
    background: var(--color-primary);
}

.consent-item input:focus-visible + .custom-checkbox {
    outline: 3px solid rgba(240, 100, 10, 0.2);
    outline-offset: 2px;
}

.consent-item > span:last-child {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.consent-item a {
    font-weight: 650;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent-item strong {
    color: var(--color-primary);
}

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

.contact-submit {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    min-height: 3.65rem;
    margin-top: 1.4rem;
    padding: 0.42rem 0.42rem 0.42rem 1.25rem;
    border: 0;
    border-radius: 0.8rem;
    font-size: 0.9rem;
    font-weight: 750;
    text-align: center;
    color: #ffffff;
    background: var(--color-primary);
    box-shadow: 0 0.8rem 2rem rgba(240, 100, 10, 0.18);
    cursor: pointer;
}

.contact-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.contact-submit-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.58rem;
    color: var(--color-primary);
    background: #ffffff;
}

.contact-submit-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.contact-form-status {
    margin-bottom: 1.1rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    background: rgba(31, 157, 116, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(31, 157, 116, 0.25);
}

.contact-form-status[hidden] {
    display: none;
}

.contact-form-status.is-error {
    background: rgba(221, 84, 84, 0.1);
    color: var(--color-danger);
    border-color: rgba(221, 84, 84, 0.25);
}

.contact-form-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.contact-form-footer svg {
    flex: 0 0 auto;
    width: 0.78rem;
    height: 0.78rem;
    color: var(--color-success);
}

@media (max-width: 680px) {
    .contact-form-card {
        scroll-margin-top: 5.5rem;
    }

    .contact-section {
        padding: 4.5rem 0;
    }

    .contact-heading h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .contact-form-card {
        padding: 1.25rem;
        border-radius: 1.1rem;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
}

/* FOOTER */

.site-footer {
    padding:
        4.5rem
        0
        1.5rem;

    color: #ffffff;

    background:
        #0c111c;
}

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(18rem, 1.15fr)
        minmax(0, 1fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    padding-bottom: 3.5rem;
}


/* BRAND */

.footer-brand {
    max-width: 26rem;
}

.footer-logo {
    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    margin-bottom: 1.2rem;

    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
}

.footer-logo-mark {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 0.55rem;

    color: #ffffff;

    background:
        var(--color-primary);
}

.footer-logo-mark svg {
    width: 1rem;
    height: 1rem;
}

.footer-logo > span:last-child {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.footer-logo small {
    font-size: 0.65rem;
    font-weight: 600;

    color:
        rgba(255, 255, 255, 0.4);
}

.footer-brand > p {
    max-width: 24rem;

    margin:
        0
        0
        1.5rem;

    font-size: 0.78rem;
    line-height: 1.7;

    color:
        rgba(255, 255, 255, 0.48);
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    font-size: 0.75rem;
    font-weight: 700;

    color: #ffffff;
}

.footer-contact-link svg {
    width: 0.8rem;
    height: 0.8rem;

    color: var(--color-primary);
}

.footer-contact-link:hover {
    color: #ff9954;
}


/* NAVEGACIÓN */

.footer-navigation {
    display: grid;

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

    gap: 2rem;
}

.footer-navigation > div {
    display: flex;
    flex-direction: column;

    gap: 0.7rem;
}

.footer-column-title {
    margin-bottom: 0.3rem;

    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #ff9954;
}

.footer-navigation a {
    width: fit-content;

    font-size: 0.76rem;

    color:
        rgba(255, 255, 255, 0.58);
}

.footer-navigation a:hover {
    color: #ffffff;
}


/* BOTTOM */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding-top: 1.4rem;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);

    font-size: 0.68rem;

    color:
        rgba(255, 255, 255, 0.42);
}

.footer-bottom > div {
    display: flex;
    align-items: center;

    gap: 1.2rem;
}

.footer-bottom a:hover {
    color:
        rgba(255, 255, 255, 0.8);
}


/* FOOTER RESPONSIVE */

@media (max-width: 760px) {

    .site-footer {
        padding-top: 3.5rem;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .footer-navigation {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            2rem
            1rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 1rem;
    }

}


@media (max-width: 480px) {

    .footer-navigation {
        grid-template-columns: 1fr;
    }

    .footer-bottom > div {
        flex-wrap: wrap;

        gap:
            0.7rem
            1rem;
    }

}

/* PAGINAS LEGALES */

.legal-page {
    min-height: 100vh;

    background: #ffffff;
}

.legal-container {
    width: min(
        calc(100% - clamp(2rem, 5vw, 6rem)),
        900px
    );

    margin-inline: auto;
}


/* HERO LEGAL */

.legal-hero {
    position: relative;

    padding:
        clamp(8.5rem, 12vw, 11rem)
        0
        clamp(3.5rem, 6vw, 5.5rem);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(240, 100, 10, 0.1),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fff9f5,
            #ffffff
        );
}

.legal-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
        radial-gradient(
            circle,
            rgba(240, 100, 10, 0.2) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 90%
        );
}

.legal-hero .legal-container {
    position: relative;
    z-index: 2;
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    margin-bottom: 2.2rem;

    font-size: 0.72rem;
    font-weight: 650;

    color: var(--color-text-muted);
}

.legal-back svg {
    width: 0.8rem;
    height: 0.8rem;

    transition: transform 180ms ease;
}

.legal-back:hover {
    color: var(--color-primary);
}

.legal-back:hover svg {
    transform: translateX(-0.2rem);
}

.legal-eyebrow {
    display: block;

    margin-bottom: 0.7rem;

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: var(--color-primary);
}

.legal-hero h1 {
    margin:
        0
        0
        1rem;

    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 0.98;

    color: var(--color-text);
}

.legal-hero p {
    max-width: 40rem;

    margin: 0;

    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.7;

    color: var(--color-text-muted);
}


/* CUERPO */

.legal-body {
    padding:
        0
        0
        clamp(5rem, 9vw, 8rem);
}


/* DATOS EMPRESA */

.legal-company-card {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;

    margin-bottom: clamp(3.5rem, 6vw, 5rem);

    padding: clamp(1.3rem, 3vw, 2rem);

    border: 1px solid rgba(240, 100, 10, 0.16);
    border-radius: 1.2rem;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7f1
        );

    box-shadow:
        0 1rem 3rem rgba(17, 24, 39, 0.05);
}

.legal-company-icon {
    display: grid;
    place-items: center;

    width: 3rem;
    height: 3rem;

    border-radius: 0.8rem;

    color: #ffffff;
    background: var(--color-primary);
}

.legal-company-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.legal-company-card > div:last-child > span {
    display: block;

    margin-bottom: 0.25rem;

    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--color-primary);
}

.legal-company-card h2 {
    margin:
        0
        0
        1rem;

    font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.legal-company-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;

    margin-bottom: 1rem;
}

.legal-company-data span {
    display: block;

    padding: 0.7rem;

    border: 1px solid var(--color-border);
    border-radius: 0.65rem;

    font-size: 0.7rem;
    line-height: 1.45;

    color: var(--color-text-muted);

    background: rgba(255, 255, 255, 0.7);
}

.legal-company-data strong {
    display: block;

    margin-bottom: 0.2rem;

    font-size: 0.55rem;

    color: var(--color-text);
}

.legal-company-emails {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
}

.legal-company-emails a {
    font-size: 0.68rem;
    font-weight: 650;

    color: var(--color-primary-dark);
}


/* CONTENIDO */

.legal-content {
    display: flex;
    flex-direction: column;
}

.legal-content > section {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1.3rem;

    padding:
        2rem
        0;

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

.legal-content > section:first-child {
    padding-top: 0;
}

.legal-content > section:last-child {
    border-bottom: 0;
}

.legal-number {
    display: grid;
    place-items: center;

    width: 2.5rem;
    height: 2.5rem;

    border-radius: 50%;

    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 800;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.legal-content h2 {
    margin:
        0
        0
        0.75rem;

    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.25;
}

.legal-content h3 {
    margin:
        1.3rem
        0
        0.5rem;

    font-size: 0.95rem;
}

.legal-content p,
.legal-content li {
    font-size: 0.84rem;
    line-height: 1.8;

    color: var(--color-text-muted);
}

.legal-content p {
    margin:
        0
        0
        0.75rem;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content ul {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    margin:
        0.7rem
        0
        0;

    padding-left: 1.15rem;
}

.legal-content a {
    font-weight: 650;

    color: var(--color-primary-dark);

    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content strong {
    color: var(--color-text-soft);
}


/* AVISO COOKIES */

.legal-info-box {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 0.7rem;

    margin:
        0.7rem
        0
        1rem;

    padding: 0.9rem;

    border: 1px solid rgba(240, 100, 10, 0.16);
    border-radius: 0.75rem;

    background: var(--color-primary-soft);
}

.legal-info-box svg {
    width: 1rem;
    height: 1rem;

    margin-top: 0.15rem;

    color: var(--color-primary);
}

.legal-info-box p {
    margin: 0;

    font-size: 0.78rem;
}


/* RESPONSIVE LEGALES */

@media (max-width: 680px) {

    .legal-container {
        width: calc(100% - 2rem);
    }

    .legal-hero {
        padding:
            7rem
            0
            3.5rem;
    }

    .legal-hero h1 {
        font-size: clamp(2.5rem, 13vw, 3.5rem);
    }

    .legal-company-card {
        grid-template-columns: 1fr;
    }

    .legal-company-data {
        grid-template-columns: 1fr;
    }

    .legal-content > section {
        grid-template-columns: 1fr;
        gap: 0.8rem;

        padding:
            1.7rem
            0;
    }

    .legal-number {
        width: 2.2rem;
        height: 2.2rem;
    }

}

/* AJUSTES DE MOVIMIENTO Y NITIDEZ */

.hero-content {
    animation: heroContentIn 700ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.hero-visual {
    animation: heroVisualIn 820ms 100ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.hero-glow-one {
    animation: ambientGlowOne 12s ease-in-out infinite alternate;
}

.hero-glow-two {
    animation: ambientGlowTwo 15s ease-in-out infinite alternate;
}

.features-product,
.solution-flow,
.benefit-visual,
.cali-flow-card {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.solution-flow-connector svg,
.cali-flow-arrow svg,
.benefits-cta svg,
.contact-submit-icon svg {
    transition: transform 220ms ease;
}

.solution-flow:hover .solution-flow-connector svg,
.cali-flow:hover .cali-flow-arrow svg {
    animation: connectorNudge 1.5s ease-in-out infinite;
}

.benefits-action {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.benefits-cta {
    color: #ffffff;
    background: var(--color-primary);
    box-shadow: 0 0.9rem 2.2rem rgba(240, 100, 10, 0.22);
}

.benefits-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.benefits-cta:hover svg,
.contact-submit:hover .contact-submit-icon svg {
    transform: translateX(0.2rem);
}

.solution-flow-card,
.feature-client-profile,
.feature-client-side article,
.feature-kanban-column article,
.automation-node,
.cali-benefits > div,
.cali-flow-card {
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.solution-flow-card:hover,
.feature-client-side article:hover,
.feature-kanban-column article:hover,
.automation-node:hover,
.cali-benefits > div:hover,
.cali-flow-card:hover {
    transform: translateY(-0.2rem);
}

.solution-flow-card:hover,
.feature-client-side article:hover,
.feature-kanban-column article:hover,
.automation-node:hover {
    border-color: rgba(240, 100, 10, 0.2);
    box-shadow: 0 0.9rem 2rem rgba(17, 24, 39, 0.06);
}

.cali-benefits > div:hover,
.cali-flow-card:hover {
    border-color: rgba(240, 100, 10, 0.28);
    background: rgba(255, 255, 255, 0.09);
}

.process-step:hover .process-step-number {
    border-color: rgba(240, 100, 10, 0.38);
    transform: scale(1.04);
}

.process-step-number {
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.reveal-on-scroll.reveal-scale {
    transform: translateY(0.8rem) scale(0.985);
}

.reveal-on-scroll.reveal-scale.is-visible {
    transform: translateY(0) scale(1);
}

@keyframes heroContentIn {
    from { opacity: 0; transform: translateY(0.9rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroVisualIn {
    from { opacity: 0; transform: translateY(1.1rem); }
    to { opacity: 1; transform: none; }
}

@keyframes heroVisualInMobile {
    from { opacity: 0; transform: translateY(0.7rem); }
    to { opacity: 1; transform: none; }
}

@keyframes ambientGlowOne {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-1.2rem, 0.7rem, 0) scale(1.04); }
}

@keyframes ambientGlowTwo {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(1rem, -0.8rem, 0) scale(1.05); }
}

@keyframes connectorNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(0.16rem); }
}

@keyframes problemMobileFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-0.2rem); }
}

@keyframes mobileHeroCardFloat {
    0%, 100% { transform: scale(0.82) translateY(0); }
    50% { transform: scale(0.82) translateY(-0.18rem); }
}

@media (max-width: 960px) {
    .cali-content {
        max-width: 48rem;
        margin-bottom: 3rem;
    }

    .cali-visual {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .hero-content {
        animation-duration: 560ms;
    }

    .hero-visual {
        animation: heroVisualInMobile 650ms 100ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
        transform: none;
        backface-visibility: visible;
        -webkit-font-smoothing: antialiased;
    }

    .crm-stage,
    .crm-window,
    .crm-layout,
    .crm-main,
    .pipeline-card {
        transform: none;
        backface-visibility: visible;
        filter: none;
        will-change: auto;
    }

    .crm-window {
        isolation: auto;
    }

    .floating-lead,
    .floating-task {
        animation: mobileHeroCardFloat 6s ease-in-out infinite;
    }

    .floating-task {
        animation-delay: -3s;
    }

    .solution-flow-card:hover,
    .feature-client-side article:hover,
    .feature-kanban-column article:hover,
    .automation-node:hover,
    .cali-benefits > div:hover,
    .cali-flow-card:hover,
    .benefit-item:hover,
    .testimonial-card:hover {
        transform: none;
    }
}

/* CONSENTIMIENTO DE COOKIES */

.footer-cookie-settings {
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.footer-cookie-settings:hover {
    color: rgba(255, 255, 255, 0.8);
}

.cookie-banner[hidden],
.cookie-preferences[hidden] {
    display: none;
}

.cookie-banner {
    position: fixed;
    z-index: 1300;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    width: min(calc(100% - 2rem), 37rem);
}

.cookie-banner-panel {
    display: grid;
    gap: 1.15rem;
    padding: 1.25rem;
    border: 1px solid rgba(21, 25, 35, 0.1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1.5rem 4.5rem rgba(17, 24, 39, 0.18);
}

.cookie-banner-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: flex-start;
}

.cookie-banner-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.cookie-banner-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.cookie-banner-copy strong {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.cookie-banner-copy p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.cookie-banner-copy a,
.cookie-preferences-copy a {
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.cookie-button {
    min-height: 2.75rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.65rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-text);
    background: #ffffff;
    cursor: pointer;
}

.cookie-button:hover {
    border-color: rgba(240, 100, 10, 0.3);
    transform: translateY(-1px);
}

.cookie-button-primary {
    border-color: var(--color-primary);
    color: #ffffff;
    background: var(--color-primary);
}

.cookie-button-primary:hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
}

.cookie-preferences {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(17, 24, 39, 0.42);
    backdrop-filter: blur(6px);
}

.cookie-preferences-panel {
    width: min(100%, 34rem);
    max-height: min(90vh, 42rem);
    overflow-y: auto;
    padding: 1.35rem;
    border: 1px solid rgba(21, 25, 35, 0.1);
    border-radius: 1.2rem;
    background: #ffffff;
    box-shadow: 0 2rem 6rem rgba(17, 24, 39, 0.24);
}

.cookie-preferences-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.1rem;
}

.cookie-preferences-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
}

.cookie-preferences-header p,
.cookie-preferences-copy {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.cookie-close {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    cursor: pointer;
}

.cookie-close svg {
    width: 1rem;
    height: 1rem;
}

.cookie-option-list {
    display: grid;
    gap: 0.65rem;
    margin: 1.2rem 0;
}

.cookie-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    background: var(--color-surface-soft);
}

.cookie-option strong,
.cookie-option small {
    display: block;
}

.cookie-option strong {
    margin-bottom: 0.18rem;
    font-size: 0.82rem;
}

.cookie-option small {
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.cookie-toggle {
    position: relative;
    width: 2.7rem;
    height: 1.5rem;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cookie-toggle span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d7dae0;
    transition: background-color 180ms ease;
}

.cookie-toggle span::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0.2rem 0.5rem rgba(17, 24, 39, 0.16);
    transition: transform 180ms ease;
}

.cookie-toggle input:checked + span {
    background: var(--color-primary);
}

.cookie-toggle input:checked + span::after {
    transform: translateX(1.2rem);
}

.cookie-toggle input:focus-visible + span {
    outline: 3px solid rgba(240, 100, 10, 0.25);
    outline-offset: 3px;
}

.cookie-toggle input:disabled + span {
    opacity: 0.55;
}

.cookie-preferences-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 680px) {
    .cookie-banner {
        right: 1rem;
        bottom: 1rem;
        width: calc(100% - 2rem);
    }

    .cookie-banner-panel,
    .cookie-preferences-panel {
        padding: 1rem;
        border-radius: 1rem;
    }

    .cookie-banner-copy {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .cookie-banner-actions,
    .cookie-preferences-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cookie-button {
        width: 100%;
    }
}

/* NEWSLETTER POPUP - 2 PASOS */
.nl-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.nl-popup-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.nl-popup-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 40px 32px 32px;
    background: #ffffff;
    border: 1px solid rgba(21, 25, 35, 0.08);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.25s ease;
}

.nl-popup-overlay.is-visible .nl-popup-card {
    transform: translateY(0) scale(1);
}

.nl-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nl-popup-close:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.nl-popup-close svg {
    width: 16px;
    height: 16px;
}

.nl-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.nl-popup-icon svg {
    width: 26px;
    height: 26px;
}

.nl-popup-title {
    margin: 0 0 8px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.nl-popup-text {
    margin: 0 0 22px;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.nl-popup-field {
    margin-bottom: 14px;
}

.nl-popup-field input[type="email"],
.nl-popup-field input[type="text"] {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px solid rgba(240, 100, 10, 0.28);
    border-radius: 14px;
    background: var(--color-background-warm);
    color: var(--color-text);
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.nl-popup-field input:focus {
    border-color: var(--color-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(240, 100, 10, 0.16);
}

.nl-popup-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.nl-popup-consent input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    flex: 0 0 auto;
}

.nl-popup-consent a {
    color: var(--color-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nl-popup-submit {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: var(--color-primary);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(240, 100, 10, 0.28);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.nl-popup-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.nl-popup-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.nl-popup-skip {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 0;
    background: none;
    color: #94a3b8;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.nl-popup-skip:hover {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.nl-popup-error {
    display: none;
    margin: -6px 0 14px;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
}

.nl-popup-error.is-visible {
    display: block;
}

.nl-popup-step[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    .nl-popup-card {
        padding: 32px 22px 24px;
        border-radius: 20px;
    }

    .nl-popup-title {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nl-popup-overlay,
    .nl-popup-card,
    .nl-popup-close,
    .nl-popup-submit,
    .nl-popup-field input {
        transition: none !important;
    }
}