/* =============================================================
   mikeoreaa.com · v2 — la mesa de trading de Mike
   Crema y burgundy (opción A, elegida por Mike el 21-oct). Claro a propósito:
   Fondarium (azul/dorado) y VOLTA (morado) son oscuros.
   ============================================================= */
:root{
  --bg:#F6F0E8; --bg2:#FFFCF7; --bg3:#EEE4D8; --line:rgba(60,18,26,.12); --line2:rgba(60,18,26,.22);
  --tx:#22131A; --tx2:#5C4A4F; --tx3:#94848A;
  --acc:#7B1E30; --acc2:#9C2C42; --wine:#5E1424; --cream:#FFF4EE; --blush:#E9B8B3;
  --up:#2F7D5B; --dn:#B23A3A; --neu:#6E6066;
  --serif:'Bricolage Grotesque',system-ui,sans-serif; --sans:'Inter',-apple-system,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:20px; --max:1120px; --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:400 16px/1.6 var(--sans);overflow-x:hidden;padding-bottom:84px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono)}

/* ---------- encabezado ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--wine);color:var(--cream)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.logo{font:800 22px/1 var(--serif);letter-spacing:-.02em}
.logo i{font-style:normal;color:var(--blush)}
.top nav{display:none;gap:26px;font-size:14.5px;color:rgba(255,244,238,.75)}
.top nav a:hover,.top nav a.on{color:var(--cream)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--cream);color:var(--wine);font:700 13.5px/1 var(--sans)}
.pill.ghost{background:transparent;border:1px solid var(--line2);color:var(--tx)}
.subnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 var(--pad) 12px;max-width:var(--max);margin:0 auto}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,244,238,.28);font-size:14px;color:rgba(255,244,238,.85)}
.subnav a.on{background:var(--cream);color:var(--wine);border-color:var(--cream);font-weight:600}
@media(min-width:880px){.top nav{display:flex}.subnav{display:none}body{padding-bottom:0}}

/* ---------- barra fija abajo (celular) ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(246,240,232,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:14px;font:700 15px/1 var(--sans)}
.bar .a1{background:var(--acc);color:var(--cream)}
.bar .a2{border:1px solid var(--line2)}
@media(min-width:880px){.bar{display:none}}

/* ---------- tipografía ---------- */
.k{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
h1,h2,h3{font-family:var(--serif);font-weight:800;letter-spacing:-.025em;line-height:1.02}
h1{font-size:clamp(38px,9vw,72px)}
h1 em,h2 em{font-style:normal;color:var(--acc)}
h2{font-size:clamp(28px,6vw,44px)}
h3{font-size:22px;line-height:1.2}
.lead{font-size:18px;line-height:1.55;color:var(--tx2);max-width:56ch}
section{padding:46px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-h a{font-size:14px;color:var(--acc2);white-space:nowrap}

/* ---------- botones ---------- */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 22px;border-radius:14px;font:700 15.5px/1 var(--sans);transition:transform .15s}
.btn:active{transform:scale(.98)}
.btn.p{background:var(--acc);color:var(--cream)}
.btn.s{border:1px solid var(--line2);color:var(--tx)}
@media(max-width:520px){.btns .btn{flex:1 1 100%}}

/* ---------- chips de sesgo y estado ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:600 12px/1 var(--mono);letter-spacing:.04em;border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.chip.up{color:var(--up);border-color:rgba(47,125,91,.35);background:rgba(47,125,91,.08)}
.chip.dn{color:var(--dn);border-color:rgba(178,58,58,.35);background:rgba(178,58,58,.07)}
.chip.nw{color:var(--acc);border-color:rgba(123,30,48,.35);background:rgba(123,30,48,.07)}
.chip.st{color:var(--tx3)}
.chip b{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- tarjetas de ideas ---------- */
.cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards{grid-template-columns:1fr 1fr 1fr}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg2);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line2);transform:translateY(-2px)}
.card .ph{aspect-ratio:1200/630;background:var(--bg3) center/cover no-repeat}
.card .bd{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:20px}
.card p{font-size:14.5px;line-height:1.5;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:auto;display:flex;justify-content:space-between;font:500 12px/1 var(--mono);color:var(--tx3)}
.lv{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lv div{border:1px solid var(--line);border-radius:10px;padding:8px 9px}
.lv span{display:block;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.lv b{display:block;font:600 15px/1.2 var(--mono);margin-top:5px}

/* la idea destacada */
.hero-idea{display:grid;gap:0;border:1px solid var(--line2);border-radius:22px;overflow:hidden;background:var(--bg2)}
.hero-idea .ph{aspect-ratio:1200/630;background:var(--bg3) center/cover no-repeat}
.hero-idea .bd{padding:20px;display:flex;flex-direction:column;gap:12px}
.hero-idea h3{font-size:clamp(24px,5vw,34px)}
.hero-idea p{color:var(--tx2)}
@media(min-width:900px){.hero-idea{grid-template-columns:1.2fr 1fr}.hero-idea .ph{aspect-ratio:auto;min-height:100%}.hero-idea .bd{padding:30px}}

/* filtros */
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:0 0 auto;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--tx2);font:500 14px/1 var(--sans);cursor:pointer}
.filters button.on{background:var(--acc);color:var(--cream);border-color:var(--acc);font-weight:600}

/* empieza aquí */
.paths{display:grid;gap:12px}
@media(min-width:800px){.paths{grid-template-columns:repeat(3,1fr)}}
.path{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg2);transition:border-color .2s}
.path:hover{border-color:var(--acc)}
.path .ic{font-size:28px}
.path b{font:700 20px/1.2 var(--serif)}
.path span{font-size:14.5px;color:var(--tx2)}
.path i{margin-top:6px;font-style:normal;font:600 14px/1 var(--sans);color:var(--acc2)}

/* números */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:18px 14px;border-radius:var(--r);border:1px solid var(--line);text-align:center}
.stat b{display:block;font:600 clamp(26px,6vw,40px)/1 var(--serif);color:var(--tx)}
.stat span{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:var(--tx2)}

/* quién soy */
.me{display:grid;gap:22px;align-items:center}
.me img{border-radius:22px;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;width:100%;height:auto;max-width:420px}
.me blockquote{font:700 24px/1.25 var(--serif);color:var(--tx);border-left:3px solid var(--acc);padding-left:16px;margin:18px 0}
@media(min-width:860px){.me{grid-template-columns:.8fr 1.2fr;gap:50px}}

/* cierre */
.close{border-radius:26px;padding:34px 22px;text-align:center;background:var(--wine);color:var(--cream);border:0}.close .k{color:var(--blush)}.close h2 em{color:var(--blush)}.close .lead{color:rgba(255,244,238,.78)}.close .btn.p{background:var(--cream);color:var(--wine)}
.close .btns{justify-content:center}

footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--tx3);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:16px}
footer a:hover{color:var(--tx)}

/* ---------- nota de análisis ---------- */
.note-h{padding:28px 0 8px}
.note-h h1{font-size:clamp(32px,7.5vw,56px);margin:14px 0 12px}
.note-h .when{font:500 13px/1.4 var(--mono);color:var(--tx3)}
.tldr{border:1px solid var(--line2);border-radius:var(--r);padding:18px 18px 8px;background:var(--bg2);margin:22px 0}
.tldr .k{margin-bottom:12px;display:block}
.tldr li{list-style:none;position:relative;padding:0 0 12px 26px;font-size:16.5px;line-height:1.5}
.tldr li span{position:absolute;left:0;top:1px;font-size:15px}
.fig{margin:22px 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.fig figcaption{font:500 12.5px/1.4 var(--mono);color:var(--tx3);padding:10px 14px;background:var(--bg2)}
table.lvls{width:100%;border-collapse:collapse;margin:8px 0 6px}
.lvls td{padding:13px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.lvls td:first-child{font:600 17px/1.2 var(--mono);white-space:nowrap;width:1%;padding-right:16px}
.lvls td:nth-child(2) span{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:6px;margin-bottom:5px}
.t-gat{background:rgba(123,30,48,.10);color:var(--acc)}.t-sl{background:rgba(178,58,58,.10);color:var(--dn)}.t-tp{background:rgba(47,125,91,.11);color:var(--up)}.t-sop{background:rgba(110,96,102,.10);color:var(--neu)}
.lvls td:nth-child(2) p{font-size:14.5px;color:var(--tx2);line-height:1.45}
.ifthen{display:grid;gap:10px;margin:10px 0}
.ifthen div{border-radius:14px;padding:15px 16px;border:1px solid var(--line)}
.ifthen .u{border-color:rgba(47,125,91,.35);background:rgba(47,125,91,.05)}
.ifthen .d{border-color:rgba(178,58,58,.35);background:rgba(178,58,58,.05)}
.ifthen b{display:block;font:600 13px/1 var(--mono);letter-spacing:.06em;margin-bottom:7px}
.ifthen .u b{color:var(--up)}.ifthen .d b{color:var(--dn)}
.prose p{font-size:17px;line-height:1.7;color:var(--tx2);margin:0 0 14px;max-width:68ch}
.prose p strong{color:var(--tx);font-weight:600}
.log{position:relative;margin:10px 0 0;padding-left:22px}
.log::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line2)}
.log li{list-style:none;position:relative;padding:0 0 20px}
.log li::before{content:"";position:absolute;left:-21px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.log li.x::before{border-color:var(--dn)}
.log time{display:block;font:600 12.5px/1 var(--mono);color:var(--acc2);margin-bottom:6px}
.log li.x time{color:var(--dn)}
.log p{font-size:15.5px;color:var(--tx2);line-height:1.55}
.note-sec{padding:26px 0;border-top:1px solid var(--line)}
.note-sec>.k{display:block;margin-bottom:14px}
.note-wrap{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.back{display:inline-flex;gap:6px;font-size:14px;color:var(--tx2);margin-top:18px}
.tiny{font-size:12px;color:var(--tx3);line-height:1.5}

/* ---------- páginas de oferta (señales, fondeo) ---------- */
.gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--pad) 10px;margin:0 calc(var(--pad)*-1)}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:0 0 auto;width:220px;height:auto;border-radius:14px;border:1px solid var(--line);scroll-snap-align:start;background:var(--bg2)}
.feats{display:grid;gap:10px}
@media(min-width:760px){.feats{grid-template-columns:1fr 1fr}}
.feat{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg2)}
.feat .ic{font-size:24px;line-height:1}
.feat b{display:block;font:700 18px/1.25 var(--serif)}
.feat span{display:block;font-size:14.5px;color:var(--tx2);margin-top:4px}
.wa{max-width:360px;margin:22px auto 0;border-radius:18px;padding:14px;background:#E9DED2;text-align:left}
.wa p{display:inline-block;background:#DCF8C6;color:#1d2b1d;border-radius:12px 12px 2px 12px;padding:9px 12px;font-size:15px;float:right;max-width:90%}
.wa::after{content:"";display:block;clear:both}
.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:0 6px 10px}
.cmp td{padding:13px 6px;border-top:1px solid var(--line)}
.cmp td:nth-child(2){font-weight:700;color:var(--acc)}
.cmp td:nth-child(3){color:var(--tx3)}
.price{display:flex;align-items:baseline;gap:8px;margin:18px 0 4px}
.price b{font:600 clamp(48px,12vw,72px)/1 var(--serif);color:var(--acc)}
.price span{font:600 14px/1 var(--mono);color:var(--tx3)}
.hero-media{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#000}
.hero-media video{display:block;width:100%;height:auto}
.timeline{display:grid;gap:12px;counter-reset:t}
.timeline div{padding:16px 16px 16px 58px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg2);position:relative}
.timeline div::before{counter-increment:t;content:counter(t);position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--cream);font:700 14px/28px var(--sans);text-align:center}
.timeline b{display:block;font:700 18px/1.25 var(--serif)}
.timeline span{display:block;font-size:14.5px;color:var(--tx2);margin-top:4px}
.qa details{border-top:1px solid var(--line);padding:16px 0}
.qa summary{list-style:none;cursor:pointer;font:700 18px/1.3 var(--serif);display:flex;justify-content:space-between;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--acc);font-family:var(--sans)}
.qa details[open] summary::after{content:"–"}
.qa p{margin-top:10px;color:var(--tx2);font-size:15.5px;line-height:1.6}

/* =============================================================
   Portada tipo portal (21-oct, Mike pidió estilo sopitas.com):
   contenido desde el primer segundo, fotos con el título encima,
   banners grandes intercalados que llevan a cada producto.
   ============================================================= */
.temas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:var(--max);margin:0 auto;padding:10px var(--pad)}
.temas::-webkit-scrollbar{display:none}
.temas a{flex:0 0 auto;padding:7px 13px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);font:600 13px/1 var(--sans);color:var(--tx)}
.temas a.hot{background:var(--acc);border-color:var(--acc);color:var(--cream)}
.temas-wrap{background:var(--bg3);border-bottom:1px solid var(--line)}

.p-sec{padding:22px 0}
.p-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.p-h h2{font-size:24px}
.p-h a{font:600 13.5px/1 var(--sans);color:var(--acc)}

.tile{position:relative;display:block;overflow:hidden;border-radius:16px;background:var(--wine);aspect-ratio:16/10;max-width:100%;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(30,8,14,.88) 100%);z-index:1}
.tile .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 16px;color:#fff}
.tile .lab{display:inline-block;padding:4px 8px;border-radius:6px;background:var(--acc);font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.tile .lab.up{background:var(--up)}.tile .lab.dn{background:var(--dn)}
.tile h3{font:700 19px/1.2 var(--serif);color:#fff;text-wrap:balance}
.tile .when{display:block;margin-top:6px;font:500 11.5px/1 var(--mono);color:rgba(255,255,255,.75)}
.tile.big{aspect-ratio:4/3}
.tile.big h3{font-size:clamp(22px,4.6vw,32px)}
.hero-grid{display:grid;gap:12px}
@media(min-width:880px){.hero-grid{grid-template-columns:1.6fr 1fr}.hero-grid .side{display:grid;gap:12px}.hero-grid .side .tile{aspect-ratio:auto;height:100%}.tile.big{aspect-ratio:auto;min-height:440px}}
.grid3{display:grid;gap:12px}
@media(min-width:700px){.grid3{grid-template-columns:repeat(3,1fr)}}

/* banners propios */
.ban{display:flex;align-items:center;gap:16px;border-radius:18px;padding:20px;overflow:hidden;position:relative;background:var(--wine);color:var(--cream);min-height:120px}
.ban .bk{font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blush)}
.ban b{display:block;font:800 clamp(22px,5vw,34px)/1.05 var(--serif);letter-spacing:-.02em;margin:8px 0 6px;text-wrap:balance}
.ban b em{font-style:normal;color:var(--blush)}
.ban span.s{display:block;font-size:14.5px;color:rgba(255,244,238,.8)}
.ban .go{flex:0 0 auto;margin-left:auto;padding:12px 16px;border-radius:12px;background:var(--cream);color:var(--wine);font:700 14px/1 var(--sans);white-space:nowrap}
.ban.light{background:var(--bg2);color:var(--tx);border:1px solid var(--line2)}
.ban.light .bk{color:var(--acc)}.ban.light b em{color:var(--acc)}.ban.light span.s{color:var(--tx2)}.ban.light .go{background:var(--acc);color:var(--cream)}
.ban .art{flex:0 0 auto;width:96px;height:auto}
.ban .big-num{font:600 clamp(40px,10vw,64px)/1 var(--serif);color:var(--blush)}
@media(max-width:600px){.ban{flex-wrap:wrap}.ban .go{margin-left:0;width:100%;text-align:center}.ban .art{width:78px}}
.ban-img{display:grid;gap:12px}
@media(min-width:700px){.ban-img{grid-template-columns:1fr 1fr}}
.ban-img a{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.ban-img img{width:100%;height:auto;display:block}
.ban-img .tag{position:absolute;top:8px;right:8px;padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.5);color:#fff;font:600 9.5px/1 var(--mono);letter-spacing:.12em}

/* lista con miniatura */
.rows{display:grid;gap:10px}
@media(min-width:800px){.rows{grid-template-columns:1fr 1fr}}
.row{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;padding:8px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.row img{width:112px;height:76px;object-fit:cover;border-radius:10px}
.row .lab{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.row h3{font:700 16px/1.25 var(--serif);margin-top:5px}
.row .when{display:block;margin-top:5px;font:500 11px/1 var(--mono);color:var(--tx3)}

/* ---------- hero: velas que escriben el ciclo MAAW → WVVM ---------- */
.hero-mo{position:relative;background:var(--wine);color:var(--cream);overflow:hidden}
.hero-mo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-mo .in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:30px var(--pad) 26px;min-height:min(560px,135vw);display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.hero-mo .in a{pointer-events:auto}
.hero-mo .k{color:var(--blush)}
.hero-mo h1{font-size:clamp(46px,12vw,92px);line-height:.95;margin:10px 0 10px;color:var(--cream);text-shadow:0 2px 24px rgba(40,6,14,.6)}
.hero-mo h1 em{color:var(--blush)}
.hero-mo p{font-size:17px;line-height:1.5;color:rgba(255,244,238,.85);max-width:44ch;text-shadow:0 1px 12px rgba(40,6,14,.8)}
.hero-mo .btns .btn.p{background:var(--cream);color:var(--wine)}
.hero-mo .btns .btn.s{border-color:rgba(255,244,238,.4);color:var(--cream)}
.hero-mo .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(94,20,36,0) 0%,rgba(94,20,36,0) 40%,rgba(70,12,26,.9) 62%)}
@media(min-width:880px){.hero-mo .in{min-height:440px;padding-bottom:40px}.hero-mo .shade{background:linear-gradient(90deg,rgba(70,12,26,.92) 0%,rgba(94,20,36,.55) 45%,rgba(94,20,36,.1) 100%)}}
.ticker{position:relative;z-index:2;display:flex;gap:28px;white-space:nowrap;overflow:hidden;border-top:1px solid rgba(255,244,238,.15);background:rgba(40,6,14,.55);padding:10px 0;font:600 12.5px/1 var(--mono);letter-spacing:.06em}
.ticker .t{display:flex;gap:28px;animation:tk 38s linear infinite;padding-left:28px}
.ticker a{color:var(--cream)}
.ticker .u{color:#7FE0B0}.ticker .d{color:#FF9C96}
@keyframes tk{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .t{animation:none}}

/* ---------- banner de VOLTA: tarjeta tipo app, con su propia marca ---------- */
.vb{position:relative;display:flex;flex-direction:column;gap:14px;border-radius:16px;overflow:hidden;padding:20px;background:#0A0812;color:#EFEDFF;font-family:'Manrope',system-ui,sans-serif;isolation:isolate;min-height:100%}
.vb::before{content:"";position:absolute;inset:-40% -20% auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(91,75,255,.55),transparent 65%);z-index:-1}
.vb::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(139,124,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(139,124,255,.08) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.vb-top{display:flex;align-items:center;justify-content:space-between}
.vb-logo{display:flex;align-items:center;gap:9px;font:800 19px/1 'Unbounded',system-ui,sans-serif;letter-spacing:.04em}
.vb-logo i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(150deg,#5B4BFF,#3A2DD1)}
.vb-tag{font:700 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:#3DFFA8;border:1px solid rgba(61,255,168,.4);padding:5px 8px;border-radius:999px}
.vb h3{font:800 clamp(22px,5.4vw,30px)/1.08 'Unbounded',system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.vb h3 span{color:#8B7CFF}
.vb-sz{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vb-sz button{cursor:pointer;padding:12px 6px;border-radius:12px;border:1px solid rgba(139,124,255,.3);background:rgba(139,124,255,.07);color:#C9C3FF;font:800 15px/1 'Unbounded',system-ui,sans-serif}
.vb-sz button.on{background:#5B4BFF;border-color:#5B4BFF;color:#fff;box-shadow:0 10px 26px -10px rgba(91,75,255,.9)}
.vb-pr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vb-pr b{font:800 clamp(34px,8vw,46px)/1 'Unbounded',system-ui,sans-serif;color:#fff;letter-spacing:-.03em}
.vb-pr s{font:600 16px/1 'JetBrains Mono',monospace;color:#6E679B}
.vb-pr em{font-style:normal;font:700 11px/1 'JetBrains Mono',monospace;padding:5px 7px;border-radius:6px;background:#3DFFA8;color:#07050F}
.vb-ul{display:flex;flex-wrap:wrap;gap:6px 14px;font:600 12.5px/1.3 'Manrope',system-ui,sans-serif;color:#A49CD4}
.vb-ul span::before{content:"✓ ";color:#3DFFA8}
.vb-go{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:12px;background:#fff;color:#0A0812;font:800 15px/1 'Manrope',system-ui,sans-serif;margin-top:auto}
.ban-img a.vb-go{display:flex;border:0;border-radius:12px;overflow:visible}

/* muro de comprobantes que se mueve con el scroll */
.muro{overflow:hidden;margin:0 calc(var(--pad)*-1);padding:6px 0}
.muro-row{display:flex;gap:10px;width:max-content;will-change:transform;margin-bottom:10px;padding-left:40px}
.muro-row img{width:190px;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(60,18,26,.45);background:var(--bg2)}
@media(min-width:800px){.muro-row img{width:250px}}

/* ---------- piezas de las notas (generadas por _fuente/nota.py) ---------- */
details.lec{border:1px solid var(--line);border-radius:16px;margin:10px 0;background:var(--bg2);overflow:hidden}
details.lec summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 16px}
details.lec summary::-webkit-details-marker{display:none}
details.lec summary .n{font:600 13px/1 var(--mono);color:var(--acc)}
details.lec summary b{font:700 18px/1.2 var(--serif);flex:1}
details.lec summary i{font-style:normal;font:600 12px/1 var(--mono);color:var(--tx3)}
details.lec summary::after{content:"+";font:400 22px/1 var(--sans);color:var(--tx3)}
details.lec[open] summary::after{content:"–"}
details.lec .in{padding:0 16px 16px}
details.lec .in p{font-size:15.5px;line-height:1.6;color:var(--tx2);margin:12px 0 0}
details.lec .in img{border-radius:12px;border:1px solid var(--line)}
.entradas{display:grid;gap:10px}
@media(min-width:700px){.entradas{grid-template-columns:1fr 1fr}}
.ent{border:1px solid var(--line2);border-radius:16px;padding:16px}
.ent .k{display:block;margin-bottom:8px}
.ent h3{font-size:19px;margin-bottom:6px}
.ent p{font-size:14.5px;color:var(--tx2);margin-bottom:12px}
.ent dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px}
.ent dt{color:var(--tx3);font:600 11.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ent dd{font:600 15px/1.4 var(--mono)}
.res{border-radius:16px;padding:16px 18px;border:1px solid var(--line2);background:var(--bg3);margin-top:6px}
.res b{display:block;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.res p{font-size:16px;line-height:1.5}
.note-h2{font-size:clamp(24px,5.5vw,32px);margin:0 0 14px;text-wrap:balance}
h3.sub{font-size:19px;margin:18px 0 8px}
.note-stats{margin:4px 0 6px}
.tbl-wrap{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px}
.tbl th{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:11px 12px;border-bottom:1px solid var(--line2)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0}
.kv .kv-t{grid-column:1/-1;font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:2px}
.kv div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg2)}
.kv span{display:block;font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.kv b{display:block;font:600 16px/1.3 var(--mono);margin-top:5px}
.rel{display:grid;gap:10px}
@media(min-width:760px){.rel{grid-template-columns:repeat(3,1fr)}}
.rel a{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg2)}
.rel b{font:700 16px/1.25 var(--serif)}
.rel span{grid-column:1;font-size:13.5px;color:var(--tx2)}
.rel i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;color:var(--acc);font-weight:700}

/* ---------- media nota gratis (candado.js) ---------- */
.asomo{position:relative;max-height:190px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 100%);mask-image:linear-gradient(180deg,#000 10%,transparent 100%)}
.candado{margin:-10px 0 26px;border-radius:22px;background:var(--wine);color:var(--cream);box-shadow:0 24px 50px -24px rgba(60,10,20,.6)}
.cd-in{padding:24px 20px 22px}
.cd-k{font:700 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blush)}
.candado h2{font-size:clamp(28px,7vw,38px);margin:10px 0 8px;color:var(--cream)}
.candado h2 em{color:var(--blush)}
.candado p{font-size:15.5px;line-height:1.5;color:rgba(255,244,238,.85)}
.candado p b{color:#fff}
.cd-sig{list-style:none;margin:14px 0 16px;display:grid;gap:6px}
.cd-sig li{font-size:14px;color:rgba(255,244,238,.9);padding-left:22px;position:relative}
.cd-sig li::before{content:"🔒";position:absolute;left:0;font-size:12px;top:1px}
.cd-f{display:grid;gap:9px}
.cd-f input{height:50px;border-radius:12px;border:1px solid rgba(255,244,238,.25);background:rgba(255,244,238,.08);color:#fff;padding:0 14px;font:500 16px var(--sans)}
.cd-f input::placeholder{color:rgba(255,244,238,.55)}
.cd-f input:focus{outline:none;border-color:var(--blush);background:rgba(255,244,238,.12)}
.cd-f button{height:54px;border:0;border-radius:12px;background:var(--cream);color:var(--wine);font:800 16px var(--sans);cursor:pointer}
.cd-err{background:rgba(255,120,120,.18);border-radius:10px;padding:9px 12px;font-size:14px!important}
.cd-mini{margin-top:12px;font-size:12.5px!important;color:rgba(255,244,238,.65)!important}
