/*
Theme Name: NebuLab 2026
Theme URI: https://nebu-lab.com
Author: NebuLab
Description: Tema de NebuLab. Dirección de arte medida sobre los competidores que sí posicionan en México: lienzo crema, acento violeta (el único carril de color libre en esa SERP), Fraunces para display e Inter para cuerpo. Sin sombras en reposo, sin imágenes de contenido, sin dependencias externas de JavaScript.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: nebulab-2026
*/

:root{
  --nl-canvas:#F9F8F4; --nl-canvas-2:#F1EFE9; --nl-surface:#FFFFFF; --nl-line:#E3E0D9;
  --nl-ink:#12121A; --nl-ink-soft:#23232E; --nl-ink-mute:#4A4A57; --nl-mute:#7A7A88;
  --nl-accent:#5B3DF5; --nl-accent-hover:#4A2FD6; --nl-accent-tint:#EFEBFF; --nl-accent-line:#C9C3F5;
  --nl-signal:#17B26A; --nl-signal-tint:#E6F7EF;
  --nl-container:1280px; --nl-gutter:24px; --nl-gutter-lg:40px; --nl-measure:680px;
  --nl-section:112px; --nl-section-sm:72px;
  --nl-r-card:16px; --nl-r-input:10px; --nl-r-pill:999px;
  --nl-shadow-hover:0 14px 34px -18px rgba(18,18,26,.22);
  --nl-shadow-accent:0 8px 22px -10px rgba(91,61,245,.45);
  --font-display:'Fraunces',Georgia,serif;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font-sans);font-size:17px;line-height:1.65;color:var(--nl-ink-mute);
  background:var(--nl-canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

h1,h2,h3{font-family:var(--font-display);color:var(--nl-ink);font-optical-sizing:auto}
h1{font-weight:300;font-size:72px;line-height:.96;letter-spacing:-.03em}
h1 em{font-style:italic;font-weight:400;color:var(--nl-accent)}
.h2-display{font-weight:300;font-size:48px;line-height:1;letter-spacing:-.025em}
.h2-display em{font-style:italic;font-weight:400;color:var(--nl-accent)}
h2{font-weight:400;font-size:34px;line-height:1.22;letter-spacing:-.02em}
h3{font-weight:500;font-size:20px;line-height:1.4;letter-spacing:-.01em}

.wrap{max-width:var(--nl-container);margin-inline:auto;padding-inline:var(--nl-gutter-lg)}
.sec{margin-block:var(--nl-section)}
.measure{max-width:var(--nl-measure)}
.lede{font-size:21px;line-height:1.5;color:var(--nl-ink-mute)}
.meta{font-size:13px;line-height:1.4;color:var(--nl-mute)}
.mono{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nl-mute)}
.cifra{font-family:var(--font-display);font-weight:300;font-size:56px;line-height:1;color:var(--nl-accent)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--nl-r-pill);
  font:500 15px/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:all .2s;border:0}
.btn--primary{background:var(--nl-accent);color:#fff}
.btn--primary:hover{background:var(--nl-accent-hover);transform:translateY(-1px);box-shadow:var(--nl-shadow-accent)}
.btn--ghost{background:transparent;color:var(--nl-ink);border:1px solid var(--nl-line)}
.btn--ghost:hover{border-color:var(--nl-ink);background:var(--nl-canvas-2)}

.card{background:var(--nl-surface);border:1px solid var(--nl-line);border-radius:var(--nl-r-card);
  padding:28px;transition:all .3s}
.card:hover{border-color:var(--nl-accent-line);transform:translateY(-2px);box-shadow:var(--nl-shadow-hover)}
.card p{font-size:15px;line-height:1.6}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}

/* barra superior */
.topbar{background:var(--nl-ink);color:rgba(249,248,244,.8);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:16px}
.topbar a:hover{color:#fff}

/* cabecera */
.hdr{position:sticky;top:0;z-index:60;background:rgba(249,248,244,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--nl-line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{font-family:var(--font-display);font-weight:500;font-size:23px;color:var(--nl-ink);letter-spacing:-.02em}
.logo em{font-style:italic;color:var(--nl-accent)}
.nav{display:flex;gap:4px;align-items:center}
.nav a{font-size:15px;color:var(--nl-ink);padding:8px 14px;border-radius:var(--nl-r-pill);transition:background .2s}
.nav a:hover{background:var(--nl-canvas-2)}
.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-tel{font-size:15px;color:var(--nl-ink);font-weight:500}
.btn--sm{padding:8px 16px;font-size:14px}

/* hero */
.hero{padding-top:76px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{margin-bottom:24px}
.hero .lede{margin-bottom:32px;max-width:620px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero-nota{font-size:14px;color:var(--nl-mute)}
.hero-panel{background:var(--nl-surface);border:1px solid var(--nl-line);border-radius:var(--nl-r-card);padding:28px}
.hero-panel .mono{display:block;margin-bottom:18px}
.panel-row{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--nl-line);font-size:15px}
.panel-row:last-of-type{border-bottom:0}
.panel-row b{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--nl-ink)}
.up{color:var(--nl-signal);font-family:var(--font-mono);font-size:13px;font-weight:500}

/* geo-block */
.geo-block{background:var(--nl-canvas-2);border-left:3px solid var(--nl-accent);
  border-radius:0 var(--nl-r-card) var(--nl-r-card) 0;max-width:70ch;padding:32px 40px;
  font-size:17px;line-height:1.7;color:var(--nl-ink-soft)}

/* tabla */
.tabla{width:100%;border-collapse:collapse;background:var(--nl-surface);
  border:1px solid var(--nl-line);border-radius:var(--nl-r-card);overflow:hidden}
.tabla th{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nl-mute);text-align:left;padding:14px 20px;
  border-bottom:1px solid var(--nl-line)}
.tabla td{padding:0 20px;height:41px;border-bottom:1px solid var(--nl-line);font-size:15px;color:var(--nl-ink-soft)}
.tabla tr:last-child td{border-bottom:0}
.tabla td.num{font-family:var(--font-mono);font-size:14px}
.pos{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 8px;border-radius:var(--nl-r-pill);background:var(--nl-accent-tint);
  color:var(--nl-accent);font-family:var(--font-mono);font-weight:500;font-size:13px}
.tabla-fuente{margin-top:12px}
/* La tabla se desplaza dentro de su caja en vez de empujar la página entera.
   Tiene que valer en cualquier anchura, no solo en móvil: a 900px también desbordaba. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabla-scroll .tabla{min-width:540px}

/* casos */
.caso{border-top:1px solid var(--nl-line);padding-top:22px}
.caso .cifra{font-size:44px;margin-bottom:6px}
.caso h3{margin-bottom:6px}
.caso p{font-size:15px;line-height:1.6}
.caso .mono{display:block;margin-top:12px}

/* proceso: línea de tiempo vertical */
.tl{position:relative;max-width:920px;margin-inline:auto;padding-block:8px}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--nl-line)}
.tl-paso{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:52px}
.tl-paso:last-child{margin-bottom:0}
.tl-nodo{position:absolute;left:50%;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--nl-accent);transform:translateX(-50%);border:3px solid var(--nl-canvas)}
.tl-paso .txt{grid-column:1;text-align:right;padding-right:8px}
.tl-paso:nth-child(even) .txt{grid-column:2;text-align:left;padding-right:0;padding-left:8px}
.tl-paso .txt h3{margin-bottom:6px}
.tl-paso .txt p{font-size:15px;line-height:1.6}
.tl-paso .txt .mono{display:block;margin-bottom:8px}

/* precio: una tarjeta ancha */
.precio{background:var(--nl-surface);border:1px solid var(--nl-line);border-radius:var(--nl-r-card);
  padding:36px;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.precio-cifra{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.precio-lista li{font-size:15px;line-height:1.6;padding-left:26px;position:relative;margin-bottom:9px}
.precio-lista li::before{content:"✓";position:absolute;left:0;top:0;color:var(--nl-signal);font-size:14px;font-weight:700}
.precio-pie{margin-top:22px;padding-top:18px;border-top:1px solid var(--nl-line)}
.precio-otros{display:flex;gap:28px;margin-top:18px;flex-wrap:wrap}
.precio-otros div{font-size:15px}
.precio-otros b{font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--nl-ink);display:block}

/* zonas */
.zonas{display:flex;flex-wrap:wrap;gap:10px}
.zona-pill{border:1px solid var(--nl-line);background:var(--nl-surface);border-radius:var(--nl-r-pill);
  padding:9px 18px;font-size:15px;color:var(--nl-ink-soft);transition:all .2s}
.zona-pill:hover{border-color:var(--nl-accent-line);color:var(--nl-accent)}

/* faq */
.faq details{border-bottom:1px solid var(--nl-line);padding:20px 0}
.faq summary{font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--nl-ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--nl-accent);font-family:var(--font-sans);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;max-width:74ch;font-size:16px}

/* bandas oscuras */
.diagonal{height:60px;background:var(--nl-canvas);clip-path:polygon(0 0,100% 100%,100% 0)}
.banda{background:var(--nl-ink);color:var(--nl-canvas);padding-block:88px}
.banda h2,.banda .h2-display{color:var(--nl-canvas)}
.banda p{color:rgba(249,248,244,.72)}
.banda .cifra{color:#fff}
.banda .mono{color:rgba(249,248,244,.55)}
.banda-datos{border-top:1px solid rgba(249,248,244,.14);margin-top:40px;padding-top:36px}

/* footer */
.ft{background:var(--nl-ink);color:var(--nl-canvas);padding:72px 0 32px}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.ft h4{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nl-accent);margin-bottom:16px}
.ft a,.ft li{font-size:15px;color:rgba(249,248,244,.78);line-height:2}
.ft a:hover{color:#fff}
.ft-marca p{font-size:15px;color:rgba(249,248,244,.72);max-width:36ch;margin:14px 0 20px}
.ft-legal{border-top:1px solid rgba(249,248,244,.12);padding-top:22px;display:flex;
  justify-content:space-between;gap:20px;font-size:13px;color:rgba(249,248,244,.55);flex-wrap:wrap}
.btn--ghost-dark{border:1px solid rgba(249,248,244,.2);color:var(--nl-canvas)}
.btn--ghost-dark:hover{border-color:rgba(249,248,244,.5);background:rgba(249,248,244,.06)}

@media(max-width:1023px){
  .hero-grid,.grid-3,.grid-4,.grid-2,.precio{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.precio{grid-template-columns:1fr;gap:36px}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  :root{--nl-gutter-lg:24px;--nl-section:var(--nl-section-sm)}
  body{font-size:16px;line-height:1.65}
  h1{font-size:38px;line-height:1.02;letter-spacing:-.02em}
  h1 br{display:none}
  .h2-display{font-size:30px;line-height:1.1}
  h2{font-size:26px;line-height:1.25}
  .lede{font-size:18px}
  .cifra{font-size:40px}
  .grid-3,.grid-2,.zonas-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .card{padding:22px}
  .btn{padding:15px 28px}
  .hero-cta .btn{width:100%;justify-content:center}
  .topbar .wrap{justify-content:center}
  .topbar span.ocultar-movil,.nav,.hdr-tel{display:none}
  .geo-block{padding:24px 22px}
  .tl::before{left:6px}
  .tl-paso{grid-template-columns:1fr;gap:0;padding-left:34px}
  .tl-nodo{left:6px}
  .tl-paso .txt,.tl-paso:nth-child(even) .txt{grid-column:1;text-align:left;padding:0}
  .precio{padding:26px}
  .ft-top{grid-template-columns:1fr;gap:28px}
}

/* ══════════════════════════════════════════════════════════
   PÁGINAS INTERIORES — bloques que no existen en la portada
   ══════════════════════════════════════════════════════════ */

/* migas */
.migas{font-size:13px;color:var(--nl-mute);padding-top:26px}
.migas a:hover{color:var(--nl-accent)}
.migas span{margin-inline:6px}

/* cabecera de página interior */
.pag-hero{padding-top:34px}
.pag-hero h1{margin-bottom:20px}
.pag-hero .lede{max-width:660px;margin-bottom:28px}
.pag-datos{display:flex;gap:38px;flex-wrap:wrap;padding-top:26px;margin-top:28px;
  border-top:1px solid var(--nl-line)}
.pag-datos div span{display:block}
.pag-datos b{font-family:var(--font-display);font-weight:300;font-size:30px;color:var(--nl-ink);
  line-height:1.1;display:block}

/* prosa larga */
.prosa{max-width:var(--nl-measure)}
.prosa p{margin-bottom:18px}
.prosa p:last-child{margin-bottom:0}
.prosa h2{margin:44px 0 16px}
.prosa h3{margin:30px 0 10px}
.prosa ul{margin:0 0 18px}
.prosa ul li{padding-left:26px;position:relative;margin-bottom:10px}
.prosa ul li::before{content:"";position:absolute;left:8px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--nl-accent)}
.prosa a{color:var(--nl-accent);text-decoration:underline;text-underline-offset:3px}

/* dos columnas de texto con lateral */
.col-lateral{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.lateral{background:var(--nl-surface);border:1px solid var(--nl-line);
  border-radius:var(--nl-r-card);padding:26px;position:sticky;top:96px}
.lateral h3{font-size:17px;margin-bottom:14px}
.lateral li{font-size:15px;line-height:1.55;padding-block:9px;border-bottom:1px solid var(--nl-line)}
.lateral li:last-child{border-bottom:0}
.lateral .btn{width:100%;justify-content:center;margin-top:16px}

/* listas de sectores */
.sectores{display:flex;flex-wrap:wrap;gap:9px}
.sector{border:1px solid var(--nl-line);background:var(--nl-surface);border-radius:var(--nl-r-pill);
  padding:8px 16px;font-size:14px;color:var(--nl-ink-soft)}

/* ciudades vecinas */
.vecinas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.vecina{display:block}
.vecina .mono{display:block;margin-bottom:6px}
.vecina h3{margin-bottom:6px}
.vecina p{font-size:15px;line-height:1.6}

/* listado del blog */
.entrada{border-bottom:1px solid var(--nl-line);padding-block:28px;display:grid;
  grid-template-columns:150px 1fr;gap:32px;align-items:baseline}
.entrada:first-of-type{border-top:1px solid var(--nl-line)}
.entrada h2{font-size:24px;line-height:1.3;margin-bottom:8px}
.entrada h2 a:hover{color:var(--nl-accent)}
.entrada p{font-size:15px;line-height:1.6;max-width:62ch}

/* artículo */
.art-cuerpo{max-width:var(--nl-measure);font-size:18px;line-height:1.75}
.art-cuerpo h2{font-size:30px;margin:48px 0 16px}
.art-cuerpo h3{font-size:21px;margin:34px 0 12px}
.art-cuerpo p{margin-bottom:20px}
.art-cuerpo img{border-radius:var(--nl-r-card);margin-block:28px}
.art-cuerpo blockquote{border-left:3px solid var(--nl-accent);padding-left:24px;
  margin:28px 0;font-size:19px;color:var(--nl-ink-soft)}

/* formulario */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:14px;font-weight:500;color:var(--nl-ink);margin-bottom:6px}
.campo input,.campo textarea,.campo select{width:100%;padding:12px 14px;font:400 15px/1.5 var(--font-sans);
  color:var(--nl-ink);background:var(--nl-surface);border:1px solid var(--nl-line);
  border-radius:var(--nl-r-input);transition:border-color .2s}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--nl-accent)}
.campo textarea{min-height:120px;resize:vertical}

/* accesibilidad */
.solo-lectores{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
:focus-visible{outline:2px solid var(--nl-accent);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-9999px;top:0;background:var(--nl-accent);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 var(--nl-r-input) 0}
.saltar:focus{left:0}

/* menú móvil (CSS puro, sin JavaScript: así lo rastrea Google) */
.menu-check{position:absolute;opacity:0;pointer-events:none}
.menu-btn{display:none;background:none;border:1px solid var(--nl-line);border-radius:var(--nl-r-input);
  padding:9px 13px;font:500 14px/1 var(--font-sans);color:var(--nl-ink);cursor:pointer}

@media(max-width:1023px){
  .col-lateral{grid-template-columns:1fr;gap:36px}
  .lateral{position:static}

  /* Cabecera compacta. El menú desplegable entra ya a 1023px porque con cinco enlaces,
     el teléfono y el botón no cabe nada por debajo de esa anchura. */
  .hdr .wrap{gap:12px}
  .menu-btn{display:inline-block}
  .hdr-tel{display:none}
  .hdr .btn--sm{padding:8px 14px;font-size:13px;white-space:nowrap}
  .hdr .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--nl-canvas);border-bottom:1px solid var(--nl-line);
    padding:8px var(--nl-gutter-lg) 18px}
  .menu-check:checked ~ .nav{display:flex}
  .hdr .nav a{padding:13px 4px;border-radius:0;border-bottom:1px solid var(--nl-line)}
  .hdr .nav a:last-child{border-bottom:0}
}
@media(max-width:767px){
  .entrada{grid-template-columns:1fr;gap:8px}
  .pag-datos{gap:24px}
  .logo{font-size:19px}
  .hdr .wrap{gap:8px}
  .hdr .btn--sm{padding:8px 12px;font-size:12.5px}
}
@media print{ .hdr,.topbar,.ft,.btn{display:none} body{background:#fff;color:#000} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }