/* ============================================================
   ConcreStones — landing de concreto arquitetônico de alto padrão.
   Paleta própria (bege ↔ carvão + cobre), fora do dark-mode da casa.
   Voz: refinada, arquitetônica. "Engenharia vendida como estética."
   Tipografia: Archivo (display + corpo) · IBM Plex Mono (rótulos).
   ============================================================ */

.cst{
  /* superfícies claras */
  --paper:#ECE5DA; --paper-2:#F3EDE2; --card:#F2ECE1;
  --ink:#1C1A16; --ink-2:#6B665C; --ink-3:#948E82; --line:#D3CCBE;
  /* superfícies escuras */
  --char:#242019; --char-2:#2C2720; --char-line:#3B352C;
  --on:#EEE8DD; --on-2:#A69E90; --on-3:#7B7365;
  /* cobre → CORTEN canônico da vertente Engenharia (--accent) */
  --cop:#B5683F; --cop-lt:#CE8A5E; --cop-deep:#7A4530;

  --fd:'Archivo', system-ui, sans-serif;
  --fm:'IBM Plex Mono', ui-monospace, monospace;
  --wrap:1200px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  font-family:var(--fd);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
.cst *{ box-sizing:border-box; }
.cst img{ display:block; max-width:100%; }
.cst ::selection{ background:var(--cop); color:#fff; }
.cst a{ color:inherit; text-decoration:none; }

.cs-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 48px; width:100%; }
@media(max-width:720px){ .cs-wrap{ padding:0 24px; } }

/* ---------- rótulos ---------- */
.cs-ey{ font-family:var(--fm); font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--cop); display:flex; align-items:center; gap:16px; }
.cs-ey::before{ content:""; width:36px; height:1px; background:var(--cop); flex:none; }
.cs-ey--plain::before{ display:none; }

.cs-h2{ font-family:var(--fd); font-weight:700; font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.02; letter-spacing:-.02em; margin-top:24px; }
.cs-h2 em{ font-style:normal; color:var(--cop); }
.cs-sub{ color:var(--ink-2); font-size:1.05rem; line-height:1.6; max-width:46ch; margin-top:20px; }
.cs-note{ font-family:var(--fm); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- botões ---------- */
.cs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--fm); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  padding:17px 30px; border:1px solid var(--cop); background:var(--cop); color:#F7F1E6;
  transition:background var(--dur,.18s) var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.cs-btn:hover{ background:var(--cop-deep); border-color:var(--cop-deep); transform:translateY(-2px); }
.cs-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.cs-btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.cs-btn--on-dark.cs-btn--ghost{ color:var(--on); border-color:var(--on-3); }
.cs-btn--on-dark.cs-btn--ghost:hover{ background:var(--on); color:var(--char); border-color:var(--on); }

/* ============================================================
   NAV
   ============================================================ */
.cs-nav{ position:fixed; top:0; left:0; right:0; z-index:50; height:76px;
  display:flex; align-items:center; justify-content:space-between; padding:0 48px;
  transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.cs-nav.is-stuck{ background:color-mix(in oklab,var(--paper) 92%, transparent); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); }
@media(max-width:720px){ .cs-nav{ padding:0 24px; height:64px; } }

.cs-brand{ display:flex; align-items:center; gap:12px; }
.cs-logo{ width:30px; height:30px; flex:none; }
.cs-brand__wm{ font-family:var(--fd); font-size:1.18rem; letter-spacing:-.01em; }
.cs-brand__wm b{ font-weight:800; }
.cs-brand__wm span{ font-weight:400; }

.cs-nav__links{ display:flex; align-items:center; gap:34px; }
.cs-nav__links a{ font-family:var(--fd); font-weight:500; font-size:.95rem; color:var(--ink-2); transition:color .18s var(--ease); }
.cs-nav__links a:hover{ color:var(--ink); }
.cs-nav__cta{ font-family:var(--fm)!important; font-size:.72rem!important; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  padding:12px 22px; border:1px solid var(--ink); color:var(--ink)!important; transition:background .18s var(--ease), color .18s var(--ease); }
.cs-nav__cta:hover{ background:var(--ink); color:var(--paper)!important; }
.cs-burger{ display:none; }
@media(max-width:940px){
  .cs-nav__links a:not(.cs-nav__cta){ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.cs-hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--char); }
.cs-hero__media{ position:absolute; inset:0; }
.cs-hero__media image-slot{ width:100%; height:100%; }
.cs-hero__scrim{ position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(20,17,13,.72) 0%, rgba(20,17,13,.28) 42%, rgba(20,17,13,0) 68%),
    linear-gradient(0deg, rgba(20,17,13,.78) 0%, rgba(20,17,13,0) 52%); }
.cs-hero__in{ position:relative; z-index:2; padding-bottom:74px; padding-top:120px; }
.cs-hero__side{ position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:2;
  writing-mode:vertical-rl; font-family:var(--fm); font-size:.66rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(238,232,221,.5); }
@media(max-width:940px){ .cs-hero__side{ display:none; } }

.cs-hero__ey{ color:var(--cop-lt); }
.cs-hero__title{ font-family:var(--fd); font-weight:400; color:#fff; letter-spacing:-.03em; line-height:.9;
  font-size:clamp(4rem,13vw,10rem); margin-top:22px; }
.cs-hero__title b{ font-weight:800; }
.cs-hero__title span{ font-weight:300; color:rgba(255,255,255,.86); }
.cs-hero__rule{ height:1px; background:rgba(238,232,221,.28); margin:30px 0; max-width:840px; }
.cs-hero__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.cs-hero__lead{ color:rgba(238,232,221,.9); font-size:1.35rem; line-height:1.4; font-weight:400; max-width:20ch; }
.cs-hero__lead em{ font-style:normal; color:var(--cop-lt); }
.cs-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:720px){ .cs-hero__lead{ font-size:1.1rem; } .cs-hero__actions{ width:100%; } .cs-hero__actions .cs-btn{ flex:1; } }

/* ============================================================
   SEÇÃO base
   ============================================================ */
.cs-sec{ padding:120px 0; position:relative; }
.cs-sec--light{ background:var(--paper); color:var(--ink); }
.cs-sec--dark{ background:var(--char); color:var(--on); }
.cs-sec--dark .cs-h2{ color:var(--on); }
.cs-sec--dark .cs-sub{ color:var(--on-2); }
.cs-sec--dark .cs-note{ color:var(--on-3); }
@media(max-width:720px){ .cs-sec{ padding:80px 0; } }

/* ---------- POSICIONAMENTO ---------- */
.cs-pos{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.cs-pos__head .cs-h2{ margin-top:28px; }
.cs-pos__lead{ font-size:1.55rem; line-height:1.4; margin-top:34px; max-width:22ch; }
.cs-pos__lead b{ font-weight:700; }
.cs-stats{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); align-self:center; }
.cs-stat{ padding:32px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cs-stat:nth-child(2n){ border-right:0; }
.cs-stat:nth-child(n+3){ border-bottom:0; }
.cs-stat__n{ font-family:var(--fd); font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.03em; }
.cs-stat__n small{ font-weight:400; font-size:1rem; letter-spacing:0; margin-left:6px; color:var(--ink-2); }
.cs-stat--hi .cs-stat__n{ color:var(--ink); }
.cs-stat:not(.cs-stat--hi) .cs-stat__n{ color:var(--ink-3); }
.cs-stat__l{ font-family:var(--fm); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; line-height:1.5; }
@media(max-width:900px){ .cs-pos{ grid-template-columns:1fr; gap:40px; } }

/* ---------- LINHA DE ACABAMENTOS (cards) ---------- */
.cs-fingrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:60px; background:var(--char-line); border:1px solid var(--char-line); }
.cs-fin{ background:var(--char); display:flex; flex-direction:column; }
.cs-fin__img{ aspect-ratio:4/3; background:var(--char-2); position: relative; }
.cs-fin__img image-slot{ width:100%; height:100%; }
.cs-fin__body{ padding:22px 22px 30px; }
.cs-fin__top{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--fm); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; }
.cs-fin__cs{ color:var(--on-3); }
.cs-fin__rank{ color:var(--cop-lt); }
.cs-fin__name{ font-family:var(--fd); font-weight:700; font-size:1.35rem; margin-top:16px; letter-spacing:-.01em; }
.cs-fin__tag{ font-family:var(--fm); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-3); margin-top:8px; }
.cs-fin__d{ color:var(--on-2); font-size:.9rem; line-height:1.55; margin-top:16px; }
@media(max-width:900px){ .cs-fingrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cs-fingrid{ grid-template-columns:1fr; } }

/* ---------- CORES & COMPOSIÇÕES ---------- */
.cs-comp-head{ max-width:640px; }
.cs-compgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:56px; }
.cs-comp__img{ aspect-ratio:1; background:var(--card); border:1px solid var(--line); position:relative; }
.cs-comp__img image-slot{ width:100%; height:100%; }
.cs-comp__num{ position:absolute; top:10px; left:10px; font-family:var(--fm); font-size:.58rem; letter-spacing:.12em; color:var(--ink-2); background:color-mix(in oklab,var(--paper) 84%, transparent); padding:3px 7px; }
.cs-comp__name{ font-family:var(--fd); font-weight:700; font-size:1.15rem; margin-top:18px; }
.cs-comp__d{ color:var(--ink-2); font-size:.85rem; line-height:1.5; margin-top:8px; }
.cs-comp-foot{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.cs-comp-foot p{ font-size:.85rem; color:var(--ink-2); max-width:52ch; }
.cs-comp-foot p b{ font-weight:600; color:var(--ink); }
@media(max-width:900px){ .cs-compgrid{ grid-template-columns:1fr 1fr; } }

/* ---------- O SISTEMA (7 camadas) ---------- */
.cs-sys{ margin-top:56px; border-top:1px solid var(--line); }
.cs-sysrow{ display:grid; grid-template-columns:70px 260px 1fr; gap:28px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); }
.cs-sysrow__n{ font-family:var(--fm); font-size:.72rem; color:var(--cop); letter-spacing:.1em; }
.cs-sysrow__t{ font-family:var(--fd); font-weight:600; font-size:1.5rem; letter-spacing:-.01em; }
.cs-sysrow__d{ color:var(--ink-2); font-size:.95rem; line-height:1.55; max-width:60ch; }
@media(max-width:820px){ .cs-sysrow{ grid-template-columns:44px 1fr; row-gap:8px; } .cs-sysrow__d{ grid-column:2; } }

/* ---------- O DIFERENCIAL (split) ---------- */
.cs-diff{ display:grid; grid-template-columns:1fr 1fr; min-height:640px; }
.cs-diff__media{ display:grid; grid-template-rows:1fr 1fr; gap:2px; background:var(--char-line); }
.cs-diff__media image-slot{ width:100%; height:100%; }
.cs-diff__txt{ background:var(--char); color:var(--on); display:flex; flex-direction:column; justify-content:center; padding:80px; }
.cs-diff__txt .cs-h2{ color:var(--on); max-width:14ch; }
.cs-diff__txt .cs-h2 em{ color:var(--cop-lt); }
.cs-diff__p{ color:var(--on-2); font-size:1rem; line-height:1.65; max-width:52ch; margin-top:24px; }
.cs-diff__p em{ color:var(--on); font-style:italic; }
.cs-diff__txt .cs-btn{ margin-top:36px; align-self:flex-start; }
@media(max-width:900px){ .cs-diff{ grid-template-columns:1fr; } .cs-diff__media{ grid-template-rows:1fr; grid-auto-rows:1fr; min-height:520px; } .cs-diff__txt{ padding:56px 24px; } }

/* ---------- MODELO COMERCIAL ---------- */
.cs-model{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); margin-top:56px; }
.cs-model__l{ padding:56px; border-right:1px solid var(--line); }
.cs-model__k{ font-family:var(--fm); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.cs-model__big{ font-family:var(--fd); font-weight:800; font-size:clamp(2.6rem,5vw,4rem); line-height:.95; letter-spacing:-.03em; margin-top:16px; }
.cs-model__big small{ font-weight:400; font-size:1.15rem; letter-spacing:0; margin-left:8px; color:var(--ink-2); }
.cs-model__d{ color:var(--ink-2); font-size:.95rem; line-height:1.6; margin-top:22px; max-width:38ch; }
.cs-model__l .cs-btn{ margin-top:32px; }
.cs-model__r{ padding:40px 56px; display:flex; flex-direction:column; justify-content:center; }
.cs-mrow{ display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.cs-mrow:last-child{ border-bottom:0; }
.cs-mrow__n{ font-family:var(--fm); font-size:.68rem; color:var(--cop); }
.cs-mrow__t{ font-size:1rem; color:var(--ink); }
@media(max-width:820px){ .cs-model{ grid-template-columns:1fr; } .cs-model__l{ border-right:0; border-bottom:1px solid var(--line); padding:40px 28px; } .cs-model__r{ padding:24px 28px; } }

/* ---------- OBRAS (galeria mosaico) ---------- */
.cs-galhead{ max-width:520px; margin-bottom:48px; }
.cs-gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:232px; gap:18px; }
.cs-gcell{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); }
.cs-gcell image-slot{ width:100%; height:100%; }
.cs-gcell .cap{ position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--fm); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:#F3EEE4;
  background:rgba(28,25,20,.62); padding:7px 11px; backdrop-filter:blur(2px); }
.cs-gcell--hero{ grid-column:1/3; grid-row:1/3; }
.cs-gcell--suite{ grid-column:3/4; grid-row:1; }
.cs-gcell--cozinha{ grid-column:4/5; grid-row:1; }
.cs-gcell--pd{ grid-column:3/5; grid-row:2; }
.cs-gcell--hall{ grid-column:1/2; grid-row:3; }
.cs-gcell--macro{ grid-column:2/3; grid-row:3; }
@media(max-width:820px){
  .cs-gal{ grid-template-columns:1fr 1fr; grid-auto-rows:180px; }
  .cs-gcell--hero{ grid-column:1/3; grid-row:auto; height:300px; }
  .cs-gcell{ grid-column:auto!important; grid-row:auto!important; }
}

/* ---------- CONTATO ---------- */
.cs-contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:start; }
.cs-contact__lead{ color:var(--on-2); font-size:1.05rem; line-height:1.6; margin-top:22px; max-width:34ch; }
.cs-clist{ margin-top:44px; border-top:1px solid var(--char-line); }
.cs-crow{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--char-line); }
.cs-crow__k{ font-family:var(--fm); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-3); }
.cs-crow__v{ font-size:1.02rem; color:var(--on); font-weight:500; }
.cs-form{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cs-field{ display:flex; flex-direction:column; gap:9px; }
.cs-field--full{ grid-column:1/3; }
.cs-field label{ font-family:var(--fm); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-3); }
.cs-field input, .cs-field select, .cs-field textarea{
  font-family:var(--fd); font-size:1rem; color:var(--on);
  background:transparent; border:1px solid var(--char-line); padding:14px 16px; border-radius:0;
  transition:border-color .18s var(--ease); }
.cs-field input::placeholder, .cs-field textarea::placeholder{ color:var(--on-3); }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus{ outline:none; border-color:var(--cop); }
.cs-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237B7365' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.cs-field select option{ background:var(--char); color:var(--on); }
.cs-field textarea{ resize:vertical; min-height:96px; }
.cs-form .cs-btn{ grid-column:1/3; width:100%; }
.cs-form__note{ grid-column:1/3; font-family:var(--fm); font-size:.62rem; letter-spacing:.06em; color:var(--on-3); }
@media(max-width:900px){ .cs-contact{ grid-template-columns:1fr; gap:48px; } }
@media(max-width:560px){ .cs-form{ grid-template-columns:1fr; } .cs-field--full,.cs-form .cs-btn,.cs-form__note{ grid-column:1; } }

/* ---------- FOOTER ---------- */
.cs-foot{ background:var(--char); border-top:1px solid var(--char-line); padding:40px 0; }
.cs-foot__row{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.cs-foot__brand{ display:flex; align-items:center; gap:12px; color:var(--on); }
.cs-foot__meta{ font-family:var(--fm); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-3); line-height:1.9; text-align:right; }
.cs-foot__meta a:hover{ color:var(--cop-lt); }
@media(max-width:720px){ .cs-foot__meta{ text-align:left; } }

/* ---------- reveal ---------- */
.cs-rv{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .cs-rv[data-armed]{ opacity:0; transform:translateY(18px); }
  .cs-rv.is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
}

.cs-diff__item { position: relative; width: 100%; height: 100%; }

/* Marca d'água "Imagem Conceitual" */
.cbl-watermark {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  font-family: var(--fm);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 3px 6px;
  pointer-events: none;
  backdrop-filter: blur(2px);
  user-select: none;
}