/* ===========================================================
   Método HERO — Emerson Lima Nutricionista
   Estilo compartilhado (hub + subpáginas)
   Paleta oficial do brand kit Emerson Lima Nutri
   =========================================================== */

:root {
  --verde-escuro: #12370f;
  --verde-medio: #3d5b47;
  --verde-claro: #a6c297;
  --dourado: #a68768;
  --dourado-claro: #c8a67e;
  --creme: #eae3d1;
  --branco: #ffffff;
  --navy: #071739;

  --card-bg: linear-gradient(135deg, #3d5b47 0%, #2c4735 100%);
  --card-border: rgba(166, 194, 151, 0.42);
  --card-bg-hover: linear-gradient(135deg, #47694f 0%, #34543e 100%);

  --maxw: 460px;
  --radius: 18px;

  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-sans);
  color: var(--creme);
  background: var(--navy);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(166, 135, 104, 0.32) 0%, rgba(166, 135, 104, 0) 55%),
    radial-gradient(90% 60% at 50% 115%, rgba(14, 38, 74, 0.55) 0%, rgba(14, 38, 74, 0) 60%),
    linear-gradient(180deg, #08193a 0%, #050f26 100%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px 22px 40px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- HERO / TOPO ---------- */
.hero { text-align: center; margin-bottom: 30px; }

.badge {
  width: 92px; height: 92px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--creme);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(198, 168, 106, 0.5);
}
.badge img { width: 66%; height: 66%; object-fit: contain; display: block; }

/* Foto do Emerson (avatar) + selo da folha */
.avatar-wrap {
  position: relative;
  width: 132px; height: 132px;
  margin: 0 auto 18px;
}
.avatar-photo {
  width: 132px; height: 132px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(198, 168, 106, 0.6);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 7px rgba(234, 227, 209, 0.045);
}
.avatar-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
.logo-seal {
  position: absolute;
  right: 0; bottom: 2px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--creme);
  border: 3px solid var(--verde-escuro);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.logo-seal img { width: 64%; height: 64%; object-fit: contain; display: block; }

.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: 0.02em;
  color: var(--creme);
  line-height: 1.1;
}
.brand-role {
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dourado-claro);
}

.hook {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.34;
  color: var(--branco);
  text-wrap: balance;
}
.hook .gold { color: var(--dourado-claro); font-style: italic; }
.subhook {
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(234, 227, 209, 0.72);
  max-width: 36ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.subhook .pillars { color: var(--creme); font-weight: 600; }

/* ---------- BOTÕES ---------- */
.links { display: flex; flex-direction: column; gap: 13px; }

.btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--creme);
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover, .btn:focus-visible {
  background: var(--card-bg-hover);
  border-color: rgba(198, 168, 106, 0.55);
  transform: translateY(-2px);
  outline: none;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(198, 168, 106, 0.55); }
.btn:active { transform: translateY(0) scale(0.99); }

.btn-ico {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  background: rgba(166, 194, 151, 0.12);
  border: 1px solid rgba(166, 194, 151, 0.18);
}
.btn-txt { flex: 1; min-width: 0; }
.btn-title { display: block; font-size: 15px; font-weight: 600; color: var(--branco); letter-spacing: 0.01em; line-height: 1.25; }
.btn-title.has-logo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn-title .wordmark { height: 16px; width: auto; display: block; }
.ico-mic { background: rgba(7, 23, 57, 0.42); border-color: rgba(200, 166, 126, 0.38); color: var(--dourado-claro); }
.ico-mic svg { display: block; }
.ico-dnpn { background: rgba(7, 23, 57, 0.42); border-color: rgba(234, 227, 209, 0.28); padding: 6px; }
.ico-dnpn img { width: 100%; height: auto; object-fit: contain; display: block; margin: auto; }
.btn-title .wordmark-dnpn { height: 29px; width: auto; display: block; }
.ico-brasao { background: rgba(7, 23, 57, 0.42); border-color: rgba(200, 166, 126, 0.38); padding: 5px; }
.ico-brasao img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.btn-sub { display: block; font-size: 12px; color: rgba(234, 227, 209, 0.62); margin-top: 3px; line-height: 1.3; }
.btn-chev { flex-shrink: 0; color: var(--dourado-claro); opacity: 0.75; font-size: 18px; }

/* Botão principal — WhatsApp (dourado) */
.btn-primary {
  background: linear-gradient(135deg, #bd9a6d 0%, #a68768 100%);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(166, 135, 104, 0.36);
}
.btn-primary .btn-title { color: #1a2f14; }
.btn-primary .btn-sub { color: rgba(26, 47, 20, 0.7); }
.btn-primary .btn-ico { background: rgba(18, 55, 15, 0.16); border-color: rgba(18, 55, 15, 0.18); }
.btn-primary .btn-chev { color: #1a2f14; opacity: 0.65; }
.btn-primary:hover, .btn-primary:focus-visible {
  background: linear-gradient(135deg, #c8a67e 0%, #b09372 100%);
  border-color: transparent;
}

/* Ícone oficial do WhatsApp no botão principal */
.btn-primary .ico-wa {
  background: #25d366;
  border-color: rgba(0, 0, 0, 0.1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.ico-wa svg { display: block; }

/* Divisor "é nutri?" */
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 2px 14px;
  color: rgba(234, 227, 209, 0.5);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(234, 227, 209, 0.16);
}

/* Botão dos nutris (contorno dourado) */
.btn-nutri {
  background: transparent;
  border-color: rgba(198, 168, 106, 0.45);
}
.btn-nutri .btn-ico { background: rgba(198, 168, 106, 0.14); border-color: rgba(198, 168, 106, 0.3); }
.btn-nutri:hover, .btn-nutri:focus-visible { background: rgba(198, 168, 106, 0.1); }

/* ---------- RODAPÉ ---------- */
.footer {
  margin-top: auto;
  padding-top: 34px;
  text-align: center;
}
.footer a { color: var(--dourado-claro); text-decoration: none; font-weight: 600; }
.footer a:hover { text-decoration: underline; }
.footer-handle { font-size: 13px; color: rgba(234, 227, 209, 0.8); }
.footer-seal {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(234, 227, 209, 0.4);
}

/* ---------- SUBPÁGINAS (placeholder) ---------- */
.center-card {
  margin: auto;
  text-align: center;
  padding: 20px 6px;
}
.center-card h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--branco);
  margin-top: 20px;
  text-wrap: balance;
}
.center-card p {
  font-size: 14.5px;
  color: rgba(234, 227, 209, 0.72);
  margin-top: 12px;
  max-width: 32ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(198, 168, 106, 0.45);
  color: var(--creme);
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: background 0.16s ease;
}
.back-link:hover { background: rgba(198, 168, 106, 0.12); }

/* ---------- ANIMAÇÃO DE ENTRADA ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate { opacity: 0; animation: riseIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.13s; }
.d3 { animation-delay: 0.21s; }
.d4 { animation-delay: 0.29s; }
.d5 { animation-delay: 0.37s; }
.d6 { animation-delay: 0.45s; }
.d7 { animation-delay: 0.53s; }

@media (prefers-reduced-motion: reduce) {
  .animate { opacity: 1; animation: none; }
  .btn { transition: none; }
  body { background-attachment: scroll; }
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 380px) {
  .shell { padding: 36px 16px 32px; }
  .hook { font-size: 18px; }
  .brand-name { font-size: 24px; }
}