/* What2Do 2.0 · Navegación unificada (R4a)
   ---------------------------------------------------------------------------------------------
   Capa ADITIVA sobre el header `header.top` y el dock `#w2dAppDock` de las cuatro superficies
   públicas del Directorio: portada (/wwd/), explorar, ficha (/wwd/d/<slug>) y mapa.

   - No quita nada del sitio: lo que sale del primer nivel en teléfono (mapa, repartidores,
     idioma, guardados, Business, agregar negocio, apps, Lite/Pro) vive en la hoja "Más" que arma
     /wwd/nav-2.js a partir de los MISMOS enlaces/botones del header (sin duplicar hrefs a mano).
   - Conserva ids/clases de los que dependen otros scripts (#authslot, #rankBtn, #langdd, onclick).
   - El riel-carrusel de w2d.js (flechas ‹ ›) deja de hacer falta porque la barra ya cabe:
     se apaga visualmente, pero su lógica sigue intacta.
   Tokens 2.0 (home-ask.css / skin-2.css / ficha-2.css / chat-2.css): ink #0f172a, muted #64748b,
   line #e7e5e4, brand #059669 (AA #047857), cta #ea580c, radio 20px, sombras suaves.

   Especificidad: `header.top.top` duplica la clase a propósito para ganarle a
   `header.top.wwdNavCarousel …` de w2d.css sin depender de que w2d.js ya haya corrido. */

:root{
  --n2-ink:#0f172a;--n2-body:#334155;--n2-muted:#64748b;--n2-line:#e7e5e4;--n2-soft:#f7faf8;
  --n2-brand:#059669;--n2-brand-aa:#047857;--n2-brand-ink:#065f46;--n2-brand-tint:#ecfdf5;
  --n2-cta:#ea580c;--n2-gold-ink:#92400e;--n2-gold-tint:#fffbeb;--n2-gold-line:#fde68a;
  --n2-r:20px;--n2-sh:0 6px 20px -14px rgba(15,23,42,.35);--n2-shh:0 10px 40px -18px rgba(15,23,42,.25);
  --n2-btn:40px;--n2-gutter:16px;
}

/* ── Barra superior ─────────────────────────────────────────────────────────────────────────── */
header.top.top{padding:0;overflow:visible;background:rgba(255,255,255,.92);border-bottom:1px solid var(--n2-line);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
header.top.top .tw{max-width:1180px;width:100%;margin:0 auto;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:8px;padding:8px max(var(--n2-gutter),env(safe-area-inset-right)) 8px max(var(--n2-gutter),env(safe-area-inset-left));
  min-height:56px;box-sizing:border-box;overflow:visible!important;scroll-snap-type:none}
header.top.top .tw>*{flex:0 0 auto}
header.top.top .sp{display:none!important}
/* El carrusel ya no hace falta: la barra cabe. Se apagan las flechas, no la lógica. */
header.top.top .wwdNavScroll{display:none!important}

/* Logo: icono + palabra, a la izquierda. El resto se alinea a la derecha. */
header.top.top .tw .logo{order:0;margin-right:auto!important;width:auto!important;min-width:0!important;height:40px;padding:0 4px 0 0!important;
  display:inline-flex!important;align-items:center;gap:8px!important;border:0!important;background:none!important;box-shadow:none!important;
  border-radius:12px;color:var(--n2-ink)!important;font:800 17px/1 Poppins,system-ui,-apple-system,sans-serif!important;letter-spacing:-.02em;
  white-space:nowrap;text-decoration:none;overflow:hidden}
header.top.top .tw .logo .ic{width:26px!important;height:26px!important;color:var(--n2-brand-aa);flex:0 0 auto}
header.top.top .tw .logo span{font-size:14px!important;font-weight:500!important;color:var(--n2-muted)!important;display:inline!important}

/* Botones de acción: mismo lenguaje en todos (círculo 40px, borde línea, sombra suave). */
header.top.top .tw .navlink,
header.top.top .tw .rankbtn,
header.top.top .tw .modlink,
header.top.top .tw .bizlink,
header.top.top .tw .addlink,
header.top.top .tw .ecolink,
header.top.top .tw .acctlink,
header.top.top .tw .langbtn,
header.top.top #authslot .authbtn,
header.top.top .nav2More{
  width:var(--n2-btn)!important;min-width:var(--n2-btn)!important;height:var(--n2-btn)!important;padding:0!important;margin:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:0!important;border-radius:999px!important;
  border:1px solid var(--n2-line)!important;background:#fff!important;color:var(--n2-ink)!important;box-shadow:var(--n2-sh)!important;
  font-size:0!important;line-height:1;text-decoration:none;cursor:pointer;position:relative;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
header.top.top .tw :is(.navlink,.rankbtn,.modlink,.bizlink,.addlink,.ecolink,.acctlink,.langbtn,.authbtn,.nav2More) .ic{width:19px!important;height:19px!important;display:block!important}
header.top.top .tw :is(.navlink,.rankbtn,.modlink,.bizlink,.addlink,.ecolink,.acctlink,.authbtn) span{display:none!important}
header.top.top .tw :is(.navlink,.rankbtn,.modlink,.bizlink,.addlink,.ecolink,.acctlink,.langbtn,.authbtn,.nav2More):hover{border-color:#cbd5e1!important;background:var(--n2-soft)!important}
header.top.top .tw :is(.navlink,.rankbtn,.modlink,.bizlink,.addlink,.ecolink,.acctlink,.langbtn,.authbtn,.nav2More):active{transform:scale(.96)}
header.top.top .tw :is(a,button):focus-visible{outline:3px solid rgba(5,150,105,.35)!important;outline-offset:2px}

/* Acentos con los tokens 2.0 */
header.top.top .tw .rankbtn{color:var(--n2-gold-ink)!important;background:var(--n2-gold-tint)!important;border-color:var(--n2-gold-line)!important}
header.top.top .tw .addlink{color:var(--n2-brand-aa)!important;border-color:rgba(4,120,87,.35)!important}
header.top.top .tw .modlink{color:#fff!important;background:var(--n2-cta)!important;border-color:var(--n2-cta)!important}
header.top.top #authslot .savedbtn .ic{color:#e11d48}
header.top.top #authslot .authbtn.on:not(.savedbtn){color:var(--n2-brand-aa)!important;border-color:rgba(4,120,87,.4)!important;background:var(--n2-brand-tint)!important}
header.top.top #authslot .authbtn:not(.savedbtn)::after{content:none!important}
header.top.top #authslot{display:inline-flex!important;align-items:center;gap:8px;flex:0 0 auto}

/* Cuenta sin sesión: w2d.js pinta tres rayas (≡). Junto al botón "Más" se leerían como dos menús,
   así que aquí se ve como una persona. Sólo cambia el dibujo; el botón, su onclick y su
   aria-label ("Cuenta y acceso") son los mismos. */
header.top.top #authslot .authbtn:not(.savedbtn):not(.on) .ic{display:none!important}
header.top.top #authslot .authbtn:not(.savedbtn):not(.on)::before{content:"";width:19px;height:19px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center/contain no-repeat}

/* Idioma: insignia ES/EN pequeña sobre el icono (como antes, con tokens 2.0) */
header.top.top .tw .langwrap{display:inline-flex;position:relative;flex:0 0 auto}
header.top.top .tw .langbtn{color:var(--n2-brand-aa)!important}
header.top.top .tw .langbtn #langCur{display:block!important;position:absolute;right:-2px;bottom:-2px;min-width:18px;padding:1px 3px;border-radius:999px;
  background:var(--n2-brand-aa);color:#fff;font:800 8px/1.2 system-ui,sans-serif;letter-spacing:.02em;text-align:center;border:1.5px solid #fff}

/* Botón "Más" (lo crea nav-2.js): siempre el último, con rótulo visible en pantallas amplias. */
header.top.top .nav2More{order:20;color:var(--n2-ink)!important}
header.top.top .nav2More .nav2MoreTxt{display:none}
header.top.top .nav2More[aria-expanded="true"]{background:var(--n2-ink)!important;color:#fff!important;border-color:var(--n2-ink)!important}

/* Orden visual estable: búsqueda · Top · (resto) · cuenta · Más */
header.top.top .tw a.navlink[href*="/explorar"]:not(.driverNavLink){order:2}
header.top.top .tw .rankbtn{order:3}
header.top.top .tw a.navlink[href*="/mapa"]{order:4}
header.top.top .tw .driverNavLink{order:5}
header.top.top .tw .langwrap{order:6}
header.top.top .tw .bizlink,header.top.top .tw .modlink{order:7}
header.top.top .tw .ecolink{order:7}
header.top.top .tw .addlink{order:8}
header.top.top #authslot{order:9}
header.top.top .tw #acctslot{order:10}

/* ── Ecosistema + accesos de cuenta (los inyecta nav-2.js: fuente única) ───────────────────────
   Ecosistema reutiliza el acento verde del Directorio; "Crear cuenta" es la acción principal
   (naranja/relleno) y "Entrar"/"Soy cliente" quedan neutros. En teléfono todo pasa a la hoja "Más";
   en tableta se ven como iconos; en escritorio se expanden a píldoras con texto. */
header.top.top .tw .ecolink{color:var(--n2-brand-aa)!important;border-color:rgba(4,120,87,.3)!important;background:var(--n2-brand-tint)!important}
header.top.top .tw #acctslot{display:inline-flex!important;align-items:center;gap:8px;flex:0 0 auto}
header.top.top .tw .acctlink.is-crear{color:#fff!important;background:var(--n2-cta)!important;border-color:var(--n2-cta)!important}
header.top.top .tw .acctlink.is-entrar{color:var(--n2-brand-aa)!important}
header.top.top .tw .acctlink.is-crear:hover{background:#c2410c!important;border-color:#c2410c!important}
/* Escritorio: píldoras con texto (más claras que tres iconos de persona). */
@media (min-width:1024px){
  header.top.top .tw .acctlink{width:auto!important;min-width:0!important;padding:0 14px!important;gap:7px!important;font-size:13px!important;font-weight:700!important}
  header.top.top .tw .acctlink .ic{margin-right:0}
  header.top.top .tw :is(.acctlink) span{display:inline!important;font:600 13px/1 Poppins,system-ui,sans-serif}
  header.top.top .tw .ecolink{width:auto!important;padding:0 14px!important;gap:7px!important}
  header.top.top .tw .ecolink span{display:inline!important;font:600 13px/1 Poppins,system-ui,sans-serif}
}

/* ── Teléfono (≤640px): logo + búsqueda · Top 10 · cuenta · Más ───────────────────────────────
   Todo lo demás sigue a un toque en la hoja "Más" (y Mapa además en el dock inferior). */
@media (max-width:640px){
  header.top.top .tw{gap:8px}
  header.top.top .tw a.navlink[href*="/mapa"],
  header.top.top .tw .driverNavLink,
  header.top.top .tw .bizlink,
  header.top.top .tw .modlink,
  header.top.top .tw .addlink,
  header.top.top .tw .ecolink,
  header.top.top .tw #acctslot,
  header.top.top #authslot .savedbtn{display:none!important}
  header.top.top .tw .logo span{display:none!important}
}
@media (max-width:340px){
  header.top.top .tw{gap:6px;padding-left:12px;padding-right:12px}
  header.top.top{--n2-btn:38px}
  header.top.top .tw .logo{font-size:0!important;gap:0!important}
}
/* Tableta (641–1023px): se suman mapa, idioma y guardados. */
@media (min-width:641px) and (max-width:1023px){
  header.top.top .tw .driverNavLink,
  header.top.top .tw .bizlink,
  header.top.top .tw .modlink,
  header.top.top .tw .addlink,
  header.top.top .tw .acctlink.is-cliente{display:none!important}
}
/* Escritorio: todo visible + "Más" con rótulo. */
@media (min-width:1024px){
  header.top.top .nav2More{width:auto!important;padding:0 14px 0 12px!important;gap:7px!important}
  header.top.top .nav2More .nav2MoreTxt{display:inline;font:600 13px/1 Poppins,system-ui,sans-serif}
}

/* ── Hoja "Más" ─────────────────────────────────────────────────────────────────────────────── */
.nav2Sheet{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(15,23,42,.42);opacity:0;transition:opacity .18s ease;font-family:Poppins,system-ui,-apple-system,sans-serif}
.nav2Sheet[hidden]{display:none}
.nav2Sheet.open{opacity:1}
.nav2Card{width:100%;max-width:560px;max-height:min(86dvh,720px);overflow:auto;overscroll-behavior:contain;background:#fff;color:var(--n2-ink);
  border-radius:var(--n2-r) var(--n2-r) 0 0;box-shadow:var(--n2-shh);padding:8px 16px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(16px);transition:transform .2s ease;box-sizing:border-box}
.nav2Sheet.open .nav2Card{transform:none}
.nav2Grab{width:40px;height:4px;border-radius:999px;background:#d6d3d1;margin:4px auto 10px}
.nav2Head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.nav2Head h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--n2-ink)}
.nav2Close{width:40px;height:40px;border-radius:999px;border:1px solid var(--n2-line);background:#fff;color:var(--n2-ink);font:400 22px/1 system-ui;cursor:pointer;display:grid;place-items:center}
.nav2Sec{margin:12px 0 0}
.nav2Sec h3{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n2-muted)}
.nav2List{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nav2Item{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:1px solid var(--n2-line);border-radius:16px;background:#fff;
  color:var(--n2-ink);text-decoration:none;font:600 14px/1.25 Poppins,system-ui,sans-serif;text-align:left;cursor:pointer;box-sizing:border-box;min-width:0}
.nav2Item:hover{background:var(--n2-soft);border-color:#d6d3d1}
.nav2Item:focus-visible,.nav2Seg button:focus-visible,.nav2Close:focus-visible{outline:3px solid rgba(5,150,105,.35);outline-offset:2px}
.nav2Item .ic,.nav2Item svg{width:20px;height:20px;flex:0 0 20px;color:var(--n2-brand-aa)}
.nav2Item .nav2Lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav2Item.isBiz{background:#fff7ed;border-color:#fed7aa}.nav2Item.isBiz .ic,.nav2Item.isBiz svg{color:var(--n2-cta)}
.nav2Item.isTop .ic,.nav2Item.isTop svg{color:#b45309}
.nav2Item.isSaved .ic,.nav2Item.isSaved svg{color:#e11d48}
.nav2Row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 6px 6px 12px;border:1px solid var(--n2-line);border-radius:16px;margin-top:8px}
.nav2Row>span{font:600 14px/1.25 Poppins,system-ui,sans-serif;color:var(--n2-ink)}
.nav2Seg{display:inline-flex;padding:3px;border-radius:999px;background:#f5f5f4;gap:2px}
.nav2Seg button{min-height:38px;min-width:64px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--n2-muted);font:600 13px/1 Poppins,system-ui,sans-serif;cursor:pointer}
.nav2Seg button[aria-pressed="true"]{background:#fff;color:var(--n2-brand-aa);box-shadow:0 1px 4px rgba(15,23,42,.14)}
html.nav2Lock,html.nav2Lock body{overflow:hidden}
@media (max-width:360px){.nav2List{grid-template-columns:1fr}}
@media (min-width:768px){
  .nav2Sheet{align-items:flex-start;justify-content:flex-end;padding:64px 16px 16px}
  .nav2Card{max-width:420px;border-radius:var(--n2-r);padding:14px 16px 16px;transform:translateY(-8px)}
  .nav2Grab{display:none}
}
@media (prefers-reduced-motion:reduce){.nav2Sheet,.nav2Card{transition:none}}

/* ── Dock inferior 2.0 ─────────────────────────────────────────────────────────────────────────
   Mismo dock de ecosystem-ui.js (mismos 4 destinos), sólo con los tokens 2.0 y respetando
   las áreas seguras del iPhone (abajo y a los lados). */
html .w2d-app-dock#w2dAppDock{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:520px;margin-inline:auto;padding:6px;gap:4px;
  justify-content:space-between;overflow:visible;border:1px solid var(--n2-line);border-radius:24px;background:rgba(255,255,255,.96);
  box-shadow:0 10px 40px -14px rgba(15,23,42,.3),0 2px 6px rgba(15,23,42,.05);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
html .w2d-app-dock#w2dAppDock :is(a,button){flex:1 1 0;min-width:0;min-height:50px;border-radius:18px;color:var(--n2-muted);background:transparent;
  font:600 11px/1.1 Poppins,system-ui,-apple-system,sans-serif;letter-spacing:0;gap:3px;transform:none;box-shadow:none;transition:background-color .15s ease,color .15s ease}
html .w2d-app-dock#w2dAppDock svg{width:21px;height:21px}
html .w2d-app-dock#w2dAppDock :is(a,button):hover{color:var(--n2-ink);background:#f5f5f4}
html .w2d-app-dock#w2dAppDock .is-active{color:var(--n2-brand-aa);background:var(--n2-brand-tint);font-weight:700}
html .w2d-app-dock#w2dAppDock .is-active svg{stroke-width:2.1}
html .w2d-app-dock#w2dAppDock .w2d-dock-ask{flex:1.15 1 0;color:#fff;background:var(--n2-brand-aa);box-shadow:0 8px 20px -10px rgba(4,120,87,.7);transform:none}
html .w2d-app-dock#w2dAppDock .w2d-dock-ask:hover{background:var(--n2-brand-ink);color:#fff}
html .w2d-app-dock#w2dAppDock :is(a,button):focus-visible{outline:3px solid rgba(5,150,105,.35);outline-offset:2px}

/* Idioma siempre a la vista también en teléfono (dueño 2026-10-19): botón pequeño junto a la cuenta. */
@media (max-width:640px){
  header.top.top{--n2-btn:40px}
  header.top.top .tw{gap:6px}
  header.top.top .tw .langwrap{display:inline-flex!important;order:8}
  header.top.top #authslot{order:9}
  header.top.top .tw .langdd{right:0!important;left:auto!important}
}
@media (max-width:379px){
  header.top.top .tw .logo{font-size:0!important;gap:0!important}
}