/* ── Tokens ──────────────────────────────────────── */
/* Paleta da própria marca da Suzzane: tons de cinza/bege neutro + marrom
   escuro (em vez do bordô/dourado anterior). Os nomes das variáveis
   ficaram os mesmos (--wine, --blush etc.) pra não precisar reescrever
   todo o resto do CSS — só o valor de cada uma mudou. */
:root {
  --wine:       #4A3830;
  --wine-d:     #2A211C;
  --wine-l:     #6B5347;
  --blush:      #A69C90;
  --blush-l:    #C4BAAE;
  --pink:       #7A6A5C;
  --bg:         #F7F4F0;
  --surface:    #EAE5DE;
  --text:       #2A211C;
  --muted:      #6B6259;
  --faint:      #A39B90;
  --white:      #FFFFFF;
  --border:     rgba(42,33,28,.12);

  --font: 'Inter', system-ui, sans-serif;
  --font-script: 'Cormorant Garamond', Georgia, serif;
  --font-tagline: 'Lora', Georgia, serif;

  --shadow: 0 4px 20px rgba(42,33,28,.08);
  --shadow-m: 0 8px 40px rgba(42,33,28,.16);
}

/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: var(--font); }
ul { list-style: none; }

/* ── Utilities ───────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.text-center { text-align: center; }
.text-white { color: var(--white); }
.text-light { color: rgba(255,255,255,.75); }
.surface-blush { background: var(--surface); }
.surface-wine-dark { background: var(--wine-d); }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); margin-bottom: 12px; }
.hero-text > .eyebrow { margin-top: -40px; }
.eyebrow-light { color: var(--blush); }
.section-head { margin-bottom: 48px; max-width: 640px; }
.section-head.text-center { margin-left: auto; margin-right: auto; }

/* Asymmetric section intro: title left, sub-copy right — the editorial
   alternative to the centered eyebrow+title+sub stack used elsewhere */
.section-head-split {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px;
  align-items: end; margin-bottom: 56px;
}
.section-head-split .section-title { margin-bottom: 0; }
.section-head-split .section-sub { padding-bottom: 4px; }
.section-title { font-family: var(--font-script); font-size: clamp(1.7rem, 2.2vw + 1.1rem, 2.5rem); font-weight: 700; line-height: 1.2; margin-bottom: 14px; text-wrap: balance; }
.section-sub { font-family: var(--font); font-style: normal; font-size: 1.05rem; color: var(--muted); line-height: 1.7; text-align: justify; text-justify: inter-word; hyphens: none; }
.script { font-family: var(--font-script); font-style: italic; font-weight: 600; color: var(--wine); }
.script-light { color: var(--blush-l); }

/* ── Buttons ─────────────────────────────────────── */
.btn-wine {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wine); color: var(--white);
  font-size: .88rem; font-weight: 600;
  padding: 13px 28px; border-radius: 100px;
  transition: background .2s, transform .15s;
}
.btn-wine:hover { background: var(--wine-l); }
.btn-outline-wine {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--wine);
  font-size: .88rem; font-weight: 600;
  padding: 12px 28px; border-radius: 100px;
  border: 2px solid var(--wine);
  transition: background .2s, color .2s;
}
.btn-outline-wine:hover { background: var(--wine); color: var(--white); }
.btn-blush {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blush); color: var(--wine-d);
  font-size: .88rem; font-weight: 700;
  padding: 14px 30px; border-radius: 100px;
  transition: background .2s;
}
.btn-blush:hover { background: var(--blush-l); }
.btn-lg { padding: 16px 34px; font-size: .95rem; }
.btn-xl { padding: 18px 40px; font-size: 1rem; }
.btn-block { width: 100%; margin-top: 20px; }

/* ── Header ──────────────────────────────────────── */
#header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(247,244,240,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hd-inner { height: 76px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.logo-img { height: 68px; width: auto; display: block; max-height: 100%; }
.nav-links { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.nav-links a { font-size: .85rem; font-weight: 500; color: var(--text); transition: color .15s; }
.nav-links a:hover { color: var(--wine); }
.nav-cta { flex-shrink: 0; }

/* ── Hamburger ───────────────────────────────────── */
.ham { display: none; flex-direction: column; gap: 5px; padding: 6px; margin-left: auto; }
.ham span { display: block; width: 22px; height: 2px; background: var(--wine); transition: transform .25s, opacity .2s; }
.ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mob-nav {
  display: none; flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 12px 24px 20px; gap: 4px;
}
.mob-nav.open { display: flex; }
.mob-nav a { padding: 12px 0; font-size: .92rem; color: var(--text); border-bottom: 1px solid var(--border); }
.mob-nav a:last-child { border-bottom: none; }
.mob-cta { margin-top: 12px; text-align: center; }

/* ── Glitter (partículas em toda a página) ───────── */
#glitter-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 50;
  pointer-events: none;
}

/* ── Hero ────────────────────────────────────────── */
.hero { position: relative; padding: 10px 0 108px; background: linear-gradient(160deg, var(--bg) 0%, var(--surface) 100%); overflow: hidden; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
h1 { font-family: var(--font-script); font-size: clamp(2.1rem, 4.2vw + 1rem, 3.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 22px; color: var(--wine-d); text-wrap: balance; }
.hero-text > h1 { margin-top: 40px; }
.hero-sub { font-family: var(--font); font-style: normal; font-size: 1.1rem; color: var(--muted); line-height: 1.7; margin-bottom: 32px; text-align: justify; text-justify: inter-word; hyphens: none; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; margin-top: 140px; margin-bottom: 40px; }

/* Hero entrance choreography: staged reveal, no scroll trigger needed (above the fold) */
.hero-stagger {
  opacity: 0; transform: translateY(18px);
  animation: heroIn .8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--d, 0) * .11s + .1s);
}
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

.hero-divider { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 44px; z-index: 1; }
.hero-stats { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: baseline; }
.hero-stats .hero-stat:nth-child(2) { justify-self: center; text-align: center; transform: translateX(40px); }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat strong { font-size: 1.2rem; font-weight: 700; color: var(--wine); }
.hero-stat span { font-size: .78rem; color: var(--muted); }

.hero-visual { position: relative; perspective: 1200px; min-width: 0; }
.hero-photo-frame {
  aspect-ratio: 756/1083;
  width: 100%;
  min-width: 0;
}
.hero-photo-frame img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  /* recorte real (PNG com transparência) — sem card, sem moldura;
     a própria foto "pisa" no fundo da Hero, sem quebra de ambiente */
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 24px 34px rgba(42,33,28,.18));
}

/* ── 3D tilt (hero photo, cursos, selos) ─────────── */
.tilt-el {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  will-change: transform;
}
.tilt-el.tilting { transition: transform .08s linear; }


/* ── Pilares ─────────────────────────────────────── */
.pilares { padding: 32px 0; background: var(--wine); }
.pilares-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pilar-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pilar-icon { width: 24px; height: 24px; color: var(--blush-l); }
.pilar-label { font-size: .78rem; font-weight: 600; color: var(--blush-l); letter-spacing: .04em; text-align: center; }

/* ── Sobre ───────────────────────────────────────── */
.sobre-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.sobre-photo-frame {
  /* Mesma proporção do arquivo original (900×1132) — enquadra a foto
     inteira sem sobrar faixa vazia nem cortar braço/mão. */
  aspect-ratio: 900/1132; border-radius: 20px; overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-m);
}
.sobre-photo-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  filter: saturate(1.08) contrast(1.05);
}
.sobre-p { font-size: .95rem; color: var(--muted); line-height: 1.75; margin-bottom: 16px; text-align: justify; text-justify: inter-word; hyphens: none; }
.sobre-creds { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.sobre-cred { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 500; color: var(--wine-d); }
.cred-icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--wine); }
.sobre-quote {
  font-family: var(--font-tagline); font-style: italic; font-size: 1.4rem; font-weight: 500;
  color: var(--wine-d); line-height: 1.4; margin-top: 32px;
  padding-top: 28px; border-top: 1px solid var(--border);
  text-wrap: balance;
}
.sobre-quote strong { color: var(--wine); font-weight: 600; }

/* ── Especialidades (repertório técnico, não infoproduto) ── */
.especialidades-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.especialidade-card {
  background: var(--white); border-radius: 20px; padding: 36px 30px;
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.especialidade-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.especialidade-icon { width: 30px; height: 30px; display: block; margin-bottom: 18px; color: var(--wine); }
.especialidade-title { font-family: var(--font-script); font-size: 1.1rem; font-weight: 700; color: var(--wine-d); margin-bottom: 12px; }
.especialidade-desc { font-size: .9rem; color: var(--muted); line-height: 1.65; text-align: justify; text-justify: inter-word; hyphens: none; }
.especialidades-grid .especialidade-card:nth-child(1) { transition-delay: 0s; }
.especialidades-grid .especialidade-card:nth-child(2) { transition-delay: .1s; }
.especialidades-grid .especialidade-card:nth-child(3) { transition-delay: .2s; }

/* ── Cursos (assimétrico: card do meio se eleva) ─── */
.curso-grupo-titulo {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 28px;
}
.curso-grupo-titulo span {
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: 1.15rem; color: var(--wine); white-space: nowrap;
}
.curso-grupo-titulo::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.curso-grupo-titulo-color { margin-top: 64px; }
.curso-nota {
  font-size: .82rem; color: var(--muted); text-align: center;
  max-width: 720px; margin: 32px auto 0; line-height: 1.6;
}
.cursos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1400px; align-items: center; }
.cursos-grid-tecnicas { grid-template-columns: repeat(4, 1fr); }
.cursos-grid-color { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.curso-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 32px 28px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  transition: transform .2s, box-shadow .2s;
}
.curso-card .pending { margin-bottom: 18px; }
.curso-card:hover { transform: scale(1.04) translateY(-8px); box-shadow: var(--shadow-m); }
.curso-card-destaque {
  border: 2px solid var(--wine); position: relative;
  box-shadow: var(--shadow-m);
  z-index: 2;
}
/* Higher specificity than .reveal.visible so the elevation survives the entrance transition */
.curso-card-destaque.reveal.visible { transform: scale(1.055) translateY(-10px); }
.curso-card-destaque.reveal.visible:hover { transform: scale(1.095) translateY(-22px); }
.curso-ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--wine); color: var(--white);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: 6px 16px; border-radius: 100px;
  box-shadow: 0 4px 14px rgba(74,56,48,.35);
  white-space: nowrap;
}
.curso-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 14px;
}
.curso-tag-destaque { color: var(--wine); }
.curso-nome { font-family: var(--font-script); font-size: 1.05rem; font-weight: 700; color: var(--wine-d); margin-bottom: 10px; }
.curso-desc { font-size: .88rem; color: var(--muted); line-height: 1.6; margin-bottom: 18px; text-align: justify; text-justify: inter-word; hyphens: none; }
.curso-preco { font-size: 1.4rem; font-weight: 700; color: var(--wine); }
.curso-preco.pending-inline { font-size: 1rem; }
.curso-parcela { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: 4px; margin-bottom: 18px; }

/* Stagger cascade within the grid */
.cursos-grid .curso-card:nth-child(1) { transition-delay: 0s; }
.cursos-grid .curso-card:nth-child(2) { transition-delay: .1s; }
.cursos-grid .curso-card:nth-child(3) { transition-delay: .2s; }

/* ── Atendimento (intro editorial + cardápio de ateliê) ── */
.atend-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: start; }
.atend-intro .section-title { margin-bottom: 16px; }
.atend-intro .section-sub { margin-bottom: 36px; }

/* Card âncora: o diferencial real dela (temperamento) */
.atend-card-feature {
  background: var(--blush); border-radius: 20px;
  padding: 28px 30px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start;
  transition: background .2s;
}
.atend-card-feature .atend-icon { width: 28px; height: 28px; grid-row: 1 / 3; color: var(--wine); }
.atend-card-feature .atend-title { font-family: var(--font-script); font-size: 1rem; font-weight: 700; color: var(--wine-d); margin-bottom: 4px; }
.atend-feature-desc { font-size: .88rem; color: var(--wine-d); line-height: 1.6; grid-column: 2; text-align: justify; text-justify: inter-word; hyphens: none; }
.atend-card-feature:hover { background: var(--blush-l); }

/* Cardápio: linhas com nome — pontilhado — preço, como uma carta de ateliê */
.atend-menu {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; padding: 40px 36px;
}
.atend-menu-row { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.14); transition: transform .2s; }
.atend-menu-row:hover { transform: translateX(6px); }
.atend-menu-row:last-of-type { border-bottom: none; margin-bottom: 8px; padding-bottom: 8px; }
.atend-menu-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.atend-menu-nome { font-family: var(--font-script); font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; color: var(--white); white-space: nowrap; }
.atend-menu-dots { flex: 1; border-bottom: 2px dotted rgba(255,255,255,.25); transform: translateY(-4px); }
.atend-menu-preco { font-family: var(--font-script); font-size: 1.4rem; font-weight: 700; color: var(--blush-l); white-space: nowrap; }
.atend-menu-desc { font-size: .84rem; color: rgba(255,255,255,.65); line-height: 1.6; max-width: 46ch; text-align: justify; text-justify: inter-word; hyphens: none; }
.atend-menu-nota { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 28px; text-align: justify; text-justify: inter-word; hyphens: none; }

/* ── Galeria (fotos reais de portfólio) ──────────── */
.galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.galeria-item {
  position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
}
.galeria-item img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: saturate(1.08) contrast(1.05);
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
.galeria-item:hover img { transform: scale(1.06); filter: saturate(1.18) contrast(1.08); }
.galeria-item::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(130% 150% at 25% 15%, transparent 50%, rgba(42,33,28,.35) 100%);
  mix-blend-mode: multiply; pointer-events: none;
}
.galeria-item::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(42,33,28,.8) 0%, rgba(42,33,28,0) 45%);
  pointer-events: none;
}
.galeria-label {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); font-weight: 600;
}
.galeria-grid .galeria-item:nth-child(1) { transition-delay: 0s; }
.galeria-grid .galeria-item:nth-child(2) { transition-delay: .08s; }
.galeria-grid .galeria-item:nth-child(3) { transition-delay: .16s; }
.galeria-grid .galeria-item:nth-child(4) { transition-delay: .24s; }
.galeria-grid .galeria-item:nth-child(5) { transition-delay: .32s; }
.galeria-grid .galeria-item:nth-child(6) { transition-delay: .4s; }
.galeria-grid .galeria-item:nth-child(7) { transition-delay: .48s; }
.galeria-grid .galeria-item:nth-child(8) { transition-delay: .56s; }
.galeria-grid .galeria-item:nth-child(9) { transition-delay: .64s; }
.galeria-grid .galeria-item:nth-child(10) { transition-delay: .72s; }

/* Foto extra só pro portfólio mobile (pedido explícito: não alterar a
   versão web) — escondida a partir do breakpoint de tablet/desktop. */
@media(min-width:769px) {
  .galeria-item-mobile { display: none; }
}

/* ── Prêmios e certificados (estatística + texto, sem grid de cards repetido) ── */
.premios-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.premios-stats { display: flex; flex-direction: column; gap: 32px; }
.premios-stat { display: flex; align-items: baseline; gap: 20px; }
.premios-stat-num {
  font-family: var(--font-script); font-style: italic; font-weight: 700;
  font-size: 3.2rem; color: var(--wine); line-height: 1; flex-shrink: 0;
  min-width: 108px;
}
.premios-stat-label { font-size: .85rem; color: var(--muted); line-height: 1.5; font-weight: 500; }
.premios-detalhe { border-left: 1px solid var(--border); padding-left: 56px; }
.premios-detalhe .section-title { margin-bottom: 20px; }
.premios-p { font-size: .92rem; color: var(--muted); line-height: 1.7; margin-bottom: 16px; text-align: justify; text-justify: inter-word; hyphens: none; }
.premios-p-anchor { color: var(--wine-d); }
.premios-p-anchor strong { color: var(--wine); font-weight: 600; }

/* ── Depoimentos (prints reais de WhatsApp, sem prova social forjada) ──
   Cada print tem uma proporção diferente (uma bolha só, várias bolhas
   empilhadas...), então o mosaico é montado em JS (script.js, função de
   masonry) distribuindo cada print pra coluna mais curta no momento —
   isso evita tanto o buraco vazio de sobra numa coluna quanto o bug de
   repaint do CSS `columns` (que recalcula/pisca o mosaico a cada hover
   ou scroll). O CSS aqui só estiliza as colunas que o JS cria. */
.dep-grid { display: flex; align-items: flex-start; gap: 24px; }
.dep-col { display: flex; flex-direction: column; gap: 24px; flex: 1 1 0; min-width: 0; }
.dep-card {
  background: var(--white); border-radius: 16px; padding: 10px;
  box-shadow: var(--shadow);
}
.dep-card img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ── Localização ─────────────────────────────────── */
.local-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.local-endereco {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .98rem; color: var(--muted); line-height: 1.5;
  margin: 20px 0 28px;
}
.local-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--wine); margin-top: 2px; }
.local-map {
  aspect-ratio: 4/3; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-m);
}
#local-map-canvas { width: 100%; height: 100%; background: var(--surface); }
#local-map-canvas .leaflet-control-attribution { font-size: 10px; }
.local-map-pin { display: flex; }
.local-map-pin span {
  display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
  background: var(--wine); transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(42,33,28,.35);
  border: 2px solid var(--white);
}

/* ── CTA final ───────────────────────────────────── */
.cta-final { padding: 96px 0; }
.cta-final-inner { max-width: 620px; margin: 0 auto; }
.cta-final-h2 { font-family: var(--font-script); font-size: 2.2rem; font-weight: 700; color: var(--white); margin-bottom: 16px; }
.cta-final-sub { font-size: .98rem; color: rgba(255,255,255,.75); margin-bottom: 32px; line-height: 1.6; }

/* ── Footer ──────────────────────────────────────── */
footer { background: var(--wine-d); padding: 48px 0 32px; }
.foot-inner { text-align: center; }
.foot-logo { margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.foot-logo-img { height: 76px; width: auto; display: block; }
.foot-social { display: flex; justify-content: center; gap: 24px; margin-bottom: 14px; }
.foot-social a { font-size: .82rem; color: rgba(255,255,255,.7); transition: color .15s; }
.foot-social a:hover { color: var(--white); }
.foot-local { font-size: .78rem; color: rgba(255,255,255,.55); margin-bottom: 10px; }
.foot-copy { font-size: .74rem; color: rgba(255,255,255,.6); }
.foot-credit { text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
.foot-credit:hover { color: var(--blush-l); }

/* ── WhatsApp float ──────────────────────────────── */
#wpp {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: #25d366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.45);
  z-index: 600;
}
.wpp-ring {
  position: absolute; width: 56px; height: 56px;
  border: 2px solid #25d366; border-radius: 50%;
  animation: ring 2.5s infinite;
}
@keyframes ring { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.45);opacity:0} }

/* ── Scroll reveal ───────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Reveal variants — each section gets an entrance that fits what it reveals,
   instead of the same translateY fade repeated everywhere */
.reveal-zoom { transform: scale(1.07); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal-zoom.visible { transform: scale(1); }

.reveal-left { transform: translateX(-32px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-left.visible { transform: translateX(0); }

/* ── Responsive 1024px ───────────────────────────── */
@media(max-width:1024px) {
  .hero-inner { gap: 32px; }
  .section-head-split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .cursos-grid { grid-template-columns: 1fr 1fr; }
  .cursos-grid-tecnicas { grid-template-columns: 1fr 1fr; }
  .dep-grid { gap: 16px; }
  .dep-col { gap: 16px; }
  .curso-card-destaque.reveal.visible, .curso-card-destaque.reveal.visible:hover { transform: none; grid-column: 1 / -1; }
  .atend-layout { grid-template-columns: 1fr; gap: 40px; }
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
  .premios-layout { grid-template-columns: 1fr; gap: 40px; }
  .premios-detalhe { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 32px; }
}

/* O nav ganhou 2 itens (Credenciais, Depoimentos, Localização) e não
   cabe mais no desktop "médio" — troca pro hamburger num breakpoint
   próprio, mais cedo que o resto do layout de 1024px, só pra evitar
   o menu/botão de WhatsApp saindo da tela nessa faixa de largura. */
@media(max-width:1240px) {
  .ham { display: flex; }
  .nav-links, .nav-cta { display: none; }
}

/* ── Responsive 768px ────────────────────────────── */
@media(max-width:768px) {
  .logo-img { height: 54px; }
  .foot-logo-img { height: 60px; }

  /* Hero no mobile: texto corrido em coluna única, de ponta a ponta
     (título e parágrafo ocupam a largura toda, justificado), com a foto
     posicionada logo depois do parágrafo (que termina em "tom de pele e
     temperamento") e antes dos botões de CTA — não mais lado a lado com
     o texto. .hero-text vira "display:contents" só aqui pra seus filhos
     entrarem como itens diretos do grid do pai. Esse breakpoint (768px,
     não 480px) garante que qualquer celular real ou janela redimensionada
     pra largura de tablet já entre nesse layout empilhado. */
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "heading"
      "sub"
      "photo"
      "ctas"
      "stats";
    gap: 6px;
    align-items: start;
  }
  .hero-text { display: contents; }
  .hero-text > .eyebrow { grid-area: eyebrow; text-align: center; margin-top: 0; }
  .hero-text > h1 { grid-area: heading; }
  .hero-text > .hero-sub { grid-area: sub; text-align: justify; text-justify: inter-word; }
  .hero-text > .hero-ctas { grid-area: ctas; }
  .hero-text > .hero-stats { grid-area: stats; }
  .hero-visual { grid-area: photo; margin-top: -50px; margin-bottom: 20px; }

  .section { padding: 64px 0; }
  .galeria-grid { grid-template-columns: 1fr 1fr; }
  .premios-stat-num { font-size: 2.5rem; min-width: 88px; }
  .curso-card-destaque.reveal.visible, .curso-card-destaque.reveal.visible:hover { grid-column: auto; }
  .atend-menu { padding: 32px 24px; }
  .atend-menu-head { flex-wrap: wrap; }
  .atend-menu-dots { display: none; }

  /* O botão flutuante do WhatsApp é position:fixed, então ao rolar até o
     fim real da página ele fica sobre o canto inferior direito do
     viewport — que nesse ponto coincide com a última linha do rodapé.
     Em telas largas o texto do rodapé fica centralizado longe da borda,
     mas em telas estreitas ele ocupa a largura toda e some atrás do
     botão. Empurra o rodapé pra cima do alcance do botão (56px + 24px
     de offset) só nessa faixa de largura. */
  footer { padding-bottom: 88px; }
}

/* ── Responsive 480px ─────────────────────────────
   User explicitly wants side-by-side layouts preserved even on phone
   width (hero, sobre, especialidades, cursos, localização) instead of
   the usual single-column stack — so instead of collapsing to 1fr here,
   we keep every grid at its desktop column count and shrink type/spacing
   so two-up (or four-up, for pilares) still fits a ~360-390px viewport. */
@media(max-width:480px) {
  /* grid tracks default to a min-width based on their content's longest
     unbreakable word (e.g. "Certificados", "Colorimetria") — minmax(0,1fr)
     above stops that from forcing the row wider than the phone, but the
     word itself still needs somewhere to go, so let it break mid-word here
     instead of overflowing its column. */
  .pilar-label, .especialidade-title, .curso-nome, .curso-tag, .curso-preco, .sobre-cred, .local-endereco {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .wrap { padding: 0 12px; }
  .hero { padding: 22px 0 28px; }

  h1 { margin-bottom: 0; }
  .hero-text > h1 { margin-top: 17px; }
  .eyebrow { font-size: .58rem; }
  .hero-sub { font-size: .74rem; line-height: 1.45; margin-bottom: 6px; }
  /* Texto justificado fica ruim em colunas estreitas (espaços grandes
     entre palavras) — mantém tudo alinhado à esquerda no mobile pros
     demais parágrafos de seção (o hero acima é a exceção pedida). */
  .section-sub, .especialidade-desc, .curso-desc, .atend-feature-desc,
  .atend-menu-desc, .atend-menu-nota, .premios-p, .sobre-p {
    text-align: left;
  }
  .hero-ctas { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
  .hero-ctas a { text-align: center; }
  .btn-lg { padding: 10px 14px; font-size: .72rem; }
  .hero-stats { display: flex; justify-content: center; text-align: center; gap: 18px; margin-bottom: 0; margin-top: 2px; }
  .hero-stats .hero-stat:nth-child(2) { justify-self: auto; transform: none; }
  .hero-stat strong { font-size: .84rem; }
  .hero-stat span { font-size: .58rem; }
  .hero-divider { height: 22px; }

  .pilares { padding: 18px 0; }
  .pilares-grid { gap: 8px; }
  .pilar-icon { width: 17px; height: 17px; }
  .pilar-label { font-size: .58rem; }
  #sobre { padding-top: 32px; }

  /* Sobre no mobile: corre como texto corrido — título + 1º parágrafo,
     depois a foto centralizada e bem ajustada como uma quebra no meio,
     depois o resto do texto continua de ponta a ponta. .sobre-text vira
     "display:contents" só aqui pra seus filhos (e a foto) entrarem como
     itens diretos do flex do pai e serem reordenados com "order". */
  .sobre-layout { display: flex; flex-direction: column; gap: 0; }
  .sobre-text { display: contents; }
  .sobre-text > .eyebrow { order: 1; }
  .sobre-text > .section-title { order: 2; margin-bottom: 12px; }
  .sobre-text > .sobre-p:nth-of-type(2) { order: 3; }
  .sobre-visual { order: 4; max-width: 240px; margin: 24px auto 28px; }
  .sobre-text > .sobre-p:nth-of-type(3) { order: 5; }
  .sobre-creds { order: 6; }
  .sobre-quote { order: 7; }
  .sobre-p { font-size: .7rem; line-height: 1.5; margin-bottom: 10px; }
  .sobre-creds { gap: 6px; margin-top: 12px; }
  .sobre-cred { font-size: .66rem; gap: 6px; }
  .cred-icon { width: 14px; height: 14px; }
  .sobre-quote { font-size: .92rem; margin-top: 16px; padding-top: 14px; }

  .especialidades-grid { gap: 8px; }
  .especialidade-card { padding: 14px 10px; }
  .especialidade-icon { width: 20px; height: 20px; margin-bottom: 8px; }
  .especialidade-title { font-size: .74rem; margin-bottom: 6px; }
  .especialidade-desc { font-size: .64rem; line-height: 1.4; }

  .section-head-split { text-align: center; align-items: center; }
  .section-head-split .section-sub { margin: 0 auto; }

  .premios-layout { grid-template-columns: 1fr; text-align: center; }
  .premios-stats { flex-direction: row; justify-content: center; align-items: flex-start; gap: 14px; }
  .premios-stat { flex: 1; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .premios-stat-num { min-width: 0; font-size: 2rem; }
  .premios-stat-label { font-size: .68rem; }
  .premios-detalhe { text-align: center; }

  .cursos-grid, .cursos-grid-tecnicas { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .cursos-grid-color { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: none; }
  .curso-card { padding: 14px 12px; }
  .curso-tag { font-size: .56rem; margin-bottom: 8px; }
  .curso-nome { font-size: .78rem; margin-bottom: 6px; }
  .curso-desc { font-size: .66rem; line-height: 1.4; margin-bottom: 10px; }
  .curso-preco { font-size: .95rem; }
  .curso-parcela { font-size: .6rem; margin-bottom: 10px; }
  .curso-card .btn-outline-wine, .curso-card .btn-wine { padding: 9px 10px; font-size: .68rem; }
  .curso-ribbon { font-size: .56rem; padding: 4px 10px; }

  .dep-grid { gap: 10px; }
  .dep-col { gap: 10px; }
  .dep-card { padding: 6px; border-radius: 12px; }
  .dep-card img { border-radius: 7px; }

  .local-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 14px; }
  .local-endereco { font-size: .72rem; gap: 6px; margin: 12px 0 16px; }
  .local-icon { width: 15px; height: 15px; }
  .local-text .btn-outline-wine { padding: 9px 14px; font-size: .74rem; }
}

/* ── Touch & accessibility ────────────────────────── */
button, a { touch-action: manipulation; }
.ham { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* Foco de teclado visível, na cor da marca (nunca remover sem substituir).
   Navegadores modernos já acompanham o border-radius do próprio elemento. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .hero-stagger { opacity: 1; transform: none; animation: none; }
}