/* DNA Básico SP 2026: look B2 "O convite, revisto" (chosen by Yogi, 2026-10-16).
   Brand kit v1.4: navy, paper, sand, the logo's gold foil; Jost titles, Raleway text,
   Cormorant Garamond italic for at most two moments. Mobile first, 375 px. */

:root {
  --noite: #0d163b;
  --papel: #f9f8f2;
  --areia: #f2e9d7;
  --tinta: #2c2c3a;
  --tinta-2: #3a4065;
  --ouro-claro: #c9b896;
  --ouro-texto: #ecc668;
  --foil: linear-gradient(135deg, #d39f3d 0%, #dba94a 30%, #ecc668 60%, #f8e79a 100%);
  --whatsapp: #25d366;
  --coluna: 600px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: Raleway, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background-color: var(--papel);
  background-image: url(../assets/textures/paper-tile.webp);
  background-size: 512px;
}

p { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
::selection { background: var(--ouro-texto); color: var(--noite); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--noite); outline-offset: 3px; }
.noite a:focus-visible, .noite summary:focus-visible { outline-color: var(--ouro-texto); }

h1, h2 {
  margin: 0;
  font-family: Jost, system-ui, sans-serif;
  font-weight: 300;
  color: var(--noite);
  text-align: center;
  text-wrap: balance;
}
h1 { font-size: 35px; line-height: 1.08; letter-spacing: .03em; }
h2 { font-size: 28px; line-height: 1.15; letter-spacing: .03em; }
h3 { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--noite); }

ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 10px; }

/* Sections: full-width background, one centred column */
.sec { padding: 52px 28px; }
.sec > .col { max-width: var(--coluna); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.areia { background: var(--areia); }
.noite { background: var(--noite); color: #e9e6dc; }
.noite h2, .noite h3 { color: var(--papel); }
.centro { text-align: center; }
.equilibrio { text-wrap: balance; }
.orn { display: block; width: 44px; height: 1px; background: var(--noite); margin: 0 auto; }
.noite .orn { background: var(--ouro-texto); }
.forte { font-weight: 600; color: var(--noite); }
.noite .forte { color: var(--papel); }
.citacao { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var(--noite); }

/* Buttons. Hover (computer): lifts, shadow, clear colour change. Press (phone and computer): sinks in. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 20px;
  font-weight: 600; font-size: 16px; line-height: 1.3;
  text-decoration: none; text-align: center;
  background: var(--noite); color: #ffffff;
  border: 0; border-radius: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, filter .15s ease;
}
.btn--ouro { background: var(--foil); color: var(--noite); }
.btn--linha { background: transparent; color: var(--noite); box-shadow: inset 0 0 0 1.5px var(--noite); }
.btn--whatsapp { background: var(--whatsapp); color: var(--noite); }
.btn--whatsapp svg { flex: none; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13, 22, 59, .28); background-color: #26397f; }
  .btn--ouro:hover { background: var(--foil); filter: brightness(1.1) saturate(1.1); }
  .btn--linha:hover { background: var(--noite); color: #ffffff; box-shadow: 0 10px 24px rgba(13, 22, 59, .28); }
  .btn--whatsapp:hover { background: #1ebe5d; }
}
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; filter: brightness(.92); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .15s ease, color .15s ease; }
  .btn:hover, .btn:active { transform: none; }
}

/* Hero */
.hero { padding: 22px 24px 4px; }
.hero > .col { max-width: var(--coluna); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.hero__logo { width: 138px; height: auto; display: block; }
.hero h1 { margin-top: 6px; }
.hero .btn { align-self: stretch; margin-top: 6px; }
.hero__linha { font-size: 16.5px; line-height: 1.55; text-wrap: balance; margin-top: 18px; }
.hero__fatos { display: flex; flex-direction: column; gap: 3px; font-size: 16px; line-height: 1.5; }
.hero__fatos .citacao { font-size: 20px; line-height: 1.3; text-wrap: balance; }
.hero__grupo { display: flex; flex-direction: column; gap: 4px; }
.quando { align-self: stretch; background: var(--areia); padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; }
.quando__data { font-family: Jost, system-ui, sans-serif; font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--noite); text-wrap: balance; }
.quando__horas { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--ouro-claro); }
.quando__vagas { padding-top: 14px; border-top: 1px solid var(--ouro-claro); font-weight: 600; color: var(--noite); }

/* Video: 4:5 box, poster until Jade's video arrives */
.video { position: relative; width: 270px; aspect-ratio: 4 / 5; margin-top: 4px; overflow: hidden; background: var(--noite); }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; background: var(--noite); cursor: pointer; }
.video__som {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px;
  border: 0; border-radius: 22px; background: rgba(13, 22, 59, .8); color: #ffffff;
  font-family: Raleway, system-ui, sans-serif; font-weight: 600; font-size: 14px; cursor: pointer;
}
@media (hover: hover) { .video__som:hover { background: rgba(13, 22, 59, .95); } }
.video__aviso { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: rgba(13, 22, 59, .82); color: var(--papel); font-size: 13.5px; line-height: 1.4; }

/* Photos */
.foto { display: block; background: #fff; padding: 8px; box-shadow: 0 4px 24px rgba(13, 22, 59, .08); }
.foto img { width: 100%; height: auto; display: block; }
.foto--inclinada { transform: rotate(-1.2deg); }
.foto-selo { position: relative; margin: 12px 0 30px; }
.selo { position: absolute; right: -14px; bottom: -40px; width: 112px; height: 112px; display: block; }
.foto-larga { width: 100%; height: auto; display: block; }

/* Map (neighbourhood only: the full address stays private) */
.mapa { display: block; position: relative; text-decoration: none; }
.mapa img { width: 100%; height: auto; display: block; }
.mapa__credito { display: block; margin-top: 6px; font-size: 12px; color: var(--tinta-2); text-align: right; }
@media (hover: hover) { .mapa:hover img { filter: brightness(1.04); } }

/* Our history: photos on white mats, captions under each */
.historia { display: flex; flex-direction: column; gap: 22px; }
.historia figure { margin: 0; }
.historia__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.historia__par img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; }
.historia figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--tinta-2); text-align: center; }

/* Investment card */
.cartao { background: #fff; box-shadow: 0 4px 24px rgba(13, 22, 59, .06); padding: 30px 22px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.preco { font-family: Jost, system-ui, sans-serif; font-weight: 300; font-size: 44px; line-height: 1.05; color: var(--noite); }

.btn--centro { align-self: center; width: 78%; min-width: 220px; }
.miudo { font-size: 14px; line-height: 1.5; color: var(--tinta-2); text-wrap: balance; }

/* Missing inputs (shown until filled) */
.pendente { border: 1.5px dashed var(--tinta-2); color: var(--tinta-2); font-size: 14px; line-height: 1.5; padding: 16px; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; }
.noite .pendente { border-color: var(--ouro-claro); color: var(--ouro-claro); }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grade .pendente { min-height: 150px; background: #fff; }

/* FAQ */
.faq details { border-top: 1px solid var(--ouro-claro); padding: 4px 0 14px; }
.faq details:last-child { border-bottom: 1px solid var(--ouro-claro); }
.faq summary { font-weight: 600; color: var(--noite); cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 12px; list-style: none; padding: 10px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-family: Jost, sans-serif; font-weight: 300; font-size: 26px; line-height: 1; color: var(--noite); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p, .faq details > .btn { margin-top: 2px; }
.faq details > .btn { margin-top: 12px; }

/* Floating WhatsApp button */
.wa-flutuante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  width: 54px; height: 54px; border-radius: 50%; background: var(--whatsapp);
  box-shadow: 0 0 0 2px var(--papel), 0 6px 18px rgba(13, 22, 59, .30);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease;
}
.wa-flutuante.escondido { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-flutuante { transition: none; } }

/* Notice shown only while placeholders remain */
.aviso-teste { background: #fff4c2; color: #3a3000; font-size: 13px; line-height: 1.4; padding: 6px 12px; text-align: center; }
.aviso-teste[hidden] { display: none; }

.rodape { padding: 32px 24px 96px; text-align: center; font-size: 14px; color: var(--tinta-2); }

/* Computer size */
@media (min-width: 768px) {
  h1 { font-size: 52px; }
  h2 { font-size: 38px; }
  body { font-size: 18px; }
  .sec { padding: 80px 40px; }
  .hero { padding-top: 40px; }
  .hero__linha { font-size: 19px; }
  .hero__fatos { font-size: 17px; }
  .hero__fatos .citacao { font-size: 23px; }
  .video { width: 320px; }
  .hero .btn { align-self: center; min-width: 420px; }
  .quando { align-self: center; width: 520px; }
  .preco { font-size: 56px; }
}