/* ═══════════════════════════════════════════════════════════════════════
   BLOG iTIM.ai — hoja de estilos
   Opción C · "Esquema": el índice es un plano técnico, la entrada es papel.
   Hoja EXTERNA: el sitio sirve una CSP estricta (style-src 'self'), por lo
   que aquí no puede haber nada inline ni orígenes externos salvo las
   tipografías de Google ya permitidas.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #0C0C12;              /* fondo del índice            */
  --paper:      #FBFBF9;              /* fondo de la entrada         */
  --gold:       #D4A537;
  --gold-lt:    #F5C842;
  --purple:     #6B3FA0;
  --purple-lt:  #8B5FC0;
  --line-d:     rgba(255,255,255,.20);
  --line-l:     rgba(0,0,0,.16);
  --txt-d:      rgba(255,255,255,.82);
  --txt-d-dim:  rgba(255,255,255,.48);
  --txt-l:      #2E2E34;
  --txt-l-dim:  #6B6A66;
  --mono:       'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:      'Cormorant Garamond', Georgia, serif;
  --read:       'Lora', Georgia, serif;
  --grid:       40px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}

/* Accesibilidad: foco visible en todo elemento interactivo */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}
/* Saltar al contenido (lector de pantalla / teclado) */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--gold);color:var(--ink);padding:10px 18px;
  font-family:var(--mono);font-size:13px;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

/* ─────────────────────────── NAVEGACIÓN ─────────────────────────── */
.bnav{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 40px;position:sticky;top:0;z-index:50;
}
.bnav-logo{display:inline-flex;align-items:center;text-decoration:none}
.bnav-logo img{height:38px;width:auto;object-fit:contain;display:block}
.bnav-links{display:flex;gap:28px;align-items:center}
.bnav-links a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:1.6px;
  text-decoration:none;padding-bottom:4px;transition:color .18s;
}
.bnav-burger{display:none;background:none;border:0;font-size:21px;cursor:pointer;padding:4px 8px}

/* ── nav sobre fondo oscuro (índice) ── */
.t-dark .bnav{background:rgba(12,12,18,.93);border-bottom:1px dashed var(--line-d)}
.t-dark .bnav-links a{color:rgba(255,255,255,.44)}
.t-dark .bnav-links a:hover{color:#fff}
.t-dark .bnav-links a[aria-current="page"]{color:var(--gold);border-bottom:1px solid var(--gold)}
.t-dark .bnav-burger{color:rgba(255,255,255,.6)}

/* ── nav sobre fondo claro (entrada) ── */
.t-light .bnav{background:rgba(251,251,249,.93);border-bottom:1px dashed var(--line-l)}
.t-light .bnav-links a{color:var(--txt-l-dim)}
.t-light .bnav-links a:hover{color:#16161C}
.t-light .bnav-links a[aria-current="page"]{color:var(--purple);border-bottom:1px solid var(--purple)}
.t-light .bnav-burger{color:var(--txt-l-dim)}

/* Menú móvil desplegable */
.bmob{display:none;flex-direction:column;padding:0 40px 18px}
.bmob.open{display:flex}
.bmob a{
  font-family:var(--mono);font-size:14px;letter-spacing:1.4px;
  text-decoration:none;padding:12px 0;
}
.t-dark .bmob{background:rgba(12,12,18,.97);border-bottom:1px dashed var(--line-d)}
.t-dark .bmob a{color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.06)}
.t-light .bmob{background:rgba(251,251,249,.97);border-bottom:1px dashed var(--line-l)}
.t-light .bmob a{color:var(--txt-l-dim);border-bottom:1px solid rgba(0,0,0,.06)}

/* ═════════════════════ 1 · ÍNDICE (plano técnico) ═════════════════════ */
.t-dark{
  background:var(--ink);color:var(--txt-d);font-family:var(--mono);
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  min-height:100vh;
}
.bhead{padding:64px 40px 0;position:relative;max-width:1180px;margin:0 auto}
.bstamp{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-d);
  padding:5px 12px;font-size:10.5px;letter-spacing:2.4px;
  color:var(--txt-d-dim);margin-bottom:24px;
}
.bstamp b{color:var(--gold);font-weight:500}
.bhead h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(58px,9vw,104px);line-height:.92;color:#fff;letter-spacing:-3px;
}
.blede{font-size:14.5px;line-height:1.95;color:var(--txt-d-dim);max-width:520px;margin-top:20px}
/* cotas de plano */
.bdim{
  position:absolute;right:40px;top:78px;text-align:right;
  font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.26);line-height:2.1;
}
.bdim span{color:var(--gold)}
.brule{
  margin:44px auto 42px;max-width:1100px;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 7px,transparent 7px 15px);
}

/* fichas de entrada */
.bcards{max-width:1180px;margin:0 auto;padding:0 40px 90px;display:flex;flex-direction:column;gap:22px}
.bcard{
  position:relative;display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line-d);background:rgba(255,255,255,.017);
  padding:34px 38px 30px;transition:border-color .2s,background .2s,transform .2s;
}
.bcard:hover{border-color:rgba(212,165,55,.55);background:rgba(212,165,55,.04);transform:translateY(-2px)}
.bcard-n{
  position:absolute;top:-1px;left:-1px;background:var(--gold);color:var(--ink);
  font-size:10.5px;font-weight:600;letter-spacing:1.4px;padding:4px 10px;
}
.bcorner{position:absolute;width:9px;height:9px;border:1px solid rgba(212,165,55,.55)}
.bc1{top:-1px;right:-1px;border-left:0;border-bottom:0}
.bc2{bottom:-1px;left:-1px;border-right:0;border-top:0}
.bc3{bottom:-1px;right:-1px;border-left:0;border-top:0}
.bmeta{font-size:10.5px;letter-spacing:2.2px;color:rgba(255,255,255,.38);margin-top:8px}
.bcard h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(31px,4.2vw,46px);
  color:#fff;line-height:1.08;margin:12px 0 5px;letter-spacing:-.6px;
}
.bcard-sub{font-size:13.5px;color:var(--gold);letter-spacing:.3px;margin-bottom:16px;line-height:1.5}
.bcard-ex{font-size:14px;line-height:1.85;color:rgba(255,255,255,.5);max-width:74ch}
.bcard-go{font-size:11.5px;letter-spacing:1.8px;color:var(--gold);margin-top:22px;display:inline-block}
.bcard-next{border-style:dashed;opacity:.45;padding:26px 38px;pointer-events:none}
.bcard-next .ph{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.3)}

/* ═════════════════ 2 · ENTRADA (papel milimetrado) ═════════════════ */
.t-light{
  background:var(--paper);color:var(--txt-l);font-family:var(--mono);
  background-image:
    linear-gradient(rgba(0,0,0,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.032) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  min-height:100vh;
}
.bwrap{max-width:760px;margin:0 auto;padding:48px 32px 0}
.bback{
  font-size:12px;letter-spacing:1.8px;color:#8B8983;
  margin-bottom:30px;display:inline-block;text-decoration:none;
}
.bback:hover{color:var(--purple)}
/* ficha técnica del artículo */
.bsheet{
  border:1px solid var(--line-l);border-left:3px solid var(--gold);
  padding:16px 20px;margin-bottom:32px;background:#fff;
  display:grid;grid-template-columns:auto 1fr;gap:5px 22px;
  font-size:10.5px;letter-spacing:1.5px;
}
.bsheet dt{color:#9A9892}
.bsheet dd{color:#3A3936}
.bpost h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,7vw,72px);line-height:1.02;color:#16161C;letter-spacing:-2px;
}
.bpost .bdeck{font-size:clamp(14px,2vw,16px);color:var(--purple);margin-top:16px;letter-spacing:.2px;line-height:1.6}
.brulel{
  height:1px;margin:32px 0 8px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 7px,transparent 7px 15px);
}
/* cuerpo de lectura: serif, generoso */
.bbody p{font-family:var(--read);font-size:19.5px;line-height:1.95;color:var(--txt-l);margin-top:26px}
.bbody p.lead{font-size:22px;color:#16161C}
.bbody strong{color:#16161C;font-weight:600}
.bbody em{font-style:italic}
/* estrofas: cada línea es un <p> con margen corto */
.bverse{margin:26px 0}
.bverse p{font-family:var(--read);font-size:19.5px;line-height:1.75;color:var(--txt-l);margin:0 0 7px}
.bverse p:last-child{margin-bottom:0}
/* citas */
.bq{
  border:1px solid var(--line-l);border-left:3px solid var(--gold);
  background:#fff;padding:26px 30px;margin:36px 0;
}
.bq p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.4vw,31px);line-height:1.32;color:#16161C;margin:0}
.bq cite{display:block;margin-top:12px;font-size:11px;letter-spacing:1.8px;color:#8B8983;font-style:normal}
/* secciones numeradas */
.bsec{font-size:10.5px;letter-spacing:2.2px;color:var(--gold);margin-top:48px}
.bbody h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,40px);
  color:#16161C;margin:4px 0 0;letter-spacing:-.6px;line-height:1.15;
}
.bsignoff{font-family:var(--read);font-style:italic;font-size:19px;color:var(--purple);margin-top:34px}
/* enlace de marca dentro del texto */
.blink{
  color:var(--purple);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(107,63,160,.35);transition:.18s;
}
.blink:hover{color:var(--purple-lt);border-bottom-color:var(--purple-lt);background:rgba(107,63,160,.07)}

/* navegación entre paneles/entradas */
.bpanels{display:flex;gap:0;max-width:760px;margin:0 auto;padding:0 32px;
  border-bottom:1px solid var(--line-l);flex-wrap:wrap}
.bstep{
  background:none;border:0;cursor:pointer;font-family:var(--mono);
  font-size:11px;letter-spacing:1.6px;color:#9A9892;
  padding:14px 16px 12px;border-bottom:2px solid transparent;transition:.18s;
}
.bstep:hover{color:#16161C}
.bstep[aria-selected="true"]{color:var(--purple);border-bottom-color:var(--gold)}
.bpanel{display:none}
.bpanel.is-active{display:block}

.bfoot{max-width:760px;margin:56px auto 0;padding:0 32px 80px}
.bnext{
  border:1px solid var(--line-l);padding:22px 26px;background:#fff;
  display:flex;justify-content:space-between;align-items:center;
  text-decoration:none;color:inherit;transition:border-color .2s;
}
.bnext:hover{border-color:var(--gold)}
.bnext-l{font-size:10.5px;letter-spacing:2px;color:#9A9892}
.bnext-t{font-family:var(--serif);font-size:26px;color:#16161C;margin-top:4px}
.bnext-ar{font-size:22px;color:var(--gold)}

/* cartel SVG del panel 1 */
.bplate{
  background:#fff;border:1px solid rgba(212,165,55,.45);
  padding:14px;margin:0 0 34px;border-radius:2px;
}
.bplate svg{display:block;width:100%;height:auto}
.bplate-cap{font-size:10.5px;letter-spacing:1.6px;color:#8B8983;text-align:center;margin:-22px 0 38px}

/* lema de cierre */
.btag{text-align:center;padding:60px 32px 70px}
.btag .t1{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--gold)}
.btag .t2{font-family:var(--serif);font-style:italic;font-size:21px;margin-top:3px}
.t-dark .btag .t2{color:rgba(255,255,255,.5)}
.t-light .btag .t2{color:#8B8983}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width:860px){
  .bnav{padding:16px 22px}
  .bnav-links{display:none}
  .bnav-burger{display:block}
  .bmob{padding:0 22px 16px}
  .bhead{padding:38px 22px 0}
  .bdim{display:none}
  .brule{margin:30px 22px 26px}
  .bcards{padding:0 22px 60px;gap:16px}
  .bcard{padding:26px 22px 24px}
  .bwrap,.bpanels,.bfoot{padding-left:22px;padding-right:22px}
  .bbody p,.bverse p{font-size:17.5px;line-height:1.9}
  .bbody p.lead{font-size:19px}
  :root{--grid:30px}
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* Impresión: quita la rejilla y el cromado */
@media print{
  .t-dark,.t-light{background:#fff;color:#000;background-image:none}
  .bnav,.bmob,.bpanels,.bfoot,.btag,.bback{display:none}
  .bbody p{font-size:12pt;line-height:1.6}
}

/* ── Cartel SVG (extraído del <style> interno para cumplir la CSP) ── */
.gr-poster text{font-family:'Carlito','Calibri','Nunito',sans-serif;fill:#2C2C2A}
.gr-poster .th{font-size:14px;font-weight:700}
.gr-poster .nm{font-size:11.5px;font-weight:700;fill:#2C2C2A}
.gr-poster .lbl{font-size:11.5px;font-weight:600;paint-order:stroke;stroke-linejoin:round}
.gr-poster .lbl-b{fill:#7A7873;stroke:#FAFAF8;stroke-width:4.5}
.gr-poster .lbl-p{fill:#6B3FA0;stroke:#F7F2FD;stroke-width:4.5}
.gr-poster .lora{font-family:'Lora',Georgia,serif}