/* =====================================================================
   Goblin Tower — fan-site (pt-PT) · manuscrito CSS
   Base: "Ashton Bespoke" — pergaminho + tinta-pedra + nota bordô.
   Direção: monografia impressa / cantaria medieval. Plano, sem glow.
   ===================================================================== */

/* ---------- Tokens · mundo do goblin (quente, vivo) ---------- */
:root{
  --parchment:#f6edd6;      /* creme quente — canvas dominante */
  --parchment-2:#efe1c1;    /* faixa creme mais funda */
  --ink:#2d2013;            /* castanho torrado — texto e molduras */
  --ink-70:rgba(45,32,19,.70);
  --ink-45:rgba(45,32,19,.46);
  --ink-16:rgba(45,32,19,.18);
  --ink-10:rgba(45,32,19,.10);

  /* cores reais do jogo */
  --green:#6f9c3c;          /* verde goblin */
  --green-bright:#8ec54a;   /* verde vivo (destaques, botão) */
  --green-deep:#42602a;     /* verde floresta profundo */
  --green-soft:#e6ecc9;     /* verde-creme para faixas suaves */
  --red:#c23b2e;            /* vermelho do toldo */
  --red-deep:#8f2a22;
  --cream:#f3e7c9;          /* creme do toldo */
  --torch:#e8912d;          /* âmbar de tocha */
  --torch-soft:#f6c063;
  --wood:#7c4a27;           /* madeira da torre */
  --wood-dark:#573521;      /* madeira escura */

  --wine:#5a2f16;           /* faixas escuras + rodapé (madeira torrada) */
  --wine-2:#6d3a1c;
  --wine-line:rgba(243,231,201,.16);
  --white:#ffffff;
  --paper-shade:#fdf8ea;    /* branco morno para cartões */

  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --edge:clamp(18px, 5.2vw, 92px);   /* margem lateral resiliente */
  --stack:clamp(64px, 9vw, 128px);   /* ritmo vertical entre secções */

  --hair:1px solid var(--ink);
  --hair-soft:1px solid var(--ink-16);

  /* motivo de toldo às riscas (vermelho + creme) */
  --awning-stripe:repeating-linear-gradient(45deg,var(--red) 0 18px,var(--cream) 18px 36px);
}

/* ---------- Reset enxuto ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.08;overflow-wrap:break-word}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
::selection{background:var(--wine);color:var(--parchment)}

/* ---------- Utilidades tipográficas ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-70);
}
.eyebrow--light{color:rgba(224,222,216,.72)}
.serif-track{letter-spacing:.03em}
.measure{max-width:64ch}
.wine-word{color:var(--wine);font-style:italic}

/* ===================================================================
   Cabeçalho / navegação
   =================================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  background:var(--parchment);
  border-bottom:var(--hair-soft);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:14px var(--edge);
}
.brand{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink);
}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{
  font-family:var(--serif);font-weight:700;font-size:1.18rem;
  letter-spacing:.10em;text-transform:uppercase;
}
.brand__name b{color:var(--wine)}
.nav__links{
  display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);
  list-style:none;margin:0;padding:0;
}
.nav__links a{
  text-decoration:none;
  font-size:.86rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-70);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{
  color:var(--ink);border-bottom-color:var(--ink);
}
.nav__cta{
  text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--parchment);background:var(--wine);
  padding:11px 20px;border:1px solid var(--wine);border-radius:4px;
  transition:background .18s ease,color .18s ease;
}
.nav__cta:hover{background:transparent;color:var(--wine)}

.burger{
  display:none;
  width:44px;height:40px;background:transparent;border:var(--hair-soft);border-radius:4px;
  padding:0;position:relative;
}
.burger span{
  position:absolute;left:11px;right:11px;height:1.6px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mobile-nav{
  display:none;
  border-bottom:var(--hair-soft);
  background:var(--parchment);
  padding:6px var(--edge) 20px;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;text-decoration:none;
  padding:12px 2px;border-bottom:var(--hair-soft);
  font-size:.94rem;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--ink);
}
.mobile-nav a:last-child{border-bottom:0}

@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
}

/* ===================================================================
   Hero
   =================================================================== */
.hero{
  position:relative;
  padding:clamp(46px,7vw,96px) var(--edge) clamp(40px,6vw,80px);
  border-bottom:var(--hair);
  overflow:hidden;
}
.hero__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);
  align-items:center;
}
.hero__eyebrow{margin-bottom:22px}
.hero h1{
  font-size:clamp(2.5rem,6.4vw,4.9rem);
  font-weight:700;letter-spacing:.005em;line-height:1.02;
  margin-bottom:26px;
}
.hero h1 em{font-style:italic;color:var(--wine)}
.hero__lead{
  font-size:clamp(1.06rem,1.7vw,1.32rem);
  line-height:1.55;color:var(--ink);max-width:52ch;margin-bottom:16px;
}
.hero__note{
  font-size:.92rem;color:var(--ink-70);max-width:48ch;
  padding-left:16px;border-left:2px solid var(--wine);margin-bottom:34px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}
.hero__scene{
  position:relative;align-self:stretch;
  min-height:340px;
  border:var(--hair);
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,var(--ink-10) 38px 39px),
    var(--paper-shade);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.hero__scene .tower-art{width:100%;height:100%;object-fit:contain}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin-top:26px;padding-top:20px;border-top:var(--hair-soft);
}
.hero__meta span{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
  display:inline-flex;align-items:center;gap:9px;
}
.hero__meta svg{width:15px;height:15px;color:var(--wine)}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:32px}
  .hero__scene{min-height:300px;order:-1}
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:.86rem;
  letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;border-radius:4px;
  padding:14px 26px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn svg{width:16px;height:16px}
.btn--primary{background:var(--wine);border-color:var(--wine);color:var(--parchment)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--parchment)}
.btn--ghost:hover{background:var(--ink);color:var(--parchment)}
.btn--onwine{border-color:rgba(224,222,216,.5);color:var(--parchment)}
.btn--onwine:hover{background:var(--parchment);color:var(--wine);border-color:var(--parchment)}
.btn--block{width:100%;justify-content:center}

/* ===================================================================
   Secção genérica
   =================================================================== */
.section{padding:var(--stack) var(--edge)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.section--wine{background:var(--wine);color:var(--parchment)}
.section--wine h2,.section--wine h3{color:var(--parchment)}
.section--paper{background:var(--parchment-2)}
.section__label{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.section__label::after{content:"";height:1px;flex:1;background:var(--ink-16)}
.section--wine .section__label::after{background:var(--wine-line)}
.section__head{max-width:70ch;margin-bottom:clamp(34px,4vw,56px)}
.section__head h2{
  font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:.012em;line-height:1.06;
}
.section__head p{margin-top:18px;font-size:1.05rem;color:var(--ink-70);max-width:62ch}
.section--wine .section__head p{color:rgba(224,222,216,.78)}

/* ===================================================================
   Moldura do jogo (click-to-play)
   =================================================================== */
.play{padding:0 var(--edge) var(--stack)}
.play__frame{
  border:var(--hair);
  background:var(--paper-shade);
  position:relative;
  box-shadow:10px 12px 0 var(--ink-10);
}
/* toldo real do jogo a coroar a janela — o tecido às riscas da própria torre */
.play__awning{
  height:clamp(30px,5vw,54px);
  background:url(../img/awning.webp) center bottom/auto 200% no-repeat,var(--wine);
  background-size:cover;
  border-bottom:var(--hair);
  filter:saturate(.96);
}
.play__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,2.4vw,28px);
  border-bottom:var(--hair);
  background:var(--parchment);
}
.play__bar-title{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.06em;
}
.play__dot{width:9px;height:9px;border-radius:50%;background:var(--wine);flex:none;
  box-shadow:0 0 0 4px rgba(56,20,27,.14)}
.play__bar-note{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);
}
.play__stage{
  position:relative;width:100%;aspect-ratio:16/10;
  background:#5a3a24;
  overflow:hidden;
}
@media (min-width:1100px){ .play__stage{aspect-ratio:16/9} }
/* pré-visualização real: o tabuleiro do jogo à espera por baixo do botão */
.play__preview{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 6%;
  filter:saturate(.94);
}
.play.is-live .play__preview{display:none}

.play__poster{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;text-align:center;padding:clamp(24px,4vw,56px);
  border:0;width:100%;
  /* véu de pergaminho para o texto ler bem sobre o tabuleiro real */
  background:
    radial-gradient(130% 112% at 50% 44%, rgba(232,230,223,.50), rgba(226,224,217,.86) 80%),
    linear-gradient(0deg, rgba(56,20,27,.08), rgba(56,20,27,.08));
  backdrop-filter:saturate(1.02);
}
.play__disc{
  width:clamp(66px,8vw,84px);height:clamp(66px,8vw,84px);border-radius:50%;
  display:grid;place-items:center;
  background:var(--wine);color:var(--parchment);
  box-shadow:0 0 0 6px rgba(56,20,27,.12),0 10px 26px rgba(38,38,38,.22);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease;
}
.play__disc svg{width:34%;height:34%;margin-left:3px;fill:currentColor}
.play__poster:hover .play__disc{transform:scale(1.06);box-shadow:0 0 0 8px rgba(56,20,27,.14),0 14px 30px rgba(38,38,38,.26)}
.play__poster h3{
  font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:.02em;
}
.play__poster p{max-width:46ch;color:var(--ink-70);font-size:.98rem}
.play__poster .play__cue{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
  display:flex;align-items:center;gap:8px;
}
.play__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0e0b0c}

.play__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  padding:14px clamp(16px,2.4vw,28px);
  border-top:var(--hair);background:var(--parchment);
}
.play__foot p{font-size:.82rem;color:var(--ink-70);max-width:60ch}
.play__replay{
  display:none;align-items:center;gap:9px;
  background:transparent;border:1px solid var(--ink);border-radius:4px;
  padding:9px 16px;font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.play__replay.show{display:inline-flex}
.play__replay:hover{background:var(--ink);color:var(--parchment)}
.play.is-live .play__poster{display:none}

/* ===================================================================
   Como se joga — os andares da torre
   =================================================================== */
.floors{counter-reset:floor;display:grid;gap:0;border-top:var(--hair)}
.floor{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,44px);
  align-items:center;
  padding:clamp(26px,3.4vw,42px) 0;
  border-bottom:var(--hair-soft);
}
.floor__no{
  counter-increment:floor;
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(2rem,5vw,3.4rem);color:var(--wine);
  line-height:1;min-width:2.2ch;text-align:right;
}
.floor__no::before{content:counter(floor,decimal-leading-zero)}
.floor__body h3{font-size:clamp(1.15rem,1.9vw,1.42rem);letter-spacing:.02em;margin-bottom:8px}
.floor__body p{color:var(--ink-70);max-width:56ch;font-size:.98rem}
.floor__tag{
  justify-self:end;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-45);border:var(--hair-soft);border-radius:4px;padding:6px 12px;white-space:nowrap;
}
@media (max-width:640px){
  .floor{grid-template-columns:auto 1fr;gap:16px}
  .floor__tag{grid-column:2;justify-self:start;margin-top:4px}
}

/* ===================================================================
   Cartões brancos (destaques / valores)
   =================================================================== */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
}
.card{
  background:var(--white);border:var(--hair-soft);
  padding:clamp(22px,2.6vw,32px);
}
.card--wide{grid-column:span 2}
.card__ic{width:38px;height:38px;color:var(--wine);margin-bottom:18px}
.card h3{font-size:1.22rem;letter-spacing:.02em;margin-bottom:10px}
.card p{color:var(--ink-70);font-size:.96rem}
@media (max-width:860px){
  .cards{grid-template-columns:1fr}
  .card--wide{grid-column:auto}
}

/* ===================================================================
   Torre de números / factos (sem dinheiro)
   =================================================================== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:var(--hair)}
.fact{padding:clamp(22px,2.6vw,34px);border-right:var(--hair-soft)}
.fact:last-child{border-right:0}
.fact b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);
  letter-spacing:.02em;color:var(--ink);line-height:1}
.fact span{display:block;margin-top:10px;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-70)}
@media (max-width:760px){
  .facts{grid-template-columns:1fr 1fr}
  .fact{border-bottom:var(--hair-soft)}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-last-child(-n+2){border-bottom:0}
}
/* factos sobre a faixa bordô */
.section--wine .facts{border-color:var(--wine-line)}
.section--wine .fact{border-right-color:var(--wine-line)}
.section--wine .fact b{color:var(--parchment)}
.section--wine .fact span{color:rgba(224,222,216,.72)}
@media (max-width:760px){
  .section--wine .fact{border-bottom-color:var(--wine-line)}
}

/* ===================================================================
   FAQ
   =================================================================== */
.faq{border-top:var(--hair)}
.faq__item{border-bottom:var(--hair-soft)}
.faq__q{
  width:100%;text-align:left;background:transparent;border:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:22px;
  padding:clamp(20px,2.4vw,28px) 0;
  font-family:var(--serif);font-weight:600;font-size:clamp(1.08rem,1.8vw,1.32rem);
  letter-spacing:.01em;color:var(--ink);
}
.faq__q .sign{font-family:var(--sans);font-size:1.4rem;color:var(--wine);flex:none;line-height:1;transition:transform .2s ease}
.faq__q[aria-expanded="true"] .sign{transform:rotate(45deg)}
.faq__panel{overflow:hidden;max-height:0;transition:max-height .28s ease}
.faq__panel-inner{padding:0 0 clamp(20px,2.4vw,28px);color:var(--ink-70);max-width:66ch}
.faq__panel-inner p+p{margin-top:12px}

/* ===================================================================
   Faixa CTA (bordô)
   =================================================================== */
.band-cta{
  background:var(--wine);color:var(--parchment);
  padding:var(--stack) var(--edge);text-align:center;
}
.band-cta h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:.02em;max-width:20ch;margin:0 auto 18px}
.band-cta p{color:rgba(224,222,216,.78);max-width:52ch;margin:0 auto 30px}
.band-cta .btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ===================================================================
   Formulário (contactos)
   =================================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:860px){.form-grid{grid-template-columns:1fr;gap:36px}}
.field{margin-bottom:22px}
.field label{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-70);margin-bottom:9px;
}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);
  background:var(--white);border:var(--hair);border-radius:4px;
  padding:13px 15px;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--wine);outline-offset:1px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:26px}
.consent input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--wine)}
.consent label{font-size:.9rem;color:var(--ink-70);letter-spacing:0;text-transform:none;font-weight:400}
.consent a{color:var(--wine)}
.form-aside{border-left:var(--hair);padding-left:clamp(24px,3vw,44px)}
@media (max-width:860px){.form-aside{border-left:0;padding-left:0;border-top:var(--hair);padding-top:32px}}
.form-aside h3{font-size:1.3rem;margin-bottom:14px;letter-spacing:.02em}
.form-aside p{color:var(--ink-70);font-size:.95rem;margin-bottom:14px}
.form-aside .k{font-weight:700;color:var(--ink)}
#formOk{
  display:none;margin-top:18px;padding:14px 16px;border:1px solid var(--wine);border-radius:4px;
  background:var(--paper-shade);color:var(--wine);font-weight:600;font-size:.92rem;
}
#formOk.show{display:block}

/* ===================================================================
   Páginas de texto (políticas / sobre)
   =================================================================== */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:.01em;margin:clamp(30px,4vw,48px) 0 14px}
.prose h3{font-size:1.18rem;margin:28px 0 10px;letter-spacing:.01em}
.prose p{color:var(--ink-70);margin-bottom:14px}
.prose ul{color:var(--ink-70);margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--wine)}
.prose strong{color:var(--ink)}
.page-head{
  padding:clamp(46px,7vw,92px) var(--edge) clamp(28px,4vw,44px);
  border-bottom:var(--hair);
}
.page-head .eyebrow{margin-bottom:18px}
.page-head h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:.01em;max-width:20ch}
.page-head p{margin-top:18px;color:var(--ink-70);max-width:58ch}
.updated{font-size:.8rem;color:var(--ink-45);margin-top:14px;letter-spacing:.02em}

/* ===================================================================
   404
   =================================================================== */
.err{
  min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--stack) var(--edge);gap:20px;
}
.err__code{font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(4.5rem,16vw,9rem);color:var(--wine);line-height:.9;letter-spacing:.02em}
.err h1{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:.02em}
.err p{color:var(--ink-70);max-width:46ch}
.err__art{width:clamp(110px,22vw,170px);height:auto;margin-bottom:6px}

/* ===================================================================
   Rodapé (faixa bordô)
   =================================================================== */
.site-foot{background:var(--wine);color:var(--parchment)}
.foot-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding:clamp(52px,6vw,88px) var(--edge) clamp(34px,4vw,52px);
  border-bottom:1px solid var(--wine-line);
}
.foot-brand__name{
  font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
}
.foot-brand__name svg{width:32px;height:32px}
.foot-brand p{color:rgba(224,222,216,.72);font-size:.94rem;max-width:42ch}
.foot-col h4{
  font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(224,222,216,.6);margin-bottom:16px;
}
.foot-col a{
  display:block;text-decoration:none;color:var(--parchment);font-size:.95rem;
  padding:6px 0;border-bottom:1px solid transparent;width:max-content;
  transition:border-color .18s ease;
}
.foot-col a:hover{border-bottom-color:rgba(224,222,216,.6)}
.foot-col address{font-style:normal;color:rgba(224,222,216,.72);font-size:.94rem;line-height:1.9}
.foot-col address a{display:inline;padding:0;border-bottom:1px solid rgba(224,222,216,.35)}
.disclaimer{
  padding:24px var(--edge) 14px;
  color:rgba(224,222,216,.62);font-size:.78rem;line-height:1.7;max-width:104ch;
}
.foot-legal{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
  padding:10px var(--edge) 34px;border-top:1px solid var(--wine-line);margin-top:10px;
  color:rgba(224,222,216,.6);font-size:.78rem;letter-spacing:.04em;
}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-legal a{color:rgba(224,222,216,.72);text-decoration:none}
.foot-legal a:hover{text-decoration:underline}
@media (max-width:760px){.foot-top{grid-template-columns:1fr;gap:32px}}

/* ===================================================================
   Reveal (com fallback noscript no <head> de cada página)
   =================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
  *{scroll-behavior:auto!important}
}

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:8px;z-index:99;
  background:var(--wine);color:var(--parchment);padding:10px 16px;border-radius:4px;
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-decoration:none;
}
.skip:focus{left:var(--edge)}

/* =====================================================================
   ENRIQUECIMENTO — capturas reais, faixas media, características,
   dicas, curiosidades. Mesma gramática: pergaminho + bordô + fios.
   ===================================================================== */

/* ---------- Moldura de captura de ecrã (estilo prova de imprensa) ---------- */
.shot{
  border:var(--hair);background:var(--paper-shade);
  padding:clamp(9px,1vw,14px);
  box-shadow:6px 6px 0 var(--ink-10);
}
.shot__inner{overflow:hidden;border:var(--hair-soft);background:var(--parchment-2);display:block}
.shot img{
  width:100%;height:auto;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.shot:hover img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){ .shot:hover img{transform:none} }
.shot figcaption{
  display:flex;align-items:baseline;gap:10px;
  margin-top:11px;padding-top:9px;border-top:var(--hair-soft);
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-45);line-height:1.5;
}
.shot figcaption b{
  font-family:var(--sans);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine);font-size:.64rem;white-space:nowrap;
}

/* ---------- Faixa media (texto + captura, alternável) ---------- */
.media{
  display:grid;grid-template-columns:1.02fr .98fr;gap:0;
  border-block:var(--hair);
}
.media__body{padding:clamp(40px,6vw,84px) var(--edge);align-self:center}
.media__body .eyebrow{margin-bottom:18px}
.media__body h2{font-size:clamp(1.8rem,3.2vw,2.7rem);letter-spacing:.01em;margin-bottom:20px}
.media__body p{color:var(--ink-70);margin-bottom:15px;max-width:54ch}
.media__body p strong{color:var(--ink);font-weight:700}
.media__body .wine-word{color:var(--wine);font-style:italic}
.media__fig{
  background:var(--parchment-2);border-left:var(--hair);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(26px,4vw,60px);
}
.media__fig .shot{max-width:min(100%,520px)}
.media--flip .media__body{order:2}
.media--flip .media__fig{border-left:0;border-right:var(--hair)}
@media (max-width:860px){
  .media{grid-template-columns:1fr}
  .media__fig{border-left:0;border-top:var(--hair)}
  .media--flip .media__body{order:0}
  .media--flip .media__fig{border-right:0;border-top:var(--hair)}
}

/* ---------- Chips (modos / etiquetas honestas) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chip{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-70);background:var(--white);
  border:var(--hair-soft);border-radius:999px;padding:7px 14px;
}
.chip--wine{background:var(--wine);color:var(--parchment);border-color:var(--wine)}

/* ---------- Características (grelha de fichas com fios) ---------- */
.features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:var(--hair);
}
.feature{
  padding:clamp(24px,2.8vw,36px);
  border-right:var(--hair-soft);border-bottom:var(--hair-soft);
  transition:background .2s ease;
}
.feature:hover{background:var(--paper-shade)}
.feature__ic{width:34px;height:34px;color:var(--wine);margin-bottom:16px}
.feature h3{font-size:1.14rem;letter-spacing:.02em;margin-bottom:9px}
.feature p{color:var(--ink-70);font-size:.94rem}
.feature__no{
  font-family:var(--serif);font-style:italic;font-weight:700;color:var(--ink-16);
  font-size:1.1rem;float:right;line-height:1;margin:-4px 0 0 10px;
}
@media (max-width:900px){ .features{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .features{grid-template-columns:1fr} }

/* ---------- Dicas (subida com tochas) ---------- */
.tips{border-top:var(--hair);counter-reset:tip}
.tip{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;
  padding:clamp(22px,2.8vw,34px) 0;border-bottom:var(--hair-soft);
}
.tip__mark{
  counter-increment:tip;flex:none;
  width:clamp(40px,5vw,52px);height:clamp(40px,5vw,52px);
  border:1px solid var(--wine);border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--wine);
  position:relative;background:var(--parchment);
}
.tip__mark::before{content:counter(tip)}
.tip__mark::after{
  content:"";position:absolute;top:50%;left:calc(100% + 1px);width:0;height:1px;background:var(--ink-16);
}
.tip__body h3{font-size:clamp(1.1rem,1.7vw,1.3rem);letter-spacing:.02em;margin-bottom:7px}
.tip__body p{color:var(--ink-70);max-width:60ch;font-size:.96rem}
.tip__body p .k{color:var(--wine);font-weight:700}

/* ---------- Curiosidades (notas de margem) ---------- */
.curio-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.curio-list li{
  padding:clamp(16px,2.2vw,22px) 0;border-bottom:var(--hair-soft);
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
}
.curio-list li:last-child{border-bottom:0}
.curio-list .marker{
  font-family:var(--serif);font-style:italic;font-weight:700;color:var(--wine);
  font-size:1.05rem;line-height:1.4;white-space:nowrap;
}
.curio-list p{color:var(--ink-70);font-size:.98rem;line-height:1.6}
.curio-list p strong{color:var(--ink);font-weight:700}

/* ---------- Micro-interações (Emil): resposta ao toque ---------- */
.btn:active{transform:translateY(1px)}
.nav__cta:active{transform:translateY(1px)}
.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:5px 6px 0 var(--ink-10)}
.floor{transition:background .18s ease}
.floor:hover{background:var(--paper-shade)}
.play__poster{transition:background .25s ease}
.play__poster:hover{background:radial-gradient(120% 90% at 50% 40%,rgba(196,106,43,.08),transparent 60%)}
.play__poster:hover .play__cue{color:var(--wine)}
@media (prefers-reduced-motion:reduce){
  .btn:active,.nav__cta:active,.card:hover{transform:none}
}

/* =====================================================================
   CAMADA VIVA — mundo do goblin: verde-floresta, madeira, toldo,
   tocha-âmbar. Mais cor, mais brilho, mais jogo. (mantém honestidade)
   ===================================================================== */

::selection{background:var(--green);color:#fff}
body{
  background:
    radial-gradient(120% 80% at 82% -6%, rgba(142,197,74,.10), transparent 60%),
    radial-gradient(100% 70% at 0% 0%, rgba(232,145,45,.07), transparent 55%),
    var(--parchment);
}

/* eyebrow com pip de toldo */
.eyebrow{color:var(--green-deep);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{
  content:"";width:22px;height:9px;border-radius:2px;flex:none;
  background:var(--awning-stripe);border:1px solid rgba(45,32,19,.25);
}
.eyebrow--light{color:var(--torch-soft)}
.eyebrow--light::before{opacity:.9}
.wine-word{color:var(--red)}

/* ---- Botões vivos ---- */
.btn--primary{background:var(--green);border-color:var(--green-deep);color:#fff;
  box-shadow:0 4px 0 var(--green-deep);}
.btn--primary:hover{background:var(--green-bright);border-color:var(--green-deep);color:#26340f;
  box-shadow:0 4px 0 var(--green-deep)}
.btn--primary:active{box-shadow:0 1px 0 var(--green-deep)}
.nav__cta{background:var(--green);border-color:var(--green-deep);
  box-shadow:0 3px 0 var(--green-deep)}
.nav__cta:hover{background:var(--green-bright);color:#26340f}
.nav__cta:active{box-shadow:0 1px 0 var(--green-deep);transform:translateY(2px)}
.btn--ghost:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.brand__name b{color:var(--red)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--green-deep);border-bottom-color:var(--green)}

/* faixa de toldo reutilizável */
.stripe-top{position:relative}
.stripe-top::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--awning-stripe);
}

/* ---- HERO: painel vivo ---- */
.hero{border-bottom:0;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--awning-stripe)}
.hero h1 em{color:var(--red)}
.hero__note{border-left-color:var(--green)}
.hero__meta svg{color:var(--green)}
.hero__scene{border:0;background:none;min-height:0;overflow:visible;display:block;padding:0}
.hero__panel{
  position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(74,104,46,.35),rgba(52,78,34,.72)),url(../img/forest.webp) center/cover;
  border:3px solid var(--wood-dark);
  box-shadow:10px 12px 0 rgba(45,32,19,.16),inset 0 0 0 4px rgba(255,255,255,.08);
}
.hero__awning{position:absolute;top:0;left:0;right:0;height:26px;z-index:3;
  background:var(--awning-stripe);border-bottom:3px solid var(--wood-dark);
  box-shadow:0 3px 8px rgba(20,14,8,.25)}
.hero__board{
  position:absolute;top:12%;left:52%;width:47%;height:auto;
  transform:translateX(-50%) rotate(2.5deg);
  border:4px solid var(--paper-shade);border-radius:6px;
  box-shadow:0 16px 34px rgba(20,14,8,.42);
  z-index:1;
}
.hero__mascot{
  position:absolute;left:5%;bottom:7%;width:39%;aspect-ratio:1;margin:0;z-index:2;
  border-radius:50%;overflow:hidden;border:5px solid var(--cream);
  box-shadow:0 14px 30px rgba(20,14,8,.5);
}
.hero__mascot img{width:100%;height:100%;object-fit:cover;object-position:52% 30%}
.hero__badge{
  position:absolute;top:13%;right:6%;z-index:3;transform:rotate(5deg);
  display:inline-flex;align-items:center;gap:7px;
  background:var(--torch);color:#3a2410;
  font-family:var(--sans);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;
  padding:9px 13px;border-radius:999px;border:2px solid var(--wood-dark);
  box-shadow:0 7px 16px rgba(20,14,8,.35);
}
.hero__badge svg{width:14px;height:14px;fill:currentColor}
@media (max-width:860px){ .hero__panel{aspect-ratio:16/11} .hero::after{height:6px} }

/* ---- Secções coloridas ---- */
.section--paper{background:var(--parchment-2)}
.section--wine{background:linear-gradient(180deg,var(--wine),var(--wood-dark))}
.section--forest{background:linear-gradient(180deg,var(--green-deep),#33501f);color:var(--cream)}
.section--forest h2,.section--forest h3{color:#fff}
.section--forest .section__head p{color:rgba(243,231,201,.82)}
.section--forest .eyebrow{color:var(--torch-soft)}
.section__label::after{background:var(--awning-stripe);height:6px;opacity:.9;border-radius:2px}
.section--wine .section__label::after,.section--forest .section__label::after{opacity:.85}

/* ---- CONHECE O GOBLIN (banda mascote) ---- */
.goblin-band{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,68px);align-items:center;
  padding:clamp(48px,7vw,96px) var(--edge);
  background:linear-gradient(180deg,var(--green-deep),#2f4a1c);
  color:var(--cream);position:relative;overflow:hidden;
}
.goblin-band::before{content:"";position:absolute;inset:0;
  background:url(../img/forest.webp) center/cover;opacity:.14;mix-blend-mode:soft-light}
.goblin-band__art{position:relative;flex:none;justify-self:center;
  width:clamp(150px,20vw,232px);aspect-ratio:1}
.goblin-band__art img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:52% 28%;
  border-radius:50%;border:6px solid var(--cream);box-shadow:0 16px 34px rgba(12,20,6,.5)}
.goblin-band__ring{
  position:absolute;inset:-14px;border-radius:50%;z-index:0;
  border:3px dashed rgba(243,231,201,.5);animation:spin 40s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .goblin-band__ring{animation:none} }
.goblin-band__body{position:relative;z-index:1;max-width:60ch}
.goblin-band__body h2{color:#fff;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.08;margin-bottom:16px}
.goblin-band__body>p{color:rgba(243,231,201,.85);margin-bottom:20px;max-width:56ch}
.goblin-quote{
  margin:0;display:flex;gap:14px;align-items:flex-start;
  background:rgba(12,20,6,.28);border-left:4px solid var(--torch);
  padding:16px 20px;border-radius:8px;
}
.goblin-quote svg{width:26px;height:26px;flex:none;color:var(--torch-soft);margin-top:2px}
.goblin-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.7vw,1.32rem);color:#fff;line-height:1.4}
@media (max-width:720px){ .goblin-band{grid-template-columns:1fr;text-align:center}
  .goblin-band__body{margin:0 auto}
  .goblin-quote{text-align:left}
}

/* ---- GALERIA ---- */
.gallery{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);
  grid-auto-flow:dense;
}
.gcard{
  margin:0;position:relative;overflow:hidden;border-radius:12px;
  border:3px solid var(--wood-dark);background:var(--wood);
  box-shadow:6px 7px 0 var(--ink-10);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;
}
.gcard img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.gcard--tall{grid-row:span 2}
.gcard--wide{grid-column:span 2}
.gcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(20,14,8,.72));pointer-events:none}
.gcard figcaption{
  position:absolute;left:12px;bottom:11px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.gcard__dot{width:10px;height:10px;border-radius:50%;background:var(--d,var(--green));
  box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.gcard:hover{transform:translateY(-4px);box-shadow:8px 11px 0 var(--ink-10)}
.gcard:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){ .gcard:hover img{transform:none} }
@media (max-width:860px){ .gallery{grid-template-columns:repeat(2,1fr)}
  .gcard--wide{grid-column:span 2} .gcard--tall{grid-row:span 1} }

/* ---- NÍVEIS (cartões coloridos) ---- */
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.level{
  position:relative;background:var(--white);border:2px solid var(--ink-16);
  border-radius:14px;padding:clamp(20px,2.4vw,28px);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.level::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--lc,var(--green))}
.level__pip{position:absolute;top:16px;right:16px;width:14px;height:14px;border-radius:50%;
  background:var(--lc);box-shadow:0 0 0 4px color-mix(in srgb,var(--lc) 22%,transparent)}
.level h3{font-size:1.32rem;letter-spacing:.02em;margin-bottom:8px;color:var(--lc-ink,var(--green-deep))}
.level p{color:var(--ink-70);font-size:.92rem;margin-bottom:16px;min-height:3.4em}
.level__meter{display:flex;gap:5px;margin-bottom:16px}
.level__meter i{width:100%;height:7px;border-radius:4px;background:var(--ink-10)}
.level__meter i.on{background:var(--lc)}
.level--easy i:first-child{background:var(--lc)}
.level__tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--lc);padding:5px 11px;border-radius:999px}
.level:hover{transform:translateY(-4px);border-color:var(--lc);box-shadow:0 12px 26px color-mix(in srgb,var(--lc) 28%,transparent)}
.level--easy{--lc:var(--green-bright);--lc-ink:var(--green-deep)}
.level--low{--lc:var(--torch);--lc-ink:#9a5a12}
.level--medium{--lc:#d8722a;--lc-ink:#9a4a12}
.level--high{--lc:var(--red);--lc-ink:var(--red-deep)}
@media (max-width:860px){ .levels{grid-template-columns:1fr 1fr} .level p{min-height:0} }
@media (max-width:460px){ .levels{grid-template-columns:1fr} }

/* ---- Cartões / características / chips coloridos ---- */
.card{border-radius:14px;border:2px solid var(--ink-16);overflow:hidden}
.card.stripe-top,.card{position:relative}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--awning-stripe)}
.card__ic{color:var(--green)}
.card h3{color:var(--green-deep)}
.feature__ic{color:var(--green)}
.feature:hover{background:var(--green-soft)}
.features,.facts{border-color:var(--ink-16)}
.floor__no{color:var(--red)}
.floor:hover{background:var(--green-soft)}
.tip__mark{border-color:var(--green);color:var(--green-deep);background:var(--paper-shade)}
.tip__body p .k,.faq__q .sign{color:var(--red)}
.k{color:var(--red)}
.chip{border-color:var(--ink-16)}
.chip--wine{background:var(--green);border-color:var(--green-deep);color:#fff}
.curio-list .marker,.media__body .wine-word{color:var(--red)}

/* ---- Factos (Em resumo) sobre banda escura ---- */
.section--wine .fact b{color:var(--torch-soft)}
.facts .fact:nth-child(1) b{color:var(--torch-soft)}

/* ---- Jogo: aquecer com âmbar ---- */
.play__dot{background:var(--torch);box-shadow:0 0 0 4px rgba(232,145,45,.22);animation:torch 2.4s ease-in-out infinite}
@keyframes torch{0%,100%{box-shadow:0 0 0 4px rgba(232,145,45,.22)}50%{box-shadow:0 0 0 6px rgba(232,145,45,.10)}}
.play__disc{background:var(--green);box-shadow:0 0 0 6px rgba(111,156,60,.22),0 10px 26px rgba(20,14,8,.3)}
.play__poster:hover .play__disc{box-shadow:0 0 0 8px rgba(111,156,60,.26),0 14px 30px rgba(20,14,8,.34)}

/* ---- Molduras de captura mais quentes ---- */
.shot{border-radius:12px;box-shadow:7px 8px 0 var(--ink-10)}
.shot__inner{border-radius:8px}
.shot figcaption b{color:var(--green-deep)}

/* ---- CTA e rodapé ---- */
.band-cta{background:linear-gradient(180deg,var(--red-deep),#6f1f19);position:relative}
.band-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--awning-stripe)}
.site-foot{background:linear-gradient(180deg,var(--wood-dark),#3d2413);position:relative}
.site-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--awning-stripe);z-index:1}
.foot-brand__name{color:var(--torch-soft)}