/* Hero em vídeo da página inicial (filme do pátio + logótipo fixo + logótipo 3D no fecho) */
section.vhero{background:#14110e;color:#fff;padding:16px 16px 0}
@media(min-width:900px){section.vhero{padding:32px 40px 0}}
@media(min-width:1400px){section.vhero{padding:36px 56px 0}}
.vh-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 112px);max-height:calc(100svh - 112px);margin-inline:auto;overflow:hidden;border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.45),0 18px 40px -6px rgba(0,0,0,.7),0 40px 90px -10px rgba(0,0,0,.85),0 0 70px rgba(214,168,108,.10);
  background:#0c0a08 center/cover no-repeat;isolation:isolate}
.vh-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* logótipo fixo no canto inferior esquerdo, com "Arte&Casa 2026" (sem animação) */
.vh-wm{position:absolute;left:max(14px,2.2%);bottom:max(12px,3%);z-index:1;pointer-events:none;display:flex;align-items:center;gap:.55rem;transition:opacity .8s}
.vh-wm img{display:block;height:clamp(22px,4.4vw,52px);width:auto;opacity:.55;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.vh-wm span{font-weight:600;font-size:clamp(.7rem,1.3vw,1rem);letter-spacing:.06em;color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* nota da cor do seixo (canto inferior direito, legível) */
.vh-note{position:absolute;right:max(14px,2.2%);bottom:max(12px,3%);z-index:1;margin:0;padding:.3em .8em;border-radius:999px;background:rgba(20,17,14,.55);backdrop-filter:blur(4px);color:#fff;font-weight:500;font-size:clamp(.7rem,1.25vw,.95rem);letter-spacing:.03em;transition:opacity .8s}

/* fecho: escurece e mostra o logótipo em 3D */
.vh-end{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;background:#0c0a08;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 0s linear 1.4s}
.vh-end::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(214,168,108,.32),rgba(214,168,108,0) 60%)}
.vh-persp{position:relative;perspective:1000px;height:min(52%,330px);aspect-ratio:280/205}
.vh-logo{position:absolute;inset:0;transform-style:preserve-3d}
.vh-logo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.vh-tag{position:relative;margin:0;font-weight:500;letter-spacing:.45em;text-transform:uppercase;color:#e3cfac;font-size:clamp(.8rem,2vw,1.35rem);opacity:0;transition:opacity 1.2s ease 1.6s;text-align:center;padding:0 1rem}
.vh-frame.done .vh-end{opacity:1;visibility:visible;transition:opacity 1.4s ease,visibility 0s}
.vh-frame.done .vh-wm,.vh-frame.done .vh-note{opacity:0}
.vh-frame.done .vh-tag{opacity:1}
.vh-frame.done .vh-logo{animation:vh-in 2.6s cubic-bezier(.2,.7,.2,1) both,vh-sway 9s ease-in-out 2.6s infinite alternate}
@keyframes vh-in{from{transform:scale(.72) rotateX(8deg) rotateY(-110deg)}to{transform:scale(1) rotateX(7deg) rotateY(-14deg)}}
@keyframes vh-sway{from{transform:rotateX(7deg) rotateY(-14deg)}to{transform:rotateX(4deg) rotateY(18deg)}}

/* controlos */
.vh-ctl{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:12px;z-index:3;display:flex;gap:.4rem}
.vh-ctl button{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .8rem;background:rgba(20,17,14,.55);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;font:600 .9rem var(--font);letter-spacing:.05em;cursor:pointer;backdrop-filter:blur(4px)}
.vh-ctl button:hover{background:rgba(20,17,14,.8)}
.vh-ctl button:focus-visible{outline:2px solid #e8c9a4;outline-offset:2px}
.vh-ctl svg{width:14px;height:14px;fill:currentColor}
.vh-ctl [hidden]{display:none}

/* texto e botões por baixo do filme (não tapa a ação; fica legível no telemóvel) */
.vh-copy{text-align:center;padding:2.6rem 0 2.8rem}
.vh-copy h1{margin-bottom:.35em}
.vh-copy .lead{font-size:1.3rem;opacity:.92;max-width:46ch;margin:0 auto}
.vh-copy .cta-row{margin-top:1.3rem}

/* cartões de serviços da página inicial: maiores, 3 por linha no computador (as linhas incompletas ficam ao centro).
   Usa "~" porque entre as duas secções há a tag <script> do hero. */
section.vhero ~ section .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem}
section.vhero ~ section .cards .card{flex:0 1 calc((100% - 3.2rem) / 3);min-width:260px}
section.vhero ~ section .cards .card .thumb{aspect-ratio:3/2}
section.vhero ~ section .cards .card .body{padding:1.4rem 1.6rem 1.6rem}
section.vhero ~ section .cards .card h3{font-size:1.6rem;margin-bottom:0}
section.vhero ~ section h2{text-align:center;margin-bottom:1.4em}

@media(max-width:600px){
  .vh-frame{border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 24px -4px rgba(0,0,0,.7),0 24px 50px -10px rgba(0,0,0,.8)}
  .vh-ctl{top:8px}
  .vh-ctl button{min-height:32px;padding:0 .6rem;font-size:.8rem}
  .vh-wm{left:8px;bottom:8px;gap:.35rem}
  .vh-note{right:8px;bottom:8px}
  .vh-copy{padding:1.8rem 0 2.2rem}
  .vh-copy .lead{font-size:1.1rem}
  section.vhero ~ section .cards .card{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  .vh-frame.done .vh-logo{animation:none;transform:rotateX(6deg) rotateY(-14deg)}
}