/*
Theme Name: Tairine Portfolio
Theme URI: https://tairinemuller.com
Author: Tairine Müller
Description: Tema de portfólio pessoal, com Custom Post Type "Trabalhos" para estudos de caso.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: tairine-portfolio
*/

/* ==========================================================================
   1. Fontes locais
   ========================================================================== */
@font-face {
  font-family: 'Andada Pro';
  src: url('assets/fonts/andada-pro/AndadaPro-VariableFont_wght.ttf') format('truetype-variations'),
       url('assets/fonts/andada-pro/AndadaPro-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Andada Pro';
  src: url('assets/fonts/andada-pro/AndadaPro-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('assets/fonts/andada-pro/AndadaPro-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */
:root {
  --color-bg: #ffffff;
  --color-ink: #1f1f1f;
  --color-body: #4e4e4e;
  --color-dark: #282828;
  --color-dark-2: #333333;
  --color-accent: #53599e;
  --color-hero-blue: #566bd5;
  --color-accent-light: #eef0fa;
  --color-border: #e3e3ea;
  --color-card-border: #d9daf0;

  --font-serif: 'Andada Pro', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', monospace;

  --container-width: 1320px;
  --gutter: clamp(24px, 5vw, 80px);
  --header-height: 112px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
}
h1 em, h2 em, h3 em, h4 em { font-style: italic; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  background: var(--color-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 16px 0 30px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-pill:not(:has(.btn-pill__icon)) { padding-right: 22px; }
.btn-pill:hover { background: #fff; color: var(--color-dark); }
.btn-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-dark);
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.btn-pill:hover .btn-pill__icon { background: #fff; }
.btn-pill__icon svg,
.btn-icon-round svg {
  width: 10px;
  height: 10px;
  display: block;
}
.btn-icon-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-dark);
  color: #fff;
  transition: transform 0.2s ease;
}
.btn-icon-round:hover { transform: scale(1.06); }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   3. Site header
   ========================================================================== */
.site-header {
  padding: 40px var(--gutter) 20px;
}
.site-header__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-logo { display: inline-block; line-height: 0; }
.site-logo img { max-height: 52px; width: auto; display: block; }
.site-header__social {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-header__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.site-header__social a:hover { opacity: 0.6; }
.site-header__social img { width: 22px; height: 22px; display: block; }

/* ==========================================================================
   4. Home – hero
   ========================================================================== */
/* A seção hero tem um recuo lateral mínimo fixo (maior que o do header);
   em telas muito largas, quem cresce é a margem automática do container
   (max-width + margin:auto), não o padding — por isso os dois lados
   (texto e composição visual) continuam acompanhando o redimensionamento.
   A seção ocupa o espaço entre o header e a próxima seção (100vh menos a
   altura do header) e centraliza o conteúdo verticalmente nesse espaço.
   A composição visual (foto + arco azul) fica presa no topo da seção —
   só o texto se centraliza dentro da altura que ela ocupa. */
.hero {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: flex-start;
  padding: 0px 100px;
}
.hero__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
}
.hero__text { align-self: center; }
.hero__greeting { margin-bottom: 10px; font-size: 16px; }
.hero__title {
  font-size: 60px;
  line-height: 60px;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.hero__highlight {
  display: inline-block;
  background: var(--color-hero-blue);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -0.04em;
  white-space: nowrap;
  padding: 4px 14px;
  border-radius: 6px;
  margin-bottom: 28px;
}
.hero__highlight em { font-style: italic; }
.hero__bio { font-size: 16px; max-width: 46ch; }
.hero__bio strong { color: var(--color-ink); }

/* ---- hero-visual (composição de imagem + formas decorativas) ----
   Posições calibradas em % a partir das coordenadas em pixel medidas
   no print prints/first_scroll_v2.png (caixa de referência 690x667). */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 690 / 667;
  margin-inline: auto;
  overflow: visible;
}
.hero-visual__layer {
  position: absolute;
  will-change: transform;
  transition: transform 0.15s ease-out;
}
.hero-visual__blue {
  top: 0%;
  left: 32.5%;
  width: 67.5%;
  z-index: 1;
}
.hero-visual__blue img { width: 100%; height: auto; display: block; }
.hero-visual__photo {
  top: 12%;
  left: 0%;
  width: 80.1%;
  z-index: 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-visual__photo img { width: 100%; height: auto; display: block; }
/* O parallax (JS) escreve translate3d direto no style do .hero-visual__star,
   então o recorte em forma de estrela + o efeito glass ficam num elemento
   FILHO fixo (136x136, igual ao viewBox do SVG) — assim o transform:scale()
   do glass nunca é sobrescrito pelo transform do parallax. */
.hero-visual__star {
  top: 75%;
  left: 67%;
  width: 136px;
  height: 136px;
  z-index: 3;
}
.hero-visual__star-glass {
  display: block;
  width: 136px;
  height: 136px;
  clip-path: path('M129.282 59.2463L104.918 52.7169L117.534 30.8654C120.035 26.5273 118.552 20.9828 114.214 18.4818C111.408 16.8661 107.955 16.8661 105.15 18.4818L83.2976 31.0867L76.7679 6.7237C75.4731 1.88751 70.4984 -0.984236 65.6621 0.310619C62.5302 1.15169 60.0898 3.59188 59.2488 6.7237L52.7191 31.0867L30.8667 18.4818C26.5284 15.9808 20.9837 17.4637 18.4826 21.8019C16.8668 24.6073 16.8668 28.0601 18.4826 30.8654L31.088 52.7169L6.72398 59.2463C1.88759 60.5411 -0.984277 65.5156 0.310632 70.3517C1.15174 73.4835 3.59203 75.9237 6.72398 76.7647L31.088 83.2941L18.4826 105.146C15.9814 109.484 17.4644 115.028 21.8028 117.529C24.6084 119.145 28.0613 119.145 30.8667 117.529L52.7191 104.913L59.2488 129.276C60.5436 134.113 65.5183 136.984 70.3546 135.689C73.4865 134.848 75.9269 132.408 76.7679 129.276L83.2976 104.913L105.15 117.529C109.488 120.03 115.033 118.547 117.534 114.209C119.15 111.404 119.15 107.951 117.534 105.146L104.912 83.2941L129.276 76.7647C134.112 75.4699 136.984 70.501 135.689 65.6649C134.854 62.5331 132.408 60.0873 129.282 59.2463Z');
  -webkit-clip-path: path('M129.282 59.2463L104.918 52.7169L117.534 30.8654C120.035 26.5273 118.552 20.9828 114.214 18.4818C111.408 16.8661 107.955 16.8661 105.15 18.4818L83.2976 31.0867L76.7679 6.7237C75.4731 1.88751 70.4984 -0.984236 65.6621 0.310619C62.5302 1.15169 60.0898 3.59188 59.2488 6.7237L52.7191 31.0867L30.8667 18.4818C26.5284 15.9808 20.9837 17.4637 18.4826 21.8019C16.8668 24.6073 16.8668 28.0601 18.4826 30.8654L31.088 52.7169L6.72398 59.2463C1.88759 60.5411 -0.984277 65.5156 0.310632 70.3517C1.15174 73.4835 3.59203 75.9237 6.72398 76.7647L31.088 83.2941L18.4826 105.146C15.9814 109.484 17.4644 115.028 21.8028 117.529C24.6084 119.145 28.0613 119.145 30.8667 117.529L52.7191 104.913L59.2488 129.276C60.5436 134.113 65.5183 136.984 70.3546 135.689C73.4865 134.848 75.9269 132.408 76.7679 129.276L83.2976 104.913L105.15 117.529C109.488 120.03 115.033 118.547 117.534 114.209C119.15 111.404 119.15 107.951 117.534 105.146L104.912 83.2941L129.276 76.7647C134.112 75.4699 136.984 70.501 135.689 65.6649C134.854 62.5331 132.408 60.0873 129.282 59.2463Z');
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 4px 24px rgba(40, 40, 40, 0.15);
  transform: scale(1.25);
  transform-origin: center;
}
.hero-visual__line {
  top: 87%;
  left: 52.8%;
  width: 90%;
  z-index: 4;
  pointer-events: none;
}
.hero-visual__line img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   5. Home – services (dark stripes)
   ========================================================================== */
.services {
  background: var(--color-dark);
}
.services__row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 56px var(--gutter);
}
.services__row:first-child { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.services__row-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.services__title {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  font-style: italic;
}
.services__tags {
  display: flex;
  flex: 0 0 400px;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: left;
}
.services__tags div::before {
  content: '/ ';
}

/* ==========================================================================
   6. Home – clients
   ========================================================================== */
.clients {
  padding: 70px var(--gutter);
  text-align: center;
}
.clients__label {
  color: var(--color-ink);
  margin-bottom: 40px;
}
.clients__marquee {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients__marquee:hover .clients__track { animation-play-state: paused; }
.clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clients-marquee 32s linear infinite;
}
.clients__logos {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(28px, 5vw, 64px);
  padding-inline: clamp(14px, 2.5vw, 32px);
}
.clients__logos img {
  max-height: 64px;
  width: auto;
}
@keyframes clients-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
}

/* ==========================================================================
   7. Home – CTA Behance
   ========================================================================== */
.cta-behance {
  background: var(--color-accent);
  padding: 90px var(--gutter);
  text-align: center;
}
.cta-behance__title {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 36px);
  margin-bottom: 30px;
}

/* ==========================================================================
   8. Home – testimonials
   ========================================================================== */
.testimonials {
  padding: 90px var(--gutter);
}
.testimonials__track-wrap {
  max-width: var(--container-width);
  margin-inline: auto;
}
/* Wrapper dedicado só à trilha (sem os botões), pra que o fade da borda
   direita fique fixo na tela em vez de rolar junto com os cards. */
.testimonials__viewport {
  position: relative;
}
.testimonials__viewport::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;
  width: clamp(50px, 8vw, 110px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 55%, var(--color-bg) 100%);
  pointer-events: none;
}
.testimonials__track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(300px, 32vw, 400px);
  height: auto;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.testimonial-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-accent);
  flex-shrink: 0;
}
.testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__name {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  margin: 0 0 2px;
}
.testimonial-card__role {
  font-size: 13px;
  color: var(--color-body);
  margin: 0;
}
.testimonial-card__quote { font-size: 15px; }
.testimonials__nav {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  justify-content: center;
}
.testimonials__nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-dark);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.testimonials__nav button:disabled {
  background: #d9d9e6;
  color: var(--color-ink);
  cursor: default;
}

/* ==========================================================================
   9. Arquivo de trabalhos
   ========================================================================== */
.trabalhos-archive { padding: 40px var(--gutter) 100px; }
.trabalhos-archive__title { margin-bottom: 50px; font-size: clamp(30px, 4vw, 44px); }
.trabalhos-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.trabalhos-archive__card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--color-accent-light); }
.trabalhos-archive__card img { width: 100%; height: 100%; object-fit: cover; }
.trabalhos-archive__card-info {
  position: absolute; inset: auto 0 0 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent 70%);
}
.trabalhos-archive__card-title { color: #fff; font-size: 18px; }
.trabalhos-archive__pagination { display: flex; gap: 10px; justify-content: center; margin-top: 60px; font-family: var(--font-mono); }
.trabalhos-archive__pagination a,
.trabalhos-archive__pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border);
}
.trabalhos-archive__pagination .current { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

/* ==========================================================================
   10. Site footer
   ========================================================================== */
.site-footer {
  padding: 70px var(--gutter) 60px;
  text-align: center;
}
.site-footer__logo { display: inline-block; line-height: 0; }
.site-footer__logo img { max-height: 38px; width: auto; display: block; }
.site-footer__meta {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-body);
}

/* ==========================================================================
   11. Página interna de trabalho (single-trabalho)
   ========================================================================== */
.trabalho-intro {
  padding: 40px var(--gutter) 60px;
}
.trabalho-intro__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  max-width: 900px;
}
.trabalho-intro__greeting { margin-bottom: 18px; font-size: 15px; }
.trabalho-intro__category {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-accent);
  margin-bottom: 14px;
  display: block;
}
.trabalho-intro__title {
  font-size: clamp(32px, 4.2vw, 48px);
  margin-bottom: 34px;
}
.trabalho-intro__lead {
  columns: 2 280px;
  column-gap: 60px;
  font-size: 16px;
}
.trabalho-intro__link {
  margin-top: 30px;
}

.trabalho-media {
  padding: 0 var(--gutter) 90px;
}
.trabalho-media__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  background: #f2f2f4;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 64px);
}
.trabalho-media img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
}

.trabalho-description {
  padding: 0 var(--gutter) 90px;
}
.trabalho-description__inner {
  max-width: var(--container-width);
  margin-inline: auto;
}
.trabalho-description .entry-content {
  columns: 2 320px;
  column-gap: 60px;
}
.trabalho-description .entry-content h2,
.trabalho-description .entry-content h3 {
  font-style: italic;
  font-size: 24px;
  margin-bottom: 18px;
  break-after: avoid;
  break-inside: avoid;
}
.trabalho-description .entry-content p { break-inside: avoid; margin-bottom: 1.4em; }

.trabalho-secondary-media {
  padding: 20px var(--gutter) 100px;
  position: relative;
}
.trabalho-secondary-media__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  position: relative;
}
.trabalho-secondary-media__blob {
  position: absolute;
  top: 8%;
  right: -6%;
  width: 46%;
  height: 84%;
  background: var(--color-accent);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  z-index: 0;
}
.trabalho-secondary-media__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 78%;
}
.trabalho-secondary-media__frame img { width: 100%; }

.trabalho-gallery {
  padding: 0 var(--gutter) 90px;
}
.trabalho-gallery__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.trabalho-gallery img { border-radius: var(--radius-md); width: 100%; height: 320px; object-fit: cover; }

.trabalho-results {
  padding: 0 var(--gutter) 100px;
}
.trabalho-results__inner {
  max-width: var(--container-width);
  margin-inline: auto;
}
.trabalho-results__title {
  font-style: italic;
  font-size: 26px;
  margin-bottom: 22px;
}
.trabalho-results__text { max-width: 700px; font-size: 16px; }

/* ==========================================================================
   12. Responsivo
   ========================================================================== */
@media (max-width: 900px) {
  .hero { padding-inline: clamp(24px, 6vw, 60px); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title { font-size: 48px; line-height: 52px; }
  .hero-visual { max-width: 420px; margin-top: 20px; }
  .hero-visual__star-glass { transform: scale(0.9); }
  .services__row-inner { flex-direction: column; align-items: flex-start; }
  .services__tags { flex-basis: auto; margin-top: 10px; }
  .trabalho-intro__lead,
  .trabalho-description .entry-content { columns: 1; }
  .trabalho-secondary-media__blob { display: none; }
  .trabalho-secondary-media__frame { max-width: 100%; }
  /* No mobile a esteira vira uma grade estática centralizada, sem animação. */
  .clients__marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .clients__track { width: auto; animation: none; flex-wrap: wrap; justify-content: center; }
  .clients__logos { flex-wrap: wrap; justify-content: center; padding-inline: 0; }
  .clients__logos[aria-hidden="true"] { display: none; }
}

@media (max-width: 600px) {
  :root { --header-height: 88px; }
  .site-header { padding: 26px var(--gutter) 10px; }
  .hero { padding-inline: 24px; }
  .hero__title { font-size: 36px; line-height: 40px; }
  .hero__highlight { font-size: 22px; line-height: 1.3; white-space: normal; }
  .hero-visual { max-width: 320px; }
  .hero-visual__star-glass { transform: scale(0.65); }
  .testimonial-card { flex-basis: 82vw; }
}

/* Sem hover/ponteiro fino (touch): a composição do hero fica estática. */
@media (hover: none), (pointer: coarse) {
  .hero-visual__layer { transition: none; }
}

/* ==========================================================================
   13. Portfólio Direção de Arte — seções novas (mesmos tokens do tema)
   ========================================================================== */

/* Evita rolagem lateral causada pela linha decorativa do hero
   (clip não cria container de rolagem, então o sticky continua funcionando) */
html, body { overflow-x: clip; }

/* Barra de revisão (sai da versão final) */
.review-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-hero-blue); color: #fff;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
}
.review-bar__inner {
  max-width: var(--container-width); margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.review-bar button {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-pill); padding: 6px 14px;
}
.review-bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Placeholder de imagem com a medida exata */
.ph {
  position: relative; width: 100%; max-width: 100%;
  background-color: #f2f2f4;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, #e7e7ee 14px 15px);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__spec {
  position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px);
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  background: var(--color-dark); color: #fff; border-radius: var(--radius-pill);
  padding: 8px 16px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.ph__spec b { font-weight: 500; font-size: 13px; }
.ph__file { position: absolute; right: 16px; top: 14px; font-family: var(--font-mono); font-size: 11px; color: #8a8aa0; }
.hide-specs .ph__spec, .hide-specs .ph__file { display: none; }
.r169 { aspect-ratio: 16 / 9; } .r45 { aspect-ratio: 4 / 5; } .r43 { aspect-ratio: 4 / 3; }

/* Cabeçalho de seção */
.section-head {
  max-width: var(--container-width); margin: 0 auto 48px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.02em; }
.section-head .eyebrow { color: var(--color-body); }

/* Hibisco Art Club */
.hibisco { background: var(--color-accent); padding: 100px var(--gutter); color: #fff; }
.hibisco__inner {
  max-width: var(--container-width); margin-inline: auto;
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hibisco .eyebrow { color: rgba(255,255,255,.8); display: block; margin-bottom: 18px; }
.hibisco__title { color: #fff; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 24px; }
.hibisco__text p { max-width: 46ch; color: rgba(255,255,255,.9); }
.hibisco__text .btn-pill { margin-top: 28px; }
.hibisco__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hibisco__imgs .ph:first-child { grid-column: 1 / -1; }
.hibisco .ph { background-color: rgba(255,255,255,.12); background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.14) 14px 15px); }
.hibisco .ph__file { color: rgba(255,255,255,.75); }

/* Branding & Arte */
.projetos { padding: 110px var(--gutter) 40px; }
.projeto { max-width: var(--container-width); margin: 0 auto 110px; }
.projeto__media { background: #f2f2f4; border-radius: var(--radius-lg); padding: clamp(16px, 3vw, 40px); display: grid; gap: 16px; }
.projeto__media .ph { background-color: #fff; }
.projeto__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.projeto__info {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px 60px; padding-top: 32px;
}
.projeto__category { font-family: var(--font-mono); text-transform: uppercase; font-size: 12px; color: var(--color-accent); display: block; margin-bottom: 10px; }
.projeto__title { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.02em; }
.projeto__desc { max-width: 60ch; }
.projetos__note { max-width: var(--container-width); margin: -60px auto 0; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: #8a8aa0; }

/* Produto digital */
.digital { padding: 40px var(--gutter) 100px; }
.digital .trabalhos-archive__grid { max-width: var(--container-width); margin-inline: auto; grid-template-columns: repeat(3, 1fr); }
.digital .trabalhos-archive__card .ph { position: absolute; inset: 0; border-radius: 0; }
.digital .trabalhos-archive__card .ph__spec { top: 16px; bottom: auto; }
.digital .trabalhos-archive__card-info { z-index: 2; }
.digital .trabalhos-archive__card-info .eyebrow { color: rgba(255,255,255,.8); font-size: 11px; display: block; }

/* Separador de seções claras */
.clients { border-top: 1px solid var(--color-border); }

/* Lista de imagens (sai da versão final) */
.specs { background: var(--color-accent-light); padding: 90px var(--gutter); }
.specs__inner { max-width: var(--container-width); margin-inline: auto; }
.specs__table-wrap { overflow-x: auto; }
.specs table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.specs th, .specs td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-card-border); vertical-align: top; }
.specs th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; font-weight: 400; letter-spacing: .03em; }
.specs td.mono { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.specs__rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; font-size: 14px; }
.specs__rules div { border-top: 1px solid var(--color-ink); padding-top: 12px; }
.specs__rules b { display: block; color: var(--color-ink); }

@media (max-width: 900px) {
  .hibisco__inner, .projeto__info { grid-template-columns: 1fr; }
  .digital .trabalhos-archive__grid { grid-template-columns: 1fr; }
  .specs__rules { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hibisco { padding-block: 70px; }
  .projetos { padding-top: 70px; }
  .projeto { margin-bottom: 80px; }
  .projeto__pair, .specs__rules { grid-template-columns: 1fr; }
  .ph__spec { font-size: 10px; padding: 6px 12px; }
}

/* ==========================================================================
   14. Trabalhos — lista de banners + página interna
   ========================================================================== */
.r21 { aspect-ratio: 2 / 1; }
.ph--img { background: none; }
body.is-case .home-only { display: none; }

.trabalhos { padding: 110px var(--gutter) 100px; }
.work-list { max-width: var(--container-width); margin-inline: auto; display: grid; gap: 72px; }
.work-card { display: block; color: inherit; }
.work-card .ph { transition: transform .4s ease; }
.work-card .ph img { transition: transform .6s ease; }
.work-card:hover .ph img { transform: scale(1.03); }
.work-card__info { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 24px; }
.work-card__brand { display: block; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.work-card__title { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; transition: color .2s ease; }
.work-card:hover .work-card__title { color: var(--color-accent); font-style: italic; }
.work-card__meta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.work-card__meta .eyebrow { color: var(--color-body); }
.work-card:hover .btn-icon-round { transform: scale(1.06); }
.work-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 8px; border-radius: var(--radius-lg); }

.case__back { margin-bottom: 40px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.case__back a:hover { color: var(--color-accent); }
.case .trabalho-intro__title { margin-bottom: 40px; }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 32px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.case-meta dt { color: var(--color-accent); font-size: 12px; margin-bottom: 4px; }
.case-meta dd { margin: 0; color: var(--color-ink); }
.case-lead { font-size: 18px; max-width: 60ch; }
.case-gallery { padding: 0 var(--gutter) 90px; }
.case-gallery__inner { max-width: var(--container-width); margin-inline: auto; display: grid; gap: 20px; }
.case-gallery__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.case-next { padding: 90px var(--gutter) 60px; border-top: 1px solid var(--color-border); }

@media (max-width: 600px) {
  .trabalhos { padding-block: 70px; }
  .work-list { gap: 48px; }
  .work-card__info { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
  .case-meta { grid-template-columns: 1fr; gap: 12px; }
  .case-gallery__pair { grid-template-columns: 1fr; }
}

/* Etiqueta de destaque no banner (ex.: Projeto autoral) */
.work-tag {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-hero-blue); color: #fff; border-radius: var(--radius-pill);
  padding: 8px 16px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(40, 40, 40, .15);
}
.work-tag::before { content: '✦'; font-size: 13px; line-height: 1; }
@media (max-width: 600px) { .work-tag { top: 12px; left: 12px; font-size: 10px; padding: 6px 12px; } }

/* Hero centralizado verticalmente no espaço branco abaixo do header
   (desconta a altura do header e da barra de revisão) */
.hero {
  min-height: calc(100svh - var(--header-height));
  align-items: center;
  /* centro ótico: um pouco acima do centro matemático */
  padding-block: 8px 120px;
}
.hero__inner { align-items: center; }
/* A linha e a estrela vazam ~20% abaixo da foto: o padding de baixo maior compensa */
/* Logos logo abaixo dos serviços: sem a linha de separação */
.clients { border-top: 0; }

/* Imagens reais: na lista, o banner mantém 2:1; na interna, cada imagem usa a própria proporção */
.ph--img { background: none; }
.ph--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-gallery .ph--img.r169 { aspect-ratio: auto; }
.case-gallery .ph--img.r169 img { height: auto; }
.case-meta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Imagens da interna um pouco mais contidas: ficam mais nítidas em telas grandes */
.case-gallery__inner { max-width: 1080px; }

/* Banners da home na mesma largura das imagens da página interna */
.work-list, .trabalhos .section-head, .case-next .section-head { max-width: 1080px; }

/* Link do Hibisco na bio do hero */
.hero__link { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s ease; }
.hero__link:hover { color: var(--color-hero-blue); }
.hero__link--cta { white-space: nowrap; }

/* Botão do hero que rola até os trabalhos (seta apontando pra baixo) */
.hero__cta { margin-top: 32px; }
.hero__cta .btn-pill__icon svg { transform: rotate(135deg); transition: transform .2s ease; }
.hero__cta:hover .btn-pill__icon svg { transform: rotate(135deg) translate(1px, -1px); }
.hero__cta:hover { box-shadow: inset 0 0 0 1px var(--color-dark); }

/* Aviso de e-mail copiado */
.email-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100;
  background: var(--color-dark); color: #fff; border-radius: var(--radius-pill);
  padding: 12px 22px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(40, 40, 40, .2); user-select: all; max-width: calc(100% - 32px);
}

/* Título do hero maior (escala com a tela, sem estourar a coluna) */
.hero__title { font-size: clamp(40px, 4.8vw, 78px); line-height: 1.02; }