/* =====================================================
   Intacta Imports — Vanilla CSS (converted from React/Tailwind)
   ===================================================== */

:root {
  --radius: 1.25rem;

  /* Roxo institucional */
  --primary: oklch(0.35 0.17 310);
  --primary-foreground: oklch(1 0 0);
  --primary-light: oklch(0.3 0.14 310);
  --primary-dark: oklch(0.25 0.15 310);

  /* Amarelo destaque */
  --highlight: oklch(0.78 0.16 85);
  --highlight-foreground: oklch(0.15 0.02 60);

  /* Vinho apoio */
  --wine: oklch(0.32 0.14 350);
  --wine-foreground: oklch(1 0 0);

  /* Fun accent */
  --fun-blue: oklch(0.62 0.22 255);
  --fun-green: oklch(0.7 0.22 150);
  --fun-pink: oklch(0.65 0.22 350);
  --fun-orange: oklch(0.72 0.2 55);
  --fun-purple: oklch(0.58 0.22 290);

  /* Neutros */
  --background: oklch(0.28 0.12 310);
  --foreground: oklch(0.95 0.01 280);
  --card: oklch(0.32 0.14 310);
  --card-foreground: oklch(0.95 0.01 280);
  --secondary: oklch(0.35 0.15 310);
  --muted: oklch(0.35 0.12 310);
  --muted-foreground: oklch(0.75 0.04 300);
  --accent: oklch(0.38 0.14 310);
  --border: oklch(0.4 0.12 310);
  --surface: oklch(0.32 0.13 310);

  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Baloo 2", "Nunito", ui-sans-serif, system-ui, sans-serif;
}

/* ------- Reset ------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: transparent; cursor: pointer; color: inherit; border: 0; }
ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ------- Layout helpers ------- */
.container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.container.narrow { max-width: 56rem; }

.section { padding: 4rem 0; position: relative; }
@media (min-width: 1024px) { .section { padding: 6rem 0; } }

.text-center { text-align: center; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

.main { position: relative; z-index: 1; }

/* ------- Icons sizing ------- */
.ic-16 { width: 1rem; height: 1rem; }
.ic-20 { width: 1.25rem; height: 1.25rem; }
.ic-24 { width: 1.5rem; height: 1.5rem; }
.ic-28 { width: 1.75rem; height: 1.75rem; }
.ic-32 { width: 1.75rem; height: 1.75rem; }
@media (min-width: 640px) {
  .ic-32 { width: 2rem; height: 2rem; }
}
.text-highlight { color: var(--highlight); }

/* ------- Buttons ------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 0.875rem;
  text-align: center;
  transition: all .25s ease;
  white-space: nowrap;
  min-height: 44px;
}
.btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}
@media (min-width: 640px) {
  .btn-lg { padding: 1rem 2.5rem; font-size: 1.125rem; }
}
.btn-highlight {
  background: var(--highlight);
  color: var(--highlight-foreground);
  box-shadow: 0 8px 24px -8px oklch(0.78 0.16 85 / 0.4);
}
.btn-highlight:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.btn-outline {
  border: 3px solid var(--highlight);
  color: var(--highlight);
  background: transparent;
}
.btn-outline:hover {
  background: var(--highlight);
  color: var(--highlight-foreground);
  transform: scale(1.05);
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 8px 24px -8px oklch(0.35 0.17 310 / 0.5);
}
.btn-primary:hover { transform: scale(1.05); filter: brightness(1.1); }
.btn-outline-dark {
  border: 3px solid var(--highlight-foreground);
  color: var(--highlight-foreground);
  background: transparent;
}
.btn-outline-dark:hover {
  background: var(--highlight-foreground);
  color: var(--highlight);
  transform: scale(1.05);
}

/* ------- Badge / eyebrow ------- */
.badge-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: oklch(0.78 0.16 85 / 0.15);
  color: var(--highlight);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: oklch(1 0 0 / 0.1);
  color: var(--highlight);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--highlight);
  margin-bottom: 0.75rem;
}
.eyebrow.on-highlight {
  color: oklch(0.15 0.02 60 / 0.9);
}

/* ------- Section heading ------- */
.section-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-align: center;
}
@media (min-width: 640px) { .section-title { font-size: 2rem; } }
@media (min-width: 768px) { .section-title { font-size: 2.5rem; } }
.section-title.text-on-primary { color: var(--primary-foreground); }
.section-title.text-on-wine { color: var(--wine-foreground); }
.section-title.on-highlight { color: var(--highlight-foreground); }

.section-lead {
  max-width: 42rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted-foreground);
  line-height: 1.6;
}
@media (min-width: 640px) { .section-lead { font-size: 1.05rem; } }

.head-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.head-block { text-align: center; }
.section-head-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* =====================================================
   GLOBAL DECORATIONS / PARTICLES
   ===================================================== */
.global-decorations {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.global-decorations .deco { position: absolute; }

.global-particles {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
}
.particle {
  position: absolute;
  opacity: 0.6;
  animation-name: particle-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes particle-fall {
  0%   { transform: translate3d(0, -20vh, 0) rotate(0deg); opacity: 0.6; }
  85%  { opacity: 0.6; }
  100% { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* =====================================================
   HEADER
   ===================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1rem 0.75rem 0.5rem;
}
@media (min-width: 640px) { .header { padding: 1.25rem 1.25rem 0.5rem; } }
.header-bar {
  margin: 0 auto;
  max-width: 64rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 9999px;
  background: oklch(0.35 0.17 310 / 0.95);
  color: var(--primary-foreground);
  box-shadow: 0 8px 32px oklch(0.2 0.08 310 / 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid oklch(1 0 0 / 0.15);
}
@media (min-width: 640px) {
  .header-bar { padding: 0.875rem 1.5rem; }
}
@media (min-width: 1024px) {
  .header-bar { padding: 1rem 2rem; }
}
.header-logo {
  height: 2.25rem;
  width: auto;
  object-fit: contain;
}
@media (min-width: 640px) { .header-logo { height: 2.75rem; } }
.header-logo-link { display: inline-flex; flex-shrink: 0; }

.header-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
@media (min-width: 1280px) {
  .header-nav { display: flex; }
}
.header-nav-link {
  white-space: nowrap;
  padding: 0.5rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: oklch(1 0 0 / 0.9);
  transition: all .2s ease;
}
@media (min-width: 1280px) { .header-nav-link { font-size: 1rem; padding: 0.5rem 0.875rem; } }
.header-nav-link:hover {
  background: oklch(1 0 0 / 0.1);
  color: var(--highlight);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.btn-cta-header {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
@media (min-width: 640px) {
  .btn-cta-header { padding: 0.75rem 1.5rem; font-size: 1rem; }
}
.header-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: var(--primary-foreground);
  transition: background .2s ease;
}
@media (min-width: 1280px) {
  .header-toggle { display: none; }
}
.header-toggle:hover { background: oklch(1 0 0 / 0.1); }
.header-toggle svg { width: 22px; height: 22px; }
.header-toggle .ic-close { display: none; }
.header.is-open .header-toggle .ic-menu { display: none; }
.header.is-open .header-toggle .ic-close { display: inline-block; }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity .25s ease;
}
.mobile-menu.is-open { display: flex; opacity: 1; }
.mobile-menu-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--primary-dark), var(--primary-dark), var(--primary));
}
.mobile-menu-inner {
  position: relative;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  display: flex;
  flex-direction: column;
}
.mobile-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
@media (min-width: 640px) { .mobile-menu-head { padding: 1.5rem 2rem; } }
.mobile-close {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight);
  color: var(--highlight-foreground);
  box-shadow: 0 8px 16px -4px oklch(0.78 0.16 85 / 0.4);
}
.mobile-close svg { width: 26px; height: 26px; }

.mobile-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.5rem 3rem;
}
.mobile-nav ul {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-nav ul a {
  display: block;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--primary-foreground);
  border-radius: 1rem;
  transition: all .2s ease;
}
.mobile-nav ul a:hover {
  background: oklch(1 0 0 / 0.1);
  color: var(--highlight);
}
.mobile-cta {
  display: block;
  max-width: 28rem;
  margin: 2.5rem auto 0;
  width: 100%;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  background: var(--background);
  text-align: center;
  position: relative;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}
@media (min-width: 1024px) {
  .hero-inner { padding: 4rem 1.5rem 7rem; }
}
.hero-title {
  max-width: 56rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--foreground);
}
@media (min-width: 640px) { .hero-title { font-size: 2.25rem; } }
@media (min-width: 768px) { .hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 3.75rem; } }

.hero-lead {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .hero-lead { margin-top: 1.5rem; font-size: 1.125rem; } }

.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .hero-actions { margin-top: 2.5rem; flex-direction: row; gap: 1rem; }
}

.hero-destaques {
  margin-top: 3.5rem;
  width: 100%;
  max-width: 64rem;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
.hero-destaques-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .hero-destaques-title { font-size: 1.25rem; } }
.destaques-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .destaques-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.destaque-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: 1rem;
  background: oklch(0.32 0.14 310 / 0.5);
  border: 1px solid var(--border);
  text-align: left;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.destaque-icon {
  margin-bottom: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: oklch(0.78 0.16 85 / 0.15);
  color: var(--highlight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.destaque-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--foreground);
}
.destaque-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* =====================================================
   STATS
   ===================================================== */
.section-stats { background: var(--background); }
.stats-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) { .stats-grid { margin-top: 3.5rem; } }
.stat-card {
  background: var(--card);
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  border: 1px solid oklch(0.4 0.12 310 / 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--highlight);
}
@media (min-width: 640px) { .stat-value { font-size: 2.25rem; } }
.stat-label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .stat-label { font-size: 0.875rem; } }

/* =====================================================
   WAVES
   ===================================================== */
.wave { width: 100%; line-height: 0; position: relative; }
.wave svg { display: block; width: 100%; height: 3rem; }
@media (min-width: 768px) { .wave svg { height: 4rem; } }
.wave-flip { transform: rotate(180deg); }
.wave-surface svg { fill: var(--surface); }
.wave-primary svg { fill: var(--primary); }
.wave-wine svg { fill: var(--wine); }

/* =====================================================
   CATEGORIES
   ===================================================== */
.section-categories { background: var(--surface); }
.cat-head { text-align: center; margin-bottom: 2.5rem; }
.cats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .cats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (min-width: 1024px) {
  .cats-grid { grid-template-columns: repeat(3, 1fr); margin-top: 3.5rem; }
}
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
  cursor: pointer;
}
.cat-card:hover { transform: translateY(-0.5rem); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.cat-card h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 640px) { .cat-card h3 { font-size: 1rem; } }
.cat-price {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.8;
}
@media (min-width: 640px) { .cat-price { font-size: 0.75rem; } }
.cat-desc {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #fff;
  opacity: 0.9;
}
@media (min-width: 640px) { .cat-desc { font-size: 0.875rem; } }
.cat-badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: oklch(1 0 0 / 0.25);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}
@media (min-width: 640px) { .cat-badge { font-size: 0.75rem; } }
.cat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(1 0 0 / 0.25);
  color: #fff;
  margin-bottom: 0.75rem;
}
@media (min-width: 640px) {
  .cat-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }
}
.cat-pink { background: var(--fun-pink); }
.cat-purple { background: var(--fun-purple); }
.cat-orange { background: var(--fun-orange); }
.cat-blue { background: var(--fun-blue); }
.cat-green { background: var(--fun-green); }
.cat-highlight { background: var(--highlight); }
.cat-highlight h3, .cat-highlight .cat-price, .cat-highlight .cat-desc, .cat-highlight .cat-badge { color: var(--highlight-foreground); }
.cat-highlight .cat-icon { color: var(--highlight-foreground); }

/* =====================================================
   PRODUCT CAROUSEL
   ===================================================== */
.section-carousel { background: var(--background); overflow: hidden; }
.carousel-wrap {
  position: relative;
  margin-top: 2.5rem;
  overflow: hidden;
}
@media (min-width: 1024px) { .carousel-wrap { margin-top: 3.5rem; } }
.carousel-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  animation: carousel-scroll 25s linear infinite;
}
.carousel-track:hover { animation-play-state: paused; }
@keyframes carousel-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.product-card {
  flex-shrink: 0;
  width: 16rem;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  ring: 2px solid oklch(0.78 0.16 85 / 0.2);
  border: 2px solid oklch(0.78 0.16 85 / 0.2);
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (min-width: 640px) { .product-card { width: 18rem; } }
@media (min-width: 768px) { .product-card { width: 20rem; } }
.product-card:hover { transform: scale(1.05); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.product-card img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
}
@media (min-width: 640px) { .product-card img { height: 20rem; } }
@media (min-width: 768px) { .product-card img { height: 24rem; } }

.gallery-track {
  padding: 0 1rem;
}
.gallery-track .product-card {
  width: 15rem;
  border-radius: 1rem;
}
@media (min-width: 640px) { .gallery-track .product-card { width: 18rem; } }
@media (min-width: 768px) { .gallery-track .product-card { width: 20rem; } }
.gallery-track .product-card img {
  height: 12rem;
}
@media (min-width: 640px) { .gallery-track .product-card img { height: 14rem; } }
@media (min-width: 768px) { .gallery-track .product-card img { height: 16rem; } }

/* =====================================================
   TOYS / WHY INTACTA
   ===================================================== */
.section-toys {
  background: var(--primary);
  overflow: hidden;
  position: relative;
}
.section-toys::before, .section-toys::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}
.section-toys::before {
  right: -2.5rem;
  top: 2.5rem;
  width: 10rem;
  height: 10rem;
  background: oklch(0.78 0.16 85 / 0.1);
}
.section-toys::after {
  left: -2.5rem;
  bottom: 2.5rem;
  width: 8rem;
  height: 8rem;
  background: oklch(0.65 0.22 350 / 0.1);
}
.toys-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .toys-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.toys-image {
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  border: 4px solid oklch(0.78 0.16 85 / 0.2);
}
.toys-image img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
}
@media (min-width: 640px) { .toys-image img { height: 100%; min-height: 20rem; } }

.text-on-primary { color: var(--primary-foreground); text-align: left; }
.text-on-primary.section-title { text-align: left; }
.lead-on-primary {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  color: oklch(1 0 0 / 0.8);
}
@media (min-width: 640px) { .lead-on-primary { margin-top: 1.5rem; font-size: 1.125rem; } }
.toys-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: oklch(1 0 0 / 0.8);
}
@media (min-width: 640px) { .toys-list { font-size: 1.125rem; } }

.pillars-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pillars-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
}
.pillar-card {
  height: 100%;
  border-radius: 1rem;
  border: 1px solid oklch(1 0 0 / 0.1);
  background: oklch(1 0 0 / 0.05);
  padding: 1.25rem;
  text-align: center;
}
@media (min-width: 1024px) { .pillar-card { text-align: left; } }
.pillar-card svg { margin: 0 auto 0.75rem; }
@media (min-width: 1024px) { .pillar-card svg { margin-left: 0; } }
.pillar-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-foreground);
}
.pillar-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(1 0 0 / 0.75);
}

/* =====================================================
   PARTNERSHIP
   ===================================================== */
.section-partnership { background: var(--background); position: relative; overflow: hidden; }
.section-partnership::before {
  content: "";
  position: absolute;
  right: -4rem;
  top: 50%;
  width: 10rem;
  height: 10rem;
  border-radius: 9999px;
  background: oklch(0.78 0.16 85 / 0.1);
  pointer-events: none;
}
.section-partnership::after {
  content: "";
  position: absolute;
  left: -3rem;
  top: 5rem;
  width: 7rem;
  height: 7rem;
  border-radius: 9999px;
  background: oklch(0.7 0.22 150 / 0.1);
  pointer-events: none;
}
.part-head { text-align: center; margin-bottom: 2.5rem; }
.part-head .head-row { margin-bottom: 0; }
.part-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .part-steps { margin-top: 3rem; } }
.part-step {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
@media (min-width: 640px) { .part-step { gap: 1.5rem; padding: 1.5rem; } }
.part-num {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: oklch(0.78 0.16 85 / 0.15);
  color: var(--highlight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
}
@media (min-width: 640px) { .part-num { width: 3.5rem; height: 3.5rem; } }
.part-step-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.part-step h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}
@media (min-width: 640px) { .part-step h3 { font-size: 1.25rem; } }
.part-step p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .part-step p { font-size: 1rem; } }
.part-cta {
  margin-top: 3rem;
  padding: 2rem;
  text-align: center;
  border-radius: 1.5rem;
  background: oklch(0.35 0.17 310 / 0.05);
  border: 1px solid var(--border);
}
@media (min-width: 640px) { .part-cta { padding: 2.5rem; } }
.part-cta h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--foreground);
}
@media (min-width: 640px) { .part-cta h3 { font-size: 1.5rem; } }
.part-cta p {
  margin: 0.75rem auto 0;
  max-width: 42rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .part-cta p { font-size: 1rem; } }
.part-cta .btn { margin-top: 2rem; }
@media (min-width: 640px) { .part-cta .btn { margin-top: 2.5rem; } }

/* =====================================================
   DONATION
   ===================================================== */
.section-donation {
  background: var(--wine);
  position: relative;
  overflow: hidden;
}
.section-donation::before, .section-donation::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}
.section-donation::before {
  right: -2.5rem;
  top: 2.5rem;
  width: 8rem;
  height: 8rem;
  background: oklch(0.78 0.16 85 / 0.1);
}
.section-donation::after {
  left: -2.5rem;
  bottom: 2.5rem;
  width: 6rem;
  height: 6rem;
  background: oklch(0.65 0.22 350 / 0.1);
}
.section-donation .badge-pill {
  background: oklch(1 0 0 / 0.1);
}
.lead-on-wine {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  color: oklch(1 0 0 / 0.8);
}
@media (min-width: 640px) { .lead-on-wine { font-size: 1.125rem; } }
.donation-bold {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--highlight);
}
@media (min-width: 640px) { .donation-bold { font-size: 1.125rem; } }
.section-donation .btn { margin-top: 2rem; }
@media (min-width: 640px) { .section-donation .btn { margin-top: 2.5rem; } }

/* =====================================================
   PACKAGING
   ===================================================== */
.section-packaging {
  background: var(--background);
  position: relative;
  overflow: hidden;
}
.section-packaging::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 5rem;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: oklch(0.72 0.2 55 / 0.15);
  pointer-events: none;
}
.section-packaging::after {
  content: "";
  position: absolute;
  bottom: 2.5rem;
  right: 8%;
  width: 3.5rem;
  height: 3.5rem;
  transform: rotate(12deg);
  border-radius: 1rem;
  background: oklch(0.65 0.22 350 / 0.15);
  pointer-events: none;
}
.pack-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 640px) { .pack-grid { gap: 3rem; } }
@media (min-width: 1024px) { .pack-grid { grid-template-columns: 1fr 1fr; } }
.pack-image {
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  border: 4px solid oklch(0.78 0.16 85 / 0.2);
}
.pack-image img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
}
@media (min-width: 640px) { .pack-image img { height: 100%; } }
.pack-text { text-align: center; }
@media (min-width: 1024px) { .pack-text { text-align: left; } }
@media (min-width: 1024px) {
  .pack-text .section-title { text-align: left; }
  .pack-text .section-lead { text-align: left; margin-left: 0; margin-right: 0; }
}
.pack-types { margin-top: 2rem; }
.pack-types-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.pack-types ul {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}
@media (min-width: 640px) { .pack-types ul { grid-template-columns: 1fr 1fr; } }
.pack-types li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pack-types .dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--highlight);
  flex-shrink: 0;
}

/* =====================================================
   GALLERY
   ===================================================== */
.section-gallery { background: var(--surface); }
.gallery-main {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .gallery-main { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .gallery-main { margin-top: 3.5rem; } }
.gallery-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border: 2px solid oklch(0.78 0.16 85 / 0.2);
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.gallery-card:hover img { transform: scale(1.05); }

/* =====================================================
   EQUIPE
   ===================================================== */
.section-equipe { background: var(--surface); }
.equipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .equipe-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) { .equipe-grid { margin-top: 3.5rem; } }
.equipe-card {
  height: 100%;
  border-radius: 1.5rem;
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (min-width: 640px) { .equipe-card { padding: 2rem; } }
.equipe-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15);
}
.equipe-card svg { margin-bottom: 0.75rem; }
.equipe-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}
.equipe-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .equipe-card p { font-size: 1rem; } }

/* =====================================================
   FINAL CTA
   ===================================================== */
.section-final-cta {
  background: var(--highlight);
  position: relative;
  overflow: hidden;
}
.section-final-cta::before, .section-final-cta::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}
.section-final-cta::before {
  right: -4rem;
  top: 2.5rem;
  width: 10rem;
  height: 10rem;
  background: oklch(0.35 0.17 310 / 0.1);
}
.section-final-cta::after {
  left: -3rem;
  bottom: 2.5rem;
  width: 8rem;
  height: 8rem;
  background: oklch(0.32 0.14 350 / 0.1);
}
.lead-on-highlight {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: oklch(0.15 0.02 60 / 0.85);
}
@media (min-width: 640px) { .lead-on-highlight { margin-top: 1.5rem; font-size: 1.125rem; } }
.final-cta-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}
@media (min-width: 640px) {
  .final-cta-actions { margin-top: 2.5rem; flex-direction: row; gap: 1rem; }
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  background: var(--primary-dark);
  padding: 3rem 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) { .footer { padding: 4rem 0; } }
.footer-top {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-logo {
  height: 2.5rem;
  width: auto;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .footer-logo { height: 3rem; } }
.footer-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-foreground);
}
@media (min-width: 640px) { .footer-title { font-size: 1.5rem; } }
.footer-intro {
  margin-top: 0.75rem;
  max-width: 42rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
  color: oklch(1 0 0 / 0.75);
}
@media (min-width: 640px) { .footer-intro { font-size: 1rem; } }
.color-dots {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}
.color-dots span {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}

.footer-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); text-align: left; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-grid h3 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--highlight);
}
.footer-grid ul { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-grid li a {
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(1 0 0 / 0.8);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color .2s ease;
  word-break: break-word;
}
.footer-grid li a:hover { color: var(--highlight); }
.footer-grid li svg { flex-shrink: 0; }
.footer-address {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 28rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
  color: oklch(1 0 0 / 0.8);
  text-align: left;
}
.footer-address svg { margin-top: 0.125rem; flex-shrink: 0; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(1 0 0 / 0.1);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(1 0 0 / 0.5);
}
@media (min-width: 640px) { .footer-bottom { font-size: 0.875rem; } }
.footer-bottom p + p { margin-top: 0.25rem; }
.footer-credit a {
  color: oklch(0.78 0.16 85);
  border-bottom: 1px solid oklch(0.78 0.16 85 / 0.35);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.footer-credit a:hover { color: #fff; border-bottom-color: #fff; }

/* =====================================================
   WHATSAPP FAB
   ===================================================== */
.whatsapp-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transition: transform .3s ease;
  animation: fab-pop .55s cubic-bezier(.5, 1.5, .5, 1) both;
  animation-delay: 1s;
}
.whatsapp-fab:hover { transform: scale(1.1); }
.whatsapp-fab svg { width: 2rem; height: 2rem; }
@keyframes fab-pop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* =====================================================
   REVEAL ANIMATIONS
   ===================================================== */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.is-visible { opacity: 1; transform: none; }