/* ============================================================
   Direccion C · grafito + titanio (26-sep-2026)
   Capa final para las paginas interiores que venian del "suelo oscuro".
   Se enlaza al FINAL del body (despues de polish.css) y todo cuelga de
   body#tc: las capas viejas usan !important con selectores de hasta
   (0,9,2), asi que el ID es lo unico que les gana sin pelear regla a regla.
   Secciones claras (#FFF / #F5F5F7), capitulos negros con rejilla,
   un solo acento (titanio) y botones en pildora.
   ============================================================ */

/* ---------- Cabecera pildora (igual que homepage) ---------- */
#tc header#ttTop{position:sticky;top:0;z-index:50;background:transparent;border:0;
  padding:clamp(10px,1.6vw,18px) clamp(12px,3vw,28px) 0;font-family:"IBM Plex Sans",system-ui,sans-serif}
#tc header#ttTop .tt-bar{max-width:1360px;height:60px;margin:0 auto;padding:0 10px 0 24px;border-radius:999px;
  display:flex;align-items:center;gap:28px;background:rgba(58,66,76,.86);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px -16px rgba(0,0,0,.55);
  transition:height .3s,box-shadow .3s,border-color .3s}
#tc header#ttTop.scrolled .tt-bar{height:54px;box-shadow:0 18px 44px -18px rgba(0,0,0,.65);border-color:rgba(255,255,255,.14)}
#tc header#ttTop .tt-brand{text-decoration:none;display:flex;align-items:baseline;gap:10px;margin-right:auto;white-space:nowrap}
#tc header#ttTop .tt-brand b{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.02em;color:#F5F5F7 !important}
#tc header#ttTop .tt-brand span{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:rgba(245,245,247,.62) !important}
#tc header#ttTop nav{display:flex;gap:26px;font-size:.95rem}
#tc header#ttTop nav a{text-decoration:none;color:rgba(245,245,247,.72) !important;white-space:nowrap;font-weight:400}
#tc header#ttTop nav a:hover,#tc header#ttTop nav a[aria-current]{color:#F5F5F7 !important}
#tc header#ttTop nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:#C9C2B6}
#tc header#ttTop .tt-cta{display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:.97rem;
  font-family:"IBM Plex Sans",system-ui,sans-serif;letter-spacing:0;text-transform:none;
  background:#C9C2B6 !important;color:#1D1D1F !important;padding:10px 18px;border-radius:999px;white-space:nowrap;transition:background .2s}
#tc header#ttTop .tt-cta:hover{background:#DDD7CC !important}
@media (max-width:1180px){#tc header#ttTop .tt-bar{gap:18px}#tc header#ttTop nav{gap:18px;font-size:.9rem}#tc header#ttTop .tt-brand span{display:none}}
@media (max-width:1000px){#tc header#ttTop nav{display:none}}
@media (max-width:520px){#tc header#ttTop .tt-bar{height:54px;padding:0 6px 0 16px;gap:12px}
  #tc header#ttTop .tt-brand b{font-size:1.05rem}#tc header#ttTop .tt-cta{padding:8px 12px;font-size:.8rem}}

/* ---------- Suelo claro ---------- */
#tc{background:#FFFFFF !important;color:#1D1D1F;
  --navy:#000000;--navy-panel:#F5F5F7;--tt-ink-dark:#000000;
  --silver:#F5F5F7;--silver-2:#ECECEF;--paper:#F5F5F7;--paper-deep:#ECECEF;--line:#E3E3E8;
  --charcoal:#1D1D1F;--gray:#515154;--champagne-tx:#6F685C;--radius-card:24px;--radius-pill:999px}
#tc::before,#tc::after{content:none !important;background:none !important}
#tc main,#tc .page,#tc article{background:transparent !important}
#tc main section,#tc main > .band,#tc main > div.sec{background:#FFFFFF !important;background-image:none !important;border-top:0 !important}
#tc main section:nth-of-type(even){background:#F5F5F7 !important}
#tc main section::before,#tc main section::after{content:none !important}

/* Texto sobre claro */
#tc main :is(h1,h2,h3,h4,h5,b,strong,summary,dt,.h-section,.h-display,.section-title,.u-h2,.ttl,.big,.v){color:#1D1D1F !important}
#tc main :is(p,li,dd,td,th,blockquote,figcaption,label,.lead,.u-lead,.u-body,.roles,.q,.a,.n,.sub,.micro,.meta,.post-meta){color:#515154 !important}
#tc main :is(.eyebrow,.kicker,.section-tag,.num,.u-label,.capa-num,.tool-index,.fn,.std,.radar-badge,.f-kbd,.bloque-h,cite,.crumbs,.tag,.oic,.post-next-kicker,.u-std,.u-kicker,.u-eyebrow,.u-tag,.u-num){color:#6F685C !important}
#tc main .eyebrow::before,#tc main .eyebrow::after{background:#6F685C !important}
#tc main .accent,#tc main mark{color:#6F685C !important;background:transparent !important}
#tc main a:not(.btn):not(.btn-solid):not(.btn-primary):not(.btn-light):not(.btn-outline):not(.u-btn):not(.u-btn--solid):not(.u-btn--ghost):not(.nav-btn):not(.tt-cta):not(.tt-brand):not(.footer-logo){color:#6F685C !important}
#tc main :is(.ico,svg.ico,.icon,.plus,.oic svg){stroke:#6F685C !important;color:#6F685C !important}
#tc main hr{border-color:#E3E3E8 !important}

/* Botones: pildora, grafito sobre claro */
#tc main :is(.btn,.btn-solid,.btn-primary,.btn-light,.u-btn--solid,.nav-btn){background:#1D1D1F !important;color:#FFFFFF !important;
  border:0 !important;border-radius:999px !important;box-shadow:none !important;
  font-family:"IBM Plex Sans",system-ui,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important}
#tc main :is(.btn,.btn-solid,.btn-primary,.btn-light,.u-btn--solid,.nav-btn) *{color:#FFFFFF !important}
#tc main :is(.btn,.btn-solid,.btn-primary,.btn-light,.u-btn--solid,.nav-btn):hover{background:#424245 !important}
#tc main :is(.btn-outline,.u-btn,.u-btn--ghost){background:transparent !important;color:#1D1D1F !important;border:1px solid #1D1D1F !important;border-radius:999px !important;font-family:"IBM Plex Sans",system-ui,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important}
#tc main :is(.btn-outline,.u-btn,.u-btn--ghost) *{color:#1D1D1F !important}
#tc main :is(.btn,.btn-solid,.btn-primary,.btn-light,.btn-outline,.u-btn) :is(.arr,.arrow){background:transparent !important}

/* Tarjetas y paneles sobre claro */
#tc main :is(.card,.pain,.step,.panel,.u-card,.vs-col,.work,.proof,.tool,.feature,.plan,.price-cell,.medida,.post-next,.post-author,.testimonio,.u-panel,.caja,.fig,.figure,.cta-card,.legal-toc,.gracias-card){
  background:#FFFFFF !important;border:1px solid #E3E3E8 !important;border-radius:24px !important;box-shadow:0 20px 50px -38px rgba(0,0,0,.35) !important}
#tc main section:nth-of-type(odd) :is(.card,.pain,.step,.panel,.u-card,.vs-col,.work,.proof,.tool,.feature,.plan,.price-cell,.medida,.post-next,.post-author,.u-panel,.caja,.cta-card,.legal-toc,.gracias-card){background:#F5F5F7 !important;box-shadow:none !important}
#tc main .faq{background:transparent !important;border:0 !important;border-bottom:1px solid #D2D2D7 !important;border-radius:0 !important;box-shadow:none !important}
#tc main :is(.pill,.chip,.badge){border-radius:999px !important}

/* ---------- Capitulos negros ---------- */
#tc main :is(section,div,aside):is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band){background-color:#000000 !important;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px) !important;background-size:28px 28px !important;color:#F5F5F7}
#tc main :is(section,div,aside):is(.final){background-image:radial-gradient(60% 90% at 85% 0%,rgba(201,194,182,.16) 0%,transparent 60%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px) !important;background-size:auto,28px 28px !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(h1,h2,h3,h4,h5,b,strong,summary,dt,.h-section,.h-display,.ttl,.big,.v){color:#F5F5F7 !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(p,li,dd,td,th,blockquote,figcaption,label,.lead,.u-lead,.u-body,.q,.a,.n,.sub,.micro,.meta){color:#A1A1A6 !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.eyebrow,.kicker,.section-tag,.num,.u-label,.crumbs,.tag,cite,.accent,.radar-badge,.std,.fn,.u-std,.u-kicker,.u-eyebrow,.u-tag,.u-num,.capa-num,.tool-index){color:#C9C2B6 !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) a:not(.btn):not(.btn-solid):not(.btn-primary):not(.btn-light):not(.btn-outline):not(.u-btn):not(.u-btn--solid):not(.u-btn--ghost):not(.nav-btn):not(.tt-cta):not(.tt-brand):not(.footer-logo):not(.x){color:#C9C2B6 !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.btn,.btn-solid,.btn-primary,.btn-light,.u-btn--solid){background:#C9C2B6 !important;color:#1D1D1F !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.btn,.btn-solid,.btn-primary,.btn-light,.u-btn--solid) *{color:#1D1D1F !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.btn,.btn-solid,.btn-primary,.btn-light,.u-btn--solid):hover{background:#DDD7CC !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.btn-outline,.u-btn,.u-btn--ghost){background:transparent !important;color:#F5F5F7 !important;border:1px solid rgba(245,245,247,.5) !important}
#tc main :is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.btn-outline,.u-btn,.u-btn--ghost) *{color:#F5F5F7 !important}
#tc main :is(section,div,aside):is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.card,.pain,.step,.panel,.u-card,.tool,.feature,.fig,.figure,.testimonio,.vs-col,.work,.proof,.plan,.price-cell,.medida,.post-next,.u-panel,.caja,.cta-card,.legal-toc,.gracias-card){background:#111113 !important;border-color:#2A2A2D !important;box-shadow:none !important}

/* ---------- Componentes con color propio (auditoria de contraste) ---------- */
#tc main :is(.post-card-cta,.post-kicker,.rel-kicker,.chip,.mark-q,.qm,.vs-col .tag){color:#6F685C !important}
#tc main .legal-toc a{color:#6F685C !important}
#tc main :is(.rel-title,.edge-note,.edge-note *,summary *){color:#1D1D1F !important}
#tc main :is(.escalera,.chapter-inner) :is(span,.d){color:#6E6E73 !important}
#tc main .steps .step .num{color:#F5F5F7 !important}
#tc main .steps-card .n{color:#1D1D1F !important}
#tc main :is(section,div,aside):is(.hero,.u-hero,.on-dark,.sec-dark,.final,.band) :is(.chip,.post-kicker,.vs-col .tag,.legal-toc a){color:#C9C2B6 !important}

/* Casus: paneles de evidencia que eran oscuros ahora van sobre gris claro */
#tc main :is(.barra,.ev,.campo,.limite,.forma) :is(span:not(.arr),.f,.arch,.ayuda,.d){color:#6E6E73 !important}
#tc main :is(.barra,.ev) :is(.sello.ok,.f){color:#4A453D !important}
#tc main .sello.rev{color:#8A6100 !important}

/* Suelo del footer: negro, como el homepage */
html body#tc footer.tt-footer{background:#000 !important;border-top:1px solid #1D1D1F !important}
html body#tc footer.tt-footer .footer-col a,html body#tc footer.tt-footer .footer-base a{color:#A1A1A6 !important}
html body#tc footer.tt-footer .footer-col a:hover,html body#tc footer.tt-footer .footer-base a:hover{color:#F5F5F7 !important}
#tc :focus-visible{outline-color:#6F685C}
#tc main .pain{padding:clamp(22px,2.4vw,30px) !important}
/* Si la pagina abre con un capitulo negro, el fondo detras del nav tambien es negro (sin franja blanca) */
html body#tc:has(main > :first-child:is(.hero,.u-hero,.on-dark,.sec-dark)){background:#000000 !important}
/* Blog: aire entre las tarjetas de 'Mas del blog' y el footer */
#tc main article.post{padding-bottom:clamp(72px,9vw,120px) !important}