/* Café Serra (rem do SWCore = 10px) — exemplo de site premium com SWCore 2.2 (26/09/2026).
   Só aparência: todo movimento vem dos atributos sw-ani / sw-layer / sw-drift. */
:root {
  --cs-ouro: #d9a55b;
  --cs-texto: #f4ece2;
  --cs-texto-2: #c9b8a6;
}
:root[sw-theme="light"] {
  --cs-ouro: #9a5f1c;
  --cs-texto: #2a1d14;
  --cs-texto-2: #6b5646;
}
body { margin: 0; color: var(--cs-texto); font-family: "Inter", system-ui, sans-serif; }

.cs-topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem clamp(1.6rem, 4vw, 4.8rem);
}
/* difference: branco sobre foto/escuro, escuro sobre o fundo claro do tema dia */
.cs-marca { mix-blend-mode: difference; color: #fff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

/* hero — texto em cima da foto: sempre claro, nos dois temas */
.cs-xicara {
  inset: auto !important; left: 50% !important; bottom: 3% !important;
  width: min(44vmin, 440px) !important; height: auto !important; translate: -50% 0;
}
.cs-folhas { top: auto !important; height: 46% !important; }
.cs-selo { color: var(--cs-ouro); letter-spacing: .2em; text-transform: uppercase; font-size: 1.36rem; margin: 0 0 1.6rem; }
:root[sw-theme="light"] .cs-selo { color: #f2c27e; }
.cs-titulo {
  color: #fff; margin: 0 0 30vh; line-height: 1.02;
  font-size: clamp(4.16rem, 8vw, 10.4rem); font-weight: 800;
  text-shadow: 0 6px 40px rgb(0 0 0 / .5);
}
.cs-nevoa { background: linear-gradient(transparent 45%, rgb(255 236 210 / .22) 80%, rgb(15 12 10 / .9)); }

.cs-bloco { padding: clamp(8rem, 14vh, 14.4rem) clamp(1.6rem, 6vw, 8rem); }
.cs-manifesto { min-height: 80vh; display: grid; place-items: center; }
.cs-frase { max-width: 900px; margin: 0; font-size: clamp(2.56rem, 3.6vw, 4.48rem); line-height: 1.3; font-weight: 600; }

.cs-etapa { position: relative; overflow: hidden; }
.cs-etapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-etapa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 8 6 / .85), transparent 65%); }
.cs-etapa-txt { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 520px; padding: 0 clamp(1.92rem, 7vw, 9.6rem); color: #fff; }
.cs-etapa-txt h2 { font-size: clamp(3.84rem, 6vw, 7.2rem); margin: 0.48rem 0; color: #fff; }
.cs-etapa-txt p { color: #e8dccd; font-size: 1.84rem; margin: 0; }
.cs-num { color: #f2c27e; font-weight: 700; letter-spacing: .15em; }

.cs-h2 { color: var(--cs-texto); font-size: clamp(3.2rem, 5vw, 5.76rem); margin: 0 0 4rem; text-align: center; }
.cs-numeros { max-width: 1000px; margin: 0 auto; text-align: center; }
.cs-numeros p { color: var(--cs-texto-2); margin: 0.64rem 0 0; }
.cs-grande { font-size: clamp(4.16rem, 6vw, 6.72rem); font-weight: 800; color: var(--cs-ouro); }

.cs-final { text-align: center; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cs-sub { color: var(--cs-texto-2); max-width: 560px; margin: 0 0 3.2rem; }

@media (max-width: 767px) {
  .cs-xicara { width: 70vw !important; bottom: 16% !important; }
  .cs-folhas { height: 28% !important; }
  .cs-titulo { margin-bottom: 34vh; }
  .cs-etapa::after { background: linear-gradient(0deg, rgb(10 8 6 / .9), transparent 70%); }
  .cs-etapa-txt { justify-content: flex-end; padding-bottom: 12vh; }
}