/**
 * @file style.css
 * @description Folha de estilos principal do Camaleão Estúdio.
 *   Estruturada em camadas de leitura top-to-bottom:
 *   1. Custom Fonts    — @font-face para CindieMono, STIXTwoText, AndaleMono
 *   2. Tokens          — :root custom properties (cores, fontes, espaçamentos)
 *   3. Reset           — normalização minimalista
 *   4. Navbar          — barra fixa, logo, links, hamburger
 *   5. Hero            — carousel de slides, overlay, conteúdo, dots
 *   6. Tipografia part. — títulos outline/display, botões, bloco-seta
 *   7. Secções        — About, Services, Recording, Portfolio, Contact
 *   8. Responsive      — breakpoints @media (≤900px, ≤600px)
 *   9. Animações      — utilitários .fade-in / .fade-in--visible
 *
 * @conventions CONVENTIONS.md — sem hardcode de cores/fontes fora do :root;
 *   BEM-adjacent: .bloco, .bloco__elemento, .bloco--modificador;
 *   clamp() para tipografia e espaçamentos fluidos.
 *
 * @quality ISO/IEC 25010
 *   Manutenibilidade — todas as decisões visuais centralizadas em tokens
 *   Usabilidade      — contrastes documentados em CONCERNS.md (C-001)
 *   Compatibilidade  — dois breakpoints responsivos; sem prefixos vend. obsoletos
 *
 * @concern C-001 (CONCERNS.md) — Contraste lime/dark-green (≈4.8:1);
 *   verificar WCAG AA antes do M3. C-003 — grid de serviços frágil
 *   (nth-child): não reordenar cards sem actualizar o CSS.
 *
 * @see .specs/codebase/ARCHITECTURE.md — diagrama CSS
 * @see .specs/codebase/CONCERNS.md    — C-001, C-003, C-004
 */

/* ═══════════════════════════════════════════
   CUSTOM FONTS
═══════════════════════════════════════════ */
@font-face {
  font-family: 'CindieMono';
  src: url('assets/cindiemono-d.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STIXTwoText';
  src: url('assets/STIXTwoText-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STIXTwoText';
  src: url('assets/STIXTwoText-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'AndaleMono';
  src: url('assets/Andale Mono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════
   TOKENS — Design System
   Todas as decisões visuais centralizadas aqui.
   NUNCA hardcode cores ou fontes fora deste bloco.
   @see ARCHITECTURE.md — Tabela de tokens e uso por secção
═══════════════════════════════════════════ */
:root {
  /* Paleta de cores — extraída do PDF de design (AD-004) */
  --green-dark: #1c3d2b;
  /* navbar, recording, blocos decorativos */
  --lime: #c0d017;
  /* logo, botões, acentos, link activo   */
  --cream: #f4f0d5;
  /* fundo principal (about, services, portfolio) */
  --orange: #e86900;
  /* secção contact, acentos piano keys   */
  --text-dark: #1a1a1a;
  /* texto de corpo, bordas, headings      */
  --white: #ffffff;
  /* texto em fundos escuros               */

  /* Fontes — ficheiros locais em /assets (sem CDN externo)
     CindieMono  : títulos display e botões uppercase
     STIXTwoText : corpo de texto (variable font 100-900)
     AndaleMono  : detalhes de transport e rodapé */
  --font-display: 'CindieMono', 'Courier New', monospace;
  --font-body: 'STIXTwoText', Georgia, serif;
  --font-mono: 'AndaleMono', 'Courier New', monospace;

  /* Espaçamentos — usar sempre estas variáveis em secções;
     clamp() garante escala fluida sem media queries adicionais */
  --nav-h: 64px;
  /* altura fixa da navbar */
  --section-px: clamp(1rem, 4.5vw, 4.5rem);
  /* padding horizontal das secções */
  --section-py: clamp(2rem, 4vw, 6rem);
  /* padding vertical das secções */

  /* Radii dos componentes */
  --radius-card: 18px;
  /* service cards, pf-project */
  --radius-pill: 40px;
  /* botões primário e outline */

  /* Transição padrão — aplicar a hover/focus states */
  --transition: 0.25s ease;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Cor de selecção de texto — substitui o azul padrão do browser */
::selection {
  background: var(--orange);
  color: var(--white);
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--section-px);
  /* overflow hidden para que o drawer mobile não vaze para a página */
  overflow: visible;
}

/* logo */
.logo {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  flex-shrink: 0;
  line-height: 1;
  background: transparent;
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
  /* The SVG is cream coloured (#ffffe0) — renders well on dark green */
}

/* links — centrados absolutamente em relação à navbar */
.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 2vw, 2.5rem);
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.nav-links a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--lime);
  transition: color var(--transition);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-link--active {
  color: var(--lime);
}

.navbar--scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: var(--transition);
}

/* ── Language Picker (injected by i18n.js) ─────────────────────────────────
   Alinhado à direita da navbar; em mobile colapsa junto ao hamburger.
   Os botões PT e EN são semânticos (role implícito de toggle via aria-pressed).
────────────────────────────────────────────────────────────────────────────── */
.lang-picker {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.lang-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
  line-height: 1;
}

.lang-btn:hover {
  color: var(--lime);
}

.lang-btn--active {
  color: var(--lime);
  font-weight: 700;
}

.lang-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.65rem;
  pointer-events: none;
  user-select: none;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--section-px) 4rem;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* slide stack */
.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background: var(--green-dark) center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slide--active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.45) 55%,
      rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 580px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.8rem);
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Estado inicial das palavras do hero — GSAP anima para o estado final.
   display:inline-block obrigatório: transform não funciona em spans inline.
   will-change: transform, opacity, color — hint ao browser para criar
   camada de composição e evitar repaints durante a animação. */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: scale(0.72);
  transform-origin: left center;
  will-change: transform, opacity, color;
}

.hero-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.8vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  margin-bottom: 2rem;
  min-height: 3.6em;
  /* reserva altura enquanto o texto ainda não foi digitado */
}

/* Cursor piscante do efeito typing — usa a cor lime do design system.
   step-end garante piscagem abrupta (comportamento real de terminal). */
.hero-cursor {
  display: inline-block;
  color: var(--lime);
  font-weight: 300;
  line-height: 1;
  animation: cursorBlink 0.65s step-end infinite;
  user-select: none;
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.hero-arrow {
  display: block;
  width: 90px;
  height: 90px;
  object-fit: contain;
}

/* dots */
.hero-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background var(--transition);
}

.dot--active {
  background: var(--white);
}

/* ═══════════════════════════════════════════
   SHARED TYPOGRAPHY
═══════════════════════════════════════════ */
.section-title-outline {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(1.5rem, 9vw, 3rem);
  color: var(--orange);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-bottom: 3rem;
  text-transform: uppercase;
}

.section-title-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 4vw, 3rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--green-dark);
  margin-bottom: 3rem;
  text-transform: uppercase;
  text-align: center;
}

/* btn-primary — outline verde-escuro conforme PDF (DISCOVER MORE) */
.btn-primary {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--green-dark);
  color: var(--green-dark);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition);
}

.btn-primary:hover {
  background: var(--green-dark);
  color: var(--cream);
}

/* Variante para fundos escuros (ex: secção Recording) */
.btn-primary--light {
  border-color: var(--lime);
  color: var(--lime);
}

.btn-primary--light:hover {
  background: var(--lime);
  color: var(--green-dark);
}

.btn-outline-lime {
  display: inline-block;
  border: 2px solid var(--lime);
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 2rem;
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition);
}

.btn-outline-lime:hover {
  background: var(--lime);
  color: var(--green-dark);
}

/* block arrow accent */
.block-arrow {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.about {
  position: relative;
  background: var(--cream);
  padding: var(--section-py) var(--section-px);
}

/* linha vertical lime — recuada das margens e dos extremos verticais, conforme PDF */
.about::before {
  content: '';
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  top: clamp(2rem, 8%, 4rem);
  bottom: clamp(2rem, 8%, 4rem);
  width: 2px;
  background: var(--lime);
}

/* intro grid */
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 4vw, 3rem);
}

/* ─── About Image Cards ──────────────────────────────────────────────────────
   Dois estilos distintos conforme o design:
   --polaroid : moldura laranja, rotação, overlay CAMA/LEÃO, badge Founded
   --branded  : texto lime gigante a sangrar, badge music community
────────────────────────────────────────────────────────────────────────────── */
.about-image-wrap {
  position: relative;
}

/* ── Polaroid ── */
.about-image-wrap--polaroid {
  background: var(--orange);
  padding: 12px 12px 52px;
  border-radius: 4px;
  transform: rotate(-2.5deg);
  box-shadow: 6px 10px 36px rgba(0, 0, 0, 0.22);
  /* Limitar largura para não ocupar toda a coluna da grelha */
  max-width: 300px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Wrapper relativo à foto — allows logo centering independent of polaroid base */
.about-polaroid-inner {
  position: relative;
  line-height: 0;
  /* remove gap below inline img */
}

.about-image-wrap--polaroid .about-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: #555;
}

/* Logo centrado sobre a foto, posicionado dentro de .about-polaroid-inner */
.about-polaroid-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 55%, 130px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* Badge oval lime "FOUNDED IN 2019" — canto inferior-direito, sai do frame */
.founded-badge {
  position: absolute;
  bottom: 14px;
  /* dentro da base laranja */
  right: -18px;
  /* sangra ligeiramente para fora */
  background: var(--lime);
  color: var(--green-dark);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transform: rotate(4deg);
  white-space: nowrap;
}

/* ── Branded ──
   aspect-ratio: 3/4 (retrato moderado). overflow:hidden clipa tudo.
   max-width contém o card na coluna sem crescer demasiado. */
.about-image-wrap--branded {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  /* impede o card de ficar grande demais em desktop */
  margin: 0 auto;
  /* centra na coluna */
}

/* Imagem: preenche o card absolutamente */
.about-image-wrap--branded .about-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #555;
  z-index: 0;
}

/* Contentor do overlay — flex column, distribui os 3 filhos de topo a base.
   Cada filho (.about-brand-word) é um flex item com flex:1, ocupando 1/3 da altura. */
.about-brand-large {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  user-select: none;
}

/* Cada palavra (CAM / ALE / EAO) ocupa exatamente 1/3 da altura do card.
   O texto fica centrado vertical e horizontalmente dentro do seu terço. */
.about-brand-word {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 30vw, 8rem);
  /* proporcional ao card (max-width 420px) */
  font-weight: 400;
  line-height: 1;
  color: var(--lime);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Badge "music community." — dentro dos limites do card */
.music-community-badge {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  background: var(--green-dark);
  color: var(--cream);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  text-align: center;
  white-space: nowrap;
  transform: rotate(-4deg);
}



.about-lead {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 2vw, 0.5rem);
  font-weight: 50;
  line-height: 1.5;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 1.5rem;
  margin-bottom: 0.4rem;
}

.about-intro-text p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: rgb(42, 77, 0);
  margin-bottom: 5rem;
  margin-right: 2rem;
}



/* ═══════════════════════════════════════════
   SERVICES
   @concern C-003 — Grid de 6 colunas com nth-child span rules.
   A ordem dos cards é CRÍTICA: reordenar sem actualizar o CSS
   quebra o layout 2/3/2. Se o número de cards mudar, definir
   grid-column explicitamente em cada card em vez de nth-child.
   @see .specs/codebase/CONCERNS.md — C-003
═══════════════════════════════════════════ */
.services {
  background: var(--cream);
  padding: var(--section-py) var(--section-px);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0.875rem;
  margin-bottom: 2.5rem;
}

/* Row 1: 2 cards spanning 3 cols each */
.service-card:nth-child(1),
.service-card:nth-child(2) {
  grid-column: span 3;
}

/* Row 2: 3 cards spanning 2 cols each */
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5) {
  grid-column: span 2;
}

/* Row 3: 2 cards spanning 3 cols each */
.service-card:nth-child(6),
.service-card:nth-child(7) {
  grid-column: span 3;
}

.service-card {
  border: 1.5px solid var(--text-dark);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 150px;
  background: transparent;
  transition: background var(--transition), border-color var(--transition);
}

.service-card:hover:not(.service-card--highlight) {
  background: rgba(181, 194, 26, 0.08);
}

.service-card--highlight {
  background: var(--lime);
  border-color: var(--lime);
}

.service-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--green-dark);
}

.service-card--highlight h3 {
  color: var(--green-dark);
}

/* conditions-link: was <a>, now <button> — reset browser defaults */
.conditions-link {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--lime);
  transition: opacity var(--transition);
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.service-card--highlight .conditions-link {
  color: var(--green-dark);
}

.conditions-link:hover {
  opacity: 0.72;
}

/* Active state: card is open */
.service-card--active {
  background: rgba(192, 208, 23, 0.12);
  border-color: var(--lime);
}

.service-card--highlight.service-card--active {
  background: var(--lime);
  border-color: var(--lime);
}

.services-cta {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

/* ═══════════════════════════════════════════
   SERVICE PANEL
   Hidden by default — height: 0, overflow: hidden.
   JS (servicePanelModule) sets data-panel-open on #service-panel
   and toggles the [hidden] attribute on individual .service-detail panels.
   GSAP animates the height from 0 → auto.
═══════════════════════════════════════════ */
.service-panel {
  background: var(--green-dark);
  overflow: hidden;
  /* Collapsed state — GSAP will animate height */
  height: 0;
  /* Prevent content flash before GSAP runs */
  visibility: hidden;
  /* Required: close button positions relative to this full-width element */
  position: relative;
}

.service-panel[data-panel-open] {
  visibility: visible;
}

.service-panel-inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--section-py) var(--section-px);
}

/* Close button — anchored to the full-width .service-panel, not the 860px inner.
   On desktop this places it near the viewport right edge. */
.service-panel-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: var(--section-px);
  background: none;
  border: 1.5px solid rgba(192, 208, 23, 0.45);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  z-index: 10;
}

.service-panel-close:hover {
  background: rgba(192, 208, 23, 0.15);
  border-color: var(--lime);
}

/* Individual service content block */
.service-detail {
  width: 100%;
}

/* service-detail-header */
.service-detail-header {
  margin-bottom: 2rem;
}

.service-detail-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 4vw, 3rem);
  color: var(--lime);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

/* service-detail-body — free-form content area */
.service-detail-body {
  color: var(--white);
}

/* CTA row inside a panel (mirrors .recording-footer) */
.service-detail-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Temporary placeholder — remove when content is filled */
.service-detail-placeholder {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 4rem 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}



.conditions-list {
  margin: 2.5rem 0;
}

.conditions-heading {
  /* pill centrado com fundo lime — conforme PDF */
  display: inline-block;
  background: var(--lime);
  color: var(--green-dark);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 1.25rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
}

/* wrapper para centrar o pill */
.conditions-list {
  margin: 2.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conditions-list ol {
  list-style: none;
  counter-reset: conditions;
  width: 100%;
  border: 1px solid rgba(181, 194, 26, 0.35);
}

.conditions-list ol li {
  counter-increment: conditions;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(181, 194, 26, 0.25);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  line-height: 1.55;
}

.conditions-list ol li:last-child {
  border-bottom: none;
}

.conditions-list ol li::before {
  content: counter(conditions) ".";
  font-weight: 700;
  flex-shrink: 0;
  color: var(--lime);
  min-width: 1.5rem;
}



/* ═══════════════════════════════════════════
   PORTFOLIO
═══════════════════════════════════════════ */
.portfolio {
  background: var(--cream);
  padding: var(--section-py) 0;
  overflow: hidden;
  /* Contexto de empilhamento — ambos os pianos são position:absolute aqui */
  position: relative;
  isolation: isolate;
  /* Altura mínima garante espaço suficiente para os quadrantes absolutos */
  min-height: clamp(550px, 80vw, 1020px);
}

/* ── 1. Área do título (quadrante superior-esquerdo) ── */
/* position: static — assim o .pf-pattern-lime (absolute) sobe até .portfolio */
.pf-top {
  padding: 0 0 0 var(--section-px);
  position: static;
}

.portfolio-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--green-dark);
  margin-top: 8rem;
  /* título por cima do piano lime */
  position: relative;
  z-index: 1;
}

/* Piano lime — quadrante superior-direito (absoluto) */
.pf-pattern-lime {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 50%;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.pf-pattern-img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  object-position: left top;
  display: block;
}


/* ── 2. Gallery ── */
.pf-gallery {
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  /* left edge bleeds outside section padding */
  padding-left: calc(var(--section-px) - 18px);
  padding-right: var(--section-px);
}

/* orange accent bars — left gutter decoration */
.pf-accents {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  margin-right: 10px;
  padding-bottom: 2px;
}

.pf-accent {
  width: 11px;
  background: var(--orange);
  border-radius: 3px;
  flex-shrink: 0;
}

.pf-accent--tall {
  height: 120px;
}

.pf-accent--mid {
  height: 90px;
}

.pf-accent--short {
  height: 65px;
}

/* photos + dark green block, bottom-aligned */
.pf-gallery-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.pf-photo img {
  display: block;
  object-fit: cover;
  background: #777;
  border-radius: 0;
}

.pf-photo--blue img {
  width: clamp(160px, 26vw, 340px);
  height: clamp(210px, 34vw, 440px);
}

.pf-green-block {
  width: clamp(120px, 18vw, 240px);
  height: clamp(155px, 24vw, 310px);
  background: var(--green-dark);
  flex-shrink: 0;
}

.pf-photo--bw img {
  width: clamp(160px, 26vw, 340px);
  height: clamp(210px, 34vw, 440px);
}

/* ── 3. Project cards — centrados verticalmente sobre os dois pianos ── */
.pf-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 var(--section-px);
  /* Desce até ao meio visual da secção (sobrepoê topo do piano lime) */
  margin-top: clamp(80px, 12vw, 150px);
  /* Espaço abaixo para o piano orange aparecer em baixo */
  margin-bottom: clamp(100px, 12vw, 150px);
  position: relative;
  z-index: 1;
}

.pf-project-inner {
  position: relative;
  overflow: hidden;
}

.pf-project-inner img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--green-dark);
}

/* full-bleed dark green overlay */
.pf-project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 56, 40, 0.68);
}

.pf-project-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(0.75rem, 1.5vw, 1.1rem);
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.pf-project-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.1vw, 0.95rem);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pf-project-arrow {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--lime);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* ── 4. Piano laranja — quadrante inferior-esquerdo (absoluto) ── */
/* z-index: 0 mantém-no atrás dos cards (z-index: 1) */
.pf-pattern-orange {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 50%;
  z-index: 0;
  overflow: hidden;
  padding: 0;
}

.pf-pattern-orange .pf-pattern-img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.contact {
  background: var(--orange);
  padding: var(--section-py) var(--section-px);
  color: var(--white);
  text-align: center;
}

.contact-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  word-break: break-word;
}

.contact-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.contact-info p {
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.contact-info a {
  color: var(--cream);
}

.contact-info a:hover {
  text-decoration: underline;
}

.contact-transport {
  font-family: var(--font-mono);
  text-align: center;
}

.contact-transport h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: var(--cream);
}

.contact-transport p {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  line-height: 1.85;
  margin-bottom: 1.25rem;
  color: var(--cream);
}

/* social */
.social-links {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  transition: background var(--transition);
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.38);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    margin-left: auto;
  }

  /* O picker está dentro do drawer, não precisa de margins especiais */
  .lang-picker {
    margin-top: 1rem;
    /* Dá um pequeno espaçamento no mobile em relação aos links */
  }

  .nav-links {
    /* repõe o centrado absoluto do desktop para o drawer mobile */
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    transform: translateY(-110%);
    visibility: hidden;
    pointer-events: none;
    background: var(--green-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem var(--section-px) 2rem;
    gap: 1.25rem;
    transition: transform 0.35s ease, visibility 0.35s ease;
    z-index: 100;
  }

  .nav-links--open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .about-intro-grid {
    grid-template-columns: 1fr;
  }

  /* A escala das letras é controlada pelo clamp() base (30vw → max 8rem);
     nenhum override necessário aqui. */

  .services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-card:nth-child(n) {
    grid-column: span 1;
  }

  .service-card:nth-child(4) {
    grid-column: span 2;
  }

  /* ── Portfolio tablet (≤900px) ──
     Pianos permanecem absolutos nos seus quadrantes.
     Cards: 2 colunas em tablet. */
  .portfolio {
    min-height: clamp(700px, 120vw, 1050px);
  }

  .portfolio-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-top: 5rem;
  }

  .pf-projects {
    grid-template-columns: repeat(2, 1fr);
    margin-top: clamp(100px, 16vw, 180px);
    margin-bottom: clamp(120px, 18vw, 200px);
  }

  /* 3º card sozinho ocupa as 2 colunas para evitar orphan */
  .pf-project:nth-child(3) {
    grid-column: span 2;
  }

  .pf-project-title {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
  }

  .contact-title {
    word-break: break-word;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card:nth-child(n) {
    grid-column: span 1;
  }

  /* Escala das letras já controlada pelo clamp() base — sem override. */

  .contact-title {
    word-break: break-word;
  }

  /* ── Portfolio mobile (≤600px) ──
     Cards: 1 coluna. Pianos visíveis nos quadrantes.
     3º card restaura span 1 (grelha é de 1 coluna). */
  .portfolio {
    min-height: clamp(900px, 180vw, 1300px);
  }

  .portfolio-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    margin-top: 3rem;
  }

  .pf-projects {
    grid-template-columns: 1fr;
    margin-top: clamp(60px, 12vw, 110px);
    margin-bottom: clamp(140px, 22vw, 220px);
    gap: 10px;
  }

  /* Repor o span do tablet — 1 coluna não precisa de span */
  .pf-project:nth-child(3) {
    grid-column: span 1;
  }

  .pf-project-title {
    font-size: 0.9rem;
  }

  .pf-project-inner img {
    aspect-ratio: 16 / 9;
  }
}

/* ═══════════════════════════════════════════
   SCROLL FADE-IN ANIMATION
═══════════════════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in--visible {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════
   WHATSAPP FLOATING WIDGET
   Fixo canto inferior-esquerdo. Ao clicar no
   botão principal expande um mini-menu com os
   dois contactos disponíveis (wa-options).
═══════════════════════════════════════════ */
.wa-widget {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
}

/* ── Options panel ── */
.wa-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* estado inicial: escondido e deslocado para baixo */
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* estado aberto — activado via JS ao adicionar .wa-widget--open */
.wa-widget--open .wa-options {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Cada card de contacto ── */
.wa-option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--white);
  border-radius: 12px;
  padding: 0.625rem 1rem;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  border-left: 3px solid #25d366;
}

.wa-option:hover {
  background: #f0fdf4;
  transform: translateX(3px);
}

.wa-option__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark);
  opacity: 0.65;
}

.wa-option__number {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a7a3f;
  letter-spacing: 0.03em;
}

/* ── Botão principal ── */
.wa-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #25d366;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
  transition:
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

.wa-btn:hover {
  background: #1da851;
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
}

/* ── Ícones — swap entre WA e ✕ ── */
.wa-btn__icon {
  width: 28px;
  height: 28px;
  position: absolute;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* WA visível por defeito */
.wa-btn__icon--wa {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ✕ escondido por defeito */
.wa-btn__icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
}

/* Quando aberto: troca os ícones */
.wa-widget--open .wa-btn__icon--wa {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}

.wa-widget--open .wa-btn__icon--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Pulse suave no botão quando fechado — chama atenção do utilizador */
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.wa-btn:not(.wa-widget--open .wa-btn) {
  animation: waPulse 2.5s ease-out infinite;
}

/* Mobile: mover ligeiramente para não tapar conteúdo */
@media (max-width: 600px) {
  .wa-widget {
    bottom: 1.25rem;
    left: 1rem;
  }

  .wa-option {
    min-width: 175px;
  }
}