/* ═══════════════════════════════════════════════════════════════════════════
   SIA · tema "Qamarero" para la home (12/9/2026, pedido del dueño: la home con
   el mismo estilo que los demos, que a su vez copian qamarero.com, "con unos
   toques más de diseño"). Se carga DESPUÉS de style.css y la pisa por cascada:
   página blanca, tarjetas negras redondeadas con brillo naranja para los
   momentos fuertes (hero, la noche, la voz, el cierre), naranja #FF592F como
   único acento, gris #F5F5F5 / rosa #FAE9E8 para las tarjetas, DM Sans 700 en
   los títulos y Space Mono en las etiquetas. Los teléfonos siguen oscuros.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */
:root{
  --gold:#FF592F; --gold-hi:#FF8B6C; --gold-lo:#E0431F;
  --p100:#212121; --p66:#616161; --p45:#757575; --p30:#9E9E9E;
  --line:#EBEBEB; --line-2:#E0E0E0;
  --paper:#FAFAFA; --paper-2:#FFFFFF; --paper-ink:#111119;
  --r1:12px; --r2:24px; --r3:32px;
  --sh-card:none; --sh-float:0 24px 64px rgba(0,0,0,.38);
  --qn:#1A1A1D; --qn2:#111119; --qg:#F5F5F5; --qg2:#FAFAFA; --qp:#FAE9E8; --qb:#E0E0E0;
  --qglow:radial-gradient(80% 100% at 100% 70%,rgba(255,77,26,.72),transparent 62%);
  --qr:40px; --qm:16px;
}
/* los contextos que siguen oscuros recuperan la tinta clara */
.hero,.noche,.voz,.cierre,.phone,.isla,.intro{
  --p100:#FFFFFF; --p66:rgba(255,255,255,.74); --p45:rgba(255,255,255,.54); --p30:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18); color:#fff}

/* ── 2 · base y tipografía ──────────────────────────────────────────────── */
body{background:#fff;color:#212121;font-family:"DM Sans",-apple-system,"Segoe UI",system-ui,sans-serif;letter-spacing:0;font-size:16px;line-height:1.5}
.grain{display:none}
.d0,.d1,.d2,h3{font-weight:700;letter-spacing:-.02em}
.d0{font-size:clamp(40px,5.4vw,66px);line-height:1.06}
.d1{font-size:clamp(32px,3.6vw,48px);line-height:1.1}
.d2{font-size:clamp(24px,2.6vw,34px)}
h3{font-size:21px}
.d0 em,.d1 em,.d2 em{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit;color:var(--gold)}
.serif{font-family:inherit;font-style:normal;font-weight:700;letter-spacing:-.01em}
.lead{color:var(--p66);font-size:clamp(17px,1.25vw,20px)}
.body{color:var(--p66)}
.cap{color:var(--p45)}
.cap a{color:var(--gold);border-bottom-color:rgba(255,89,47,.4)}
.eyebrow,.mono{font-family:"Space Mono",ui-monospace,Menlo,monospace}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.mono{font-size:11px;letter-spacing:.1em;color:var(--p45)}
.mono.gold,.gold{color:var(--gold)}
.foot-tag,.paper .foot-tag{color:var(--p45)}
.ic.gold{color:var(--gold)}

/* botones: esquinas 12px y negrita, como los de Qamarero */
.btn{border-radius:12px;font-weight:700;font-size:15px;letter-spacing:0}
.btn--gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn--gold:hover{filter:brightness(1.05)}
.btn--ghost{background:#0D0D12;color:#fff;border-color:#0D0D12}
.btn--ghost:hover{background:#26262B;border-color:#26262B}
.hero .btn--ghost,.voz .btn--ghost,.cierre .btn--ghost{background:#fff;color:#0D0D12;border-color:#fff}
.hero .btn--ghost:hover,.voz .btn--ghost:hover,.cierre .btn--ghost:hover{background:var(--qg);border-color:var(--qg)}
.chip{border-color:var(--qb);color:var(--p66)}
.chip--gold,.paper .chip--gold{background:var(--qp);border-color:transparent;color:var(--gold-lo)}
.paper .chip{background:var(--qg);border-color:transparent;color:var(--p66)}
.dotg{background:var(--gold);box-shadow:0 0 0 3px rgba(255,89,47,.2)}
:focus-visible{outline-color:var(--gold)}
.skip{background:var(--gold);color:#fff}

/* ── 3 · nav: barra blanca, CTA negro ───────────────────────────────────── */
.nav::before{background:rgba(255,255,255,.88);opacity:1}
.nav.is-stuck{border-bottom:1px solid var(--line)}
.brand{color:#212121}
.nav nav a{color:#424242;font-weight:500}
.nav nav a:hover{color:#212121}
.nav .btn--gold{background:#0D0D12;color:#fff;border-color:#0D0D12}
.nav .btn--gold:hover{background:#26262B;filter:none;transform:none}
.nav .btn--ghost{background:var(--qg);color:#0D0D12;border-color:var(--qg)}
.nav .btn--ghost:hover{background:#EBEBEB;border-color:#EBEBEB}
.prog{background:var(--gold)}

/* ── 4 · orbes e intro ──────────────────────────────────────────────────── */
.orb .ring{border-color:rgba(255,89,47,.45)}
.orb--56{box-shadow:0 8px 20px rgba(0,0,0,.25)}
.orb--96{box-shadow:0 16px 32px rgba(0,0,0,.35),0 0 60px rgba(255,89,47,.25)}
.orb--120{box-shadow:0 16px 32px rgba(0,0,0,.35),0 0 80px rgba(255,89,47,.25)}
.io .core{box-shadow:0 0 160px rgba(255,89,47,.3),0 0 0 1px rgba(255,89,47,.35)}
.io .ring{border-color:rgba(255,89,47,.55)}
.iw span{font-family:"Space Mono",ui-monospace,Menlo,monospace}

/* ── 5 · hero: la tarjeta negra redondeada con el brillo naranja ────────── */
.hero{min-height:auto;margin:calc(var(--nav) + 12px) var(--qm) 0;border-radius:var(--qr);background:var(--qn);overflow:hidden;padding:72px 0 76px}
.hero-bg .halo{background:var(--qglow)}
.orb--hero .core{box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 90px rgba(255,89,47,.35),0 0 0 1px rgba(255,89,47,.4)}
.orb--hero .ring{border-color:rgba(255,89,47,.5)}
.tocar{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#212121;padding:9px 16px 9px 13px;border-radius:999px;font-weight:600;font-size:14px;margin-bottom:26px}
.tocar::before{background:var(--gold);box-shadow:0 0 0 0 rgba(255,89,47,.55)}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(255,89,47,.5)}70%{box-shadow:0 0 0 11px rgba(255,89,47,0)}100%{box-shadow:0 0 0 0 rgba(255,89,47,0)}}
.hero .lead{color:rgba(255,255,255,.76)}
.hint{color:rgba(255,255,255,.55);font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.08em}

/* ── 6 · ticker: fichas grises y rosa sobre blanco ──────────────────────── */
.ticker{background:#fff;border:0;padding:44px 0 8px}
.ticker li{background:var(--qg);border-color:transparent;color:#424242;font-weight:500;font-size:13.5px}
.ticker li.acc{background:var(--qp);color:var(--gold-lo);border-color:transparent}
.ticker li:hover{color:#212121}
.ticker-tag{color:var(--gold)}

/* ── 7 · los cuatro datos: tarjetas blancas con borde fino ──────────────── */
.facts{padding:40px 0 24px}
.facts-g{gap:14px}
.fact{background:#fff;border:1px solid #E6E6E6;border-radius:24px;padding:22px 22px 24px}
.fact::before,.fact::after{display:none}
.fk{color:var(--gold)}
.fn{color:#212121;font-weight:700}
.fn em{font-family:inherit;font-style:normal;font-weight:700;color:var(--gold)}
.fm i{background:#EBEBEB}
.fm i.on{background:var(--gold)}
.fd{color:var(--p66);padding-right:0}

/* ── 8 · la noche: tarjeta negra, el brillo cálido pasa a naranja ───────── */
.noche{margin:0 var(--qm)}
.noche .stage{border-radius:var(--qr);overflow:hidden}
.noche-bg{background:var(--qn);border-radius:var(--qr)}
.noche-bg .warm{background:radial-gradient(40% 46% at 78% 46%,rgba(255,77,26,.28),transparent 70%)}
.noche.lit .noche-bg .warm{background:radial-gradient(40% 46% at 78% 46%,rgba(255,89,47,.45),transparent 70%)}
.cface{font-weight:700}
.ctrack{background:rgba(255,255,255,.14)}
.ctrack i,.noche.lit .ctrack i{background:linear-gradient(90deg,rgba(255,89,47,.5),var(--gold))}
.msg{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-radius:16px}
.msg .st i{background:rgba(255,255,255,.3)}
.msg.ok{border-color:rgba(255,89,47,.55);background:rgba(255,89,47,.12)}
.msg.ok .st i{box-shadow:0 0 0 3px rgba(255,89,47,.25)}
.lit-block .orb{box-shadow:0 16px 32px rgba(0,0,0,.4),0 0 60px rgba(255,89,47,.3)}

/* ── 9 · la regla ───────────────────────────────────────────────────────── */
.regla{background:#fff;padding:80px 0}
.regla .q .serif{color:#212121;font-size:clamp(26px,3vw,40px);line-height:1.2}
.regla .rule{height:3px;border-radius:2px;background:var(--gold)}
.regla small{color:var(--p45)}
.regla .side{color:var(--p30)}

/* ── 10 · "papel" (la ficha y las dudas): contenedor gris redondeado ─────── */
.paper{background:var(--qg2);color:#212121;margin:0 var(--qm);border-radius:var(--qr)}
.paper::before,.brass{display:none}
.paper .eyebrow,.paper .d1 em{color:var(--gold)}
.paper .body,.paper .lead{color:var(--p66)}
.paper .cap{color:var(--p45)}
.isla{background:var(--qn2);color:#fff;border-radius:24px;position:relative;overflow:hidden;box-shadow:0 18px 44px rgba(17,17,25,.14)}
.isla>*{position:relative;z-index:1}
.isla::after{content:"";position:absolute;right:-100px;bottom:-100px;width:210px;height:210px;border-radius:50%;background:var(--gold);z-index:0}
.isla p{color:rgba(255,255,255,.76)}
.isla .btn--gold{background:#fff;color:#0D0D12;border-color:#fff}
.ledger{background:#fff;border:1px solid var(--qb);border-radius:24px;box-shadow:none}
.lh{border-bottom-color:var(--line)}
.lh .ini{border:2px solid var(--gold);color:var(--gold);font-weight:700;font-size:17px}
.lh small{color:var(--p45)}
.sello{border:0;background:var(--qp);color:var(--gold-lo);transform:none;animation:none;border-radius:999px;font-weight:700;letter-spacing:.06em;font-size:10px}
.tabs{border-bottom-color:var(--line)}
.tabs [role=tab]{color:var(--p45);font-weight:500}
.tabs [role=tab].on{color:#212121;font-weight:600}
.tabs .ul{background:var(--gold);height:3px}
.rows .rw{border-bottom-color:var(--line)}
.rows .k{color:var(--p45)}
.rows .v{color:#212121}
.paper .rows .rw:hover{background:var(--qg)}
.lf{color:var(--p45);border-top:1px solid var(--line)}

/* ── 11 · la conversación y el aviso ────────────────────────────────────── */
.charla{background:#fff}
.charla::before{display:none}
.micro li{color:var(--p66)}
.micro li i{border-color:var(--qb)}
.micro li.on{color:#212121}
.micro li.on i{box-shadow:0 0 0 4px rgba(255,89,47,.18)}
.phone{border-color:#111119;box-shadow:0 24px 64px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06)}
.phone .lock{background:radial-gradient(90% 60% at 50% 0%,rgba(255,89,47,.28),transparent 70%)}
.code{color:var(--gold-hi);border-color:rgba(255,89,47,.5)}
.code--btn:hover{background:rgba(255,89,47,.15)}
.code--btn.copied{background:var(--gold);color:#fff}
.notif .nbtn button:first-child,.notif .nbtn i:first-child{background:var(--gold);color:#fff}
.aviso{background:var(--qg2);margin:0 var(--qm);border-radius:var(--qr)}
.aviso::before{display:none}
.mayor div{border-bottom-color:var(--line)}
.mayor dt{color:var(--gold);font-weight:700}
.mayor dd{color:var(--p66)}

/* ── 12 · bento: tarjetas gris claro con piezas blancas adentro ──────────── */
.bento{background:#fff}
.tile{background:var(--qg);border:0;box-shadow:none;border-radius:24px;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s}
.tile::before,.tile::after{display:none}
.tile:hover{transform:translateY(-3px);background:#F0F0F0}
.tile h3{color:#212121}
.tile p{color:var(--p66)}
.mini-b.u{background:#fff;border:1px solid var(--qb);color:#212121}
.mini-b.s{background:var(--qp);border:0;color:#212121}
.wave i{background:var(--gold)}
.vis-reloj b{color:#212121}
.vis-reloj .days i{border-color:rgba(255,89,47,.5);color:var(--gold)}
.vis-idioma .lang span{border-color:var(--qb);color:var(--p45)}
.vis-idioma .lang span.on{background:var(--gold);border-color:var(--gold);color:#fff}
.vis-deriva .to span{border-color:rgba(255,89,47,.5);color:var(--gold-lo);background:#fff}
.vis-deriva .ic{color:var(--gold)}
.vis-cambio .rw{border-bottom-color:var(--qb)}
.vis-cambio .k{color:var(--p45)}
.vis-cambio s{color:var(--p30)}
.browser--xs{background:#fff;border:1px solid var(--qb)}
.browser--xs .bar{border-bottom:1px solid var(--line)}
.browser--xs .bar i{background:var(--qb)}
.browser--xs .url{color:var(--p45)}
.browser--xs .ln{background:#EBEBEB}
.browser--xs .blocks i{background:var(--qg)}
.browser--xs .fab{box-shadow:0 0 0 2px rgba(255,89,47,.5),0 8px 18px rgba(0,0,0,.2)}
.vis-pedido li{border-bottom-color:var(--qb);color:var(--p66)}
.vis-pedido li b{color:#212121}
.vis-pedido .ic{color:var(--gold)}
.vis-datos .ic.big{color:var(--gold)}
.vis-datos .mono{color:var(--p45)}

/* ── 13 · voces: la banda naranja con tarjetas rosa, como el muro de reseñas ─ */
.voces{margin:0 var(--qm);border-radius:var(--qr);border:0;padding:72px 0;
  background:radial-gradient(72% 88% at 0% 12%,#FF714C 0%,#F4532B 100%)}
.voces blockquote{border:0;background:var(--qp);border-radius:32px;padding:26px 26px 22px;box-shadow:0 14px 34px rgba(96,22,8,.14);display:flex;flex-direction:column;justify-content:space-between}
.voces blockquote::before{content:"★★★★★";display:block;color:var(--gold);letter-spacing:.12em;font-size:13px;margin-bottom:12px}
.voces .serif{color:#212121;font-size:19px;font-weight:600;line-height:1.4}
.voces footer{color:var(--gold-lo);font-weight:700}

/* ── 14 · rubros ────────────────────────────────────────────────────────── */
.rubros{background:#fff}
.panel-tag{color:var(--gold)}
.panel{background:#fff;border:1px solid var(--qb);box-shadow:none;border-radius:32px}
.pl [role=tab]{color:var(--p66);font-weight:500}
.pl [role=tab].on{color:#212121;background:var(--qp);font-weight:600}
.pl [role=tab].on .ic{color:var(--gold)}
.pl .ul{background:var(--gold);width:3px}
.pr{border-left-color:var(--line);background:var(--qg2)}
.pr .mono{color:var(--gold)}
.rows--dark .rw{border-bottom-color:var(--line)}
.rows--dark .k{color:var(--p45)}
.rows--dark .v{color:#212121}
.who small{color:var(--p45)}
.rcard{background:var(--qg);border:0;border-radius:24px}
.rcard .who .ic{color:var(--gold)}
.dots i{background:var(--qb)}
.dots i.on{background:var(--gold)}

/* ── 15 · sin / con ─────────────────────────────────────────────────────── */
.sincon{background:#fff}
.sc-g{background:var(--qg2);border:1px solid var(--line);border-radius:32px;padding:10px 28px 14px}
.sc-g::before{background:var(--qb)}
.sc-h span{color:var(--p45)}
.sc-h span.gold{color:var(--gold)}
.sc-r{border-top-color:var(--line)}
.sc-r p{color:var(--p45)}
.sc-r p+p{color:#212121;font-weight:500}
.sc-r .ic{color:var(--gold)}

/* ── 16 · cómo se enciende ──────────────────────────────────────────────── */
.pasos{background:#fff;border:0}
.rail::before{background:var(--qb)}
.disc{background:var(--gold);color:#fff;border:0;font-weight:700;font-family:inherit;font-style:normal;box-shadow:0 10px 24px rgba(255,89,47,.3)}
.est>.mono{color:var(--gold)}
.est .card{background:var(--qg);border:0;box-shadow:none;border-radius:24px}
.est .vis{background:#fff;border:1px solid #E6E6E6;border-radius:16px}
.est .card h3{color:#212121}
.est .card p{color:var(--p66)}
.vis-charla .tr{color:var(--p45)}
.vis-arma .rw{color:#212121}
.vis-arma .ic{color:var(--gold)}
.vis-enciende .cel{color:#212121;border-color:var(--qb);background:#fff}

/* ── 17 · dudas: filas blancas redondeadas ──────────────────────────────── */
.acc{border:0;display:flex;flex-direction:column;gap:8px}
.qa{border:0;background:#fff;border-radius:16px;padding:0 20px;border:1px solid var(--line)}
.qa button{padding:18px 0;font-weight:700;color:#212121}
.qa .n{color:var(--gold)}
.qa button i{border-color:var(--qb)}
.qa button i::before,.qa button i::after{background:#212121}
.qa.open button i{background:var(--gold);border-color:var(--gold)}
.qa.open button i::before,.qa.open button i::after{background:#fff}
.qa .ans p{color:var(--p66)}

/* ── 18 · la voz y el cierre: tarjetas negras ───────────────────────────── */
.voz{margin:0 var(--qm);border-radius:var(--qr);background:var(--qn2);overflow:hidden}
.voz::before{background:radial-gradient(60% 50% at 50% 62%,rgba(255,77,26,.42),transparent 70%)}
.orb--xl .core{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 120px rgba(255,89,47,.35)}
.orb--xl .ring{border-color:rgba(255,89,47,.4)}
.status.err b{color:#FFB09A}
.vsteps li{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.74)}
.cierre{margin:16px var(--qm) 16px;border-radius:var(--qr);background:var(--qn2);border:0;overflow:hidden}
.cierre::before{background:radial-gradient(60% 70% at 88% 18%,rgba(255,77,26,.55),transparent 62%)}
.cierre-r p span{color:rgba(255,255,255,.55)}
.foot{border-top-color:rgba(255,255,255,.12)}
.foot p,.foot a{color:rgba(255,255,255,.72)}
.foot a:hover{color:#fff}
.foot .legal{color:rgba(255,255,255,.4)}

/* ── 19 · dock y chat escrito ───────────────────────────────────────────── */
.dock{background:#fff;border:1px solid #E6E6E6;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.dock .btn--ghost{background:var(--qg);color:#212121;border-color:var(--qg)}
/* el chat (chat.js) inyecta su CSS con estas variables: acá se le da la paleta clara */
.sc{--ink-0:#FFFFFF;--ink-1:#FFFFFF;--ink-2:#F5F5F5;--ink-3:#FAE9E8;--line:#EBEBEB;--line-2:#E0E0E0;
  --p100:#212121;--p66:#616161;--p45:#757575;--p30:#9E9E9E;color:#212121;border-color:#E6E6E6!important;box-shadow:0 24px 64px rgba(0,0,0,.18)!important}
.sc .sc-b.u{color:#fff!important}
.sc .sc-s button{border-radius:12px}
.sc .sc-f textarea{font-family:"DM Sans",system-ui,sans-serif;border-radius:12px}

/* ── 20 · celular ───────────────────────────────────────────────────────── */
@media (max-width:1068px){
  .facts-g{gap:12px}
}
@media (max-width:860px){
  :root{--qr:28px;--qm:10px}
  .hero{min-height:auto;margin-top:calc(var(--nav) + 8px);padding:52px 0 48px}
  .fact{padding:18px 16px 18px}
  .fd{padding-right:0}
  .noche{background:var(--qn);border-radius:var(--qr);overflow:hidden}
  .noche .stage{border-radius:0}
  .noche-bg{border-radius:0}
  .noche-bg .warm{background:radial-gradient(60% 30% at 50% 20%,rgba(255,77,26,.3),transparent 70%)}
  .noche.lit .noche-bg .warm{background:radial-gradient(60% 30% at 50% 78%,rgba(255,89,47,.42),transparent 70%)}
  .sc-g{padding:6px 16px 10px}
  .qa{padding:0 16px}
  .dock{background:rgba(255,255,255,.97);border:0;border-top:1px solid #E6E6E6;box-shadow:0 -10px 30px rgba(0,0,0,.08)}
  .voces{padding:52px 0}
  /* la ficha se pasaba del ancho (bug de antes): el sello en una sola línea forzaba la grilla */
  .ficha-g,.charla-g,.aviso-g,.dudas-g{grid-template-columns:minmax(0,1fr)}
  .ficha-l,.ficha-r,.charla-l,.charla-r,.aviso-l,.aviso-r,.dudas-l,.dudas-r{min-width:0}
  .sello{white-space:normal;line-height:1.4;font-size:9.5px}
  .lh{gap:10px}
  .isla::after{right:-120px;bottom:-120px}
}

/* ── 21 · mkt 12/9: la portada dice para quién es y ofrece ver los demos ── */
.hero-rubros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.hero-rubros li{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.86);font-size:13px;font-weight:500}
.hero-rubros .ic{width:15px;height:15px;color:var(--gold)}
.hero-demo{margin-top:22px;font-size:14.5px}
.hero-demo a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.hero-demo a .ic{width:15px;height:15px;color:var(--gold);transition:transform .2s}
.hero-demo a:hover .ic{transform:translateX(3px)}

/* ── 22 · mkt 12/9: los dos demos, como las tarjetas de premios de Qamarero ─ */
.demos{padding:var(--sec) 0;background:#fff}
.demos-g{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:300px;padding:28px 30px 26px;border-radius:32px;
  background:var(--qn2);color:#fff;box-shadow:0 18px 44px rgba(17,17,25,.14);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.dcard:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(17,17,25,.22)}
.dcard::after{content:"";position:absolute;right:-90px;top:-40px;width:290px;height:290px;border-radius:50%;background:var(--gold)}
.dcard>*{position:relative;z-index:1}
.dcard .dtag{display:inline-flex;align-self:flex-start;padding:5px 10px;border-radius:6px;background:var(--gold);color:#fff;font-weight:700;letter-spacing:.08em;font-size:10.5px}
.dcard b{font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.1;max-width:9ch}
.dcard p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.78);max-width:34ch}
.dcard .dcta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:12px 18px;border-radius:12px;background:#fff;color:#0D0D12;font-weight:700;font-size:14px}
.dcard .dcta .ic{width:15px;height:15px;transition:transform .2s}
.dcard:hover .dcta .ic{transform:translateX(3px)}
.dcard .dico{position:absolute;right:28px;top:26px;width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.dcard .dico .ic{width:28px;height:28px;color:var(--gold);stroke-width:1.6}

/* ── 23 · mkt 12/9: el cierre captura el número ─────────────────────────── */
.lead-f{display:grid;gap:10px;max-width:520px;margin-top:6px}
.lead-f .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lead-f input{width:100%;background:#fff;border:2px solid transparent;border-radius:12px;color:#141414;padding:14px 15px;font-family:inherit;font-size:16px;outline:none}
.lead-f input:focus{border-color:var(--gold)}
.lead-f input::placeholder{color:#8A8A8A}
.lead-f .btn{width:100%}
.lead-f button[disabled]{opacity:.5}
.lead-f .err{color:#FFB09A;font-size:13px;min-height:1.2em}
.lead-f .ok{display:none;color:#7EE2A8;font-size:15px;font-weight:600}
.lead-f.hecho .ok{display:block}
.lead-f.hecho input,.lead-f.hecho .btn,.lead-f.hecho .err,.lead-f.hecho .lf-row{display:none}
.cierre .cap{margin-top:18px;max-width:52ch}
.lnk{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding:0 0 1px;font-size:inherit}
.lnk:hover{border-bottom-color:var(--gold);color:var(--gold-hi)}
@media (max-width:860px){
  .hero-rubros{gap:6px;margin-top:22px}
  .hero-rubros li{padding:7px 11px;font-size:12.5px}
  .demos-g{grid-template-columns:1fr;gap:12px}
  .dcard{min-height:0;padding:24px 22px 22px}
  .dcard::after{right:-110px;top:-80px;width:250px;height:250px}
  .dcard .dico{width:52px;height:52px;right:20px;top:20px}
  .dcard .dico .ic{width:24px;height:24px}
  .lead-f .lf-row{grid-template-columns:1fr}
}