:root{
  --bg:#fdebf7;
  --grid:#f5c7e7;
  --ink:#4b0082;
  --ink-soft:#8645a5;
  --card:#fff7ff;
  --bar:#ff69b4;
  --bar-dark:#d9539a;
  --accent:#e6b3ff;
  --badge:#ffb3d9;
  --shadow:#d9539a;
}
*{box-sizing:border-box}
html, body { height: 100% }

body{
  margin: 0;
  color: var(--ink);
  font-family: 'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    linear-gradient(var(--bg),var(--bg)),
    repeating-linear-gradient(0deg, rgba(215,138,192,.25) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(215,138,192,.25) 0 1px, transparent 1px 32px);
}

/* Optional: same grid pattern when you force pattern-grid */
body.pattern-grid{
  background:
    linear-gradient(var(--bg),var(--bg)),
    repeating-linear-gradient(0deg, rgba(215,138,192,.25) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(215,138,192,.25) 0 1px, transparent 1px 32px);
}
a{color:inherit}
.site{max-width:1200px;margin:auto;padding:16px}

/* Window */
.window{
  --win-r: 10px;          /* raio exterior da janela */
  --win-b: 2px;           /* espessura do bordo */
  background:var(--card);
  border: var(--win-b) solid var(--bar);
  border-radius: var(--win-r);
  box-shadow:4px 4px 0 var(--shadow);
  margin:16px 0;
  overflow:visible;        /* não corta stickers */
}
.titlebar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,var(--bar),var(--bar-dark));
  color:#fff;padding:8px 10px;font-weight:700;letter-spacing:.5px;
  font-family:'VT323', monospace;font-size:20px;
  border-top-left-radius: calc(var(--win-r) - var(--win-b));
  border-top-right-radius: calc(var(--win-r) - var(--win-b));
  overflow: hidden;
}
.titlebar .title{text-transform:capitalize}
.controls{display:flex;gap:8px}
.btn{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:#7ddf64;cursor:pointer}
.btn-max{background:#ffd966}
.btn-close{background:#ff6b6b}
.content{padding:14px 14px 16px}

.window--banner{
  overflow:hidden;             /* <-- só o banner fica clipped */
}
.window--banner .content{ padding:0 }
.banner{ display:block; width:100%; height:auto }

.layout{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start; /* evita drift vertical */
}
.col{ display: block }          /* cada .col é uma coluna estável */
.col > .window:first-child{ margin-top: 0 } /* topo limpo e alinhado */

/* Tablet: 2 colunas */
@media (max-width: 980px){
  .layout{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px }
}
/* Mobile: 1 coluna */
@media (max-width: 640px){
  .layout{ grid-template-columns: 1fr; gap:14px }
}

/* Se algum bloco precisar ocupar a largura toda dentro da grid */
.window--full{ grid-column: 1 / -1 }

/* Menu grid */
.menu-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.menu-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  background:var(--accent);color:var(--ink);border:1px solid #d49aff;border-radius:10px;padding:10px 8px;
  transition:transform .12s ease, background .2s;box-shadow:2px 2px 0 var(--shadow);text-align:center;
  position:relative;overflow:hidden;
}
.menu-item::after{
  content:"✦"; position:absolute; left:-20px; bottom:6px;
  color:#fff; text-shadow:0 0 6px #ff69b4; opacity:0; transition:all .25s;
}
.menu-item:hover{transform:translateY(-2px);background:#ffc8ff}
.menu-item:hover::after{ left:8px; opacity:1 }
.menu-item .ico{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3d0050;          /* cor base (herda se removeres) */
  flex-shrink:0;
}
.menu-item:hover .ico{
  color:#8a0072;
  filter:drop-shadow(0 0 2px #ffd6ff);
}

/* Log & profile */
.profile{ display:grid; justify-items:center; text-align:center; gap:8px }

/* Avatar pequeno e centrado (fixo) */
.avatar{
  width:160px;          /* tamanho confortável em desktop */
  height:auto;
  display:block;
  margin:6px auto 8px;  /* centra e pouco espaço vertical */
  border:0;
  border-radius:0;
  box-shadow:none;
  object-fit:contain;
}

/* Tablet */
@media (max-width: 980px){
  .avatar{ width:150px }
}

/* Mobile */
@media (max-width: 640px){
  .avatar{ width:130px; margin:4px auto 6px }
}

/* Opcional: encurtar um pouco o cartão “Sobre” */
.content.profile{ padding-top:8px; padding-bottom:10px }
.profile .section-lead{ margin:0 0 8px }
.profile p{ margin:4px 0 }

/* Badges */
.sticker-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0 0}
.badge{
  font-family:'VT323', monospace;font-size:20px;letter-spacing:1px;background:#000;color:#ffdeff;
  padding:6px 10px;border-radius:8px;border:2px solid #ffd1f4;box-shadow:2px 2px 0 var(--shadow)
}
.badge--pink{background:#ff80c8;color:#240024;border-color:#ffebf7}
.badge--gloomy{background:#2a0a25;color:#ffd1f4;border-color:#ff80c8}

/* Portfolio grid */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chip{
  border:1px solid #d49aff;background:#ffe6ff;color:var(--ink);padding:6px 10px;border-radius:20px;cursor:pointer;
  box-shadow:2px 2px 0 var(--shadow);font-weight:700
}
.chip.is-active{background:#ffc8ff}
.projects-grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.project-card{
  background:#fff;border:1px solid #d49aff;border-radius:12px;box-shadow:2px 2px 0 var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px
}
.project-card img {
  width: 100%;
  height: 200px;            /* altura fixa coerente */
  object-fit: cover;        /* preenche o espaço igualmente */
  border-radius: 8px;
  background-color: #fafafa;
}

/* Exceção: ilustração (mantém proporção, fundo branco para contraste) */
.project-card[data-tags="ilustracao"] img {
  object-fit: contain;      /* evita cortar o desenho */
  background-color: #ffffff;/* destaca o conteúdo */
}
.project-card h3{margin:.2rem 0;color:var(--ink)}
.project-card p{margin:0;color:var(--ink-soft)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:.75rem;background:#f3d1ff;border:1px solid #d49aff;border-radius:10px;padding:2px 8px}
.btn-case{
  align-self:flex-start;margin-top:4px;background:#ff69b4;border:2px solid #d9539a;color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;
  box-shadow:2px 2px 0 var(--shadow)
}
.hidden{display:none!important}

/* Marquee */
.window--marquee .marquee{--speed:20s;overflow:hidden;white-space:nowrap;position:relative}
.window--marquee .marquee span{display:inline-block;padding-left:100%;animation:marquee var(--speed) linear infinite;font-family:'VT323', monospace;font-size:22px;color:var(--ink-soft)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Modal */
.modal{ position:fixed; inset:0; padding:16px; display:none; z-index:9999 }
.modal.is-open{ display:grid; place-items:center }
.modal__backdrop{ z-index:0 }           /* fica atrás */
.modal__dialog{
  z-index:1; position:relative; box-sizing:border-box;
  width: clamp(260px, 92vw, 1100px);
  max-height: min(90vh, 820px);
  background: var(--card);
  border:1px solid #d49aff;
  border-radius:16px;
  box-shadow:2px 2px 0 var(--shadow), 0 12px 24px rgba(0,0,0,.18);
  padding:10px; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.modal__dialog img{
  max-width:100%; max-height:calc(90vh - 20px);
  object-fit:contain; border-radius:10px; display:block;
}

/* Media no modal (vídeo) */
.modal__dialog video{
  display:block;
  max-width:90vw;
  max-height:80vh;
  border-radius:10px;
  box-shadow:2px 2px 0 var(--shadow);
}

/* Botão fechar = bolinha vermelha da home (hit‑area maior) */
.modal__close{
  position:absolute; top:8px; right:8px;
  width:36px; height:36px; padding:0; border:0; background:transparent;
  cursor:pointer; line-height:0; font-size:0; appearance:none;
}
.modal__close::before{
  content:""; display:block; margin:0 auto;
  width:14px; height:14px; border-radius:50%;
  background:#ff6b6b; border:2px solid rgba(255,255,255,.95);
  box-shadow:2px 2px 0 var(--shadow);
  transition:transform .15s ease, filter .15s ease;
}
.modal__close:hover::before{ transform:translateY(-1px); filter:brightness(.95) }
.modal__close:active::before{ transform:translateY(0);     filter:brightness(.9) }
.modal__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:50% }

/* Mobile: margens seguras e toque mais confortável */
@media (max-width:640px){
  .modal{ padding:10px }
  .modal__dialog{ border-radius:12px; padding:8px; width:96vw; max-height:88vh }
  .modal__close{ width:40px; height:40px }
  .modal__dialog img{ max-height:calc(88vh - 16px) }
}

/* FIX: menu adapta nº de colunas à largura da janela */
.menu-grid{
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
}

@media (max-width: 980px){
  .menu-grid{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}
@media (max-width: 640px){
  .menu-grid{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

/* portefólio em largura total + cards menos espremidos */
.window--portfolio{
  column-span: all;           /* ocupa todas as colunas do layout */
  -webkit-column-span: all;   /* compat Safari */
}

.window--portfolio .projects-grid{
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 980px){
  .window--portfolio .projects-grid{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.window--portfolio .project-card img{
  width:100%;
  height:auto;
  aspect-ratio: 3 / 4;        /* altura consistente e mais presença */
  object-fit: cover;
  border-radius:8px;
}

/* Ajuste em tablets para caber bem 2 colunas largas */
@media (max-width: 980px){
  .window--portfolio .projects-grid{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* Teaser compacto na home: linha rolável */
.window--portfolio-teaser .projects-row{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type: x mandatory;
}
.window--portfolio-teaser .project-card{scroll-snap-align:start; min-width:220px}
.window--portfolio-teaser .project-card img{aspect-ratio:3/4; height:auto}
.window--portfolio-teaser .teaser-cta{margin:10px 2px 0}
.window--portfolio-teaser .btn-all{background:#8645a5;border-color:#6f2e8c}

/* Home: teaser mais pequeno */
.window--portfolio-teaser .content{ padding:10px 10px 12px }

.window--portfolio-teaser .projects-row{
  grid-auto-columns: minmax(180px, 1fr);
  gap:10px;
  padding-bottom:2px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #d9539a #ffe6ff;
}
/* WebKit/Chromium */
.window--portfolio-teaser .projects-row::-webkit-scrollbar{ height:8px }
.window--portfolio-teaser .projects-row::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg,#ff69b4,#ffd1f4);
  border-radius:8px;
}
.window--portfolio-teaser .projects-row::-webkit-scrollbar-track{
  background:#ffe6ff; border-radius:8px;
}

.window--portfolio-teaser .project-card{
  min-width:180px;
  padding:8px;
  gap:6px;
}
.window--portfolio-teaser .project-card img{
  height:120px; width:100%; object-fit:cover; border-radius:10px; aspect-ratio:auto;
}
.window--portfolio-teaser .project-card h3{
  font-size:1rem; margin:.1rem 0 .2rem;
}
/* esconder textos e tags no teaser para ganhar altura */
.window--portfolio-teaser .project-card p,
.window--portfolio-teaser .project-card .tags{ display:none }

.window--portfolio-teaser .btn-case{
  padding:6px 8px; font-size:.9rem;
}

/* Unificar CTA do teaser com os restantes botões */
.window--portfolio-teaser .teaser-cta{
  display:flex;
  justify-content:center;
  margin:8px 0 0;
}

.window--portfolio-teaser .btn-all{
  background: var(--bar);
  border: 2px solid var(--bar-dark);
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  box-shadow:2px 2px 0 var(--shadow);
  text-decoration:none;      /* remove sublinhado */
  display:inline-block;
}

/* Teaser sem scroll: 2 cards em grid */
.window--portfolio-teaser .projects-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  overflow: visible;      /* elimina a barra */
  padding-bottom:0;
  scroll-snap-type: none; /* desativa snap */
}
/* mostrar só os 2 primeiros no teaser */
.window--portfolio-teaser .projects-row > .project-card:nth-child(n+3){ display:none }

@media (max-width: 640px){
  .window--portfolio-teaser .projects-row{ grid-template-columns: 1fr }
}

/* remover larguras mínimas do modo rolável */
.window--portfolio-teaser .project-card{ min-width: initial }
.window--portfolio-teaser .project-card img{ height:110px }

/* CTA centralizado; usa visual do .menu-item (igual ao botão de CV) */
.window--portfolio-teaser .teaser-cta{
  display:flex; justify-content:center; margin:8px 0 0;
}
/* opcional: pequeno ajuste de sombra para coerência */
.window--portfolio-teaser .btn-all{ box-shadow:2px 2px 0 var(--shadow); text-decoration:none }

/* Maximize window as overlay */
.window.is-full{
  position:fixed; inset:5% 5%; z-index:10000; background:var(--card);
  animation: pop .18s ease-out;
  overflow:auto;
  border-radius: 12px;
  --win-r: 12px;          /* mantém o cálculo correto nas bordas internas */
}
@keyframes pop{from{transform:scale(.98)} to{transform:scale(1)}}

/* Reduced motion: pause animations/sparkles/marquee */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important}
  .marquee span{animation: none !important}
}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:1fr}
}

/* 1) mantém o grid atual como preset */
body.pattern-grid{
  background:
    linear-gradient(var(--bg),var(--bg)),
    repeating-linear-gradient(0deg, rgba(215,138,192,.25) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(215,138,192,.25) 0 1px, transparent 1px 32px);
}

/* 2) corações pastel */
body.pattern-hearts{
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M14 20 L8 14 C6 12 8 9 10.5 10.8 L14 14 L17.5 10.8 C20 9 22 12 20 14 Z' fill='%23ff80c8' fill-opacity='.35'/></svg>");
  background-size: 28px 28px;
}

/* 3) estrelinhas (cruz) + pontos */
body.pattern-stars{
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3h2v4h4v2h-4v4h-2V9H8V7h4z' fill='%23ffd1f4' fill-opacity='.55'/><circle cx='6' cy='18' r='1.5' fill='%23ffb3e1' fill-opacity='.5'/></svg>");
  background-size: 24px 24px;
}

/* 4) sparkles maiores (mix) */
body.pattern-sparkles{
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M16 5h2v5h5v2h-5v5h-2v-5h-5v-2h5z' fill='%23ffd1f4' fill-opacity='.5'/><path d='M24 22h1v2h2v1h-2v2h-1v-2h-2v-1h2z' fill='%23ffffff' fill-opacity='.6'/><circle cx='8' cy='26' r='1.6' fill='%23ff80c8' fill-opacity='.35'/></svg>");
  background-size: 32px 32px;
}

/* 5) bolinhas suaves */
body.pattern-dots{
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 6px 6px, rgba(215,138,192,.35) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 18px 18px, rgba(215,138,192,.25) 0 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Auto: aplica um padrão por defeito quando NENHUMA classe pattern-* estiver no body */
/* Desktop: estrelas */
body:not(.pattern-grid):not(.pattern-hearts):not(.pattern-stars):not(.pattern-sparkles):not(.pattern-dots){
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3h2v4h4v2h-4v4h-2V9H8V7h4z' fill='%23ffd1f4' fill-opacity='.55'/><circle cx='6' cy='18' r='1.5' fill='%23ffb3e1' fill-opacity='.5'/></svg>");
  background-size: 24px 24px;
}

/* Mobile: corações (até 640px) */
@media (max-width: 640px){
  body:not(.pattern-grid):not(.pattern-hearts):not(.pattern-stars):not(.pattern-sparkles):not(.pattern-dots){
    background-color: var(--bg);
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M14 20 L8 14 C6 12 8 9 10.5 10.8 L14 14 L17.5 10.8 C20 9 22 12 20 14 Z' fill='%23ff80c8' fill-opacity='.35'/></svg>");
    background-size: 28px 28px;
  }
}

/* Botões (links estilizados) sem sublinhado em todos os estados */
a.btn-case,
a.btn-case:link,
a.btn-case:visited,
a.btn-case:hover,
a.btn-case:focus,
a.menu-item,
a.menu-item:link,
a.menu-item:visited,
a.menu-item:hover,
a.menu-item:focus,
.controls a.btn {
  text-decoration: none !important;
}

/* Listas com cara de cartões (sem aspeto de lista) */
.window .log,
.window .status{
  list-style: none;
  margin: 0;
  padding: 0 !important;                 /* elimina indentação */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.window .log li,
.window .status li{
  background: var(--card);
  border: 1px solid #d49aff;
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 10px 12px;
  color: var(--ink);
}

/* Remover bullets das listas internas nos cartões (ex.: Experiência) */
.window .status li ul{
  list-style: none;
  padding-left: 0;
  margin-left: 0; /* ignora o recuo do inline style */
}

/* Texto mais suave dentro dos cartões */
.window .status li b{ color: var(--ink) }
.window .status a{ text-decoration: underline } /* mantém links normais, não botões */

/* Formulário de contacto com o look do site */
.contact-form{ display:grid; gap:10px; margin-top:12px }
.contact-form input,
.contact-form textarea{
  width:100%;
  background:#ffe6ff;
  border:1px solid #d49aff;
  border-radius:10px;
  padding:8px 10px;
  color:var(--ink);
  box-shadow:2px 2px 0 var(--shadow);
  font: inherit;
}
.contact-form .btn-case{ align-self:start }
/* Idiomas (mostrar/esconder) */
body.lang-pt .lang-en{ display:none !important }
body.lang-en .lang-pt{ display:none !important }

/* Chips de skills (reutiliza .chip) */
.skills-chips{ display:flex; flex-wrap:wrap; gap:8px }
.skills-chips .chip{ box-shadow:2px 2px 0 var(--shadow); background:#ffe6ff }
.clients{ list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
.clients li{ background:var(--card); border:1px solid #d49aff; border-radius:10px; box-shadow:2px 2px 0 var(--shadow); padding:8px 10px; text-align:center }

/* Layout stability */
.window{ break-inside: avoid; page-break-inside: avoid; }

/* Auto-fit menu tiles across widths */
.menu-grid{
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
}

/* Teaser: ensure grid (no horizontal scroll) */
.window--portfolio-teaser .projects-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  overflow:visible;
}
.window--portfolio-teaser .project-card{ min-width:0 }

/* Base portfolio grid already 3 cols; override below for smaller screens */

/* Tablet */
@media (max-width: 980px){
  .projects-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .window{ margin:14px 0; }
  .titlebar{ font-size:18px; padding:7px 9px; }
  .content{ padding:12px 12px 14px; }
  .window--portfolio-teaser .project-card img{ height:130px }
  .sticker-strip{ gap:8px; justify-content:flex-start; }
}

/* Mobile */
@media (max-width: 640px){
  .site{ padding:12px; max-width: 100%; }
  .projects-grid{ grid-template-columns: 1fr; }
  .menu-grid{ grid-template-columns: repeat(2, minmax(120px,1fr)); }
  .badge{ font-size:18px; }
  .window{ margin:12px 0; }
  .titlebar{ font-size:17px; padding:6px 8px; }
  .content{ padding:10px 10px 12px; }
  .avatar{ width:180px; height:180px; }  /* keep consistent (was 120px) */
  .window--portfolio-teaser .projects-row{ grid-template-columns: 1fr; }
  .window--portfolio-teaser .project-card img{ height:120px }
  .sticker-strip{ justify-content:center; }
}

/* Media nunca maior que o content */
img, video{ max-width:100%; height:auto }

/* Dentro das janelas, garante bloco e cantos arredondados */
.window .content img:not(.avatar),
.window .content video{
  display:block;
  border-radius:10px;
}

/* Uniformizar media sem molduras (não tocar no avatar) */
.window .content img:not(.avatar),
.window .content video {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Desativar estilo polaroid caso exista */
.polaroid {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.polaroid img { display: block; }

/* Grelha responsiva usada nos cases (sem overflow) */
.grid-cards{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); /* encaixa sem transbordar */
  align-items:start;
}

/* Em ecrãs médios/grandes, abre mais colunas confortáveis */
@media (min-width: 760px){
  .grid-cards{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Extra: evita qualquer scroll horizontal residual */
.site{ overflow-x:hidden }

.video-wrap{ position:relative }
.video-wrap .sound-btn{
  position:absolute; right:8px; bottom:8px;
  background:rgba(0,0,0,.55); color:#fff;
  border:1px solid #ffd1f4; border-radius:16px;
  padding:4px 8px; font-family:'VT323', monospace; font-size:16px;
  box-shadow:2px 2px 0 var(--shadow); cursor:pointer
}
.video-wrap .sound-btn[aria-pressed="true"]{
  background:#2a0a25; color:#ffdeff; border-color:#ff80c8
}

/* Caixa estreita para media em destaque (ex.: logo animado) */
.media-narrow{
  max-width: 640px;     /* ajusta para 560/720 se preferires */
  margin: 0 auto;       /* centra */
}
.media-narrow video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 560px){
  .media-narrow{ max-width: 100%; }
}

.palette{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 }
.swatch{
  width:120px; height:48px; border-radius:8px; background:var(--c); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; box-shadow:2px 2px 0 var(--shadow)
}
.type-samples{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:8px 0 }
.type-sample .name{ font-size:.85rem; color:var(--ink-soft); margin-bottom:4px }
.type-sample .preview{
  background:#fff; border:1px solid #d49aff; border-radius:8px; padding:10px 12px; box-shadow:2px 2px 0 var(--shadow)
}

.compare{ display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.compare img{ width:100%; height:auto; border-radius:10px; display:block }
.compare-label{ margin:.2rem 0 .4rem; color:var(--ink-soft); font-size:.9rem }
@media (max-width: 760px){ .compare{ grid-template-columns:1fr }}

/* 1) Remover o aspeto quadrado/igual (se usaste .uniform) */
.grid-cards.uniform > img,
.grid-cards.uniform > video{ height:auto; object-fit:contain }

/* 2) Masonry simples (altura livre, sem cortes) */
.grid-cards.masonry{
  column-count: 3;
  column-gap: 14px;
}
.grid-cards.masonry > *{
  break-inside: avoid;           /* evita quebras feias */
  margin-bottom: 14px;
  width: 100%;
  border-radius: 16px;           /* cantos suaves */
  box-shadow: 2px 2px 0 var(--shadow, #d9539a);
}
@media (max-width: 980px){ .grid-cards.masonry{ column-count: 2 } }
@media (max-width: 640px){ .grid-cards.masonry{ column-count: 1 } }

/* 3) Grid “mista” com destaques maiores (para quem prefere grid, não columns) */
.grid-cards.mixed{
  display:grid; gap:14px;
  grid-template-columns: repeat(6, 1fr);
}
.grid-cards.mixed > *{ grid-column: span 2; border-radius:16px; box-shadow:2px 2px 0 var(--shadow) }
.grid-cards.mixed > *.wide{ grid-column: span 3 }  /* destaque horizontal */
.grid-cards.mixed > *.tall{ grid-row: span 2 }     /* destaque vertical */
@media (max-width: 980px){
  .grid-cards.mixed{ grid-template-columns: repeat(4, 1fr) }
  .grid-cards.mixed > *.wide{ grid-column: span 4 }
}
@media (max-width: 640px){
  .grid-cards.mixed{ grid-template-columns: repeat(2, 1fr) }
  .grid-cards.mixed > *,
  .grid-cards.mixed > *.wide{ grid-column: span 2 }
}

/* 4) Full‑bleed dentro da janela (media encosta às bordas da window) */
.content .media-bleed{
  margin-left: -14px; margin-right: -14px;
}
.content .media-bleed > img,
.content .media-bleed > video{ width:100%; height:auto; border-radius:0 }

/* 5) Canto mais orgânico (elíptico) e sombra suave */
.round-blob{ border-radius: 32px / 22px; box-shadow: 0 8px 20px rgba(0,0,0,.08), 2px 2px 0 var(--shadow) }

/* 6) Opcional: “polaroid” para variar */
.polaroid{
  background:#fff; border:1px solid #e9d1ff; border-radius:12px;
  padding:8px 8px 14px; box-shadow:2px 2px 0 var(--shadow);
}
.polaroid > img{ border-radius:8px; display:block; width:100%; height:auto }

/* Grade de 12 colunas para composições lado-a-lado */
.section-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; align-items:start }
.span-3{ grid-column: span 3 } .span-4{ grid-column: span 4 }
.span-5{ grid-column: span 5 } .span-6{ grid-column: span 6 }
.span-7{ grid-column: span 7 } .span-8{ grid-column: span 8 }
.span-12{ grid-column: span 12 }
@media (max-width: 980px){ .section-grid{ grid-template-columns:repeat(8,1fr) } .section-grid > *{ grid-column: 1/-1 } }
@media (max-width: 640px){ .section-grid{ grid-template-columns:repeat(4,1fr) } .section-grid > *{ grid-column: 1/-1 } }

/* Grelha de galeria sem cortes (auto-fit) + items de destaque */
.gallery-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.gallery-grid > *{ border-radius:16px; box-shadow:2px 2px 0 var(--shadow) }
.gallery-grid img, .gallery-grid video{ width:100%; height:auto; display:block; border-radius:16px }
@media (min-width: 980px){
  .gallery-grid .feature{ grid-column: span 2 } /* destaca 2 colunas em desktop */
}

/* Texto de seção curto (lado esquerdo) */
.section-lead{ color:var(--ink-soft); margin:0 0 6px; line-height:1.5 }
/* =============== Case page (layout editorial) =============== */
.case-page .window{
  /* mantém a mesma caixa do resto do site */
  background: var(--card);
  border: 2px solid var(--bar);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--shadow);
  margin: 16px 0;
}

/* Anchor para os stickers da página */
.case-page .window{
  position: relative; /* permite posicionar absolutos dentro da window */
}

.case-page .titlebar{
  position: sticky;
  top: 0;
  z-index: 10;
  border-top-left-radius: calc(var(--win-r) - var(--win-b));
  border-top-right-radius: calc(var(--win-r) - var(--win-b));
  overflow: hidden;
}

/* TOC sticky sob o título (full‑bleed dentro de .content) */
.case-page .case-toc{
  position: sticky;
  top: 44px;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  /* full‑bleed: compensa o padding lateral do .content (18px) */
  margin: 0 -18px 12px;
  padding: 10px 18px;

  background: linear-gradient(180deg, #fff7ff, rgba(255,247,255,.85));
  border-bottom: 1px solid #e9d1ff;
  border-radius: 0 0 10px 10px; /* integra com a window */
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 0 var(--shadow);
}

/* Mobile: alinhar com o padding menor do .content (10px) */
@media (max-width: 640px){
  .case-page .case-toc{
    margin: 0 -10px 10px;
    padding: 8px 10px;
    top: 40px;                /* titlebar ligeiramente menor */
    box-shadow: 0 1px 0 var(--shadow);
  }
}

/* Fun toolbar */
.case-page .fun-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.case-page .fun-toolbar .btn {
  font: inherit;
  font-size: .9rem;
  background: var(--window-title, #1c1c1c);
  color: #fff;
  border: 1px solid #000;
  padding: .35rem .65rem;
  border-radius: 6px;
  cursor: pointer;
}
.case-page .fun-toolbar .btn:hover { transform: translateY(-1px) }
.case-page .fun-toolbar .fun-toggle { display:flex; align-items:center; gap:6px; font-size:.9rem }

/* Toolbar button should not inherit the tiny circular .btn */
.case-page .fun-toolbar .btn{
  width:auto; height:auto; display:inline-flex; align-items:center; gap:6px;
}

/* Hero stickers */
.case-page .hero-stack { position: relative }
.case-page .hero-stack .sticker {
  position: absolute;
  background: #fffd80;
  color: #1c1c1c;
  border: 1px solid #111;
  border-radius: 12px;
  padding: .25rem .5rem;
  font-family: "VT323", monospace;
  text-transform: uppercase;
  letter-spacing: .5px;
  transform: rotate(-6deg);
  box-shadow: 0 1px 0 #0002;
  user-select: none;
  pointer-events: none;
}
.case-page .hero-stack .sticker.s1{ top:8px; left:8px;  --rot:-6deg }
.case-page .hero-stack .sticker.s2{ bottom:10px; right:12px; --rot: 8deg }

/* Stickers do herói — formato pill para bater com os page‑sticker */
.case-page .hero-stack .sticker{
  border-radius: 999px;
  padding: .28rem .6rem;   /* igual aos page‑sticker */
  white-space: nowrap;
}

/* Bobbing suave (já existente) */
.case-page .hero-stack .sticker{
  animation: sticker-bob 3.4s ease-in-out infinite alternate;
}
@keyframes sticker-bob{
  from{ transform: translateY(0) rotate(var(--rot, -6deg)) }
  to  { transform: translateY(-6px) rotate(calc(var(--rot, -6deg) + .8deg)) }
}

/* Wobble mais intenso só neste case */
.case-page #aveiGallery.maxi > *{
  animation: wiggle-maxi 2.6s ease-in-out infinite;
}
.case-page #aveiGallery.maxi > *:nth-child(3n){ animation-duration: 2.2s; animation-delay: .12s }
.case-page #aveiGallery.maxi > *:nth-child(4n){ animation-duration: 3.1s; animation-delay: .28s }
@keyframes wiggle-maxi{
  0%,100%{ transform: translateY(0) rotate(0) }
  50%    { transform: translateY(-14px) rotate(1.2deg) }
}

/* Disco overlay durante “party” pulses */
.case-page .window.disco::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(120px 120px at var(--gx,10%) var(--gy,50%), rgba(255,255,255,.35), transparent 60%),
    conic-gradient(from var(--a,0deg),
      rgba(255,105,180,.28), rgba(255,209,244,.18), rgba(123,223,100,.18),
      rgba(75,194,240,.18), rgba(255,224,102,.18), rgba(185,128,255,.18), rgba(255,105,180,.28));
  mix-blend-mode: screen;
  opacity:.35;
  animation: disco-sweep 6s linear infinite;
}
@keyframes disco-sweep{
  0%   { --a: 0deg;   --gx: 10%;  --gy: 40% }
  50%  { --a: 180deg; --gx: 90%;  --gy: 60% }
  100% { --a: 360deg; --gx: 10%;  --gy: 40% }
}

/* Shine aleatório sobre itens da galeria */
.case-page .gallery-grid > *.shine{ position:relative; overflow:hidden }
.case-page .gallery-grid > *.shine::after{
  content:""; position:absolute; inset:-10% -60%; 
  background: linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.55) 45%, transparent 50% 100%);
  transform: translateX(-120%) rotate(12deg);
  animation: shine-sweep 1.6s ease-out forwards;
  mix-blend-mode: screen; pointer-events:none;
}
@keyframes shine-sweep{
  to{ transform: translateX(120%) rotate(12deg) }
}

/* Sparkle minimal (aproveita se for usado pelo JS) */
.sparkle{
  position: fixed; width:6px; height:6px; pointer-events:none; z-index:99999;
  background: radial-gradient(circle, #fff, #ffd1f4 62%, transparent 63%);
  border-radius:50%;
  animation: sparkle-fade .6s ease-out forwards;
}
@keyframes sparkle-fade{
  to{ opacity:0; transform: translateY(-10px) scale(.6) }
}

.btn-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
@media (prefers-reduced-motion: no-preference) {
  .case-page .gallery-grid.fun-wobble > * { animation: wiggle 3.6s ease-in-out infinite }
  .case-page .gallery-grid.fun-wobble > *:nth-child(3n) { animation-duration: 4.2s }
  .case-page .gallery-grid.fun-wobble > *:nth-child(4n) { animation-duration: 5s }
}

/* Wiggle base (usado por .gallery-grid.fun-wobble) */
@keyframes wiggle{
  0%,100%{ transform: translateY(0) rotate(0deg) }
  50%    { transform: translateY(-6px) rotate(.6deg) }
}

/* Confetti (mais suave/realista) */
.confetti{
  position: fixed;
  left: 0; top: 0;
  width: 8px; height: 8px;
  border-radius: 2px;
  /* use safe fallbacks so animation always computes */
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(0deg);
  animation-name: confetti-fall;
  animation-duration: 3s; /* JS may override */
  animation-timing-function: cubic-bezier(.15,.55,.25,1);
  animation-fill-mode: forwards;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
}
@keyframes confetti-fall{
  to{
    transform: translate(
      calc(var(--x, 0px) + var(--dx, 0px)),
      calc(var(--y, 0px) + var(--dy, 480px))
    ) rotate(var(--rot, 480deg));
    opacity: 0;
  }
}

/* Hero: se não estiver em full-bleed, não ampliar acima do natural e centra */
.case-page .hero-stack:not(.media-bleed) img{
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Fixed scroll progress line (always visible) */
#scroll-line{
  position: fixed;
  left: 0; top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--bar), #ffd1f4);
  z-index: 99990;
  pointer-events: none;
}

/* Turn off the old titlebar progress strip */
.case-page .titlebar::before{ width: 0 !important }
/* === Stickers com cores variadas (mantém pill/peel e sombras) === */
/* Hero stickers */
.case-page .hero-stack .sticker.s1{
  background: var(--accent);      /* lavanda */
  color:#1c1c1c; border-color:#111;
}
.case-page .hero-stack .sticker.s2{
  background: #b8ffdf;            /* mint suave */
  color:#1c1c1c; border-color:#111;
}

/* Page stickers */
.case-page .page-sticker.ps1{ background: var(--badge);  color:#1c1c1c; border-color:#111 } /* rosa */
.case-page .page-sticker.ps2{ background: #b8ffdf;       color:#1c1c1c; border-color:#111 } /* mint */
.case-page .page-sticker.ps3{ background: #bfe9ff;       color:#1c1c1c; border-color:#111 } /* sky */
.case-page .page-sticker.ps4{ background: var(--accent); color:#1c1c1c; border-color:#111 } /* lavanda */
.case-page .page-sticker.ps5{ background: #ffd7b3;       color:#1c1c1c; border-color:#111 } /* pêssego */
.case-page .page-sticker.ps6{ background: #fffd80;       color:#1c1c1c; border-color:#111 } /* lemon (original) */

/* Intro clean: reduz ruído acima da dobra */
.case-page .page-sticker,
.case-page .hero-stack .sticker{
  transition: opacity .25s ease, transform .3s ease;
}

.case-page.intro-clean .page-sticker:not(.ps1){
  opacity: 0;
  transform: translateY(6px) scale(.98);
  filter: saturate(.9);
}

/* Opcional: deixar só um sticker no herói no arranque */
.case-page.intro-clean .hero-stack .sticker.s2{
  opacity: 0;
  transform: translateY(2px) scale(.98);
}

/* Respeito a quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .case-page .page-sticker,
  .case-page .hero-stack .sticker{ transition: none !important }
}

/* Corner language clip (fixo no topo direito) */
.corner-clip{
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 99996;
  background: var(--bar);
  color: #fff;
  border: 2px solid var(--bar-dark);
  border-radius: 12px 0 0 12px;
  padding: 6px 10px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: pointer;
  user-select: none;
}
.corner-clip:hover{ transform: translateY(-1px) }
/* Botão “Início” (amarelo) */
.btn-home{ background:#ffd966 }
/* Visual-only window dots: disable interactions for min/max */
.controls .btn-min,
.controls .btn-max{
  pointer-events: none;
  cursor: default;
}

/* Hide old badge language toggle on the index */
#lang-toggle{ display:none !important }
/* Back-to-top button (global) */
#to-top{
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--bar-dark);
  background: var(--bar);
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: pointer;
  display: none;            /* shown via JS after scroll */
  z-index: 99995;           /* under .corner-clip (99996) */
}
#to-top:hover{ transform: translateY(-1px) }

/* Optional: style the progress bar if present */
#scroll-progress{
  position: fixed;
  left: 0; top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--bar), #ffd1f4);
  z-index: 99990;
  pointer-events: none;
}

/* H1 textual simples no banner */
.page-lead{
  margin: 8px 10px 10px;
  font-size: 1.1rem;
  color: var(--ink);
}

/* Mini‑barra fixa com CTA e âncoras */
.top-strip{
  position: fixed;
  left: 50%;
  top: 8px;
  transform: translateX(-50%) translateY(-110%);
  display: flex;
  gap: 8px;
  align-items: center;
  background: linear-gradient(180deg, var(--card), #fff7ff);
  border: 2px solid var(--bar);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 4px 4px 0 var(--shadow);
  z-index: 99994; /* abaixo da corner-clip (99996) e do to-top (99995) */
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.top-strip.is-visible{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.top-strip .mini-nav{ display:flex; gap:8px; flex-wrap:wrap }
.top-strip .mini-link{
  text-decoration: none;
  background:#ffe6ff;
  border:1px solid #d49aff;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--shadow);
}
.top-strip .cta-primary{
  background: var(--bar);
  border: 2px solid var(--bar-dark);
  color: #fff;
  border-radius:10px;
  padding: 6px 10px;
  box-shadow: 2px 2px 0 var(--shadow);
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
}
.top-strip .open-to-work{
  background: #000;
  color: #ffdeff;
  border: 2px solid #ffd1f4;
  border-radius: 999px;
  padding: 4px 8px;
  font-family: 'VT323', monospace;
  letter-spacing: .5px;
}

/* Foco visível consistente */
:where(a, button, input, textarea, select, .menu-item, .btn-case, .chip, .cta-primary, .mini-link, .corner-clip, #to-top):focus-visible{
  outline: 2px dashed #1c1c1c;
  outline-offset: 2px;
}

/* Footer extra linha */
.footer .footer-otw a{ text-decoration: underline }
/* Utilitário de acessibilidade para esconder visualmente (mas manter no DOM) */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

/* keep portfolio title link styled like plain text */
.titlebar .title a.title-link{
  color: inherit;
  text-decoration: none;
}
.titlebar .title a.title-link:hover{
  text-decoration: underline;
}
.titlebar .title a.title-link:focus{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Desktop: center column slightly wider */
@media (min-width: 981px){
  .layout{
    grid-template-columns: minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr);
  }
}

/* ========== Listas limpas (sem cartões) ========== */
.window .status.list-clean{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.window .status.list-clean li{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:8px 4px;
  border-bottom:1px dashed #e9d1ff;
  border-radius:0;
}
.window .status.list-clean li:last-child{ border-bottom:0 }
.window .status.list-clean li b{ display:block; margin-bottom:2px }

/* Serviços em 2 colunas em desktop */
@media (min-width: 981px){
  .window .status.list-clean.two-col{ grid-template-columns:1fr 1fr }
}

/* ========== Timeline (Experiência / Educação) ========== */
.window .status.timeline{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding-left:0; /* garante alinhamento */
}
.window .status.timeline::before{
  content:"";
  position:absolute;
  left:10px; top:0; bottom:0;
  width:2px;
  background:linear-gradient(#ffd1f4, #ff69b4);
}
.window .status.timeline > li{
  position:relative;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:8px 10px 8px 28px; /* espaço para o ponto */
  border-radius:10px;
}
.window .status.timeline > li::before{
  content:"";
  position:absolute;
  left:4px; top:18px;
  width:10px; height:10px;
  background:#fff;
  border:2px solid #d9539a;
  border-radius:50%;
  box-shadow:1px 1px 0 var(--shadow);
}
.window .status.timeline > li:hover{
  background:rgba(255,209,244,.35);
}

/* Sub-itens como notas suaves (sem bullets) */
.window .status.timeline li ul{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.window .status.timeline li ul li{
  background:#fff;
  border:1px solid #e9d1f4;
  padding:8px 10px;
  border-radius:12px;
  box-shadow:1px 1px 0 var(--shadow);
  color:var(--ink);
}

/* Links mantêm sublinhado em listas limpas */
.window .status.list-clean a{ text-decoration: underline }
/* Now Playing – equalizador simples */
.nowplaying .eq{ display:flex; gap:3px; height:14px; margin:6px 0 }
.nowplaying .eq span{ width:4px; background:var(--bar); border-radius:3px; transform-origin:bottom; opacity:.9; height:6px }
.nowplaying .eq.is-on span:nth-child(1){ animation:eq-bounce .6s ease-in-out infinite }
.nowplaying .eq.is-on span:nth-child(2){ animation:eq-bounce .55s ease-in-out .05s infinite }
.nowplaying .eq.is-on span:nth-child(3){ animation:eq-bounce .5s ease-in-out .1s infinite }
.nowplaying .eq.is-on span:nth-child(4){ animation:eq-bounce .58s ease-in-out .02s infinite }
.nowplaying .eq.is-on span:nth-child(5){ animation:eq-bounce .62s ease-in-out .08s infinite }
@keyframes eq-bounce{ 0%{transform:scaleY(.3)} 50%{transform:scaleY(1)} 100%{transform:scaleY(.35)} }
/* === Cute audio player === */
.nowplaying{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
}
.nowplaying .cover{
  width: 96px; height: 96px; object-fit: cover; border-radius: 14px;
  border: 2px solid var(--bar);
  box-shadow: 2px 2px 0 var(--shadow);
}
.nowplaying .track{ display: grid; gap: 6px }
.nowplaying .track strong{ display:block; margin:0 0 2px }

/* Controles “cute” em flex, com wrap */
.nowplaying .np-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nowplaying .np-btn{
  font: inherit;
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1;
  background: var(--bar);
  color: #fff;
  border: 2px solid var(--bar-dark);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: pointer;
  min-width: 42px;           /* mantém largura do botão consistente */
  text-align: center;
}
.nowplaying .np-btn:hover{ transform: translateY(-1px) }

.nowplaying .np-seek{ flex: 1 1 180px }  /* cresce e encolhe conforme espaço */
.nowplaying .np-vol{ width: 110px }      /* largura estável */
.nowplaying .np-time{
  font-size: .9rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 92px;
}

/* Sliders cute (mantém o que já tinhas) */
.nowplaying .np-seek,
.nowplaying .np-vol{
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  background: linear-gradient(90deg, #ff69b4, #ffd1f4);
  border: 1px solid #e9d1f4;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff8, 2px 2px 0 var(--shadow);
}
.nowplaying .np-vol{ height: 8px }
.nowplaying .np-seek::-webkit-slider-thumb,
.nowplaying .np-vol::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ff80c8; border: 2px solid var(--bar-dark);
  box-shadow: 1px 1px 0 var(--shadow); cursor: pointer;
}
.nowplaying .np-seek::-moz-range-thumb,
.nowplaying .np-vol::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: #ff80c8; border: 2px solid var(--bar-dark);
  box-shadow: 1px 1px 0 var(--shadow); cursor: pointer;
}
.nowplaying .np-seek::-moz-range-track,
.nowplaying .np-vol::-moz-range-track{
  height: 10px; background: linear-gradient(90deg, #ff69b4, #ffd1f4);
  border: 1px solid #e9d1f4; border-radius: 999px;
}

/* Mobile: deixar seek ocupar a linha inteira quando estreito */
@media (max-width: 560px){
  .nowplaying .np-controls{ gap:8px }
  .nowplaying .np-seek{ flex: 1 1 100%; order: 2 }
  .nowplaying .np-time{ order: 3 }
  .nowplaying .np-vol{ order: 5; width: 100% }
}

/* Esconde o <audio> nativo quando o JS ativa o skin */
.nowplaying.js-player-ready audio{ display: none !important }
/* Só no cartão "Sobre" (content + profile) */
.content.profile{
  padding-top: 8px;        /* was 14px */
  padding-bottom: 10px;    /* was 16px */
}

.profile{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:6px;                 /* was 8px */
}

/* Avatar menor e centrado */
.avatar{
  width: clamp(170px, 26vw, 220px);  /* antes: clamp(260px,40vw,340px) */
  height: auto;
  display: block;
  margin: 6px auto 8px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

/* Mobile */
@media (max-width: 640px){
  .avatar{ width: clamp(150px, 55vw, 190px); margin: 4px auto 6px; }
}

/* Espaçamento mais justo no cartão */
.content.profile{ padding-top: 8px; padding-bottom: 10px; }
.profile .section-lead{ margin: 0 0 8px; }
.profile p{ margin: 4px 0; }
/* === Brilho universal (exclui badges estáticas) === */

.menu-item,
btn-case,
btn-all,
.chip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Estrela */
.menu-item::after,
btn-case::after,
btn-all::after,
.chip::after {
  content: "✦";
  position: absolute;
  left: -22px;
  bottom: 6px;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px #ff69b4, 0 0 10px #ffb3e6;
  opacity: 0;
  transform: scale(.65) rotate(-10deg);
  transition: left .38s cubic-bezier(.55,.06,.19,.99),
              opacity .3s ease,
              transform .38s cubic-bezier(.55,.06,.19,.99);
  pointer-events: none;
  z-index: 2;
}

/* Chips menores */
.chip::after {
  bottom: 4px;
  font-size: 12px;
  left: -18px;
}

/* Hover/focus */
.menu-item:hover::after,
.menu-item:focus-visible::after,
btn-case:hover::after,
btn-case:focus-visible::after,
btn-all:hover::after,
btn-all:focus-visible::after,
.chip:hover::after,
.chip:focus-visible::after {
  left: 8px;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Sheen */
.menu-item::before,
btn-case::before,
btn-all::before,
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 45%,
      rgba(255,255,255,0) 70%);
  transform: translateX(-140%) skewX(-20deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.77,0,.18,1), opacity .4s;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.chip::before {
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.35) 45%,
      rgba(255,255,255,0) 70%);
}

.menu-item:hover::before,
.menu-item:focus-visible::before,
btn-case:hover::before,
btn-case:focus-visible::before,
btn-all:hover::before,
btn-all:focus-visible::before,
.chip:hover::before,
.chip:focus-visible::before {
  transform: translateX(140%) skewX(-20deg);
  opacity: 1;
}

/* Press */
.menu-item:active,
btn-case:active,
btn-all:active,
.chip:active {
  transform: translateY(1px);
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  .menu-item::before,
  btn-case::before,
  btn-all::before,
  .chip::before {
    transition: none !important;
    opacity: 0 !important;
  }
  .menu-item::after,
  btn-case::after,
  btn-all::after,
  .chip::after {
    transition: none !important;
    opacity: .85;
    left: 6px;
    transform: scale(.9);
  }
}

/* === Cursor bonitinho ===================================== */
@media (pointer: fine) {
  html.has-custom-cursor body { cursor: none; }

  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    pointer-events: none;
    z-index: 10000;
    transform: translate3d(-50%, -50%, 0) scale(.65);
    border: 2px solid var(--bar);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffd1f4 0%, #ff80c800 70%);
    box-shadow: 0 0 6px -2px #ff80c8, 0 0 14px -4px #ff69b4;
    /* Removemos transition no transform para não atrasar o movimento */
    transition: box-shadow .25s, background .25s, border-color .25s;
    will-change: transform;
  }
  .custom-cursor.is-hover {
    box-shadow: 0 0 8px -1px #ff69b4, 0 0 18px -2px #ff80c8;
    background: radial-gradient(circle at 40% 40%, #ffb3e6 0%, #ff69b400 70%);
    /* escala aplicada via classe JS */
    transform: translate3d(var(--cx, -50%), var(--cy, -50%), 0) scale(1.05);
  }
  .custom-cursor.is-down {
    transform: translate3d(var(--cx, -50%), var(--cy, -50%), 0) scale(.85);
  }
  @media (prefers-reduced-motion: reduce) {
    .custom-cursor { transition: none; }
  }
}
@media (pointer: coarse) {
  #cursor.custom-cursor { display: none !important; }
}

/* Hover underline branco para títulos clicáveis */
.titlebar .title .title-link{
  text-decoration:none;
  position:relative;
  display:inline-block;
}
.titlebar .title .title-link:hover,
.titlebar .title .title-link:focus-visible{
  text-decoration:underline;
  text-decoration-color:#fff;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.titlebar .title .title-link:focus-visible{
  outline:2px solid #ff80c8;
  outline-offset:3px;
  border-radius:4px;
}

/* Idiomas baseados no atributo lang do <html> para evitar flash */
html[lang="pt-PT"] .lang-en { display: none !important; }
html[lang="en"]     .lang-pt { display: none !important; }

/* (Opcional) fallback anterior ainda pode ficar: 
   body.lang-pt .lang-en / body.lang-en .lang-pt */


/* T-shirts flip grid */
.tshirts-row{
  grid-column:1 / -1;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:14px 16px 12px;
  border:1px solid #ffd1f4;
  border-radius:20px;
  background:
    linear-gradient(160deg,#fff7ff 0%, #ffe6ff 55%, #ffd1f4 100%);
  box-shadow:2px 2px 0 var(--shadow);
  position:relative;
}
.tshirts-row::before{
  content:"T‑shirts";
  position:absolute;
  top:-10px; left:18px;
  font-family:'VT323',monospace;
  font-size:16px;
  background:#ff69b4;
  color:#fff;
  padding:2px 8px 3px;
  border-radius:8px;
  box-shadow:2px 2px 0 var(--shadow);
  letter-spacing:.5px;
}
.tee{
  position:relative;
  margin:0;
  background:#fff;
  border:1px solid #e9d1f4;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:3/4;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  cursor:pointer;
  transition:transform .35s, background .35s, border-color .35s;
}
.tee:hover{
  transform:translateY(-5px);
  background:#fff9ff;
  border-color:#ffb3e6;
}
.tee img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  padding:12px                                                                                                                                                                                                                                                                                                                               10px 30px;
  transition:opacity .45s;
}
.tee img.back{ opacity:0 }
.tee:hover img.front,
.tee.show-back img.front {
  opacity: 0;
}
.tee.show-back img.back {
  opacity: 1;
}

/* T‑shirts: hover troca frente/costas; mobile usa .is-flipped */
.tee-swap { position: relative; }
.tee-swap img { display: block; width: 100%; height: auto; }
.tee-swap img.back {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .2s ease;
}
.tee-swap:hover img.back, .tee-swap.is-flipped img.back { opacity: 1; }
.tee-swap:hover img.front, .tee-swap.is-flipped img.front { opacity: 0; }

/* T‑shirts numa linha, sem moldura, hover troca frente/costas */
.gallery-grid > .tshirts-line { grid-column: 1 / -1; }

.tshirts-line { display:flex; gap:16px; align-items:stretch; margin:6px 0; }
.tshirts-line .tee-swap { flex:0 0 calc((100% - 3*16px)/4); min-width:0; }

.tshirts-line,
.tshirts-line .tee-swap,
.tshirts-line img { box-shadow:none !important; background:transparent !important; }

/* Dica no modal (apenas em T‑shirts) */

.modal__dialog { position: relative; }
.modal__hint{
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-size: .8rem;
  color: #240024;
  background: #ffe6ff;
  border: 1px solid #d49aff;
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--shadow, rgba(0,0,0,.15));
  pointer-events: none;
}

/* FIX: hero full‑bleed dentro da window (remove gutters brancas) */
.case-page .hero-stack.media-bleed {
  margin-left: -14px;               /* compensa o padding da .content */
  margin-right: -14px;
  width: calc(100% + 28px);
  box-sizing: border-box;

  padding: 0;                       /* nada dentro */
  overflow: hidden;                 /* evita que a imagem "vaze" para fora da janela */
  border-radius: 0 0 calc(var(--win-r) - var(--win-b)) calc(var(--win-r) - var(--win-b)); /* integra com a window */
  background: transparent;
}

/* imagem ocupa totalmente a área do hero sem bordas/brancos */
.case-page .hero-stack.media-bleed .case-cover,
.case-page .hero-stack.media-bleed > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;                /* remove cantos brancos visíveis */
  object-fit: contain;             /* mantém a imagem inteira; use cover se quiseres preencher / cortar */
}

/* mobile: manter o mesmo comportamento com compensação do padding reduzido */
@media (max-width: 720px) {
  .case-page .hero-stack.media-bleed {
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
  }
}

/* Remove sublinhados no portefólio (cards, filtros e títulos) */
.window > .content .projects-grid a,
.window > .content .projects-grid a:link,
.window > .content .projects-grid a:visited,
.window > .content .projects-grid a:hover,
.window > .content .projects-grid a:focus,
.window > .content .filter-bar .chip,
.titlebar .title a.title-link {
  text-decoration: none !important;
}

/* garantir que botões/filtros continuam com aparência butão (não sublinhado) */
.window > .content .filter-bar .chip { text-decoration: none; }

/* manter foco visível para acessibilidade (não remove outline) */
:where(.window > .content .projects-grid a, .titlebar .title a.title-link):focus-visible{
  outline: 2px dashed #1c1c1c;
  outline-offset: 2px;
}

/* Logofólio: forçar 2 linhas × 5 colunas no case */
.logos-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: start;
  grid-auto-rows: minmax(0, auto);
}

/* responsivo */
@media (max-width: 1200px){
  .logos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .logos-grid { grid-template-columns: 1fr; }
}

/* garante que o loop GIF fica alinhado e com largura do content */
.logo-loop-full {
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}

/* Restore stickers style inside case pages (pills with colour + subtle shadow) */
.page-sticker {
  display: inline-block;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;           /* pill shape */
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #111;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  margin: 6px 6px 6px 0;
  vertical-align: middle;
  transform: none;                /* cancela transforms indesejadas */
  overflow: visible;              /* garante que o conteúdo não é cortado */
  text-transform: none;
  pointer-events: none;           /* se forem puramente decorativos */
}

/* individual colours (ajusta para as tuas palettes) */
.page-sticker.ps1 { background:#ffd6e0; color:#7b1f3a; } /* logo */
.page-sticker.ps2 { background:#d7f0ff; color:#0b4f6c; } /* cores */
.page-sticker.ps3 { background:#fff8d6; color:#7a5a00; } /* tipos */
.page-sticker.ps4 { background:#e8f7ea; color:#0b6a2e; } /* print */
.page-sticker.ps5 { background:#fff0e0; color:#8a3b00; } /* eventos */
.page-sticker.ps6 { background:#f3e7ff; color:#4b1b7a; } /* digital */

/* Stickers: default seguro (no fluxo do documento) + utilitários para posicionamento sem overlap */
.case-page .page-sticker {
  position: static;             /* fluxo normal — não sobrepõe conteúdo */
  display: inline-block;
  white-space: nowrap;
  padding: .32rem .7rem;
  border-radius: 999px;
  font-family: "VT323", monospace;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #111;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
  text-transform: uppercase;
  letter-spacing: .5px;
  transform: none;
  z-index: auto;
}

/* --- OPTIONAL: espalhar de forma segura SÓ quando adicionares .use-sticker-spread ao .case-page --- */
/* isto garante que NADA muda enquanto não optares explicitamente */
.case-page.use-sticker-spread { position: relative; }

/* posições absolutas "seguras" — só aplicam se a página tiver .use-sticker-spread */
.case-page.use-sticker-spread .page-sticker.ps-pos-1,
.case-page.use-sticker-spread .page-sticker.ps-pos-2,
.case-page.use-sticker-spread .page-sticker.ps-pos-3,
.case-page.use-sticker-spread .page-sticker.ps-pos-4,
.case-page.use-sticker-spread .page-sticker.ps-pos-5,
.case-page.use-sticker-spread .page-sticker.ps-pos-6 {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  margin: 0;
  transform-origin: center;
  transition: transform .25s ease, opacity .25s ease;
  animation: sticker-bob 3.2s ease-in-out infinite alternate;
}

/* safe coords (ajusta se alguma ainda tocar algo) */
.case-page.use-sticker-spread .page-sticker.ps-pos-1 { top: 12px; left: 18px; --r:-6deg; transform: rotate(var(--r)); }
.case-page.use-sticker-spread .page-sticker.ps-pos-2 { top: 12px; right: 18px; --r:6deg;  transform: rotate(var(--r)); }
.case-page.use-sticker-spread .page-sticker.ps-pos-3 { top: 38%; left: 18px; --r:-4deg; transform: translateY(-50%) rotate(var(--r)); }
.case-page.use-sticker-spread .page-sticker.ps-pos-4 { top: 38%; right: 18px; --r:4deg;  transform: translateY(-50%) rotate(var(--r)); }
.case-page.use-sticker-spread .page-sticker.ps-pos-5 { bottom: 72px; left: 18px; --r:-5deg; transform: rotate(var(--r)); }
.case-page.use-sticker-spread .page-sticker.ps-pos-6 { bottom: 72px; right: 18px; --r:5deg;  transform: rotate(var(--r)); }

/* mobile: desactivar espalhamento e voltar ao fluxo normal */
@media (max-width:760px){
  .case-page.use-sticker-spread .page-sticker.ps-pos-1,
  .case-page.use-sticker-spread .page-sticker.ps-pos-2,
  .case-page.use-sticker-spread .page-sticker.ps-pos-3,
  .case-page.use-sticker-spread .page-sticker.ps-pos-4,
  .case-page.use-sticker-spread .page-sticker.ps-pos-5,
  .case-page.use-sticker-spread .page-sticker.ps-pos-6 {
    position: static !important;
    transform: none !important;
    animation: none !important;
    margin: 6px 8px 6px 0;
    pointer-events: auto;
  }
}

/* bob animation */
@keyframes sticker-bob {
  from { transform: translateY(0) rotate(var(--r, 0deg)); }
  to   { transform: translateY(-6px) rotate(calc(var(--r, 0deg) + .8deg)); }
}

/* REMOVE ALL PILLS/STICKERS — override final (reversível) */
.page-sticker,
.case-page .page-sticker,
.case-page .hero-stack .sticker,
.sticker {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.project-card img {
  width: 100%;
  height: 240px; /* ou o valor que usas para as outras imagens */
  object-fit: contain; /* Mostra a imagem inteira sem cortar */
  object-position: center; /* Centraliza a imagem */
  background-color: #fff; /* ou a cor do fundo dos cards */
  border-radius: 8px; /* mantém o mesmo estilo se tiveres */
  display: block;
}