/********** Template CSS **********/
:root {
    --primary: #1e4be0;
    --light: #F0F4FC;
    --dark: #0F2340;
}

/* 2026-10-17: o modelo pinta o fundo de --light e põe a página numa caixa branca de 1320 px. O hero novo (css/hero.css) sai
   da caixa e vai de borda a borda; com o fundo claro sobrava uma "orelha" cinza dos dois lados da barra e abaixo do hero.
   Decisão do Franco (16/10): "tirar a margem e deixar tudo da mesma cor" — fundo branco, caixa e laterais iguais. */
body {
    background: #fff;
    /* o cinza do modelo (#74787C) dá contraste 4,45 no branco, abaixo do 4,5 do Lighthouse */
    color: #6C7075 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}


/*** Heading ***/
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    /* Papelaria Avenida (2026-10-16): título formal em Inter; a cursiva Lobster Two fica só no `.font-secondary`
       (a palavra "Papelaria" da marca e o toque lúdico da seção escolar), como no letreiro da loja */
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

h5,
h6,
.h5,
.h6 {
    font-weight: 600;
}

.font-secondary {
    font-family: 'Lobster Two', cursive;
}


/*** Navbar ***/
.navbar .navbar-nav .nav-link {
    padding: 30px 15px;
    color: var(--dark);
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 5px;
    transition: .5s;
}

.navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        margin-top: 15px;
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        top: calc(100% - 15px);
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
        
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
/* Papelaria Avenida: as bordas onduladas do modelo ficam (decisão do Franco em 16/10, depois de ver sem) */
.header-carousel::before,
.header-carousel::after,
.hero-static::before,
.hero-static::after,
.page-header::before,
.page-header::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    top: 0;
    left: 0;
    background: url(../img/bg-header-top.png) center center repeat-x;
    z-index: 1;
}

.header-carousel::after,
.hero-static::after,
.page-header::after {
    height: 19px;
    top: auto;
    bottom: 0;
    background: url(../img/bg-header-bottom.png) center center repeat-x;
}

/* altura fixa em toda largura: as fotos do banco livre não têm a mesma proporção, e sem isto o carrossel "pula" */
.header-carousel .owl-carousel-item {
    position: relative;
    height: 72vh;
    min-height: 480px;
    max-height: 760px;
}

.header-carousel .owl-carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .header-carousel .owl-carousel-item h1,
    .header-carousel .owl-carousel-item h2 {
        font-size: 30px;
        font-weight: 600;
    }
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 45px;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../img/hero-1.webp) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .5);
}


/*** Facility ***/
.facility-item .facility-icon {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.facility-item .facility-icon::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .9);
    transition: .5s;
    z-index: 1;
}

.facility-item .facility-icon span {
    position: absolute;
    content: "";
    width: 15px;
    height: 30px;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.facility-item .facility-icon span:last-child {
    left: auto;
    right: 0;
}

.facility-item .facility-icon i {
    position: relative;
    z-index: 2;
}

.facility-item .facility-text {
    position: relative;
    min-height: 250px;
    padding: 30px;
    border-radius: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}

.facility-item .facility-text::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .9);
    transition: .5s;
    z-index: 1;
}

.facility-item .facility-text * {
    position: relative;
    z-index: 2;
}

.facility-item:hover .facility-icon::before,
.facility-item:hover .facility-text::before {
    background: transparent;
}

.facility-item * {
    transition: .5s;
}

.facility-item:hover * {
    color: #FFFFFF !important;
}



/* 2026-10-17: o site é ponta a ponta. A caixa branca de 1320 px do modelo (.container-xxl.bg-white.p-0) deixa de limitar
   a largura: barra, hero e rodapé vão de borda a borda; o CONTEÚDO continua em 1320 pelos .container de cada seção. */
.container-xxl.bg-white.p-0 {
    max-width: none;
}

/* barra: conteúdo centrado em 1320 (o <nav> agora tem um .container-xxl por dentro) e, no lugar da sombra reta,
   a borda ondulada do site "comendo" o que passa por baixo (pedido do Franco, 17/10) */
.navbar.sticky-top {
    position: sticky;
}

.navbar.sticky-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
    background: url(../img/bg-header-top.png) center center repeat-x;
    pointer-events: none;
}

.navbar.sticky-top.shadow-sm {
    box-shadow: none !important;
    filter: drop-shadow(0 3px 5px rgba(15, 35, 64, .12));
}

/* categorias: cartão arredondado em TODAS as larguras (o oval do modelo ficava "inchado" no desktop — Franco, 17/10);
   ícone encaixado no topo, quatro cartões da mesma altura */
.facility-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.facility-item .facility-icon {
    width: 84px;
    height: 84px;
    margin-bottom: -42px;
    position: relative;
    z-index: 3;
}

.facility-item .facility-icon span {
    display: none;
}

.facility-item .facility-icon i {
    font-size: 2.2em;
}

.facility-item .facility-text {
    flex: 1;
    border-radius: 1.25rem;
    min-height: 0;
    padding: 60px 22px 28px;
    justify-content: flex-start;
}

.facility-item .facility-text h3 {
    font-size: 1.35rem;
}

.facility-item .facility-text p {
    font-size: 15px;
}

/* 2026-10-29 (print do Franco): o véu branco do ícone era QUADRADO e vazava pelos cantos da bola, deixando um branco
   entre a bola e o cartão. Agora a bola é um selo redondo com aro branco; o cartão virou link e, no hover, sobe com
   sombra em vez de pintar tudo de cor cheia com texto branco (no amarelo e no ciano o título sumia). */
a.facility-item {
    text-decoration: none;
    transition: transform .3s ease;
}

.facility-item .facility-icon {
    border: 6px solid #FFFFFF;
    box-sizing: content-box;
    box-shadow: 0 6px 16px rgba(15, 35, 64, .10);
}

.facility-item .facility-icon::before {
    border-radius: 50%;
}

.facility-item .facility-text {
    transition: box-shadow .3s ease;
}

.facility-item:hover {
    transform: translateY(-6px);
}

.facility-item:hover .facility-text {
    box-shadow: 0 16px 32px rgba(15, 35, 64, .12);
}

.facility-item:hover .facility-text::before {
    background: rgba(255, 255, 255, .9);
}

.facility-item .facility-text::before {
    border-radius: inherit;
}

.facility-item:hover .facility-text p {
    color: #6C7075 !important;
}

.facility-item:hover .facility-text h3.text-primary { color: var(--primary) !important; }
.facility-item:hover .facility-text h3.text-success { color: #198754 !important; }

.facility-item .facility-text p {
    color: #6C7075;
}

/* amarelo e ciano do Bootstrap não têm contraste no fundo claro: título num tom escuro da mesma cor */
.facility-item .facility-text h3.text-warning,
.facility-item:hover .facility-text h3.text-warning {
    color: #A16207 !important;
}

.facility-item .facility-text h3.text-info,
.facility-item:hover .facility-text h3.text-info {
    color: #0E7490 !important;
}

/* tom claro pintado DIRETO (2º print do Franco, 29/10): o modelo fazia a cor clara com um véu branco 90% sobre a cor forte,
   e na curva da borda o anti-aliasing deixava 1 px da cor forte escapar ("rebarba"). Os valores são a mesma mistura
   (10% da cor + 90% branco), então o visual não muda; o véu sai. */
.facility-item .facility-icon::before,
.facility-item .facility-text::before {
    display: none;
}

.facility-item .facility-icon.bg-primary, .facility-item .facility-text.bg-primary { background-color: #E9EDFC !important; }
.facility-item .facility-icon.bg-success, .facility-item .facility-text.bg-success { background-color: #E8F3EE !important; }
.facility-item .facility-icon.bg-warning, .facility-item .facility-text.bg-warning { background-color: #FFF9E6 !important; }
.facility-item .facility-icon.bg-info, .facility-item .facility-text.bg-info { background-color: #E7FAFE !important; }

.facility-item:hover .facility-icon.bg-primary { background-color: var(--primary) !important; }
.facility-item:hover .facility-icon.bg-success { background-color: #198754 !important; }

/* selo cheio no hover: amarelo e ciano puros deixam o ícone branco apagado */
.facility-item:hover .facility-icon.bg-warning { background-color: #D97706 !important; }
.facility-item:hover .facility-icon.bg-info { background-color: #0891B2 !important; }

@media (prefers-reduced-motion: reduce) {
    .facility-item:hover {
        transform: none;
    }
}

/*** About ***/
.about-img img {
    transition: .5s;
}

.about-img img:hover {
    background: var(--primary) !important;
}


/*** Classes ***/
/* o modelo subia o cartão com margin-top: -10px, que MEXE no layout: no cartão mais alto da fileira (título em 2 linhas)
   a fileira encolhia e tudo abaixo subia junto (print do Franco, 29/10). transform só desloca o desenho. */
.classes-item {
    transition: transform .4s ease;
}

.classes-item:hover {
    transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
    .classes-item:hover {
        transform: none;
    }
}


/*** Team ***/
.team-item .team-text {
    position: absolute;
    width: 250px;
    height: 250px;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #FFFFFF;
    border: 17px solid var(--light);
    border-radius: 250px;
    transition: .5s;
}

.team-item:hover .team-text {
    border-color: var(--primary);
}


/*** Testimonial ***/
.testimonial-carousel {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 576px) {
    .testimonial-carousel {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.testimonial-carousel .testimonial-item .border {
    border: 1px dashed rgba(0, 185, 142, .3) !important;
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 100%;
    height: 45px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 45px;
    font-size: 20px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--dark);
}


/*** Footer ***/
.footer .btn.btn-social {
    margin-right: 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 45px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    border-color: var(--primary);
    background: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    font-size: 16px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary) !important;
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .form-control {
    border-color: rgba(255,255,255,0.5);
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: #FFFFFF;
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .copyright a:hover,
.footer .footer-menu a:hover {
    color: var(--primary) !important;
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}


/*** Papelaria Avenida — acréscimos (2026-10-16) ***/
/* botão flutuante do WhatsApp (o canal de pedido da loja); o "voltar ao topo" do modelo fica à direita, este à esquerda */
.whatsapp-float {
    position: fixed;
    left: 25px;
    bottom: 25px;
    z-index: 99;
    width: 58px;
    height: 58px;
    border-radius: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #25D366;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    font-size: 30px;
    transition: .3s;
}

.whatsapp-float:hover {
    color: #FFFFFF;
    transform: scale(1.08);
}

/* cards de serviço: o modelo tinha professor, preço e idade; aqui é descrição + link, com o mesmo "sobe no hover" */
.service-item .service-text {
    min-height: 190px;
}

/* cartões da mesma fileira com a mesma altura (o de título em 2 linhas ficava mais comprido que os vizinhos) */
.service-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-item .service-text {
    flex: 1;
}

/* faixa "volta às aulas": o único trecho de propósito lúdico (fundo claro, título na cursiva da marca) */
.school-band {
    background: var(--light);
    border-radius: 1rem;
}

/* mapa incorporado: ocupa o bloco inteiro, sem borda */
.map-embed {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
    border-radius: .5rem;
}

/* foto redonda só fica redonda se for quadrada: as fotos do banco livre têm proporções variadas, então o corte
   é forçado aqui (sem isto a "Encadernação", em retrato, descia o card inteiro e o "Sobre" virava elipse) */
.service-item img.rounded-circle,
.about-img img.rounded-circle {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* trilha (breadcrumb) sobre foto: o link em azul sumia; branco com leve transparência, como o texto ao lado */
.page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, .8);
}

.page-header .breadcrumb-item a:hover {
    color: #FFFFFF;
}

/* aviso de cookies (js/analytics.js injeta; só aparece quando há ID do GA4): Aceitar e Recusar com o mesmo peso visual */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    padding: 14px 20px;
    background: #FFFFFF;
    color: var(--dark);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
    font-size: 15px;
}

.cookie-banner__text {
    margin: 0;
    max-width: 640px;
}

.cookie-banner__actions {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    min-width: 110px;
    padding: 8px 18px;
    border: 2px solid var(--primary);
    border-radius: 50px;
    background: #FFFFFF;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
    background: var(--primary);
    color: #FFFFFF;
}


/*** Celular (até 575px) — Papelaria Avenida, 2026-10-16 ***/
/* O modelo foi desenhado para desktop; no celular a marca quebrava em duas linhas, o hero cortava os botões,
   os cards de categoria viravam ovais gigantes e a galeria do rodapé desalinhava com foto em retrato. */
.footer .row.g-2 img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-brand h1,
    .navbar-brand .h1 {
        font-size: 1.35rem;
    }

    .navbar-brand .fa {
        font-size: 1.15rem;
        margin-right: .5rem !important;
    }

    .navbar-toggler {
        padding: 4px 8px;
    }

    .header-carousel .owl-carousel-item {
        height: auto;
        min-height: 620px;
        max-height: none;
    }

    .header-carousel .owl-carousel-item h1 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 1rem !important;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 15px !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0 !important;
    }

    .header-carousel .owl-carousel-item .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px 0 !important;
        padding: 12px 20px;
    }

    .header-carousel .owl-nav {
        right: 3%;
    }

    .header-carousel .owl-nav .owl-prev,
    .header-carousel .owl-nav .owl-next {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    /* categoria: cartão arredondado em vez de oval, ícone encaixado no topo */
    .facility-item .facility-icon {
        width: 80px;
        height: 80px;
        margin-bottom: -40px;
        position: relative;
        z-index: 3;
    }

    .facility-item .facility-icon span {
        display: none;
    }

    .facility-item .facility-text {
        border-radius: 1.25rem;
        min-height: 0;
        padding: 56px 20px 24px;
    }

    .page-header h1 {
        font-size: 2.1rem;
    }

    .page-header .container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .container-xxl.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .display-5 {
        font-size: 2rem;
    }

    .school-band.p-5 {
        padding: 2rem 1.25rem !important;
    }

    .about-img .col-6[style*="margin-top: -150px"] {
        margin-top: -70px !important;
    }

    .whatsapp-float {
        left: 14px;
        bottom: 14px;
        width: 52px;
        height: 52px;
        font-size: 26px;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;
    }
}


/*** Psicologia do design (2026-10-16): prova social no hero, status "aberto agora", barra fixa no celular ***/
.hero-rating {
    font-size: 15px;
    opacity: .95;
}

.hero-rating-stars {
    color: #FFC107;
    letter-spacing: 2px;
    font-size: 17px;
}

.open-status {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    white-space: nowrap;
}

.open-status::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 9px;
    margin-right: 7px;
    background: #9AA3B2;
}

.open-status.is-open::before {
    background: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .2);
}

.open-status.is-closed::before {
    background: #D9534F;
}

.mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    display: flex;
    background: #FFFFFF;
    border-top: 1px solid rgba(15, 35, 64, .1);
    box-shadow: 0 -6px 18px rgba(15, 35, 64, .08);
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 9px 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dark);
    text-decoration: none;
}

.mobile-bar a i {
    font-size: 20px;
    color: var(--primary);
}

.mobile-bar a.mobile-bar-main {
    /* verde escuro: o #25D366 da marca com texto branco dá contraste 1,98 */
    background: #147A3C;
    color: #FFFFFF;
    font-weight: 600;
}

.mobile-bar a.mobile-bar-main i {
    color: #FFFFFF;
}

@media (max-width: 991.98px) {
    /* a barra fixa substitui o botão flutuante e precisa de espaço no fim da página */
    body {
        padding-bottom: 64px;
    }

    .whatsapp-float {
        display: none;
    }

    .back-to-top {
        bottom: 80px;
    }
}


/*** Hero: legibilidade e selos fixos (revisão do Franco, 16/10) ***/
/* gradiente escuro da esquerda (onde está o texto) para a direita (onde a foto respira) — foto cheia de lápis atrapalhava a leitura */
.hero-shade {
    background: linear-gradient(90deg, rgba(15, 35, 64, .84) 0%, rgba(15, 35, 64, .66) 42%, rgba(15, 35, 64, .28) 78%, rgba(15, 35, 64, .18) 100%);
}

.hero-copy h1,
.hero-copy .h1,
.hero-copy p {
    text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

.hero-kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 30px;
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.hero-badges {
    bottom: 52px;
    z-index: 2;
    pointer-events: none;
}

.hero-badges a,
.hero-badges span {
    pointer-events: auto;
}

.hero-badges .hero-rating {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .65);
}

@media (max-width: 575.98px) {
    .hero-shade {
        background: linear-gradient(180deg, rgba(15, 35, 64, .55) 0%, rgba(15, 35, 64, .72) 60%, rgba(15, 35, 64, .85) 100%);
    }

    .header-carousel .owl-carousel-item {
        min-height: 680px;
    }

    .hero-copy {
        padding-bottom: 84px;
    }

    .hero-badges {
        bottom: 40px;
    }

    .hero-badges .hero-rating {
        font-size: 13px;
    }
}


/*** Vitrine "Preços de balcão" (16/10): cards de oferta + faixa de atacado/CNPJ ***/
.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    border-radius: 1.25rem;
    background: #FFFFFF;
    border: 1px solid rgba(30, 75, 224, .12);
    box-shadow: 0 10px 30px rgba(15, 35, 64, .06);
    transition: .3s;
}

.offer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 35, 64, .12);
    border-color: rgba(30, 75, 224, .35);
}

.offer-tag {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 4px 12px;
    border-radius: 30px;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

.offer-tag-light {
    position: static;
    display: inline-block;
    align-self: flex-start;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .4);
}

.offer-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light);
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 18px;
}

.offer-name {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.offer-desc {
    color: #5B6778;
    font-size: 14px;
    margin-bottom: 16px;
}

.offer-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.offer-price small {
    width: 100%;
    color: #5B6778;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.offer-price strong {
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    color: var(--primary);
    line-height: 1;
}

.offer-price span {
    color: #5B6778;
    font-size: 14px;
}

.offer-price-ask strong {
    font-size: 1.25rem;
    color: var(--dark);
}

.offer-wholesale {
    padding: 36px 32px;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--primary) 0%, #0F2340 100%);
    color: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 40px rgba(30, 75, 224, .25);
}

.offer-wholesale-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offer-wholesale-list li {
    margin-bottom: 6px;
}

.offer-wholesale-list li i {
    color: #25D366;
    margin-right: 10px;
}

@media (max-width: 575.98px) {
    .offer-wholesale {
        padding: 26px 20px;
    }
}


/*** Pedido com arquivo (16/10): anexo, estado de envio e resultado com código ***/
.order-file {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 58px;
    padding: 12px 16px;
    border: 2px dashed rgba(30, 75, 224, .35);
    border-radius: .5rem;
    background: #FFFFFF;
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
    transition: .3s;
}

.order-file:hover,
.order-file.has-file {
    border-style: solid;
    border-color: var(--primary);
    background: var(--light);
}

.order-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-done {
    text-align: center;
}

.order-done-code {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 28px;
    border-radius: 1rem;
    background: #FFFFFF;
    border: 2px solid var(--primary);
}

.order-done-code small {
    color: #5B6778;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
}

.order-done-code strong {
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: .06em;
    line-height: 1.1;
}


/*** Menu com 5 itens + status + telefone: nada quebra linha (16/10) ***/
@media (min-width: 992px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 11px;
        padding-right: 11px;
        white-space: nowrap;
    }

    .navbar .btn,
    .open-status {
        white-space: nowrap;
    }

    .open-status {
        font-size: 13px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand h1,
    .navbar-brand .h1 {
        font-size: 1.5rem;
    }

    .open-status {
        display: none !important;
    }
}

/* rótulo flutuante nunca quebra linha dentro do campo (o "Seu WhatsApp (para a loja responder)" desalinhava) */
.form-floating > label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/*** 16/10, última rodada: hero fixo, faixa de personalizados, chip escuro ***/
.hero-static .hero-item {
    position: relative;
    height: 72vh;
    min-height: 480px;
    max-height: 760px;
}

.hero-static .hero-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-band {
    border-radius: 1.25rem;
    background: #FFFFFF;
    border: 1px solid rgba(30, 75, 224, .12);
    box-shadow: 0 10px 30px rgba(15, 35, 64, .06);
}

.offer-tag-dark {
    position: static;
    display: inline-block;
}

.offer-wholesale .rounded-start {
    border-top-left-radius: 1.25rem !important;
    border-bottom-left-radius: 1.25rem !important;
}

@media (max-width: 991.98px) {
    .offer-wholesale .rounded-start {
        border-radius: 1.25rem 1.25rem 0 0 !important;
    }
}

@media (max-width: 575.98px) {
    .hero-static .hero-item {
        height: auto;
        min-height: 640px;
        max-height: none;
    }
}

/* hero fixo no celular: as mesmas regras do carrossel antigo (título menor, botões em pilha de largura inteira) */
@media (max-width: 575.98px) {
    .hero-static .hero-item h1 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 1rem !important;
    }

    .hero-static .hero-item p {
        font-size: 15px !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0 !important;
    }

    .hero-static .hero-item .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px 0 !important;
        padding: 12px 20px;
    }
}