/* ============================================================
   02. BASE — reset, tipografia, grid, formas, texturas, motion
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
  font-weight: var(--w-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--ouro-400); color: var(--marrom-900); }

/* ---------- 2.1 ESCALA TIPOGRÁFICA -------------------------- */

.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--fonte-display);
  color: var(--title-primary);
  margin: 0;
  text-wrap: balance;
}

.t-display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-display);
}
.t-h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--w-display);
}
.t-h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--w-titulo);
}
.t-h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--w-titulo);
}

.t-eyebrow {
  font-family: var(--fonte-texto);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-titulo);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text-accent);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}
.t-eyebrow::before {
  content: "";
  width: 1.5rem; height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
.t-eyebrow--nu::before { display: none; }

.t-body-lg { font-size: var(--t-body-lg); line-height: 1.6; margin: 0; }
.t-body    { font-size: var(--t-body); line-height: var(--lh-corpo); margin: 0; }
.t-small   { font-size: var(--t-small); line-height: var(--lh-curto); margin: 0; }
.t-caption {
  font-size: var(--t-caption);
  line-height: 1.5;
  letter-spacing: .012em;
  color: var(--text-muted);
  margin: 0;
}
.t-sec  { color: var(--text-secondary); }
.t-mut  { color: var(--text-muted); }
.t-acc  { color: var(--text-accent); }
.medida { max-width: var(--largura-texto); }

/* Destaque manuscrito dentro do título — nunca no corpo */
.t-realce { color: var(--title-accent); font-style: normal; }
.t-realce-ouro { color: var(--ouro-600); }

/* Slot de conteúdo: marca onde entra texto real da landing */
.slot {
  border-bottom: 1.5px dotted var(--border-medium);
  padding-bottom: .05em;
  color: var(--text-secondary);
}

/* ---------- 2.2 LAYOUT / GRID ------------------------------- */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--margem-externa);
}
.container--estreito { max-width: var(--largura-estreita); }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grid);
}
@media (max-width: 860px) { .grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}
.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width: 860px){
  .col-2,.col-3,.col-4{grid-column:span 3}
  .col-5,.col-6,.col-7,.col-8{grid-column:span 6}
}
@media (max-width: 560px){
  .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 2}
}

.pilha   { display: flex; flex-direction: column; }
.pilha-2 { gap: var(--esp-2) } .pilha-3 { gap: var(--esp-3) }
.pilha-4 { gap: var(--esp-4) } .pilha-5 { gap: var(--esp-5) }
.pilha-6 { gap: var(--esp-6) } .pilha-7 { gap: var(--esp-7) }
.linha   { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }

/* Ritmo editorial canônico */
.bloco-editorial { display: flex; flex-direction: column; }
.bloco-editorial > .t-eyebrow + *      { margin-top: var(--esp-4); }
.bloco-editorial > :is(.t-display,.t-h1,.t-h2,.t-h3) + :is(p,.t-body,.t-body-lg,.medida) {
  margin-top: var(--gap-titulo-texto);
}
.bloco-editorial > :is(p,.t-body,.t-body-lg,.medida) + :is(p,.t-body,.t-body-lg,.medida) {
  margin-top: var(--esp-4);
}
.bloco-editorial > :is(p,.t-body,.t-body-lg,.medida) + .acoes { margin-top: var(--gap-texto-cta); }

.secao { padding-block: var(--secao-y); }
.secao--densa { padding-block: var(--secao-y-densa); }

/* ---------- 2.3 FUNDOS -------------------------------------- */

.fundo-creme  { background: var(--bg-primary);  color: var(--text-primary); }
.fundo-quente { background: var(--bg-secondary); color: var(--text-primary); }
.fundo-papel  { background: var(--surface-light); color: var(--text-primary); }
.fundo-terra  { background: var(--bg-terra);  color: var(--text-on-dark); }
.fundo-escuro { background: var(--bg-deep);   color: var(--text-on-dark); }
.fundo-mata   { background: var(--bg-mata);   color: var(--text-on-dark); }
.fundo-terra, .fundo-escuro, .fundo-mata { }

/* ---------- 2.4 FORMAS -------------------------------------- */

.forma-reta   { border-radius: var(--raio-xs); }
.forma-suave  { border-radius: var(--raio-md); }
.forma-ampla  { border-radius: var(--raio-lg); }
.forma-pill   { border-radius: var(--raio-pill); }
.forma-arco   { border-radius: var(--raio-arco); }
.forma-arco-sut { border-radius: var(--raio-arco-sut); }
.forma-seixo  { border-radius: var(--raio-seixo); }

/* Arco recortado à mão — clipPath SVG declarado no HTML */
.forma-arco-mao   { clip-path: url(#clip-arco); }
.forma-seixo-mao  { clip-path: url(#clip-seixo); }
.forma-rasgo      { filter: url(#f-rasgo); }

/* Moldura: contorno de traço, não caixa de UI */
.moldura {
  border: var(--traco-medio) solid var(--border-medium);
  border-radius: var(--raio-md);
}
.moldura-arco {
  border: var(--traco-grosso) solid var(--border-strong);
  border-radius: var(--raio-arco);
}
.moldura-ouro { border: var(--traco-medio) solid var(--border-gold); }

/* ---------- 2.5 TEXTURAS ------------------------------------
   Atmosfera, nunca protagonista. Uma por superfície.          */

.tex { position: relative; isolation: isolate; }
.tex::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.tex > * { position: relative; z-index: 1; }

/* Papel — fibra fina sob fundos claros */
.tex-papel::after {
  opacity: var(--op-papel);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23p)'/></svg>");
}

/* Grão — granulado de impressão, também sobre fundos escuros */
.tex-grao::after {
  opacity: var(--op-grao);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
}

/* Mineral — veios de ágata. Só em blocos de cor cheia. */
.tex-mineral::after {
  opacity: var(--op-mineral);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='turbulence' baseFrequency='0.006 0.028' numOctaves='5' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='gamma' exponent='1.6'/></feComponentTransfer></filter><rect width='600' height='600' filter='url(%23m)'/></svg>");
  background-size: cover;
}

/* Vegetal — padrão de folhas. Fundo de seção, nunca de card de texto. */
.tex-vegetal::after {
  opacity: var(--op-vegetal);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='170' viewBox='0 0 120 170'><g fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'><path d='M30 164 C12 124 13 66 30 22 C47 66 48 124 30 164'/><path d='M30 164 L30 22'/><path d='M30 44 L18 60M30 44 L42 60M30 66 L16 84M30 66 L44 84M30 90 L17 108M30 90 L43 108M30 114 L20 130M30 114 L40 130'/><path d='M90 249 C72 209 73 151 90 107 C107 151 108 209 90 249' transform='translate(0,-85)'/><path d='M90 79 L90 -63' transform='translate(0,0)'/><path d='M90 -41 L78 -25M90 -41 L102 -25M90 -19 L76 -1M90 -19 L104 -1M90 5 L77 23M90 5 L103 23M90 29 L80 45M90 29 L100 45'/></g></svg>");
  background-size: 120px 170px;
}
.tex-vegetal--claro::after { filter: invert(1); opacity: .14; }

/* Impressão — borda de xilogravura, aplicada em títulos e selos */
.tex-impressao { filter: url(#f-impressao); }

/* ---------- 2.6 FOTOGRAFIA ---------------------------------- */

.foto {
  position: relative;
  overflow: hidden;
  background: var(--surface-sunk);
  isolation: isolate;
}
.foto > img { width: 100%; height: 100%; object-fit: cover; }

/* Tratamento cromático: unifica qualquer origem no calor da Casa */
.foto--tratada > img,
.foto--tratada > .foto-sim {
  filter: saturate(.88) contrast(1.06) brightness(1.01) sepia(.12);
}
.foto::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: var(--terra-700);
  mix-blend-mode: multiply;
  opacity: .10;
}
.foto::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='fg'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23fg)'/></svg>");
}
.foto--limpa::before, .foto--limpa::after { display: none; }

/* Proporções canônicas */
.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-4-5  { aspect-ratio: 4 / 5; }
.ar-3-4  { aspect-ratio: 3 / 4; }
.ar-5-7  { aspect-ratio: 5 / 7; }
.ar-3-2  { aspect-ratio: 3 / 2; }
.ar-16-10{ aspect-ratio: 16 / 10; }

/* Simulação de fotografia para o catálogo (sem imagem real) */
.foto-sim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, var(--creme-300) 88%, #fff) 0%, transparent 55%),
    radial-gradient(100% 80% at 78% 88%, var(--marrom-900) 0%, transparent 62%),
    linear-gradient(168deg, var(--terra-500) 0%, var(--terra-700) 46%, var(--marrom-900) 100%);
}
.foto-sim--verde {
  background:
    radial-gradient(120% 90% at 25% 12%, color-mix(in srgb, var(--verde-400) 80%, #fff) 0%, transparent 58%),
    radial-gradient(100% 80% at 80% 90%, var(--mata-900) 0%, transparent 60%),
    linear-gradient(170deg, var(--verde-400) 0%, var(--verde-600) 48%, var(--mata-900) 100%);
}
.foto-sim--ouro {
  background:
    radial-gradient(110% 85% at 32% 18%, var(--ouro-400) 0%, transparent 56%),
    radial-gradient(100% 80% at 76% 92%, var(--marrom-900) 0%, transparent 64%),
    linear-gradient(165deg, var(--ouro-600) 0%, var(--terra-500) 52%, var(--marrom-900) 100%);
}
.foto-nota {
  position: absolute; inset: auto 0 0 0; z-index: 4;
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--t-caption);
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--creme-100) 82%, transparent);
  background: linear-gradient(to top, color-mix(in srgb, var(--marrom-900) 72%, transparent), transparent);
}

/* Legenda editorial sob a imagem */
.foto-legenda {
  margin-top: var(--esp-3);
  font-size: var(--t-caption);
  color: var(--text-muted);
  display: flex; gap: var(--esp-2); align-items: baseline;
}
.foto-legenda::before { content: "—"; opacity: .6; }

/* ---------- 2.7 MOVIMENTO ----------------------------------- */

/* Revelação editorial ao entrar em cena. Só em página de marketing.
   O estado oculto é ligado pelo JS (data-preparado): sem script, o
   conteúdo aparece normalmente.
   Não usar clip-path aqui: um elemento recortado a zero tem área zero
   e o IntersectionObserver deixa de considerá-lo visível — a revelação
   passaria a bloquear a si mesma. */
.revelar[data-preparado] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-revelacao) var(--ease-out),
    transform var(--dur-revelacao) var(--ease-out);
}
.revelar[data-visivel] { opacity: 1; transform: translateY(0); }

/* Entrada em grupo escalonada */
.entrar > * {
  opacity: 0;
  transform: translateY(10px);
  animation: subirSuave 300ms var(--ease-out) forwards;
}
.entrar > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.entrar > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.entrar > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.entrar > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.entrar > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
@keyframes subirSuave { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar[data-preparado] { transform: none; transition: opacity var(--dur-menu) var(--ease-out); }
  .entrar > * { transform: none; animation: apenasOpacidade 220ms var(--ease-out) forwards; }
  @keyframes apenasOpacidade { to { opacity: 1; } }
}

/* ---------- 2.8 UTIL ---------------------------------------- */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}