/* ==========================================================================
   DESIGN SYSTEM - OFERTAS E PROMOÇÕES DA NET
   ========================================================================== */

:root {
  /* ---- Cores de marca (hue) ---- */
  --black: #000000;
  --prussian-blue: #14213d;
  --amarelo: #ffe600;
  --alabaster-grey: #e5e5e5;
  --white: #ffffff;
  --laranja: #ee4d2d;

  /* ---- Cores semânticas (papel) ---- */
  --surface:            #ffffff;
  --surface-muted:      #f8f9fa;
  --surface-sunken:     #f1f5f9;
  --surface-inverse:    #14213d;

  --text:               #14213d;   /* 15.97:1 sobre --surface */
  --text-secondary:     #495057;   /*  8.18:1 sobre --surface */
  --text-muted:         #5a636b;   /*  6.12:1 sobre --surface | 5.81:1 sobre --surface-muted */
  --text-meta:          #64707e;   /*  5.05:1 sobre --surface | 4.79:1 sobre --surface-muted */
  --text-on-inverse:    #ffffff;

  --border:             rgba(20, 33, 61, 0.12);
  --border-strong:      rgba(20, 33, 61, 0.24);

  --accent:             #ee4d2d;   /* uso decorativo/fundo apenas */
  --accent-text:        #c23214;   /*  5.58:1 sobre --surface — use quando for TEXTO */

  --success:            #1e7e34;   /*  5.14:1 sobre --surface */
  --success-surface:    #e8f5e9;
  --danger:             #c0272d;   /*  5.88:1 sobre --surface */
  --danger-surface:     #ffebee;
  --warning-surface:    #fff8e6;

  /* ---- CTAs por marketplace (par fundo/texto já validado em AA) ---- */
  --cta-mercadolivre:       #ffe600;
  --cta-mercadolivre-hover: #f5dc00;
  --cta-mercadolivre-text:  #14213d;   /* 12.60:1 */
  --cta-amazon:             #ffa41c;
  --cta-amazon-hover:       #fa8900;
  --cta-amazon-text:        #000000;   /* 10.58:1 */
  --cta-shopee:             #d73211;
  --cta-shopee-hover:       #b82a0e;
  --cta-shopee-text:        #ffffff;   /*  4.82:1 */
  --cta-shein:              #000000;
  --cta-shein-hover:        #222222;
  --cta-shein-text:         #ffffff;

  /* ---- Tipografia ---- */
  /* Par editorial: serifada para a voz do texto, sans para a interface.
     Archivo para interface, Newsreader para a voz editorial.
     Plus Jakarta Sans sozinha lia como produto SaaS — e é uma das faces
     que o detector marca por saturação. */
  --font-main: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;

  --text-2xs:  0.75rem;   /* 12px — piso absoluto */
  --text-xs:   0.8125rem; /* 13px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.125rem;  /* 34px */
  --text-3xl:  2.75rem;   /* 44px */

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-base:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Espaçamento (escala de 4) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Raio ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* ---- Elevação ---- */
  --shadow-sm: 0 1px 3px rgba(20, 33, 61, 0.08);
  --shadow-md: 0 4px 12px rgba(20, 33, 61, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 33, 61, 0.12);

  /* ---- Layout ---- */
  --container-max-width: 1280px;
  --top-bar-height: 44px;
  --measure: 68ch;        /* medida de leitura confortável */
  --tap-min: 44px;        /* alvo mínimo de toque (WCAG 2.5.5) */

  /* ---- Movimento ---- */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset Básico */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--white);
  color: var(--prussian-blue);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   UTILITÁRIOS BASE (a11y + layout)
   ========================================================================== */

/* Esconde visualmente mantendo para leitores de tela.
   Antes esta classe era usada no <h1> da home sem existir no CSS do site —
   quem a definia era o all.min.css do Font Awesome (CDN). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" — primeiro item tabulável de cada página */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100%;
  z-index: 2000;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

/* Grade de conteúdo padrão (substitui o inline repetido nas páginas-índice) */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

/* Bloco de leitura: limita a medida do texto corrido */
.measure {
  max-width: var(--measure);
}

/* Container Centralizador */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   1. TOP BAR SUPERIOR (Cor Preta #000000)
   ========================================================================== */
.top-bar {
  background-color: var(--black);
  color: var(--white);
  height: var(--top-bar-height);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 1000;
}

.top-bar-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Lado Esquerdo: Redes Sociais */
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
  background: rgba(255, 255, 255, 0.08);
}

.social-icon:hover {
  color: var(--black);
  background: var(--amarelo);
  transform: translateY(-2px);
}

/* Lado Direito: Ofertas & Busca */
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-bar-deal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--amarelo);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255, 230, 0, 0.12);
  border: 1px solid rgba(255, 230, 0, 0.25);
  transition: all var(--transition-fast);
}

.top-bar-deal-btn:hover {
  background: var(--amarelo);
  color: var(--black);
  border-color: var(--amarelo);
  box-shadow: 0 0 12px rgba(255, 230, 0, 0.4);
}

.deal-icon {
  color: var(--laranja);
  animation: pulse-flame 1.8s infinite;
}

.top-bar-deal-btn:hover .deal-icon {
  color: var(--black);
}

@keyframes pulse-flame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* Busca Rápida no Topo */
.top-bar-search {
  position: relative;
}

.top-search-form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2px 4px 2px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all var(--transition-fast);
}

.top-search-form:focus-within {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--amarelo);
  box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.25);
}

.top-search-input {
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 0.8rem;
  font-family: inherit;
  width: 140px;
  transition: width var(--transition-normal);
}

.top-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.top-search-input:focus {
  width: 190px;
}

.top-search-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: color var(--transition-fast);
}

.top-search-btn:hover {
  color: var(--amarelo);
}

/* Adaptação Responsiva */
@media (max-width: 680px) {
  .social-label {
    display: none;
  }
  .top-search-input {
    width: 110px;
  }
  .top-search-input:focus {
    width: 130px;
  }
  .top-bar-deal-btn span {
    display: none;
  }
  .top-bar-deal-btn {
    padding: 4px 8px;
  }
}

/* ==========================================================================
   2. HEADER PRINCIPAL (Fundo Alabaster Grey #e5e5e5)
   ========================================================================== */
.main-header {
  background-color: var(--alabaster-grey);
  padding: 22px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.main-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Esquerda: Logo Brand */
.logo-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--prussian-blue);
  transition: transform var(--transition-fast);
}

.logo-brand:hover {
  transform: translateY(-1px);
}

.logo-icon-box {
  position: relative;
  width: 52px;
  height: 52px;
  background: var(--prussian-blue);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amarelo);
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.15);
}

.logo-badge-spark {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--laranja);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--alabaster-grey);
}

.logo-text-box {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--prussian-blue);
}

.logo-highlight {
  color: var(--black);
  background: var(--amarelo);
  padding: 0 6px;
  border-radius: 4px;
}

.logo-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(20, 33, 61, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 3px;
}

/* Direita: Slogan Box */
.header-slogan-box {
  display: flex;
  align-items: center;
}

.slogan-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  padding: 10px 18px;
  border-radius: 30px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.slogan-check-icon {
  color: var(--prussian-blue);
  font-size: 1rem;
}

.slogan-text {
  font-size: 0.95rem;
  color: var(--prussian-blue);
  font-weight: 500;
}

.slogan-text strong {
  color: var(--laranja);
  font-weight: 700;
}

/* Responsividade Header Principal (Compacto no Mobile) */
@media (max-width: 768px) {
  .main-header {
    padding: 8px 0;
  }

  .main-header-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  
  .logo-brand {
    justify-content: flex-start;
    gap: 8px;
  }

  .logo-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1rem;
  }

  .logo-badge-spark {
    width: 14px;
    height: 14px;
    font-size: 0.5rem;
    top: -3px;
    right: -3px;
  }

  .logo-title {
    font-size: 0.95rem;
  }

  .logo-subtitle {
    font-size: 0.6rem;
    margin-top: 1px;
  }
  
  .slogan-badge {
    padding: 4px 10px;
    border-radius: 20px;
  }
  
  .slogan-text {
    font-size: 0.72rem;
  }

  .slogan-check-icon {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .slogan-badge {
    display: none;
  }
}

/* ==========================================================================
   3. MENU DE NAVEGAÇÃO HORIZONTAL & MEGA MENU (#14213d - Prussian Blue)
   ========================================================================== */
.main-navbar {
  background-color: var(--prussian-blue);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 990;
}

.main-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Mobile Toggle */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin: 10px 0;
}

.mobile-menu-toggle .icon-close {
  display: none;
}

.mobile-menu-toggle.active .icon-open {
  display: none;
}

.mobile-menu-toggle.active .icon-close {
  display: inline-block;
}

/* Lista de Menu Horizontal (Justificado de Ponta a Ponta) */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.nav-item {
  position: static;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all var(--transition-fast);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.nav-icon {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.caret-icon {
  font-size: 0.75rem;
  margin-left: 2px;
  transition: transform var(--transition-fast);
}

/* Hover e Active nos Links */
.nav-link:hover,
.nav-link.active {
  color: var(--amarelo);
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: var(--amarelo);
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
  color: var(--amarelo);
}

.mega-dropdown-item:hover .caret-icon {
  transform: rotate(180deg);
  color: var(--amarelo);
}

/* Destaque "Ofertas" */
.nav-link-highlight {
  color: var(--amarelo);
}

.nav-badge-hot {
  background: var(--laranja);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   MEGA MENU (Submenu & Subsubmenu por Colunas)
   ========================================================================== */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 3px solid var(--amarelo);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-normal);
  pointer-events: none;
  z-index: 1050;
}

/* Abre no desktop por hover, por clique e por teclado.
   Antes existia só a regra :hover — o menu era inalcançável pelo teclado. */
.mega-dropdown-item:hover .mega-menu,
.mega-dropdown-item.open .mega-menu,
.mega-dropdown-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 24px;
}

/* Submenu Colunas */
.mega-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--prussian-blue);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--alabaster-grey);
}

.column-icon {
  color: var(--laranja);
}

/* Subsubmenu Lista de Produtos */
.mega-sublist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mega-sublist a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: #333333;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.mega-sublist a i {
  font-size: 0.8rem;
  color: rgba(20, 33, 61, 0.5);
  width: 16px;
  text-align: center;
  transition: color var(--transition-fast);
}

.mega-sublist a:hover {
  background-color: var(--alabaster-grey);
  color: var(--laranja);
  transform: translateX(4px);
}

.mega-sublist a:hover i {
  color: var(--laranja);
}

/* Adaptabilidade Responsiva do Menu */
@media (max-width: 1100px) {
  .nav-link {
    padding: 14px 12px;
    font-size: 0.85rem;
  }
  .mega-menu-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--prussian-blue);
    padding: 12px 0;
    gap: 0;
  }

  .nav-menu.mobile-active {
    display: flex;
  }

  .nav-link {
    border-bottom: none;
    border-left: 3px solid transparent;
    padding: 12px 20px;
  }

  .nav-link:hover, .nav-link.active {
    border-left-color: var(--amarelo);
    border-bottom-color: transparent;
  }

  .mega-menu {
    position: static;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    visibility: visible;
    display: none;
    box-shadow: none;
    transform: none;
    border-radius: 0;
    background: var(--alabaster-grey);
    border: none;
  }

  .mega-dropdown-item.open-mobile .mega-menu {
    display: block;
  }

  .mega-menu-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .mega-column-title {
    color: var(--prussian-blue);
  }
}

/* ==========================================================================
   4. HERO SECTION (Carrossel Slider de Ofertas - Espaço Lateral Integral 100%)
   ========================================================================== */
.hero-section {
  background: var(--white);
  padding: 0;
  width: 100%;
  position: relative;
}

.hero-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.hero-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
}

.carousel-track {
  position: relative;
  width: 100%;
  min-height: 400px;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.carousel-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  display: flex;
  align-items: center;
}

.slide-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 44px 5%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  width: 100%;
}

/* Slide Content Left */
.slide-content {
  display: flex;
  flex-direction: column;
  color: var(--prussian-blue);
}

.slide-badge-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tons escurecidos até passarem AA com texto branco.
   Antes: #10b981 = 2.54:1, #059669 = 3.77:1, #3b82f6 = 3.68:1, --laranja = 3.66:1. */
.tag-hot { background: var(--cta-shopee); color: var(--cta-shopee-text); }   /* 4.82:1 */
.tag-deal { background: var(--amarelo); color: var(--black); }               /* 16.57:1 */
.tag-guide { background: #1d4ed8; color: var(--white); }                     /* 6.70:1 */
.tag-top { background: #047857; color: var(--white); }                       /* 5.48:1 */
.tag-eco { background: #046c4e; color: var(--white); }                       /* 6.44:1 */

.slide-category {
  color: rgba(20, 33, 61, 0.65);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.slide-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--prussian-blue);
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.slide-description {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.slide-meta {
  display: flex;
  align-items: center;
  gap: 28px;
}

.slide-price-box {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 0.78rem;
  color: var(--text-muted);   /* era rgba(20,33,61,.6) = 4.32:1 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.price-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-text);   /* --laranja como texto dava 3.66:1 */
}

/* CTA Button */
.slide-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--prussian-blue);
  color: var(--amarelo);
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(20, 33, 61, 0.25);
}

.slide-cta-btn:hover {
  background: var(--laranja);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 77, 45, 0.35);
}

.slide-cta-btn i {
  transition: transform var(--transition-fast);
}

.slide-cta-btn:hover i {
  transform: translateX(4px);
}

/* Slide Image Right */
.slide-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Reserva de espaço: antes só havia max-width/max-height, sem altura nem
   aspect-ratio, então as 5 imagens do herói entravam sem espaço reservado e
   empurravam o layout ao decodificar — a maior fonte de CLS da página. */
.slide-image {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 3;
  max-height: 330px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  transition: transform 0.5s ease;
}

/* O <picture> precisa se comportar como o <img> dentro do grid */
.slide-image-container picture,
.card-image-wrapper picture {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel-slide:hover .slide-image {
  transform: scale(1.02);
}

/* Navigation Buttons */
/* Navegação do carrossel — bloco único.
   Antes havia DOIS blocos .carousel-nav-btn: o primeiro (44x44) era código morto
   e o segundo (38x38, opacity .6) vencia a cascata, derrubando o alvo de toque
   abaixo do mínimo de 44px. Mantida a linguagem discreta do segundo, no tamanho
   conforme do primeiro. */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

.carousel-nav-btn:hover,
.carousel-nav-btn:focus-visible {
  background: var(--surface-inverse);
  color: var(--amarelo);
  border-color: var(--surface-inverse);
  transform: translateY(-50%) scale(1.08);
}

.prev-btn { left: 24px; }
.next-btn { right: 24px; }

/* Carousel Dots */
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.carousel-dots .dot {
  /* O ponto visível continua com 10px, mas o botão ocupa 44x44 via padding e
     background-clip — o alvo de toque passa a atender WCAG 2.5.5 sem mudar o desenho. */
  width: 10px;
  height: 10px;
  padding: 17px;
  box-sizing: content-box;
  margin: -17px;
  border-radius: var(--radius-full);
  background: rgba(20, 33, 61, 0.28);
  background-clip: content-box;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast);
}

.carousel-dots .dot.active {
  width: 28px;
  border-radius: var(--radius-full);
  background: var(--prussian-blue);
  background-clip: content-box;
}

/* Responsividade Hero Slider (100% Full-Width em todas as telas) */
@media (max-width: 992px) {
  .hero-section {
    padding: 0;
  }
  .carousel-track {
    min-height: 320px;
  }
  .slide-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px 48px 20px;
  }
  .slide-title {
    font-size: 1.4rem;
    margin-bottom: 8px;
  }
  .slide-description {
    font-size: 0.88rem;
    margin-bottom: 14px;
  }
  .slide-image {
    max-height: 200px;
  }

  /* Setas abaixo do card no tablet — 26x26 com opacity .5 reprovava
     tanto o alvo de toque quanto a visibilidade. */
  .carousel-nav-btn {
    top: auto;
    bottom: var(--space-2);
    transform: none;
    width: var(--tap-min);
    height: var(--tap-min);
    font-size: var(--text-sm);
  }

  .carousel-nav-btn:hover,
  .carousel-nav-btn:focus-visible {
    transform: scale(1.06);
  }

  .prev-btn {
    left: var(--space-6);
    right: auto;
  }

  .next-btn {
    right: var(--space-6);
    left: auto;
  }

  .carousel-playpause {
    bottom: var(--space-2);
    right: 50%;
    transform: translateX(50%);
  }

  .carousel-dots {
    bottom: calc(var(--space-2) + var(--tap-min) + var(--space-2));
  }
}

/* Herói no celular: coluna única.
   Antes este bloco MANTINHA duas colunas (1.2fr 0.8fr) a 640px e compensava
   encolhendo tudo — título a 14.7px, descrição a 11.2px, CTA de ~24px de altura
   e pontos de 6x6px. Agora a imagem vai para cima e o texto ganha largura. */
@media (max-width: 768px) {
  .hero-section {
    padding: 0;
  }
  .hero-carousel {
    border-radius: 0;
  }
  .carousel-track {
    min-height: 0;
  }
  .slide-card {
    grid-template-columns: 1fr;
    grid-template-areas: "imagem" "conteudo";
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-16) var(--space-4);
    align-items: start;
  }
  .slide-image-container {
    grid-area: imagem;
    height: 180px;
  }
  .slide-image {
    max-height: 180px;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
  }
  .slide-content {
    grid-area: conteudo;
  }
  .slide-badge-wrapper {
    margin-bottom: var(--space-2);
    gap: var(--space-2);
  }
  .slide-tag {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
  }
  .slide-category {
    font-size: var(--text-2xs);
  }
  .slide-title {
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
  }
  .slide-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-4);
  }
  .slide-meta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .price-label {
    font-size: var(--text-2xs);
  }
  .price-value {
    font-size: var(--text-md);
  }
  .slide-cta-btn {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    gap: var(--space-2);
  }

  /* Setas e pontos ficam abaixo do card, com alvo de toque completo */
  .carousel-nav-btn {
    top: auto;
    bottom: var(--space-2);
    transform: none;
    width: var(--tap-min);
    height: var(--tap-min);
    font-size: var(--text-sm);
  }
  .carousel-nav-btn:hover,
  .carousel-nav-btn:focus-visible {
    transform: scale(1.06);
  }
  .prev-btn { left: var(--space-4); right: auto; }
  .next-btn { right: var(--space-4); left: auto; }
  .carousel-playpause {
    bottom: var(--space-2);
    right: 50%;
    transform: translateX(50%);
  }
  .carousel-dots {
    bottom: calc(var(--space-2) + var(--tap-min) + var(--space-2));
  }
}

/* ==========================================================================
   5. ANÁLISES & COMPARATIVOS EM DESTAQUE (Grid Matriz Estilo MagicUI Blog)
   ========================================================================== */
.reviews-section {
  background: var(--white);
  padding: 48px 0 64px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Header da Seção */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.section-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--laranja);
}

.section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--prussian-blue);
  letter-spacing: -0.5px;
}

.section-subtitle {
  font-size: 0.98rem;
  color: var(--text-secondary);
}

/* Category Filter Pills (MagicUI style) */
.category-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(20, 33, 61, 0.15);
  background: var(--white);
  color: var(--prussian-blue);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-pill:hover {
  background: var(--alabaster-grey);
  border-color: var(--prussian-blue);
}

.filter-pill.active {
  background: var(--prussian-blue);
  color: var(--white);
  border-color: var(--prussian-blue);
}

.pill-count {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--prussian-blue);
}

.filter-pill.active .pill-count {
  background: var(--amarelo);
  color: var(--black);
}

/* Grade Matriz de Cards (MagicUI Seamless Grid - Zero Gap) */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.review-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  box-shadow: none;
  transition: background 0.25 ease;
}

.review-card:hover {
  background: rgba(20, 33, 61, 0.02);
}

/* Card Image */
.card-image-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f4f4f6;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.review-card:hover .card-image {
  transform: scale(1.05);
}

.card-category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(20, 33, 61, 0.92);
  color: var(--white);
  backdrop-filter: blur(4px);
}

/* Badge de Tipo de Conteúdo (Editorial) */
.card-type-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.card-type-badge.type-analise {
  background: var(--prussian-blue);
  color: var(--white);
}

.card-type-badge.type-comparativo {
  background: var(--cta-shopee);          /* #d73211 no lugar de #ee4d2d */
  color: var(--cta-shopee-text);          /* 4.82:1 em vez de 3.66:1 */
}

.card-type-badge.type-guia {
  background: #2b3a55;
  color: var(--white);
}

.card-type-badge.type-top {
  background: var(--amarelo);
  color: var(--black);
}

/* Card Body */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.card-title a {
  color: var(--prussian-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.review-card:hover .card-title a {
  color: var(--laranja);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-excerpt {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Footer & CTAs */
.card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.card-meta i {
  color: var(--laranja);
}

.card-meta-divider {
  color: var(--text-meta);   /* era #cbd5e0 = 1.49:1 */
}

.card-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.card-cta-btn.cta-analise {
  background: var(--prussian-blue);
  color: var(--white);
}

.card-cta-btn.cta-comparativo {
  background: var(--laranja);
  color: var(--white);
}

.card-cta-btn.cta-guia {
  background: #2b3a55;
  color: var(--white);
}

.card-cta-btn.cta-ranking {
  background: var(--prussian-blue);
  color: var(--amarelo);
}

.card-cta-btn:hover {
  transform: translateX(3px);
  background: var(--black);
  color: var(--amarelo);
}

.card-cta-btn i {
  transition: transform var(--transition-fast);
}

.card-cta-btn:hover i {
  transform: translateX(3px);
}

/* Responsividade Section 5 */
@media (max-width: 992px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-title {
    font-size: 1.7rem;
  }
}

@media (max-width: 640px) {
  .reviews-section {
    padding: 32px 0 40px 0;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .section-title {
    font-size: 1.35rem;
  }
  .card-body {
    padding: 16px;
  }
  .card-title {
    font-size: 1rem;
  }
}

/* ==========================================================================
   6. SEÇÃO EXPLORE POR CATEGORIA (Navegação Compacta)
   ========================================================================== */
.explore-categories-section {
  background: var(--alabaster-grey); /* #e5e5e5 suave com alto contraste */
  padding: 36px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.explore-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.explore-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.explore-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--prussian-blue);
  letter-spacing: -0.3px;
  margin: 0;
}

.explore-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Controles Discretos de Navegação no Carrossel (Tablet / Mobile) */
.explore-carousel-controls {
  display: none; /* Oculto por padrão no Desktop quando os 6 itens cabem em 1 linha */
  gap: 8px;
}

.explore-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(20, 33, 61, 0.2);
  background: var(--white);
  color: var(--prussian-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.explore-nav-btn:hover {
  background: var(--prussian-blue);
  color: var(--white);
  border-color: var(--prussian-blue);
}

/* Container & Grid da Seção 6 */
.explore-grid-wrapper {
  width: 100%;
}

.explore-categories-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}

/* Card Individual de Categoria */
.category-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(20, 33, 61, 0.1);
  border-radius: 12px;
  padding: 20px 12px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.category-nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(20, 33, 61, 0.08);
  border-color: var(--laranja);
}

.category-nav-card:focus-visible {
  outline: 2px solid var(--prussian-blue);
  outline-offset: 2px;
}

/* Ícone da Categoria (Linguagem Visual Unificada) */
.category-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(20, 33, 61, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.category-icon-wrapper i {
  font-size: 1.35rem;
  color: var(--prussian-blue);
  transition: color 0.25s ease;
}

.category-nav-card:hover .category-icon-wrapper {
  background: var(--prussian-blue);
  transform: scale(1.06);
}

.category-nav-card:hover .category-icon-wrapper i {
  color: var(--amarelo);
}

/* Nome da Categoria */
.category-nav-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--prussian-blue);
  line-height: 1.25;
}

/* Card Destaque: Ver Mais Categorias */
.category-nav-card-more .category-icon-wrapper {
  background: rgba(238, 77, 45, 0.08);
}

.category-nav-card-more .category-icon-wrapper i {
  color: var(--laranja);
}

.category-nav-card-more:hover .category-icon-wrapper {
  background: var(--laranja);
}

.category-nav-card-more:hover .category-icon-wrapper i {
  color: var(--white);
}

/* Responsividade: Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .explore-carousel-controls {
    display: flex;
  }

  .explore-categories-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 14px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .explore-categories-grid::-webkit-scrollbar {
    display: none;
  }

  .category-nav-card {
    flex: 0 0 calc(25% - 11px);
    min-width: 130px;
    scroll-snap-align: start;
  }
}

/* Responsividade: Mobile (max-width: 640px) */
@media (max-width: 640px) {
  .explore-categories-section {
    padding: 24px 0;
  }

  .explore-title {
    font-size: 1.15rem;
  }

  .explore-subtitle {
    font-size: 0.8rem;
  }

  .explore-categories-grid {
    gap: 12px;
  }

  .category-nav-card {
    flex: 0 0 calc(44% - 6px); /* Exibe ~2 cards completos + início do 3º para sinalizar swipe */
    padding: 16px 10px;
    min-width: 135px;
    scroll-snap-align: start;
  }

  .category-icon-wrapper {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
  }

  .category-icon-wrapper i {
    font-size: 1.25rem;
  }

  .category-nav-name {
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   7. SEÇÃO MELHORES PRODUTOS / RANKINGS (Seamless Editorial Grid)
   ========================================================================== */
.rankings-section {
  background: var(--white);
  padding: 48px 0 60px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Reutiliza .reviews-grid (.rankings-grid) diretamente do CSS da Seção 5:
   display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.12); border-left: 1px solid rgba(0, 0, 0, 0.12); */
.rankings-grid .review-card {
  display: flex !important;
}

/* Customização do 6º Card Especial: Ver Todos os Rankings */
.ranking-more-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(20, 33, 61, 0.04) 0%, rgba(20, 33, 61, 0.09) 100%);
}

.ranking-more-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--prussian-blue);
  color: var(--amarelo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.15);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.review-card.ranking-card-more:hover .ranking-more-icon-box {
  transform: scale(1.1);
  background: var(--laranja);
  color: var(--white);
}

/* Responsividade da Seção Rankings (Seguindo 100% o padrão da Seção 5) */
@media (max-width: 992px) {
  .rankings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rankings-section {
    padding: 32px 0 40px 0;
  }
  .rankings-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ETAPA 8: SEÇÃO DE CONTATO ("Fale com a gente")
   ========================================================================== */
.contact-section {
  background: var(--alabaster-grey);
  padding: 60px 0 80px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-card-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(20, 33, 61, 0.12);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(20, 33, 61, 0.05);
}

.contact-type-group {
  margin-bottom: 28px;
}

.contact-type-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--prussian-blue);
  margin-bottom: 12px;
}

/* Radio buttons estilizados em Desktop/Tablet */
.contact-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-type-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--white);
  border: 1.5px solid rgba(20, 33, 61, 0.2);
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--prussian-blue);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.contact-type-pill-label input[type="radio"] {
  accent-color: var(--prussian-blue);
}

.contact-type-pill-label:hover {
  border-color: var(--prussian-blue);
  background: rgba(20, 33, 61, 0.03);
}

.contact-type-pill-label.active,
.contact-type-pill-label:has(input[type="radio"]:checked) {
  border-color: var(--prussian-blue);
  background: var(--prussian-blue);
  color: var(--white);
}

/* Select para Mobile e Desktop (Formulário Compacto) */
.contact-type-select-wrapper {
  display: block;
  width: 100%;
}

.contact-type-select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(20, 33, 61, 0.2);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--prussian-blue);
  background-color: var(--white);
  cursor: pointer;
}

/* ==========================================================================
   ETAPA 9: SEÇÃO DE NEWSLETTER COMPACTA (HOME)
   ========================================================================== */
/* ==========================================================================
   SEÇÃO NEWSLETTER (HOME) - DESIGN CLARO E COMPACTO
   ========================================================================== */
.home-newsletter-section {
  background-color: #e5e5e5; /* Alabaster Grey */
  padding: 40px 0;
}

.home-newsletter-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 32px 40px;
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.home-newsletter-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.home-newsletter-header {
  text-align: left;
}

.home-newsletter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 33, 61, 0.08);
  color: var(--text);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.home-newsletter-badge i {
  color: var(--accent-text); /* Laranja em destaque pontual */
}

.home-newsletter-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text); /* Prussian Blue */
  margin-bottom: 6px;
  line-height: 1.25;
}

.home-newsletter-text {
  font-size: 0.9rem;
  color: rgba(20, 33, 61, 0.72); /* Prussian Blue com 72% de opacidade */
  line-height: 1.45;
  margin: 0;
}

.home-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-newsletter-input-group {
  display: flex;
  width: 100%;
  gap: 8px;
}

.home-newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(20, 33, 61, 0.18);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-newsletter-input::placeholder {
  color: rgba(20, 33, 61, 0.48);
}

.home-newsletter-input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.1);
}

.home-newsletter-btn {
  background: #14213d; /* Prussian Blue */
  color: #ffffff;
  border: none;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-newsletter-btn:hover {
  background: #ee4d2d; /* Laranja no hover */
  transform: translateY(-1px);
}

.home-newsletter-microcopy {
  font-size: 0.78rem;
  color: var(--text-muted);   /* era rgba(20,33,61,.60) = 4.32:1 */
}

.home-newsletter-feedback {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Antes a cor vinha inline do JS: #ffe600 sobre card branco = 1.27:1 (invisível)
   no sucesso e #ff6b6b = 3.1:1 no erro. Agora são tokens validados em AA. */
.home-newsletter-feedback.is-success {
  color: var(--success);
}

.home-newsletter-feedback.is-error {
  color: var(--danger);
}

/* Responsividade da Newsletter */
@media (max-width: 860px) {
  .home-newsletter-card {
    padding: 24px 20px;
  }
  .home-newsletter-content {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .home-newsletter-header {
    text-align: center;
  }
  .home-newsletter-form {
    align-items: center;
  }
  .home-newsletter-input-group {
    max-width: 480px;
  }
}

@media (max-width: 540px) {
  .home-newsletter-input-group {
    flex-direction: column;
    width: 100%;
  }
  .home-newsletter-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Grid de Formulário */
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--prussian-blue);
  margin-bottom: 8px;
}

.form-label .optional-tag {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(20, 33, 61, 0.18);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--prussian-blue);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.contact-type-select:focus {
  outline: none;
  border-color: var(--prussian-blue);
  box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.12);
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
}

.message-hint-note {
  font-size: 0.82rem;
  color: #555;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Checkbox Newsletter */
.checkbox-group {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--prussian-blue);
  cursor: pointer;
  line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--prussian-blue);
  cursor: pointer;
}

.newsletter-microcopy {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 28px;
}

/* Privacidade e Botão */
.form-footer-action {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.privacy-notice {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 600px;
}

.privacy-notice a {
  color: var(--prussian-blue);
  text-decoration: underline;
  font-weight: 600;
}

.contact-submit-btn {
  background: var(--prussian-blue);
  color: var(--white);
  border: none;
  padding: 14px 36px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.15);
}

.contact-submit-btn:hover:not(:disabled) {
  background: var(--laranja);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(238, 77, 45, 0.25);
}

.contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Feedback Box */
.contact-feedback {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  display: none;
}

.contact-feedback.success {
  display: block;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.contact-feedback.error {
  display: block;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.contact-feedback h4 {
  font-size: 1rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Responsividade Mobile/Tablet */
@media (max-width: 768px) {
  .contact-section {
    padding: 40px 0 50px 0;
  }
  .contact-card-wrapper {
    padding: 24px 18px;
    border-radius: 12px;
  }
  .contact-form-grid {
    grid-template-columns: 1fr;
  }
  .contact-type-pills {
    display: none;
  }
  .contact-type-select-wrapper {
    display: block;
  }
}

/* ==========================================================================
   ETAPA 10: RODAPÉ GLOBAL DO PORTAL (FOOTER INSTITUCIONAL)
   ========================================================================== */
.site-footer {
  background-color: var(--prussian-blue);
  color: var(--white);
  padding: 60px 0 30px 0;
  border-top: 4px solid var(--amarelo);
  font-size: 0.9rem;
}

.footer-main {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

/* Coluna Marca */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 12px;
}

.footer-logo-box {
  position: relative;
  width: 36px;
  height: 36px;
  background-color: var(--amarelo);
  color: var(--black);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.footer-badge-spark {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--laranja);
  color: var(--white);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo-text {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--white);
  letter-spacing: -0.3px;
}

.footer-logo-highlight {
  color: var(--amarelo);
}

.footer-slogan {
  font-size: 0.85rem;
  color: var(--amarelo);
  margin-bottom: 10px;
}

.footer-description {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 320px;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.footer-social-icon:hover {
  background: var(--amarelo);
  color: var(--black);
  transform: translateY(-2px);
}

/* Colunas de Links & Accordion */
.footer-col-toggle {
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}

.footer-col-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.footer-col-chevron {
  display: none;
  color: var(--amarelo);
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}

.footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col-list a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.footer-col-list a:hover {
  color: var(--amarelo);
  padding-left: 4px;
}

.footer-link-highlight {
  color: var(--amarelo) !important;
  font-weight: 600;
}

/* Disclosure de Afiliados */
.footer-affiliate-disclosure {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.disclosure-icon {
  color: var(--amarelo);
  margin-right: 4px;
}

/* Rodapé Inferior */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.editorial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
}

.editorial-badge i {
  color: var(--amarelo);
}

/* Responsividade Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .footer-main {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 30px 20px;
  }
}

/* Responsividade Mobile (max-width: 768px) com Accordion */
@media (max-width: 768px) {
  .site-footer {
    padding: 40px 0 24px 0;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 20px;
  }

  .footer-col-brand {
    padding-bottom: 24px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .footer-col-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-col-toggle {
    cursor: pointer;
    padding: 14px 0;
  }

  .footer-col-title {
    margin-bottom: 0;
  }

  .footer-col-chevron {
    display: inline-block;
  }

  .footer-col-accordion.open .footer-col-chevron {
    transform: rotate(180deg);
  }

  .footer-col-list {
    display: none;
    padding-bottom: 16px;
  }

  .footer-col-accordion.open .footer-col-list {
    display: flex;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ==========================================================================
   ETAPA 11: BREADCRUMBS & COMPONENTES ARQUITETURA MULTIPÁGINA
   ========================================================================== */
.breadcrumb-section {
  background-color: #f4f5f7;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 33, 61, 0.08);
  font-size: 0.85rem;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.breadcrumb-item a {
  color: var(--prussian-blue);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--laranja);
}

.breadcrumb-item.active {
  color: var(--text-secondary);
  font-weight: 600;
}

.breadcrumb-separator {
  font-size: 0.7rem;
  color: var(--text-meta);
}

/* Page Hero / Listing Header */
.page-hero {
  background-color: var(--prussian-blue);
  color: var(--white);
  padding: 48px 0;
  position: relative;
}

.page-hero-content {
  max-width: 840px;
}

.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 230, 0, 0.15);
  color: var(--amarelo);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.page-hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.2;
}

.page-hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

/* Hub Filters */
.hub-filters-section {
  padding: 24px 0 0 0;
  background: var(--surface-muted);
  border-bottom: 1px solid #e9ecef;
}

.hub-filters-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0 0 20px 0;
  margin: 0;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--prussian-blue);
  background: var(--white);
  border: 1px solid rgba(20, 33, 61, 0.15);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--prussian-blue);
  color: var(--white);
  border-color: var(--prussian-blue);
}

.filter-btn.active {
  box-shadow: 0 2px 8px rgba(20, 33, 61, 0.2);
}

/* Legal Content Section */
.legal-section {
  padding: 50px 0 70px 0;
  background: var(--surface-muted);
}

.legal-card {
  background: var(--white);
  border-radius: 12px;
  padding: 40px;
  border: 1px solid rgba(20, 33, 61, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  max-width: 900px;
  margin: 0 auto;
}

.legal-notice-box {
  background: #fff8e6;
  border-left: 4px solid #ffe600;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  color: #856404;
  margin-bottom: 24px;
}

.legal-card h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--prussian-blue);
  margin: 28px 0 12px 0;
}

.legal-card p, .legal-card ul {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
}

.legal-card ul {
  padding-left: 24px;
}

.legal-card li {
  margin-bottom: 8px;
}

/* Search Page Results */
.search-results-section {
  padding: 50px 0 70px 0;
  background: var(--surface-muted);
}

.search-meta-summary {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-result-item {
  background: var(--white);
  border-radius: 10px;
  padding: 24px;
  border: 1px solid rgba(20, 33, 61, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-result-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.search-result-type-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(20, 33, 61, 0.08);
  color: var(--prussian-blue);
}

.search-result-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--prussian-blue);
  text-decoration: none;
}

.search-result-title:hover {
  color: var(--laranja);
}

.search-result-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* 404 Error Page */
.error-page-section {
  padding: 80px 0 100px 0;
  text-align: center;
  background: var(--surface-muted);
}

.error-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  padding: 50px 30px;
  border-radius: 16px;
  border: 1px solid rgba(20, 33, 61, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.error-code-badge {
  font-size: 4rem;
  font-weight: 800;
  color: var(--laranja);
  line-height: 1;
  margin-bottom: 16px;
}

.error-page-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--prussian-blue);
  margin-bottom: 12px;
}

.error-page-text {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.error-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 768px) {
  .page-hero {
    padding: 32px 0;
  }
  .page-hero-title {
    font-size: 1.7rem;
  }
  .legal-card {
    padding: 24px 18px;
  }
}

/* ==========================================================================
   COMPONENTES DO SISTEMA EDITORIAL REUTILIZÁVEL
   ========================================================================== */

/* Metadados do Artigo Editorial */
.editorial-header {
  background: var(--alabaster-grey);
  padding: 40px 0 30px 0;
  border-bottom: 1px solid rgba(20, 33, 61, 0.1);
}

.editorial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.badge-analysis { background: rgba(20, 33, 61, 0.1); color: var(--prussian-blue); }
.badge-ranking { background: rgba(238, 77, 45, 0.1); color: var(--laranja); }
.badge-comparison { background: rgba(252, 163, 17, 0.15); color: #b87500; }
.badge-guide { background: rgba(40, 167, 69, 0.1); color: var(--success); }

.editorial-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--prussian-blue);
  line-height: 1.25;
  margin-bottom: 12px;
}

.editorial-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.editorial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.editorial-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Disclosure de Afiliados */
.affiliate-disclosure {
  background: #fff8e6;
  border: 1px solid #ffe082;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #7f6000;
  line-height: 1.45;
}

.affiliate-disclosure .disclosure-icon {
  color: #f57f17;
  margin-right: 4px;
}

/* Container Principal do Conteúdo Editorial */
.editorial-main-content {
  padding: 50px 0 80px 0;
  background: #fdfdfd;
}

.editorial-article {
  max-width: 920px;
  margin: 0 auto;
}

.editorial-section {
  margin-bottom: 48px;
}

.editorial-section h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--prussian-blue);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(20, 33, 61, 0.08);
}

.editorial-section h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--prussian-blue);
  margin: 20px 0 10px 0;
}

/* Resumo Inicial / Resposta Rápida (Quick Verdict) */
.quick-verdict-box {
  background: var(--white);
  border: 2px solid var(--prussian-blue);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 40px;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.06);
}

.verdict-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--prussian-blue);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.verdict-title i { color: var(--laranja); }

.verdict-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
  margin: 0;
}

/* Resumo do Produto (Product Summary Card) */
.product-summary-card {
  background: var(--white);
  border: 1px solid rgba(20, 33, 61, 0.12);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 40px;
}

.product-summary-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

.product-summary-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: #fafafa;
  padding: 10px;
}

.product-card-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--prussian-blue);
  margin-bottom: 6px;
}

.product-brand-model {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.key-specs-list h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.key-specs-list ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.key-specs-list li {
  font-size: 0.88rem;
  background: var(--surface-muted);
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text-secondary);
}

.target-profile-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 20px;
}

.target-profile-box > :only-child {
  grid-column: 1 / -1;
  width: 100%;
}

.profile-good, .profile-bad {
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  box-sizing: border-box;
  width: 100%;
}

.profile-good { background: #e8f5e9; color: #1b5e20; border-left: 4px solid #4caf50; }
.profile-bad { background: #ffebee; color: #b71c1c; border-left: 4px solid #f44336; }

.profile-good h4, .profile-bad h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tabelas Responsivas e Ficha Técnica */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
}

.spec-table, .side-by-side-table, .comparison-summary-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.92rem;
  border: 1px solid rgba(20, 33, 61, 0.12);
  border-radius: 8px;
  overflow: hidden;
}

.spec-table th, .spec-table td,
.side-by-side-table th, .side-by-side-table td,
.comparison-summary-table th, .comparison-summary-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(20, 33, 61, 0.08);
  text-align: left;
}

.spec-table th {
  width: 35%;
  background: var(--surface-muted);
  font-weight: 700;
  color: var(--prussian-blue);
}

.side-by-side-table thead th, .comparison-summary-table thead th {
  background: var(--prussian-blue);
  color: var(--white);
  font-weight: 700;
}

/* Prós e Contras */
.pros-cons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.pros-box, .cons-box {
  background: var(--white);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(20, 33, 61, 0.1);
}

.pros-box { border-top: 4px solid #28a745; }
.cons-box { border-top: 4px solid #dc3545; }

.pros-box h3, .cons-box h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.pros-box h3 i { color: var(--success); }
.cons-box h3 i { color: var(--danger); }

.pros-box ul, .cons-box ul {
  padding-left: 18px;
  margin: 0;
}

.pros-box li, .cons-box li {
  font-size: 0.9rem;
  margin-bottom: 8px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Ranking Cards */
.product-ranking-card {
  background: var(--white);
  border: 1px solid rgba(20, 33, 61, 0.12);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.ranking-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.rank-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--prussian-blue);
  background: rgba(20, 33, 61, 0.08);
  padding: 4px 12px;
  border-radius: 6px;
}

.editorial-seal {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
}

.seal-overall { background: #ffe0b2; color: #e65100; }
.seal-value { background: #c8e6c9; color: #1b5e20; }

.ranking-card-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

.ranking-card-media img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.ranking-prod-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--prussian-blue);
  margin-bottom: 8px;
}

.ranking-specs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.spec-tag {
  font-size: 0.8rem;
  background: #e9ecef;
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
}

.ranking-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Botão de afiliado. Antes era branco sobre #ee4d2d (3.66:1, reprova AA) — e
   #ee4d2d é a laranja de marca da Shopee, num botão que diz "Mercado Livre".
   Agora usa o par validado do marketplace correspondente. */
.btn-affiliate {
  background: var(--cta-mercadolivre);
  color: var(--cta-mercadolivre-text);
  font-size: var(--text-base);
  font-weight: 800;
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  border-radius: var(--radius-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-affiliate--amazon      { background: var(--cta-amazon);       color: var(--cta-amazon-text); }
.btn-affiliate--amazon:hover{ background: var(--cta-amazon-hover); }
.btn-affiliate--shopee      { background: var(--cta-shopee);       color: var(--cta-shopee-text); }
.btn-affiliate--shopee:hover{ background: var(--cta-shopee-hover); }
.btn-affiliate--shein       { background: var(--cta-shein);        color: var(--cta-shein-text); }
.btn-affiliate--shein:hover { background: var(--cta-shein-hover); }

.btn-affiliate:hover {
  background: var(--cta-mercadolivre-hover);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--prussian-blue);
  border: 1.5px solid var(--prussian-blue);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-outline:hover {
  background: var(--prussian-blue);
  color: var(--white);
}

/* State Editorial Vazio */
.empty-state-editorial {
  background: var(--surface-muted);
  border: 1px dashed rgba(20, 33, 61, 0.2);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Responsividade Geral dos Componentes Editoriais */
@media (max-width: 860px) {
  .product-summary-grid,
  .ranking-card-grid {
    grid-template-columns: 1fr;
  }
  
  .target-profile-box,
  .pros-cons-grid {
    grid-template-columns: 1fr;
  }

  .editorial-title {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   CLASSES ADICIONAIS DO SISTEMA DE TEMPLATES DEFINITIVO (REGRA 91)
   ========================================================================== */

.product-detail { margin-bottom: 50px; }

.product-gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-thumbnails { display: flex; gap: 8px; margin-top: 10px; }
.gallery-thumbnails img { width: 70px; height: 70px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; object-fit: contain; background: #fafafa; padding: 4px; }
.gallery-thumbnails img.thumb-active { border-color: var(--laranja); }

.product-summary { background: var(--white); border-radius: 12px; padding: 24px; border: 1px solid rgba(20, 33, 61, 0.1); }
.product-specs { margin-top: 20px; }

.buyer-rating, .buyer-rating-card {
  background: var(--white);
  border: 1px solid rgba(20, 33, 61, 0.1);
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
}

.buyer-rating-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.rating-big { font-size: 2.8rem; font-weight: 800; color: var(--prussian-blue); line-height: 1; }
.rating-scale { font-size: 1.2rem; color: var(--text-muted); font-weight: 700; }
.rating-meta-details p { margin-bottom: 4px; font-size: 0.92rem; }
.rating-sold-text { color: var(--accent-text); font-weight: 700; }

.buyer-feedback-summary { margin-top: 20px; border-top: 1px solid #e9ecef; padding-top: 20px; }
.feedback-disclaimer { font-size: 0.85rem; color: var(--text-muted); background: var(--surface-muted); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.product-offer-box {
  background: var(--surface-muted);
  border: 1px solid rgba(20, 33, 61, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.offer-box-title { font-size: 1.1rem; font-weight: 700; color: var(--prussian-blue); margin-bottom: 12px; }
.offer-date-notice { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }

.ranking-product { margin-bottom: 30px; }
.comparison-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.quick-verdict { background: var(--white); border-left: 4px solid var(--laranja); padding: 20px; border-radius: 0 10px 10px 0; }

.buying-checklist {
  background: #f4f6f8;
  border: 1px solid rgba(20, 33, 61, 0.1);
  border-radius: 10px;
  padding: 24px;
}
.buying-checklist ul { list-style: none; padding: 0; margin: 0; }
.buying-checklist li { font-size: 0.95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; color: var(--prussian-blue); font-weight: 600; }
.buying-checklist li i { color: var(--success); font-size: 1.1rem; }

.criterion-review-block, .criterion-breakdown-card, .profile-recommendation-card {
  background: var(--white);
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.criterion-review-block h3, .criterion-breakdown-card h3, .profile-recommendation-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--prussian-blue);
  margin-bottom: 8px;
}

.versus-verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.verdict-choice { background: var(--white); border-radius: 10px; padding: 18px; border: 1px solid rgba(20,33,61,0.1); }
.verdict-choice h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--prussian-blue); }
.verdict-choice.choice-a h3 i { color: var(--success); }
.verdict-choice.choice-b h3 i { color: #17a2b8; }

/* ==========================================================================
   COMPONENTE GLOBAL DE GALERIA DE IMAGENS DO PRODUTO (PRODUCT GALLERY)
   ========================================================================== */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-sizing: border-box;
}

.product-gallery-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid rgba(20, 33, 61, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  touch-action: pan-y;
  user-select: none;
}

.product-gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: opacity 0.2s ease-in-out;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 33, 61, 0.15);
  color: var(--prussian-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  z-index: 5;
}

.gallery-nav-btn:hover,
.gallery-nav-btn:focus-visible {
  background: var(--prussian-blue);
  color: #ffffff;
  outline: none;
}

.gallery-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.gallery-nav-btn.prev-btn { left: 8px; }
.gallery-nav-btn.next-btn { right: 8px; }

.gallery-thumbnails {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 4px 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.thumb-btn {
  background: #fafafa;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  min-width: 64px;
  min-height: 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.thumb-btn:hover,
.thumb-btn:focus-visible {
  border-color: rgba(20, 33, 61, 0.4);
  outline: none;
}

.thumb-btn.thumb-active,
.thumb-btn[aria-current="true"] {
  border-color: var(--prussian-blue);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--prussian-blue);
}

.product-gallery-single .gallery-nav-btn,
.product-gallery-single .gallery-thumbnails {
  display: none !important;
}

.product-gallery--compact {
  max-width: 280px;
}
.product-gallery--compact .thumb-btn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
}







/* ==========================================================================
   CAMADA FINAL — ACESSIBILIDADE, TOQUE E MOVIMENTO
   Fica no fim do arquivo de propósito: precisa vencer a cascata.
   ========================================================================== */

/* --- Foco visível global -------------------------------------------------
   Antes existiam apenas 3 regras :focus-visible no arquivo inteiro, duas delas
   fazendo outline:none. Todo o resto caía no outline padrão do navegador — que
   era então removido nos inputs. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sobre fundo claro o amarelo puro não se destaca: usa o azul da marca. */
:where(.main-content, .site-footer, .reviews-section, .editorial-article, main)
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--surface-inverse);
}

/* Reforça o contorno onde a regra antiga o suprimia */
.gallery-nav-btn:focus-visible,
.thumb-btn:focus-visible,
.home-newsletter-input:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.contact-type-select:focus-visible,
.top-search-input:focus-visible {
  outline: 3px solid var(--surface-inverse);
  outline-offset: 2px;
}

/* --- Alvos de toque (WCAG 2.5.5) ----------------------------------------- */
.social-icon,
.top-search-btn,
.top-bar-deal-btn,
.card-cta-btn,
.filter-pill,
.explore-nav-btn,
.gallery-nav-btn,
.mobile-menu-toggle,
.nav-link {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Links do rodapé: 21px de altura, sem área de toque nenhuma. */
.footer-col-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* --- Movimento reduzido ---------------------------------------------------
   O arquivo tinha ZERO regras prefers-reduced-motion contra 47 transitions,
   45 transforms, uma chama em loop infinito e um carrossel automático.
   Aqui o movimento é neutralizado sem apagar a mudança de estado: transições
   viram instantâneas em vez de sumirem, e o que anima sozinho para de animar. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .deal-icon,
  .logo-badge-spark {
    animation: none !important;
  }

  .carousel-track {
    transition: none !important;
  }

  /* Efeitos puramente decorativos de elevação são dispensados */
  .review-card:hover,
  .card-cta-btn:hover,
  .btn-affiliate:hover,
  .carousel-nav-btn:hover {
    transform: none !important;
  }
}

/* --- Controle de reprodução do carrossel --------------------------------- */
.carousel-playpause {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 11;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.carousel-playpause:hover,
.carousel-playpause:focus-visible {
  background: var(--surface-inverse);
  color: var(--amarelo);
}

/* --- Medida de leitura do corpo editorial --------------------------------
   .editorial-article limitava a 920px sem nenhuma regra de parágrafo, então o
   texto corrido herdava body (16px/1.5) e rodava a ~120 caracteres por linha. */
.editorial-section p,
.editorial-intro p,
.editorial-article > p {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.editorial-section li {
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
}

/* --- Piso tipográfico -----------------------------------------------------
   Nenhum texto abaixo de 12px em nenhum viewport. */
.slide-description,
.slide-tag,
.slide-price-label,
.card-category-badge,
.card-type-badge,
.section-badge,
.rating-sold-text,
.offer-date-notice {
  font-size: max(var(--text-2xs), 0.75rem);
}

/* ==========================================================================
   FECHAMENTO — piso tipográfico e alvos de toque remanescentes
   ========================================================================== */

/* Nenhum texto abaixo de 12px em nenhum viewport. Estes eram os últimos:
   9.6px no subtítulo do logo, 10.4px no badge HOT, 11.2px/11.5px nos metadados. */
.logo-subtitle,
.slogan-text,
.slogan-text strong,
.nav-badge-hot,
.pill-count,
.card-meta-divider,
.card-meta,
.social-label {
  font-size: max(var(--text-2xs), 0.75rem);
}

/* Alvos de toque que ainda ficavam entre 34px e 43px */
.logo-brand,
.footer-brand,
.home-newsletter-btn,
.footer-social-icon,
.footer-col-list a,
.legal-links a {
  min-height: var(--tap-min);
}

.footer-social-icon,
.social-icon {
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-newsletter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Os ícones sociais viraram SVG inline (fa-brands custava 115 KB de webfont
   para 4 glifos). Herdam a cor do link, então acompanham hover e foco. */
.social-svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Top bar em telas estreitas.
   Ao elevar os ícones sociais para o alvo mínimo de 44px, .social-links passou
   de ~112px para 194px e empurrou a barra para 418px num viewport de 375px.
   Abaixo de 680px os ícones sociais saem da top bar — eles já aparecem no
   rodapé — e a barra fica com "Ofertas do Dia" e a busca, que é o que ali
   realmente serve a quem está no celular.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .top-bar-left {
    display: none;
  }

  .top-bar-container {
    justify-content: space-between;
    gap: var(--space-3);
  }

  .top-bar-right {
    flex: 1;
    justify-content: space-between;
    min-width: 0;
  }

  .top-bar-search {
    flex: 1;
    min-width: 0;
  }

  .top-search-form {
    width: 100%;
  }

  /* A largura fixa de 110px somada ao botão estourava o container */
  .top-search-input,
  .top-search-input:focus {
    width: 100%;
    min-width: 0;
  }

  /* A top bar cresce para acomodar alvos de 44px sem espremer nada */
  .top-bar {
    height: auto;
    min-height: var(--top-bar-height);
    padding: var(--space-1) 0;
  }
}

/* ==========================================================================
   COMPONENTE: CARD EDITORIAL (.ed-card)
   Substitui o padrão que estava repetido como style="" inline em melhores,
   analises, comparativos, ofertas, artigos e guias-de-compra. Além de tirar
   ~500 declarações do markup, corrige a hierarquia tipográfica: os tamanhos
   inline ficavam em 12 / 12.8 / 13.1 / 14.1 / 18.4px — degraus de 1.05 a 1.1,
   abaixo do mínimo perceptível de 1.25 entre passos.
   ========================================================================== */
.ed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.ed-card:hover,
.ed-card:focus-within {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ed-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}

.ed-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Degrau 1: rótulo — 12px */
.ed-card__badge,
.ed-card__kicker {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.ed-card__badge {
  background: var(--surface-sunken);
  color: var(--text);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

.ed-card__kicker {
  color: var(--accent-text);
  white-space: nowrap;
}

/* Degrau 3: título — 22px (1.57x sobre o corpo, 1.83x sobre o rótulo) */
.ed-card__title {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.ed-card__title a {
  color: inherit;
  text-decoration: none;
}

.ed-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Degrau 2: corpo — 14px */
.ed-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--text-muted);
}

.ed-card__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Degrau 1: metadado — 12px */
.ed-card__meta {
  font-size: var(--text-2xs);
  color: var(--text-meta);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ed-card__cta {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  min-height: var(--tap-min);
}

/* ==========================================================================
   COMPONENTE: NOTA DE TRANSPARÊNCIA (.nota-transparencia)
   Substitui o bloco com border-left de 4px — o "side-tab" que o detector
   sinaliza como o tique visual mais reconhecível de UI gerada por IA.
   Aqui o destaque vem do ícone e do fundo, não de uma tarja lateral.
   ========================================================================== */
.nota-transparencia {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.nota-transparencia__icone {
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.4;
}

.nota-transparencia strong {
  color: var(--text);
}

/* ==========================================================================
   VOZ EDITORIAL — a serifada carrega o que o portal afirma;
   a sans carrega o que o visitante opera.
   ========================================================================== */

/* Títulos de página, de seção e de conteúdo falam com voz editorial */
.page-hero-title,
.section-title,
.editorial-title,
.slide-title,
.ed-card__title,
.ranking-prod-title,
.editorial-section h2,
.editorial-section h3,
.legal-card h2,
main h1,
main h2 {
  font-family: var(--font-editorial);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* A serifada tem eixo vertical mais forte: pede um pouco mais de entrelinha */
.page-hero-title,
.editorial-title,
main h1 {
  line-height: 1.15;
}

/* Corpo do artigo também em serifada — é onde a leitura acontece de verdade */
.editorial-section p,
.editorial-intro p,
.editorial-article > p,
.quick-verdict p {
  font-family: var(--font-editorial);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Interface permanece em sans: navegação, rótulos, botões, metadados */
.nav-link,
.mega-column-title,
.ed-card__badge,
.ed-card__kicker,
.ed-card__meta,
.card-category-badge,
.card-type-badge,
.section-badge,
.slide-tag,
.btn-affiliate,
.home-newsletter-btn,
.card-cta-btn,
.filter-pill,
.breadcrumb-list,
.footer-col-title,
.logo-title,
.logo-subtitle {
  font-family: var(--font-main);
}

/* O logotipo mantém a sans em caixa alta: é marca, não texto corrido */
.logo-title {
  letter-spacing: 0.02em;
}

/* ==========================================================================
   COMPONENTES: CARD DE CATEGORIA E BLOCO DE METODOLOGIA
   Últimos dois pontos onde os tamanhos inline ficavam a menos de 1.25 entre
   degraus (12.8 / 13.1 / 14.4 / 20.8 / 22.4px).
   ========================================================================== */
.cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.cat-card:hover,
.cat-card:focus-within {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cat-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cat-card__icone {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: var(--text-lg);
}

/* Degrau 3 */
.cat-card__title {
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.cat-card__title a { color: inherit; text-decoration: none; }
.cat-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Degrau 1 */
.cat-card__count {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-weight: 600;
}

/* Degrau 2 */
.cat-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

/* --- Bloco de metodologia das páginas de ranking --- */
.metodologia-bloco {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 800px;
  margin: var(--space-10) auto 0;
}

/* Degrau 3 */
.metodologia-bloco h2 {
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-4);
}

/* Degrau 2 */
.metodologia-bloco > p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  max-width: var(--measure);
}

/* ==========================================================================
   COMPONENTE: COMO AVALIAMOS (.como-avaliamos)
   metodologia.html era referenciada UMA vez no site inteiro — na 4ª coluna do
   rodapé. Para um portal que se posiciona por autoridade editorial, o método
   precisa aparecer onde a recomendação acontece, não escondido no rodapé.
   ========================================================================== */
.como-avaliamos {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  max-width: var(--measure);
}

.como-avaliamos__topo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.como-avaliamos__titulo {
  font-family: var(--font-main);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.como-avaliamos__criterios {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.como-avaliamos__criterios li {
  font-family: var(--font-main);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.como-avaliamos__nota {
  font-family: var(--font-main);
  font-size: var(--text-xs);
  line-height: var(--leading-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3) 0;
}

.como-avaliamos__link {
  font-family: var(--font-main);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
}

/* Estado informativo do feedback (newsletter ainda não aberta, envio em curso) */
.home-newsletter-feedback.is-info {
  color: var(--text-secondary);
}

/* ==========================================================================
   COMPONENTE: CARTÃO DE ROTA (.rota-card)
   Substitui o par de caixas com border-top de 4px sobre canto arredondado —
   o tique que o detector marca como "border-accent-on-rounded". A hierarquia
   passa a vir do ícone e do peso do título, não de uma tarja colorida.
   ========================================================================== */
.rota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.rota-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.rota-card:hover,
.rota-card:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.rota-card__icone {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
}

.rota-card h3 {
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.rota-card p {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

.rota-card .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}