/* Shared header / top navigation / footer — used on EVERY page. */
/* Site-wide text size: +10% (2026-10-10). All font sizes are rem/em, so this scales everything. */
html{font-size:110%}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#3b82f6;color:#fff;padding:8px 12px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.topbar{background:#050505;border-bottom:1px solid var(--line,#262a33);font-size:.82rem;color:var(--muted,#a6adbb)}
.topbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;padding:7px 0}
.topbar-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.topbar a{color:var(--muted,#a6adbb)} .topbar a:hover{color:#fff}
header.site-header{position:sticky;top:0;z-index:30;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.96);border-bottom:1px solid var(--line,#262a33);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.site-brand{display:flex;align-items:center;gap:12px;color:var(--ink,#f2f4f8)!important;text-decoration:none!important;min-width:0}
.site-logo{flex:0 0 auto;display:block;height:44px;width:auto}
.site-logo img{height:44px;width:auto;display:block}
.site-brand-text strong{display:block;font-size:.95rem;line-height:1.2}
.site-brand-text small{display:block;font-size:.7rem;color:var(--muted,#a6adbb);letter-spacing:.08em;text-transform:uppercase}
.brandbar-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hdr-phone{color:var(--ink,#f2f4f8)!important;font-weight:800;font-size:1.05rem;white-space:nowrap}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:9px 16px;font-weight:800;background:#22c55e;color:#06210f!important;text-decoration:none!important;white-space:nowrap;box-shadow:0 6px 18px rgba(34,197,94,.3)}
.nav-cta:hover{filter:brightness(1.08)}
.nav-toggle{display:none;align-items:center;gap:8px;background:transparent;border:1px solid var(--line,#262a33);color:var(--ink,#f2f4f8);border-radius:12px;padding:9px 12px;font:inherit;font-weight:700;cursor:pointer}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px} .nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
.mainnav{background:#0a0a0a;border-top:1px solid var(--line,#262a33)}
.mainnav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.mainnav-list>li{position:relative}
.mainnav-list>li>a,.dd-toggle{display:block;padding:12px 14px;color:var(--ink,#f2f4f8)!important;font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none!important;background:transparent;border:0;font-family:inherit;cursor:pointer;border-bottom:3px solid transparent}
.mainnav-list>li>a:hover,.dd-toggle:hover,.mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-bottom-color:#3b82f6;background:rgba(59,130,246,.08)}
.mainnav-list>li.li-cta{margin-left:auto}
.mainnav-list>li.li-cta>a.nav-cta{padding:8px 18px;margin:4px 0;border-bottom:0;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;background:#22c55e;color:#06210f!important}
.mainnav-list>li.li-cta>a.nav-cta:hover,.mainnav-list>li.li-cta>a.nav-cta[aria-current="page"]{background:#2fd56b;border-bottom:0}
@media (min-width:981px){.brandbar .nav-cta-quote{display:none}}
.dd-caret{font-size:.75em;margin-left:2px}
.dd-menu{list-style:none;margin:0;padding:6px;position:absolute;left:0;top:100%;min-width:250px;background:#111;border:1px solid var(--line,#262a33);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.45);display:none;z-index:40}
.dd-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink,#f2f4f8)!important;text-decoration:none!important;font-size:.93rem}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:rgba(59,130,246,.15)}
.has-dd.open>.dd-menu{display:block}
@media (hover:hover) and (min-width:981px){.has-dd:hover>.dd-menu,.has-dd:focus-within>.dd-menu{display:block}}
main [id]{scroll-margin-top:130px}
/* ---- Mobile: hamburger ---- */
@media (max-width:980px){
  .topbar-loc{display:none}
  .topbar-in{justify-content:center}
  .hdr-phone{display:none}
  .nav-toggle{display:inline-flex}
  .mainnav{border-top:0}
  .js .mainnav{display:none}
  .js .site-header.menu-open .mainnav{display:block;max-height:calc(100vh - 64px);overflow-y:auto;border-top:1px solid var(--line,#262a33)}
  .mainnav-list{flex-direction:column;align-items:stretch;padding:6px 0 12px}
  .mainnav-list>li>a,.dd-toggle{width:100%;text-align:left;padding:14px 8px;font-size:.95rem;border-bottom:1px solid var(--line,#262a33)}
  .mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-bottom-color:var(--line,#262a33);border-left:3px solid #3b82f6}
  .dd-menu{position:static;display:none;box-shadow:none;border:0;background:#000;min-width:0;padding:4px 0 4px 14px;border-radius:0}
  .no-js .dd-menu,html:not(.js) .dd-menu{display:block}
  .mainnav-list>li.li-cta{margin:12px 0 0}
  .mainnav-list>li.li-cta>a.nav-cta{display:flex;padding:14px;border-left:0}
  main [id]{scroll-margin-top:80px}
}
@media (max-width:420px){
  .site-brand-text strong{font-size:.82rem}
  .site-brand-text small{display:none}
  .nav-cta-quote{padding:8px 12px;font-size:.85rem}
  .nav-toggle-label{display:none}
}
/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line,#262a33);padding:32px 0 56px;margin-top:20px;color:var(--muted,#a6adbb);font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
.footer-grid strong{color:var(--ink,#f2f4f8)}
.footer-grid p{margin:8px 0 0;line-height:1.8}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff!important;text-decoration:none!important;font-weight:800;padding:14px 18px;border-radius:999px;box-shadow:0 12px 30px rgba(37,211,102,.45)}
.wa-float:hover{filter:brightness(1.06);text-decoration:none}
.wa-float svg{width:22px;height:22px;flex-shrink:0}
@media (max-width:520px){.wa-float span{display:none}.wa-float{padding:16px;border-radius:50%}}
@media (max-width:640px){.topbar-links a[href^="mailto:"]{display:none}.topbar{font-size:.8rem}}

/* ---- Work photos (homepage "Our work" grid + photos on service pages) ---- */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.work-grid.cols3{grid-template-columns:repeat(3,1fr)}@media(max-width:860px){.work-grid.cols3{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.work-grid.cols3{grid-template-columns:1fr}}
.work-photo{margin:0;background:#111;border:1px solid #262a33;border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.work-photo a{display:block;color:inherit;text-decoration:none}
.work-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.work-photo figcaption{padding:12px 14px;color:#a6adbb;font-size:.9rem;line-height:1.45}
.work-photo figcaption b{display:block;color:#f2f4f8;font-size:.95rem;margin-bottom:2px}
.work-photo figcaption .more{color:#3b82f6}
.work-photo:hover{border-color:#3b82f6}

/* ---- Wide-screen layout (shared by ALL pages: nav.css loads last, after site.css / inline hub styles) ----
   Dell-style: header, hero, card rows and photo grids use nearly the full viewport on big monitors
   (container = min(1760px, 100% minus side gutters); gutters 16px on phones up to 48px on wide screens).
   Prose paragraphs keep a readable ~70ch line length. */
:root{--wrap-max:1760px;--gutter:clamp(16px,3vw,48px);--measure:75ch}
.wrap{width:min(var(--wrap-max),calc(100% - 2*var(--gutter)));margin-left:auto;margin-right:auto}
.prose p,.prose li,.lead,.sub,.faq details p,.page-hero p{max-width:var(--measure)}
html,body{overflow-x:clip}
img,iframe,video{max-width:100%}
@media (min-width:1280px){
  .work-grid:not(.cols3){grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
  .hero{gap:56px}
  /* card rows: 2-up card grids become 3-up so cards fill the wide row */
  .grid2:has(>.card:nth-child(3n):last-child){grid-template-columns:repeat(3,1fr)}
  /* long prose blocks flow into 2 readable columns instead of one narrow left column */
  .wrap.prose{columns:2;column-gap:56px}
  .wrap.prose>h2,.wrap.prose>.sub{column-span:all}
  .wrap.prose h3{break-after:avoid;margin-top:0}
  .wrap.prose p,.wrap.prose ul,.wrap.prose ol,.wrap.prose li{break-inside:avoid}
  .wrap.prose p,.wrap.prose li{max-width:none}
}
@media (min-width:1600px){
  .grid3,.menu,.yt-grid,.tiles{gap:24px}
  .work-grid{gap:24px}
  .work-grid.cols3:has(>.work-photo:nth-child(4n):last-child){grid-template-columns:repeat(4,1fr)}
}




/* ---- Gabak USA: black theme (2026-10-10) ---- */
html,body{background:#000}
.site-brand-text{border-left:1px solid #2a2a2a;padding-left:12px}
@media (max-width:600px){.site-brand-text{display:none}.site-logo,.site-logo img{height:36px}}
/* TEST banner (staging only, injected by tools/build_staging.py) */
.staging-banner{background:#b91c1c;color:#fff;text-align:center;font-weight:800;font-size:.85rem;letter-spacing:.06em;padding:6px 10px}

/* ==== Gabak Tech YouTube brand theme (2026-10-10) ====
   Colors pulled from the @gabaktech YouTube channel art:
   banner navy #031F44 · banner pill blue #194081 · banner green "CURSOS y CONSULTORÍA" #00F000
   banner light gray #CAD1D2 · banner slate #616F84 · avatar "EN VIVO" red #E01018
   This block loads last and overrides the old black/blue theme on every page. */
:root{
  --bg:#031f44; --card:#0a2b59; --ink:#ffffff; --muted:#cad1d2; --line:#1f3f70;
  --accent:#4f8ff7; --accent2:#00f000; --brand-navy:#031f44; --brand-navy-deep:#021733;
  --brand-blue:#194081; --brand-green:#00f000; --brand-red:#e01018; --brand-slate:#616f84;
  --shadow:0 20px 50px rgba(1,10,26,.45);
}
body{background:var(--brand-navy);color:var(--ink)}
a{color:#6ea4ff}
.skip-link{background:var(--brand-blue)}
.topbar{background:var(--brand-navy-deep);border-bottom-color:var(--line)}
header.site-header{background:rgba(2,23,51,.97);border-bottom-color:var(--line);box-shadow:0 6px 18px rgba(1,10,26,.4)}
.mainnav{background:var(--brand-blue);border-top-color:#2a5398}
.mainnav-list>li>a:hover,.dd-toggle:hover,.mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-bottom-color:var(--brand-green);background:rgba(255,255,255,.08)}
.dd-menu{background:#0a2b59;border-color:var(--line)}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:rgba(0,240,0,.12)}
.nav-cta,.mainnav-list>li.li-cta>a.nav-cta{background:var(--brand-green);color:var(--brand-navy)!important;box-shadow:0 6px 18px rgba(0,240,0,.28)}
.mainnav-list>li.li-cta>a.nav-cta:hover,.mainnav-list>li.li-cta>a.nav-cta[aria-current="page"]{background:#3dff3d}
.nav-toggle{border-color:var(--line)}
@media (max-width:980px){
  .mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-left-color:var(--brand-green)}
  .dd-menu{background:var(--brand-navy-deep)}
}
.btn{background:var(--brand-blue);color:#fff;box-shadow:0 8px 24px rgba(25,64,129,.55);border:1px solid #2a5398}
.btn.secondary{background:transparent;border:1px solid #3a5f96;color:#fff}
.btn-wa{background:#25D366;border-color:#25D366;box-shadow:0 8px 24px rgba(37,211,102,.35)}
.kicker,.prod .pcat,.price.free{color:var(--brand-green)}
.pill,.chip,.cat-pills a,.social a{background:var(--brand-navy-deep);border-color:var(--line)}
.cat-pills a:hover,.cat-pills a[aria-current="page"]{border-color:var(--brand-green);background:rgba(0,240,0,.1)}
.hero-card,.cta-band{background:linear-gradient(180deg,#0d3368,#062450);border-color:var(--line)}
.card,.yt-card,.tile,.prod,.buy-box,.faq details{background:var(--card);border-color:var(--line)}
.tile:hover,a.card:hover,.prod:hover,.social a:hover,.work-photo:hover{border-color:var(--brand-green)}
.card .icon{background:linear-gradient(135deg,#123270,#2a5bb0);box-shadow:0 12px 28px rgba(25,64,129,.55),inset 0 0 0 1px rgba(255,255,255,.22)}
.card .icon.green{background:linear-gradient(135deg,#00a800,#00f000);color:var(--brand-navy);box-shadow:0 12px 28px rgba(0,240,0,.3),inset 0 0 0 1px rgba(255,255,255,.22)}
.icon.red{background:linear-gradient(135deg,#a80c12,#e01018)!important;box-shadow:0 12px 28px rgba(224,16,24,.4),inset 0 0 0 1px rgba(255,255,255,.22)!important}
.card-media,.yt-card a.thumb,.yt-playlist,.map-frame,.yt-embed{background:var(--brand-navy-deep)}
.card-media::after{background:linear-gradient(transparent,rgba(3,31,68,.85))}
.yt-card .play span{background:var(--brand-red)}
.prod a.pimg,.product-top .pimage{background:var(--brand-navy-deep)}
input,select,textarea{background:var(--brand-navy-deep);border-color:#2a4a7c;color:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-green);outline-offset:1px;border-color:var(--brand-green)}
.work-photo{background:var(--card);border-color:var(--line)}
.work-photo figcaption{color:var(--muted)}
.work-photo figcaption .more{color:var(--brand-green)}
.site-footer,footer{border-top-color:var(--line);background:var(--brand-navy-deep)}
.staging-banner{background:var(--brand-red)!important}