:root{--blue:#0876cf;--blue-dark:#07355f;--navy:#082747;--teal:#09a8b4;--ink:#102d50;--muted:#6b7f96;--line:#e5edf4;--soft:#f4f8fb;--shadow:0 8px 24px rgba(11,48,83,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1240px,calc(100% - 40px));margin:0 auto}.topbar{height:76px;padding:0 max(24px,calc((100% - 1320px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;position:relative;z-index:10;border-bottom:1px solid #eef2f5}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffcb42,#f8a91c 48%,#0876cf 49%,#0ab0bd);color:white;font-size:23px;box-shadow:inset 0 0 0 3px #fff}.brand b{display:block;font-size:25px;letter-spacing:-.8px;color:#102f54;line-height:1.05}.brand em{font-style:normal;color:var(--blue)}.brand small{display:block;font-size:10px;color:#7d8fa4;margin-top:4px}.nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700}.nav a{padding:12px 0;white-space:nowrap;transition:.2s}.nav a:hover,.nav a.active{color:var(--blue)}.nav a.active{border-bottom:2px solid var(--blue)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;padding:13px 21px;font-size:13px;font-weight:800;cursor:pointer;transition:transform .18s,box-shadow .18s}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px #001e3d24}.btn-primary{background:linear-gradient(110deg,#0876cf,#0967bb);color:#fff}.btn-outline{border:1px solid #1683df;color:#0876cf;background:#fff}.btn-light{background:#fff;color:#0863a8}.btn-whatsapp{background:#08ad68;color:white}.btn-full{width:100%}.btn-small{padding:8px 13px;font-size:12px}.menu-toggle{display:none;background:#f0f7fc;border:0;border-radius:10px;padding:10px;color:var(--blue)}
.hero{min-height:390px;position:relative;overflow:hidden;isolation:isolate;background:#087eaa;color:#fff;display:flex;align-items:center}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.coast-scene{position:absolute;inset:0;z-index:-3;overflow:hidden;background:linear-gradient(180deg,#70c5ed 0%,#b4e6f4 28%,#087ca7 29%,#005d87 100%)}.sky{position:absolute;inset:0 0 55%;background:linear-gradient(180deg,#6ebbe5,#d0f0f7 80%,#9cced9)}.distant-hills{position:absolute;left:-5%;right:-5%;top:20%;height:26%;background:linear-gradient(170deg,transparent 0 10%,#315e73 11% 19%,#2b6d7c 20% 29%,transparent 30%),linear-gradient(10deg,transparent 0 20%,#427d8c 21% 34%,transparent 35%);filter:blur(2px);opacity:.8}.ocean{position:absolute;inset:36% -10% -10% 0;background:repeating-linear-gradient(174deg,transparent 0 17px,#ffffff19 18px 20px,transparent 21px 36px),linear-gradient(165deg,#12b2c3 0%,#007da7 40%,#00517b 100%);transform:scale(1.08);animation:seaDrift 16s ease-in-out infinite alternate}.shore{position:absolute;right:-8%;top:28%;width:54%;height:83%;background:linear-gradient(95deg,#f3d8a3,#e8c98f 25%,#d7bb8b 60%,#9eaa8e);clip-path:polygon(34% 0,100% 0,100% 100%,0 100%,20% 80%,12% 63%,24% 48%,17% 30%);opacity:.96}.foam{position:absolute;right:20%;top:40%;width:30%;height:65%;border-left:8px solid #f6ffffb8;border-radius:50%;transform:rotate(13deg);filter:blur(2px)}.foam-two{right:15%;top:50%;width:36%;border-left-width:4px;opacity:.6;transform:rotate(7deg)}.coast-town{position:absolute;right:0;top:30%;width:31%;height:31%;opacity:.8;background:repeating-linear-gradient(90deg,#dce5df 0 16px,#9eb9c1 17px 20px,transparent 21px 29px);clip-path:polygon(0 45%,7% 15%,13% 38%,20% 0,27% 34%,33% 12%,42% 45%,48% 9%,54% 31%,63% 3%,70% 32%,79% 18%,86% 40%,100% 10%,100% 100%,0 100%);filter:blur(.5px)}@keyframes seaDrift{from{background-position:0 0,0 0;transform:scale(1.08) translateX(-1%)}to{background-position:160px 0,0 0;transform:scale(1.1) translateX(1%)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#052b4dbd 0%,#06375b9c 45%,#00415a40 100%);z-index:-1}.hero-content{width:min(1240px,calc(100% - 40px));margin:0 auto;padding:48px 0 58px;position:relative;z-index:1}.eyebrow{font-weight:800;font-size:13px;letter-spacing:2px}.hero h1{font-size:clamp(42px,5.3vw,68px);line-height:1.02;margin:12px 0 10px;letter-spacing:-2px;text-shadow:0 3px 12px #00274833}.hero h1 span{color:#47d7f0}.hero-content>p{font-size:17px;line-height:1.5;margin:0 0 24px;color:#f4fbff}.search-box{display:flex;align-items:center;gap:0;background:white;border-radius:15px;padding:8px;max-width:890px;box-shadow:0 15px 35px #002d4b38;color:#15395d}.search-field{display:flex;align-items:center;gap:13px;flex:1;padding:7px 15px;min-width:0}.search-field>i{font-size:18px;color:#426181}.search-field span{min-width:0;flex:1}.search-field input,.search-field select{width:100%;border:0;outline:0;color:#183d61;background:transparent;font-size:13px}.search-field small{display:block;color:#8091a5;font-size:10px;margin-top:4px}.category-field{border-left:1px solid #e3eaf0}.search-btn{min-width:136px}.hero-note{position:absolute;right:7%;top:37%;z-index:1;display:flex;flex-direction:column;align-items:center;transform:rotate(-5deg);text-shadow:0 3px 12px #00365355}.hero-note span{font-family:Georgia,serif;font-style:italic;font-size:32px;color:#a3f1ff}.hero-note b{font-family:Georgia,serif;font-size:23px;font-style:italic}.hero-note small{font-size:11px;margin-top:9px}.scroll-cue{position:absolute;bottom:16px;left:50%;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#ffffff30;color:white}
.section{padding-top:34px;padding-bottom:32px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}.section-heading h2{font-size:25px;letter-spacing:-.5px;margin:0 0 5px;color:#10345d}.section-heading p{font-size:13px;color:#73859a;margin:0}.text-link{font-size:12px;font-weight:800;color:var(--blue);white-space:nowrap}.text-link i{margin-left:5px}.category-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}.category-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 4px 12px;border:1px solid transparent;border-radius:13px;transition:.2s}.category-item:hover{background:#f6faff;border-color:#e4eef8;transform:translateY(-3px)}.category-icon{width:54px;height:54px;border-radius:19px;display:grid;place-items:center;color:var(--icon-color);background:color-mix(in srgb,var(--icon-color) 15%,white);font-size:22px}.category-item b{font-size:11px;line-height:1.35;max-width:110px}.category-item small{font-size:10px;color:#8697a9}.featured-section{background:linear-gradient(180deg,#f6f9fc,#eef5fa);padding:32px 0 38px}.section-star{color:#f7b91c;margin-right:5px}.business-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.business-card{background:white;border:1px solid #e4edf4;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px #092e4b0b;transition:.2s}.business-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.business-image{height:148px;display:block;position:relative;background:linear-gradient(135deg,#c5e9f1,#4d9cc0);overflow:hidden}.business-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.business-card:hover .business-image img{transform:scale(1.04)}.featured-badge{position:absolute;top:12px;left:12px;background:#ffd44f;color:#594300;padding:5px 10px;border-radius:99px;font-size:10px;font-weight:900}.image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column;color:#fff;background:linear-gradient(135deg,#0b83b8,#0b3e69)}.image-placeholder i{font-size:32px}.image-placeholder span{font-size:12px;font-weight:800}.business-body{padding:15px}.business-category{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#1681c9;font-weight:800}.business-body h3{font-size:15px;margin:7px 0;color:#16385b}.business-body p{font-size:11px;line-height:1.5;color:#73859a;margin:6px 0}.business-body .muted{margin-top:10px}.muted i{color:#1c91cf;margin-right:4px}.card-actions{display:flex;flex-wrap:wrap;gap:13px;border-top:1px solid #edf2f6;padding-top:12px;margin-top:13px}.card-actions a{font-size:10px;font-weight:800;color:#365978}.card-actions .wa-link{color:#08a75c}.card-actions i{margin-right:4px}.more-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;border:1px solid #b8dcf7;border-radius:9px;padding:8px;color:#0876cf;font-size:11px;font-weight:800}.more-link:hover{background:#0876cf;color:#fff}.empty-state{text-align:center;padding:45px 20px;background:white;border:1px dashed #cbdce9;border-radius:16px}.empty-state>i{font-size:36px;color:#1686d1}.empty-state h3{margin:15px 0 7px}.empty-state p{color:var(--muted);font-size:14px;line-height:1.6}.notice{padding:16px;margin:20px 0;border:1px solid #f3d28d;border-radius:10px;background:#fff8e8;color:#795719;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.advertise-band{background:linear-gradient(110deg,#08639c,#083d6b);color:#fff;padding:24px 0}.advertise-inner{display:flex;align-items:center;gap:20px}.megaphone{width:60px;height:60px;display:grid;place-items:center;border-radius:17px;background:#ffffff1b;font-size:29px}.advertise-inner h2{font-size:22px;margin:0 0 5px}.advertise-inner p{margin:0;color:#c8e3f6;font-size:13px}.advertise-inner>.btn{margin-left:auto;white-space:nowrap}.benefit{display:flex;align-items:center;gap:12px;border-left:1px solid #ffffff35;padding-left:25px;margin-left:8px}.benefit>i{font-size:25px;color:#8ce9ff}.benefit b,.benefit small{display:block;font-size:11px}.benefit small{color:#c4e4f5;margin-top:4px}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:24px;padding-bottom:24px}.trust-strip>div{display:flex;align-items:center;gap:13px;border-right:1px solid #e6edf3;padding-right:12px}.trust-strip>div:last-child{border:0}.trust-strip i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e5f4ff;color:#0876cf;font-size:18px;flex-shrink:0}.trust-strip b,.trust-strip small{display:block}.trust-strip b{font-size:11px}.trust-strip small{font-size:10px;color:#8191a3;margin-top:4px}
footer{background:#082746;color:#d5e6f4}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:27px;padding-bottom:25px}.brand-footer b{color:white;font-size:22px}.brand-footer small{color:#9cb9cf}.footer-main nav{display:flex;gap:20px;flex-wrap:wrap}.footer-main nav a{font-size:11px;color:#d3e3f1}.footer-main nav a:hover{color:#4dd5ef}.footer-whatsapp{background:#08ac69;border-radius:999px;padding:11px 16px;font-size:11px;font-weight:800;color:#fff;white-space:nowrap}.footer-whatsapp i{font-size:16px;margin-right:6px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff1c;padding-top:14px;padding-bottom:14px;font-size:10px;color:#a8c0d3}.form-page{min-height:70vh;background:linear-gradient(135deg,#f2f8fc,#e9f4fa);padding:55px 20px}.form-card{max-width:720px;margin:0 auto;background:white;border:1px solid #e2edf5;border-radius:20px;padding:35px;box-shadow:var(--shadow)}.form-symbol{width:54px;height:54px;border-radius:16px;background:#e5f4ff;color:#0876cf;display:grid;place-items:center;font-size:24px}.form-card h1{font-size:29px;margin:18px 0 8px}.form-card>p{font-size:13px;line-height:1.6;color:#6e8297;margin:0 0 25px}.stack-form{display:flex;flex-direction:column;gap:16px}.stack-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:#274a6d}.stack-form input,.stack-form select,.stack-form textarea{border:1px solid #dce7ef;border-radius:9px;padding:12px 13px;color:#183c5f;background:#fff;outline:none;width:100%;font-size:13px}.stack-form input:focus,.stack-form select:focus,.stack-form textarea:focus{border-color:#1685d7;box-shadow:0 0 0 3px #1685d719}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.success-box{padding:20px;border-radius:12px;background:#eafaf2;color:#136c43;line-height:1.6}.success-box>i{font-size:26px;margin-right:9px}.success-box p{font-size:13px}.detail-page{padding-top:35px;padding-bottom:55px;min-height:65vh}.back-link{display:inline-block;color:#0876cf;font-size:12px;font-weight:800;margin-bottom:18px}.detail-card{display:grid;grid-template-columns:minmax(260px,40%) 1fr;border:1px solid #e4edf4;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#fff}.detail-image,.detail-placeholder{width:100%;height:100%;min-height:320px;object-fit:cover}.detail-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#0b83b8,#0b3e69);color:#fff;font-size:60px}.detail-content{padding:35px}.detail-content h1{font-size:32px;margin:9px 0 15px}.detail-content>p{font-size:14px;line-height:1.8;color:#627990}.detail-info{margin:25px 0}.detail-info p{font-size:13px;color:#385977;line-height:1.6}.detail-info i{width:22px;color:#0876cf}.admin-card{max-width:1000px}.admin-card h1{margin-top:0}.admin-card h2{font-size:17px}.admin-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.table-wrap{overflow:auto;margin:20px 0}.table-wrap table{width:100%;border-collapse:collapse;font-size:12px}.table-wrap th,.table-wrap td{text-align:left;border-bottom:1px solid #e6edf3;padding:12px}.table-wrap th{background:#f5f9fc}.table-wrap td small{display:block;color:#8292a4;margin-top:4px}.inline-form{margin:0}
@media(max-width:1100px){.nav{gap:14px}.client-link{display:none}.category-grid{grid-template-columns:repeat(5,1fr)}.business-grid{grid-template-columns:repeat(3,1fr)}.hero-note{right:4%}.benefit{display:none}}
@media(max-width:760px){.topbar{height:68px;padding:0 18px}.brand b{font-size:21px}.brand-mark{width:40px;height:40px}.menu-toggle{display:block;margin-left:auto}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:white;box-shadow:0 12px 20px #0b2e4b18;padding:12px 22px 18px;align-items:stretch;flex-direction:column;gap:0}.nav.open{display:flex}.nav a{padding:13px 0;border-bottom:1px solid #eef3f7}.nav a.active{border-bottom:1px solid #eef3f7}.topbar>.btn{display:none}.hero{min-height:450px}.hero-content{padding:45px 0 48px}.hero h1{font-size:47px}.hero-content>p{font-size:14px}.desktop-only{display:none}.hero-note{display:none}.search-box{display:flex;flex-direction:column;align-items:stretch;border-radius:13px;padding:8px}.search-field{padding:11px 12px}.category-field{border-left:0;border-top:1px solid #e3eaf0}.search-btn{width:100%;margin-top:5px}.section{padding-top:27px;padding-bottom:25px}.section-heading h2{font-size:21px}.section-heading p{font-size:11px}.text-link{font-size:10px}.category-grid{grid-template-columns:repeat(3,1fr);gap:5px}.category-icon{width:48px;height:48px}.category-item b{font-size:10px}.business-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.business-image{height:112px}.business-body{padding:11px}.business-body h3{font-size:13px}.business-body p{font-size:10px}.card-actions{gap:8px}.card-actions a{font-size:9px}.advertise-inner{flex-wrap:wrap;gap:13px}.megaphone{width:48px;height:48px;font-size:22px}.advertise-inner h2{font-size:18px}.advertise-inner p{font-size:11px}.advertise-inner>.btn{margin-left:0;padding:11px 14px}.trust-strip{grid-template-columns:repeat(2,1fr);gap:15px}.trust-strip>div{border:0}.footer-main{flex-wrap:wrap}.footer-main nav{order:3;width:100%;gap:13px}.footer-bottom{font-size:9px}.detail-card{grid-template-columns:1fr}.detail-image,.detail-placeholder{height:220px;min-height:220px}.detail-content{padding:23px}.detail-content h1{font-size:25px}.form-card{padding:24px 20px}.admin-columns{grid-template-columns:1fr}.form-two{grid-template-columns:1fr}}
@media(max-width:400px){.business-grid{grid-template-columns:1fr}.business-image{height:165px}.category-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:flex-start}.footer-whatsapp{font-size:10px}.hero h1{font-size:40px}}

/* =====================================================
   GUIA MATINHOS � ACABAMENTO VISUAL PROFISSIONAL
   Adicionar ao final de assets/css/style.css
===================================================== */

:root {
    --blue: #0876cf;
    --blue-dark: #07549a;
    --navy: #082747;
    --teal: #09a8b4;
    --shadow: 0 12px 32px rgba(11, 48, 83, .09);
}

/* Navega��o */
.topbar {
    box-shadow: 0 3px 16px rgba(8, 39, 71, .035);
}

.brand-mark {
    transition: transform .25s ease, box-shadow .25s ease;
}

.brand:hover .brand-mark {
    transform: rotate(-5deg) scale(1.04);
    box-shadow: 0 7px 18px rgba(8, 118, 207, .20);
}

.nav a {
    transition: color .2s ease, background .2s ease;
}

/* Capa principal */
.hero {
    min-height: 440px;
}

.hero-content {
    padding-top: 62px;
    padding-bottom: 68px;
}

.hero h1 {
    text-shadow: 0 4px 22px rgba(0, 25, 48, .24);
}

.hero-content > p {
    max-width: 620px;
    text-shadow: 0 2px 8px rgba(0, 25, 48, .22);
}

.search-box {
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 18px 42px rgba(0, 28, 54, .24);
}

.search-field input,
.search-field select {
    min-height: 27px;
}

.search-field input:focus,
.search-field select:focus {
    outline: none;
}

.search-btn {
    min-height: 48px;
}

/* Bot�es */
.btn {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.btn-primary {
    background: linear-gradient(120deg, #0876cf, #0757a1);
    box-shadow: 0 5px 14px rgba(8, 118, 207, .15);
}

.btn-primary:hover {
    box-shadow: 0 9px 22px rgba(8, 118, 207, .25);
}

/* T�tulos de se��o */
.section-heading {
    margin-bottom: 26px;
}

.section-heading h2 {
    letter-spacing: -.7px;
}

.section-heading p {
    line-height: 1.6;
}

/* Categorias */
.category-item {
    padding: 14px 7px;
    border: 1px solid #edf2f7;
    background: #fff;
    box-shadow: 0 3px 12px rgba(11, 48, 83, .025);
}

.category-item:hover {
    border-color: #d6eafa;
    box-shadow: 0 9px 22px rgba(11, 48, 83, .075);
}

.category-icon {
    transition: transform .22s ease;
}

.category-item:hover .category-icon {
    transform: translateY(-3px) scale(1.04);
}

.category-item b {
    line-height: 1.45;
}

/* �rea de empresas */
.featured-section {
    background: linear-gradient(180deg, #f7fafd 0%, #eef5fa 100%);
}

.business-card {
    border-color: #e5edf4;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(8, 39, 71, .045);
}

.business-card:hover {
    border-color: #d4e6f4;
    box-shadow: 0 15px 32px rgba(8, 39, 71, .11);
}

.business-image {
    background-color: #d9edf6;
}

.business-body {
    padding: 17px;
}

.business-body h3 {
    line-height: 1.4;
}

.business-body h3 a:hover {
    color: var(--blue);
}

.featured-badge {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.more-link {
    transition: color .2s ease, background .2s ease;
}

/* Faixa para anunciantes */
.advertise-band {
    background: linear-gradient(115deg, #07558d 0%, #08355e 100%);
}

.megaphone {
    border: 1px solid rgba(255, 255, 255, .12);
}

/* Benef�cios */
.trust-strip > div {
    padding-top: 7px;
    padding-bottom: 7px;
}

.trust-strip i {
    transition: transform .2s ease;
}

.trust-strip > div:hover i {
    transform: translateY(-2px);
}

/* Rodap� */
footer {
    background: linear-gradient(145deg, #082746, #061d35);
}

.footer-main nav a {
    transition: color .2s ease;
}

/* Acessibilidade: foco vis�vel no teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(9, 168, 180, .55);
    outline-offset: 3px;
}

/* Evita anima��es excessivas para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Ajustes para celulares */
@media (max-width: 760px) {
    .hero {
        min-height: 450px;
    }

    .hero-content {
        padding-top: 42px;
        padding-bottom: 48px;
    }

    .category-item {
        padding: 12px 4px;
    }

    .business-card {
        border-radius: 12px;
    }

    .business-body {
        padding: 11px;
    }
}

/* GUIA MATINHOS - NOVO VISUAL DA CAPA */

.hero {
    min-height: 480px;
    background-color: #063b60;
}

.hero-content {
    padding-top: 75px;
    padding-bottom: 85px;
}

.hero h1 {
    font-size: clamp(44px, 5.5vw, 72px);
    max-width: 760px;
    line-height: 1.05;
}

.hero h1 span {
    color: #66e5f2;
}

.search-box {
    max-width: 920px;
    border-radius: 16px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 20, 40, 0.35);
}

.category-item {
    border-radius: 16px;
    padding: 18px 8px;
    background: #ffffff;
    border: 1px solid #e5edf4;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(8, 39, 71, 0.12);
}

.category-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.business-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(8, 39, 71, 0.07);
}

.business-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(8, 39, 71, 0.14);
}

@media (max-width: 760px) {
    .hero {
        min-height: 450px;
    }

    .hero-content {
        padding-top: 45px;
        padding-bottom: 55px;
    }
}



}

/* ==========================================
   GUIA MATINHOS � NOVO ACABAMENTO VISUAL
   Mant�m o PHP e as fun��es existentes
========================================== */

/* Fundo e acabamento geral */
body {
    color: #153451;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #0876cf;
    color: #ffffff;
}

/* Cabe�alho */
.topbar {
    height: 82px;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid #e6eef5;
    box-shadow: 0 5px 24px rgba(7, 43, 75, 0.06);
}

.brand-mark {
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(8, 118, 207, 0.17);
}

.brand b {
    font-size: 26px;
    letter-spacing: -1px;
}

.nav {
    gap: 23px;
}

.nav a {
    font-size: 13px;
}

.nav a:hover,
.nav a.active {
    color: #0876cf;
}

/* CAPA PRINCIPAL */
.hero {
    min-height: 500px;
    background: #063b60;
}

.coast-scene {
    background:
        linear-gradient(
            180deg,
            #8dd5f1 0%,
            #b8e8f5 25%,
            #128eae 45%,
            #00668f 100%
        );
}

.ocean {
    background:
        repeating-linear-gradient(
            175deg,
            transparent 0 20px,
            rgba(255,255,255,.12) 21px 23px,
            transparent 24px 42px
        ),
        linear-gradient(160deg, #20c0cb, #007ba7 55%, #034568);
}

.hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(3, 31, 57, .88) 0%,
            rgba(3, 45, 72, .70) 48%,
            rgba(3, 48, 70, .20) 100%
        );
}

.hero-content {
    padding-top: 76px;
    padding-bottom: 85px;
}

.eyebrow {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #d6f7ff;
    font-size: 11px;
    letter-spacing: 2px;
}

.hero h1 {
    margin-top: 20px;
    font-size: clamp(46px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -2.5px;
    text-shadow: 0 5px 25px rgba(0, 20, 40, .28);
}

.hero h1 span {
    color: #75edfa;
}

.hero-content > p {
    max-width: 600px;
    margin-top: 17px;
    margin-bottom: 29px;
    color: #f2fbff;
    font-size: 17px;
    line-height: 1.8;
}

/* Pesquisa */
.search-box {
    max-width: 920px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 55px rgba(0, 22, 42, .28);
}

.search-field {
    padding: 12px 16px;
}

.search-field > i {
    color: #0876cf;
}

.search-field small {
    color: #8495a7;
    font-size: 11px;
}

.search-field input,
.search-field select {
    color: #173b5d;
    font-size: 14px;
}

.search-btn {
    min-height: 52px;
    padding: 14px 25px;
    border-radius: 12px;
}

/* Bot�es */
.btn {
    border-radius: 11px;
}

.btn-primary {
    background: linear-gradient(135deg, #118be0, #075bb0);
    box-shadow: 0 6px 16px rgba(8, 118, 207, .22);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0876cf, #064a91);
}

/* T�tulos */
.section {
    padding-top: 46px;
    padding-bottom: 42px;
}

.section-heading {
    margin-bottom: 28px;
}

.section-heading h2 {
    color: #0b3154;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.8px;
}

.section-heading p {
    margin-top: 7px;
    color: #72869a;
    font-size: 13px;
}

/* Categorias */
.category-grid {
    gap: 14px;
}

.category-item {
    min-height: 135px;
    padding: 18px 8px;
    border: 1px solid #e8eff5;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 5px 17px rgba(10, 49, 81, .035);
    transition: transform .22s ease,
                box-shadow .22s ease,
                border-color .22s ease;
}

.category-item:hover {
    transform: translateY(-5px);
    border-color: #b9def8;
    background: #fafdff;
    box-shadow: 0 13px 28px rgba(10, 49, 81, .10);
}

.category-icon {
    width: 57px;
    height: 57px;
    border-radius: 18px;
    font-size: 23px;
}

.category-item b {
    color: #234560;
    font-size: 12px;
}

/* �rea das empresas */
.featured-section {
    padding-top: 46px;
    padding-bottom: 50px;
    background: linear-gradient(180deg, #f5f9fd, #edf5fb);
    border-top: 1px solid #eaf1f7;
    border-bottom: 1px solid #eaf1f7;
}

.business-grid {
    gap: 22px;
}

.business-card {
    border: 1px solid #e2ebf3;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(9, 42, 70, .055);
    transition: transform .25s ease,
                box-shadow .25s ease;
}

.business-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 17px 34px rgba(9, 42, 70, .12);
}

.business-image {
    height: 165px;
}

.business-body {
    padding: 17px;
}

.business-category {
    color: #0876cf;
    letter-spacing: .7px;
}

.business-body h3 {
    color: #123b5c;
    font-size: 16px;
    line-height: 1.45;
}

.business-body p {
    color: #718398;
    font-size: 12px;
    line-height: 1.7;
}

.featured-badge {
    padding: 7px 12px;
    border-radius: 8px;
    background: #ffcf45;
    color: #614700;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.card-actions {
    gap: 15px;
}

.card-actions a {
    font-size: 11px;
}

.more-link {
    margin-top: 16px;
    padding: 11px;
    border-radius: 10px;
    background: #f5faff;
    border-color: #d7eafa;
}

.more-link:hover {
    background: #0876cf;
}

/* Convite para anunciantes */
.advertise-band {
    padding: 34px 0;
    background: linear-gradient(115deg, #075b91, #082b4b);
}

.megaphone {
    width: 65px;
    height: 65px;
    border-radius: 19px;
    background: rgba(255,255,255,.12);
}

.advertise-inner h2 {
    font-size: 24px;
    letter-spacing: -.4px;
}

.advertise-inner p {
    line-height: 1.7;
}

.advertise-inner > .btn {
    padding: 15px 23px;
    border-radius: 12px;
}

/* Benef�cios */
.trust-strip {
    padding-top: 32px;
    padding-bottom: 32px;
}

.trust-strip i {
    width: 47px;
    height: 47px;
    border-radius: 15px;
    background: #e8f5ff;
    color: #0876cf;
}

.trust-strip b {
    color: #24435e;
    font-size: 12px;
}

.trust-strip small {
    line-height: 1.5;
}

/* Rodap� */
footer {
    background: linear-gradient(145deg, #082d4c, #051d33);
}

.footer-main {
    padding-top: 35px;
    padding-bottom: 32px;
}

.footer-bottom {
    padding-top: 18px;
    padding-bottom: 18px;
    border-color: rgba(255,255,255,.13);
}

/* Celulares */
@media (max-width: 760px) {
    .topbar {
        height: 68px;
    }

    .brand b {
        font-size: 21px;
    }

    .hero {
        min-height: 470px;
    }

    .hero-content {
        padding-top: 53px;
        padding-bottom: 65px;
    }

    .hero h1 {
        font-size: clamp(40px, 10vw, 54px);
        letter-spacing: -1.5px;
    }

    .hero-content > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .search-box {
        border-radius: 15px;
    }

    .search-btn {
        min-height: 48px;
    }

    .section {
        padding-top: 32px;
        padding-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 22px;
    }

    .category-grid {
        gap: 9px;
    }

    .category-item {
        min-height: 120px;
        padding: 13px 5px;
        border-radius: 13px;
    }

    .category-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .business-grid {
        gap: 12px;
    }

    .business-image {
        height: 125px;
    }

    .business-body h3 {
        font-size: 13px;
    }

    .advertise-band {
        padding: 27px 0;
    }

    .advertise-inner h2 {
        font-size: 19px;
    }

    .trust-strip {
        gap: 18px 10px;
    }
}

/* Respeita a prefer�ncia por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .category-item,
    .business-card,
    .btn,
    .brand-mark {
        transition: none;
    }
}
```css
/* AJUSTE DA ALTURA DO BANNER PRINCIPAL */
.hero {
    min-height: 440px;
    padding-top: 55px;
    padding-bottom: 55px;
}

.hero-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .hero {
        min-height: 380px;
        padding-top: 35px;
        padding-bottom: 35px;
    }
}
```
```css
/* TOPO DO GUIA MATINHOS � �REAS DE PROPAGANDA */

.ad-slot {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #f4f7fa;
}

.ad-slot-top {
    min-height: 112px;
    border-bottom: 1px solid #e1e8ef;
}

.ad-slot-middle {
    min-height: 112px;
    border-top: 1px solid #e1e8ef;
    border-bottom: 1px solid #e1e8ef;
}

.ad-label {
    color: #8493a3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ad-placeholder {
    width: min(100%, 970px);
    min-height: 70px;
    box-sizing: border-box;
    border: 1px dashed #b7c6d5;
    border-radius: 5px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: #718398;
    font-size: 13px;
    text-align: center;
}

/* CABE�ALHO MAIS COMPACTO */

.topbar {
    min-height: 70px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* CAPA PRINCIPAL MAIS ESTREITA */

.hero {
    min-height: 360px;
    padding-top: 35px;
    padding-bottom: 35px;
}

.hero-content {
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (max-width: 768px) {
    .ad-slot {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ad-slot-top,
    .ad-slot-middle {
        min-height: 96px;
    }

    .ad-placeholder {
        min-height: 58px;
        font-size: 12px;
    }

    .hero {
        min-height: 340px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .topbar {
        min-height: 62px;
    }
}

```css
/* AJUSTE FINAL DO TOPO DO GUIA MATINHOS */

/* Cabe�alho mais estreito */
.topbar {
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    padding: 8px 4%;
    gap: 18px;
}

/* Marca e logotipo mais compactos */
.topbar .brand {
    gap: 10px;
}

.topbar .brand-mark {
    width: 42px;
    height: 42px;
}

/* Primeiro espa�o de publicidade */
.ad-slot-top {
    min-height: 112px;
    order: 0;
}

/* Segundo espa�o, abaixo do cabe�alho */
.ad-slot-middle {
    min-height: 112px;
    order: 2;
}

/* Cabe�alho entre as duas publicidades */
.topbar {
    order: 1;
}

/* Evita que o banner principal fique exageradamente alto */
.hero {
    min-height: 340px;
    padding-top: 28px;
    padding-bottom: 28px;
}

@media (max-width: 768px) {
    .topbar {
        min-height: 60px;
        padding: 8px 14px;
        gap: 8px;
    }

    .topbar .brand-mark {
        width: 36px;
        height: 36px;
    }

    .ad-slot-top,
    .ad-slot-middle {
        min-height: 92px;
    }

    .hero {
        min-height: 320px;
        padding-top: 22px;
        padding-bottom: 22px;
    }
}


/* ==========================================
   AJUSTE FINAL � TOPO DO GUIA MATINHOS
   Ordem: publicidade 1, cabe�alho, publicidade 2
========================================== */

/* �rea azul volta � largura normal */
.hero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-sizing: border-box;
}

/* As duas �reas de publicidade ficam centralizadas */
.ad-slot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* Banner de publicidade centralizado */
.ad-placeholder {
    width: min(100%, 970px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
}

/* Cabe�alho na largura normal, com altura compacta */
.topbar {
    width: 100%;
    height: 76px;
    min-height: 76px;
    padding: 0 max(24px, calc((100% - 1320px) / 2));
    box-sizing: border-box;
}

/* Ajustes para celular */
@media (max-width: 760px) {
    .hero {
        width: 100%;
    }

    .topbar {
        height: 68px;
        min-height: 68px;
        padding: 0 18px;
    }

    .ad-placeholder {
        width: 100%;
    }
}

    box-sizing: border-box;
    border-radius: 12px;
}

/* PUBLICIDADES CENTRALIZADAS */
.ad-slot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.ad-placeholder {
    width: 100%;
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 768px) {
    .hero {
        width: 94%;
    }
}

/* MENU DE NAVEGA��O NA �REA AZUL */
.hero-menu {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: calc(100% - 30px);
    max-width: 1100px;
}

.hero-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 13px;
    border-radius: 8px;
    background: rgba(0, 35, 75, 0.55);
    transition: background 0.2s ease;
}

.hero-menu a:hover {
    background: #0879d9;
}

@media (max-width: 760px) {
    .hero-menu {
        bottom: 12px;
        gap: 6px;
    }

    .hero-menu a {
        font-size: 12px;
        padding: 8px 9px;
    }
}

/* AJUSTE: MENU MAIS ABAIXO NA �REA AZUL */
.hero-menu {
    bottom: 8px;
    z-index: 5;
}

/* D� espa�o entre a busca e o menu */
.hero-content {
    padding-bottom: 65px;
}

@media (max-width: 760px) {
    .hero-menu {
        bottom: 8px;
    }

    .hero-content {
        padding-bottom: 85px;
    }
}

/* MENU SUSPENSO: GUIA DA CIDADE */
.city-guide-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.city-guide-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 35, 75, 0.55);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.city-guide-trigger:hover,
.city-guide-menu.open .city-guide-trigger {
    background: #0879d9;
}

.city-guide-trigger i {
    font-size: 11px;
}

.city-guide-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 390px;
    max-width: calc(100vw - 24px);
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    max-height: 65vh;
    overflow-y: auto;
}

.city-guide-menu:hover .city-guide-dropdown,
.city-guide-menu:focus-within .city-guide-dropdown,
.city-guide-menu.open .city-guide-dropdown {
    display: grid;
}

.city-guide-dropdown a {
    display: block;
    padding: 7px 6px;
    color: #17334f !important;
    background: transparent !important;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
}

.city-guide-dropdown a:hover {
    background: #eaf3ff !important;
    color: #075ca8 !important;
}

@media (max-width: 760px) {
    .city-guide-dropdown {
        position: absolute;
        left: auto;
        right: 0;
        width: 340px;
        max-width: calc(100vw - 24px);
        grid-template-columns: 1fr 1fr;
    }
}

.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown-link {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    z-index: 9999;
}

.menu-dropdown-content a {
    display: block;
    padding: 12px 16px;
    color: #333333;
    text-decoration: none;
    white-space: nowrap;
}

.menu-dropdown-content a:hover {
    background: #f0f0f0;
}

.menu-dropdown:hover .menu-dropdown-content,
.menu-dropdown:focus-within .menu-dropdown-content {
    display: block;
}

/* Menu suspenso: Guia da Cidade */
.menu-dropdown {
    position: relative;
}

/* Bot�o Guia da Cidade */
.menu-dropdown-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Lista de categorias: come�a escondida */
.menu-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    padding: 8px 0;
    z-index: 9999;
}

/* Abre a lista quando passa o mouse */
.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

/* Tamb�m abre ao navegar pelo teclado */
.menu-dropdown:focus-within .menu-dropdown-content {
    display: block;
}

/* Links das categorias */
.menu-dropdown-content a {
    display: block;
    padding: 11px 16px;
    color: #123b50;
    text-decoration: none;
    white-space: nowrap;
}

.menu-dropdown-content a:hover {
    background: #eaf4f7;
    color: #087e9c;
}

/* Celulares: permitir abrir com toque */
@media (max-width: 768px) {
    .menu-dropdown-content {
        position: static;
        min-width: 100%;
        box-shadow: none;
        margin-top: 6px;
    }

    .menu-dropdown:hover .menu-dropdown-content {
        display: none;
    }

    .menu-dropdown:focus-within .menu-dropdown-content {
        display: block;
    }
}

/* =========================================
   MENU SUSPENSO - GUIA DA CIDADE
========================================= */

.city-guide-menu {
    position: relative;
    display: inline-block;
}

.city-guide-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Lista escondida inicialmente */
.city-guide-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
    z-index: 99999;
    padding: 8px 0;
}

/* Abre quando passa o mouse */
.city-guide-menu:hover .city-guide-dropdown {
    display: block;
}

/* Abre tamb�m ao clicar ou navegar pelo teclado */
.city-guide-menu.open .city-guide-dropdown,
.city-guide-menu:focus-within .city-guide-dropdown {
    display: block;
}

/* Apar�ncia dos links */
.city-guide-dropdown a {
    display: block;
    padding: 11px 16px;
    color: #123b50;
    background: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.city-guide-dropdown a:hover {
    background: #eaf4f7;
    color: #087e9c;
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .city-guide-dropdown {
        position: static;
        min-width: 100%;
        max-height: 300px;
        box-shadow: none;
    }
}
/* Banner principal 30% mais fino */
.hero {
    min-height: 0 !important;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
}

.hero-content {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
}

:root {
    --green: #087653;
    --deep: #064b38;
    --mint: #eaf6ef;
    --gold: #ffc44d;
    --ink: #1d3028;
    --muted: #6d7c74;
    --line: #e3ebe5;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f7f9f7;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

.container,
.resultados-guia {
    width: min(1180px, calc(100% - 36px));
    margin-left: auto;
    margin-right: auto;
}

.topline {
    background: var(--deep);
    color: #d9eee4;
    font-size: 12px;
    padding: 8px 0;
}

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.topbar .container {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    font-size: 23px;
    font-weight: 900;
    letter-spacing: -.7px;
    color: var(--deep);
}

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
}

.nav a:hover {
    color: var(--green);
}

.nav a:last-child {
    background: var(--green);
    color: white;
    padding: 11px 16px;
    border-radius: 7px;
}

.resultados-guia {
    padding-top: 38px;
    padding-bottom: 55px;
}

.titulo-resultados {
    margin-bottom: 24px;
}

.titulo-resultados h1 {
    font-size: clamp(27px, 4vw, 36px);
    line-height: 1.2;
    letter-spacing: -.6px;
    margin: 0 0 8px;
}

.titulo-resultados p {
    color: var(--muted);
    margin: 0;
}

.form-busca-guia {
    display: flex;
    gap: 8px;
    background: white;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 24px 0 30px;
    box-shadow: 0 4px 18px #1a49300a;
}

.form-busca-guia input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--ink);
}

.form-busca-guia button {
    border: 0;
    background: var(--gold);
    color: #35290c;
    border-radius: 7px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.grade-empresas-guia {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.empresa-guia-card {
    position: relative;
    background: white;
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 4px 18px #1a49300a;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}

.empresa-guia-card:hover {
    box-shadow: 0 9px 25px #1a493018;
    border-color: #c7ded0;
    transform: translateY(-2px);
}

.empresa-guia-card > img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.empresa-guia-conteudo {
    padding: 21px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.empresa-guia-conteudo h2 {
    font-size: 19px;
    line-height: 1.3;
    margin: 4px 0 8px;
}

.empresa-guia-conteudo p {
    font-size: 13px;
    color: var(--muted);
    margin: 5px 0 10px;
    overflow-wrap: anywhere;
}

.empresa-guia-conteudo p strong {
    color: var(--ink);
}

.selo-destaque {
    display: inline-block;
    background: #fff2cf;
    color: #805700;
    border-radius: 30px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 8px;
}

.empresa-guia-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 15px;
}

.empresa-guia-acoes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--green);
    color: white;
    font-size: 12px;
    font-weight: 800;
}

.empresa-guia-acoes a:hover {
    filter: brightness(.92);
}

.empresa-guia-acoes a[href*="wa.me"] {
    background: #16834d;
}

.mensagem-vazia,
.mensagem-erro {
    padding: 30px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.mensagem-erro {
    background: #fff0f0;
    color: #8a1f1f;
}

.footer {
    background: #063f2f;
    color: #d6e8df;
    padding: 28px 0;
    font-size: 13px;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer a {
    color: white;
    text-decoration: underline;
}

@media (max-width: 850px) {
    .grade-empresas-guia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar .container {
        flex-wrap: wrap;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .nav {
        gap: 12px;
    }
}

@media (max-width: 560px) {
    .container,
    .resultados-guia {
        width: calc(100% - 26px);
    }

    .grade-empresas-guia {
        grid-template-columns: 1fr;
    }

    .form-busca-guia {
        flex-direction: column;
    }

    .form-busca-guia button {
        padding: 14px;
    }

    .titulo-resultados h1 {
        font-size: 27px;
    }
}

/* IMAGEM DO LITORAL NA CAPA DO GUIA MATINHOS */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.coast-scene {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero-coast-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(0, 38, 70, 0.72) 0%,
        rgba(0, 55, 90, 0.42) 55%,
        rgba(0, 38, 70, 0.18) 100%
    );
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .hero-coast-image {
        object-position: center center;
    }

    .hero-shade {
        background: rgba(0, 38, 70, 0.52);
    }
}

/* ==========================================
   CORRE��O FINAL � CAPA DO GUIA MATINHOS
   Largura total e imagem preenchendo o banner
========================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

.hero {
    display: flex;
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

.coast-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2;
}

.hero-coast-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 40px));
    max-width: 100%;
    margin: 0 auto;
    padding-top: 55px;
    padding-bottom: 55px;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .hero {
        width: 100%;
        min-height: 380px;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }

    .hero-content {
        width: calc(100% - 28px);
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .hero-coast-image {
        object-position: center center;
    }
}
/* Botão Empregos no menu */
.nav .btn-empregos {
    background: #d9efff;
    color: #075985;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 700;
    transition: background 0.2s ease;
}

.nav .btn-empregos:hover {
    background: #b9e2ff;
    color: #06466b;
}

/* GUIA MATINHOS - MENU COMPACTO NO CELULAR */
@media (max-width: 760px) {
    .topbar .nav {
        gap: 0 !important;
        padding: 6px 18px 10px !important;
        max-height: 70vh;
        overflow-y: auto;
    }

    .topbar .nav a {
        display: block;
        padding: 9px 0 !important;
        margin: 0 !important;
        line-height: 1.3;
        font-size: 14px;
        text-align: center;
    }

    .topbar .nav a.active {
        border-bottom: 1px solid #eef3f7;
    }

    .topbar .menu-toggle {
        flex-shrink: 0;
    }
}

/* MENU RESPONSIVO DO GUIA MATINHOS */
.mobile-client-link {
    display: none;
}

@media (max-width: 768px) {
    .topbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px 14px;
        min-height: 64px;
    }

    .topbar .brand {
        min-width: 0;
        flex: 1;
    }

    .topbar .brand small {
        display: none;
    }

    .topbar .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 24px;
        cursor: pointer;
        position: relative;
        z-index: 1002;
    }

    .topbar .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 14px 14px;
        background: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
        z-index: 1001;
    }

    .topbar .nav.open {
        display: flex;
    }

    .topbar .nav a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 10px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .topbar .nav .mobile-client-link {
        display: block;
    }

    .topbar > .client-link {
        display: none !important;
    }
}