/* ============================================================
   GUÍAS · CAPA DE MARCA juliotalledo.ai
   Override que reskina las guías "neón" al sistema del sitio:
   navy + amarillo #F7C531 + cream + terracota · Anton/Bebas/Fraunces/Inter.
   Carga DESPUÉS del <style> propio de cada guía (gana en la cascada).
   ============================================================ */

/* ---------- 1. REMAPEO DE TOKENS (gana al :root neón) ---------- */
:root{
  --bg:#F5F0E8; --bg-card:#FFFFFF;
  --bg-dark:#08142E; --bg-dark-2:#0D1F45;
  --ink:#0A0A0A; --ink-soft:#46434E; --ink-mute:#8A8690;
  --accent:#0D2B6E;        /* morado → azul navy (legible en cream + avatares) */
  --accent-2:#0D2B6E;      /* naranja → terracota (énfasis sobre cream) */
  --accent-3:#F7C531;      /* dorado → amarillo de marca */
  --line:#0A0A0A; --line-soft:rgba(10,10,10,.12);
  --neon-cyan:#F7C531; --neon-blue:#8FB4E8; --neon-orange:#0D2B6E;
  --neon-purple:#8FB4E8; --neon-yellow:#F7C531; --neon-green:#EDE6D8;
  --highlight:#F7C531; --success:#0D2B6E;
  --c1:#0D2B6E; --c1-soft:rgba(13,43,110,.10);
  --c2:#08142E; --c2-soft:rgba(8,20,46,.08);
  --c3:#0D2B6E; --c3-soft:rgba(13,43,110,.10);
  --c4:#0D1F45; --c4-soft:rgba(13,31,69,.10);
  --c5:#08142E; --c5-soft:rgba(8,20,46,.10);
  --yellow:#F7C531; --navy:#08142E; --terra:#0D2B6E; --cream-2:#EDE6D8;
}

/* ---------- 2. TIPOGRAFÍA ---------- */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;}

/* Titulares grandes → Anton (mayúsculas) */
.hero h1,
.section-head h2,
.neon-diagram-title,
.layer-lbl .ln,
.julio-avatar{
  font-family:'Anton',Impact,sans-serif !important;
}
.hero h1{text-transform:uppercase;letter-spacing:-.4px;line-height:.98;font-weight:400;}
.hero h1 em,.hero h1 .accent-orange{font-style:normal !important;font-weight:400 !important;color:var(--navy) !important;}
.section-head h2{text-transform:uppercase;letter-spacing:-.2px;line-height:1.02;font-weight:400;}
.section-head h2 em,.section-head h2 .orange{font-style:normal !important;color:var(--navy) !important;}
.neon-diagram-title{letter-spacing:-.2px;}
.neon-diagram-title em{font-style:normal !important;color:var(--yellow) !important;}
.julio-avatar{font-weight:400 !important;}

/* Etiquetas, eyebrows, numeritos, badges, tabs → Bebas Neue */
.hero-eyebrow,
.neon-diagram-eyebrow,
.top-bar-inner,
.badge,
.tab-btn,
.tab-btn .tab-num,
.stat-label,
.julio-meta,
.section-label,
.layer-lbl,
.li-chip,
.case-tag,
.kicker,.eyebrow{
  font-family:'Bebas Neue',Impact,sans-serif !important;
  letter-spacing:.1em;
}
.tab-btn{font-size:13px;letter-spacing:.08em;}
.stat-label,.julio-meta,.hero-eyebrow,.neon-diagram-eyebrow{font-size:13px;}

/* Leads, citas y acentos suaves → Fraunces (se conservan) */
.hero-quote,.julio-quote-text{font-family:'Fraunces',Georgia,serif !important;}

/* Código y prompts → JetBrains Mono (se conserva) */
.prompt-block,.code-block,.pm-body,pre,code{font-family:'JetBrains Mono',monospace !important;}

/* ---------- 3. ELEMENTOS FIRMA ---------- */
/* barra amarilla de 5px a la izquierda de los titulares de sección */
.section-head{position:relative;padding-left:24px;}
.section-head::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;background:var(--yellow);}

/* highlighter de marca detrás de strong */
.julio-quote-text strong{background:linear-gradient(180deg,transparent 58%,rgba(247,197,49,.55) 58%) !important;color:var(--navy) !important;}

/* ---------- 4. TOP BAR (navy + volver al hub) ---------- */
.top-bar{background:var(--navy) !important;border-bottom:2px solid var(--yellow) !important;}
.top-bar-inner{color:rgba(255,255,255,.82) !important;}
.badge{background:var(--yellow) !important;color:var(--navy) !important;}
.badge-orange{background:var(--terra) !important;color:#fff !important;}
.badge-purple{background:var(--yellow) !important;color:var(--navy) !important;}
.guia-back-top{color:var(--yellow) !important;text-decoration:none;display:inline-flex;align-items:center;gap:7px;font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:14px;transition:opacity .2s;}
.guia-back-top:hover{opacity:.75;}

/* ---------- 5. TABS (activo navy, número amarillo) ---------- */
.tabs-nav{background:rgba(245,240,232,.96) !important;}
.tab-btn.active{background:var(--navy) !important;color:#fff !important;}
.tab-btn.active .tab-num{color:var(--yellow) !important;}
.tab-btn:hover{background:rgba(8,20,46,.05) !important;color:var(--navy) !important;}
.tab-btn .new-dot{background:var(--terra) !important;}
.tabs-nav-inner::-webkit-scrollbar-thumb{background:var(--yellow) !important;}

/* ---------- 6. STATS / acentos de color ---------- */
.stat::before{background:var(--accent) !important;}
.stat.s2::before{background:var(--terra) !important;}
.stat.s3::before{background:var(--yellow) !important;}
.stat.s4::before{background:var(--navy) !important;}
.stat-num,.stat.s2 .stat-num,.stat.s3 .stat-num,.stat.s4 .stat-num{color:var(--navy) !important;}

/* hero quote bar en terracota */
.hero-quote{border-left-color:var(--terra) !important;}

/* ---------- 7. OUTRO: volver + autor + CTA ---------- */
.guia-outro{background:radial-gradient(ellipse 1200px 600px at 80% 10%,rgba(247,197,49,.08),transparent 60%),var(--navy);color:#fff;padding:72px 0 0;margin-top:64px;}
.guia-outro-wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.guia-back{display:inline-flex;align-items:center;gap:8px;font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:16px;color:var(--yellow);text-decoration:none;margin-bottom:44px;transition:gap .2s;}
.guia-back:hover{gap:14px;}
.guia-author{display:flex;gap:20px;align-items:center;padding:28px;background:rgba(255,255,255,.05);border:1px solid rgba(247,197,49,.22);border-radius:18px;margin-bottom:40px;}
.guia-author .ga-img{width:74px;height:74px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--yellow);}
.guia-author .ga-img img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;}
.guia-author .ga-name{font-family:'Anton',sans-serif;font-size:24px;letter-spacing:-.2px;color:#fff;}
.guia-author .ga-txt{font-family:'Inter',sans-serif;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin-top:4px;}
.guia-author .ga-txt a{color:var(--yellow);font-weight:600;text-decoration:none;}
.guia-cta{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;border-top:1px solid rgba(255,255,255,.12);padding:44px 0 56px;}
.guia-cta h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:1.02;letter-spacing:-.3px;color:#fff;}
.guia-cta h3 .y{color:var(--yellow);}
.guia-cta p{font-family:'Inter',sans-serif;font-size:16px;line-height:1.55;color:rgba(255,255,255,.72);margin-top:10px;max-width:46ch;}
.guia-cta-btn{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:var(--navy);padding:15px 30px;border-radius:100px;text-decoration:none;white-space:nowrap;transition:transform .2s;display:inline-block;}
.guia-cta-btn:hover{transform:translateY(-2px);}
.guia-foot{border-top:1px solid rgba(255,255,255,.12);padding:26px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:14px;color:rgba(255,255,255,.5);}
.guia-foot a{color:rgba(255,255,255,.7);text-decoration:none;}
.guia-foot a:hover{color:var(--yellow);}

@media(max-width:760px){
  .guia-cta{grid-template-columns:1fr;}
  .hero h1{letter-spacing:-.2px;}
}


/* ===== Unificación nav + footer del sitio (guías) ===== */
.site-nav{position:sticky;top:0;z-index:300;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px clamp(20px,5vw,56px);background:rgba(245,240,232,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(10,10,10,.1);}
.site-nav .brand img{height:34px;width:auto;display:block;}
.site-nav .links{display:flex;gap:26px;align-items:center;}
.site-nav .links a{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;text-transform:uppercase;color:rgba(10,10,10,.66);text-decoration:none;transition:color .2s;}
.site-nav .links a:hover{color:#08142E;}
.site-nav .links a.navcta{background:#08142E;color:#fff;padding:9px 18px;}
.site-nav .links a.navcta:hover{background:#F7C531;color:#08142E;}
.site-nav .navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.site-nav .navtoggle span{display:block;width:24px;height:2px;background:#08142E;margin:5px 0;transition:.3s;}
.tabs-nav{top:58px !important;}
@media(max-width:860px){
  .site-nav .links{position:fixed;inset:0 0 0 auto;width:min(82vw,320px);background:#08142E;flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:.3s;padding:40px;z-index:320;}
  .site-nav .links.open{transform:none;}
  .site-nav .links a{color:#fff;font-size:22px;}
  .site-nav .navtoggle{display:block;z-index:330;}
}
.site-footer{background:#08142E;color:rgba(255,255,255,.7);padding:80px clamp(20px,5vw,56px) 36px;font-family:'Inter',sans-serif;}
.site-footer .footer-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;}
.site-footer .fb img{height:46px;width:auto;display:block;margin-bottom:18px;}
.site-footer .footer-brand p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.6);max-width:330px;}
.site-footer .footer-social{display:flex;gap:12px;margin-top:18px;}
.site-footer .footer-social a{width:40px;height:40px;border:1.5px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.25s;}
.site-footer .footer-social a svg{width:18px;height:18px;fill:#fff;transition:.25s;}
.site-footer .footer-social a:hover{background:#F7C531;border-color:#F7C531;}
.site-footer .footer-social a:hover svg{fill:#08142E;}
.site-footer .footer-col h4{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:3px;text-transform:uppercase;color:#F7C531;margin-bottom:18px;}
.site-footer .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0;margin:0;}
.site-footer .footer-col a{font-size:15px;color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s;}
.site-footer .footer-col a:hover{color:#F7C531;}
.site-footer .footer-bottom{max-width:1300px;margin:56px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);}
@media(max-width:860px){.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}}

/* ===== A8g · sin terracota (coherencia con el sitio) + accesibilidad ===== */
.badge-orange{background:var(--navy) !important;color:#fff !important;}
.tab-btn .new-dot,.stat.s2::before{background:var(--yellow) !important;}
.hero-quote{border-left-color:var(--yellow) !important;}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:3px;}
.skip-link{position:absolute;left:8px;top:-64px;z-index:2000;background:#08142E;color:#fff;padding:11px 20px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border-radius:0 0 10px 10px;transition:top .18s ease;}
.skip-link:focus{top:0;}