/* ================================================
   FIX 1 — Contraste: seções de fundo claro
   Afeta: "Explore também" e "Como escolher / encaixar"
   ================================================ */

/* "Explore também" */
html body .links-relacionados.ec-internal-link-cluster h1,
html body .links-relacionados.ec-internal-link-cluster h2,
html body .links-relacionados.ec-internal-link-cluster h3 {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
}
html body .links-relacionados.ec-internal-link-cluster p,
html body .links-relacionados.ec-internal-link-cluster li {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
  text-shadow: none !important;
}

/* "Como escolher no cardápio" / "Como encaixar..." */
html body .ec-featured-snippet-ol h1,
html body .ec-featured-snippet-ol h2,
html body .ec-featured-snippet-ol h3 {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
}
html body .ec-featured-snippet-ol p,
html body .ec-featured-snippet-ol .ec-fs-kicker {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
  text-shadow: none !important;
}
html body .ec-featured-snippet-ol li {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
  text-shadow: none !important;
}

/* ================================================
   FIX 2 — Layout: li com strong quebrado em linhas
   ================================================ */

html body .ec-featured-snippet-ol li {
  display: block !important;
  position: relative !important;
  padding-left: 56px !important;
}
html body .ec-featured-snippet-ol li::before {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
html body .ec-featured-snippet-ol li strong {
  display: inline !important;
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
}

/* ================================================
   FIX 3 — Contraste: .guia-card (bg branco)
   ================================================ */

html body main .article-body .guia-card h1,
html body main .article-body .guia-card h2,
html body main .article-body .guia-card h3,
html body main section .guia-card h1,
html body main section .guia-card h2,
html body main section .guia-card h3 {
  color: #0d2a3a !important;
  -webkit-text-fill-color: #0d2a3a !important;
  text-shadow: none !important;
}
html body main .article-body .guia-card p,
html body main .article-body .guia-card li,
html body main section .guia-card p,
html body main section .guia-card li {
  color: #444444 !important;
  -webkit-text-fill-color: #444444 !important;
  text-shadow: none !important;
}
html body main .guia-card .guia-roteiro,
html body main .guia-card .guia-roteiro p,
html body main .guia-card .guia-roteiro span,
html body main .guia-card .guia-roteiro li {
  color: #1a3a2a !important;
  -webkit-text-fill-color: #1a3a2a !important;
  text-shadow: none !important;
}
html body main .guia-card .guia-roteiro strong {
  color: #f59b1e !important;
  -webkit-text-fill-color: #f59b1e !important;
}

/* ================================================
   FASE 3 — Acessibilidade AAA (WCAG 2.2)
   Injetado por apply_fase3_acessibilidade.py
   Data: 2026-06-02
   ================================================ */

/* A-3.1 — Contraste AA/AAA: Cinza secundário
   #7d8386 → #4a4f52 (ratio 6.84:1 sobre branco, 6.01:1 sobre paper) */
:root {
  --ec-gray-secondary: #4a4f52;
  --ec-blue-2-aaa: #1d4f60;
  --ec-gold-aaa: #7a5000;
  --ec-placeholder-aaa: #767676;
}

/* Cinza secundário: textos de suporte, legendas, metadados */
html body .ec-meta,
html body .ec-caption,
html body .ec-label,
html body .ec-kicker,
html body .kicker,
html body .eyebrow:not(.hero-eyebrow):not(.page-eyebrow),
html body .label,
html body .meta,
html body .caption,
html body time,
html body .ec-time,
html body .ec-secondary-text,
html body p.secondary,
html body span.secondary {
  color: #4a4f52 !important;
  -webkit-text-fill-color: #4a4f52 !important;
}
/* Exceção: eyebrow dentro do hero — mantém cor original (branco/dourado sobre foto) */
html body header.hero .eyebrow,
html body header.hero .hero-eyebrow,
html body header.page-hero .eyebrow,
html body header.page-hero .page-eyebrow {
  color: #f59b1e !important;
  -webkit-text-fill-color: #f59b1e !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.70) !important;
}

/* Azul2: links e destaques sobre fundo claro
   #527f8f → #1d4f60 (ratio 7.12:1 sobre branco) */
html body a:not([class*="btn"]):not([class*="button"]):not(.nav-link):not(nav a) {
  color: #1d4f60;
}
html body a:not([class*="btn"]):not([class*="button"]):not(.nav-link):not(nav a):hover {
  color: #00405a;
}

/* Dourado sobre fundo claro: badges, preços, destaques
   #c8a96e → #7a5000 (ratio 7.31:1 sobre branco) */
html body .ec-price-label,
html body .ec-badge,
html body .ec-highlight,
html body .price,
html body .badge {
  color: #7a5000 !important;
  -webkit-text-fill-color: #7a5000 !important;
}

/* Placeholder: inputs
   #9e9e9e → #767676 (ratio 4.54:1 sobre branco — mínimo AA) */
html body input::placeholder,
html body textarea::placeholder,
html body select::placeholder {
  color: #767676 !important;
  opacity: 1 !important;
}

/* A-3.4 — :focus-visible: outline dourado nítido para navegação por teclado */
:focus-visible {
  outline: 3px solid #f59b1e !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 5px rgba(245, 155, 30, 0.25) !important;
}

/* Remover outline padrão apenas quando :focus-visible está disponível */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* Skip link: visível apenas no foco por teclado */
.skip-nav {
  position: absolute !important;
  top: -100px !important;
  left: 16px !important;
  z-index: 9999 !important;
  background: #00405a !important;
  color: #f6efde !important;
  padding: 12px 20px !important;
  border-radius: 0 0 6px 6px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: top 0.15s ease !important;
}
.skip-nav:focus,
.skip-nav:focus-visible {
  top: 0 !important;
  outline: 3px solid #f59b1e !important;
  outline-offset: 2px !important;
}

/* A-3.5 — prefers-reduced-motion: respeitar preferências do sistema */
@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;
  }
  /* Preservar transições de foco para acessibilidade */
  :focus-visible {
    transition: none !important;
  }
}

/* ================================================
   FIX HERO MOBILE — Contraste texto branco sobre fundo creme
   Problema: no mobile (max-width:960px) o overlay escuro do hero
   não é aplicado, deixando texto branco sobre fundo creme (#f5f0d8)
   com ratio de contraste ~1.3:1 (falha WCAG AA).
   Solução: aplicar overlay escuro e text-shadow no hero mobile.
   ================================================ */

/* 1) Header hero mobile: fundo escuro + foto como background */
@media (max-width: 960px) {
  html body header.hero {
    position: relative !important;
    overflow: hidden !important;
    background: #00202e !important;
    min-height: 100svh !important;
    isolation: isolate !important;
  }

  /* Foto do hero: posição absoluta cobrindo todo o header */
  html body header.hero img.hero-photo,
  html body header.hero .hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    z-index: -2 !important;
  }

  /* Overlay escuro: garante contraste WCAG AA mínimo 4.5:1 */
  html body header.hero .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
      linear-gradient(180deg,
        rgba(0, 20, 30, 0.30) 0%,
        rgba(0, 20, 30, 0.50) 40%,
        rgba(0, 20, 30, 0.78) 100%) !important;
  }

  /* Hero-content: posição relativa para ficar sobre o overlay */
  html body header.hero .hero-content {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Texto H1 do hero: branco com text-shadow escuro para máximo contraste */
  html body header.hero h1,
  html body header.hero h1 * {
    color: #f6efde !important;
    -webkit-text-fill-color: #f6efde !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72), 0 1px 6px rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Subtítulo / hero-sub */
  html body header.hero .hero-sub,
  html body header.hero .hero-sub * {
    color: rgba(246, 239, 222, 0.96) !important;
    -webkit-text-fill-color: rgba(246, 239, 222, 0.96) !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65) !important;
    opacity: 1 !important;
  }

  /* Eyebrow / hero-eyebrow */
  html body header.hero .eyebrow,
  html body header.hero .hero-eyebrow {
    color: #f59b1e !important;
    -webkit-text-fill-color: #f59b1e !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.60) !important;
    opacity: 1 !important;
  }

  /* Hero chips: fundo semi-transparente escuro para legibilidade */
  html body header.hero .hero-chips span {
    background: rgba(0, 20, 30, 0.55) !important;
    border-color: rgba(246, 239, 222, 0.35) !important;
    color: #f6efde !important;
    -webkit-text-fill-color: #f6efde !important;
  }

  /* Bottom bar de fatos */
  html body header.hero .hero-bottom-bar,
  html body header.hero .fato-item-hero,
  html body header.hero .fato-num-hero,
  html body header.hero .fato-label-hero {
    color: #f6efde !important;
    -webkit-text-fill-color: #f6efde !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) !important;
  }
}

/* ================================================
   FIX BADGES — Contraste texto sobre badges coloridos
   
   Badge dourado #c9a96e + texto branco → ratio 2.24:1 ❌ FALHA
   Fix: texto escuro #2d1a00 → ratio 7.45:1 ✅ WCAG AAA
   
   Badge verde WhatsApp #25D366 + texto branco → ratio 1.98:1 ❌ FALHA
   Fix: texto escuro #062b12 → ratio 7.77:1 ✅ WCAG AAA
   ================================================ */

/* Badge dourado — texto escuro marrom */
[style*="background:#c9a96e"],
[style*="background: #c9a96e"],
.menu-item-badge[style*="background:#c9a96e"],
.menu-item-badge[style*="background: #c9a96e"] {
  color: #2d1a00 !important;
  -webkit-text-fill-color: #2d1a00 !important;
}

/* Badge verde (prêmio Heineken / destaque) — texto escuro verde-escuro
   EXCEÇÃO: .nav-wa-btn (botão WhatsApp da nav) mantém texto branco
   pois é um ícone SVG e não texto legível */
[style*="background:#25D366"]:not(.nav-wa-btn):not(.wa-btn),
[style*="background: #25D366"]:not(.nav-wa-btn):not(.wa-btn) {
  color: #062b12 !important;
  -webkit-text-fill-color: #062b12 !important;
}


/* ================================================
   FIX TABELAS — Contraste td/th em seções de fundo claro
   
   PROBLEMA: html body main { color: rgba(237,226,201,.90) } (texto creme)
   afeta td e th que não têm color explícito, tornando-os invisíveis
   sobre fundos brancos/creme das tabelas em .ec-r2d2-depth e .light-section.
   
   Contraste antes: ~1.29:1 ❌ FALHA WCAG
   Contraste depois: cinza #485156 sobre branco = 8.12:1 ✅ WCAG AAA
   ================================================ */

/* Tabelas dentro de seções claras — forçar texto escuro legível */
html body main :where(
  .ec-r2d2-depth,
  .ec-sprint4-faq,
  .ec-sprint4-steps,
  .light-section,
  .paper-section,
  .section-paper,
  .bg-paper,
  .access-direct,
  .access-section,
  .access-faq,
  .menu-section,
  .ec-final-geo-answer
) table {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
}

html body main :where(
  .ec-r2d2-depth,
  .ec-sprint4-faq,
  .ec-sprint4-steps,
  .light-section,
  .paper-section,
  .section-paper,
  .bg-paper,
  .access-direct,
  .access-section,
  .access-faq,
  .menu-section,
  .ec-final-geo-answer
) :where(td, th) {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
  text-shadow: none !important;
}

/* Cabeçalho da tabela — azul escuro para maior destaque */
html body main :where(
  .ec-r2d2-depth,
  .ec-sprint4-faq,
  .ec-sprint4-steps,
  .light-section,
  .paper-section,
  .section-paper,
  .bg-paper
) thead :where(th) {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
}

/* Tabelas em seções claras com background inline */
html body main [style*="background:#f6efde"] :where(td, th),
html body main [style*="background: #f6efde"] :where(td, th),
html body main [style*="background:#f5efe6"] :where(td, th),
html body main [style*="background: #f5efe6"] :where(td, th),
html body main [style*="background:#ede2c9"] :where(td, th),
html body main [style*="background: #ede2c9"] :where(td, th),
html body main [style*="background:#f8f4ed"] :where(td, th),
html body main [style*="background: #f8f4ed"] :where(td, th) {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
  text-shadow: none !important;
}

/* ================================================
   FIX CARDS CREME — section#informacoes-essenciais (home PT)
   
   PROBLEMA: ec-visible-text-lock.css sobrescreve --azul1 para #f6efde (creme)
   dentro de section#informacoes-essenciais, que agora tem fundo BRANCO (#fff).
   Os cards internos com background #f8f4ed ficam com texto creme ilegível.
   
   Contraste antes: #f6efde sobre #f8f4ed = ~1.1:1 ❌ FALHA WCAG
   Contraste depois: #00405a sobre #f8f4ed = 10.18:1 ✅ WCAG AAA
   ================================================ */

/* Override da regra do ec-visible-text-lock para a seção de fundo branco */
html body section#informacoes-essenciais[style*="background:#fff"] div,
html body section#informacoes-essenciais[style*="background: #fff"] div,
html body section#informacoes-essenciais[style*="background:#fff"] p,
html body section#informacoes-essenciais[style*="background: #fff"] p {
  --azul1: #00405a !important;
  --ec-readable-blue: #00405a !important;
  --ec-vr-paper: #f8f4ed !important;
  --ec-visible-blue: #00405a !important;
}

/* Forçar texto escuro nos cards creme da seção informacoes-essenciais */
html body section#informacoes-essenciais [style*="background:#f8f4ed"],
html body section#informacoes-essenciais [style*="background: #f8f4ed"] {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
}

html body section#informacoes-essenciais [style*="background:#f8f4ed"] div,
html body section#informacoes-essenciais [style*="background: #f8f4ed"] div {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Label (cor cinza #888) — garantir legibilidade */
html body section#informacoes-essenciais [style*="color:#888"],
html body section#informacoes-essenciais [style*="color: #888"] {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
  text-shadow: none !important;
}

/* Valor (cor azul --azul1) — garantir legibilidade */
html body section#informacoes-essenciais [style*="color:var(--azul1"],
html body section#informacoes-essenciais [style*="color: var(--azul1"] {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
}

/* ================================================
   FIX GLOBAL — Qualquer div/span sem class em seção clara
   com texto herdando cor creme de html body main
   ================================================ */

/* Cobertura global para elementos sem class em seções claras */
html body main :where(
  .ec-r2d2-depth,
  .light-section,
  .paper-section,
  .section-paper,
  .bg-paper,
  .access-direct,
  .access-section,
  .access-faq
) > .wrap > div:not([class]),
html body main :where(
  .ec-r2d2-depth,
  .light-section,
  .paper-section,
  .section-paper,
  .bg-paper
) > .wrap > div:not([class]) > div:not([class]) {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
  text-shadow: none !important;
}

/* ================================================
   FIX CRÍTICO — Seção .avaliacoes fora de <main>
   
   CAUSA: body { -webkit-text-fill-color: rgba(237,226,201,.90) !important }
   afeta TODO o body. A seção .avaliacoes está ANTES de <main> na home PT/EN/ES.
   Os blocos do superholistic/ec-stabilization-base cobrem .avaliacoes .sec-head h2
   mas com -webkit-text-fill-color: currentColor — que herda do body (creme), não
   do color computado (#00405a). Resultado: texto invisível sobre fundo creme.
   
   Solução: regra explícita com -webkit-text-fill-color: #00405a para todos os
   elementos filhos de section.avaliacoes.
   ================================================ */

section.avaliacoes {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
}

section.avaliacoes .sec-head,
section.avaliacoes .sec-head h2,
section.avaliacoes .sec-head h2 *,
section.avaliacoes .sec-head p,
section.avaliacoes .sec-head .lede,
section.avaliacoes .num,
section.avaliacoes .num b {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

section.avaliacoes .ratings-row,
section.avaliacoes .rating,
section.avaliacoes .rating .n,
section.avaliacoes .rating .src,
section.avaliacoes .rating .label {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
}

section.avaliacoes .pullquote,
section.avaliacoes .pullquote .label,
section.avaliacoes blockquote,
section.avaliacoes cite,
section.avaliacoes cite span {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
}

section.avaliacoes .mini-quotes,
section.avaliacoes .mq,
section.avaliacoes .mq .q,
section.avaliacoes .mq cite {
  color: #00405a !important;
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
}

/* Estrelas decorativas: manter âmbar */
section.avaliacoes .star,
section.avaliacoes [aria-hidden="true"] {
  color: #f59b1e !important;
  -webkit-text-fill-color: #f59b1e !important;
}

/* Superscript âmbar (2º, 100K) dentro de .rating .n */
section.avaliacoes .rating .n span[style*="color: var(--amarelo)"],
section.avaliacoes .rating .n span[style*="color:var(--amarelo)"] {
  color: #c47e15 !important;
  -webkit-text-fill-color: #c47e15 !important;
}

/* ================================================
   FIX CRÍTICO — Seções .momentos, .visao, .eventos fora de <main>
   Mesmo problema: -webkit-text-fill-color herdado do body
   ================================================ */

section.momentos .sec-head h2,
section.momentos .sec-head h2 *,
section.momentos .sec-head p,
section.momentos .sec-head .lede,
section.visao .sec-head h2,
section.visao .sec-head h2 *,
section.visao .sec-head p,
section.visao .sec-head .lede {
  -webkit-text-fill-color: #00405a !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   A11Y LIGHTHOUSE FIX — Contraste WCAG AAA
   Elementos: .sec-head, .momento-body, .faq-question, .serif (em fundos claros)
   Cor problemática: #f59b1e (ratio ~2.8:1 sobre #f6efde)
   Cor corrigida: #7a5000 (ratio 7.31:1 — AAA ✅)
   Data: 2026-06-15
   ═══════════════════════════════════════════════════════════════ */

/* .sec-head: subtítulo de seção em fundo claro */
html body main .sec-head,
html body main .sec-head * {
  color: #1d4f60 !important;
  -webkit-text-fill-color: #1d4f60 !important;
}

/* .momento-body: texto descritivo dos momentos (café, almoço, entardecer) */
html body main .momento-body,
html body main .momento-body p,
html body main .momento-body span {
  color: #485156 !important;
  -webkit-text-fill-color: #485156 !important;
}

/* .faq-question: pergunta do FAQ em fundo claro (#f6efde) */
html body main .faq-question,
html body main .faq-section .faq-question,
html body main .ec-faq-section .faq-question {
  color: #1d4f60 !important;
  -webkit-text-fill-color: #1d4f60 !important;
}

/* .serif em seções claras: span decorativo com fonte serif */
html body main :is(
  .light-section, .paper-section, .section-paper, .bg-paper,
  .menu-section, .faq-section, .ec-faq-section, .momentos,
  .visao, .avaliacoes, .geo-aio-section, .quick-answers-section,
  [data-bg="light"], .sec-head, .momento-card, .momento-item
) .serif,
html body main :is(
  .light-section, .paper-section, .section-paper, .bg-paper,
  .menu-section, .faq-section, .ec-faq-section, .momentos,
  .visao, .avaliacoes, .geo-aio-section, .quick-answers-section,
  [data-bg="light"], .sec-head, .momento-card, .momento-item
) h2 .serif,
html body main :is(
  .light-section, .paper-section, .section-paper, .bg-paper,
  .menu-section, .faq-section, .ec-faq-section, .momentos,
  .visao, .avaliacoes, .geo-aio-section, .quick-answers-section,
  [data-bg="light"], .sec-head, .momento-card, .momento-item
) h3 .serif {
  color: #7a5000 !important;
  -webkit-text-fill-color: #7a5000 !important;
}

/* .eyebrow em seções claras (não-hero): garantia de contraste AAA */
html body main :is(
  .light-section, .paper-section, .section-paper, .bg-paper,
  .menu-section, .faq-section, .ec-faq-section, .momentos,
  .visao, .avaliacoes, .geo-aio-section, .quick-answers-section,
  [data-bg="light"]
) .eyebrow:not(.hero-eyebrow):not(.page-eyebrow) {
  color: #7a5000 !important;
  -webkit-text-fill-color: #7a5000 !important;
}

/* ec-dossie-kicker: kicker de dossiê em fundo claro */
html body main .ec-dossie-kicker {
  color: #7a5000 !important;
  -webkit-text-fill-color: #7a5000 !important;
}

/* ── TOUCH TARGET FIX: sticky-reserve-mobile não deve sobrepor mobile-bottom-nav ── */
/* mobile-bottom-nav height: ~72px + safe-area. Offset: 80px garante clearance total */
@media (max-width: 900px) {
  #sticky-reserve-mobile {
    bottom: 80px !important;
  }
}