/* ==========================================================================
   RutaLog — sitio público (home + /funcionalidades/)
   Tokens y componentes del rediseño (design_handoff_rutalog_landing).
   Al modificar este archivo, subir el ?v= en publico/base_publico.html
   (los estáticos se cachean y no llevan hash en el nombre).
   ========================================================================== */

:root {
    --bg: #1a1613;
    --surface: #231e1a;
    --surface-2: #2d2621;
    --sand: #d8c8b2;
    --cream: #f3ece1;
    --paper: #efe7da;
    --paper-card: #f8f3ea;
    --ink: #1f1a16;
    --ink-2: #5c5145;
    --ink-3: #6d6154;
    --muted: #a89d8f;
    --muted-2: #8a7f72;
    --muted-3: #6f655a;
    --accent: #d9663f;
    --wa: #3ddc84;
    --green-deep: #1c3a2d;
    --line: rgba(232, 220, 200, .10);
    --line-strong: rgba(232, 220, 200, .25);
    --line-paper: rgba(31, 26, 22, .10);

    --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --f-body: 'Instrument Sans', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
*, *::before, *::after { box-sizing: border-box; }
body.pub {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--cream);
    font-family: var(--f-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.pub a { color: var(--sand); text-decoration: none; }
.pub a:hover { color: var(--cream); }
.pub button { font-family: inherit; }
.pub img { max-width: 100%; }
[x-cloak] { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.wrap { max-width: 1200px; margin: 0 auto; }
.section { padding: 110px 28px; }
.section--tight { padding: 70px 28px; }
.section--top0 { padding-top: 30px; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--problem { padding-top: 100px; padding-bottom: 100px; }
.steps-grid { margin-top: 60px; }

/* ---------- Tipografía ---------- */
.h1 {
    margin: 26px 0 0;
    font: 800 clamp(44px, 6vw, 80px)/.98 var(--f-display);
    letter-spacing: -.035em;
    color: #fff;
}
.h1--page { font-size: clamp(40px, 5.2vw, 68px); }
.h2 {
    margin: 0;
    font: 700 clamp(36px, 4.6vw, 60px)/1.02 var(--f-display);
    letter-spacing: -.03em;
    color: var(--cream);
}
.h2--sm { font-size: clamp(30px, 3.6vw, 44px); }
.section--paper .h2 { color: var(--ink); }
.tone { color: var(--sand); }
.tone-accent { color: var(--accent); }
.sub {
    margin: 20px 0 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}
.section--paper .sub { color: var(--ink-3); }
.lead {
    margin: 26px 0 0;
    max-width: 560px;
    font-size: 19px;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}
.eyebrow {
    font: 500 12px var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sand);
}
.eyebrow--wa { color: var(--wa); }
/* Título de sección con su bajada debajo (no al costado: con títulos cortos quedaba flotando) */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sec-head__aside {
    margin: 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}
.section--paper .sec-head__aside { color: var(--ink-3); }

/* ---------- Botones ---------- */
.btns { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    font: 600 17px/1.2 var(--f-body);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.btn .fa-whatsapp { font-size: 20px; }
.btn .fa-arrow-down, .btn .fa-arrow-right { font-size: 13px; }
.pub .btn--primary {
    background: var(--sand);
    color: var(--bg);
    box-shadow: 0 10px 30px -8px rgba(216, 200, 178, .4);
}
.pub .btn--primary:hover { background: var(--cream); color: var(--bg); }
.pub .btn--outline { border-color: var(--line-strong); color: var(--cream); font-weight: 500; }
.pub .btn--outline:hover { background: rgba(232, 220, 200, .08); color: var(--cream); }
.pub .btn--dark { background: var(--bg); color: var(--cream); padding: 17px 28px; }
.pub .btn--dark:hover { background: #33291f; color: var(--cream); }
.btn--dark .fa-whatsapp { color: var(--wa); }
.pub .btn--outline-dark { border-color: rgba(26, 22, 19, .35); color: var(--bg); font-weight: 500; padding: 17px 28px; }
.pub .btn--outline-dark:hover { background: rgba(26, 22, 19, .07); color: var(--bg); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font: 500 15px/1.2 var(--f-body);
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.pill i { font-size: 13px; }
.pub .pill--outline { border-color: var(--line-strong); color: var(--cream); }
.pub .pill--outline:hover { background: rgba(232, 220, 200, .08); color: var(--cream); }
.pub .pill--solid { background: var(--sand); color: var(--bg); font-weight: 600; }
.pub .pill--solid:hover { background: var(--cream); color: var(--bg); }

/* ---------- Nav ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(26, 22, 19, .82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav__in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.pub .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cream);
    font: 700 22px/1 var(--f-display);
    letter-spacing: -.02em;
}
.pub .logo:hover { color: var(--cream); }
/* Logo de RutaLog (camión arena sin fondo) */
.logo__img { display: block; width: 34px; height: 34px; object-fit: contain; }
/* El mismo logo usado como ícono: escala con el font-size del contenedor */
.ico-logo { display: block; width: 1.4em; height: 1.4em; object-fit: contain; }
/* Links a la derecha, junto a los botones, separados por una línea fina */
.nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    padding-right: 24px;
    border-right: 1px solid var(--line-strong);
    font-size: 15px;
    font-weight: 500;
}
.pub .nav__links a { color: var(--muted); }
.pub .nav__links a:hover { color: var(--cream); }
.nav__actions { display: flex; gap: 10px; }
.nav__burger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--cream);
    font-size: 17px;
    cursor: pointer;
    place-items: center;
}
.nav__mobile {
    border-top: 1px solid var(--line);
    padding: 12px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pub .nav__mobile a.nav__mlink {
    padding: 12px 4px;
    color: var(--cream);
    font-size: 17px;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
}
.nav__mobile .nav__mactions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 880px) {
    .nav__links, .nav__actions { display: none; }
    .nav__burger { display: grid; }
}
@media (min-width: 881px) {
    .nav__mobile { display: none !important; }
}

/* ---------- Hero (home) ---------- */
.hero {
    position: relative;
    padding: 30px 28px 72px;
    background:
        radial-gradient(900px 480px at 78% 30%, rgba(216, 200, 178, .13), transparent 70%),
        radial-gradient(600px 400px at 5% 0%, rgba(217, 102, 63, .09), transparent 70%);
}
/* Hero más compacto que el handoff: badge, título, texto y botones suben */
.hero .h1 { margin-top: 20px; }
.hero .lead { margin-top: 22px; }
.hero .btns { margin-top: 30px; }
/* Pantallas de escritorio bajas (ej. notebook al 125%): título algo más chico para que entren los botones */
@media (min-width: 881px) and (max-height: 820px) {
    .hero .h1 { font-size: clamp(44px, 5.2vw, 70px); }
}
.hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
}
.hero__bg svg { width: 100%; height: 100%; display: block; }
.route-lbl { font: 500 13px var(--f-mono); letter-spacing: .08em; fill: var(--sand); opacity: .7; }
.hero__grid {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 40px;
    align-items: center;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 8px;
    border-radius: 999px;
    border: 1px solid rgba(232, 220, 200, .18);
    background: rgba(232, 220, 200, .05);
    font-size: 14px;
    font-weight: 500;
    color: var(--sand);
}
.badge__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sand);
    color: var(--bg);
    display: grid;
    place-items: center;
    font-size: 11px;
}
/* Franja con la definición de RutaLog, justo debajo del hero */
.hero-def { padding: 0 28px 56px; }
.hero-def .wrap { padding-top: 22px; border-top: 1px solid var(--line); }
.hero-def p { margin: 0; max-width: 820px; font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }
.hero-def strong { color: var(--sand); font-weight: 600; }

/* Mockup alternante */
.mock {
    justify-self: center;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mock__stack { display: grid; }
.mock__view {
    grid-area: 1 / 1;
    transition: opacity .6s, transform .6s, visibility .6s;
}
.mock__view.is-off { opacity: 0; visibility: hidden; transform: translateY(14px); }
.mock__view--wa { display: flex; flex-direction: column; justify-content: center; }
.mock__view--gps { justify-self: center; width: 300px; max-width: 100%; }
.mock__tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mock__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(232, 220, 200, .2);
    background: transparent;
    color: var(--muted);
    font: 500 13px var(--f-body);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.mock__tab.is-on { background: var(--sand); color: var(--bg); }

.chat {
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid rgba(232, 220, 200, .14);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
    overflow: hidden;
}
.chat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--green-deep);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.chat__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--bg);
    display: grid;
    place-items: center;
    font-size: 15px;
}
.chat__name { font-weight: 600; font-size: 15px; }
.chat__status { font-size: 12px; color: #7fd6a4; }
.chat__wa { margin-left: auto; font-size: 22px; color: var(--wa); }
.chat__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.bubble-out {
    align-self: flex-end;
    max-width: 78%;
    padding: 7px;
    border-radius: 16px 16px 4px 16px;
    background: #24543f;
}
.bubble-in {
    align-self: flex-start;
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: var(--surface-2);
    font-size: 14px;
    line-height: 1.45;
    color: #e6dccd;
}
.bubble-in .fa-circle-check { color: var(--wa); margin-right: 6px; }
/* Remito ilustrado (reemplazable por una foto real) */
.remito {
    width: 210px;
    max-width: 100%;
    height: 132px;
    border-radius: 11px;
    background: #f3ece1;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.remito__head {
    display: flex;
    justify-content: space-between;
    padding-bottom: 7px;
    border-bottom: 1px dashed rgba(31, 26, 22, .28);
    font: 500 10px var(--f-mono);
    letter-spacing: .06em;
    color: #5c5145;
}
.remito__line { display: block; height: 6px; border-radius: 3px; background: rgba(31, 26, 22, .14); }
.trip {
    position: relative;
    margin: -26px 0 0 44px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--cream);
    color: var(--bg);
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6);
    transform: rotate(-1.5deg);
}
.trip__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trip__title { font: 700 16px var(--f-display); }
.tag-ai {
    font: 500 10.5px var(--f-mono);
    letter-spacing: .06em;
    padding: 4px 9px;
    border-radius: 999px;
    background: #d4f0e0;
    color: #14663f;
    white-space: nowrap;
}
.trip__rows {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 18px;
    font-size: 14px;
}
.trip__rows dt { color: #7a6e60; }
.trip__rows dd { margin: 0; font-weight: 600; }

/* Teléfono con la app GPS */
.phone {
    border-radius: 34px;
    background: #fff;
    border: 6px solid #0f0d0b;
    box-shadow: 0 0 0 1px rgba(232, 220, 200, .2), 0 40px 80px -30px rgba(0, 0, 0, .7);
    overflow: hidden;
    color: #1f2328;
}
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #e8e8e8; }
.phone__logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--sand);
    display: grid;
    place-items: center;
    font-size: 13px;
}
.phone__name { font: 600 14px var(--f-body); }
.phone__bell { margin-left: auto; color: #6b7076; font-size: 15px; }
.phone__menu { color: #9aa0a6; font-size: 16px; margin-left: 8px; }
.phone__sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 13px;
    font-weight: 500;
}
.phone__sub b { color: #2f6fe4; font-weight: 600; }
.map { position: relative; height: 372px; background: #e7e4e0; overflow: hidden; }
.map__streets {
    position: absolute;
    left: -150px;
    top: -120px;
    width: 600px;
    height: 640px;
    transform: rotate(-14deg);
    background:
        repeating-linear-gradient(0deg, transparent 0 46px, #f3f1ee 46px 51px),
        repeating-linear-gradient(90deg, transparent 0 58px, #f3f1ee 58px 63px);
}
.map__streets > * { position: absolute; }
.map__park { background: #d6e3cf; border-radius: 6px; }
.map__park--1 { left: 380px; top: 150px; width: 110px; height: 120px; }
.map__park--2 { left: 60px; top: 420px; width: 130px; height: 90px; }
.map__highway {
    left: 0; top: 140px; width: 600px; height: 16px;
    background: #f9c9b8;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-sizing: content-box;
}
.map__ave { left: 0; top: 312px; width: 600px; height: 16px; background: #fff; box-shadow: 0 0 0 1px #d9d5d0; }
.map__street { left: 0; top: 391px; width: 600px; height: 14px; background: #fff; box-shadow: 0 0 0 1px #d9d5d0; }
.map__trail { left: 150px; top: 318px; width: 150px; height: 5px; border-radius: 3px; background: #1fb26b; opacity: .75; }
.map__label { font-size: 8px; color: #8b8f94; white-space: nowrap; }
.map__label--ave { left: 36px; top: 314px; letter-spacing: .04em; }
.map__label--street { left: 330px; top: 393px; }
.map__label--hw { left: 30px; top: 142px; color: #b4553a; }
.map__label--park { left: 410px; top: 200px; color: #6f8f64; }
.popup {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.popup__title { display: flex; align-items: center; gap: 8px; }
.popup__title b { font-size: 14px; flex: 1; }
.signal { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.signal i { display: block; width: 3px; background: #1fb26b; }
.signal i:nth-child(1) { height: 5px; }
.signal i:nth-child(2) { height: 9px; }
.signal i:nth-child(3) { height: 13px; }
.popup__x { color: #8b8f94; font-size: 13px; }
.popup__plate { font-size: 11.5px; color: #7a7f85; margin: 2px 0 8px; }
.popup__data {
    border-top: 1px solid #eee;
    padding-top: 7px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-size: 11.5px;
}
.popup__note { grid-column: 1 / -1; font-size: 10.5px; color: #8b8f94; }
.popup__k { color: #6b7076; }
.popup__foot {
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: #555;
}
.popup__dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #1fb26b; }
.popup__actions { margin-left: auto; display: flex; gap: 6px; }
.popup__btn { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; }
.popup__btn--route { background: #e8f0fe; color: #2f6fe4; }
.popup__btn--gear { border: 1px solid #ddd; color: #666; }
.popup__arrow {
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}
.truck {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.truck--1 { left: 50%; top: 182px; gap: 7px; }
.truck--2 { left: 80px; top: 285px; gap: 6px; }
.truck__pin {
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
}
.truck__pin--move {
    width: 36px;
    height: 36px;
    border: 4px solid #1fb26b;
    box-shadow: 0 0 0 6px rgba(31, 178, 107, .25);
}
.truck__pin--move i { font-size: 14px; color: #1fb26b; transform: rotate(31deg); }
.truck__pin--stop { width: 30px; height: 30px; border: 3px dashed #d62b2b; }
.truck__pin--stop i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #d62b2b; }
.truck__tag {
    padding: 6px 14px;
    border-radius: 10px;
    background: #1c2331;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.truck__model { display: block; font: 600 11px var(--f-body); color: #fff; }
.truck__plate { display: block; font: 700 16px var(--f-display); color: #ffc21a; letter-spacing: .06em; }
.truck--2 .truck__tag { padding: 5px 12px; }
.truck--2 .truck__model { font-size: 10px; }
.truck--2 .truck__plate { font-size: 14px; }
.map__fab {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #4a423b;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}

/* ---------- Grillas ---------- */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr));
    gap: var(--gap, 16px);
}
.mt-56 { margin-top: 56px; }
.mt-52 { margin-top: 52px; }
.mt-40 { margin-top: 40px; }
.mt-24 { margin-top: 24px; }

/* ---------- Tarjetas "problema" (sección clara) ---------- */
.pain {
    padding: 26px;
    border-radius: 20px;
    background: var(--paper-card);
    border: 1px solid var(--line-paper);
    display: flex;
    flex-direction: column;
    gap: 46px;
}
.pain__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
}
.pain p { margin: 0; font-size: 19px; line-height: 1.4; color: var(--ink-2); }
.pain b { color: var(--ink); font-weight: 600; }

/* ---------- Pasos ---------- */
.steps-bg { background: radial-gradient(700px 360px at 85% 0%, rgba(61, 220, 132, .08), transparent 70%); }
.step {
    padding: 30px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--cream);
}
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--sand);
    display: grid;
    place-items: center;
    font-size: 20px;
}
.step__icon--wa { color: var(--wa); }
.step__num { font: 500 13px var(--f-mono); color: var(--muted-3); }
.step h3 {
    margin: 28px 0 8px;
    font: 700 24px/1.15 var(--f-display);
    letter-spacing: -.01em;
}
.step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.step--sand { background: var(--sand); color: var(--bg); border-color: var(--sand); }
.step--sand .step__icon { background: var(--bg); color: var(--sand); }
.step--sand .step__num { color: var(--ink-3); }
.step--sand p { color: #4a4036; }
.note-wa {
    margin-top: 28px;
    padding: 16px 22px;
    border-radius: 16px;
    border: 1px solid rgba(61, 220, 132, .25);
    background: rgba(61, 220, 132, .06);
    color: #b6c9bc;
    font-size: 16px;
    line-height: 1.5;
}
.note-wa b { color: var(--wa); font-weight: 600; }

/* ---------- Tarjetas de funciones (bento) ---------- */
.bento-rows { display: flex; flex-direction: column; gap: 16px; }
.bento { display: flex; flex-wrap: wrap; gap: 16px; }
.card {
    flex: 1 1 280px;
    padding: 30px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: border-color .2s;
}
.card:hover { border-color: rgba(216, 200, 178, .4); }
.card--wide { flex: 1 1 300px; padding: 34px; gap: 56px; justify-content: space-between; }
.card--featured {
    flex: 2 1 440px;
    padding: 34px;
    gap: 56px;
    justify-content: space-between;
    background: linear-gradient(160deg, #1c3a2d, #1e2a22 70%);
    border-color: rgba(61, 220, 132, .28);
}
.card--featured:hover { border-color: rgba(61, 220, 132, .5); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card__wa { font-size: 44px; color: var(--wa); }
.tag {
    font: 500 11px var(--f-mono);
    letter-spacing: .08em;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(216, 200, 178, .12);
    color: var(--sand);
    white-space: nowrap;
}
.tag--wa { background: rgba(61, 220, 132, .16); color: #7fe8ad; }
.chip {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--surface-2);
    color: var(--sand);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: none;
}
.chip--accent { color: var(--accent); }
.chip--wa { color: var(--wa); }
.card h3, .card h2 {
    margin: 0 0 10px;
    font: 700 22px/1.2 var(--f-display);
    letter-spacing: -.01em;
    color: var(--cream);
}
.card--wide h3 { font-size: 24px; }
.card--featured h3 { font-size: 30px; letter-spacing: -.02em; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.card--featured p { max-width: 460px; font-size: 16.5px; color: #b6c9bc; }
.pub .card__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sand);
}
.pub .card__link:hover { color: var(--cream); }
.card__link i { font-size: 12px; transition: transform .2s; }
.card__link:hover i { transform: translateX(3px); }
.pub .card--featured .card__link { color: #7fe8ad; }
.pub .card--featured .card__link:hover { color: #bfe9d1; }
a.card { color: inherit; }
.pub a.card:hover { color: inherit; }
.card--compact { gap: 22px; padding: 26px; }
.card--compact p { font-size: 15px; }
.more-link { margin-top: 28px; }

/* Tarjetas sobre fondo claro */
.section--paper .card { background: var(--paper-card); border-color: var(--line-paper); }
.section--paper .card:hover { border-color: rgba(31, 26, 22, .25); }
.section--paper .card h2, .section--paper .card h3 { color: var(--ink); }
.section--paper .card p { color: var(--ink-2); }
.section--paper .chip { background: var(--ink); color: var(--sand); }

/* Lista con checks */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.checklist li i { margin-top: 4px; color: var(--sand); font-size: 14px; flex: none; width: 16px; text-align: center; }
.checklist strong { color: var(--cream); font-weight: 600; }
.section--paper .checklist li { color: var(--ink-2); }
.section--paper .checklist li i { color: var(--accent); }
.section--paper .checklist strong { color: var(--ink); }
.card__foot { margin: 0; font-size: 14px !important; line-height: 1.5; color: var(--muted-2) !important; }
.section--paper .card__foot { color: var(--ink-3) !important; }
.pub .inline-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(216, 200, 178, .5); text-underline-offset: 3px; }
.pub .section--paper .inline-link { text-decoration-color: rgba(31, 26, 22, .35); }

/* ---------- Galería ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 14px;
}
.thumb {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line-paper);
    background: var(--paper-card);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s, transform .2s;
}
.thumb:hover { border-color: rgba(31, 26, 22, .3); transform: translateY(-2px); }
.thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    background: #fff;
    border-bottom: 1px solid var(--line-paper);
}
.thumb span { padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* Puntitos del carrusel de capturas (solo se muestran en celular) */
.gallery-dots { display: none; justify-content: center; gap: 7px; margin-top: 18px; }
.gallery-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(31, 26, 22, .22);
    cursor: pointer;
    transition: width .2s, background .2s;
}
.gallery-dots button.is-on { width: 20px; background: var(--accent); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--cream);
    background: rgba(15, 13, 11, .9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.lightbox__box { position: relative; width: 100%; max-width: 1100px; }
.lightbox__frame {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(232, 220, 200, .14);
    background: var(--surface);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.lightbox__media { position: relative; background: #0f0d0b; }
.lightbox__media img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; }
.lightbox__count {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(15, 13, 11, .7);
    font: 500 12px var(--f-mono);
    color: var(--sand);
}
.lightbox__nav, .lightbox__close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(26, 22, 19, .75);
    color: var(--cream);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 15px;
}
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__close { position: absolute; top: -56px; right: 0; }
.lightbox__text { padding: 22px 26px; }
.lightbox__text h3 { margin: 0 0 6px; font: 700 22px var(--f-display); letter-spacing: -.01em; }
.lightbox__text p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Frase ---------- */
.quote {
    margin: 0;
    font: 800 clamp(36px, 5vw, 64px)/1.02 var(--f-display);
    letter-spacing: -.035em;
    color: var(--cream);
}
.quote__mark { display: block; margin-bottom: 18px; font-size: 30px; color: var(--accent); }

/* ---------- Próximamente ---------- */
.soon {
    border-style: dashed;
    border-color: rgba(232, 220, 200, .22);
    background: transparent;
}

/* ---------- Preguntas frecuentes ---------- */
.faq-layout { display: grid; gap: 48px; }
@media (min-width: 960px) {
    .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
    .faq-layout__head { position: sticky; top: 110px; align-self: start; }
}
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color .2s;
}
.faq details[open] { border-color: rgba(216, 200, 178, .35); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 20px 26px;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font: 700 18px/1.35 var(--f-display); letter-spacing: -.005em; color: var(--cream); }
.faq__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--sand);
    display: grid;
    place-items: center;
    font-size: 12px;
    flex: none;
    transition: transform .2s;
}
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 26px 24px; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- CTA final ---------- */
.cta-sec { padding: 0 28px 90px; }
.cta-sec--sep { padding-top: 110px; }
.cta {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 32px;
    background: var(--sand);
    color: var(--bg);
    padding: clamp(36px, 6vw, 80px);
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    align-items: center;
    justify-content: space-between;
}
.cta__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(26, 22, 19, .25); pointer-events: none; }
.cta__ring--lg { right: -60px; top: -60px; width: 320px; height: 320px; }
.cta__ring--sm { right: 20px; top: 20px; width: 160px; height: 160px; }
.cta__text { position: relative; max-width: 620px; }
.cta__text h2 { margin: 0; font: 800 clamp(38px, 5vw, 64px)/1 var(--f-display); letter-spacing: -.035em; }
.cta__text p { margin: 18px 0 0; font-size: 19px; line-height: 1.5; color: #4a4036; }
.cta__text .cta__free { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--bg); }
.cta__btns { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Páginas de funcionalidades ---------- */
.page-hero {
    position: relative;
    padding: 56px 28px 90px;
    background:
        radial-gradient(900px 480px at 85% 10%, rgba(216, 200, 178, .12), transparent 70%),
        radial-gradient(600px 400px at 0% 0%, rgba(217, 102, 63, .08), transparent 70%);
}
.page-hero__in { max-width: 1200px; margin: 0 auto; }
.page-hero__body { max-width: 860px; }
.crumbs ol {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font: 500 12px var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.pub .crumbs a { color: var(--muted); }
.pub .crumbs a:hover { color: var(--cream); }
.crumbs li[aria-current] { color: var(--sand); }
.crumbs__sep { color: var(--muted-3); }
.page-hero .chip { width: 60px; height: 60px; border-radius: 18px; font-size: 26px; }
.page-hero .h1 { margin-top: 28px; }

.shot {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}
.shot img { display: block; width: 100%; height: auto; background: #fff; }
.shot figcaption { padding: 14px 20px; font-size: 14px; color: var(--muted); text-align: center; }
.section--paper .shot { border-color: var(--line-paper); background: var(--paper-card); }

/* Captura vertical al costado de las tarjetas */
.split { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.split .shot { max-width: 600px; width: 100%; justify-self: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack .card { flex: none; }
.section--paper .shot figcaption { color: var(--ink-3); }

.alert-row { display: flex; align-items: flex-start; gap: 14px; }
.alert-row p { margin: 6px 0 0; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 28px 30px; font-size: 15px; color: var(--muted-2); }
.footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 40px 32px;
    padding-bottom: 44px;
}
@media (min-width: 900px) {
    .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__brand p { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.pub .footer__ig {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 17px;
    transition: color .2s, background .2s;
}
.pub .footer__ig:hover { color: var(--cream); background: rgba(232, 220, 200, .08); }
.footer__col ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pub .footer__col a { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.pub .footer__col a:hover { color: var(--cream); }
.footer__col a i { width: 15px; text-align: center; font-size: 14px; color: var(--muted-2); }
.footer__col a .fa-whatsapp { color: var(--wa); }
.pub .footer__col a.footer__all { color: var(--sand); font-weight: 600; }
.footer__col a.footer__all i { width: auto; font-size: 12px; color: inherit; }
.footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.pub .footer__bottom a { color: var(--muted-2); }
.pub .footer__bottom a:hover { color: var(--cream); }

/* ---------- Botón flotante de WhatsApp ---------- */
.pub .wa-float {
    position: fixed;
    right: 22px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 31px;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
    transition: transform .2s, background .2s;
}
.pub .wa-float:hover { color: #fff; background: #1fbd59; transform: translateY(-2px) scale(1.04); }
.wa-float__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(6px, -50%);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--cream);
    color: var(--bg);
    font: 600 14px var(--f-body);
    white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { opacity: 1; transform: translate(0, -50%); }

/* ---------- Ventana de contacto ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 13, 11, .75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.modal__card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 460px;
    border-radius: 28px;
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(216, 200, 178, .10), transparent 70%),
        var(--surface);
    border: 1px solid rgba(232, 220, 200, .14);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75);
    padding: 30px 28px 22px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
/* Apertura/cierre: el fondo se desvanece y la tarjeta se desliza, con la misma duración */
.modal.modal-anim { transition: opacity .22s ease; }
.modal.modal-anim .modal__card { transition: transform .22s ease; }
.modal.modal-anim--from { opacity: 0; }
.modal.modal-anim--from .modal__card { transform: translateY(12px) scale(.98); }
.modal__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(216, 200, 178, .16); pointer-events: none; }
.modal__ring--lg { right: -70px; top: -70px; width: 220px; height: 220px; }
.modal__ring--sm { right: -10px; top: -10px; width: 100px; height: 100px; }
.modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(26, 22, 19, .6);
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color .2s, background .2s;
}
.modal__close:hover { color: var(--cream); background: var(--surface-2); }
.modal__card h3 {
    position: relative;
    margin: 12px 0 0;
    font: 800 38px/1 var(--f-display);
    letter-spacing: -.035em;
    color: var(--cream);
}
.modal__lead { position: relative; margin: 10px 0 24px; color: var(--muted); font-size: 16px; }

/* WhatsApp: canal principal */
.pub .contact-wa {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(160deg, #1c3a2d, #1e2a22 75%);
    border: 1px solid rgba(61, 220, 132, .3);
    color: var(--cream);
    transition: border-color .2s, transform .2s;
}
.pub .contact-wa:hover { color: var(--cream); border-color: rgba(61, 220, 132, .6); transform: translateY(-1px); }
.contact-wa__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 27px;
    box-shadow: 0 8px 20px -8px rgba(37, 211, 102, .6);
}
.contact-wa__text { flex: 1; min-width: 0; }
.contact-wa__text b { display: block; font: 700 18px var(--f-display); letter-spacing: -.01em; }
.contact-wa__text span { font-size: 14.5px; color: #b6c9bc; white-space: nowrap; }
.contact-wa__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(61, 220, 132, .16);
    color: #7fe8ad;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}
.contact-wa__cta i { font-size: 11px; transition: transform .2s; }
.contact-wa:hover .contact-wa__cta i { transform: translateX(3px); }

/* Email e Instagram: canales secundarios */
.contact-alt {
    position: relative;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 10px;
}
.pub .contact-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(232, 220, 200, .03);
    color: var(--cream);
    transition: border-color .2s, background .2s;
}
.pub .contact-tile:hover { color: var(--cream); border-color: rgba(216, 200, 178, .4); background: rgba(232, 220, 200, .06); }
.contact-tile__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--sand);
    display: grid;
    place-items: center;
    font-size: 16px;
}
.contact-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-tile b { font-weight: 600; font-size: 15px; }
.contact-tile__text span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }

.modal__foot {
    position: relative;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 500 11.5px var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
    text-align: center;
}
.modal__foot i { color: var(--sand); font-size: 12px; }

/* Ventana de contacto en celular: filas compactas */
@media (max-width: 480px) {
    .modal { padding: 14px; }
    .modal__card { padding: 24px 18px 18px; border-radius: 24px; }
    .modal__card h3 { font-size: 32px; }
    .modal__lead { margin-bottom: 18px; }
    .pub .contact-wa { padding: 14px; gap: 12px; }
    .contact-wa__icon { width: 46px; height: 46px; font-size: 24px; }
    .contact-wa__cta { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .contact-wa__cta-txt { display: none; }
    .contact-alt { grid-template-columns: 1fr; }
    .pub .contact-tile { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
    .contact-tile__icon { margin-bottom: 0; flex: none; }
    .modal__foot { letter-spacing: .04em; font-size: 11px; }
}

/* ---------- Ajustes de ancho chico ---------- */
@media (max-width: 560px) {
    .section { padding: 80px 20px; }
    .section--tight { padding: 56px 20px; }
    .section--top0 { padding-top: 20px; }
    /* Hero compacto: los dos botones tienen que entrar en la primera pantalla del celular */
    .hero { padding: 22px 20px 56px; }
    .hero .h1 { margin-top: 18px; font-size: 40px; }
    .hero .lead { margin-top: 16px; font-size: 17px; line-height: 1.5; }
    .hero .btns { margin-top: 24px; gap: 10px; }
    .hero .btns .btn { flex: 1 1 auto; justify-content: center; padding: 13px 20px; font-size: 16px; }
    .hero-def { padding: 0 20px 44px; }
    .page-hero { padding: 40px 20px 64px; }
    .nav__in { padding: 12px 20px; }
    .nav__mobile { padding: 10px 20px 20px; }
    .cta-sec { padding: 0 16px 64px; }
    .cta-sec--sep { padding-top: 80px; }
    .footer { padding: 48px 20px 26px; }
    .pub .wa-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; font-size: 29px; }
    .wa-float__label { display: none; }
    .trip { margin-left: 20px; }
    .btn { padding: 15px 22px; }

    /* "¿Cuánto te sale no tener un sistema?": filas compactas (ícono + texto) */
    .section--problem .mt-56 { margin-top: 32px; }
    .section--problem .grid-auto { gap: 10px; }
    .pain { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; }
    .pain__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
    .pain p { font-size: 16.5px; }

    /* Pasos: ícono a la izquierda, título y texto al lado, número en la esquina */
    .steps-grid { margin-top: 32px; }
    .steps-grid.grid-auto { gap: 10px; }
    .step {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        align-items: center;
        padding: 16px 44px 16px 16px;
        border-radius: 18px;
    }
    .step__top { grid-row: 1 / span 2; }
    .step__icon { width: 44px; height: 44px; font-size: 17px; }
    .step__num { position: absolute; top: 12px; right: 14px; font-size: 12px; }
    .step h3 { margin: 0 0 2px; font-size: 19px; }
    .step p { font-size: 15px; line-height: 1.45; }

    /* "RutaLog en acción": carrusel horizontal con scroll-snap */
    .gallery {
        display: flex;
        gap: 12px;
        margin: 32px -20px 0;
        padding: 0 20px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gallery::-webkit-scrollbar { display: none; }
    .thumb { flex: 0 0 84%; scroll-snap-align: start; }
    .thumb:hover { transform: none; }
    .gallery-dots { display: flex; }

    /* Tarjetas (funciones, próximamente, páginas de funcionalidades): compactas.
       Por defecto, ícono a la izquierda y texto al lado; las que tienen cabecera
       (WhatsApp destacada y "En desarrollo") quedan en columna. */
    .bento-rows, .bento { gap: 10px; }
    .bento-rows.mt-52, .mt-52 { margin-top: 32px; }
    .mt-40 { margin-top: 28px; }
    .card,
    .card--wide,
    .card--compact {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 18px;
        border-radius: 18px;
    }
    .card > div { flex: 1; min-width: 0; }
    .card .chip { width: 44px; height: 44px; border-radius: 13px; font-size: 19px; }
    .card h3, .card h2, .card--wide h3 { margin-bottom: 6px; font-size: 19px; }
    .card p, .card--compact p { font-size: 14.5px; line-height: 1.5; }
    .card .checklist li { font-size: 14.5px; }
    .card__link { margin-top: 10px; }
    .card--featured,
    .card.soon { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; }
    .card__wa { font-size: 34px; }
    .card--featured h3 { font-size: 24px; }
    .more-link { margin-top: 20px; width: 100%; justify-content: center; }
}