/* ============================================
   LOJA — página de produto, layout "case study"
   vestido com a IDENTIDADE DOM HUB
   (Neue Haas leve + Playfair itálico, acento lima,
    botão goo-style, respiro amplo). Dark.
   ============================================ */
@font-face{font-family:"Neue Haas Display";src:url("assets/fonts/NeueHaasDisplayLight.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Display";src:url("assets/fonts/NeueHaasDisplayRoman.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#141513; --panel:#0e0f0d; --panel-2:#1b1c1a;
  --text:#EFEFEB; --dim:#9b9b96; --faint:#6f6f6b;
  --line:rgba(239,239,235,.12); --line-soft:rgba(239,239,235,.07);
  --gold:#B9FF47; --gold-soft:#d4ff7a; --ink:#161817;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text)}
body{margin:0;font-family:"Neue Haas Display",Arial,sans-serif;font-size:17px;line-height:1.62;font-weight:400;letter-spacing:-.012em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 60%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px}
.wrap{width:min(1320px,calc(100% - clamp(32px,8vw,80px)));margin-inline:auto}

/* eyebrow = .label do site (traço lima) */
.eyebrow{display:inline-block;position:relative;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding-left:18px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--gold)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px 0}
.nav__brand img{width:140px;height:auto}
.nav__back{font-size:14.5px;color:var(--dim)}
.nav__back:hover{color:var(--gold)}

/* botão — estilo goo-btn: pílula vazada + nó lima com seta SVG */
.cta{display:inline-flex;align-items:center;gap:8px}
.cta__pill{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:15px;font-weight:500;white-space:nowrap;transition:border-color var(--dur,.5s) ease,background .5s ease}
.cta__node{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--ink);flex:0 0 auto;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cta__node svg{width:19px;height:19px}
.cta:hover .cta__pill{border-color:rgba(185,255,71,.4)}
.cta:hover .cta__node{transform:rotate(-45deg)}
.cta--ghost .cta__pill{border-color:var(--line)}
.cta-line{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:3px}
.cta-line::after{content:"→";transition:transform .4s ease}
.cta-line:hover{color:var(--text);border-color:var(--gold)}
.cta-line:hover::after{transform:translateX(4px)}

/* hero */
.hero{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(44px,5vw,72px)}
.hero__meta{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--dim);margin-bottom:22px}
.hero__meta .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}
h1{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(46px,8.4vw,112px);line-height:.95;letter-spacing:-.05em;margin:0 0 clamp(28px,4vw,48px);max-width:16ch;text-wrap:balance}

.hero__panel{
  position:relative;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 120% at 85% 10%, rgba(185,255,71,.12), transparent 48%), var(--panel);
  border:1px solid var(--line);
  min-height:clamp(360px,46vw,560px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:clamp(40px,4vw,56px) clamp(26px,3vw,44px) clamp(94px,10vw,120px);
}
.hero__panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(239,239,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(239,239,235,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 80%);pointer-events:none}
.hero__tags{position:absolute;top:0;right:0;display:flex;gap:9px;flex-wrap:wrap;background:var(--bg);padding:0 0 14px 18px;border-bottom-left-radius:22px}
.hero__tags::after{content:"";position:absolute;top:0;right:100%;width:22px;height:22px;background:radial-gradient(circle at 0 100%,transparent 22px,var(--bg) 22px)}
.hero__tags .pill{font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--text)}
.hero__tags .pill--seal{background:var(--gold);border-color:transparent;color:var(--ink);font-weight:600}
.hero__stat{position:relative;z-index:1;max-width:22ch}
.hero__stat .k{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 16px;display:inline-block;position:relative;padding-left:18px}
.hero__stat .k::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--gold)}
.hero__stat .big{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(28px,3.6vw,48px);line-height:1.05;letter-spacing:-.035em;margin:0}
.hero__cta-wrap{position:absolute;left:0;right:0;bottom:clamp(22px,3vw,34px);display:flex;justify-content:center;z-index:3;pointer-events:none}
.hero__cta-wrap .cta{pointer-events:auto}

/* painel com imagem de produto */
.hero__panel--img{padding:0}
.hero__panel--img::before{display:none}
.hero__panel--img picture{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__panel--img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(8,9,6,.62), rgba(8,9,6,0) 46%)}
/* imagem larga: painel acompanha a proporção da imagem (cabe sem cortar) */
.hero__panel--img.hero__panel--wide{min-height:0;aspect-ratio:1923/818}
/* tags flutuantes sobre a imagem (sem o recorte, que é p/ painel vazio) */
.hero__panel--img .hero__tags{position:absolute;top:14px;right:14px;left:auto;transform:none;margin:0;padding:0;background:none;border-radius:0}
.hero__panel--img .hero__tags::after{display:none}

/* intro */
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,88px);padding:clamp(56px,8vw,128px) 0;align-items:start}
.intro__lead{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(26px,3.2vw,44px);line-height:1.1;letter-spacing:-.035em;margin:0 0 28px;max-width:20ch}
.byline{display:flex;align-items:center;gap:13px}
.byline__mark{width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
.byline__mark img{width:24px;height:24px;object-fit:contain}
.byline__text{font-size:14px;color:var(--dim);max-width:30ch}
.intro__body p{color:var(--dim);font-size:1.05rem;line-height:1.65;margin:0 0 18px;max-width:54ch}
.metacols{display:flex;flex-wrap:wrap;gap:28px 48px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.metacols>div{display:flex;flex-direction:column;gap:6px}
.metacols .k{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.metacols .v{font-size:18px;font-weight:400;color:var(--text)}
.metacols .v--gold{color:var(--gold)}

/* section */
.section{padding:clamp(64px,9vw,140px) 0;border-top:1px solid var(--line-soft)}
.section__head{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,6vw,88px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.section__head .eyebrow{margin-bottom:20px}
.section__title{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(30px,4.4vw,60px);line-height:1.02;letter-spacing:-.04em;margin:0;max-width:18ch;text-wrap:balance}
.section__desc{color:var(--dim);font-size:1.05rem;line-height:1.65;margin:0;max-width:46ch}

/* entregáveis */
.deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.deliv__item{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;min-height:200px}
.deliv__num{font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--gold)}
.deliv__item p{margin:auto 0 0;font-weight:400;font-size:clamp(18px,1.6vw,22px);line-height:1.25;letter-spacing:-.02em;color:var(--text)}
.note{font-size:14.5px;color:var(--faint);margin:24px 0 0}

/* quote */
.quote{padding:clamp(72px,10vw,150px) 0;border-top:1px solid var(--line-soft)}
.quote p{font-family:"Neue Haas Display",sans-serif;font-weight:300;font-size:clamp(32px,6vw,86px);line-height:1.02;letter-spacing:-.045em;margin:0;max-width:17ch}

/* feature card (pra quem é) — superfície escura, no estilo do site */
.feature{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:clamp(32px,5vw,72px)}
.feature .eyebrow{margin-bottom:18px}
.feature h2{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(26px,3.6vw,46px);line-height:1.08;letter-spacing:-.035em;margin:0 0 24px;max-width:20ch;text-wrap:balance}
.feature p{color:var(--dim);font-size:1.05rem;line-height:1.65;margin:0 0 16px;max-width:62ch}
.feature strong{color:var(--text);font-weight:400}

/* final cta */
.final{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;border:1px solid var(--line);border-radius:24px;padding:clamp(32px,4vw,56px);background:radial-gradient(120% 140% at 90% 10%,rgba(185,255,71,.08),transparent 55%),var(--panel)}
.final h2{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(28px,4vw,56px);line-height:1;letter-spacing:-.04em;margin:0;max-width:16ch}

/* what next */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.next a{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;font-size:17px;font-weight:400;transition:border-color .4s ease,transform .4s ease}
.next a:hover{border-color:rgba(185,255,71,.4);transform:translateY(-2px)}
.next a .arw{color:var(--gold);font-size:16px}

/* footer */
.foot{padding:48px 0;border-top:1px solid var(--line);color:var(--faint);font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a:hover{color:var(--gold)}

/* formulário do diagnóstico */
.diag-form{display:flex;flex-direction:column;gap:18px;max-width:760px}
.diag-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:13px;letter-spacing:.02em;color:var(--dim)}
.field input,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--text);font-family:inherit;font-size:16px;line-height:1.5;transition:border-color .3s ease,background .3s ease}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--panel-soft)}
.field textarea{resize:vertical;min-height:130px}
.diag-form__foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.diag-form__note{font-size:13px;color:var(--faint);margin:0;max-width:34ch}
button.cta{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}

@media (max-width:860px){
  .diag-form__grid{grid-template-columns:1fr}
  .intro,.section__head{grid-template-columns:1fr;gap:26px}
  .section__head{align-items:start}
  .deliv{grid-template-columns:1fr 1fr}
  .next{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .deliv{grid-template-columns:1fr}
  .hero__tags{position:static;background:none;padding:0;margin-bottom:16px;border-radius:0}
  .hero__tags::after{display:none}
  .hero__panel{min-height:0;padding-top:28px}
  .hero__panel--img{padding:0;aspect-ratio:3/4}
  .final .cta{width:100%}
  .final .cta__pill{flex:1}
}
@media (prefers-reduced-motion:reduce){.cta__node,.next a,.cta-line::after{transition:none}}