/* =========================================================================
   SAMU PLAYLAND — Design System
   Derived from the physical space: arch motif, terracotta floor, blush and
   sand walls, mint accents, hanging planets, house-shaped shelves.
   Brand blue from the logo carries interaction and identity.
   ========================================================================= */

/* Tipos de letra servidos pelo próprio site, e não pelo Google Fonts: assim
   o endereço IP de quem visita não vai para o Google (RGPD), e poupa-se uma
   ligação a outro servidor. São as versões "variáveis", um ficheiro para
   todos os pesos, só com os caracteres latinos (chegam para o português). */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/outfit.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/nunito-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/nunito-sans-italic.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — warm, from the walls */
  --cream:          #FBF6EF;
  --cream-deep:     #F4EADD;
  --paper:          #FFFFFF;
  --blush:          #F6DFD5;
  --sand:           #E7D3B4;
  --mint:           #D3E3DA;

  /* Accents — from the floor and panels */
  --terracotta:     #E07A50;
  --terracotta-ink: #A9502C;   /* accessible on cream */
  --sage:           #7E9C8C;
  --sage-ink:       #4F6A5C;

  /* Brand — from the logo */
  --samu:           #00A6E8;
  --samu-ink:       #026A99;   /* accessible on cream */
  --samu-wash:      #E4F4FC;

  /* Text */
  --ink:            #23303A;
  --ink-soft:       #55636D;
  --ink-faint:      #6B767E;

  /* Utility */
  --line:           #E6DACB;
  --focus:          #026A99;   /* 5.5:1 on cream — overridden on dark surfaces */
  --whatsapp:       #15803D;   /* 5.0:1 with white label */

  /* Type */
  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Nunito Sans', ui-sans-serif, system-ui, sans-serif;

  /* Spacing — spacious scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Radii — the arch language */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;
  --arch: 999px 999px var(--r-md) var(--r-md);

  --shadow-soft: 0 2px 4px rgba(35, 48, 58, .04), 0 12px 32px rgba(35, 48, 58, .06);
  --shadow-lift: 0 4px 8px rgba(35, 48, 58, .06), 0 20px 48px rgba(35, 48, 58, .10);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --container: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--samu-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* The dark surfaces need the light end of the brand blue to keep the focus
   ring at 3:1 against their background. */
.trust, .footer, .newsletter, .btn--primary, .card[style*="--ink"] { --focus: #4CC3F0; }

.skip-link {
  position: absolute; left: var(--space-2); top: -100px;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: var(--r-pill);
  z-index: 200; text-decoration: none; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--space-2); }

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-4); } }

/* Um degrau abaixo na escala de espacos. Com --space-7 no computador, o
   fim de uma seccao e o titulo da seguinte ficavam a 192px de distancia, o
   que abria um buraco a meio da pagina. Assim ficam a 144px, que ainda
   separa bem sem parecer que falta la alguma coisa. */
.section { padding-block: var(--space-5); position: relative; }
@media (min-width: 768px) { .section { padding-block: var(--space-6); } }

.section--cream-deep { background: var(--cream-deep); }
.section--mint  { background: var(--mint); }
.section--blush { background: var(--blush); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta-ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--terracotta);
}

.h-display {
  font-size: clamp(2.25rem, 6.2vw, 4.25rem);
  font-weight: 300;
  line-height: 1.08;
}
.h-display strong { font-weight: 700; }

.h-section {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.14;
}
.h-section strong { font-weight: 700; }

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 58ch;
}

.section-head { max-width: 62ch; margin-bottom: var(--space-5); }
.section-head .h-section { margin-block: var(--space-2) var(--space-2); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .625rem;
  min-height: 52px;
  padding: .75rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: #16212a; box-shadow: var(--shadow-lift); }

.btn--whatsapp { background: var(--whatsapp); color: #fff; }
.btn--whatsapp:hover { background: #0F6B33; box-shadow: var(--shadow-lift); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

.btn--quiet {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
.btn--quiet:hover { border-color: var(--ink); }

.btn .icon { width: 20px; height: 20px; flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--terracotta);
  padding-block: 2px;
  min-height: 44px;
  transition: gap .18s var(--ease), color .18s var(--ease);
}
.link-arrow:hover { gap: .7rem; color: var(--terracotta-ink); }
.link-arrow .icon { width: 18px; height: 18px; }

/* ---------- Navigation ---------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 100;
  padding-block: var(--space-2);
  transition: padding .25s var(--ease);
}
.nav-wrap.is-stuck { padding-block: .5rem; }

.nav {
  display: grid;
  /* Mobile: logo left, toggle right. Desktop: links | logo | links. */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .5rem .75rem .5rem 1.25rem;
  box-shadow: var(--shadow-soft);
}

.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__list--end { justify-content: flex-end; }

.nav__link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .9rem;
  font-family: var(--font-display); font-weight: 500; font-size: .9375rem;
  color: var(--ink); text-decoration: none;
  border-radius: var(--r-pill);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { background: var(--samu-wash); color: var(--samu-ink); }
.nav__link[aria-current="true"] { background: var(--cream-deep); font-weight: 700; }

.nav__brand {
  order: -1;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  margin-block: -18px;
  transition: transform .25s var(--ease);
}
.nav__brand:hover { transform: scale(1.04) rotate(-2deg); }
/* O logotipo recortado e mais alto do que largo (430x676). Encaixa-se pela
   altura e centra-se, senao transborda do circulo. */
.nav__brand img { width: auto; height: 46px; object-fit: contain; }

@media (min-width: 1024px) {
  .nav { grid-template-columns: 1fr auto 1fr; }
  .nav__brand { order: 0; width: 74px; height: 74px; }
  .nav__brand img { width: auto; height: 54px; }
}

.nav__item--desktop { display: none; }
@media (min-width: 1024px) { .nav__item--desktop { display: block; } }

.nav__toggle {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--ink); color: var(--cream);
  border: none; border-radius: 50%;
}
.nav__toggle .icon { width: 22px; height: 22px; }
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.nav__list--desktop { display: none; }
@media (min-width: 1024px) { .nav__list--desktop { display: flex; } }

/* A altura da barra tem de ser a mesma nas duas paginas.
   Sem isto, a pastilha crescia ate ao seu conteudo mais alto: na pagina
   principal isso e o botao "Visita-nos!" (54px) e na livraria e o botao do
   carrinho (48px), o que dava 72px de barra numa pagina e 66px na outra.
   Passar de uma para a outra dava um salto. Fixa-se a altura para a barra
   deixar de depender do que la esta dentro.
   So a partir dos 1024px, que e onde os links e o botao aparecem: abaixo
   disso as duas paginas ja tinham a mesma barra de 66px. */
@media (min-width: 1024px) {
  .nav { min-height: 72px; }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--cream);
  padding: var(--space-5) var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  transform: translateY(-100%);
  visibility: hidden;
  /* Visibility must flip instantly on open (so the close button can take
     focus straight away) and only after the slide-out on close. A plain
     transition on visibility is discrete and flips halfway through, which
     silently breaks focus management. */
  transition: transform .35s var(--ease), visibility 0s linear .35s;
  overflow-y: auto;
}
.nav-drawer[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform .35s var(--ease), visibility 0s linear 0s;
}
.nav-drawer__close {
  position: absolute; top: var(--space-2); right: var(--space-3);
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink);
}
.nav-drawer__close .icon { width: 22px; height: 22px; }
/* Titulos de grupo na gaveta. Na livraria ela tem dois blocos: as seccoes
   da pagina onde se esta, e depois o resto do site. Sem uma etiqueta a
   separar, era uma lista comprida de coisas de niveis diferentes. */
.nav-drawer__titulo {
  margin-top: var(--space-2);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.nav-drawer__titulo:first-of-type { margin-top: 0; }

.nav-drawer a:not(.btn) {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: .6rem 0; display: block;
  border-bottom: 1px solid var(--line);
}
.nav-drawer .btn { margin-top: var(--space-2); }

/* ---------- Arch shapes (the venue's signature) ---------- */
.arch {
  border-radius: var(--arch);
  overflow: hidden;
  position: relative;
  background: var(--cream-deep);
}
.arch img { width: 100%; height: 100%; object-fit: cover; }

.arch-row {
  display: flex; align-items: flex-end; gap: 6px;
  height: 46px; width: 100%;
}
.arch-row span {
  flex: 1;
  border-radius: 999px 999px 0 0;
}
.arch-row span:nth-child(5n+1) { background: var(--sand);       height: 100%; }
.arch-row span:nth-child(5n+2) { background: var(--terracotta); height: 82%; }
.arch-row span:nth-child(5n+3) { background: var(--paper);      height: 94%; }
.arch-row span:nth-child(5n+4) { background: var(--blush);      height: 74%; }
.arch-row span:nth-child(5n+5) { background: var(--mint);       height: 88%; }

/* ---------- Sistema solar do heroi ----------
   Decoracao pura. Vive nas margens exteriores para nunca tapar o texto nem os
   botoes, e nao intercepta o rato. Aparece por camadas conforme ha espaco:
   nada no telemovel, os exteriores no tablet, tudo no ecra grande. */
.planets {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.planet {
  position: absolute;
  width: var(--size, 40px);
  opacity: var(--op, .9);
}

/* Escondidos por defeito: em ecras estreitos colidiriam com o texto. */
.planet { display: none; }

@media (min-width: 768px) {
  .planet--sol, .planet--saturno, .planet--marte, .planet--estrela1 { display: block; }
}
@media (min-width: 1100px) {
  .planet--jupiter, .planet--terra, .planet--urano, .planet--estrela2 { display: block; }
}
@media (min-width: 1400px) {
  .planet--mercurio, .planet--venus, .planet--neptuno, .planet--estrela3 { display: block; }
}

/* Posicoes: colunas exteriores, longe da coluna de texto central. */
.planet--sol       { --size: 116px; --op: .5;  top: 13%; left: 2.5%; }
.planet--mercurio  { --size: 26px;  top: 33%; left: 13%; }
.planet--venus     { --size: 34px;  top: 55%; left: 15%; }
.planet--terra     { --size: 58px;  top: 47%; left: 4%; }
.planet--jupiter   { --size: 52px;  top: 62%; left: 9%; }
.planet--saturno   { --size: 78px;  top: 10%; right: 4%; }
.planet--marte     { --size: 44px;  top: 40%; right: 7%; }
.planet--urano     { --size: 38px;  top: 62%; right: 3%; }
.planet--neptuno   { --size: 28px;  top: 24%; right: 17%; }
.planet--estrela1  { --size: 30px;  top: 7%;  right: 19%; }
.planet--estrela2  { --size: 20px;  top: 52%; right: 15%; }
.planet--estrela3  { --size: 22px;  top: 20%; left: 20%; }

/* Cada corpo flutua ao seu ritmo, senao parecem uma so peca a subir e a descer. */
@media (prefers-reduced-motion: no-preference) {
  .planet { animation: orbita var(--dur, 8s) ease-in-out var(--delay, 0s) infinite; }

  .planet--sol      { --dur: 14s; --delay: 0s;    }
  .planet--mercurio { --dur: 6s;  --delay: -1.5s; }
  .planet--venus    { --dur: 7.5s;--delay: -3s;   }
  .planet--terra    { --dur: 9s;  --delay: -2s;   }
  .planet--jupiter  { --dur: 11s; --delay: -4s;   }
  .planet--saturno  { --dur: 10s; --delay: -1s;   }
  .planet--marte    { --dur: 8s;  --delay: -5s;   }
  .planet--urano    { --dur: 12s; --delay: -2.5s; }
  .planet--neptuno  { --dur: 7s;  --delay: -6s;   }
  .planet--estrela1 { --dur: 5s;  --delay: 0s;    animation-name: cintilar; }
  .planet--estrela2 { --dur: 6.5s;--delay: -2s;   animation-name: cintilar; }
  .planet--estrela3 { --dur: 5.5s;--delay: -4s;   animation-name: cintilar; }
}

@keyframes orbita {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -16px, 0) rotate(5deg); }
}

@keyframes cintilar {
  0%, 100% { transform: scale(1) rotate(0deg);    opacity: .9; }
  50%      { transform: scale(1.18) rotate(20deg); opacity: .55; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--space-4) var(--space-6);
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-block: var(--space-5) var(--space-7); } }

/* Anchored sections must clear the sticky nav. */
/* Onde a pagina para quando se carrega num link do menu.
   Este valor e a folga por cima da CAIXA da seccao, nao por cima do texto:
   como cada seccao ja traz espaco interior no topo, um valor grande punha a
   pagina a parar demasiado cedo e ainda se via a faixa da seccao anterior.
   Assim a seccao entra por baixo da barra e o titulo fica logo abaixo dela,
   com uma folga de cerca de 34px.

   ATENCAO: este valor anda a par do `padding-block` das seccoes. Quando ele
   desceu de 96 para 72px, o titulo passou a ficar a 10px da barra e foi
   preciso subir isto de 20 para 44. Se um mudar, o outro tem de mudar. */
[id] { scroll-margin-top: 44px; }
.hero__inner { position: relative; z-index: 2; text-align: center; }
.hero .h-display { margin-block: var(--space-3) var(--space-3); }
.hero .lead { margin-inline: auto; }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-top: var(--space-4);
}

.hero__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
  align-items: end;
}
.hero__gallery .arch:nth-child(1) { aspect-ratio: 3/4; }
.hero__gallery .arch:nth-child(2) { aspect-ratio: 3/4; }
.hero__gallery .arch:nth-child(3) { display: none; }
@media (min-width: 900px) {
  .hero__gallery { grid-template-columns: 1fr 1.35fr 1fr; gap: var(--space-3); }
  .hero__gallery .arch:nth-child(1) { aspect-ratio: 3/4.4; }
  .hero__gallery .arch:nth-child(2) { aspect-ratio: 4/4.2; }
  .hero__gallery .arch:nth-child(3) { display: block; aspect-ratio: 3/4.4; }
}

/* ---------- Trust strip ---------- */
.trust {
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--space-4);
}
.trust__grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust__item { display: flex; gap: .875rem; align-items: flex-start; }
.trust__item .icon { width: 26px; height: 26px; flex: none; color: var(--samu); margin-top: 2px; }
.trust__item h3 {
  font-size: 1rem; font-weight: 600; color: var(--cream);
  margin-bottom: .15rem; letter-spacing: 0;
}
.trust__item p { font-size: .9375rem; color: #B9C4CC; line-height: 1.5; }

/* ---------- Feature cards ---------- */
.cards {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: .75rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--sand); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 999px 999px 14px 14px;
  background: var(--samu-wash); color: var(--samu-ink);
}
.card__icon .icon { width: 26px; height: 26px; }
.card h3 { font-size: 1.25rem; font-weight: 600; }
.card p { color: var(--ink-soft); font-size: .9875rem; }

.card--terracotta .card__icon { background: #FBE6DC; color: var(--terracotta-ink); }
.card--sage .card__icon { background: #DDE9E2; color: var(--sage-ink); }
.card--sand .card__icon { background: #F5E9D6; color: #8A6B3D; }

/* ---------- Sensory list ----------
   Cada recurso tem o seu tom, tirado das cores reais do espaco. O azulejo
   em forma de arco repete o motivo das paredes. */
.sensory {
  display: grid; gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px) { .sensory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sense {
  display: flex; gap: .875rem; align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}
.sense:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--sand);
}

.sense__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px 999px 12px 12px;   /* o arco, em pequeno */
}
.sense__icon .icon { width: 22px; height: 22px; }

.sense strong { font-family: var(--font-display); font-weight: 600; display: block; }
.sense span { color: var(--ink-soft); font-size: .9375rem; }

.sense--terracotta .sense__icon { background: #FBE6DC; color: var(--terracotta-ink); }
.sense--indigo     .sense__icon { background: #E1E5F0; color: #3F4C6B; }
.sense--sage       .sense__icon { background: #DDE9E2; color: var(--sage-ink); }
.sense--sand       .sense__icon { background: #F5E9D6; color: #7F6234; }
.sense--samu       .sense__icon { background: var(--samu-wash); color: var(--samu-ink); }
.sense--blush      .sense__icon { background: #F9E3E8; color: #9B4A5E; }

/* Split layout */
.split {
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
  .split--media-first > *:first-child { order: 2; }
}
.split__media { position: relative; }
.split__media .arch { aspect-ratio: 4/4.6; }

/* Coluna de imagem que acompanha a altura do texto, para as duas colunas
   acabarem na mesma linha em vez de a foto ficar a meio. */
@media (min-width: 900px) {
  .split--stretch { align-items: stretch; }
  .split--stretch .split__media { display: flex; }
  .split--stretch .split__media .arch {
    aspect-ratio: auto;
    width: 100%;
    min-height: 100%;
  }
}

/* ---------- Agenda / events ---------- */
.agenda {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 700px)  { .agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .agenda { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.agenda__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: .75rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.agenda__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* Arco decorativo, grande e cortado pelo canto do cartao. */
.agenda__item::after {
  content: '';
  position: absolute; right: -34px; bottom: -54px;
  width: 116px; height: 132px;
  border-radius: 999px 999px 20px 20px;
  background: rgba(255, 255, 255, .38);
  pointer-events: none;
}

.agenda__icon {
  position: relative; z-index: 1;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 999px 999px 14px 14px;
  background: var(--paper);
}
.agenda__icon .icon { width: 26px; height: 26px; }

.agenda__item h3 {
  position: relative; z-index: 1;
  font-size: 1.1875rem; font-weight: 600;
}
.agenda__item p {
  position: relative; z-index: 1;
  font-size: .9375rem; color: var(--ink-soft);
}

@media (min-width: 1050px) {
  .agenda__item--wide { grid-column: span 2; }
}

.agenda__item--terracotta { background: #FBE6DC; }
.agenda__item--terracotta .agenda__icon { color: var(--terracotta-ink); }
.agenda__item--sage       { background: #DDE9E2; }
.agenda__item--sage .agenda__icon { color: var(--sage-ink); }
.agenda__item--samu       { background: var(--samu-wash); }
.agenda__item--samu .agenda__icon { color: var(--samu-ink); }
.agenda__item--sand       { background: #F5E9D6; }
.agenda__item--sand .agenda__icon { color: #7F6234; }
.agenda__item--blush      { background: #F9E3E8; }
.agenda__item--blush .agenda__icon { color: #9B4A5E; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--ink); color: var(--cream);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  display: grid; gap: var(--space-3);
  align-items: center;
}
@media (min-width: 900px) {
  .newsletter { grid-template-columns: 1.1fr 1fr; padding: var(--space-5); gap: var(--space-5); }
}
.newsletter h3 { color: var(--cream); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; }
.newsletter h3 strong { font-weight: 700; }
.newsletter p { color: #B9C4CC; margin-top: .75rem; font-size: .9875rem; }

.field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: var(--space-2); }
.field label { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
.field .hint { font-size: .8125rem; color: var(--ink-faint); }
.newsletter .field label { color: var(--cream); }
.newsletter .field .hint { color: #93A0A9; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem;
  min-height: 52px;
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--samu); }
.req { color: var(--terracotta-ink); }

/* ---------- Pricing ---------- */
.price-note {
  background: var(--samu-wash);
  border: 1px dashed var(--samu);
  border-radius: var(--r-md);
  padding: var(--space-2) var(--space-3);
  color: var(--samu-ink);
  font-size: .9375rem;
  margin-bottom: var(--space-3);
  display: flex; gap: .75rem; align-items: flex-start;
}
.price-note .icon { width: 22px; height: 22px; flex: none; margin-top: 2px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.price-table {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.price-table caption { text-align: left; padding: var(--space-2) var(--space-3); font-weight: 600; font-family: var(--font-display); }
.price-table th, .price-table td { padding: 1rem var(--space-3); text-align: left; border-bottom: 1px solid var(--line); }
.price-table thead th {
  background: var(--cream-deep);
  font-family: var(--font-display); font-weight: 600; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
}
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table td:last-child { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

/* ---------- Party plans ---------- */
.plans {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plan {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: .75rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.plan h3 { font-size: 1.375rem; font-weight: 600; }
.plan .btn { margin-top: auto; width: 100%; }

.plan--featured { border: 2px solid var(--ink); }

.plan__badge {
  align-self: flex-start;
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--ink); color: var(--cream);
  padding: .3rem .8rem; border-radius: var(--r-pill);
}
.plan__badge--quiet { background: var(--cream-deep); color: var(--ink-soft); }

.plan__price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.plan__amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 2.75rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__amount.todo { font-size: 1.25rem; }
.plan__unit { color: var(--ink-soft); font-size: 1rem; }
.plan__note { color: var(--ink-soft); font-size: .9375rem; }

.plan__list { list-style: none; margin: .5rem 0 var(--space-2); padding: 0; display: grid; gap: .5rem; }
.plan__list li { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; }
.plan__list .icon { width: 18px; height: 18px; color: var(--sage-ink); flex: none; margin-top: 4px; }

/* ---------- Insurance band ---------- */
.insurance {
  margin-top: var(--space-4);
  background: var(--ink); color: var(--cream);
  border-radius: var(--r-lg);
  padding: var(--space-3);
  display: flex; gap: var(--space-3); align-items: flex-start;
  --focus: #4CC3F0;
}
@media (min-width: 700px) { .insurance { padding: var(--space-4); align-items: center; } }
.insurance__icon {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  background: #33424E; color: #4CC3F0;
  border-radius: 999px 999px 16px 16px;
}
.insurance__icon .icon { width: 28px; height: 28px; }
.insurance h3 { color: var(--cream); font-size: 1.25rem; font-weight: 600; margin-bottom: .4rem; }
.insurance p { color: #C6D0D7; font-size: .9875rem; }
.insurance strong { color: var(--cream); }

.conditions { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: .625rem; }
.conditions li { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; color: var(--ink-soft); }
.conditions .icon { width: 20px; height: 20px; color: var(--sage-ink); flex: none; margin-top: 3px; }

/* ---------- Shop ---------- */
.products {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.product__media { aspect-ratio: 1; background: var(--cream-deep); display: grid; place-items: center; padding: var(--space-2); }
.product__media img { width: 100%; height: 100%; object-fit: contain; }
.product__body { padding: var(--space-2); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.product__meta { font-size: .8125rem; color: var(--ink-faint); }
.product__price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-top: auto; }
.product .btn { width: 100%; min-height: 46px; font-size: .9375rem; }

.product__media--pair { display: flex; gap: 6px; align-items: center; padding: var(--space-2) .75rem; }
.product__media--pair img { width: 50%; height: auto; object-fit: contain; border-radius: 4px; }
.product__media--pair img:first-child { transform: rotate(-4deg); }
.product__media--pair img:last-child  { transform: rotate(4deg); }

/* ---------- Authors ---------- */
.authors {
  margin-top: var(--space-6);
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  background: var(--cream-deep);
  border-radius: var(--r-lg);
  padding: var(--space-3);
}
@media (min-width: 900px) {
  .authors { grid-template-columns: .8fr 1.2fr; gap: var(--space-5); padding: var(--space-4); }
}
/* A fotografia da autora e ao alto: o arco acompanha-a em vez de a cortar
   pelo peito, que e onde estao os livros. */
.authors__media .arch { aspect-ratio: 4/3.6; border-radius: var(--r-md); }
.authors__media .arch--retrato { aspect-ratio: 4/4.8; }
.authors__media .arch img { object-fit: cover; object-position: center; }

/* ---------- Quadro da agenda do mes ----------
   Um cartao unico, para quem chega ao site sem passar pelo Instagram nem
   pela newsletter saber logo o que esta marcado. O conteudo vem de
   assets/js/agenda.js. */
.quadro {
  margin-top: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.quadro__topo {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: .5rem var(--space-2);
  padding: var(--space-3);
  background: var(--samu-wash);
  border-bottom: 1px solid var(--line);
}
.quadro__mes {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700; line-height: 1.1; color: var(--ink);
}
.quadro__mes span { color: var(--samu-ink); font-weight: 500; }
.quadro__rotulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--samu-ink);
}
.quadro__rotulo .icon { width: 18px; height: 18px; }

.quadro__lista { list-style: none; margin: 0; padding: 0; }

.quadro__evento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--line);
}
.quadro__evento:first-child { border-top: none; }
@media (min-width: 560px) {
  /* A hora salta para a direita e alinha em coluna com as outras horas. */
  .quadro__evento { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* O quadradinho da data repete o arco das paredes do espaco. */
.quadro__data {
  display: grid; place-items: center; align-content: center;
  /* Largura e altura fixas: sem isto, um dia unico ('6') faz um quadrado
     mais estreito do que dois dias ('26 e 27') e os titulos dos eventos
     ficam desalinhados uns por baixo dos outros. */
  width: 84px; min-height: 64px; padding: .625rem .5rem .5rem;
  border-radius: 999px 999px 14px 14px;
  background: var(--cream-deep);
  color: var(--ink);
  line-height: 1;
}
.quadro__data strong {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.quadro__data--longa strong { font-size: 1.0625rem; }
.quadro__abrev {
  margin-top: .3rem;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  /* Sem opacidade: a 10px, uma cor esbatida cai abaixo do minimo de
     contraste. A hierarquia face ao numero ja vem do tamanho. */
}
/* Estes dois tons sao mais escuros do que os --*-ink da casa: sobre o rosa
   e sobre o verde-agua do quadradinho, os originais nao chegavam ao
   contraste minimo para a etiqueta pequena do mes. */
.quadro__data--conto    { background: var(--blush);      color: #8A4019; }
.quadro__data--musica   { background: var(--samu-wash);  color: var(--samu-ink); }
.quadro__data--teatro   { background: var(--sand);       color: #6B4E22; }
.quadro__data--workshop { background: #E9E4F5;           color: #4B3F7A; }
.quadro__data--festa    { background: var(--mint);       color: #3C5346; }

.quadro__texto { display: grid; gap: .1875rem; }
.quadro__titulo {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600; color: var(--ink);
}
.quadro__com  { font-size: .9375rem; color: var(--ink-soft); }
.quadro__nota { font-size: .8125rem; color: var(--ink-faint); }

.quadro__hora {
  justify-self: start;
  padding: .3125rem .625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
  /* No telemovel a hora passa para baixo do titulo, na mesma coluna do
     texto. Deixada na coluna do quadradinho ficava a boiar sozinha. */
  grid-column: 2; margin-top: .375rem;
}
@media (min-width: 560px) {
  .quadro__hora { grid-column: 3; justify-self: end; margin-top: 0; }
}

.quadro__vazio {
  padding: var(--space-3);
  color: var(--ink-soft); font-size: .9375rem;
}
.quadro__vazio a { color: var(--samu-ink); }

.quadro__rodape {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.quadro__rodape p {
  font-size: .9375rem; color: var(--ink-soft);
  max-width: 42ch; margin: 0;
}

/* ---------- Google rating ---------- */
.rating {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-3);
  align-items: center;
}
@media (min-width: 700px) {
  .rating { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4); }
}
.rating__score { text-align: center; }
@media (min-width: 700px) {
  .rating__score { border-right: 1px solid var(--line); padding-right: var(--space-5); }
}
.rating__number {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rating__score .stars { justify-content: center; margin-block: .5rem .35rem; }
.rating__score .stars .icon { width: 22px; height: 22px; }
.rating__count { font-size: .9375rem; color: var(--ink-soft); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quotes__mais { display: flex; justify-content: center; margin-top: var(--space-4); }
.quote {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.stars { display: flex; gap: 2px; color: #E8A33D; }
.stars .icon { width: 18px; height: 18px; }
.quote blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.quote figcaption { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; margin-top: auto; }
.quote figcaption span { display: block; font-weight: 400; color: var(--ink-faint); font-size: .8125rem; }

/* ---------- Contact / location ---------- */
.contact-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.15fr; gap: var(--space-5); } }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.info-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.info-list .icon { width: 24px; height: 24px; color: var(--terracotta-ink); flex: none; margin-top: 3px; }
.info-list dt, .info-list strong {
  font-family: var(--font-display); font-weight: 600; display: block; margin-bottom: .15rem;
}
.info-list a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--sand); }
.info-list a:hover { border-color: var(--terracotta); }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 340px;
  background: var(--cream-deep);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

.hours { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.hours th, .hours td { padding: .5rem 0; text-align: left; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: none; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--cream); padding-block: var(--space-5) var(--space-4); }
.footer__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); } }
.footer h3 { color: var(--cream); font-size: 1rem; font-weight: 600; margin-bottom: var(--space-2); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { color: #C6D0D7; text-decoration: none; display: inline-block; padding-block: .3rem; }
.footer a:hover { color: var(--cream); text-decoration: underline; }
/* O logotipo ja vem recortado, sem fundo branco: assenta directamente
   no escuro do rodape.
   `height: auto` e obrigatorio: sem ele o browser aplica o atributo
   height="676" que vem no HTML e estica a imagem ao alto, deformando a
   cara e as letras. Fixa-se a largura e a altura segue a proporcao real. */
.footer__brand img { width: 116px; height: auto; display: block; }
.footer__brand p { color: #9FACB5; font-size: .9375rem; margin-top: var(--space-2); max-width: 40ch; }
.footer__legal {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid #35434E;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  justify-content: space-between; align-items: center;
  font-size: .8125rem; color: #939EA6;
}
.socials { display: flex; gap: .5rem; }
.socials a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid #35434E; border-radius: 50%; padding: 0;
}
.socials a:hover { background: var(--samu); border-color: var(--samu); color: #fff; }
.socials .icon { width: 20px; height: 20px; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: max(var(--space-2), env(safe-area-inset-right));
  bottom: max(var(--space-2), env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex; align-items: center; gap: .625rem;
  background: var(--whatsapp); color: #fff;
  min-height: 56px; padding: 0 1.25rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); background: #0F6B33; }
.wa-float .icon { width: 24px; height: 24px; }
.wa-float span { display: none; }
@media (min-width: 640px) { .wa-float span { display: inline; } }

/* ---------- Scroll reveal ----------
   Content is visible by default. The hidden state is only applied once JS has
   confirmed it can reveal it again, so no-JS and observer failures can never
   leave a section blank. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
  html.js-reveal .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
}

/* ---------- Placeholder marker ---------- */
.todo {
  display: inline-block;
  background: #FFF3CD; color: #7A5B00;
  border: 1px dashed #D4A72C;
  border-radius: 6px;
  padding: 0 .4rem;
  font-size: .875rem; font-weight: 700;
  font-family: var(--font-display);
}

/* =========================================================================
   COMODIDADES, GALERIA E O SAMU
   ========================================================================= */

/* ---------- Comodidades praticas ---------- */
.comodidades {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
}
.comodidades li {
  display: flex; align-items: center; gap: .75rem;
  background: var(--cream-deep);
  border-radius: var(--r-pill);
  padding: .6rem 1.1rem;
  font-size: .9375rem; color: var(--ink-soft);
}
.comodidades .icon { width: 20px; height: 20px; flex: none; color: var(--terracotta-ink); }
.comodidades strong { color: var(--ink); font-family: var(--font-display); font-weight: 600; }

/* ---------- Galeria ---------- */
.galeria-bloco { margin-top: var(--space-6); }

.galeria__titulo {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.galeria {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.galeria__item {
  padding: 0; border: 1px solid var(--line); background: var(--cream-deep);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.galeria__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; }

/* A primeira foto ocupa dois lugares: dá ritmo em vez de uma grelha plana. */
@media (min-width: 700px) {
  .galeria__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* ---------- Galeria em carrossel ----------
   Estado ligado pelo main.js. Sem JavaScript nada disto se aplica e ficam
   as seis fotos em grelha, como acima. */
.galeria-palco { position: relative; }

.galeria-palco.is-carrossel {
  /* Mais estreito do que o contentor: era este o ponto de mudar para uma
     foto so, a grelha ocupava meia pagina. */
  max-width: 820px;
  margin-inline: auto;
}

.is-carrossel .galeria { display: block; }

.is-carrossel .galeria__item {
  display: none;
  width: 100%;
  /* 3:2 corta bem tanto as fotos ao alto como as ao baixo: as seis foram
     verificadas uma a uma neste formato. */
  aspect-ratio: 3/2;
}

/* Anula a regra da primeira foto grande, que so faz sentido na grelha. */
.is-carrossel .galeria__item:first-child {
  grid-column: auto; grid-row: auto; aspect-ratio: 3/2;
}

.is-carrossel .galeria__item.is-actual { display: block; }
.is-carrossel .galeria__item:hover { transform: none; box-shadow: none; }

.galeria__seta {
  position: absolute; top: calc(50% - 24px);
  transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background .18s var(--ease), transform .18s var(--ease);
  z-index: 2;
}
.galeria__seta:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.galeria__seta .icon { width: 22px; height: 22px; }
.galeria__seta--ant { left: 12px; }
.galeria__seta--seg { right: 12px; }
/* A seta da esquerda e a mesma da direita virada ao contrario: assim as duas
   pontas ficam iguais, o que nao acontece com dois desenhos diferentes. */
.galeria__seta--ant .icon { transform: scaleX(-1); }

@media (min-width: 1060px) {
  /* Ha espaco de sobra dos lados: as setas saem de cima da foto. */
  .galeria__seta--ant { left: -68px; }
  .galeria__seta--seg { right: -68px; }
}

.galeria__pontos {
  display: flex; justify-content: center; gap: .375rem;
  margin-top: var(--space-2);
}
.galeria__ponto {
  /* O ponto sao 10px, mas o botao tem 24 para se poder acertar nele. */
  width: 24px; height: 24px; padding: 0;
  border: none; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.galeria__ponto::after {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: #D8C9B4;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.galeria__ponto:hover::after { background: var(--ink-faint); }
.galeria__ponto[aria-current="true"]::after {
  background: var(--samu-ink);
  transform: scale(1.2);
}

/* ---------- Lightbox ---------- */
.lightbox {
  border: none; padding: 0; background: transparent;
  overflow: visible;
  /* Tamanho FIXO, nao encolhido a cada fotografia. Duas razoes:
     enquanto a imagem grande nao chega, uma caixa que depende dela colapsa
     para 1x1 e as setas amontoam-se no meio do ecra; e ao passar de uma foto
     ao baixo para uma ao alto a caixa mudava de tamanho e as setas saltavam.
     Assim ficam sempre no mesmo sitio. */
  width: min(92vw, 1100px);
  height: min(86vh, 760px);
}
.lightbox::backdrop { background: rgba(35, 48, 58, .82); }

.lightbox__palco {
  width: 100%; height: 100%;
  position: relative;
}
/* Posicao absoluta com inset 0 e margin auto, em vez de grid ou flex: numa
   linha de altura automatica, o `max-height: 100%` da imagem nao tem contra
   o que medir e o browser trata-o como `none`, e as fotos ao alto saiam da
   caixa. Contra um bloco de altura definida, a percentagem resolve. */
.lightbox img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--r-md);
}
.lightbox__close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--shadow-lift);
}
.lightbox__close .icon { width: 22px; height: 22px; }

/* Setas dentro do lightbox. Assentam por cima da fotografia, e nao fora
   dela: o dialogo chega a ocupar 92vw e nos ecras estreitos nao sobrava
   margem nenhuma dos lados para as poe la. */
.lightbox__seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  background: rgba(251, 246, 239, .92);
  color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.lightbox__seta:hover { background: var(--cream); transform: translateY(-50%) scale(1.06); }
.lightbox__seta .icon { width: 24px; height: 24px; }
.lightbox__seta--ant { left: 14px; }
.lightbox__seta--seg { right: 14px; }
.lightbox__seta--ant .icon { transform: scaleX(-1); }

/* O anel de foco tem de aparecer sobre o fundo escuro do lightbox. */
.lightbox__seta:focus-visible,
.lightbox__close:focus-visible { outline: 3px solid #4CC3F0; outline-offset: 3px; }

@media (min-width: 640px) {
  .lightbox__seta--ant { left: 20px; }
  .lightbox__seta--seg { right: 20px; }
}

/* ---------- O Samu ---------- */
.arch-wrap { position: relative; }

/* Espreita por tras da parede de arcos. Em vez de cortar a imagem, poe-se
   o Samu por baixo da parede na ordem de pintura: os arcos, que sao opacos,
   tapam-lhe as pernas sozinhos. Assim nunca fica um intervalo entre os dois,
   seja qual for o tamanho do ecra. */
.arch-row { position: relative; z-index: 1; }

.samu-espreita {
  position: absolute;
  z-index: 0;
  bottom: 4px;
  left: 8%;
  width: 92px;
  height: auto;
  pointer-events: none;
  display: none;
}
@media (min-width: 700px) { .samu-espreita { display: block; width: 108px; } }
@media (min-width: 1100px) { .samu-espreita { left: 12%; width: 124px; } }

.newsletter__texto { position: relative; }
.samu-newsletter {
  display: none;
  position: absolute;
  right: 0; bottom: -14px;
  width: 132px; height: auto;
  opacity: .95;
  pointer-events: none;
}
@media (min-width: 1100px) {
  .samu-newsletter { display: block; }
  .newsletter__texto { padding-right: 150px; }
}

@media (prefers-reduced-motion: no-preference) {
  .samu-espreita { animation: espreitar 6s ease-in-out infinite; }
}
@keyframes espreitar {
  0%, 92%, 100% { transform: translateY(0); }
  96%           { transform: translateY(-8px); }
}

/* ---------- "Voltar" (livraria, fichas e páginas legais) ---------- */
.link-back {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  color: var(--ink-soft); text-decoration: none;
  transition: gap .18s var(--ease), color .18s var(--ease);
}
.link-back:hover { gap: .8rem; color: var(--ink); }
.link-back .icon { width: 18px; height: 18px; }

/* ---------- Rodapé: links legais e Livro de Reclamações ----------
   A lei (DL 156/2005, na redacção do DL 74/2017) pede o acesso ao Livro de
   Reclamações Eletrónico "em local visível e de forma destacada". Por isso é
   um botão com contorno, e não mais um link cinzento no meio dos outros. */
.footer__links { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.footer .reclamacoes {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1.1rem;
  border: 1.5px solid #6B7882; border-radius: var(--r-pill);
  color: var(--cream); font-family: var(--font-display); font-weight: 600; font-size: .875rem;
}
.footer .reclamacoes:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); text-decoration: none; }
.footer .reclamacoes .icon { width: 18px; height: 18px; }

/* ---------- Páginas legais (privacidade, termos) ---------- */
.legal { padding-block: var(--space-3) var(--space-7); }
/* A barra do menu fica colada ao topo: os títulos com âncora (#devolucoes,
   #litigios) têm de parar por baixo dela, e não atrás. */
.legal [id] { scroll-margin-top: 110px; }
.legal__coluna { max-width: 46rem; margin-inline: auto; }
.legal .h-display { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-block: var(--space-2) var(--space-2); }
.legal__data { color: var(--ink-soft); font-size: .9375rem; }
.legal__resumo {
  margin-block: var(--space-4); padding: var(--space-3);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
.legal__resumo p { margin: 0; }
.legal__resumo a { color: var(--terracotta-ink); text-underline-offset: 3px; }
.legal__resumo p + p { margin-top: .75rem; }
.legal__indice { margin-block: var(--space-3) var(--space-4); }
.legal__indice h2 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .5rem; }
.legal__indice ol { margin: 0; padding-left: 1.25rem; columns: 2 16rem; column-gap: var(--space-4); }
.legal__indice li { padding-block: .15rem; break-inside: avoid; }
.legal__indice a { color: var(--ink); text-decoration-color: var(--sand); text-underline-offset: 3px; }
.legal__indice a:hover { color: var(--terracotta-ink); }
.legal__corpo h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.25;
  margin: var(--space-5) 0 var(--space-2);
}
.legal__corpo h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; margin: var(--space-3) 0 .5rem; }
.legal__corpo p, .legal__corpo li { line-height: 1.7; }
.legal__corpo p { margin: 0 0 1rem; }
.legal__corpo ul, .legal__corpo ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal__corpo li + li { margin-top: .35rem; }
.legal__corpo a { color: var(--terracotta-ink); text-underline-offset: 3px; }
.legal__corpo .tabela { overflow-x: auto; margin-bottom: 1rem; }
.legal__corpo table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 34rem; }
.legal__corpo th, .legal__corpo td { text-align: left; vertical-align: top; padding: .75rem; border-bottom: 1px solid var(--line); line-height: 1.5; }
.legal__corpo th { font-family: var(--font-display); font-weight: 600; background: var(--cream-deep); }
.legal__caixa {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-3); margin-bottom: 1rem;
}
.legal__caixa p:last-child { margin-bottom: 0; }

/* O que ainda falta confirmar antes de publicar. Aparece de propósito,
   amarelo, para não passar despercebido; apagar quando estiver resolvido. */
mark.a-confirmar {
  background: #FFF1B8; color: #5A4300; border-radius: 4px;
  padding: .05em .35em; font-size: .9em; font-weight: 600;
}

/* Links dentro das notas pequenas (newsletter, carrinho): herdam a cor da nota. */
.newsletter .hint a, .cart__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Armadilha para bots na newsletter: fora do ecrã, mas no formulário. */
.nl-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Páginas de aviso (newsletter: confirmar / confirmada) ---------- */
.aviso { padding-block: var(--space-4) var(--space-7); text-align: center; }
.aviso__coluna { max-width: 36rem; margin-inline: auto; }
.aviso__samu { width: 190px; height: auto; margin: 0 auto var(--space-2); display: block; }
.aviso .h-display { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-block: var(--space-2); }
.aviso p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1rem; }
.aviso p a { color: var(--terracotta-ink); text-underline-offset: 3px; }
.aviso__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }

/* ---------- Festas: extras e "como marcar" ---------- */
.extras {
  margin-top: var(--space-4);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--space-3);
}
@media (min-width: 700px) { .extras { padding: var(--space-4); } }
.extras__titulo, .passos__titulo { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-2); }
.extras__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-4); }
@media (min-width: 800px) { .extras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.extra {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .875rem; align-items: start;
  padding-block: .875rem; border-top: 1px solid var(--line);
}
.extra__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px 999px 12px 12px; background: #DDE9E2; color: var(--sage-ink);
}
.extra__icon .icon { width: 22px; height: 22px; }
.extra strong { display: block; font-family: var(--font-display); font-weight: 600; }
.extra__desc { display: block; color: var(--ink-soft); font-size: .9375rem; margin-top: .15rem; }
.extra__preco { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.extra__preco--consulta { font-weight: 600; font-size: .875rem; color: var(--ink-soft); padding-top: .15rem; }
/* Ecrãs estreitos: o preço desce para debaixo do texto, senão a descrição fica espremida. */
@media (max-width: 520px) {
  .extra { grid-template-columns: 44px minmax(0, 1fr); row-gap: .35rem; }
  .extra__preco { grid-column: 2; padding-top: 0; }
}

.passos__titulo { margin-top: var(--space-4); }
.passos {
  list-style: none; counter-reset: passo; margin: 0; padding: 0;
  display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.passos li {
  counter-increment: passo; position: relative;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: calc(var(--space-3) + 2.5rem) var(--space-3) var(--space-3);
  font-size: .9375rem; line-height: 1.6; color: var(--ink-soft);
}
.passos li strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.0625rem; margin-bottom: .25rem; }
.passos li::before {
  content: counter(passo);
  position: absolute; top: var(--space-3); left: var(--space-3);
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-weight: 700;
}
.conditions a { color: var(--ink); text-underline-offset: 3px; }