/* Catarina Leal · base compartilhada · depende de tokens.css */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: hidden;
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.65;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* Acessibilidade */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--orquidea); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); text-decoration: none; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--orquidea); outline-offset: 3px; border-radius: 4px; }
.sec--ameixa :focus-visible, .sec--foto :focus-visible { outline-color: var(--dourado-claro); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Tipografia */
.display, h1, h2, h3 {
  font-family: var(--font-display); font-variation-settings: var(--fvs-display);
  font-weight: 400; line-height: 1.02; letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
h1, .t-h1 { font-size: var(--t-h1); }
h2, .t-h2 { font-size: var(--t-h2); }
h3, .t-h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; }
.t-giant { font-size: var(--t-giant); line-height: .92; letter-spacing: -.035em; }
.display em, h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; color: var(--orquidea); }
.sec--ameixa h1 em, .sec--ameixa h2 em, .sec--ameixa h3 em, .sec--foto h1 em, .sec--foto h2 em, .sec--foto h3 em, .sec--gradiente h1 em, .sec--gradiente h2 em, .sec--gradiente h3 em, .on-dark h1 em, .on-dark h2 em, .on-dark h3 em, .on-dark .display em { color: var(--dourado-claro); }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--text-muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--roxo);
}
.sec--ameixa .eyebrow, .sec--foto .eyebrow, .sec--gradiente .eyebrow, .on-dark .eyebrow { color: var(--dourado-claro); }
/* Contexto escuro genérico (hero com foto, cards escuros): destaque sempre dourado ou lavanda, nunca orquídea */
.on-dark { color: var(--on-dark); }
.on-dark .lead, .on-dark p { color: var(--on-dark-soft); }

/* Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); overflow: hidden; isolation: isolate; }

/* 5 modalidades de fundo (alternância obrigatória, playbook 06) */
.sec--nevoa { background: var(--nevoa); color: var(--ink); }
.sec--claro { background: var(--branco-lilas); color: var(--ink); }
.sec--ameixa { background: var(--ameixa-noite); color: var(--on-dark); }
.sec--ameixa .lead, .sec--ameixa p { color: var(--on-dark-soft); }
.sec--gradiente {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(156, 24, 168, .28), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(108, 36, 132, .45), transparent 60%),
    radial-gradient(40% 30% at 12% 88%, rgba(240, 204, 106, .10), transparent 70%),
    var(--ameixa-noite);
  color: var(--on-dark);
}
.sec--lilas-gradiente {
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(201, 169, 217, .55), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(156, 24, 168, .10), transparent 60%),
    var(--nevoa);
}
/* Foto desbotada atrás de seção: definir --bg-foto e --bg-pos inline */
.sec--foto { background: var(--ameixa-noite); color: var(--on-dark); }
.sec--foto::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--bg-foto) var(--bg-pos, 50% 20%) / cover no-repeat;
  opacity: var(--bg-op, .16); mix-blend-mode: luminosity;
}
.sec--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(42, 19, 48, .55), rgba(42, 19, 48, .92));
}

/* Grão (camada 3): elemento próprio, nunca pseudo, pra não brigar com overlays.
   Uso: <i class="grain" aria-hidden="true"></i> como primeiro filho de uma seção position:relative */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section > .container { position: relative; z-index: 1; }

/* Tinta ameixa sobre foto de estúdio: transforma o fundo bege das fotos em malva.
   Uso: <div class="foto-tinta"><img ...><i class="tinta"></i></div> */
.tinta { position: absolute; inset: 0; pointer-events: none; background: rgba(156, 24, 168, .20); mix-blend-mode: multiply; }
.tinta--forte { background: rgba(108, 36, 132, .34); }

/* Foto com enquadramento controlado: SEMPRE passar --pos com o valor da tabela de fotos */
.foto { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ameixa); }
.foto > img, .foto > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 15%); }
.foto--tinta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(42, 19, 48, .78)); }

/* Botões */
.btn {
  --b-bg: var(--orquidea); --b-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 28px; border-radius: var(--radius-pill); border: 0;
  background: var(--b-bg); color: var(--b-fg); text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--glow-orquidea); background: var(--orquidea-hover); }
.btn svg { width: 18px; height: 18px; }
.btn--dourado { --b-bg: var(--dourado-claro); --b-fg: var(--ameixa-noite); }
.btn--dourado:hover { background: #F6D983; box-shadow: 0 20px 60px -20px rgba(240, 204, 106, .6); }
.btn--ghost { --b-bg: transparent; --b-fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: rgba(156, 24, 168, .08); box-shadow: inset 0 0 0 1.5px currentColor; }

/* Chip / selo */
.chip { display: inline-flex; align-items: center; gap: .45em; padding: 6px 14px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 700; letter-spacing: .06em; background: var(--lavanda-soft); color: var(--roxo); }
.sec--ameixa .chip, .sec--foto .chip, .sec--gradiente .chip { background: rgba(246, 239, 248, .1); color: var(--dourado-claro); }

/* Motivo da marca: brilho de 4 pontas (SVG stroke) */
.brilho { width: 1em; height: 1em; display: inline-block; vertical-align: -.1em; color: var(--dourado); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Grades responsivas (playbook 06) */
.g4 { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.g3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.g2 { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .g4 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .g4, .g3 { grid-template-columns: 1fr; } }