/* =====================================================================
   MULTIHANGAR — SERVIÇOS (FBO, Manutenção, Táxi Aéreo)
   Vitrine e ficha do anúncio de serviço.

   Segue tema.css: nenhuma cor literal aqui, só tokens --mh-*.
   O rodapé .footer-mh é repetido de propósito (aeroportos.css faz igual),
   para a página não depender de outra folha de seção.
   ===================================================================== */

body { padding-top: 56px; }

/* ------------------------------------------------------------- HERO */
.sv-hero {
    position: relative;
    padding: 120px 0 52px;
    overflow: hidden;
    border-bottom: 1px solid var(--mh-border);
}
.sv-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 80% at 15% 0%, var(--mh-gold-08), transparent 60%),
        radial-gradient(50% 70% at 85% 10%, var(--mh-info-08), transparent 65%);
}
.sv-hero-content { position: relative; z-index: 1; }
.sv-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; margin-bottom: 18px;
    border: 1px solid var(--mh-border-gold); border-radius: 100px;
    background: var(--mh-gold-08); color: var(--mh-gold-ink);
    font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.sv-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700;
    color: var(--mh-ink); margin-bottom: 14px; line-height: 1.15;
}
.sv-hero-title span { color: var(--mh-gold-ink); }
.sv-hero-sub { color: var(--mh-ink-65); font-size: 1.05rem; max-width: 660px; }

/* --------------------------------------------------------- CATEGORIAS */
.sv-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sv-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 100px; cursor: pointer; text-decoration: none;
    background: var(--mh-fill-05); border: 1px solid var(--mh-border);
    color: var(--mh-ink-70); font-size: .9rem; font-weight: 600;
    transition: var(--mh-transition);
}
.sv-tab:hover { border-color: var(--mh-border-gold); color: var(--mh-gold-ink); }
.sv-tab.active {
    background: var(--mh-gold); border-color: var(--mh-gold); color: var(--mh-on-gold);
}
.sv-tab i { font-size: 1rem; }

/* ------------------------------------------------------------ BUSCA */
.sv-search-box {
    margin-top: 22px; padding: 18px;
    background: var(--mh-surface-2); border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg); box-shadow: var(--mh-shadow-md);
    backdrop-filter: blur(12px);
}
.sv-search-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sv-search-field { position: relative; flex: 1 1 320px; }
.sv-search-field > i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--mh-ink-40); font-size: 1.05rem; pointer-events: none;
}
.sv-search-field input {
    width: 100%; height: 52px; padding: 0 16px 0 46px;
    background: var(--mh-input); color: var(--mh-ink);
    border: 1px solid var(--mh-border); border-radius: var(--mh-radius);
    font-family: 'Inter', sans-serif; font-size: .98rem;
    transition: var(--mh-transition);
}
.sv-search-field input::placeholder { color: var(--mh-ink-35); }
.sv-search-field input:focus {
    outline: none; background: var(--mh-input-focus);
    border-color: var(--mh-gold); box-shadow: var(--mh-ring-gold);
}
.sv-select {
    height: 52px; min-width: 160px; padding: 0 40px 0 14px;
    /* fundo sólido: a lista nativa do <select> herda a cor do controle */
    background: var(--mh-surface-solid) var(--mh-caret) no-repeat right 14px center / 12px;
    color: var(--mh-ink); border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius); font-family: 'Inter', sans-serif; font-size: .95rem;
    appearance: none; cursor: pointer; transition: var(--mh-transition); color-scheme: inherit;
}
.sv-select:focus { outline: none; border-color: var(--mh-gold); box-shadow: var(--mh-ring-gold); }
.sv-select option, .sv-select optgroup { background-color: var(--mh-elevated); color: var(--mh-ink); }
.sv-btn-search {
    height: 52px; padding: 0 30px;
    background: var(--mh-gold); color: var(--mh-on-gold);
    border: none; border-radius: var(--mh-radius);
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem;
    cursor: pointer; transition: var(--mh-transition);
}
.sv-btn-search:hover { background: var(--mh-gold-hover); box-shadow: var(--mh-shadow-gold); }

/* -------------------------------------------------------- RESULTADOS */
.sv-section { padding: 46px 0 70px; }
.sv-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.sv-results { color: var(--mh-ink-60); font-size: .92rem; }
.sv-results strong { color: var(--mh-ink); }

.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

.sv-card {
    display: flex; flex-direction: column; height: 100%;
    text-decoration: none; overflow: hidden;
    background: var(--mh-surface-solid); border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg); transition: var(--mh-transition);
}
.sv-card:hover {
    border-color: var(--mh-border-gold);
    transform: translateY(-3px); box-shadow: var(--mh-shadow-md);
}
.sv-card-capa {
    position: relative; height: 168px; background: var(--mh-fill-04);
    display: flex; align-items: center; justify-content: center;
}
.sv-card-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-card-capa .sv-sem-foto { color: var(--mh-ink-20); font-size: 2.2rem; }
.sv-card-logo {
    position: absolute; left: 14px; bottom: -22px;
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--mh-elevated); border: 1px solid var(--mh-border-strong);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: var(--mh-shadow-sm);
}
.sv-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.sv-card-logo span {
    font-weight: 800; font-size: .95rem; color: var(--mh-gold-ink); letter-spacing: .04em;
}
.sv-card-24h {
    position: absolute; right: 12px; top: 12px;
    padding: 4px 10px; border-radius: 100px;
    background: var(--mh-success-soft); border: 1px solid var(--mh-success-border);
    color: var(--mh-success-ink); font-size: .7rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
}
.sv-card-body { padding: 32px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sv-card-nome {
    font-size: 1.02rem; font-weight: 700; color: var(--mh-ink); line-height: 1.3;
}
.sv-card-local { color: var(--mh-ink-55); font-size: .87rem; }
.sv-card-desc {
    color: var(--mh-ink-60); font-size: .85rem; line-height: 1.5; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.sv-tag {
    padding: 3px 10px; border-radius: 100px;
    background: var(--mh-fill-05); border: 1px solid var(--mh-border);
    color: var(--mh-ink-60); font-size: .74rem;
}
.sv-card-rodape {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px; border-top: 1px solid var(--mh-border-soft);
    color: var(--mh-ink-60); font-size: .82rem;
}
.sv-card-rodape i { color: var(--mh-gold-ink); margin-right: 5px; }
.sv-card-rodape .sv-ver { margin-left: auto; color: var(--mh-gold-ink); font-weight: 600; }

.sv-skeleton {
    height: 300px; border-radius: var(--mh-radius-lg);
    background: linear-gradient(90deg, var(--mh-skeleton-a), var(--mh-skeleton-b), var(--mh-skeleton-a));
    background-size: 200% 100%; animation: sv-pulse 1.4s ease-in-out infinite;
}
@keyframes sv-pulse { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.sv-empty { text-align: center; padding: 70px 20px; color: var(--mh-ink-55); }
.sv-empty i { font-size: 2.6rem; color: var(--mh-ink-25); display: block; margin-bottom: 14px; }
.sv-empty h4 { color: var(--mh-ink); font-size: 1.2rem; margin-bottom: 8px; }
.sv-empty a { color: var(--mh-gold-ink); font-weight: 600; }

.sv-more { display: flex; justify-content: center; margin-top: 34px; }
.sv-btn-more {
    padding: 13px 34px; background: transparent; color: var(--mh-ink-75);
    border: 1px solid var(--mh-border-strong); border-radius: var(--mh-radius);
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: .92rem;
    cursor: pointer; transition: var(--mh-transition);
}
.sv-btn-more:hover { border-color: var(--mh-gold); color: var(--mh-gold-ink); }
.sv-btn-more:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------- FAIXA "ANUNCIE AQUI" */
.sv-cta {
    margin-top: 40px; padding: 28px 24px; text-align: center;
    background: var(--mh-gold-05); border: 1px solid var(--mh-border-gold);
    border-radius: var(--mh-radius-lg);
}
.sv-cta h4 { color: var(--mh-ink); font-size: 1.15rem; margin-bottom: 6px; }
.sv-cta p { color: var(--mh-ink-60); font-size: .9rem; margin-bottom: 16px; }
.sv-cta a {
    display: inline-block; padding: 11px 26px; border-radius: var(--mh-radius);
    background: var(--mh-gold); color: var(--mh-on-gold);
    font-weight: 700; font-size: .9rem; text-decoration: none;
    transition: var(--mh-transition);
}
.sv-cta a:hover { background: var(--mh-gold-hover); box-shadow: var(--mh-shadow-gold); }

/* ===================================================================
   FICHA DO ANÚNCIO (servico.html)
   =================================================================== */
.sf-hero { padding: 96px 0 24px; }
.sf-voltar {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--mh-ink-55); font-size: .86rem; text-decoration: none; margin-bottom: 16px;
}
.sf-voltar:hover { color: var(--mh-gold-ink); }
.sf-topo { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.sf-logo {
    width: 84px; height: 84px; border-radius: var(--mh-radius);
    background: var(--mh-elevated); border: 1px solid var(--mh-border);
    display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.sf-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.sf-logo span { font-weight: 800; font-size: 1.4rem; color: var(--mh-gold-ink); }
.sf-cat {
    display: inline-block; padding: 4px 12px; border-radius: 100px; margin-bottom: 8px;
    background: var(--mh-gold-08); border: 1px solid var(--mh-border-gold);
    color: var(--mh-gold-ink); font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.sf-nome {
    font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700; color: var(--mh-ink); line-height: 1.2; margin-bottom: 6px;
}
.sf-local { color: var(--mh-ink-60); font-size: .95rem; }
.sf-local i { color: var(--mh-gold-ink); margin-right: 6px; }
.sf-selo-24h {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    padding: 5px 12px; border-radius: 100px;
    background: var(--mh-success-soft); border: 1px solid var(--mh-success-border);
    color: var(--mh-success-ink); font-size: .78rem; font-weight: 700;
}

.sf-body { padding: 24px 0 70px; }
.sf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; }

.sf-galeria { display: grid; gap: 10px; }
.sf-foto-principal {
    width: 100%; aspect-ratio: 16 / 10; border-radius: var(--mh-radius-lg);
    background: var(--mh-fill-04); border: 1px solid var(--mh-border);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sf-foto-principal img { width: 100%; height: 100%; object-fit: cover; }
.sf-foto-principal .sv-sem-foto { color: var(--mh-ink-20); font-size: 3rem; }
.sf-miniaturas { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-mini {
    width: 84px; height: 60px; border-radius: var(--mh-radius-sm); overflow: hidden;
    border: 2px solid transparent; cursor: pointer; background: var(--mh-fill-04);
    transition: var(--mh-transition); padding: 0;
}
.sf-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-mini.active { border-color: var(--mh-gold); }

.sf-card {
    padding: 22px; margin-top: 22px;
    background: var(--mh-surface-solid); border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
}
.sf-card h3 {
    font-size: 1.05rem; font-weight: 700; color: var(--mh-ink); margin-bottom: 12px;
}
.sf-card h3 i { color: var(--mh-gold-ink); margin-right: 8px; }
.sf-desc { color: var(--mh-ink-70); font-size: .95rem; line-height: 1.75; white-space: pre-line; }
.sf-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.sf-contato { position: sticky; top: 84px; }
.sf-contato-aviso {
    color: var(--mh-ink-45); font-size: .78rem; line-height: 1.5; margin-top: 14px;
}
.sf-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 13px 16px; margin-bottom: 10px; border-radius: var(--mh-radius);
    border: 1px solid var(--mh-border); background: var(--mh-fill-04);
    color: var(--mh-ink); font-size: .92rem; font-weight: 600;
    text-decoration: none; transition: var(--mh-transition);
}
.sf-btn:hover { border-color: var(--mh-border-gold); color: var(--mh-ink); background: var(--mh-fill-06); }
.sf-btn i { font-size: 1.15rem; color: var(--mh-gold-ink); width: 22px; text-align: center; }
.sf-btn small { display: block; font-weight: 400; font-size: .74rem; color: var(--mh-ink-45); }
.sf-btn-zap {
    background: var(--mh-whatsapp); border-color: var(--mh-whatsapp); color: var(--mh-on-accent);
}
.sf-btn-zap:hover { background: var(--mh-whatsapp-hover); border-color: var(--mh-whatsapp-hover); color: var(--mh-on-accent); }
.sf-btn-zap i, .sf-btn-zap small { color: var(--mh-on-accent); }

.sf-info-linha {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--mh-border-soft); font-size: .88rem;
}
.sf-info-linha:last-child { border-bottom: none; }
.sf-info-linha span:first-child { color: var(--mh-ink-55); }
.sf-info-linha span:last-child { color: var(--mh-ink); font-weight: 600; text-align: right; }

/* --------------------------------------------------------- RESPONSIVO */
@media (max-width: 991.98px) {
    .sv-hero { padding: 100px 0 40px; }
    .sf-hero { padding: 92px 0 20px; }
    .sf-cols { grid-template-columns: 1fr; }
    .sf-contato { position: static; }
}
@media (max-width: 575.98px) {
    .sv-search-row { flex-direction: column; }
    .sv-select, .sv-btn-search { width: 100%; }
}

/* ---------------------------------------------------- rodapé compartilhado */
.footer-mh { border-top: 1px solid var(--mh-border); padding: 40px 0; margin-top: 10px; }
.footer-mh .footer-inner { text-align: center; }
.footer-mh .footer-brand h5 {
    font-family: 'Playfair Display', serif; color: var(--mh-ink); margin-bottom: 2px; font-size: 1.3rem;
}
.footer-mh .footer-brand p {
    color: var(--mh-gold-ink); font-size: .72rem; letter-spacing: .18em;
    text-transform: uppercase; margin-bottom: 22px;
}
.footer-mh .footer-links-row {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-bottom: 18px;
}
.footer-mh .footer-links-row a {
    color: var(--mh-ink-60); text-decoration: none; font-size: .9rem; transition: var(--mh-transition);
}
.footer-mh .footer-links-row a:hover { color: var(--mh-gold-ink); }
.footer-mh .footer-legal {
    margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--mh-border-soft);
}
.footer-mh .footer-legal a { font-size: .75rem; opacity: .5; }
.footer-mh .footer-copy { color: var(--mh-ink-35); font-size: .8rem; }