:root {
    --bg: #ffffff;
    --surface: #f6f8fc;
    --surface-blue: #f3f7ff;
    --text: #172033;
    --heading: #111a2c;
    --muted: #667085;
    --border: #dce3ee;
    --border-strong: #cbd5e4;
    --brand: #245bff;
    --brand-dark: #1848d5;
    --brand-soft: #eaf0ff;
    --sky: #1799f5;
    --success: #17a673;
    --shadow-sm: 0 8px 30px rgba(26, 42, 76, .07);
    --shadow-md: 0 18px 50px rgba(26, 42, 76, .12);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }
.narrow { max-width: 780px; }
.center { text-align: center; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(220,227,238,.88);
    backdrop-filter: blur(16px);
}
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-logo { display: block; width: 204px; height: 48px; }
.main-nav { display: flex; align-items: center; gap: 20px; font-size: .91rem; font-weight: 550; color: #30394d; }
.main-nav > a:not(.nav-login):not(.nav-cta) { position: relative; padding: 28px 0 26px; }
.main-nav > a:not(.nav-login):not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 18px;
    width: 0; height: 2px;
    background: var(--brand);
    border-radius: 999px;
    transition: width .18s ease, left .18s ease;
}
.main-nav > a:not(.nav-login):not(.nav-cta):hover { color: var(--brand); }
.main-nav > a:not(.nav-login):not(.nav-cta):hover::after { width: 100%; left: 0; }
.nav-login, .nav-cta { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border-radius: 10px; font-weight: 700; }
.nav-login { border: 1px solid var(--border); background: rgba(255,255,255,.82); }
.nav-login:hover { border-color: var(--brand); color: var(--brand); }
.nav-cta { background: linear-gradient(135deg, var(--brand), #306bff); color: #fff; box-shadow: 0 8px 18px rgba(36,91,255,.22); }
.nav-cta:hover { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); }
.nav-toggle { display: none; }

.section { padding: 78px 0; scroll-margin-top: 88px; }
.muted-section { background: var(--surface); }
.hero-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0 104px;
    background:
        radial-gradient(circle at 76% 18%, rgba(36,91,255,.10), transparent 31%),
        radial-gradient(circle at 88% 70%, rgba(23,153,245,.08), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.hero-section::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(.1px); }
.hero-orb-one { width: 350px; height: 350px; right: -180px; top: -190px; border: 1px solid rgba(36,91,255,.12); }
.hero-orb-two { width: 190px; height: 190px; right: 13%; bottom: -125px; border: 1px solid rgba(23,153,245,.12); }
.section-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.38fr .78fr; gap: 64px; align-items: center; }
.hero-copy { min-width: 0; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: var(--brand);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .11em;
}
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
h1 { margin: 0; max-width: 790px; color: var(--heading); font-size: clamp(2.65rem, 5.1vw, 4.65rem); line-height: .99; letter-spacing: -.052em; font-weight: 800; }
h2 { margin: 0 0 30px; color: var(--heading); font-size: clamp(1.9rem, 3.1vw, 2.8rem); line-height: 1.08; letter-spacing: -.035em; }
h3 { margin-top: 0; color: var(--heading); letter-spacing: -.015em; }
.lead { color: var(--muted); font-size: 1.14rem; max-width: 700px; margin: 22px 0 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-weight: 750;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.button.primary { background: linear-gradient(135deg, var(--brand), #346cff); color: white; border-color: var(--brand); box-shadow: 0 10px 24px rgba(36,91,255,.20); }
.button.primary:hover { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(36,91,255,.25); }
.button.secondary { background: rgba(255,255,255,.92); }
.button.secondary:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.hero-trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 25px; color: #596579; font-size: .86rem; font-weight: 650; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust span::before { content: "✓"; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f8f2; color: var(--success); font-size: .68rem; font-weight: 900; }

.structure-card, .content-card, .plan-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; background: white; }
.structure-card { position: relative; padding: 26px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.structure-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--brand), var(--sky)); }
.structure-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; }
.structure-card-head small { display: block; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.structure-card-head strong { display: block; margin-top: 2px; font-size: 1.04rem; }
.mini-brand-mark { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 13px; background: linear-gradient(135deg, var(--brand), var(--sky)); box-shadow: 0 8px 18px rgba(36,91,255,.18); }
.mini-brand-mark svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.structure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.structure-list li { display: flex; align-items: center; gap: 12px; min-height: 43px; color: #465166; border-bottom: 1px solid #eef2f7; font-size: .91rem; }
.structure-list li:last-child { border-bottom: 0; }
.structure-list li > span { flex: 0 0 auto; width: 29px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .68rem; }
.structure-status { margin-top: 18px; padding: 12px 14px; border-radius: 11px; background: #f4fbf8; color: #35685a; font-size: .83rem; font-weight: 700; }
.structure-status span { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(23,166,115,.10); }

.card-grid { display: grid; gap: 18px; }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.content-card, .plan-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.content-card:hover, .plan-card:hover { transform: translateY(-3px); border-color: #c8d5ef; box-shadow: var(--shadow-sm); }
.content-card p, .plan-card p { color: var(--muted); margin-bottom: 0; }
.feature-card { min-height: 112px; display: flex; align-items: center; position: relative; overflow: hidden; }
.feature-card::after { content: ""; position: absolute; width: 54px; height: 54px; right: -20px; bottom: -20px; border-radius: 50%; background: var(--brand-soft); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps li { position: relative; background: white; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 36px; right: -17px; width: 17px; border-top: 1px dashed #aebbd0; }
.steps span { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-weight: 850; margin-bottom: 13px; }
.steps p { color: var(--muted); margin-bottom: 0; }
details { border-bottom: 1px solid var(--border); padding: 17px 0; }
summary { cursor: pointer; font-weight: 750; color: var(--heading); }
details p { color: var(--muted); }
.registration-section { position: relative; border-top: 1px solid var(--border); background: linear-gradient(180deg, #ffffff 0%, var(--surface-blue) 100%); }

.site-footer { padding: 46px 0 32px; color: #b8c1d6; background: #111a2c; border-top: 1px solid #202b42; }
.footer-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px 42px; align-items: start; }
.footer-brand img { display: block; width: 204px; height: 48px; }
.footer-brand p { margin: 12px 0 0; max-width: 500px; color: #9ba7be; font-size: .91rem; }
.footer-meta { display: grid; gap: 8px; justify-items: start; font-size: .86rem; }
.footer-meta strong { color: #e9edf6; margin-right: 5px; }
.footer-inner small { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid #263149; color: #7f8ba3; }


/* Paso 1.3 - Hero comercial definitivo */
.hero-grid { grid-template-columns: 1.18fr .82fr; gap: 72px; }
.hero-copy h1 { max-width: 760px; }
.hero-copy .lead { max-width: 690px; }
.hero-actions { margin-top: 32px; }
.product-preview {
    position: relative;
    width: 100%;
    max-width: 470px;
    justify-self: end;
    padding: 24px;
    border: 1px solid rgba(203,213,228,.92);
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 28px 70px rgba(26,42,76,.14);
    overflow: hidden;
}
.product-preview::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--sky));
}
.product-preview::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -95px;
    top: -95px;
    border-radius: 50%;
    background: rgba(36,91,255,.055);
    pointer-events: none;
}
.preview-toolbar,
.preview-brand,
.preview-stats,
.preview-invoice-head,
.preview-invoice-row,
.preview-cash,
.preview-cash > div {
    display: flex;
    align-items: center;
}
.preview-toolbar { position: relative; z-index: 1; justify-content: space-between; gap: 16px; }
.preview-brand { gap: 11px; min-width: 0; }
.preview-brand-mark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--sky));
    box-shadow: 0 8px 18px rgba(36,91,255,.18);
}
.preview-brand-mark svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.preview-brand strong, .preview-brand small { display: block; }
.preview-brand strong { color: var(--heading); font-size: .98rem; }
.preview-brand small { margin-top: 1px; color: var(--muted); font-size: .72rem; }
.preview-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1fbf7;
    color: #32725f;
    font-size: .72rem;
    font-weight: 750;
}
.preview-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(23,166,115,.09); }
.preview-total { margin-top: 24px; padding: 19px 20px; border-radius: 16px; background: linear-gradient(135deg, #f5f8ff, #f9fcff); border: 1px solid #e2e9f5; }
.preview-total small, .preview-total strong, .preview-total span { display: block; }
.preview-total small { color: var(--muted); font-size: .75rem; font-weight: 700; }
.preview-total strong { margin-top: 5px; color: var(--heading); font-size: clamp(1.65rem, 2.4vw, 2.05rem); line-height: 1.1; letter-spacing: -.035em; }
.preview-total span { margin-top: 7px; color: #657086; font-size: .76rem; }
.preview-stats { gap: 12px; margin-top: 12px; }
.preview-stat { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; padding: 14px; border: 1px solid #e6ebf3; border-radius: 14px; background: #fff; }
.preview-stat-icon { display: inline-flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 9px; font-size: .78rem; font-weight: 900; }
.preview-stat-icon.received { color: #148960; background: #eaf8f2; }
.preview-stat-icon.pending { color: #aa6b00; background: #fff6df; }
.preview-stat small, .preview-stat strong { display: block; }
.preview-stat small { color: var(--muted); font-size: .68rem; }
.preview-stat strong { margin-top: 1px; color: var(--heading); font-size: .84rem; white-space: nowrap; }
.preview-invoice { margin-top: 12px; padding: 16px; border: 1px solid #e6ebf3; border-radius: 14px; background: #fff; }
.preview-invoice-head { justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #edf1f6; }
.preview-invoice-head small, .preview-invoice-head strong, .preview-invoice-row small, .preview-invoice-row strong { display: block; }
.preview-invoice-head small, .preview-invoice-row small { color: var(--muted); font-size: .68rem; }
.preview-invoice-head strong { margin-top: 2px; font-size: .86rem; }
.preview-invoice-head > span { padding: 5px 8px; border-radius: 999px; background: #eaf8f2; color: #148960; font-size: .67rem; font-weight: 800; }
.preview-invoice-row { justify-content: space-between; gap: 16px; padding-top: 13px; }
.preview-invoice-row > div { min-width: 0; }
.preview-invoice-row strong { margin-top: 2px; color: #344054; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-invoice-amount { text-align: right; flex: 0 0 auto; }
.preview-cash { justify-content: space-between; gap: 12px; margin-top: 12px; padding: 13px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e8edf4; }
.preview-cash > div { gap: 9px; }
.cash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(23,166,115,.09); }
.preview-cash small, .preview-cash strong { display: block; }
.preview-cash small { color: var(--muted); font-size: .64rem; }
.preview-cash strong { color: #35685a; font-size: .76rem; }
.preview-report { color: var(--brand); font-size: .71rem; font-weight: 750; }
.preview-note { margin: 10px 0 0; color: #98a2b3; text-align: right; font-size: .64rem; }

@media (max-width: 1020px) {
    .main-nav { gap: 14px; font-size: .86rem; }
    .brand-logo { width: 184px; height: auto; }
}

@media (max-width: 900px) {
    .header-inner { min-height: 72px; }
    .nav-toggle { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--border); background: white; border-radius: 10px; color: var(--text); font-weight: 700; }
    .nav-toggle-lines { position: relative; display: inline-block; width: 17px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
    .nav-toggle-lines::after { content: ""; position: absolute; left: 0; top: 4px; width: 17px; border-top: 2px solid currentColor; }
    .main-nav { display: none; position: absolute; left: 16px; right: 16px; top: 72px; padding: 14px; flex-direction: column; align-items: stretch; gap: 5px; background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); }
    .main-nav.is-open { display: flex; }
    .main-nav > a:not(.nav-login):not(.nav-cta) { padding: 10px 12px; border-radius: 9px; }
    .main-nav > a:not(.nav-login):not(.nav-cta)::after { display: none; }
    .main-nav > a:not(.nav-login):not(.nav-cta):hover { background: var(--surface-blue); }
    .nav-login, .nav-cta { margin-top: 4px; }
    .section-grid { grid-template-columns: 1fr; gap: 44px; }
    .product-preview { justify-self: start; max-width: 610px; }
    .hero-section { padding: 82px 0 76px; }
    .structure-card { max-width: 610px; }
    .card-grid.three, .card-grid.four, .steps { grid-template-columns: repeat(2, 1fr); }
    .steps li::after { display: none; }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-inner small { grid-column: 1; }
}

@media (max-width: 560px) {
    .container { width: min(calc(100% - 28px), var(--max)); }
    .brand-logo { width: 174px; height: auto; }
    .nav-toggle { min-width: 44px; padding: 0 12px; }
    .nav-toggle > span:last-child { display: none; }
    .section { padding: 58px 0; }
    .hero-section { padding: 64px 0 60px; }
    h1 { font-size: clamp(2.35rem, 12vw, 3.35rem); }
    .lead { font-size: 1.02rem; }
    .actions { align-items: stretch; }
    .actions .button { flex: 1 1 100%; }
    .hero-trust { gap: 11px 14px; }
    .card-grid.three, .card-grid.four, .steps { grid-template-columns: 1fr; }
    .structure-card { padding: 22px; border-radius: 19px; }
    .product-preview { padding: 19px; border-radius: 19px; }
    .preview-stats { flex-direction: column; align-items: stretch; }
    .preview-stat { width: 100%; }
    .preview-invoice-row, .preview-cash { align-items: flex-start; }
    .preview-invoice-row { flex-direction: column; }
    .preview-invoice-amount { text-align: left; }
    .preview-cash { flex-direction: column; }
    .preview-note { text-align: left; }
    .footer-brand img { width: 190px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Paso 1.4 - Beneficios */
.benefits-section {
    background:
        linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}
.benefits-heading {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 38px;
}
.benefits-heading h2 { margin-bottom: 0; max-width: 680px; }
.benefits-intro {
    max-width: 560px;
    justify-self: end;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 1.02rem;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.benefit-card {
    display: flex;
    gap: 17px;
    min-width: 0;
    padding: 25px 23px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.benefit-card:hover {
    transform: translateY(-3px);
    border-color: #c8d5ef;
    box-shadow: var(--shadow-sm);
}
.benefit-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
}
.benefit-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.benefit-card h3 {
    margin: 1px 0 8px;
    font-size: 1.04rem;
    line-height: 1.25;
}
.benefit-card p {
    margin: 0;
    color: var(--muted);
    font-size: .91rem;
    line-height: 1.58;
}
.benefits-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 28px;
    padding: 18px 8px;
    border: 1px solid #dfe6f1;
    border-radius: 17px;
    background: linear-gradient(135deg, #ffffff, #f7faff);
}
.benefits-summary > div {
    min-width: 0;
    padding: 2px 22px;
    border-right: 1px solid #e5eaf2;
}
.benefits-summary > div:last-child { border-right: 0; }
.benefits-summary strong,
.benefits-summary span { display: block; }
.benefits-summary strong {
    color: var(--heading);
    font-size: .88rem;
}
.benefits-summary span {
    margin-top: 3px;
    color: var(--muted);
    font-size: .78rem;
}

@media (max-width: 900px) {
    .benefits-heading { grid-template-columns: 1fr; gap: 15px; align-items: start; }
    .benefits-intro { max-width: 720px; justify-self: start; }
    .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benefits-summary { grid-template-columns: 1fr; padding: 7px 18px; }
    .benefits-summary > div { padding: 13px 4px; border-right: 0; border-bottom: 1px solid #e5eaf2; }
    .benefits-summary > div:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
    .benefits-grid { grid-template-columns: 1fr; }
    .benefit-card { padding: 21px 19px; }
}

/* Paso 1.5 - Características */
.features-section {
    background: #ffffff;
}
.features-heading {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 38px;
}
.features-heading h2 {
    margin-bottom: 0;
    max-width: 700px;
}
.features-intro {
    max-width: 560px;
    justify-self: end;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 1.02rem;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.feature-item {
    position: relative;
    display: flex;
    gap: 17px;
    min-width: 0;
    min-height: 190px;
    padding: 24px 23px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.feature-item::after {
    content: "";
    position: absolute;
    width: 76px;
    height: 76px;
    right: -38px;
    bottom: -38px;
    border-radius: 50%;
    background: rgba(36,91,255,.035);
    pointer-events: none;
}
.feature-item:hover {
    transform: translateY(-3px);
    border-color: #c8d5ef;
    box-shadow: var(--shadow-sm);
}
.feature-item-primary {
    border-color: #cbd8ff;
    background: linear-gradient(145deg, #f8faff 0%, #ffffff 72%);
}
.feature-item-primary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand), var(--sky));
}
.feature-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
}
.feature-icon svg,
.features-footer-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-kicker {
    display: block;
    margin: 1px 0 3px;
    color: var(--brand);
    font-size: .69rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .075em;
}
.feature-item h3 {
    margin: 0 0 8px;
    font-size: 1.06rem;
    line-height: 1.25;
}
.feature-item p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.58;
}
.features-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 19px 22px;
    border: 1px solid #dce5f4;
    border-radius: 17px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
}
.features-footer-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e9f8f3;
    color: var(--success);
}
.features-footer strong,
.features-footer span {
    display: block;
}
.features-footer strong {
    color: var(--heading);
    font-size: .94rem;
}
.features-footer span {
    margin-top: 3px;
    color: var(--muted);
    font-size: .82rem;
}

@media (max-width: 900px) {
    .features-heading { grid-template-columns: 1fr; gap: 15px; align-items: start; }
    .features-intro { max-width: 720px; justify-self: start; }
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .features-grid { grid-template-columns: 1fr; }
    .feature-item { min-height: auto; padding: 21px 19px; }
    .features-footer { align-items: flex-start; padding: 17px 18px; }
}

/* Paso 1.6 - Cómo funciona */
.how-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 13%, rgba(36,91,255,.045), transparent 24%),
        linear-gradient(180deg, #f7f9fd 0%, #f4f7fc 100%);
}
.how-heading {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 42px;
}
.how-heading h2 {
    max-width: 690px;
    margin-bottom: 0;
}
.how-intro {
    max-width: 560px;
    justify-self: end;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 1.02rem;
}
.how-flow {
    display: grid;
    grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr);
    align-items: stretch;
}
.how-step {
    position: relative;
    min-width: 0;
    min-height: 316px;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 9px 26px rgba(26,42,76,.04);
    overflow: hidden;
}
.how-step::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -49px;
    bottom: -51px;
    border-radius: 50%;
    background: rgba(36,91,255,.04);
    pointer-events: none;
}
.how-step-final {
    border-color: #bfd0ff;
    background: linear-gradient(145deg, #f9fbff 0%, #fff 65%);
}
.how-step-final::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--sky));
}
.how-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}
.how-number {
    color: #b0b9c9;
    font-size: 1.26rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.04em;
}
.how-step-final .how-number { color: var(--brand); }
.how-icon {
    display: inline-flex;
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
}
.how-icon svg,
.how-summary-mark svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.how-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--brand);
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .085em;
}
.how-step h3 {
    margin: 0 0 10px;
    font-size: 1.08rem;
    line-height: 1.22;
}
.how-step-copy p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.58;
}
.how-step-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: #5d687b;
    font-size: .76rem;
    font-weight: 700;
}
.how-step-note > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #9dacbf;
}
.how-step-note-ready {
    color: #25715a;
}
.how-step-note-ready > span {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(23,166,115,.10);
}
.how-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9eabc0;
}
.how-connector svg {
    display: block;
    width: 44px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.how-summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
    margin-top: 29px;
    padding: 18px 20px;
    border: 1px solid #dce4f2;
    border-radius: 17px;
    background: rgba(255,255,255,.82);
}
.how-summary-mark {
    display: inline-flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #e9f8f3;
    color: var(--success);
}
.how-summary strong,
.how-summary span {
    display: block;
}
.how-summary strong {
    color: var(--heading);
    font-size: .94rem;
}
.how-summary > div > span {
    margin-top: 3px;
    color: var(--muted);
    font-size: .8rem;
}
.how-summary-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 9px;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}
.how-summary-link:hover { background: #dfe8ff; }

@media (max-width: 1050px) {
    .how-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .how-connector { display: none; }
    .how-step { min-height: 285px; }
}

@media (max-width: 900px) {
    .how-heading { grid-template-columns: 1fr; gap: 15px; align-items: start; }
    .how-intro { max-width: 720px; justify-self: start; }
}

@media (max-width: 620px) {
    .how-flow { grid-template-columns: 1fr; }
    .how-step { min-height: auto; padding: 21px 19px; }
    .how-step-note { margin-top: 21px; }
    .how-summary { grid-template-columns: auto 1fr; align-items: start; }
    .how-summary-link { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
}

/* Paso 1.7 - Planes */
.plans-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}
.plans-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -250px;
    top: 60px;
    border-radius: 50%;
    background: rgba(36,91,255,.035);
    pointer-events: none;
}
.plans-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 40px;
}
.plans-heading h2 {
    max-width: 690px;
    margin-bottom: 0;
}
.plans-intro {
    max-width: 565px;
    justify-self: end;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 1.02rem;
}
.plans-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.pricing-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 27px 25px 24px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(26,42,76,.045);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pricing-card:hover {
    transform: translateY(-3px);
    border-color: #c5d2ed;
    box-shadow: 0 18px 42px rgba(26,42,76,.08);
}
.pricing-card-featured {
    border-color: #b8c9ff;
    background: linear-gradient(180deg, #f8faff 0%, #fff 38%);
    box-shadow: 0 20px 52px rgba(36,91,255,.11);
}
.pricing-card-featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--sky));
}
.plan-badge {
    position: absolute;
    top: 17px;
    right: 18px;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .62rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .08em;
}
.pricing-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 53px;
    margin-bottom: 20px;
}
.pricing-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--brand-soft);
    color: var(--brand);
}
.pricing-icon svg,
.plans-note-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.plan-audience {
    display: block;
    margin-bottom: 3px;
    color: var(--brand);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .085em;
}
.pricing-card h3 {
    margin: 0;
    font-size: 1.3rem;
}
.plan-description {
    min-height: 84px;
    margin: 0 0 21px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.58;
}
.plan-price-placeholder {
    margin-bottom: 22px;
    padding: 17px 18px;
    border: 1px solid #e3e9f3;
    border-radius: 14px;
    background: #f8fafe;
}
.plan-price-placeholder span,
.plan-price-placeholder strong,
.plan-price-placeholder small {
    display: block;
}
.plan-price-placeholder span {
    color: #69758a;
    font-size: .72rem;
    font-weight: 700;
}
.plan-price-placeholder strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 1.26rem;
    letter-spacing: -.02em;
}
.plan-price-placeholder small {
    margin-top: 3px;
    color: #8994a7;
    font-size: .68rem;
    line-height: 1.4;
}
.plan-price-featured {
    border-color: #d7e1ff;
    background: #f4f7ff;
}
.plan-features {
    list-style: none;
    display: grid;
    gap: 11px;
    margin: 0 0 25px;
    padding: 0;
}
.plan-features li {
    position: relative;
    padding-left: 27px;
    color: #4d596d;
    font-size: .83rem;
    line-height: 1.46;
}
.plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9f8f3;
    color: var(--success);
    font-size: .67rem;
    font-weight: 900;
}
.plan-button {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 10px 15px;
    border: 1px solid #cfd9e9;
    border-radius: 10px;
    background: #fff;
    color: var(--heading);
    font-size: .84rem;
    font-weight: 800;
    transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.plan-button:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-1px);
}
.plan-button-primary {
    border-color: var(--brand);
    background: linear-gradient(135deg, var(--brand), #346cff);
    color: #fff;
    box-shadow: 0 10px 22px rgba(36,91,255,.17);
}
.plan-button-primary:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.plans-note {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 26px;
    padding: 17px 19px;
    border: 1px solid #dce4f2;
    border-radius: 16px;
    background: #f8fafe;
}
.plans-note-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
}
.plans-note strong,
.plans-note span {
    display: block;
}
.plans-note strong {
    color: var(--heading);
    font-size: .88rem;
}
.plans-note span {
    margin-top: 3px;
    color: var(--muted);
    font-size: .76rem;
}

@media (max-width: 980px) {
    .plans-grid { grid-template-columns: 1fr; }
    .pricing-card { max-width: 720px; width: 100%; margin: 0 auto; }
    .plan-description { min-height: auto; }
}

@media (max-width: 900px) {
    .plans-heading { grid-template-columns: 1fr; gap: 15px; align-items: start; }
    .plans-intro { max-width: 720px; justify-self: start; }
}

@media (max-width: 560px) {
    .pricing-card { padding: 23px 19px 20px; }
    .plan-badge { top: 14px; right: 14px; }
    .pricing-card-featured .pricing-card-head { padding-right: 92px; }
    .plans-note { align-items: start; padding: 16px; }
}

/* Ajuste comercial Paso 1.7 - precios, límites y pago anual */
.plan-billing-limit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 12px;
    padding: 11px 13px;
    border: 1px solid #dce5f3;
    border-radius: 12px;
    background: #fbfcff;
}
.plan-billing-limit span {
    color: #6b7689;
    font-size: .72rem;
    font-weight: 700;
}
.plan-billing-limit strong {
    color: var(--heading);
    font-size: .83rem;
    white-space: nowrap;
}
.plan-billing-limit-featured {
    border-color: #cbd8ff;
    background: #f3f6ff;
}
.plan-billing-limit-unlimited {
    border-color: #cce9df;
    background: #f2fbf7;
}
.plan-billing-limit-unlimited strong {
    color: #187356;
}
.plan-price-line {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 2px;
}
.plan-price-placeholder .plan-price-line strong {
    margin-top: 0;
    font-size: 1.55rem;
}
.plan-price-line em {
    color: #6f7b8f;
    font-size: .77rem;
    font-style: normal;
    font-weight: 700;
}
.plan-price-placeholder small b {
    color: #536076;
    font-weight: 800;
}
@media (max-width: 430px) {
    .plan-billing-limit {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

/* Paso 1.8 - Preguntas frecuentes */
.faq-section {
    background:
        radial-gradient(circle at 10% 8%, rgba(36,91,255,.045), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.faq-heading {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: end;
    margin-bottom: 34px;
}
.faq-heading h2 { margin-bottom: 0; max-width: 620px; }
.faq-intro { margin: 0 0 5px; color: var(--muted); font-size: 1.01rem; line-height: 1.75; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.faq-column { display: grid; gap: 12px; }
.faq-item {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(26,42,76,.035);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.faq-item[open] { border-color: #c8d6f4; box-shadow: 0 10px 28px rgba(36,91,255,.065); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 17px 19px;
    list-style: none;
    color: var(--heading);
    font-size: .95rem;
    font-weight: 760;
    cursor: pointer;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:focus-visible { outline: 3px solid rgba(36,91,255,.20); outline-offset: -3px; }
.faq-toggle {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 9px;
    background: var(--brand-soft);
}
.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: var(--brand);
    transition: transform .18s ease;
}
.faq-toggle::after { transform: rotate(90deg); }
.faq-item[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-answer { padding: 0 19px 18px; border-top: 1px solid #eef2f7; }
.faq-answer p { margin: 14px 0 0; color: var(--muted); font-size: .91rem; line-height: 1.68; }
.faq-answer strong { color: #344054; }
.faq-help {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
}
.faq-help-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf8f2;
    color: var(--success);
}
.faq-help-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq-help strong { color: var(--heading); }
.faq-help p { margin: 3px 0 0; color: var(--muted); font-size: .84rem; }
.faq-help .button { min-width: 112px; }

@media (max-width: 900px) {
    .faq-heading { grid-template-columns: 1fr; gap: 14px; }
    .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .faq-item summary { min-height: 62px; padding: 15px 16px; font-size: .91rem; }
    .faq-answer { padding: 0 16px 16px; }
    .faq-help { grid-template-columns: auto 1fr; }
    .faq-help .button { grid-column: 1 / -1; width: 100%; }
}

/* Paso 1.9 - Contacto */
.contact-section {
    background:
        radial-gradient(circle at 92% 12%, rgba(23,153,245,.055), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}
.contact-heading {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: end;
    margin-bottom: 34px;
}
.contact-heading h2 { margin-bottom: 0; max-width: 650px; }
.contact-intro { margin: 0 0 5px; color: var(--muted); font-size: 1.01rem; line-height: 1.75; }
.contact-layout {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 22px;
    align-items: stretch;
}
.contact-info,
.contact-form-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(26,42,76,.055);
}
.contact-info {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background:
        linear-gradient(145deg, rgba(234,240,255,.80), rgba(255,255,255,.98) 44%),
        #fff;
}
.contact-info-main { display: flex; gap: 15px; align-items: flex-start; }
.contact-info-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand), var(--sky));
    color: #fff;
    box-shadow: 0 10px 24px rgba(36,91,255,.18);
}
.contact-info-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-kicker { display: block; margin-bottom: 5px; color: var(--brand); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.contact-info-main h3 { margin: 0; font-size: 1.35rem; }
.contact-info-main p { margin: 8px 0 0; color: var(--muted); font-size: .91rem; line-height: 1.66; }
.contact-topic-list { display: grid; gap: 10px; margin-top: 24px; }
.contact-topic {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid #e7edf6;
}
.contact-topic > span {
    display: inline-flex;
    width: 32px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .68rem;
    font-weight: 850;
}
.contact-topic strong,
.contact-topic small { display: block; }
.contact-topic strong { color: var(--heading); font-size: .88rem; }
.contact-topic small { margin-top: 3px; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.contact-fast-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 24px; }
.contact-fast-actions .button { flex: 1 1 135px; }

.contact-form-card { padding: 28px; }
.contact-form-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.contact-form-head span:not(.contact-form-status) { display: block; color: var(--brand); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.contact-form-head h3 { margin: 4px 0 0; font-size: 1.35rem; }
.contact-form-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #f1fbf7; color: #32725f; font-size: .7rem; font-weight: 750; }
.contact-form-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(23,166,115,.09); }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.contact-field { display: grid; gap: 7px; min-width: 0; }
.contact-field > span { color: #39445a; font-size: .78rem; font-weight: 760; }
.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #d5deeb;
    border-radius: 11px;
    outline: none;
    background: #fbfcfe;
    color: var(--heading);
    font-size: .9rem;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.contact-field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.contact-field select { cursor: pointer; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: #8ca8ff; background: #fff; box-shadow: 0 0 0 3px rgba(36,91,255,.10); }
.contact-field input[aria-invalid="true"],
.contact-field select[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] { border-color: #d96c6c; box-shadow: 0 0 0 3px rgba(217,108,108,.08); }
.contact-field-full { grid-column: 1 / -1; }
.contact-field small { color: #8993a6; font-size: .7rem; }
.contact-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; color: #637086; font-size: .78rem; line-height: 1.5; cursor: pointer; }
.contact-consent input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--brand); }
.contact-submit-row { display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.contact-submit-row .button { flex: 0 0 auto; }
.contact-submit-row p { margin: 0; color: #7b879a; font-size: .72rem; line-height: 1.5; }
.contact-feedback { display: none; margin-top: 14px; padding: 11px 13px; border-radius: 10px; font-size: .8rem; line-height: 1.5; }
.contact-feedback.is-visible { display: block; }
.contact-feedback.is-error { border: 1px solid #f0cccc; background: #fff6f6; color: #9b4545; }
.contact-feedback.is-info { border: 1px solid #cfe5dc; background: #f2fbf7; color: #35685a; }

@media (max-width: 940px) {
    .contact-heading { grid-template-columns: 1fr; gap: 14px; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-info { max-width: none; }
}
@media (max-width: 620px) {
    .contact-info,
    .contact-form-card { padding: 21px 18px; border-radius: 18px; }
    .contact-form-head { align-items: flex-start; flex-direction: column; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .contact-field-full { grid-column: auto; }
    .contact-submit-row { align-items: stretch; flex-direction: column; }
    .contact-submit-row .button { width: 100%; }
}

/* Paso 1.10 - Responsive final y accesibilidad transversal */
html { scroll-padding-top: 92px; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(36,91,255,.22);
    outline-offset: 3px;
}
.header-inner { position: relative; }

@media (max-width: 1100px) and (min-width: 901px) {
    .header-inner { gap: 18px; }
    .main-nav { gap: 13px; font-size: .84rem; }
    .main-nav > a:not(.nav-login):not(.nav-cta) { padding-left: 1px; padding-right: 1px; }
    .nav-login, .nav-cta { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 900px) {
    html { scroll-padding-top: 82px; }
    .main-nav {
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        max-height: calc(100dvh - 98px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .main-nav > a,
    .nav-login,
    .nav-cta { min-height: 44px; }
    .section { scroll-margin-top: 82px; }
    .section-grid { gap: 36px; }
    .product-preview { width: min(100%, 610px); justify-self: center; }
    .hero-copy { max-width: 760px; }
    .hero-copy .lead { max-width: 720px; }
    .benefits-heading,
    .features-heading,
    .how-heading,
    .plans-heading,
    .faq-heading,
    .contact-heading { margin-bottom: 30px; }
}

@media (max-width: 720px) {
    .section { padding: 64px 0; }
    .hero-section { padding: 68px 0 64px; }
    h2 { font-size: clamp(1.85rem, 7vw, 2.35rem); }
    .eyebrow { line-height: 1.35; }
    .benefits-grid,
    .features-grid { gap: 14px; }
    .pricing-card { max-width: 100%; }
    .faq-grid { gap: 12px; }
    .contact-layout { gap: 16px; }
    .site-footer { padding-top: 40px; }
}

@media (max-width: 560px) {
    html { scroll-padding-top: 76px; }
    .container { width: min(calc(100% - 24px), var(--max)); }
    .header-inner { min-height: 66px; gap: 12px; }
    .brand-logo { width: 164px; }
    .main-nav { top: calc(100% + 7px); border-radius: 13px; padding: 10px; }
    .main-nav > a:not(.nav-login):not(.nav-cta) { padding: 11px 12px; }
    .section { padding: 54px 0; scroll-margin-top: 76px; }
    .hero-section { padding: 58px 0 56px; }
    .section-grid { gap: 30px; }
    h1 { font-size: clamp(2.15rem, 11.7vw, 3.05rem); line-height: 1.01; }
    h2 { margin-bottom: 22px; }
    .lead { margin-top: 18px; line-height: 1.65; }
    .actions { margin-top: 24px; }
    .button { min-height: 46px; }
    .hero-trust { margin-top: 20px; }
    .product-preview { width: 100%; }
    .preview-toolbar { align-items: flex-start; }
    .preview-online { padding: 6px 8px; }
    .preview-total { padding: 16px; }
    .preview-total strong { font-size: 1.65rem; overflow-wrap: anywhere; }
    .benefits-summary { margin-top: 20px; }
    .feature-item,
    .benefit-card,
    .how-step,
    .pricing-card,
    .contact-info,
    .contact-form-card { box-shadow: 0 8px 26px rgba(26,42,76,.05); }
    .features-footer { gap: 12px; }
    .plans-note { gap: 11px; }
    .plan-price-placeholder { padding: 16px; }
    .plan-price-line { align-items: baseline; flex-wrap: wrap; }
    .faq-item summary { gap: 12px; }
    .faq-help { padding: 16px; }
    .contact-info-main { gap: 12px; }
    .contact-topic-list { margin-top: 18px; }
    .contact-topic { grid-template-columns: 32px 1fr; gap: 10px; }
    .contact-fast-actions { padding-top: 18px; }
    .contact-consent input { width: 20px; height: 20px; flex-basis: 20px; }
    .footer-inner { gap: 22px; }
    .footer-meta { font-size: .82rem; }
}

@media (max-width: 400px) {
    .container { width: min(calc(100% - 20px), var(--max)); }
    .brand-logo { width: 150px; }
    .nav-toggle { flex: 0 0 44px; padding: 0 11px; }
    .eyebrow { font-size: .7rem; letter-spacing: .085em; }
    h1 { font-size: clamp(2rem, 11vw, 2.55rem); }
    h2 { font-size: clamp(1.7rem, 8.2vw, 2rem); }
    .hero-trust { display: grid; grid-template-columns: 1fr; }
    .product-preview { padding: 16px; }
    .preview-brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
    .preview-online { font-size: .66rem; }
    .preview-total strong { font-size: 1.48rem; }
    .benefit-card,
    .feature-item,
    .how-step,
    .pricing-card { padding-left: 17px; padding-right: 17px; }
    .pricing-card-featured .pricing-card-head { padding-right: 0; padding-top: 30px; }
    .plan-badge { top: 12px; right: 12px; }
    .faq-item summary { font-size: .88rem; }
    .contact-info,
    .contact-form-card { padding: 19px 16px; }
    .contact-form-status { white-space: normal; }
    .footer-brand img { width: 174px; }
}

@media (hover: none) {
    .content-card:hover,
    .plan-card:hover,
    .button.primary:hover,
    .button.secondary:hover { transform: none; }
}

/* Fase 2 - Paso 2.2A: Registro real de Usuarios SFL */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.registration-page {
    min-height: 620px;
    padding-top: 64px;
    background:
        radial-gradient(circle at 88% 5%, rgba(36,91,255,.08), transparent 28%),
        linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%);
}
.registration-heading {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 46px;
    align-items: end;
    margin-bottom: 30px;
}
.registration-heading h1 {
    max-width: 760px;
    margin: 10px 0 0;
    font-size: clamp(2.3rem, 4.4vw, 4.15rem);
    line-height: 1.01;
    letter-spacing: -.045em;
}
.registration-heading > p {
    margin: 0 0 7px;
    color: var(--muted);
    line-height: 1.75;
}
.registration-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 24px;
    align-items: start;
}
.registration-form-card,
.registration-summary {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(26,42,76,.055);
}
.registration-form-card { padding: 30px; }
.registration-summary {
    position: sticky;
    top: 100px;
    padding: 24px;
    background: linear-gradient(145deg, #fff, #f8faff 68%);
}
.registration-section-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 16px;
    padding-top: 4px;
}
.registration-section-head:not(:first-child) {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid #e8edf5;
}
.registration-section-head > span {
    display: inline-flex;
    width: 34px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .72rem;
    font-weight: 850;
}
.registration-section-head strong,
.registration-section-head small { display: block; }
.registration-section-head strong { color: var(--heading); font-size: .98rem; }
.registration-section-head small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.account-type-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    border: 0;
}
.account-type-option { min-width: 0; cursor: pointer; }
.account-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.account-type-box {
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid #d8e0ec;
    border-radius: 14px;
    background: #fbfcfe;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.account-type-icon {
    grid-row: 1 / 3;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #edf2ff;
    font-size: 1.15rem;
}
.account-type-box strong { align-self: end; color: var(--heading); }
.account-type-box small { color: var(--muted); line-height: 1.4; }
.account-type-option input:checked + .account-type-box {
    border-color: #7fa0ff;
    background: #f5f8ff;
    box-shadow: 0 0 0 3px rgba(36,91,255,.08);
}
.account-type-option input:focus-visible + .account-type-box {
    outline: 3px solid rgba(36,91,255,.18);
    outline-offset: 2px;
}
.registration-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px;
}
.registration-company-only[hidden] { display: none !important; }
.registration-field { display: grid; gap: 7px; min-width: 0; }
.registration-field-full { grid-column: 1 / -1; }
.registration-field > span,
.billing-period > legend {
    color: #39445a;
    font-size: .78rem;
    font-weight: 760;
}
.registration-field input,
.registration-field select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #d5deeb;
    border-radius: 11px;
    outline: 0;
    background: #fbfcfe;
    color: var(--heading);
    font-size: .92rem;
}
.registration-field input:focus,
.registration-field select:focus {
    border-color: #8ca8ff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(36,91,255,.10);
}
.registration-field input[aria-invalid="true"],
.registration-field select[aria-invalid="true"] {
    border-color: #d96c6c;
    box-shadow: 0 0 0 3px rgba(217,108,108,.08);
}
.registration-field small { color: #8993a6; font-size: .7rem; line-height: 1.4; }

/* SFL 2.2A - Alineación exacta Tipo de documento / Documento */
.registration-document-field {
    grid-template-rows: 18px 48px minmax(18px, auto);
    align-content: start;
}
.registration-document-field > span {
    display: flex;
    align-items: center;
    min-height: 18px;
}
.registration-document-field > input {
    height: 48px;
    min-height: 48px;
    margin: 0;
}
.registration-document-field > small {
    display: block;
    min-height: 18px;
    margin: 0;
}
/* SFL 2.2A - Campo de contraseña integrado */
.registration-field > label {
    color: #39445a;
    font-size: .78rem;
    font-weight: 760;
}
.password-field-shell {
    position: relative;
    width: 100%;
    min-width: 0;
}
.password-field-shell > input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 154px 11px 13px;
    border: 1px solid #d5deeb;
    border-radius: 11px;
    outline: 0;
    background: #fbfcfe;
    color: var(--heading);
    font-size: .92rem;
}
.password-field-shell > input:focus {
    border-color: #8ca8ff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(36,91,255,.10);
}
.password-field-shell > input[aria-invalid="true"] {
    border-color: #d96c6c;
    box-shadow: 0 0 0 3px rgba(217,108,108,.08);
}
.password-field-actions {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    z-index: 3;
}
.password-field-actions-single + * { min-width: 0; }
.password-inside-action {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    min-width: 34px;
    height: 32px;
    padding: 0 9px;
    border-radius: 8px;
    background: transparent;
    color: #245bff;
    font: inherit;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}
.password-generate-action {
    background: #eef3ff;
}
.password-view-action {
    width: 34px;
    padding: 0;
}
.password-action-symbol {
    font-size: 1rem;
    line-height: 1;
}
.password-eye {
    font-size: 1.05rem;
    line-height: 1;
    transform: scaleX(1.15);
}
.password-view-action[data-visible="true"] .password-eye {
    opacity: .55;
}
@media (hover:hover) and (pointer:fine) {
    .password-inside-action:hover { background: #e4ebff; }
}
.password-inside-action:focus-visible {
    outline: 3px solid rgba(36,91,255,.18);
    outline-offset: 1px;
}
.password-inside-action:active { transform: scale(.97); }
#registration-document-type-display[readonly] {
    background: #f6f8fc;
    color: #273248;
    cursor: default;
    font-weight: 650;
}

.billing-period {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 0;
    margin: 0;
    border: 0;
}
.billing-period > legend { margin-bottom: 7px; }
.billing-period label { cursor: pointer; }
.billing-period input { position: absolute; opacity: 0; pointer-events: none; }
.billing-period label > span {
    display: block;
    min-height: 66px;
    padding: 12px 14px;
    border: 1px solid #d8e0ec;
    border-radius: 12px;
    background: #fbfcfe;
}
.billing-period strong,
.billing-period small { display: block; }
.billing-period strong { color: var(--heading); font-size: .86rem; }
.billing-period small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.billing-period input:checked + span {
    border-color: #7fa0ff;
    background: #f3f6ff;
    box-shadow: 0 0 0 3px rgba(36,91,255,.07);
}
.registration-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 22px;
    color: #637086;
    font-size: .8rem;
    line-height: 1.55;
    cursor: pointer;
}
.registration-consent input { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; accent-color: var(--brand); }
.registration-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.registration-actions .button { min-width: 165px; }
.registration-alert,
.registration-feedback {
    padding: 13px 15px;
    border-radius: 11px;
    font-size: .82rem;
    line-height: 1.5;
}
.registration-alert { margin-bottom: 18px; }
.registration-alert.is-error,
.registration-feedback.is-error { border: 1px solid #f0cccc; background: #fff6f6; color: #9b4545; }
.registration-feedback { display: none; margin-top: 14px; }
.registration-feedback.is-visible { display: block; }
.registration-feedback.is-info { border: 1px solid #cddaff; background: #f4f7ff; color: #3e568e; }
.registration-summary-top { display: flex; gap: 12px; align-items: center; }
.registration-summary-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg,var(--brand),var(--sky));
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
}
.registration-summary-top small,
.registration-summary-top strong { display: block; }
.registration-summary-top small { color: var(--muted); font-size: .72rem; }
.registration-summary-top strong { margin-top: 2px; font-size: 1.05rem; }
.registration-summary-price {
    margin: 22px 0 8px;
    padding: 18px;
    border: 1px solid #d7e1f0;
    border-radius: 14px;
    background: #f7f9fd;
}
.registration-summary-price span,
.registration-summary-price strong,
.registration-summary-price small { display: block; }
.registration-summary-price span { color: var(--muted); font-size: .74rem; }
.registration-summary-price strong { margin-top: 3px; color: var(--heading); font-size: 1.65rem; }
.registration-summary-price small { margin-top: 4px; color: #667085; line-height: 1.4; }
.registration-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 2px;
    border-bottom: 1px solid #e9eef5;
    font-size: .78rem;
}
.registration-summary-line span { color: var(--muted); }
.registration-summary-line strong { text-align: right; color: var(--heading); }
.registration-summary-note {
    margin-top: 20px;
    padding: 14px;
    border-radius: 12px;
    background: #effaf5;
    color: #35685a;
}
.registration-summary-note strong { font-size: .82rem; }
.registration-summary-note p { margin: 5px 0 0; font-size: .74rem; line-height: 1.55; }

@media (max-width: 980px) {
    .registration-heading { grid-template-columns: 1fr; gap: 14px; }
    .registration-layout { grid-template-columns: 1fr; }
    .registration-summary { position: static; order: -1; }
}
@media (max-width: 620px) {
    .registration-page { padding-top: 48px; }
    .registration-heading h1 { font-size: clamp(2rem, 10vw, 2.85rem); }
    .registration-form-card,
    .registration-summary { padding: 20px 17px; border-radius: 18px; }
    .account-type-grid,
    .registration-fields,
    .billing-period { grid-template-columns: 1fr; }
    .registration-field-full { grid-column: auto; }
    .registration-actions { flex-direction: column; }
    .registration-actions .button { width: 100%; }
}

@media (max-width: 520px) {
}

@media (max-width: 420px) {
    .password-field-shell > input { padding-right: 138px; }
    .password-generate-action { padding: 0 7px; }
}


/* SFL 2.2A - Nivelación exacta Contraseña / Confirmar contraseña */
.registration-password-fields {
    align-items: start;
}
.registration-password-fields > .registration-field {
    display: grid;
    grid-template-rows: 18px 48px minmax(18px, auto);
    row-gap: 6px;
    align-content: start;
}
.registration-password-fields > .registration-field > label {
    display: flex;
    align-items: center;
    min-height: 18px;
    margin: 0;
}
.registration-password-fields .password-field-shell {
    height: 48px;
    min-height: 48px;
    margin: 0;
}
.registration-password-fields .password-field-shell > input {
    height: 48px;
    min-height: 48px;
    margin: 0;
}
.registration-password-fields > .registration-field > small {
    display: block;
    min-height: 18px;
    margin: 0;
}
.registration-password-spacer {
    visibility: hidden;
}

/* SFL V0.2.2 - Validaciones reales del registro */
.registration-alert.is-success {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #067647;
}

.registration-field-error {
    color: #b42318 !important;
    font-weight: 650;
}

.registration-field input[aria-invalid="true"],
.registration-field select[aria-invalid="true"],
.registration-consent input[aria-invalid="true"] {
    border-color: #f04438;
}

.registration-consent-error {
    display: block;
    margin: -10px 0 14px;
}

/* SFL V0.2.3 - Resultado de creación del Usuario SFL */
.registration-result-card {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid var(--border, #dfe5ef);
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 18px 45px rgba(23, 32, 51, .08);
}
.registration-result-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: #eafaf2;
    color: #079455;
    font-size: 32px;
    font-weight: 800;
}
.registration-result-card h1 {
    max-width: 650px;
    margin: 12px auto 14px;
}
.registration-result-card > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto;
    color: #667085;
    line-height: 1.7;
}
.registration-result-note {
    margin: 26px auto 0;
    padding: 18px 20px;
    border: 1px solid #ccebdc;
    border-radius: 16px;
    background: #f1fbf6;
    text-align: left;
}
.registration-result-note strong { color: #087443; }
.registration-result-note p { margin: 6px 0 0; color: #53705f; line-height: 1.55; }
.registration-result-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}
.registration-result-meta span {
    padding: 14px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #f8fafc;
    color: #667085;
}
.registration-result-meta strong { display: block; margin-top: 4px; color: #172033; }
.registration-result-actions { justify-content: center; margin-top: 24px; }
@media (max-width: 600px) {
    .registration-result-meta { grid-template-columns: 1fr; }
}

/* SFL V0.2.5 - Login del Usuario SFL */
.auth-page {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}
.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    gap: clamp(36px, 7vw, 86px);
    align-items: center;
    min-height: 620px;
}
.auth-intro h1 {
    max-width: 680px;
    margin: 14px 0 18px;
    font-size: clamp(44px, 6vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
}
.auth-intro > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: #667085;
    font-size: 18px;
    line-height: 1.7;
}
.auth-intro-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 28px;
    color: #475467;
    font-size: 14px;
    font-weight: 700;
}
.auth-card {
    padding: 30px;
    border: 1px solid #dce3ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(23, 32, 51, .10);
}
.auth-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.auth-card-head > div {
    display: grid;
    gap: 2px;
}
.auth-card-head span:not(.auth-card-icon) {
    color: #667085;
    font-size: 12px;
}
.auth-card-head strong {
    font-size: 19px;
}
.auth-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: linear-gradient(135deg, #245bff, #1597f3);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.03em;
}
.auth-alert {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.auth-alert.is-error {
    border: 1px solid #fecdca;
    background: #fef3f2;
    color: #b42318;
}
.auth-alert.is-success {
    border: 1px solid #abefc6;
    background: #ecfdf3;
    color: #067647;
}
.auth-form {
    display: grid;
    gap: 18px;
}
.auth-field {
    display: grid;
    gap: 7px;
}
.auth-field label {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}
.auth-field > input,
.auth-password-shell {
    width: 100%;
    min-height: 50px;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #fff;
}
.auth-field > input {
    padding: 0 15px;
    color: #172033;
    font: inherit;
    font-size: 16px;
}
.auth-password-shell {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-password-shell input {
    width: 100%;
    height: 48px;
    border: 0;
    outline: 0;
    padding: 0 50px 0 15px;
    border-radius: 12px;
    background: transparent;
    color: #172033;
    font: inherit;
    font-size: 16px;
}
.auth-field > input:focus,
.auth-password-shell:focus-within {
    border-color: #245bff;
    box-shadow: 0 0 0 3px rgba(36, 91, 255, .10);
    outline: 0;
}
.auth-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #edf2ff;
    color: #245bff;
    cursor: pointer;
}
.auth-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #667085;
    font-size: 12px;
}
.auth-link-disabled {
    color: #98a2b3;
    text-decoration: none;
    cursor: default;
}
.auth-submit {
    width: 100%;
    min-height: 50px;
    justify-content: center;
}
.auth-card-footer {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e8edf5;
    color: #667085;
    font-size: 13px;
}
.auth-card-footer a {
    color: #245bff;
    font-weight: 800;
    text-decoration: none;
}

/* SFL V0.2.5 - Pantalla inicial del Área de Cliente */
.client-area-page {
    background: #f7f9fc;
}
.client-area-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 32px;
}
.client-area-head h1 {
    margin: 12px 0 10px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -.04em;
}
.client-area-head > div > p:not(.eyebrow) {
    margin: 0;
    color: #667085;
}
.client-logout-form {
    margin: 0;
}
.client-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.client-summary-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #dce3ef;
    border-radius: 18px;
    background: #fff;
}
.client-summary-card span {
    display: block;
    margin-bottom: 8px;
    color: #667085;
    font-size: 12px;
}
.client-summary-card strong {
    display: block;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 18px;
}
.client-summary-card small {
    display: block;
    margin-top: 7px;
    color: #667085;
    line-height: 1.45;
}
.client-area-panel {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 22px;
    border: 1px solid #ccebdc;
    border-radius: 18px;
    background: #f1fbf6;
}
.client-area-panel-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #dff7eb;
    color: #079455;
    font-size: 22px;
    font-weight: 900;
}
.client-area-panel strong {
    color: #087443;
}
.client-area-panel p {
    margin: 6px 0 0;
    color: #53705f;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .auth-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .auth-intro {
        max-width: 760px;
    }
    .auth-card {
        max-width: 700px;
        width: 100%;
    }
    .client-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .auth-card {
        padding: 22px;
        border-radius: 18px;
    }
    .auth-form-meta,
    .auth-card-footer,
    .client-area-head {
        align-items: stretch;
        flex-direction: column;
    }
    .auth-card-footer {
        align-items: center;
    }
    .client-summary-grid {
        grid-template-columns: 1fr;
    }
    .client-logout-form .button {
        width: 100%;
        justify-content: center;
    }
}

/* SFL V0.2.6 - Recuperación de contraseña */
.auth-link {
    color: #245bff;
    font-weight: 800;
    text-decoration: none;
}
@media (hover:hover) and (pointer:fine) {
    .auth-link:hover { text-decoration: underline; }
}
.auth-recovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.auth-recovery-actions .button {
    flex: 1 1 180px;
    justify-content: center;
}
.auth-password-shell-generator input {
    padding-right: 184px;
}
.auth-password-shell-copy input {
    padding-right: 88px;
}
.auth-password-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}
.auth-password-actions .auth-password-toggle {
    position: static;
    transform: none;
}
.auth-password-actions-compact {
    gap: 4px;
}
.auth-copy-password {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #f4f7ff;
    color: #245bff;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.auth-copy-password:hover {
    background: #e9efff;
}
.auth-copy-password:active {
    transform: scale(.96);
}
.auth-copy-password:focus-visible {
    outline: 3px solid rgba(36,91,255,.18);
    outline-offset: 2px;
}
.auth-copy-password.is-copied {
    background: #e9f8ef;
    color: #0a8f4d;
}
.auth-copy-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.auth-generate-password {
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: #edf2ff;
    color: #245bff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.auth-generate-password:focus-visible,
.auth-link:focus-visible {
    outline: 3px solid rgba(36,91,255,.18);
    outline-offset: 2px;
}
@media (max-width: 420px) {
    .auth-password-shell-generator input { padding-right: 166px; }
    .auth-password-shell-copy input { padding-right: 82px; }
    .auth-generate-password { padding: 0 7px; font-size: 11px; }
}

/* =========================================================
   SFL V0.3.0 - Fase 3 / Paso 3.1 - Dashboard Área de Cliente
   ========================================================= */
.client-dashboard {
    background: linear-gradient(180deg, #f7f9fd 0%, #ffffff 100%);
    min-height: 720px;
}
.client-dashboard-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}
.client-dashboard-topbar h1 {
    margin: 10px 0 8px;
    font-size: clamp(38px, 4.8vw, 62px);
    line-height: .98;
    letter-spacing: -.045em;
}
.client-dashboard-topbar > div > p:not(.eyebrow) {
    margin: 0;
    color: #667085;
    font-size: 16px;
}
.client-dashboard-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.client-dashboard-nav {
    position: sticky;
    top: 94px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dde4ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(23, 32, 51, .06);
}
.client-nav-account {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 6px 4px 16px;
    border-bottom: 1px solid #edf0f5;
}
.client-nav-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #edf2ff;
    color: #245bff;
    font-weight: 900;
}
.client-nav-account div { min-width: 0; }
.client-nav-account strong,
.client-nav-account small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-nav-account strong { color: #172033; font-size: 14px; }
.client-nav-account small { margin-top: 3px; color: #667085; font-size: 11px; }
.client-nav-links {
    display: grid;
    gap: 5px;
    margin: 14px 0;
}
.client-nav-links a,
.client-nav-links button {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #475467;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
}
.client-nav-links a.is-active {
    background: #edf2ff;
    color: #245bff;
}
.client-nav-links button:disabled {
    opacity: .62;
    cursor: default;
}
.client-nav-links small {
    color: #8b95a7;
    font-size: 10px;
    font-weight: 700;
}
.client-nav-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f6f8fb;
    font-size: 14px;
}
.client-nav-links .is-active .client-nav-icon { background: #ffffff; }
.client-nav-system {
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #edf0f5;
}
.client-nav-system span,
.client-nav-system strong { display: block; }
.client-nav-system span { color: #667085; font-size: 11px; }
.client-nav-system strong { margin: 4px 0 12px; color: #172033; font-size: 13px; }
.client-nav-system .button.small {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    justify-content: center;
    font-size: 12px;
}
.client-nav-system .button:disabled { opacity: .65; cursor: not-allowed; }
.client-dashboard-main { min-width: 0; }
.client-status-strip {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, .9fr));
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid #dde4ef;
    border-radius: 18px;
    background: #ffffff;
}
.client-status-primary,
.client-status-detail {
    min-width: 0;
    padding: 16px 18px;
}
.client-status-primary {
    display: flex;
    align-items: center;
    gap: 10px;
}
.client-status-primary small,
.client-status-detail span {
    display: block;
    color: #667085;
    font-size: 11px;
}
.client-status-primary strong,
.client-status-detail strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 14px;
}
.client-status-detail { border-left: 1px solid #edf0f5; }
.status-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, .11);
    background: #f59e0b;
}
.status-dot.is-success { background: #10b981; box-shadow: 0 0 0 5px rgba(16, 185, 129, .11); }
.status-dot.is-danger { background: #ef4444; box-shadow: 0 0 0 5px rgba(239, 68, 68, .10); }
.text-success { color: #087443 !important; }
.client-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.client-metric-card {
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid #dde4ef;
    border-radius: 18px;
    background: #ffffff;
}
.client-metric-card.is-plan { border-color: #cfd9ff; background: linear-gradient(135deg, #ffffff 0%, #f6f8ff 100%); }
.client-metric-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #edf2ff;
    color: #245bff;
    font-size: 12px;
    font-weight: 900;
}
.client-metric-content { min-width: 0; }
.client-metric-content span,
.client-metric-content strong,
.client-metric-content small { display: block; }
.client-metric-content span { color: #667085; font-size: 11px; }
.client-metric-content strong {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 18px;
    letter-spacing: -.02em;
}
.client-metric-content small { margin-top: 4px; color: #667085; font-size: 11px; line-height: 1.4; }
.client-dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 14px;
    margin-bottom: 16px;
}
.client-dashboard-panel,
.client-module-section {
    min-width: 0;
    padding: 20px;
    border: 1px solid #dde4ef;
    border-radius: 18px;
    background: #ffffff;
}
.client-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.client-panel-kicker {
    display: block;
    margin-bottom: 5px;
    color: #245bff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
}
.client-panel-head h2 { margin: 0; color: #172033; font-size: 19px; letter-spacing: -.025em; }
.client-panel-head > small { max-width: 320px; color: #667085; line-height: 1.45; text-align: right; }
.client-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff7e6;
    color: #a25b00;
    font-size: 11px;
    font-weight: 800;
}
.client-status-badge.is-success { background: #eaf9f1; color: #087443; }
.client-status-badge.is-danger { background: #fff0f0; color: #b42318; }
.client-detail-list { margin: 0; }
.client-detail-list > div {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr);
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f5;
}
.client-detail-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.client-detail-list dt { color: #667085; font-size: 12px; }
.client-detail-list dd { margin: 0; overflow-wrap: anywhere; color: #172033; font-size: 12px; font-weight: 800; text-align: right; }
.client-step-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.client-step-list li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.client-step-list li > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #dce3ef;
    border-radius: 10px;
    background: #f7f9fc;
    color: #7b8798;
    font-size: 11px;
    font-weight: 900;
}
.client-step-list li.is-done > span { border-color: #ccebdc; background: #edf9f3; color: #087443; }
.client-step-list li.is-current > span { border-color: #cfd9ff; background: #edf2ff; color: #245bff; }
.client-step-list strong,
.client-step-list small { display: block; }
.client-step-list strong { margin-top: 2px; color: #172033; font-size: 12px; }
.client-step-list small { margin-top: 2px; color: #667085; font-size: 11px; line-height: 1.4; }
.client-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.client-module-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    position: relative;
    padding: 14px;
    border: 1px solid #e3e8f1;
    border-radius: 14px;
    background: #fbfcfe;
}
.client-module-card.is-next { border-color: #cad6ff; background: #f7f9ff; }
.client-module-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #edf2ff;
    color: #245bff;
    font-weight: 900;
}
.client-module-card strong { display: block; color: #172033; font-size: 12px; }
.client-module-card p { margin: 4px 0 0; color: #667085; font-size: 11px; line-height: 1.4; }
.client-module-state {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.client-module-card.is-next .client-module-state { color: #245bff; }
.client-module-state.is-done { color: #087443; }


@media (hover: hover) and (pointer: fine) {
    .client-nav-links a:hover { background: #f6f8fb; }
    .client-nav-links a.is-active:hover { background: #edf2ff; }
}
@media (max-width: 1080px) {
    .client-dashboard-layout { grid-template-columns: 210px minmax(0, 1fr); }
    .client-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-status-detail:nth-child(3) { border-left: 0; border-top: 1px solid #edf0f5; }
    .client-status-detail:nth-child(4) { border-top: 1px solid #edf0f5; }
}
@media (max-width: 820px) {
    .client-dashboard-layout { grid-template-columns: 1fr; }
    .client-dashboard-nav { position: static; }
    .client-nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-nav-system { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
    .client-nav-system strong { margin: 2px 0 0; }
    .client-nav-system .button.small { width: auto; min-width: 140px; grid-row: 1 / 3; grid-column: 2; }
    .client-dashboard-columns { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .client-dashboard-topbar { align-items: stretch; flex-direction: column; }
    .client-dashboard-topbar h1 { font-size: clamp(34px, 11vw, 46px); }
    .client-status-strip,
    .client-metrics-grid,
    .client-module-grid { grid-template-columns: 1fr; }
    .client-status-detail { border-left: 0; border-top: 1px solid #edf0f5; }
    .client-nav-links { grid-template-columns: 1fr; }
    .client-nav-system { grid-template-columns: 1fr; }
    .client-nav-system .button.small { width: 100%; min-width: 0; grid-row: auto; grid-column: auto; }
    .client-panel-head { flex-direction: column; }
    .client-panel-head > small { max-width: none; text-align: left; }
    .client-detail-list > div { grid-template-columns: 1fr; gap: 4px; }
    .client-detail-list dd { text-align: left; }
}


/* =========================================================
   SFL V0.3.1 - Fase 3 / Paso 3.2 - Mi cuenta
   ========================================================= */
.client-module-card[href] {
    color: inherit;
    text-decoration: none;
}
.account-message {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
}
.account-message.is-success {
    color: #067647;
    background: #ecfdf3;
    border: 1px solid #abefc6;
}
.account-message.is-error {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
}
.account-profile-panel { padding: 22px; }
.account-panel-head { margin-bottom: 22px; }
.account-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    color: #245bff;
    background: #edf2ff;
    font-size: 11px;
    font-weight: 800;
}
.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}
.account-field { min-width: 0; }
.account-field-full { grid-column: 1 / -1; }
.account-field label {
    display: block;
    margin-bottom: 7px;
    color: #172033;
    font-size: 12px;
    font-weight: 750;
}
.account-field input,
.account-readonly {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d6deeb;
    border-radius: 12px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
}
.account-field input {
    padding: 0 14px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.account-field input:focus {
    border-color: #8eabff;
    box-shadow: 0 0 0 3px rgba(36, 91, 255, .10);
}
.account-readonly {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #f7f9fc;
    font-weight: 700;
}
.account-document { letter-spacing: .02em; }
.account-field > small {
    display: block;
    margin-top: 6px;
    color: #7b8496;
    font-size: 10px;
    line-height: 1.45;
}
.account-field .field-error {
    color: #b42318;
    font-weight: 650;
}
.account-access-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid #dce4ef;
    border-radius: 14px;
    background: #f8fafc;
}
.account-access-box span,
.account-access-box strong,
.account-access-box small { display: block; }
.account-access-box span { color: #667085; font-size: 10px; }
.account-access-box strong { margin-top: 3px; color: #172033; font-size: 13px; }
.account-access-box small { margin-top: 3px; color: #7b8496; font-size: 10px; }
.account-access-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #067647;
    font-size: 11px;
    font-weight: 800;
}
.account-access-state span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #067647;
    background: #dcfae6;
}
.account-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f5;
}
.account-protected-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #cfe9dc;
    border-radius: 14px;
    background: #f0fbf5;
}
.account-note-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #078f5c;
    background: #dcfae6;
    font-weight: 900;
}
.account-protected-note strong { display: block; color: #0b6847; font-size: 12px; }
.account-protected-note p { margin: 4px 0 0; color: #537165; font-size: 11px; line-height: 1.5; }

@media (hover: hover) and (pointer: fine) {
    .client-module-card[href]:hover {
        border-color: #aebfff;
        background: #f4f7ff;
    }
}
@media (max-width: 640px) {
    .account-form-grid { grid-template-columns: 1fr; }
    .account-field-full { grid-column: auto; }
    .account-access-box { align-items: flex-start; flex-direction: column; }
    .account-form-actions { flex-direction: column-reverse; }
    .account-form-actions .button { width: 100%; }
}

/* Hotfix V0.3.1 - Encabezado sensible a sesión */
.nav-session-form {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.nav-logout {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.82);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.nav-logout:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff;
}

.nav-logout:focus-visible {
    outline: 3px solid rgba(36,91,255,.18);
    outline-offset: 2px;
}

@media (max-width: 860px) {
    .nav-session-form {
        width: 100%;
        margin-top: 4px;
    }

    .nav-logout {
        width: 100%;
        min-height: 44px;
    }
}


/* =========================================================
   SFL V0.3.1 - Hotfix distribución cabecera Área de Cliente
   ========================================================= */
.client-dashboard {
    padding-top: 42px;
}
.client-dashboard-topbar {
    align-items: stretch;
    gap: 22px;
    margin-bottom: 18px;
}
.client-dashboard-welcome {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.client-dashboard-topbar .client-dashboard-welcome h1 {
    margin: 8px 0 6px;
    font-size: clamp(42px, 4.2vw, 56px);
}
.client-dashboard-topbar .client-dashboard-welcome > p:not(.eyebrow) {
    margin: 0;
    color: #667085;
    font-size: 15px;
}
.client-dashboard-quick {
    width: min(100%, 410px);
    flex: 0 0 410px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    align-self: center;
    border: 1px solid #dde4ef;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(23,32,51,.045);
}
.client-dashboard-quick-item {
    min-width: 0;
    padding: 14px 16px;
}
.client-dashboard-quick-item + .client-dashboard-quick-item {
    border-left: 1px solid #edf0f5;
}
.client-dashboard-quick-item small,
.client-dashboard-quick-item strong,
.client-dashboard-quick-item span {
    display: block;
}
.client-dashboard-quick-item small {
    margin-bottom: 4px;
    color: #667085;
    font-size: 10px;
}
.client-dashboard-quick-item strong {
    color: #172033;
    font-size: 14px;
}
.client-dashboard-quick-item strong.is-success { color: #087a55; }
.client-dashboard-quick-item strong.is-warning { color: #a15c00; }
.client-dashboard-quick-item strong.is-danger { color: #b42318; }
.client-dashboard-quick-item span {
    margin-top: 3px;
    color: #7a8495;
    font-size: 10px;
}

@media (max-width: 900px) {
    .client-dashboard {
        padding-top: 32px;
    }
    .client-dashboard-topbar {
        flex-direction: column;
        gap: 14px;
    }
    .client-dashboard-quick {
        width: 100%;
        flex-basis: auto;
        align-self: stretch;
    }
}
@media (max-width: 560px) {
    .client-dashboard-topbar .client-dashboard-welcome h1 {
        font-size: clamp(36px, 11vw, 46px);
    }
    .client-dashboard-quick {
        grid-template-columns: 1fr;
    }
    .client-dashboard-quick-item + .client-dashboard-quick-item {
        border-left: 0;
        border-top: 1px solid #edf0f5;
    }
}


/* =========================================================
   SFL V0.3.2 - Fase 3 / Paso 3.3 - Seguridad
   ========================================================= */
.security-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.security-summary-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px;
    border: 1px solid #dde4ef;
    border-radius: 17px;
    background: #fff;
}
.security-summary-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf2ff;
    color: #245bff;
    font-size: 14px;
    font-weight: 900;
}
.security-summary-card small,
.security-summary-card strong,
.security-summary-card span {
    display: block;
}
.security-summary-card small {
    color: #667085;
    font-size: 10px;
}
.security-summary-card strong {
    margin-top: 4px;
    color: #172033;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.security-summary-card div > span {
    margin-top: 4px;
    color: #078457;
    font-size: 10px;
    font-weight: 700;
}
.security-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 16px;
    margin-bottom: 16px;
}
.security-panel-copy {
    margin: -4px 0 18px;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}
.security-form {
    display: grid;
    gap: 15px;
}
.security-field {
    min-width: 0;
}
.security-field label {
    display: block;
    margin-bottom: 7px;
    color: #172033;
    font-size: 12px;
    font-weight: 750;
}
.security-field > small {
    display: block;
    margin-top: 6px;
    color: #7b8496;
    font-size: 10px;
    line-height: 1.4;
}
.security-field .field-error {
    color: #b42318;
    font-weight: 700;
}
.security-password-control {
    position: relative;
    min-width: 0;
}
.security-password-control input {
    width: 100%;
    min-height: 48px;
    padding: 0 128px 0 14px;
    border: 1px solid #d6deeb;
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.security-password-control input:focus {
    border-color: #8eabff;
    box-shadow: 0 0 0 3px rgba(36,91,255,.10);
}
.security-eye,
.security-copy,
.security-generate {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    color: #245bff;
    background: #edf2ff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.security-eye {
    right: 6px;
    width: 34px;
}
.security-copy {
    right: 44px;
    width: 34px;
    font-size: 15px;
}
.security-generate {
    right: 82px;
    padding: 0 10px;
}
.security-eye.is-visible,
.security-copy.is-copied {
    color: #078457;
    background: #e9f9f1;
}
.security-field:first-of-type .security-password-control input {
    padding-right: 50px;
}
.security-field:first-of-type .security-copy,
.security-field:first-of-type .security-generate {
    display: none;
}
.security-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 3px;
}
.security-current-session {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #cfe9dc;
    border-radius: 13px;
    background: #f0fbf5;
}
.security-current-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16,185,129,.10);
}
.security-current-session strong,
.security-current-session small {
    display: block;
}
.security-current-session strong {
    color: #0b6847;
    font-size: 12px;
}
.security-current-session small {
    margin-top: 4px;
    color: #537165;
    font-size: 10px;
    line-height: 1.45;
}
.security-close-sessions {
    width: 100%;
    justify-content: center;
}
.security-access-panel {
    margin-bottom: 16px;
}
.security-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e6eaf0;
    border-radius: 13px;
}
.security-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}
.security-table th,
.security-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    font-size: 11px;
}
.security-table th {
    color: #667085;
    background: #f8fafc;
    font-weight: 800;
}
.security-table td {
    color: #344054;
}
.security-table tbody tr:last-child td {
    border-bottom: 0;
}
.security-result {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.security-result.is-success {
    color: #067647;
    background: #ecfdf3;
}
.security-result.is-failed {
    color: #b42318;
    background: #fef3f2;
}
.security-empty {
    padding: 18px;
    border: 1px dashed #d7deea;
    border-radius: 12px;
    color: #667085;
    background: #fafbfc;
    font-size: 12px;
}
.security-activity-list {
    display: grid;
}
.security-activity-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f5;
}
.security-activity-item:first-child {
    padding-top: 0;
}
.security-activity-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.security-activity-mark {
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: #245bff;
    box-shadow: 0 0 0 4px rgba(36,91,255,.09);
}
.security-activity-content strong,
.security-activity-content small {
    display: block;
}
.security-activity-content strong {
    color: #172033;
    font-size: 12px;
}
.security-activity-content small {
    margin-top: 4px;
    color: #667085;
    font-size: 10px;
    line-height: 1.45;
}
@media (hover: hover) and (pointer: fine) {
    .security-eye:hover,
    .security-copy:hover,
    .security-generate:hover {
        background: #dfe7ff;
    }
}
@media (max-width: 900px) {
    .security-main-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .security-summary-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .security-password-control input {
        padding-right: 118px;
    }
    .security-generate {
        padding: 0 8px;
        font-size: 10px;
    }
}


/* =========================================================
   SFL V0.3.3 - Fase 3 / Paso 3.4 - Mi Plan
   ========================================================= */
.plan-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.plan-overview-card {
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 17px;
    border: 1px solid #dde4ef;
    border-radius: 17px;
    background: #fff;
}
.plan-overview-card.is-primary {
    border-color: #a9bcff;
    background: linear-gradient(180deg, #fbfcff 0%, #f6f8ff 100%);
}
.plan-overview-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf2ff;
    color: #245bff;
    font-size: 11px;
    font-weight: 900;
}
.plan-overview-card small,
.plan-overview-card strong,
.plan-overview-card span {
    display: block;
}
.plan-overview-card small {
    color: #667085;
    font-size: 10px;
}
.plan-overview-card strong {
    margin-top: 4px;
    color: #172033;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.plan-overview-card strong.is-success { color: #067647; }
.plan-overview-card strong.is-warning { color: #a15c00; }
.plan-overview-card strong.is-danger { color: #b42318; }
.plan-overview-card div > span {
    margin-top: 4px;
    color: #667085;
    font-size: 10px;
}
.plan-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 16px;
    margin-bottom: 16px;
}
.plan-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.plan-status.is-success {
    color: #067647;
    background: #ecfdf3;
}
.plan-status.is-warning {
    color: #a15c00;
    background: #fff4df;
}
.plan-status.is-danger {
    color: #b42318;
    background: #fef3f2;
}
.plan-description {
    margin: -3px 0 16px;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}
.plan-detail-list {
    display: grid;
    border-top: 1px solid #edf0f5;
}
.plan-detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f5;
}
.plan-detail-list span {
    color: #667085;
    font-size: 11px;
}
.plan-detail-list strong {
    color: #172033;
    text-align: right;
    font-size: 11px;
}
.plan-annual-price {
    margin: 6px 0 16px;
    padding: 18px;
    border: 1px solid #cdd9ff;
    border-radius: 14px;
    background: #f6f8ff;
}
.plan-annual-price small,
.plan-annual-price strong,
.plan-annual-price span {
    display: block;
}
.plan-annual-price small {
    color: #667085;
    font-size: 10px;
}
.plan-annual-price strong {
    margin-top: 6px;
    color: #172033;
    font-size: 24px;
}
.plan-annual-price span {
    margin-top: 5px;
    color: #245bff;
    font-size: 10px;
    font-weight: 800;
}
.plan-annual-panel > p {
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}
.plan-features-panel {
    margin-bottom: 16px;
}
.plan-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}
.plan-feature-item {
    min-width: 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 13px;
    border: 1px solid #e5eaf2;
    border-radius: 12px;
    background: #fbfcfe;
}
.plan-feature-item span {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #078457;
    background: #eaf9f1;
    font-size: 11px;
    font-weight: 900;
}
.plan-feature-item strong {
    color: #344054;
    font-size: 11px;
    line-height: 1.45;
}
.plan-next-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.plan-next-panel h2 {
    margin: 3px 0 5px;
}
.plan-next-panel p {
    margin: 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}
.plan-next-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 11px;
    border-radius: 999px;
    color: #245bff;
    background: #edf2ff;
    font-size: 10px;
    font-weight: 800;
}
@media (max-width: 1050px) {
    .plan-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .plan-main-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .plan-overview-grid,
    .plan-feature-grid {
        grid-template-columns: 1fr;
    }
    .plan-next-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   SFL V0.3.3 - Hotfix indicadores superiores de Mi Plan
   ========================================================= */
.plan-overview-grid {
    align-items: stretch;
}
.plan-overview-card,
.plan-overview-card.is-primary {
    min-height: 98px;
    align-items: center;
    padding: 15px 16px;
    border-color: #dde4ef;
    background: #fff;
    box-shadow: none;
}
.plan-overview-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.plan-overview-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}
.plan-overview-card small {
    line-height: 1.2;
}
.plan-overview-card strong {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plan-overview-card div > span {
    margin-top: 6px;
    line-height: 1.25;
}
@media (max-width: 1200px) {
    .plan-overview-card strong {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}


/* =========================================================
   SFL V0.3.4 - Fase 3 / Paso 3.5 - Suscripción
   ========================================================= */
.subscription-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.subscription-overview-card {
    min-width: 0;
    min-height: 98px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid #dde4ef;
    border-radius: 17px;
    background: #fff;
}
.subscription-overview-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf2ff;
    color: #245bff;
    font-size: 12px;
    font-weight: 900;
}
.subscription-overview-card > div {
    min-width: 0;
}
.subscription-overview-card small,
.subscription-overview-card strong,
.subscription-overview-card span {
    display: block;
}
.subscription-overview-card small {
    color: #667085;
    font-size: 10px;
}
.subscription-overview-card strong {
    margin-top: 5px;
    color: #172033;
    font-size: 14px;
    line-height: 1.25;
}
.subscription-overview-card strong.is-success { color: #067647; }
.subscription-overview-card strong.is-warning { color: #a15c00; }
.subscription-overview-card strong.is-danger { color: #b42318; }
.subscription-overview-card div > span {
    margin-top: 6px;
    color: #667085;
    font-size: 10px;
    line-height: 1.3;
}
.subscription-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 16px;
    margin-bottom: 16px;
}
.subscription-status,
.subscription-history-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.subscription-status.is-success,
.subscription-history-status.is-success {
    color: #067647;
    background: #ecfdf3;
}
.subscription-status.is-warning,
.subscription-history-status.is-warning {
    color: #a15c00;
    background: #fff4df;
}
.subscription-status.is-danger,
.subscription-history-status.is-danger {
    color: #b42318;
    background: #fef3f2;
}
.subscription-detail-list {
    display: grid;
    border-top: 1px solid #edf0f5;
}
.subscription-detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f5;
}
.subscription-detail-list span {
    color: #667085;
    font-size: 11px;
}
.subscription-detail-list strong {
    color: #172033;
    text-align: right;
    font-size: 11px;
}
.subscription-detail-list strong.is-success { color: #067647; }
.subscription-detail-list strong.is-warning { color: #a15c00; }
.subscription-detail-list strong.is-danger { color: #b42318; }

.subscription-cycle-state {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 13px;
    border: 1px solid #e2e7ef;
    background: #fafbfc;
}
.subscription-cycle-state.is-success {
    border-color: #cbe9da;
    background: #f0fbf5;
}
.subscription-cycle-state.is-warning {
    border-color: #f2ddae;
    background: #fff9ec;
}
.subscription-cycle-state.is-danger {
    border-color: #f5c9c5;
    background: #fff6f5;
}
.subscription-cycle-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: #98a2b3;
}
.subscription-cycle-state.is-success .subscription-cycle-dot { background: #10b981; }
.subscription-cycle-state.is-warning .subscription-cycle-dot { background: #f59e0b; }
.subscription-cycle-state.is-danger .subscription-cycle-dot { background: #ef4444; }
.subscription-cycle-state strong,
.subscription-cycle-state small {
    display: block;
}
.subscription-cycle-state strong {
    color: #172033;
    font-size: 12px;
}
.subscription-cycle-state small {
    margin-top: 4px;
    color: #667085;
    font-size: 10px;
    line-height: 1.45;
}
.subscription-cycle-notes {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}
.subscription-cycle-notes > div {
    padding: 11px 12px;
    border: 1px solid #e7ebf1;
    border-radius: 11px;
    background: #fbfcfd;
}
.subscription-cycle-notes span,
.subscription-cycle-notes strong {
    display: block;
}
.subscription-cycle-notes span {
    color: #667085;
    font-size: 9px;
}
.subscription-cycle-notes strong {
    margin-top: 4px;
    color: #172033;
    font-size: 11px;
}
.subscription-history-panel {
    margin-bottom: 16px;
}
.subscription-history-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5eaf1;
    border-radius: 13px;
}
.subscription-history-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}
.subscription-history-table th,
.subscription-history-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    color: #344054;
    font-size: 10px;
}
.subscription-history-table th {
    background: #f8fafc;
    color: #667085;
    font-weight: 800;
}
.subscription-history-table tbody tr:last-child td {
    border-bottom: 0;
}
.subscription-next-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.subscription-next-panel h2 {
    margin: 3px 0 5px;
}
.subscription-next-panel p {
    max-width: 760px;
    margin: 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}
.subscription-next-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 11px;
    border-radius: 999px;
    color: #245bff;
    background: #edf2ff;
    font-size: 10px;
    font-weight: 800;
}
@media (max-width: 1050px) {
    .subscription-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .subscription-main-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .subscription-overview-grid {
        grid-template-columns: 1fr;
    }
    .subscription-next-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   SFL V0.3.4 - Hotfix Seguridad: 5 visibles + historial 20
   ========================================================= */
.security-panel-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
}
.security-history-link {
    color: #245bff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.security-history-link:hover {
    text-decoration: underline;
}
.security-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.security-history-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid #e0e6ef;
    border-radius: 12px;
    background: #f7f9fc;
}
.security-history-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 9px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}
.security-history-tabs a.is-active {
    color: #245bff;
    background: #fff;
    box-shadow: 0 1px 5px rgba(17,24,39,.07);
}
.security-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}
.security-history-heading h2 {
    margin: 3px 0 0;
}
.security-history-heading > small {
    color: #667085;
    font-size: 10px;
}
.security-history-activity-list {
    border: 1px solid #e5eaf1;
    border-radius: 13px;
    padding: 16px;
}
.security-pagination {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr minmax(90px, auto);
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.security-pagination > a,
.security-pagination > span,
.security-pagination-pages a,
.security-pagination-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
    color: #344054;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.security-pagination > a:last-child {
    justify-self: end;
}
.security-pagination > span:last-child {
    justify-self: end;
}
.security-pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.security-pagination-pages span:not(.is-current) {
    min-width: auto;
    border-color: transparent;
    background: transparent;
}
.security-pagination .is-current {
    border-color: #245bff;
    color: #fff;
    background: #245bff;
}
.security-pagination .is-disabled {
    color: #a0a8b7;
    background: #f8fafc;
}
@media (max-width: 700px) {
    .security-panel-actions {
        align-items: flex-start;
        text-align: left;
    }
    .security-history-toolbar,
    .security-history-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .security-history-tabs {
        width: 100%;
    }
    .security-history-tabs a {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
    }
    .security-pagination {
        grid-template-columns: 1fr 1fr;
    }
    .security-pagination-pages {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-wrap: wrap;
    }
    .security-pagination > a,
    .security-pagination > span {
        justify-self: stretch !important;
    }
}


/* =========================================================
   SFL V0.3.5 - Fase 3 / Paso 3.6 - Pagos del servicio
   ========================================================= */
.service-payment-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.service-payment-overview-card {
    min-width: 0;
    min-height: 98px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid #dde4ef;
    border-radius: 17px;
    background: #fff;
}
.service-payment-overview-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf2ff;
    color: #245bff;
    font-size: 13px;
    font-weight: 900;
}
.service-payment-overview-card > div {
    min-width: 0;
}
.service-payment-overview-card small,
.service-payment-overview-card strong,
.service-payment-overview-card span {
    display: block;
}
.service-payment-overview-card small {
    color: #667085;
    font-size: 10px;
}
.service-payment-overview-card strong {
    margin-top: 5px;
    color: #172033;
    font-size: 14px;
    line-height: 1.25;
}
.service-payment-overview-card div > span {
    margin-top: 6px;
    color: #667085;
    font-size: 10px;
}
.service-payment-history-panel {
    margin-bottom: 16px;
}
.service-payment-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5eaf1;
    border-radius: 13px;
}
.service-payment-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}
.service-payment-table th,
.service-payment-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    color: #344054;
    font-size: 10px;
    vertical-align: top;
}
.service-payment-table th {
    color: #667085;
    background: #f8fafc;
    font-weight: 800;
}
.service-payment-table tbody tr:last-child td {
    border-bottom: 0;
}
.service-payment-table td strong,
.service-payment-table td small {
    display: block;
}
.service-payment-table td small {
    margin-top: 3px;
    color: #7b8496;
}
.service-payment-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.service-payment-status.is-success {
    color: #067647;
    background: #ecfdf3;
}
.service-payment-status.is-warning {
    color: #a15c00;
    background: #fff4df;
}
.service-payment-status.is-danger {
    color: #b42318;
    background: #fef3f2;
}
.service-payment-status.is-neutral {
    color: #475467;
    background: #f2f4f7;
}
.service-payment-empty {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border: 1px dashed #d6ddea;
    border-radius: 14px;
    background: #fafbfc;
}
.service-payment-empty-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #245bff;
    background: #edf2ff;
    font-weight: 900;
}
.service-payment-empty strong {
    color: #172033;
    font-size: 13px;
}
.service-payment-empty p {
    max-width: 720px;
    margin: 6px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}
.service-payment-pagination {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr minmax(90px, auto);
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.service-payment-pagination > a,
.service-payment-pagination > span,
.service-payment-pagination-pages a,
.service-payment-pagination-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
    color: #344054;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.service-payment-pagination > a:last-child,
.service-payment-pagination > span:last-child {
    justify-self: end;
}
.service-payment-pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.service-payment-pagination-pages span:not(.is-current) {
    min-width: auto;
    border-color: transparent;
    background: transparent;
}
.service-payment-pagination .is-current {
    border-color: #245bff;
    color: #fff;
    background: #245bff;
}
.service-payment-pagination .is-disabled {
    color: #a0a8b7;
    background: #f8fafc;
}
.service-payment-separation-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid #dce4ff;
    border-radius: 13px;
    background: #f7f9ff;
}
.service-payment-separation-note > span {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #245bff;
    background: #e8edff;
    font-size: 11px;
    font-weight: 900;
}
.service-payment-separation-note p {
    margin: 1px 0 0;
    color: #526075;
    font-size: 10px;
    line-height: 1.5;
}
.service-payment-separation-note strong {
    color: #172033;
}
@media (max-width: 1050px) {
    .service-payment-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .service-payment-overview-grid {
        grid-template-columns: 1fr;
    }
    .service-payment-pagination {
        grid-template-columns: 1fr 1fr;
    }
    .service-payment-pagination-pages {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-wrap: wrap;
    }
    .service-payment-pagination > a,
    .service-payment-pagination > span {
        justify-self: stretch !important;
    }
}


/* =========================================================
   SFL V0.3.5 - Hotfix centrar iconos Pagos del servicio
   ========================================================= */
.service-payment-overview-card .service-payment-overview-icon {
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1;
    padding: 0;
}


/* =========================================================
   SFL V0.3.6 - Fase 3 / Paso 3.7 - Soporte
   ========================================================= */
.support-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.support-overview-card {
    min-width: 0;
    min-height: 98px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid #dde4ef;
    border-radius: 17px;
    background: #fff;
}
.support-overview-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1;
    border-radius: 11px;
    background: #edf2ff;
    color: #245bff;
    font-size: 13px;
    font-weight: 900;
}
.support-overview-card > div {
    min-width: 0;
}
.support-overview-card small,
.support-overview-card strong,
.support-overview-card span {
    display: block;
}
.support-overview-card small {
    color: #667085;
    font-size: 10px;
}
.support-overview-card strong {
    margin-top: 5px;
    color: #172033;
    font-size: 15px;
}
.support-overview-card div > span {
    margin-top: 6px;
    color: #667085;
    font-size: 10px;
}
.support-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
    gap: 16px;
    margin-bottom: 16px;
}
.support-form {
    display: grid;
    gap: 15px;
}
.support-field label {
    display: block;
    margin-bottom: 7px;
    color: #172033;
    font-size: 12px;
    font-weight: 750;
}
.support-field input,
.support-field select,
.support-field textarea {
    width: 100%;
    border: 1px solid #d6deeb;
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 13px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.support-field input,
.support-field select {
    min-height: 48px;
    padding: 0 14px;
}
.support-field textarea {
    min-height: 150px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.5;
}
.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
    border-color: #8eabff;
    box-shadow: 0 0 0 3px rgba(36,91,255,.10);
}
.support-field > small {
    display: block;
    margin-top: 6px;
    color: #7b8496;
    font-size: 10px;
}
.support-field .field-error {
    color: #b42318;
    font-weight: 700;
}
.support-form-actions {
    display: flex;
    justify-content: flex-end;
}
.support-detail-empty {
    min-height: 280px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 22px;
    border: 1px dashed #d6ddea;
    border-radius: 14px;
    background: #fafbfc;
    text-align: center;
}
.support-detail-empty span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #245bff;
    background: #edf2ff;
    font-weight: 900;
}
.support-detail-empty p {
    max-width: 300px;
    margin: 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}
.support-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.support-detail-head small {
    color: #667085;
    font-size: 10px;
}
.support-detail-head h3 {
    margin: 4px 0 0;
    color: #172033;
    font-size: 17px;
}
.support-message-box,
.support-response-box {
    padding: 15px;
    border: 1px solid #e3e8ef;
    border-radius: 13px;
    background: #fbfcfe;
}
.support-response-box {
    margin-top: 12px;
    border-color: #d8e4ff;
    background: #f7f9ff;
}
.support-response-box.is-pending {
    border-style: dashed;
    background: #fafbfc;
}
.support-message-box small,
.support-response-box small {
    color: #667085;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.support-message-box p,
.support-response-box p {
    margin: 8px 0 0;
    color: #344054;
    font-size: 11px;
    line-height: 1.55;
}
.support-message-box > span,
.support-response-box > span {
    display: block;
    margin-top: 10px;
    color: #7b8496;
    font-size: 9px;
}
.support-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.support-status.is-open {
    color: #245bff;
    background: #edf2ff;
}
.support-status.is-warning {
    color: #a15c00;
    background: #fff4df;
}
.support-status.is-success {
    color: #067647;
    background: #ecfdf3;
}
.support-history-panel {
    margin-bottom: 16px;
}
.support-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5eaf1;
    border-radius: 13px;
}
.support-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}
.support-table th,
.support-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    color: #344054;
    font-size: 10px;
}
.support-table th {
    background: #f8fafc;
    color: #667085;
    font-weight: 800;
}
.support-table tbody tr:last-child td {
    border-bottom: 0;
}
.support-view-link {
    color: #245bff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.support-view-link:hover {
    text-decoration: underline;
}
.support-empty {
    padding: 18px;
    border: 1px dashed #d7deea;
    border-radius: 12px;
    color: #667085;
    background: #fafbfc;
    font-size: 11px;
}
@media (max-width: 1050px) {
    .support-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .support-main-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .support-overview-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SFL V0.3.6 - Hotfix definitivo centrado de iconos
   Área de Cliente
   ========================================================= */
.security-summary-card .security-summary-icon,
.plan-overview-card .plan-overview-icon,
.subscription-overview-card .subscription-overview-icon,
.service-payment-overview-card .service-payment-overview-icon,
.support-overview-card .support-overview-icon,
.service-payment-empty .service-payment-empty-icon {
    display: grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}


/* =========================================================
   SFL V0.3.7 - Fase 3 / Paso 3.8 - Entrar al Sistema
   ========================================================= */
.client-nav-system .client-system-entry {
    width: 100%;
    min-height: 42px;
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}
.system-entry-panel {
    max-width: 820px;
}
.system-entry-state {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border: 1px solid #e0e5ee;
    border-radius: 15px;
    background: #fafbfc;
}
.system-entry-state.is-pending {
    border-color: #f2ddae;
    background: #fff9ec;
}
.system-entry-state.is-ready {
    border-color: #cbe9da;
    background: #f0fbf5;
}
.system-entry-state-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid !important;
    place-items: center !important;
    text-align: center;
    line-height: 1;
    border-radius: 13px;
    color: #245bff;
    background: #edf2ff;
    font-weight: 900;
}
.system-entry-state.is-pending .system-entry-state-icon {
    color: #a15c00;
    background: #fff0cc;
}
.system-entry-state.is-ready .system-entry-state-icon {
    color: #067647;
    background: #dcfae6;
}
.system-entry-state h2 {
    margin: 4px 0 7px;
}
.system-entry-state p {
    max-width: 650px;
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}
.system-entry-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.system-entry-requirements article {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid #e3e8ef;
    border-radius: 13px;
    background: #fbfcfd;
}
.system-entry-requirements article > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid !important;
    place-items: center !important;
    text-align: center;
    line-height: 1;
    border-radius: 10px;
    color: #667085;
    background: #eef1f5;
    font-size: 11px;
    font-weight: 900;
}
.system-entry-requirements article.is-ready > span {
    color: #067647;
    background: #dcfae6;
}
.system-entry-requirements article.is-pending > span {
    color: #a15c00;
    background: #fff0cc;
}
.system-entry-requirements small,
.system-entry-requirements strong {
    display: block;
}
.system-entry-requirements small {
    color: #667085;
    font-size: 9px;
}
.system-entry-requirements strong {
    margin-top: 3px;
    color: #172033;
    font-size: 11px;
}
.system-entry-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
@media (max-width: 620px) {
    .system-entry-requirements {
        grid-template-columns: 1fr;
    }
    .system-entry-actions {
        flex-direction: column;
    }
    .system-entry-actions .button {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   SFL V0.4.8 - Navegación cliente corregida
   Bienvenida compacta + retorno Dashboard dentro de tarjeta
   ========================================================= */

.client-nav-account {
    align-items: center;
}

.client-nav-account-compact {
    min-width: 0;
}

.client-nav-account-compact strong {
    display: block;
    overflow: hidden;
    color: #101828;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-nav-welcome-inline {
    color: #667085;
    font-weight: 500;
}

.client-nav-last-login-compact {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #98a2b3 !important;
    font-size: 7.5px !important;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Regreso al Dashboard dentro de la tarjeta principal del módulo.
 * Se inserta en el primer client-panel-head de cada pantalla.
 */
.client-dashboard-panel .client-panel-head {
    position: relative;
}

.client-card-dashboard-return {
    flex: 0 0 auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid #d7e0ed;
    border-radius: 9px;
    color: #475467;
    background: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform .15s ease,
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease;
}

.client-card-dashboard-return:hover {
    transform: translateY(-1px);
    border-color: #b9c9ff;
    color: #245bff;
    background: #f7f9ff;
}

.client-card-dashboard-return:focus-visible {
    outline: 3px solid rgba(36, 91, 255, .18);
    outline-offset: 2px;
}

.client-card-dashboard-return-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #245bff;
    background: #eef3ff;
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 640px) {
    .client-nav-account-compact strong {
        white-space: normal;
    }

    .client-nav-last-login-compact {
        white-space: normal;
    }

    .client-card-dashboard-return {
        min-height: 30px;
        padding: 0 8px;
        font-size: 8.5px;
    }
}


/* =========================================================
   SFL V0.4.8 - Bienvenida en menú superior
   Sidebar vuelve a empresa + correo
   ========================================================= */

.nav-user-welcome {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
    margin-left: 2px;
    line-height: 1.15;
}

.nav-user-welcome strong {
    max-width: 190px;
    overflow: hidden;
    color: #101828;
    font-size: .78rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-welcome small {
    max-width: 190px;
    overflow: hidden;
    color: #98a2b3;
    font-size: .62rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El bloque de cuenta lateral conserva el diseño original:
   nombre de empresa + correo. */
.client-nav-account > div:not(.client-nav-account-compact) {
    min-width: 0;
}

.client-nav-account > div:not(.client-nav-account-compact) strong,
.client-nav-account > div:not(.client-nav-account-compact) small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .nav-user-welcome strong,
    .nav-user-welcome small {
        max-width: 145px;
    }

    .nav-user-welcome strong {
        font-size: .72rem;
    }

    .nav-user-welcome small {
        font-size: .58rem;
    }
}

@media (max-width: 900px) {
    .nav-user-welcome {
        width: 100%;
        align-items: flex-start;
        margin: 6px 0 2px;
        padding: 9px 12px;
        border-radius: 9px;
        background: #f7f9fc;
    }

    .nav-user-welcome strong,
    .nav-user-welcome small {
        max-width: 100%;
    }

    .nav-user-welcome strong {
        font-size: .82rem;
    }

    .nav-user-welcome small {
        font-size: .66rem;
    }
}


/* =========================================================
   SFL V0.4.8 - Hotfix calidad header de sesión
   La bienvenida NO participa en el flujo de enlaces públicos.
   ========================================================= */

.nav-auth-cluster {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid #e8edf5;
}

.nav-auth-cluster .nav-user-welcome {
    width: auto !important;
    min-width: 0;
    max-width: 215px;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1.15;
}

.nav-auth-cluster .nav-user-welcome strong {
    display: block;
    width: 100%;
    max-width: 215px !important;
    overflow: hidden;
    color: #344054;
    font-size: .73rem !important;
    font-weight: 750;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.nav-auth-cluster .nav-user-welcome small {
    display: block;
    width: 100%;
    max-width: 215px !important;
    overflow: hidden;
    color: #98a2b3;
    font-size: .58rem !important;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.nav-auth-cluster .nav-session-form {
    width: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0;
}

.nav-auth-cluster .nav-logout {
    width: auto !important;
    min-width: 108px;
    min-height: 42px;
    padding: 9px 15px;
    white-space: nowrap;
}

/* Ajuste intermedio para conservar la calidad del menú completo. */
@media (max-width: 1180px) and (min-width: 901px) {
    .header-inner {
        gap: 16px;
    }

    .main-nav {
        gap: 11px;
        font-size: .80rem;
    }

    .nav-auth-cluster {
        gap: 9px;
        margin-left: 1px;
        padding-left: 11px;
    }

    .nav-auth-cluster .nav-user-welcome,
    .nav-auth-cluster .nav-user-welcome strong,
    .nav-auth-cluster .nav-user-welcome small {
        max-width: 185px !important;
    }

    .nav-auth-cluster .nav-user-welcome strong {
        font-size: .69rem !important;
    }

    .nav-auth-cluster .nav-user-welcome small {
        font-size: .55rem !important;
    }

    .nav-auth-cluster .nav-logout {
        min-width: 98px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: .78rem;
    }
}

/* Menú móvil: bloque de sesión separado y limpio. */
@media (max-width: 900px) {
    .nav-auth-cluster {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        margin: 7px 0 0;
        padding: 11px 0 0;
        border-left: 0;
        border-top: 1px solid #e8edf5;
    }

    .nav-auth-cluster .nav-user-welcome {
        max-width: none !important;
        align-items: flex-start !important;
    }

    .nav-auth-cluster .nav-user-welcome strong,
    .nav-auth-cluster .nav-user-welcome small {
        max-width: none !important;
        text-align: left;
    }

    .nav-auth-cluster .nav-session-form {
        width: auto !important;
        margin: 0 !important;
    }

    .nav-auth-cluster .nav-logout {
        width: auto !important;
        min-width: 108px;
    }
}

@media (max-width: 560px) {
    .nav-auth-cluster {
        grid-template-columns: 1fr;
    }

    .nav-auth-cluster .nav-session-form,
    .nav-auth-cluster .nav-logout {
        width: 100% !important;
    }
}


/* =========================================================
   SFL V0.4.8 - Dashboard en menú autenticado
   ========================================================= */

.main-nav .nav-dashboard-link {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #dbe4ff;
    border-radius: 9px;
    color: #245bff;
    background: #f5f7ff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color .15s ease,
        background-color .15s ease,
        transform .15s ease;
}

.main-nav .nav-dashboard-link:hover {
    transform: translateY(-1px);
    border-color: #b9c9ff;
    background: #edf2ff;
}

.main-nav .nav-dashboard-link:focus-visible {
    outline: 3px solid rgba(36, 91, 255, .18);
    outline-offset: 2px;
}

@media (max-width: 1180px) and (min-width: 901px) {
    .main-nav .nav-dashboard-link {
        padding: 7px 9px;
        font-size: .76rem;
    }
}

@media (max-width: 900px) {
    .main-nav .nav-dashboard-link {
        width: 100%;
        justify-content: flex-start;
        margin-top: 3px;
    }
}


/* =========================================================
   SFL V0.4.8 - Ajuste final header autenticado
   Dashboard como enlace normal del menú
   ========================================================= */

/* Dashboard vuelve al ritmo visual del resto del menú. */
.main-nav .nav-dashboard-link {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #245bff !important;
    font: inherit !important;
    font-weight: 800 !important;
    line-height: inherit !important;
    text-decoration: none !important;
    white-space: nowrap;
    transform: none !important;
}

.main-nav .nav-dashboard-link:hover {
    color: #1747d1 !important;
    background: transparent !important;
    transform: none !important;
}

.main-nav .nav-dashboard-link:focus-visible {
    outline: 2px solid rgba(36, 91, 255, .22);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Bloque de sesión: compacto, independiente y sin comprimir el menú. */
.nav-auth-cluster {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 14px;
    padding-left: 16px;
    border-left: 1px solid #e7ebf1;
}

.nav-auth-cluster .nav-user-welcome {
    flex: 0 1 180px;
    width: 180px !important;
    min-width: 150px;
    max-width: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1.15;
}

.nav-auth-cluster .nav-user-welcome strong {
    width: 100%;
    max-width: none !important;
    overflow: hidden;
    color: #344054;
    font-size: .73rem !important;
    font-weight: 750;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.nav-auth-cluster .nav-user-welcome small {
    width: 100%;
    max-width: none !important;
    overflow: hidden;
    color: #98a2b3;
    font-size: .56rem !important;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.nav-auth-cluster .nav-session-form {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
}

.nav-auth-cluster .nav-logout {
    width: auto !important;
    min-width: 112px;
    min-height: 42px;
    padding: 9px 15px;
    white-space: nowrap !important;
}

/* En anchos intermedios reducimos separación, no convertimos Dashboard en botón. */
@media (max-width: 1180px) and (min-width: 901px) {
    .main-nav {
        gap: 12px;
    }

    .nav-auth-cluster {
        gap: 10px;
        margin-left: 8px;
        padding-left: 12px;
    }

    .nav-auth-cluster .nav-user-welcome {
        flex-basis: 160px;
        width: 160px !important;
        min-width: 135px;
        max-width: 160px !important;
    }

    .nav-auth-cluster .nav-user-welcome strong {
        font-size: .68rem !important;
    }

    .nav-auth-cluster .nav-user-welcome small {
        font-size: .53rem !important;
    }

    .nav-auth-cluster .nav-logout {
        min-width: 102px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* En móvil sí se adapta al menú desplegado. */
@media (max-width: 900px) {
    .main-nav .nav-dashboard-link {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        padding: 8px 0 !important;
    }

    .nav-auth-cluster {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        margin: 8px 0 0;
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid #e7ebf1;
    }

    .nav-auth-cluster .nav-user-welcome {
        width: auto !important;
        min-width: 0;
        max-width: none !important;
        align-items: flex-start !important;
    }

    .nav-auth-cluster .nav-user-welcome strong,
    .nav-auth-cluster .nav-user-welcome small {
        text-align: left;
    }

    .nav-auth-cluster .nav-session-form {
        width: auto !important;
    }
}

@media (max-width: 560px) {
    .nav-auth-cluster {
        grid-template-columns: 1fr;
    }

    .nav-auth-cluster .nav-session-form,
    .nav-auth-cluster .nav-logout {
        width: 100% !important;
    }
}


/* =========================================================
   SFL V0.4.8 - Dashboard debajo de Último acceso
   ========================================================= */

/* El Dashboard deja de formar parte del menú principal. */
.main-nav .nav-dashboard-link {
    display: none !important;
}

/* El bloque de bienvenida admite el acceso compacto debajo. */
.nav-auth-cluster .nav-user-welcome {
    width: 190px !important;
    max-width: 190px !important;
    flex-basis: 190px;
    align-items: flex-end !important;
}

.nav-dashboard-return {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
    padding: 0 9px;
    border: 1px solid #d5deeb;
    border-radius: 8px;
    color: #475467;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform .15s ease,
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease;
}

.nav-dashboard-return > span:first-child {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    color: #245bff;
    background: #eef3ff;
    font-size: .68rem;
    line-height: 1;
}

.nav-dashboard-return:hover {
    transform: translateY(-1px);
    border-color: #b9c9ff;
    color: #245bff;
    background: #f7f9ff;
}

.nav-dashboard-return:focus-visible {
    outline: 3px solid rgba(36, 91, 255, .17);
    outline-offset: 2px;
}

/* Ya no se usa el botón de retorno dentro de las tarjetas. */
.client-card-dashboard-return {
    display: none !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
    .nav-auth-cluster .nav-user-welcome {
        width: 165px !important;
        max-width: 165px !important;
        flex-basis: 165px;
    }

    .nav-dashboard-return {
        min-height: 26px;
        padding: 0 8px;
        font-size: .55rem;
    }
}

@media (max-width: 900px) {
    .nav-auth-cluster .nav-user-welcome {
        width: auto !important;
        max-width: none !important;
        flex-basis: auto;
        align-items: flex-start !important;
    }

    .nav-dashboard-return {
        margin-top: 7px;
    }
}


/* =========================================================
   SFL V0.4.8 - Header autenticado / Opción 1
   Dashboard como enlace de texto debajo del último acceso
   ========================================================= */

.nav-dashboard-return {
    min-height: 0 !important;
    display: inline !important;
    margin-top: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #245bff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .58rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transform: none !important;
}

.nav-dashboard-return:hover {
    color: #1747d1 !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transform: none !important;
}

.nav-dashboard-return:focus-visible {
    outline: 2px solid rgba(36, 91, 255, .20);
    outline-offset: 3px;
    border-radius: 3px !important;
}

/* Ya no existe caja/icono para el acceso al Dashboard. */
.nav-dashboard-return > span {
    display: none !important;
}

/* El bloque de usuario conserva una columna limpia. */
.nav-auth-cluster .nav-user-welcome {
    gap: 1px !important;
}

/* La única acción con apariencia de botón sigue siendo Cerrar sesión. */
.nav-auth-cluster .nav-logout {
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .nav-dashboard-return {
        display: inline !important;
        margin-top: 6px !important;
        font-size: .62rem !important;
    }
}