/* =======================================
   MACRO — Bolsas de Crochê | style.css
   Nova Paleta: Rosa (#cd6184) & Verde (#254117)
   ======================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

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

:root {
  /* Novos Fundos #FFECF2 */
  --cream:      #ffc2d5b9;/* Fundo principal off-white super limpo */
  --sand:       #EBF0E8; /* Fundo secundário (um tom bem sutil de verde-sálvia) */
  
  /* Novas Cores Principais */
  --terracota:  #cd6184; /* Rosa Principal (Acentos, botões, cursor) */
  --caramel:    #a84d69; /* Rosa Escuro (Hover de botões) */
  --brown:      #254117; /* Verde Principal (Títulos, logo, texto forte) */
  --warm-dark:  #15260c; /* Verde Super Escuro (Footer e CTA) */
  
  /* Textos */
  --text:       #2A3622; /* Texto Base (verde muito escuro acinzentado) */
  --text-muted: #6B7A62; /* Texto Secundário (verde-oliva suave) */
  
  --white:      #FFFFFF;
  --green:      #25D366;
  --insta:      #E1306C;

  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-sans:  'DM Sans', system-ui, sans-serif;

  --radius:   16px;
  /* Sombras baseadas no novo tom de verde */
  --shadow:   0 8px 40px rgba(37, 65, 23, .12);
  --shadow-lg:0 20px 60px rgba(37, 65, 23, .18);
  --trans:    0.3s cubic-bezier(.4,0,.2,1);

  /* Layout unificado */
  --layout-max:    1140px;
  --layout-gutter: 24px;
  --header-height: 80px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-sans);
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
}

/* ---- CURSOR ---- */
.cursor {
  position: fixed; top:0; left:0; z-index:9999;
  width:12px; height:12px;
  border-radius:50%;
  background: var(--terracota);
  pointer-events:none;
  transform: translate(-50%,-50%);
  transition: width .15s, height .15s, background .3s;
}
.cursor-follower {
  position:fixed; top:0; left:0; z-index:9998;
  width:36px; height:36px;
  border-radius:50%;
  border:1.5px solid var(--terracota);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition: transform .12s ease, width .2s, height .2s, opacity .3s;
  opacity:.6;
}
.cursor.active { width:20px; height:20px; background: var(--caramel); }
.cursor-follower.active { width:50px; height:50px; opacity:.3; }

/* ---- UTILITIES ---- */
.container {
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}
.section-tag {
  display:inline-block;
  font-family: var(--ff-sans);
  font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color: var(--terracota);
  margin-bottom:16px;
}
.section-tag.light { color:rgba(255,255,255,.75); }
.section-title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight:700; line-height:1.15;
  color: var(--brown);
  margin-bottom:24px;
}
.section-title em { font-style:italic; color:var(--terracota); }

/* ---- REVEAL ANIMATION ---- */
.reveal {
  opacity:0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}

/* ==================== NAVBAR ==================== */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-height);
  padding:0;
  display:flex;
  align-items:center;
  background:transparent;
  overflow:visible;
  transition: background .4s, box-shadow .4s;
}
.nav-inner {
  display:flex; align-items:center; gap:32px;
  width:100%;
}
.navbar.scrolled {
  background:rgba(253, 251, 248, .96);
  backdrop-filter:blur(12px);
  box-shadow: 0 2px 20px rgba(37, 65, 23, .08);
}
.navbar.menu-open {
  background:rgba(255, 255, 255, .98);
  backdrop-filter:blur(12px);
  box-shadow: 0 2px 20px rgba(37, 65, 23, .08);
}
.nav-logo {
  display:flex;
  align-items:center;
  align-self:center;
  line-height:0;
  font-family:var(--ff-serif);
  font-size:1.6rem; font-weight:700;
  color:var(--brown); margin-right:auto;
  letter-spacing:-.01em;
  flex-shrink:0;
}
.nav-logo img {
  display:block;
  height:clamp(38px, 10vw, 50px);
  width:auto;
  object-fit:contain;
}
.logo-m, .logo-accent { color:var(--terracota); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-size:.9rem; font-weight:500; color:var(--text);
  text-decoration:none;
  transition:color var(--trans);
}
.nav-links a:hover { color:var(--terracota); }
.nav-cta {
  padding:10px 22px;
  background:var(--terracota); color:var(--white);
  border:none; border-radius:50px;
  font-family:var(--ff-sans); font-size:.85rem; font-weight:500;
  cursor:none; transition: background var(--trans), transform var(--trans);
}
.nav-cta:hover { background:var(--caramel); transform:scale(1.04); }
.menu-toggle {
  display:none;
  position:relative;
  justify-content:center;
  align-items:center;
  width:44px; height:44px;
  margin-left:auto;
  background:var(--white);
  border:1.5px solid rgba(37, 65, 23, .1);
  border-radius:12px;
  box-shadow:var(--shadow);
  cursor:none;
  padding:0;
  flex-shrink:0;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.menu-toggle:hover {
  border-color:rgba(205, 97, 132, .35);
  box-shadow:0 8px 28px rgba(205, 97, 132, .18);
}
.menu-toggle span {
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:20px; height:2px;
  margin-left:-10px;
  margin-top:-1px;
  background:var(--brown);
  border-radius:2px;
  transition: transform .35s ease, opacity .25s ease, background var(--trans);
  transform-origin:center;
}
.menu-toggle span:nth-child(1) { transform:translateY(-7px); }
.menu-toggle span:nth-child(2) { transform:translateY(0); }
.menu-toggle span:nth-child(3) { transform:translateY(7px); }
.menu-toggle.open span { background:var(--terracota); }
.menu-toggle.open span:nth-child(1) { transform:translateY(0) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; transform:translateY(0) scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform:translateY(0) rotate(-45deg); }

/* MOBILE DROPDOWN MENU */
.menu-backdrop,
.mobile-menu { display:none; }

.menu-backdrop {
  position:fixed; inset:0; z-index:98;
  background:rgba(21, 38, 12, .35);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.menu-backdrop.open { opacity:1; pointer-events:auto; }

.mobile-menu {
  position:fixed;
  top:calc(var(--header-height) + env(safe-area-inset-top, 0px));
  left:50%;
  right:auto;
  width:80%;
  max-width:calc(var(--layout-max) * 0.8);
  z-index:101;
  background:linear-gradient(180deg, var(--white) 0%, #fff8fb 100%);
  border:1px solid rgba(205, 97, 132, .12);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(37, 65, 23, .14);
  max-height:calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px) - var(--layout-gutter));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  visibility:hidden;
  opacity:0;
  transform:translateX(-50%) translateY(-8px) scale(0.98);
  transform-origin:top center;
  pointer-events:none;
  transition:
    opacity .32s ease,
    transform .38s cubic-bezier(.4, 0, .2, 1),
    visibility .32s ease;
}
.mobile-menu.open {
  visibility:visible;
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
  pointer-events:auto;
}

.mobile-menu-inner {
  padding:16px var(--layout-gutter) 18px;
  display:flex; flex-direction:column;
  gap:10px;
  width:100%;
  box-sizing:border-box;
}

.mobile-menu-tag {
  margin-bottom:0;
  font-size:clamp(.65rem, 2.8vw, .75rem);
}

.mobile-menu-nav ul {
  list-style:none;
  display:flex; flex-direction:column;
  gap:4px;
}
.mobile-menu-nav a {
  display:block;
  font-family:var(--ff-serif);
  font-size:clamp(1.05rem, 4.2vw, 1.2rem);
  font-weight:400;
  line-height:1.3;
  color:var(--brown);
  text-decoration:none;
  padding:11px 12px;
  border-radius:12px;
  border-left:3px solid transparent;
  transition: color var(--trans), background var(--trans), border-color var(--trans), transform var(--trans);
}
.mobile-menu-nav a:hover {
  color:var(--terracota);
  background:rgba(205, 97, 132, .08);
  border-left-color:var(--terracota);
  transform:translateX(4px);
}

.mobile-menu.open .mobile-menu-nav li {
  animation: menuItemIn .38s ease both;
}
.mobile-menu.open .mobile-menu-nav li:nth-child(1) { animation-delay: .06s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(2) { animation-delay: .1s; }
.mobile-menu.open .mobile-menu-nav li:nth-child(3) { animation-delay: .14s; }

@keyframes menuItemIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.mobile-menu-cta {
  display:block;
  width:100%;
  margin-top:6px;
  padding:12px 20px;
  font-size:clamp(.85rem, 3.6vw, .95rem);
  text-align:center;
  border:none;
  cursor:none;
  box-sizing:border-box;
}

/* ==================== HERO ==================== */
.hero {
  min-height:100vh;
  display:flex; align-items:center;
  position:relative;
  padding: 100px 0 60px;
  overflow:hidden;
}
.hero-inner {
  display:flex; align-items:center;
  position:relative; z-index:3;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background-image: url('imgs/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 236, 242, 0.82) 0%,
    rgba(255, 236, 242, 0.65) 50%,
    rgba(255, 220, 235, 0.30) 100%
  );
}
.blob {
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.25;
  z-index: 1;
}
.blob-1 {
  width:600px; height:600px;
  background:var(--terracota);
  top:-200px; right:-100px;
}
.blob-2 {
  width:400px; height:400px;
  background:var(--sand);
  bottom:-100px; left:-80px;
}
.blob-3 {
  width:300px; height:300px;
  background:#f5dce4;
  top:40%; left:40%;
}
.grain {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.25;
  z-index: 2;
}
.imgfooter { display: none; }
.hero-content {
  position:relative; z-index:3;
  max-width:560px;
}
.hero-eyebrow {
  font-size:.8rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracota); margin-bottom:20px;
}
.hero-title {
  font-family:var(--ff-serif);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight:700; line-height:1.1;
  color:var(--brown); margin-bottom:24px;
}
.hero-title em { font-style:italic; color:var(--terracota); }
.hero-subtitle {
  font-size:1.1rem; font-weight:300; line-height:1.7;
  color:var(--text-muted); max-width:440px; margin-bottom:40px;
}
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.btn-primary {
  padding:14px 32px;
  background:var(--terracota); color:var(--white);
  border:none; border-radius:50px;
  font-family:var(--ff-sans); font-size:.95rem; font-weight:500;
  cursor:none; text-decoration:none; display:inline-block;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
  /* Sombra rosa adaptada */
  box-shadow:0 4px 20px rgba(205, 97, 132, .35); 
}
.btn-primary:hover { background:var(--caramel); transform:translateY(-2px); box-shadow:0 8px 30px rgba(205, 97, 132, .45); }
.btn-ghost {
  padding:14px 24px;
  background:transparent; color:var(--brown);
  border:1.5px solid var(--brown);
  border-radius:50px;
  font-family:var(--ff-sans); font-size:.95rem; font-weight:500;
  cursor:none; text-decoration:none; display:inline-block;
  transition: all var(--trans);
}
.btn-ghost:hover { background:var(--brown); color:var(--white); }

/* HERO VISUAL */
.hero-visual {
  position:relative; z-index:3;
  margin-left:auto; flex-shrink:0;
}
.hero-card {
  width:300px; height:360px;
  background:var(--white);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative;
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.hero-bag-illustration {
  display:flex; align-items:center; justify-content:center;
  flex:1; width:100%; min-height:0;
  padding:24px 20px 20px;
}
.hero-bag-illustration img,
.hero-bag-illustration svg {
  width:83.33%;
  max-width:250px;
  height:auto;
  aspect-ratio:5 / 6;
  object-fit:contain;
  object-position:center;
  display:block;
}
.hero-bag-illustration svg { width:180px; max-width:180px; aspect-ratio:auto; }
.hero-card-tag {
  position:absolute; top:16px; right:16px;
  background:var(--terracota); color:var(--white);
  font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:50px;
}
.hero-stat {
  position:absolute; left:-60px; bottom:60px;
  background:var(--white); border-radius:14px;
  box-shadow:var(--shadow);
  padding:12px 18px;
  display:flex; flex-direction:column;
  animation: float 4s ease-in-out infinite .8s;
}
.hero-stat-2 { left:auto; right:-50px; bottom:auto; top:60px; animation-delay:1.6s; }
.stat-num {
  font-family:var(--ff-serif); font-size:1.6rem; font-weight:700; color:var(--brown);
}
.stat-label { font-size:.72rem; color:var(--text-muted); margin-top:2px; }

/* SCROLL HINT */
.scroll-hint {
  position:absolute; bottom:32px; z-index:3;
  left: max(var(--layout-gutter), calc((100vw - var(--layout-max)) / 2 + var(--layout-gutter)));
  display:flex; align-items:center; gap:12px;
  color:var(--text-muted); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.scroll-line {
  width:60px; height:1px; background:var(--terracota);
  animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim {
  0%,100%{ transform:scaleX(1); transform-origin:left; }
  50%{ transform:scaleX(.3); transform-origin:left; }
}

/* ==================== SOBRE ==================== */
.sobre {
  padding: 100px 0;
  background:var(--white);
}
.sobre-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.sobre-p {
  color:var(--text-muted); line-height:1.8; margin-bottom:16px; font-weight:300;
}
.valores {
  display:flex; flex-direction:column; gap:16px; margin-top:36px;
}
.valor {
  display:flex; align-items:flex-start; gap:14px;
}
.valor-icon { font-size:1.4rem; line-height:1; margin-top:2px; flex-shrink:0; }
.valor strong { display:block; font-weight:500; color:var(--brown); margin-bottom:2px; }
.valor p { font-size:.85rem; color:var(--text-muted); margin:0; }

.sobre-visual { display:flex; align-items:center; justify-content:center; }
.sobre-decorativo {
  position:relative; width:340px;
  display:flex; flex-direction:column; align-items:center;
}

/* Estilo Polaroid */
.polaroid {
  background: var(--white);
  padding: 14px 14px 44px 14px;
  box-shadow: 0 8px 32px rgba(37,65,23,.18), 0 2px 8px rgba(37,65,23,.10);
  border-radius: 4px;
  transform: rotate(-2.5deg);
  transition: transform var(--trans), box-shadow var(--trans);
  max-width: 280px;
  width: 100%;
}
.polaroid:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 20px 50px rgba(37,65,23,.22);
}
.polaroid img {
  width: 100%; 
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.polaroid-caption {
  text-align: center;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--text-muted);
  margin-top: 10px;
  letter-spacing: .02em;
}

/* Segundo polaroid decorativo atrás */
.polaroid-wrapper {
  position: relative;
}
.polaroid-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  border-radius: 4px;
  transform: rotate(4deg) translateY(6px);
  box-shadow: 0 4px 16px rgba(37,65,23,.10);
  z-index: 0;
}
.polaroid {
  position: relative;
  z-index: 1;
}

@keyframes spinSlow {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.sobre-badge {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--terracota); color:var(--white);
  border-radius:50%; width:140px; height:140px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--ff-serif);
  font-size:1rem; line-height:1.4;
  box-shadow:0 8px 30px rgba(205, 97, 132, .4);
}

/* ==================== CATÁLOGO ==================== */
.catalogo {
  padding: 100px 0;
  background: #ffe0ed;
}
.catalogo-header { text-align:center; margin-bottom:48px; }
.catalogo-sub {
  color:var(--text-muted); font-size:1rem; max-width:480px;
  margin:0 auto; line-height:1.7;
}

/* FILTROS */
.filtros {
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:48px;
}
.filtro-btn {
  padding:8px 22px;
  border:1.5px solid var(--sand);
  background:transparent; color:var(--text-muted);
  border-radius:50px; font-family:var(--ff-sans);
  font-size:.85rem; cursor:none;
  transition: all var(--trans);
}
.filtro-btn:hover, .filtro-btn.active {
  background:var(--terracota); color:var(--white);
  border-color:var(--terracota);
}

/* PRODUTOS GRID */
.produtos-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.produto-card {
  background:var(--white); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transition: transform var(--trans), box-shadow var(--trans), opacity .4s, max-height .4s;
}
.produto-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.produto-card.hidden { display:none; }

.produto-img {
  height:350px;
  background: var(--bg, var(--sand));
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}

/* ---- Troca de imagem no hover ---- */
.produto-img .img-principal,
.produto-img .img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity .45s ease, transform .45s ease;
}
.produto-img .img-principal {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.produto-img .img-hover {
  opacity: 0;
  transform: scale(1.04);
  z-index: 2;
}
.produto-card:hover .img-principal {
  opacity: 0;
  transform: scale(1.04);
}
.produto-card:hover .img-hover {
  opacity: 1;
  transform: scale(1);
}

.produto-img svg { width:120px; transition:transform .4s ease; }
.produto-card:hover .produto-img svg { transform:scale(1.06); }
.produto-overlay {
  position:absolute; inset:0;
  background:rgba(21, 38, 12, .65);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--trans);
  z-index: 3;
}
.produto-card:hover .produto-overlay { opacity:1; }
.overlay-btn {
  padding:10px 22px;
  background:var(--white); color:var(--brown);
  border:none; border-radius:50px;
  font-family:var(--ff-sans); font-size:.85rem; font-weight:500;
  cursor:none; transform:translateY(8px);
  transition: transform .3s ease;
}
.produto-card:hover .overlay-btn { transform:translateY(0); }

.produto-info { padding:20px 22px; }
.produto-tag {
  font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terracota); margin-bottom:6px;
}
.produto-info h3 {
  font-family:var(--ff-serif);
  font-size:1.1rem; color: #254117; margin-bottom:8px;
}
.produto-info p { font-size:.85rem; color:var(--text-muted); line-height:1.6; margin-bottom:16px; }
.produto-footer { display:flex; align-items:center; justify-content:space-between; }
.produto-preco {
  font-family:var(--ff-serif); font-size:1.25rem; font-weight:700; color:var(--brown);
}
.produto-btn {
  padding:8px 18px;
  background:var(--terracota); color:var(--white);
  border:none; border-radius:50px;
  font-family:var(--ff-sans); font-size:.8rem; font-weight:500;
  cursor:none; transition: background var(--trans), transform var(--trans);
}
.produto-btn:hover { background:var(--caramel); transform:scale(1.05); }

/* CATÁLOGO CTA */
.catalogo-cta {
  text-align:center; margin-top:56px;
  padding:40px 32px;
  background:var(--sand); border-radius:24px;
}
.catalogo-cta p { color:var(--text-muted); margin-bottom:20px; }
.catalogo-cta strong { color:var(--brown); }

/* ==================== DEPOIMENTOS ==================== */
.depoimentos {
  padding:100px 0;
  background:var(--white);
}
.dep-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;
}
.dep-card {
  background:var(--cream);
  border-radius:var(--radius); padding:28px;
  border:1px solid var(--sand);
  transition: transform var(--trans);
}
.dep-card:hover { transform:translateY(-4px); }
.dep-card > p {
  font-size:.9rem; line-height:1.8; color:var(--text-muted);
  font-style:italic; margin-bottom:20px;
}
.dep-autor { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.dep-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--terracota); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem;
  flex-shrink:0;
}
.dep-autor strong { display:block; font-size:.9rem; color:var(--brown); }
.dep-autor span { font-size:.78rem; color:var(--text-muted); }
.dep-stars { color:var(--terracota); font-size:1rem; letter-spacing:2px; }

/* ==================== CONTATO CTA ==================== */
.contato-cta {
  position:relative; overflow:hidden;
  padding:100px 0;
  background:var(--warm-dark);
}
.cta-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('imgs/manueclara.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.cta-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(21, 38, 12, 0.72) 0%,
    rgba(21, 38, 12, 0.60) 50%,
    rgba(21, 38, 12, 0.80) 100%
  );
}
.blob-cta-1 { display: none; }
.blob-cta-2 { display: none; }
.cta-content {
  position:relative; z-index:2;
  text-align:center; max-width:560px; margin:0 auto;
}
.cta-title {
  font-family:var(--ff-serif);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight:700; line-height:1.1;
  color:var(--white); margin-bottom:20px;
}
.cta-title em { font-style:italic; color:var(--terracota); }
.cta-content > p {
  color:rgba(255,255,255,.65);
  line-height:1.8; font-size:1rem; margin-bottom:40px;
}
.cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-whatsapp, .btn-instagram {
  display:flex; align-items:center; gap:10px;
  padding:14px 28px; border:none; border-radius:50px;
  font-family:var(--ff-sans); font-size:.95rem; font-weight:500;
  cursor:none; transition: transform var(--trans), box-shadow var(--trans);
}
.btn-whatsapp {
  background:#25D366; color:var(--white);
  box-shadow:0 4px 20px rgba(37,211,102,.3);
}
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,211,102,.45); }
.btn-instagram {
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:var(--white);
  box-shadow:0 4px 20px rgba(225,48,108,.35);
}
.btn-instagram:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(225,48,108,.45); }

/* ==================== FOOTER ==================== */
.footer {
  background:var(--warm-dark);
  border-top:1px solid rgba(255,255,255,.06);
  padding:48px 0 32px;
}
.footer-inner {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:24px; justify-content:space-between;
}
.footer-logo .nav-logo { color:rgba(255,255,255,.9); }
.footer-logo p { font-size:.8rem; color:rgba(255,255,255,.4); margin-top:6px; line-height:1.6; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a {
  font-size:.85rem; color:rgba(255,255,255,.5);
  text-decoration:none; transition:color var(--trans);
}
.footer-links a:hover { color:var(--terracota); }
.footer-copy { font-size:.75rem; color:rgba(255,255,255,.3); }

/* ==================== MODAL ==================== */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(21, 38, 12, .6);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  backdrop-filter:blur(6px);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--white); border-radius:24px;
  padding:40px; max-width:420px; width:90%;
  position:relative;
  transform:translateY(30px) scale(.97);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-close {
  position:absolute; top:16px; right:16px;
  background:var(--sand); border:none; border-radius:50%;
  width:32px; height:32px; font-size:.9rem;
  color:var(--text); cursor:none;
  transition: background var(--trans);
}
.modal-close:hover { background:var(--terracota); color:var(--white); }
.modal-header { text-align:center; margin-bottom:28px; }
.modal-header span { font-size:1.5rem; display:block; margin-bottom:8px; color:var(--terracota); }
.modal-header h3 { font-family:var(--ff-serif); font-size:1.5rem; color:var(--brown); margin-bottom:6px; }
.modal-header p { font-size:.85rem; color:var(--text-muted); }
.modal-options { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.modal-option {
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border:1.5px solid var(--sand);
  border-radius:var(--radius); background:var(--cream);
  cursor:none; transition: all var(--trans);
  text-align:left;
}
.modal-option:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.modal-option.whatsapp:hover { border-color:#25D366; background:rgba(37,211,102,.05); }
.modal-option.instagram:hover { border-color:#E1306C; background:rgba(225,48,108,.05); }
.modal-option.whatsapp svg { color:#25D366; }
.modal-option.instagram svg { color:#E1306C; }
.modal-option strong { display:block; font-size:.95rem; color:var(--brown); margin-bottom:2px; }
.modal-option span { font-size:.78rem; color:var(--text-muted); }
.modal-note { text-align:center; font-size:.8rem; color:var(--text-muted); }

/* ==================== RESPONSIVO ==================== */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display:none; }
  .menu-backdrop, .mobile-menu { display:block; }
  .menu-toggle {
    display:flex;
    width:40px; height:40px;
    border-radius:10px;
    z-index:102;
  }
  .menu-toggle span {
    width:18px;
    margin-left:-9px;
  }
  .menu-toggle span:nth-child(1) { transform:translateY(-7px); }
  .menu-toggle span:nth-child(3) { transform:translateY(7px); }
  .menu-toggle.open span:nth-child(1) { transform:translateY(0) rotate(45deg); }
  .menu-toggle.open span:nth-child(3) { transform:translateY(0) rotate(-45deg); }

  .mobile-menu {
    max-height:calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px) - var(--layout-gutter));
  }
  .mobile-menu-inner {
    padding:14px 16px 16px;
    gap:8px;
  }

  /* Hero */
  .hero { padding:100px 0 60px; }
  .hero-inner { flex-direction:column; gap:40px; }
  .hero-content { text-align:center; max-width:100%; }
  .hero-actions { justify-content:center; }
  .hero-subtitle { margin-left:auto; margin-right:auto; }
  .hero-visual {
    margin-left:0;
    align-self:center;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:10px;
    row-gap:14px;
    width:min(300px, calc(100vw - 48px));
  }

  /* Card e imagem — quase tamanho desktop em tablet */
  .hero-card {
    grid-column:1 / -1;
    width:100%;
    height:360px;
  }
  .hero-bag-illustration {
    padding:18px 14px 16px;
  }
  .hero-bag-illustration img {
    width:90%;
    max-width:250px;
  }

  /* Stats — abaixo do card, lado a lado */
  .hero-stat,
  .hero-stat-2 {
    position:static;
    animation:none;
    padding:9px 13px;
  }
  .hero-stat {
    grid-column:1;
    justify-self:end;
    max-width:100%;
  }
  .hero-stat-2 {
    grid-column:2;
    justify-self:start;
    max-width:100%;
  }
  .stat-num { font-size: 1.2rem; }
  .stat-label { font-size: .65rem; }

  /* Sobre — coluna única, texto centralizado, polaroid abaixo do texto */
  .sobre-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .sobre-visual {
    display: flex;
    order: 2;           /* aparece depois do texto */
    margin-top: 40px;
    justify-content: center;
  }
  .sobre-text {
    order: 1;
    text-align: center;
  }
  .sobre-text .section-tag,
  .sobre-text .section-title,
  .sobre-text .sobre-p { text-align:center; }
  .valores { align-items: center; }
  .valor { flex-direction:column; align-items:center; text-align:center; }

  /* Polaroid menor no mobile */
  .polaroid { max-width: 220px; padding: 10px 10px 36px 10px; }
  .polaroid img { height: 260px; }

  /* Catálogo */
  .produtos-grid { grid-template-columns:repeat(2,1fr); }

  /* Depoimentos */
  .dep-grid { grid-template-columns:1fr; }

  /* Footer */
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-links { justify-content:center; }

  .cursor, .cursor-follower { display:none; }
  body { cursor:auto; }
  * { cursor:auto !important; }

  .menu-toggle,
  .mobile-menu-cta { cursor:pointer; }
}

@media (max-width: 560px) {
  :root { --layout-gutter: 20px; }

  .mobile-menu {
    width:80%;
    max-height:calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px) - var(--layout-gutter));
  }
  .mobile-menu-inner {
    padding:12px 14px 14px;
    gap:6px;
  }
  .mobile-menu-nav a {
    padding:10px 10px;
  }
  .mobile-menu-cta {
    padding:11px 16px;
    margin-top:4px;
  }

  /* Hero card e stats — maior, ocupando o máximo da tela estreita */
  .hero-visual {
    width:min(285px, calc(100vw - 48px));
    column-gap:8px;
    row-gap:12px;
  }
  .hero-card {
    width:100%;
    height:calc(min(285px, calc(100vw - 48px)) * 1.2);
  }
  .hero-bag-illustration {
    padding:12px 8px 10px;
  }
  .hero-bag-illustration img {
    width:92%;
    max-width:250px;
  }
  .hero-stat,
  .hero-stat-2 {
    padding:7px 10px;
  }
  .stat-num { font-size: 1rem; }
  .stat-label { font-size: .6rem; }

  /* Catálogo */
  .produtos-grid { grid-template-columns:1fr; }
  .filtros { gap:8px; }

  /* CTA */
  .cta-buttons { flex-direction:column; align-items:center; }

  /* Polaroid ainda menor */
  .polaroid { max-width: 190px; padding: 8px 8px 32px 8px; }
  .polaroid img { height: 220px; }
  .polaroid-caption { font-size: .82rem; }
}