/*  consejos.css — el blog de cobrapos.app (/consejos), 27-oct-2026.

    Sergio: «el blog podría tener este diseño», mostrando la sección
    «Pruébalo» de la portada: fondo blanco, barra oscura, Archivo 900 en
    mayúsculas, la etiqueta en píldora con su flecha y la lista numerada con
    el paso en azul. Y: «siempre en el blog debe haber una parte donde esté
    fácil el acceso a Cobra». Por eso Cobra está en cuatro sitios a la vez:
      · la barra de arriba (Entrar / Empezar),
      · la tarjeta que baja con la lectura (computador),
      · la barra fija de abajo con WhatsApp encima (celular),
      · el recuadro del final de cada artículo.
    Una sola hoja para la portada del blog y todos los artículos.          */
:root{
  --t:#0F172A; --t2:#475569; --t3:#64748B; --t4:#94A3B8; --l:#ECEEF2; --p2:#F6F7FB;
  --a:#5B6BFF; --at:#4352E8; --m:#303680; --neg:#1B1D24; --verde:#16A34A;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--t);font:400 17px/1.7 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%}

/* ── la barra de arriba: la misma de la portada ── */
.nav{position:sticky;top:0;z-index:20;background:var(--neg);color:#fff}
.nav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;height:64px;padding:0 24px}
.lg{display:flex;align-items:center;gap:10px}
.lg img{width:30px;height:30px;border-radius:8px}
.lg b{font:900 15px/1.1 'Archivo',system-ui,sans-serif;letter-spacing:-.02em;text-transform:uppercase;display:block}
.lg span span{font-size:10px;color:#8189AD;display:block;line-height:1.3}
.mn{display:flex;gap:2px}
.mn a{font-size:12.5px;font-weight:600;color:#B7BEDA;padding:9px 12px;letter-spacing:.02em;position:relative}
.mn a:hover{color:#fff}
.mn a.act{color:#fff}
.mn a.act::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--a)}
.nd{margin-left:auto;display:flex;gap:8px}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:99px;background:var(--a);color:#fff;
  font:800 12.5px 'Archivo',system-ui,sans-serif;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;transition:.16s}
.bt:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(91,107,255,.6)}
.bt.o{background:none;border:1px solid rgba(255,255,255,.18)}
.bt.o:hover{border-color:#fff;box-shadow:none}
.bt.claro{background:#fff;color:var(--t)}

/* ── la etiqueta en píldora con flecha (la de «Pruébalo») ── */
.eyeb{display:flex;align-items:center;gap:13px}
.eyeb .lab{background:rgba(255,216,77,.12);border:1px solid rgba(255,216,77,.34);color:var(--a);
  font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:99px;white-space:nowrap}
.eyeb .fl svg{width:15px;height:15px;color:var(--a)}
.eyeb .rl{flex:1;height:1px;background:linear-gradient(90deg,var(--l),transparent);max-width:360px}
.min{font:400 13px 'DM Mono',ui-monospace,monospace;color:var(--t4)}

/* ── el artículo: lectura + columna que acompaña ── */
.art{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:56px;max-width:1080px;margin:0 auto;padding:48px 24px 64px}
.art-cab{display:grid;gap:18px;margin-bottom:28px}
.art h1{font:900 clamp(34px,5vw,62px)/.92 'Archivo',system-ui,sans-serif;letter-spacing:-.045em;text-transform:uppercase;margin:0;text-wrap:balance}
.art .lead{margin:0;font-size:20px;line-height:1.5;color:var(--t2);max-width:46ch}
.foto{margin:0 0 30px}
.foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;display:block}
.foto figcaption{font:400 12.5px 'DM Mono',ui-monospace,monospace;color:var(--t4);margin-top:8px}
.corto{background:linear-gradient(90deg,rgba(91,107,255,.11),rgba(91,107,255,.02));box-shadow:inset 3px 0 0 var(--a);border-radius:12px;padding:18px 20px;margin:0 0 34px;display:grid;gap:6px}
.corto .k{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--a)}
.corto p{margin:0}
.cuerpo h2{font:900 clamp(23px,2.6vw,31px)/1 'Archivo',system-ui,sans-serif;letter-spacing:-.035em;text-transform:uppercase;margin:46px 0 14px;display:flex;gap:12px;align-items:center;scroll-margin-top:84px;text-wrap:balance}
.cuerpo h2 .n{width:32px;height:32px;flex:none;border-radius:99px;background:var(--a);color:#fff;display:grid;place-items:center;font:800 14px 'DM Sans',system-ui,sans-serif;letter-spacing:0}
.cuerpo p{margin:0 0 16px;color:#1E293B}
.cuerpo b{color:var(--t)}

/* todas las listas del blog llevan ícono */
.ico-lista{list-style:none;padding:0;margin:6px 0 22px;display:grid;gap:8px}
.ico-lista li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--l);border-radius:14px}
.ico-lista .ic{width:42px;height:42px;border-radius:12px;background:rgba(91,107,255,.1);color:var(--a);display:grid;place-items:center}
.ico-lista .ic svg{width:21px;height:21px}
.ico-lista b{display:block;font-weight:700;line-height:1.3}
.ico-lista small{display:block;font-size:14px;color:var(--t3);line-height:1.45}
.ico-lista .v{font:800 17px 'DM Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.ico-lista li.tot{background:var(--t);color:#fff;border-color:var(--t)}
.ico-lista li.tot b{color:#fff}
.ico-lista li.tot .ic{background:rgba(255,255,255,.12);color:#fff}
.ico-lista li.tot small{color:var(--t4)}

/* la cuenta grande */
.form{background:var(--neg);color:#fff;border-radius:18px;padding:20px 22px;margin:6px 0 18px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.form .f{font:800 20px/1.3 'DM Sans',system-ui,sans-serif;color:#B7BEDA}
.form .f em{font-style:normal;color:#fff}
.form .r{font:900 clamp(34px,4.6vw,48px)/1 'Archivo',system-ui,sans-serif;letter-spacing:-.04em}
.form .r small{display:block;font:500 13.5px 'DM Sans',system-ui,sans-serif;color:var(--t4);letter-spacing:0;margin-top:6px}

/* ── los gráficos (27-oct-2026) ─────────────────────────────────────────
   Sergio, del primer gráfico de líneas: «está muy fea… cuando hacemos cosas
   en Remotion hacemos muy buenos diseños». Los dibuja consejos.js a partir de
   los data-* de la figura, para que cualquier artículo los reuse:
     · .g-cruce  ventas contra costos, oscuro, con brillo y una barra para
                 mover las ventas y ver cuánto se gana o se pierde;
     · .g-semana una semana contra la línea diaria, barras que crecen al
                 aparecer y el detalle de cada día al tocarlo.            */
.g-cruce{margin:10px 0 28px;border-radius:22px;padding:22px 22px 18px;color:#E2E8F0;
  background:radial-gradient(120% 90% at 85% 0%,rgba(91,107,255,.22),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(239,68,68,.12),transparent 60%),#12141B;
  box-shadow:0 30px 60px -34px rgba(15,23,42,.65);overflow:hidden}
.g-cab{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:flex-end;margin-bottom:6px}
.g-k{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8189AD}
.g-lect{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:15px;color:#B7BEDA}
.g-lect b{font:900 clamp(26px,3.4vw,34px)/1 'Archivo',system-ui,sans-serif;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}
.g-res{font:800 14px 'DM Sans',system-ui,sans-serif;padding:6px 12px;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums}
.g-res.gana{background:rgba(91,107,255,.2);color:#C7CEFF;box-shadow:inset 0 0 0 1px rgba(124,138,255,.45)}
.g-res.pierde{background:rgba(239,68,68,.16);color:#FCA5A5;box-shadow:inset 0 0 0 1px rgba(239,68,68,.4)}
.g-res.cero{background:rgba(255,255,255,.1);color:#fff}
.g-cruce svg{width:100%;height:auto;overflow:visible}
.g-cruce .ej{font:500 11px 'DM Mono',ui-monospace,monospace;fill:#5C6489}
.g-cruce .rej{stroke:rgba(255,255,255,.06)}
.g-cruce .linea{fill:none;stroke-linecap:round}
.g-cruce .pv{font:800 12px 'DM Sans',system-ui,sans-serif;paint-order:stroke;stroke:#12141B;stroke-width:5px;stroke-linejoin:round}
.g-cruce .pk{font:800 9.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;fill:#8189AD}
.g-cruce .pn{font:900 22px 'Archivo',system-ui,sans-serif;letter-spacing:-.03em;fill:#fff}
.g-cruce .zona{font:900 12px 'Archivo',system-ui,sans-serif;letter-spacing:.14em}
.g-pulso{transform-box:fill-box;transform-origin:center;animation:gPulso 2.2s ease-out infinite}
@keyframes gPulso{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
.g-mover{display:grid;gap:8px;margin-top:6px}
.g-mover span{font:600 13px 'DM Sans',system-ui,sans-serif;color:#8189AD;display:flex;justify-content:space-between}
.g-mover input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#EF4444 0 var(--eq),#5B6BFF var(--eq) 100%)}
.g-mover input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:99px;background:#fff;border:0;box-shadow:0 0 0 6px rgba(91,107,255,.28),0 4px 12px rgba(0,0,0,.4)}
.g-mover input::-moz-range-thumb{width:24px;height:24px;border-radius:99px;background:#fff;border:0;box-shadow:0 0 0 6px rgba(91,107,255,.28),0 4px 12px rgba(0,0,0,.4)}
.g-mover input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(255,255,255,.5)}
.g-cruce figcaption,.g-semana figcaption{font-size:14.5px;line-height:1.5;margin-top:12px}
.g-cruce figcaption{color:#B7BEDA}

.g-semana{margin:10px 0 28px;border-radius:22px;padding:22px 22px 16px;background:linear-gradient(180deg,#F7F8FD,#FFFFFF 70%);box-shadow:inset 0 0 0 1px var(--l)}
.g-semana .g-k{color:var(--t3);display:block;line-height:1.5}
.g-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.g-chip{display:inline-flex;align-items:center;gap:7px;font:700 13px 'DM Sans',system-ui,sans-serif;padding:6px 12px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--l);color:var(--t2)}
.g-chip i{width:9px;height:9px;border-radius:3px;display:inline-block}
.g-semana svg{width:100%;height:auto;overflow:visible}
.g-semana .barra{cursor:pointer;transition:opacity .2s}
.g-semana .barra:hover,.g-semana .barra.sel{opacity:1}
.g-semana.toco .barra:not(.sel){opacity:.45}
.g-semana .dv{font:800 12px 'DM Sans',system-ui,sans-serif;fill:#fff}
.g-semana .dd{font:500 11px 'DM Mono',ui-monospace,monospace;fill:#64748B}
.g-semana .df{font:800 11px 'DM Sans',system-ui,sans-serif}
.g-det{min-height:24px;font-size:14.5px;color:var(--t2);margin-top:4px}
.g-det b{color:var(--t)}
.g-semana figcaption{color:var(--t2)}
.g-crece{transform-box:fill-box;transform-origin:bottom;animation:gCrece .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes gCrece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.g-traza{animation:gTraza 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes gTraza{from{stroke-dashoffset:var(--lg)}to{stroke-dashoffset:0}}
.g-aparece{animation:gAparece .6s ease both}
@keyframes gAparece{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.g-pulso,.g-crece,.g-traza,.g-aparece{animation:none}}

/* «sigue leyendo»: el siguiente artículo, al final */
.sigue{display:grid;gap:4px;margin:26px 0 0;padding:18px 20px;border-radius:16px;border:1px solid var(--l);transition:border-color .15s,box-shadow .15s}
.sigue:hover{border-color:#C7CEFF;box-shadow:0 14px 30px -20px rgba(15,23,42,.35)}
.sigue .k{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--a)}
.sigue b{font:900 clamp(19px,2.2vw,24px)/1.05 'Archivo',system-ui,sans-serif;letter-spacing:-.03em;text-transform:uppercase;color:var(--t)}
/* la portada del blog: los demás artículos */
.mas{display:grid;gap:14px}
.mas>.k{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
.tj{display:grid;gap:9px;align-content:start}
.tj img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;display:block}
.tj .cat{font:800 10px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--a)}
.tj h3{font:700 17px/1.25 'DM Sans',system-ui,sans-serif;letter-spacing:-.01em;margin:0}
.tj:hover h3{color:var(--at)}
@media (max-width:900px){.tarjetas{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tarjetas{grid-template-columns:1fr}}

/* el semáforo de la materia prima (artículo 2) */
.g-semaforo{margin:10px 0 28px;border-radius:22px;padding:22px 22px 18px;color:#E2E8F0;
  background:radial-gradient(110% 90% at 85% 0%,rgba(34,197,94,.14),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(239,68,68,.12),transparent 60%),#12141B;
  box-shadow:0 30px 60px -34px rgba(15,23,42,.65)}
.g-semaforo svg{width:100%;height:auto;overflow:visible}
.g-semaforo .ej{font:500 11px 'DM Mono',ui-monospace,monospace;fill:#8189AD}
.g-semaforo .sz{font:800 11px 'Archivo',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.g-semaforo figcaption{color:#B7BEDA;font-size:14.5px;line-height:1.5;margin-top:12px}
.g-semaforo .g-mover input{background:linear-gradient(90deg,#EF4444,#F97316 30%,#EAB308 45%,#22C55E 70%)}
/* en qué se va el precio */
.g-reparto{margin:10px 0 28px;border-radius:22px;padding:22px 22px 16px;background:linear-gradient(180deg,#F7F8FD,#FFFFFF 70%);box-shadow:inset 0 0 0 1px var(--l)}
.g-reparto .g-k{color:var(--t3);display:block;line-height:1.5;margin-bottom:10px}
.g-reparto svg{width:100%;height:auto}
.g-ley{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.g-ley li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t2)}
.g-ley li i{width:10px;height:10px;border-radius:3px;flex:none}
.g-ley li b{margin-left:auto;color:var(--t);font-variant-numeric:tabular-nums}
.g-ley li:last-child{grid-column:1/-1;border-top:1px solid var(--l);padding-top:8px;font-weight:700;color:var(--t)}
.g-crece-x{transform-box:fill-box;transform-origin:left;animation:gCreceX .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes gCreceX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.g-crece-x{animation:none}}
@media (max-width:600px){.g-ley{grid-template-columns:1fr}}

/* el mismo restaurante en tres meses: los fijos quietos, los variables con las ventas (artículo 3) */
.g-meses{margin:10px 0 28px;border-radius:22px;padding:22px 22px 16px;color:#E2E8F0;
  background:radial-gradient(110% 90% at 85% 0%,rgba(91,107,255,.2),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(249,115,22,.12),transparent 60%),#12141B;
  box-shadow:0 30px 60px -34px rgba(15,23,42,.65)}
.g-meses .g-k{display:block;line-height:1.5}
.g-meses svg{width:100%;height:auto;overflow:visible}
.g-meses .col{cursor:pointer;transition:opacity .2s}
.g-meses.toco .col:not(.sel){opacity:.4}
.g-meses .sv{font:800 12.5px 'DM Sans',system-ui,sans-serif;fill:#fff}
.g-meses .gn{font:900 15px 'Archivo',system-ui,sans-serif;letter-spacing:-.02em}
.g-meses .gmn{font:800 12.5px 'DM Sans',system-ui,sans-serif;fill:#E2E8F0}
.g-meses .gmv{font:500 11px 'DM Mono',ui-monospace,monospace;fill:#8189AD}
.g-meses .pk{font:800 9.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;fill:#8189AD}
.g-meses .pn{font:800 14px 'DM Sans',system-ui,sans-serif;fill:#fff}
.g-meses .g-chip{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#CBD2EA}
.g-meses .g-det{color:#B7BEDA}
.g-meses .g-det b{color:#fff}
.g-meses figcaption{color:#B7BEDA;font-size:14.5px;line-height:1.5;margin-top:12px}

/* dos listas seguidas (fijos / variables) con su título corto */
.lista-k{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:22px 0 4px;font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--a)}
.lista-k small{font:400 13px 'DM Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--t3)}

/* la calculadora */
.calc{margin:10px 0 28px;border-radius:20px;background:var(--p2);padding:22px;display:grid;gap:18px}
.calc-cab{display:grid;gap:4px}
.calc-cab b{font:900 22px/1 'Archivo',system-ui,sans-serif;letter-spacing:-.03em;text-transform:uppercase}
.calc-cab span{font-size:14.5px;color:var(--t2)}
.calc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.campo{display:grid;gap:6px}
.campo span{font:700 13px/1.3 'DM Sans',system-ui,sans-serif;color:var(--t2)}
.campo small{font-weight:400;color:var(--t4)}
.entrada{display:flex;align-items:center;background:#fff;border:1px solid #DCE0E8;border-radius:11px;padding:0 12px;transition:border-color .15s,box-shadow .15s}
.entrada:focus-within{border-color:var(--a);box-shadow:0 0 0 3px rgba(91,107,255,.14)}
.entrada i{font:700 15px 'DM Sans',system-ui,sans-serif;font-style:normal;color:var(--t4)}
.entrada input{flex:1;min-width:0;border:0;outline:0;background:none;font:700 17px 'DM Sans',system-ui,sans-serif;color:var(--t);padding:11px 6px;font-variant-numeric:tabular-nums}
.calc-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.res{background:#fff;border-radius:14px;padding:14px 16px;display:grid;gap:4px;border:1px solid var(--l)}
.res span{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.res b{font:900 clamp(26px,3.4vw,34px)/1 'Archivo',system-ui,sans-serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.res.az{background:var(--a);border-color:var(--a);color:#fff}
.res.az span{color:#DCE0FF}
.calc-nota{margin:0;font-size:13.5px;color:var(--t3)}
/* renglones de la calculadora de precio */
.calc-filas{display:grid;gap:8px}
.calc-fila{display:grid;grid-template-columns:minmax(0,1fr) 150px 36px;gap:8px;align-items:center}
.calc-fila .entrada{padding:0 10px}
.calc-fila input.nom{flex:1;min-width:0;border:1px solid #DCE0E8;border-radius:11px;background:#fff;font:600 15px 'DM Sans',system-ui,sans-serif;color:var(--t);padding:11px 12px;outline:0}
.calc-fila input.nom:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(91,107,255,.14)}
.calc-x{all:unset;cursor:pointer;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--t4);font-size:20px}
.calc-x:hover{background:#fff;color:#DC2626}
.calc-mas{all:unset;cursor:pointer;justify-self:start;font:700 14px 'DM Sans',system-ui,sans-serif;color:var(--at);padding:6px 2px}
.calc-mas:hover{text-decoration:underline}
.calc-estado{border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45}
.calc-estado b{display:block;font-size:15px;margin-bottom:2px}
.calc-res.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.calc-fila{grid-template-columns:minmax(0,1fr) 112px 32px}.calc-res.tres{grid-template-columns:1fr}}
.calc-nota.mal{color:#DC2626}
/* la calculadora de gastos: dos grupos de renglones y la barra de cómo se reparte lo vendido */
.calc-grupo{display:grid;gap:8px}
.calc-sub{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.calc-sub b{font:800 11px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.calc-sub span{font-size:13.5px;color:var(--t3)}
.calc-grupo.var .calc-sub b{color:#C2410C}
.calc-res.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-res.cuatro .res{align-content:start}
.res small{font-size:12.5px;color:var(--t3);line-height:1.3}
.res.bien b{color:var(--verde)}
.res.mal b{color:#DC2626}
.calc-barra{display:flex;height:16px;border-radius:99px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--l)}
.calc-barra i{display:block;height:100%;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.calc-barra .bf{background:#475569}
.calc-barra .bv{background:#F97316}
.calc-barra .bq{background:linear-gradient(90deg,#5B6BFF,#7C8AFF)}
/* con pérdida, lo que faltó va ENCIMA del final de los gastos (lo que las ventas no alcanzaron a cubrir) */
.calc-barra{position:relative}
.calc-barra .bq.falta{position:absolute;right:0;top:0;background:rgba(239,68,68,.8)}
.calc-barra-ley{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--t3);margin-top:-8px}
.calc-barra-ley span{display:inline-flex;align-items:center;gap:6px}
.calc-barra-ley i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* preguntas frecuentes */
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--l);border-radius:14px;padding:14px 18px}
.faq summary{cursor:pointer;font:700 17px/1.35 'DM Sans',system-ui,sans-serif;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--a);font-weight:800;font-size:20px;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:10px 0 0;color:var(--t2)}

/* el recuadro de Cobra al final de cada artículo */
.cobra-fin{display:grid;grid-template-columns:minmax(0,1fr) 42%;background:var(--m);color:#fff;border-radius:22px;overflow:hidden;margin:48px 0 10px}
.cobra-fin .tx{padding:30px;display:grid;gap:12px;align-content:center}
.cobra-fin .eyeb .lab{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.cobra-fin h3{font:900 clamp(25px,3vw,34px)/.95 'Archivo',system-ui,sans-serif;letter-spacing:-.04em;text-transform:uppercase;margin:0}
.cobra-fin p{margin:0;color:#DCE0F7;font-size:16px}
.cobra-fin .bts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.cobra-fin .nota{font:400 12.5px 'DM Mono',ui-monospace,monospace;color:#A9B2FF}
.cobra-fin img{width:100%;height:100%;object-fit:cover;display:block;min-height:240px}

/* la columna que acompaña la lectura */
.lado-in{position:sticky;top:88px;display:grid;gap:18px}
.indice .k{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-bottom:6px}
.indice ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.indice a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:11px;font:600 14px/1.3 'DM Sans',system-ui,sans-serif;color:var(--t3);transition:background .25s,color .25s}
.indice a i{width:23px;height:23px;flex:none;border-radius:99px;font:800 11.5px 'DM Sans',system-ui,sans-serif;font-style:normal;display:grid;place-items:center;background:rgba(15,23,42,.07);color:var(--t3);transition:background .25s,color .25s}
.indice a.ya i{background:#DCFCE7;color:var(--verde)}
.indice a.on{background:linear-gradient(90deg,rgba(91,107,255,.15),rgba(91,107,255,.02));box-shadow:inset 3px 0 0 var(--a);color:var(--t);font-weight:800}
.indice a.on i{background:var(--a);color:#fff}
.tarjeta{background:var(--neg);color:#fff;border-radius:18px;padding:18px;display:grid;gap:10px}
.tarjeta .lg b{font-size:14px}
.tarjeta p{margin:0;font-size:14px;line-height:1.5;color:#CBD2EA}
.tarjeta ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13.5px}
.tarjeta ul li{display:flex;gap:8px;align-items:center}
.tarjeta ul svg{width:15px;height:15px;color:#4ADE80;flex:none}
.tarjeta .wa-l{font-size:13px;color:#A9B2FF;text-align:center}
.tarjeta .wa-l:hover{color:#fff}

/* ── la portada del blog ── */
.pb{max-width:1080px;margin:0 auto;padding:52px 24px 64px;display:grid;gap:30px}
.pb-cab{display:grid;gap:16px}
.pb-cab h1{font:900 clamp(38px,6.4vw,78px)/.9 'Archivo',system-ui,sans-serif;letter-spacing:-.045em;text-transform:uppercase;margin:0;text-wrap:balance}
.pb-cab h1 span{color:var(--a)}
.pb-cab p{margin:0;font-size:19px;color:var(--t2);max-width:50ch}
.dest{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:center}
.dest img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:18px;display:block}
.dest h2{font:900 clamp(26px,3.4vw,40px)/.93 'Archivo',system-ui,sans-serif;letter-spacing:-.04em;text-transform:uppercase;margin:14px 0 10px;text-wrap:balance}
.dest p{margin:0 0 12px;color:var(--t2)}
.dest:hover h2{color:var(--at)}
.franja{background:var(--m);color:#fff;border-radius:20px;padding:24px 26px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.franja b{font:900 clamp(21px,2.6vw,28px)/1 'Archivo',system-ui,sans-serif;letter-spacing:-.035em;text-transform:uppercase;display:block;margin-bottom:6px}
.franja span{color:#CBD2EA;font-size:15px}

/* ── el pie y lo fijo del celular ── */
.pie{background:var(--neg);color:#8189AD;font-size:13px}
.pie-in{max-width:1180px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.pie a{margin-right:18px}
.pie a:hover{color:#fff}
.wa{position:fixed;right:22px;bottom:22px;z-index:30;width:56px;height:56px;border-radius:99px;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(37,211,102,.7);transition:transform .16s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px}
.barra-cel{display:none}

@media (max-width:900px){
  .art{grid-template-columns:1fr;gap:0;padding:30px 18px 40px}
  .lado{display:none}
  .mn,.bt.o,.lg span span{display:none}
  .nav-in{padding:0 16px;gap:10px}
  .nd .bt{padding:9px 16px;font-size:11.5px}
  /*  Fija siempre abajo (no «sticky»): al final de la página una barra
      pegajosa se suelta y el botón de WhatsApp le tapaba el «Empezar».  */
  .pie-in{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .barra-cel{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(27,29,36,.97);color:#fff;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));align-items:center;gap:10px}
  .barra-cel span{font-size:13px;line-height:1.25;color:#CBD2EA;flex:1;min-width:0}
  .barra-cel span b{color:#fff;display:block;font-size:14px}
  .barra-cel .bt{padding:10px 18px}
  .wa{bottom:calc(78px + env(safe-area-inset-bottom,0px));right:14px;width:50px;height:50px}
  .pb{padding:30px 18px 40px;gap:22px}
  .dest{grid-template-columns:1fr;gap:6px}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .art .lead{font-size:18px}
  .ico-lista li{grid-template-columns:38px minmax(0,1fr)}
  .ico-lista .ic{width:38px;height:38px}
  .ico-lista .v{grid-column:2}
  .calc{padding:18px}
  .calc-campos,.calc-res{grid-template-columns:1fr}
  .cobra-fin{grid-template-columns:1fr}
  .cobra-fin img{min-height:0;aspect-ratio:16/9;order:-1}
  .cobra-fin .tx{padding:22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bt,.wa{transition:none}}

/* ── artículo 4: la crisis (27-oct-2026) ───────────────────────────────── */
/* las cifras grandes, con su fuente */
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0 26px}
.cifra{border-radius:18px;padding:18px 18px 16px;background:#12141B;color:#E2E8F0;display:grid;gap:6px;align-content:start;
  background-image:radial-gradient(120% 100% at 100% 0%,rgba(239,68,68,.18),transparent 60%)}
.cifra b{font:900 clamp(34px,4.4vw,46px)/1 'Archivo',system-ui,sans-serif;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.cifra span{font-size:14.5px;line-height:1.4;color:#CBD2EA}
.cifra small{font:400 11.5px 'DM Mono',ui-monospace,monospace;color:#8189AD;margin-top:2px}
@media (max-width:700px){.cifras{grid-template-columns:1fr}}
/* los costos contra lo que entra */
.g-presion{margin:10px 0 28px;border-radius:22px;padding:22px 22px 16px;color:#E2E8F0;
  background:radial-gradient(110% 90% at 90% 0%,rgba(239,68,68,.16),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(91,107,255,.14),transparent 60%),#12141B;
  box-shadow:0 30px 60px -34px rgba(15,23,42,.65)}
.g-presion .g-k{display:block;margin-bottom:10px}
.g-presion svg{width:100%;height:auto;overflow:visible}
.g-presion .an{font:800 13px 'DM Sans',system-ui,sans-serif;fill:#E2E8F0}
.g-presion .pv{font:800 12.5px 'DM Sans',system-ui,sans-serif;fill:#fff}
.g-presion .gq{font:900 16px 'Archivo',system-ui,sans-serif}
.g-presion .pk{font:800 9.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;fill:#8189AD}
.g-presion figcaption{color:#B7BEDA;font-size:14.5px;line-height:1.5;margin-top:12px}
/* los que cierran y los que aguantan */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 24px}
.vs>div{border-radius:18px;padding:18px;display:grid;gap:10px;align-content:start}
.vs .no{background:#FEF2F2;box-shadow:inset 0 0 0 1px #FECACA}
.vs .si{background:#F0FDF4;box-shadow:inset 0 0 0 1px #BBF7D0}
.vs .k{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.vs .no .k{color:#DC2626}
.vs .si .k{color:var(--verde)}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vs li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:15px;line-height:1.45;color:#1E293B}
.vs li svg{width:18px;height:18px;margin-top:3px}
.vs .no svg{color:#DC2626}
.vs .si svg{color:var(--verde)}
@media (max-width:700px){.vs{grid-template-columns:1fr}}
/* el simulador: golpes y respuestas */
.calc-campos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.sim-bloque{border-radius:16px;background:#fff;padding:16px;display:grid;gap:12px;box-shadow:inset 0 0 0 1px var(--l)}
.sim-bloque>b{font:800 11px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.sim-bloque.golpe>b{color:#DC2626}
.sim-bloque.resp>b{color:var(--at)}
.sim-fila{display:grid;gap:6px}
.sim-fila span{display:flex;justify-content:space-between;gap:10px;font:600 14.5px 'DM Sans',system-ui,sans-serif;color:var(--t2)}
.sim-fila output{font-weight:800;color:var(--t);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-fila input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;cursor:pointer;margin:6px 0;
  background:linear-gradient(90deg,var(--c) 0 var(--p,0%),#E2E8F0 var(--p,0%) 100%)}
.golpe .sim-fila input{--c:#EF4444}
.resp .sim-fila input{--c:#5B6BFF}
.sim-fila input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:99px;background:#fff;border:0;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 25%,transparent),0 2px 8px rgba(15,23,42,.3)}
.sim-fila input::-moz-range-thumb{width:22px;height:22px;border-radius:99px;background:#fff;border:0;box-shadow:0 0 0 5px rgba(91,107,255,.25),0 2px 8px rgba(15,23,42,.3)}
.sim-res{border-radius:16px;background:#12141B;color:#E2E8F0;padding:18px;display:grid;gap:14px}
.sim-fila-r{display:grid;gap:6px}
.sim-fila-r>span{display:flex;justify-content:space-between;gap:10px;font:700 14px 'DM Sans',system-ui,sans-serif;color:#CBD2EA}
.sim-fila-r b{font:900 20px 'Archivo',system-ui,sans-serif;letter-spacing:-.02em;color:#C7CEFF;font-variant-numeric:tabular-nums}
.sim-fila-r b.pierde{color:#FCA5A5}
.sim-pista{position:relative;height:14px;border-radius:99px;background:rgba(255,255,255,.06)}
.sim-pista i{position:absolute;top:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#5B6BFF,#A9B2FF);box-shadow:0 0 14px rgba(124,138,255,.55);transition:left .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1)}
.sim-pista i.pierde{background:linear-gradient(90deg,#EF4444,#F87171);box-shadow:0 0 14px rgba(239,68,68,.5)}
.sim-cero{position:absolute;top:-4px;bottom:-4px;width:2px;background:rgba(255,255,255,.4);border-radius:2px}
.sim-res .calc-nota{color:#B7BEDA}
@media (max-width:600px){.calc-campos.tres{grid-template-columns:1fr}}
/* las fuentes del artículo */
.fuentes{margin:30px 0 0;padding:16px 18px;border-radius:14px;background:var(--p2);font-size:13.5px;color:var(--t3);display:grid;gap:6px}
.fuentes b{font:800 10.5px 'Archivo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
.fuentes ol{margin:0;padding-left:18px;display:grid;gap:4px}
.fuentes a{color:var(--at);text-decoration:underline;text-underline-offset:2px}