/* =========================================================
   MULTINEGOCIOS
   Diseño premium · Editorial · SaaS
   Landing clara + autenticación oscura
========================================================= */

/* =========================================================
   1. VARIABLES GLOBALES
========================================================= */

:root {
    --bg: #f7f7f2;
    --panel: #ffffff;
    --panel-soft: #f0f0e9;

    --line: #e5e5dc;
    --line-strong: #d7d8cc;

    --gold: #777e5b;
    --gold2: #92997a;

    --olive: #343b2d;
    --olive-dark: #252b20;

    --text: #24261f;
    --muted: #73756c;

    --danger: #c74e43;
    --success: #477858;

    --radius-sm: 7px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-sm:
        0 3px 12px rgba(35, 39, 28, .04);

    --shadow-md:
        0 12px 35px rgba(35, 39, 28, .07);

    --shadow-lg:
        0 30px 75px rgba(35, 39, 28, .10);

    --transition:
        .25s ease;

    --font:
        Inter, "Segoe UI", -apple-system,
        BlinkMacSystemFont, Arial, sans-serif;
}

/* =========================================================
   2. REINICIO Y BASE
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font);
}

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

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

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

img {
    max-width: 100%;
}

button {
    cursor: pointer;
}

::selection {
    color: #fff;
    background: #777e5b;
}

/* =========================================================
   3. LANDING: FONDO Y CONTENEDORES
========================================================= */

body.landing {
    min-height: 100vh;
    overflow-x: hidden;
    color: #24261f;
    background:
        radial-gradient(
            ellipse at 12% 8%,
            rgba(224, 226, 210, .43),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 91% 38%,
            rgba(235, 234, 222, .48),
            transparent 31%
        ),
        #f8f8f3;
}

body.landing main {
    width: 100%;
}

body.landing .section,
body.landing .hero,
body.landing .cta {
    position: relative;
    isolation: isolate;
}

/* =========================================================
   4. BARRA DE NAVEGACIÓN
========================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    width: 100%;
    min-height: 82px;
    padding: 13px max(32px, calc((100% - 1320px) / 2));

    background: rgba(248, 248, 243, .91);
    border-bottom: 1px solid rgba(54, 59, 44, .08);

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

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;

    color: #25291f;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.045em;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    color: #fff;
    background: #343b2d;
    border: 1px solid rgba(66, 191, 233, .45);
    border-radius: 13px;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.04em;

    box-shadow: 0 4px 13px rgba(35, 39, 28, .09);
}

.topbar nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 27px;
}

.topbar nav > a:not(.button) {
    position: relative;
    padding: 8px 0;

    color: #66695f;
    font-size: 12px;
    font-weight: 550;

    transition: color var(--transition);
}

.topbar nav > a:not(.button)::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;

    height: 1px;
    content: "";

    background: #777e5b;
    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);
}

.topbar nav > a:not(.button):hover {
    color: #25291f;
}

.topbar nav > a:not(.button):hover::after {
    transform: scaleX(1);
}

/* =========================================================
   5. BOTONES
========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 43px;
    padding: 0 19px;

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

    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    white-space: normal;

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

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

.button.primary {
    color: #fff;
    background: #343b2d;
    border-color: #343b2d;

    box-shadow: 0 4px 12px rgba(35, 39, 28, .07);
}

.button.primary:hover {
    color: #fff;
    background: #252b20;
    border-color: #252b20;
    box-shadow: 0 7px 18px rgba(35, 39, 28, .13);
}

.button.ghost {
    color: #45483d;
    background: rgba(255, 255, 255, .55);
    border-color: #dedfd5;
}

.button.ghost:hover {
    color: #25291f;
    background: #fff;
    border-color: #bfc3b1;
}

.button.large {
    min-height: 51px;
    padding: 0 24px;
    border-radius: 7px;
    font-size: 13px;
}

.button.full {
    width: 100%;
}

/* =========================================================
   6. HERO PRINCIPAL
========================================================= */

body.landing .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr);
    align-items: center;

    width: min(100% - 64px, 1240px);
    min-height: 0;

    margin: 0 auto;
    padding: 100px 42px 110px;

    gap: clamp(54px, 8vw, 112px);
}

.hero-copy {
    width: 100%;
    max-width: 590px;
    min-width: 0;
    margin: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #777e5b;

    font-size: 10px;
    font-weight: 750;
    line-height: 1.6;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.hero-copy > .eyebrow::before {
    display: block;
    flex: 0 0 26px;

    width: 26px;
    height: 1px;

    content: "";
    background: #92997a;
}

.hero-copy h1 {
    max-width: 570px;
    margin: 28px 0 25px;

    color: #20231e;

    font-size: clamp(46px, 5vw, 70px);
    font-weight: 500;
    line-height: 1.055;
    letter-spacing: -.065em;

    text-wrap: balance;
}

.hero-copy > p {
    max-width: 455px;
    margin: 0;

    color: #73756c;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: -.012em;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 34px;
}

.trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 23px;

    margin-top: 30px;

    color: #74766d;
    font-size: 11px;
    line-height: 1.7;
}

.trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.trust span::first-letter {
    color: #858b6b;
}

/* =========================================================
   7. TARJETA DE DEMOSTRACIÓN
========================================================= */

.product-shot {
    position: relative;
    justify-self: center;

    width: 100%;
    max-width: 410px;
    min-width: 0;

    padding: 19px;

    overflow: hidden;

    color: #25271f;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(49, 52, 41, .09);
    border-radius: 15px;

    box-shadow:
        0 35px 80px rgba(40, 43, 32, .09),
        0 5px 16px rgba(40, 43, 32, .035);

    transform: rotate(.35deg);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.product-shot:hover {
    transform: translateY(-4px) rotate(0);
    box-shadow:
        0 42px 90px rgba(40, 43, 32, .12),
        0 8px 22px rgba(40, 43, 32, .04);
}

.shot-head {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 31px;
    margin-bottom: 15px;
}

.shot-head > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    background: #92997a;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(146, 153, 122, .12);
}

.shot-head b {
    color: #55584d;
    font-size: 10px;
    font-weight: 650;
}

.shot-head em {
    margin-left: auto;
    padding: 6px 9px;

    color: #55704c;
    background: #edf3e9;
    border-radius: 5px;

    font-size: 9px;
    font-style: normal;
    font-weight: 650;
}

.cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 210px;
    padding: 25px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 255, 255, .16),
            transparent 38%
        ),
        linear-gradient(145deg, #454b39, #252b20);

    border-radius: 10px;
}

.cover::before,
.cover::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.cover::before {
    top: -65px;
    right: -30px;

    width: 190px;
    height: 190px;

    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 50%;
}

.cover::after {
    right: -4px;
    bottom: -90px;

    width: 230px;
    height: 230px;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.cover-logo {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;

    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 26px;

    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.06em;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.product-shot > h2 {
    margin: 20px 0 7px;

    color: #27291f;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.045em;
}

.product-shot > p {
    margin: 0;

    color: #85867d;
    font-size: 11px;
    line-height: 1.7;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;

    margin-top: 20px;
}

.action-grid b {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 41px;
    padding: 10px;

    color: #53574a;
    background: #f7f7f2;
    border: 1px solid #e9e9e1;
    border-radius: 6px;

    font-size: 10px;
    font-weight: 600;
    text-align: center;

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

.action-grid b:hover {
    color: #343b2d;
    background: #eff0e8;
    border-color: #d8dbcb;
}

/* =========================================================
   8. SECCIÓN DE FUNCIONES
========================================================= */

body.landing .section {
    width: min(100% - 64px, 1240px);
    margin: 0 auto;
    padding: 76px 0 100px;

    border-top: 1px solid rgba(54, 59, 44, .10);
}

.section > .eyebrow {
    margin-bottom: 17px;
}

.section > h2 {
    max-width: 650px;
    margin: 0 0 42px;

    color: #25271f;

    font-size: clamp(32px, 3.7vw, 46px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.055em;

    text-wrap: balance;
}

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

.feature-grid article {
    position: relative;

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

    min-height: 225px;
    padding: 27px 23px;

    background: rgba(255, 255, 255, .65);
    border: 1px solid #e7e7df;
    border-radius: 11px;

    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.feature-grid article:hover {
    z-index: 1;

    background: #fff;
    border-color: #d6d9ca;

    box-shadow: 0 18px 40px rgba(35, 39, 28, .06);
    transform: translateY(-4px);
}

.feature-grid article > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    margin-bottom: 27px;

    color: #687052;
    background: #eff0e8;
    border-radius: 7px;

    font-size: 10px;
    font-style: normal;
    font-weight: 750;
    letter-spacing: .02em;
}

.feature-grid article h3 {
    margin: 0 0 11px;

    color: #303229;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: -.025em;
}

.feature-grid article p {
    margin: 0;

    color: #77796f;
    font-size: 12px;
    line-height: 1.85;
}

/* =========================================================
   9. LLAMADO A LA ACCIÓN
========================================================= */

body.landing .cta {
    width: min(100% - 64px, 1240px);
    margin: 0 auto 70px;
    padding: 75px 36px;

    overflow: hidden;

    color: #f7f7f1;
    background:
        radial-gradient(
            ellipse at 90% 10%,
            rgba(255, 255, 255, .08),
            transparent 34%
        ),
        #30372a;

    border: 1px solid rgba(48, 55, 42, .2);
    border-radius: 17px;

    text-align: center;
}

.cta::before,
.cta::after {
    position: absolute;
    z-index: -1;

    content: "";
    pointer-events: none;

    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 50%;
}

.cta::before {
    top: -130px;
    right: -50px;

    width: 310px;
    height: 310px;
}

.cta::after {
    bottom: -190px;
    left: -70px;

    width: 390px;
    height: 390px;
}

.cta > .eyebrow {
    color: #c1c8a9;
}

.cta > .eyebrow::before {
    display: none;
}

.cta > h2 {
    max-width: 700px;
    margin: 19px auto 16px;

    color: #fff;

    font-size: clamp(34px, 4.3vw, 49px);
    font-weight: 500;
    line-height: 1.13;
    letter-spacing: -.055em;

    text-wrap: balance;
}

.cta > p {
    max-width: 620px;
    margin: 0 auto;

    color: rgba(247, 247, 241, .73);
    font-size: 14px;
    line-height: 1.9;
}

.cta .hero-actions {
    justify-content: center;
    margin-top: 30px;
}

.cta .button.primary {
    color: #30372a;
    background: #eff0e5;
    border-color: #eff0e5;
}

.cta .button.primary:hover {
    color: #252b20;
    background: #fff;
    border-color: #fff;
}

.cta .button.ghost {
    color: #fff;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .23);
}

.cta .button.ghost:hover {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .43);
}

/* =========================================================
   10. PIE DE PÁGINA
========================================================= */

body.landing footer {
    width: min(100% - 64px, 1240px);
    margin: 0 auto;
    padding: 0 0 32px;

    color: #85867d;
    font-size: 11px;
    line-height: 1.8;
    text-align: center;
}

/* =========================================================
   11. AUTENTICACIÓN
   Mantiene el estilo oscuro para login y registro
========================================================= */

body.auth-page {
    --bg: #08090b;
    --panel: #111216;
    --line: #2b2b2d;
    --gold: #e7b94f;
    --gold2: #ffd87a;
    --text: #f7f4ec;
    --muted: #a5a3a0;
    --danger: #ff8678;

    min-height: 100vh;
    padding: 32px 20px;

    color: var(--text);
    background:
        radial-gradient(
            ellipse at 15% 12%,
            rgba(231, 185, 79, .07),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 90% 85%,
            rgba(0, 174, 239, .045),
            transparent 30%
        ),
        #08090b;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: stretch;

    width: min(100%, 1040px);
    min-height: 650px;

    margin: auto;

    overflow: hidden;

    background: #111216;
    border: 1px solid #292a2e;
    border-radius: 20px;

    box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}

.auth-story {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: clamp(35px, 6vw, 72px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(231, 185, 79, .11),
            transparent 35%
        ),
        linear-gradient(145deg, #191a1d, #101114);
}

.auth-story::before {
    position: absolute;
    right: -120px;
    bottom: -140px;

    width: 370px;
    height: 370px;

    content: "";
    border: 1px solid rgba(231, 185, 79, .10);
    border-radius: 50%;
    pointer-events: none;
}

.auth-story > * {
    position: relative;
    z-index: 1;
}

.auth-story h1,
.auth-story h2 {
    max-width: 520px;
    margin: 24px 0 17px;

    color: #f7f4ec;
    font-size: clamp(32px, 4vw, 49px);
    font-weight: 550;
    line-height: 1.12;
    letter-spacing: -.055em;
}

.auth-story p {
    max-width: 460px;
    margin: 0;

    color: #a5a3a0;
    font-size: 14px;
    line-height: 1.9;
}

.auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: clamp(26px, 4vw, 44px);

    background: #111216;
    border-left: 1px solid #292a2e;
}

.auth-card h1,
.auth-card h2 {
    margin: 0 0 10px;

    color: #f7f4ec;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.045em;
}

.auth-card > p {
    margin: 0 0 25px;

    color: #a5a3a0;
    font-size: 13px;
    line-height: 1.8;
}

/* =========================================================
   12. FORMULARIOS
========================================================= */

.form {
    display: flex;
    flex-direction: column;
    gap: 17px;

    width: 100%;
}

.form label,
.form .label {
    display: block;
    margin-bottom: 7px;

    color: #dedbd2;
    font-size: 12px;
    font-weight: 600;
}

.form input,
.form select,
.form textarea,
.auth-card input,
.auth-card select,
.auth-card textarea {
    display: block;

    width: 100%;
    min-height: 46px;
    padding: 12px 14px;

    color: #f7f4ec;
    background: #191a1f;
    border: 1px solid #34353a;
    border-radius: 8px;

    outline: none;

    font-size: 13px;
    line-height: 1.5;

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

.form textarea,
.auth-card textarea {
    min-height: 110px;
    resize: vertical;
}

.form input::placeholder,
.form textarea::placeholder,
.auth-card input::placeholder,
.auth-card textarea::placeholder {
    color: #77777a;
    opacity: 1;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
    background: #1b1c21;
    border-color: #c7a34a;
    box-shadow: 0 0 0 3px rgba(231, 185, 79, .10);
}

.form input:disabled,
.form select:disabled,
.form textarea:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.form button,
.auth-card .button {
    min-height: 46px;
}

.auth-card .button.primary,
.auth-card button.primary {
    color: #17150f;
    background: #e7b94f;
    border-color: #e7b94f;
}

.auth-card .button.primary:hover,
.auth-card button.primary:hover {
    color: #17150f;
    background: #ffd87a;
    border-color: #ffd87a;
}

.slug-field {
    display: flex;
    align-items: stretch;

    width: 100%;
    overflow: hidden;

    background: #191a1f;
    border: 1px solid #34353a;
    border-radius: 8px;

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

.slug-field:focus-within {
    border-color: #c7a34a;
    box-shadow: 0 0 0 3px rgba(231, 185, 79, .10);
}

.slug-field input {
    flex: 1;
    min-width: 0;

    border: 0;
    border-radius: 0;
    box-shadow: none !important;
}

.slug-field span {
    display: flex;
    align-items: center;

    padding: 0 12px;

    color: #a5a3a0;
    background: #222329;
    border-left: 1px solid #34353a;

    font-size: 11px;
    white-space: nowrap;
}

/* =========================================================
   13. CHECKBOXES, ALERTAS Y TEXTOS
========================================================= */

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #b9b7b0;
    font-size: 12px;
    line-height: 1.7;
}

.check input[type="checkbox"] {
    flex: 0 0 16px;

    width: 16px;
    min-height: 16px;
    height: 16px;

    margin-top: 3px;
    padding: 0;

    accent-color: #e7b94f;
}

.check a {
    color: #ffd87a;
    text-decoration: underline;
    text-decoration-color: rgba(255, 216, 122, .4);
    text-underline-offset: 3px;
}

.check a:hover {
    text-decoration-color: #ffd87a;
}

.alert {
    padding: 13px 15px;

    color: #f1d4cf;
    background: rgba(199, 78, 67, .10);
    border: 1px solid rgba(255, 134, 120, .24);
    border-radius: 8px;

    font-size: 12px;
    line-height: 1.7;
}

.alert.success {
    color: #cce7d1;
    background: rgba(71, 120, 88, .13);
    border-color: rgba(100, 180, 120, .25);
}

.alert.warning {
    color: #f0dfb2;
    background: rgba(231, 185, 79, .09);
    border-color: rgba(231, 185, 79, .22);
}

.center {
    text-align: center;
}

.muted {
    color: var(--muted);
}

.auth-card .muted {
    font-size: 12px;
    line-height: 1.8;
}

.auth-card a:not(.button) {
    color: #ffd87a;
    transition: color var(--transition);
}

.auth-card a:not(.button):hover {
    color: #fff0c2;
}

.auth-card .center {
    margin-top: 20px;
}

/* =========================================================
   14. ELEMENTOS AUXILIARES
========================================================= */

body.landing input,
body.landing select,
body.landing textarea {
    max-width: 100%;
}

body.landing a:focus-visible,
body.landing button:focus-visible,
body.auth-page a:focus-visible,
body.auth-page button:focus-visible {
    outline: 2px solid #92997a;
    outline-offset: 4px;
}

body.auth-page input:focus-visible,
body.auth-page select:focus-visible,
body.auth-page textarea:focus-visible {
    outline: none;
}

/* =========================================================
   15. TABLET Y PANTALLAS MEDIANAS
========================================================= */

@media (max-width: 1050px) {
    .topbar {
        gap: 20px;
        padding-right: 25px;
        padding-left: 25px;
    }

    .topbar nav {
        gap: 8px 17px;
    }

    body.landing .hero {
        width: min(100% - 40px, 760px);
        grid-template-columns: 1fr;
        gap: 54px;

        padding: 76px 20px 84px;
    }

    .hero-copy {
        max-width: 650px;
    }

    .hero-copy h1 {
        max-width: 600px;
        font-size: clamp(46px, 7vw, 66px);
    }

    .product-shot {
        max-width: 430px;
        justify-self: center;
    }

    body.landing .section {
        width: min(100% - 48px, 900px);
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.landing .cta {
        width: calc(100% - 48px);
    }

    .auth-shell {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    }

    .auth-story {
        padding: 35px;
    }

    .auth-card {
        padding: 30px;
    }
}

/* =========================================================
   16. MÓVILES
========================================================= */

@media (max-width: 700px) {
    html {
        scroll-padding-top: 20px;
    }

    .topbar {
        position: relative;

        align-items: flex-start;
        flex-direction: column;
        gap: 16px;

        min-height: 0;
        padding: 18px 22px;
    }

    .brand {
        gap: 10px;
        font-size: 15px;
    }

    .topbar nav {
        justify-content: flex-start;
        width: 100%;
        gap: 8px 18px;
    }

    .topbar nav > a:not(.button) {
        font-size: 11px;
    }

    .topbar nav .button {
        min-height: 39px;
        padding: 0 13px;
        font-size: 11px;
    }

    body.landing .hero {
        width: 100%;
        padding: 56px 25px 64px;
        gap: 42px;
    }

    .hero-copy .eyebrow {
        margin-bottom: 23px;
        font-size: 9px;
        letter-spacing: .15em;
    }

    .hero-copy h1 {
        margin: 0 0 21px;

        font-size: clamp(40px, 10.5vw, 52px);
        line-height: 1.08;
        letter-spacing: -.055em;
    }

    .hero-copy > p {
        font-size: 15px;
        line-height: 1.8;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 11px;

        margin-top: 27px;
    }

    .hero-actions .button {
        justify-content: center;
        width: 100%;
    }

    .trust {
        gap: 12px 17px;
        margin-top: 25px;
        font-size: 10px;
    }

    .product-shot {
        padding: 14px;
        border-radius: 12px;
        transform: none;
    }

    .product-shot:hover {
        transform: translateY(-2px);
    }

    .cover {
        min-height: 180px;
    }

    .cover-logo {
        width: 96px;
        height: 96px;
        border-radius: 23px;
    }

    .product-shot > h2 {
        font-size: 18px;
    }

    body.landing .section {
        width: calc(100% - 44px);
        padding: 57px 0 68px;
    }

    .section > h2 {
        margin-bottom: 30px;
        font-size: clamp(31px, 8vw, 39px);
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-grid article {
        min-height: 0;
        padding: 23px;
    }

    .feature-grid article > i {
        margin-bottom: 19px;
    }

    .feature-grid article h3 {
        font-size: 15px;
    }

    .feature-grid article p {
        font-size: 12px;
    }

    body.landing .cta {
        width: calc(100% - 32px);
        margin-bottom: 35px;
        padding: 51px 22px;

        border-radius: 13px;
    }

    .cta > h2 {
        font-size: clamp(32px, 8vw, 40px);
    }

    .cta > p {
        font-size: 13px;
    }

    .cta .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta .hero-actions .button {
        width: 100%;
    }

    body.landing footer {
        width: calc(100% - 40px);
        padding-bottom: 25px;
    }

    /* Autenticación en móviles */

    body.auth-page {
        padding: 15px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 14px;
    }

    .auth-story {
        min-height: 200px;
        padding: 27px;
    }

    .auth-story h1,
    .auth-story h2 {
        margin: 14px 0 10px;
        font-size: 32px;
    }

    .auth-story p {
        font-size: 12px;
    }

    .auth-card {
        padding: 27px;
        border-top: 1px solid #292a2e;
        border-left: 0;
    }

    .auth-card h1,
    .auth-card h2 {
        font-size: 25px;
    }
}

/* =========================================================
   17. CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 390px) {
    .topbar {
        padding: 16px;
    }

    .topbar nav {
        gap: 8px 12px;
    }

    .topbar nav .button {
        padding: 0 10px;
        font-size: 10px;
    }

    body.landing .hero {
        padding: 45px 20px 52px;
    }

    .hero-copy h1 {
        font-size: 39px;
    }

    .hero-copy > p {
        font-size: 14px;
    }

    .trust {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-grid {
        gap: 7px;
    }

    .action-grid b {
        padding: 8px 5px;
        font-size: 9px;
    }

    .auth-card,
    .auth-story {
        padding: 22px;
    }

    .slug-field span {
        padding: 0 8px;
        font-size: 10px;
    }
}

/* =========================================================
   18. LOGOTIPO OFICIAL
   Conserva la ruta de tu imagen existente
========================================================= */

.brand-mark,
.cover-logo {
    overflow: hidden;
    text-indent: -9999px;

    background-color: #d4d4d7 !important;
    background-image: url('/assets/brand-logo.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-color: #42bfe9 !important;

    box-shadow:
        0 0 24px rgba(0, 174, 239, .28) !important;
}

.brand-mark {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px;

    border-radius: 14px !important;
}

.cover-logo {
    width: 112px !important;
    height: 112px !important;

    border-radius: 26px !important;
}

@media (max-width: 560px) {
    .brand-mark {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px;
    }

    .cover-logo {
        width: 96px !important;
        height: 96px !important;
    }
}

/* =========================================================
   19. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
========================================================= */

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