/* ============================================================
   EMÉRITO · folha de estilos
   Identidade: tinta escura quente, papel marfim, ouro laurel.
   Display: Fraunces (serif) · Texto: Instrument Sans
   ============================================================ */

@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-500-italic.woff2") format("woff2");
  font-weight:500;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/assets/fonts/instrument-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/assets/fonts/instrument-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/assets/fonts/instrument-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --tinta:#0B0A08;
  --carvao:#15120D;
  --carvao-2:#1D1913;
  --papel:#F0E9DA;
  --marfim:#E6DCC4;
  --grafite:#A89D87;
  --apagado:#6E6753;
  --ouro:#C9A253;
  --ouro-claro:#E4C97E;
  --bronze:#8A6D33;
  --linha:rgba(201,162,83,.16);
  --linha-suave:rgba(201,162,83,.08);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --largura:1080px;
  --leitura:64ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--ouro);color:var(--tinta)}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--largura);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.wrap-leitura{max-width:820px}

/* ---------- tipografia ---------- */
h1,h2{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--papel);
}
h1{font-size:clamp(2.5rem,6.4vw,4.4rem);line-height:1.06}
h1 em{font-style:italic;color:var(--ouro)}
h2{font-size:clamp(1.75rem,4vw,2.6rem);line-height:1.12;margin-top:14px}
h3{font-family:var(--sans);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}

.rotulo{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ouro);
}
.prosa{margin-top:24px;display:flex;flex-direction:column;gap:16px;max-width:var(--leitura)}
.prosa p{color:var(--grafite)}
.prosa-destaque{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  color:var(--papel) !important;
  padding-top:6px;
}
.secao-sub{margin-top:18px;color:var(--grafite);max-width:var(--leitura)}
.ouro{color:var(--ouro)}

/* ---------- botões ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:.98rem;
  padding:14px 26px;border-radius:10px;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.botao-ouro{background:var(--ouro);color:var(--tinta)}
.botao-ouro:hover{background:var(--ouro-claro)}
.botao-fantasma{border:1px solid var(--linha);color:var(--papel)}
.botao-fantasma:hover{border-color:var(--ouro);color:var(--ouro)}
.botao-grande{padding:17px 34px;font-size:1.05rem}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--ouro);outline-offset:3px;border-radius:6px;
}

/* ---------- atmosfera: grão editorial ---------- */
.grao{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(11,10,8,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linha-suave);
}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.marca{
  font-family:var(--serif);font-weight:600;font-size:1.15rem;
  letter-spacing:.12em;text-decoration:none;color:var(--papel);
}
.menu{display:flex;gap:26px}
.menu a{
  font-size:.92rem;font-weight:500;color:var(--grafite);
  text-decoration:none;transition:color .2s ease;
}
.menu a:hover{color:var(--ouro)}
.topo-acoes{display:flex;align-items:center;gap:14px}
.topo-cta{padding:10px 18px;font-size:.9rem}
.menu-botao{display:none;background:none;border:none;cursor:pointer;padding:8px}
.menu-botao span{display:block;width:22px;height:2px;background:var(--papel);margin:5px 0;transition:transform .2s ease,opacity .2s ease}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(80px,13vw,150px) 0 clamp(60px,9vw,100px);overflow:hidden}
.hero-aurora{
  position:absolute;inset:-20%;pointer-events:none;filter:blur(46px);
  background:
    radial-gradient(620px 420px at 16% 24%,rgba(201,162,83,.10),transparent 70%),
    radial-gradient(720px 520px at 86% 8%,rgba(138,109,51,.09),transparent 70%),
    radial-gradient(500px 380px at 60% 92%,rgba(201,162,83,.05),transparent 70%);
  animation:aurora-respira 26s ease-in-out infinite alternate;
}
@keyframes aurora-respira{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(2%,-1.5%,0) scale(1.02)}
}
.hero-ornamento{
  position:absolute;top:-220px;right:-260px;width:720px;height:720px;
  border:1px solid var(--linha-suave);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(201,162,83,.07),transparent 65%);
  pointer-events:none;
  will-change:transform;
}
.hero-ornamento::after{
  content:"";position:absolute;inset:70px;
  border:1px solid var(--linha-suave);border-radius:50%;
}
.hero-ornamento::before{
  content:"";position:absolute;inset:34px;border-radius:50%;
  border:1px dashed var(--linha);
  animation:giro-selo 120s linear infinite;
}
@keyframes giro-selo{to{transform:rotate(360deg)}}
.hero-poeira{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.hero h1{margin-top:22px;max-width:18ch}
.hero h1 em{
  background:linear-gradient(105deg,var(--ouro) 0%,var(--ouro) 42%,var(--ouro-claro) 50%,#F4E3AE 53%,var(--ouro-claro) 56%,var(--ouro) 64%,var(--ouro) 100%);
  background-size:260% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  animation:brilho-ouro 7s ease-in-out infinite;
}
@keyframes brilho-ouro{
  0%,58%{background-position:120% 0}
  88%,100%{background-position:-40% 0}
}
.hero-sub{margin-top:24px;color:var(--grafite);font-size:clamp(1.02rem,2.1vw,1.18rem);max-width:56ch}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-micro{margin-top:16px;font-size:.88rem;color:var(--apagado)}

/* ---------- prova social (hero) ---------- */
.prova{
  display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,72px);
  margin-top:56px;padding-top:34px;
  border-top:1px solid var(--linha-suave);
}
.prova-item strong{
  display:block;
  font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.2rem);
  color:var(--ouro);line-height:1;
}
.prova-item span{display:block;margin-top:6px;font-size:.86rem;color:var(--grafite)}

/* ---------- seções ---------- */
.secao{padding:clamp(64px,9vw,110px) 0;position:relative}
.secao-borda{border-top:1px solid var(--linha-suave)}
#problema{border-top:1px solid var(--linha-suave)}

/* ---------- pilares ---------- */
.pilares{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;
}
.pilar{
  background:var(--carvao);
  border:1px solid var(--linha-suave);
  border-radius:12px;
  padding:30px 26px;
  position:relative;overflow:hidden;
  transition:border-color .3s ease,transform .3s ease;
}
.pilar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(201,162,83,.11),transparent 65%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.pilar:hover{border-color:var(--linha);transform:translateY(-3px)}
.pilar:hover::after{opacity:1}
.pilar-num{
  font-family:var(--serif);font-weight:500;font-size:.95rem;
  color:var(--ouro);letter-spacing:.1em;
}
.pilar h3{margin-top:14px;color:var(--papel)}
.pilar p{margin-top:10px;color:var(--grafite);font-size:.96rem}

/* ---------- método ---------- */
.etapas{list-style:none;margin-top:40px;display:flex;flex-direction:column}
.etapa{
  display:grid;grid-template-columns:56px 1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--linha-suave);
}
.etapa:first-child{border-top:none}
.etapa-num{
  font-family:var(--serif);font-weight:600;font-size:1.6rem;color:var(--ouro);
  width:52px;height:52px;border:1px solid var(--linha);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.etapa h3{color:var(--papel)}
.etapa p{margin-top:8px;color:var(--grafite);max-width:58ch}

/* ---------- para quem ---------- */
.especialidades{
  list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;
}
.especialidades li{
  font-family:var(--serif);font-weight:500;font-size:1.05rem;
  color:var(--marfim);
  border:1px solid var(--linha);border-radius:100px;
  padding:12px 24px;
}

/* ---------- entregas recentes ---------- */
.entregas{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;
}
.entrega{
  display:flex;flex-direction:column;gap:14px;
}
.entrega-tela{
  position:relative;overflow:hidden;border-radius:14px;
  border:1px solid var(--linha-suave);
  aspect-ratio:9/14;
  background:var(--carvao);
  transition:border-color .3s ease,transform .3s ease;
}
.entrega-tela img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .5s ease;
}
.entrega:hover .entrega-tela{border-color:var(--linha);transform:translateY(-4px)}
.entrega:hover .entrega-tela img{transform:scale(1.03)}
.entrega figcaption{font-size:.86rem;color:var(--grafite);line-height:1.4}
.entrega figcaption b{display:block;color:var(--papel);font-weight:600;font-size:.95rem}

/* ---------- depoimentos ---------- */
.depoimentos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px;
}
.depoimento{
  background:var(--carvao);
  border:1px solid var(--linha-suave);
  border-radius:12px;
  padding:28px 26px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:border-color .3s ease,transform .3s ease;
}
.depoimento::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(201,162,83,.09),transparent 65%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.depoimento:hover{border-color:var(--linha);transform:translateY(-3px)}
.depoimento:hover::after{opacity:1}
.depoimento-estrelas{color:var(--ouro);letter-spacing:.22em;font-size:.82rem}
.depoimento blockquote{
  margin-top:14px;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:1.05rem;line-height:1.55;color:var(--marfim);
}
.depoimento figcaption{
  margin-top:auto;padding-top:20px;
  display:flex;align-items:center;gap:12px;
}
.depoimento figcaption img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:1px solid var(--linha);
}
.depoimento figcaption span{font-size:.85rem;color:var(--grafite);line-height:1.35}
.depoimento figcaption b{display:block;color:var(--papel);font-weight:600;font-size:.92rem}

/* ---------- fundador ---------- */
.fundador{
  display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,6vw,70px);
  align-items:center;
}
.fundador-foto{position:relative;max-width:300px}
.fundador-foto img{
  width:100%;height:auto;border-radius:16px;
  border:1px solid var(--linha);
}
.fundador-carimbo{
  position:absolute;right:-16px;bottom:-16px;
  width:64px;height:64px;border-radius:50%;
  background:var(--tinta);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:1.7rem;color:var(--ouro);
}

/* ---------- faq ---------- */
.faq{margin-top:36px;display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--linha-suave)}
.faq details:last-child{border-bottom:1px solid var(--linha-suave)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;
  font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--papel);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--ouro);
  transition:transform .2s ease;flex:0 0 auto;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 24px;color:var(--grafite);max-width:60ch}

/* ---------- chamada final ---------- */
.chamada{
  border-top:1px solid var(--linha);
  position:relative;overflow:hidden;
  background:var(--tinta);
}
.chamada::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 0%,rgba(201,162,83,.10),transparent 70%);
  animation:pulso-ouro 9s ease-in-out infinite;
}
@keyframes pulso-ouro{0%,100%{opacity:.65}50%{opacity:1}}
.chamada .wrap{position:relative}
.botao-ouro{position:relative}
.botao-grande{
  box-shadow:0 0 0 0 rgba(201,162,83,.0);
  transition:background .2s ease,box-shadow .4s ease,transform .2s ease;
}
.botao-grande:hover{box-shadow:0 8px 40px -8px rgba(201,162,83,.45);transform:translateY(-2px)}
.chamada-conteudo{text-align:center}
.chamada h2{max-width:20ch;margin-left:auto;margin-right:auto}
.chamada p{margin:22px auto 0;color:var(--grafite);max-width:48ch}
.chamada .botao{margin-top:34px}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha-suave);padding:44px 0 60px}
.rodape-linha{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rodape-marca{font-family:var(--serif);font-weight:600;letter-spacing:.12em;font-size:1rem}
.rodape-tag{margin-top:8px;font-size:.85rem;color:var(--apagado)}
.rodape-links{display:flex;gap:24px}
.rodape-links a{font-size:.9rem;color:var(--grafite);text-decoration:none}
.rodape-links a:hover{color:var(--ouro)}

/* ---------- página simples (privacidade / 404) ---------- */
.pagina-simples{padding:clamp(70px,11vw,130px) 0}
.pagina-simples h1{font-size:clamp(2rem,5vw,3rem)}
.pagina-simples .prosa{margin-top:28px}
.pagina-simples a{color:var(--ouro)}

/* ---------- animação de entrada ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-aurora,.hero-ornamento::before,.chamada::before,.hero h1 em{animation:none}
  .hero h1 em{background-position:50% 0}
  .hero-poeira{display:none}
  .pilar:hover,.depoimento:hover,.botao-grande:hover{transform:none}
}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .pilares{grid-template-columns:1fr}
  .entregas{grid-template-columns:repeat(2,1fr)}
  .depoimentos{grid-template-columns:1fr}
  .fundador{grid-template-columns:1fr;gap:36px}
  .fundador-foto{max-width:260px}
}
@media (max-width:480px){
  .entregas{grid-template-columns:1fr}
  .entrega-tela{aspect-ratio:9/12}
}
@media (max-width:720px){
  .menu{
    position:fixed;inset:70px 0 auto 0;
    flex-direction:column;gap:0;
    background:var(--tinta);
    border-bottom:1px solid var(--linha);
    padding:10px 24px 22px;
    transform:translateY(-130%);
    transition:transform .25s ease;
  }
  .menu.aberto{transform:none}
  .menu a{padding:14px 0;font-size:1.05rem;border-bottom:1px solid var(--linha-suave)}
  .menu a:last-child{border-bottom:none}
  .menu-botao{display:block}
  .menu-botao[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
  .menu-botao[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
  .topo-cta{display:none}
  .hero-acoes .botao{width:100%}
}