/* ============================================================
   Blog Mouni — v2. Se carga después de /styles-v2.css y usa sus
   tokens (--petrol, --acid, --paper, --ff, --fs…).
   ============================================================ */

/* ---------- Índice: cabecera ---------- */
.bhead{padding:64px 0 60px}
.bhead h1{font-size:clamp(36px,4.6vw,62px);margin:14px 0 16px;max-width:18ch}
.bhead h1 em.s{color:var(--acid)}
.bhead .lead{max-width:60ch}

/* ---------- Índice: filtros ---------- */
.bfilters{position:sticky;top:70px;z-index:40;background:rgba(241,240,235,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--lineL)}
.bfilters .wrap{display:flex;gap:8px;padding-top:14px;padding-bottom:14px;overflow-x:auto;scrollbar-width:none}
.bfilters .wrap::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--lineL);background:transparent;font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--mute);transition:.16s;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:rgba(10,15,19,.3)}
.chip.on{background:var(--petrol);color:var(--onD);border-color:var(--petrol)}

/* ---------- Índice: piezas comunes ---------- */
.bsec{padding:44px 0 88px}
.bcat{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol3)}
.bmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.bmeta b{color:var(--mute);font-weight:500}
.bmeta i{font-style:normal;opacity:.6}

/* ---------- Índice: destacado ---------- */
.bfeat{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);border:1px solid var(--lineL);border-radius:20px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:.22s}
.bfeat:hover{border-color:rgba(10,15,19,.28);transform:translateY(-2px);box-shadow:0 26px 50px -34px rgba(9,51,65,.5)}
.bfeat .im{overflow:hidden;background:var(--petrol);display:flex;align-items:center}
.bfeat .im.light{background:#F1F0EB}
.bfeat .im.acid{background:#D8FF00}
.bfeat img{width:100%;height:auto;display:block;aspect-ratio:1200/630}
.bfeat .tx{padding:30px 36px 30px;display:flex;flex-direction:column;justify-content:center}
.bfeat .flag{align-self:flex-start;background:var(--acid);color:#0A0F13;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:5px;margin-bottom:16px}
.bfeat h2{font-size:clamp(25px,2.3vw,32px);line-height:1.1;margin:10px 0 12px}
.bfeat p{color:var(--mute);font-size:15.5px;line-height:1.5}
.bfeat .bmeta{margin-top:16px}
.bfeat .go{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15px;margin-top:18px}
.bfeat .go span{transition:.18s}
.bfeat:hover .go span{transform:translateX(4px)}

/* ---------- Índice: rejilla ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 26px;margin-top:48px}
.bcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.bcard[hidden],.bfeat[hidden]{display:none}
.bcard .im{border-radius:14px;overflow:hidden;border:1px solid var(--lineL);background:var(--panel)}
.bcard img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;transition:.4s cubic-bezier(.2,.7,.3,1)}
.bcard:hover img{transform:scale(1.035)}
.bcard .bcat{margin-top:16px}
.bcard h3{font-size:20px;line-height:1.22;margin:8px 0 10px;letter-spacing:-.024em}
.bcard:hover h3{text-decoration:underline;text-decoration-color:var(--acidDim);text-decoration-thickness:2px;text-underline-offset:4px}
.bempty{margin-top:48px;color:var(--mute)}
.bmore{display:flex;justify-content:center;margin-top:52px}
.bnews{margin-top:64px;border:1px solid var(--lineL);border-radius:18px;background:var(--panel);padding:30px 34px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.bnews h3{font-size:22px;margin-bottom:6px}
.bnews p{color:var(--mute);font-size:15.5px;max-width:58ch}

/* ---------- Artículo: cabecera ---------- */
.phero{padding:54px 0 150px}
.phero.nocover{padding-bottom:64px}
.crumb{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--onDMute)}
.crumb a{color:var(--acid);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.phero h1{font-size:clamp(34px,4.5vw,60px);max-width:19ch;margin:18px 0 26px}
.phero h1 em{font-family:var(--fs);font-style:italic;font-weight:400;color:var(--acid);letter-spacing:-.01em}
.pby{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--onDMute);flex-wrap:wrap}
.pby img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(241,240,235,.25)}
.pby b{color:var(--onD);font-weight:600}
.pby i{font-style:normal;opacity:.5}
.pcover{margin-top:-104px;position:relative;z-index:2}
.pcover .wrap{max-width:940px}
.pcover img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid rgba(10,15,19,.1);box-shadow:0 44px 80px -44px rgba(9,51,65,.6)}

/* ---------- Artículo: cuerpo a dos columnas ---------- */
.pbody{display:grid;grid-template-columns:220px minmax(0,720px);gap:72px;justify-content:center;padding:64px 28px 30px;max-width:1180px;margin:0 auto}
.toc{position:sticky;top:104px;align-self:start;font-size:14px}
.toc h5{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;font-weight:700}
.toc a{display:block;color:var(--mute);text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid var(--lineL);line-height:1.35;transition:.15s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--petrol);font-weight:600}
.toc a.tocbtn{display:flex;margin-top:22px;border:1px solid transparent;padding:12px 16px;color:var(--onD);font-size:14px;font-weight:600}
.toc a.tocbtn:hover{color:var(--onD)}
.tocm{display:none}

/* ---------- Artículo: texto ---------- */
.prose2{font-size:18px;line-height:1.7;color:rgba(10,15,19,.8)}
.prose2>*+*{margin-top:22px}
.prose2 .lead-in{font-size:21px;line-height:1.55;color:var(--ink);letter-spacing:-.012em}
.prose2 h2{font-size:clamp(25px,2.4vw,31px);line-height:1.15;margin-top:58px;color:var(--ink);scroll-margin-top:96px}
.prose2 h3{font-size:20px;margin-top:36px;color:var(--ink)}
.prose2 strong{color:var(--ink);font-weight:600}
.prose2 a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acidDim);text-decoration-thickness:2px;text-underline-offset:3px;transition:.15s}
.prose2 a:hover{background:var(--acid);text-decoration-color:var(--acid)}
.prose2 table{width:100%;border-collapse:collapse;font-size:15.5px}
.prose2 th{text-align:left;font-weight:600;color:var(--ink);border-bottom:2px solid rgba(10,15,19,.3);padding:10px 12px}
.prose2 td{border-bottom:1px solid var(--lineL);padding:10px 12px;vertical-align:top}
.prose2 td.num,.prose2 th.num{text-align:right;white-space:nowrap}

.note{background:var(--panel);border:1px solid var(--lineL);border-left:4px solid var(--acidDim);border-radius:12px;padding:20px 22px;font-size:16.5px;line-height:1.6}
.note.warn{border-left-color:var(--warn)}
.note b{color:var(--ink)}

/* bloque de servicio dentro del artículo */
.svc{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--lineL);border-radius:14px;padding:22px 24px}
.svc>div b{display:block;font-size:17px;letter-spacing:-.02em;color:var(--ink);margin-bottom:3px}
.svc>div span{font-size:15px;line-height:1.5;color:var(--mute);display:block}
.prose2 a.btn{text-decoration:none}
.prose2 a.btn-d{color:var(--onD)}
.prose2 a.btn-d:hover{background:var(--petrol2)}
.prose2 a.btn-p{color:#0A0F13}
.prose2 .tocm a{text-decoration:none}
.prose2 .tocm a:hover{background:none;color:var(--ink)}

/* ---------- Artículo: figura con gráfico ---------- */
.fig{background:var(--petrol);color:var(--onD);border-radius:18px;padding:30px 30px 24px;position:relative;overflow:hidden;margin-top:30px}
.fig::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:3px 3px}
.fig>*{position:relative}
.fig .eyebrow{color:var(--acid)}
.fig h4{font-size:21px;letter-spacing:-.025em;font-weight:600;line-height:1.2;margin-top:10px}
.fig .sub{font-size:15px;line-height:1.5;color:var(--onDMute);margin-top:6px;max-width:52ch}
.fig .tip-row{display:flex;justify-content:flex-end;margin-top:22px;font-size:13.5px;color:var(--onDMute)}
.fig .tip-row b{color:var(--onD);font-weight:600;margin-left:6px}
.fig .tip-row::after{content:"";width:1px;height:14px;background:var(--onDFaint);margin-left:10px;align-self:flex-end;transform:translateY(8px)}
.bar{margin:8px 0 22px;border-radius:0 5px 5px 0;overflow:hidden;height:24px}
.bar svg{display:block;width:100%;height:24px}
.bar rect{cursor:default;transition:opacity .15s;outline:none}
.bar rect:hover,.bar rect:focus-visible{opacity:.82}
.lg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--lineD);padding-top:18px}
.lg div{font-size:14px;line-height:1.4;color:var(--onDMute)}
.lg u{text-decoration:none;display:flex;align-items:center;gap:8px}
.lg u::before{content:"";width:12px;height:12px;border-radius:3px;flex:none;background:var(--sw)}
.lg b{display:block;color:var(--onD);font-size:22px;font-weight:600;letter-spacing:-.03em;margin-top:6px}
.lg s{text-decoration:none;font-size:13px;color:var(--onDFaint);font-weight:500;margin-left:6px;letter-spacing:0}
.sw1{--sw:#5F8B99}.sw2{--sw:#B4CCD3}.sw3{--sw:#D8FF00}
.fig .src{font-size:12.5px;color:var(--onDFaint);margin-top:18px}
.ctip{position:fixed;z-index:90;pointer-events:none;background:#0A0F13;color:#F1F0EB;font-size:13px;line-height:1.35;padding:8px 11px;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);transform:translate(-50%,-100%);margin-top:-12px;white-space:nowrap;opacity:0;transition:opacity .12s}
.ctip.on{opacity:1}
.ctip b{display:block;font-size:15px;font-weight:600}

/* ---------- Artículo: CTA, autor y relacionados ---------- */
.pcta{background:var(--petrol);color:var(--onD);border-radius:18px;padding:36px 36px 34px;margin-top:60px;position:relative;overflow:hidden}
.pcta::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;background:rgba(216,255,0,.09)}
.pcta>*{position:relative}
.pcta h3{font-size:clamp(23px,2.4vw,29px);color:var(--onD);margin:0 0 10px;max-width:22ch}
.pcta p{color:var(--onDMute);font-size:16px;line-height:1.6;max-width:56ch}
.pcta .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.prose2 .pcta a.btn-g{color:var(--onD);border-color:rgba(241,240,235,.3)}
.prose2 .pcta a.btn-g:hover{background:rgba(241,240,235,.08)}
.prose2 .pcta a.btn-p:hover{background:#E7FF3D}
.pauthor{display:flex;gap:18px;align-items:center;border-top:1px solid var(--lineL);margin-top:56px;padding-top:28px}
.pauthor img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.pauthor b{display:block;font-size:16px;color:var(--ink)}
.pauthor p{font-size:14.5px;line-height:1.5;color:var(--mute);margin-top:3px}
.prel{padding:72px 0 96px;border-top:1px solid var(--lineL);background:var(--panel);margin-top:72px}
.prel h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:34px}
.prel .bgrid{margin-top:0}

/* ---------- Artículo: piezas heredadas de los artículos ya publicados ---------- */
.prose2 table caption{text-align:left;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-bottom:10px;caption-side:top}
.tablewrap{overflow-x:auto}
.prose2 .pcta p a{color:var(--onD);text-decoration-color:rgba(241,240,235,.5)}
.prose2 .pcta p a:hover{background:none;text-decoration-color:var(--acid)}
.pnote{font-size:13.5px;line-height:1.6;color:var(--mute);margin-top:18px}
.pnote b{color:var(--ink)}
@media(max-width:640px){
  .prose2 table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14.5px}
  .prose2 td,.prose2 th{padding:8px 8px}
}

/* ---------- Adaptación a pantallas ---------- */
@media(max-width:1100px){
  .pbody{grid-template-columns:minmax(0,720px);gap:0}
  .toc{display:none}
  .tocm{display:block;border:1px solid var(--lineL);border-radius:12px;background:var(--panel);padding:4px 18px;font-size:15px}
  .tocm summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .tocm summary::-webkit-details-marker{display:none}
  .tocm summary::after{content:"+";font-size:20px;color:var(--mute);font-weight:400}
  .tocm[open] summary::after{content:"–"}
  .tocm a{display:block;padding:9px 0;border-top:1px solid var(--lineL);color:var(--mute);text-decoration:none}
}
@media(max-width:1000px){
  .bfeat{grid-template-columns:1fr}
  .bgrid{grid-template-columns:1fr 1fr}
  .bnews{grid-template-columns:1fr}
}
@media(max-width:640px){
  .bhead{padding:48px 0 44px}
  .bfilters{top:70px}
  .bgrid{grid-template-columns:1fr;gap:34px}
  .bfeat .tx{padding:26px 22px 26px}
  .bsec{padding:30px 0 64px}
  .phero{padding:40px 0 96px}
  .pcover{margin-top:-64px}
  .pcover img{border-radius:12px}
  .pbody{padding:40px 18px 20px}
  .prose2{font-size:17px}
  .prose2 .lead-in{font-size:19px}
  .svc{grid-template-columns:1fr}
  .fig{padding:24px 20px 20px;border-radius:14px}
  .lg{grid-template-columns:1fr;gap:12px}
  .lg b{display:inline;font-size:17px;margin:0 0 0 20px}
  .lg div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
  .pcta{padding:28px 22px}
  .prel{padding:52px 0 72px;margin-top:52px}
}

/* Tabla ancha (4+ columnas): en móvil se desplaza en lateral en vez de aplastar columnas */
.prose2 .tablewrap table.wide{min-width:640px}
/* Página de temas: /blog/ecommerce (23-oct-2026) */
.hubnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hubnav a{color:var(--onD);text-decoration:none;font-size:14px;font-weight:600;padding:8px 14px;border:1px solid rgba(241,240,235,.25);border-radius:999px}
.hubnav a:hover{border-color:var(--acid);color:var(--acid)}
.hubg{margin-top:72px;scroll-margin-top:90px}
.hubg:first-child{margin-top:8px}
.hubg h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:10px}
.hubg>p{color:var(--mute);max-width:64ch;font-size:16px;line-height:1.55}
.hubg .bgrid{margin-top:30px}
@media(max-width:640px){.hubg{margin-top:52px}.hubnav a{font-size:13px;padding:7px 12px}}
.hublink{margin-top:18px;font-size:15px;color:var(--onD)}