/* Farmácia Aurora — demo MeriForm.
   Direcção escolhida: hero A (escuro, cena 3D à largura toda) com as secções
   "Vitrine" — o escuro do hero continua sem degrau até ao fim, e a única banda
   clara é a das escalas de serviço, de propósito: é a informação que alguém
   abre o site às 22h para encontrar e tem de saltar à vista. */

:root{
  --verde:#0f5c4a;
  --verde-claro:#3fb391;
  --verde-fundo:#072e26;
  --menta:#d8f0e7;
  --creme:#fbf7f0;
  --tinta:#16211e;
  --sombra-texto:rgba(255,255,255,.68);
  --filete:rgba(255,255,255,.14);
  --fonte:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-titulo:'Fraunces',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fonte);background:var(--verde-fundo);color:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}

/* Largura de leitura. 1120px deixava um terço do ecrã vazio num monitor
   grande, com o texto encolhido a meio — os limites de leitura de cada
   parágrafo estão em `em` mais abaixo, por isso a caixa pode ser larga sem
   esticar as linhas. */
.caixa{max-width:1560px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}

.demo-bar{background:var(--tinta);color:#fff;font-size:.82rem;text-align:center;padding:9px 16px}
.demo-bar strong{color:var(--verde-claro)}

/* ── Topo ─────────────────────────────────────────────────────────────────
   Escuro e translúcido, porque agora tudo por baixo dele é escuro. */
/* O fundo atravessa o ecrã todo, mas o conteúdo alinha-se com a `.caixa`:
   o `max()` faz a margem crescer até centrar nos mesmos 1560px. Sem isto o
   logótipo ficava encostado à borda e o título começava a meio do ecrã. */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:22px;
  padding-block:14px;
  padding-inline:max(clamp(20px,5vw,80px), calc((100% - 1560px) / 2));
  background:rgba(7,46,38,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--filete)}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--fonte-titulo);font-size:1.3rem;font-weight:400;text-decoration:none;color:#fff}
.marca strong{font-weight:600}
.cruz{position:relative;width:20px;height:20px;flex:none}
.cruz::before,.cruz::after{content:"";position:absolute;background:var(--verde-claro);border-radius:2px}
.cruz::before{left:7px;top:0;width:6px;height:20px}
.cruz::after{top:7px;left:0;height:6px;width:20px}
.menu{display:flex;gap:24px;margin-left:auto;font-size:.95rem;font-weight:500}
.menu a{text-decoration:none;color:rgba(255,255,255,.72)}
.menu a:hover{color:var(--verde-claro)}
/* PT / EN — o mesmo CSS serve as duas versões (/ e /en) */
.lingua{display:flex;gap:2px;font-size:.78rem;font-weight:600;letter-spacing:.06em}
.lingua a{padding:6px 7px;border-radius:6px;text-decoration:none;color:rgba(255,255,255,.6)}
.lingua a:hover{color:#fff}
.lingua a[aria-current]{color:#fff;background:rgba(255,255,255,.12)}
@media(max-width:860px){.menu{display:none}.lingua{margin-left:auto}}
/* Sem o menu, sobram a marca e o botao — que a 390px nao cabiam lado a lado
   e empurravam o botao para fora do ecra. */
@media(max-width:560px){
  .topo{gap:12px;padding-inline:16px}
  .marca{font-size:1.06rem;gap:8px}
  .cruz{width:17px;height:17px}
  .cruz::before{left:5.5px;width:6px;height:17px}
  .cruz::after{top:5.5px;height:6px;width:17px}
  .topo .btn{padding:11px 16px;font-size:.87rem}
}
/* Com o seletor PT/EN, marca + idioma + botão já não cabem num telemóvel
   (a página ficava com 406px num ecrã de 390). O botão sai: o hero tem dois
   logo a seguir, e o WhatsApp está nos contactos. */
@media(max-width:440px){.topo .btn{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.btn-solido{background:var(--verde);color:#fff;box-shadow:0 8px 22px rgba(15,92,74,.4)}
.btn-solido:hover{background:#14735c}
.btn-linha{border:1.5px solid rgba(255,255,255,.42);color:#fff}
.btn-linha:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-claro{background:var(--verde-claro);color:var(--verde-fundo);box-shadow:0 10px 26px rgba(63,179,145,.26)}

/* ── Hero 3D ──────────────────────────────────────────────────────────────
   O gradiente é o fallback: sem WebGL o canvas fica transparente e é isto que
   se vê. Nunca há ecrã vazio. */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(1100px 620px at 72% 18%,#12705a,transparent 62%),
             radial-gradient(900px 600px at 10% 90%,#0a3d32,transparent 58%),
             var(--verde-fundo)}
#cena{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* Véu sobre a cena, por baixo do texto. A cena já não põe peças à frente do
   título (ver `afastarDoTexto` no script), mas as do fundo continuam lá e
   branco sobre branco nunca se lê bem. Só escurece o lado do texto: a direita
   fica aberta, que é onde a cena tem de impressionar. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(7,46,38,.58) 0%, rgba(7,46,38,.34) 22%,
    rgba(7,46,38,.09) 41%, transparent 55%)}
/* No telemóvel o texto ocupa a largura toda, por isso o véu é de cima para
   baixo e mais cerrado na faixa onde o texto está. */
@media(max-width:820px){
  .hero::before{background:linear-gradient(178deg,
    rgba(7,46,38,.24) 0%, rgba(7,46,38,.66) 22%,
    rgba(7,46,38,.68) 76%, rgba(7,46,38,.28) 100%)}
}
.hero-conteudo{position:relative;z-index:2;width:100%;max-width:1560px;margin:0 auto;
  padding:clamp(56px,10vw,120px) clamp(20px,5vw,80px)}
.sobretitulo{text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.76rem,.9vw,.92rem);font-weight:600;color:var(--verde-claro);margin-bottom:20px}
/* O tecto sobe até 6.4rem: a 4.6rem o título parava de crescer e ficava
   pequeno num monitor grande, que é onde este demo é mostrado. */
.hero h1{font-family:var(--fonte-titulo);font-weight:500;font-size:clamp(2.6rem,6.4vw,7.6rem);
  line-height:1.03;letter-spacing:-.024em;text-wrap:balance;max-width:14em}
.lead{margin:30px 0 38px;font-size:clamp(1rem,1.3vw,1.45rem);color:rgba(255,255,255,.82);max-width:32em}
.hero-accoes{display:flex;gap:13px;flex-wrap:wrap}
.hero-nota{margin-top:30px;font-size:.92rem;color:rgba(255,255,255,.74);display:flex;align-items:center;gap:10px}
.ponto{width:9px;height:9px;border-radius:50%;background:var(--verde-claro);box-shadow:0 0 0 4px rgba(63,179,145,.22)}
@media(prefers-reduced-motion:no-preference){.ponto{animation:pulsa 2.4s ease-out infinite}}
@keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(63,179,145,.5)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-rodape{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ── Declaração ───────────────────────────────────────────────────────── */
.declaracao{padding:clamp(72px,11vw,130px) 0 clamp(56px,8vw,100px)}
.afirmacao{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(2rem,4.6vw,5rem);
  line-height:1.06;letter-spacing:-.028em;max-width:15em;text-wrap:pretty}
.numeros{display:flex;flex-wrap:wrap;gap:clamp(32px,6vw,72px);margin-top:clamp(40px,6vw,64px);
  padding-top:40px;border-top:1px solid var(--filete)}
.numero{display:flex;flex-direction:column;gap:6px}
.n{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(2.1rem,3.4vw,3.4rem);color:var(--verde-claro);line-height:1}
.n-legenda{font-size:.84rem;color:rgba(255,255,255,.6)}

/* ── Serviços ─────────────────────────────────────────────────────────────
   Tipografia grande sobre escuro, separada por filetes — não cartões. */
.servicos{padding:0 0 clamp(72px,10vw,120px)}
.etiqueta{text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;font-weight:600;color:var(--verde-claro)}
.lista{margin-top:32px}
.linha{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);
  padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--filete);align-items:baseline}
.linha:last-child{border-bottom:1px solid var(--filete)}
.linha h2{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(1.4rem,2.4vw,2.6rem);
  letter-spacing:-.02em;line-height:1.14}
.linha p{color:var(--sombra-texto);font-size:.97rem;line-height:1.75}
@media(max-width:760px){.linha{grid-template-columns:1fr;gap:12px}}

/* ── Escalas — a única banda clara ────────────────────────────────────── */
.escalas{padding:clamp(64px,9vw,104px) 0;background:var(--menta);color:var(--verde-fundo)}
.escalas-topo{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.escalas h2{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(1.9rem,3.6vw,3.6rem);letter-spacing:-.025em}
.semana{font-size:.9rem;color:var(--verde)}
.semana-grelha{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  margin-top:clamp(28px,4vw,42px);border-left:1px solid rgba(15,92,74,.18)}
.dia{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.4vw,26px) 14px;
  border-right:1px solid rgba(15,92,74,.18)}
.dia-nome{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--verde)}
.dia-quem{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(.95rem,1.5vw,1.2rem);color:rgba(7,46,38,.55)}
.dia-nosso{background:var(--verde)}
.dia-nosso .dia-nome{color:var(--verde-claro)}
.dia-nosso .dia-quem{color:#fff}
.escalas-nota{margin-top:26px;font-size:.94rem;color:var(--verde)}
@media(max-width:720px){
  .semana-grelha{grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;gap:1px;background:rgba(15,92,74,.18);border:1px solid rgba(15,92,74,.18)}
  .dia{border-right:0;background:var(--menta)}
  .dia-nosso{background:var(--verde)}
  /* São sete dias em duas colunas: a oitava célula ficava a mostrar o fundo
     que desenha os filetes e lia-se como um dia sem nome. */
  .semana-grelha::after{content:"";background:var(--menta)}
}

/* ── Citação ──────────────────────────────────────────────────────────── */
.citacao{padding:clamp(72px,11vw,130px) 0}
.citacao blockquote{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(1.6rem,3.2vw,3.2rem);
  line-height:1.24;letter-spacing:-.022em;max-width:22em;text-wrap:pretty}
.assinatura{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:.9rem;color:rgba(255,255,255,.62)}
.filete{width:44px;height:1px;background:var(--verde-claro);flex:none}

/* ── Contactos ────────────────────────────────────────────────────────── */
.contactos{padding:0 0 clamp(72px,10vw,120px)}
.contactos-grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(28px,4vw,48px);padding-top:44px;border-top:1px solid var(--filete)}
.contactos .etiqueta{margin-bottom:12px;display:block}
.valor{font-size:1rem;color:rgba(255,255,255,.86);line-height:1.8}
.valor a{color:#fff;text-decoration:none}
.valor a:hover{color:var(--verde-claro)}
.contactos .btn{margin-top:20px}

.rodape{padding:32px clamp(20px,5vw,48px);text-align:center;font-size:.86rem;
  color:rgba(255,255,255,.55);border-top:1px solid var(--filete)}
.rodape-demo{margin-top:8px;font-size:.82rem}
.rodape-demo a{color:var(--verde-claro);font-weight:600;text-decoration:none}