@charset "utf-8";
/* =================================================================
   LAVANDARIA DA HERDADE
   Direcao de arte "Estendal": a fotografia conduz, o texto vive por
   cima dela. Ritmo obrigatorio e igual nas quatro paginas:
   ecra de foto, bloco creme, painel escuro, e repete. Nunca duas
   seccoes seguidas com o mesmo tratamento.

   Regras que nao se quebram:
   - cor de texto e de fundo definidas em par por seccao, nunca herdadas
   - conteudo visivel por omissao; a animacao so acrescenta movimento
   - nenhuma animacao de entrada passa dos 400 ms por elemento
   - opacidade baixa nao e efeito: texto vive sempre a 1
   - zero icones, zero emojis, zero ilustracoes
   ================================================================= */

/* ---------- 1. letra, servida do proprio site ---------- */
@font-face{font-family:"Newsreader";src:url("fontes/newsreader-normal-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Newsreader";src:url("fontes/newsreader-normal-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Newsreader";src:url("fontes/newsreader-italic-400-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Newsreader";src:url("fontes/newsreader-italic-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Figtree";src:url("fontes/figtree-normal-300-600-latin.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";src:url("fontes/figtree-normal-300-600-latin-ext.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 2. paleta, tirada do logotipo ---------- */
:root{
  --noite:#081509;        /* o verde quase preto do primeiro ecra, vindo da proposta C */
  --pinhal:#0F2A17;       /* verde escuro profundo, do aro */
  --pinhal-claro:#16391F;
  --aro:#255C2D;          /* verde do aro, so para texto sobre creme */
  --lima:#A9D13F;         /* verde claro da folha, so sobre escuro */
  --lima-clara:#C3E35E;
  --creme:#F4EEE0;
  --creme-fundo:#EBE2CE;
  --tinta:#1A1A16;
  --tinta-suave:#332F26;
  --tinta-fraca:#55503F;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --margem:clamp(20px,4vw,56px);
  --largura:1560px;
  --barra:64px;           /* altura da barra de informacao, o JS acerta ao real */
  --entrada:340ms;        /* nenhuma entrada passa dos 400 ms */
}

/* ---------- 3. base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--creme);color:var(--tinta);
     font-family:var(--sans);font-weight:350;font-size:17px;line-height:1.62;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
figure{margin:0;}
a{color:inherit;}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
::selection{background:var(--lima);color:var(--pinhal);}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;}

.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.saltar{position:absolute;left:var(--margem);top:-100px;z-index:200;
        background:var(--lima);color:var(--pinhal);padding:12px 20px;border-radius:999px;
        font-size:14px;font-weight:600;text-decoration:none;transition:top .18s ease;}
.saltar:focus{top:14px;}

/* =================================================================
   4. MOVIMENTO
   O conteudo esta visivel por omissao. A classe .js e que arma a
   entrada, e a entrada e so um deslocamento: nada fica a opacidade
   baixa, nem por um instante. 340 ms por elemento, escalonamento
   maximo de 120 ms.
   ================================================================= */
.sobe{transform:none;}
.js .sobe{transform:translate3d(0,22px,0);transition:transform var(--entrada) cubic-bezier(.22,.78,.3,1);}
.js .sobe.assente{transform:none;}
.js.tudo-assente .sobe{transform:none!important;transition:none!important;}
.js .sobe[data-espera="1"]{transition-delay:40ms;}
.js .sobe[data-espera="2"]{transition-delay:80ms;}
.js .sobe[data-espera="3"]{transition-delay:120ms;}

/* as fotografias assentam com um toque de escala, nunca com opacidade */
.js .foto-sobe img{transform:scale(1.045);transition:transform 400ms cubic-bezier(.22,.78,.3,1);}
.js .foto-sobe.assente img{transform:none;}
.js.tudo-assente .foto-sobe img{transform:none!important;transition:none!important;}

/* transicao entre paginas: um veu verde que limpa o ecra.
   E criado e destruido pelo JS, com prazo, por isso nunca fica preso. */
.veu{position:fixed;inset:0;z-index:300;background:var(--pinhal);pointer-events:none;
     transform:translateY(0);transition:transform 280ms cubic-bezier(.65,0,.2,1);}
/* a ordem importa: .fecha tem de vir depois de .pronta, senao o veu de
   saida fica em baixo do ecra e a transicao nao se ve */
.veu.abre{transform:translateY(-101%);}
.veu.pronta{transform:translateY(101%);}
.veu.pronta.fecha{transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .sobe,.js .sobe.assente,
  .js .foto-sobe img,.js .foto-sobe.assente img{transform:none!important;transition:none!important;}
  .veu{display:none!important;}
  .capa__foto,.faixa__foto{transform:none!important;}
  .js .barra{transition:none!important;}
  .accao,.topo,.marca img,.marca__nome em,.saltar,.mapa__convite,.navega a{transition:none!important;}
  .accao:hover{transform:none!important;}
}

/* =================================================================
   5. CABECALHO
   ================================================================= */
.topo{position:fixed;inset:0 0 auto 0;z-index:90;color:var(--creme);
      background:linear-gradient(to bottom,rgba(8,21,9,.94) 0%,rgba(8,21,9,.88) 56%,rgba(8,21,9,.58) 82%,rgba(8,21,9,0) 100%);
      transition:background .38s ease,color .38s ease,box-shadow .38s ease;}
.topo__caixa{max-width:var(--largura);margin:0 auto;padding:20px var(--margem);
      display:flex;align-items:center;gap:clamp(14px,3vw,44px);}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.marca img{width:40px;height:40px;object-fit:contain;flex:none;
      filter:brightness(0) saturate(100%) invert(96%) sepia(9%) saturate(387%) hue-rotate(4deg) brightness(103%) contrast(92%);
      transition:filter .38s ease;}
.marca__nome{font-family:var(--serif);font-size:19px;line-height:1.05;letter-spacing:.005em;}
.marca__nome em{display:block;font-size:12.5px;font-style:italic;color:#E5DECB;letter-spacing:.06em;
      transition:color .38s ease;}

.navega{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2vw,30px);}
.navega__ligacoes{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);}
.navega a{text-decoration:none;}
/* ATENCAO: estas regras sao so para as ligacoes, nunca para o botao. Quando
   eram `.navega a` tinham mais especificidade do que `.botao-topo` (0,1,1
   contra 0,1,0) e ganhavam: o botao ficava com padding 6px 0, o texto
   encostava ao bordo, e o `border-bottom:transparent` apagava o lado de
   baixo da moldura enquanto os outros tres ficavam visiveis. */
.navega__ligacoes a{font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
      padding:6px 0;border-bottom:1px solid transparent;transition:border-color .24s ease;}
.navega__ligacoes a:hover,.navega__ligacoes a:focus-visible{border-bottom-color:currentColor;}
.navega__ligacoes a[aria-current="page"]{border-bottom-color:var(--lima);color:var(--lima);}
/* o botao mede-se por dentro: line-height 1 mais padding simetrico, para o
   texto ficar mesmo ao centro da moldura em qualquer largura */
.botao-topo{display:inline-flex;align-items:center;justify-content:center;
      font-size:13.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;
      font-weight:500;text-decoration:none;white-space:nowrap;
      min-height:42px;padding:0 26px;border:1px solid currentColor;border-radius:999px;
      transition:background .24s ease,color .24s ease,border-color .24s ease;}
.topo a.botao-topo:hover{background:var(--lima);color:var(--pinhal);border-color:var(--lima);}

.topo.pousado{background:var(--creme);color:var(--tinta);box-shadow:0 1px 0 rgba(26,26,22,.16);}
.topo.pousado .marca img{filter:none;}
.topo.pousado .marca__nome em{color:var(--tinta-fraca);}
.topo.pousado .navega__ligacoes a[aria-current="page"]{border-bottom-color:var(--aro);color:var(--aro);}
.topo.pousado a.botao-topo:hover{background:var(--pinhal);color:var(--creme);border-color:var(--pinhal);}

/* menu do telemovel: <details>, por isso funciona sem JavaScript nenhum */
.menu{display:none;}
.menu__puxador{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
      justify-content:center;font-size:13px;line-height:1;letter-spacing:.14em;
      text-transform:uppercase;font-weight:500;white-space:nowrap;
      min-height:42px;padding:0 22px;border:1px solid currentColor;border-radius:999px;}
.menu__puxador::-webkit-details-marker{display:none;}
.menu__puxador .fechar{display:none;}
.menu[open] .menu__puxador .abrir{display:none;}
.menu[open] .menu__puxador .fechar{display:inline;}
/* Com o menu fechado o painel tem mesmo de sair da pagina. Um <details>
   fechado esconde o conteudo com content-visibility, que deixa a caixa
   medivel: o teste de contraste passava a medir estas ligacoes contra a
   fotografia que esta por tras. */
.menu:not([open]) .menu__painel{display:none;}
.menu__painel{position:fixed;left:0;right:0;top:0;padding:96px var(--margem) 36px;
      background:var(--pinhal);color:var(--creme);z-index:-1;
      border-bottom:1px solid rgba(244,238,224,.2);}
.menu__painel a{display:block;font-family:var(--serif);font-size:clamp(1.8rem,8vw,2.4rem);
      line-height:1.5;text-decoration:none;color:var(--creme);
      text-transform:uppercase;letter-spacing:.05em;
      border-bottom:1px solid rgba(244,238,224,.16);}
.menu__painel a:last-of-type{border-bottom:0;}
.menu__painel a[aria-current="page"]{color:var(--lima);}
.menu__contacto{margin-top:22px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#D8D1BE;}

@media (max-width:920px){
  .navega__ligacoes{display:none;}
  .menu{display:block;}
  .topo__caixa{padding:14px var(--margem);}
  .marca img{width:34px;height:34px;}
  .marca__nome{font-size:17px;}
  .marca__nome em{font-size:11px;}
  .botao-topo{min-height:38px;padding:0 20px;font-size:12.5px;}
  .menu__puxador{min-height:38px;padding:0 18px;}
}
@media (max-width:420px){
  .botao-topo{padding:0 16px;letter-spacing:.06em;}
  .menu__puxador{padding:0 14px;letter-spacing:.1em;}
}

/* =================================================================
   6. ECRA DE FOTO (capa)
   ================================================================= */
.capa{position:relative;background:var(--noite);color:var(--creme);
      display:flex;flex-direction:column;justify-content:flex-end;
      isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;}
.capa__foto{position:absolute;inset:-8% 0 -8% 0;z-index:0;}
.capa__foto img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;}
/* veu mais escuro, herdado da proposta C */
.capa__veu{position:absolute;inset:0;z-index:1;
      background:
        linear-gradient(to top,rgba(6,16,8,.95) 0%,rgba(6,16,8,.86) 26%,rgba(6,16,8,.52) 58%,rgba(6,16,8,.34) 100%),
        linear-gradient(to right,rgba(6,16,8,.78) 0%,rgba(6,16,8,.26) 62%,rgba(6,16,8,.40) 100%);}
.capa__dentro{position:relative;z-index:2;width:100%;max-width:var(--largura);margin:0 auto;
      padding:112px var(--margem) clamp(30px,4vw,52px);}
.js .capa__dentro{padding-bottom:calc(clamp(34px,5vw,64px) + var(--barra));}

.sobrenome{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#DCE8C4;
      display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,1.8vw,22px);}
.sobrenome::before{content:"";width:clamp(28px,5vw,74px);height:1px;background:var(--lima);flex:none;}
.titulao{font-family:var(--serif);font-weight:400;letter-spacing:-.022em;line-height:.94;
      font-size:clamp(2.9rem,8.2vw,8rem);max-width:15ch;color:#FFFCF4;
      text-shadow:0 2px 34px rgba(4,12,6,.55);}
.titulao em{font-style:italic;color:var(--lima);}
.capa__sub{margin-top:clamp(16px,2vw,26px);max-width:50ch;font-size:clamp(16px,1.2vw,18px);
      line-height:1.6;color:#EFE9DA;}

/* botoes */
.accoes{margin-top:clamp(20px,2.2vw,28px);display:flex;flex-wrap:wrap;gap:10px;}
.accao{display:inline-flex;align-items:center;justify-content:center;gap:10px;
      font-size:13.5px;line-height:1;letter-spacing:.08em;
      text-transform:uppercase;text-decoration:none;min-height:46px;padding:0 28px;border-radius:999px;
      transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease;}
.accao--cheia{background:var(--lima);color:#10220B;font-weight:600;}
.accao--cheia:hover{transform:translateY(-2px);background:var(--lima-clara);}
.accao--linha{border:1px solid rgba(244,238,224,.6);color:#F7F2E6;}
.accao--linha:hover{background:rgba(244,238,224,.14);transform:translateY(-2px);}
.accao--escura{background:var(--pinhal);color:#F7F2E6;font-weight:600;}
.accao--escura:hover{transform:translateY(-2px);background:var(--noite);}
.accao--escura-linha{border:1px solid rgba(26,26,22,.4);color:var(--tinta);}
.accao--escura-linha:hover{background:rgba(26,26,22,.07);transform:translateY(-2px);}

/* barra de informacao: sem JS fica no fim da capa, com JS fica presa ao
   fundo do ecra enquanto se esta na capa e recolhe quando se passa dela */
/* A BARRA VIVE FORA DO <main>, filha directa do <body>.
   Dentro da .capa ficava presa: a .capa tem isolation:isolate, que cria
   camada propria, e a .faixa seguinte, que tambem cria a sua, pintava por
   cima da barra por mais alto que fosse o z-index dela. Um elemento fixo
   ao nivel do body pinta acima de todas as seccoes (que ficam em z-index
   auto) e abaixo do cabecalho, que tem 90.
   Sem JavaScript nao ha aqui `position` nenhuma: fica STATIC, em fluxo
   normal, entre a ultima seccao e o rodape, sem tapar nada. */
.barra{z-index:70;background:var(--noite);color:#E3DCCB;
       border-top:1px solid rgba(244,238,224,.22);}
.js .barra{position:fixed;left:0;right:0;bottom:0;
       transition:transform 280ms cubic-bezier(.4,0,.2,1);}
.js .barra.recolhida{transform:translateY(101%);}
.barra ul{max-width:var(--largura);margin:0 auto;padding:16px var(--margem);
       display:flex;flex-wrap:wrap;gap:4px clamp(20px,4vw,56px);
       font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;}
.barra li{display:flex;align-items:center;gap:10px;}
.barra b{font-weight:600;color:var(--lima);letter-spacing:.1em;}
@media (max-width:760px){
  .barra ul{padding:12px var(--margem);font-size:11px;gap:3px 18px;}
  .barra li:nth-child(n+3){display:none;}
}
@media (prefers-reduced-motion:reduce){ .js .barra{transition:none;} }

/* =================================================================
   7. BLOCO CREME
   ================================================================= */
.creme{background:var(--creme);color:var(--tinta);
       padding:clamp(38px,4.4vw,70px) 0 clamp(34px,4vw,62px);}
.creme--fundo{background:var(--creme-fundo);color:var(--tinta);}
.caixa{max-width:var(--largura);margin:0 auto;padding:0 var(--margem);}

.rubrica{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
       display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,1.6vw,22px);}
.rubrica::before{content:"";width:clamp(24px,3vw,44px);height:1px;background:currentColor;flex:none;}
.creme .rubrica{color:var(--aro);}
.escuro .rubrica{color:var(--lima);}
.capa .rubrica{color:var(--lima);}

.titulo2{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.0;
       font-size:clamp(1.95rem,4.4vw,3.9rem);max-width:18ch;}
.titulo2 em{font-style:italic;}
.creme .titulo2{color:var(--pinhal);}
.creme .titulo2 em{color:var(--aro);}
.escuro .titulo2{color:#FDFAF1;}
.escuro .titulo2 em{color:var(--lima);}

.texto{margin-top:clamp(14px,1.6vw,20px);max-width:54ch;font-size:clamp(16px,1.1vw,17.5px);line-height:1.66;}
.creme .texto{color:var(--tinta-suave);}
.escuro .texto{color:#DED7C3;}
.texto + .texto{margin-top:12px;}

/* par de colunas: texto de um lado, fotografia que enche o outro */
.par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
     gap:clamp(26px,3.6vw,64px);align-items:stretch;}
.par--invertido{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);}
.par--invertido .par__texto{order:2;}
.par--invertido .par__foto{order:1;}
.par__texto{display:flex;flex-direction:column;justify-content:center;}

.par__foto{position:relative;display:flex;flex-direction:column;
     min-height:clamp(250px,29vw,410px);}
.par__foto picture{display:block;flex:1 1 auto;min-height:0;}
.par__foto img{width:100%;height:100%;min-height:clamp(250px,29vw,410px);
     object-fit:cover;object-position:50% 45%;}
.par__foto figcaption{position:absolute;left:0;bottom:0;margin:0;
     font-size:12px;letter-spacing:.14em;text-transform:uppercase;
     color:var(--creme);background:var(--pinhal);padding:10px 16px;}
/* a fotografia sangra para fora da margem, do lado de fora da pagina */
.par__foto--sangra-direita{margin-right:calc(var(--margem) * -1);}
.par__foto--sangra-esquerda{margin-left:calc(var(--margem) * -1);}
.par__foto--sangra-esquerda figcaption{left:auto;right:0;}
/* banda larga de fotografia dentro de um bloco, a toda a largura da caixa */
.par__foto--banda{min-height:0;margin-top:clamp(18px,2.2vw,30px);}
.par__foto--banda img{min-height:clamp(165px,19vw,260px);height:clamp(165px,19vw,260px);}
@media (max-width:900px){
  .par__foto--banda{margin-inline:calc(var(--margem) * -1);}
  .par__foto--banda img{min-height:clamp(170px,36vw,240px);height:clamp(170px,36vw,240px);}
}
.par__foto--marca::after{content:"";position:absolute;left:-14px;top:-14px;width:76px;height:76px;
     border-left:1px solid var(--aro);border-top:1px solid var(--aro);}
.escuro .par__foto--marca::after{border-color:var(--lima);}
.par__foto--sangra-esquerda.par__foto--marca::after{left:auto;right:-14px;
     border-left:0;border-right:1px solid var(--aro);}
.escuro .par__foto--sangra-esquerda.par__foto--marca::after{border-right-color:var(--lima);}

@media (max-width:900px){
  .par,.par--invertido{grid-template-columns:1fr;gap:clamp(28px,6vw,44px);}
  .par--invertido .par__texto,.par--invertido .par__foto{order:initial;}
  .par__foto{min-height:clamp(215px,46vw,300px);margin-inline:calc(var(--margem) * -1);}
  .par__foto img{min-height:clamp(215px,46vw,300px);}
  .par__foto figcaption{left:0;right:auto;}
  .par__foto--marca::after{display:none;}
}

/* lista numerada seca, o desenho e a tipografia */
.regua{margin-top:clamp(20px,2.2vw,30px);border-top:1px solid currentColor;max-width:54ch;}
.creme .regua{border-top-color:rgba(26,26,22,.22);}
.escuro .regua{border-top-color:rgba(244,238,224,.26);}
.regua li{padding:12px 0;font-size:15.5px;border-bottom:1px solid;}
.creme .regua li{border-bottom-color:rgba(26,26,22,.22);color:var(--tinta-suave);}
.escuro .regua li{border-bottom-color:rgba(244,238,224,.26);color:#DED7C3;}
.regua a{text-decoration:none;border-bottom:1px solid currentColor;}

/* =================================================================
   8. PAINEL ESCURO
   ================================================================= */
.escuro{background:var(--pinhal);color:var(--creme);
        padding:clamp(38px,4.4vw,70px) 0 clamp(34px,4vw,62px);}
.escuro--noite{background:var(--noite);color:var(--creme);}

/* =================================================================
   9. FAIXA DE FOTOGRAFIA A MEIA PAGINA, com o texto por cima
   ================================================================= */
.faixa{position:relative;isolation:isolate;overflow:hidden;
       background:var(--noite);color:var(--creme);
       display:flex;align-items:flex-end;min-height:clamp(310px,40vh,400px);}
.faixa__foto{position:absolute;inset:-7% 0 -7% 0;z-index:0;}
.faixa__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
.faixa__veu{position:absolute;inset:0;z-index:1;
       background:
         linear-gradient(to top,rgba(6,16,8,.95) 0%,rgba(6,16,8,.90) 46%,rgba(6,16,8,.72) 72%,rgba(6,16,8,.34) 92%,rgba(6,16,8,.24) 100%),
         linear-gradient(to right,rgba(6,16,8,.76) 0%,rgba(6,16,8,.22) 64%,rgba(6,16,8,.34) 100%);}
/* No telemovel a faixa e curta e o texto ocupa-a quase toda, por isso
   precisa de mais altura para sobrar fotografia por cima, e de um veu
   mais fechado por baixo. Sem isto a rubrica a verde claro caia para
   2,8:1 sobre as fotografias claras. */
@media (max-width:860px){
  .faixa{min-height:380px;}
  .faixa__veu{background:
       linear-gradient(to top,rgba(6,16,8,.96) 0%,rgba(6,16,8,.94) 56%,rgba(6,16,8,.80) 78%,rgba(6,16,8,.40) 94%,rgba(6,16,8,.26) 100%);}
}
.faixa__dentro{position:relative;z-index:2;width:100%;max-width:var(--largura);margin:0 auto;
       padding:clamp(50px,6.2vw,80px) var(--margem) clamp(28px,3.2vw,44px);}
.faixa .titulo2{color:#FDFAF1;}
.faixa .titulo2 em{color:var(--lima);}
.faixa .texto{color:#E7E1D1;}
.faixa .rubrica,.faixa .rubrica span{color:var(--lima);}

/* =================================================================
   10. GRELHA DOS SEIS SERVICOS
   ================================================================= */
.grelha{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
        border-top:1px solid;}
.creme .grelha,.creme .grelha li{border-color:rgba(26,26,22,.22);}
.escuro .grelha,.escuro .grelha li{border-color:rgba(244,238,224,.26);}
.grelha li{border-bottom:1px solid;border-right:1px solid;
        padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,32px) clamp(24px,2.6vw,38px);
        padding-left:0;}
.grelha li:nth-child(3n){border-right:0;}
.grelha li:not(:nth-child(3n+1)){padding-left:clamp(18px,2vw,32px);}
.grelha .n{font-family:var(--serif);font-size:clamp(2.3rem,3.4vw,3.4rem);line-height:.8;
        display:block;margin-bottom:16px;}
.creme .grelha .n{color:var(--aro);}
.escuro .grelha .n{color:var(--lima);}
.grelha h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.85rem);line-height:1.12;}
.creme .grelha h3{color:var(--pinhal);}
.escuro .grelha h3{color:#FDFAF1;}
.grelha p{margin-top:10px;font-size:14.5px;line-height:1.6;max-width:32ch;}
.creme .grelha p{color:var(--tinta-suave);}
.escuro .grelha p{color:#DCD4BF;}
.selo{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;
        text-transform:uppercase;font-weight:600;padding:5px 10px;
        background:var(--lima);color:#10220B;}
@media (max-width:920px){
  .grelha{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grelha li:nth-child(3n){border-right:1px solid;}
  .grelha li:nth-child(2n){border-right:0;}
  .grelha li{padding-left:0;}
  .grelha li:not(:nth-child(2n+1)){padding-left:clamp(18px,4vw,32px);}
}
@media (max-width:600px){
  .grelha{grid-template-columns:1fr;}
  .grelha li,.grelha li:nth-child(3n),.grelha li:nth-child(2n){border-right:0;padding-left:0;}
  .grelha li:not(:nth-child(2n+1)){padding-left:0;}
}

/* =================================================================
   10b. "HOJE NA LAVANDARIA"
   A unica seccao que muda sozinha. Tudo calculado no browser a partir
   da data e da hora, sem servidor e sem pedidos para fora.
   Sem JavaScript aparecem os sete conselhos e as quatro notas de
   estacao, que continua a ser conteudo util e correcto: o JS so
   esconde os que nao sao de hoje. O estado da loja tem, em HTML, o
   horario completo como resposta de omissao.
   ================================================================= */
.hoje__estado{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
      margin-top:clamp(16px,1.8vw,24px);padding-bottom:clamp(16px,1.8vw,24px);
      border-bottom:1px solid rgba(244,238,224,.26);}
.hoje__selo{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;
      letter-spacing:-.015em;color:var(--lima);}
.hoje__selo--fechada{color:#EFE9DA;}
.hoje__quando{font-size:clamp(15.5px,1.1vw,17px);line-height:1.5;color:#DED7C3;max-width:40ch;}

.hoje__parte{margin-top:clamp(13px,1.5vw,19px);}
.hoje__parte h3{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
      color:var(--lima);margin-bottom:8px;}
.hoje__parte p,.hoje__parte li{font-size:15.5px;line-height:1.62;color:#DED7C3;max-width:46ch;}
.hoje__parte ul li + li{margin-top:8px;}
.hoje__parte li b{display:block;font-weight:500;color:#F4EEE0;letter-spacing:.01em;}

/* =================================================================
   11. PASSOS, TABELA DE HORARIO, CONTACTOS
   ================================================================= */
.passos{margin-top:clamp(26px,3vw,42px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
        gap:clamp(20px,2.4vw,40px);}
.passo{padding-top:20px;border-top:1px solid;}
.creme .passo{border-top-color:rgba(26,26,22,.22);}
.escuro .passo{border-top-color:rgba(244,238,224,.26);}
.passo h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.1;}
.creme .passo h3{color:var(--pinhal);}
.escuro .passo h3{color:#FDFAF1;}
.passo p{margin-top:10px;font-size:15.5px;line-height:1.6;max-width:34ch;}
.creme .passo p{color:var(--tinta-suave);}
.escuro .passo p{color:#DCD4BF;}
@media (max-width:820px){.passos{grid-template-columns:1fr;gap:clamp(22px,5vw,34px);}}

.horario{margin-top:clamp(18px,2vw,26px);width:100%;border-collapse:collapse;max-width:44ch;}
.horario th,.horario td{text-align:left;padding:8px 0;border-bottom:1px solid;font-size:15.5px;
        font-weight:350;}
.horario th{font-weight:500;padding-right:20px;}
.horario td{text-align:right;}
.escuro .horario th,.escuro .horario td{border-bottom-color:rgba(244,238,224,.26);color:#DED7C3;}
.escuro .horario th{color:#F4EEE0;}
.creme .horario th,.creme .horario td{border-bottom-color:rgba(26,26,22,.22);color:var(--tinta-suave);}
.creme .horario th{color:var(--tinta);}
.horario tr:last-child th,.horario tr:last-child td{border-bottom:0;}
.horario .fechado{letter-spacing:.1em;text-transform:uppercase;font-size:13px;}
.escuro .horario .fechado{color:var(--lima);}
.creme .horario .fechado{color:var(--aro);}

.ficha{margin-top:clamp(18px,2vw,28px);display:grid;gap:clamp(16px,1.8vw,24px);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));max-width:70ch;}
.ficha dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;}
.ficha dd{font-size:16px;line-height:1.6;overflow-wrap:anywhere;}
.ficha a{text-decoration:none;border-bottom:1px solid currentColor;}
.escuro .ficha dt{color:var(--lima);}
.escuro .ficha dd{color:#E7E1D1;}
.creme .ficha dt{color:var(--aro);}
.creme .ficha dd{color:var(--tinta-suave);}

/* a rubrica quando abre um segundo assunto dentro do mesmo bloco */
.rubrica--afastada{margin-top:clamp(34px,4vw,56px);}

/* mapa, so depois de clique: nenhum pedido para fora antes disso */
.mapa{margin-top:clamp(20px,2.2vw,30px);}
.mapa__convite{width:100%;border:1px solid rgba(26,26,22,.24);background:var(--creme-fundo);
       color:var(--tinta);padding:clamp(20px,3vw,32px);text-align:left;cursor:pointer;
       font-family:inherit;font-size:16px;line-height:1.6;
       transition:background .24s ease,border-color .24s ease;}
.mapa__convite:hover{background:#E3D9C0;border-color:rgba(26,26,22,.44);}
.mapa__convite strong{display:block;font-family:var(--serif);font-weight:400;
       font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.1;color:var(--pinhal);margin-bottom:10px;}
.mapa__convite span{color:var(--tinta-suave);}
.mapa iframe{display:block;width:100%;height:clamp(300px,36vw,420px);border:0;}

/* =================================================================
   12. RODAPE
   ================================================================= */
.rodape{background:var(--noite);color:#DED7C3;padding:clamp(34px,3.8vw,54px) 0 20px;}
.rodape__cima{display:grid;gap:clamp(22px,3vw,44px);
       grid-template-columns:minmax(0,1.3fr) repeat(auto-fit,minmax(min(100%,180px),1fr));}
.rodape__marca{display:flex;flex-direction:column;gap:16px;}
.rodape__marca img{width:118px;height:auto;
       filter:brightness(0) saturate(100%) invert(96%) sepia(9%) saturate(387%) hue-rotate(4deg) brightness(103%) contrast(92%);}
.rodape__marca p{max-width:34ch;font-size:15px;line-height:1.66;color:#C9C2AE;}
.rodape h2{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lima);
       margin-bottom:14px;}
.rodape li{margin-bottom:7px;font-size:15px;line-height:1.5;}
.rodape a{text-decoration:none;color:#E7E1D1;border-bottom:1px solid transparent;
       transition:border-color .2s ease;}
.rodape a:hover{border-bottom-color:currentColor;}
.rodape__baixo{margin-top:clamp(28px,3.2vw,44px);padding-top:18px;
       border-top:1px solid rgba(244,238,224,.2);
       display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;
       font-size:12.5px;letter-spacing:.08em;color:#B7B0A0;}
.rodape__baixo a{color:#D6CFBC;}