@import url("/ecosystem-ui.css");
@import url("/ecosystem-update.css");
:root{--brand:#059669;--brand-soft:#D1FAE5;--cta:#EA580C;--cta-hover:#C2410C;--cta-soft:#FFEDD5;--blue:#0EA5E9;--bg:#FAFAFA;--hero:#FDFBF7;--ink:#0F172A;--body:#334155;--muted:#64748B;--line:#E5E7EB;--ok:#059669;--r:16px;--pill:100px;--sh:0 4px 12px rgba(0,0,0,.03);--shh:0 8px 24px rgba(0,0,0,.06)}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--body);font:16px/1.6 'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,.t{color:var(--ink)}
a{color:inherit;text-decoration:none}
.ic{width:18px;height:18px;display:inline-block;vertical-align:-3px;flex:none}
header.top{position:sticky;top:0;background:rgba(250,250,248,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.tw{max-width:960px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:8px}
.tw .logo{font-weight:800;letter-spacing:-.02em;color:var(--brand);display:flex;gap:8px;align-items:center}
.tw .modlink{margin-left:auto;font-size:13px;font-weight:700;color:#fff;background:var(--cta);display:flex;gap:6px;align-items:center;border-radius:var(--pill);padding:7px 13px}
.tw .modlink .ic{width:15px;height:15px}
.tw .modlink:hover{background:var(--cta-hover)}
.tw .addlink{font-size:13px;font-weight:650;color:var(--brand);display:flex;gap:5px;align-items:center;border:1.5px solid var(--brand);border-radius:var(--pill);padding:6px 12px}
.tw .addlink .ic{width:14px;height:14px}
/* 2026-08-17 · La puerta de NEGOCIO en el header del Directorio.
   Hereda el `margin-left:auto` que antes tenía `.modlink` (que salió del primer nivel),
   así que la barra sigue partiéndose igual: navegación a la izquierda, negocio a la derecha.
   Deliberadamente discreto: el CTA primario del header sigue siendo `.addlink`. */
.tw .bizlink{margin-left:auto;font-size:13px;font-weight:650;color:var(--body);display:flex;gap:5px;align-items:center;border-radius:var(--pill);padding:6px 11px}
.tw .bizlink .ic{width:14px;height:14px}
.tw .bizlink:hover{background:var(--brand-soft);color:var(--ink)}
.tw .bizlink:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
main{max-width:900px;margin:0 auto;padding:20px 18px 60px}
.hero{background:var(--hero);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.hero h1{font-size:clamp(24px,5vw,34px);letter-spacing:-.02em;line-height:1.15;font-weight:800}
.hero p{color:var(--muted);margin-top:6px;max-width:56ch}
.delivbar{display:flex;gap:16px;align-items:center;margin:16px 0 4px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:12px 17px;font-size:14px;box-shadow:var(--sh);color:var(--body);transition:box-shadow .15s}
.delivbar:hover{box-shadow:var(--shh)}
.delivbar .dimg{height:72px;width:auto;max-width:42%;object-fit:contain;flex:none}
.delivbar b{font-weight:750;color:var(--ink)}
.delivbar .go{margin-left:auto;background:var(--cta);color:#fff;font-weight:750;border-radius:100px;padding:10px 18px;font-size:14px;flex:none}
@media(max-width:560px){.delivbar{flex-wrap:wrap}.delivbar .dimg{max-width:60%}}
.intents{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 6px}
@media(max-width:760px){.intents{grid-template-columns:repeat(2,1fr)}}
.intent{display:flex;gap:9px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:12px;font-weight:650;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left}
.intent .ic{width:22px;height:22px;color:var(--brand)}
.intent.on,.intent:hover{border-color:var(--brand);background:var(--brand-soft)}
.searchbox{display:flex;gap:8px;margin:14px 0 8px;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:11px 15px;align-items:center}
.searchbox:focus-within{border-color:var(--brand)}
.searchbox input{border:0;outline:0;font-size:16px;flex:1;background:none;color:var(--ink);min-width:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.chip{font-size:13px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff}
.chip.on,.chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;margin-top:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.card{box-shadow:var(--sh)}
.card:hover{box-shadow:var(--shh);transform:translateY(-2px)}
.cover{height:92px;position:relative;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;overflow:hidden}
/* Toda tarjeta conserva una vista previa visual aun sin foto pública: el color y el
   pictograma comunican la categoría; Facebook sólo reemplaza esto tras validarse. */
.cover:not(.photo)::before{content:"";position:absolute;width:128px;height:128px;right:-34px;top:-58px;border:18px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 18px rgba(255,255,255,.06)}
.cover .gi{position:relative;z-index:1;width:38px;height:38px;color:rgba(255,255,255,.92);filter:drop-shadow(0 2px 8px rgba(0,0,0,.18))}
.gi .ic{width:100%;height:100%}
.cover.photo .gi{display:none}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.card .t{font-weight:680;letter-spacing:-.01em;line-height:1.25}
.card .k{font-size:11.5px;color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.card .m{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.card .m .ic{width:14px;height:14px;margin-top:2px}
.badge{display:inline-flex;gap:5px;align-items:center;font-size:11.5px;font-weight:700;color:var(--ok);background:#E7F5EE;border-radius:20px;padding:3px 9px;width:fit-content}
.badge .ic{width:13px;height:13px}
/* ⭐ DESTACADO: lugar reservado arriba de las recomendaciones. Se marca A PROPÓSITO — un
   patrocinio que se hace pasar por resultado orgánico le quita al Directorio lo único que lo
   hace útil, que es que la gente le crea. */
.destflag{position:absolute;top:7px;left:7px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  max-width:calc(100% - 14px);font-size:10.5px;font-weight:800;letter-spacing:.04em;line-height:1.15;
  text-transform:uppercase;color:#7A5B00;background:rgba(255,255,255,.94);border-radius:999px;padding:3px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.14);white-space:nowrap;overflow:hidden;box-sizing:border-box}
.destflag b{font-style:normal;font-size:11px;line-height:1}
.destflag .dfx{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.card.isdest{border-color:#F5C98A;box-shadow:0 0 0 1px #F5C98A,var(--sh)}
/* ⛔ EL TEXTO VA OCULTO POR OMISIÓN, y sólo se enciende donde SÍ cabe. Es al revés de como estaba,
   y la vuelta importa: antes se apagaba en las vistas que yo me acordé de listar (lista y mini), así
   que cualquier vista nueva —o un cambio de nombre de clase— volvía a mostrar el texto sobre una
   miniatura de 74 px, la etiqueta se partía en dos renglones y TAPABA LA FOTO ENTERA. El dueño lo
   reportó dos veces. Con la regla invertida, lo peor que puede pasar en una vista no prevista es
   que se vea sólo la estrella. */
.destflag .dfx{display:none}
/* Se enciende con una clase EXPLÍCITA (`vcards`), nunca con un `:not(...)`: excluir vistas sigue
   siendo una lista blanca al revés — una vista nueva no estaría en el `:not` y volvería a mostrar
   el texto. Con la clase positiva, lo no previsto cae del lado seguro. Lo cazó la prueba. */
.grid.vcards .card .destflag .dfx{display:inline-block;max-width:150px}
.grid.vlist .card .destflag,.grid.vmini .card .destflag{top:4px;left:4px;padding:2px 5px;gap:0}
/* Cinturón: pase lo que pase con el texto, la etiqueta no puede crecer a lo alto ni cubrir la foto. */
.destflag{max-height:22px}
.count{color:var(--muted);font-size:13.5px;margin-top:10px}
.emergencyRail{margin:12px 0 2px}
.emergencyRail:empty{display:none}
.emh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 8px}
.emh b{font-size:14px;color:var(--ink);letter-spacing:-.01em}
.emh span{font-size:11.5px;color:var(--muted)}
.emcards{display:flex;gap:9px;overflow-x:auto;padding:0 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.emcards::-webkit-scrollbar{display:none}
.emcard{flex:0 0 240px;background:#fff;border:1px solid var(--line);border-left:4px solid #DC2626;border-radius:14px;padding:10px 11px;box-shadow:var(--sh)}
.emmain{display:flex;flex-direction:column;gap:2px}
.emmain strong{font-size:13px;color:var(--ink);line-height:1.25}
.emmain span{font-size:11.5px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.emacts{display:flex;gap:7px;margin-top:8px}
.emacts a{font-size:11.5px;font-weight:800;color:#B91C1C;background:#FEE2E2;border-radius:999px;padding:5px 9px}
.em911{border-left-color:#111827;background:linear-gradient(135deg,#fff,#FFF7ED)}
.em911 .emacts a{background:#111827;color:#fff}
.card.sk{height:190px;background:linear-gradient(100deg,#EEECE8 30%,#F7F5F2 50%,#EEECE8 70%);background-size:200% 100%;animation:skm 1.2s infinite;border:0}
@keyframes skm{to{background-position:-200% 0}}
.cityrow{display:flex;gap:9px;align-items:center;margin:12px 0 0;font-size:14px;color:var(--muted)}
.cityrow select,.cityrow input{padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--pill);font:inherit;font-size:14px;background:#fff;color:var(--ink);font-weight:650}
.cityrow input{min-width:min(280px,100%)}
.citypickbox{position:relative;display:inline-flex;min-width:min(280px,100%);z-index:12}
.citypickbox input{width:100%;min-width:0}
.citySuggest{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -24px rgba(15,23,42,.45);overflow:hidden;max-height:min(320px,52vh);overflow-y:auto;z-index:40;-webkit-overflow-scrolling:touch}
.citySuggest.open{display:block}
.citySuggest button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:#fff;text-align:left;padding:10px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.citySuggest button+button{border-top:1px solid var(--line)}
.citySuggest button:hover,.citySuggest button:focus{background:var(--brand-soft);outline:0}
.citySuggest b{font-size:13.5px}
.citySuggest span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.statepickbox{position:relative;display:inline-flex;z-index:13}
.statebtn{border:1.5px solid var(--line);border-radius:var(--pill);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:800;padding:9px 13px;cursor:pointer;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statebtn:hover,.statebtn[aria-expanded="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.statePanel{display:none;position:absolute;right:0;top:calc(100% + 8px);width:min(420px,88vw);max-height:min(520px,70vh);overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 55px -28px rgba(15,23,42,.52);z-index:45}
/* Panel en columna flex (2026-08-02): la lista toma EXACTO el alto restante tras cabecera+buscador.
   Antes cabecera+buscador+lista sumaban más que el max-height del panel y el overflow:hidden CORTABA
   el final de la lista → el último estado (Colima, el menos poblado) quedaba perdido/inalcanzable. */
.statePanel.open{display:flex;flex-direction:column}
.stateHead,.stateSearch,.stateBack{flex:none}
.stateHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-bottom:1px solid var(--line);background:#FAFAF7}
.stateHead b{font-size:13.5px;color:var(--ink)}
.stateHead button,.stateBack{border:0;background:transparent;color:var(--brand);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.stateBack{display:block;width:100%;text-align:left;padding:10px 13px;border-bottom:1px solid var(--line)}
.stateList{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.stateList button{display:flex;justify-content:space-between;gap:10px;width:100%;border:0;background:#fff;text-align:left;padding:10px 13px;font:inherit;color:var(--ink);cursor:pointer}
.stateList button+button{border-top:1px solid var(--line)}
.stateList button:hover,.stateList button:focus{background:var(--brand-soft);outline:0}
.stateList b{font-size:13.5px}
.stateList span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.stateList p{margin:0;padding:14px;color:var(--muted);font-size:13px}
/* Buscador DENTRO del panel de Estados (barra única, 2026-08-02): autocompletado nacional + lupa. */
.stateSearch{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:#fff}
.stateSearch input{flex:1;min-width:0;padding:9px 13px;border:1.5px solid var(--line);border-radius:var(--pill);font:inherit;font-size:14px;font-weight:650;color:var(--ink);background:#fff}
.stateSearch input:focus{outline:none;border-color:var(--brand)}
.stateSearchGo{width:40px;height:38px;flex:none;border:0;border-radius:999px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.stateSearchGo .ic{width:18px;height:18px;color:#fff}
.stateSearchGo:hover{background:#047857}
/* La lupa del buscador principal ahora es botón real (dispara la búsqueda). */
.qgo{border:0;background:transparent;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;color:var(--brand);cursor:pointer;flex:none}
/* ✨ "What2Do AI te recomienda" — ideas variadas por ciudad en la portada del Directorio (2026-08-02). */
.aiIdeas{margin:16px 0 4px;padding:16px 16px 13px;border:1px solid #A7F3D0;border-radius:var(--r);background:linear-gradient(130deg,#ECFDF5,#fff 62%);box-shadow:var(--sh)}
.aiIdeasHead{display:flex;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap}
.aiIdeasHead .ic{width:19px;height:19px;color:var(--brand);flex:none}
.aiIdeasHead b{font-size:15.5px;color:var(--ink)}
.aiIdeasHead span{color:var(--muted);font-size:12.5px}
.aiIdeasAsk{display:flex;gap:8px;align-items:center;margin-bottom:11px}
.aiIdeasAsk input{flex:1;min-width:0;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--pill);font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.aiIdeasAsk input:focus{outline:none;border-color:var(--brand)}
.aiIdeasGo{width:42px;height:40px;flex:none;border:0;border-radius:999px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.aiIdeasGo .ic{width:19px;height:19px}
.aiIdeasGo:hover{background:#047857}
.aiIdeasGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
.aiIdeasGrid p{margin:0;padding:6px 2px;color:var(--muted);font-size:13px}
.aiIdea{display:flex;flex-direction:column;gap:3px;text-align:left;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:11px 13px;font:inherit;cursor:pointer;text-decoration:none}
.aiIdea:hover{border-color:var(--brand);background:var(--brand-soft)}
.aiIdea b{font-size:13.5px;color:var(--ink)}
.aiIdea span{font-size:12px;color:var(--muted);line-height:1.35}
.aiIdeasFoot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.aiIdeasNote{color:var(--muted);font-size:11.5px}
@media(max-width:760px){.aiIdeasGrid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.aiIdeasGrid{grid-template-columns:1fr}}
/* 🗺️ Banner ESPECIAL del mapa vivo (2026-08-02): sección propia que resalta, fuera de los tiles. */
.mapCta{display:flex;align-items:center;gap:14px;margin:6px 0 4px;padding:18px;border-radius:20px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#064E3B,#0B7A55 55%,#0EA5E9 130%);box-shadow:0 24px 50px -28px rgba(6,78,59,.75);border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
.mapCta::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 130% at 85% -20%,rgba(245,182,87,.28),transparent 55%);pointer-events:none}
.mapCta:hover{filter:brightness(1.06)}
.mapCtaIco{width:52px;height:52px;flex:none;border-radius:16px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center}
.mapCtaIco .ic{width:26px;height:26px;color:#fff}
.mapCtaTxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mapCtaTxt b{font-size:16.5px}
.mapCtaTxt span{font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.4}
.mapCtaGo{margin-left:auto;flex:none;width:38px;height:38px;border-radius:999px;background:#fff;color:#065F46;display:inline-flex;align-items:center;justify-content:center}
.mapCtaGo .ic{width:19px;height:19px}
@media(max-width:560px){.mapCta{padding:15px 14px;gap:11px}.mapCtaTxt b{font-size:15px}}
/* 🏞️ PORTADA PANORÁMICA de turismo (2026-08-02): tile expandido lado a lado, look de portada —
   selva/atardecer huasteco con degradados + ondas de agua; abre la guía viva /wwd/turismo. */
.turCta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 4px;padding:26px 22px;min-height:170px;border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;background:linear-gradient(118deg,#04372A 0%,#0B7A55 46%,#0E7490 88%);box-shadow:0 30px 65px -34px rgba(4,55,42,.9);border:1px solid rgba(255,255,255,.14)}
.turCta::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 150% at 90% -25%,rgba(245,158,11,.42),transparent 52%),radial-gradient(90% 120% at -10% 120%,rgba(14,165,233,.35),transparent 55%);pointer-events:none}
.turCta::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:64px;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath d='M0 60c100-32 200-32 300 0s200 32 300 0 200-32 300 0 200 32 300 0v30H0z' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M0 72c100-26 200-26 300 0s200 26 300 0 200-26 300 0 200 26 300 0v18H0z' fill='%23ffffff' fill-opacity='.22'/%3E%3C/svg%3E") repeat-x bottom/1200px 90px;pointer-events:none}
.turCta:hover{filter:brightness(1.06)}
.turCtaIn{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;z-index:1}
.turCtaKick{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FCD34D}
.turCtaTitle{font-size:clamp(22px,4.4vw,32px);line-height:1.1;font-weight:800}
.turCtaSub{font-size:13px;color:rgba(255,255,255,.88);line-height:1.5;max-width:560px}
.turCtaGo{position:relative;z-index:1;flex:none;width:46px;height:46px;border-radius:999px;background:#fff;color:#065F46;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 25px -10px rgba(0,0,0,.5)}
.turCtaGo .ic{width:21px;height:21px}
@media(max-width:560px){.turCta{padding:20px 16px;min-height:150px}.turCtaSub{font-size:12px}}
.locbtn{width:38px;height:38px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.locbtn .ic{width:18px;height:18px;color:inherit}
.locbtn:hover,.locbtn.locating{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.locbtn.locating .ic{animation:spinloc 1s linear infinite}
@keyframes spinloc{to{transform:rotate(360deg)}}
.ghostbtn{border:1.5px solid var(--line);border-radius:var(--pill);background:#fff;color:var(--brand);font:inherit;font-size:13px;font-weight:750;padding:8px 13px;cursor:pointer}
.ghostbtn:hover{border-color:var(--brand);background:var(--brand-soft)}
.addbanner{margin:26px 0 4px;background:linear-gradient(120deg,var(--cta),var(--cta-hover));border-radius:var(--r);color:#fff;padding:20px 22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;box-shadow:var(--shh)}
.addbanner b{font-size:18px;letter-spacing:-.01em}
.addbanner p{font-size:13.5px;opacity:.92;margin-top:2px}
.addbanner a{margin-left:auto;background:#fff;color:var(--cta);font-weight:750;border-radius:var(--pill);padding:11px 18px;font-size:15px}
.fcover{height:210px;border-radius:var(--r);position:relative;display:flex;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden;margin-bottom:16px}
.fcover .gi{position:absolute;inset:0;margin:auto;width:64px;height:64px;color:rgba(255,255,255,.9)}
.fcover.photo .gi{display:none}
.fcover .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45))}
.fcover .fk{position:relative;color:#fff;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;padding:14px 16px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ficha h1{font-size:clamp(24px,5vw,32px);letter-spacing:-.02em;margin:0 0 4px}
.ficha .desc{max-width:64ch;margin:10px 0;color:var(--ink)}
.meta{display:flex;flex-direction:column;gap:9px;margin:12px 0;color:var(--muted);font-size:15px}
.meta div{display:flex;gap:9px;align-items:flex-start}
.dohead{font-size:17px;font-weight:750;letter-spacing:-.01em;margin:20px 0 10px}
.actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.act{display:flex;gap:9px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;font-weight:650;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left}
.act .ic{width:20px;height:20px;color:var(--brand)}
.act:hover{border-color:var(--brand);background:var(--brand-soft)}
.act.hero{grid-column:1/-1;background:var(--cta);border-color:var(--cta);color:#fff;font-size:15.5px;padding:14px;justify-content:center;border-radius:var(--pill)}
.act.hero .ic{color:#fff}
.act.hero:hover{background:var(--cta-hover);filter:none}
.map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:18px 0}
.map iframe{width:100%;height:290px;border:0;display:block}
.claim{background:linear-gradient(120deg,#FFF7F3,var(--brand-soft));border:1.5px solid #E8CBBE;border-radius:var(--r);padding:20px;margin:22px 0}
.claim .ct{font-size:19px;font-weight:800;color:var(--brand);letter-spacing:-.01em}
.claim ul{list-style:none;margin:10px 0 12px;display:flex;flex-direction:column;gap:6px;padding:0}
.claim li{display:flex;gap:8px;align-items:center;font-size:14.5px}
.claim li .ic{width:16px;height:16px;color:var(--ok)}
.claim .proof{font-size:13px;color:var(--muted);margin:8px 0 12px;font-style:italic}
.claim .free{display:inline-block;background:var(--ok);color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:2px 9px;vertical-align:4px;margin-left:8px}
.cbtn{background:var(--cta);color:#fff;border:0;border-radius:var(--pill);padding:13px 22px;font-weight:750;font-size:15.5px;cursor:pointer;width:100%;font-family:inherit}
.cbtn:hover{background:var(--cta-hover)}
.claim form{display:none;flex-direction:column;gap:8px;margin-top:12px}
.claim form.open{display:flex}
.claim input{padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;background:#fff}
.claim .msg{font-size:14px;font-weight:600;margin-top:6px}
.src{font-size:12px;color:var(--muted);margin:14px 0 0}
.near h2{font-size:17px;margin:26px 0 10px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px;display:block}
.crumb a{color:var(--brand)}
.regform{display:flex;flex-direction:column;gap:10px;max-width:520px;margin-top:16px}
.regform label{font-size:13px;font-weight:650;color:var(--muted);margin-bottom:-6px}
.regform input,.regform select,.regform textarea{padding:12px 13px;border:1.5px solid var(--line);border-radius:11px;font-size:15px;background:#fff;font-family:inherit}
.regform .hp{position:absolute;left:-5000px}
footer.f{border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;padding:18px;text-align:center}
/* upgrades visuales (referencia de producto del dueño) */
.searchbox{padding:14px 18px;box-shadow:var(--sh);border-radius:var(--pill)}
.searchbox input{font-size:17px}
.searchbox .ic{width:21px;height:21px;color:var(--brand)}
.act{padding:14px 15px;font-size:15px;border-radius:13px;transition:border-color .15s,background .15s,transform .1s}
.act:active{transform:scale(.98)}
.act .ic{width:22px;height:22px}
.intent{padding:14px;font-size:14.5px;transition:border-color .15s,background .15s,transform .1s}
.intent:active{transform:scale(.98)}
.chip{padding:8px 14px;font-size:13.5px;transition:all .15s}
.xhero{position:relative;overflow:hidden;border-radius:22px;padding:38px 24px;min-height:150px;background:url("/wwd/assets/hero-huasteca.jpg") center/cover no-repeat}
.xhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.xscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.58));z-index:1}
.xin{position:relative;z-index:2}
.xhero h1,.xhero p{color:#fff !important;text-shadow:0 2px 10px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.9)}
.xmeta{position:absolute;top:14px;right:16px;z-index:2;display:flex;gap:12px;align-items:center;color:#fff;font-weight:800;font-size:14.5px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.xmeta .ic{width:17px;height:17px;vertical-align:-3px}
.xw{display:inline-flex;align-items:center;gap:5px}
.xwbtn{display:inline-flex;align-items:center;gap:5px;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cover{height:108px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px}
/* header nav + idioma */
.tw{flex-wrap:wrap}
.tw .navlink{font-size:13.5px;font-weight:650;color:var(--body);padding:6px 4px}
.tw .navlink:hover{color:var(--brand)}
.tw .sp{margin-left:auto}
.langwrap{position:relative}
.langbtn{display:flex;gap:5px;align-items:center;font-size:13px;font-weight:650;color:var(--body);border:1.5px solid var(--line);border-radius:var(--pill);padding:6px 11px;background:#fff;cursor:pointer;font-family:inherit}
.langbtn .ic{width:15px;height:15px}
.langdd{display:none;position:absolute;right:0;top:110%;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shh);min-width:150px;z-index:30;overflow:hidden}
.langdd.open{display:block}
.langdd button{display:block;width:100%;text-align:left;padding:10px 14px;border:0;background:none;font:inherit;font-size:14px;cursor:pointer}
.langdd button:hover{background:var(--brand-soft)}
.langdd button.on{font-weight:750;color:var(--brand)}
/* landing */
.lhero{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;display:flex;align-items:center;background:#123 center/cover no-repeat;box-shadow:var(--shh)}
.lhero .lshade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,20,14,.82) 20%,rgba(6,20,14,.45) 60%,rgba(6,20,14,.25))}
.lhi{position:relative;padding:38px clamp(20px,5vw,46px);max-width:640px}
.kick{color:#7CF0C4;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.lh1{color:#fff;font-size:clamp(30px,6vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:10px 0 12px}
.lsub{color:rgba(255,255,255,.88);font-size:clamp(15px,2vw,17px);max-width:50ch}
.lsearch{display:flex;gap:8px;margin:20px 0 14px;background:#fff;border-radius:var(--pill);padding:7px 8px 7px 18px;align-items:center;max-width:520px;box-shadow:var(--shh)}
.lsearch input{border:0;outline:0;font-size:16px;flex:1;background:none;min-width:0}
.lsearch button{background:var(--cta);color:#fff;border:0;border-radius:var(--pill);padding:11px 20px;font-weight:750;font-size:15px;cursor:pointer;font-family:inherit;flex:none}
.lsearch button:hover{background:var(--cta-hover)}
.lctas{display:flex;gap:10px;flex-wrap:wrap}
.lbtn{display:inline-flex;gap:8px;align-items:center;border-radius:var(--pill);padding:12px 20px;font-weight:750;font-size:15px}
.lbtn.a{background:var(--cta);color:#fff}.lbtn.a:hover{background:var(--cta-hover)}
.lbtn.b{background:#fff;color:var(--ink)}
.lbtn.c{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
/* 2026-08-17 · Segundo nivel del hero: lo que ya no compite con la decisión principal. */
.lmore{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.72)}
.lmore a{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lmore a:hover{color:#fff}
.lmore a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.stat{flex:1;min-width:180px;background:var(--hero);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.stat.live{position:relative;overflow:hidden}
.stat b{font-size:22px;color:var(--ink);letter-spacing:-.02em;display:block}
.stat span{font-size:13px;color:var(--muted)}
.livebadge{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-bottom:7px;border:1px solid rgba(34,197,126,.38);background:#ECFDF5;color:#047857;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.livebadge .dot{width:7px;height:7px;border-radius:999px;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,126,.16)}
.stat.live .livebadge{position:absolute;right:12px;top:10px}
.stat.live b{padding-right:52px}
section.blk{margin:38px 0}
.blk h2{font-size:clamp(21px,3.4vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.blk .bs{color:var(--muted);max-width:62ch;margin-bottom:16px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.step .n{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.step b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:5px}
.step p{font-size:14px;color:var(--muted)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.pan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.pan h3{font-size:17px;color:var(--ink);font-weight:750;margin-bottom:8px}
.pan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.pan li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px}
.pan li .ic{width:16px;height:16px;color:var(--ok);margin-top:3px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px;margin-bottom:9px;box-shadow:var(--sh)}
.faq summary{font-weight:700;color:var(--ink);cursor:pointer;font-size:15.5px}
.faq p{margin-top:9px;font-size:14.5px;color:var(--body)}
.worldband{background:linear-gradient(120deg,#065F46,var(--brand));border-radius:var(--r);color:#fff;padding:28px;box-shadow:var(--shh)}
.worldband h2{color:#fff;font-size:clamp(20px,3.2vw,26px);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.worldband p{opacity:.93;max-width:64ch;font-size:15px}
.viewbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin:10px 0 2px;flex-wrap:wrap}
.vseg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.vseg button{border:0;background:none;padding:7px 13px;cursor:pointer;color:var(--muted);display:flex;align-items:center}
.vseg button .ic{width:16px;height:16px}
.vseg button.on{background:var(--brand-soft);color:var(--brand)}
.viewbar select{border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;background:#fff;font-weight:650;color:var(--ink)}
.wwd-search{gap:10px}
.aiSearch{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);border-radius:999px;padding:6px 9px;background:#fff;color:var(--muted);font-size:12px;font-weight:800;cursor:pointer;user-select:none}
.aiSearch input{position:absolute;opacity:0;pointer-events:none}
.aiSearch:has(input:checked){background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.micbtn{width:36px;height:36px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--cta);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.micbtn .ic{width:18px;height:18px;color:inherit}
/* Botón discreto de regreso en las fichas. Vive aquí (CSS compartido) y no en la plantilla de la
   ficha en vivo, porque las ~30,436 fichas estáticas también lo reciben, inyectado por w2d.js. */
.crumb .volver{background:none;border:1.5px solid var(--line);border-radius:20px;color:var(--muted);
  font:inherit;font-size:13px;font-weight:650;padding:3px 11px;cursor:pointer;margin-right:6px}
.crumb .volver:hover{color:var(--brand);border-color:var(--brand)}

/* El micrófono debe decir de un vistazo SI ESTÁ ESCUCHANDO: azul = apagado, rojo = escuchando.
   Antes usaba el mismo naranja en ambos estados, así que no había forma de saberlo. */
.micbtn{color:#1D4ED8;border-color:#BFD3FF}
.micbtn:hover{border-color:#1D4ED8;background:#EFF4FF}
.micbtn.listening{color:#fff;background:#DC2626;border-color:#DC2626;animation:w2dMicPulse 1.4s ease-in-out infinite}
.micbtn.listening:hover{background:#B91C1C;border-color:#B91C1C}
@keyframes w2dMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}}
@media (prefers-reduced-motion:reduce){.micbtn.listening{animation:none}}
.wwdAssistHint{margin:-2px 0 10px;color:var(--muted);font-size:12.5px;font-weight:600}
.alphaRail{display:flex;gap:5px;overflow-x:auto;padding:8px 0 4px;margin:4px 0 0;scrollbar-width:thin}
.alphaRail button{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;min-width:34px;height:32px;padding:0 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;flex:none}
.alphaRail button:first-child{min-width:56px}
.alphaRail button.on,.alphaRail button:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 4px;color:var(--muted);font-size:13px;font-weight:750}
.pgbtn{border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--brand);font:inherit;font-size:13px;font-weight:800;padding:9px 15px;cursor:pointer}
.pgbtn:disabled{opacity:.45;cursor:not-allowed;color:var(--muted)}
.pgbtn:not(:disabled):hover{border-color:var(--brand);background:var(--brand-soft)}
/* Indicador de carga del listado: mientras se trae la página del servidor NO se muestra el
   respaldo local (sería de otra página y confunde). Respeta "reducir movimiento". */
.dirSpin{width:30px;height:30px;margin:0 auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:dirSpin .8s linear infinite}
@keyframes dirSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dirSpin{animation-duration:2.4s}}
.grid.vlist{display:flex;flex-direction:column;gap:8px}
.grid.vlist .card{flex-direction:row;align-items:center}
.grid.vlist .card .cover{width:74px;min-width:74px;height:64px;border-radius:12px}
.grid.vlist .card .cover .gi{width:26px;height:26px}
.grid.vlist .card .body{padding:8px 12px}
.grid.vmini{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.grid.vmini .card .cover{height:58px}
.grid.vmini .card .cover .gi{width:22px;height:22px}
.grid.vmini .card .body{padding:8px 9px}
.grid.vmini .card .t{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid.vmini .card .k,.grid.vmini .card .m,.grid.vmini .card .badge{display:none}
@media(max-width:640px){.viewbar{justify-content:center}}
@media(min-width:641px){.modlink,.addlink,.bizlink{font-size:13px;padding:8px 13px}.authbtn{font-size:12.5px;padding:7px 12px}.langbtn{font-size:12.5px}}
/* ===== MÓVIL: estético, simétrico y centrado (pedido del dueño, iPhone) ===== */
@media(max-width:640px){
  .tw{justify-content:center;row-gap:8px;padding:10px 12px}
  .tw .logo{flex:0 0 100%;justify-content:center;display:inline-flex}
  .tw .navlink{display:none}
  .sp{display:none}
  .modlink,.addlink,.bizlink,.langbtn,.authbtn{font-size:11.5px;padding:6px 10px}
  .modlink .ic,.addlink .ic,.bizlink .ic{display:none}
  .tw .bizlink{margin-left:0}
  .lhero{min-height:0;text-align:center}
  .lhi{padding:30px 18px 26px;max-width:none;width:100%}
  .kick{font-size:10.5px;letter-spacing:.1em}
  .lh1{font-size:clamp(28px,8.5vw,36px)}
  .lsub{margin:0 auto;font-size:14.5px;max-width:34ch}
  .lsearch{margin:18px auto 12px;max-width:360px;padding:6px 6px 6px 14px}
  .lsearch input{font-size:15px}
  .lsearch button{padding:10px 16px;font-size:14px}
  .lctas{display:flex;flex-direction:column;gap:9px;align-items:center}
  .lmore{justify-content:center}
  .lbtn{width:100%;max-width:340px;justify-content:center;box-sizing:border-box;padding:12px 14px;font-size:14.5px}
  .xhero{padding:28px 16px;text-align:center}
  .xmeta{position:relative;top:auto;right:auto;z-index:2;justify-content:center;margin-bottom:8px}
  .stats,.lstats{justify-content:center}
  .stat.live .livebadge{position:static}
  .stat.live b{padding-right:0}
  .cityrow{justify-content:center;flex-wrap:wrap}
  .citypickbox{width:100%;max-width:360px;z-index:25}
  .citySuggest{position:absolute;max-height:42vh;text-align:left}
  .statepickbox{width:100%;max-width:360px;z-index:24}
  .statebtn{width:100%;max-width:100%;justify-content:center;text-align:center;font-size:14px;font-weight:700;padding:9px 13px}
  .statePanel{left:0;right:0;width:100%;max-height:52vh;text-align:left}
  .stateList{max-height:none}
  .emh{display:block;text-align:left}
  .emcards{margin-left:-2px;margin-right:-2px}
  .emcard{flex-basis:82vw;max-width:320px}
  .searchbox{margin-left:auto;margin-right:auto}
  footer.f{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){.card,.act,.intent,.chip{transition:none}.locbtn.locating .ic{animation:none}}
/* Compartir + instalar: bloque visible en landing y explorador, sin tapar navegación ni búsqueda. */
.wwdShareApps{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin:16px 0 8px;padding:17px 18px;border:1px solid #A7F3D0;border-radius:var(--r);background:linear-gradient(120deg,#ECFDF5,#fff 68%);box-shadow:var(--sh)}
.wwdShareAppsCopy{display:flex;flex-direction:column;gap:2px}.wwdShareAppsCopy b{color:var(--ink);font-size:16px}.wwdShareAppsCopy span{color:var(--muted);font-size:12.5px;line-height:1.45}
.wwdShareAppsBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.wwdShareBtn,.wwdAppsBtn,.wwdShareFallback a,.wwdShareFallback button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--pill);padding:10px 15px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.wwdShareBtn{border:0;background:var(--brand);color:#fff}.wwdShareBtn:hover{background:#047857}.wwdAppsBtn{border:1.5px solid var(--brand);background:#fff;color:var(--brand)}
.wwdShareFallback{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.wwdShareFallback[hidden]{display:none}.wwdShareFallback a,.wwdShareFallback button{border:1px solid var(--line);background:#fff;color:var(--ink)}
.wwdShareStatus{grid-column:1/-1;color:var(--brand);font-size:12px;font-weight:750;text-align:right;min-height:0}
/* Jerarquía en móvil (Fase D, 2026-08-17): esta tarjeta apilaba CUATRO botones idénticos de ancho
   completo (337px de alto) antes de que el visitante viera un solo negocio. Sin una acción dominante,
   cuatro losas iguales no son cuatro opciones: son ninguna. Ahora manda "Compartir Directorio";
   descargar queda en segundo plano y los respaldos (WhatsApp / copiar) comparten UNA fila.
   No se quita nada — los cuatro caminos siguen ahí. */
@media(max-width:640px){.wwdShareApps{grid-template-columns:1fr;text-align:center;padding:16px 14px}
 .wwdShareAppsBtns{display:grid;grid-template-columns:1fr;width:100%}
 .wwdShareBtn{width:100%}
 .wwdAppsBtn{width:100%;background:transparent;border-width:1px;font-size:12.5px;padding:8px 12px}
 .wwdShareFallback{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
 .wwdShareFallback a,.wwdShareFallback button{width:100%;font-size:12.5px;padding:8px 10px}
 .wwdShareStatus{text-align:center}}
/* ===== MAPA VIVO — hero NOCHE premium (restyle del .xhero: conserva foto/video/reloj/clima/saludo, solo mejora) ===== */
.xhero{border-radius:24px;min-height:212px;padding:20px 18px 22px;box-shadow:0 26px 62px -34px rgba(6,20,14,.85)}
.xscrim{background:
  radial-gradient(135% 125% at 86% -12%, rgba(245,182,87,.34) 0%, rgba(245,182,87,0) 46%),
  radial-gradient(125% 115% at 4% 2%, rgba(34,197,126,.26) 0%, rgba(34,197,126,0) 48%),
  linear-gradient(178deg, rgba(9,28,20,.34) 0%, rgba(8,22,17,.72) 60%, rgba(7,18,14,.90) 100%)}
.xhero h1{font-size:clamp(25px,6.6vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.xhero .xin>p{color:#DCEBE2!important;font-size:13.5px;max-width:34ch;text-shadow:0 1px 8px rgba(0,0,0,.55)}
/* barra glass: En vivo · reloj · clima */
.xmeta{gap:10px;background:rgba(233,248,240,.10);border:1px solid rgba(233,248,240,.18);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-radius:14px;padding:7px 12px;font-size:13px;font-weight:600;text-shadow:none}
.xmeta #xclock{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.xlive{margin-right:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8FE6BE;text-shadow:none}
.xlive .d{width:8px;height:8px;border-radius:50%;background:#22C57E;position:relative;flex:none}
.xlive .d::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #22C57E;animation:xliveR 2.2s ease-out infinite}
@keyframes xliveR{0%{transform:scale(.5);opacity:.85}100%{transform:scale(2);opacity:0}}
@media(prefers-reduced-motion:reduce){.xlive .d::after{animation:none}}
@media(max-width:640px){.xhero{min-height:0}.xmeta{width:100%;justify-content:center}.xlive{margin-right:0}}

/* ── "Ordena directo": el beneficio VISIBLE de estar registrado en What2Do ──────────────────
   Una ficha de fuente pública sólo puede dar teléfono y cómo llegar. Una ficha de un negocio
   que ya reclamó y montó su tienda enseña sus productos con precio y deja pedir sin salir del
   Directorio. La diferencia tiene que verse de un vistazo: por eso va ARRIBA de todo, con el
   color de la marca y no como una acción más de la lista. */
.w2dorder{border:1.5px solid var(--brand);background:linear-gradient(180deg,var(--brand-soft),#fff);border-radius:var(--r);padding:14px;margin:14px 0}
.w2dorder .vb{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border-radius:var(--pill);padding:4px 11px;font-size:11.5px;font-weight:800;letter-spacing:.01em}
.w2dorder .vb .ic{width:14px;height:14px;color:#fff}
.w2dorder h2{font-size:17px;margin:9px 0 2px;letter-spacing:-.01em}
.w2dorder .sb{font-size:12.5px;color:var(--muted);margin-bottom:11px}
.w2dorder .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.w2dorder .p{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.w2dorder .p .ph{aspect-ratio:4/3;background:var(--brand-soft) center/cover no-repeat}
.w2dorder .p .tx{padding:7px 8px 9px}
.w2dorder .p .nm{font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.3;display:block}
.w2dorder .p .pr{font-size:13px;font-weight:800;color:var(--brand);margin-top:2px;display:block}
.w2dorder .go{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--cta);color:#fff;border-radius:var(--pill);padding:13px 16px;font-weight:800;font-size:14.5px;margin-top:12px}
.w2dorder .go .ic{width:19px;height:19px;color:#fff}
.w2dorder .go:hover{background:var(--cta-hover)}
.w2dorder .more{font-size:12px;color:var(--muted);text-align:center;margin-top:7px}

/* ── SELLO DE CONFIANZA · negocio reclamado / verificado ───────────────────────────────────────
   PEDIDO DEL DUEÑO (2026-08-01): "a los negocios reclamados agrega un badge de verificación
   anaranjada que diga negocio reclamado en What2Do, y a los verificados uno verde... que sea un
   badge muy bonito y atractivo que haga a la gente sentirse segura de que alguien ha verificado o
   puesto atención en ello".

   QUÉ SIGNIFICA CADA UNO (regla de negocio, ver CLAUDE.md · prioridad de visibilidad):
     level 1 -> RECLAMADO  (el dueño reclamó su ficha; modo gratis)      -> naranja
     level 2 -> VERIFICADO (negocio con plan o comisiones activas)       -> verde
   El verde es el escalón MÁS ALTO: no lo bajes a level 1 "para que se vea más lleno" — el sello
   pierde su valor si lo tiene cualquiera. */
.w2dseal{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;border-radius:999px;
  font-size:13px;font-weight:750;letter-spacing:-.01em;line-height:1.15;border:1px solid;
  text-decoration:none;vertical-align:middle;max-width:100%}
.w2dseal .sl{width:22px;height:22px;flex:none;display:block}
.w2dseal .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Verificado: verde de marca. El halo suave es lo que le da el aire de "sello", no un borde duro. */
.w2dseal.ok{color:#065F46;background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border-color:#A7F3D0;
  box-shadow:0 1px 2px rgba(5,150,105,.12), 0 0 0 4px rgba(5,150,105,.07)}
.w2dseal.ok .sl{color:#059669}
/* Reclamado: naranja. Mismo lenguaje visual, otro escalón. */
.w2dseal.cl{color:#9A3412;background:linear-gradient(135deg,#FFFBEB,#FFEDD5);border-color:#FED7AA;
  box-shadow:0 1px 2px rgba(234,88,12,.12), 0 0 0 4px rgba(234,88,12,.07)}
.w2dseal.cl .sl{color:#EA580C}
/* En la ficha va suelto bajo el nombre, con aire. */
.w2dseal.big{font-size:14px;padding:9px 17px 9px 9px;margin:2px 0 4px}
.w2dseal.big .sl{width:25px;height:25px}
/* En la tarjeta va compacto y no debe empujar el layout. */
.w2dseal.mini{font-size:11px;font-weight:700;padding:4px 9px 4px 5px;gap:6px;box-shadow:none}
.w2dseal.mini .sl{width:15px;height:15px}
@media (max-width:420px){ .w2dseal.big{font-size:13px} }

/* Platillo SIN foto en el menú de la ficha. Pedido del dueño: que todos los negocios verificados
   se vean como Gorditas El JR. No podemos inventar la foto que el negocio no subió, pero el hueco
   debe verse INTENCIONAL y no como un error de carga — medido: Viña del Mar tiene 97 platillos y
   ninguno con foto, así que su menú eran seis recuadros grises vacíos. La inicial va sobre un tono
   estable derivado del propio nombre del platillo (ver tiendaHtml). */
.ph.sinfoto{display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:26px;letter-spacing:-.02em;user-select:none}
/* Encuesta "¿Los datos son correctos?" — estilos compartidos para poder inyectarla también en las
   fichas ESTÁTICAS de wwd/d/ (generadas el 2026-07-07, antes de que la encuesta existiera).
   ficha.html trae estas mismas reglas inline; tenerlas aquí evita regenerar 30,436 archivos. */
.claim.sug{border-color:#cbd5e1;background:#f8fafc}
.claim.sug .ct{color:#0f172a}
.sugp{margin:6px 0 10px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.claim.sug select{width:100%;padding:11px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   REDISEÑO MINIMALISTA DEL DIRECTORIO — 2026-08-17, orden del dueño:
   "muy lleno de imágenes, botones muy grandes, difícil de navegar, deslizar demasiado…
    necesitamos minimalista, moderno y bien estético".

   MEDIDO ANTES (móvil 375×812): 1,540px de encabezado + promo + controles ANTES del primer
   negocio — casi dos pantallas de scroll en un DIRECTORIO, cuyo trabajo es mostrar negocios.
   Principio: manda el CONTENIDO. Buscar es la acción primaria; todo lo demás es cromo y
   debe ocupar lo mínimo. No se quita ninguna función: se compacta y se reordena.
   Va al FINAL del archivo a propósito: un @media NO agrega especificidad, así que las reglas
   móviles tienen que ir DESPUÉS de las de escritorio o pierden (lección v4.100.x).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  /* Hero: sigue siendo la bienvenida, pero deja de comerse media pantalla */
  .xhero{padding:22px 16px;border-radius:18px}
  .xhero h1{font-size:26px;line-height:1.15;letter-spacing:-.01em}
  .xhero p{font-size:13.5px;line-height:1.45}

  /* Buscar: primero y con presencia (ahora vive justo bajo el hero) */
  .searchbox{margin:12px auto 4px;padding:12px 15px;border-radius:14px}

  /* Intenciones: de rejilla de losas (318px) a una TIRA que se desliza (~54px).
     Los ocho accesos siguen ahí — se navegan de lado, no hacia abajo. */
  .intents{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
           margin:10px -14px 2px;padding:2px 14px 4px;scroll-snap-type:x proximity}
  .intents::-webkit-scrollbar{display:none}
  .intent{flex:0 0 auto;padding:9px 14px;font-size:13px;font-weight:650;border-radius:999px;gap:7px;
          white-space:nowrap;scroll-snap-align:start}
  .intent .ic{width:16px;height:16px;flex:none}

  /* Controles: cuatro filas apiladas (~290px) → tiras compactas */
  .cityrow{margin:8px 0 0;gap:7px;font-size:13px}
  .cityrow select,.cityrow input{padding:7px 11px;font-size:13px}
  .viewbar{margin:8px 0 0;gap:8px;justify-content:space-between}
  .viewbar select{padding:7px 11px;font-size:12.5px}
  .wwdAssistHint{font-size:12px;margin:6px 0 0}
  .count{font-size:12.5px;margin-top:8px}
  /* Riel A-Z: se conserva (es navegación), solo más delgado */
  .alphaRail{padding:4px 0 2px;margin:2px 0 0;gap:4px}
  .alphaRail button{height:28px;min-width:30px;font-size:11.5px}

  /* La promo de compartir/descargar ahora vive al final: ahí puede respirar sin estorbar */
  .wwdShareApps{margin:20px 0 8px}
}

/* ── Segunda pasada del rediseño (misma orden del dueño): el cromo restante seguía sumando
      301px entre el buscador y el primer negocio. Se compacta SIN quitar ninguna función. ── */
@media(max-width:640px){
  /* Encabezado: cabía en dos filas; con pastillas más justas cabe en una */
  .modlink,.addlink,.bizlink,.langbtn,.authbtn{font-size:11px;padding:5px 9px}
  .tw{row-gap:6px;padding:8px 10px}

  /* Hero: el subtítulo ocupaba tres renglones */
  .xhero{padding:18px 16px}
  .xhero h1{font-size:24px}
  .xhero p{font-size:12.5px;line-height:1.4;max-width:30ch;margin-left:auto;margin-right:auto}

  /* Ubicación: era el bloque más pesado (117px en tres renglones). Pastillas chicas → una o dos. */
  .cityrow{margin:6px 0 0;gap:6px;font-size:12px;row-gap:6px}
  .cityrow select,.cityrow input,.cityrow button{padding:6px 10px;font-size:12px}
  .cityrow .ic{width:15px;height:15px}

  /* La pista de la IA repetía lo que ya dice el botón "AI" del buscador */
  .wwdAssistHint{font-size:11.5px;line-height:1.35;margin:5px 0 0;opacity:.85}

  /* Orden y vista: misma tira, más delgada */
  .viewbar{margin:6px 0 0;gap:6px}
  .viewbar select{padding:6px 10px;font-size:12px}

  /* Riel A-Z y contador: una línea cada uno */
  .alphaRail{padding:3px 0 1px;margin:2px 0 0}
  .alphaRail button{height:26px;min-width:28px;font-size:11px}
  .count{font-size:12px;margin-top:6px;line-height:1.35}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO DEL DIRECTORIO — 2026-08-17
   Orden del dueño: "sigue pareciendo un diseño de inteligencia artificial… necesitamos que se
   vea que lo diseñó un profesional".

   DIAGNÓSTICO (medido, no opinado): la paleta era **Tailwind de fábrica** — #0F172A (slate-900),
   #64748B (slate-500), #E5E7EB (gray-200), #059669 (emerald-600), #EA580C (orange-600), #FAFAFA
   (neutral-50) — con **Poppins** y **radio 16px uniforme en todo**. Esa combinación exacta es la
   firma del diseño autogenerado: nada fue elegido, todo se heredó.

   PUNTO DE VISTA: esto no es un panel SaaS ni una guía boutique. Son 4.9M de negocios mexicanos
   —abarrotes, taquerías, talleres, farmacias— consultados en teléfonos con datos móviles. La
   referencia correcta es la SEÑALÉTICA: densa, legible, callada; jerarquía por tipografía y
   espacio, no por meter cada cosa en su cajita; color con FUNCIÓN (abierto, verificado,
   destacado), no de adorno. Por eso NO se agrega una segunda tipografía: una petición de red
   más pesa más de lo que aporta en este público.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Neutros CÁLIDOS con sesgo hacia el verde de marca: se ven elegidos, no heredados */
  --bg:#FAF8F4;            /* papel cálido, no neutral-50 */
  --hero:#FFFDF9;
  --ink:#12201A;           /* casi negro con matiz verde */
  --body:#3A4741;
  --muted:#78857D;         /* gris cálido, no slate */
  --line:#E5E1D9;          /* hairline cálida */
  /* Un solo acento con peso, y el cálido reservado para la acción principal */
  --brand:#0B6B4A;         /* verde bosque, más serio que emerald-600 */
  --brand-soft:#DCEFE5;
  --cta:#CE4E1F;           /* terracota, no naranja neón */
  --cta-hover:#B14119;
  --ok:#0B6B4A;
  /* Escala de radio (antes: 16px para TODO) */
  --r:14px; --r-sm:10px; --pill:999px;
  /* Sombra más ceñida: se lee como oficio, no como "card genérica" */
  --sh:0 1px 2px rgba(18,32,26,.05);
  --shh:0 10px 28px -20px rgba(18,32,26,.45),0 1px 2px rgba(18,32,26,.06);
}
body{font-size:15px;line-height:1.55}

/* ── Tipografía con CONTRASTE (antes casi todo era 13px peso 650-750) ── */
.xhero h1{letter-spacing:-.035em;font-weight:800}
.card .t{letter-spacing:-.012em;font-weight:700}
/* Micro-etiquetas: versalitas espaciadas. Es lo que separa una interfaz trabajada de una plana. */
.card .k,.count,.cityrow>span[data-i]{text-transform:uppercase;letter-spacing:.075em;font-size:10.5px;font-weight:700;color:var(--muted)}
.count{letter-spacing:.05em}
/* Los números se alinean en columna (precios, contadores, horarios) */
.count,.alphaRail button,.pager{font-variant-numeric:tabular-nums}

/* ── DES-ENCAJONAR: los controles secundarios dejan de ser pastillas blancas con borde ── */
.cityrow .ghostbtn,.cityrow .statebtn,.viewbar select,.cityrow select{
  background:transparent;border-color:transparent;color:var(--body);font-weight:600;
  box-shadow:inset 0 -1px 0 var(--line);border-radius:0;padding-left:2px;padding-right:2px}
.cityrow .ghostbtn:hover,.cityrow .statebtn:hover{color:var(--brand);box-shadow:inset 0 -1px 0 var(--brand)}
.cityrow .locbtn{background:transparent;border-color:var(--line)}
/* El buscador es la herramienta: se queda con cuerpo y contorno, pero más sobrio */
.searchbox{border-color:var(--line);box-shadow:var(--sh)}
.searchbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* Las intenciones son navegación, no botones de acción: contorno tenue, sin peso de CTA */
.intent{border-color:var(--line);font-weight:600;box-shadow:none;background:var(--hero)}
.intent:hover{border-color:var(--brand);color:var(--brand)}
/* Riel A-Z: que se lea como índice de directorio, no como fila de botones */
.alphaRail button{border-color:transparent;background:transparent;color:var(--muted);font-weight:700}
.alphaRail button:hover{color:var(--brand)}
.alphaRail button.on{background:var(--brand-soft);color:var(--brand)}

/* ── Tarjetas: que mande la FOTO del negocio, no el marco ── */
.card{border-color:var(--line);box-shadow:var(--sh);border-radius:var(--r)}
.card:hover{box-shadow:var(--shh);border-color:#D7D2C7}

/* ── Corrección de mi propia pasada: las versalitas espaciadas funcionan en etiquetas CORTAS
      ("CATEGORÍA", "BUSCANDO EN"). Aplicadas a una frase larga como el contador, gritan y
      cuestan leerlas. El contador vuelve a caja normal, pequeño y callado. ── */
.count{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--muted)}

/* ── HERO: era el elemento más genérico de la página (foto + velo negro + texto blanco en
      negritas CENTRADO = el hero por defecto de cualquier plantilla). Se conserva el video,
      el reloj y el saludo por horario que el dueño aprobó, pero se compone como editorial:
      texto alineado a la izquierda, altura contenida y el subtítulo en su sitio. ── */
@media(max-width:640px){
  .xhero{padding:16px 18px 18px;border-radius:16px;min-height:0}
  .xhero .xin,.xhero>div:not(.xscrim){text-align:left}
  .xhero h1{font-size:27px;line-height:1.08;letter-spacing:-.04em;margin:0}
  .xhero p{font-size:13px;line-height:1.4;margin-top:7px;max-width:34ch;
           margin-left:0;margin-right:0;opacity:.92}
  .xmeta{width:auto;justify-content:flex-start;margin-bottom:10px}
  .xlive{margin-right:0}
}