/* ============================================================
   BODY40 — MÉTODO DE ORGANIZAÇÃO ALIMENTAR
   Base CSS · Identidade Visual v1.0
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@400;600&display=swap');

/* ============================================================
   01 — DESIGN TOKENS (CSS Variables)
   ============================================================ */
:root {
  /* Paleta */
  --verde-floresta:  #1F3715;
  --verde-medio:     #3A5C28;
  --verde-salvia:    #5A6F37;
  --verde-nevoa:     #F0F5EB;
  --verde-gelo:      #E0EDD5;
  --verde-borda:     #C8D8BE;
  --terracota:       #C86432;
  --creme-quente:    #FFF8F0;
  --branco-natural:  #FAFCF8;
  --texto-principal: #2A3A20;
  --texto-label:     #7A8A6A;
  --texto-bold:      #1F3715;

  /* Tipografia */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --h1-size:    34px;
  --h2-size:    23px;
  --body-size:  16.5px;
  --label-size: 11px;
  --caption-size: 13px;

  /* Espaçamento */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  16px;
  --gap-lg:  24px;
  --gap-xl:  40px;

  /* Borda de assinatura */
  --borda-assinatura: 5px solid var(--verde-salvia);
  --borda-dica:       5px solid var(--terracota);

  /* Layout */
  --max-width: 680px;
  --padding-page: 20px;
  --radius: 8px;
}

/* ============================================================
   02 — RESET E BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--branco-natural);
  color: var(--texto-principal);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.65;
  min-height: 100vh;
}

/* ============================================================
   03 — LAYOUT
   ============================================================ */
.page-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-page);
}

.section {
  padding: var(--gap-xl) 0;
  border-bottom: 0.5px solid var(--verde-borda);
}

.section:last-of-type {
  border-bottom: none;
}

/* ============================================================
   04 — TIPOGRAFIA
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: 600;
  color: var(--verde-floresta);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 400;
  color: var(--verde-medio);
  line-height: 1.35;
  margin-bottom: var(--gap-md);
}

p {
  margin-bottom: var(--gap-md);
}

p:last-child {
  margin-bottom: 0;
}

.label {
  font-family: var(--font-body);
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--texto-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--caption-size);
  font-weight: 400;
  color: var(--texto-label);
}

strong, .bold-inline {
  font-weight: 600;
  color: var(--texto-bold);
}

/* ============================================================
   05 — CABEÇALHO DE MÓDULO
   ============================================================ */
.modulo-header {
  background-color: var(--verde-floresta);
  color: #FFFFFF;
  padding: var(--gap-lg) var(--padding-page);
  margin: 0 calc(-1 * var(--padding-page));
  text-align: center;
}

.modulo-header .label {
  color: var(--verde-gelo);
  margin-bottom: var(--gap-sm);
  display: block;
}

.modulo-header h1 {
  color: #FFFFFF;
  font-size: 27px;
}

.modulo-header > div {
  justify-content: center;
}

/* ============================================================
   06 — BOX DE DESTAQUE PRINCIPAL
   ============================================================ */
.box-destaque {
  background-color: var(--verde-nevoa);
  border-left: var(--borda-assinatura);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--gap-lg);
  margin: var(--gap-md) 0;
}

.box-destaque p {
  color: var(--verde-floresta);
  font-size: var(--body-size);
  margin-bottom: var(--gap-sm);
}

.box-destaque p:last-child {
  margin-bottom: 0;
}

.box-destaque .seta {
  color: var(--verde-salvia);
  font-weight: 600;
  margin-right: var(--gap-xs);
}

/* ============================================================
   07 — BOX DE DICA
   ============================================================ */
.box-dica {
  background-color: var(--creme-quente);
  border-left: var(--borda-dica);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--gap-lg);
  margin: var(--gap-md) 0;
}

.box-dica .dica-label {
  font-family: var(--font-body);
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--terracota);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--gap-sm);
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.box-dica p {
  color: var(--texto-principal);
}

/* ============================================================
   08 — BOX DE SABOTADOR
   ============================================================ */
.box-sabotador {
  background-color: var(--verde-nevoa);
  border-left: 3px solid var(--verde-floresta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--gap-lg);
  margin: var(--gap-md) 0;
}

.box-sabotador .sabotador-label {
  font-family: var(--font-body);
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--verde-salvia);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--gap-sm);
  display: block;
}

.box-sabotador h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--verde-floresta);
  margin-bottom: var(--gap-sm);
}

/* ============================================================
   09 — CARD DE RECEITA
   ============================================================ */
.card-receita {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--verde-borda);
  margin: var(--gap-md) 0;
}

.card-receita-header {
  background-color: var(--verde-floresta);
  color: #FFFFFF;
  padding: var(--gap-md) var(--gap-lg);
}

.card-receita-header h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: var(--gap-xs);
}

.card-receita-meta {
  display: flex;
  gap: var(--gap-md);
  margin-top: var(--gap-sm);
}

.card-receita-meta span {
  font-size: var(--caption-size);
  color: var(--verde-gelo);
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.card-receita-body {
  background-color: var(--branco-natural);
  padding: var(--gap-lg);
}

.card-receita-body .por-que {
  font-size: var(--caption-size);
  color: var(--texto-label);
  font-style: italic;
  margin-bottom: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-bottom: 0.5px solid var(--verde-borda);
}

.receita-secao-titulo {
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--texto-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--gap-sm);
  margin-top: var(--gap-md);
}

.receita-ingredientes {
  list-style: none;
  padding: 0;
}

.receita-ingredientes li {
  padding: var(--gap-xs) 0;
  border-bottom: 0.5px solid var(--verde-gelo);
  font-size: var(--body-size);
  color: var(--texto-principal);
}

.receita-ingredientes li:last-child {
  border-bottom: none;
}

.receita-preparo {
  list-style: none;
  padding: 0;
  counter-reset: passo;
}

.receita-preparo li {
  counter-increment: passo;
  padding: var(--gap-sm) 0;
  padding-left: 32px;
  position: relative;
  font-size: var(--body-size);
  border-bottom: 0.5px solid var(--verde-gelo);
}

.receita-preparo li:last-child {
  border-bottom: none;
}

.receita-preparo li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: var(--gap-sm);
  width: 22px;
  height: 22px;
  background-color: var(--verde-salvia);
  color: #FFF;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
}

/* ============================================================
   10 — TAGS DE PERFIL
   ============================================================ */
.tag-perfil {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: var(--label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tag-perfil.hormonal  { background: #FFF0E6; color: #C86432; }
.tag-perfil.metabolico { background: #E6F0FF; color: #2A5FA0; }
.tag-perfil.emocional  { background: #E6FFE6; color: #2A6A2A; }
.tag-perfil.ocupado    { background: #FFFBE6; color: #8A6000; }

/* Boxes condicionais de perfil (Módulo 3) */
.box-perfil {
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--gap-lg);
  margin: var(--gap-sm) 0;
}

.box-perfil.hormonal  { background: #FFF0E6; border-color: #C86432; }
.box-perfil.metabolico { background: #E6F0FF; border-color: #2A5FA0; }
.box-perfil.emocional  { background: #E6FFE6; border-color: #2A6A2A; }
.box-perfil.ocupado    { background: #FFFBE6; border-color: #8A6000; }

.box-perfil p { margin-bottom: 0; }

/* ============================================================
   11 — BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity 0.15s ease, transform 0.1s ease;
  width: 100%;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primario {
  background-color: var(--verde-floresta);
  color: #FFFFFF;
}

.btn-primario:hover {
  opacity: 0.9;
}

.btn-secundario {
  background-color: transparent;
  color: var(--verde-floresta);
  border: 2px solid var(--verde-floresta);
}

.btn-secundario:hover {
  background-color: var(--verde-nevoa);
}

.btn-ghost {
  background-color: var(--verde-gelo);
  color: var(--verde-floresta);
}

.btn-ghost:hover {
  background-color: var(--verde-borda);
}

/* ============================================================
   12 — BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.badge-modulo    { background: var(--verde-gelo);  color: var(--verde-floresta); }
.badge-receitas  { background: #FFF0E6; color: var(--terracota); }
.badge-dica      { background: var(--creme-quente); color: var(--terracota); }
.badge-concluido { background: var(--verde-nevoa);  color: var(--verde-medio); }

/* ============================================================
   13 — NAVEGAÇÃO DE MÓDULOS (bottom nav)
   ============================================================ */
.modulo-nav {
  display: flex;
  gap: var(--gap-sm);
  padding: var(--gap-lg) 0 var(--gap-xl);
  flex-direction: column;
}

.modulo-nav .btn + .btn {
  margin-top: 0;
}

/* ============================================================
   14 — DIVISOR DE SEÇÃO
   ============================================================ */
hr.divisor {
  border: none;
  border-top: 0.5px solid var(--verde-borda);
  margin: var(--gap-xl) 0;
}

/* ============================================================
   15 — AVISO LEGAL
   ============================================================ */
.aviso-legal {
  background-color: var(--verde-gelo);
  border-radius: var(--radius);
  padding: var(--gap-md) var(--gap-lg);
  margin: var(--gap-xl) 0 var(--gap-md);
}

.aviso-legal p {
  font-size: var(--caption-size);
  color: var(--texto-label);
  margin-bottom: 0;
}

/* ============================================================
   16 — LISTA DE CONTEÚDO (arrows)
   ============================================================ */
.lista-setas {
  list-style: none;
  padding: 0;
}

.lista-setas li {
  padding: var(--gap-sm) 0;
  padding-left: 20px;
  position: relative;
  color: var(--texto-principal);
}

.lista-setas li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--verde-salvia);
  font-weight: 600;
}

/* ============================================================
   17 — RESPONSIVIDADE
   ============================================================ */

/* Tablet */
@media (min-width: 600px) {
  :root {
    --h1-size: 38px;
    --h2-size: 25px;
    --padding-page: 32px;
  }

  .modulo-nav {
    flex-direction: row;
  }

  .btn {
    width: auto;
  }

  .btn-primario {
    flex: 1;
  }
}

/* Desktop */
@media (min-width: 900px) {
  :root {
    --h1-size: 42px;
    --padding-page: 40px;
  }

  body {
    padding: var(--gap-xl) 0;
  }

  .page-wrapper {
    box-shadow: 0 2px 24px rgba(31, 55, 21, 0.08);
    border-radius: 12px;
    overflow: hidden;
  }
}

/* ============================================================
   18 — ACESSIBILIDADE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--verde-salvia);
  outline-offset: 3px;
}