/* Casa Ruiz — folha de estilo única
   Direção: desenho técnico. Tinta de projeto, papel frio, latão.
   Assinatura: linhas de cota com anotações monoespaçadas. */

:root{
  --tinta:#11242F;        /* tinta de projeto */
  --tinta-70:#3D525C;
  --papel:#EFF1EE;        /* papel frio */
  --papel-2:#E4E8E4;
  --linha:#C3CCC7;        /* traço de construção */
  --latao:#A67C2E;        /* cota / acento */
  --latao-claro:#C9A75E;
  --branco:#FBFCFA;

  --display:"Fraunces",Georgia,serif;
  --corpo:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --margem:clamp(1.25rem,5vw,5.5rem);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--corpo);font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- tipografia ---- */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.4rem,1.5rem + 4vw,4.6rem);font-variation-settings:"SOFT" 0,"WONK" 1}
h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,3rem)}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem);letter-spacing:-.01em}
p{margin:0 0 1.15em}
.lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;color:var(--tinta-70);max-width:46ch}

/* ---- anotação monoespaçada (assinatura) ---- */
.anot{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--latao);
}
.anot-sec{color:var(--tinta-70)}

/* linha de cota: traço com marcas nas pontas */
.cota{display:flex;align-items:center;gap:.85rem;margin-bottom:1.6rem}
.cota::after{
  content:"";flex:1;height:1px;background:var(--linha);
  position:relative;
}
.cota-tick{
  width:1px;height:11px;background:var(--latao);flex:none;
}

/* ---- estrutura ---- */
.env{max-width:var(--max);margin-inline:auto;padding-inline:var(--margem)}
.sec{padding-block:clamp(3.5rem,8vw,7rem);border-top:1px solid var(--linha)}
.sec-primeira{border-top:0}

/* folha com margem anotada, como prancha de desenho */
.prancha{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
@media (min-width:900px){
  .prancha{grid-template-columns:172px minmax(0,1fr);gap:3.5rem}
  .prancha > .margem-anot{padding-top:.5rem;border-right:1px solid var(--linha)}
}
.margem-anot{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-70);line-height:1.9}
.margem-anot strong{display:block;color:var(--latao);font-weight:500}

/* ---- navegação ---- */
.topo{position:sticky;top:0;z-index:50;background:rgba(239,241,238,.93);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:1rem}
.marca{font-family:var(--display);font-size:1.22rem;font-weight:600;
  letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.marca span{color:var(--latao)}
.nav{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.nav a{font-size:.9rem;text-decoration:none;color:var(--tinta-70);
  padding-block:.2rem;border-bottom:1px solid transparent;transition:.18s}
.nav a:hover,.nav a:focus-visible{color:var(--tinta);border-bottom-color:var(--latao)}
.nav a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--latao)}
@media (max-width:780px){.nav{display:none}.nav-m{display:flex}}
.nav-m{display:none;gap:1.1rem}
.nav-m a{font-size:.82rem;text-decoration:none;color:var(--tinta-70)}

/* ---- botões ---- */
.btn{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.6rem;text-decoration:none;border:1px solid var(--tinta);
  background:var(--tinta);color:var(--branco);transition:.18s}
.btn:hover,.btn:focus-visible{background:var(--latao);border-color:var(--latao)}
.btn-vazio{background:transparent;color:var(--tinta)}
.btn-vazio:hover,.btn-vazio:focus-visible{background:var(--tinta);color:var(--branco);border-color:var(--tinta)}
:focus-visible{outline:2px solid var(--latao);outline-offset:3px}

/* ---- hero ---- */
.hero{padding-block:clamp(3rem,9vw,6.5rem) clamp(2.5rem,6vw,4.5rem)}
.hero h1{max-width:15ch;margin-bottom:1.4rem}
.hero .lead{margin-bottom:2.2rem}
.hero-acao{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

/* ---- grelha de prova ---- */
.prova{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.prova > div{background:var(--papel);padding:1.6rem 1.4rem}
.prova .n{font-family:var(--display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);
  line-height:1;display:block;margin-bottom:.5rem}
.prova .r{font-size:.86rem;color:var(--tinta-70);line-height:1.45}

/* ---- listas estruturais ---- */
.pilares{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2.5rem}
.pilar h3{margin-bottom:.6rem}
.pilar p{font-size:.95rem;color:var(--tinta-70);margin:0}

.camadas{list-style:none;margin:2rem 0 0;padding:0;counter-reset:c}
.camadas li{counter-increment:c;display:grid;grid-template-columns:2.6rem 1fr;
  gap:1.1rem;padding:1.05rem 0;border-top:1px solid var(--linha)}
.camadas li::before{content:counter(c,decimal-leading-zero);grid-column:1;
  font-family:var(--mono);font-size:.75rem;color:var(--latao);padding-top:.32rem}
.camadas b{grid-column:2;display:block;font-weight:600;margin-bottom:.15rem}
.camadas span{grid-column:2;font-size:.93rem;color:var(--tinta-70)}

/* ---- bloco de oferta ---- */
.oferta{background:var(--tinta);color:var(--papel);padding:clamp(2rem,5vw,3.4rem)}
.oferta h2{color:var(--branco)}
.oferta .lead{color:#B9C6C9}
.oferta .anot{color:var(--latao-claro)}
.oferta .btn{background:var(--latao);border-color:var(--latao);color:#12242E}
.oferta .btn:hover,.oferta .btn:focus-visible{background:var(--latao-claro);border-color:var(--latao-claro)}
.preco{font-family:var(--display);font-size:clamp(2.6rem,2rem + 3vw,4rem);
  line-height:1;margin:.4rem 0 .3rem;color:var(--branco)}
.preco-nota{font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;color:#93A6AA}

/* ---- perguntas ---- */
.faq{margin-top:2.2rem;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;padding:1.15rem 0;font-weight:600;
  list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--latao);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details > p{margin:0 0 1.15rem;color:var(--tinta-70);max-width:62ch}

/* ---- percurso (sobre) ---- */
.percurso{list-style:none;margin:2rem 0 0;padding:0}
.percurso li{display:grid;grid-template-columns:minmax(0,10rem) 1fr;gap:1.2rem;
  padding:1.1rem 0;border-top:1px solid var(--linha)}
.percurso .quando{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--latao);padding-top:.3rem}
.percurso b{display:block}
.percurso span{font-size:.93rem;color:var(--tinta-70)}
@media (max-width:640px){.percurso li{grid-template-columns:1fr;gap:.35rem}}

/* ---- cartões de caso ---- */
.casos{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2.5rem}
.caso{border:1px solid var(--linha);padding:1.8rem;background:var(--branco);
  text-decoration:none;display:block;transition:.18s}
.caso:hover,.caso:focus-visible{border-color:var(--latao);transform:translateY(-2px)}
.caso h3{margin:.5rem 0 .7rem}
.caso p{font-size:.94rem;color:var(--tinta-70);margin:0}

/* ---- rodapé ---- */
.rodape{border-top:1px solid var(--tinta);background:var(--papel-2);
  padding-block:clamp(2.5rem,5vw,3.6rem);margin-top:0}
.rodape-in{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rodape a{color:var(--tinta-70);text-decoration:none;font-size:.9rem;
  display:block;padding-block:.22rem}
.rodape a:hover,.rodape a:focus-visible{color:var(--latao)}
.rodape .anot{margin-bottom:.9rem;display:block}
.legal{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--linha);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--tinta-70)}

.wa{display:inline-flex;align-items:center;gap:.5rem}

/* ---- classes em falta (Sobre, Casos, EvaDerm, Contacto) ---- */
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--latao);margin:0 0 1.1rem}
.lead.estreito,p.estreito{max-width:56ch}
.grelha{display:grid;gap:1.5rem}
.grelha.g2{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.grelha.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cartao{border:1px solid var(--linha);background:var(--branco);padding:1.8rem}
.cartao h3{margin:0 0 .6rem}
.cartao p{font-size:.95rem;color:var(--tinta-70);margin:0}
.acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}
.btn.linha{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn.linha:hover,.btn.linha:focus-visible{background:var(--tinta);color:var(--branco)}
.mono-nota{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--tinta-70);line-height:1.8}
.salto{margin-top:2.2rem}
main > section{padding-block:clamp(3.5rem,8vw,7rem);border-top:1px solid var(--linha)}
main > section.hero{border-top:0;padding-block:clamp(3rem,9vw,6.5rem) clamp(2.5rem,6vw,4.5rem)}
main > section > .env > .eyebrow{margin-top:0}

/* ---- formulário de qualificação ---- */
.form-q{margin-top:2.6rem;max-width:660px}
.fase{border-top:1px solid var(--linha);padding-top:1.7rem;margin-top:2rem}
.fase:first-of-type{border-top:0;margin-top:0;padding-top:0}
.fase-cab{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.35rem}
.fase-n{font-family:var(--mono);font-size:.72rem;color:var(--latao);letter-spacing:.1em}
.fase-t{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.campo{margin-bottom:1.4rem}
.campo > label{display:block;font-weight:600;font-size:.94rem;margin-bottom:.3rem}
.campo .ajuda{display:block;font-size:.83rem;color:var(--tinta-70);
  margin-bottom:.6rem;line-height:1.5}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo textarea{
  width:100%;padding:.82rem .9rem;font-family:var(--corpo);font-size:1rem;
  color:var(--tinta);background:var(--branco);border:1px solid var(--linha);border-radius:0}
.campo textarea{min-height:108px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--latao);
  outline-offset:1px;border-color:var(--latao)}
.opcoes{display:grid;gap:.55rem}
.opcao{display:flex;gap:.7rem;align-items:flex-start;padding:.78rem .9rem;
  border:1px solid var(--linha);background:var(--branco);cursor:pointer;
  transition:.15s;font-size:.94rem;line-height:1.45}
.opcao:hover{border-color:var(--latao)}
.opcao input{margin-top:.25rem;flex:none;accent-color:var(--latao)}
.form-nota{font-family:var(--mono);font-size:.71rem;letter-spacing:.05em;
  color:var(--tinta-70);line-height:1.75;margin-top:1.6rem}
.oculto{position:absolute;left:-9999px}

/* ================= CORREÇÕES DE RITMO E LAYOUT ================= */

/* Títulos precisam de respirar. Era o bug mais visível do site. */
h1{margin-bottom:1.3rem}
h2{margin-bottom:1.1rem}
h3{margin-bottom:.55rem}
h2 + p, h2 + .lead, h1 + p, h1 + .lead, h3 + p{margin-top:0}
.lead{margin-bottom:1.6rem}

/* Paleta mais quente — menos nórdico, mais mediterrânico */
:root{
  --papel:#F2EFE9;
  --papel-2:#E9E4DA;
  --branco:#FCFAF6;
  --linha:#D3CBBD;
  --tinta:#16262E;
  --tinta-70:#4A5B62;
  --latao:#9A6E28;
  --latao-claro:#C8A55A;
}

/* A "prancha" espremia o conteúdo. Coluna de anotação mais estreita,
   e em ecrãs médios passa a empilhar em vez de comprimir. */
@media (min-width:900px){
  .prancha{grid-template-columns:150px minmax(0,1fr);gap:3rem}
}
@media (max-width:899px){
  .prancha{display:block}
  .prancha > .margem-anot{margin-bottom:1.4rem;padding-bottom:.9rem;
    border-bottom:1px solid var(--linha);border-right:0}
}
.prancha > div > p,.prancha > div > .lead{max-width:60ch}

/* Cartões e listas de casos com respiro interno coerente */
.cartao h3{margin-bottom:.7rem}
.cartao p + p{margin-top:.8rem}

/* impedir que a monoespaçada "escape" para texto corrido */
.cartao p,.caso p,.pilar p{font-family:var(--corpo)}

/* botão dentro de cartão não cola ao texto */
.cartao .acoes{margin-top:1.4rem}

/* prova como linha corrida, não grelha de cartões */
.prova-linha{display:block;background:none;border:0}
.prova-linha{border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta)}
.prova-linha > div{display:flex;align-items:baseline;gap:1.2rem;
  padding:1rem 0;border-top:1px solid var(--linha)}
.prova-linha > div:first-child{border-top:0}
.prova-linha .n{flex:none;width:4.2rem;font-size:1.7rem;margin-bottom:0}
.prova-linha .r{font-size:.92rem}

/* ================= ACABAMENTO PREMIUM — hierarquia e interação ================= */

/* transições consistentes em todo o sistema interativo */
a,button,.btn,.cartao,.caso,.opcao,input,textarea{
  transition:background-color .18s ease,border-color .18s ease,
             color .18s ease,transform .18s ease,box-shadow .18s ease;
}

/* cartões com elevação sutil ao passar o rato — não "flutuam", assentam melhor */
.cartao:hover{border-color:var(--latao);box-shadow:0 1px 0 var(--latao)}
.caso:hover{box-shadow:0 4px 14px rgba(22,38,46,.08)}

/* botões com resposta tátil discreta */
.btn:active{transform:translateY(1px)}

/* hierarquia mais clara entre título de secção e corpo */
.margem-anot strong{font-size:.72rem;margin-bottom:.35rem}
.lead{color:var(--tinta-70);font-weight:400}

/* números grandes (prova, preço) com peso visual reforçado */
.prova-linha .n,.preco{font-variant-numeric:oldstyle-nums lining-nums;letter-spacing:-.01em}

/* separação mais nítida entre secções, sem parecer grelha de dashboard */


/* estados de foco consistentes e visíveis — acessibilidade premium, não genérica */
.btn:focus-visible,.opcao:focus-within{outline:2px solid var(--latao);outline-offset:2px}

/* campos de formulário com hierarquia mais forte entre label e ajuda */
.campo label{letter-spacing:-.01em}
.campo .ajuda{opacity:.85}

/* ================= IDENTIDADE — selo + lockup ================= */
.marca{display:flex;align-items:center;gap:.7rem;color:var(--tinta)}
.marca svg{color:var(--tinta)}
.marca-tx{font-family:var(--display);font-size:1.22rem;font-weight:600;letter-spacing:-.015em}
.marca-tx em{font-style:normal;color:var(--latao)}
.rodape .marca-mini{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.rodape .marca-mini svg{width:22px;height:22px;color:var(--tinta)}