/* ===========================================================
   Valente Distribuidora España
   Sistema visual segundo o Manual de Identidade Visual v2.0
   Verde Mata 60% · Creme 30% · Ouro 10% (acento, nunca fundo)
   =========================================================== */

:root{
  /* Cores da marca */
  --verde:#0B3D2E;
  --verde-fundo:#082B21;
  --verde-claro:#145440;
  --verde-linha:#2A5A48;
  --verde-mudo:#8FA394;
  --ouro:#D9A410;
  --ouro-claro:#E8B825;
  --ouro-texto:#8A6C10;
  --creme:#F5EFDD;
  --creme-2:#F7F2E4;
  --creme-mudo:#C9BC93;
  --branco:#FFFFFF;
  --borda:#DDD8C8;
  --carvao:#1A1A14;
  --texto:#3D3A2E;
  --texto-2:#6B6858;

  /* Tipografia */
  --titulo:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --corpo:'Archivo', ui-sans-serif, system-ui, sans-serif;

  /* Métrica */
  --largura:1080px;
  --pad-lateral:clamp(20px, 5vw, 48px);
  --sec-y:clamp(56px, 9vw, 88px);
  --raio:6px;
  --nav-h:78px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--creme);
  color:var(--carvao);
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
h1,h2,h3,h4{ margin:0; font-family:var(--titulo); font-weight:700; letter-spacing:-.5px; line-height:1.15 }
p{ margin:0 }
a{ color:var(--verde); text-decoration:none; transition:color .18s ease }
a:hover{ color:var(--ouro-texto) }

:focus-visible{ outline:3px solid var(--ouro); outline-offset:3px; border-radius:3px }

.salto{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ouro); color:var(--verde); padding:12px 20px;
  font:600 14px var(--titulo); border-radius:0 0 var(--raio) 0;
}
.salto:focus{ left:0 }

.env{ max-width:var(--largura); width:100%; margin-inline:auto }
.sec{ padding:var(--sec-y) var(--pad-lateral); display:flex; justify-content:center }

/* ---------- Elementos de marca ---------- */

.losango{
  width:9px; height:9px; background:var(--ouro);
  transform:rotate(45deg); flex:none;
}
.losango--sm{ width:8px; height:8px }

.selo-secao{
  display:flex; align-items:center; gap:10px;
  font:600 12px var(--titulo); letter-spacing:2.5px;
  color:var(--ouro-texto); text-transform:uppercase;
}
.selo-secao--claro{ color:var(--ouro) }

.cabeca{ display:flex; flex-direction:column; gap:12px; margin-bottom:40px }
.cabeca h2{
  font-size:clamp(27px, 4vw, 36px); color:var(--verde); text-wrap:balance;
}
.cabeca p{ font-size:16px; color:var(--texto-2); max-width:60ch }

/* ---------- Botões ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 15px var(--titulo); padding:14px 26px; border-radius:var(--raio);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px) }
.btn--ouro{ background:var(--ouro); color:var(--verde) }
.btn--ouro:hover{ background:var(--ouro-claro); color:var(--verde) }
.btn--verde{ background:var(--verde); color:var(--creme) }
.btn--verde:hover{ background:var(--verde-claro); color:var(--creme) }
.btn--linha{ border-color:var(--verde-linha); color:var(--creme) }
.btn--linha:hover{ border-color:var(--ouro); color:var(--ouro) }
.btn--pequeno{ font-size:14px; padding:11px 22px }

/* ---------- Barra promocional ---------- */

.promo{
  background:var(--ouro); color:var(--verde);
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px 44px 9px 24px; position:relative;
}
.promo .losango{ background:var(--verde) }
.promo p{ font:600 13px var(--titulo); letter-spacing:.5px; text-align:center }
.promo button{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--verde); cursor:pointer;
  font-size:18px; line-height:1; padding:6px 10px; opacity:.65; border-radius:4px;
}
.promo button:hover{ opacity:1 }

/* ---------- Navegação ---------- */

.nav{
  background:rgba(245,239,221,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--borda);
  padding:16px var(--pad-lateral);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  position:sticky; top:0; z-index:40;
}

.marca{ display:flex; align-items:center; gap:12px }
.marca__simbolo{ width:42px; height:42px; flex:none }
.marca__nome{
  font:700 17px var(--titulo); letter-spacing:.5px; color:var(--verde); line-height:1.15;
}
.marca__desc{
  font:500 7.5px var(--titulo); letter-spacing:1.5px; color:var(--texto-2);
}
.marca--claro .marca__nome{ color:var(--creme) }
.marca--claro .marca__desc{ color:var(--creme-mudo) }

.menu{ display:flex; align-items:center; gap:28px }
.menu a{ font:500 14px var(--corpo) }
.menu a.btn{ font:600 14px var(--titulo) }

.hamb{
  display:none; background:none; border:1px solid var(--borda);
  border-radius:var(--raio); padding:9px 11px; cursor:pointer;
}
.hamb span{ display:block; width:20px; height:2px; background:var(--verde); margin:4px 0; transition:transform .2s ease, opacity .2s ease }
.hamb[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.hamb[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamb[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* ---------- Hero ---------- */

.hero{ background:var(--verde); padding:clamp(56px,8vw,96px) var(--pad-lateral); display:flex; justify-content:center }
.hero__grade{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,56px); align-items:center }
.hero__texto{ display:flex; flex-direction:column; gap:22px }
.hero h1{
  font-size:clamp(34px, 5.4vw, 52px); color:var(--creme);
  line-height:1.08; letter-spacing:-1px; text-wrap:balance;
}
.hero__sub{ font-size:17px; line-height:1.7; color:var(--creme-mudo); max-width:50ch }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px }

.numeros{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,32px);
  margin-top:14px; border-top:1px solid var(--verde-linha); padding-top:20px;
}
.numeros div{ display:flex; flex-direction:column; gap:2px }
.numeros dt{ font:700 24px var(--titulo); color:var(--creme) }
.numeros dd{ margin:0; font-size:12px; color:var(--verde-mudo) }

.hero__foto{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:4/5; max-height:480px; background:var(--verde-claro);
  box-shadow:0 24px 50px rgba(8,43,33,.45);
}
.hero__foto img{ width:100%; height:100%; object-fit:cover }
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,61,46,0) 45%, rgba(8,43,33,.55) 100%);
}

/* ---------- Faixa de produtos (marquise) ---------- */

.faixa{ background:var(--verde-fundo); overflow:hidden; padding:14px 0; border-block:1px solid var(--verde-linha) }
.faixa__trilho{ display:flex; width:max-content; animation:desliza 42s linear infinite }
.faixa:hover .faixa__trilho{ animation-play-state:paused }
.faixa__grupo{ display:flex; align-items:center; gap:26px; padding-right:26px }
.faixa__grupo span{
  font:500 13px var(--titulo); letter-spacing:2px; color:var(--creme-mudo); white-space:nowrap;
}
@keyframes desliza{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
  .faixa__trilho{ animation:none; width:100%; overflow-x:auto }
}

/* ---------- Produtos ---------- */

.produtos{ background:var(--creme) }
.grade-produtos{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }

.card{
  background:var(--branco); border:1px solid var(--borda);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(26,26,20,.10); border-color:var(--ouro) }
.card__foto{ aspect-ratio:3/2; background:var(--creme-2); overflow:hidden }
.card__foto img{ width:100%; height:100%; object-fit:cover }
.card__corpo{ padding:22px; display:flex; flex-direction:column; gap:6px }
.card__corpo h3{ font-size:17px; color:var(--verde) }
.card__corpo p{ font-size:13px; line-height:1.6; color:var(--texto-2) }

.card--verde{
  background:var(--verde); border-color:var(--verde);
  justify-content:space-between; padding:24px; gap:18px;
}
.card--verde:hover{ border-color:var(--ouro) }
.card--verde h3{ font-size:17px; color:var(--creme) }
.card--verde p{ font-size:13px; line-height:1.6; color:var(--creme-mudo) }
.card--verde a{ font:600 13px var(--titulo); color:var(--ouro) }
.card--verde a:hover{ color:var(--ouro-claro) }

.card--largo{
  grid-column:1 / -1; flex-direction:row; align-items:center;
  gap:24px; padding:28px 30px;
}
.card--largo > div{ max-width:62ch }
.card--largo p{ font-size:14px }
.card--largo a{ font-size:14px; white-space:nowrap }

/* ---------- Por qué ---------- */

.porque{ background:var(--branco); border-block:1px solid var(--borda) }
.grade-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.vantagem{
  border-top:3px solid var(--ouro); background:var(--creme-2);
  padding:24px; display:flex; flex-direction:column; gap:8px;
}
.vantagem h3{ font-size:15px; color:var(--verde) }
.vantagem p{ font-size:13px; line-height:1.6; color:var(--texto-2) }

/* ---------- Cómo funciona ---------- */

.processo{ background:var(--creme) }
.passos{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:passo }
.passo{
  display:flex; flex-direction:column; gap:10px;
  padding-top:22px; border-top:1px solid var(--borda); position:relative;
}
.passo::before{
  counter-increment:passo; content:"0" counter(passo);
  font:700 13px var(--titulo); letter-spacing:1px; color:var(--ouro-texto);
}
.passo::after{
  content:""; position:absolute; top:-5px; left:0;
  width:9px; height:9px; background:var(--ouro); transform:rotate(45deg);
}
.passo h3{ font-size:16px; color:var(--verde) }
.passo p{ font-size:13.5px; line-height:1.65; color:var(--texto-2) }

/* ---------- Sello ---------- */

.sello{ background:var(--branco); border-block:1px solid var(--borda) }
.sello__grade{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,56px); align-items:center }
.sello__palco{
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:20px; min-height:320px; border-radius:14px; overflow:hidden;
}
.sello__palco img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.sello__palco::after{ content:""; position:absolute; inset:0; background:rgba(8,43,33,.42) }

.selo{
  position:relative; z-index:1;
  width:min(260px, 62vw); aspect-ratio:1; border-radius:50%;
  background:var(--verde); box-shadow:0 14px 34px rgba(26,26,20,.34);
  display:flex; align-items:center; justify-content:center; transform:rotate(-4deg);
}
.selo__anel{
  width:91%; height:91%; border-radius:50%; border:1px dashed var(--creme-mudo);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
}
.selo__topo{ font:600 11px var(--titulo); letter-spacing:3px; color:var(--creme-mudo); white-space:nowrap }
.selo__marca{
  width:42px; height:42px; background:var(--ouro); transform:rotate(45deg);
  display:flex; align-items:center; justify-content:center;
}
.selo__marca i{ width:20px; height:20px; background:var(--verde); border-radius:50% }
.selo__nome{ display:flex; flex-direction:column; align-items:center; gap:2px }
.selo__nome b{ font:700 14px var(--titulo); letter-spacing:2px; color:var(--creme) }
.selo__nome strong{ font:700 28px var(--titulo); letter-spacing:2px; color:var(--creme); line-height:1 }
.selo__pe{ font:500 9px var(--titulo); letter-spacing:2px; color:var(--ouro); white-space:nowrap }

.sello__texto{ display:flex; flex-direction:column; gap:18px; align-items:flex-start }
.sello__texto h2{ font-size:clamp(27px,4vw,36px); color:var(--verde); text-wrap:balance }
.sello__texto p{ font-size:15px; line-height:1.7; color:var(--texto) }
.lista-selo{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.lista-selo li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--texto) }
.lista-selo .losango{ margin-top:7px }

/* ---------- FAQ ---------- */

.faq{ background:var(--creme) }
.faq__lista{ display:flex; flex-direction:column; border-top:1px solid var(--borda) }
.faq details{ border-bottom:1px solid var(--borda) }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font:600 16.5px var(--titulo); color:var(--verde);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:14px; top:26px;
  width:10px; height:10px; border-right:2px solid var(--ouro); border-bottom:2px solid var(--ouro);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:30px }
.faq details p{ padding:0 44px 20px 0; font-size:14.5px; line-height:1.7; color:var(--texto-2); max-width:75ch }

/* ---------- Contacto ---------- */

.contacto{ background:var(--verde) }
.contacto__grade{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,56px) }
.contacto__texto{ display:flex; flex-direction:column; gap:18px }
.contacto__texto h2{ font-size:clamp(27px,4vw,36px); color:var(--creme) }
.contacto__texto > p{ font-size:15px; line-height:1.7; color:var(--creme-mudo) }
.dados{ display:flex; flex-direction:column; gap:12px; margin-top:10px }
.dados a, .dados span{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--creme) }
.dados a:hover{ color:var(--ouro) }

.form{
  background:var(--creme); border-radius:12px; padding:clamp(22px,3vw,32px);
  display:flex; flex-direction:column; gap:14px;
}
.campo{ display:flex; flex-direction:column; gap:6px }
.campo label{ font:600 12px var(--titulo); letter-spacing:1px; color:var(--verde) }
.campo input, .campo textarea, .campo select{
  font:400 14px var(--corpo); padding:12px 14px;
  border:1px solid var(--borda); border-radius:var(--raio);
  background:var(--branco); color:var(--carvao); outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  border-color:var(--verde); box-shadow:0 0 0 3px rgba(11,61,46,.12);
}
.campo textarea{ min-height:92px; resize:vertical }
.form__nota{ font-size:11.5px; line-height:1.55; color:var(--texto-2) }
.form__nota a{ text-decoration:underline }
.form__ok{
  display:none; gap:10px; align-items:flex-start;
  background:#E9F2EC; border:1px solid #BCD8C7; border-radius:var(--raio);
  padding:14px; font-size:13.5px; line-height:1.6; color:var(--verde);
}
.form.enviado .form__ok{ display:flex }

/* ---------- Rodapé ---------- */

.rodape{ background:var(--verde-fundo); padding:34px var(--pad-lateral); display:flex; justify-content:center }
.rodape__grade{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.rodape__simbolo{ width:30px; height:30px; flex:none }
.rodape__links{ display:flex; gap:18px; flex-wrap:wrap }
.rodape__links a{ font-size:12.5px; color:var(--creme-mudo) }
.rodape__links a:hover{ color:var(--ouro) }
.rodape__legal{ font-size:12px; color:var(--verde-mudo) }
.trio{ display:flex; gap:8px }
.trio .losango:nth-child(2){ opacity:.6 }
.trio .losango:nth-child(3){ opacity:.3 }

/* ---------- Páginas de texto legal ---------- */

.legal{ max-width:760px; margin-inline:auto; padding:clamp(40px,7vw,72px) var(--pad-lateral) }
.legal h1{ font-size:clamp(28px,4.5vw,38px); color:var(--verde); margin-bottom:10px }
.legal .data{ font-size:13px; color:var(--texto-2); margin-bottom:34px }
.legal h2{ font-size:19px; color:var(--verde); margin:32px 0 10px }
.legal p, .legal li{ font-size:15px; line-height:1.75; color:var(--texto) }
.legal ul{ padding-left:20px; display:flex; flex-direction:column; gap:6px }
.legal .voltar{ font:600 14px var(--titulo); display:inline-flex; gap:8px; align-items:center; margin-top:40px }

/* ---------- Revelação suave ---------- */

html.js .revela{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
html.js .revela.visivel{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  html.js .revela{ opacity:1; transform:none; transition:none }
  .card:hover{ transform:none }
}

/* ===========================================================
   Responsivo
   =========================================================== */

@media (max-width: 980px){
  .grade-produtos{ grid-template-columns:repeat(2,1fr) }
  .grade-4{ grid-template-columns:repeat(2,1fr) }
  .passos{ grid-template-columns:repeat(2,1fr) }
  .hero__grade{ grid-template-columns:1fr; gap:36px }
  .hero__foto{ aspect-ratio:16/10; max-height:340px; order:-1 }
  .sello__grade{ grid-template-columns:1fr }
  .contacto__grade{ grid-template-columns:1fr }
}

@media (max-width: 760px){
  .hamb{ display:block }
  .menu{
    position:fixed; inset:0 0 auto 0; top:var(--nav-h);
    background:var(--creme); border-bottom:1px solid var(--borda);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--pad-lateral) 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 18px 30px rgba(26,26,20,.12); z-index:39;
  }
  .menu.aberto{ opacity:1; transform:none; pointer-events:auto }
  .menu a{ padding:14px 0; border-bottom:1px solid var(--borda); font-size:16px }
  .menu a.btn{ margin-top:14px; border-bottom:none; padding:14px 22px }
  .promo p{ font-size:12px }
  .numeros{ gap:20px }
  .numeros dt{ font-size:21px }
}

@media (max-width: 700px){
  .card--largo{ flex-direction:column; align-items:flex-start; gap:16px }
}

@media (max-width: 560px){
  .grade-produtos{ grid-template-columns:1fr }
  .grade-4{ grid-template-columns:1fr }
  .passos{ grid-template-columns:1fr }
  .hero__acoes .btn{ width:100% }
  .rodape__grade{ flex-direction:column; align-items:flex-start; gap:16px }
}

@media print{
  .nav, .promo, .faixa, .form, .hamb{ display:none }
  body{ background:#fff }
}