/* =========================================================
   INSTAGE DIGITAL — Layout base
   Paleta:
     #A15F45  terracota (accent)
     #969381  sálvia / khaki morno (secundário)
     #606060  cinza neutro
     #EAE7E1  off-white quente (texto principal)
   Fontes:
     Principal: HERQIN  (drop em /fonts — ver @font-face abaixo)
     Secundária: Montserrat (Google Fonts)
   ========================================================= */

/* ---------- HERQIN -----------------------------------------
   Adicione o arquivo da fonte em ./fonts/Herqin.woff2 (e .woff)
   Enquanto não estiver disponível, o fallback serif assume.
   ---------------------------------------------------------- */
@font-face {
  font-family: "Herqin";
  src: url("fonts/Herqin.woff2") format("woff2"),
       url("fonts/Herqin.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta original da marca */
  --c-terracota: #A15F45;
  --c-salvia:    #969381;
  --c-cinza:     #606060;
  --c-creme:     #EAE7E1;

  /* Tema escuro derivado (warm dark) */
  --bg:           #14110F;
  --bg-elevated:  #1B1715;
  --bg-card:      #1F1A17;
  --border:       rgba(234, 231, 225, 0.10);
  --border-soft:  rgba(234, 231, 225, 0.06);

  --accent:       var(--c-terracota);
  --accent-soft:  rgba(161, 95, 69, 0.18);

  --text:         var(--c-creme);
  --text-muted:   var(--c-salvia);
  --text-dim:     var(--c-cinza);

  --radius-pill:  9999px;
  --radius-lg:    32px;
  --radius-md:    24px;
  --radius-sm:    16px;

  --font-display: "Herqin", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --shell-max:    1200px;
  --shell-pad:    clamp(16px, 4vw, 48px);

  --header-h:     92px;
}

@media (max-width: 560px) {
  :root { --header-h: 84px; }
}

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

html {
  scroll-behavior: smooth;
  /* Compensa parcialmente a altura do header sticky ao navegar via âncora */
  scroll-padding-top: calc(var(--header-h) / 2);
}

#proposta,
#parceiros,
#sobre {
  scroll-margin-top: calc(var(--header-h) / 2);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color 0.7s ease, color 0.7s ease;
}

/* Tema claro — ativa após o scroll passar da sessão projetos */
body.is-light {
  --bg:           #EAE7E1;
  --bg-elevated:  #DCD8CF;
  --bg-card:      #E2DED7;
  --border:       rgba(20, 17, 15, 0.14);
  --text:         #14110F;
  --text-muted:   #606060;
  --text-dim:     #969381;
}

/* Suavizar a inversão nos elementos que dependem das variáveis */
.sobre,
.sobre-card,
.sobre-foto,
.sobre-nome,
.sobre-texto p,
.sobre-texto strong,
.sobre-eyebrow,
.case-card,
.case-name,
.cases-arrow,
.section-eyebrow {
  transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}

/* Header e footer têm fundo escuro hardcoded — manter texto legível em ambos os temas */
body.is-light .nav-links a {
  color: var(--c-creme);
}
body.is-light .nav-links a:hover {
  color: var(--accent);
}
body.is-light .footer-copy {
  color: var(--c-salvia);
}

/* Cards de parceiros têm overlay escuro — manter título branco no tema claro */
body.is-light .case-name {
  color: #ffffff;
}

/* Botão flutuante do WhatsApp — ícone preto no tema claro */
body.is-light .whatsapp-fab {
  color: #000000;
}

img, video { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- WHATSAPP FAB (botão flutuante) ---------- */
.whatsapp-fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-creme);
  color: var(--bg);
  border-radius: 50%;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 100;
  transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.3s ease;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-2px) scale(1.05);
  color: var(--accent);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
}

.whatsapp-fab svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 560px) {
  .whatsapp-fab {
    width: 52px;
    height: 52px;
  }
  .whatsapp-fab svg {
    width: 26px;
    height: 26px;
  }
}

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  backdrop-filter: blur(8px);
}

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--shell-pad);
  background: rgba(27, 23, 21, 0.7);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.brand img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  opacity: 0.8;
  transition: opacity .2s ease, color .2s ease;
}

.nav-links a:hover {
  opacity: 1;
  color: var(--accent);
}

/* ---------- LAYOUT SHELL ---------- */
main { padding: 0; }

.section {
  max-width: calc(var(--shell-max) + 2 * var(--shell-pad));
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--shell-pad);
}

.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 20px;
  text-transform: lowercase;
}

/* ---------- HERO ---------- */
.hero {
  padding: 0;
}

.hero-frame {
  position: relative;
  border-radius: 0;
  border: none;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: radial-gradient(120% 120% at 50% 0%, #2a221d 0%, #14110F 55%);
}

/* Vimeo iframe overscale — cobre o frame igual a um object-fit:cover.
   Desktop: vídeo 16:9 (horizontal). Mobile: vídeo 9:16 (portrait). */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
  z-index: -2;
  /* Desktop (16:9): largura ≥ 100%, altura ≥ 100% mantendo proporção */
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: calc(100% * 16 / 9);
}

@media (max-width: 768px) {
  /* Mobile (9:16) — proporção invertida */
  .hero-video {
    width: 56.25vh;
    height: 100vh;
    min-width: 100%;
    min-height: calc(100% * 16 / 9);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,17,15,.55) 0%, rgba(20,17,15,.85) 100%),
    radial-gradient(60% 80% at 50% 50%, rgba(161,95,69,.10) 0%, transparent 70%);
}

.hero-content {
  text-align: center;
  padding: clamp(32px, 6vw, 64px);
  max-width: 880px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c-creme);
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
}

.type-cursor {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 6px;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: cursor-blink 0.9s steps(2, start) infinite;
  opacity: 0;
  transition: opacity .2s ease;
}

.type-text.is-typing + .type-cursor,
.type-text.is-typed + .type-cursor {
  opacity: 1;
}

@keyframes cursor-blink {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .type-cursor { display: none; }
}

/* Círculo a caneta na palavra "palco" */
.circled-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: 0 0.08em;
}

.circle-svg {
  position: absolute;
  left: -10%;
  top: -22%;
  width: 120%;
  height: 150%;
  overflow: visible;
  pointer-events: none;
}

.circle-svg path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  transition: stroke-dashoffset 0.85s cubic-bezier(.55, .08, .35, 1);
  filter: drop-shadow(0 0 6px rgba(161, 95, 69, 0.25));
}

.circled-word.is-circled .circle-svg path {
  stroke-dashoffset: 0;
}

/* Risco a caneta sob "é com a gente" — mesmo estilo do círculo */
.underlined-phrase {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.underline-svg {
  position: absolute;
  left: -2%;
  bottom: -0.18em;
  width: 104%;
  height: 0.45em;
  overflow: visible;
  pointer-events: none;
}

.underline-svg path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 0.7s cubic-bezier(.55, .08, .35, 1);
  filter: drop-shadow(0 0 6px rgba(161, 95, 69, 0.25));
}

.underlined-phrase.is-underlined .underline-svg path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .circle-svg path,
  .underline-svg path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- PROPOSTA ---------- */
.proposta {
  animation: proposta-focus linear both;
  animation-timeline: view();
  animation-range: entry 5% entry 65%;
}

@keyframes proposta-focus {
  from {
    filter: blur(18px);
    opacity: 0.45;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proposta {
    animation: none;
  }
}

.proposta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

/* Variáveis registradas para compor entrance + hover sem conflito de transform */
@property --enter-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --enter-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --hover-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.proposta-card {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 36px);
  min-height: 260px;
  overflow: hidden;
  text-align: center;
  transform: translate3d(var(--enter-x), calc(var(--enter-y) + var(--hover-y)), 0);
  transition: border-color .4s ease,
              background-color .45s ease,
              --hover-y .35s ease;
}

.proposta-card:hover,
.proposta-card.is-active {
  border-color: var(--accent);
  background-color: var(--c-creme);
  --hover-y: -2px;
}

/* Entrada coreografada — laterais entrando dos lados, centro de baixo */
@supports (animation-timeline: view()) {
  .proposta-card {
    animation-timeline: view();
    animation-range: entry 5% entry 70%;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2, .65, .25, 1);
  }

  .proposta-card:nth-child(1) { animation-name: card-from-left; }
  .proposta-card:nth-child(2) { animation-name: card-from-bottom; }
  .proposta-card:nth-child(3) { animation-name: card-from-right; }

  @keyframes card-from-left {
    from { --enter-x: -90px; opacity: 0; }
    to   { --enter-x: 0px;   opacity: 1; }
  }

  @keyframes card-from-bottom {
    from { --enter-y: 90px; opacity: 0; }
    to   { --enter-y: 0px;  opacity: 1; }
  }

  @keyframes card-from-right {
    from { --enter-x: 90px; opacity: 0; }
    to   { --enter-x: 0px;  opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .proposta-card { animation: none; }
}

.proposta-title {
  position: absolute;
  left: clamp(24px, 3vw, 36px);
  right: clamp(24px, 3vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: top 0.5s cubic-bezier(.6, .05, .35, 1),
              transform 0.5s cubic-bezier(.6, .05, .35, 1),
              color 0.45s ease;
}

.proposta-card:hover .proposta-title,
.proposta-card.is-active .proposta-title {
  top: clamp(24px, 3vw, 36px);
  transform: translateY(0);
  color: var(--bg);
}

.proposta-desc {
  position: absolute;
  left: clamp(24px, 3vw, 36px);
  right: clamp(24px, 3vw, 36px);
  bottom: clamp(24px, 3vw, 36px);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.08s,
              transform 0.5s cubic-bezier(.6, .05, .35, 1) 0.08s,
              color 0.45s ease;
}

.proposta-card:hover .proposta-desc,
.proposta-card.is-active .proposta-desc {
  opacity: 1;
  transform: translateY(0);
  color: var(--c-cinza);
}

.proposta-card { cursor: pointer; }

/* ---------- CASES / PARCEIROS (carrossel full-width) ---------- */
.cases {
  width: 100%;
}

.cases-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 0 var(--shell-pad);
}

.cases-header .section-eyebrow {
  margin-bottom: 0;
}

.cases-nav {
  display: flex;
  gap: 8px;
}

.cases-arrow {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color .25s ease, color .25s ease, background .25s ease, opacity .25s ease;
}

.cases-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.cases-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cases-track {
  --col-gap: clamp(6px, 0.8vw, 10px);
  display: flex;
  gap: var(--col-gap);
  padding: 0 var(--shell-pad);
}

/*
   .case-card — todos os parceiros numa única linha.
   No hover, o card cresce e revela o nome.
   A expansão usa @property --case-grow registrada como número, para
   o motor CSS interpolar quadro-a-quadro de forma suave (transição direta
   em flex-grow é gambiarra e fica brusca em vários browsers).
   Posição da imagem é configurável por card via --case-pos
   (ex: style="--case-img: url(...); --case-pos: center 30%").
*/
@property --case-grow {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.case-card {
  position: relative;
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow: var(--case-grow);
  min-width: 0;
  height: clamp(240px, 32vh, 360px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: --case-grow 0.9s cubic-bezier(.32, .72, 0, 1),
              border-color 0.5s ease,
              box-shadow 0.6s ease;
  isolation: isolate;
  cursor: pointer;
}

.case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--case-img);
  background-size: cover;
  /* --case-pos: posição da imagem no estado inicial (card estreito).
     --case-pos-hover: posição quando expande no hover (card largo).
     Se --case-pos-hover não for definido, usa --case-pos como fallback. */
  background-position: var(--case-pos, center);
  opacity: 0.7;
  z-index: -2;
  transition: opacity 0.6s ease,
              transform 0.85s cubic-bezier(.4, .1, .3, 1),
              background-position 0.85s cubic-bezier(.4, .1, .3, 1);
}

.case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,17,15,0) 35%, rgba(20,17,15,.85) 100%);
  z-index: -1;
  transition: background 0.6s ease;
}

.case-card:hover {
  --case-grow: 4;
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.case-card:hover::before {
  opacity: 1;
  transform: scale(1.03);
  background-position: var(--case-pos-hover, var(--case-pos, center));
}

.case-card:hover::after {
  background: linear-gradient(180deg, rgba(20,17,15,0) 50%, rgba(20,17,15,.78) 100%);
}

.case-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease 0.15s,
              transform 0.55s cubic-bezier(.4, .1, .3, 1) 0.15s,
              color 0.7s ease;
}

.case-card:hover .case-name {
  opacity: 1;
  transform: translateY(0);
}

/* Cards sem imagem ainda — sutil tinta da paleta para diferenciar */
.case-alemao,
.case-julia,
.case-marcia,
.case-bkv,
.case-nati,
.case-bianca,
.case-guilherme,
.case-ilan {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(150,147,129,.06) 0%, transparent 60%),
    var(--bg-card);
}

/* ---------- SOBRE / NOSSA HISTÓRIA ---------- */
.sobre {
  width: 100%;
  padding: clamp(48px, 8vw, 96px) 0;
  padding-bottom: 0px;
}

.sobre-card {
  position: relative;
  width: 100%;
  background: var(--bg-card);
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: clamp(40px, 6vw, 72px) var(--shell-pad);
  padding-left: clamp(64px, 8vw, 110px);
  display: flex;
  align-items: center;
  min-height: 320px;
}

.sobre-eyebrow {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sobre-inner {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
}

.sobre-foto {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  height: 100%;
  min-height: 360px;
}

.sobre-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sobre-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sobre-nome {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 12px;
}

.sobre-texto p {
  color: var(--text-muted);
  max-width: 65ch;
  line-height: 1.7;
}

.sobre-texto p + p {
  margin-top: 1em;
}

.sobre-texto strong {
  color: var(--text);
  font-weight: 500;
}

/* ---------- PROJETOS (marquee infinito) ---------- */
.projetos {
  width: 100%;
  padding: clamp(48px, 8vw, 96px) 0;
}

.projetos-eyebrow {
  padding: 0 var(--shell-pad);
  margin-bottom: clamp(24px, 4vw, 36px);
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
          mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.marquee-track {
  display: flex;
  gap: clamp(12px, 1.5vw, 18px);
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}

.marquee-track--bottom {
  animation-direction: reverse;
  animation-duration: 65s;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  flex: 0 0 auto;
  width: clamp(120px, 11vw, 170px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}

.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) brightness(0.92);
  transition: transform .6s ease, filter .4s ease;
}

.marquee-item:hover img {
  transform: scale(1.05);
  filter: grayscale(0%) brightness(1);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ---------- FOOTER ---------- */
.site-footer {
  padding: 0;
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--shell-pad);
  background: rgba(27, 23, 21, 0.7);
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  transition: opacity .2s ease;
}

.footer-brand:hover {
  opacity: 0.8;
}

.footer-brand img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.footer-copy {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--c-creme);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

.footer-social svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 900px) {
  .proposta-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Mobile/tablet: parceiros volta a ser carrossel deslizante */
  .cases-track {
    --col-gap: clamp(10px, 1.5vw, 14px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    padding: 0 0 4px var(--shell-pad);
  }
  .cases-track::-webkit-scrollbar { display: none; }

  .case-card {
    flex: 0 0 calc((100% - 3 * var(--col-gap)) / 3.3);
    aspect-ratio: 1 / 1;
    height: auto;
    scroll-snap-align: start;
  }

  /* Cancela a expansão por hover no mobile (touch-driven) */
  .case-card:hover {
    --case-grow: 1;
    border-color: var(--border);
    box-shadow: none;
    z-index: auto;
  }
  .case-card:hover::before {
    opacity: 0.7;
    transform: none;
  }
  .case-card:hover::after {
    background: linear-gradient(180deg, rgba(20,17,15,0) 35%, rgba(20,17,15,.85) 100%);
  }

  /* Nome sempre visível no carrossel mobile */
  .case-name {
    opacity: 1;
    transform: none;
  }

  .sobre-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .sobre-foto {
    max-width: 220px;
  }

  .marquee-item {
    width: clamp(100px, 22vw, 140px);
  }

  .marquee-track {
    animation-duration: 45s;
  }
}

@media (max-width: 560px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.85rem; }

  .brand img { height: 48px; }

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

  /* Smartphone: 2 cards visíveis + 30% peek */
  .case-card {
    flex: 0 0 calc((100% - 2 * var(--col-gap)) / 2.3);
  }

  .footer-bar {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px var(--shell-pad);
  }

  .footer-brand img {
    height: 44px;
  }
}

/* ---------- ANIMAÇÕES SUTIS ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}