/* ==========================================================================
   365 Graça & Adoração — redesign (protótipo)
   Tokens e padrões visuais adotados do site da AWEXPRESS Designer.
   ========================================================================== */

:root{
  --bg: #0a0d14;
  --bg-2: #0f1420;
  --panel: #131826;
  --ink: #eef1f7;
  --muted: #8a93a8;
  --line: rgba(255,255,255,0.08);
  --cobalt: #3b6ef6;
  --cobalt-glow: #5b8aff;
  --amber: #f2a93b;
  --amber-glow: #ffc36b;

  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-label: 'Sora', system-ui, sans-serif; /* rótulos pequenos: mais calorosa que a fonte de código */
  --gold-ink: #1b1306; /* texto sobre botão dourado */

  --header-h: 72px;
  --gutter: 5%;
  --maxw: 1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  overflow-x:clip; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--cobalt); color:#fff; }

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--cobalt-glow); outline-offset:2px;
}

.skip-link{
  position:absolute; left:16px; top:-100px; z-index:300;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:10px 16px; font-size:14px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:16px; }

/* Fundo: grade sutil + brilho no topo */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(59,110,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,110,246,0.06) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.spotlight{
  position:fixed; top:-30%; left:50%; transform:translateX(-50%);
  width:min(900px, 100vw); height:900px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(59,110,246,0.16) 0%, rgba(242,169,59,0.07) 35%, transparent 70%);
}

/* ==========================================================================
   Estrutura e componentes
   ========================================================================== */
main{ position:relative; z-index:1; }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.section{ padding:96px var(--gutter); position:relative; z-index:1; }
.section + .section{ padding-top:24px; }

.kicker{
  font-family:var(--font-label); font-size:12.5px; color:var(--amber-glow);
  letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; display:block;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-size:12px; color:var(--cobalt-glow);
  border:1px solid rgba(59,110,246,0.3); background:rgba(59,110,246,0.08);
  padding:6px 14px; border-radius:100px; margin-bottom:28px; max-width:100%;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber); flex:none; }

h1, h2, h3{ font-family:var(--font-head); letter-spacing:-0.5px; }
h1{ font-weight:700; font-size:clamp(34px, 5vw, 62px); line-height:1.07; letter-spacing:-1.5px; }
h2{ font-weight:700; font-size:clamp(26px, 3.2vw, 40px); line-height:1.15; letter-spacing:-1px; }
h3{ font-weight:600; font-size:18px; line-height:1.3; }
.grad{
  background:linear-gradient(100deg, var(--amber-glow), var(--amber) 60%, #e0901f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ font-size:17px; color:var(--muted); max-width:560px; line-height:1.7; margin-top:22px; }
.section-head{ max-width:680px; margin-bottom:44px; }
.section-head p{ color:var(--muted); margin-top:14px; font-size:15.5px; line-height:1.7; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:10px; text-decoration:none;
  font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background:linear-gradient(100deg, var(--amber-glow), var(--amber)); color:var(--gold-ink); box-shadow:0 10px 30px rgba(242,169,59,0.30); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(242,169,59,0.45); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.2); }
.link-arrow{ color:var(--amber-glow); text-decoration:none; font-weight:600; font-size:14px; }
.link-arrow:hover{ color:var(--cobalt-glow); }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px 22px;
  min-width:0; transition:transform .25s ease, border-color .25s ease;
}
a.card{ display:block; text-decoration:none; color:var(--ink); }
a.card:hover{ transform:translateY(-4px); border-color:rgba(242,169,59,0.45); }
.card .kicker{ font-size:11px; margin-bottom:10px; }
.card p{ color:var(--muted); font-size:14px; line-height:1.6; margin-top:8px; }
.card .link-arrow{ display:inline-block; margin-top:14px; }

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

/* ==========================================================================
   Home
   ========================================================================== */
.hero{ padding-top:72px; padding-bottom:56px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
.stat-bar{
  display:flex; flex-wrap:wrap; gap:20px 36px; margin-top:44px; padding-top:26px;
  border-top:1px solid var(--line);
}
.stat-bar div{ display:flex; flex-direction:column; }
.stat-bar strong{ font-family:var(--font-head); font-weight:800; font-size:22px; }
.stat-bar span{ font-size:12.5px; color:var(--muted); }

/* Continue de onde parou */
.resume{
  position:relative; border-radius:20px; padding:32px 28px; border:1px solid rgba(242,169,59,0.35);
  background:radial-gradient(circle at 20% 0%, rgba(242,169,59,0.16), transparent 60%), var(--panel);
}
.resume h2{ font-size:22px; letter-spacing:-0.3px; }
.resume .resume-where{ font-family:var(--font-head); font-weight:700; font-size:30px; margin-top:18px; }
.resume .resume-hint{ color:var(--muted); font-size:14px; margin-top:6px; }
.progress{ height:8px; border-radius:100px; background:rgba(255,255,255,0.07); margin-top:18px; overflow:hidden; }
.progress-fill{ height:100%; width:2%; border-radius:100px; background:linear-gradient(90deg, var(--amber), var(--amber-glow)); transition:width .6s ease; }
.progress-meta{ display:flex; justify-content:space-between; gap:12px; font-family:var(--font-label); font-size:12px; color:var(--muted); margin-top:10px; }
.resume .btn{ width:100%; margin-top:22px; }

/* Busca */
.search{
  display:flex; gap:10px; max-width:720px;
}
.search input{
  flex:1; min-width:0; background:var(--bg-2); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:14px 16px; font:inherit; font-size:15px;
}
.search input::placeholder{ color:#6b7488; }

/* Acesso rápido */
.quick .card h3{ font-size:22px; font-weight:700; }
.quick .meta{ font-family:var(--font-label); font-size:12px; color:var(--muted); margin-top:6px; }

/* Etapas numeradas */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; list-style:none; }
.step{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 22px; min-width:0; }
.step .num{ font-family:var(--font-label); font-size:13px; color:var(--amber-glow); display:block; margin-bottom:16px; }
.step h3{ font-size:17px; margin-bottom:8px; }
.step p{ color:var(--muted); font-size:14px; line-height:1.6; }
.about-card{ margin-top:16px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.about-card p + p{ margin-top:10px; }

/* Idiomas */
.lang-card h3{ display:flex; align-items:center; gap:10px; }
.lang-card .code{ font-family:var(--font-label); font-size:11px; color:var(--amber-glow); border:1px solid rgba(242,169,59,0.3); border-radius:6px; padding:2px 6px; }

/* CTA final */
.cta-box{
  border:1px solid rgba(242,169,59,0.3); border-radius:20px; padding:48px 40px; text-align:center;
  background:radial-gradient(circle at 50% 0%, rgba(242,169,59,0.14), transparent 60%), var(--panel);
}
.cta-box p{ color:var(--muted); max-width:620px; margin:16px auto 0; }
.cta-box .btn-row{ justify-content:center; }

/* ==========================================================================
   Hubs AT / NT
   ========================================================================== */
.page-hero{ padding-top:56px; padding-bottom:32px; }
.breadcrumb{ font-family:var(--font-label); font-size:12px; color:var(--muted); margin-bottom:20px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--ink); }

.filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.filter button, .filter a{
  font:inherit; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none;
  padding:8px 14px; border-radius:100px; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--muted);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.filter button:hover{ color:var(--ink); border-color:rgba(255,255,255,0.2); }
.filter button[aria-pressed="true"]{ color:var(--ink); border-color:rgba(59,110,246,0.6); background:rgba(59,110,246,0.14); }
.filter .filter-label{ font-family:var(--font-label); font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; align-self:center; margin-right:6px; }

.group{ margin-bottom:44px; }
.group[hidden]{ display:none; }
.group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.group-head h2{ font-size:22px; letter-spacing:-0.3px; }
.group-head .kicker{ margin:0; font-size:11px; }

.books{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.book{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  transition:border-color .2s ease, transform .2s ease;
}
.book:hover{ border-color:rgba(242,169,59,0.5); transform:translateY(-2px); }
.book strong{ font-family:var(--font-head); font-weight:600; font-size:15px; }
.book span{ font-family:var(--font-label); font-size:11.5px; color:var(--muted); }
.book.is-current{ border-color:rgba(242,169,59,0.55); background:radial-gradient(circle at 0 0, rgba(242,169,59,0.14), transparent 70%), var(--panel); }
.book.is-current span{ color:var(--amber-glow); }

.blocks-aside{ border-top:1px solid var(--line); padding-top:40px; }
.block-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.block-item{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:var(--ink); background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:16px; transition:border-color .2s ease; }
.block-item:hover{ border-color:rgba(242,169,59,0.4); }
.block-item .num{ font-family:var(--font-label); font-size:12px; color:var(--amber-glow); flex:none; padding-top:2px; }
.block-item strong{ font-family:var(--font-head); font-weight:600; font-size:14.5px; display:block; }
.block-item span{ color:var(--muted); font-size:13px; }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.site-footer{ position:relative; z-index:1; border-top:1px solid var(--line); padding:56px var(--gutter) 36px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.site-footer h3{ font-size:15px; margin-bottom:12px; }
.site-footer p{ color:var(--muted); font-size:13.5px; }
.site-footer p + p{ margin-top:8px; }
.footer-links{ display:flex; flex-direction:column; gap:7px; }
.footer-links a{ color:var(--muted); text-decoration:none; font-size:13.5px; }
.footer-links a:hover{ color:var(--cobalt-glow); }
.footer-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.footer-bottom a{ color:var(--muted); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .grid-4, .steps{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child{ grid-column:1 / -1; }
  .about-card{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .section{ padding:64px var(--gutter); }
  .section + .section{ padding-top:16px; }
  .hero{ padding-top:40px; }
  .page-hero{ padding-top:32px; padding-bottom:16px; }
  .grid-4, .grid-3, .steps{ grid-template-columns:1fr; }
  .quick.grid-3{ grid-template-columns:1fr 1fr; }
  .quick .card{ padding:18px 16px; }
  .quick .card h3{ font-size:18px; }
  .btn-row .btn{ flex:1 1 100%; }
  .search{ flex-direction:column; }
  .cta-box{ padding:36px 22px; }
  .footer-grid{ grid-template-columns:1fr; }
  .books{ grid-template-columns:1fr 1fr; }
  .resume{ padding:26px 20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ==========================================================================
   Fase 1 da home e dos hubs (05/10/2026)
   ========================================================================== */

/* Busca em destaque no hero */
.hero-search{ margin-top:30px; max-width:620px; }
.hero-search .search{ max-width:none; }
.hero-search .search input{ padding:16px 18px; font-size:16px; border-color:rgba(242,169,59,0.35); background:rgba(15,20,32,0.85); }
.hero-search .search .btn{ padding:16px 26px; }
.hero-search .hint{ font-size:13px; color:var(--muted); margin-top:10px; }
.hero .btn-row{ margin-top:22px; }

/* Entradas grandes */
.entries{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.entry{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  min-height:170px; padding:24px 22px; border-radius:16px; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); min-width:0;
  transition:transform .25s ease, border-color .25s ease;
}
.entry:hover{ transform:translateY(-4px); border-color:rgba(242,169,59,0.5); }
.entry h3{ font-size:20px; font-weight:700; letter-spacing:-0.3px; }
.entry p{ color:var(--muted); font-size:14px; line-height:1.55; margin-top:6px; }
.entry .link-arrow{ margin-top:auto; }
.entries > .entry{ grid-column:span 2; }
.entries > .entry-lg{ grid-column:span 3; min-height:200px; }
/* 7 entradas: 2 grandes + 3 + 2 — as duas últimas ocupam meia linha */
.entries > .entry:not(.entry-lg):nth-last-child(-n+2){ grid-column:span 3; }
.entry-lg h3{ font-size:26px; }
.entry-at{ background:radial-gradient(circle at 15% 0%, rgba(242,169,59,0.18), transparent 60%), var(--panel); }
.entry-nt{ background:radial-gradient(circle at 85% 0%, rgba(59,110,246,0.22), transparent 60%), var(--panel); }

/* Faixa "Por onde começar" */
.start-band{
  border:1px solid rgba(242,169,59,0.3); border-radius:20px; padding:40px 36px;
  background:radial-gradient(circle at 0% 0%, rgba(242,169,59,0.12), transparent 55%), var(--panel);
}
.start-band .start-head{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:end; margin-bottom:28px; }
.start-band .start-head p{ color:var(--muted); }
.start-band .btn-row{ margin-top:0; justify-content:flex-end; }
.start-band .steps{ margin-top:8px; }
.start-band .step{ background:var(--bg-2); }

/* Hubs: hero com texto do site, números e livros com tema */
.hub-hero .lead{ max-width:760px; }
.hub-hero blockquote{
  margin-top:22px; max-width:760px; padding:14px 18px; border-left:3px solid var(--amber);
  background:rgba(242,169,59,0.06); border-radius:0 10px 10px 0; color:var(--ink); font-style:italic;
}
.hub-stats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-top:28px; max-width:900px; }
.hub-stats div{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 12px; }
.hub-stats strong{ display:block; font-family:var(--font-head); font-size:22px; color:var(--amber-glow); line-height:1.15; }
.hub-stats span{ font-size:12px; color:var(--muted); }
.group-desc{ color:var(--muted); font-size:14px; margin-top:4px; }
.books-tema{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.book .tema{ font-family:var(--font-body); font-size:13px; color:var(--muted); line-height:1.45; margin-top:6px; }
.book .dias{ font-family:var(--font-label); font-size:11px; color:var(--muted); margin-top:6px; opacity:.85; }
.book.is-current .dias{ color:var(--amber-glow); opacity:1; }

/* Tabela dos 27 livros: rola dentro da própria caixa no celular */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.table-wrap table{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.table-wrap th, .table-wrap td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.table-wrap th{ font-family:var(--font-label); font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--amber-glow); background:var(--bg-2); }
.table-wrap tr:last-child td{ border-bottom:none; }
.table-wrap td:nth-child(4){ font-family:var(--font-label); color:var(--muted); }
.info-box{ margin-top:28px; background:var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--cobalt-glow); border-radius:0 14px 14px 0; padding:24px 26px; }
.info-box h3{ margin-bottom:10px; }
.info-box p{ color:var(--muted); }
.info-box p + p{ margin-top:10px; }
.hub-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 36px; }

@media (max-width:980px){
  .entries{ grid-template-columns:1fr 1fr; }
  .entries > .entry{ grid-column:span 1; }
  .entries > .entry-lg{ grid-column:span 2; }
  .entries > .entry:not(.entry-lg):nth-last-child(-n+2){ grid-column:span 1; }
  .entries > .entry:not(.entry-lg):last-child{ grid-column:span 2; }
  .start-band .start-head{ grid-template-columns:1fr; }
  .start-band .btn-row{ justify-content:flex-start; }
  .hub-stats{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:600px){
  .entries{ grid-template-columns:1fr; }
  .entries > .entry, .entries > .entry-lg{ grid-column:auto !important; } /* 1 coluna: anula os spans acima */
  .entry{ min-height:0; }
  .start-band{ padding:28px 20px; }
  .hub-stats{ grid-template-columns:1fr 1fr; }
  .hero-search .search .btn{ width:100%; }
}
.book.is-current .tema{ color:var(--muted); }

/* ==========================================================================
   Ajustes da revisão do Wagner (05/10/2026)
   ========================================================================== */
/* Rótulos pequenos com Sora: um pouco menores e espaçados, já que a fonte é mais larga */
.kicker{ font-weight:600; font-size:12px; letter-spacing:1.2px; }
.eyebrow{ font-weight:500; }
.step .num{ font-weight:700; }

/* Botão "Começar Dia 1 ›" no cabeçalho (redesign/prototipo-header.js) */
#site-header .sh-cta{
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:8px; white-space:nowrap;
  background:linear-gradient(100deg, var(--amber-glow), var(--amber)); color:var(--gold-ink);
  font:700 13.5px/1 'Inter', system-ui, sans-serif; text-decoration:none; margin-right:6px;
}
#site-header .sh-cta:hover{ filter:brightness(1.06); }
#site-header .sh-nav .sh-cta-menu{ display:none; }
@media (max-width:600px){
  #site-header .sh-tools .sh-cta{ display:none; }
  #site-header .sh-nav.is-open .sh-cta-menu{ display:flex; justify-content:center; margin:14px 0 4px; padding:13px 16px; border-bottom:none; box-shadow:none; }
}

/* A Jornada: cartões da home no ar */
.jornada-cards .card{ display:flex; flex-direction:column; }
.jornada-cards .card-icon{ font-size:26px; margin-bottom:10px; }
.jornada-cards .card a{ margin-top:auto; padding-top:12px; color:var(--amber-glow); text-decoration:none; font-weight:600; font-size:14px; }
.jornada-cards .card a:hover{ color:var(--cobalt-glow); }
.section-head .section-sub{ color:var(--muted); margin-top:14px; font-size:15.5px; line-height:1.7; }
.section-head .section-sub a{ color:var(--amber-glow); text-decoration:none; font-weight:600; }
/* No menu aberto, a regra dos links (#site-header .sh-nav a) é mais forte: reforça cor e fonte do botão */
#site-header .sh-nav a.sh-cta-menu{ color:var(--gold-ink); font:700 15px/1 'Inter', system-ui, sans-serif; border-radius:8px; }