/* ==========================================================================
   FONTES HOSPEDADAS NO PRÓPRIO SITE (sem requisição ao Google: LGPD + desempenho)
   Playfair Display e Plus Jakarta Sans — licença SIL Open Font License 1.1.
   Fontes variáveis, subconjunto latino (cobre o português).
   ========================================================================== */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   DESIGN TOKENS & ROOT VARIABLES
   ========================================================================== */
:root {
  /* Paleta Rosa Outubro Rosa & Vinhos Nobres */
  --pink-50: #fff1f6;
  --pink-100: #ffe4ee;
  --pink-200: #fecdde;
  --pink-300: #fda4c5;
  --pink-400: #fa6fa3;
  --pink-500: #f03d82;
  --pink-600: #d21972;
  --pink-700: #b30f5a;
  --pink-800: #93104b;
  --pink-900: #7b1241;
  --pink-950: #490422;

  --wine-deep: #440d24;
  --wine-dark: #581232;
  --wine-muted: #745667;

  /* Fundo escuro de barra superior, rodapé, aviso e toast. No tema escuro --wine-deep vira cor de TEXTO
     (clara), então estes elementos precisam de um token próprio para continuarem escuros. */
  --chrome-bg: #440d24;

  --gold-accent: #c9935a;
  --gold-light: #fef8ee;
  --emerald-accent: #059669;
  --emerald-light: #ecfdf5;

  /* Superfícies & Cores de Fundo */
  --bg-page: #fdf8fa;
  --bg-surface: #ffffff;
  --bg-surface-glass: rgba(255, 255, 255, 0.85);
  --bg-soft-pink: #fff6f9;
  
  /* Textos */
  --text-primary: #341221;
  --text-secondary: #6e4e5e;
  --text-muted: #78606f; /* contraste mínimo 4,75:1 sobre todos os fundos claros (antes #8c7381: 3,6 a 4,3:1) */
  --text-inverse: #ffffff;

  /* Bordas e Sombras */
  --border-subtle: #f5d3e2;
  --border-strong: #e7adc6;
  
  --shadow-sm: 0 2px 8px rgba(115, 18, 59, 0.04);
  --shadow-md: 0 10px 25px -5px rgba(115, 18, 59, 0.08), 0 4px 10px -2px rgba(210, 25, 114, 0.04);
  --shadow-lg: 0 20px 40px -10px rgba(115, 18, 59, 0.12), 0 8px 16px -4px rgba(210, 25, 114, 0.08);
  --shadow-pink-glow: 0 12px 30px rgba(210, 25, 114, 0.28);
  
  /* Tipografia */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --base-font-size: 16px;

  /* Raios de borda */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 9999px;

  /* Transições */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.28s var(--ease-smooth);
}

/* ==========================================================================
   MODOS DE ACESSIBILIDADE
   ========================================================================== */
/* Variáveis base para alto contraste — overrides completos estão no FINAL do CSS
   (depois dos temas) para garantir que sempre vençam por ordem do cascade. */

body.font-large {
  --base-font-size: 18px;
}

body.font-xl {
  --base-font-size: 20px;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px; /* o header fixo (76px) não cobre o início da seção ao navegar por âncora */
  font-size: var(--base-font-size);
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--bg-page);
  line-height: 1.6;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  display: block;
}

.hero-photo-media picture {
  height: 100%;
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--pink-500);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(20px, 4vw, 70px);
  margin-inline: auto;
}

/* ==========================================================================
   BARRA DE ACESSIBILIDADE FIXA NO TOPO
   ========================================================================== */
.a11y-bar {
  background: var(--chrome-bg);
  color: #fce7f1;
  font-size: 0.8rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.a11y-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.a11y-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.a11y-info span.pulse-dot {
  width: 7px;
  height: 7px;
  background: #ff5e9c;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px #ff5e9c; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.a11y-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.a11y-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: var(--transition);
}

.a11y-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* ==========================================================================
   HEADER & NAVBAR GLASSMORPHIC
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--bg-surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  gap: 16px;
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

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

.brand-logo-img {
  width: auto;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(168, 15, 85, 0.12));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.logo-brand:hover .brand-logo-img {
  transform: scale(1.06);
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.brand-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.05;
  color: var(--wine-deep);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-title span {
  color: var(--pink-600);
}

.brand-subtitle {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-600);
  margin-top: 2px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  white-space: nowrap;
}

.nav-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wine-dark);
  position: relative;
  padding: 6px 0;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--pink-600);
  transition: width 0.25s ease;
  border-radius: 2px;
}

.nav-link:hover {
  color: var(--pink-600);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--pink-600), var(--pink-700));
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-header-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pink-glow);
}

/* Mobile Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 6px 0;
}

.menu-toggle span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--wine-dark);
  border-radius: 2px;
  transition: var(--transition);
}

/* ==========================================================================
   HERO SECTION PREMIUM
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 0 70px;
  background: radial-gradient(circle at 90% 25%, #fedbe8 0%, transparent 35%),
              linear-gradient(135deg, #ffffff 0%, #fff0f6 60%, #fde4ee 100%);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  right: -100px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(253, 164, 197, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  filter: blur(50px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--pink-700);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-heading);
  color: var(--wine-deep);
  font-size: clamp(1.95rem, 5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.hero-title span.highlight {
  color: var(--pink-600);
  font-style: italic;
  display: inline-block;
}

.hero-lead {
  font-size: 1.2rem;
  color: var(--text-secondary);
  line-height: 1.68;
  max-width: 100%;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 36px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--pink-600) 0%, #bd1261 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pink-glow);
  transition: var(--transition);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(210, 25, 114, 0.4);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-surface);
  color: var(--wine-dark) !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.btn-secondary:hover {
  border-color: var(--pink-600);
  color: var(--pink-600) !important;
  transform: translateY(-2px);
  background: var(--bg-soft-pink);
}

.hero-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--wine-muted);
  font-weight: 600;
}

.hero-tag svg {
  color: var(--pink-600);
}

/* ==========================================================================
   HERO PHOTO FRAME & EDITORIAL CALLOUT (DESIGN HUMANIZADO & EDITORIAL)
   ========================================================================== */
.hero-visual {
  position: relative;
  width: 100%;
}

.hero-photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: 0 20px 45px -10px rgba(78, 12, 40, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-photo-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 55px -10px rgba(78, 12, 40, 0.22);
}

/* Moldura própria da foto: recorta zoom/parallax da imagem sem invadir a legenda */
.hero-photo-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.photo-caption-bar {
  padding: 14px 18px;
  background: var(--bg-surface);
  border-top: 1px solid #f0dde5;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 10px;
}

.photo-caption-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-600);
  flex-shrink: 0;
}

.hero-data-callout {
  position: absolute;
  bottom: 56px;
  right: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  box-shadow: 0 4px 16px rgba(78, 12, 40, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  z-index: 10;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-data-callout:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(78, 12, 40, 0.2);
}

.hero-data-callout .callout-value {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pink-700);
  line-height: 1;
  flex-shrink: 0;
}

.hero-data-callout .callout-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wine-dark);
  line-height: 1.25;
}

.hero-photo-frame .btn-zoom-float {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--pink-700);
  border: 1.5px solid var(--border-strong);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(78, 12, 40, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  transition: var(--transition);
}

.hero-photo-frame .btn-zoom-float:hover {
  background: var(--pink-600);
  color: #ffffff;
  border-color: var(--pink-600);
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-float-pill .stat-num {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--pink-600);
  line-height: 1;
}

.hero-float-pill .stat-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wine-dark);
  line-height: 1.25;
}

/* ==========================================================================
   PRINCÍPIOS & TRUST BAR
   ========================================================================== */
.trust-section {
  position: relative;
  z-index: 10;
  margin-top: -30px;
  margin-bottom: 60px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.trust-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: var(--transition);
}

.trust-item:hover {
  transform: translateY(-4px);
  border-color: var(--pink-300);
  box-shadow: var(--shadow-lg);
}

.trust-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--pink-50);
  color: var(--pink-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
}

.trust-item h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--wine-deep);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.trust-item p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   SEÇÕES GERAIS (TÍTULOS E ESTRUTURA)
   ========================================================================== */
.section {
  padding: 75px 0;
  position: relative;
}

.section-header {
  text-align: left;
  max-width: 980px;
  margin: 0 0 45px 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pink-700); /* pink-600 sobre pink-100 dava 4,27:1; pink-700 dá 5,6:1 */
  background: var(--pink-100);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-heading);
  color: var(--wine-deep);
  font-size: clamp(1.75rem, 3.6vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 1.12rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 1200px;
}

/* ==========================================================================
   NOVA FERRAMENTA 1: QUIZ / MINHA JORNADA DE CUIDADO
   ========================================================================== */
.quiz-section {
  background: linear-gradient(180deg, #fff7fa 0%, #fff 100%);
  border-radius: var(--radius-xl);
  padding: 50px 36px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
}

.quiz-stepper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.quiz-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.quiz-step-indicator.active {
  color: var(--pink-600);
}

.quiz-step-indicator .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: var(--transition);
}

.quiz-step-indicator.active .step-num {
  background: var(--pink-600);
  color: #fff;
  box-shadow: 0 0 10px rgba(210, 25, 114, 0.4);
}

.quiz-step-indicator.completed .step-num {
  background: var(--emerald-accent);
  color: #fff;
}

.step-divider {
  width: 30px;
  height: 2px;
  background: var(--border-subtle);
}

.quiz-card-box {
  max-width: 100%;
  margin: 0;
}

.quiz-question-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  color: var(--wine-deep);
  text-align: left;
  margin-bottom: 10px;
}

.quiz-question-sub {
  text-align: left;
  font-size: 1.02rem;
  color: var(--text-muted);
  margin-bottom: 28px;
  max-width: 1000px;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition);
}

.quiz-option:hover {
  border-color: var(--pink-400);
  background: var(--pink-50);
  transform: translateX(4px);
}

.quiz-option.selected {
  border-color: var(--pink-600);
  background: var(--bg-soft-pink);
  box-shadow: 0 4px 14px rgba(210, 25, 114, 0.12);
}

.quiz-radio-custom {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.quiz-option.selected .quiz-radio-custom {
  border-color: var(--pink-600);
  background: var(--pink-600);
}

.quiz-radio-custom::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-surface);
  opacity: 0;
  transition: opacity 0.2s;
}

.quiz-option.selected .quiz-radio-custom::after {
  opacity: 1;
}

.quiz-option-text {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--wine-dark);
}

.quiz-nav-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

/* Quiz Result Box */
.quiz-result-box {
  background: var(--bg-surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.4s var(--ease-smooth);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-result-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.quiz-result-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--pink-100);
  color: var(--pink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.quiz-result-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--wine-deep);
}

.quiz-recs-list {
  display: grid;
  gap: 14px;
  margin: 20px 0 28px;
}

.quiz-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-soft-pink);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--pink-600);
}

.quiz-rec-item svg {
  color: var(--pink-600);
  flex-shrink: 0;
  margin-top: 3px;
}

.quiz-rec-item p {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.5;
}

/* ==========================================================================
   NOVA FERRAMENTA 2: MITOS E VERDADES INTERATIVO
   ========================================================================== */
.myths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 22px;
}

.myth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.myth-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-300);
}

.prevention-card,
.rights-step {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), border-color 0.28s var(--ease-smooth);
}

.prevention-card::after,
.rights-step::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: '';
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease-smooth), opacity 0.2s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .prevention-card:hover,
  .rights-step:hover {
    transform: translateY(-5px);
    border-color: var(--pink-300);
    box-shadow: var(--shadow-md);
  }

  .prevention-card:hover::after,
  .rights-step:hover::after {
    opacity: 1;
    transform: translateX(100%);
  }
}

/* Entrada discreta dos blocos durante a rolagem. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.58s var(--ease-smooth) var(--reveal-delay, 0ms), transform 0.58s var(--ease-smooth) var(--reveal-delay, 0ms);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================================
   PREVENÇÃO E DIREITOS
   =========================================================================== */
.prevention-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}

.prevention-card {
  min-height: 100%;
  padding: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.prevention-card--action { border-top: 5px solid var(--emerald-accent); }
.prevention-card--info { border-top: 5px solid var(--gold-accent); }
.prevention-card--care { border-top: 5px solid var(--pink-600); }

.prevention-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  color: var(--pink-700);
  background: var(--pink-100);
}

.prevention-card--action .prevention-card__icon { color: var(--emerald-accent); background: var(--emerald-light); }
.prevention-card--info .prevention-card__icon { color: #9a641d; background: var(--gold-light); }

.prevention-card h3,
.rights-step h3,
.rights-support h3 {
  margin-bottom: 10px;
  color: var(--wine-deep);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.2;
}

.prevention-card p,
.prevention-card__list {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.prevention-card__list {
  display: grid;
  gap: 10px;
  list-style: none;
}

.prevention-card__list li {
  position: relative;
  padding-left: 23px;
}

.prevention-card__list li::before {
  position: absolute;
  left: 0;
  color: var(--pink-600);
  content: '✓';
  font-weight: 800;
}

.prevention-card p + p { margin-top: 14px; }

.inclusion-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-soft-pink);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.inclusion-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--pink-700); }
.inclusion-note strong { color: var(--wine-deep); }

.rights-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.rights-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 26px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.rights-step__number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pink-600);
  color: #fff;
  font-weight: 800;
}

.rights-step__eyebrow {
  margin-bottom: 4px;
  color: var(--pink-700);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rights-step h3 { font-size: 1.2rem; }
.rights-step p,
.rights-support p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; }

.rights-support {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: #440d24;
  color: #fff;
}

.rights-support h3 { color: #fff; }
.rights-support p { max-width: 800px; color: #fce7f1; }
.rights-support .btn-secondary { flex: 0 0 auto; white-space: nowrap; }

.myth-top {
  margin-bottom: 18px;
}

.myth-question {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wine-deep);
  line-height: 1.45;
  margin-bottom: 14px;
}

.myth-btn-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pink-600);
  background: var(--pink-50);
  border: 1px solid var(--border-subtle);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: var(--transition);
}

.myth-btn-reveal:hover {
  background: var(--pink-600);
  color: #fff;
}

.myth-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden; /* respostas recolhidas não devem ser lidas por leitores de tela */
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.4s;
}

.myth-card.revealed .myth-answer {
  visibility: visible;
  transition-delay: 0s;
  max-height: 600px;
  opacity: 1;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-strong);
}

.myth-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.badge-myth {
  background: #fee2e2;
  color: #b91c1c;
}

.badge-truth {
  background: #dcfce7;
  color: #15803d;
}

.myth-explanation {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   NOVA FERRAMENTA 3: LEMBRE QUEM VOCÊ AMA (WHATSAPP SHARE)
   ========================================================================== */
.share-love-banner {
  background: linear-gradient(135deg, var(--chrome-bg) 0%, #7b1241 100%);
  border-radius: var(--radius-xl);
  padding: 50px 40px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.share-love-banner::after {
  content: "♥";
  position: absolute;
  right: -20px;
  bottom: -40px;
  font-size: 16rem;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}

.share-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 14px;
}

.share-desc {
  font-size: 1rem;
  color: #fedbe8;
  line-height: 1.6;
  margin-bottom: 26px;
}

.recipient-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.recipient-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition);
}

.recipient-btn:hover, .recipient-btn.active {
  background: var(--bg-surface);
  color: var(--wine-deep);
  border-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.preview-message-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: #1f2937;
  box-shadow: var(--shadow-md);
}

.preview-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #059669;
  margin-bottom: 12px;
}

.preview-bubble {
  background: #dcf8c6;
  border-radius: 12px 12px 0 12px;
  padding: 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #111827;
  margin-bottom: 20px;
  border: 1px solid #c2eab0;
}

.share-action-group {
  display: flex;
  gap: 12px;
}

.btn-whatsapp {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: #06351a !important; /* texto branco sobre o verde do WhatsApp dava só 1,98:1; este dá 6,9:1 */
  font-weight: 700;
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
  transition: var(--transition);
}

.btn-whatsapp:hover {
  background: #1eb855;
  transform: translateY(-2px);
}

.btn-copy-msg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 13px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.88rem;
  transition: var(--transition);
}

.btn-copy-msg:hover {
  background: #e5e7eb;
}

/* ==========================================================================
   NOVA FERRAMENTA 4: CHECKLIST INTERATIVO PARA CONSULTA
   ========================================================================== */
.checklist-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: start;
}

.checklist-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-md);
}

.checklist-group {
  margin-bottom: 28px;
}

.checklist-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--wine-deep);
  margin-bottom: 14px;
}

.checklist-items {
  display: grid;
  gap: 10px;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid #f0f0f0;
  background: #fafafa;
  cursor: pointer;
  transition: var(--transition);
}

.check-item:hover {
  background: var(--pink-50);
  border-color: var(--border-subtle);
}

.check-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.check-item input[type="checkbox"]:checked {
  background: var(--pink-600);
  border-color: var(--pink-600);
}

.check-item input[type="checkbox"]:checked::after {
  content: '✓';
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.check-item-text {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.check-item.checked {
  background: var(--pink-50);
  border-color: var(--border-strong);
}

.check-item.checked .check-item-text {
  font-weight: 600;
  color: var(--pink-800);
}

/* Checklist Sidebar Summary */
.checklist-sidebar {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 100px;
}

.counter-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pink-100);
  color: var(--pink-700);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.counter-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--wine-deep);
  margin-bottom: 8px;
}

.counter-desc {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

.checklist-actions {
  display: grid;
  gap: 10px;
}

/* ==========================================================================
   NOVA FERRAMENTA 5: LEMBRETE NO CALENDÁRIO (.ICS & GOOGLE)
   ========================================================================== */
.reminder-box {
  background: linear-gradient(135deg, #fff2f7 0%, #fedbe8 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 36px;
}

.reminder-content {
  max-width: 900px;
}

.reminder-content h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--wine-deep);
  margin-bottom: 8px;
}

.reminder-content p {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.reminder-btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   GUIA VISUAL DE AUTOCUIDADO (PANORÂMICO EM DESTAQUE AMPLO)
   ========================================================================== */
.guide-modern {
  background: linear-gradient(140deg, #4d0d2a 0%, #6d1038 40%, #a80f55 100%);
  border-radius: var(--radius-xl);
  padding: 50px 42px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}

.guide-modern::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.guide-header-top {
  text-align: left;
  max-width: 100%;
  margin: 0 0 34px;
}

.guide-header-top h3 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  line-height: 1.15;
  margin: 14px 0 12px;
}

.guide-header-top p {
  font-size: 1.05rem;
  color: #fedbe8;
  line-height: 1.6;
  max-width: 1100px;
}

/* Moldura e Destaque Amplo da Ilustração */
.guide-showcase-box {
  position: relative;
  background: var(--bg-surface);
  padding: 14px;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(35, 5, 20, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.4);
  margin-bottom: 24px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}

.guide-showcase-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(35, 5, 20, 0.55);
}

.guide-showcase-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.btn-zoom-float {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(35, 5, 20, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: var(--transition);
}

.btn-zoom-float:hover {
  background: var(--pink-600);
  border-color: #fff;
  transform: scale(1.06);
}

/* Barra com as 3 Cenas Explicativas da Ilustração */
.guide-scenes-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 34px;
}

.guide-scene-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: center;
  backdrop-filter: blur(6px);
}

.guide-scene-card .scene-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fedbe8;
  margin-bottom: 4px;
}

.guide-scene-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.guide-scene-card p {
  font-size: 0.84rem;
  color: #ffe6f0;
  line-height: 1.45;
}

/* Grade Horizontal dos 5 Passos */
.guide-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.mobile-swipe-hint {
  display: none;
}

.guide-step-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.guide-step-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.guide-step-card.active {
  background: var(--bg-surface);
  color: var(--wine-deep);
  border-color: #ffffff;
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.guide-step-card .step-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.guide-step-card h4 {
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.guide-step-card p {
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.9;
}

.guide-step-card.active p {
  color: var(--text-secondary);
}

.guide-footer-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.integrated-care-card {
  margin-top: 40px;
  padding: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.integrated-care-card__layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.integrated-care-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--pink-100);
  color: var(--pink-700);
}

.integrated-care-card__content {
  min-width: 0;
  flex: 1;
}

.integrated-care-card__content h3 {
  margin-bottom: 8px;
  color: var(--wine-deep);
  font-family: var(--font-heading);
  font-size: 1.35rem;
}

.integrated-care-card__content > p {
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.6;
}

.integrated-care-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--pink-700);
  font-size: 0.85rem;
  font-weight: 700;
}

/* ==========================================================================
   ESTATÍSTICAS & PREVENÇÃO (MAMOGRAFIA)
   ========================================================================== */
.stats-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.stat-card-modern {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.stat-card-modern:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-300);
}

.stat-card-num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  color: var(--pink-600);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-card-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--wine-deep);
  margin-bottom: 8px;
}

.stat-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.care-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 34px;
  padding: 24px 28px;
  border: 1px solid var(--border-strong);
  border-left: 5px solid var(--pink-600);
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, var(--bg-surface) 0%, var(--pink-50) 100%);
  box-shadow: var(--shadow-sm);
}

.care-notice__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--pink-700);
  background: var(--pink-100);
}

.care-notice__eyebrow {
  margin-bottom: 2px;
  color: var(--pink-700);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.care-notice h3 {
  margin-bottom: 5px;
  color: var(--wine-deep);
  font-family: var(--font-heading);
  font-size: 1.38rem;
  line-height: 1.2;
}

.care-notice__content > p:last-child {
  max-width: 800px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.care-notice__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--pink-700);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.care-notice__link:hover {
  color: var(--wine-deep);
  text-decoration: underline;
}

.source-note {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.source-note a {
  color: var(--pink-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   ATENDIMENTO NO SUS & REDES DE APOIO
   ========================================================================== */
.sus-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.sus-step {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.sus-step:hover {
  transform: translateY(-4px);
  border-color: var(--pink-400);
}

.sus-step-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--pink-600);
  background: var(--pink-50);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.sus-step h3 {
  font-size: 1.1rem;
  color: var(--wine-deep);
  margin-bottom: 8px;
}

.sus-step p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.support-contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.support-card {
  background: var(--bg-soft-pink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.support-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pink-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-card h4 {
  font-size: 1rem;
  color: var(--wine-deep);
  margin-bottom: 4px;
}

.support-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 8px;
}

.support-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pink-700);
}

.support-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   FAQ ACCORDION COM BUSCA INSTANTÂNEA
   ========================================================================== */
.faq-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.faq-search-box {
  margin-bottom: 30px;
  position: relative;
}

.faq-search-input {
  width: 100%;
  padding: 16px 24px 16px 50px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.98rem;
  outline: none;
  background: var(--bg-surface);
  /* Sem cor explícita, o campo herdava o texto padrão do navegador: com o sistema em modo escuro
     o que o usuário digitava ficava branco sobre branco. */
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.faq-search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.faq-search-input:focus {
  border-color: var(--pink-600);
  box-shadow: 0 0 0 4px rgba(210, 25, 114, 0.12);
}

.faq-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.faq-accordion {
  display: grid;
  gap: 14px;
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.faq-item:hover {
  border-color: var(--pink-300);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--wine-deep);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--pink-600);
}

.faq-icon-arrow {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  color: var(--pink-600);
}

.faq-item.active .faq-icon-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease, visibility 0s linear 0.35s;
  background: var(--bg-soft-pink);
}

.faq-item.active .faq-answer {
  visibility: visible;
  transition-delay: 0s;
  max-height: 900px; /* folga para respostas longas em telas estreitas e com fonte ampliada */
  padding: 0 24px 22px;
}

.faq-answer p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   TOAST NOTIFICATION FLUTUANTE
   ========================================================================== */
.toast-notice {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1000;
  background: var(--chrome-bg);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.35s var(--ease-smooth);
  pointer-events: none;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   VOLTAR AO TOPO
   ========================================================================== */
.btn-back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  left: auto;
  z-index: 850;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--pink-600);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
}

.btn-back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.btn-back-to-top:hover {
  background: var(--pink-600);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-pink-glow);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--chrome-bg);
  color: #fce7f1;
  padding: 60px 0 50px;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  margin-bottom: 40px;
}

.footer-brand h4 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 12px;
}

.footer-brand p {
  color: #f7bbd4;
  line-height: 1.6;
  max-width: 650px;
}

.footer-col h5 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 16px;
  font-weight: 700;
}

.footer-links {
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-links a {
  color: #f7bbd4;
  transition: var(--transition);
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #f2a6c6;
  font-size: 0.82rem;
}

.footer-credits-team {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  margin-bottom: 8px;
  color: #fce7f1;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}

.footer-credit-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.footer-credit-item strong {
  color: #fff;
  font-weight: 700;
}

.footer-credit-sep {
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
}

@media (max-width: 680px) {
  .footer-credits-team {
    flex-direction: column;
    gap: 6px;
  }
  .footer-credit-sep {
    display: none;
  }
}

/* ==========================================================================
   LIGHTBOX MODAL DE ZOOM DE IMAGEM
   ========================================================================== */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  /* visibility: hidden tira o botão de fechar da ordem de tabulação enquanto o zoom está fechado */
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 4, 11, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lightbox-content {
  position: relative;
  z-index: 10;
  max-width: min(1200px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: zoomIn 0.3s var(--ease-smooth);
}

@keyframes zoomIn {
  from { transform: scale(0.93); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-content img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: var(--bg-surface);
}

.lightbox-caption {
  color: #ffe6f0;
  font-size: 0.95rem;
  margin-top: 14px;
  text-align: center;
  font-weight: 600;
}

.lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.lightbox-close:hover {
  background: var(--pink-600);
  border-color: #fff;
  transform: scale(1.1);
}

/* ==========================================================================
   TOAST NOTICE (AVISOS FLUTUANTES)
   ========================================================================== */
.toast-notice {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(36, 6, 18, 0.95);
  backdrop-filter: blur(12px);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 111, 165, 0.35);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notice.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ==========================================================================
   LGPD — BANNER E PAINEL DE COOKIES + SKIP-LINK
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2000;
  background: var(--chrome-bg);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease-smooth);
}
.skip-link:focus { top: 16px; outline: 3px solid var(--pink-400); outline-offset: 2px; }

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1500;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 380px; font-size: 0.94rem; color: var(--text-secondary); line-height: 1.55; }
.cookie-banner__text strong { color: var(--wine-deep); display: block; margin-bottom: 4px; font-size: 1rem; }
.cookie-banner__text a { color: var(--pink-700); text-decoration: underline; }
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-banner__actions button {
  font-size: 0.86rem !important;
  padding: 10px 18px !important;
}

.cookie-panel {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cookie-panel[hidden] { display: none; }
.cookie-panel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 5, 12, 0.55);
  backdrop-filter: blur(4px);
}
.cookie-panel__box {
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  padding: 28px 28px 24px;
  max-height: 90vh;
  overflow-y: auto;
}
.cookie-panel__box h2 {
  font-family: var(--font-heading);
  color: var(--wine-deep);
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.cookie-panel__lead { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 18px; }
.cookie-panel__opt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
}
.cookie-panel__opt:hover { border-color: var(--pink-400); background: var(--pink-50); }
.cookie-panel__opt--required { background: var(--bg-soft-pink); border-color: var(--border-subtle); cursor: default; }
.cookie-panel__opt--required:hover { background: var(--bg-soft-pink); }
.cookie-panel__opt h3 { color: var(--wine-deep); font-size: 1rem; margin-bottom: 4px; }
.cookie-panel__opt p { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.cookie-panel__opt input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--pink-600); flex-shrink: 0; }
.cookie-panel__pill {
  background: var(--pink-100);
  color: var(--pink-800);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  align-self: center;
}
.cookie-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.cookie-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}
.cookie-panel__close:hover { background: var(--pink-50); color: var(--pink-700); }

body.high-contrast .cookie-banner,
body.high-contrast .cookie-panel__box {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}
body.high-contrast .cookie-panel__opt { background: #000 !important; border-color: #fff !important; }
body.high-contrast .cookie-panel__pill { background: #fff !important; color: #000 !important; }

/* Compensa o banner para não cobrir o footer / conteúdo final */
body.has-cookie-banner { padding-bottom: 180px; }
@media (max-width: 720px) { body.has-cookie-banner { padding-bottom: 240px; } }

/* ==========================================================================
   RESPONSIVIDADE (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 1024px) {
  .guide-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .hero-grid,
  .share-love-banner,
  .checklist-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .guide-scenes-bar {
    grid-template-columns: 1fr;
  }

  .stats-cards-grid,
  .sus-journey-grid,
  .trust-grid,
  .support-contacts-grid,
  .prevention-grid,
  .rights-timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .care-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .care-notice__link {
    grid-column: 2;
  }
}

/* Menu hambúrguer até 1100px: links + CTA não cabem no cabeçalho abaixo disso */
@media (max-width: 1100px) {
  .nav-links, .btn-header-cta {
    display: none;
  }

  .menu-toggle {
    display: flex;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .menu-toggle span {
    transition: transform 0.3s ease, opacity 0.2s ease;
  }

  .mobile-menu-active .menu-toggle span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }

  .mobile-menu-active .menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .mobile-menu-active .menu-toggle span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  .mobile-menu-active .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 20px 24px;
    border-bottom: 2px solid var(--border-subtle);
    box-shadow: 0 16px 36px rgba(68, 13, 36, 0.15);
    animation: mobileSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    gap: 4px;
  }

  @keyframes mobileSlideDown {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-menu-active .nav-links .nav-link {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wine-deep);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-menu-active .nav-links .nav-link:hover {
    background: var(--pink-50);
    color: var(--pink-600);
  }
}

@media (max-width: 1260px) and (min-width: 1101px) {
  .nav-links {
    gap: 14px;
  }
  .nav-link {
    font-size: 0.82rem;
  }
  .btn-header-cta {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
  .brand-title {
    font-size: 1.02rem;
  }
  .brand-subtitle {
    font-size: 0.67rem;
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .a11y-sub {
    display: none;
  }
  .a11y-wrap {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
  }
  .a11y-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .brand-logo-img {
    height: 40px;
    border-radius: 8px;
  }
  .brand-title {
    font-size: 1.05rem;
  }
  .brand-subtitle {
    font-size: 0.68rem;
    line-height: 1.25;
  }
  .guide-scenes-bar,
  .guide-steps-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 2px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .guide-scene-card,
  .guide-step-card {
    flex: 0 0 calc(100% - 22px);
    scroll-snap-align: start;
  }

  .guide-step-card.active {
    transform: none;
  }

  .mobile-swipe-hint {
    display: block;
    margin: -10px 0 12px;
    color: #fedbe8;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .guide-modern {
    padding: 34px 20px;
  }

  .stats-cards-grid,
  .sus-journey-grid,
  .trust-grid,
  .support-contacts-grid,
  .prevention-grid,
  .rights-timeline {
    grid-template-columns: 1fr;
  }

  .rights-support {
    flex-direction: column;
    align-items: flex-start;
  }

  .quiz-section {
    padding: 30px 18px;
  }

  .quiz-stepper {
    flex-wrap: wrap;
    gap: 10px;
  }

  .step-divider {
    display: none;
  }

  .quiz-options-grid {
    grid-template-columns: 1fr;
  }

  .share-action-group {
    flex-direction: column;
  }

  .checklist-sidebar {
    position: static;
  }

  .hero-float-pill {
    position: static;
    margin-top: 16px;
  }

  .hero-data-callout {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 12px;
    padding: 10px 14px;
    justify-content: center;
  }

  .hero-data-callout .callout-value {
    font-size: 1.15rem;
  }

  .hero-data-callout .callout-label {
    font-size: 0.68rem;
  }

  .care-notice {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
  }

  .care-notice__link {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .brand-title {
    font-size: 0.94rem;
  }
  .brand-title .brand-theme {
    font-size: 0.86rem;
  }
  .brand-subtitle {
    font-size: 0.65rem;
  }

  .hero-badge {
    max-width: 100%;
    padding: 7px 12px;
    font-size: 0.72rem;
    line-height: 1.35;
    letter-spacing: 0.035em;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  .a11y-wrap {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .btn-zoom-float {
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    font-size: 0.76rem;
  }

  .guide-showcase-box {
    padding: 8px;
    border-radius: var(--radius-lg);
  }

  .guide-footer-controls {
    align-items: stretch;
  }

  .guide-footer-controls .btn-secondary {
    width: 100%;
  }

  .integrated-care-card {
    padding: 22px 18px;
  }

  .integrated-care-card__layout {
    gap: 14px;
  }

  .integrated-care-card__tags > span:nth-child(2) {
    display: none;
  }

  .checklist-card,
  .checklist-sidebar,
  .quiz-section,
  .guide-modern {
    padding: 22px 14px;
  }

  .reminder-box {
    padding: 24px 16px;
  }

  .reminder-btn-group {
    flex-direction: column;
    width: 100%;
  }

  .reminder-btn-group a {
    width: 100%;
    justify-content: center;
  }

  .toast-notice {
    width: 90%;
    bottom: 18px;
    font-size: 0.82rem;
    padding: 10px 16px;
  }

  .btn-back-to-top {
    bottom: 18px;
    right: 18px;
    left: auto;
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   ESTILOS DE IMPRESSÃO (PRINT ONLY / MEDIA PRINT)
   Garante que o botão "Imprimir Lista" imprima apenas a listagem do Checklist
   ========================================================================== */
.print-only {
  display: none !important;
}

@media print {
  /* Configuração de página e margens A4 */
  @page {
    size: A4 portrait;
    margin: 8mm 12mm 8mm 12mm;
  }

  /* Reset global de renderização para impressão */
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  html, body {
    background: var(--bg-surface) !important;
    color: #111827 !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Oculta tudo que NÃO seja a listagem do checklist */
  .a11y-bar,
  .site-header,
  .site-footer,
  .toast-notice,
  .btn-back-to-top,
  .lightbox-modal,
  .reminder-box,
  main > section:not(#checklist),
  .checklist-sidebar,
  #checklist .section-header {
    display: none !important;
  }

  /* Exibe elementos específicos de impressão */
  .print-only {
    display: block !important;
  }

  /* Reset da seção do checklist */
  #checklist {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
  }

  #checklist .wrap {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .checklist-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .checklist-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cabeçalho do Documento Impresso */
  .print-header {
    display: block !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #d21972 !important;
    padding-bottom: 8px !important;
  }

  .print-header-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
  }

  .print-brand-badge {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .print-doc-title {
    font-size: 12.5pt !important;
    font-weight: 800 !important;
    color: #8e0e47 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    font-family: var(--font-heading, sans-serif) !important;
  }

  .print-doc-sub {
    font-size: 7.8pt !important;
    color: #4b5563 !important;
    margin: 2px 0 0 0 !important;
  }

  .print-meta-box {
    font-size: 7.5pt !important;
    color: #6b7280 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .print-patient-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: var(--pink-50) !important;
    border: 1px solid #fbcfe8 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-patient-row {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-end !important;
  }

  .print-field {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
  }

  .print-field-grow {
    flex: 1 !important;
  }

  .print-field-label {
    font-size: 8pt !important;
    font-weight: 700 !important;
    color: #374151 !important;
    white-space: nowrap !important;
  }

  .print-field-line {
    flex: 1 !important;
    border-bottom: 1px dashed #9ca3af !important;
    min-height: 13px !important;
  }

  /* Grupos de Itens */
  .checklist-group {
    margin-bottom: 9px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .checklist-group-title {
    font-size: 9.5pt !important;
    font-weight: 700 !important;
    color: #8e0e47 !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-bottom: 1px solid #fedbe8 !important;
    padding-bottom: 2px !important;
  }

  .checklist-group-title svg {
    width: 14px !important;
    height: 14px !important;
  }

  .checklist-items {
    display: grid !important;
    gap: 3px !important;
  }

  .check-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    background: var(--bg-surface) !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    cursor: default !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .check-item input[type="checkbox"] {
    display: none !important;
  }

  .check-item .print-check-box {
    display: inline-flex !important;
    width: 13px !important;
    height: 13px !important;
    border: 1.5px solid #9ca3af !important;
    border-radius: 3px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8.5pt !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    color: transparent !important;
    background: var(--bg-surface) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .check-item.checked {
    background: var(--pink-50) !important;
    border-color: #f472b6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .check-item.checked .print-check-box {
    border-color: #8e0e47 !important;
    background-color: #fce7f3 !important;
    color: #8e0e47 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .check-item-text {
    font-size: 8pt !important;
    color: #374151 !important;
    line-height: 1.25 !important;
  }

  .check-item.checked .check-item-text {
    font-weight: 700 !important;
    color: #8e0e47 !important;
  }

  /* Bloco de Anotações Médicas e Rodapé Oficial */
  .print-footer-section {
    display: block !important;
    margin-top: 8px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .print-notes-box {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
    background: var(--bg-surface) !important;
  }

  .print-notes-title {
    font-size: 7.5pt !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  .print-notes-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 3px 0 2px 0 !important;
  }

  .print-note-line {
    border-bottom: 1px dashed #cbd5e1 !important;
    height: 1px !important;
    width: 100% !important;
  }

  .print-official-footer {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 5px !important;
    font-size: 6.5pt !important;
    color: #6b7280 !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  .print-official-footer p {
    margin: 0 0 2px 0 !important;
  }

  .print-footer-badges {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    color: #9d174d !important;
    font-size: 6.5pt !important;
  }
}

/* ==========================================================================
   PREFER-REDUCED-MOTION (WCAG 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pulse-dot,
  .callout-pulse-ring,
  .float-anim,
  .skeleton-shimmer { animation: none !important; }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   DARK MODE SUAVE (não confundir com alto contraste)
   ========================================================================== */
/* Tema claro explícito: controles nativos (rolagem, campos) também claros, mesmo com o sistema em modo escuro. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* ATENÇÃO — o tema escuro existe em DOIS lugares que precisam ficar idênticos:
   1) :root[data-theme="dark"]       → quando a pessoa escolhe "escuro";
   2) @media (prefers-color-scheme: dark) { :root:not([data-theme]) } → tema "automático" com o sistema em escuro.
   O teste tests/unit/theme-css.test.js compara os dois e falha se divergirem. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #1a0d12;
  --bg-surface: #26151c;
  --bg-surface-glass: rgba(38, 21, 28, 0.85);
  --bg-soft-pink: #2a1820;

  --text-primary: #f5e6ec;
  --text-secondary: #c9a8b6;
  --text-muted: #9a7d8a;
  --text-inverse: #ffffff;

  --border-subtle: #3d2330;
  --border-strong: #6b3a52;

  --wine-deep: #f5e6ec;
  --wine-dark: #d9b5c4;
  --wine-muted: #b8939f;
  --chrome-bg: #1d0a13;

  --pink-50: #2a1820;
  --pink-100: #3d2330;
  --pink-200: #6b3a52;
  --pink-300: #b34477;
  --pink-400: #d8538a;
  --pink-500: #ec6ba0;
  --pink-600: #ff80ab;
  --pink-700: #ffa6c5;
  --pink-800: #ffc8db;
  --pink-900: #ffe0eb;
  --pink-950: #fff5fa;

  --gold-light: #2a1f15;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.4);
  --shadow-pink-glow: 0 12px 30px rgba(255, 128, 171, 0.35);
}

/* Tema "automático" (sem data-theme): acompanha o modo escuro do sistema. Cópia do bloco acima. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-page: #1a0d12;
    --bg-surface: #26151c;
    --bg-surface-glass: rgba(38, 21, 28, 0.85);
    --bg-soft-pink: #2a1820;

    --text-primary: #f5e6ec;
    --text-secondary: #c9a8b6;
    --text-muted: #9a7d8a;
    --text-inverse: #ffffff;

    --border-subtle: #3d2330;
    --border-strong: #6b3a52;

    --wine-deep: #f5e6ec;
    --wine-dark: #d9b5c4;
    --wine-muted: #b8939f;
    --chrome-bg: #1d0a13;

    --pink-50: #2a1820;
    --pink-100: #3d2330;
    --pink-200: #6b3a52;
    --pink-300: #b34477;
    --pink-400: #d8538a;
    --pink-500: #ec6ba0;
    --pink-600: #ff80ab;
    --pink-700: #ffa6c5;
    --pink-800: #ffc8db;
    --pink-900: #ffe0eb;
    --pink-950: #fff5fa;

    --gold-light: #2a1f15;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.4);
    --shadow-pink-glow: 0 12px 30px rgba(255, 128, 171, 0.35);
  }
}

/* ==========================================================================
   TYPE SCALE MODULAR (1.250) + BALANCE + LETTER-SPACING
   ========================================================================== */
h1, .h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
h2, .h2 { font-size: clamp(1.55rem, 3.2vw, 2.4rem); line-height: 1.18; letter-spacing: -0.018em; text-wrap: balance; }
h3, .h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
h4, .h4 { font-size: 1.1rem; line-height: 1.4; letter-spacing: -0.005em; }
h5, .h5 { font-size: 0.95rem; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' on, 'lnum' on; }

/* ==========================================================================
   ONDAS DECORATIVAS ENTRE SEÇÕES
   ========================================================================== */
.section-wave {
  display: block;
  width: 100%;
  height: 60px;
  margin: -1px 0;
  pointer-events: none;
  user-select: none;
}
.section-wave svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   HERO APRIMORADO — OVERLAY GRADIENT + PATTERN + CALLOUT PULSANTE
   ========================================================================== */
.hero-photo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(78, 12, 40, 0) 50%, rgba(78, 12, 40, 0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-photo-frame img {
  transition: transform 0.6s var(--ease-smooth);
}
.hero-photo-frame:hover img {
  transform: scale(1.04);
}

.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 12% 80%, rgba(255, 128, 171, 0.12) 0%, transparent 25%),
    radial-gradient(circle at 88% 12%, rgba(255, 192, 217, 0.18) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(253, 219, 232, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero-ribbons {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.4;
}
.hero-ribbons::before,
.hero-ribbons::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(255, 128, 171, 0.25) 0%, transparent 70%);
  filter: blur(20px);
}
.hero-ribbons::before { top: 5%; right: 8%; transform: rotate(-15deg); }
.hero-ribbons::after { bottom: 10%; left: 4%; transform: rotate(25deg); width: 280px; height: 180px; }

.callout-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--pink-400);
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0% { transform: scale(0.96); opacity: 0.7; }
  100% { transform: scale(1.18); opacity: 0; }
}
.hero-data-callout.is-pulsing { overflow: visible; }

/* ==========================================================================
   ELEVATION CARDS — HOVER LIFT + BORDA LATERAL COLORIDA
   ========================================================================== */
.card-elev {
  transition: transform 0.32s var(--ease-smooth), box-shadow 0.32s var(--ease-smooth);
}
.card-elev:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-accent {
  position: relative;
  overflow: hidden;
}
.card-accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--pink-400), var(--pink-700));
  border-radius: 4px 0 0 4px;
}

.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-100), var(--pink-300));
  color: var(--wine-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -4px rgba(210, 25, 114, 0.3);
}

/* ==========================================================================
   MICROINTERAÇÕES
   ========================================================================== */

/* Ripple leve no :active */
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active {
  transform: scale(0.97);
}

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft-pink) 0%, var(--pink-100) 50%, var(--bg-soft-pink) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
  min-height: 14px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Floating icons do hero */
.float-anim { animation: floatY 6s ease-in-out infinite; }
.float-anim-delay { animation: floatY 6s ease-in-out infinite; animation-delay: 2s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Gradient header on scroll */
.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(78, 12, 40, 0.12);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}
:root[data-theme="dark"] .site-header.scrolled {
  background: rgba(38, 21, 28, 0.92);
}
/* Itens do checklist tinham fundo e borda claros fixos (#fafafa/#f0f0f0): texto claro sobre fundo claro */
:root[data-theme="dark"] .check-item {
  background: var(--bg-soft-pink);
  border-color: var(--border-subtle);
}
/* Fundos claros fixos (gradientes): no tema escuro o texto claro ficava quase invisível sobre eles */
:root[data-theme="dark"] .quiz-section {
  background: linear-gradient(180deg, var(--bg-soft-pink) 0%, var(--bg-surface) 100%);
}
:root[data-theme="dark"] .reminder-box {
  background: linear-gradient(135deg, var(--bg-soft-pink) 0%, var(--pink-100) 100%);
}
:root[data-theme="dark"] .hero {
  background: radial-gradient(circle at 90% 25%, rgba(236, 107, 160, 0.16) 0%, transparent 35%),
              linear-gradient(135deg, #1a0d12 0%, #201118 60%, #2a1820 100%);
}
:root[data-theme="dark"] .brand-logo-img,
body.high-contrast .brand-logo-img {
  background: rgba(255, 255, 255, 0.95);
  padding: 3px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Cópia dos ajustes do tema escuro acima para o tema "automático" com o sistema em modo escuro
   (manter idêntico: tests/unit/theme-css.test.js compara) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-header.scrolled {
    background: rgba(38, 21, 28, 0.92);
  }
  :root:not([data-theme]) .check-item {
    background: var(--bg-soft-pink);
    border-color: var(--border-subtle);
  }
  :root:not([data-theme]) .quiz-section {
    background: linear-gradient(180deg, var(--bg-soft-pink) 0%, var(--bg-surface) 100%);
  }
  :root:not([data-theme]) .reminder-box {
    background: linear-gradient(135deg, var(--bg-soft-pink) 0%, var(--pink-100) 100%);
  }
  :root:not([data-theme]) .hero {
    background: radial-gradient(circle at 90% 25%, rgba(236, 107, 160, 0.16) 0%, transparent 35%),
                linear-gradient(135deg, #1a0d12 0%, #201118 60%, #2a1820 100%);
  }
  :root:not([data-theme]) .brand-logo-img {
    background: rgba(255, 255, 255, 0.95);
    padding: 3px 6px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}

/* ==========================================================================
   CHECKBOX ANIMADO
   ========================================================================== */
/* O visual é o .check-box (span irmão). O <input> nativo continua no DOM para teclado e leitor de tela,
   mas fica transparente: antes ele era desenhado por um CSS antigo e aparecia uma segunda caixinha ao lado. */
.check-item { position: relative; }
.check-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 16px;
  top: 12px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.check-item .check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  background: var(--bg-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  cursor: pointer;
}
.check-item .check-box::after {
  content: "✓";
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.22s var(--ease-smooth);
}
.check-item input[type="checkbox"]:checked + .check-box {
  background: linear-gradient(135deg, var(--pink-500), var(--pink-700));
  border-color: var(--pink-700);
}
.check-item input[type="checkbox"]:checked + .check-box::after {
  opacity: 1;
  transform: scale(1);
}
.check-item input[type="checkbox"]:focus-visible + .check-box {
  outline: 3px solid var(--pink-300);
  outline-offset: 2px;
}

/* ==========================================================================
   ESTADO VAZIO FAQ
   ========================================================================== */
.faq-empty {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.faq-empty.visible { display: block; }
.faq-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--pink-50);
  color: var(--pink-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}
.faq-search-clear.visible { display: inline-flex; }
.faq-search-clear:hover { background: var(--pink-100); color: var(--pink-700); }
.faq-search-box { position: relative; }

/* ==========================================================================
   BOTÃO GHOST
   ========================================================================== */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--pink-700);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}
.btn-ghost:hover {
  background: var(--pink-50);
  border-color: var(--pink-300);
}
.btn-ghost:focus-visible {
  outline: 3px solid var(--pink-300);
  outline-offset: 2px;
}

/* ==========================================================================
   FOOTER APRIMORADO
   ========================================================================== */
.site-footer {
  font-size: 0.92rem;
}
.footer-grid {
  font-variant-numeric: tabular-nums;
}
.footer-links a {
  text-decoration: underline;
  text-decoration-color: rgba(252, 231, 241, 0.25);
  text-underline-offset: 3px;
}
.footer-links a:hover {
  text-decoration-color: var(--pink-300);
}
.footer-link-external::after {
  content: " ↗";
  font-size: 0.8em;
  opacity: 0.7;
}
.footer-bottom {
  border-top: 1px solid rgba(252, 231, 241, 0.15);
  padding-top: 24px;
  padding-bottom: 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.footer-theme-switcher {
  display: inline-flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px;
  border-radius: var(--radius-pill);
}
.footer-theme-btn {
  background: transparent;
  border: none;
  color: #fce7f1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.footer-theme-btn[aria-pressed="true"] {
  background: var(--pink-600);
  color: #fff;
}
.footer-theme-btn:hover { background: rgba(255, 255, 255, 0.15); }
.footer-theme-btn:focus-visible {
  outline: 2px solid var(--pink-300);
  outline-offset: 2px;
}

/* ==========================================================================
   CONTAINER MAX-WIDTHS VARIADOS
   ========================================================================== */
.section-narrow .wrap { max-width: 880px; }
.section-wide .wrap { max-width: 1280px; }

/* ==========================================================================
   PRINT APRIMORADO — números de página e cabeçalhos de tabela
   ========================================================================== */
@page {
  margin: 14mm 12mm;
  @bottom-center { content: counter(page) " de " counter(pages); }
}

table thead { display: table-header-group; }

/* ==========================================================================
   ALTO CONTRASTE — REGRAS EXPLÍCITAS COM !important
   Aplicadas após o body.high-contrast acima para garantir que sobrescrevem
   QUALQUER regra anterior dos temas (light/dark/auto).
   ========================================================================== */
html body.high-contrast .faq-question,
body.high-contrast .faq-question,
body.high-contrast .faq-question:hover,
body.high-contrast .myth-question,
body.high-contrast .myth-explanation,
body.high-contrast .quiz-question-title,
body.high-contrast .quiz-question-sub,
body.high-contrast .quiz-option,
body.high-contrast .check-item,
body.high-contrast .check-item-text,
body.high-contrast .hero-title,
body.high-contrast .hero-lead,
body.high-contrast .hero-tag,
body.high-contrast .section-title,
body.high-contrast .section-desc,
body.high-contrast .section-label,
body.high-contrast .sus-step h3,
body.high-contrast .sus-step p,
body.high-contrast .support-card h4,
body.high-contrast .support-card p,
body.high-contrast .stat-card-label,
body.high-contrast .stat-card-sub,
body.high-contrast .stat-card-num,
body.high-contrast .reminder-content h3,
body.high-contrast .reminder-content p,
body.high-contrast .share-title,
body.high-contrast .share-desc,
body.high-contrast .guide-step-card,
body.high-contrast .guide-step-card h4,
body.high-contrast .guide-step-card p,
body.high-contrast .guide-scene-card,
body.high-contrast .guide-scene-card h4,
body.high-contrast .guide-scene-card p,
body.high-contrast .preview-bubble,
body.high-contrast .preview-tag,
body.high-contrast .preview-tag span,
body.high-contrast .myth-card,
body.high-contrast .stat-card-modern,
body.high-contrast .sus-step,
body.high-contrast .support-card,
body.high-contrast .guide-modern,
body.high-contrast .quiz-card-box,
body.high-contrast .recipient-btn,
body.high-contrast .recipient-btn.active,
body.high-contrast .myth-answer,
body.high-contrast .myth-explanation,
body.high-contrast .guide-step-card.active,
body.high-contrast .checklist-group-title,
body.high-contrast .counter-title,
body.high-contrast .counter-desc,
body.high-contrast .reminder-content,
body.high-contrast .lightbox-content,
body.high-contrast .lightbox-caption,
body.high-contrast .checklist-card {
  color: #ffffff !important;
  background-color: #000000 !important;
}
body.high-contrast .site-header,
body.high-contrast .site-header a,
body.high-contrast .site-header .menu-toggle span,
body.high-contrast .brand-title,
body.high-contrast .brand-subtitle,
body.high-contrast .brand-title .brand-theme,
body.high-contrast .brand-title .brand-dash {
  color: #ffffff !important;
  background-color: #000000 !important;
  background-image: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.high-contrast .site-footer,
body.high-contrast .site-footer a,
body.high-contrast .site-footer h4,
body.high-contrast .site-footer h5,
body.high-contrast .site-footer p,
body.high-contrast .site-footer .footer-theme-btn {
  color: #ffffff !important;
  background-color: #000000 !important;
}
body.high-contrast .footer-theme-btn[aria-pressed="true"] {
  color: #000000 !important;
  background-color: #ff80ab !important;
}
body.high-contrast .photo-caption-bar {
  color: #ffffff !important;
  background: #000000 !important;
}
body.high-contrast .photo-caption-dot {
  background: #ff80ab !important;
}
body.high-contrast .btn-primary,
body.high-contrast .btn-secondary,
body.high-contrast .btn-ghost,
body.high-contrast .btn-header-cta,
body.high-contrast .btn-copy-msg,
body.high-contrast .btn-whatsapp {
  color: #000000 !important;
  background-color: #ff80ab !important;
  border: 2px solid #ffffff !important;
}
body.high-contrast .btn-secondary {
  color: #ffffff !important;
  background-color: #000000 !important;
}
body.high-contrast .btn-ghost {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
}
body.high-contrast a.support-link,
body.high-contrast a.nav-link,
body.high-contrast a.footer-link-external,
body.high-contrast a.footer-links a {
  color: #ff80ab !important;
  text-decoration: underline !important;
}
body.high-contrast .badge-truth { color: #00ff88 !important; }
body.high-contrast .badge-myth { color: #ff80ab !important; }
/* Os selos mantinham o fundo claro (#dcfce7/#fee2e2) com texto neon: 1,2:1 a 1,9:1 de contraste */
body.high-contrast .myth-badge {
  background: #000000 !important;
  border: 2px solid currentColor;
}
body.high-contrast .hero-data-callout,
body.high-contrast .hero-photo-frame {
  background-color: #000000 !important;
  border-color: #ffffff !important;
}
body.high-contrast .callout-value { color: #ff80ab !important; }
body.high-contrast .callout-label { color: #ffffff !important; }
body.high-contrast .icon-circle { background: #ff80ab !important; color: #000000 !important; }
body.high-contrast .card-accent::before { background: #ff80ab !important; }
body.high-contrast .quiz-option { border-color: #ffffff !important; }
body.high-contrast .quiz-option.selected { background: #ff80ab !important; color: #000000 !important; }
body.high-contrast .check-box { background: #000000 !important; border-color: #ffffff !important; }
body.high-contrast .check-item input[type="checkbox"]:checked + .check-box { background: #ff80ab !important; }
body.high-contrast .footer-bottom { border-color: #ffffff !important; }
body.high-contrast .hero-pattern,
body.high-contrast .hero-ribbons,
body.high-contrast .callout-pulse-ring { display: none !important; }
body.high-contrast .hero {
  background: #000000 !important;
}
body.high-contrast .a11y-bar {
  background: #000000 !important;
  color: #ffffff !important;
}
body.high-contrast .pulse-dot { background: #ff80ab !important; }
body.high-contrast .faq-icon-arrow { color: #ff80ab !important; }
body.high-contrast .faq-item.active .faq-question { background: #000000 !important; }
body.high-contrast .rights-support {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
}

/* ==========================================================================
   ALTO CONTRASTE — VARIÁVEIS (declaração por último para vencer o cascade)
   Aplicado em body.high-contrast. Os tokens abaixo SOBRESCREVEM qualquer
   outro tema (claro, escuro ou auto) e garantem contraste AAA.
   ========================================================================== */
body.high-contrast {
  --bg-page: #000000;
  --bg-surface: #000000;
  --bg-surface-glass: rgba(0, 0, 0, 0.95);
  --bg-soft-pink: #000000;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-muted: #ffffff;
  --text-inverse: #000000;
  --wine-deep: #ffffff;
  --wine-dark: #ffffff;
  --wine-muted: #ffffff;
  --pink-50: #000000;
  --pink-100: #1a1a1a;
  --pink-200: #ffffff;
  --pink-300: #ffffff;
  --pink-400: #ff80ab;
  --pink-500: #ff80ab;
  --pink-600: #ff80ab;
  --pink-700: #ff80ab;
  --pink-800: #ff80ab;
  --pink-900: #ff80ab;
  --pink-950: #ff80ab;
  --gold-light: #000000;
  --gold-accent: #ff80ab;
  --emerald-light: #000000;
  --emerald-accent: #00ff88;
  --border-subtle: #ffffff;
  --border-strong: #ffffff;
  --shadow-sm: 0 0 0 transparent;
  --shadow-md: 0 0 0 transparent;
  --shadow-lg: 0 0 0 transparent;
  --shadow-pink-glow: 0 0 0 transparent;
}