/* home.css — identidade do Portal Costa Dorata.
   Carregado APENAS na home (body.portal). Sobrescreve tokens do styles.css
   neste escopo, sem alterar as páginas de empreendimento.
   Paleta: navy + dourado (Scenário) sobre paper quente.  Tipos: Cormorant + Outfit.
*/

/* ============ Tokens ============ */
body.portal {
  --bg:        #F4F1EC;   /* bone */
  --bg-deep:   #E8E2D6;   /* bone profundo */
  --paper:     #FAF8F3;   /* near-white */
  --ink:       #1c2b3c;   /* navy (Scenário) */
  --ink-2:     #3a4d63;   /* navy secundário */
  --muted:     #6B6760;   /* taupe */
  --muted-on-navy: rgba(244,241,236,0.7);
  --line:      rgba(28,43,60,0.14);
  --line-2:    rgba(28,43,60,0.07);

  /* Paleta Scenário: navy + dourado */
  --navy:         #1c2b3c;
  --navy-2:       #243447;
  --navy-deep:    #14202d;     /* footer navy profundo */
  --terra-text:   #a8865d;     /* dourado-fundo: acento sobre fundo claro */
  --champagne:    #c9a87f;     /* dourado (Scenário) */
  --champagne-2:  #dcc59a;
  --champagne-deep:#a8865d;

  /* Fontes próprias do portal */
  --serif:         "Cormorant Garamond", Georgia, serif;
  --serif-display: "Cormorant Garamond", Georgia, serif;
  --sans:          "Outfit", "Inter", system-ui, -apple-system, sans-serif;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
}

/* ============ Tipografia ============ */
body.portal .h-serif,
body.portal h1,
body.portal h2,
body.portal h3 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.018em;
}
body.portal .h-serif em,
body.portal h1 em,
body.portal h2 em,
body.portal h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--terra-text);
}
body.portal .lead {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-2);
  opacity: 1;
}
body.portal .h-section {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
}
body.portal .eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--muted);
}
body.portal .kicker { color: var(--muted); }

/* Numeração das seções "01 · ..." em mono terracota */
body.portal .section-head .num {
  color: var(--terra-text);
}
body.portal .section-head .num .h-section {
  color: var(--ink);
  letter-spacing: 0.24em;
}

/* ============ Header (top) ============ */
/* Topo claro sobre o hero (texto paper sobre foto), escurece quando scrolla */
body.portal .top,
body.portal .top a { color: var(--paper); }
body.portal .top.scrolled {
  background: rgba(244,241,236,0.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body.portal .top.scrolled,
body.portal .top.scrolled a { color: var(--ink); }

/* Selo do brand = concha Costa Dorata (champagne sobre circulo navy).
   Badge autocontido: mesmo contraste em header sobre foto, header scrolled e footer. */
body.portal .top .brand .selo,
body.portal footer .brand-foot .selo {
  background: #1c2b3c url("assets/selo-cd.webp") center/84% no-repeat;
  border: none;
  box-shadow: 0 0 0 1px rgba(201, 168, 127, 0.35);
}
body.portal .top .brand .selo::before,
body.portal footer .brand-foot .selo::before {
  content: none;
}
body.portal .brand .word small { color: currentColor; opacity: 0.75; }

/* ============ Botões ============ */
body.portal .btn {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-size: 11px;
}
body.portal .btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
body.portal .btn.solid {
  background: var(--champagne);
  color: var(--navy);
  border-color: var(--champagne);
}
body.portal .btn.solid:hover {
  background: var(--champagne-deep);
  border-color: var(--champagne-deep);
  color: var(--paper);
}

/* ============ Hero ============ */
body.portal .hero.portal { min-height: 92vh; min-height: 92svh; }
body.portal .hero { color: var(--paper); }
body.portal .hero.portal .photo {
  background-image: url("assets/home/hero.webp");
  background-position: center 38%;
}
/* hero responsivo: no mobile serve a variante leve (121KB vs 543KB) pro LCP */
@media (max-width: 760px) {
  body.portal .hero.portal .photo { background-image: url("assets/home/hero-960.webp"); }
}
@media (max-width: 480px) {
  body.portal .hero.portal .photo { background-image: url("assets/home/hero-480.webp"); }
}
/* Scrim: foto respira na maior parte do hero, escurece só no rodapé pra leitura do h1.
   Nav fica protegida por blur+bg no .top (não pelo scrim). */
body.portal .hero.portal .scrim {
  background:
    linear-gradient(180deg,
      rgba(20,18,15,0.20) 0%,
      rgba(20,18,15,0.12) 24%,
      rgba(20,18,15,0.34) 46%,
      rgba(20,18,15,0.62) 76%,
      rgba(20,18,15,0.88) 100%);
}
body.portal .hero h1 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(42px, 6.8vw, 96px);
  letter-spacing: -0.018em;
  line-height: 1.02;
  color: var(--paper);
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35);
}
body.portal .hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: #dcc59a; /* dourado claro pra ler em fundo escuro */
  text-shadow: 0 2px 18px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.45);
}
body.portal .hero .tag {
  max-width: 580px;
  color: rgba(250,248,243,0.92);
  font-family: var(--sans);
  font-weight: 400;
  opacity: 1;
}
body.portal .hero .eyebrow,
body.portal .hero .top-meta {
  color: rgba(250,248,243,0.78);
  opacity: 1;
}
body.portal .hero .stack .eyebrow {
  color: #dcc59a;
  opacity: 1;
  font-weight: 500;
}
/* Botão outline do hero precisa ser legível sobre foto escura */
body.portal .hero .btn {
  color: var(--paper);
  border-color: rgba(250,248,243,0.7);
}
body.portal .hero .btn:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ============ Seções (intro) ============ */
body.portal .intro { background: var(--bg); }
/* A 2ª .intro tem inline style="background: var(--bg-deep)" — herda do nosso var redefinido */

/* Grid de empreendimentos — auto-fit adapta com qualquer quantidade de cards */
body.portal .grid-emp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 2.5vw, 40px);
  max-width: var(--maxw); margin: 0 auto;
}

body.portal .section-foot {
  max-width: var(--maxw); margin: clamp(40px, 5vw, 60px) auto 0;
  display: flex; justify-content: center;
}

body.portal .blog-mini {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.5vw, 36px);
  max-width: var(--maxw); margin: 0 auto;
}
@media (max-width: 1080px) { body.portal .blog-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body.portal .blog-mini { grid-template-columns: 1fr; } }

/* post-card: títulos em Fraunces reto, .cat em terracota */
body.portal .post-card { color: var(--ink); }
body.portal .post-card .cat {
  color: var(--terra-text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
body.portal .post-card h2 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--ink);
}
body.portal .blog-mini .post-card h2 { font-size: 22px; }
body.portal .post-card .excerpt { color: var(--muted); }
body.portal .post-card .meta { color: var(--muted); }

/* ============ Stats (contador) ============ */
body.portal .stat { border-top-color: var(--line); }
body.portal .stat .v {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}
body.portal .stat .l { color: var(--muted); }

/* ============ Contato (CTA WhatsApp) ============ */
/* O .contato original usa foto Scenario + scrim escuro. Trocamos pra hero da home,
   scrim mais leve, e texto em paper sobre overlay quente. */
body.portal .contato .bg {
  background: url("assets/home/hero.webp") center 40%/cover no-repeat;
}
body.portal .contato .scrim {
  background:
    linear-gradient(180deg, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.55) 30%, rgba(26,26,26,0.78) 100%);
}
body.portal .contato h2 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.018em;
}
body.portal .contato h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--champagne-2);
}
body.portal .contato .wa-card .lbl .n { font-family: var(--serif); font-style: normal; }

/* ============ Footer ============ */
/* Footer permanece escuro pra fechar a página, mas em grafite quente — não navy */
body.portal footer {
  background: var(--navy-deep);
  color: rgba(250,248,243,0.62);
}
body.portal footer .brand-foot .w { color: var(--paper); }
body.portal footer .brand-foot small { color: var(--champagne); }
body.portal footer h4 { color: rgba(250,248,243,0.5); }
body.portal footer .legal { color: rgba(250,248,243,0.4); }

/* ============ Dock / WhatsApp FAB ============ */
body.portal .wa-fab {
  background: var(--champagne);
  color: var(--paper);
}
body.portal .wa-fab:hover { background: var(--champagne-deep); }