/* =========================================
   main.css — Turismo+Cultura (padrão global)
   ========================================= */

/* ---------- Variáveis (tema) ---------- */
:root{
  --cor-primaria:#2563eb;
  --shadow:0 10px 24px rgba(2,6,23,.08);

  /* HERO padrão (telas internas) */
  --hero:none;                 /* ex: url('assets/img/hero.png') */
  --hero-pos:72% 50%;
  --hero-fit:cover;
  --hero-bg:transparent;

  /* HERO PRINCIPAL (somente home) */
  --hero_principal:none;       /* ex: url('assets/img/hero_home.png') */
  --hero_principal-pos:72% 50%;
  --hero_principal-fit:cover;
  --hero_principal-bg:transparent;

  --pin-color:#000000ff; /* cor padrão do pin */

  /* Força tema claro sempre */
  color-scheme: light only;
}

/* ---------- Reset básico & utilitários ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a !important;
  background:#f8fafc !important;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Força tema claro em todos os elementos de entrada */
input, select, textarea, button {
  color-scheme: light;
  background-color: white !important;
  color: #333 !important;
}

/* Previne override do dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #f8fafc !important;
    color: #0f172a !important;
  }
  input, select, textarea, button {
    background-color: white !important;
    color: #333 !important;
    border-color: #d1d5db !important;
  }
}

/* ---------- Header / Navegação ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #e5e7eb;
  backdrop-filter:saturate(180%) blur(6px);
}
.nav{
  max-width:1140px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand img{ width:180px; }
.nav-links{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Chips (pílulas) ---------- */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; font-size:14px; white-space:nowrap;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.chip:hover{ border-color:#cbd5e1; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.chip:focus{ outline:2px solid var(--cor-primaria); outline-offset:2px; }
.chip .count{
  font-size:12px; line-height:1; padding:4px 6px; border-radius:999px;
  background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff;
}
.chip .emoji{ margin-left:-4px; }

/* Rótulos (desktop = longos, mobile = curtos) */
.label-short{ display:none; }
.label-full{ display:inline; }

/* ---------- Ícone "pin" (SVG) ---------- */
.pin{ width:20px; height:20px; vertical-align:middle; }
.pin .body{ fill:var(--pin-color); }

/* ---------- HERO (padrão) ---------- */
.hero{
  position:relative; height:min(58vh,560px);
  display:grid; place-items:center; overflow:hidden; color:#fff;
  text-align:center; background:#0b1020;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:var(--hero);
  background-repeat:no-repeat;
  background-size:var(--hero-fit);
  background-position:var(--hero-pos);
  background-color:var(--hero-bg);
  opacity:.98; z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none; z-index:1;
}
.hero .hero-inner{ position:relative; z-index:2; padding:0 16px; max-width:960px; }
.hero h1{ font-size:clamp(28px,4.8vw,56px); margin:0 0 8px; color:#fff; }
.hero p{ margin:0; opacity:.95; }

/* ---------- HERO PRINCIPAL (Home) ---------- */
.hero_principal{
  position:relative; height:min(58vh,560px);
  display:grid; place-items:center; overflow:hidden; color:#fff;
  text-align:center; background:#0b1020;
}
.hero_principal::before{
  content:""; position:absolute; inset:0;
  background-image:var(--hero_principal);
  background-repeat:no-repeat;
  background-size:var(--hero_principal-fit);
  background-position:var(--hero_principal-pos);
  background-color:var(--hero_principal-bg);
  opacity:.98; z-index:0;
}
.hero_principal::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none; z-index:1;
}
.hero_principal .hero_principal-inner{
  position:relative; z-index:2; padding:0 16px; max-width:960px;
}
.hero_principal h1{ font-size:clamp(28px,4.8vw,56px); margin:0 0 8px; color:#fff; }
.hero_principal p{ margin:0; opacity:.95; }

/* ---------- Ajustes por proporção (ambos) ---------- */
@media (min-aspect-ratio: 21/9){
  :root{ --hero-pos:78% 50%; --hero_principal-pos:78% 50%; }
}
@media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 21/9){
  :root{ --hero-pos:72% 50%; --hero_principal-pos:72% 50%; }
}
@media (max-aspect-ratio: 16/9) and (min-aspect-ratio: 4/3){
  :root{ --hero-pos:62% 50%; --hero_principal-pos:62% 50%; }
}
@media (max-aspect-ratio: 4/3){
  :root{ --hero-pos:58% 47%; --hero_principal-pos:58% 47%; }
}

/* Altura maior em telas altas */
@media (min-height:900px){
  .hero, .hero_principal{ height:min(64vh,620px); }
}

/* ---------- Busca ---------- */
.search-wrap{ position:relative; margin-top:-28px; z-index:10; }
.search{
  max-width:980px; margin:0 auto; display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:center;
  padding:12px; background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:var(--shadow);
}
.search label{ font-size:14px; color:#334155; }
.search .field{ display:flex; flex-direction:column; gap:6px; min-width:220px; flex:1; }
.search select, .search input{
  appearance:none; width:100%; padding:12px 14px; border:1px solid #e5e7eb;
  border-radius:10px; background:#fff; font-size:16px;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border:0; border-radius:10px;
  background:var(--cor-primaria) !important; color:#fff !important; cursor:pointer; font-weight:600;
  box-shadow:0 6px 18px rgba(37,99,235,.25);
}
.btn:focus{ outline:2px solid #1d4ed8; outline-offset:2px; }
.btn-pill{ border-radius:999px; }

/* ---------- Seções / Conteúdo ---------- */
.container{ max-width:1140px; margin:0 auto; padding:10px 16px; margin-top:32px; }
.container_principal{ max-width:1140px; margin:0 auto; padding:10px 16px; margin-top:32px; }

.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.section-title h2{ margin:0; font-size:clamp(20px,3vw,28px); }
.muted{ color:#64748b; }

/* ---------- Grid / Cards ---------- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px;
}
.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.card-img{ aspect-ratio:16/10; background:#f1f5f9; }
.card-body{ padding:12px 14px; }

.badge{
  display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px;
  background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff;
}

.img-fixa{
  width:100% !important; aspect-ratio:16/10 !important; height:auto !important;
  object-fit:cover !important; object-position:center !important;
  border-radius:6px; display:block; background:#f1f1f1; margin-bottom:8px;
  max-width:100% !important;
}

/* ---------- Como funciona ---------- */
.how{ background:#ffffff; }
.how-steps{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:12px; margin-top:12px;
}
.how-box{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; }

/* ---------- Rodapé ---------- */
footer{ border-top:1px solid #e5e7eb; background:#fff; }
.foot{
  max-width:1140px; margin:0 auto; padding:18px 16px; display:flex; gap:12px;
  flex-wrap:wrap; align-items:center; justify-content:space-between; color:#475569;
}
.foot small{ opacity:.9; }

/* ---------- Acessibilidade: reduz movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .chip:hover{ box-shadow:none; }
  .card{ transition:none; }
  .card:hover{ transform:none; box-shadow:var(--shadow); }
}

/* ---------- Responsivo (mobile / tablet) ---------- */
@media (max-width: 900px){
  .nav{ flex-direction:column; align-items:stretch; gap:6px; }
  .nav-links{
    order:2; display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:6px 4px 10px;
    scroll-snap-type:x mandatory;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .nav-links::before, .nav-links::after{ content:""; flex:0 0 4px; }
  .chip{ flex:0 0 auto; scroll-snap-align:start; }
  .chip .count{ padding:3px 6px; }
  .label-full{ display:none; }
  .label-short{ display:inline; }
}

/* ---------- CTA simples (home) ---------- */
.cta-pesquisa-home { padding: 24px 0; }
.cta-box-home {
  max-width: 980px; margin: 0 auto; background: #fff; border-radius: 12px;
  padding: 24px 20px; box-shadow: 0 2px 10px #0001; display: flex; flex-wrap: wrap; align-items: center; gap: 16px
}
.cta-box-home h2 { margin: 0; font-size: 1.4rem }
.cta-box-home p { margin: 0; opacity: .9 }
.btn-primaria-home {
  display: inline-block; padding: 12px 18px; border-radius: 10px; background: #2563eb; color: #fff;
  text-decoration: none; font-weight: 600
}
.btn-primaria-home:hover { filter: brightness(.95) }
@media (max-width:640px) {
  .cta-box-home { flex-direction: column; align-items: flex-start }
}

/* ---------- CTA chip (baseado em .chip/.btn) ---------- */
.cta-pesquisa{ margin: clamp(12px, 1.8vw, 18px) 0; padding: clamp(16px, 2vw, 24px) 0; background:#fff; }
.cta-chip{
  border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; gap:12px; box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; max-width:980px; margin:0 auto;
}
.cta-text{ min-width:240px; font-size: clamp(14px, 1.1vw, 16px); color:#334155; }
.cta-btn{ min-width:180px; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:640px){
  .cta-chip{ flex-direction:column; align-items:stretch; text-align:center; gap:10px; }
  .cta-btn{ width:100%; justify-content:center; }
}

/* ---------- Galeria horizontal ---------- */
.gallery {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; margin-bottom: 18px;
}
.gallery img {
  max-width: 100%; height: 140px; width: auto; border-radius: 8px; scroll-snap-align: start;
  cursor: zoom-in; object-fit: cover; background: #f3f4f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: box-shadow .15s;
}
.gallery img:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); }

/* ---------- Grid de mídias ---------- */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin-top: 10px;
}

/* ---------- Mapa ---------- */
#map { height: 360px; border-radius: 12px; margin: 12px 0; }

/* Painel de rotas fora do mapa */
#rota-panel-wrap { margin: 8px 0 14px; }
.rota-panel {
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: 100%;
  max-height: 360px;
  overflow: hidden;
  font: 14px/1.35 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  display: flex; flex-direction: column;
}
.rota-panel .leaflet-routing-alt { margin: 0; }
.rota-panel .leaflet-routing-alt h2 {
  font-size: 15px; margin: 10px 12px 4px; flex: 0 0 auto;
}
.rota-panel .leaflet-routing-summary {
  margin: 0 12px 8px; flex: 0 0 auto;
}
.rota-panel .leaflet-routing-instructions {
  flex: 1 1 auto; overflow: auto; padding: 0 12px 12px; border-top: 1px solid #eee;
}
.rota-panel .leaflet-routing-instructions .instruction {
  padding: 6px 0; border-bottom: 1px solid #eee; font-size: 13px;
}

.file-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px;
}
.file-card a { color: #2563eb; text-decoration: none; }
.file-card small { color: #6b7280; }

@media (max-width:768px) {
  #map { height: 320px; }
  .rota-panel { max-height: 420px; }
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .92);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.lightbox.open { display: flex; }
.lightbox-content {
  position: relative; max-width: 95vw; max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
  max-width: 95vw; max-height: 90vh; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.lightbox-caption {
  position: absolute; left: 0; right: 0; bottom: -42px;
  text-align: center; color: #e5e7eb; font-size: 14px; padding: 6px 10px;
}
.lightbox-btn {
  position: absolute; top: 12px; width: 42px; height: 42px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 20px; backdrop-filter: blur(4px);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .25); }
.lightbox-close { right: 12px; }
.lightbox-prev {
  left: 12px; top: 50%; transform: translateY(-50%);
}
.lightbox-next {
  right: 12px; top: 50%; transform: translateY(-50%);
}
@media (max-width:768px){
  .lightbox-caption { font-size: 13px; bottom: -36px; }
}

/* ---------- CARROSSEL ---------- */
.carousel {
  position: relative; width: 100%; max-width: 700px; margin: 0 auto 18px auto;
  overflow: hidden; border-radius: 12px; background: #f3f4f6;
  box-shadow: 0 2px 8px rgba(0,0,0,.04); min-height: 120px;
}
.carousel-track {
  display: flex; transition: transform 0.4s cubic-bezier(.4,0,.2,1); will-change: transform;
}
.carousel-slide {
  min-width: 100%; display: flex; justify-content: center; align-items: center;
}
.carousel-slide img {
  max-width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px;
  cursor: zoom-in; background: #f3f4f6; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.85); border: none; border-radius: 50%;
  width: 38px; height: 38px; font-size: 22px; color: #2563eb; cursor: pointer; z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: background .2s;
}
.carousel-arrow:hover { background:#e0e7ff; }
.carousel-arrow.left { left: 8px; }
.carousel-arrow.right { right: 8px; }
.carousel-dots { display:flex; justify-content:center; gap:6px; margin-top:8px; }
.carousel-dot {
  width:10px; height:10px; border-radius:50%; background:#cbd5e1; border:none; cursor:pointer; transition:background .2s;
}
.carousel-dot.active { background:#2563eb; }
@media (max-width:600px){ .carousel-slide img{ max-height:160px; } }

/* ---------- MOSAICO ---------- */
.mosaic-gallery {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 8px; max-width: 900px; margin: 0 auto 18px auto; border-radius: 12px; overflow: hidden; background: #fff;
}
.mosaic-main { grid-row: 1 / span 2; grid-column: 1 / 2; position: relative; overflow: hidden; }
.mosaic-main img, .mosaic-side img {
  width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; cursor:zoom-in; background:#f3f4f6;
}
.mosaic-side { grid-column: 2 / 3; display: flex; flex-direction: column; gap: 8px; }
.mosaic-side>div { flex: 1 1 0; position: relative; overflow: hidden; }
.mosaic-badge {
  position: absolute; bottom: 12px; right: 12px; background: #000000ff; color:#fff;
  font-size: 1rem; border-radius: 999px; padding: 6px 16px 6px 12px; display:flex; align-items:center; gap:6px;
  font-weight:600; opacity:.92;
}
.mosaic-badge svg { width:22px; height:22px; margin-right:2px; }
@media (max-width:700px){
  .mosaic-gallery { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .mosaic-main { grid-row:1 / 2; grid-column:1 / 2; }
  .mosaic-side { grid-column:1 / 2; flex-direction:row; }
  .mosaic-side>div { flex:1 1 0; }
}

/* ---------- Card lista simples ---------- */
.card-lista { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
.card-lista .thumb { height: 180px; background: #eee; }
.card-lista h3 { margin: 12px; }
.card-lista p { margin: 12px; color: #555; }
.card-lista a { display: inline-block; margin: 0 12px 12px; color: #2563eb; }

/* ---------- Chips auxiliares ---------- */
.chip-aviso{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px;
  transition:border-color .15s ease, box-shadow .15s ease;
  background:#e0f2fe; color:#0369a1; border:1px solid #7dd3fc; font-weight:600; margin-bottom:10px;
}

@media (max-width: 768px) {
  /* centraliza/nav chips apenas em celular */
  .nav-links,
  .nav-wrapper .nav-links,
  .topbar .nav-links {
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 8px 10px !important; padding: 6px 12px !important; width: 100% !important; box-sizing: border-box !important;
  }
  .nav-links .chip, .nav-links a, .nav-links .btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 8px 14px !important; margin: 0 !important; border-radius: 20px !important;
    white-space: nowrap !important; font-size: 14px !important; line-height: 1 !important;
  }
  .nav-links .chip .count, .nav-links .chip .badge, .nav-links .btn .count {
    vertical-align: middle; margin-left: 6px;
  }
  .nav-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
}

/* ---------- Ações em cards ---------- */
.card-actions {
  margin-left:12px; margin-bottom:12px; display:flex; gap:8px; flex-wrap:wrap;
}

/* ---------- Status de evento ---------- */
.chip-status { font-weight:600; }
.chip-ira_acontecer { background:#eef2ff; color:#3730a3; }   /* azul */
.chip-acontecendo   { background:#ecfdf5; color:#057a55; }   /* verde */
.chip-finalizado    { background:#fef3f2; color:#b91c1c; }   /* vermelho */
.chip-sem_data      { background:#f3f4f6; color:#374151; }   /* neutro */
.badge-strava{ background:#ff6b00; color:#fff; }
.rota-bar{
  height:6px; border-radius:6px; background:var(--rota-cor,#2563eb);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.rota-desc{ font-size:.9rem; color:#6b7280; line-height:1.35; margin-bottom:6px; }

/* ---------- Carrossel de Selos / Head-nav ---------- */
.tc-selos{ position:relative; margin:16px 0 8px; padding:0; max-width:none; }
.tc-selos *{ box-sizing:border-box; }
.tc-selos__head{
  display:flex; align-items:center; justify-content:space-between; margin:8px 0 10px;
}
.tc-selos__head h2{ margin:0; font-size:1.25rem; }
/* Botões (voltar/avançar) */
.tc-selos__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; background:#ffffffea; color:#111;
  box-shadow:0 8px 24px rgba(0,0,0,.08); border:0; cursor:pointer; z-index:3;
}
.tc-selos__prev{ left:-6px; }
.tc-selos__next{ right:-6px; }
.tc-selos__nav svg{ width:20px; height:20px; }
.tc-selos__nav:disabled{ opacity:.5; cursor:default; }
/* Track + cards */
.tc-selos__track, .selos-track{
  display:flex !important; gap:12px !important;
  overflow-x:auto !important; overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding-bottom:8px;
}
.tc-selos__card, .selo-card{
  flex:0 0 auto !important; width:280px !important; scroll-snap-align:start;
  border-radius:14px; background:#fff; overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:0 8px 24px rgba(0,0,0,.08); transition:transform .2s ease;
}
.tc-selos__card:hover, .selo-card:hover{ transform:translateY(-2px); }
.tc-selos__img, .selo-img{
  width:100% !important; display:block; aspect-ratio:16/9; object-fit:cover !important; background:#eee;
}
.tc-selos__body{ padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tc-selos__title{ margin:0; font-weight:600; font-size:.98rem; line-height:1.25; }
.tc-selos__badge{ font-size:.72rem; background:var(--cor-primaria,#2563eb); color:#fff; padding:4px 8px; border-radius:999px; white-space:nowrap; }
@media (max-width:960px){ .tc-selos__card, .selo-card{ width:70vw !important; } }
@media (max-width:600px){ .tc-selos__card, .selo-card{ width:82vw !important; } }

/* ---------- Mobile: tratar imagem inteira do HERO PRINCIPAL ---------- */
@media (max-width: 768px){
  :root{
    /* hero padrão: mostrar inteiro se quiser */
    --hero-fit:contain;
    --hero-bg:#f8fafc;

    /* hero principal */
    --hero_principal-fit:contain;
    --hero_principal-bg:#f8fafc;
  }

  .container_principal { 
    margin-top:-10px; padding:10px 16px;
  }

  /* Se sua arte principal é bem wide (ex.: 2031x549 ≈ 677/183) */
  .hero_principal{
    height:auto;               /* altura flui pela razão */
    aspect-ratio: 677 / 183;   /* ajuste conforme a arte */
    max-height:320px;
  }
  .hero_principal::before{
    background-position: center top !important;
    opacity: 1;
  }
  .hero_principal::after{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.22) 55%,
      #f8fafc 100%
    );
  }

  /* Ajuste fino da barra de busca sobre o hero */
  .search-wrap{ margin-top:-18px; }
}
@media (max-width: 480px){
  .hero_principal{ max-height:280px; }
}