/* ===========================================
   Ícones customizados (substituem emoji que não existem)
   =========================================== */
.icone-mamao,
.icone-colheita,
.icone-cafe,
.icone-conversa {
    width: 1em;
    height: 1em;
    vertical-align: -0.18em;
    object-fit: contain;
    display: inline-block;
}

/* ===========================================
   Café 360 — Base
   Tipografia, botões, cards, inputs, layout.
   =========================================== */

/* ====== TIPOGRAFIA HIERÁRQUICA ====== */

h1 {
  font-size: var(--fs-display);
  font-weight: var(--peso-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--verde-escuro);
}

h2 {
  font-size: var(--fs-titulo);
  font-weight: var(--peso-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-titulo);
  color: var(--verde-escuro);
}

h3 {
  font-size: var(--fs-subtitulo);
  font-weight: var(--peso-semi);
  line-height: var(--lh-snug);
  color: var(--verde-escuro);
}

h4 {
  font-size: var(--fs-base);
  font-weight: var(--peso-semi);
  line-height: var(--lh-snug);
  color: var(--verde-escuro);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* Manuscrita Caveat — uso cirúrgico */
.manuscrito,
.cursive {
  font-family: var(--fonte-manuscrita);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--verde-escuro);
}

.cursive-md { font-size: var(--fs-cursive-md); line-height: 1.0; }
.cursive-lg { font-size: var(--fs-cursive-lg); line-height: 1.0; }
.cursive-xl { font-size: var(--fs-cursive-xl); line-height: 1.0; font-weight: 700; }

.label-tag {
  font-size: var(--fs-micro);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--texto-secundario);
}

.texto-secundario {
  color: var(--texto-secundario);
  font-size: var(--fs-pequeno);
}

.texto-claro { color: var(--texto-claro); }

/* ====== MÉTRICA HERO — números importantes ====== */

.metrica-hero {
  font-size: var(--fs-hero);
  font-weight: var(--peso-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--verde-escuro);
  font-variant-numeric: tabular-nums;
}

.metrica-hero-sufixo {
  font-size: 0.55em;
  font-weight: var(--peso-normal);
  color: var(--texto-secundario);
  margin-left: 4px;
  letter-spacing: 0;
}

.metrica-display {
  font-size: var(--fs-display);
  font-weight: var(--peso-bold);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--verde-escuro);
}

/* ====== LAYOUT ====== */

.container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gap-lg);
}

/* ====== BOTÕES ====== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: var(--toque-minimo);
  padding: var(--gap-sm) var(--gap-xl);
  border-radius: var(--raio-sm);
  font-size: var(--fs-base);
  font-weight: var(--peso-semi);
  font-family: inherit;
  transition: all var(--transicao-rapida);
  user-select: none;
  -webkit-user-select: none;
  border: none;
  cursor: pointer;
}

.btn-primario {
  background: var(--verde-medio);
  color: var(--texto-invertido);
  box-shadow: var(--sombra-leve);
  min-height: var(--toque-minimo);
  padding: var(--gap-md) var(--gap-xl);
  border-radius: var(--raio-sm);
  font-size: var(--fs-base);
  font-weight: var(--peso-semi);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transicao-rapida);
}
.btn-primario:active {
  background: var(--verde-escuro);
  transform: translateY(1px);
  box-shadow: var(--sombra-sutil);
}
.btn-primario:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-secundario {
  background: var(--branco);
  color: var(--verde-escuro);
  border: 1.5px solid var(--bege-medio);
  min-height: var(--toque-minimo);
  padding: var(--gap-md) var(--gap-xl);
  border-radius: var(--raio-sm);
  font-size: var(--fs-base);
  font-weight: var(--peso-semi);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transicao-rapida);
}
.btn-secundario:active {
  background: var(--bege-suave);
  border-color: var(--verde-medio);
}

.btn-dourado {
  background: linear-gradient(135deg, var(--dourado), #B8954B);
  color: var(--texto-invertido);
  box-shadow: var(--sombra-dourada);
  min-height: var(--toque-minimo);
  padding: var(--gap-md) var(--gap-xl);
  border-radius: var(--raio-sm);
  font-size: var(--fs-base);
  font-weight: var(--peso-semi);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transicao-rapida);
}
.btn-dourado:active {
  transform: translateY(1px);
  box-shadow: var(--sombra-sutil);
}

.btn-destrutivo {
  background: var(--alerta);
  color: var(--texto-invertido);
  box-shadow: var(--sombra-leve);
  min-height: var(--toque-minimo);
  padding: var(--gap-md) var(--gap-xl);
  border-radius: var(--raio-sm);
  font-size: var(--fs-base);
  font-weight: var(--peso-semi);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transicao-rapida);
}
.btn-destrutivo:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}

.btn-bloco { width: 100%; }

.btn-grande {
  min-height: var(--toque-conforto);
  font-size: var(--fs-medio);
  border-radius: var(--raio-md);
  padding: var(--gap-md) var(--gap-xxl);
}

/* ====== CARDS ====== */

.card {
  background: var(--branco);
  border-radius: var(--raio-md);
  padding: var(--gap-lg);
  box-shadow: var(--sombra-leve);
  border: 1px solid var(--linha-fina);
  transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.card-clicavel {
  cursor: pointer;
}
.card-clicavel:active {
  transform: scale(0.98);
  box-shadow: var(--sombra-sutil);
}

.card-destaque {
  border-left: 3px solid var(--dourado);
}

.card-verde {
  background: linear-gradient(135deg, var(--verde-escuro), var(--verde-medio));
  color: var(--texto-invertido);
  border: none;
}

/* ====== INPUTS ====== */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-lg);
}

.campo .label,
.label {
  display: block;
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  color: var(--texto-secundario);
  margin-bottom: var(--gap-xs);
}

.campo input,
.campo select,
.campo textarea,
input.input,
select.input,
textarea.input,
.input {
  width: 100%;
  min-height: var(--toque-minimo);
  padding: var(--gap-md) var(--gap-lg);
  border: 1.5px solid var(--bege-medio);
  border-radius: var(--raio-sm);
  background: var(--branco);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--texto-principal);
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
input.input:focus,
select.input:focus,
textarea.input:focus,
.input:focus {
  border-color: var(--verde-medio);
  outline: none;
  box-shadow: 0 0 0 3px var(--verde-suave);
}

.input.textarea,
textarea.input {
  resize: vertical;
  min-height: 96px;
  padding: var(--gap-md);
}

input::placeholder,
textarea::placeholder {
  color: var(--texto-claro);
  opacity: 1;
}

/* ====== BADGES ====== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--gap-sm);
  border-radius: var(--raio-full);
  font-size: var(--fs-micro);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: 1.4;
}

.badge-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.badge-atencao { background: var(--atencao-suave); color: var(--texto-dourado); }
.badge-alerta  { background: var(--alerta-suave); color: var(--alerta); }
.badge-info    { background: var(--info-suave); color: var(--info); }
.badge-dourado { background: var(--dourado-suave); color: var(--texto-dourado); }
.badge-neutro  { background: var(--bege-medio); color: var(--texto-secundario); }

/* ====== TEXTURA DE CADERNO (sutil, opcional via classe) ====== */

.fundo-pautado {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 31px,
      var(--linha-pautada) 31px,
      var(--linha-pautada) 32px
    );
}

/* ====== UTILITÁRIOS ====== */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--gap-xs); }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }
.mb-sm { margin-bottom: var(--gap-sm); }
.mb-md { margin-bottom: var(--gap-md); }
.mb-lg { margin-bottom: var(--gap-lg); }

/* ====== ANIMAÇÕES ====== */

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

@keyframes pulseGentle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animar-entrada { animation: fadeInUp var(--transicao-media) ease-out forwards; }
.animar-pulse   { animation: pulseGentle 2.4s ease-in-out infinite; }