/* ==========================================================================
   ROCCA Joalheria · styles.css
   Layout: modelo da Ana · Fonte: Gambetta (Fontshare) · Texto preto, detalhes verdes
   ========================================================================== */

:root{
  /* paleta: preto no texto, VERDE ROCCA como cor da marca, OURO como moldura */
  --ink:#0d0d0d;          /* texto (preto) */
  --ink-2:#2a2a2a;        /* texto secundário */
  --muted:#6f6f6f;        /* apoio */
  /* 29/jul: Ana pediu o verde ROCCA mais escuro, o mesmo do brand kit oficial
     (assets/logo-vetores/*-bg-verde.svg, fill do retângulo de fundo = #0a1a14). */
  --green:#0a1a14;        /* verde ROCCA (a cor da marca, do SVG oficial do brand kit) */
  --green-2:#12291f;      /* hover do verde (mesma proporção clara/escura de antes) */
  /* 29/jul: em ÁREA PEQUENA sobre fundo claro, o #0a1a14 é lido como preto (contraste
     simultâneo): o mesmo verde que parece verde numa faixa de 74px parece preto num
     botão. Botões e chips usam este tom, calibrado pra IGUALAR a percepção do header.
     A cor da marca segue #0a1a14 em header, rodapé e áreas grandes. */
  --green-btn:#12291f;
  --green-btn-hover:#1a3b2e;
  --green-wash:#eef2ee;   /* verde lavado: fundo de seção (tira o excesso de branco) */
  --green-line:rgba(10,26,20,.22); /* linha/divisória em verde sutil */
  --off:#f7f5ef;          /* off-white (fundo de foto) */
  --white:#ffffff;
  --line:#e6e3db;         /* linhas neutras */

  /* --- Ouro AMOSTRADO DO LOGO ROCCA (o mesmo tom e brilho do R) ---
     médio #c2873f · escuro #814a00 · claro #edba6f (pixels reais do PNG) --- */
  --gold:#c2873f;         /* ouro principal (média do logo) */
  --gold-bright:#edba6f;  /* destaque/brilho do metal */
  --gold-deep:#814a00;    /* sombra do metal */
  --gold-soft:rgba(194,135,63,.5);  /* contorno de card em repouso */
  --gold-line:linear-gradient(90deg,#814a00 0%,#c2873f 28%,#edba6f 50%,#c2873f 72%,#814a00 100%);
  /* 29/jul (2ª rodada): o champanhe quase-branco ainda lia como "branco feio".
     Agora é um champanhe QUENTE e presente, com texto em ouro escuro e ornamento
     de losango, o vocabulário da arte do logo. Contraste 7.1:1 a 8.2:1 (AAA). */
  --champanhe:linear-gradient(180deg,#f5ecdb 0%,#ebdcc2 100%);
  --gold-text:#633c0e;    /* ouro escuro sobre o champanhe (AAA em todo o gradiente) */
  --gold-hair:linear-gradient(90deg,transparent,rgba(194,135,63,.55) 20%,rgba(237,186,111,.9) 50%,rgba(194,135,63,.55) 80%,transparent);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --container:1240px;
  --header-h:74px;
}

/* ROCCA: wordmark do FOOTER em ouro (background-clip:text; fundo verde). */
.footer-wordmark{
  background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold) 46%,var(--gold-deep) 80%,var(--gold-bright) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-bright);
}
/* 29/jul: o wordmark do HEADER virou o logo real (imagem com relevo/brilho
   fotográfico, o mesmo arquivo oficial do R), não mais texto com CSS. */
.brand-wordmark-img{height:25px;width:auto;display:block}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  font-family:'Gambetta',Georgia,serif;
  font-weight:400;
  background:var(--white);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 28px}
@media(max-width:640px){.container{padding:0 20px}}

/* ===== tipografia base ===== */
h1,h2,h3,h4{font-weight:500;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
p{color:var(--ink-2)}

.eyebrow{
  display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green);font-weight:500;margin-bottom:18px;
}
/* o único itálico verde de destaque (usar pouco) */
.gold-it{font-style:italic;color:var(--green)}

/* ===== botões ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:16px 30px;transition:all .25s var(--ease);border:1px solid transparent;
}
.btn-primary{background:var(--green-btn);color:#fff}
.btn-primary:hover{background:var(--green-btn-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ===== TOPBAR (Ana) =====
   29/jul: inverteu com o header (era verde+texto branco; agora branco+texto verde,
   pra sobrar verde só atrás do R). */
/* Champanhe quente + texto em ouro escuro + fio de ouro embaixo. Sem ornamento:
   o losango flanqueando a frase ficou brega (Pedro, 29/jul). A faixa fica limpa,
   e quem dá o acabamento é a cor quente e o fio de ouro. */
.topbar{
  position:relative;
  background:var(--champanhe);color:var(--gold-text);font-weight:500;
  /* tamanho de volta em 11px (a rodada do acabamento tinha baixado pra 10px) */
  --tb-track:.16em;
  font-size:11px;letter-spacing:var(--tb-track);text-transform:uppercase;
  text-align:center;line-height:1.4;padding:8px 16px;
  /* CENTRALIZAÇÃO: o letter-spacing insere espaço DEPOIS do último caractere.
     Esse vazio entra na caixa, então com text-align:center o texto visível cai
     meio tracking à esquerda do centro real. Medido: desvio = indent - track/2,
     logo o indent tem que ser METADE do tracking pra zerar. */
  text-indent:calc(var(--tb-track) / 2);
}
/* fio de ouro que "fecha" a faixa clara antes do verde do header começar */
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-hair);
}
/* No celular a frase precisa caber numa linha: cai o tamanho e aperta o tracking.
   O text-indent acompanha a variável, então a centralização segue exata. */
@media(max-width:520px){
  .topbar{--tb-track:.12em;font-size:10px;padding:8px 12px}
}
@media(max-width:360px){
  .topbar{--tb-track:.08em;font-size:9.5px;padding:8px 10px}
}

/* ===== HEADER (Ana: nav esq · logo centro · nav dir) =====
   29/jul: inverteu com o topbar (era branco; agora o verde ROCCA fica atrás do R). */
/* Borda de ouro brilhante embaixo do topo (linha em gradiente) */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--green);
  transition:box-shadow .3s var(--ease);
}
.site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold-line);
}
.site-header.scrolled{box-shadow:0 1px 18px rgba(0,0,0,.06)}
.header-inner{
  position:relative;
  max-width:var(--container);margin:0 auto;padding:0 28px;height:var(--header-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
}
/* grid item nasce com min-width:auto e não encolhe abaixo do conteúdo: sem isto
   as duas colunas 1fr ficam com larguras diferentes e o centro escorrega. */
.header-left,.nav-right{min-width:0}
.nav-desktop{display:flex;align-items:center;gap:30px}
.nav-desktop a{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--off);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav-desktop a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
  transition:width .3s var(--ease);
}
.nav-desktop a:hover::after{width:100%}
.nav-right{justify-content:flex-end}
.brand{justify-self:center;display:flex;align-items:center;position:relative}
.brand-logo{height:34px;width:auto;object-fit:contain}
.brand-wordmark{font-size:24px;letter-spacing:.28em}
/* R monograma dourado = logo de canto (esquerda) */
.header-left{display:flex;align-items:center;gap:28px}
.brand-mark{display:flex;align-items:center;flex:none}
.brand-mark img{height:46px;width:auto;display:block;transition:height .3s var(--ease)}
.site-header.scrolled .brand-mark img{height:38px}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:14px}
.icon-btn{
  position:relative;width:36px;height:36px;display:grid;place-items:center;
  color:var(--off);border-radius:50%;transition:background .2s,color .2s;
}
.icon-btn:hover{background:var(--off);color:var(--green)}
.cart-count{
  position:absolute;top:2px;right:1px;min-width:15px;height:15px;padding:0 3px;
  background:var(--gold);color:var(--green);border-radius:99px;
  font-size:9.5px;line-height:15px;text-align:center;
}
.nav-toggle{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:5px;padding:0 8px}
.nav-toggle span{display:block;height:1px;background:var(--off);transition:transform .3s var(--ease),opacity .3s}
.nav-toggle.open span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle.open span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* menu de opções */
.options-menu{
  position:absolute;top:calc(100% + 8px);right:24px;background:#fff;
  border:1px solid var(--gold-soft);border-top:2px solid var(--gold);
  min-width:220px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .22s var(--ease);box-shadow:0 18px 44px -22px rgba(0,0,0,.3);z-index:70;
}
.options-menu.open{opacity:1;visibility:visible;transform:none}
/* itens com divisão premium (hairline) entre eles; hover pinta o botão inteiro de verde */
.opt-item{display:block;width:100%;text-align:left;padding:13px 14px;font-size:13.5px;color:var(--ink);transition:background .2s var(--ease),color .2s var(--ease)}
.opt-item + .opt-item{border-top:1px solid var(--line)}
.opt-item:hover{background:var(--green-btn);color:#fff}

/* busca */
.search-bar{
  border-top:1px solid var(--line);background:#fff;max-height:0;overflow:hidden;
  transition:max-height .3s var(--ease),visibility .3s;visibility:hidden;
}
.search-bar.open{max-height:70vh;overflow-y:auto;visibility:visible}
.search-inner{max-width:var(--container);margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:12px;color:var(--muted)}
.search-inner input{flex:1;border:none;outline:none;font-family:inherit;font-size:16px;color:var(--ink);background:transparent}
.search-inner input:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.search-close{font-size:16px;color:var(--muted)}
.search-results{max-width:var(--container);margin:0 auto;padding:0 28px 18px}
.search-item{display:block;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.search-item span{display:block;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.search-result{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;cursor:pointer;
  transition:background .15s;
}
.search-result:hover{background:var(--off)}
.sr-cat{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.search-empty{padding:14px 0;color:var(--muted);font-size:14px}

/* ===== CARRINHO ===== */
.cart-overlay{position:fixed;inset:0;background:rgba(13,13,13,.4);opacity:0;visibility:hidden;transition:all .3s;z-index:80}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-panel{
  position:fixed;top:0;right:0;height:100dvh;width:min(400px,90vw);background:#fff;z-index:90;
  transform:translateX(101%);transition:transform .35s var(--ease),visibility .35s;display:flex;flex-direction:column;
  visibility:hidden;
}
.cart-panel.open{transform:none;visibility:visible}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line)}
.cart-head h3{font-size:17px;letter-spacing:.02em}
.cart-x{font-size:16px;color:var(--muted)}
.cart-body{flex:1;overflow-y:auto;padding:22px 26px}
.cart-empty{color:var(--muted);font-size:14.5px}
.cart-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item h4{font-size:15px;font-weight:500}
/* linhas criadas pelo JS (updateCartUI) */
.cart-line{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-line-name{font-size:14.5px;font-weight:500;color:var(--ink)}
.cart-line-cat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.cart-remove{font-size:12px;color:var(--muted);text-decoration:underline}
.cart-foot{padding:20px 26px;border-top:1px solid var(--line)}
.cart-note{font-size:12.5px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.cart-finish{width:100%}

/* ===== MENU MOBILE ===== */
.mobile-menu{
  display:none;
  position:fixed;inset:var(--header-h) 0 0;background:#fff;z-index:55;padding:34px 24px;
  transform:translateY(-101%);transition:transform .4s var(--ease),visibility .4s;overflow-y:auto;
  visibility:hidden;
}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px}
.mobile-menu nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:19px}
/* Busca dentro do menu: no celular o ícone sai do header pra sobrar espaço ao
   wordmark central, então o acesso à busca vem por aqui. */
.mobile-busca{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:19px;
  font-family:inherit;color:var(--ink);
}
.mobile-busca::before{
  content:'';width:17px;height:17px;flex:none;
  background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mobile-cta{margin-top:22px;background:var(--green-btn);color:#fff;text-align:center;border:none!important;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:16px}

/* ===== HERO (Ana: texto esquerda · foto grande direita) ===== */
/* Foto em <img> dentro de .hero-bg (aparece mesmo sem JS).
   .hero-bg-move faz um drift lento em loop (alternate = sem corte) e os
   .glint piscam sobre as pedras. O fade branco cobre SÓ a área do texto,
   o pingente fica limpo à direita. */
.hero{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(470px,48vw,700px);
  background-color:var(--white);
}
/* overflow:hidden porque o .hero-bg-move faz drift e excede a caixa de propósito.
   Hoje quem segura é o body{overflow-x:hidden}; travar aqui evita depender disso. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg-move{
  position:absolute;inset:0;
  animation:heroDrift 26s ease-in-out infinite alternate;
  transform-origin:68% 50%;
  will-change:transform;
}
.hero-bg-move img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
@keyframes heroDrift{
  from{transform:scale(1.03) translate(0,0)}
  to{transform:scale(1.065) translate(-0.9%,0.6%)}
}
.hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.55) 36%,
    rgba(255,255,255,0) 54%);
}
/* brilho das facetas: pontos que acendem de leve, cada um no seu tempo */
.glint{
  position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 30%,rgba(255,255,255,0) 62%);
  opacity:0;transform:scale(.4);
  animation:glint 9s ease-in-out infinite;
  pointer-events:none;
}
.glint-2{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;animation-delay:3.2s;animation-duration:11s}
.glint-3{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;animation-delay:5.8s;animation-duration:10s}
.glint-4{width:12px;height:12px;margin:-6px 0 0 -6px;animation-delay:7.4s;animation-duration:13s}
@keyframes glint{
  0%,86%,100%{opacity:0;transform:scale(.4)}
  90%{opacity:.7;transform:scale(1)}
  94%{opacity:0;transform:scale(.55)}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg-move{animation:none}
  .glint{animation:none;opacity:0}
}
.hero-content{position:relative;z-index:2;width:min(540px,58%);margin-left:7vw}
.hero-title{
  font-size:clamp(38px,4.2vw,58px);font-weight:400;line-height:1.06;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--ink);margin-bottom:22px;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .word{display:inline-block}
.hero-sub{font-size:16px;line-height:1.75;color:var(--ink-2);max-width:400px;margin-bottom:28px}
.hero-ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* CTA secundario e link com seta, nao botao (igual ao modelo) */
.hero-link{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)
}
.hero-link:hover{border-bottom-color:var(--green)}
/* ===== PLACEHOLDER DE FOTO =====
   Ocupa o lugar exato da foto real. Trocar o bloco pelo <img> quando as fotos chegarem. */
.ph{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  width:100%;height:100%;min-height:inherit;
  background:var(--off);border:1px solid var(--line);
  color:var(--muted);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:18px;line-height:1.6;
}
.ph::before{
  content:"";width:18px;height:18px;flex:none;
  border:1px solid var(--green);transform:rotate(45deg);opacity:.5;
}
.ph-dia{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;
  width:100%;height:100%;background:var(--off);border:1px solid var(--line);color:var(--green);padding:18px}
.ph-dia::before{content:none}
.ph-dia em{font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dia-svg{width:96px;height:auto;opacity:.6}

/* ===== PILARES (4 colunas com divisória + hover verde) ===== */
.pillars{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr)}
/* contorno dividindo cada pilar; ao passar o mouse, o pilar se destaca em verde */
.pillar{
  padding:44px 30px;text-align:center;border-left:1px solid var(--line);
  position:relative;transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.pillar:first-child{border-left:none}
.pillar::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--green);
  transform:scaleX(0);transition:transform .38s var(--ease);
}
.pillar:hover{background:var(--green-wash);box-shadow:inset 0 0 0 1px rgba(11,44,34,.14)}
.pillar:hover::before{transform:scaleX(1)}
.pillar-ico{color:var(--green);margin:0 auto 16px;display:block;transition:transform .3s var(--ease)}
.pillar:hover .pillar-ico{transform:scale(1.08)}
.pillar h3{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:9px;transition:color .3s var(--ease)}
.pillar:hover h3{color:var(--green)}
.pillar p{font-size:13px;color:var(--muted);line-height:1.55;max-width:250px;margin:0 auto}

/* ===== SEÇÕES ===== */
.section{padding:clamp(70px,8vw,110px) 0}
.section--off{background:var(--green-wash)}
.section-head{margin-bottom:40px}
.section-head h2{font-size:clamp(26px,3vw,38px);text-transform:uppercase;letter-spacing:.02em;font-weight:400}
.section-head p{margin-top:14px;color:var(--muted);max-width:620px;font-size:15.5px}
/* cabeçalho com link à direita (Ana: "VER TODAS") */
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px;border-bottom:1px solid var(--green-line);padding-bottom:18px}
.head-row h2{font-size:clamp(24px,2.6vw,32px);text-transform:uppercase;letter-spacing:.03em;font-weight:400}
.head-link{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);white-space:nowrap;transition:opacity .2s}
.head-link:hover{opacity:.65}
/* faixa fina de rótulo + link (usada abaixo de um section-head) */
.head-row--slim{margin-bottom:26px;padding-bottom:14px}
.head-rotulo{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ===== GRID DE CARDS (Ana: foto + título + descrição) ===== */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
/* Todas as peças/tiles com moldura de ouro; hover vira verde ROCCA */
.col-card{background:var(--white);border:1px solid var(--gold-soft);padding:12px 12px 18px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.col-card:hover{border-color:var(--green);box-shadow:0 16px 34px -22px rgba(11,44,34,.5)}
.col-photo,.feat-photo{aspect-ratio:1/1;overflow:hidden;background:var(--off);margin-bottom:16px}
.col-photo img,.feat-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.col-card:hover .col-photo img,.feat-card:hover .feat-photo img{transform:scale(1.04)}
.col-body h3,.feat-body h3{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:7px;transition:color .25s var(--ease)}
.col-card:hover .col-body h3,.feat-card:hover .feat-body h3{color:var(--green)}
.col-body p,.feat-desc{font-size:13.5px;color:var(--muted);line-height:1.55}
.col-index{display:none}
.feat-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
/* Botão ADICIONAR: fundo verde ROCCA */
.feat-add{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:#fff;background:var(--green-btn);border:1px solid var(--green-btn);
  padding:9px 17px;transition:all .25s var(--ease);
}
.feat-add:hover{background:var(--green-btn-hover);border-color:var(--green-btn-hover)}
.feat-add.added{background:transparent;color:var(--green);border-color:var(--gold)}
/* Ver peça: link em ouro que reforça a moldura */
.feat-link{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.feat-link:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ===== CATÁLOGO COMPLETO ===== */
/* fundo verde lavado pra as peças (cartão branco + moldura de ouro) saltarem */
#catalogo{background:var(--green-wash)}
.cat-block{margin-top:clamp(40px,5vw,64px)}
.cat-block .head-row h3{font-size:clamp(18px,2vw,24px);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.cat-count{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);white-space:nowrap}
/* CADA PEÇA: moldura de ouro em repouso, verde ROCCA ao passar o mouse */
.prod-card{
  background:var(--white);border:1px solid var(--gold-soft);
  padding:12px 12px 18px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.prod-card:hover{border-color:var(--green);box-shadow:0 16px 34px -22px rgba(11,44,34,.5)}
.prod-photo{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:4/5;overflow:hidden;background:var(--off);margin-bottom:14px;
}
.prod-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.prod-card:hover .prod-photo img{transform:scale(1.04)}
.prod-count{
  position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.92);color:var(--ink);
  border:1px solid var(--gold-soft);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;
}
/* card em coluna: o rodapé (preço + ações) ancora na base,
   então os botões alinham entre cards de textos/preços diferentes */
.prod-card{display:flex;flex-direction:column}
.prod-body{padding:0 2px;display:flex;flex-direction:column;flex:1}
.prod-body h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:6px;transition:color .25s var(--ease)}
.prod-card:hover .prod-body h4{color:var(--green)}
.prod-body p{font-size:13px;color:var(--muted);line-height:1.55}
.prod-rodape{margin-top:auto;padding-top:12px}
/* preço no card: presente mas sem gritar (joalheria fala baixo) */
/* altura fixa + base alinhada: preço e "sob consulta" ficam na mesma linha entre cards */
.prod-preco{display:flex;align-items:flex-end;min-height:21px;font-size:14.5px;font-weight:500;color:var(--green);letter-spacing:.02em;line-height:1.2}
.prod-preco--consulta{color:var(--muted);font-weight:400;font-style:normal;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
/* min-height reserva a linha mesmo em 'Sob consulta': preços e botões alinham entre cards */
.prod-parcela{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);letter-spacing:.01em;line-height:1.4;min-height:1.4em}
/* ===== NÚMEROS =====
   A Gambetta só tem numerais old-style (altura variável, descem da linha de base),
   o que desalinha preços e contadores. Satoshi entra SÓ onde há número:
   numerais alinhados (lining) e de largura fixa (tabular). */
.prod-preco,.prod-parcela,
.pp-preco,.pp-parcela,.pp-count,
.cat-count,.prod-count,
.step-num,.cart-count,
.legal-data,[data-year],
.num{
  font-family:'Satoshi','Inter',system-ui,sans-serif;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
/* linha divisória ocupa a largura do container; o texto é que fica limitado */
.catalogo-note{margin-top:clamp(36px,4vw,54px);padding-top:22px;border-top:1px solid var(--green-line)}
.catalogo-note p{font-size:13px;color:var(--muted);max-width:640px;line-height:1.6}

/* ===== SKIP LINK (visível só no foco) ===== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green-btn);color:#fff;padding:12px 20px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:0}

/* ===== PÁGINAS LEGAIS (privacidade/termos) ===== */
.legal{max-width:760px;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(60px,7vw,100px)}
.legal h1{font-size:clamp(28px,3.4vw,40px);text-transform:uppercase;letter-spacing:.02em;font-weight:400;margin-bottom:8px}
.legal-data{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.legal h2{font-size:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--green-line)}
.legal p{font-size:15px;line-height:1.8;color:var(--ink-2);margin-bottom:14px}
.legal ul{margin:0 0 14px;padding-left:0}
.legal ul li{
  font-size:15px;line-height:1.8;color:var(--ink-2);margin-bottom:10px;
  padding-left:20px;position:relative;
}
.legal ul li::before{content:'';position:absolute;left:2px;top:12px;width:5px;height:5px;background:var(--green)}
.legal a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--ink);font-weight:500}
.legal-voltar{margin-top:40px;padding-top:22px;border-top:1px solid var(--green-line)}
.legal-voltar a{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--gold-deep)}
.legal-voltar a:hover{color:var(--gold)}

/* ===== PÁGINA DE PRODUTO (produto.html) ===== */
.header-inner--simples{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
/* Voltar ao catálogo: 29/jul, o header ficou verde (mesma cor que o botão usava
   antes), então virou ghost dourado pra não sumir no fundo. Hover inverte. */
.voltar-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--gold-bright);background:transparent;border:1px solid var(--gold-soft);
  padding:9px 16px;transition:all .25s var(--ease);white-space:nowrap;
}
.voltar-link:hover{background:var(--gold);border-color:var(--gold);color:var(--green)}
.pg-produto main{min-height:calc(100dvh - 260px)}
.pp-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);
  align-items:start;padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(56px,7vw,96px);
}
.pp-foto{
  position:relative;aspect-ratio:4/5;background:var(--off);overflow:hidden;
  border:1px solid var(--gold-soft);
}
/* cover + object-position por peça: a JOIA fica enquadrada, sem ar sobrando */
.pp-foto img{width:100%;height:100%;object-fit:cover}
.pp-count{
  position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--ink);
  font-size:10.5px;letter-spacing:.14em;padding:5px 10px;
}
.pp-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--ink);font-size:28px;line-height:1;font-weight:300;
  background:rgba(255,255,255,.85);transition:background .2s;
}
.pp-arrow:hover{background:#fff}
.pp-prev{left:10px}
.pp-next{right:10px}
.pp-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pp-thumbs button{
  width:64px;height:64px;padding:0;overflow:hidden;background:var(--off);
  border:1px solid var(--line);opacity:.65;transition:opacity .2s,border-color .2s;
}
.pp-thumbs button.ativa{opacity:1;border-color:var(--green)}
.pp-thumbs button:hover{opacity:1}
.pp-thumbs img{width:100%;height:100%;object-fit:cover}
.pp-info h1{
  font-size:clamp(26px,3vw,38px);text-transform:uppercase;letter-spacing:.02em;
  font-weight:400;margin-bottom:10px;
}
.pp-preco{display:block;font-size:21px;color:var(--green);font-weight:500;letter-spacing:.02em;margin-bottom:5px}
.pp-preco--consulta{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.pp-parcela{display:block;font-size:13px;color:var(--muted);letter-spacing:.01em;margin-bottom:18px}
.pp-desc{font-size:15.5px;color:var(--ink-2);margin-bottom:22px;max-width:460px}
.pp-detalhes{margin-bottom:18px}
.pp-detalhes li{
  padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2);
  display:flex;align-items:center;gap:12px;
}
.pp-detalhes li::before{content:'';width:5px;height:5px;background:var(--green);flex:none}
.pp-nota{font-size:12.5px;color:var(--muted);margin-bottom:24px;max-width:420px}
.pp-acoes{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.pp-acoes .btn[disabled]{opacity:.55;cursor:default}
.pp-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pp-add-link{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--gold-soft);padding-bottom:3px;transition:color .2s,border-color .2s;
}
.pp-add-link:hover{color:var(--green);border-bottom-color:var(--green)}
.pp-add-link[disabled]{color:var(--muted);border-bottom-color:transparent;cursor:default}
.pp-voltar{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.pp-voltar:hover{opacity:.65}
.pp-vazio{padding:80px 28px;text-align:center;font-size:15px}
.pp-vazio a{color:var(--green);text-decoration:underline}
/* Mobile: o wordmark ROCCA FICA (pedido do Pedro, 29/jul). O grid é 1fr auto 1fr,
   que força as colunas laterais a serem iguais: com 164px de ícones à direita não
   sobrava largura pro centro. Solução: o wordmark sai do fluxo e vai pro centro
   absoluto do header, e o grupo de ícones enxuga (o botão de 3 pontos sai; os
   links dele foram pro menu hamburguer). */
@media(max-width:640px){
  .header-inner,.header-inner--simples{grid-template-columns:auto 1fr;gap:10px;padding:0 18px}
  .header-espaco{display:none}
  /* fora do grid pra ficar no centro exato mesmo com laterais desiguais */
  .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}
  /* a busca sai do header (vai pro menu): com 3 ícones o centro não tinha espaço */
  #searchToggle{display:none}
  .brand-wordmark-img{height:19px}
  .brand-mark img{height:40px}
  .site-header.scrolled .brand-mark img{height:34px}
  #optionsToggle{display:none}
  .header-actions{gap:2px;margin-left:6px}
  .icon-btn{width:34px;height:34px}
  .nav-toggle{width:34px}
  .header-left{gap:10px}
}
@media(max-width:400px){
  .brand-wordmark-img{height:17px}
}
/* Página de peça e legais: o botão "← Catálogo/Início" fica só com a flecha até
   760px. Com o texto ele encosta no wordmark central, que ficou 46% mais largo
   ao vir do SVG oficial (medido: colisão em 521px e 641px). */
@media(max-width:760px){
  .voltar-link{font-size:0;padding:8px 11px;gap:0;letter-spacing:0}
  .voltar-link::before{content:'←';font-size:14px;letter-spacing:0}
}
/* telas de 320px (iPhone SE 1ª geração): o wordmark centrado encostava nos ícones */
@media(max-width:340px){
  .header-inner,.header-inner--simples{padding:0 14px}
  .brand-wordmark-img{height:13px}
  .icon-btn{width:30px;height:30px}
  .nav-toggle{width:30px}
}

/* peças da mesma coleção (relacionados) */
.pp-relacionados{background:var(--green-wash);padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--green-line)}
.pp-rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}
.pp-rel-head h2{font-size:clamp(18px,2vw,24px);text-transform:uppercase;letter-spacing:.05em;font-weight:400}
.pp-rel-head a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);transition:color .2s}
.pp-rel-head a:hover{color:var(--gold)}
.pp-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pp-rel-card{background:var(--white);border:1px solid var(--gold-soft);padding:10px 10px 15px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.pp-rel-card:hover{border-color:var(--green);box-shadow:0 14px 30px -22px rgba(11,44,34,.5)}
.pp-rel-foto{aspect-ratio:4/5;overflow:hidden;background:var(--off);margin-bottom:11px}
.pp-rel-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pp-rel-card:hover .pp-rel-foto img{transform:scale(1.04)}
.pp-rel-card h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:color .25s var(--ease)}
.pp-rel-card:hover h3{color:var(--green)}
@media(max-width:900px){
  .pp-grid{grid-template-columns:1fr}
  .pp-rel-grid{grid-template-columns:repeat(3,1fr)}
  /* min-width:0 é obrigatório: grid item nasce com min-width:auto, que impede
     encolher abaixo do conteúdo. Sem isso a faixa de thumbs em nowrap estica o
     item e vaza a página (medido: 220px de overflow em 320px). */
  .pp-galeria{min-width:0}
}
/* Só onde a tela é LARGA e o layout já virou 1 coluna: aí a foto ocupando a
   largura toda ficava exagerada (890px de altura em 768px, 87% da tela).
   Limitar a largura mantém o 4/5 e o enquadramento da joia.
   Abaixo de 481px NÃO se aplica: a foto já é proporcional à tela. */
@media(min-width:481px) and (max-width:900px){
  .pp-galeria{max-width:520px;margin-inline:auto}
}
/* Galeria no celular: 12 thumbs com wrap viravam um mosaico de 4 linhas (286px de
   altura em 320px). Vira faixa de rolagem horizontal, uma linha só. */
@media(max-width:800px){
  .pp-thumbs{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding-bottom:8px;
    scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent;
  }
  .pp-thumbs button{flex:0 0 auto;scroll-snap-align:start}
  .pp-thumbs::-webkit-scrollbar{height:3px}
  .pp-thumbs::-webkit-scrollbar-thumb{background:var(--gold-soft)}
}
@media(max-width:640px){
  .pp-rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .pp-acoes .btn{width:100%}
}

/* ===== FOOTER da página de produto ===== */
.pp-footer .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:720px){.pp-footer .footer-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:480px){.pp-footer .footer-grid{grid-template-columns:1fr}}

/* ===== SOBRE (Ana: texto esquerda · foto direita) ===== */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:center}
.about-text h2{font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;letter-spacing:.04em;font-weight:400;margin-bottom:20px}
.about-text p{font-size:15px;color:var(--muted);margin-bottom:14px;max-width:520px}
.about-photo{aspect-ratio:4/3;overflow:hidden;background:var(--off)}
.about-photo img{width:100%;height:100%;object-fit:cover}

/* ===== SOB ENCOMENDA (Ana: foto esquerda · texto direita, fundo off) ===== */
.bespoke{background:var(--green-wash)}
.bespoke-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:520px}
.bespoke-photo{background:var(--white);overflow:hidden}
.bespoke-photo img{width:100%;height:100%;object-fit:cover;min-height:380px}
.bespoke-text{padding:clamp(36px,5vw,70px);display:flex;flex-direction:column;justify-content:center}
.bespoke-text h2{font-size:clamp(26px,3vw,36px);text-transform:uppercase;letter-spacing:.03em;font-weight:400;margin-bottom:18px}
.bespoke-text p{font-size:15px;color:var(--muted);margin-bottom:14px;max-width:470px}
.bespoke-text .btn{align-self:flex-start;margin-top:12px}
.bespoke-glow,.diamonds-glow,.service-glow,.hero-glow{display:none}

/* etapas */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--white);padding:30px 26px}
.step-num{display:block;font-size:11px;letter-spacing:.2em;color:var(--green);margin-bottom:10px}
.step h3{font-size:14px;letter-spacing:.06em;font-weight:500;margin-bottom:7px}
.step p{font-size:13px;color:var(--muted);line-height:1.55}

/* ===== DIAMANTES ===== */
.dia-tabs{display:flex;gap:0;border:1px solid var(--line);width:fit-content;margin:0 auto 40px}
.dia-tab{padding:13px 26px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:all .22s}
.dia-tab.active{background:var(--green-btn);color:#fff}
.dia-panel{display:none}
.dia-panel.active{display:block;animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* stretch: a foto acompanha a altura do texto, topo E base alinhados */
.dia-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.dia-photo{overflow:hidden;background:var(--off);color:var(--green);min-height:clamp(340px,34vw,460px)}
.dia-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dia-text h3{font-size:20px;letter-spacing:.04em;text-transform:uppercase;font-weight:400;margin-bottom:14px}
.dia-text p{font-size:15px;color:var(--muted);margin-bottom:18px}
.dia-facts li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.dia-facts li span{min-width:112px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);padding-top:3px}
.dia-note{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.dia-note p{font-size:14.5px;color:var(--muted);max-width:820px;line-height:1.7}
.dia-note p + p{margin-top:16px}
.dia-note strong{color:var(--ink);font-weight:500}
.dia-svg{width:96px;height:96px;opacity:.5}
.dia-ph em{display:block;font-size:12px;color:var(--muted);margin-top:10px;font-style:normal}

/* ===== PROCEDÊNCIA ===== */
.prov-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
.prov-text h2{font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;letter-spacing:.03em;font-weight:400;margin-bottom:18px}
.prov-text p{font-size:15px;color:var(--muted)}
.prov-list li{padding:14px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:12px}
/* 1º item sem borda/padding: alinha exatamente com o topo do texto à esquerda */
.prov-list li:first-child{border-top:none;padding-top:0}
.prov-list li::before{content:'';width:5px;height:5px;background:var(--green);flex:none}

/* ===== SELOS DE SERVIÇO (Ana: 4 colunas finas) ===== */
.seals{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.seals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:30px 0}
.seal{display:flex;align-items:flex-start;gap:12px}
.seal-ico{color:var(--green);flex:none;margin-top:2px}
.seal h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:4px}
.seal p{font-size:12px;color:var(--muted);line-height:1.5}

/* ===== CTA FINAL (Ana: centralizado, fundo verde lavado) ===== */
.cta{background:var(--green-wash);text-align:center;padding:clamp(70px,8vw,110px) 0}
.cta h2{font-size:clamp(26px,3.2vw,40px);font-weight:400;letter-spacing:-.01em;margin-bottom:16px}
.cta p{font-size:15.5px;color:var(--muted);max-width:560px;margin:0 auto 30px}
.service-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ===== FOOTER (Ana: verde escuro, com fio de ouro no topo) ===== */
.site-footer{position:relative;background:var(--green);color:rgba(255,255,255,.72);padding:66px 0 0}
.site-footer::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold-line)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.footer-logo{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.footer-wordmark{font-size:23px;letter-spacing:.28em;color:#fff;line-height:1;display:inline-block}
.footer-brand p{margin-top:16px;font-size:13px;color:rgba(255,255,255,.6);max-width:280px}
/* baseline do heading da coluna alinhada com a do wordmark da marca */
.footer-col h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:16px;line-height:1;padding-top:9px}
.footer-col li{margin-bottom:10px}
.footer-col a,.footer-col li{font-size:13px;color:rgba(255,255,255,.72);transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:16px;font-size:11.5px;color:rgba(255,255,255,.62);letter-spacing:.06em}
.footer-bottom a{color:rgba(255,255,255,.75)}

/* Alvo de toque (WCAG 2.5.8, mínimo 24px): estes links de texto têm 17-21px de
   altura. O ::after expande só a área clicável, sem alterar o layout. */
.hero-link,.head-link,.feat-link,.pp-rel-head a,.dia-note a{position:relative}
/* o .brand é absolute em toda largura, o que já serve de contexto pro ::after */
.brand::after,.hero-link::after,.head-link::after,.feat-link::after,
.pp-rel-head a::after,.dia-note a::after{
  content:'';position:absolute;inset:-6px -8px;
}

/* Alvo de toque no celular: os links de rodapé e de ação têm 14-18px de altura,
   abaixo do mínimo de 24px (WCAG 2.5.8). O ::after expande só a área clicável,
   sem alterar espaçamento nem posição do texto. */
.footer-col a,.footer-bottom a,.pp-links a,.pp-add-link,.pp-voltar,.brand-footer{position:relative}
.footer-col a::after,.footer-bottom a::after,.pp-links a::after,
.pp-add-link::after,.pp-voltar::after,.brand-footer::after{
  content:'';position:absolute;inset:-5px -6px;
}

/* ===== REVEAL (anti-tela-branca: visível por padrão) ===== */
/* Título: reveal por máscara de linha (a palavra sobe de trás do overflow do .line) */
html.js-ready .hero-title .word{opacity:0;transform:translateY(110%)}
html.force-visible .hero-title .word{opacity:1!important;transform:none!important}

.reveal{opacity:1;transform:none}
html.js-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo)}
html.js-ready .reveal.is-visible{opacity:1;transform:none}

/* Cards e etapas: mesmo padrão dos reveals, com entrada em sequência.
   Visíveis por padrão; só o js-ready esconde, e o observer devolve. */
.col-card,.feat-card,.step,.prod-card{opacity:1;transform:none}
html.js-ready .col-card,
html.js-ready .feat-card,
html.js-ready .step,
html.js-ready .prod-card{
  opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo)
}
html.js-ready .col-card.is-visible,
html.js-ready .feat-card.is-visible,
html.js-ready .step.is-visible,
html.js-ready .prod-card.is-visible{opacity:1;transform:none}
html.js-ready .col-card:nth-child(2),html.js-ready .feat-card:nth-child(2),html.js-ready .step:nth-child(2),html.js-ready .prod-card:nth-child(2){transition-delay:.09s}
html.js-ready .col-card:nth-child(3),html.js-ready .feat-card:nth-child(3),html.js-ready .step:nth-child(3),html.js-ready .prod-card:nth-child(3){transition-delay:.18s}
html.js-ready .col-card:nth-child(4),html.js-ready .feat-card:nth-child(4),html.js-ready .step:nth-child(4),html.js-ready .prod-card:nth-child(4){transition-delay:.27s}
html.js-ready .col-card:nth-child(5),html.js-ready .step:nth-child(5){transition-delay:.36s}
html.js-ready .col-card:nth-child(6),html.js-ready .step:nth-child(6){transition-delay:.45s}
html.force-visible .col-card,
html.force-visible .feat-card,
html.force-visible .step,
html.force-visible .prod-card{opacity:1!important;transform:none!important}
/* No hero quem anima é o GSAP (inline): transição de CSS brigaria com ele */
html.js-ready .hero .reveal{transition:none}
html.force-visible .reveal{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.js-ready .reveal,
  html.js-ready .col-card,
  html.js-ready .feat-card,
  html.js-ready .step,
  html.js-ready .prod-card{opacity:1;transform:none}
}

/* Card do catálogo estreito: os dois botões somam 188px e não cabem enquanto o
   corpo do card tem menos que isso (medido: 178px em 721px, 205px em 800px).
   Até 800px fica um alvo só, em largura total; a foto e o nome já abrem a peça. */
@media(max-width:800px){
  .feat-actions{flex-direction:column;align-items:stretch;gap:8px}
  .feat-add{width:100%;padding:12px 10px;text-align:center;letter-spacing:.1em}
  .feat-link{display:none}
  .prod-parcela{font-size:11px;letter-spacing:0}
}
/* em 320px "10x de R$ 2.690,00" estoura o card por 3px */
@media(max-width:340px){
  .prod-parcela{font-size:10px}
}

/* ===== RESPONSIVO ===== */
@media(max-width:1080px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .pillars-grid{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(3){border-left:none}
  .pillar{border-top:1px solid var(--line)}
  .pillar:nth-child(-n+2){border-top:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .seals-grid{grid-template-columns:repeat(2,1fr);gap:22px}
}
/* O wordmark novo é 46% mais largo, e com ele a barra de links deixou de caber
   ao lado: R(41) + nav(380) + wordmark(202) + nav direita(340) + espaços = 1087px.
   Abaixo disso a navegação vai pro menu hamburguer, senão a nav passa por cima
   do wordmark (medido: sobreposição de 44px em 901px). */
@media(max-width:1080px){
  .nav-desktop{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:block}
  .nav-right{display:flex;justify-content:flex-end}
  .nav-right>a{display:none}
}
@media(max-width:900px){
  .nav-desktop{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:block}
  /* No mobile os links viram menu hamburguer, mas busca/carrinho/opções continuam no header */
  .nav-right{display:flex;justify-content:flex-end}
  .nav-right>a{display:none}
  /* Foto desloca pra mostrar o colar da modelo; texto fica sobre o fade à esquerda */
  .hero{min-height:490px}
  .hero-bg-move img{object-position:60% center}
  .glint{display:none} /* posição dos brilhos só é confiável no desktop */
  .hero-content{width:78%;margin-left:7vw}
  .about-grid,.prov-grid,.dia-grid,.bespoke-split{grid-template-columns:1fr}
  .about-photo{order:-1}
  .bespoke-photo img{min-height:280px}
}
@media(max-width:720px){
  .card-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-bottom{flex-direction:column;text-align:center}
  .head-row{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:480px){
  .hero{min-height:470px}
  .hero-bg-move img{object-position:60% center}
  /* fade mais forte no mobile: o texto fica sobre a pele clara da foto */
  .hero-fade{
    background:linear-gradient(90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.86) 46%,
      rgba(255,255,255,.18) 78%,
      rgba(255,255,255,0) 92%);
  }
  .hero-content{width:88%;margin-left:6vw}
  .pillars-grid{grid-template-columns:1fr}
  .pillar{border-left:none;border-top:1px solid var(--line)}
  .pillar:first-child{border-top:none}
  .seals-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}
}