/* PREVIEW-ONLY: fontes locais (no app real, o @import do Google Fonts) */
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/fonts/nunito-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/fonts/nunito-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/fonts/nunito-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}


/* ==========================================================================
   SHILOH — Sacred Sound · Design System
   Where sound becomes prayer.
   Paleta clara-dominante: marfim + ouro + navy.
   Regra: nenhuma cor literal fora dos blocos :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — paleta oficial
   -------------------------------------------------------------------------- */
:root{
  --ivory:#F6EFE1; --ivory-light:#FBF7EF; --ivory-gradient-top:#FBF6EC;
  --card:#FFFFFF; --card-border:#ECE3D0; --tint-blue:#EAF0F5; --blue-pale:#DCE6EF;
  --gold-start:#F0D488; --gold-end:#C9A23F; --gold-deep:#A67C25; --gold-solid:#C9A23F; --gold-text:#B7891F; --gold-light:#CBB06A;
  --navy:#19325C; --navy-deep:#0A1B31; --navy-hero-start:#1D3A63;
  --aurora:#8FB0C9; --aurora-text:#A9BDD0;
  --text-body:#5A5344; --text-caption:#6F6656; --text-muted:#8A8272; --text-soft:#7A8492; --nav-inactive:#6E7379; --icon-gray:#9AA6B3;
  --msg-error:#B3261E; --msg-error-bg:#FBEAE8; --msg-success:#2E6B4F; --msg-success-bg:#E9F2EC;
  --radius-card:16px; --radius-hero:20px; --radius-pill:999px; --gap-block:22px;
}

/* --------------------------------------------------------------------------
   2. TOKENS DERIVADOS — fontes, sombras, foco, transições
   -------------------------------------------------------------------------- */
:root{
  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:'Nunito Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-card:0 2px 12px rgba(25,50,92,.06);
  --shadow-card-hover:0 6px 20px rgba(25,50,92,.10);
  --shadow-hero:0 8px 24px rgba(10,27,49,.18);
  --shadow-btn:0 4px 14px rgba(201,162,63,.28);
  --shadow-nav:0 -2px 12px rgba(25,50,92,.05);

  --focus-ring:0 0 0 3px rgba(201,162,63,.45);
  --hero-hairline:rgba(255,255,255,.14);
  --overlay-scrim:rgba(10,27,49,.55);

  --ease:cubic-bezier(.4,0,.2,1);
  --speed:.18s;

  --container-max:560px;
  --container-pad:20px;
  --nav-height:64px;
  --nav-gap:10px;      /* respiro entre a barra flutuante e a borda da tela */
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg, var(--ivory-gradient-top), var(--ivory));
  background-attachment:fixed;
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:17px;          /* base de leitura — público 50-75 */
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Espaço para a bottom-nav fixa não cobrir o conteúdo */
body.has-bottom-nav{
  padding-bottom:calc(var(--nav-height) + var(--nav-gap) * 2 + env(safe-area-inset-bottom, 0px) + 16px);
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd{ margin:0; }

ul, ol{ margin:0; padding:0; }

img, picture, svg, video{
  display:block;
  max-width:100%;
  height:auto;
}

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

button{ background:none; border:none; }

/* Foco visível e consistente (acessibilidade) */
:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:6px;
}

::selection{
  background:var(--gold-start);
  color:var(--navy-deep);
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.display,
.wordmark{
  font-family:var(--font-serif);
  color:var(--navy);
  font-weight:600;
  line-height:1.25;
  letter-spacing:.2px;
}

.display{ font-size:34px; font-weight:700; line-height:1.18; }
h1{ font-size:28px; }
h2{ font-size:24px; }
h3{ font-size:20px; }
h4{ font-size:18px; }

.wordmark{
  font-size:26px;
  font-weight:700;
  letter-spacing:1.2px;
}

.hero-subtitle{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:19px;
  line-height:1.45;
  color:var(--gold-text);
}

.lead{
  font-size:17px;
  line-height:1.65;
  color:var(--text-body);
}

.caption{
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text-caption);
}

.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--gold-text);
}

.text-muted{ color:var(--text-muted); }
.text-soft{ color:var(--text-soft); }
.text-gold{ color:var(--gold-text); }
.text-navy{ color:var(--navy); }

p + p{ margin-top:12px; }

strong, b{ font-weight:700; color:var(--navy); }

small{ font-size:14px; color:var(--text-muted); }

a{
  color:var(--gold-text);
  text-decoration:none;
  font-weight:600;
  transition:color var(--speed) var(--ease);
}

a:hover,
a:focus-visible{ color:var(--gold-deep); text-decoration:underline; }

a.link-navy{ color:var(--navy); }
a.link-navy:hover{ color:var(--navy-deep); }

/* Citação de versículo */
.verse{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:600;
  font-size:17.5px;
  line-height:1.55;
  color:var(--text-soft);
}

/* Nota explicativa sob o título de uma seção */
.section-note{ font-size:14.5px; }

/* Texto de compliance / aviso legal */
.disclaimer{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. LAYOUT — container, section, divisores
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.section{ margin-block:var(--gap-block); }
.section + .section{ margin-top:var(--gap-block); }

.section-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.stack > * + *{ margin-top:12px; }
.stack-lg > * + *{ margin-top:var(--gap-block); }

.divider{
  height:1px;
  border:none;
  background:var(--card-border);
  margin-block:var(--gap-block);
}

.divider-gold{
  height:2px;
  width:56px;
  border:none;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--gold-start), var(--gold-end));
  margin-block:14px;
}

/* --------------------------------------------------------------------------
   6. TOP BAR
   -------------------------------------------------------------------------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:16px 6px;
}

.topbar-brand{ display:flex; align-items:center; gap:10px; }

.app-icon{ width:34px; height:34px; border-radius:9px; }

/* override: menor que o .wordmark base (26px) dentro da top bar */
.topbar .wordmark{ font-size:21px; letter-spacing:3px; }

/* --------------------------------------------------------------------------
   7. CARD
   -------------------------------------------------------------------------- */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:20px;
}

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

.card-soft{ background:var(--ivory-light); }

.card-tinted{
  background:var(--tint-blue);
  border-color:var(--blue-pale);
}

a.card,
button.card{
  display:block;
  width:100%;
  text-align:left;
  color:var(--text-body);
  font-weight:400;
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}

a.card:hover,
button.card:hover{
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-2px);
  text-decoration:none;
}

a.card:active,
button.card:active{ transform:translateY(0); }

.card-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.card-title{
  font-family:var(--font-serif);
  font-size:19px;
  font-weight:600;
  color:var(--navy);
  line-height:1.3;
}

.card-text{
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-muted);
  margin-top:4px;
}

/* Card em linha — usado nas listas verticais (library, prayer, profile) */
.row-card{ padding:14px 16px; }

/* override: menor que o .card-title base (19px) dentro de row-card */
.row-card .card-title{ font-size:16px; }

/* override: menor que o .card-text base (15px) dentro de row-card */
.row-card .card-text{ font-size:14.5px; line-height:1.45; }

/* Meta alinhada à direita da linha (ex.: "174 Hz") */
.row-hz{
  margin-left:auto;
  flex:0 0 auto;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  color:var(--gold-text);
}

/* Seta de "abrir" à direita da linha */
.row-chevron{
  margin-left:auto;
  flex:0 0 auto;
  color:var(--icon-gray);
  font-size:18px;
  line-height:1;
}

/* --------------------------------------------------------------------------
   8. PASSOS & PROGRESSO
   -------------------------------------------------------------------------- */
.progress-track{
  height:8px;
  border-radius:var(--radius-pill);
  background:var(--blue-pale);
  overflow:hidden;
}

.progress-fill{
  height:100%;
  width:0%;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--gold-start), var(--gold-end));
  transition:width .4s var(--ease);
}

.step{ position:relative; }
.step + .step{ margin-top:14px; }

.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:0 0 auto;
  border-radius:var(--radius-pill);
  background:var(--navy);
  color:var(--ivory-light);
  font-family:var(--font-serif);
  font-size:16px;
  font-weight:700;
  line-height:1;
}

.step.done .step-num{
  background:linear-gradient(135deg, var(--gold-start), var(--gold-end));
  color:var(--navy-deep);
}

.step-head{ display:flex; align-items:center; gap:12px; }
.step-body{ margin-top:12px; }

.step-meta{
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--text-soft);
}

/* --------------------------------------------------------------------------
   9. BOTÕES
   -------------------------------------------------------------------------- */
.btn,
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;                 /* alvo de toque confortável */
  padding:14px 32px;
  background:linear-gradient(135deg, var(--gold-start), var(--gold-end));
  color:var(--navy-deep);
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:700;
  letter-spacing:.3px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border:none;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-btn);
  cursor:pointer;
  transition:filter var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.btn:hover,
.btn-primary:hover{
  filter:brightness(1.05);
  box-shadow:var(--shadow-card-hover);
  text-decoration:none;
  color:var(--navy-deep);
}

.btn:active,
.btn-primary:active{
  transform:translateY(1px);
  filter:brightness(.96);
}

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
  filter:none;
}

.btn-ghost{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--navy);
  box-shadow:none;
}

.btn-ghost:hover{
  background:var(--tint-blue);
  color:var(--navy-deep);
  border-color:var(--navy-deep);
  box-shadow:none;
}

.btn-gold-outline{
  background:transparent;
  color:var(--gold-text);
  border:1.5px solid var(--gold-light);
  box-shadow:none;
}

.btn-gold-outline:hover{
  background:var(--ivory-light);
  color:var(--gold-deep);
  border-color:var(--gold-solid);
  box-shadow:none;
}

.btn-block{ display:flex; width:100%; }

.btn-sm{
  min-height:42px;
  padding:10px 22px;
  font-size:15px;
}

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:18px;
  background:radial-gradient(circle at 30% 20%, var(--navy-hero-start), var(--navy-deep));
  border-radius:var(--radius-hero);
  box-shadow:var(--shadow-hero);
  color:var(--ivory);
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero .display,
.hero .wordmark{ color:var(--ivory); }

.hero p{ color:var(--aurora-text); }

.hero .caption{ color:var(--aurora); }

.hero .hero-subtitle{ color:var(--gold-start); }

.hero a{ color:var(--gold-start); }
.hero a:hover{ color:var(--gold-light); }

.hero-divider{
  height:1px;
  border:none;
  background:var(--hero-hairline);
  margin-block:14px;
}

.hero-lg{ padding:28px 22px; }

/* Kicker do hero — variante em ouro claro do .eyebrow */
.hero-kicker{
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--gold-light);
}

/* --------------------------------------------------------------------------
   11. TILE / TILE-ICON
   -------------------------------------------------------------------------- */
.tile,
.tile-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  height:44px;
  background:var(--tint-blue);
  border-radius:11px;
  color:var(--navy);
  font-size:20px;
  line-height:1;
}

.tile-icon svg,
.tile svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.tile-sm{ width:36px; height:36px; border-radius:9px; font-size:17px; }
.tile-lg{ width:56px; height:56px; border-radius:14px; font-size:24px; }

.tile-gold{
  background:linear-gradient(135deg, var(--gold-start), var(--gold-end));
  color:var(--navy-deep);
}

.tile-navy{
  background:var(--navy);
  color:var(--ivory-light);
}

.tile-muted{ color:var(--icon-gray); }

/* --------------------------------------------------------------------------
   12. BOTTOM NAV
   -------------------------------------------------------------------------- */
/* Barra SUSPENSA, não colada no fundo. Duas razões além do gosto:
   a) sobra um fio de página por baixo, e isso avisa que ainda tem conteúdo;
   b) o dedo que rola não encosta na barra sem querer.
   O fundo é translúcido com blur: o conteúdo passa por trás e a barra
   pertence à página em vez de ser uma faixa grudada nela. */
.bottom-nav{
  position:fixed;
  left:var(--container-pad);
  right:var(--container-pad);
  bottom:calc(var(--nav-gap) + env(safe-area-inset-bottom, 0px));
  z-index:50;
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  gap:4px;
  min-height:var(--nav-height);
  padding:7px 7px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--card-border);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(10,27,49,.15), 0 2px 8px rgba(10,27,49,.06);
}
@supports not (backdrop-filter: blur(1px)){
  .bottom-nav{ background:var(--card); }
}

.bottom-nav .nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex:1 1 0;
  min-width:0;
  padding:4px 2px;
  border-radius:12px;
  color:var(--nav-inactive);
  font-family:var(--font-sans);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.3px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:color var(--speed) var(--ease);
}

.bottom-nav .nav-item:hover{ text-decoration:none; }

.bottom-nav .nav-icon{
  display:block;
  width:23px;
  height:23px;
  fill:currentColor;
  color:var(--icon-gray);
  transition:color var(--speed) var(--ease);
}

/* A aba ativa ganha uma pastilha por trás — o cue que Pray e Auraly usam.
   Cor é confirmação; forma é localização. Para 60+, as duas juntas. */
.bottom-nav .nav-item.active{
  color:var(--navy);
  font-weight:700;
  background:var(--tint-blue);
}

.bottom-nav .nav-item.active .nav-icon{ color:var(--navy); }

/* Botão de ícone circular da barra de cima.
   O círculo não é enfeite: dobra o alvo de toque e diz "isto é um botão"
   para quem não cresceu decodificando ícone solto. */
.round-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:0 0 auto;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72);
  border:1px solid var(--card-border);
  color:var(--navy);
  cursor:pointer;
  transition:border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.round-btn:hover{ border-color:var(--gold-light); color:var(--navy-deep); }
.round-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.topbar-actions{ display:flex; align-items:center; gap:8px; margin-right:-2px; }

/* --------------------------------------------------------------------------
   11.9 AVATAR DO PERFIL — canto superior direito
   Substituiu o menu hambúrguer, que não abria nada. Perfil é tela de ajuste,
   não de uso diário: ocupava um dos quatro lugares mais caros do app.
   -------------------------------------------------------------------------- */
.topbar{ position:relative; }
.me-btn{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:0 0 auto;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72);
  border:1px solid var(--card-border);
  color:var(--navy);
  font-family:var(--font-serif); font-size:19px; font-weight:700; line-height:1;
  text-decoration:none;
  transition:border-color var(--speed) var(--ease);
}
.me-btn:hover{ border-color:var(--gold-light); text-decoration:none; }
.me-btn.active{ border-color:var(--gold-solid); background:var(--ivory-light); }
.me-btn svg{ width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.me-btn.has-initial svg{ display:none; }
body[data-time="night"] .me-btn{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:var(--ivory); }

/* --------------------------------------------------------------------------
   12.1 BARRA "CONTINUE"
   Encaixa logo ACIMA da navegação flutuante, com o mesmo vidro e o mesmo
   raio — as duas leem como uma peça só, não como duas barras empilhadas.
   -------------------------------------------------------------------------- */
.continue-bar{
  position:fixed;
  left:var(--container-pad);
  right:var(--container-pad);
  bottom:calc(var(--nav-height) + var(--nav-gap) * 2 + env(safe-area-inset-bottom, 0px));
  z-index:49;
  display:flex; align-items:center; gap:6px;
  padding:7px 7px 7px 8px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--card-border);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(10,27,49,.13);
}
@supports not (backdrop-filter: blur(1px)){ .continue-bar{ background:var(--card); } }

.continue-bar .cb-go{
  display:flex; align-items:center; gap:12px;
  flex:1 1 auto; min-width:0; text-decoration:none; padding:3px 2px;
}
.continue-bar .cb-go:hover{ text-decoration:none; }

.continue-bar .cb-art{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(158deg, var(--navy-hero-start), var(--navy-deep));
  background-size:cover; background-position:center;
  color:var(--gold-start);
}
.continue-bar .cb-art svg{ width:18px; height:18px; fill:currentColor; stroke:none;
  filter:drop-shadow(0 1px 3px rgba(10,27,49,.55)); }

.continue-bar .cb-txt{ min-width:0; flex:1 1 auto; }
.continue-bar .cb-kick{
  display:block; font-family:var(--font-sans); font-size:10.5px; font-weight:700;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--gold-text);
}
.continue-bar .cb-name{
  display:block; font-family:var(--font-serif); font-size:17px; font-weight:600;
  color:var(--navy); line-height:1.25; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.continue-bar .cb-x{
  flex:0 0 auto; width:38px; height:38px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--icon-gray); cursor:pointer;
}
.continue-bar .cb-x:hover{ color:var(--navy); }
.continue-bar .cb-x svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; }

/* Com a barra no ar, o conteúdo precisa de mais chão para não ficar por baixo. */
body.has-bottom-nav.has-continue-bar{
  padding-bottom:calc(var(--nav-height) + 58px + var(--nav-gap) * 3 + env(safe-area-inset-bottom, 0px) + 16px);
}

/* Noite: o mesmo vidro, escuro. */
body[data-time="night"] .continue-bar{
  background:rgba(10,27,49,.80);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.42);
}
body[data-time="night"] .continue-bar .cb-name{ color:var(--ivory); }
body[data-time="night"] .continue-bar .cb-x{ color:var(--aurora-text); }

/* --------------------------------------------------------------------------
   13. FORMULÁRIOS
   -------------------------------------------------------------------------- */
.field{ display:block; margin-bottom:16px; }

.label{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--navy);
}

.input,
.select,
.textarea{
  display:block;
  width:100%;
  min-height:52px;
  padding:13px 16px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:16px;          /* 16px evita zoom automático no iOS */
  line-height:1.5;
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

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

.input::placeholder,
.textarea::placeholder{ color:var(--text-caption); }

.input:focus,
.select:focus,
.textarea:focus{
  outline:none;
  border-color:var(--gold-light);
  box-shadow:var(--focus-ring);
}

.field-hint{
  margin-top:6px;
  font-size:13.5px;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  background:var(--tint-blue);
  border-radius:var(--radius-pill);
  color:var(--navy);
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
}

.badge-gold{
  background:linear-gradient(135deg, var(--gold-start), var(--gold-end));
  color:var(--navy-deep);
}

.list-plain{ list-style:none; }

.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; }
.gap-12{ gap:12px; }
.gap-16{ gap:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }

.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mt-8{ margin-top:8px; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; }
.mb-16{ margin-bottom:16px; }
.mb-24{ margin-bottom:24px; }

.full-width{ width:100%; }
.hidden{ display:none !important; }

.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;
}

.scrim{
  position:fixed;
  inset:0;
  z-index:40;
  background:var(--overlay-scrim);
}

/* --------------------------------------------------------------------------
   15. RESPONSIVO — telas maiores (tablet/desktop)
   -------------------------------------------------------------------------- */
@media (min-width:600px){
  .display{ font-size:38px; }
  h1{ font-size:32px; }
  h2{ font-size:26px; }
  h3{ font-size:22px; }

  .hero{ padding:26px; }
  .card{ padding:24px; }
}