:root{--nav:#1F3A2E;--primary:#2E7D5B;--bg:#F4F7F3;--ink:#1b1f1c;--muted:#5b6660;--line:#dde3df;--card:#fff;--accent:#c7792b;--radius:10px;--max:1120px}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
a{color:var(--primary)}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,3.5vw,2.4rem)}
h2{font-size:clamp(1.25rem,2.5vw,1.6rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:#fff;padding:8px;z-index:10}
/* nav */
.nav{background:var(--nav);color:#fff}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.2rem;letter-spacing:.2px}
.brand img{height:36px;width:auto;display:block}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;opacity:.92}.nav a:hover{opacity:1;text-decoration:underline}
.nav .call{background:var(--accent);padding:8px 12px;border-radius:999px;font-weight:600}
/* hero */
.hero{background:linear-gradient(160deg,var(--nav),var(--primary));color:#fff;padding:48px 0 40px}
.hero h1{color:#fff}
.hero p{font-size:1.1rem;max-width:60ch;opacity:.95}
.search{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.search select,.search input{flex:1 1 200px;padding:12px;border-radius:8px;border:1px solid var(--line);font-size:1rem}
.btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:8px;padding:12px 18px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer}
.btn.secondary{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn.small{padding:6px 10px;font-size:.9rem}
.btn.danger{background:#9b2c2c}
/* sections */
.section{padding:32px 0}
.section h2{margin-bottom:14px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid.narrow{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.pill{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;text-decoration:none;color:var(--ink)}
.pill:hover{border-color:var(--primary)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h3 a{text-decoration:none;color:var(--ink)}
.card .meta{color:var(--muted);font-size:.92rem;margin:4px 0}
.card .trades{font-size:.9rem;color:var(--muted)}
.card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;border-radius:4px;padding:2px 6px;background:#eef2ef;color:var(--muted);margin-right:6px}
.badge.sponsored{background:#fdeedc;color:#8a4b0b}
.badge.client{background:#e2eef8;color:#1d4e89}
.badge.featured{background:#e6f4ec;color:#1f6b45}
.badge.claimed{background:#eef2ef;color:#2b4a3a}
.disclosure{background:#fdeedc;border:1px solid #f1c993;color:#5f3607;border-radius:8px;padding:10px 12px;margin:0 0 14px;font-size:.95rem}
.rating{font-weight:600}.rating small{font-weight:400;color:var(--muted)}
.stars{color:#d79a1d;letter-spacing:1px}
.crumbs{font-size:.9rem;color:var(--muted);margin:16px 0 8px}
.crumbs a{color:var(--muted)}
.lede{font-size:1.1rem;color:var(--muted);max-width:70ch}
.prose{max-width:72ch}
.prose h2{margin-top:1.4em}
.prose table{border-collapse:collapse;width:100%;margin:1em 0}
.prose th,.prose td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.two{display:grid;gap:24px;grid-template-columns:2fr 1fr}
@media(max-width:800px){.two{grid-template-columns:1fr}}
.aside .card{margin-bottom:14px}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
dl.facts dt{color:var(--muted)}dl.facts dd{margin:0}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600}
.notice{background:#e6f4ec;border:1px solid #bfe0cc;border-radius:8px;padding:12px;margin:0 0 14px}
.error{background:#fbe9e9;border:1px solid #efb9b9;border-radius:8px;padding:12px;margin:0 0 14px}
form.stack{display:grid;gap:12px;max-width:560px}
form.stack label{display:grid;gap:4px;font-weight:600}
form.stack input,form.stack textarea,form.stack select{padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;width:100%}
form.stack textarea{min-height:120px}
.hp{position:absolute;left:-9999px;top:-9999px}
footer{background:var(--nav);color:#dfe7e2;padding:32px 0;margin-top:40px;font-size:.95rem}
footer a{color:#fff}
footer .cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:4px 0}
footer .fine{margin-top:20px;font-size:.85rem;opacity:.8}
.table-wrap{overflow:auto}
table.data{border-collapse:collapse;width:100%;background:#fff;font-size:.93rem}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
table.data th{background:#f0f3f1}
/* console */
.console body,body.console{background:#f5f6f7}
.cbar{background:#17212b;color:#fff}
.cbar .wrap{display:flex;gap:14px;align-items:center;min-height:52px;flex-wrap:wrap}
.cbar a{color:#fff;text-decoration:none;opacity:.9}.cbar a.on{font-weight:700;opacity:1;text-decoration:underline}
.cbar .who{margin-left:auto;font-size:.9rem;opacity:.8}
.ctx{background:#e8ecf0;border-bottom:1px solid #d6dce2;padding:8px 0;font-size:.95rem}
.ctx form{display:inline}
.ctx select{padding:4px 8px}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:16px 0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px}
.kpi b{display:block;font-size:1.6rem}
.kpi span{color:var(--muted);font-size:.9rem}
.status{display:inline-block;border-radius:4px;padding:1px 6px;font-size:.8rem;font-weight:600}
.status.new{background:#fdeedc;color:#8a4b0b}.status.in_progress{background:#e2eef8;color:#1d4e89}.status.done{background:#e6f4ec;color:#1f6b45}.status.spam{background:#eee;color:#666}
.slotgrid{display:grid;gap:4px;font-size:.8rem}
.slot{padding:4px 6px;border-radius:4px;background:#eef2ef}.slot.booked{background:#fdeedc}.slot.expiring{background:#fbe9e9}
pre.small{font-size:.85rem;white-space:pre-wrap;background:#fff;border:1px solid var(--line);padding:8px;border-radius:6px}
.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.right{text-align:right}

/* ---------- 0.2: aliases for the ported directory-platform component CSS ---------- */
:root{--s-sm:8px;--s-md:16px;--s-lg:24px;--border:var(--line);--radius-card:var(--radius);--text-strong:var(--ink);--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--radius-pill:999px;--font-display:inherit}
/* hero with an image, phone call-to-action */
.hero--image{background:linear-gradient(160deg,rgba(0,0,0,.62),rgba(0,0,0,.35)),var(--hero) center/cover no-repeat,var(--nav)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 4px}
.hero__cta span{opacity:.95}
.btn--accent{background:var(--accent)}
.section--alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.callpanel h3{margin-top:0}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{color:#fff;opacity:.9}.social a:hover{opacity:1}
.social svg{fill:currentColor;display:block}
.certs{font-size:.95rem}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{margin:6px 0}
.card--guide{text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.card--guide h3{margin-top:10px}
.card__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.prose--wide{max-width:none}
.prose figure{margin:16px 0}

/* ---------- 0.2: share bar, video, lead image, map, data tables, stat tiles (from directory-platform) ---------- */
.lead { margin: var(--s-md) 0 var(--s-lg); }
.lead img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); }
.table-wrap { overflow-x: auto; margin: var(--s-md) 0 var(--s-lg); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { position: sticky; top: 0; background: var(--bg); color: var(--nav); font-weight: 600; font-size: 13px; }
.data-table .num { text-align: right; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) td { background: #FAFCFB; }
.data-table .sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.data-table .sort::after { content: '↕'; opacity: .35; font-size: 11px; }
.data-table th[aria-sort="ascending"] .sort::after { content: '↑'; opacity: 1; }
.data-table th[aria-sort="descending"] .sort::after { content: '↓'; opacity: 1; }
.data-table .sort:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.stats { display: grid; gap: var(--s-md); grid-template-columns: repeat(2, 1fr); margin: var(--s-lg) 0; }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-md); }
.stat__value { display: block; font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--nav); letter-spacing: -0.5px; }
.stat__label { display: block; font-size: 13px; line-height: 18px; color: var(--muted); margin-top: 4px; }
@media (max-width: 480px) { .stat { padding: 12px; } .stat__value { font-size: 22px; } }
.copy-link { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 6px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--nav); cursor: pointer; font: inherit; line-height: 1; }
.copy-link:hover { border-color: var(--primary); color: var(--primary); }
.copy-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.copy-link.is-copied svg { display: none; }
.copy-link.is-copied::before { content: '\2713'; font-size: 16px; font-weight: 700; color: var(--primary); width: 18px; text-align: center; }
.copy-link__status { font-size: 13px; color: var(--muted); }
.copy-link__status:empty { display: none; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); margin: 0 0 var(--s-md); padding-bottom: var(--s-md); border-bottom: 1px solid var(--border); }
.share--compact { margin: var(--s-md) 0 0; padding: var(--s-md) 0 0; border-bottom: 0; border-top: 1px solid var(--border); gap: 6px; }
.share--compact .share__btn { width: 36px; height: 36px; }
.share__btn { cursor: pointer; font: inherit; padding: 0; }
.share__btn[hidden] { display: none; }
.share__btn--native:hover, .share__btn--native:focus-visible, .share__btn--copy:hover, .share__btn--copy:focus-visible { background: var(--primary); }
.share__btn--copy.is-copied svg { display: none; }
.share__btn--copy.is-copied::before { content: '\2713'; font-size: 16px; font-weight: 700; }
.share__status { font-size: 13px; color: var(--muted); }
.share__status:empty { display: none; }
@media (max-width: 480px) { .share { gap: 6px; } .share__label { display: none; } .share__btn { width: 38px; height: 38px; } }
.card--guide .share { position: relative; z-index: 1; margin-top: auto; }
.card--guide .card__desc { margin-bottom: var(--s-md); }
.card--guide .card__img { max-width: none; flex-shrink: 0; }
.share__label { font-weight: 600; color: var(--nav); margin-right: 4px; }
.share__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--nav); transition: background .15s, color .15s, border-color .15s; }
.share__btn svg { fill: currentColor; }
.share__btn:hover, .share__btn:focus-visible { color: #fff; border-color: transparent; }
.share__btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.share__btn--whatsapp:hover, .share__btn--whatsapp:focus-visible { background: #25D366; }
.share__btn--facebook:hover, .share__btn--facebook:focus-visible { background: #0866FF; }
.share__btn--x:hover, .share__btn--x:focus-visible { background: #000; }
.share__btn--linkedin:hover, .share__btn--linkedin:focus-visible { background: #0A66C2; }
.share__btn--video { margin-left: auto; }
.lead--video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-card); overflow: hidden; }
.video { position: absolute; inset: 0; display: block; }
.video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__play { position: absolute; right: 16px; bottom: 16px; display: flex; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.video__play-bg { fill: var(--nav); fill-opacity: .85; transition: fill .15s, fill-opacity .15s; }
.video:hover .video__play-bg, .video:focus-visible .video__play-bg { fill: var(--primary); fill-opacity: 1; }
.video:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.share__btn--video:hover, .share__btn--video:focus-visible { background: var(--primary); }
.map { position: relative; margin: var(--s-lg) 0 var(--s-sm); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: #e9eef2; box-shadow: var(--shadow-sm); }
.map__img { display: block; width: 100%; height: auto; }
.map__pin { position: absolute; width: 0; height: 0; text-decoration: none; color: var(--text-strong); z-index: 1; }
.map__pin:hover, .map__pin:focus-visible { z-index: 3; }
.map__dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.map__label { position: absolute; left: 11px; top: -11px; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 18px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.94); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.map__pin--left .map__label { left: auto; right: 11px; }
.map__pin--primary { z-index: 2; }
.map__pin--primary .map__dot { left: -10px; top: -10px; width: 20px; height: 20px; background: var(--nav); }
.map__pin--primary .map__label { background: var(--nav); color: #fff; font-size: 14px; left: 14px; top: -12px; }
.map__pin--primary.map__pin--left .map__label { left: auto; right: 14px; }
.map__pin--current .map__dot { box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 6px var(--primary); }
.map__pin:hover .map__label, .map__pin:focus-visible .map__label { background: var(--primary); color: #fff; }
.map__credit { position: absolute; right: 6px; bottom: 4px; font-size: 11px; line-height: 16px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.82); color: #333; }
.map__credit a { color: #333; }
@media (max-width: 640px) { .map__label { font-size: 11px; padding: 1px 6px; } .map__pin--primary .map__label { font-size: 12px; } }