/* =====================================================================
   ILUMIÓ ACESSÓRIOS · LINK NA BIO
   Layout: capa cinematográfica (joia à esquerda e marca à direita no
   desktop, empilhadas no celular) → coluna estreita de botões, como um
   porta-joias aberto → rodapé discreto.
   Paleta oficial Ilumió: vinho, dourado, champagne e marrom.
   Cor principal: champagne (clara). Vinho reservado para a capa.
   Visual de tema único, por escolha de marca.
   ===================================================================== */

:root {
  /* Cores */
  /* Paleta oficial */
  --vinho: #722624;
  --dourado: #C58A25;
  --champagne: #F6F0E8;
  --marrom: #241513;

  /* Derivadas */
  --ink: var(--marrom);    /* texto principal */
  --bg: var(--champagne);  /* fundo principal */
  --bg-2: #efe4d6;         /* fundo do rodapé */
  --text-2: #5c4339;       /* texto secundário */
  --ink-2: #2e1a17;        /* superfícies */
  --wine-deep: #4a1817;    /* vinho escuro do degradê */
  --gold: var(--dourado);  /* acento */
  --gold-hi: #ecc77c;      /* brilho do dourado */
  --gold-lo: #8a5e14;      /* sombra do dourado */
  --cream: var(--champagne); /* texto */
  --muted: #c2ab9f;
  --line: rgba(197, 138, 37, .3);

  /* Tipografia */
  --f-display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --f-body: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Medidas */
  --col: 540px;
  --radius: 22px;
  --gutter: 18px;
  --ease: cubic-bezier(.22, .7, .2, 1);

  /* cor da seção dos banners (o degradê da capa termina nela) */
  --next-bg: var(--bg);
  --via: var(--next-bg);        /* tom intermediário do degradê */

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--marrom);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1.5px solid var(--dourado); outline-offset: 4px; border-radius: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap {
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.js.is-loading body { overflow: hidden; }

/* ---------- Marca (logo em texto) ---------- */
.brandmark { display: grid; justify-items: center; gap: 10px; text-align: center; }
.brandmark__img { width: min(260px, 64vw); height: auto; }

.mono { position: relative; width: 74px; height: 74px; display: grid; place-items: center; }
.mono svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mono__ring { fill: none; stroke: var(--gold); stroke-width: 1.1; }
.mono__ring2 { fill: none; stroke: var(--gold); stroke-opacity: .35; stroke-width: .6; }
.mono__letter {
  font-family: var(--f-display);
  font-size: 44px;
  line-height: 1;
  font-weight: 400;
  padding-top: 4px;
  color: var(--gold-hi);
}
.mono__spark {
  position: absolute; top: 2px; right: 6px; width: 12px; height: 12px;
  background: var(--gold-hi);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 3.2s ease-in-out infinite;
}

.wordmark {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(54px, 15vw, 76px);
  line-height: .95;
  letter-spacing: .01em;
  background: linear-gradient(100deg, var(--gold-lo) 0%, var(--gold-hi) 28%, var(--gold) 48%, var(--gold-hi) 68%, var(--gold-lo) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 7s linear infinite;
}
.tagline {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: .34em; /* compensa o espaçamento final para centralizar */
}

/* ---------- Tela de carregamento ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background:
    radial-gradient(60% 45% at 50% 46%, rgba(197, 138, 37, .14), transparent 72%),
    var(--bg);
  transition: opacity .9s var(--ease), visibility .9s;
}
.is-ready .loader { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 30px; width: min(240px, 68vw); }
.brandmark--loader .wordmark {
  font-size: 46px;
  background-image: linear-gradient(100deg, var(--vinho) 0%, #a5432f 30%, var(--dourado) 50%, #a5432f 70%, var(--vinho) 100%);
}
.brandmark--loader .mono__letter { color: var(--vinho); }
.brandmark--loader .tagline { color: #a5701b; }
.brandmark--loader .tagline { font-size: 9px; letter-spacing: .26em; white-space: nowrap; }
.brandmark--loader .mono { width: 64px; height: 64px; }
.brandmark--loader .mono__letter { font-size: 38px; }
.brandmark--loader .mono__ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.4s var(--ease) .1s forwards; }
.brandmark--loader .brandmark__img { width: min(220px, 62vw); }
.brandmark--loader > * { animation: rise 1s var(--ease) both; }
.brandmark--loader > :nth-child(2) { animation-delay: .15s; }
.brandmark--loader > :nth-child(3) { animation-delay: .3s; }
.loader__bar {
  width: 100%; height: 3px; border-radius: 3px;
  background: rgba(36, 21, 19, .1); overflow: hidden;
}
.loader__bar span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 70%, var(--gold));
  box-shadow: 0 0 10px rgba(197, 138, 37, .45);
}
.loader__label { margin: -16px 0 0; font-size: 13px; letter-spacing: .08em; color: var(--text-2); }

/* ---------- Capa ----------
   Celular: foto da modelo no topo, dissolvendo no champagne, logo abaixo.
   Desktop: foto ocupando a largura, logo e botões no espaço claro à direita. */
.hero {
  overflow-x: clip;
  --photo-bg: #fbf3f0;           /* cor do fundo da foto (topo) */
  --photo-bg-2: #e7d0cb;         /* cor do fundo da foto (base, rosado) */
  position: relative; isolation: isolate; display: grid;
  /* fundo da capa igual ao da foto, com degradê até o champagne da seção de baixo */
  background: linear-gradient(to bottom, var(--photo-bg) 0%, #f5e7e3 30%, var(--photo-bg-2) 60%, color-mix(in srgb, var(--next-bg) 18%, var(--photo-bg-2)) 70%, color-mix(in srgb, var(--next-bg) 45%, var(--photo-bg-2)) 79%, color-mix(in srgb, var(--next-bg) 72%, var(--photo-bg-2)) 87%, color-mix(in srgb, var(--next-bg) 90%, var(--photo-bg-2)) 94%, color-mix(in srgb, var(--next-bg) 97%, var(--photo-bg-2)) 98%, var(--next-bg) 100%);  /* final suavizado: sem quina na emenda */
}

.hero__media {
  position: relative; z-index: -1; overflow: hidden;
  width: 100%; aspect-ratio: 1000 / 946; max-width: 100%;
  max-height: 68svh;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--photo-pos, center top);
}
/* Celular: a foto some para transparente (sem cor fixa), então se mistura
   com o degradê do fundo e não forma linha na base */
.hero__media img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .75) 66%, rgba(0, 0, 0, .35) 80%, rgba(0, 0, 0, .1) 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .75) 66%, rgba(0, 0, 0, .35) 80%, rgba(0, 0, 0, .1) 91%, transparent 100%);
}
.hero__media::after { content: none; }

/* Sem foto: arco vinho com a joia ilustrada */
.hero__media--art {
  aspect-ratio: 5 / 6; max-height: none;
  width: calc(100% - 28px); max-width: 440px; margin: 14px auto 0;
  border-radius: 999px 999px 26px 26px;
  background: radial-gradient(110% 70% at 50% 22%, #8a312e 0%, var(--vinho) 34%, var(--wine-deep) 72%, #351210 100%);
  display: grid; place-items: start center;
}
.hero__media--art::after { display: none; }
.hero__art { position: relative; width: 96%; }
.hero__art .art { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.art__drop { transform-origin: 200px 236px; animation: sway 6s ease-in-out infinite; }

.hero__content {
  display: grid; justify-items: center; gap: 24px;
  margin-top: -28px;
  padding-block: 0 34px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.brandmark__img { width: min(290px, 74vw); height: auto; }

/* Botões circulares */
.social { display: flex; gap: 14px; }
.social a {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--vinho);
  border: 1px solid rgba(114, 38, 36, .22);
  background: #fffdf9;
  box-shadow: 0 8px 20px -12px rgba(74, 24, 23, .45);
  transition: transform .4s var(--ease), border-color .4s, background-color .4s, color .4s;
}
.social a:hover { transform: translateY(-3px); border-color: var(--vinho); background: var(--vinho); color: var(--champagne); }
.social svg { width: 22px; height: 22px; }

/* Entrada da capa depois do carregamento */
.js .hero__content > *, .js .hero__media { opacity: 0; }
.is-ready .hero__media { animation: fade-in 1.6s var(--ease) both; }
.is-ready .hero__content > * { animation: rise 1.1s var(--ease) both; }
.is-ready .hero__content > :nth-child(2) { animation-delay: .35s; }
.is-ready .hero__content > :nth-child(3) { animation-delay: .55s; }

/* ---------- Divisor "Clique e acesse" ---------- */
.links { padding-block: 8px 64px; background: var(--next-bg); }

/* ===== Seção dos banners ESCURA (config.js → theme.links: "escuro") =====
   A versão clara continua disponível com theme.links: "claro". */
/* o degradê passa pelo vinho antes do marrom: nada de tons fora da paleta */
.links-escuro { --next-bg: var(--marrom); --via: var(--vinho); }
.links-escuro .hero__content { padding-block: 0 56px; }         /* espaço para o degradê até a cor da seção */
.links-escuro .links { color: var(--champagne); }
.links-escuro .cta-divider { color: var(--champagne); }
/* ===== Efeito de luz: luzes desfocadas (bokeh) + poeira cintilante =====
   Seção dos banners: theme.links = "luxo" (marrom + luz dourada, efeito da 1ª versão)
                                   "vinho" (vinho + luz dourada)
   Rodapé: mesmo efeito com luz branca. */
.links { position: relative; isolation: isolate; overflow-x: clip; }
.links__fx { display: none; }
.links__fx, .footer__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-bokeh span {
  --c: 236, 199, 124;
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c), .24), transparent 70%);
  filter: blur(8px);
  animation: drift 14s ease-in-out infinite alternate;
}
.fx-bokeh span:nth-child(1) { width: 170px; height: 170px; top: 4%;  left: -4%; }
.fx-bokeh span:nth-child(2) { width: 90px;  height: 90px;  top: 16%; right: 6%;  animation-delay: -4s; }
.fx-bokeh span:nth-child(3) { width: 240px; height: 240px; top: 38%; right: -10%; animation-delay: -8s; opacity: .7; }
.fx-bokeh span:nth-child(4) { width: 80px;  height: 80px;  top: 58%; left: 8%;   animation-delay: -2s; }
.fx-bokeh span:nth-child(5) { width: 140px; height: 140px; top: 78%; left: 40%;  animation-delay: -6s; opacity: .6; }
.fx-bokeh span:nth-child(6) { width: 60px;  height: 60px;  top: 28%; left: 30%;  animation-delay: -10s; opacity: .8; }

/* Marrom com luz dourada (como a primeira versão da home) */
.links-luxo { --next-bg: var(--marrom); --via: var(--vinho); }
.links-luxo .links {
  background:
    radial-gradient(60% 34% at 28% 22%, rgba(197, 138, 37, .16) 0%, transparent 70%),
    radial-gradient(55% 30% at 75% 62%, rgba(197, 138, 37, .10) 0%, transparent 70%),
    linear-gradient(to bottom, var(--marrom) 0%, #2e1b16 50%, var(--marrom) 100%);
}
/* Vinho com luz dourada */
.links-vinho { --next-bg: var(--vinho); --via: var(--vinho); }
.links-vinho .links {        /* mesmo clima da capa vinho da primeira versão */
  background:
    radial-gradient(75% 20% at 50% 30%, rgba(138, 49, 46, .9) 0%, rgba(138, 49, 46, 0) 100%),   /* halo abaixo da emenda: o topo fica no mesmo vinho da capa */
    radial-gradient(55% 26% at 26% 30%, rgba(236, 199, 124, .14) 0%, transparent 70%),
    radial-gradient(50% 24% at 78% 64%, rgba(236, 199, 124, .10) 0%, transparent 70%),
    linear-gradient(to bottom, var(--vinho) 0%, var(--vinho) 40%, #5a1c1b 75%, var(--wine-deep) 100%);
}
.links-luxo .links__fx, .links-vinho .links__fx { display: block; }
.links-luxo .lcard--banner img, .links-vinho .lcard--banner img { filter: drop-shadow(0 18px 26px rgba(20, 8, 6, .6)); }
.links-luxo .lcard--banner:hover img, .links-vinho .lcard--banner:hover img { filter: drop-shadow(0 24px 32px rgba(20, 8, 6, .75)); }

/* Champagne com luz dourada (theme.links = "claro": mantém o efeito) */
.links-claro .links__fx { display: block; }
.links-claro .links {
  background:
    radial-gradient(55% 30% at 22% 26%, rgba(255, 255, 255, .7) 0%, transparent 70%),
    radial-gradient(50% 28% at 80% 62%, rgba(255, 255, 255, .55) 0%, transparent 70%),
    var(--bg);
}
.links-claro .fx-bokeh span { --c: 197, 138, 37; background: radial-gradient(circle, rgba(var(--c), .2), transparent 70%); }

/* Rodapé: luz branca */
.fx-bokeh--white span { --c: 255, 255, 255; background: radial-gradient(circle, rgba(var(--c), .85), rgba(var(--c), 0) 70%); filter: blur(10px); }
.fx-bokeh--white span:nth-child(1) { width: 260px; height: 260px; top: -14%; left: -6%; }
.fx-bokeh--white span:nth-child(3) { width: 300px; height: 300px; top: 30%; }

.links-escuro .lcard {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 24px 48px -26px rgba(0, 0, 0, .9);
}
.links-escuro .lcard:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 30px 56px -24px rgba(0, 0, 0, 1); }
.links-escuro .tone-marrom, .links-escuro .tone-onyx { border: 1px solid var(--line); }
.links-escuro .lcard--banner, .links-escuro .lcard--banner:hover { box-shadow: none; }

.cta-divider {
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--marrom);
}
.cta-divider::before, .cta-divider::after {
  content: ""; width: 46px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.cta-divider::after { background: linear-gradient(90deg, var(--gold), transparent); }
.cta-line {
  display: block; width: 1px; height: 46px; margin: 14px auto 22px;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: line 2.6s var(--ease) infinite;
}

/* ---------- Banners (os 3 botões) ----------
   Texto à esquerda, foto do acessório à direita dissolvendo na cor do banner,
   filete dourado interno e botão em pílula. O banner inteiro é o link. */
.links .wrap {                   /* no celular, banners quase de borda a borda */
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  max-width: calc(580px + 24px);
}
.link-cards { display: grid; gap: 14px; }

.lcard {
  /* padrão: champagne */
  --bg: linear-gradient(115deg, #fffdf9 0%, var(--champagne) 50%, #ecdcc6 100%);
  --ink-c: var(--marrom);
  --accent: var(--vinho);
  --eyebrow: #a5701b;
  --pill-bg: var(--vinho);
  --pill-fg: var(--champagne);
  --frame: rgba(197, 138, 37, .55);
  --sheen: rgba(255, 255, 255, .55);
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 196px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink-c);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 20px 40px -24px rgba(74, 24, 23, .55);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Reflexo de cetim no fundo */
.lcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 8% 0%, var(--sheen), transparent 46%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0) 0 34px, rgba(255, 255, 255, .06) 34px 60px, rgba(255, 255, 255, 0) 60px 96px);
}
/* Brilho que atravessa o banner no hover */
.lcard::after {
  content: ""; position: absolute; inset: -20% -60%; z-index: 4; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .24) 50%, transparent 60%);
  transform: translateX(-70%);
  transition: transform 1.1s var(--ease);
}
.lcard:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 28px 50px -24px rgba(74, 24, 23, .7); }
.lcard:hover::after { transform: translateX(70%); }
.lcard:active { transform: scale(.985); }

/* Banner em imagem pronta (PNG inteiro, com a modelo saindo por cima do card)
   A imagem tem 1200×602: os primeiros ~2,95% da largura no topo são a área
   transparente onde a cabeça "sai" do banner. A margem negativa compensa essa
   área para os banners ficarem com o mesmo espaçamento entre si. */
.lcard--banner {
  display: block; min-height: 0;
  aspect-ratio: 1200 / 602; max-width: 100%;
  margin-top: -2.95%;
  background: none; border: 0; border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.lcard--banner::before, .lcard--banner::after { display: none; }
.lcard--banner:hover { box-shadow: none; }
.lcard--banner img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(74, 24, 23, .28));
  transition: transform 1s var(--ease), filter .6s var(--ease);
}
.lcard--banner:hover img { filter: drop-shadow(0 22px 28px rgba(74, 24, 23, .36)); }
.reveal-ready .lcard--banner[data-reveal] img { transform: scale(1.03); }
.reveal-ready .lcard--banner[data-reveal].is-in img { transform: none; transition: transform 1.6s var(--ease) var(--d, 0ms), filter .6s var(--ease); }

/* Brilho branco que atravessa o banner ao passar o mouse.
   A máscara é a própria arte: a luz só aparece onde há imagem (inclusive a cabeça que sai do card). */
.lcard__shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;   /* a imagem da máscara vem do main.js */
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .35) 44%, rgba(255, 255, 255, .7) 48.5%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .7) 51.5%, rgba(255, 255, 255, .35) 56%, rgba(255, 255, 255, 0) 64%);
  mix-blend-mode: screen;
  background-size: 260% 100%; background-repeat: no-repeat;
  background-position: 135% 0;
  opacity: 0;
}
.lcard--banner:hover .lcard__shine,
.lcard--banner:focus-visible .lcard__shine {
  opacity: 1;
  background-position: -35% 0;
  transition: background-position 1.15s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}
/* toque no celular: o brilho passa uma vez */
.lcard--banner:active .lcard__shine { opacity: 1; background-position: -35% 0; transition: background-position .7s ease-out; }
.links-escuro .lcard--banner img { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); }

/* Foto do acessório */
.lcard__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%);
}
.lcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.lcard:hover .lcard__media img { transform: scale(1.06); }

/* Sem foto: ilustração dourada */
.lcard:not(.lcard--photo) .lcard__media { -webkit-mask-image: none; mask-image: none; display: grid; place-items: center; }
.lcard__media .art { width: 74%; max-width: 170px; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .28)); }

.lcard__text {
  position: relative; z-index: 2;
  width: 60%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
  padding-block: 24px; padding-left: 24px; padding-right: 0;
  min-width: 0;
}
.lcard__eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--eyebrow);
}
.lcard__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 7.2vw, 32px);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.lcard__title em { font-style: italic; font-weight: 400; color: var(--accent); }
.lcard__desc { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; opacity: .8; max-width: 24ch; }
.lcard__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  height: 36px; padding: 0 14px 0 16px; border-radius: 99px;
  background: var(--pill-bg); color: var(--pill-fg);
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(36, 21, 19, .55);
}
.lcard__cta svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.lcard:hover .lcard__cta svg { transform: translateX(3px); }

/* Moldura dourada interna (detalhe de porta-joias) */
.lcard__frame {
  position: absolute; inset: 7px; z-index: 3; pointer-events: none;
  border: 1px solid var(--frame);
  border-radius: 16px;
}

/* Tons */
.tone-vinho {
  --bg: linear-gradient(115deg, #5a1c1b 0%, var(--vinho) 55%, #8d3633 100%);
  --ink-c: var(--champagne);
  --accent: var(--gold-hi);
  --eyebrow: var(--gold-hi);
  --pill-bg: var(--champagne);
  --pill-fg: var(--vinho);
  --frame: rgba(236, 199, 124, .5);
  --sheen: rgba(255, 220, 200, .2);
}
.tone-dourado {
  --bg: linear-gradient(115deg, #f0cd85 0%, #d9a447 45%, var(--dourado) 100%);
  --ink-c: var(--marrom);
  --accent: var(--vinho);
  --eyebrow: var(--vinho);
  --pill-bg: var(--vinho);
  --pill-fg: var(--champagne);
  --frame: rgba(255, 248, 230, .6);
  --sheen: rgba(255, 248, 225, .5);
}
.tone-claro {
  --bg: linear-gradient(115deg, #ffffff 0%, #fdfaf5 55%, #f3e8da 100%);
  border: 1px solid rgba(197, 138, 37, .25);
}
.tone-marrom, .tone-onyx {
  --bg: linear-gradient(115deg, #2c1916 0%, #3a201c 60%, #4b2a22 100%);
  --ink-c: var(--champagne);
  --accent: var(--gold);
  --eyebrow: var(--gold);
  --pill-bg: linear-gradient(135deg, var(--gold-hi), var(--gold));
  --pill-fg: var(--marrom);
  --frame: rgba(197, 138, 37, .4);
  --sheen: rgba(197, 138, 37, .16);
}

/* Revelação ao rolar (só quando o JS ativa) */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(26px); }
.reveal-ready [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms), box-shadow .6s var(--ease);
}
.reveal-ready .lcard[data-reveal].is-in:hover { transform: translateY(-4px); transition-delay: 0ms; }
.reveal-ready .lcard--photo[data-reveal] .lcard__media img { transform: scale(1.1); }
.reveal-ready .lcard--photo[data-reveal].is-in .lcard__media img { transform: none; transition: transform 1.6s var(--ease) var(--d, 0ms); }
.reveal-ready .lcard--photo[data-reveal].is-in:hover .lcard__media img { transform: scale(1.06); transition-delay: 0ms; }

/* ---------- Rodapé ---------- */
/* Rodapé: marca e chamada à esquerda, colunas de links à direita,
   nome gigante em marca d'água no canto inferior */
.footer {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--marrom);
  background:
    radial-gradient(45% 70% at 6% 0%, rgba(255, 255, 255, .75), transparent 70%),
    radial-gradient(40% 60% at 96% 100%, rgba(255, 255, 255, .45), transparent 70%),
    linear-gradient(180deg, var(--bg-2) 0%, #e7d9c7 100%);
}
/* Filete dourado no topo do rodapé: brilho que acompanha a rolagem
   e, com a página parada, vai e volta devagar. */
.footer__line {
  position: absolute; inset: 0 0 auto 0; z-index: 1;
  height: 4px; overflow: hidden;
  background: linear-gradient(90deg, var(--gold-lo) 0%, var(--dourado) 18%, #e8bf6a 50%, var(--dourado) 82%, var(--gold-lo) 100%);
  box-shadow: 0 1px 6px rgba(197, 138, 37, .35);
}
.footer__line i {
  position: absolute; top: 0; bottom: 0; width: 26%; left: -26%;
  background: linear-gradient(90deg, rgba(255, 248, 228, 0) 0%, rgba(255, 248, 228, .75) 35%, #fffaf0 50%, rgba(255, 248, 228, .75) 65%, rgba(255, 248, 228, 0) 100%);
  /* atravessa de um canto ao outro e volta; a rolagem empurra o brilho (main.js) */
  animation: glint-sweep 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes glint-sweep { from { left: -26%; } to { left: 100%; } }

.footer__mark {
  position: absolute; z-index: -1; right: -.04em; bottom: -.2em;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(110px, 32vw, 300px); line-height: 1;
  letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  color: rgba(114, 38, 36, .055);
  pointer-events: none; user-select: none;
}
.footer__inner {
  width: 100%; max-width: calc(1180px + 2 * var(--gutter)); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  padding-block: 64px calc(26px + env(safe-area-inset-bottom, 0px));
}
.footer__top {
  display: grid; gap: 40px;
  justify-items: center; text-align: center;
}
.footer__about { display: grid; justify-items: center; gap: 22px; }

/* Logo horizontal */
.footer__logo { display: flex; align-items: center; gap: 14px; }
.footer__logo-img { width: min(240px, 64vw); height: auto; }
.mono--sm { width: 62px; height: 62px; }
.mono--sm .mono__letter { font-size: 36px; color: var(--vinho); }
.footer__logo-text { display: grid; justify-items: start; gap: 6px; text-align: left; }
.footer__logo-name {
  font-family: var(--f-display); font-size: 46px; line-height: .9;
  background: linear-gradient(100deg, var(--vinho), #9c3f2e 50%, var(--dourado) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__logo-tag { font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase; color: #a5701b; white-space: nowrap; }

.footer__desc { margin: 0; max-width: 40ch; font-size: 15.5px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.footer__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding-bottom: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marrom);
  border-bottom: 1px solid var(--gold);
  transition: color .3s, gap .4s var(--ease);
}
.footer__cta svg { width: 14px; height: 14px; color: var(--gold); transition: transform .4s var(--ease); }
.footer__cta:hover { color: var(--vinho); }
.footer__cta:hover svg { transform: translate(2px, -2px); }

.footer__col { display: grid; gap: 14px; justify-items: center; }
.footer__heading {
  margin: 0;
  font-family: var(--f-body); font-size: 10.5px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--vinho);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__link { font-size: 15px; color: var(--marrom); transition: color .3s; }
.footer__link:hover { color: var(--vinho); }

.footer__bottom {
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid rgba(114, 38, 36, .14);
  display: grid; justify-items: center; gap: 12px; text-align: center;
}
.footer__legal, .footer__credit { margin: 0; font-size: 12px; color: #8a6f63; }
.footer__credit { display: inline-flex; align-items: center; gap: 10px; }
.footer__credit-name {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-display); font-size: 16px; letter-spacing: .04em; color: var(--marrom);
}
.footer__credit-name i {
  width: 12px; height: 12px; background: var(--dourado);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
a.footer__credit:hover .footer__credit-name { color: var(--vinho); }

@media (min-width: 960px) {
  .footer__inner { padding-block: 96px calc(34px + env(safe-area-inset-bottom, 0px)); }
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: clamp(80px, 11vw, 200px);
    justify-items: start; text-align: left; align-items: start;
  }
  .footer__about, .footer__col { justify-items: start; }
  .footer__about { gap: 28px; }
  .footer__col { padding-top: 6px; min-width: 150px; }
  .footer__bottom { grid-template-columns: 1fr auto; justify-items: start; align-items: center; text-align: left; margin-top: 80px; }
  .footer__credit { justify-self: end; }
}

/* Celular: banner montado com a mesma proporção dos banners em imagem */
@media (max-width: 639px) {
  .lcard:not(.lcard--banner) { aspect-ratio: 1200 / 566; min-height: 0; }
  .lcard:not(.lcard--banner) .lcard__desc { display: none; }
  .lcard:not(.lcard--banner) .lcard__text { padding-block: 14px; gap: 4px; }
  .lcard:not(.lcard--banner) .lcard__title { font-size: clamp(22px, 6.6vw, 28px); }
  .lcard:not(.lcard--banner) .lcard__cta { margin-top: 8px; height: 32px; font-size: 12px; }
}

/* Celular: logo, botões redondos e "Clique e acesse" mais próximos */
@media (max-width: 959px) {
  .hero__content { gap: 18px; margin-top: -34px; }
  .links { padding-top: 0; }
  .cta-line { height: 34px; margin: 10px auto 18px; }
}

/* ---------- Tablet e desktop ---------- */
@media (min-width: 640px) {
  .link-cards { gap: 18px; }
  .lcard { min-height: 210px; aspect-ratio: 1200 / 566; }
  .lcard__text { padding-left: 34px; width: 58%; }
  .lcard__title { font-size: 36px; }
  .lcard__desc { font-size: 13.5px; }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    min-height: clamp(560px, 82vh, 860px);
    align-items: center;
  }
  .hero__media {
    position: absolute; inset: 0; aspect-ratio: auto; max-height: none; height: 100%;
  }
  .hero__media img { object-position: var(--photo-pos-d, left top); -webkit-mask-image: none; mask-image: none; }
  .hero__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--next-bg) 12%, transparent) 78%, color-mix(in srgb, var(--next-bg) 35%, transparent) 85%, color-mix(in srgb, var(--next-bg) 64%, transparent) 91%, color-mix(in srgb, var(--next-bg) 88%, transparent) 96%, var(--next-bg) 100%);  /* degradê só no fim da capa */
  }
  .hero__media--art {
    position: relative; grid-column: 1; width: auto; max-width: 440px; height: auto;
    aspect-ratio: 4 / 5; margin: 40px auto;
  }
  .hero__content {
    grid-column: 2; margin-top: 0; gap: 32px;
    padding-block: 40px;
    padding-right: max(5vw, env(safe-area-inset-right, 0px));
  }
  .brandmark__img { width: min(400px, 30vw); }
  .links { padding-block: 8px 88px; }
  .links-escuro .hero__content { padding-block: 40px; }
  .links-escuro .links { padding-top: 24px; }
}

/* ---------- Animações ---------- */
@keyframes sheen { to { background-position: -220% 0; } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes rise-soft { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes drift { to { transform: translate(18px, -22px) scale(1.12); } }
@keyframes line { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.art .twinkle { animation: twinkle-svg 3s ease-in-out infinite; }
.art .twinkle:nth-of-type(2n) { animation-delay: -1.2s; }
.art .twinkle:nth-of-type(3n) { animation-delay: -2.1s; }
@keyframes twinkle-svg { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}