/* =========================================================
   Made by Ayu — estilos da estética de colagem / scrapbook
   ========================================================= */

/* ---------- Fontes locais (licença OFL — assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff") format("woff"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans.woff") format("woff"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat.woff") format("woff"); font-weight: 400 700; font-display: swap; }

/* ---------- Página: tema claro fixo (estética de papel) ---------- */
:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { font-family: "DM Sans", system-ui, sans-serif; color: #1C2B2A; }

/* Barra do topo e botão "voltar ao topo" respeitam o entalhe/barras do celular */
#topo { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
#btnTopo {
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Nada pode "vazar" para os lados no celular ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img { max-width: 100%; }

/* ---------- Textura de papel no fundo ---------- */
body {
  -webkit-font-smoothing: antialiased;
  background-color: #FBF4E2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Folha quadriculada de caderno */
.quadriculado {
  background-image:
    linear-gradient(rgba(14,140,133,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,140,133,.12) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Folha pautada */
.pautado {
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(14,140,133,.18) 31px 32px);
}

/* ---------- Fita adesiva (washi tape) ---------- */
.fita {
  position: absolute;
  width: 96px;
  height: 28px;
  background: rgba(249, 210, 90, .78);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
  z-index: 5;
}
.fita.tq { background: rgba(46, 196, 186, .65); }
.fita.listrada {
  background: repeating-linear-gradient(45deg, rgba(255,138,115,.75) 0 8px, rgba(255,253,246,.8) 8px 16px);
}

/* ---------- Bordas de papel rasgado ---------- */
.rasgado-baixo {
  clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),95% 100%,90% calc(100% - 10px),84% 100%,78% calc(100% - 12px),71% 100%,64% calc(100% - 8px),57% 100%,50% calc(100% - 13px),43% 100%,36% calc(100% - 9px),29% 100%,22% calc(100% - 12px),15% 100%,8% calc(100% - 10px),0 100%);
}
.rasgado-cima {
  clip-path: polygon(0 14px,6% 0,13% 10px,20% 1px,27% 12px,34% 2px,41% 9px,48% 0,55% 12px,62% 3px,69% 11px,76% 0,83% 10px,90% 2px,96% 12px,100% 4px,100% 100%,0 100%);
}

/* ---------- Estrelas e elementos flutuantes ---------- */
.flutua   { animation: flutua 6s ease-in-out infinite; }
.flutua-2 { animation: flutua 7.5s ease-in-out infinite reverse; }
@keyframes flutua {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 8deg)); }
}

.gira-lento { animation: gira 22s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Logo do topo: leve "balanço" de adesivo no hover */
.logo-adesivo { transition: transform .35s cubic-bezier(.2,.8,.3,1.4); }
.logo-adesivo:hover { transform: rotate(-8deg) scale(1.06); }

/* ---------- Marca-texto ---------- */
.marca-texto {
  background: linear-gradient(transparent 55%, #FCE184 55%, #FCE184 90%, transparent 90%);
  padding: 0 .15em;
}

/* ---------- Entrada dos cards ao filtrar ---------- */
.card-enter { animation: cardIn .5s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(.96); }
}

/* ---------- Revelar seções ao rolar ---------- */
/* Seções sempre visíveis; ao entrar na tela só "assentam" levemente */
.reveal { transform: translateY(14px); transition: transform .7s ease; }
.reveal.visivel { transform: none; }

/* ---------- Letreiro rolante ---------- */
.letreiro { animation: letreiro 28s linear infinite; }
@keyframes letreiro { to { transform: translateX(-50%); } }

/* ---------- Abas com rolagem horizontal no mobile ---------- */
.abas::-webkit-scrollbar { display: none; }
.abas { scrollbar-width: none; }


/* =========================================================
   HERO — papel de caderno, selo giratório e fitas washi
   ========================================================= */

/* Fundo de papel: pontilhado + quadriculado bem sutil + manchas de luz */
.papel-hero {
  background-color: #FFFBEA;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(252,225,132,.45), transparent 38%),
    radial-gradient(circle at 85% 70%, rgba(46,196,186,.18), transparent 40%),
    radial-gradient(rgba(28,43,42,.16) 1.2px, transparent 1.3px),
    linear-gradient(rgba(14,140,133,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,140,133,.07) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px, 44px 44px, 44px 44px;
}

/* 🎡 Logo girando como selo/carimbo */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.selo-gira {
  animation: spin 20s linear infinite;
  will-change: transform;
}
/* Pausa o giro ao passar o mouse (detalhe interativo) */
.selo:hover .selo-gira { animation-play-state: paused; }
.selo { transition: transform .35s cubic-bezier(.2,.8,.3,1.4); }
.selo:hover { transform: scale(1.06) rotate(-6deg); }

/* 📸 COLAGEM DA FOTO — tamanhos travados (não dependem do Tailwind) */
.hero-colagem {
  position: relative;
  width: min(260px, 70vw);     /* celular: no máximo 260px */
  margin: 8px auto 12px;
}
@media (min-width: 640px)  { .hero-colagem { width: 320px; } }
@media (min-width: 1024px) { .hero-colagem { width: 360px; margin: 0 auto; } }

/* papéis coloridos desalinhados atrás da foto */
.hero-fundo {
  position: absolute;
  inset: 0;
  border: 2px solid #1C2B2A;
}
.hero-fundo-turquesa { background: #2EC4BA; transform: rotate(-7deg) translate(10px, 6px); box-shadow: 5px 5px 0 #000; }
.hero-fundo-amarelo  { background-color: #FCE184; transform: rotate(4deg) translate(-8px, 0); box-shadow: 5px 5px 0 #083D3B; }

/* polaroid: fundo branco, borda fina escura, margem maior embaixo */
.polaroid {
  position: relative;
  margin: 0;
  padding: 10px 10px 48px;
  background: #fff;
  border: 2px solid #1C2B2A;
  box-shadow: 6px 6px 0 #000;
  transform: rotate(-2deg);
  transition: transform .5s ease;
}
.polaroid:hover { transform: rotate(0deg); }
.polaroid-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1.5px solid #1C2B2A;
  background: #C5EEEB;
}
.polaroid-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-family: Caveat, cursive;
  font-size: 1.65rem;
  line-height: 1.2;
  color: #1C2B2A;
}
.polaroid-fita { top: -14px; left: 50%; width: 96px; height: 28px; transform: translateX(-50%) rotate(-4deg); }

/* logo girando, pequena, sobre o canto da polaroid */
.hero-selo {
  position: absolute;
  z-index: 20;
  top: -26px;
  right: -26px;
  width: 80px;
  height: 80px;
}
.hero-selo::before {            /* "papelão" preto atrás do selo */
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #000;
  transform: translate(4px, 4px);
}
.hero-selo img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000;
}
@media (min-width: 640px) { .hero-selo { width: 96px; height: 96px; top: -32px; right: -32px; } }

/* adesivos pequenos nas bordas */
.hero-adesivo {
  position: absolute;
  z-index: 10;
  padding: 4px 10px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
.hero-adesivo-mao   { top: 38%; left: -14px; transform: rotate(-12deg); background: #FF8A73; border-radius: 999px; }
.hero-adesivo-video { bottom: -22px; right: -12px; transform: rotate(5deg); background: #2EC4BA; text-transform: uppercase; font-size: 11px; }

/* ✂️ Fita adesiva semitransparente (washi tape) */
.washi {
  position: absolute;
  z-index: 15;
  width: 120px;
  height: 34px;
  opacity: .85;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  /* pontas serrilhadas como fita rasgada à mão */
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%,
                     100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
  mix-blend-mode: multiply;
}
.washi-amarela  { background: rgba(249, 210, 90, .85); }
.washi-turquesa { background: rgba(46, 196, 186, .7); }
.washi-listrada {
  background: repeating-linear-gradient(45deg, rgba(255,138,115,.85) 0 7px, rgba(255,253,246,.9) 7px 14px);
}

/* =========================================================
   CARROSSÉIS (posts estilo Instagram)
   ========================================================= */
.car-trilho {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.car-trilho::-webkit-scrollbar { display: none; }
.car-trilho:focus-visible { outline: 3px solid #2EC4BA; outline-offset: -3px; }
.car-trilho img { user-select: none; -webkit-user-drag: none; }

/* =========================================================
   MESA DO CLIENTE — Clube do Livro (vinho amassado + jornal)
   ========================================================= */
.mesa-clube {
  position: relative;
  background-color: #7E1426;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(ellipse at 80% 60%, rgba(0,0,0,.22), transparent 50%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(25deg, rgba(0,0,0,.05) 0 1px, transparent 1px 13px);
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
@media (min-width: 640px) {
  .mesa-clube { border: 3px solid #000; box-shadow: 12px 12px 0 #1C2B2A; }
}
/* faixas listradas nos cantos, como nos posts do clube */
.mesa-clube::before, .mesa-clube::after {
  content: ""; position: absolute; width: 140px; height: 26px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #F1E4C8 0 10px, #8A1328 10px 20px);
  border: 2px solid #000;
}
.mesa-clube::before { top: 26px; left: -36px; transform: rotate(-35deg); }
.mesa-clube::after  { bottom: 26px; right: -36px; transform: rotate(-35deg); }
.mesa-clube { overflow: hidden; }

/* =========================================================
   MESA DO CLIENTE — Teacher Jess (caderno azul-marinho)
   ========================================================= */
.mesa-teacher {
  position: relative;
  overflow: hidden;
  background-color: #090B3C;
  background-image:
    linear-gradient(90deg, transparent 46px, rgba(186,0,7,.75) 46px, rgba(186,0,7,.75) 49px, transparent 49px),
    linear-gradient(rgba(250,247,236,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,247,236,.07) 1px, transparent 1px),
    radial-gradient(ellipse at 80% 15%, rgba(255,255,255,.08), transparent 45%);
  background-size: auto, 28px 28px, 28px 28px, auto;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
@media (min-width: 640px) {
  .mesa-teacher { border: 3px solid #000; box-shadow: 12px 12px 0 #BA0007; }
}
/* estrelas vermelhas nos cantos, como nos posts da Jess */
.mesa-teacher::before, .mesa-teacher::after {
  content: "★"; position: absolute; pointer-events: none;
  color: #BA0007; font-size: 64px; line-height: 1; text-shadow: 3px 3px 0 #000;
}
.mesa-teacher::before { top: 14px; right: 18px; transform: rotate(14deg); }
.mesa-teacher::after  { bottom: 18px; left: 60px; transform: rotate(-12deg); font-size: 44px; }

/* =========================================================
   MESA DO CLIENTE — Tabi Nakazato (rosa com brilhos)
   ========================================================= */
.mesa-tabi {
  position: relative;
  overflow: hidden;
  background-color: #F2BDBD;
  background-image:
    radial-gradient(rgba(255,255,255,.55) 2px, transparent 2.5px),
    radial-gradient(ellipse at 15% 10%, rgba(255,255,255,.45), transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(229,138,181,.45), transparent 50%);
  background-size: 22px 22px, auto, auto;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
@media (min-width: 640px) {
  .mesa-tabi { border: 3px solid #000; box-shadow: 12px 12px 0 #8E5C93; }
}
/* brilhos amarelos como nas thumbnails */
.mesa-tabi::before, .mesa-tabi::after {
  content: "✦"; position: absolute; pointer-events: none;
  color: #FBE38A; line-height: 1; text-shadow: 2px 2px 0 #8E5C93;
}
.mesa-tabi::before { top: 12px; right: 20px; font-size: 58px; }
.mesa-tabi::after  { bottom: 16px; left: 18px; font-size: 42px; }

/* =========================================================
   MESA DO CLIENTE — @made.by._ayu (turquesa com estrelas amarelas)
   ========================================================= */
.mesa-ayu {
  position: relative;
  overflow: hidden;
  background-color: #4FC8CF;
  background-image:
    linear-gradient(rgba(255,250,232,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,250,232,.18) 1px, transparent 1px),
    radial-gradient(ellipse at 85% 10%, rgba(255,255,255,.35), transparent 45%);
  background-size: 30px 30px, 30px 30px, auto;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
@media (min-width: 640px) {
  .mesa-ayu { border: 3px solid #000; box-shadow: 12px 12px 0 #FFED00; }
}
.mesa-ayu::before, .mesa-ayu::after {
  content: "★"; position: absolute; pointer-events: none;
  color: #FFED00; line-height: 1; text-shadow: 3px 3px 0 #1C2B2A;
}
.mesa-ayu::before { top: 10px; right: 16px; font-size: 70px; transform: rotate(12deg); }
.mesa-ayu::after  { bottom: 14px; left: 16px; font-size: 48px; transform: rotate(-14deg); }

/* =========================================================
   MESA — Logotipos (quadro de cortiça com tachinhas)
   ========================================================= */
.mesa-logos {
  position: relative;
  overflow: hidden;
  background-color: #C99E6B;
  background-image:
    radial-gradient(rgba(92,58,30,.35) 1px, transparent 1.6px),
    radial-gradient(rgba(255,240,210,.35) 1px, transparent 1.6px),
    radial-gradient(ellipse at 20% 15%, rgba(255,240,210,.35), transparent 50%);
  background-size: 9px 9px, 13px 13px, auto;
  background-position: 0 0, 4px 6px, 0 0;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
@media (min-width: 640px) {
  .mesa-logos { border: 10px solid #8A5A2B; outline: 3px solid #000; outline-offset: -3px; box-shadow: 12px 12px 0 #1C2B2A; }
}
/* tachinhas nos cantos */
.mesa-logos::before, .mesa-logos::after {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #000; box-shadow: 2px 3px 0 rgba(0,0,0,.45); pointer-events: none;
}
.mesa-logos::before { top: 14px; left: 16px; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #2EC4BA 20%); }
.mesa-logos::after  { top: 14px; right: 16px; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #FF8A73 20%); }

/* Carimbo de borracha */
.carimbo {
  display: inline-block;
  padding: 4px 12px;
  border: 3px double #8A1328;
  border-radius: 6px;
  color: #8A1328;
  background: rgba(255,253,246,.85);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 6;
}

/* Dica "arraste" balançando no primeiro carrossel */
.dica-arraste { animation: cutucar 1.6s ease-in-out infinite; }
@keyframes cutucar {
  0%, 100% { transform: translateX(-50%); }
  50%      { transform: translateX(calc(-50% + 10px)); }
}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, .reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   CONVITE PARA O BRIEFING — colagem igual à do topo do site
   ========================================================= */
.cta-colagem {
  position: relative; align-self: center; width: min(calc(100% - 16px), 440px); margin: 26px auto 30px;
}
/* papéis coloridos desalinhados atrás do cartão (mesmo recurso da foto do topo) */
.cta-fundo { position: absolute; inset: 0; border: 2px solid #1C2B2A; }
.cta-fundo-turquesa { background: #2EC4BA; transform: rotate(-5deg) translate(10px, 8px); box-shadow: 5px 5px 0 #000; }
.cta-fundo-amarelo  { background-color: #FCE184; transform: rotate(3deg) translate(-8px, 2px); box-shadow: 5px 5px 0 #083D3B; }

/* cartão branco principal */
.cta-cartao {
  position: relative; z-index: 2; display: block; color: #1C2B2A; text-decoration: none;
  background: #fff; border: 2px solid #1C2B2A; box-shadow: 6px 6px 0 #000;
  padding: 40px 24px 30px; text-align: center; transform: rotate(-1.5deg);
  transition: transform .5s ease;
}
@media (min-width: 640px) { .cta-cartao { padding: 46px 34px 34px; } }
.cta-colagem:hover .cta-cartao { transform: rotate(0deg); }
.cta-cartao:focus-visible { outline: 3px solid #2EC4BA; outline-offset: 6px; }
.cta-fita { top: -15px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 110px; height: 30px; }

/* selinho de texto (igual ao "Made by Ayu · design & branding" do topo) */
.cta-selo-texto {
  display: inline-flex; align-items: center; gap: 8px; transform: rotate(-2deg);
  border: 3px solid #000; background: #FCE184; padding: 4px 12px; box-shadow: 4px 4px 0 #000;
  font: 700 12px/1.3 "Bricolage Grotesque", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em;
}
.cta-titulo {
  display: block; margin-top: 22px;
  font: 800 clamp(2.1rem, 8vw, 3rem)/1.12 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.02em;
}
/* palavra em caixinha turquesa, igual ao "cores" do título principal */
.cta-caixa {
  display: inline-block; transform: rotate(-2deg); margin-top: 6px;
  background: #2EC4BA; border: 3px solid #000; box-shadow: 5px 5px 0 #000; padding: 0 .2em;
}
.cta-texto { display: block; margin: 20px auto 0; max-width: 330px; font-size: 16px; line-height: 1.6; color: rgba(28,43,42,.85); }

/* botão igual ao "Ver projetos" do topo */
.cta-botao {
  margin-top: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 3px solid #000; border-radius: 12px; background: #2EC4BA; padding: 14px 26px;
  box-shadow: 6px 6px 0 #000; font: 700 17px "Bricolage Grotesque", system-ui, sans-serif;
  transition: transform .2s, box-shadow .2s;
}
.cta-botao svg { transition: transform .2s; }
.cta-cartao:hover .cta-botao { transform: translate(-4px, -4px); box-shadow: 9px 9px 0 #000; }
.cta-cartao:hover .cta-botao svg { transform: translateX(4px); }
.cta-cartao:active .cta-botao { transform: translate(4px, 4px); box-shadow: none; }

/* logo girando no canto */
.cta-selo { position: absolute; z-index: 5; top: -30px; right: -18px; width: 78px; height: 78px; }
.cta-selo::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #000; transform: translate(4px, 4px); }
.cta-selo img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #000; }
@media (min-width: 640px) { .cta-selo { width: 92px; height: 92px; top: -36px; right: -34px; } }

/* adesivos nas bordas */
.cta-adesivo {
  position: absolute; z-index: 6; padding: 4px 10px; border: 2px solid #000; box-shadow: 3px 3px 0 #000;
  font: 800 12px "Bricolage Grotesque", system-ui, sans-serif; white-space: nowrap; pointer-events: none;
}
.cta-adesivo-tempo  { top: 14px; left: -14px; transform: rotate(-12deg); background: #FF8A73; border-radius: 999px; }
.cta-adesivo-marca  { bottom: -16px; right: -8px; transform: rotate(5deg); background: #2EC4BA; text-transform: uppercase; font-size: 11px; }
.cta-coracao { position: absolute; z-index: 6; bottom: -22px; left: -8px; width: 38px; height: 38px; pointer-events: none; }


/* =========================================================
   CONTATO — tudo centralizado, cartões lado a lado
   ========================================================= */
.contato-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 640px) { .contato-wrap { padding: 0 24px; } }
.contato-topo { text-align: center; }
.contato-sub { margin: 16px auto 0; max-width: 28rem; font-size: 1.125rem; line-height: 1.6; color: rgba(28,43,42,.8); }
.contato-cartoes {
  margin-top: 36px; width: 100%; max-width: 860px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch;
}
@media (min-width: 640px) { .contato-cartoes { gap: 22px; } }
/* cada contato é um quadradinho: ícone em cima, texto embaixo */
.contato-cartao {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0;
  border: 2px solid #1C2B2A; background: #fff; padding: 16px 8px 14px; box-shadow: 4px 4px 0 #1C2B2A;
  color: #1C2B2A; text-decoration: none; text-align: center; transition: transform .25s, box-shadow .25s;
}
@media (min-width: 640px) { .contato-cartao { padding: 24px 16px 20px; box-shadow: 6px 6px 0 #1C2B2A; } }
.contato-cartao:hover { transform: translateY(-3px); box-shadow: 8px 8px 0 #1C2B2A; }
.contato-link { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-width: 0; width: 100%; }
.contato-icone {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 2px solid #1C2B2A; border-radius: 12px; color: #1C2B2A; box-shadow: 3px 3px 0 #1C2B2A;
}
@media (min-width: 640px) { .contato-icone { width: 58px; height: 58px; border-radius: 14px; } }
.contato-rotulo { margin-top: 4px; font: 800 15px "Bricolage Grotesque", system-ui, sans-serif; }
@media (min-width: 640px) { .contato-rotulo { font-size: 18px; } }
.contato-texto { font-weight: 600; font-size: 14px; line-height: 1.3; color: rgba(28,43,42,.8); overflow-wrap: anywhere; }
/* no celular, mostra só ícone + nome (o quadradinho já abre o contato) */
@media (max-width: 639px) {
  .contato-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .contato-copiar { display: none; }
}
.contato-copiar {
  margin-top: 4px; border: 2px solid #1C2B2A; border-radius: 999px; background: #5CCFC6; padding: 4px 14px;
  font-size: 12px; font-weight: 700; box-shadow: 3px 3px 0 #1C2B2A; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.contato-copiar:hover { transform: translateY(-2px); }
.contato-copiar:active { transform: translateY(2px); box-shadow: none; }
.contato-redondos { margin-top: 28px; display: flex; justify-content: center; gap: 12px; }
.contato-wrap .cta-colagem { margin-top: 70px; }


/* =========================================================
   MESA DO CLIENTE — JANA Vet (verde oliva com patinhas e telhadinhos)
   ========================================================= */
.bg-jana { background-color: #A3AE8B; }
.mesa-jana {
  position: relative;
  overflow: hidden;
  background-color: #5E6B45;
  background-image:
    radial-gradient(rgba(243,236,220,.16) 2px, transparent 2.5px),
    radial-gradient(ellipse at 15% 8%, rgba(243,236,220,.18), transparent 45%),
    radial-gradient(ellipse at 90% 90%, rgba(46,58,44,.45), transparent 50%);
  background-size: 26px 26px, auto, auto;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
@media (min-width: 640px) {
  .mesa-jana { border: 3px solid #000; box-shadow: 12px 12px 0 #4C6A85; }
}
/* coração com brilhos e patinha nos cantos, como no logo */
.mesa-jana::before, .mesa-jana::after {
  position: absolute; pointer-events: none; line-height: 1;
}
.mesa-jana::before { content: "♥"; top: 14px; right: 20px; font-size: 60px; color: #B9C8D4; text-shadow: 3px 3px 0 #2E3A2C; transform: rotate(12deg); }
.mesa-jana::after  {
  content: ""; bottom: 18px; left: 18px; width: 54px; height: 54px; transform: rotate(-14deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F3ECDC'%3E%3Ccircle cx='6' cy='8' r='2.4'/%3E%3Ccircle cx='10.5' cy='4.6' r='2.4'/%3E%3Ccircle cx='15.5' cy='4.6' r='2.4'/%3E%3Ccircle cx='19' cy='8.6' r='2.4'/%3E%3Cpath d='M12.6 10.5c3.4 0 6.6 4.2 6.6 7.4 0 2.4-1.8 3.4-3.6 3.1-1.3-.2-2-.8-3-.8s-1.7.6-3 .8c-1.8.3-3.6-.7-3.6-3.1 0-3.2 3.2-7.4 6.6-7.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* =========================================================
   MESA DO CLIENTE — Valéria Rocha (azul com sol e hibisco, sem verde)
   ========================================================= */
.bg-valeria { background-color: #F0B43A; }
.mesa-valeria {
  position: relative;
  overflow: hidden;
  background-color: #1F4EB0;
  background-image:
    radial-gradient(circle at 88% 10%, #F0B43A 0 70px, transparent 71px),
    radial-gradient(rgba(241,228,200,.12) 1.6px, transparent 2px),
    radial-gradient(ellipse at 10% 95%, rgba(23,63,95,.6), transparent 50%);
  background-size: auto, 22px 22px, auto;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
@media (min-width: 640px) {
  .mesa-valeria { border: 3px solid #000; box-shadow: 12px 12px 0 #E06A12; }
}
/* hibisco e aviãozinho nos cantos */
.mesa-valeria::before, .mesa-valeria::after { position: absolute; pointer-events: none; line-height: 1; }
.mesa-valeria::before { content: "✿"; bottom: 16px; left: 18px; font-size: 64px; color: #C42A1F; text-shadow: 3px 3px 0 #173F5F; transform: rotate(-12deg); }
.mesa-valeria::after  { content: "✈"; top: 22px; left: 22px; font-size: 44px; color: #F1E4C8; text-shadow: 3px 3px 0 #173F5F; transform: rotate(-18deg); }