/* =========================================================
   SERMAR — PÁGINAS INTERNAS
   Base limpa e padronizada com a Home
========================================================= */

.inner-page{
    font-size:16px;
    line-height:1.65;
    color:#142635;
}

.inner-page main{
    padding-bottom:0;
}

.page-wrap{
    width:min(1200px,86%);
    margin-inline:auto;
}

.inner-page .header nav{
    padding-left:0;
    gap:28px;
}

.inner-page .header-inner{
    justify-content:space-between;
}


/* =========================================================
   HERO INTERNO
========================================================= */

.page-hero{
    position:relative;
    min-height:570px;
    display:flex;
    align-items:flex-end;
    padding:170px 0 80px;
    overflow:hidden;
    background:#031627;
    color:#fff;
}

.page-hero > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:60% 48%;
}

.page-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(2,17,32,.96) 0%,
            rgba(2,17,32,.55) 60%,
            rgba(2,17,32,.18) 100%
        );
}

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

.breadcrumb{
    margin-bottom:28px !important;
    font-size:13px !important;
    color:#d1dbe3;
}

.breadcrumb a{
    text-decoration:underline;
    text-underline-offset:4px;
}

.page-hero h1{
    margin:0 0 24px;
    font-size:clamp(38px,4.7vw,70px);
    line-height:1.08;
    letter-spacing:-2px;
    font-weight:500;
}

.page-hero p{
    max-width:580px;
    font-size:17px;
    line-height:1.6;
}


/* =========================================================
   SEÇÕES INTERNAS
========================================================= */

.page-section{
    padding-block:85px;
}

.inner-page h2{
    margin-bottom:24px;
    font-size:clamp(28px,3vw,43px);
    line-height:1.15;
    letter-spacing:-1.2px;
    font-weight:500;
}

.inner-page h3{
    margin-bottom:15px;
    font-size:23px;
    line-height:1.2;
    font-weight:500;
}

.inner-page .eyebrow{
    margin-bottom:20px;
    font-size:11px;
    letter-spacing:1px;
    color:#df2836;
}

.inner-page p{
    margin-bottom:20px;
}


/* =========================================================
   LAYOUT SPLIT
   Imagem à esquerda + conteúdo à direita
========================================================= */

.split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:70px;
    align-items:center;
}

.editorial-photo{
    width:100%;
    height:470px;
    object-fit:cover;
    border-radius:18px;
}

.page-section.split > div{
    width:100%;
    max-width:560px;
}

.page-section.split > div h2{
    width:100%;
    max-width:560px;
    font-size:clamp(30px,2.4vw,36px);
    line-height:1.10;
    text-wrap:balance;
}

.page-section.split > div p:not(.eyebrow){
    width:100%;
    max-width:560px;

    text-align:justify;
    text-justify:inter-word;
    text-wrap:pretty;
    hyphens:none;
}


/* =========================================================
   CARDS
========================================================= */

.detail-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    margin-top:42px;
}

.detail-card{
    padding:36px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 35px rgba(3,22,39,.04);
}

.card-number{
    display:block;
    margin-bottom:28px;
    color:#e72d3b;
    font-size:13px;
}

.detail-card p{
    margin:0;
    color:#526370;
    font-size:15px;

    text-align:justify;
    text-justify:inter-word;
    text-wrap:pretty;
    hyphens:auto;
}


/* =========================================================
   BOTÕES
========================================================= */

.inner-page .btn{
    min-height:48px;
    padding:15px 23px;
    gap:20px;
    font-size:14px;
}

.inner-page .text-button{
    font-size:15px;
}


/* =========================================================
   CTA INTERNO
========================================================= */

.inner-cta{
    position:relative;
    padding:90px 0;
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(
            90deg,
            rgba(3,22,39,.94) 0%,
            rgba(3,22,39,.72) 45%,
            rgba(3,22,39,.42) 100%
        ),
        url("assets/cta-interna.jpg") center center / cover no-repeat;
}

.inner-cta .page-wrap{
    position:relative;
    z-index:2;
}

.inner-cta h2{
    max-width:600px;
}

.inner-cta p{
    max-width:520px;
    color:#d9e1ea;
}


/* =========================================================
   PÁGINA GERAL DE SERVIÇOS
========================================================= */

.service-details{
    display:grid;
    gap:32px;
    margin-top:55px;
}

.service-detail{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    overflow:hidden;
    background:#fff;
    border-radius:18px;
}

.service-detail > img{
    width:100%;
    height:100%;
    min-height:380px;
    object-fit:cover;
}

.service-detail > div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:40px;
}

.service-detail h2{
    width:100%;
    max-width:520px;
    font-size:30px;
    line-height:1.10;
    text-wrap:balance;
}

.service-detail > div p:not(.eyebrow),
.service-detail > div .service-notes{
    width:100%;
    max-width:520px;

    text-align:justify;
    text-justify:inter-word;
    text-wrap:pretty;
    hyphens:none;
}

.service-notes{
    font-size:13px;
    color:#667680;
}


/* =========================================================
   CONTATO
========================================================= */

.contact-layout{
    align-items:start;
}

.contact-number{
    display:inline-block;
    margin:12px 0;
    font-size:clamp(23px,2.5vw,34px);
    color:#df2836;
}

.contact-photo{
    width:100%;
    height:220px;
    margin-top:24px;
    object-fit:cover;
    border-radius:15px;
}

.contact-panel{
    padding:42px;
    background:#fff;
    border-radius:18px;
}

.contact-panel h2{
    font-size:32px;
}

.contact-checklist{
    margin-top:32px;
    padding-top:26px;
    border-top:1px solid #e0e5e8;
}

.contact-checklist ul{
    padding-left:20px;
    list-style:disc;
}

.contact-checklist li{
    margin:10px 0;
}


/* =========================================================
   DIALOGS
========================================================= */

.inner-page .dialog{
    font-size:16px;
}

.inner-page .dialog h2{
    font-size:30px;
}

.inner-page .footer p{
    margin-bottom:20px;
}



/* =========================================================
   EXCEÇÕES — textos curtos permanecem alinhados à esquerda
========================================================= */

.detail-card p,
.contact-panel p,
.inner-cta p,
.inner-page .dialog p,
.inner-page .footer p{
    text-align:justify;
    hyphens:none;
}

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

@media(max-width:900px){

    .page-wrap{
        width:90%;
    }

    .inner-page .header nav{
        gap:0;
        padding:22px;
    }

    .page-hero{
        min-height:520px;
        padding-top:150px;
    }

    .split{
        gap:36px;
    }

    .page-section.split > div{
        max-width:none;
    }

    .page-section.split > div h2,
    .page-section.split > div p:not(.eyebrow){
        max-width:none;
    }

    .page-section.split > div h2{
        font-size:32px;
    }

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

    .page-section{
        padding-block:55px;
    }

    .service-detail > div{
        padding:28px;
    }

    .service-detail h2,
    .service-detail > div p:not(.eyebrow),
    .service-detail > div .service-notes{
        max-width:none;
    }

    .editorial-photo{
        height:380px;
    }

    .contact-panel{
        padding:28px;
    }
}


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

@media(max-width:600px){

    .page-wrap{
        width:88%;
    }

    .page-hero{
        min-height:500px;
        padding:140px 0 55px;
    }

    .page-hero h1{
        font-size:38px;
        line-height:1.08;
        letter-spacing:-1.3px;
    }

    .page-hero p{
        font-size:15px;
    }

    .split,
    .detail-grid,
    .service-detail{
        grid-template-columns:1fr;
    }

    .split{
        gap:32px;
    }

    .page-section.split > div{
        width:100%;
        max-width:none;
    }

    .page-section.split > div h2{
        width:100%;
        max-width:none;
        font-size:28px;
        line-height:1.12;
        text-wrap:pretty;
    }

    .page-section.split > div p:not(.eyebrow){
        width:100%;
        max-width:none;
        text-align:left;
        hyphens:none;
    }

    .detail-card{
        padding:28px;
    }

    .service-detail > img{
        min-height:0;
        height:240px;
    }

    .service-detail > div{
        padding:28px 24px;
    }

    .service-detail h2,
    .service-detail > div p:not(.eyebrow),
    .service-detail > div .service-notes{
        width:100%;
        max-width:none;
    }

    .service-detail > div p:not(.eyebrow),
    .service-detail > div .service-notes{
        text-align:left;
        hyphens:none;
    }

    .editorial-photo{
        height:310px;
    }

    .page-section{
        padding-block:45px;
    }

    .inner-cta{
        padding-block:55px;
    }

    .inner-page .header .btn{
        padding:10px;
        font-size:12px;
    }

    .inner-page .header nav{
        padding:24px;
    }

    .contact-panel{
        padding:25px;
    }

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

    .contact-number{
        font-size:26px;
    }
}