/* ════════════════════════════════════════════════════════════════
   DEMO · LOTEO / BARRIO CERRADO  —  tema oscuro y cromado
   ----------------------------------------------------------------
   La web es del barrio: lotes con plano, ubicación, cómo se hizo,
   cómo comprar. Fondo verde-negro, titulares Cormorant livianos con
   cursivas de énfasis, datos en mono, acento arena con brillo
   metálico reservado para cifras, estados y el CTA.

   Fuente de verdad visual: canvas de Yerba Buena Norte (bloque :root,
   header.pnav, .foot y .agent-fab). Los valores de color son los del
   canvas; el skin (skin-loteo.css) los expone como --primary/--secondary/
   --tertiary/--quaternary/--dark para que el panel pueda pisarlos.

   Todo scopeado a html.demo-loteo (aislamiento multi-tenant).
   Prefijo de clases propias: lt-. Las clases del canvas (.wrap, .kicker,
   .pnav, .pfoot, .btn-chrome, .btn-ghost, .agent-fab) se conservan con
   ese nombre para que las vistas del demo las usen tal cual.
   ════════════════════════════════════════════════════════════════ */

html.demo-loteo {
    /* Tokens del canvas */
    --lt-bg: #0A1410;                        /* fijo: el skin del tenant no debe teñir el demo (skin-bewpro trae --dark navy) */
    --lt-bg-2: #10201A;
    --lt-bg-3: #172A22;
    --lt-line: rgba(226, 214, 180, 0.14);
    --lt-line-2: rgba(226, 214, 180, 0.28);
    --lt-fg: #EDE6D4;
    --lt-fg-2: #B9B3A1;
    --lt-fg-3: #9CA59A;                      /* ≥ 4.5:1 sobre --lt-bg-2 (axe) */
    --lt-sand: #C2B488;
    --lt-sand-2: #E6DCBB;
    --lt-sage: #98A888;
    --lt-green: #285838;
    --lt-green-2: #1B3326;
    --lt-cream: #F2EEE1;
    --lt-ink: #14211A;                       /* texto sobre arena/cromado */
    --lt-chrome: linear-gradient(110deg, #F1E9CF 0%, #C2B488 38%, #8E8562 62%, #E4DAB7 100%);
    --lt-disp: #C2B488;                      /* estado: a la venta */
    --lt-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --lt-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --lt-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --lt-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lt-nav-h: 66px;                        /* alto del header fijo (.pnav) */
    --lt-gap: clamp(4rem, 8vw, 7.5rem);      /* ritmo vertical entre secciones */
    color-scheme: dark;
    background: var(--lt-bg);
}

/* ─── Base: fondo y colores del tema oscuro ─────────────────────── */
html.demo-loteo body,
html.demo-loteo .body,
html.demo-loteo .main,
html.demo-loteo [role="main"] {
    background: var(--lt-bg);
    color: var(--lt-fg);
}
html.demo-loteo body {
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
    font-family: var(--lt-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html.demo-loteo .main { overflow-x: clip; }
html.demo-loteo img,
html.demo-loteo video { max-width: 100%; height: auto; display: block; }
html.demo-loteo ::selection { background: var(--lt-sand); color: var(--lt-ink); }
html.demo-loteo :focus-visible { outline: 2px solid var(--lt-sand); outline-offset: 3px; }
html.demo-loteo a { color: inherit; text-decoration: none; transition: color 0.2s var(--lt-ease); }
html.demo-loteo a:hover { color: var(--lt-sand-2); }
html.demo-loteo p { margin: 0 0 1rem; color: inherit; }
html.demo-loteo .loading-overlay { background: var(--lt-bg) !important; }

/* Tipografía: h1–h4 Cormorant 300 (h3/h4 un poco más firmes), cuerpo Montserrat */
html.demo-loteo h1, html.demo-loteo h2, html.demo-loteo h3, html.demo-loteo h4,
html.demo-loteo .h1, html.demo-loteo .h2, html.demo-loteo .h3, html.demo-loteo .h4 {
    font-family: var(--lt-display);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--lt-fg);
    margin: 0 0 1rem;
    text-wrap: balance;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}
html.demo-loteo h1, html.demo-loteo .h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
html.demo-loteo h2, html.demo-loteo .h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
html.demo-loteo h3, html.demo-loteo .h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; }
html.demo-loteo h4, html.demo-loteo .h4 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 400; }
html.demo-loteo h1 em, html.demo-loteo h2 em, html.demo-loteo h3 em { font-style: italic; font-weight: 300; color: var(--lt-sand-2); }
html.demo-loteo .lt-lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--lt-fg-2); max-width: 62ch; }
html.demo-loteo .lt-muted { color: var(--lt-fg-2); }
html.demo-loteo .lt-mono { font-family: var(--lt-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lt-fg-3); }
html.demo-loteo .chrome {
    background: var(--lt-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─── Layout: .wrap (1240px, 16px de margen en móvil) ───────────── */
html.demo-loteo .wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}
html.demo-loteo .wrap.narrow { max-width: 860px; }
html.demo-loteo .lt-section { padding: var(--lt-gap) 0; position: relative; }
html.demo-loteo .lt-section--tight { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
html.demo-loteo .lt-section--2 { background: var(--lt-bg-2); }
html.demo-loteo .lt-section--green { background: var(--lt-green-2); border-top: 1px solid var(--lt-line); }
html.demo-loteo .lt-section + .lt-section { border-top: 1px solid var(--lt-line); }

/* ─── Kicker (mono, mayúsculas, letter-spacing, filete arena) ──── */
html.demo-loteo .kicker {
    font-family: var(--lt-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lt-sand);
    display: inline-flex;
    gap: 0.7rem;
    align-items: center;
    margin: 0 0 1.2rem;
}
html.demo-loteo .kicker::before { content: ""; width: 22px; height: 1px; background: var(--lt-sand); opacity: 0.7; }
html.demo-loteo .kicker--plain::before { display: none; }

/* ─── Botones ───────────────────────────────────────────────────── */
html.demo-loteo .btn-chrome,
html.demo-loteo .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.35rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--lt-body);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid var(--lt-line-2);
    color: var(--lt-fg);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s var(--lt-ease), background 0.2s var(--lt-ease), filter 0.2s var(--lt-ease), color 0.2s var(--lt-ease);
}
html.demo-loteo .btn-ghost { border-color: rgba(226, 214, 180, 0.5); color: var(--lt-fg); }
html.demo-loteo .btn-ghost:hover,
html.demo-loteo .btn-ghost:focus-visible { border-color: var(--lt-sand-2); color: var(--lt-sand-2); background: rgba(194, 180, 136, 0.08); }
html.demo-loteo .btn-chrome {
    background: var(--lt-chrome);
    color: var(--lt-ink);
    border-color: transparent;
    font-weight: 600;
}
html.demo-loteo .btn-chrome:hover,
html.demo-loteo .btn-chrome:focus-visible { filter: brightness(1.06); color: var(--lt-ink); }
html.demo-loteo .btn-chrome.small,
html.demo-loteo .btn-ghost.small { padding: 0.55rem 1rem; font-size: 0.72rem; }
html.demo-loteo .btn-chrome.block,
html.demo-loteo .btn-ghost.block { width: 100%; }
html.demo-loteo .lt-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ─── Estados de lote (palabra + color fijos en toda la web) ────── */
html.demo-loteo .state {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--lt-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lt-fg-2);
}
html.demo-loteo .state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html.demo-loteo .state--disp { color: var(--lt-disp); }

/* ════════════════════════════════════════════════════════════════
   HEADER — .pnav (fijo, degradado sobre el hero, sólido al scrollear)
   ════════════════════════════════════════════════════════════════ */
html.demo-loteo #header.pnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    margin: 0;
    border: 0;
    min-height: 0;
    font-family: var(--lt-body);
    background: linear-gradient(180deg, rgba(10, 20, 16, 0.95), rgba(10, 20, 16, 0.75) 70%, transparent);
    transition: background 0.35s var(--lt-ease), box-shadow 0.35s var(--lt-ease);
}
html.demo-loteo #header.pnav.is-stuck {
    background: rgba(10, 20, 16, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--lt-line);
}
html.demo-loteo .pnav .wrap {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    min-height: var(--lt-nav-h);
}
html.demo-loteo .pnav__brand { display: inline-flex; align-items: center; line-height: 1; }
html.demo-loteo .pnav__brand img { height: 38px; width: auto; }
html.demo-loteo .pnav__brand--text {
    font-family: var(--lt-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--lt-fg);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
html.demo-loteo .pnav__nav { display: flex; align-items: center; gap: 1.3rem; margin-left: auto; }
html.demo-loteo .pnav__list { display: flex; align-items: center; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
html.demo-loteo .pnav__link {
    display: inline-block;
    text-decoration: none;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--lt-fg-2);
    padding: 0.4rem 0;
    position: relative;
}
html.demo-loteo .pnav__link::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: var(--lt-sand); transition: width 0.3s var(--lt-ease);
}
html.demo-loteo .pnav__link:hover { color: var(--lt-sand-2); }
html.demo-loteo .pnav__link:hover::after,
html.demo-loteo .pnav__link.active::after { width: 100%; }
html.demo-loteo .pnav__link.active { color: var(--lt-fg); }
html.demo-loteo .pnav__cta { margin-left: auto; }
html.demo-loteo .pnav__nav .pnav__cta { margin-left: 0; display: none; }
html.demo-loteo .pnav__burger,
html.demo-loteo .pnav__close {
    display: none;
    background: none;
    border: 1px solid var(--lt-line-2);
    border-radius: 999px;
    color: var(--lt-fg);
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    cursor: pointer;
    font: inherit;
}
html.demo-loteo .pnav__burger span,
html.demo-loteo .pnav__burger span::before,
html.demo-loteo .pnav__burger span::after {
    display: block; width: 18px; height: 1px; background: currentColor; position: relative; content: "";
}
html.demo-loteo .pnav__burger span::before { position: absolute; top: -6px; }
html.demo-loteo .pnav__burger span::after { position: absolute; top: 6px; }
html.demo-loteo .pnav__close { font-size: 1.1rem; line-height: 1; }

/* Nav móvil: panel lateral */
@media (max-width: 900px) {
    html.demo-loteo .pnav__burger { display: inline-flex; margin-left: auto; }
    html.demo-loteo .pnav__cta.pnav__cta--desktop { display: none; }
    html.demo-loteo .pnav__nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(84vw, 360px);
        background: var(--lt-bg-2);
        border-left: 1px solid var(--lt-line);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding: 4rem 2rem 2.5rem;
        z-index: 1100;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.45s var(--lt-ease), visibility 0s linear 0.45s;
    }
    html.demo-loteo .pnav__nav.is-open { transform: none; visibility: visible; transition: transform 0.45s var(--lt-ease); }
    html.demo-loteo .pnav__list { flex-direction: column; align-items: flex-start; gap: 1.2rem; width: 100%; }
    html.demo-loteo .pnav__link { font-size: 0.92rem; color: var(--lt-fg); }
    html.demo-loteo .pnav__nav .pnav__cta { display: inline-flex; margin-top: 2rem; }
    html.demo-loteo .pnav__close { display: inline-flex; position: absolute; top: 1rem; right: 1rem; }
    html.demo-loteo .pnav__scrim {
        position: fixed; inset: 0; z-index: 1050;
        background: rgba(6, 13, 10, 0.6);
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s var(--lt-ease), visibility 0s linear 0.3s;
    }
    html.demo-loteo .pnav__scrim.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s var(--lt-ease); }
}
@media (min-width: 901px) {
    html.demo-loteo .pnav__scrim { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PAGE HEADER — interior oscuro mínimo (sin imagen de fondo)
   ════════════════════════════════════════════════════════════════ */
html.demo-loteo .lt-pagehead {
    background: var(--lt-bg);
    border-bottom: 1px solid var(--lt-line);
    padding-top: calc(var(--lt-nav-h) + clamp(3rem, 7vw, 6rem));
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
html.demo-loteo .lt-pagehead__crumbs {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    font-family: var(--lt-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lt-fg-3); margin: 0 0 1.4rem;
}
html.demo-loteo .lt-pagehead__crumbs a { color: var(--lt-fg-3); }
html.demo-loteo .lt-pagehead__crumbs a:hover { color: var(--lt-sand-2); }
html.demo-loteo .lt-pagehead__crumbs .sep { color: var(--lt-sand); }
html.demo-loteo .lt-pagehead__title {
    font-family: var(--lt-display);
    font-weight: 300;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.02;
    margin: 0;
    color: var(--lt-fg);
}
html.demo-loteo .lt-pagehead__sub {
    font-family: var(--lt-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--lt-fg-2);
    max-width: 62ch;
    margin: 1.2rem 0 0;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — .pfoot
   ════════════════════════════════════════════════════════════════ */
html.demo-loteo #footer.pfoot {
    background: var(--lt-bg);
    color: var(--lt-fg-2);
    border: 0;
    border-top: 1px solid var(--lt-line);
    margin: 0;
    padding: 0;
    font-family: var(--lt-body);
    font-size: 0.92rem;
}
html.demo-loteo .pfoot__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
html.demo-loteo .pfoot__brand img { height: 44px; width: auto; margin-bottom: 1.2rem; }
html.demo-loteo .pfoot__brand .pfoot__name {
    font-family: var(--lt-display); font-size: 1.8rem; font-weight: 300; color: var(--lt-fg); margin: 0 0 1rem; line-height: 1.1;
}
html.demo-loteo .pfoot__tagline { max-width: 36ch; line-height: 1.7; color: var(--lt-fg-2); margin: 0 0 1.4rem; }
html.demo-loteo .pfoot__title {
    font-family: var(--lt-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--lt-sand); margin: 0 0 1.2rem; font-weight: 400;
}
html.demo-loteo .pfoot__list { list-style: none; margin: 0; padding: 0; }
html.demo-loteo .pfoot__list li { margin: 0 0 0.65rem; display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.5; }
html.demo-loteo .pfoot__list i { color: var(--lt-sand); width: 16px; text-align: center; margin-top: 0.3rem; font-size: 0.85rem; }
html.demo-loteo #footer.pfoot .pfoot__list a, html.demo-loteo .pfoot__list a { color: var(--lt-fg); } /* #footer a del template pisa la clase: hace falta el id */
html.demo-loteo .pfoot__list a:hover { color: var(--lt-sand-2); }
html.demo-loteo .pfoot__social { display: flex; gap: 0.5rem; }
html.demo-loteo .pfoot__social a {
    display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
    border: 1px solid var(--lt-line-2); border-radius: 999px; color: var(--lt-fg-2);
    transition: border-color 0.2s var(--lt-ease), color 0.2s var(--lt-ease);
}
html.demo-loteo .pfoot__social a:hover { border-color: var(--lt-sand); color: var(--lt-sand-2); }
html.demo-loteo .pfoot__cta { display: none; }
html.demo-loteo .pfoot__legal {
    border-top: 1px solid var(--lt-line);
    padding: 1.4rem 0 0.6rem;
    font-size: 0.78rem;
    color: var(--lt-fg-3);
    line-height: 1.6;
}
html.demo-loteo .pfoot__bottom {
    padding: 0.6rem 0 2rem;
    font-size: 0.78rem;
    color: var(--lt-fg-3);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
html.demo-loteo #footer.pfoot .pfoot__bottom a, html.demo-loteo .pfoot__bottom a { color: var(--lt-fg); text-decoration: underline; text-underline-offset: 3px; }
html.demo-loteo .pfoot__bottom a:hover { color: var(--lt-sand-2); }
@media (max-width: 860px) {
    html.demo-loteo .pfoot__grid { grid-template-columns: 1fr 1fr; }
    html.demo-loteo .pfoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    html.demo-loteo .pfoot__grid { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 2.4rem; }
    html.demo-loteo .pfoot__list li { margin-bottom: .4rem; }
    html.demo-loteo .pfoot__list--nav { columns: 2; }
    html.demo-loteo .pfoot__list--nav li { break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════════════
   ASISTENTE — .agent-fab (píldora cromada abajo a la derecha)
   ════════════════════════════════════════════════════════════════ */
html.demo-loteo .agent-fab {
    position: fixed;
    right: calc(1.2rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--lt-chrome);
    color: var(--lt-ink);
    font-family: var(--lt-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
html.demo-loteo .agent-fab i,
html.demo-loteo .agent-fab .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--lt-ink); display: inline-block;
    animation: lt-pulse 2s infinite;
}
@keyframes lt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* El widget genérico del módulo de atención (#agw) toma la forma del fab del canvas:
   píldora cromada abajo a la DERECHA (en este demo no hay WhatsApp flotante; ese lugar es del asistente).
   El #agw lleva la esquina por inline style → hace falta !important. */
/* Abajo a la IZQUIERDA: la derecha es del botón flotante de WhatsApp (convención de la plataforma). */
html.demo-loteo #agw {
    right: auto !important;
    left: calc(1.2rem + env(safe-area-inset-left, 0px)) !important;
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important;
    font-family: var(--lt-body);
}
html.demo-loteo #agw-toggle:not(.has-img) {
    width: auto; height: auto;
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    background: var(--lt-chrome);
    color: var(--lt-ink);
    gap: 0.6rem;
    font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
html.demo-loteo #agw-toggle:not(.has-img) svg { width: 18px; height: 18px; }
html.demo-loteo #agw-toggle .agw-toggle-label { display: inline; }
html.demo-loteo #agw-toggle:hover,
html.demo-loteo #agw-toggle:focus-visible { transform: none; filter: brightness(1.06); outline: 2px solid var(--lt-sand); outline-offset: 3px; }
html.demo-loteo #agw-panel { left: 0; right: auto; bottom: 64px; }
@media (max-width: 760px) { html.demo-loteo #agw-toggle .agw-toggle-label { display: none; } html.demo-loteo #agw-toggle:not(.has-img) { width: 50px; height: 50px; padding: 0; justify-content: center; } html.demo-loteo #agw-toggle:not(.has-img) svg { width: 22px; height: 22px; } }
html.demo-loteo .scroll-to-top { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   MÓDULOS GENÉRICOS SOBRE FONDO OSCURO (blog, faqs, galería…)
   Mínimo para que el theme no imponga blanco. Las vistas propias del
   demo traen sus clases; esto es la red de seguridad.
   ════════════════════════════════════════════════════════════════ */
html.demo-loteo .section,
html.demo-loteo section.section { background: transparent; border: 0; color: inherit; }
html.demo-loteo .section.section-secondary,
html.demo-loteo .bg-color-light,
html.demo-loteo .bg-light { background: var(--lt-bg-2) !important; color: var(--lt-fg) !important; }
html.demo-loteo .text-dark,
html.demo-loteo .text-color-dark { color: var(--lt-fg) !important; }
html.demo-loteo .text-muted { color: var(--lt-fg-3) !important; }
html.demo-loteo .card,
html.demo-loteo .post,
html.demo-loteo .card-body { background: var(--lt-bg-2); color: var(--lt-fg); border-color: var(--lt-line); }
html.demo-loteo hr { border-color: var(--lt-line); }
html.demo-loteo .form-control {
    font: inherit; color: var(--lt-fg); background: var(--lt-bg);
    border: 1px solid var(--lt-line-2); border-radius: 4px; padding: 0.7rem 0.8rem;
}
html.demo-loteo .form-control::placeholder { color: var(--lt-fg-3); }
html.demo-loteo .form-control:focus { border-color: var(--lt-sand); box-shadow: none; background: var(--lt-bg); color: var(--lt-fg); }
html.demo-loteo .btn-primary {
    background: var(--lt-chrome); color: var(--lt-ink); border: 0; border-radius: 999px;
    font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 0.8rem 1.35rem;
}
html.demo-loteo .btn-primary:hover { filter: brightness(1.06); color: var(--lt-ink); }
html.demo-loteo .breadcrumb a { color: var(--lt-fg-3); }
html.demo-loteo .pagination .page-link { background: transparent; color: var(--lt-fg-2); border-color: var(--lt-line); }
html.demo-loteo .pagination .active .page-link { background: var(--lt-sand); color: var(--lt-ink); border-color: var(--lt-sand); }

/* Leyenda obligatoria sobre renders e imágenes generadas */
html.demo-loteo .lt-ilustrativa {
    font-family: var(--lt-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--lt-fg-3);
}

/* ─── Movimiento reducido ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html.demo-loteo *,
    html.demo-loteo *::before,
    html.demo-loteo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    html.demo-loteo .agent-fab i,
    html.demo-loteo .agent-fab .dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   SECCIONES DEL SITIO (portadas del canvas v2.1 de Yerba Buena Norte)
   hero · cifras · «lo que no tenés acá» · plano por lote · ubicación ·
   la vida adentro · cronología · cuatro pasos · reglamento · preguntas ·
   contacto. Mismo nombre de clase que el canvas, scopeadas a html.demo-loteo.
   ════════════════════════════════════════════════════════════════ */
html.demo-loteo .mono { font-family: var(--lt-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-fg-3); }
html.demo-loteo .eyebrow { font-family: var(--lt-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-sand); display: flex; gap: .7rem; align-items: center; margin: 0; }
html.demo-loteo .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--lt-sand); opacity: .7; }
html.demo-loteo section.act { padding-block: clamp(3.25rem, 6.5vw, 6rem); }
html.demo-loteo section.act + section.act:not(.anti):not(.vida):not(.caminos):not(.contacto) { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
html.demo-loteo section.act.act--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
html.demo-loteo .act-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
html.demo-loteo .act-head > p { padding-top: 2.4rem; }
html.demo-loteo .act-head h2 { margin-top: 1rem; }
html.demo-loteo .act-head p { color: var(--lt-fg-2); max-width: 48ch; font-size: 1.02rem; margin: 0; }
html.demo-loteo .act-more { margin-top: 2rem; }
@media (max-width: 860px) { html.demo-loteo .act-head { grid-template-columns: 1fr; gap: .8rem; } html.demo-loteo .act-head > p { padding-top: 0; } }

/* Hero: foto real con el dron a un toque */
html.demo-loteo .hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
html.demo-loteo .hero__media { position: absolute; inset: 0; z-index: -1; }
html.demo-loteo .hero__media video, html.demo-loteo .hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); }
html.demo-loteo .hero__media [hidden] { display: none; }
html.demo-loteo .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,16,.35) 0%, rgba(10,20,16,.1) 35%, rgba(10,20,16,.78) 78%, var(--lt-bg) 100%); }
html.demo-loteo .hero .wrap { padding-block: 5rem 2.2rem; width: 100%; }
html.demo-loteo .hero h1 { font-size: clamp(3.4rem, 9.5vw, 8.2rem); line-height: .95; max-width: 12ch; margin-top: 1rem; }
html.demo-loteo .hero .sub { max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--lt-fg-2); margin-top: 1.2rem; }
html.demo-loteo .hero .ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }
html.demo-loteo .hero .cue { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 1.5rem; font-family: var(--lt-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-fg-3); display: flex; gap: .6rem; align-items: center; }
html.demo-loteo .hero .cue i { display: block; width: 1px; height: 36px; background: var(--lt-sand); animation: lt-cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes lt-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
html.demo-loteo .hero__media img { animation: lt-kb 22s ease-in-out infinite alternate; }
@keyframes lt-kb { from { transform: scale(1); } to { transform: scale(1.07); } }
html.demo-loteo .hero-toggle { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(var(--lt-nav-h) + 3.6rem); background: rgba(10,20,16,.55); backdrop-filter: blur(6px); z-index: 2; }
html.demo-loteo .hero .credit { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(var(--lt-nav-h) + 1.6rem); font-family: var(--lt-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,230,212,.7); background: rgba(10,20,16,.45); padding: .3rem .6rem; border-radius: 4px; z-index: 2; }
html.demo-loteo .hero .eyebrow { color: var(--lt-sand-2); text-shadow: 0 1px 6px rgba(10,20,16,.9); }
@media (max-width: 760px) { html.demo-loteo .hero .cue { display: none; } html.demo-loteo .hero h1 { font-size: clamp(3rem, 15vw, 5rem); } html.demo-loteo .hero .credit { display: none; } html.demo-loteo .hero-toggle { top: auto; left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 1.2rem; } html.demo-loteo .hero .wrap { padding-bottom: 4.6rem; } }

/* Cifras */
html.demo-loteo .stats { border-top: 1px solid var(--lt-line); border-bottom: 1px solid var(--lt-line); background: var(--lt-bg); }
html.demo-loteo .stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
html.demo-loteo .stat { padding: 1.6rem 1.2rem 1.5rem 0; border-right: 1px solid var(--lt-line); }
html.demo-loteo .stat:last-child { border-right: 0; }
html.demo-loteo .stat b { display: block; font-family: var(--lt-display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
html.demo-loteo .stat b small { font-size: .45em; color: var(--lt-fg-2); margin-left: .2rem; }
html.demo-loteo .stat span { display: block; margin-top: .5rem; font-size: .82rem; color: var(--lt-fg-2); }
html.demo-loteo .stat .src { display: none; margin-top: .45rem; font-family: var(--lt-mono); font-size: .62rem; letter-spacing: .06em; color: var(--lt-fg-3); font-style: normal; }
@media (max-width: 760px) { html.demo-loteo .stats .wrap { grid-template-columns: 1fr 1fr; } html.demo-loteo .stat { border-right: 0; border-bottom: 1px solid var(--lt-line); padding-right: 0; } html.demo-loteo .stat:nth-child(odd) { border-right: 1px solid var(--lt-line); padding-right: 1rem; } html.demo-loteo .stat:nth-child(even) { padding-left: 1rem; } html.demo-loteo .stat:nth-last-child(-n+2) { border-bottom: 0; } }

/* Lo que no tenés acá */
html.demo-loteo .anti { background: var(--lt-bg-2); border-block: 1px solid var(--lt-line); }
html.demo-loteo .anti .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
html.demo-loteo .anti .lead { font-family: var(--lt-display); font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.08; margin-top: 1rem; }
html.demo-loteo .anti .lead em { color: var(--lt-sand-2); }
html.demo-loteo .anti .txt { color: var(--lt-fg-2); margin-top: 1.2rem; max-width: 44ch; }
html.demo-loteo .anti ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
html.demo-loteo .anti li { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--lt-line); font-size: .95rem; }
html.demo-loteo .anti li:first-child { border-top: 1px solid var(--lt-line); }
html.demo-loteo .anti li .l { color: var(--lt-fg-3); }
html.demo-loteo .anti li .r { color: var(--lt-fg); }
html.demo-loteo .anti li .r::before { content: "→ "; color: var(--lt-sand); }
@media (max-width: 860px) { html.demo-loteo .anti .grid { grid-template-columns: 1fr; } }

/* Plano por lote (partial modules.lotes.frontend.partials.plano) */
html.demo-loteo .lt-plano .board { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.5rem; margin-top: 1.4rem; align-items: start; }
html.demo-loteo .lt-plano .map { position: relative; border: 1px solid var(--lt-line); background: var(--lt-bg-2); border-radius: 6px; overflow: hidden; aspect-ratio: 480 / 591; max-width: 100%; }
html.demo-loteo .lt-plano .map svg { width: 100%; height: 100%; display: block; }
html.demo-loteo .lt { fill: #2B3B33; stroke: var(--lt-bg); stroke-width: .7; stroke-linejoin: round; cursor: pointer; transition: fill .15s, fill-opacity .15s; outline: none; }
html.demo-loteo .lt[data-pub="1"] { fill: var(--lt-disp); }
html.demo-loteo .lt-bg { fill: #2B3B33; stroke: var(--lt-bg); stroke-width: .7; stroke-linejoin: round; pointer-events: none; }
html.demo-loteo .lt:hover, html.demo-loteo .lt:focus-visible { stroke: var(--lt-sand-2); stroke-width: 1.2; }
html.demo-loteo .lt.is-on { stroke: #fff; stroke-width: 1.8; }
html.demo-loteo .map .mzl { font-family: var(--lt-display); font-size: 26px; font-weight: 300; fill: #fff; fill-opacity: .55; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
html.demo-loteo .map .eq { font-family: var(--lt-mono); font-size: 6.5px; fill: var(--lt-fg-2); text-anchor: middle; pointer-events: none; letter-spacing: .4px; text-transform: uppercase; }
html.demo-loteo .map-tools { position: absolute; right: .7rem; bottom: .7rem; }
html.demo-loteo .map-tools .chip { background: rgba(10,20,16,.85); cursor: pointer; }
html.demo-loteo .map.is-zoom { position: fixed; inset: 0; z-index: 80; aspect-ratio: auto; border-radius: 0; overflow: auto; background: var(--lt-bg); padding: 3.5rem 0 2rem; }
html.demo-loteo .map.is-zoom svg { width: min(170vw, 1400px); height: auto; margin: 0 auto; }
html.demo-loteo .map.is-zoom .map-tools { position: fixed; top: .8rem; right: .8rem; bottom: auto; }
html.demo-loteo .legend { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; align-items: center; }
html.demo-loteo .legend .chip { cursor: default; background: transparent; }
html.demo-loteo .legend .chip.is-on i { background: var(--lt-disp); }
html.demo-loteo .legend .chip-bg i { background: #2B3B33; border: 1px solid var(--lt-line-2); }
html.demo-loteo .legend .chip-vender { cursor: pointer; color: var(--lt-sand-2); border-color: var(--lt-sand); }
html.demo-loteo .legend .chip-vender:hover { background: rgba(194,180,136,.12); color: var(--lt-sand-2); }
html.demo-loteo .lt-vender { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; color: var(--lt-fg-2); font-size: .92rem; }
html.demo-loteo .legend .chip b { font-weight: 500; color: var(--lt-fg); margin-left: .1rem; }
html.demo-loteo .legend .chip-upd { cursor: default; font-size: .64rem; }
html.demo-loteo .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--lt-line-2); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-fg-2); font: inherit; font-size: .74rem; line-height: 1.2; }
html.demo-loteo .chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
html.demo-loteo .chip.is-on { border-color: var(--lt-sand); color: var(--lt-sand-2); background: rgba(194,180,136,.08); }
html.demo-loteo .ficha { position: sticky; top: calc(var(--lt-nav-h) + 1rem); border: 1px solid var(--lt-line); background: var(--lt-bg-2); border-radius: 6px; padding: 1.4rem; display: grid; gap: 1.1rem; }
html.demo-loteo .ficha .top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
html.demo-loteo .ficha .mz { font-family: var(--lt-display); font-size: 3.2rem; font-weight: 300; line-height: 1; letter-spacing: .01em; }
html.demo-loteo .ficha dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem; }
html.demo-loteo .ficha dt { color: var(--lt-fg-3); font-weight: 300; }
html.demo-loteo .ficha dd { margin: 0; font-variant-numeric: tabular-nums; }
html.demo-loteo .ficha .mono { margin: 0; }
html.demo-loteo .cta-row { display: flex; gap: .6rem; flex-wrap: wrap; }
html.demo-loteo .state i { display: none; }
html.demo-loteo .state[data-e="disp"] { color: var(--lt-disp); }
html.demo-loteo .note { font-size: .78rem; color: var(--lt-fg-3); border-left: 2px solid var(--lt-line-2); padding-left: .8rem; margin: 0; }
@media (max-width: 900px) { html.demo-loteo .lt-plano .board { grid-template-columns: 1fr; } html.demo-loteo .ficha { position: static; } }
@media (max-width: 700px) { html.demo-loteo .lt-plano .map { aspect-ratio: auto; overflow: auto; -webkit-overflow-scrolling: touch; } html.demo-loteo .lt-plano .map svg { width: 150%; height: auto; } html.demo-loteo .map-tools { position: sticky; bottom: .6rem; right: 0; display: flex; justify-content: flex-end; padding-right: .6rem; pointer-events: none; } html.demo-loteo .map-tools .chip { pointer-events: auto; color: var(--lt-sand-2); border-color: var(--lt-sand); } html.demo-loteo .lt-plano .map.is-zoom { overflow: auto; } }

/* Lista de lotes (/lotes) y ficha (/lotes/{code}) */
html.demo-loteo .lt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.6rem; }
html.demo-loteo .lt-card { border: 1px solid var(--lt-line); border-radius: 6px; padding: 1.2rem 1.2rem 1.1rem; background: var(--lt-bg-2); display: grid; gap: .5rem; align-content: start; color: inherit; transition: border-color .2s; }
html.demo-loteo .lt-card:hover { border-color: var(--lt-sand); color: inherit; }
html.demo-loteo .lt-card .code { font-family: var(--lt-display); font-size: 2.4rem; font-weight: 300; line-height: 1; }
html.demo-loteo .lt-card .m2 { font-family: var(--lt-mono); font-size: .78rem; color: var(--lt-sand-2); letter-spacing: .04em; }
html.demo-loteo .lt-card .ub { font-size: .86rem; color: var(--lt-fg-2); }
html.demo-loteo .lt-card .state { display: none; } /* todas las tarjetas públicas están a la venta: la etiqueta no informa */
html.demo-loteo .lt-card[hidden] { display: none; }
html.demo-loteo .lt-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
html.demo-loteo .lt-filters .chip { background: transparent; color: var(--lt-fg-2); border-color: var(--lt-line-2); cursor: pointer; }
html.demo-loteo .lt-filters .chip:hover { border-color: var(--lt-sand); color: var(--lt-sand-2); }
html.demo-loteo .lt-filters .chip.is-on { color: var(--lt-sand-2); border-color: var(--lt-sand); }
html.demo-loteo .lt-empty { color: var(--lt-fg-3); margin-top: 1.5rem; }
html.demo-loteo .lt-ficha-page { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; align-items: start; }
html.demo-loteo .lt-ficha-page .big { font-family: var(--lt-display); font-size: clamp(4rem, 10vw, 7rem); font-weight: 300; line-height: .95; }
html.demo-loteo .lt-ficha-page dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.4rem; margin: 1.6rem 0 0; font-size: 1rem; border-top: 1px solid var(--lt-line); padding-top: 1.2rem; }
html.demo-loteo .lt-ficha-page dt { color: var(--lt-fg-3); }
html.demo-loteo .lt-ficha-page dd { margin: 0; }
html.demo-loteo .lt-ficha-page .lt-plano .ficha { display: none; }
html.demo-loteo .lt-ficha-page .lt-plano .board { grid-template-columns: 1fr; margin-top: 0; }
html.demo-loteo .lt-ficha-page .lt-plano .legend { margin-top: .8rem; }
html.demo-loteo .lt-ficha-page > div:first-child { position: sticky; top: calc(var(--lt-nav-h) + 1.5rem); }
@media (max-width: 860px) { html.demo-loteo .lt-ficha-page > div:first-child { position: static; } }
@media (max-width: 1000px) { html.demo-loteo .lt-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { html.demo-loteo .lt-ficha-page { grid-template-columns: 1fr; } }
@media (max-width: 700px) { html.demo-loteo .lt-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { html.demo-loteo .lt-card { padding: .9rem .9rem .8rem; } html.demo-loteo .lt-card .code { font-size: 1.9rem; } }

/* Ubicación */
html.demo-loteo .ubic .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-top: 2.5rem; }
html.demo-loteo .ubic figure { margin: 0; border: 1px solid var(--lt-line); border-radius: 6px; overflow: hidden; background: #DCE5D4; }
html.demo-loteo .ubic figure img { width: 100%; height: auto; }
html.demo-loteo .ubic figcaption, html.demo-loteo .cap { font-family: var(--lt-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-fg-3); padding: .6rem .8rem; background: var(--lt-bg-2); }
html.demo-loteo .times { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lt-line); border: 1px solid var(--lt-line); border-radius: 6px; overflow: hidden; }
html.demo-loteo .times div { background: var(--lt-bg); padding: 1.2rem 1.1rem; }
html.demo-loteo .times b { font-family: var(--lt-display); font-weight: 300; font-size: 2.4rem; line-height: 1; display: block; }
html.demo-loteo .times b small { font-size: .4em; color: var(--lt-fg-2); }
html.demo-loteo .times span { display: block; font-size: .84rem; color: var(--lt-fg-2); margin-top: .35rem; }
html.demo-loteo .ubic .addr { margin-top: 1.4rem; font-size: .95rem; color: var(--lt-fg-2); }
html.demo-loteo .ubic .addr b { color: var(--lt-fg); font-weight: 500; }
html.demo-loteo .lt-map-embed { margin-top: 2.5rem; border: 1px solid var(--lt-line); border-radius: 6px; overflow: hidden; background: var(--lt-bg-2); }
html.demo-loteo .lt-map-embed iframe { display: block; width: 100%; height: 460px; border: 0; filter: grayscale(.2) contrast(1.05); }
html.demo-loteo .lt-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; margin-top: 2.5rem; }
html.demo-loteo .lt-refs div { border-top: 1px solid var(--lt-line-2); padding-top: 1rem; }
html.demo-loteo .lt-refs b { display: block; font-family: var(--lt-display); font-size: 1.4rem; font-weight: 400; }
html.demo-loteo .lt-refs span { font-size: .86rem; color: var(--lt-fg-2); }
@media (max-width: 860px) { html.demo-loteo .ubic .grid { grid-template-columns: 1fr; } html.demo-loteo .lt-refs { grid-template-columns: 1fr 1fr; } html.demo-loteo .lt-map-embed iframe { height: 340px; } }

/* La vida adentro */
html.demo-loteo .vida { background: var(--lt-bg-2); border-block: 1px solid var(--lt-line); }
html.demo-loteo .masonry { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: .6rem; margin-top: 2.5rem; }
html.demo-loteo .masonry figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: var(--lt-bg-3); }
html.demo-loteo .masonry figure img, html.demo-loteo .masonry figure video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
html.demo-loteo .masonry figure:hover img { transform: scale(1.04); }
html.demo-loteo .masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem; background: linear-gradient(180deg, transparent, rgba(10,20,16,.85)); font-size: .8rem; }
html.demo-loteo .masonry figcaption small { display: block; font-family: var(--lt-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-fg-3); margin-top: .2rem; }
html.demo-loteo .m-a { grid-column: span 4; grid-row: span 3; }
html.demo-loteo .m-b, html.demo-loteo .m-d, html.demo-loteo .m-e, html.demo-loteo .m-f { grid-column: span 2; grid-row: span 2; }
html.demo-loteo .m-c { grid-column: span 2; grid-row: span 1; }
html.demo-loteo .masonry figcaption small { display: none; }
@media (max-width: 760px) { html.demo-loteo .masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; } html.demo-loteo .m-a { grid-column: span 2; grid-row: span 2; } html.demo-loteo .m-b, html.demo-loteo .m-c, html.demo-loteo .m-d, html.demo-loteo .m-e, html.demo-loteo .m-f { grid-column: span 1; grid-row: span 1; } html.demo-loteo .masonry figure:last-child:nth-child(even) { grid-column: span 2; } }
html.demo-loteo .amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem 2rem; margin-top: 2.8rem; }
html.demo-loteo .amen div { border-top: 1px solid var(--lt-line-2); padding-top: 1rem; }
html.demo-loteo .amen b { display: block; font-family: var(--lt-display); font-size: 1.5rem; font-weight: 400; }
html.demo-loteo .amen span { font-size: .86rem; color: var(--lt-fg-2); }
@media (max-width: 760px) { html.demo-loteo .amen { grid-template-columns: 1fr 1fr; } }

/* Cronología */
html.demo-loteo .timeline { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--lt-line); }
html.demo-loteo .ev { display: grid; grid-template-columns: 120px 1fr 1.1fr; gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--lt-line); align-items: center; }
html.demo-loteo .ev .y { font-family: var(--lt-display); font-size: 2.6rem; font-weight: 300; line-height: 1; }
html.demo-loteo .ev h3 { font-size: 1.35rem; margin: 0; }
html.demo-loteo .ev p { color: var(--lt-fg-2); font-size: .92rem; margin: .4rem 0 0; }
html.demo-loteo .ev .exp { font-family: var(--lt-mono); font-size: .66rem; letter-spacing: .08em; color: var(--lt-sand); margin-top: .6rem; display: block; text-transform: uppercase; }
html.demo-loteo .ev .exp a { color: var(--lt-sand); border-bottom: 1px dotted currentColor; }
html.demo-loteo .ev .media { border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--lt-bg-3); position: relative; max-width: 100%; }
html.demo-loteo .ev .media video, html.demo-loteo .ev .media img { width: 100%; height: 100%; object-fit: cover; }
html.demo-loteo .ev .media .cap { position: absolute; left: 0; bottom: 0; background: rgba(10,20,16,.7); }
@media (max-width: 860px) { html.demo-loteo .ev { grid-template-columns: 1fr; gap: 1rem; } html.demo-loteo .ev .y { font-size: 2rem; } html.demo-loteo .ev .media { aspect-ratio: 21 / 9; } }

/* Cuatro pasos y caminos */
html.demo-loteo .caminos { background: var(--lt-bg-2); border-block: 1px solid var(--lt-line); }
html.demo-loteo .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--lt-line); border: 1px solid var(--lt-line); border-radius: 6px; overflow: hidden; margin-top: 2.5rem; }
html.demo-loteo .steps div { background: var(--lt-bg-2); padding: 1.4rem 1.2rem; }
html.demo-loteo .steps b { font-family: var(--lt-display); font-size: 1.6rem; font-weight: 400; display: block; }
html.demo-loteo .steps .k { font-family: var(--lt-mono); font-size: .64rem; letter-spacing: .12em; color: var(--lt-sand); text-transform: uppercase; }
html.demo-loteo .steps p { font-size: .86rem; color: var(--lt-fg-2); margin: .4rem 0 0; }
html.demo-loteo .paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
html.demo-loteo .path { border: 1px solid var(--lt-line); border-radius: 6px; padding: 1.6rem 1.4rem; background: var(--lt-bg); display: grid; gap: .8rem; align-content: start; }
html.demo-loteo .path h3 { font-size: 1.9rem; margin: 0; }
html.demo-loteo .path p { color: var(--lt-fg-2); font-size: .92rem; margin: 0; }
html.demo-loteo .path ul { margin: 0; padding-left: 1rem; color: var(--lt-fg-2); font-size: .86rem; display: grid; gap: .3rem; }
html.demo-loteo .path .btn-ghost, html.demo-loteo .path .btn-chrome { justify-self: start; margin-top: .4rem; }
@media (max-width: 860px) { html.demo-loteo .steps, html.demo-loteo .paths { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { html.demo-loteo .steps, html.demo-loteo .paths { grid-template-columns: 1fr; } }

/* Reglamento en cifras */
html.demo-loteo .reglas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 2rem; margin-top: 2.5rem; }
html.demo-loteo .regla { border-top: 1px solid var(--lt-line-2); padding-top: 1rem; }
html.demo-loteo .regla b { display: block; font-family: var(--lt-display); font-size: 2.6rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
html.demo-loteo .regla b small { font-size: .4em; color: var(--lt-fg-2); }
html.demo-loteo .regla span { display: block; font-size: .84rem; color: var(--lt-fg-2); margin-top: .4rem; }
@media (max-width: 860px) { html.demo-loteo .reglas { grid-template-columns: 1fr 1fr; } }

/* Preguntas */
html.demo-loteo .faq { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--lt-line); max-width: 860px; }
html.demo-loteo .faq details { border-bottom: 1px solid var(--lt-line); }
html.demo-loteo .faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-family: var(--lt-display); font-size: 1.45rem; display: flex; justify-content: space-between; gap: 1rem; }
html.demo-loteo .faq summary::-webkit-details-marker { display: none; }
html.demo-loteo .faq summary::after { content: "+"; color: var(--lt-sand); font-family: var(--lt-mono); }
html.demo-loteo .faq details[open] summary::after { content: "–"; }
html.demo-loteo .faq .a { padding: 0 0 1.2rem; color: var(--lt-fg-2); max-width: 62ch; font-size: .95rem; }
html.demo-loteo .faq .a p:last-child { margin-bottom: 0; }

/* Contacto */
html.demo-loteo .contacto { background: var(--lt-green-2); border-top: 1px solid var(--lt-line); }
html.demo-loteo .contacto .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
html.demo-loteo .contacto .big { font-family: var(--lt-display); font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; margin-top: 1rem; }
html.demo-loteo .contacto .big em { color: var(--lt-sand-2); }
html.demo-loteo .contacto .lines { margin-top: 1.5rem; display: grid; gap: .6rem; font-size: .98rem; }
html.demo-loteo .contacto .lines b { font-weight: 500; }
html.demo-loteo .contacto .lines .mono { text-transform: none; font-size: .9rem; color: var(--lt-fg); }
html.demo-loteo .contacto .lines a { color: var(--lt-fg); }
html.demo-loteo .form { display: grid; gap: .8rem; border: 1px solid var(--lt-line-2); padding: 1.5rem; border-radius: 6px; background: rgba(10,20,16,.5); }
html.demo-loteo .form label { display: grid; gap: .35rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-fg-2); }
html.demo-loteo .form input, html.demo-loteo .form select, html.demo-loteo .form textarea { font: inherit; color: var(--lt-fg); background: var(--lt-bg); border: 1px solid var(--lt-line-2); border-radius: 4px; padding: .7rem .8rem; width: 100%; min-width: 0; }
html.demo-loteo .form input:focus, html.demo-loteo .form select:focus, html.demo-loteo .form textarea:focus { border-color: var(--lt-sand); outline: none; }
html.demo-loteo .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
html.demo-loteo .form .ok { color: var(--lt-sand-2); font-size: .9rem; margin: 0; }
html.demo-loteo .form .err { color: #E0A458; font-size: .85rem; margin: 0; }
html.demo-loteo .form .err ul { margin: 0; padding-left: 1rem; }
html.demo-loteo .form .btn-chrome { justify-self: start; }
html.demo-loteo .form .fine { font-size: .72rem; color: var(--lt-fg-3); margin: 0; }
@media (max-width: 860px) { html.demo-loteo .contacto .grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { html.demo-loteo .form .row { grid-template-columns: 1fr; } }

/* Documentos descargables (reglamento, expedientes) */
html.demo-loteo .lt-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
html.demo-loteo .lt-doc { border: 1px solid var(--lt-line); border-radius: 6px; padding: 1.1rem 1.2rem; background: var(--lt-bg-2); display: grid; gap: .3rem; color: inherit; }
html.demo-loteo .lt-doc:hover { border-color: var(--lt-sand); color: inherit; }
html.demo-loteo .lt-doc b { font-family: var(--lt-display); font-size: 1.3rem; font-weight: 400; }
html.demo-loteo .lt-doc span { font-family: var(--lt-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-sand); }
@media (max-width: 760px) { html.demo-loteo .lt-docs { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    html.demo-loteo .hero .cue i { animation: none; transform: none; }
    html.demo-loteo .masonry figure img { transition: none; }
    html.demo-loteo .hero__media img { animation: none; }
}
/* Plano en modo compacto (ficha de lote): sin chip de «actualizado» ni nota */
html.demo-loteo .lt-plano.is-compact .note, html.demo-loteo .lt-plano.is-compact .lt-vender { display: none; }
html.demo-loteo .lt-ficha-page dt { font-weight: 300; }

/* Cartas-link: cada bloque vive en una sola página; en las demás, una carta que lleva ahí */
html.demo-loteo .cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
html.demo-loteo .carta { border: 1px solid var(--lt-line); border-radius: 6px; padding: 1.5rem 1.4rem; background: var(--lt-bg-2); display: grid; gap: .6rem; align-content: start; color: inherit; transition: border-color .2s; }
html.demo-loteo .carta:hover { border-color: var(--lt-sand); color: inherit; }
html.demo-loteo .carta h3 { font-size: 1.7rem; margin: 0; }
html.demo-loteo .carta p { color: var(--lt-fg-2); font-size: .92rem; margin: 0; }
html.demo-loteo .carta .go { font-family: var(--lt-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lt-sand); margin-top: .4rem; }
html.demo-loteo .carta .go::after { content: " →"; }
html.demo-loteo section.act.cartas-act { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
@media (max-width: 860px) { html.demo-loteo .cartas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { html.demo-loteo .cartas { grid-template-columns: 1fr; } }

/* Contacto breve (interiores): sin formulario, dos botones */
html.demo-loteo .contacto.is-slim .grid { grid-template-columns: 1fr; }
html.demo-loteo .contacto.is-slim .big { margin-top: .6rem; }
html.demo-loteo .contacto.is-slim .ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
html.demo-loteo .contacto.is-slim .lines { margin-top: 1.2rem; }

/* WhatsApp flotante de la plataforma: alineado con el fab del asistente */
@media (max-width: 760px) { html.demo-loteo .float-wsp { width: 50px; height: 50px; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); right: 1.2rem; } }

/* Novedades (blog) con el sistema del demo */
html.demo-loteo .lt-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
html.demo-loteo .lt-post { border: 1px solid var(--lt-line); border-radius: 6px; background: var(--lt-bg-2); overflow: hidden; display: grid; grid-template-rows: auto 1fr; color: inherit; transition: border-color .2s; }
html.demo-loteo .lt-post:hover { border-color: var(--lt-sand); color: inherit; }
html.demo-loteo .lt-post figure { margin: 0; aspect-ratio: 16 / 9; background: var(--lt-bg-3); overflow: hidden; }
html.demo-loteo .lt-post figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
html.demo-loteo .lt-post:hover figure img { transform: scale(1.04); }
html.demo-loteo .lt-post__body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .5rem; align-content: start; }
html.demo-loteo .lt-post__body h3 { font-size: 1.45rem; margin: 0; }
html.demo-loteo .lt-post__body p { margin: 0; color: var(--lt-fg-2); font-size: .9rem; }
html.demo-loteo .lt-post__body .mono { color: var(--lt-sand); }
html.demo-loteo .lt-pager { display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 2rem; }
html.demo-loteo .lt-post__cover { margin: 0 0 2rem; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--lt-bg-3); max-width: 70ch; }
html.demo-loteo .lt-post__cover img { width: 100%; height: 100%; object-fit: cover; }
html.demo-loteo .lt-post__content { max-width: 70ch; font-size: 1.05rem; line-height: 1.75; color: var(--lt-fg); }
html.demo-loteo .lt-post__content h2, html.demo-loteo .lt-post__content h3 { margin: 1.6em 0 .5em; }
html.demo-loteo .lt-post__content h2 { font-size: 2rem; } html.demo-loteo .lt-post__content h3 { font-size: 1.5rem; }
html.demo-loteo .lt-post__content p, html.demo-loteo .lt-post__content li { color: var(--lt-fg-2); }
html.demo-loteo .lt-post__content a { color: var(--lt-sand-2); text-decoration: underline; text-underline-offset: 3px; }
html.demo-loteo .lt-post__content img, html.demo-loteo .lt-post__content video, html.demo-loteo .lt-post__content iframe { max-width: 100%; border-radius: 6px; margin: 1.2rem 0; }
html.demo-loteo .lt-post__content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
html.demo-loteo .lt-post__content blockquote { border-left: 2px solid var(--lt-sand); padding: .2rem 0 .2rem 1rem; margin: 1.4rem 0; color: var(--lt-fg-2); font-style: italic; }
html.demo-loteo .lt-post__content ul, html.demo-loteo .lt-post__content ol { padding-left: 1.2rem; }
@media (max-width: 1000px) { html.demo-loteo .lt-posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { html.demo-loteo .lt-posts { grid-template-columns: 1fr; } }
/* Página de preguntas: chips de temas como enlaces */
html.demo-loteo .lt-filters a.chip { text-decoration: none; }
html.demo-loteo #p-faq .faq { max-width: 860px; }