/* Meridiano360 — portal público. Todos os valores vêm dos tokens do kit ativo (/brand/tokens): cores --c-*, fontes --f-*,
   escala --fs-*, espaçamentos --sp-*. Motivos da marca (bússola, estrada, pontilhado) só como acento discreto.
   Autor: Walter Harveys / H8 Brasil */
:root{--c-gray:#BFBEBB;--shadow:0 10px 30px rgba(0,30,54,.08);--focus:0 0 0 3px color-mix(in srgb,var(--c-orange) 45%,transparent);--ease:.35s cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);color:var(--c-ink);background:var(--c-white);line-height:1.55;font-size:var(--fs-md);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--c-navy);text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.sr{position:absolute;left:-9999px}.skip{position:absolute;left:-9999px;top:0;background:var(--c-orange);color:#fff;padding:8px 12px;border-radius:0 0 8px 0}.skip:focus{left:0;z-index:99}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--sp-gutter)}.wrap--narrow{max-width:760px}
.muted{color:var(--c-muted)}.small{font-size:var(--fs-sm)}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--c-navy);line-height:1.12;text-wrap:balance;font-weight:800;margin:0}
p{margin:0 0 1em}

/* ---------- cabeçalho ---------- */
.topbar{border-bottom:1px solid var(--c-line);background:var(--c-white);position:sticky;top:0;z-index:20}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;flex-wrap:wrap}
.brand{text-decoration:none;display:flex;align-items:center;padding:10px 0}.brand-logo{display:block;height:46px;width:auto}
.brand__word{font-family:var(--f-display);font-weight:800;font-size:var(--fs-lg);color:var(--c-navy);letter-spacing:.01em}
.nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--c-ink);padding:10px 12px;border-radius:8px;font-size:var(--fs-sm);font-weight:600;position:relative}
.nav a:hover{color:var(--c-navy);background:var(--c-sand)}
.nav a.on{color:var(--c-navy)}.nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:2px;background:var(--c-orange)}
.search{margin-left:8px}.search input{border:1px solid var(--c-line);border-radius:999px;padding:8px 14px;font:inherit;font-size:var(--fs-sm);min-width:160px;background:var(--c-white);color:var(--c-ink)}.search input:focus{border-color:var(--c-orange)}
.nav-toggle{display:none;border:1px solid var(--c-line);background:var(--c-white);padding:8px 14px;border-radius:999px;font:inherit;font-weight:600;color:var(--c-navy)}
@media (max-width:900px){.brand-logo{height:38px}.topbar__in{min-height:62px}.nav-toggle{display:block}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:4px 0 14px;border-top:1px solid var(--c-line)}.nav.open{display:flex}.nav a{padding:12px 8px;border-bottom:1px solid var(--c-line);border-radius:0}.nav a.on::after{display:none}.nav a.on{border-left:3px solid var(--c-orange);padding-left:12px}.search{margin:10px 0 0}.search input{width:100%}}
.main{min-height:60vh}

/* ---------- herói (banner de viagem) — modelo único ---------- */
.hero{position:relative;min-height:min(70vh,640px);display:flex;align-items:flex-end;color:#fff;background:var(--c-navy-deep) var(--hero,none) center/cover no-repeat;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,41,.08) 20%,rgba(0,20,41,.55) 60%,rgba(0,20,41,.92) 100%)}
.hero__compass{position:absolute;right:-6%;top:-10%;width:min(52vw,520px);height:auto;color:rgba(250,250,248,.9);opacity:.18;pointer-events:none}.hero--photo .hero__compass{opacity:.12}
@media (max-width:700px){.hero__compass{width:70vw;right:-20%;top:-6%}}
.lockup{display:inline-flex;align-items:center;gap:10px}.lockup__mark{height:48px;width:48px}.lockup__word{height:20px;width:auto}
@media (max-width:900px){.lockup__mark{height:40px;width:40px}.lockup__word{height:17px}}
.hero__in{position:relative;padding-top:72px;padding-bottom:56px;max-width:1180px;width:100%;z-index:1}
.hero__kicker{margin:0 0 10px;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-xs);font-weight:600;color:var(--c-orange-soft)}
.hero__title{font-size:clamp(2rem,5vw,3.6rem);color:#fff;margin:0 0 14px;max-width:18ch}
.hero__sub{font-size:var(--fs-lg);max-width:58ch;margin:0 0 22px;opacity:.94;line-height:1.45}
.hero--empty{min-height:min(52vh,480px);background:linear-gradient(120deg,var(--c-navy-deep),var(--c-navy) 70%)}
.hero--trip{min-height:min(56vh,520px)}
.hero__meta{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-sm);opacity:.9;margin:0 0 18px}.hero__meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------- botões, etiquetas, formulários ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--c-navy);color:#fff;text-decoration:none;padding:12px 24px;border-radius:999px;font-weight:600;border:0;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;transition:transform var(--ease),background var(--ease),box-shadow var(--ease)}
.btn:hover{background:var(--c-navy-deep);transform:translateY(-1px);box-shadow:var(--shadow)}.btn--accent{background:var(--c-orange)}.btn--accent:hover{background:#c94f02}.btn--ghost{background:var(--c-white);color:var(--c-navy);border:1px solid var(--c-line)}.btn--ghost:hover{background:var(--c-sand)}.btn--small{padding:8px 16px;font-size:var(--fs-sm)}
.chips{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--c-line);text-decoration:none;color:var(--c-navy);background:var(--c-white);font-size:var(--fs-sm);font-weight:600}.chip:hover{border-color:var(--c-navy)}.chip.on{background:var(--c-navy);color:#fff;border-color:var(--c-navy)}.chip span{opacity:.6;font-weight:400}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:0 0 26px;padding:16px;background:var(--c-sand);border-radius:var(--sp-radius)}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);font-weight:600;flex:1 1 160px}
.filters input,.filters select{font:inherit;font-size:var(--fs-md);padding:10px 12px;border:1px solid var(--c-line);border-radius:10px;background:var(--c-white);color:var(--c-ink);width:100%}.filters input:focus,.filters select:focus{border-color:var(--c-orange)}
.filters .btn{align-self:end}

/* ---------- seções e títulos ---------- */
.section{padding:calc(var(--sp-section)*.8) 0}.section--alt{background:var(--c-sand)}.section--tight{padding-top:28px}
.section__title,.page__title{font-size:var(--fs-xl);margin:0 0 22px}.page__title{font-size:var(--fs-xxl);margin-top:40px}
.section__title::after,.page__title::after{content:"";display:block;width:64px;height:4px;margin-top:10px;background:radial-gradient(circle,var(--c-orange) 0 1.6px,transparent 2.1px) 0 0/8px 4px repeat-x}
.section__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}.section__head .section__title{margin:0}
.grid{display:grid;gap:var(--sp-gutter)}.grid--2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.grid--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media (max-width:480px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* ---------- cartão (momento, viagem, episódio) — modelo único ---------- */
.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--sp-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card__media{display:block;aspect-ratio:3/2;background:var(--c-sand);overflow:hidden;position:relative}.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.card:hover .card__media img{transform:scale(1.03)}
.card__placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--c-sand),var(--c-line));position:relative}
.card__placeholder::after{content:"";position:absolute;right:14px;bottom:14px;width:64px;height:64px;border:1.5px solid var(--c-navy);border-radius:50%;opacity:.14;background:radial-gradient(circle,var(--c-orange) 0 6px,transparent 7px),repeating-conic-gradient(var(--c-navy) 0 2deg,transparent 2deg 30deg);-webkit-mask:radial-gradient(circle,#000 0 20%,transparent 21%),radial-gradient(circle,transparent 0 78%,#000 79%);mask:radial-gradient(circle,#000 0 20%,transparent 21%),radial-gradient(circle,transparent 0 78%,#000 79%)}
.card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.card__kicker{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--c-orange);font-weight:600}
.card__title{font-size:var(--fs-lg);line-height:1.25;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card__title a{text-decoration:none;color:var(--c-navy)}.card__title a:hover{text-decoration:underline}
.card__excerpt{margin:0;color:var(--c-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card__meta{margin:auto 0 0;font-size:var(--fs-sm);color:var(--c-muted);padding-top:4px}
.card--trip .card__title{font-size:var(--fs-lg)}

/* ---------- estados vazios ---------- */
.empty{text-align:center;padding:52px 20px;border:1px dashed var(--c-line);border-radius:var(--sp-radius);color:var(--c-muted);background:var(--c-white)}
.empty svg{color:var(--c-orange);margin:0 auto 14px;display:block}.empty__title{font-family:var(--f-display);color:var(--c-navy);font-size:var(--fs-lg);margin:0 0 6px;font-weight:700}.empty__text{margin:0;max-width:48ch;margin-inline:auto}
.notice{background:#FFF6EC;border:1px solid var(--c-orange-soft);padding:12px 16px;border-radius:10px;margin:0 0 20px;color:#5a3a1c}

/* ---------- página de viagem: abas, visão geral, dia a dia, semana a semana ---------- */
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--c-line);margin-top:6px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;padding:16px 16px 14px;text-decoration:none;color:var(--c-muted);border-bottom:3px solid transparent;font-weight:600;font-size:var(--fs-sm)}.tabs a:hover{color:var(--c-navy)}.tabs a.on{color:var(--c-navy);border-color:var(--c-orange)}
.overview{display:grid;grid-template-columns:1fr 320px;gap:48px}@media (max-width:900px){.overview{grid-template-columns:1fr;gap:28px}}
.overview__aside{background:var(--c-sand);border-radius:var(--sp-radius);padding:22px;align-self:start}.overview__aside h3{font-size:var(--fs-md);margin:18px 0 8px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:var(--fs-sm);margin:0}.facts dt{color:var(--c-muted)}.facts dd{margin:0;font-weight:600;color:var(--c-navy)}
.stages{padding-left:0;list-style:none;margin:0;counter-reset:st}.stages li{position:relative;padding:8px 0 8px 30px;border-left:2px dotted var(--c-orange);margin-left:8px}.stages li::before{counter-increment:st;content:counter(st);position:absolute;left:-13px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--c-navy);color:#fff;font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center;font-weight:700}
.prose{font-size:1.08rem;line-height:1.7}.prose p{margin:0 0 1.2em}.prose .traveler{border-left:3px solid var(--c-orange);padding-left:18px;font-style:italic;color:var(--c-ink)}
/* dia a dia: linha do tempo com a estrada pontilhada */
.day{margin-bottom:44px;position:relative;padding-left:28px;border-left:2px dotted var(--c-orange)}
.day::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--c-orange);box-shadow:0 0 0 4px var(--c-white)}
.day__title{font-size:var(--fs-lg);margin:0 0 6px;font-weight:700}.day__title time{color:var(--c-navy)}.day__sub{margin:0 0 16px;color:var(--c-muted);font-size:var(--fs-sm)}
.timeline{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* semana a semana: resumo com intervalo explícito */
.week{margin-bottom:44px}.week__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}.week__label{font-family:var(--f-display);font-weight:800;color:var(--c-navy);font-size:var(--fs-lg)}.week__range{font-size:var(--fs-sm);color:var(--c-muted);border:1px solid var(--c-line);border-radius:999px;padding:4px 12px}

/* ---------- matéria/momento ---------- */
.post__head{padding-top:48px}.post__title{font-size:clamp(1.9rem,4.2vw,3rem);margin:0 0 14px}.post__meta{color:var(--c-muted);margin:0 0 26px;font-size:var(--fs-sm)}
.post__cover{margin:0 auto 34px}.post__cover img{border-radius:var(--sp-radius);width:100%;aspect-ratio:16/9;object-fit:cover}
.post__cover figcaption,.gallery figcaption{font-size:var(--fs-sm);color:var(--c-muted);margin-top:8px}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:22px 0 30px}.gallery figure{margin:0}.gallery img{border-radius:10px;width:100%;aspect-ratio:3/2;object-fit:cover}
.place{color:var(--c-navy);font-weight:600}.place span{color:var(--c-orange)}
.tip{background:var(--c-sand);border-radius:12px;padding:16px 18px;margin:22px 0;border-left:4px solid var(--c-orange)}.tip strong{display:block;margin-bottom:4px;color:var(--c-navy);font-family:var(--f-display)}.tip p,.tip ul{margin:0}.rating{color:var(--c-orange);letter-spacing:.12em}

/* ---------- mapa, chamada da viagem atual ---------- */
.map{height:min(70vh,560px);border-radius:var(--sp-radius);border:1px solid var(--c-line);background:var(--c-sand)}
.current{background:var(--c-sand);border-radius:var(--sp-radius);padding:26px;position:relative;overflow:hidden}.current::after{content:"";position:absolute;right:-10%;bottom:-40px;width:60%;height:90px;border-top:3px solid var(--c-orange);border-radius:50%;opacity:.25;transform:rotate(-5deg)}.current h3{font-size:var(--fs-lg);margin:0 0 8px}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:28px;list-style:none;padding:0}

/* ---------- rodapé ---------- */
.footer{border-top:1px solid var(--c-line);background:var(--c-sand);margin-top:56px;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;left:-5%;bottom:-70px;width:110%;height:160px;border-top:3px solid var(--c-orange);border-radius:50%;opacity:.18;transform:rotate(-2deg);pointer-events:none}
.footer__in{padding:40px var(--sp-gutter) 34px;text-align:center;color:var(--c-muted);font-size:var(--fs-sm);position:relative}
.footer__logo{width:150px;height:auto;margin:0 auto 12px}.footer__brand{font-family:var(--f-display);color:var(--c-navy);font-size:var(--fs-lg);margin:0 0 6px;font-weight:800}.footer__note{max-width:56ch;margin:0 auto 12px}.footer__links a{color:var(--c-muted)}

/* ---------- central da marca (/brand) ---------- */
.brand{padding-top:32px}.brand__head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}.brand__versions select{font:inherit;padding:8px 10px;border:1px solid var(--c-line);border-radius:8px}
.brand__toc{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 8px;position:sticky;top:72px;background:var(--c-white);padding:8px 0;z-index:5}.brand__toc a{font-size:var(--fs-sm);padding:6px 12px;border:1px solid var(--c-line);border-radius:999px;text-decoration:none;color:var(--c-navy)}
.brand__sec{padding:32px 0;border-top:1px solid var(--c-line)}.brand h3{margin:20px 0 10px;font-size:var(--fs-md)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:var(--fs-xs);border:1px solid var(--c-line);background:var(--c-sand);color:var(--c-navy);font-weight:600}.badge--ok{background:#e6f4ee;color:#2E7D5B}.badge--warn{background:#fff4e0;color:#B26A00}
.panel{margin:0;border:1px solid var(--c-line);border-radius:var(--sp-radius);overflow:hidden}.panel--light{background:#fff}.panel--dark{background:var(--c-navy-deep)}.panel--dark figcaption{color:#fff}.panel figcaption{padding:10px 14px;font-size:var(--fs-sm)}
.panel__stage{display:flex;align-items:center;justify-content:center;min-height:220px;padding:24px}.panel__stage img{max-height:180px;width:auto}.panel__stage--sm img{max-height:140px}.panel__stage--wide{min-height:120px}.panel__stage--wide img{max-height:70px}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}.swatch{min-width:120px;min-height:80px;border-radius:10px;border:1px solid var(--c-line);display:flex;align-items:flex-end;padding:8px;font-size:var(--fs-xs);background:var(--c-white)}.swatch span{background:rgba(255,255,255,.85);padding:2px 6px;border-radius:6px;color:#111}
.swatches--big .swatch{width:150px;height:110px;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:10px}.swatch__name{font-weight:700}.swatch__hex{font-family:monospace;font-size:var(--fs-xs);opacity:.9}.swatch__note{font-size:.65rem;opacity:.85}.swatches--big .swatch span{background:none;padding:0;color:inherit}
.ex{border-radius:var(--sp-radius);padding:18px}.ex__kicker{margin:0 0 8px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--c-muted);font-weight:600}
.brand .card{background:#fff;border:1px solid var(--c-line);border-radius:var(--sp-radius);padding:16px;display:block}.brand .card:hover{transform:none;box-shadow:none}
.protect{position:relative}.protect__box{position:relative;padding:12%;border:1px dashed var(--c-orange);border-radius:6px}.protect__box img{max-height:150px;display:block;outline:1px dashed var(--c-line)}.protect__x{position:absolute;font-size:var(--fs-xs);color:var(--c-orange)}.protect__x--t{top:2px;left:50%}.protect__x--b{bottom:2px;left:50%}.protect__x--l{left:4px;top:50%}.protect__x--r{right:4px;top:50%}
.minsizes{display:flex;gap:16px;align-items:center;margin-top:12px}
.use{margin:0;border-radius:var(--sp-radius);overflow:hidden;border:1px solid var(--c-line);background:#fff}.use .panel__stage{min-height:150px;padding:16px}.use .panel__stage img{max-height:90px}.use figcaption{padding:8px 12px;font-size:var(--fs-sm)}.use--ok figcaption{color:#2E7D5B}.use--no figcaption{color:#B3261E}.use--no .panel__stage{position:relative}.use--no .panel__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49%,#B3261E 49.5%,#B3261E 50.5%,transparent 51%);opacity:.7}
.motif{min-height:150px;position:relative;overflow:hidden}.motif--compass::before{content:"";position:absolute;right:-30px;bottom:-30px;width:160px;height:160px;border:2px solid var(--c-navy);border-radius:50%;opacity:.08;background:radial-gradient(circle,var(--c-orange) 0 12px,transparent 13px)}
.motif--road::before{content:"";position:absolute;left:-10%;bottom:20px;width:120%;height:60px;border-top:3px solid var(--c-orange);border-radius:50%;opacity:.25;transform:rotate(-4deg)}
.motif--dots::before{content:"";position:absolute;inset:auto 12px 12px 12px;height:6px;background:radial-gradient(circle,var(--c-navy) 0 2px,transparent 3px) 0 0/16px 6px repeat-x;opacity:.35}
.tpl{position:relative;border-radius:var(--sp-radius);overflow:hidden;background:var(--c-navy-deep) url(data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22225%22><rect width=%22400%22 height=%22225%22 fill=%22%23193453%22/><path d=%22M0 170 L90 100 L150 140 L230 70 L300 120 L400 60 V225 H0z%22 fill=%22%230B1426%22/></svg>) center/cover}
.tpl--banner{aspect-ratio:16/9;max-height:360px}.tpl--carousel{aspect-ratio:4/5}.tpl--thumb{aspect-ratio:16/9}.tpl__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,38,.05) 30%,rgba(11,20,38,.85))}
.tpl__logo{position:absolute;top:16px;left:16px;height:56px;opacity:.95}.tpl__mark{position:absolute;top:12px;right:12px;height:44px;opacity:.9}.tpl__text{position:absolute;left:20px;right:20px;bottom:20px;color:#fff}
@media (max-width:700px){.brand__toc{position:static}.swatches--big .swatch{width:calc(50% - 5px)}}
@media (prefers-reduced-motion:reduce){*,.card,.card__media img,.btn{transition:none!important}html{scroll-behavior:auto}}
