/* ═══════════════════════════════════════════════════════════════════
   6-responsive.css — v7.0.6
   La Chouchoute Compagnie · Abril 2026

   BASEADO EM VARREDURA AO VIVO (Segunda rodada):
   - faq.html: NÃO tem .faq-horizontal-row — já é vertical
   - dc-prices.html / h-prices.html: SEM sidebar lateral
   - services.html: tabs usam âncoras #pills-*, não .nav-tabs Bootstrap
   - about.html: ícone "favorite" renderiza como texto (font issue)
   - contact.html: ambas as tabs têm formulário simples (sem multi-step)

   DEAD CODE REMOVIDO vs. v7.0.5:
   - Regras .faq-horizontal-row (estrutura não existe no HTML)
   - Regras .service_inner_page .service_content .heading (sem sidebar)
   - Regras .contact_sec .nav-tabs (não existem no HTML)
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ≤ 1280px — Notebooks 13" — sidebar compacta
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1280px) {
  /* Sidebar sticky (dc-timeline.html que TEM sidebar) */
  .service_inner_page.inner_page.inner_content .timeline_content .heading {
    width: 26rem;
    min-width: 26rem;
    padding: 3.5rem 1.75rem;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ≤ 1023px — TOGGLE PRINCIPAL desktop → mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1023.98px) {

  /* ── R-01: Reset do scroll horizontal (Locomotive CSS) ──────────── */
  html.has-scroll-smooth,
  .has-scroll-smooth body { overflow: auto !important; }

  [data-scroll-direction="horizontal"] [data-scroll-container] {
    white-space: normal !important;
    height: auto !important;
    display: block !important;
  }

  [data-scroll-direction="horizontal"] [data-scroll-section] {
    display: block !important;
    white-space: normal !important;
    height: auto !important;
    width: 100% !important;
  }

  /* ── Vertical centering for inner pages ──────────────────────────── */
  .inner_page > .container,
  .service_inner_page > .container {
    min-height: calc(100dvh - 80px) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* ── dc-timeline.html: sidebar colapsa (ÚNICA página com sidebar) ── */
  .service_inner_page.inner_page.inner_content .timeline_content .heading {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    position: relative !important;
    padding: 2rem 1.5rem !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
  }

  .service_inner_page.inner_page.inner_content .timeline_content .contents_div {
    padding: 1.5rem 1rem !important;
  }

  /* ── dc-timeline: timeline em coluna ────────────────────────────── */
  .service_inner_page.inner_page.inner_content
  .timeline_content .contents_div .timeline .grid-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .service_inner_page.inner_page.inner_content
  .timeline_content .contents_div .timeline .grid-wrapper time {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--clr-surface-border) !important;
    padding-bottom: 1.25rem !important;
  }

  /* ── Gallery offset: zerar ──────────────────────────────────────── */
  body:not(.inner_page) .gallery,
  .inner_page .gallery {
    margin-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── img_wraper: sem margem negativa ────────────────────────── */
  .service_sec .img_wraper, .protfolio_sec .img_wraper,
  .blog_sec .img_wraper, .contact_sec .img_wraper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* ── about.html: ícones de serviço em 2×2 ──────────────────────── */
  .what_wedo_sec .row { flex-wrap: wrap !important; }

  .what_wedo_sec [class*="col-md-3"],
  .what_wedo_sec [class*="col-md-4"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 1.5rem !important;
  }

  /* ── about.html: valores (5 cards) em 2 colunas ────────────────── */
  .about_valores [class*="col-"],
  [class*="valores"] [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 1.5rem !important;
  }

  /* ── Depoimentos: stack vertical ────────────────────────────────── */
  .protfolio_sec .row { flex-direction: column !important; }

  /* ── about content: colunas em stack ───────────────────────────── */
  .about_sec .row,
  .about_content .row { flex-direction: column !important; }

  /* ── mob_back: mostrar em mobile ─────────────────────────────────── */
  .mob_back {
    display: block !important;
    margin-bottom: 1rem !important;
    padding: 0.5rem 1.25rem !important;
  }

  /* ── R-16: Touch targets ≥ 44px ─────────────────────────────────── */
  a, button, [role="button"],
  input[type="submit"], input[type="button"],
  .nav-link, ._btn, ._link { min-height: 44px !important; }

  .top_header nav a,
  .side_menu ul li a {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    display: block !important;
  }

  /* ── Imagens: sem overflow ───────────────────────────────────────── */
  img { max-width: 100% !important; height: auto !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ≤ 768px — Tablets portrait e iPhones grandes
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {

  /* ── Ensure vertical centering on all pages ──────────────── */
  main, .main-content, .page-content {
    min-height: calc(100dvh - 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* ── Blog cards: coluna única ───────────────────────────────────── */
  .blog_sec .row > [class*="col-"],
  .blog_sec [class*="col-md"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  /* ── Depoimentos: coluna única ──────────────────────────────────── */
  .protfolio_sec [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem !important;
  }

  /* ── about.html: ícones serviço 1 coluna em tablet ──────────────── */
  .what_wedo_sec [class*="col-md-3"],
  .what_wedo_sec [class*="col-md-4"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ── about.html: valores (5 cards) 1 coluna em tablet ──────────── */
  .about_valores [class*="col-"],
  [class*="valores"] [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ─�� services-grid-2rows: mantêm 2 colunas em tablet ──────── */
  .services-grid-2rows {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* ── services.html: tabs de âncoras scrolláveis ─────────────────── */
  /* tabs usam #pills-obedience, etc. — não .nav-tabs Bootstrap       */
  .nav.nav-pills,
  [class*="pills-tabs"],
  .services_tabs ul {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.5rem !important;
    gap: 0.5rem !important;
    scrollbar-width: none !important;
  }

  .nav.nav-pills::-webkit-scrollbar,
  .services_tabs ul::-webkit-scrollbar { display: none !important; }

  .nav.nav-pills .nav-link,
  .services_tabs ul li a {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.875rem !important;
  }

  /* Bootstrap nav-tabs também (contact.html usa tabs Bootstrap) */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
  }

  .nav-tabs::-webkit-scrollbar { display: none !important; }

  .nav-tabs .nav-link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.875rem !important;
  }

  /* ── Contact form & map: full width on mobile ─────────────── */
  .contact_sec .col_form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 1rem 0.5rem !important;
  }
  .contact_sec .contact_map {
    width: 100% !important;
    height: 300px !important;
    flex: none !important;
    padding: 1rem !important;
  }
  .contact_sec .contact_map iframe {
    height: 100% !important;
    width: 100% !important;
  }

  /* ── Pricing: 1 coluna (pages sem sidebar) ──────────────────────── */
  .pricing_container {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1rem 0 !important;
    gap: 1.25rem !important;
  }

  .pricing {
    width: calc(100% - 2rem) !important;
    max-width: 400px !important;
  }

  /* Remove scale no highlighted em mobile */
  .pricing_highlighted { transform: none !important; }
  .pricing_highlighted:hover { transform: translateY(-0.25rem) !important; }

  /* ── Service cards: coluna única ────────────────────────────────── */
  .service_sec [class*="col-"],
  .what_wedo_sec [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  /* ── CTAs: largura completa ─────────────────────────────────────── */
  ._btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
  }

  /* ── FAQ: espaçamento ajustado ──────────────────────────────────── */
  /* faq.html é vertical — apenas ajuste de espaços e fonte           */
  .faq_sec h4,
  .faq_sec .faq-question {
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    padding: 0.5rem 0 !important;
  }

  .faq_sec p,
  .faq_sec .faq-answer {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  /* ── Blog article: sem sidebar em mobile ────────────────────────── */
  .blog-article-body [class*="col-md-8"],
  .blog_post [class*="col-md-8"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .blog-article-body [class*="col-md-4"],
  .blog_post [class*="col-md-4"] {
    display: none !important;
  }

  /* Tab scroll indicator */
  .nav-tabs { position: relative; }

  .nav-tabs.has-more-right::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 3rem; height: 100%;
    background: linear-gradient(to right, transparent, var(--clr-surface-low));
    pointer-events: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ≤ 480px — Smartphones padrão
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {

  /* ── iOS zoom fix: font-size ≥ 16px em inputs ─────────────────── */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="number"], select, textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
  }

  .form-group { margin-bottom: 1rem !important; }

  .form-label {
    font-size: 0.875rem !important;
    margin-bottom: 0.375rem !important;
    display: block !important;
  }

  /* Checkboxes de serviço: 2 colunas em phones */
  .form-check-group, .service-checkboxes, .checkboxes-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .form-check { margin-bottom: 0 !important; }

  /* ── Pricing: 1 coluna, max 320px ────────────────────────────────── */
  .pricing {
    width: calc(100% - 2rem) !important;
    max-width: 320px !important;
    border-radius: var(--radius-lg) !important;
  }

  /* ── Tipografia responsiva com clamp() ──────────────────────────── */
  .sec_head h2, .home_div h1 {
    font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  h2 { font-size: clamp(1.25rem, 6vw, 2rem) !important; }
  h3 { font-size: clamp(1rem, 5vw, 1.375rem) !important; }

  .content_div p, .home_div p, .about_content p {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
  }

  .pricing_title { font-size: 2.25rem !important; }

  /* ── about.html: ícones serviço e valores 1 coluna ──────────────── */
  .what_wedo_sec [class*="col-"],
  .about_valores [class*="col-"],
  [class*="valores"] [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  /* ── Breadcrumb: wrap ────────────────────────────────────────────── */
  .breadcrumb ol {
    flex-wrap: wrap !important;
    gap: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* ── Blog: padding mínimo ───────────────────────────────────────── */
  .blog-article-content, .blog_detail_content,
  .blog-article-body [class*="col-md-8"] {
    padding-inline: 1rem !important;
  }

  /* ── Gallery text ───────────────────────────────────────────────── */
  .gallery__text {
    font-size: clamp(3.5rem, 18vw, 7rem) !important;
    margin: 0 5vw !important;
  }

  /* ── Footer touch targets ───────────────────────────────────────── */
  footer a, .footer_menu a {
    display: inline-block !important;
    padding: 0.5rem 0.375rem !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
  }

  /* ── Social icons ───────────────────────────────────────────────── */
  .top_header ul.left li a {
    padding: 0.625rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── FAQ: fonte mínima ──────────────────────────────────────────── */
  .faq_sec h4 { font-size: 0.875rem !important; }
  .faq_sec p { font-size: 0.8125rem !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ≤ 380px — Smartphones compactos
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 380px) {

  /* Padding global mínimo */
  .home_sec .home_div, .about_sec, .service_sec,
  .contact_sec, .blog_sec, .faq_sec {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  /* Tipografia mínima absoluta */
  .sec_head h2 { font-size: clamp(1.125rem, 7vw, 1.625rem) !important; }
  h3 { font-size: 0.9375rem !important; }
  body, p { font-size: 0.875rem !important; line-height: 1.6 !important; }

  /* Pricing 1 coluna estreita */
  .pricing {
    width: 100% !important;
    max-width: 280px !important;
    border-radius: var(--radius-md) !important;
  }

  /* Checkboxes: 1 coluna em phones muito pequenos */
  .form-check-group, .service-checkboxes, .checkboxes-grid {
    grid-template-columns: 1fr !important;
  }

  /* Transições reduzidas em low-end */
  .pricing, ._btn, .wa-float, .back-btn, .scroll_button {
    transition-duration: 0.1s !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   prefers-reduced-motion — Acessibilidade (WCAG 2.3.3)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cursor { display: none !important; }

  .js .loading::after {
    animation: none !important;
    opacity: 0.6 !important;
    transform: scale3d(1.5, 1.5, 1) !important;
  }

  .scroll_button:hover, .wa-float:hover, .back-btn:hover { transform: none !important; }
  .pricing:hover, .pricing_highlighted:hover {
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
  }
}
```

---

## PARTE 5 — AÇÕES PARA O AGENTE (PRIORIDADE)

### Prioridade CRÍTICA — fazer hoje

#### 1. `services.html` — 3 correções simples
```html
<!-- Linha do H2 -->
<h2>Heabilitação Comportamental &amp; Adestramento</h2>
<!-- Corrigir para: -->
<h2>Reabilitação Comportamental &amp; Adestramento</h2>

<!-- Footer (2 ocorrências) -->
© 2025 → © 2026
```

#### 2. `about.html` — Material Icons
Verificar se existe no `<head>`:
```html
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
```
Se não existir ou estiver usando API errada, adicionar. O ícone "favorite" aparece como texto bruto porque a fonte não está carregada nesta seção.

#### 3. `about.html` — Imagens src="" vazias
```html
<!-- Substituir (2 ocorrências) -->
<img src="" alt="Thula, fundadora da La Chouchoute">
<img src="" alt="Cão no espaço Chouchoute">

<!-- Por -->
<img src="assets/image/fake/dog-portrait-400x400.jpg"
     alt="Thula, fundadora da La Chouchoute Compagnie"
     width="400" height="400" loading="lazy">
```

#### 4. `dc-prices.html` — Imagem vazia
```html
<img src="" alt="Cão no DayCare">
<!-- Por -->
<img src="assets/image/fake/service-daycare-800x450.jpg"
     alt="Cães no DayCare da La Chouchoute Compagnie"
     width="800" height="450" loading="lazy">
```

#### 5. `6-responsive.css` — Substituir completamente pela versão da Parte 4
Remove dead code e adiciona seletores corretos baseados na estrutura real.

### Prioridade ALTA — próximo sprint

#### 6. Blog articles — adicionar container
Em cada `blog/*.html`, envolver o conteúdo principal:
```html
<div class="blog-article-content">
  <!-- conteúdo do artigo aqui -->
</div>
```

#### 7. `mobile-additions.js` — simplificar multi-step
A função `setupMultiStepFormValidation` deve rodar apenas no `index.html`. Em `contact.html`, ambas as tabs têm `Enviar` direto (sem multi-step). Ajustar:
```javascript
function setupMultiStepFormValidation() {
  // Só executar se houver botão "Próximo" na página
  var hasMultiStep = !!document.querySelector('[data-next-step], .btn-next');
  var hasProximoButton = !!Array.from(document.querySelectorAll('button'))
    .find(function(b) { return b.textContent.trim() === 'Próximo'; });

  if (!hasMultiStep && !hasProximoButton) return; // Early return
  // ... resto da função
}
```

---

## PARTE 6 — CHECKLIST DE VERIFICAÇÃO (ATUALIZADO)

```bash
# Erros editoriais restantes
grep -n 'Heabilitação' services.html                    # deve retornar vazio
grep -n '© 2025' services.html                          # deve retornar vazio
grep -n 'src=""' about.html dc-prices.html              # deve retornar vazio

# CSS dead code removido
grep 'faq-horizontal-row' assets/css/6-responsive.css   # deve retornar vazio
grep 'service_content .heading' assets/css/6-responsive.css # deve retornar vazio

# Fonte Material Icons presente
grep 'Material+Symbols' about.html                      # deve encontrar o link

# index.html intacto
git diff index.html                                     # deve retornar vazio

# Overflow horizontal (console DevTools em 375px)
# document.body.scrollWidth - window.innerWidth === 0
```

### Script de console definitivo
```javascript
// Rodar em DevTools com viewport 375px
(function audit() {
  var p = window.location.pathname;
  var ox = document.body.scrollWidth - window.innerWidth;
  var noAlt = document.querySelectorAll('img:not([alt])').length;
  var emptySrc = document.querySelectorAll('img[src=""], img:not([src])').length;
  var smallTgts = [].filter.call(
    document.querySelectorAll('a,button,[role=button]'),
    function(el) { var r=el.getBoundingClientRect(); return r.width>4&&r.height<44; }
  ).length;
  var zoomInputs = [].filter.call(
    document.querySelectorAll('input,textarea,select'),
    function(el) { return parseInt(getComputedStyle(el).fontSize)<16; }
  ).length;

  var pass = ox===0 && noAlt===0 && emptySrc===0 && smallTgts===0 && zoomInputs===0;

  console.table({
    'Página': p,
    'Overflow px': ox + (ox===0?' ✅':' ❌'),
    'Imgs sem alt': noAlt + (noAlt===0?' ✅':' ❌'),
    'Imgs src vazio': emptySrc + (emptySrc===0?' ✅':' ❌'),
    'Touch < 44px': smallTgts + (smallTgts===0?' ✅':' ❌'),
    'iOS zoom inputs': zoomInputs + (zoomInputs===0?' ✅':' ❌'),
    'STATUS': pass ? '✅ APROVADO' : '❌ REPROVADO'
  });
})();
```

---

*Auditoria v7.0.6 — La Chouchoute Compagnie — Abril 2026*
*index.html: SOMENTE LEITURA | Agente: MiniMax M2.5*