/* ============================================================
   KIAZOLUA V2 - STYLE.CSS
   ============================================================

   Ficheiro:
   /css/style.css

   Objetivos:
   - Mobile-first
   - Header sem topbar
   - Menu mobile funcional
   - Hero V2
   - Pesquisa responsiva
   - Categorias oficiais
   - Como funciona
   - Serviços populares
   - Confiança
   - Profissionais
   - CTAs
   - Footer
   - Reutilização futura em login, registo e dashboards

   ============================================================ */


/* ============================================================
   1. VARIÁVEIS
   ============================================================ */

:root{
    --navy:#0B2B4D;
    --navy-dark:#071E35;
    --navy-light:#164B7C;

    --orange:#FF9D1A;
    --orange-dark:#F28A00;
    --orange-soft:#FFF4E3;

    --green:#129447;
    --green-dark:#0B783A;
    --green-soft:#ECFDF3;

    --ink:#172B3E;
    --text:#344054;
    --muted:#667085;
    --muted-light:#98A2B3;

    --white:#FFFFFF;
    --bg:#F7F9FB;
    --bg-soft:#FBFCFD;

    --line:#E6EBF0;
    --line-dark:#D5DEE7;

    --danger:#B42318;
    --danger-soft:#FEF3F2;

    --shadow-sm:0 6px 20px rgba(11,43,77,.06);
    --shadow:0 16px 44px rgba(11,43,77,.10);
    --shadow-lg:0 24px 70px rgba(7,30,53,.16);

    --radius-sm:10px;
    --radius:18px;
    --radius-lg:28px;

    --transition:.22s ease;
}


/* ============================================================
   2. RESET
   ============================================================ */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.menu-open{
    overflow:hidden;
}

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

img{
    display:block;
    max-width:100%;
    height:auto;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

::selection{
    background:var(--orange);
    color:var(--navy);
}


/* ============================================================
   3. ACESSIBILIDADE
   ============================================================ */

:focus-visible{
    outline:3px solid rgba(255,157,26,.45);
    outline-offset:3px;
}

.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;
}


/* ============================================================
   4. CONTAINER
   ============================================================ */

.container{
    width:min(1180px,92%);
    margin-inline:auto;
}


/* ============================================================
   5. HEADER
   ============================================================ */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px);
}

.navbar .container{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}


/* Logo */

.brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.brand img{
    width:155px;
    height:auto;
}


/* Menu */

.nav-menu{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:28px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:5px;
}

.nav-links a{
    padding:10px 11px;
    border-radius:9px;
    color:#475467;
    font-size:.92rem;
    font-weight:700;
    transition:var(--transition);
}

.nav-links a:hover{
    color:var(--navy);
    background:#F3F6F8;
}


/* Ações */

.nav-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.login-link{
    color:var(--navy);
    font-weight:800;
    font-size:.92rem;
}


/* ============================================================
   6. MOBILE TOGGLE
   ============================================================ */

.mobile-toggle{
    display:none;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    padding:9px;
    border-radius:10px;
}

.mobile-toggle span{
    display:block;
    width:24px;
    height:2px;
    margin:5px auto;
    background:var(--navy);
    border-radius:20px;
    transition:.25s ease;
}


/* ============================================================
   7. BOTÕES
   ============================================================ */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    border:0;
    border-radius:12px;
    padding:12px 18px;
    font-weight:800;
    line-height:1.2;
    transition:transform var(--transition),background var(--transition),box-shadow var(--transition);
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    background:linear-gradient(135deg,var(--orange),#FFB13B);
    color:var(--navy);
    box-shadow:0 9px 22px rgba(255,157,26,.20);
}

.btn-primary:hover{
    background:linear-gradient(135deg,var(--orange-dark),var(--orange));
    box-shadow:0 12px 28px rgba(255,157,26,.28);
}

.btn-secondary{
    background:var(--navy);
    color:#fff;
}

.btn-secondary:hover{
    background:var(--navy-light);
}

.btn-light{
    background:#EEF4F8;
    color:var(--navy);
}

.btn-green{
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    color:#fff;
}

.btn-outline{
    background:#fff;
    border:1px solid var(--line-dark);
    color:var(--navy);
}


/* ============================================================
   8. HERO V2
   ============================================================ */

.hero-v2{
    position:relative;
    overflow:hidden;
    padding:76px 0 84px;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
}

.hero-v2::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    right:-250px;
    top:-250px;
    background:radial-gradient(circle,rgba(255,157,26,.10),transparent 68%);
}

.hero-v2-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:66px;
    align-items:center;
}


/* Hero label */

.hero-label{
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    border-radius:999px;
    background:var(--orange-soft);
    color:#A85C00;
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.07em;
}


/* Hero heading */

.hero-v2 h1{
    max-width:750px;
    margin:17px 0 18px;
    color:var(--navy);
    font-size:clamp(2.75rem,5vw,4.6rem);
    line-height:1.02;
    letter-spacing:-.05em;
}

.hero-v2 h1 span{
    display:block;
    color:var(--green);
}


/* Hero description */

.hero-description{
    max-width:680px;
    margin:0;
    color:var(--muted);
    font-size:1.07rem;
}


/* ============================================================
   9. HERO SEARCH
   ============================================================ */

.hero-search{
    display:grid;
    grid-template-columns:1.5fr 1fr auto;
    gap:6px;
    margin-top:28px;
    padding:7px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    box-shadow:var(--shadow);
}

.hero-search-main{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding-left:11px;
}

.search-icon{
    color:var(--muted-light);
    font-size:1.45rem;
}

.hero-search input,
.hero-search select{
    width:100%;
    border:0;
    outline:0;
    background:#fff;
    color:var(--ink);
}

.hero-search input{
    min-width:0;
    padding:14px 8px;
}

.hero-search select{
    padding:13px 12px;
    border-left:1px solid var(--line);
    cursor:pointer;
}

.hero-search input::placeholder{
    color:#98A2B3;
}


/* ============================================================
   10. PESQUISAS POPULARES
   ============================================================ */

.popular-searches{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    margin-top:17px;
    font-size:.82rem;
}

.popular-searches strong{
    color:var(--muted);
}

.popular-searches a{
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--navy);
    font-weight:700;
    transition:var(--transition);
}

.popular-searches a:hover{
    border-color:#C8D4DF;
    background:#F8FAFC;
}


/* ============================================================
   11. HERO BENEFITS
   ============================================================ */

.hero-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:22px;
    color:#526174;
    font-size:.84rem;
    font-weight:700;
}


/* ============================================================
   12. HERO VISUAL
   ============================================================ */

.hero-v2-visual{
    position:relative;
}

.hero-visual-main{
    position:relative;
    overflow:hidden;
    min-height:460px;
    padding:30px;
    border-radius:30px;
    background:
        radial-gradient(circle at 80% 10%,rgba(255,157,26,.25),transparent 30%),
        linear-gradient(135deg,var(--navy-dark),var(--navy-light));
    color:#fff;
    box-shadow:var(--shadow-lg);
}

.hero-visual-main::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    right:-120px;
    bottom:-120px;
    border:1px solid rgba(255,255,255,.10);
}

.hero-visual-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:.77rem;
    font-weight:800;
}

.verified-dot{
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--green);
    font-size:.7rem;
}

.hero-visual-content{
    position:absolute;
    left:30px;
    right:30px;
    bottom:32px;
    z-index:2;
}

.visual-kicker{
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.1em;
    color:#C7D7E5;
}

.hero-visual-content h2{
    max-width:430px;
    margin:7px 0 22px;
    font-size:2rem;
    line-height:1.12;
}

.hero-mini-cards{
    display:grid;
    gap:9px;
}

.hero-mini-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
}

.hero-mini-card > span{
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--orange);
    color:var(--navy);
    font-size:.75rem;
    font-weight:900;
}

.hero-mini-card strong{
    display:block;
    font-size:.9rem;
}

.hero-mini-card small{
    color:#C9D8E5;
}

.hero-floating-card{
    position:absolute;
    right:-20px;
    bottom:36px;
    display:flex;
    align-items:center;
    gap:11px;
    max-width:245px;
    padding:15px;
    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow);
}

.floating-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--orange-soft);
    color:#B76300;
    font-size:1.2rem;
}

.hero-floating-card strong{
    display:block;
    color:var(--navy);
}

.hero-floating-card small{
    display:block;
    color:var(--muted);
}


/* ============================================================
   13. SECÇÕES
   ============================================================ */

.section{
    padding:80px 0;
}

.section-heading-v2{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:32px;
}

.section-heading-v2.centered{
    display:block;
    max-width:760px;
    margin:0 auto 36px;
    text-align:center;
}

.section-label{
    display:inline-flex;
    margin-bottom:7px;
    color:var(--green);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.1em;
}

.section-heading-v2 h2,
.trust-v2 h2,
.client-cta-v2 h2,
.professional-cta-v2 h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(1.9rem,3vw,2.6rem);
    line-height:1.12;
    letter-spacing:-.035em;
}

.section-heading-v2 p{
    max-width:650px;
    margin:9px 0 0;
    color:var(--muted);
}

.section-link{
    color:var(--navy);
    font-weight:800;
    white-space:nowrap;
}


/* ============================================================
   14. CATEGORIAS
   ============================================================ */

.categories-v2{
    background:#fff;
}

.categorias-slider{
    overflow:visible;
}

.categorias-track{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
}

.categoria-card{
    position:relative;
    overflow:hidden;
    min-height:285px;
    padding:23px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.categoria-card::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    right:-65px;
    top:-65px;
    background:rgba(255,157,26,.07);
}

.categoria-card:hover{
    transform:translateY(-6px);
    border-color:#CDD8E2;
    box-shadow:var(--shadow);
}

.categoria-card picture{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:16px;
    background:#F1F6F9;
}

.categoria-card picture img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.categoria-card h3{
    margin:0 0 8px;
    color:var(--navy);
    font-size:1.02rem;
    line-height:1.25;
}

.categoria-card p{
    margin:0;
    color:var(--muted);
    font-size:.86rem;
    line-height:1.55;
}

.category-arrow{
    position:absolute;
    right:20px;
    bottom:18px;
    color:var(--green);
    font-size:1.25rem;
    font-weight:900;
}


/* ============================================================
   15. COMO FUNCIONA
   ============================================================ */

.how-v2{
    background:#F8FAFC;
}

.how-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.how-card{
    position:relative;
    padding:24px;
    border:1px solid var(--line);
    border-radius:19px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.how-number{
    position:absolute;
    top:18px;
    right:18px;
    color:#D9E0E7;
    font-size:.75rem;
    font-weight:900;
}

.how-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:14px;
    background:var(--orange-soft);
    color:#AD6100;
    font-size:1.3rem;
}

.how-card h3{
    margin:0 0 7px;
    color:var(--navy);
    font-size:1rem;
}

.how-card p{
    margin:0;
    color:var(--muted);
    font-size:.87rem;
}


/* ============================================================
   16. SERVIÇOS POPULARES
   ============================================================ */

.popular-services-v2{
    background:#fff;
}

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

.popular-service-card{
    min-height:205px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    transition:var(--transition);
}

.popular-service-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-sm);
}

.popular-service-card > span{
    display:inline-flex;
    margin-bottom:12px;
    padding:5px 8px;
    border-radius:999px;
    background:#F1F6F9;
    color:#526174;
    font-size:.7rem;
    font-weight:850;
}

.popular-service-card h3{
    margin:0 0 7px;
    color:var(--navy);
}

.popular-service-card p{
    margin:0 0 17px;
    color:var(--muted);
    font-size:.88rem;
}

.popular-service-card strong{
    color:var(--green);
    font-size:.82rem;
}


/* ============================================================
   17. CONFIANÇA
   ============================================================ */

.trust-v2{
    background:linear-gradient(135deg,#071E35,#0B2B4D);
    color:#fff;
}

.trust-v2-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:center;
}

.trust-v2 .section-label{
    color:#8DE1AF;
}

.trust-v2 h2{
    color:#fff;
}

.trust-v2-intro > p{
    max-width:520px;
    margin:14px 0 24px;
    color:#C2D2DE;
}

.trust-v2-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

.trust-item{
    display:flex;
    gap:13px;
    padding:19px;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
}

.trust-icon{
    flex:0 0 auto;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--orange);
    color:var(--navy);
    font-weight:900;
}

.trust-item h3{
    margin:0 0 5px;
    color:#fff;
    font-size:.95rem;
}

.trust-item p{
    margin:0;
    color:#B9CAD7;
    font-size:.82rem;
}


/* ============================================================
   18. PROFISSIONAIS
   ============================================================ */

.professionals-v2{
    background:#F8FAFC;
}

.grid{
    display:grid;
    gap:18px;
}

.grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}


/* Cards de profissional existentes */

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:21px;
    box-shadow:var(--shadow-sm);
}

.pro-card{
    height:100%;
    display:flex;
    flex-direction:column;
    transition:var(--transition);
}

.pro-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow);
}

.pro-top{
    display:flex;
    align-items:center;
    gap:13px;
}

.pro-avatar{
    width:65px;
    height:65px;
    flex:0 0 65px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    color:#fff;
    font-weight:900;
}

.pro-top h3{
    margin:0 0 3px;
    color:var(--navy);
    font-size:.96rem;
}

.pro-role{
    color:var(--muted);
    font-size:.82rem;
}

.rating{
    margin-top:3px;
    color:#B56700;
    font-size:.82rem;
    font-weight:800;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 7px;
    border-radius:999px;
    background:var(--green-soft);
    color:#067647;
    font-size:.67rem;
    font-weight:850;
}

.pro-desc{
    flex:1;
    margin:14px 0;
    color:var(--muted);
    font-size:.86rem;
}

.pro-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding-top:13px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.78rem;
}

.pro-price{
    color:var(--navy);
    font-weight:850;
    text-align:right;
}


/* ============================================================
   19. CTA CLIENTE
   ============================================================ */

.client-cta-v2{
    background:#fff;
}

.client-cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding:46px;
    border-radius:28px;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    color:#fff;
    box-shadow:var(--shadow-lg);
}

.client-cta-v2 h2{
    max-width:660px;
    color:#fff;
}

.client-cta-v2 p{
    margin:10px 0 0;
    color:#C7D7E3;
}

.light-label{
    color:#8DE1AF;
}


/* ============================================================
   20. CTA PROFISSIONAL
   ============================================================ */

.professional-cta-v2{
    background:#F8FAFC;
}

.professional-cta-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
}

.professional-cta-copy > p{
    max-width:610px;
    margin:13px 0;
    color:var(--muted);
}

.professional-benefits{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 20px;
    margin:22px 0 27px;
    color:#475467;
    font-size:.88rem;
    font-weight:700;
}

.professional-cta-card{
    padding:34px;
    border-radius:25px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.pro-card-icon{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    margin-bottom:21px;
    border-radius:18px;
    background:var(--orange);
    color:var(--navy);
    font-size:1.6rem;
    font-weight:950;
}

.professional-cta-card h3{
    margin:0 0 9px;
    color:var(--navy);
    font-size:1.4rem;
}

.professional-cta-card > p{
    color:var(--muted);
}

.pro-card-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:22px;
}

.pro-card-stats div{
    padding:15px;
    border-radius:14px;
    background:#F7F9FB;
}

.pro-card-stats strong{
    display:block;
    color:var(--navy);
    font-size:1.4rem;
}

.pro-card-stats span{
    color:var(--muted);
    font-size:.75rem;
}


/* ============================================================
   21. LOCALIZAÇÕES
   ============================================================ */

.locations-v2{
    background:#fff;
}

.locations-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.locations-list span{
    padding:9px 15px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:#526174;
    font-size:.82rem;
    font-weight:700;
}


/* ============================================================
   22. FOOTER
   ============================================================ */

.footer-v2{
    padding:58px 0 25px;
    background:#071B2E;
    color:#D7E2EC;
}

.footer-main-v2{
    display:grid;
    grid-template-columns:1.5fr repeat(3,1fr);
    gap:42px;
}

.footer-v2 h4{
    margin:0 0 13px;
    color:#fff;
}

.footer-v2 a{
    display:block;
    margin:7px 0;
    color:#AFC1D1;
    font-size:.88rem;
    transition:var(--transition);
}

.footer-v2 a:hover{
    color:#fff;
}

.footer-brand img{
    width:180px;
    margin-bottom:15px;
    filter:brightness(0) invert(1);
}

.footer-brand p{
    max-width:350px;
    color:#AFC1D1;
    font-size:.9rem;
}

.footer-services{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 15px;
    margin-top:36px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.09);
}

.footer-services strong{
    color:#fff;
    font-size:.82rem;
}

.footer-services a{
    display:inline;
    margin:0;
    font-size:.78rem;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.09);
    color:#8FA7BB;
    font-size:.78rem;
}


/* ============================================================
   23. FORMULÁRIOS E ELEMENTOS REUTILIZÁVEIS
   ============================================================ */

.input,
.select,
.textarea{
    width:100%;
    border:1px solid var(--line-dark);
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    padding:12px 13px;
    outline:0;
    transition:var(--transition);
}

.input:focus,
.select:focus,
.textarea:focus{
    border-color:var(--navy);
    box-shadow:0 0 0 4px rgba(11,43,77,.07);
}

.form-group{
    margin-bottom:16px;
}

.form-group label{
    display:block;
    margin-bottom:6px;
    color:var(--text);
    font-size:.86rem;
    font-weight:750;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.help{
    color:var(--muted);
    font-size:.82rem;
}

.alert{
    margin-bottom:15px;
    padding:12px 14px;
    border-radius:11px;
    font-size:.86rem;
}

.alert-success{
    background:var(--green-soft);
    color:#067647;
}

.alert-error{
    background:var(--danger-soft);
    color:var(--danger);
}


/* ============================================================
   24. ESTADO VAZIO
   ============================================================ */

.empty{
    padding:40px 20px;
    text-align:center;
    color:var(--muted);
}


/* ============================================================
   25. TOAST
   ============================================================ */

.toast{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:9999;
    display:none;
    max-width:370px;
    padding:13px 16px;
    border-radius:12px;
    background:var(--navy);
    color:#fff;
    box-shadow:var(--shadow-lg);
}

.toast.error{
    background:var(--danger);
}

.toast.success{
    background:var(--green);
}


/* ============================================================
   26. TABLET
   ============================================================ */

@media(max-width:1100px){

    .nav-menu{
        gap:14px;
    }

    .nav-links a{
        padding:9px 7px;
        font-size:.86rem;
    }

    .hero-v2-grid{
        gap:38px;
    }

    .categorias-track{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .how-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-main-v2{
        grid-template-columns:1.3fr repeat(3,1fr);
        gap:27px;
    }
}


/* ============================================================
   27. MOBILE / TABLET
   ============================================================ */

@media(max-width:900px){

    .container{
        width:min(94%,1180px);
    }

    /* Header */

    .navbar .container{
        min-height:68px;
    }

    .brand img{
        width:140px;
    }

    .mobile-toggle{
        display:block;
        position:relative;
        z-index:1003;
    }

    .nav-menu{
        display:none;
        position:fixed;
        inset:68px 0 0;
        z-index:1001;
        margin:0;
        padding:20px 5% 35px;
        background:#fff;
        overflow-y:auto;
    }

    .nav-menu.open{
        display:block;
    }

    .nav-links,
    .nav-actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .nav-links a,
    .login-link{
        display:block;
        padding:16px 3px;
        border-bottom:1px solid var(--line);
        color:var(--navy);
        font-size:1rem;
        font-weight:750;
    }

    .nav-actions{
        margin-top:18px;
        gap:10px;
    }

    .nav-actions .btn{
        width:100%;
        min-height:50px;
    }

    .mobile-toggle.active span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2){
        opacity:0;
    }

    .mobile-toggle.active span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }


    /* Hero */

    .hero-v2{
        padding:48px 0 58px;
    }

    .hero-v2-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .hero-v2 h1{
        max-width:720px;
        font-size:clamp(2.35rem,8vw,3.65rem);
    }

    .hero-v2-visual{
        display:none;
    }

    .hero-search{
        grid-template-columns:1fr;
    }

    .hero-search-main{
        border-bottom:1px solid var(--line);
    }

    .hero-search select{
        min-height:48px;
        border-left:0;
    }

    .hero-search button{
        width:100%;
        min-height:52px;
    }

    .popular-searches{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:6px;
        scrollbar-width:none;
    }

    .popular-searches::-webkit-scrollbar{
        display:none;
    }

    .popular-searches a{
        flex:0 0 auto;
        white-space:nowrap;
    }


    /* Categorias */

    .categorias-slider{
        overflow:hidden;
        margin-right:-3%;
    }

    .categorias-track{
        display:flex;
        gap:14px;
        overflow-x:auto;
        padding:3px 4% 16px 0;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }

    .categorias-track::-webkit-scrollbar{
        display:none;
    }

    .categoria-card{
        flex:0 0 72%;
        max-width:310px;
        min-height:265px;
        scroll-snap-align:start;
    }


    /* Trust */

    .trust-v2-grid{
        grid-template-columns:1fr;
        gap:38px;
    }


    /* CTA */

    .professional-cta-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .client-cta-box{
        padding:35px;
    }


    /* Footer */

    .footer-main-v2{
        grid-template-columns:1fr 1fr;
    }
}


/* ============================================================
   28. MOBILE PRINCIPAL
   ============================================================ */

@media(max-width:620px){

    /* Espaçamento */

    .section{
        padding:58px 0;
    }


    /* Header */

    .navbar .container{
        min-height:66px;
    }

    .brand img{
        width:128px;
    }

    .nav-menu{
        inset:66px 0 0;
    }


    /* Hero */

    .hero-v2{
        padding:38px 0 46px;
    }

    .hero-label{
        font-size:.68rem;
    }

    .hero-v2 h1{
        margin-top:14px;
        font-size:clamp(2.15rem,10vw,2.85rem);
        line-height:1.03;
    }

    .hero-description{
        font-size:.95rem;
    }

    .hero-search{
        margin-top:22px;
        padding:6px;
    }

    .hero-search input{
        min-height:49px;
        font-size:.92rem;
    }

    .hero-benefits{
        display:grid;
        gap:7px;
    }


    /* Section headings */

    .section-heading-v2{
        display:block;
        margin-bottom:25px;
    }

    .section-heading-v2 .section-link{
        display:inline-block;
        margin-top:13px;
    }

    .section-heading-v2 h2,
    .trust-v2 h2,
    .client-cta-v2 h2,
    .professional-cta-v2 h2{
        font-size:1.85rem;
    }


    /* Categorias */

    .categoria-card{
        flex-basis:82%;
        min-height:255px;
        padding:20px;
    }

    .categoria-card picture{
        width:57px;
        height:57px;
    }

    .categoria-card picture img{
        width:38px;
        height:38px;
    }


    /* Como funciona */

    .how-grid{
        grid-template-columns:1fr;
    }


    /* Popular */

    .popular-services-grid{
        grid-template-columns:1fr;
    }


    /* Trust */

    .trust-v2-list{
        grid-template-columns:1fr;
    }


    /* Profissionais */

    .grid-4{
        grid-template-columns:1fr;
    }

    .pro-meta{
        flex-direction:column;
    }

    .pro-price{
        text-align:left;
    }


    /* CTA cliente */

    .client-cta-box{
        display:block;
        padding:28px 22px;
        border-radius:22px;
    }

    .client-cta-box .btn{
        width:100%;
        margin-top:22px;
    }


    /* CTA profissional */

    .professional-benefits{
        grid-template-columns:1fr;
    }

    .professional-cta-card{
        padding:24px;
    }


    /* Localizações */

    .locations-list{
        justify-content:flex-start;
    }


    /* Footer */

    .footer-v2{
        padding-top:45px;
    }

    .footer-main-v2{
        grid-template-columns:1fr;
        gap:28px;
    }

    .footer-services{
        display:block;
    }

    .footer-services strong{
        display:block;
        margin-bottom:10px;
    }

    .footer-services a{
        display:block;
        margin:7px 0;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }


    /* Forms */

    .form-row{
        grid-template-columns:1fr;
    }


    /* Toast */

    .toast{
        left:12px;
        right:12px;
        bottom:12px;
        max-width:none;
    }
}


/* ============================================================
   29. ECRÃS MUITO PEQUENOS
   ============================================================ */

@media(max-width:380px){

    .container{
        width:94%;
    }

    .brand img{
        width:118px;
    }

    .hero-v2 h1{
        font-size:2rem;
    }

    .categoria-card{
        flex-basis:88%;
    }

    .btn{
        padding-inline:14px;
    }
}

/* ============================================================
   KIAZOLUA - ÍCONES MAIORES NOS CARDS DE CATEGORIAS
   Mantém o tamanho atual dos cards
============================================================ */

.categoria-card picture{
    width:82px;
    height:82px;

    display:grid;
    place-items:center;

    margin-bottom:18px;

    border-radius:18px;
    background:#F1F6F9;

    overflow:hidden;
}

.categoria-card picture img{
    width:68px;
    height:68px;

    object-fit:contain;

    display:block;
}


/* TABLET */
@media(max-width:900px){

    .categoria-card picture{
        width:76px;
        height:76px;
    }

    .categoria-card picture img{
        width:62px;
        height:62px;
    }
}


/* MOBILE */
@media(max-width:620px){

    .categoria-card picture{
        width:70px;
        height:70px;
    }

    .categoria-card picture img{
        width:58px;
        height:58px;
    }
}

/* ============================================================
   KIAZOLUA V4 - HEADER DESKTOP + MOBILE
   Navegação limpa, estática e responsiva.
   O menu mobile existe no próprio HTML e NÃO é criado pelo JS.
============================================================ */

/* ============================================================
   HEADER BASE
============================================================ */

.site-header{
    position:sticky;
    top:0;
    z-index:12000;
    width:100%;
    background:rgba(255,255,255,.90);
    border-bottom:1px solid rgba(213,222,231,.70);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    transition:
        background .24s ease,
        box-shadow .24s ease,
        border-color .24s ease;
}

.site-header.is-scrolled{
    background:rgba(255,255,255,.82);
    border-bottom-color:rgba(11,43,77,.08);
    box-shadow:0 8px 28px rgba(11,43,77,.08);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
}

.navbar{
    background:transparent;
}

.navbar .container,
.navbar .nav-container{
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    transition:min-height .22s ease;
}

.site-header.is-scrolled .navbar .container,
.site-header.is-scrolled .navbar .nav-container{
    min-height:68px;
}


/* ============================================================
   LOGO
============================================================ */

.brand{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    position:relative;
    z-index:2;
}

.brand img{
    width:158px;
    height:auto;
    object-fit:contain;
    transition:width .22s ease,transform .22s ease;
}

.brand:hover img{
    transform:translateY(-1px);
}

.site-header.is-scrolled .brand img{
    width:150px;
}


/* ============================================================
   NAVEGAÇÃO DESKTOP
============================================================ */

.desktop-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
    margin-left:auto;
}

.desktop-nav > a,
.nav-services > summary{
    position:relative;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 11px;
    border-radius:10px;
    color:#475467;
    font-size:.88rem;
    font-weight:750;
    line-height:1.2;
    list-style:none;
    cursor:pointer;
    user-select:none;
    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.nav-services > summary::-webkit-details-marker{
    display:none;
}

.desktop-nav > a::after,
.nav-services > summary::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:3px;
    width:0;
    height:2px;
    border-radius:999px;
    background:var(--green);
    transform:translateX(-50%);
    transition:width .2s ease;
}

.desktop-nav > a:hover,
.nav-services > summary:hover,
.nav-services[open] > summary{
    color:var(--navy);
    background:rgba(11,43,77,.045);
    transform:translateY(-1px);
}

.desktop-nav > a:hover::after,
.nav-services > summary:hover::after,
.nav-services[open] > summary::after,
.desktop-nav > a.active::after,
.desktop-nav > a[aria-current="page"]::after{
    width:24px;
}

.desktop-nav > a.active,
.desktop-nav > a[aria-current="page"]{
    color:var(--navy);
    background:rgba(18,148,71,.07);
}


/* ============================================================
   SERVIÇOS - DROPDOWN DESKTOP
============================================================ */

.nav-services{
    position:relative;
}

.nav-chevron{
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transform-origin:center;
    transition:transform .18s ease;
}

.nav-services[open] .nav-chevron{
    transform:rotate(225deg) translate(-2px,-1px);
}

.nav-services-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    z-index:13000;
    width:330px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 22px 55px rgba(7,30,53,.16);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
}

.nav-services-dropdown::before{
    content:"";
    position:absolute;
    top:-12px;
    left:0;
    right:0;
    height:12px;
}

.nav-services-dropdown a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:46px;
    padding:10px 12px;
    border-radius:11px;
    color:#344054;
    font-size:.82rem;
    font-weight:750;
    transition:background .18s ease,color .18s ease,padding-left .18s ease;
}

.nav-services-dropdown a::after{
    content:"›";
    color:#98A2B3;
    font-size:1.15rem;
}

.nav-services-dropdown a:hover{
    padding-left:15px;
    background:#F4F7F9;
    color:var(--green);
}


/* ============================================================
   AÇÕES DESKTOP
============================================================ */

.desktop-actions{
    display:flex;
    align-items:center;
    gap:9px;
    margin-left:8px;
}

.desktop-actions .login-link{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:9px 13px;
    border-radius:10px;
    color:var(--navy);
    font-size:.88rem;
    font-weight:850;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}

.desktop-actions .login-link:hover{
    color:var(--green);
    background:#EEF4F8;
    transform:translateY(-1px);
}

.desktop-actions .btn-primary{
    min-height:44px;
    padding:10px 17px;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(255,157,26,.18);
}

.desktop-actions .btn-primary:hover{
    box-shadow:0 11px 26px rgba(255,157,26,.26);
}


/* ============================================================
   BOTÃO MOBILE
============================================================ */

.mobile-toggle{
    display:none;
    position:relative;
    width:44px;
    height:44px;
    flex:0 0 44px;
    margin-left:auto;
    padding:0;
    border:0;
    border-radius:11px;
    background:transparent;
    cursor:pointer;
    transition:background .18s ease;
}

.mobile-toggle:hover{
    background:#F2F5F7;
}

.mobile-toggle span{
    position:absolute;
    left:10px;
    width:24px;
    height:2px;
    margin:0;
    border-radius:99px;
    background:var(--navy);
    transition:transform .22s ease,opacity .18s ease;
}

.mobile-toggle span:nth-child(1){ top:13px; }
.mobile-toggle span:nth-child(2){ top:21px; }
.mobile-toggle span:nth-child(3){ top:29px; }


/* ============================================================
   KIAZOLUA V4 - MENU MOBILE FLUTUANTE E TRANSLÚCIDO
   Não ocupa o ecrã inteiro de cima a baixo
============================================================ */

.mobile-menu-layer{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:block;
    visibility:hidden;
    pointer-events:none;
}

.mobile-menu-layer.open{
    visibility:visible;
    pointer-events:auto;
}

.mobile-menu-backdrop{
    position:absolute;
    inset:0;
    border:0;
    padding:0;
    background:rgba(7,30,53,.16);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    opacity:0;
    transition:opacity .22s ease;
}

.mobile-menu-layer.open .mobile-menu-backdrop{
    opacity:1;
}


/* ============================================================
   PAINEL FLUTUANTE
============================================================ */

.mobile-menu-panel{
    position:absolute;
    top:82px;
    left:4%;
    right:4%;
    bottom:auto;
    width:auto;
    max-height:75vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.56);
    border-radius:22px;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);
    box-shadow:0 22px 60px rgba(7,30,53,.20);
    opacity:0;
    transform:translateY(-14px) scale(.985);
    transform-origin:top center;
    transition:
        transform .24s ease,
        opacity .20s ease;
}

.mobile-menu-layer.open .mobile-menu-panel{
    opacity:1;
    transform:translateY(0) scale(1);
}


/* ============================================================
   CABEÇALHO MOBILE
============================================================ */

.mobile-menu-head{
    flex:0 0 auto;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 16px;
    border-bottom:1px solid rgba(213,222,231,.72);
    background:rgba(255,255,255,.48);
}

.mobile-menu-logo{
    display:flex;
    align-items:center;
}

.mobile-menu-logo img{
    width:132px;
    height:auto;
    object-fit:contain;
}

.mobile-menu-close{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(213,222,231,.80);
    border-radius:11px;
    background:rgba(255,255,255,.70);
    color:var(--navy);
    font-size:1.65rem;
    line-height:1;
    cursor:pointer;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.mobile-menu-close:hover{
    background:var(--orange-soft);
    color:#A85C00;
    transform:rotate(3deg);
}


/* ============================================================
   CONTEÚDO COM SCROLL INTERNO
============================================================ */

.mobile-menu-scroll{
    flex:1 1 auto;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    padding:8px 16px 18px;
    scrollbar-width:none;
}

.mobile-menu-scroll::-webkit-scrollbar{
    display:none;
}


/* ============================================================
   LINKS MOBILE
============================================================ */

.mobile-links{
    display:grid;
}

.mobile-links > a,
.mobile-services > summary{
    position:relative;
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:11px 3px;
    border-bottom:1px solid rgba(213,222,231,.68);
    border-radius:0;
    background:transparent;
    color:var(--navy);
    font-size:.91rem;
    font-weight:800;
    list-style:none;
    cursor:pointer;
    transition:
        color .18s ease,
        padding-left .18s ease,
        background .18s ease;
}

.mobile-services > summary::-webkit-details-marker{
    display:none;
}

.mobile-links > a::after{
    content:"›";
    color:#98A2B3;
    font-size:1.3rem;
    font-weight:500;
}

.mobile-links > a:hover,
.mobile-services > summary:hover{
    padding-left:7px;
    color:var(--green);
    background:rgba(255,255,255,.24);
}

.mobile-services-arrow{
    width:8px;
    height:8px;
    margin-right:6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform .2s ease;
}

.mobile-services[open] .mobile-services-arrow{
    transform:rotate(225deg);
}


/* ============================================================
   SUBMENU SERVIÇOS
============================================================ */

.mobile-services-list{
    display:grid;
    gap:4px;
    padding:8px 0 10px 8px;
    border-bottom:1px solid rgba(213,222,231,.68);
}

.mobile-services-list a{
    min-height:39px;
    display:flex;
    align-items:center;
    padding:8px 10px;
    border-radius:9px;
    background:rgba(248,250,252,.72);
    color:#475467;
    font-size:.76rem;
    font-weight:750;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.mobile-services-list a:hover{
    background:rgba(236,253,243,.90);
    color:var(--green);
    transform:translateX(2px);
}


/* ============================================================
   AÇÕES MOBILE
============================================================ */

.mobile-actions{
    display:grid;
    gap:9px;
    margin-top:16px;
}

.mobile-actions .login-link,
.mobile-actions .btn{
    width:100%;
    min-height:47px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    border-radius:11px;
    font-size:.86rem;
    font-weight:850;
}

.mobile-actions .login-link{
    border:1px solid rgba(213,222,231,.90);
    background:rgba(255,255,255,.68);
    color:var(--navy);
}

.mobile-actions .login-link:hover{
    background:rgba(255,255,255,.92);
    color:var(--green);
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1100px){

    .desktop-nav > a,
    .nav-services > summary{
        padding-inline:8px;
        font-size:.82rem;
    }

    .desktop-nav{
        gap:1px;
    }

    .desktop-actions{
        gap:6px;
    }

    .desktop-actions .btn-primary{
        padding-inline:13px;
        font-size:.82rem;
    }
}

@media(max-width:900px){

    body.menu-open{
        overflow:hidden !important;
    }

    .site-header,
    .site-header.is-scrolled{
        background:rgba(255,255,255,.94);
        -webkit-backdrop-filter:blur(16px);
        backdrop-filter:blur(16px);
    }

    .navbar .container,
    .navbar .nav-container,
    .site-header.is-scrolled .navbar .container,
    .site-header.is-scrolled .navbar .nav-container{
        min-height:68px;
    }

    .brand img,
    .site-header.is-scrolled .brand img{
        width:140px;
    }

    .desktop-nav,
    .desktop-actions,
    .nav-menu{
        display:none !important;
    }

    .mobile-toggle{
        display:block !important;
    }
}

@media(min-width:901px){

    .mobile-menu-layer{
        display:none !important;
    }
}

@media(max-width:620px){

    .navbar .container,
    .navbar .nav-container,
    .site-header.is-scrolled .navbar .container,
    .site-header.is-scrolled .navbar .nav-container{
        min-height:66px;
    }

    .brand img,
    .site-header.is-scrolled .brand img{
        width:130px;
    }

    .mobile-menu-panel{
        top:74px;
        left:12px;
        right:12px;
        width:auto;
        max-height:78vh;
        border-radius:19px;
    }

    .mobile-menu-head{
        min-height:62px;
        padding:10px 14px;
    }

    .mobile-menu-logo img{
        width:122px;
    }

    .mobile-menu-scroll{
        padding:6px 14px calc(16px + env(safe-area-inset-bottom));
    }

    .mobile-links > a,
    .mobile-services > summary{
        min-height:46px;
        font-size:.89rem;
    }
}

@media(max-width:380px){

    .brand img,
    .site-header.is-scrolled .brand img{
        width:120px;
    }

    .mobile-menu-head{
        padding-inline:15px;
    }

    .mobile-menu-scroll{
        padding-inline:15px;
    }
}

/* ============================================================
   KIAZOLUA - CATEGORIAS NO MOBILE
   1 CARD COMPLETO POR LINHA
   Sem card cortado, sem slider horizontal
============================================================ */

@media(max-width:900px){

    .categories-v2 .categorias-slider{
        width:100%;
        margin:0 !important;
        overflow:visible !important;
    }

    .categories-v2 .categorias-track{
        width:100%;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;

        overflow:visible !important;
        overflow-x:visible !important;

        padding:0 !important;

        scroll-snap-type:none !important;
    }

    .categories-v2 .categoria-card{
        width:100% !important;
        max-width:none !important;

        min-height:235px;

        flex:none !important;

        margin:0 !important;

        padding:22px;

        scroll-snap-align:none !important;

        border-radius:20px;
    }

    .categories-v2 .categoria-card picture{
        width:76px;
        height:76px;

        margin-bottom:17px;
    }

    .categories-v2 .categoria-card picture img{
        width:62px;
        height:62px;
    }

    .categories-v2 .categoria-card h3{
        margin-bottom:8px;

        font-size:1.05rem;
        line-height:1.25;
    }

    .categories-v2 .categoria-card p{
        max-width:100%;

        padding-right:24px;

        font-size:.84rem;
        line-height:1.55;
    }

    .categories-v2 .category-arrow{
        right:20px;
        bottom:18px;
    }
}


@media(max-width:620px){

    .categories-v2 .categorias-track{
        gap:14px !important;
    }

    .categories-v2 .categoria-card{
        min-height:220px;

        padding:20px 18px;
    }

    .categories-v2 .categoria-card picture{
        width:70px;
        height:70px;
    }

    .categories-v2 .categoria-card picture img{
        width:58px;
        height:58px;
    }

    .categories-v2 .categoria-card h3{
        font-size:1rem;
    }

    .categories-v2 .categoria-card p{
        padding-right:18px;

        font-size:.81rem;
    }

    .categories-v2 .category-arrow{
        right:18px;
        bottom:16px;
    }
}


@media(max-width:380px){

    .categories-v2 .categoria-card{
        min-height:210px;

        padding:18px 16px;
    }

    .categories-v2 .categoria-card picture{
        width:66px;
        height:66px;
    }

    .categories-v2 .categoria-card picture img{
        width:54px;
        height:54px;
    }
}

/* ============================================================
   KIAZOLUA - FOOTER V3
   Profissional, compacto e responsivo
============================================================ */

.footer-v3{
    padding:56px 0 24px;
    background:
        radial-gradient(circle at 85% 10%,rgba(255,157,26,.08),transparent 28%),
        linear-gradient(135deg,#06192A,#08233B 58%,#0A2A45);
    color:#D7E2EC;
}

.footer-v3-grid{
    display:grid;
    grid-template-columns:1.5fr repeat(3,1fr);
    gap:42px;
    align-items:start;
}

.footer-v3-brand img{
    width:178px;
    margin-bottom:16px;
    filter:brightness(0) invert(1);
}

.footer-v3-brand p{
    max-width:360px;
    margin:0 0 14px;
    color:#AFC1D1;
    font-size:.88rem;
    line-height:1.65;
}

.footer-support{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:.86rem;
    font-weight:800;
    transition:color .2s ease,transform .2s ease;
}

.footer-support:hover{
    color:var(--orange);
    transform:translateX(2px);
}

.footer-v3-column h4{
    margin:0 0 14px;
    color:#fff;
    font-size:.9rem;
    font-weight:900;
}

.footer-v3-column a{
    display:block;
    width:max-content;
    max-width:100%;
    margin:8px 0;
    color:#AFC1D1;
    font-size:.82rem;
    transition:color .2s ease,transform .2s ease;
}

.footer-v3-column a:hover{
    color:#fff;
    transform:translateX(3px);
}

/* confiança */
.footer-trust-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.09);
}

.footer-trust-item{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.045);
}

.footer-trust-item > span{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--orange);
    color:var(--navy);
    font-size:.9rem;
    font-weight:950;
}

.footer-trust-item strong{
    display:block;
    color:#fff;
    font-size:.8rem;
}

.footer-trust-item small{
    display:block;
    margin-top:1px;
    color:#93A9BA;
    font-size:.68rem;
    line-height:1.4;
}

/* categorias */
.footer-categories-v3{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:16px;
    align-items:center;
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.09);
}

.footer-categories-v3 > strong{
    color:#fff;
    font-size:.78rem;
    white-space:nowrap;
}

.footer-categories-v3 > div{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
}

.footer-categories-v3 a{
    color:#AFC1D1;
    font-size:.73rem;
    transition:color .2s ease;
}

.footer-categories-v3 a:hover{
    color:var(--orange);
}

/* bottom */
.footer-bottom-v3{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:22px;
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.09);
}

.footer-bottom-v3 p{
    margin:0;
    color:#8FA7BB;
    font-size:.72rem;
}

.footer-legal{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px 12px;
}

.footer-legal a{
    position:relative;
    color:#AFC1D1;
    font-size:.72rem;
    transition:color .2s ease;
}

.footer-legal a:not(:last-child)::after{
    content:"·";
    position:absolute;
    right:-8px;
    color:#5F768A;
}

.footer-legal a:hover{
    color:#fff;
}

.footer-credit{
    text-align:right;
}

.footer-credit a{
    color:#fff;
    font-weight:850;
    transition:color .2s ease;
}

.footer-credit a:hover{
    color:var(--orange);
}

@media(max-width:1000px){

    .footer-v3-grid{
        grid-template-columns:1.3fr repeat(3,1fr);
        gap:28px;
    }

    .footer-bottom-v3{
        grid-template-columns:1fr 1fr;
    }

    .footer-legal{
        justify-content:flex-end;
    }

    .footer-credit{
        grid-column:1/-1;
        text-align:left;
    }
}

@media(max-width:700px){

    .footer-v3{
        padding:44px 0 22px;
    }

    .footer-v3-grid{
        grid-template-columns:1fr 1fr;
        gap:26px 20px;
    }

    .footer-v3-brand{
        grid-column:1/-1;
    }

    .footer-v3-brand img{
        width:160px;
    }

    .footer-v3-brand p{
        max-width:520px;
        font-size:.84rem;
    }

    .footer-trust-row{
        grid-template-columns:1fr;
        gap:8px;
        margin-top:28px;
    }

    .footer-categories-v3{
        grid-template-columns:1fr;
        gap:10px;
    }

    .footer-categories-v3 > div{
        gap:7px 12px;
    }

    .footer-bottom-v3{
        grid-template-columns:1fr;
        gap:12px;
        align-items:start;
    }

    .footer-legal{
        justify-content:flex-start;
    }

    .footer-credit{
        grid-column:auto;
        text-align:left;
    }
}

@media(max-width:460px){

    .footer-v3-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .footer-v3-brand{
        grid-column:auto;
    }

    .footer-v3-column{
        padding-bottom:4px;
    }

    .footer-v3-column h4{
        margin-bottom:10px;
    }

    .footer-v3-column a{
        margin:7px 0;
    }

    .footer-trust-item{
        padding:12px 13px;
    }

    .footer-categories-v3 > div{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px 12px;
    }

    .footer-categories-v3 a{
        font-size:.71rem;
    }

    .footer-bottom-v3{
        padding-top:18px;
    }
}

/* ============================================================
   KIAZOLUA - PÁGINAS LEGAIS, 404, COOKIES E VOLTAR AO TOPO
============================================================ */

.legal-page,.error-page{background:#F7F9FB;}
.legal-hero{padding:72px 0 48px;background:linear-gradient(135deg,#F7FBFF,#FFF8EE);}
.legal-eyebrow{display:inline-flex;margin-bottom:12px;padding:7px 11px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.legal-hero h1,.error-card h1{margin:0;color:var(--navy);font-size:clamp(2rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.04em;}
.legal-hero p{max-width:760px;margin:16px 0 0;color:var(--muted);font-size:1rem;line-height:1.75;}
.legal-updated{margin-top:16px;color:#7C8A99;font-size:.76rem;font-weight:700;}
.legal-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;padding-top:42px;padding-bottom:72px;align-items:start;}
.legal-summary{position:sticky;top:96px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);}
.legal-summary strong{display:block;margin-bottom:7px;color:var(--navy);font-size:.9rem;}
.legal-summary p{margin:0 0 14px;color:var(--muted);font-size:.78rem;line-height:1.55;}
.legal-summary a{display:block;padding:7px 0;color:var(--green);font-size:.78rem;font-weight:800;}
.legal-content{display:grid;gap:14px;}
.legal-section{padding:26px 28px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);}
.legal-section h2{margin:0 0 10px;color:var(--navy);font-size:1.05rem;}
.legal-section p{margin:0;color:#536273;font-size:.88rem;line-height:1.8;}
.legal-section a{color:var(--green);font-weight:800;text-decoration:underline;text-underline-offset:3px;}

.error-page{min-height:66vh;display:grid;place-items:center;padding:70px 0;}
.error-card{max-width:760px;text-align:center;}
.error-code{margin-bottom:-14px;color:rgba(11,43,77,.07);font-size:clamp(7rem,24vw,13rem);font-weight:950;line-height:.8;letter-spacing:-.08em;}
.error-card p{max-width:590px;margin:18px auto 0;color:var(--muted);line-height:1.7;}
.error-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px;}
.error-actions .btn{min-height:48px;}

.back-to-top{position:fixed;right:22px;bottom:22px;z-index:15000;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.65);border-radius:14px;background:rgba(11,43,77,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 28px rgba(7,30,53,.2);color:#fff;font-size:1.2rem;font-weight:900;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background .2s ease;}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--green);}

.cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:20000;padding:16px;visibility:hidden;pointer-events:none;}
.cookie-consent.open{visibility:visible;pointer-events:auto;}
.cookie-consent-card{width:min(1080px,100%);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 18px;border:1px solid rgba(255,255,255,.65);border-radius:18px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(7,30,53,.22);opacity:0;transform:translateY(18px);transition:opacity .25s ease,transform .25s ease;}
.cookie-consent.open .cookie-consent-card{opacity:1;transform:translateY(0);}
.cookie-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--orange-soft);font-size:1.25rem;}
.cookie-copy strong{display:block;color:var(--navy);font-size:.9rem;}
.cookie-copy p{margin:4px 0;color:#64748B;font-size:.76rem;line-height:1.5;}
.cookie-copy a{color:var(--green);font-size:.72rem;font-weight:850;}
.cookie-actions{display:flex;gap:8px;}
.btn-cookie-primary,.btn-cookie-secondary{min-height:42px;padding:9px 13px;border-radius:11px;font-size:.76rem;font-weight:850;cursor:pointer;}
.btn-cookie-primary{border:1px solid var(--orange);background:var(--orange);color:var(--navy);}
.btn-cookie-secondary{border:1px solid var(--line-dark);background:#fff;color:var(--navy);}

body.cookie-visible .back-to-top{bottom:118px;}

@media(max-width:760px){
  .legal-hero{padding:52px 0 34px;}
  .legal-layout{grid-template-columns:1fr;padding-top:24px;padding-bottom:52px;}
  .legal-summary{position:static;}
  .legal-section{padding:22px 20px;}
  .cookie-consent{padding:10px;}
  .cookie-consent-card{grid-template-columns:auto 1fr;gap:11px;padding:14px;}
  .cookie-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;}
  body.cookie-visible .back-to-top{bottom:178px;}
  .back-to-top{right:14px;bottom:14px;width:44px;height:44px;}
}
@media(max-width:430px){
  .cookie-icon{display:none;}
  .cookie-consent-card{grid-template-columns:1fr;}
  .cookie-actions{grid-column:auto;}
  .cookie-copy p{font-size:.73rem;}
  body.cookie-visible .back-to-top{bottom:190px;}
}

/* ============================================================
   KIAZOLUA - AJUSTE VISUAL HEADER + HERO
   Header cinza-azulado suave e Hero com fundo distinto.
   ============================================================ */

.site-header{
    background:rgba(247,249,251,.94);
    border-bottom:1px solid rgba(11,43,77,.08);
}

.site-header.is-scrolled{
    background:rgba(255,255,255,.94);
}

.hero-v2{
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,157,26,.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #F3F7FA 0%,
            #F8FAFC 48%,
            #F2F8F5 100%
        );
}
/* ============================================================
   KIAZOLUA - CORREÇÃO GLOBAL RESPONSIVIDADE MOBILE
   Adicionado ao final para prevalecer sobre regras anteriores
   ============================================================ */

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

body {
    position: relative;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.container,
.container > *,
main,
main > *,
section,
section > * {
    min-width: 0;
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width: 900px) {

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .site-header,
    .navbar {
        width: 100%;
        max-width: 100%;
    }

    .navbar .container,
    .navbar .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    .brand {
        min-width: 0;
    }

    .brand img,
    .site-header.is-scrolled .brand img {
        width: 140px;
        max-width: 100%;
    }

    .mobile-toggle {
        flex: 0 0 44px;
        margin-left: auto;
    }

    h1,
    h2,
    h3,
    p {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .hero-v2 h1 {
        max-width: 100%;
    }

    .popular-searches {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 8px;
    }

    .popular-searches strong {
        flex: 0 0 auto;
    }

    .popular-searches a {
        flex: 0 0 auto;
        max-width: 100%;
        white-space: normal !important;
    }

    .help-popular,
    .help-filters,
    .faq-filters,
    .filter-tabs,
    .category-filters,
    .chips,
    .tabs {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 8px;
    }

    .help-popular > *,
    .help-filters > *,
    .faq-filters > *,
    .filter-tabs > *,
    .category-filters > *,
    .chips > *,
    .tabs > * {
        max-width: 100%;
        min-width: 0;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        min-width: 0;
    }

    .hero-search,
    .hero-search-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-v2-grid,
    .professional-cta-grid,
    .trust-v2-grid {
        min-width: 0;
    }
}


/* ============================================================
   TELEMÓVEIS
   ============================================================ */

@media (max-width: 620px) {

    .container,
    .navbar .container,
    .navbar .nav-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .brand img,
    .site-header.is-scrolled .brand img {
        width: 130px;
    }

    h1 {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }
}


/* ============================================================
   ECRÃS MUITO PEQUENOS
   ============================================================ */

@media (max-width: 380px) {

    .container,
    .navbar .container,
    .navbar .nav-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .brand img,
    .site-header.is-scrolled .brand img {
        width: 120px;
    }
}
/* ============================================================
   KIAZOLUA - RESTAURAR HEADER FIXO / STICKY
============================================================ */

html{
    overflow-x:clip !important;
}

body{
    overflow-x:clip !important;
    overflow-y:visible !important;
}

.site-header{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:0 !important;
    z-index:10000 !important;

    width:100% !important;
    overflow:visible !important;

    background:rgba(255,255,255,.97) !important;
}

.navbar{
    overflow:visible !important;
}

/* ============================================================
   KIAZOLUA V5 - HERO HOME ULTRACOMPACTO
   Mantém o HTML atual e sobrepõe também os estilos inline do index.
   ============================================================ */

@media (min-width:1051px){

    body .hero-v2{
        padding:18px 0 16px !important;
    }

    body .hero-v2-grid{
        grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr) !important;
        column-gap:54px !important;
        row-gap:10px !important;
        align-items:start !important;
    }

    body .hero-v2-content,
    body .hero-v2-visual{
        align-self:start !important;
    }

    body .hero-v2-visual{
        margin-top:0 !important;
        padding-top:0 !important;
        transform:none !important;
    }

    body .hero-label{
        padding:6px 10px !important;
    }

    body .hero-v2-content h1{
        margin:12px 0 10px !important;
        font-size:clamp(2.55rem,4.15vw,4rem) !important;
        line-height:.98 !important;
    }

    body .hero-description{
        margin:0 0 12px !important;
        font-size:1rem !important;
        line-height:1.5 !important;
    }

    body .hero-search{
        margin-top:0 !important;
        padding:6px !important;
    }

    body .hero-search input{
        padding:11px 8px !important;
    }

    body .hero-search select{
        padding:10px 12px !important;
    }

    body .hero-search .btn{
        min-height:42px !important;
        padding:10px 17px !important;
    }

    body .hero-visual-main{
        min-height:390px !important;
        margin-top:0 !important;
        padding:22px 28px !important;
        border-radius:27px !important;
    }

    body .hero-visual-content{
        left:28px !important;
        right:28px !important;
        bottom:22px !important;
    }

    body .hero-visual-content h2{
        margin:5px 0 13px !important;
        font-size:1.72rem !important;
        line-height:1.08 !important;
    }

    body .hero-mini-cards{
        gap:7px !important;
    }

    body .hero-mini-card{
        padding:9px 11px !important;
    }

    body .hero-mini-card > span{
        width:34px !important;
        height:34px !important;
    }

    body .hero-floating-card{
        right:-14px !important;
        bottom:22px !important;
        padding:12px !important;
    }

    body .hero-v2-quick-row{
        grid-column:1/-1 !important;
        display:grid !important;
        grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr) !important;
        gap:54px !important;
        align-items:center !important;
        margin-top:0 !important;
    }

    body .hero-v2-quick-row .popular-searches{
        margin:0 !important;
        gap:6px !important;
        flex-wrap:nowrap !important;
        white-space:nowrap !important;
    }

    body .hero-v2-quick-row .popular-searches a{
        padding:5px 9px !important;
    }

    body .hero-v2-quick-row .hero-benefits{
        margin:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex-wrap:nowrap !important;
        gap:13px !important;
        font-size:.78rem !important;
        white-space:nowrap !important;
    }
}


/* TABLET */
@media (min-width:701px) and (max-width:1050px){

    body .hero-v2{
        padding:28px 0 34px !important;
    }

    body .hero-v2-grid{
        grid-template-columns:1fr !important;
        gap:20px !important;
    }

    body .hero-v2-quick-row{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }
}


/* MOBILE */
@media (max-width:700px){

    body .hero-v2{
        padding:24px 0 30px !important;
    }

    body .hero-v2-grid{
        gap:18px !important;
    }

    body .hero-v2-content h1{
        margin:14px 0 12px !important;
    }

    body .hero-v2-quick-row{
        gap:12px !important;
    }

    body .hero-v2-quick-row .popular-searches{
        margin:0 !important;
    }

    body .hero-v2-quick-row .hero-benefits{
        margin:0 !important;
        gap:7px !important;
    }
}


/* ============================================================
   30. KIAZOLUA - HEROS INTERNOS COM IDENTIDADE DA MARCA
   ------------------------------------------------------------
   IMPORTANTE:
   - NÃO altera .hero-v2 da homepage;
   - aplica fundo institucional aos heros internos;
   - mantém títulos e textos com alto contraste;
   - usa as variáveis oficiais já existentes neste style.css.
   ============================================================ */


/* ============================================================
   30.1 FUNDO BASE
   ============================================================ */

section[class*="hero"]:not(.hero-v2),
.profile-intro{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 9% 10%,
            rgba(18,148,71,.11) 0,
            rgba(18,148,71,.05) 18%,
            transparent 37%
        ),
        radial-gradient(
            circle at 91% 8%,
            rgba(255,157,26,.15) 0,
            rgba(255,157,26,.055) 20%,
            transparent 39%
        ),
        linear-gradient(
            135deg,
            #EDF5FB 0%,
            #F2F8F5 49%,
            #FFF8EE 100%
        ) !important;

    border-bottom:
        1px solid rgba(11,43,77,.10) !important;
}


/* Conteúdo sempre acima da decoração */

section[class*="hero"]:not(.hero-v2) > *,
.profile-intro > *{
    position:relative;
    z-index:2;
}


/* ============================================================
   30.2 DECORAÇÃO SUAVE
   ============================================================ */

section[class*="hero"]:not(.hero-v2)::before,
.profile-intro::before{
    content:"";

    position:absolute;
    z-index:0;

    width:320px;
    height:320px;

    top:-215px;
    right:12%;

    border-radius:50%;

    border:
        1px solid rgba(11,43,77,.06);

    background:
        rgba(255,255,255,.18);

    pointer-events:none;
}


section[class*="hero"]:not(.hero-v2)::after,
.profile-intro::after{
    content:"";

    position:absolute;
    z-index:0;

    width:190px;
    height:190px;

    bottom:-135px;
    left:5%;

    border-radius:50%;

    border:
        28px solid rgba(18,148,71,.04);

    pointer-events:none;
}


/* ============================================================
   30.3 TÍTULOS E TEXTOS
   ============================================================ */

.professionals-hero h1,
.categories-hero h1,
.faq-hero-copy h1,
.profile-intro-copy h1,
section[class*="hero"]:not(.hero-v2) > .container h1{
    color:var(--navy) !important;
}


.professionals-hero p,
.categories-hero-copy > p,
.faq-hero-copy > p,
.profile-intro-copy > p{
    color:#52657A !important;
}


.professionals-hero .section-label,
.categories-hero .section-label,
.faq-hero .section-label,
.profile-intro .section-label{
    color:var(--green-dark) !important;
}


/* ============================================================
   30.4 HERO PROFISSIONAIS
   ============================================================ */

.professionals-hero{
    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(18,148,71,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 8% 80%,
            rgba(255,157,26,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #EDF5FB 0%,
            #F0F8F4 100%
        ) !important;
}


/* ============================================================
   30.5 HERO CATEGORIAS
   ============================================================ */

.categories-hero{
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(255,157,26,.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(18,148,71,.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #EDF5FB 0%,
            #FFF8ED 100%
        ) !important;
}


/* ============================================================
   30.6 HERO FAQ / CENTRO DE AJUDA
   ============================================================ */

.faq-hero{
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(18,148,71,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(255,157,26,.14),
            transparent 32%
        ),
        linear-gradient(
            140deg,
            #EDF5FB 0%,
            #F5F9F7 55%,
            #FFF8EE 100%
        ) !important;
}


/* Mantém pesquisa e cartão do FAQ acima da decoração */

.categories-search,
.professionals-hero form,
.faq-search,
.faq-hero-card{
    position:relative;
    z-index:3;
}


/* ============================================================
   30.7 PERFIL PÚBLICO
   .profile-intro funciona como hero da página.
   ============================================================ */

.profile-intro{
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(255,157,26,.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 65%,
            rgba(18,148,71,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #EFF6FB 0%,
            #F3F8F5 100%
        ) !important;
}


.profile-intro .breadcrumb{
    position:relative;
    z-index:3;
}


.profile-intro .breadcrumb a{
    color:#36536D;
}


.profile-intro .breadcrumb span{
    color:#718295;
}


/* ============================================================
   30.8 CAMPOS E ELEMENTOS DENTRO DOS HEROS
   ============================================================ */

section[class*="hero"]:not(.hero-v2) input,
section[class*="hero"]:not(.hero-v2) select,
section[class*="hero"]:not(.hero-v2) textarea{
    color:var(--ink);
}


/* ============================================================
   30.9 MOBILE
   ============================================================ */

@media(max-width:760px){

    section[class*="hero"]:not(.hero-v2),
    .profile-intro{
        background:
            radial-gradient(
                circle at 94% 4%,
                rgba(255,157,26,.12),
                transparent 30%
            ),
            radial-gradient(
                circle at 5% 90%,
                rgba(18,148,71,.08),
                transparent 28%
            ),
            linear-gradient(
                150deg,
                #EDF5FB 0%,
                #F6F9F5 100%
            ) !important;
    }


    section[class*="hero"]:not(.hero-v2)::before,
    .profile-intro::before{
        width:210px;
        height:210px;

        top:-155px;
        right:-45px;
    }


    section[class*="hero"]:not(.hero-v2)::after,
    .profile-intro::after{
        width:130px;
        height:130px;

        bottom:-100px;
        left:-35px;

        border-width:20px;
    }
}


/* ============================================================
   30.10 ACESSIBILIDADE / CONTRASTE AUMENTADO
   ============================================================ */

@media(prefers-contrast:more){

    section[class*="hero"]:not(.hero-v2),
    .profile-intro{
        background:#EEF5F8 !important;
    }


    .professionals-hero p,
    .categories-hero-copy > p,
    .faq-hero-copy > p,
    .profile-intro-copy > p{
        color:#334E68 !important;
    }
}


/* ============================================================
   FIM - HEROS INTERNOS KIAZOLUA
   ============================================================ */