/* =========================================================
   AMERO - responsive.css
   Media queries (mobile-first, progressivamente maiores)
   Breakpoints Bootstrap 5: sm 576, md 768, lg 992, xl 1200, xxl 1400
   ========================================================= */

/* ---------- >= 576px (sm): smartphones landscape ---------- */
@media (min-width: 576px) {
    .form-wrapper { padding: 2.5rem; }
    .feedback-card .feedback-texto { min-height: 120px; }
}

/* ---------- >= 768px (md): tablets ---------- */
@media (min-width: 768px) {
    .section-padding { padding: 5rem 0; }

    /* Hero maior */
    .hero { min-height: 520px; }
    .hero-content { padding: 4rem 0; }
    .detail-hero { min-height: 520px; }
    .detail-hero-content { max-width: 820px; }
    .detail-hero .container { padding-bottom: 3rem; }

    /* Feature bar: mesmo layout do mobile (grid 3 cols + sobreposicao),
       mas em escala maior para desktop. */
    .features-bar .feature-item {
        min-height: 143px;
        font-size: 1.6rem;
        line-height: 1.25;
        border-radius: 14px;
        padding: 1.5rem 1.25rem;
    }
    /* Card central: sobreposicao maior no desktop. */
    .features-bar .feature-item--featured {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
    .features-bar .feature-item:first-child {
        transform: translateX(0.75rem);
    }
    .features-bar .feature-item:last-child {
        transform: translateX(-0.75rem);
    }

    /* Servicos: seção com padding maior (mesmo da sobre-section) */
    .servicos-carousel-area { padding: 3.5rem 0; }
    .servico-slide {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
        padding: 2rem;
        align-items: center;  /* imagem (altura natural) centralizada com o texto */
    }
    /* Tablet/desktop: imagem ocupa a largura toda da coluna, altura natural —
       grande, sem cortar; alturas podem variar entre os slides. */
    .servico-slide .servico-img { aspect-ratio: auto; }
    .servico-slide .servico-img img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .servico-slide .servico-texto h3 { font-size: 1.8rem; }

    /* Sobre: titulo maior */
    .sobre-section { padding: 5rem 0; }
    .institucional-bloco { padding: 5rem 0; }

    /* MVV: layout mais espacoso */
    .mvv-section { padding: 5rem 0; }
    .mvv-card { padding: 2.5rem; }
    .mvv-card h3 { font-size: 2rem; }
    .mvv-card p { font-size: 1.1rem; }
    .mvv-card .mvv-icon { font-size: 3rem; width: 72px; height: 72px; }
}

/* ---------- >= 992px (lg): desktops ---------- */
@media (min-width: 992px) {
    .section-padding { padding: 6rem 0; }

    /* Hero grande */
    .hero { min-height: 640px; }
    /* Bloco de texto encostado na direita com respiro */
    .hero > .container { max-width: 100%; padding-left: 4rem; padding-right: 0; }
    .hero-content {
        padding: 5rem 0;
        max-width: 700px;        /* cabe "HOME CARE" em 1 linha */
        margin-left: auto;        /* cola na direita */
        padding-right: 2rem;      /* respiro da borda */
    }
    .hero-title { white-space: nowrap; }              /* forca 1 linha */
    .hero-subtitle { max-width: 360px; }              /* quebra na virgula: "CARINHO," / "ATENCAO..." */

    /* Detail hero das paginas internas — mesmo tamanho do .hero do index */
    .detail-hero { min-height: 640px; }
    .detail-hero-content { max-width: 960px; }
    .detail-hero .container { padding-bottom: 3.5rem; }

    /* Conteudo das paginas internas — mesmo padrao das outras secoes */
    .servico-page .servico-content { font-size: 1.2rem; }
    .blog-artigo .artigo-body { font-size: 1.2rem; }

    /* Navbar em lg (992-1199): menu no tamanho natural, empurrado pra direita via ms-auto.
       Em tablets (iPad Pro 1024px) os 6 links nao cabem em 50% — vaza pra fora */
    .main-navbar .navbar-collapse { margin-right: 1rem; }

    /* Sobre: grid 2 colunas */
    .sobre-section { padding: 6rem 0; }
    .sobre-section .section-title { font-size: 3rem; }
    .sobre-section p { font-size: 1.2rem; line-height: 1.7; }

    /* Institucional-bloco: mesmo padrao do Sobre */
    .institucional-bloco { padding: 6rem 0; }
    .institucional-bloco p { font-size: 1.2rem; line-height: 1.7; }

    /* Botao CTA maior + Servicos intro */
    .btn-primary-pill { padding: 1.25rem 3.5rem; font-size: 1.25rem; }
    .cta-area .btn-primary-pill { padding: 1.5rem 4.25rem; font-size: 1.5rem; }
    .servicos-intro .section-title { font-size: 3.5rem; }
    .servicos-intro .section-subtitle { font-size: 1.35rem; }

    /* Padronizacao global lg+: titulo/subtitulo/linha crescem proporcionalmente */
    .section-title { font-size: 3rem; }
    .section-subtitle { font-size: 1.2rem; }
    .section-title-line { width: 440px; }

    /* Servicos: slide com imagem maior e texto a direita */
    .servicos-carousel-area { padding: 4rem 0; }
    .servico-slide { gap: 3rem; padding: 1.25rem 3rem; }
    .servico-slide .servico-texto p,
    .servico-slide .servico-texto .servico-desc,
    .servico-slide .servico-texto .servico-desc p { font-size: 1.2rem; line-height: 1.7; }

    /* Setas dentro do card vinho (.servicos-card e position: relative) */
    .servicos-carousel-area .servicos-btn-prev { left: 0.5rem; }
    .servicos-carousel-area .servicos-btn-next { right: 0.5rem; }
    .servico-slide .servico-texto .btn-outline-white-pill { padding: 1.4rem 4.5rem; font-size: 1.15rem; }

    /* Feedbacks: cards com texto maior */
    .feedback-card .feedback-texto { min-height: 140px; }

    /* MVV: cards com icone a esquerda e titulo ao lado */
    .mvv-section { padding: 6rem 0; }
    .mvv-card h3 { font-size: 2.25rem; }
    .mvv-card p { font-size: 1.2rem; }

    /* Footer: 3 colunas lado a lado */
    .site-footer { padding: 5rem 0 2rem; }
}

/* ---------- >= 1200px (xl): desktops grandes ---------- */
@media (min-width: 1200px) {
    /* Navbar: menu distribuido na metade direita (so em telas xl+ onde cabe) */
    .main-navbar .navbar-collapse {
        flex-grow: 0 !important;
        flex-basis: 50%;
        max-width: 50%;
        margin-left: auto;
        margin-right: 2rem;
    }
    .main-navbar .navbar-nav.ms-auto { margin-left: 0 !important; }

    .hero { min-height: 720px; }
    .hero-title { font-size: 5rem; }
    .hero > .container { padding-right: 0; }
    .hero-content { max-width: 780px; padding-right: 3rem; }
    .hero-subtitle { max-width: 400px; }

    .section-title { font-size: 3.25rem; }
    .section-subtitle { font-size: 1.25rem; }
    .section-title-line { width: 500px; }
    .sobre-section .section-title { font-size: 3.25rem; margin-bottom: 3rem; }
    .sobre-section p { font-size: 1.25rem; }
    .sobre-section .section-title-line { width: 440px; }

    /* Institucional-bloco em xl+ */
    .institucional-bloco p { font-size: 1.25rem; }

    /* MVV em xl+ */
    .mvv-card p { font-size: 1.25rem; }

    /* Detail hero e conteudo das paginas internas em xl+ */
    .detail-hero { min-height: 720px; }
    .detail-hero-content { max-width: 1100px; }
    .servico-page .servico-content { font-size: 1.25rem; }
    .blog-artigo .artigo-body { font-size: 1.25rem; }

    .btn-primary-pill { padding: 1.4rem 4rem; font-size: 1.35rem; }
    .cta-area .btn-primary-pill { padding: 1.7rem 4.75rem; font-size: 1.6rem; }
    .servicos-intro .section-title { font-size: 4rem; }
    .servicos-intro .section-title-line { width: 560px; }
    .servicos-intro .section-subtitle { font-size: 1.4rem; }

    .servicos-carousel-area { padding: 5rem 0; }
    .servico-slide .servico-texto p,
    .servico-slide .servico-texto .servico-desc,
    .servico-slide .servico-texto .servico-desc p { font-size: 1.25rem; }
    .servico-slide .servico-texto .linha { width: 440px; }
    .servicos-carousel-area .servicos-btn-prev { left: 0.75rem; }
    .servicos-carousel-area .servicos-btn-next { right: 0.75rem; }
    .servico-slide .servico-texto .btn-outline-white-pill { padding: 1.5rem 5rem; font-size: 1.25rem; }
}

/* ---------- Ajustes para mobile (<992px) — menu colapsado ---------- */
@media (max-width: 991.98px) {
    /* Logo: zera o margin negativo (calibrado pro desktop) e reduz a altura
       pra caber na MESMA linha do botao do menu, sem empurra-lo pra baixo. */
    .main-navbar .navbar-brand img { margin-left: 0; height: 84px; }
    /* Logo CENTRALIZADA na barra; botao do menu (☰) fixo a direita.
       O toggler vira absoluto pra nao deslocar a logo do centro. */
    .main-navbar .container { position: relative; justify-content: center; }
    .main-navbar .navbar-brand { margin-right: 0; }
    .main-navbar .navbar-toggler {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
    }
    /* Menu mobile como OVERLAY: ao abrir, flutua abaixo da barra (nao empurra o conteudo). */
    .main-navbar { position: relative; z-index: 1030; }
    .main-navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        border-radius: 0 0 12px 12px;
        padding: 0.5rem 1rem 1rem;
    }

    /* Indicador ativo: esconder a barra no menu mobile — em off-canvas
       ela ficaria gigante porque o nav-link ocupa largura total.
       O item ativo ja fica visualmente marcado pela cor primaria */
    .main-navbar .navbar-nav .nav-link.active::after { display: none; }

    /* Carrossel de servicos: sem setas no mobile (swipe + bullets bastam) */
    .servicos-carousel-area .servicos-btn-prev,
    .servicos-carousel-area .servicos-btn-next { display: none; }

    /* Secao institucional: imagem ~40% da altura atual no mobile.
       Imagem e ~quadrada (564x565); com largura cheia, aspect-ratio 5/2
       deixa a altura em ~40% da atual. object-fit cover recorta sem distorcer. */
    .institucional-bloco .sobre-img { aspect-ratio: 5 / 2; }
    .institucional-bloco .sobre-img img { height: 100%; object-fit: cover; object-position: bottom; }
}

/* ---------- Mobile (<md): secao Nossos Servicos ---------- */
@media (max-width: 767.98px) {
    /* 1. Aproxima o card do texto acima (reduz espaco no topo). */
    .servicos-intro { padding-bottom: 1.5rem; }
    .servicos-carousel-area { padding-top: 0.5rem; }

    /* 2. Titulo e texto do card centralizados (desktop continua a esquerda). */
    .servico-slide .servico-texto { text-align: center; }
    .servico-slide .servico-texto p,
    .servico-slide .servico-texto .servico-desc,
    .servico-slide .servico-texto .servico-desc p { text-align: center; }
    .servico-slide .servico-texto .linha { margin-left: auto; margin-right: auto; }

    /* Botao Enviar centralizado no mobile nos forms (desktop = text-end). */
    #contato .text-end,
    #trabalhe-conosco .text-end { text-align: center !important; }

    /* Reduz o espaco entre Feedbacks e a secao institucional no mobile. */
    .feedbacks-section { padding-bottom: 2rem; }
    .institucional-bloco { padding-top: 1.5rem; }

    /* MVV no mobile: textos SEMPRE abertos (sem clique). Respiro entre
       cabecalho e texto. */
    .mvv-card .mvv-header { margin-bottom: 0; }
    .mvv-card .mvv-body { margin-top: 1rem; }

    /* Aproxima o Blog do MVV no mobile (estava muito abaixo do card de Valores) */
    .mvv-section { padding-bottom: 1.5rem; }
    .blog-section { padding-top: 1.5rem; }

    /* Rodape mobile: mapa mais horizontal (paisagem), altura menor, largura toda */
    .site-footer .footer-map { aspect-ratio: 16 / 9; }
    /* Mobile: logo centralizada */
    .site-footer .footer-logo img { display: block; margin-left: auto; margin-right: auto; }
    /* As duas colunas (contato/menu): bloco centralizado na coluna, texto a esquerda dentro */
    .site-footer .footer-info-col { text-align: center; }
    .site-footer .footer-info-col .footer-col-center {
        display: inline-block;
        text-align: left;
    }
    /* Respiro a esquerda na coluna de contato (estava colada na borda) */
    .site-footer .footer-info-col.order-3 { padding-left: 2.5rem; }

    /* Banner: sobe a imagem (mostra a base) */
    .hero { background-position: center 100%; }
    /* Cards de features descem um pouco (menos sobreposicao sobre o hero) */
    .features-bar { margin-top: -2.5rem; }
}

/* ---------- Ajustes para mobile muito pequeno (<=360px) ---------- */
@media (max-width: 360px) {
    .topbar { font-size: 0.8rem; }
    .topbar .social-icons { display: none; }
    .btn-primary-pill { padding: 0.8rem 1.5rem; font-size: 0.95rem; }
    .hero-title { font-size: 2.25rem; }
}

/* ---------- Landscape em celulares baixos (altura <= 480px) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
    .hero { min-height: 360px; }
}