/* ==========================================================================
   Marina's Doces — Premium Bio Site
   Paleta: #FFF8F6 · #FCE8E8 · #D97D8D · #BE6676 · #5B4345
   Mobile-first (iPhone 11+ ≈ 414px). Desktop adapta proporcionalmente.
   ========================================================================== */

:root {
  --cream:  #FFF8F6;
  --blush:  #FCE8E8;
  --rose:   #D97D8D;
  --rosedk: #BE6676;
  --ink:    #5B4345;
  --ink-soft: rgba(91, 67, 69, 0.68);
  --ring:   rgba(217, 125, 141, 0.30);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fundo com brilhos rosé muito suaves ----------------------------------- */
.bg-canvas {
  position: relative;
  background:
    radial-gradient(60% 40% at 82% 2%, rgba(252, 232, 232, 0.9) 0%, transparent 60%),
    radial-gradient(50% 30% at 10% 6%, rgba(252, 232, 232, 0.7) 0%, transparent 60%),
    radial-gradient(70% 50% at 50% 108%, rgba(252, 232, 232, 0.6) 0%, transparent 60%),
    var(--cream);
}

/* Container mobile-first (biosite) -------------------------------------- */
.shell {
  width: 100%;
  max-width: 468px;
  margin-inline: auto;
  position: relative;
  padding-bottom: 28px;
}

/* Tipografia ------------------------------------------------------------- */
.display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
.text-grad {
  background: linear-gradient(100deg, var(--rosedk), var(--rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Gradientes de marca ---------------------------------------------------- */
.grad-rose { background: linear-gradient(135deg, #E39AA6 0%, #D97D8D 45%, #BE6676 100%); }
.grad-soft { background: linear-gradient(160deg, #FFFFFF 0%, #FDEFEF 100%); }

/* Glass / cartões -------------------------------------------------------- */
.glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.75);
}
.card {
  background: #FFFFFF;
  border: 1px solid rgba(190, 102, 118, 0.10);
  box-shadow: var(--shadow, 0 20px 48px -20px rgba(190,102,118,0.30), 0 3px 8px -4px rgba(190,102,118,0.14));
  border-radius: 2rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* cartões que sobem levemente no hover (páginas internas) */
.card.lift:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -22px rgba(190,102,118,0.4), 0 4px 10px -4px rgba(190,102,118,0.18); }

/* Navbar fixa ------------------------------------------------------------ */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 246, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(190, 102, 118, 0.08);
}

/* Chips sociais ---------------------------------------------------------- */
.social {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 9999px;
  color: #fff;
  background: linear-gradient(160deg, #E7A0AB 0%, #C56A79 100%);
  box-shadow: 0 0 0 4px rgba(252, 232, 232, 0.75), 0 12px 22px -8px rgba(190,102,118,0.55);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}
.social::after { /* brilho superior sutil */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 12%, rgba(255,255,255,.4), transparent 70%);
}
.social svg { position: relative; z-index: 1; }
.social:hover { transform: translateY(-4px) scale(1.08); filter: brightness(1.05); box-shadow: 0 0 0 4px rgba(252,232,232,0.95), 0 18px 28px -8px rgba(190,102,118,0.6); }
.social:active { transform: translateY(-1px) scale(.94); }
.social.tapped { animation: tapBounce .45s var(--ease); }
@keyframes tapBounce { 0% { transform: scale(.86); } 45% { transform: scale(1.12); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }

/* Botão base + ripple ---------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .85rem; width: 100%;
  border-radius: 1.5rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.btn:hover  { transform: translateY(-3px) scale(1.015); box-shadow: 0 24px 46px -12px rgba(190,102,118,0.62); }
.btn:active { transform: translateY(-1px) scale(.99); }

/* Brilho passando da esquerda p/ direita (botões e pílulas) -------------- */
.btn::before, .shine { position: relative; }
.btn::before, .shine::before {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 3;
}
.shine { position: relative; overflow: hidden; }
.btn:hover::before, .shine:hover::before { animation: shine .85s var(--ease); }
@keyframes shine { from { left: -130%; } to { left: 135%; } }
.ripple {
  position: absolute; border-radius: 9999px; transform: scale(0);
  background: rgba(255,255,255,0.55); pointer-events: none;
  animation: ripple .6s var(--ease); mix-blend-mode: soft-light;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* Seta circular ---------------------------------------------------------- */
.arrow {
  display: grid; place-items: center; flex-shrink: 0;
  border-radius: 9999px;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover .arrow, .group:hover .arrow {
  transform: translateX(3px) scale(1.08);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.18);
}

/* Card de link (grade 2x2) ---------------------------------------------- */
.linkcard {
  position: relative; overflow: hidden;
  border-radius: 1.9rem; min-height: 168px;
  box-shadow: 0 18px 40px -18px rgba(190,102,118,0.5), 0 2px 6px -2px rgba(190,102,118,0.25);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.linkcard img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: saturate(1.06) contrast(1.03);
  transition: transform .7s var(--ease);
}
/* gradiente inferior mais elegante (leitura do texto) + brilho de topo */
.linkcard::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(91,67,69,0) 30%, rgba(91,67,69,0.32) 62%, rgba(74,45,49,0.86) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 22%);
}
/* borda interna glass discreta */
.linkcard::before {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); pointer-events: none;
}
.linkcard:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 34px 58px -18px rgba(190,102,118,0.62), 0 4px 10px -4px rgba(190,102,118,0.3); }
.linkcard:hover img { transform: scale(1.09); }
/* conteúdo preenche o card (robusto no Safari: não depende de height:100%) */
.linkcard .content { position: absolute; inset: 0; z-index: 3; }
.linkcard .content span.glass { box-shadow: 0 6px 14px -6px rgba(0,0,0,0.25); }

/* Moldura da foto hero + floating --------------------------------------- */
.hero-frame {
  position: relative; border-radius: 2rem; overflow: hidden;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1.5px var(--ring), 0 34px 60px -26px rgba(190,102,118,0.55);
  animation: floaty 6s ease-in-out infinite;
}
.hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero-glow::before {
  content: ''; position: absolute; inset: -12% -8% -8% -8%; z-index: -1;
  background: radial-gradient(60% 60% at 60% 30%, rgba(252,232,232,0.95), transparent 70%);
  filter: blur(6px);
}

/* Divisor com coração ---------------------------------------------------- */
.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(190,102,118,0.35), transparent); }

/* Reveal on scroll (fade-up padrão + variantes) ------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.rl { transform: translateX(-30px); }   /* fade-right (entra da esquerda) */
.reveal.rr { transform: translateX(30px); }    /* fade-left  (entra da direita)  */
.reveal.rz { transform: scale(.92); }          /* zoom-in */
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }
.reveal.d5 { transition-delay: .35s; }
.reveal.d6 { transition-delay: .42s; }
.reveal.d7 { transition-delay: .49s; }

/* Entrada (load) --------------------------------------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.enter { opacity: 0; animation: fadeUp .7s var(--ease) both; }
.e1 { animation-delay: .05s; } .e2 { animation-delay: .12s; } .e3 { animation-delay: .19s; }
.e4 { animation-delay: .26s; } .e5 { animation-delay: .33s; } .e6 { animation-delay: .40s; }

/* Transição de página ---------------------------------------------------- */
#page-veil {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--cream); opacity: 0; transition: opacity .4s var(--ease);
}
#page-veil.show { opacity: 1; pointer-events: all; }

/* Fade-in de entrada da página (independente de JS) */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
main.shell { animation: pageIn .5s var(--ease) both; }

/* Páginas internas: reserva altura p/ a foto (absoluta) não invadir o conteúdo */
@media (max-width: 1023px) {
  main.shell > header.relative:not(.hero-grid) { min-height: 378px; }
}

/* Logo oficial: nítida, sem distorção, sombra suave */
.logo-official { object-fit: contain; filter: drop-shadow(0 10px 20px rgba(190, 102, 118, 0.22)); }

/* ==========================================================================
   HOME sem scroll — cabe exatamente em 100dvh (mobile / tablet)
   ========================================================================== */
@media (max-width: 1023px) {
  html, body { min-height: 100%; }

  /* Home em fluxo natural, preenchendo a tela com rolagem bem leve */
  main.shell.home {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 6px;
    animation: pageIn .5s var(--ease) both;
  }
  main.shell.home > * { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* altura definida por aspect-ratio (consistente Safari/Chrome) */
  .home-grid .linkcard { aspect-ratio: 5 / 4; min-height: 140px; }

  /* coluna de texto com respiro à esquerda (título/subtítulo mais à direita) */
  .home-hero .hero-copy { display: flex; flex-direction: column; padding-left: 16px; }
  /* logo um pouco à esquerda (alinhada à borda, com leve recuo) */
  .home-hero .logo-official { margin-left: -8px; margin-right: auto; }
}

/* Telas muito baixas: compacta ainda mais para nunca gerar rolagem */
@media (max-width: 1023px) and (max-height: 720px) {
  main.shell.home { gap: 6px; }
  .home-hero .logo-official { width: 92px; height: 92px; }
  .home-hero h1 { font-size: 1.55rem !important; }
}

/* Avatar monograma ------------------------------------------------------- */
.mono {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 9999px; color: #fff;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.05rem;
  background: linear-gradient(150deg, #E29AA5, #BE6676);
  box-shadow: 0 0 0 3px rgba(252,232,232,0.85), 0 8px 16px -8px rgba(190,102,118,0.5);
}

/* Estrelas --------------------------------------------------------------- */
.stars { color: #E7A33E; letter-spacing: 1px; }

/* Chips de filtro -------------------------------------------------------- */
.chip {
  flex: 0 0 auto;                 /* não encolhe: largura conforme o texto, sem cortar */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-weight: 600; font-size: .78rem; line-height: 1;
  padding: .6rem 1.25rem; white-space: nowrap;   /* mais respiro horizontal */
  background: rgba(255,255,255,0.8); color: var(--rosedk);
  border: 1px solid rgba(190,102,118,0.16);
  box-shadow: 0 6px 14px -8px rgba(190,102,118,0.3);
  transition: all .25s var(--ease);
}
.chip:hover { transform: translateY(-2px); }

/* Barra de filtros: rolagem horizontal suave, sem quebrar linha, sem scrollbar */
.chips-row { flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips-row::-webkit-scrollbar { display: none; }
.chip.active { background: linear-gradient(135deg, #D97D8D, #BE6676); color: #fff; border-color: transparent; box-shadow: 0 10px 20px -8px rgba(190,102,118,0.6); }

/* Galeria: tile ---------------------------------------------------------- */
.tile {
  position: relative; overflow: hidden; border-radius: 1.25rem;
  aspect-ratio: 1 / 1; cursor: zoom-in;
  box-shadow: 0 12px 28px -14px rgba(190,102,118,0.45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tile::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(190,102,118,0.35));
  transition: opacity .35s var(--ease);
}
.tile:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 40px -16px rgba(190,102,118,0.55); }
.tile:hover img { transform: scale(1.08); }
.tile:hover::after { opacity: 1; }

/* Lightbox --------------------------------------------------------------- */
#lightbox {
  position: fixed; inset: 0; z-index: 210; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(91,67,69,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease);
}
#lightbox.show { display: flex; opacity: 1; }
#lightbox img {
  max-width: 100%; max-height: 84vh; border-radius: 1.25rem;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
  transform: scale(.92); transition: transform .35s var(--ease);
}
#lightbox.show img { transform: scale(1); }
#lightbox .lb-close {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 9999px; color: #fff;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
}

/* Botão voltar ----------------------------------------------------------- */
.back {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 9999px; color: #fff;
  background: linear-gradient(150deg, #D97D8D, #BE6676);
  box-shadow: 0 10px 22px -10px rgba(190,102,118,0.6);
  transition: transform .25s var(--ease);
}
.back:hover { transform: translateX(-3px); }

/* Acessibilidade: reduzir movimento ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-frame { animation: none; }
  .enter, .reveal { animation: none; opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   DESKTOP (≥1024px) — adapta proporcionalmente, mantém identidade
   ========================================================================== */
@media (min-width: 1024px) {
  .shell { max-width: 1140px; padding-inline: 40px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 56px; min-height: 78vh; }
  .hero-grid .hero-copy { order: 1; }
  .hero-grid .hero-media { order: 2; max-width: 420px; margin-inline: auto; }
  .display-xl { font-size: clamp(3rem, 4.6vw, 4.6rem) !important; }
  .grid-2 { gap: 22px !important; }
  .linkcard { min-height: 230px; }
  .section { max-width: 980px; margin-inline: auto; }
  .btn-max { max-width: 720px; margin-inline: auto; }
  .menu-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1440px) {
  .shell { max-width: 1240px; }
}

/* ==========================================================================
   REFINO PREMIUM — catálogo, galeria masonry, timeline, carrossel, escala
   ========================================================================== */

/* Home: escala levemente maior aproveitando a altura (mantém no-scroll) --- */
@media (max-width: 1023px) {
  .home-hero .logo-official { width: 128px; height: 128px; }
  .home-btn .btn, .home-wa .btn { padding-top: 1.28rem; padding-bottom: 1.28rem; }
  .home-btn .btn .block.font-bold, .home-wa .btn .block.font-bold { font-size: 1.2rem; }
  .home-grid .linkcard h3 { font-size: 1.3rem; }
  .home-grid .linkcard .content { padding: 1rem; }
}

/* Cardápio — cartão de produto (catálogo premium) ----------------------- */
.product {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 1.6rem; overflow: hidden;
  border: 1px solid rgba(190,102,118,.10);
  box-shadow: 0 16px 40px -20px rgba(190,102,118,.30), 0 3px 8px -4px rgba(190,102,118,.12);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -22px rgba(190,102,118,.44); }
.product .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.product .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06); transition: transform .6s var(--ease); }
.product:hover .ph img { transform: scale(1.07); }
.product .tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: .58rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(190,102,118,.92); border-radius: 9999px; padding: .24rem .6rem;
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.3);
}
.product .pbody { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .28rem; flex: 1; }
.pedir {
  margin-top: .35rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 600; color: #fff;
  border-radius: 9999px; padding: .42rem .9rem;
  background: linear-gradient(135deg,#D97D8D,#BE6676);
  box-shadow: 0 10px 20px -8px rgba(190,102,118,.55);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.pedir:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 24px -8px rgba(190,102,118,.6); }

/* Galeria — masonry responsivo ------------------------------------------ */
.masonry { columns: 2; column-gap: 12px; }
@media (min-width: 480px) { .masonry { columns: 3; column-gap: 14px; } }
.masonry > * { break-inside: avoid; margin-bottom: 12px; }
.m-tile {
  position: relative; overflow: hidden; border-radius: 1.35rem; cursor: zoom-in; display: block;
  box-shadow: 0 14px 30px -16px rgba(190,102,118,.48);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.m-tile img { width: 100%; height: auto; display: block; filter: saturate(1.05); transition: transform .55s var(--ease); }
.m-tile::after { content: ''; position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, transparent 45%, rgba(91,67,69,.4)); transition: opacity .4s var(--ease); }
.m-tile:hover { transform: translateY(-5px); box-shadow: 0 26px 44px -18px rgba(190,102,118,.58); }
.m-tile:hover img { transform: scale(1.07); }
.m-tile:hover::after { opacity: 1; }
.m-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 9999px; color: #fff;
  background: rgba(91,67,69,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transform: scale(.8); transition: all .35s var(--ease);
}
.m-tile:hover .m-zoom { opacity: 1; transform: scale(1); }

/* Lightbox — navegação prev/next ---------------------------------------- */
#lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9999px;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease); z-index: 2;
}
#lightbox .lb-nav:hover { background: rgba(255,255,255,.28); }
#lightbox .lb-prev { left: 14px; } #lightbox .lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
#lightbox .lb-next { right: 14px; } #lightbox .lb-next:hover { transform: translateY(-50%) translateX(2px); }

/* Sobre — timeline ------------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg,#E7A0AB,#BE6676); border-radius: 2px; }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: -22px; top: 3px; width: 14px; height: 14px; border-radius: 9999px; background: #fff; border: 3px solid #C56A79; box-shadow: 0 0 0 4px rgba(252,232,232,.85); }
.tl-year { font-family: 'Playfair Display', serif; font-weight: 700; color: #BE6676; }

/* Depoimentos — carrossel ----------------------------------------------- */
.carousel {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: center; flex: 0 0 87%; }
@media (min-width: 640px) { .carousel > * { flex: 0 0 47%; } }
@media (min-width: 1024px) { .carousel > * { flex: 0 0 31.5%; } }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.dot { width: 7px; height: 7px; border-radius: 9999px; background: rgba(190,102,118,.28); transition: all .35s var(--ease); }
.dot.active { width: 22px; background: linear-gradient(90deg,#D97D8D,#BE6676); }

/* Reduz movimento */
@media (prefers-reduced-motion: reduce) {
  .btn::before, .shine::before, .social.tapped { animation: none !important; }
  .m-tile img, .product .ph img { transition: none; }
}

/* Telas baixas (ex.: iPhone SE, 375x667): a Home rola e mantém os cards --- */
@media (max-width: 1023px) and (max-height: 740px) {
  body.is-home { overflow: visible; }
  main.shell.home { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; gap: 8px; }
  .home-grid { min-height: 196px; }        /* cards sempre visíveis ao rolar */
  .home-grid .linkcard { min-height: 92px; }
  .home-hero .logo-official { width: 104px; height: 104px; }
  .home-hero h1 { font-size: 1.7rem !important; }
}

/* ==========================================================================
   RESPONSIVIDADE FINA (320–400px) — evita quebra de linha e altura extra
   em botões, chips e títulos. Só reduz proporcionalmente onde necessário;
   nas larguras normais nada muda (mesma cor, borda, sombra, tipografia).
   ========================================================================== */

/* Título dos botões sempre em 1 linha; "Pedir" nunca quebra */
.btn .flex-1 { min-width: 0; }
.btn .flex-1 > .block.font-bold { white-space: nowrap; }
.pedir { white-space: nowrap; }

@media (max-width: 400px) {
  .btn { gap: .7rem; }
  .home-btn .btn, .home-wa .btn { padding-left: 1rem; padding-right: 1rem; }
  .home-btn .btn .block.font-bold, .home-wa .btn .block.font-bold { font-size: 1.05rem; }
  .btn .flex-1 > .block:not(.font-bold) { font-size: .75rem; }
}

@media (max-width: 360px) {
  .btn { gap: .55rem; padding-left: .9rem; padding-right: .9rem; }
  .btn > span:first-child { width: 42px; height: 42px; }
  .btn > span:first-child svg { width: 20px; height: 20px; }
  .home-btn .btn .block.font-bold, .home-wa .btn .block.font-bold { font-size: 1rem; }
  .btn .flex-1 > .block.font-bold { font-size: .95rem; }
  .btn .flex-1 > .block:not(.font-bold) { font-size: .7rem; }
  .arrow { width: 34px; height: 34px; }
  .chip { font-size: .74rem; padding: .55rem 1rem; }
  .home-grid .linkcard h3 { font-size: 1.08rem; }   /* evita corte "Depoimentos" */
  .home-grid .linkcard .content { padding: .85rem; }
  .text-\[2\.7rem\] { font-size: 2.25rem; }   /* Cardápio / Galeria / Sobre */
}

@media (max-width: 330px) {
  .btn { gap: .5rem; padding-left: .8rem; padding-right: .8rem; }
  .btn > span:first-child { width: 40px; height: 40px; }
  .btn > span:first-child svg { width: 19px; height: 19px; }
  .arrow { width: 32px; height: 32px; }
  .home-btn .btn .block.font-bold, .home-wa .btn .block.font-bold { font-size: .84rem; }
  .btn .flex-1 > .block.font-bold { font-size: .84rem; }
  .btn .flex-1 > .block:not(.font-bold) { font-size: .66rem; }
  .home-grid .linkcard h3 { font-size: 1rem; }
  .text-\[2\.7rem\] { font-size: 2rem; }
  .text-\[2\.15rem\] { font-size: 1.9rem; }   /* título da Home */
  .text-\[2rem\] { font-size: 1.8rem; }        /* título de Depoimentos */
}