/* ==========================================================================
   ESQUADRIA ALUMÍNIOS — sistema de design
   --------------------------------------------------------------------------
   Tese: a empresa é nova e não tem obras para fotografar, por isso o site não
   finge ser um portefólio. É uma FOLHA DE DESENHO — o caderno de encargos
   publicado. A textura do site é a hachura a 45°, não a fotografia.

   Motivo gráfico: a MEIA-ESQUADRIA a 45°, com a geometria lida do ficheiro do
   símbolo. O símbolo corta os DOIS cantos do MESMO lado (o direito), em cima e
   em baixo: 852,120→732,240 e 732,760→852,880. O chanfro do site faz o mesmo,
   e nunca em cantos opostos.

   Sem frameworks, sem CDN, sem build, sem analítica, sem cookies.
   border-radius: 0 em absolutamente tudo. Sem gradientes, sem sombras difusas:
   a única profundidade admitida é o fio de 1px.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* cor — contrastes já medidos, ver notas */
  --papel:     #F4F3F0;  /* branco quente; nunca #FFF, fica clínico          */
  --papel-2:   #EAE8E3;  /* painéis, zebra de tabela, blocos de legenda      */
  --tinta:     #2B2F36;  /* antracite da marca: texto, filetes, contornos    */
  --tinta-70:  #5A6069;  /* texto secundário, linhas de cota, legendas       */
  --tinta-30:  #B9BCC0;  /* fios de grelha, moldura de folha, hachura, junta */
  --aco:       #3A7CA5;  /* acento da marca — 4,11:1 sobre papel: SÓ filetes,
                            arestas de chanfro, estados activos e números
                            grandes (≥24px). Nunca em texto pequeno.         */
  --aco-t:     #2E6485;  /* o aço legível: links e etiquetas — 5,77:1        */
  --aco-inv:   #7FB3D1;  /* o aço sobre a banda escura — o #3A7CA5 dá 3,4:1
                            sobre #22262C e chumba em texto                  */
  --aco-lav:   #E4EDF3;  /* linha de tabela em foco                          */
  --ocre:      #8F5A12;  /* avisos e severidade ALTA — 5,20:1                */
  --ocre-flag: #B4741E;  /* só como flag de 3px; 3,49:1 chumba em texto      */
  --escuro:    #22262C;  /* uma só banda escura, no contacto                 */

  /* tipografia */
  --f-display: 'Barlow Semi Condensed', 'Bahnschrift SemiCondensed', 'Segoe UI', system-ui, sans-serif;
  --f-texto:   'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* escala — módulo de base 8px */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;

  --largura:     1240px;
  --medida:      62ch;
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --secao-y:     clamp(3.5rem, 7vw, 6rem);

  /* meia-esquadria e junta */
  --m:     14px;  /* corte a 45°   */
  --folga: 6px;   /* junta visível */

  --tempo: 200ms;
  --curva: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 719px) {
  :root { --m: 10px; }
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  margin: 0;
  line-height: 1.05;      /* maiúsculas acentuadas: nunca abaixo de 1.0 */
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
.prosa a, .clausula__t a {
  color: var(--aco-t);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dt, dd { margin: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
strong { font-weight: 600; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--aco); color: var(--papel); }

:focus-visible { outline: 2px solid var(--aco-t); outline-offset: 3px; }

.vo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: var(--e-3) var(--e-5);
  background: var(--tinta); color: var(--papel);
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em;
}
.salta:focus { left: var(--e-4); top: var(--e-4); }

/* -------------------------------------------------- meia-esquadria (45°) -- */
/*  Os dois cantos do lado DIREITO, espelhados em cima e em baixo — a
    geometria exata do símbolo. Nunca em cantos opostos.                     */
.mitre {
  position: relative;
  clip-path: polygon(
    0 0,
    calc(100% - var(--m)) 0,
    100% var(--m),
    100% calc(100% - var(--m)),
    calc(100% - var(--m)) 100%,
    0 100%
  );
}
/* clip-path corta o border, por isso a aresta desenha-se à parte */
.mitre--aresta::after,
.mitre--aresta::before {
  content: '';
  position: absolute;
  right: 0;
  width: calc(var(--m) * 1.4142);
  height: 1.5px;
  background: var(--aco);
  transition: height 120ms var(--curva);
  pointer-events: none;
}
.mitre--aresta::before { top: 0;    transform-origin: 100% 0;    transform: rotate(-45deg) translateY(-.75px); }
.mitre--aresta::after  { bottom: 0; transform-origin: 100% 100%; transform: rotate(45deg) translateY(.75px); }
@media (hover: hover) {
  .mitre--aresta:hover::before, .mitre--aresta:hover::after { height: 2.5px; }
}

/* -------------------------------------- a caixa de visto em meia-esquadria -- */
/*  O marcador de lista de todo o site: o corte de esquadria como visto de
    compromisso. Preenchida = compromisso assumido. Vazia = recusa.          */
.visto {
  position: relative;
  flex: none;
  width: 15px; height: 15px;
  margin-top: .42em;
  border: 1.5px solid var(--tinta);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
/*  Por omissão a caixa de compromisso está preenchida: nada neste site fica
    invisível à espera de uma transição. A animação de "assinar" só entra
    quando o JS confirma que a pode correr (ver html.anima, mais abaixo).    */
.visto--cheia::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  background: var(--aco);
}
.visto--vazia { border-color: var(--tinta-70); }

/* ------------------------------------------------------------------ folga -- */
/*  No símbolo existe uma junta diagonal entre o E e o montante (x+y=972 e
    x+y=1028) e o montante não toca o topo nem a base. Nada se toca: tudo
    encosta com junta visível, como perfis reais.                            */
.folga {
  display: grid;
  gap: var(--folga);
  background: var(--tinta-30);
}
.folga > * { background: var(--papel); }

/* ---------------------------------------------------------------- hachura -- */
.hachura {
  background-image: repeating-linear-gradient(45deg, var(--tinta-30) 0 1px, transparent 1px 5px);
}

/* ---------------------------------------------------------------- layout -- */
.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao-y); }
.secao--densa { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

/*  Moldura de folha: fio recuado do viewport, como uma folha de desenho.
    Abaixo de 720px reduz-se a fios no topo e no fundo — recuar dos lados
    rouba largura útil no telemóvel.                                         */
.folha { position: relative; }
.folha::before {
  content: '';
  position: absolute;
  inset: 0 18px;
  border-top: 1px solid var(--tinta-30);
  border-bottom: 1px solid var(--tinta-30);
  pointer-events: none;
}
@media (min-width: 720px) {
  .folha::before { border-left: 1px solid var(--tinta-30); border-right: 1px solid var(--tinta-30); }
}

/* separador de secção: fio de 1px que dá um salto a 45° a dois terços */
.junta { display: block; width: 100%; height: 9px; color: var(--tinta-30); }
.junta path { stroke: currentColor; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }

.grelha { display: grid; gap: var(--e-6); }
/*  Sem isto, um filho com largura mínima (o corte de perfil, uma tabela larga)
    estica a coluna e a página passa a rolar na horizontal no telemóvel.     */
.grelha > * { min-width: 0; }
@media (min-width: 900px) {
  .grelha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grelha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grelha--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grelha--75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .grelha--57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); }
}
@media (min-width: 620px) and (max-width: 899px) {
  .grelha--3, .grelha--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ tipografia -- */
.etiqueta {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-70);
  font-variant-numeric: tabular-nums;
}
.etiqueta--aco { color: var(--aco-t); }

.h-secao {
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  text-transform: uppercase;
  letter-spacing: .045em;
  max-width: 30ch;
}
.h-detalhe {
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.headline {
  font-size: clamp(2.3rem, 6.2vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.012em;
  text-transform: none;
  max-width: 24ch;
}

.prosa { color: var(--tinta-70); max-width: var(--medida); }
.prosa--tinta { color: var(--tinta); }
.prosa--larga { max-width: 74ch; }
.nota { font-size: .9375rem; color: var(--tinta-70); }
.num { font-variant-numeric: tabular-nums; }

.secao__cabeca { margin-bottom: var(--e-6); }
.secao__cabeca .etiqueta { margin-bottom: var(--e-3); }
.secao__cabeca .prosa { margin-top: var(--e-4); }

/* ------------------------------------------------- banda de números grandes -- */
.banda-num { background: var(--papel-2); border-top: 1px solid var(--tinta-30); border-bottom: 1px solid var(--tinta-30); }
.banda-num .env { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
/* flex e não grid: com 2 ou 3 números o auto-fit deixava faixas vazias à direita */
.numeros { display: flex; flex-wrap: wrap; justify-content: space-around; gap: var(--e-7) var(--e-5); }
.numero { flex: 1 1 150px; max-width: 280px; text-align: center; min-width: 0; }
.numero__v {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1; letter-spacing: -.005em;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.numero__r {
  display: block; margin-top: var(--e-3); font-family: var(--f-display); font-weight: 600;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aco-t);
}

/* ------------------------------------------------------ grelha do portefólio -- */
.obras { display: grid; gap: var(--folga); }
@media (min-width: 720px)  { .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .obras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.obra { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.obra__f { margin-bottom: var(--e-3); background: var(--papel-2); }
.obra__f img { display: block; width: 100%; height: auto; }
.obra__t { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; letter-spacing: .01em; }
.obra__m { font-size: .875rem; color: var(--tinta-70); font-variant-numeric: tabular-nums; }
.obra__d { font-size: .9375rem; }
.obra__s { font-size: .875rem; color: var(--tinta-70); }
.obra__s .etiqueta { display: block; margin-bottom: 2px; }

/* ----------------------------------------- bloco de legenda (folha técnica) -- */
/*  Só campos verdadeiros. Blocos de legenda com campos inventados é onde o
    desenho técnico passa de autoridade a fantasia de engenharia.            */
.legenda {
  display: grid;
  gap: 1px;
  background: var(--tinta-30);
  border: 1px solid var(--tinta-30);
  max-width: 34rem;
}
@media (min-width: 480px) { .legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legenda__c { background: var(--papel-2); padding: .6rem .85rem; }
/* n.º ímpar de células: a última ocupa a linha toda, senão fica um buraco ao lado */
.legenda__c:last-child:nth-child(odd) { grid-column: 1 / -1; }
.legenda__t {
  display: block;            /* sem isto o rótulo cola-se ao valor: «CATÁLOGO6 SÉRIES» */
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-70);
}
.legenda__v {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  margin-top: .1rem;
}

/* -------------------------------------------------- marcador a preencher -- */
.slot {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ocre);
  background: var(--papel-2);
  border-bottom: 2px solid var(--ocre-flag);
  padding: .05em .35em;
  white-space: normal;
}
.escuro .slot { color: #E8B667; background: rgba(180,116,30,.16); border-bottom-color: #B4741E; }

/* ---------------------------------------------------------------- botões -- */
.btn {
  --m: 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: .85rem 1.5rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--papel);
  transition: background var(--tempo) var(--curva), color var(--tempo) var(--curva);
}
.btn:hover { background: var(--aco-t); }
.btn--fio {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.btn--fio:hover { background: var(--tinta); color: var(--papel); box-shadow: none; }
.escuro .btn { background: var(--papel); color: var(--tinta); }
.escuro .btn:hover { background: var(--aco); color: var(--papel); }
.escuro .btn--fio { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1px rgba(244,243,240,.45); }
.escuro .btn--fio:hover { background: var(--papel); color: var(--tinta); }

.ligacao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aco-t);
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
  transition: gap var(--tempo) var(--curva), color var(--tempo) var(--curva);
}
.ligacao:hover { gap: var(--e-4); color: var(--tinta); }
.escuro .ligacao { color: var(--papel); }

/* -------------------------------------------------------------- logótipo -- */
.marca { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.marca__s { width: 1.9rem; height: 1.9rem; flex: none; }
.marca__s polygon { fill: currentColor; }
.marca__t { display: flex; flex-direction: column; line-height: 1; }
.marca__n {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .045em;
}
.marca__a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .625rem;
  letter-spacing: .295em;
  color: var(--aco);
  margin-top: .16rem;
}
.escuro .marca__a, .rodape .marca__a { color: var(--aco); }

/* ------------------------------------------------------------- cabeçalho -- */
.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--tinta-30);
  color: var(--tinta);
}
.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 4.25rem;
}
.topo__dir { display: flex; align-items: center; gap: var(--e-5); }

.nav { display: none; }
.nav__l { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.8rem); }
.nav__a {
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-70);
  padding-block: .35rem;
  transition: color var(--tempo) var(--curva);
}
.nav__a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--aco);
  transition: right var(--tempo) var(--curva);
}
.nav__a:hover { color: var(--tinta); }
.nav__a:hover::after { right: 0; }
.nav__a[aria-current='page'] { color: var(--tinta); }
.nav__a[aria-current='page']::after { right: 0; }

.tel-topo {
  display: none;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.tel-topo:hover { color: var(--aco-t); }

.hamb {
  --m: 8px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0 .65rem;
  background: var(--tinta);
}
.hamb span { display: block; height: 1.5px; background: var(--papel); transition: transform var(--tempo) var(--curva), opacity var(--tempo); }
.hamb[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamb[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/*  Painel de navegação: abre e fecha por display, sem deslizar. O orçamento
    de movimento do site é gasto no desenho que se desenha, não em gavetas —
    e assim a navegação não depende de uma transição para chegar ao ecrã.   */
.painel {
  position: fixed;
  inset: 4.25rem 0 0 0;
  z-index: 99;
  background: var(--papel-2);
  padding: var(--e-5) var(--gutter) var(--e-9);
  overflow-y: auto;
  display: none;
}
.painel[data-aberto='true'] { display: block; }
.painel__l { display: flex; flex-direction: column; }
.painel__l a {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--tinta-30);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.painel__l a .etiqueta { color: var(--aco-t); }
.painel__l a[aria-current='page'] { color: var(--aco-t); }
.painel__pe { margin-top: var(--e-6); display: grid; gap: var(--e-3); }

@media (min-width: 1000px) {
  .nav { display: block; }
  .tel-topo { display: inline-flex; }
  .topo__btn { display: inline-flex; }
  .hamb { display: none; }
  .painel, .painel[data-aberto='true'] { display: none; }
}
@media (max-width: 999px) { .topo__btn { display: none; } }

/* ----------------------------------------------- barra fixa no telemóvel -- */
/*  Uma única ação. Em Cabo Verde, o canal é o WhatsApp.                     */
.barra-baixo {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 98;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  background: var(--tinta);
  color: var(--papel);
  border-top: 1px solid var(--tinta-70);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (min-width: 1000px) { .barra-baixo { display: none; } }
@media (max-width: 999px) {
  body { padding-bottom: 56px; }
  /* a página de contactos não tem barra — não precisa da folga */
  body.sem-barra { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- abertura -- */
.abertura { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.abertura__acoes { margin-top: var(--e-6); display: flex; flex-wrap: wrap; gap: var(--e-4); }
.abertura .headline { margin-top: var(--e-5); }
.abertura .prosa { margin-top: var(--e-5); }

/* ------------------------------------------------------------- desenhos -- */
.desenho {
  background: var(--papel-2);
  border: 1px solid var(--tinta-30);
  padding: clamp(1rem, 3vw, 2rem);
  min-width: 0;
  max-width: 100%;
}
.desenho svg { width: 100%; height: auto; }
.desenho__pe {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--tinta-30);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  justify-content: space-between;
}

/* traços do desenho técnico */
.d-mat    { fill: none; stroke: var(--tinta);    stroke-width: 2;   stroke-linejoin: miter; }
.d-fino   { fill: none; stroke: var(--tinta-70); stroke-width: 1; }
.d-cota   { fill: none; stroke: var(--tinta-70); stroke-width: 1; }
.d-vidro  { fill: rgba(58,124,165,.14); stroke: var(--aco); stroke-width: 1.5; }
.d-vedante{ fill: var(--tinta-70); stroke: none; }
.d-aco    { fill: none; stroke: var(--aco); stroke-width: 1.5; }
.d-hach   { fill: url(#hach); stroke: var(--tinta); stroke-width: 2; }
.d-txt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .1em;
  fill: var(--tinta-70);
  stroke: none;
}
.d-txt--aco { fill: var(--aco-t); }
.d-num { font-variant-numeric: tabular-nums; }

/*  O desenho desenha-se — a única regra de movimento do site.
    ESTADO BASE: já desenhado. Se o JS não correr, se o navegador for antigo
    ou se a página nunca chegar a pintar, o desenho está lá inteiro. A classe
    `anima` só é posta no <html> quando o JS confirma que pode animar.       */
.traca [data-traco] { stroke-dasharray: 100; stroke-dashoffset: 0; }

.anima .traca [data-traco] {
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 820ms var(--curva);
}
.anima .traca[data-visivel='true'] [data-traco] { stroke-dashoffset: 0; }
.anima .traca [data-traco='2'] { transition-delay: 160ms; }
.anima .traca [data-traco='3'] { transition-delay: 300ms; }
.anima .traca [data-traco='4'] { transition-delay: 420ms; }

.anima .traca [data-cotas] {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--curva) 540ms, transform 200ms var(--curva) 540ms;
}
.anima .traca[data-visivel='true'] [data-cotas] { opacity: 1; transform: none; }

/* a caixa de visto "assina" uma vez, e só como melhoria */
.anima .visto--cheia::after { transform: scale(0); transition: transform 180ms var(--curva); }
.anima .visto--cheia[data-assinada='true']::after { transform: scale(1); }

/* ------------------------------------------------------------ os vãos --- */
.fachada { display: grid; gap: var(--folga); background: var(--tinta-30); }
@media (min-width: 700px)  { .fachada { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .fachada { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vao {
  background: var(--papel);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.vao__alcado {
  background: var(--papel-2);
  border: 1px solid var(--tinta-30);
  padding: var(--e-4);
  display: grid;
  place-items: center;
}
.vao__alcado svg { width: 100%; height: auto; }
.vao--correr    .vao__alcado { aspect-ratio: 22 / 12; }
.vao--batente   .vao__alcado { aspect-ratio: 1 / 1; }
.vao--porta     .vao__alcado { aspect-ratio: 9 / 16; }
.vao--fachada   .vao__alcado { aspect-ratio: 16 / 9; }
.vao--guarda    .vao__alcado { aspect-ratio: 5 / 2; }
.vao--cobertura .vao__alcado { aspect-ratio: 5 / 2; }
/*  No telemóvel a fachada colapsa a uma coluna. Manter a proporção do
    CONTENTOR faria a porta (9:16) ocupar meio ecrã, por isso a proporção
    passa a ser garantida pelo viewBox do próprio desenho e o contentor
    liberta-se — o alçado continua com a forma certa, sem comer a página.  */
@media (max-width: 699px) {
  .vao--correr .vao__alcado,
  .vao--batente .vao__alcado,
  .vao--porta .vao__alcado,
  .vao--fachada .vao__alcado,
  .vao--guarda .vao__alcado,
  .vao--cobertura .vao__alcado { aspect-ratio: auto; min-height: 7rem; }
  .vao__alcado svg { max-height: 30vh; width: auto; max-width: 100%; }
}

.vao__n { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .06em; }
.vao__p { font-size: .9375rem; color: var(--tinta-70); }
.vao__nao {
  font-size: .9375rem;
  color: var(--tinta-70);
  padding-top: var(--e-3);
  border-top: 1px solid var(--tinta-30);
  margin-top: auto;
}
.vao__nao b { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; display: block; color: var(--tinta); }

.alcado-linha { fill: none; stroke: var(--tinta); stroke-width: 3; }
.alcado-vidro { fill: rgba(58,124,165,.10); stroke: var(--aco); stroke-width: 1.5; }
.alcado-abre  { fill: none; stroke: var(--tinta-70); stroke-width: 1.5; stroke-dasharray: 7 5; }
.alcado-seta  { fill: none; stroke: var(--tinta-70); stroke-width: 2; }

/* --------------------------------------------------------------- provas -- */
.provas { display: grid; gap: 0; }
.prova {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-5) 0;
  border-bottom: 1px solid var(--tinta-30);
}
.provas .prova:first-child { border-top: 1px solid var(--tinta-30); }
.prova__t { font-weight: 500; }
.prova__t .ligacao { margin-top: var(--e-3); font-size: .875rem; }

/* ------------------------------------------------ pares errado / certo -- */
.falha {
  background: var(--papel-2);
  border: 1px solid var(--tinta-30);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.falha__cima { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.falha__fig { background: var(--papel); border: 1px solid var(--tinta-30); padding: var(--e-4); }
.falha__fig svg { width: 100%; height: auto; }
/*  Comutação errado/certo instantânea: um desenho técnico que aparece a
    esmorecer não ganha nada, e assim a comparação nunca depende de pintura. */
.falha__g { display: none; }
.falha__g--on { display: inline; }
.falha__campos { display: grid; gap: var(--e-3); }
.falha__campo { display: grid; gap: .1rem; }
.falha__custo {
  padding-top: var(--e-3);
  border-top: 1px solid var(--tinta-30);
  font-weight: 500;
}
.comuta {
  display: inline-flex;
  border: 1px solid var(--tinta);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex: none;
}
.comuta button { padding: .35rem .75rem; color: var(--tinta-70); transition: background var(--tempo), color var(--tempo); }
.comuta button[aria-pressed='true'] { background: var(--tinta); color: var(--papel); }

/* ------------------------------------------------------- cursor de corte -- */
.corte__ctrl { margin-top: var(--e-5); display: grid; gap: var(--e-2); }
.corte__ctrl input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: ew-resize;
}
.corte__ctrl input[type='range']::-webkit-slider-runnable-track { height: 1px; background: var(--tinta-30); }
.corte__ctrl input[type='range']::-moz-range-track { height: 1px; background: var(--tinta-30); }
.corte__ctrl input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -10px;
  background: var(--tinta);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.corte__ctrl input[type='range']::-moz-range-thumb {
  width: 20px; height: 20px; border: 0;
  background: var(--tinta);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.corte__camadas { transition: clip-path 60ms linear; }
/*  O desenho não encolhe: rola dentro da sua própria caixa. O corpo da
    página nunca rola na horizontal.                                         */
.corte__rolo { overflow-x: auto; max-width: 100%; }
.corte__rolo > svg { min-width: 560px; }

.pontos { display: grid; gap: 0; margin-top: var(--e-5); }
.ponto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--tinta-30);
}
.pontos .ponto:first-child { border-top: 1px solid var(--tinta-30); }
.ponto__n {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--aco-t);
  font-variant-numeric: tabular-nums;
  width: 2ch;
}
.ponto__f { font-weight: 500; }
.ponto__c { color: var(--tinta-70); font-size: .9375rem; }

/* -------------------------------------------------------------- percurso -- */
.percurso { display: grid; gap: 0; }
.etapa {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5) 0;
  border-bottom: 1px solid var(--tinta-30);
}
.percurso .etapa:first-child { border-top: 1px solid var(--tinta-30); }
@media (min-width: 860px) {
  .etapa { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-5); align-items: start; }
}
.etapa__n {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--aco);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.etapa__n span { display: block; font-size: .625rem; letter-spacing: .12em; color: var(--tinta-70); margin-top: .25rem; }
.etapa__t { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--e-2); }
.etapa__d { color: var(--tinta-70); font-size: .9375rem; }
.etapa__e { background: var(--papel-2); padding: var(--e-4); border-left: 2px solid var(--aco); }
.etapa__e .etiqueta { margin-bottom: .2rem; color: var(--aco-t); }

/* ------------------------------------------------------------- cláusulas -- */
.cap { margin-top: var(--e-7); }
.cap__t {
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--tinta);
}
.cap__regra { margin-top: var(--e-3); font-size: .9375rem; color: var(--tinta-70); font-style: italic; }
.clausulas { display: grid; gap: 0; margin-top: var(--e-4); }
.clausula {
  display: grid;
  grid-template-columns: 4.5ch auto minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--tinta-30);
}
.clausula__n {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--aco-t);
  font-variant-numeric: tabular-nums;
  padding-top: .06em;
}
.clausula__t { font-weight: 400; }

/*  No telemóvel, número e visto ficam numa linha e o texto passa a ocupar a
    largura toda — a três colunas sobravam ~30 caracteres por linha.         */
@media (max-width: 619px) {
  .clausula { grid-template-columns: 4.5ch auto; row-gap: var(--e-2); }
  .clausula__t { grid-column: 1 / -1; }
}

/* recusas */
.recusas { display: grid; gap: 0; }
.recusa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--tinta-30);
}
.recusas .recusa:first-child { border-top: 1px solid var(--tinta-30); }
.recusa__t { font-weight: 500; }
.recusa__p { color: var(--tinta-70); font-size: .9375rem; margin-top: .15rem; }

/* ------------------------------------------------------------- definições -- */
.dl { display: grid; gap: 0; }
.dl__p { display: grid; gap: .15rem; padding: var(--e-4) 0; border-bottom: 1px solid var(--tinta-30); }
.dl__p:first-child { border-top: 1px solid var(--tinta-30); }
@media (min-width: 620px) {
  .dl__p { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--e-5); align-items: baseline; }
}
.dl__d { font-weight: 500; font-variant-numeric: tabular-nums; }
.escuro .dl__p { border-color: rgba(244,243,240,.18); }

/* --------------------------------------------------------------- tabelas -- */
.tab-rolo { overflow-x: auto; max-width: 100%; }
.tab {
  font-size: .9375rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  min-width: 44rem;
}
.tab th, .tab td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--tinta-30); }
.tab thead th {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-70);
  border-bottom: 1px solid var(--tinta);
  white-space: nowrap;
}
.tab tbody tr:nth-child(even) { background: var(--papel-2); }
.tab tbody tr:hover { background: var(--aco-lav); }
.tab .n { text-align: right; }

.sev { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-display); font-weight: 600; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.sev::before { content: ''; width: 3px; height: 1em; background: currentColor; }
/*  A severidade está escrita por palavras — a cor só reforça, nunca informa
    sozinha. Por isso as três palavras ficam legíveis (o --tinta-30 dá 1,75:1
    e não serve para texto) e a graduação faz-se no filete de 3px.
    Sem semáforo verde/amarelo/vermelho.                                     */
.sev--alta  { color: var(--ocre); }
.sev--alta::before  { background: var(--ocre-flag); }
.sev--media { color: var(--tinta-70); }
.sev--baixa { color: var(--tinta-70); }
.sev--baixa::before { background: var(--tinta-30); }

/* no telemóvel cada linha vira cartão com pares etiqueta/valor */
@media (max-width: 719px) {
  .tab { min-width: 0; }
  .tab thead { display: none; }
  .tab tbody tr { display: grid; gap: .15rem; padding: var(--e-4) 0; border-bottom: 1px solid var(--tinta-30); background: none !important; }
  .tab tbody td { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--e-3); padding: .1rem 0; border: 0; text-align: left !important; }
  .tab tbody td::before {
    content: attr(data-r);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-70);
    padding-top: .32em;
  }
}

/* --------------------------------------------------------------- painéis -- */
.painel-b {
  background: var(--papel-2);
  border: 1px solid var(--tinta-30);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.painel-b__t { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .06em; }
.painel-b__pe { margin-top: auto; padding-top: var(--e-4); }

.teto {
  background: var(--papel-2);
  border: 1px solid var(--tinta-30);
  border-left: 2px solid var(--ocre-flag);
  padding: var(--e-5);
}

/* --------------------------------------------------------------- pessoa -- */
.pessoa { display: grid; gap: var(--e-6); align-items: start; }
@media (min-width: 820px) { .pessoa { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } }
.pessoa__r {
  aspect-ratio: 4 / 5;
  background: var(--papel-2);
  border: 1px solid var(--tinta-30);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--e-5);
  overflow: hidden;
}
.pessoa__r img { width: 100%; height: 100%; object-fit: cover; }
/*  Com fotografia, a moldura não leva margem interna nem fio: essas eram para o
    bloco de iniciais. Sem elas a caixa fica exatamente 4:5, igual à proporção das
    imagens (1122x1402), e o object-fit: cover não corta nada.                   */
.pessoa__r--foto { padding: 0; border: 0; }
.pessoa__iniciais {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--tinta-30);
}
.pessoa__n { font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: .04em; }
.pessoa__c { margin-top: var(--e-2); }

/* -------------------------------------------------------------- amostras -- */
.amostras { display: grid; gap: var(--folga); background: var(--tinta-30); }
@media (min-width: 620px) { .amostras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .amostras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.amostra {
  background: var(--papel-2);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--e-3);
  padding: var(--e-5);
  text-align: center;
}
.amostra img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------- banda escura -- */
.escuro {
  background: var(--escuro);
  color: var(--papel);
  position: relative;
  overflow: hidden;
}
.escuro h1, .escuro h2, .escuro h3, .escuro h4 { color: var(--papel); }
.escuro .prosa { color: rgba(244,243,240,.72); }
.escuro .etiqueta { color: rgba(244,243,240,.72); }
.escuro .etiqueta--aco { color: var(--aco-inv); }
.escuro__selo {
  position: absolute;
  right: -2rem; bottom: -3rem;
  width: min(24rem, 45vw);
  opacity: .08;
  pointer-events: none;
}
.escuro__selo polygon { fill: var(--papel); }

.canais { display: grid; gap: var(--folga); background: rgba(244,243,240,.2); }
@media (min-width: 760px) { .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.canal { background: var(--escuro); padding: var(--e-5); display: grid; gap: var(--e-2); align-content: start; }
.canal__v { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.canal__d { color: rgba(244,243,240,.78); font-size: .9375rem; }

/* ----------------------------------------------------------- formulário -- */
.form { display: grid; gap: var(--e-5); }
@media (min-width: 700px) { .form__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); } }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-family: var(--f-display); font-weight: 600; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-70); }
.campo input, .campo select, .campo textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--tinta-30);
  padding: .7rem .85rem;
  width: 100%;
  min-height: 3rem;   /* área de toque de 48px no telemóvel */
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--aco-t); box-shadow: inset 0 0 0 1px var(--aco-t); }
.form__aviso { background: var(--papel-2); border-left: 2px solid var(--aco); padding: var(--e-4); }

/* --------------------------------------------------------------- rodapé -- */
.rodape {
  background: var(--tinta);
  color: rgba(244,243,240,.72);
  padding-block: var(--e-8) var(--e-5);
  font-size: .9375rem;
}
.rodape .marca__n, .rodape a:hover { color: var(--papel); }
.rodape__t { display: grid; gap: var(--e-6); }
@media (min-width: 860px) { .rodape__t { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }
.rodape__h { font-family: var(--f-display); font-weight: 600; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--papel); margin-bottom: var(--e-4); }
.rodape__l { display: grid; gap: var(--e-3); }
.rodape a { transition: color var(--tempo); }
.rodape__b {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(244,243,240,.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(244,243,240,.55);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ movimento mínimo -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .anima .traca [data-traco] { stroke-dashoffset: 0; }
  .anima .traca [data-cotas] { opacity: 1; transform: none; }
  .anima .visto--cheia::after { transform: scale(1); }
}

/* ------------------------------------------------------------- impressão -- */
/*  É esta impressão que se anexa ao orçamento. Preto sobre branco, sem
    chanfros (o clip-path corta ao imprimir), URLs expandidos.               */
@media print {
  :root { --papel: #FFF; --papel-2: #FFF; --tinta: #000; --tinta-70: #333; --tinta-30: #999; --aco: #000; --aco-t: #000; }
  .topo, .painel, .barra-baixo, .hamb, .escuro, .comuta, .corte__ctrl, .salta, .btn, .ligacao { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; padding-bottom: 0; }
  .mitre { clip-path: none !important; }
  .mitre--aresta::before, .mitre--aresta::after { display: none; }
  .folha::before { display: none; }
  .secao { padding-block: 8pt; }
  .clausula, .recusa, .etapa, .dl__p { break-inside: avoid; }
  h1, h2, h3, .cap__t { break-after: avoid; }
  .prosa a::after, .clausula__t a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
  .tab { min-width: 0; }
  .desenho { border-color: #999; }
  @page { margin: 16mm; }
}

/* ================================================== variante: fotografia == */
.banda-foto { position: relative; background: var(--papel-2); }
.banda-foto img { display: block; width: 100%; height: clamp(240px, 42vw, 560px); object-fit: cover;
  filter: saturate(.88); }
.banda-foto__t { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--e-4) 0;
  background: linear-gradient(to top, rgba(34,38,44,.72), rgba(34,38,44,0)); color: var(--papel); }
.banda-foto__t .etiqueta { color: var(--aco-inv); }
.banda-foto__t p { margin: var(--e-2) 0 0; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: .01em; max-width: 34ch; }

/* ================================================== variante B: abertura == */
.heroi { position: relative; min-height: min(88vh, 820px); display: grid; align-items: end;
  color: var(--papel); background: var(--escuro); isolation: isolate; }
.heroi__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 50%; z-index: -2; }
.heroi::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(34,38,44,.86) 0%, rgba(34,38,44,.62) 45%, rgba(34,38,44,.18) 100%),
              linear-gradient(to top, rgba(34,38,44,.75) 0%, rgba(34,38,44,0) 55%); }
.heroi .env { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }
.heroi .etiqueta { color: var(--aco-inv); }
.heroi .headline { color: var(--papel); max-width: 18ch; margin-top: var(--e-4); }
.heroi .prosa { color: rgba(244,243,240,.88); max-width: 52ch; margin-top: var(--e-5); }
.heroi .prosa strong { color: var(--papel); }
.heroi .btn { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.heroi .btn--fio { background: transparent; color: var(--papel); border-color: rgba(244,243,240,.7); }
.heroi__pe { position: absolute; right: var(--gutter); bottom: var(--e-4); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(244,243,240,.6);
  font-family: var(--f-display); font-weight: 600; }
@media (max-width: 720px) {
  .heroi { min-height: min(78vh, 640px); }
  .heroi__img { object-position: 70% 50%; }
  .heroi__pe { position: static; display: block; margin-top: var(--e-5); }
}

/* o desenho D1 deu lugar à fotografia do canto (decisão do Rui, 23 set 2026) */
.desenho--foto img { display: block; width: 100%; height: auto; margin-bottom: var(--e-4); }

/* ------------------------------------ famílias de vão: fotografia no cartão -- */
.vao__alcado--foto { padding: 0; overflow: hidden; }
.vao__alcado--foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------------------------------------------- abertura: três vistas em rotação -- */
.heroi__img { transition: opacity 1.6s ease; }
.heroi__img[data-oculta] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .heroi__img { transition: none; } }

/* ------------------------------------------ secção 03: como cada vão abre -- */
.alcado-folha  { fill: var(--papel); stroke: var(--tinta); stroke-width: 2.5; }
.alcado-lamina { stroke: var(--tinta); stroke-width: 1.4; }
.alcado-rotulo { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .12em;
                 text-transform: uppercase; fill: var(--aco-t); opacity: 0; }
.anim-gira, .anim-bascula, .anim-corre, .anim-portada-e, .anim-portada-d, .anim-modulo, .anim-rot-abre, .anim-rot-bascula {
  animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45,0,.2,1); }
.anim-gira        { transform-origin: 36px 100px; transform-box: view-box; animation-name: vao-gira; }
.anim-bascula     { transform-origin: 100px 164px; transform-box: view-box; animation-name: vao-bascula; }
.anim-rot-abre    { animation-name: vao-rot-abre; }
.anim-rot-bascula { animation-name: vao-rot-bascula; }
.anim-corre       { animation-name: vao-corre; }
.anim-portada-e   { transform-origin: 10px 80px; transform-box: view-box; animation-name: vao-portada; }
.anim-portada-d   { transform-origin: 80px 80px; transform-box: view-box; animation-name: vao-portada; animation-delay: .6s; }
.anim-modulo      { animation-name: vao-modulo; animation-duration: 6s; }

/* abre de lado (10–40 %), pausa, bascula pelo topo (55–85 %) */
@keyframes vao-gira    { 0%,10%,42%,100% { transform: scaleX(1); } 24%,30% { transform: scaleX(.38); } }
@keyframes vao-bascula { 0%,55%,88%,100% { transform: scaleY(1) skewX(0); } 68%,76% { transform: scaleY(.84) skewX(-3deg); } }
@keyframes vao-rot-abre    { 0%,8%,44%,100% { opacity: 0; } 14%,38% { opacity: 1; } }
@keyframes vao-rot-bascula { 0%,53%,90%,100% { opacity: 0; } 59%,84% { opacity: 1; } }
@keyframes vao-corre   { 0%,12%,88%,100% { transform: translateX(0); } 40%,60% { transform: translateX(88px); } }
@keyframes vao-portada { 0%,12%,88%,100% { transform: scaleX(1); } 40%,60% { transform: scaleX(.16); } }
@keyframes vao-modulo  { 0%,100% { fill: rgba(58,124,165,.10); } 50% { fill: rgba(58,124,165,.32); } }

@media (prefers-reduced-motion: reduce) {
  .anim-gira, .anim-bascula, .anim-corre, .anim-portada-e, .anim-portada-d, .anim-modulo, .anim-rot-abre, .anim-rot-bascula { animation: none; }
  .anim-rot-abre { opacity: 1; }
}

/* ------------------------------------ famílias de vão: vídeo no cartão -- */
.vao__alcado--foto video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papel-2); }