:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.25 0.018 158);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: #00ad57;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.923531 0.111635 138.120198);
  --secondary-foreground: oklch(0.327634 0.063821 168.957826);
  --muted: oklch(0.975 0.004 155);
  --muted-foreground: oklch(0.53 0.014 158);
  --accent: oklch(0.95 0.032 151);
  --accent-foreground: oklch(0.36 0.085 155);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.925 0.007 155);
  --input: oklch(0.925 0.007 155);
  --ring: oklch(0.65 0.178 151.7);
  --forest: oklch(0.327634 0.063821 168.957826);
  --highlight: oklch(0.913783 0.204372 123.893709);
  --hero-ink: oklch(0.327634 0.063821 168.957826);
  --sunshine: oklch(0.76 0.15 78);
  --overlay: oklch(0.15 0.02 155 / 45%);
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

/* Standalone foundations: no Tailwind or build step. */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); font-family: var(--font-display); }
body, h1, h2, h3, p { margin: 0; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: transparent; cursor: pointer; }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.brand { position: relative; display: inline-block; width: 70px; height: auto; }
.brand svg{ display: block; width: 100%; height: auto; }
.brand-check { position: absolute; bottom: 6px; left: 8px; width: 14px; height: 14px; }
.brand-dot { margin-left: -4px; color: var(--forest); }
.icon-small { width: 14px; height: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 6px; font-size: 14px; font-weight: 500; height: 36px; padding: 8px 16px; transition: background-color .2s, color .2s; }
.button svg { width: 16px; height: 16px; pointer-events: none; }
.button:focus-visible, a:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.button-brand { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.button-brand:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
.button-sunshine { background: var(--highlight); color: var(--forest); font-weight: 700; border-radius: 999px; }
.button-sunshine:hover { background: color-mix(in oklch, var(--highlight) 85%, transparent); }
.button-airy { color: var(--primary-foreground); border: 1px solid color-mix(in oklch, var(--primary-foreground) 60%, transparent); border-radius: 999px; }
.button-airy:hover { background: color-mix(in oklch, var(--primary-foreground) 10%, transparent); }
.button-navigation { color: var(--foreground); }
.button-navigation:hover { color: var(--primary); }
.information-dialog { width: min(512px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); margin: auto; box-shadow: 0 12px 40px var(--overlay); }
.information-dialog::backdrop { background: var(--overlay); }
.information-dialog h2 { padding-right: 20px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.dialog-subtitle { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); margin-top: 6px; }
.dialog-message { font-size: 14px; line-height: 1.625; color: var(--muted-foreground); margin: 16px 0; }
.dialog-close { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; font-size: 23px; padding: 0; color: var(--muted-foreground); }
.dialog-explore { width: 100%; height: auto; min-height: 36px; white-space: normal; }
body.dialog-open { overflow: hidden; }
@media (max-width: 639px) { .desktop-break { display: none; } }
html { scroll-behavior: smooth; }
* { letter-spacing: 0; }
.page-container { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.brand { font: 800 32px/1 var(--font-display); display: inline-flex; align-items: center; gap: 9px; color: var(--primary); }
.brand-bag { width: 29px; height: 32px; }
.promo-header { height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.promo-nav { display: flex; align-items: center; gap: 20px; }.promo-nav button { font-size: 14px; font-weight: 400; }
.promo-button { min-height: 48px; padding-inline: 25px; font-size: 12px; gap: 20px; border-radius: 999px; }


.promo-hero { position: relative; height: 500px; background: #06a354; overflow: hidden; }
.promo-hero-image { position: absolute; inset: 0; width: auto; height: 100%; object-fit: cover; object-position: center; top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
.promo-hero-inner { position: relative; height: 100%; display: flex; align-items: center; }
.promo-hero-copy { width: 52%; padding-block: 30px; color: var(--primary-foreground); }

.icons_stores{ display: flex; gap: 10px; }
.icons_stores a{ display: block; width: 140px; }
.icons_stores a img{ display: block; width: 100%; height: auto; }


.promo-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 300; color: var(--secondary); }
.promo-eyebrow svg{ width: 16px; height: auto; }
.promo-hero h1 { font: 800 82px/1.1 var(--font-display); margin-top: 17px; color: var(--primary-foreground); }
.promo-hero h1 span { display: inline-block; color: var(--highlight); transform: rotate(10deg); }
.promo-hero h2 { font-size: 60px; margin-top: 12px; max-width: 460px;     line-height: 54px;
    letter-spacing: -1px; }
.promo-hero p { font-size: 18px; font-weight: 200; max-width: 370px; margin-top: 18px; }
.promo-hero-actions { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.promo-explore { width: 47px; height: 47px; padding: 0; }
.promo-discover { display: inline-flex; align-items: center; gap: 8px; margin-top: 21px; font-size: 10px; color: var(--secondary); }
.promo-ribbon { background: #033f2f; padding-block: 25px; margin-top: -10px; padding-top: 35px; }
.promo-ribbon-inner { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.promo-ribbon span { font-size: 18px; font-weight: 600; display: flex; gap: 10px; align-items: center; color: #c7f843; }.promo-ribbon svg { width: 18px; color: var(--primary); }.promo-ribbon .ribbon-separator { color: var(--primary); font-size: 23px; }
.promo-section { padding-block: 70px; scroll-margin-top: 24px; }.promo-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 38px; }
.promo-kicker { font-size: 18px; color: var(--primary); font-weight: 300; margin-bottom: 13px; }
.promo-section h2 { font-size: 30px; font-weight: 800; }
  .promo-section h2 span { color: var(--primary); display: inline-block; transform: rotate(-4deg); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }.promo-section-heading > p { color: var(--muted-foreground); font-size: 12px; max-width: 200px; }
.promo-collections { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 38px; align-items: start; }
.promo-collection { position: relative; padding-top: 7px; }.promo-collection:nth-child(2) { padding-top: 38px; }.promo-collection:nth-child(3) { padding-top: 15px; }
.promo-collection-image { width: 100%; aspect-ratio: 1.15; object-fit: contain; background: #e8e8e8; border-radius: 48% 48% 38% 46%; transform: rotate(-5deg); transition: transform .5s; }.promo-collection:nth-child(2) img { border-radius: 38% 48% 45% 35%; transform: rotate(5deg); }.promo-collection:nth-child(3) img { border-radius: 48% 35% 45% 40%; transform: rotate(-3deg); }.promo-collection:hover img { transform: rotate(0) translateY(-7px); }
.promo-collection-copy { padding: 28px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo-collection-copy > div{ width: 100%; text-align: center; }
.promo-collection h3 { font: 650 17px/1.5 var(--font-display); }.promo-collection p { font-size: 11px; color: var(--muted-foreground); margin-top: 4px; }.promo-collection .promo-kicker { color: var(--primary); margin-bottom: 7px; }.promo-collection .collection-arrow { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: var(--secondary); color: var(--forest); flex-shrink: 0; }


.promo-manifesto { position: relative; background: var(--secondary); }
.promo-manifesto-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.promo-manifesto h2 { max-width: 430px; font-size: 35px; }
.promo-manifesto-intro { color: var(--foreground); font-size: 12px; line-height: 1.9; margin-top: 20px; max-width: 350px; }


.promo-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.promo-reason > svg { color: var(--primary); width: 29px; height: 29px; stroke-width: 1.8; margin-bottom: 16px; transform: rotate(-7deg); }
.promo-reason h3 { font: 650 14px/1.5 var(--font-display); }
.promo-reason p { color: var(--foreground); font-size: 11px; line-height: 1.9; margin-top: 7px; }


.promo-finale { text-align: center; background: #04ac5e url(../imagens/shopao-green-finale1.jpg) no-repeat left; background-size: auto 100%; color: var(--primary-foreground); }
.promo-finale > div{ padding: 70px 0; background: url(../imagens/shopao-green-finale2.jpg) no-repeat right; background-size: auto 100%; }
.promo-finale .promo-kicker { display: inline-flex; gap: 7px; align-items: center; color: var(--secondary); }
.promo-finale h2 { font: 750 53px/1.2 var(--font-display); }
.promo-finale h2 span { color: var(--secondary); display: inline-block; transform: rotate(-3deg); }
.promo-finale p { font-size: 13px; line-height: 1.9; margin: 20px auto 27px; max-width: 440px; }
.promo-finale-buttons { display: flex; justify-content: center; gap: 13px; }


.promo-footer { padding-block: 20px; }
.promo-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.promo-footer p { font-size: 10px; color: var(--muted-foreground); }
.promo-footer .brand { font-size: 25px; }
.promo-footer .brand-bag { width: 23px; height: 25px; }

.dialog-overlay { background: var(--overlay); }
.brand-footer{ display: block; width: 30px; height: auto; }
.brand-footer svg{ display: block; width: 100%; height: auto; }

@media (min-width: 1500px){

  .promo-hero{ height: 500px; }

}

@media (max-width: 1100px) {

  .page-container { width: calc(100% - 64px); }
  .promo-nav { gap: 8px; }
  .promo-hero h1 { font-size: 72px; }
  .promo-hero h2 { font-size: 35px; }
  .promo-hero-image { object-position: 55% center; }
  .promo-manifesto-inner { gap: 40px; }.promo-ribbon span { font-size: 13px; }

}

@media (max-width: 700px) { .page-container { width: calc(100% - 40px); }.promo-header { height: 75px; gap: 12px; }.brand { font-size: 27px; gap: 7px; }.brand-bag { width: 25px; height: 28px; }.promo-nav { display: none; }.promo-header > .promo-button { padding-inline: 14px; min-height: 37px; font-size: 10px; gap: 10px; }.promo-hero { height: 650px; border-radius: 0 0 45% 0 / 0 0 4% 0; }.promo-hero-image { object-fit: cover; object-position: right center; width: 110%; max-width: none; height: 50%; top: auto; bottom: 0; left: -10%; }.promo-hero-copy { width: 100%; padding-top: 29px; padding-bottom: 0; }.promo-hero-inner { align-items: flex-start; }.promo-hero h1 { font-size: 62px; margin-top: 13px; }.promo-hero h2 { font-size: 32px; margin-top: 8px; max-width: 310px; }.promo-eyebrow { font-size: 10px; }.promo-hero p { font-size: 12px; line-height: 1.8; margin-top: 13px; max-width: 300px; }.promo-hero-actions { margin-top: 19px; }.promo-hero-actions .promo-button { min-height: 43px; padding-inline: 19px; font-size: 11px; gap: 16px; }.promo-explore { width: 43px; height: 43px; }.promo-discover { display: none; }.promo-ribbon { padding-block: 19px; padding-top: 29px; }.promo-ribbon-inner { justify-content: space-between; gap: 10px; }.promo-ribbon span { font-size: 11px; gap: 6px; }.promo-ribbon span:nth-of-type(n+4) { display: none; }.promo-ribbon .ribbon-separator { font-size: 18px; }.promo-ribbon svg { width: 14px; }.promo-section { padding-block: 44px; }.promo-section-heading { display: block; margin-bottom: 27px; }.promo-section h2 { font-size: 32px; }.promo-section-heading > p { margin-top: 20px; max-width: 310px; font-size: 12px; }.promo-collections { grid-template-columns: 1fr; gap: 32px; }.promo-collection { padding-top: 0 !important; }.promo-collection-image { aspect-ratio: 1.25; width: 85%; margin-inline: auto; }.promo-collection-copy { padding-top: 21px; }.promo-manifesto { border-radius: 45% 0 0 0 / 3% 0 0 0; }.promo-manifesto-inner { grid-template-columns: 1fr; gap: 30px; }.promo-manifesto-intro { font-size: 12px; margin-top: 18px; }.promo-reasons { gap: 28px 20px; }.promo-reason h3 { font-size: 12px; }.promo-reason p { font-size: 11px; }.promo-finale { padding-block: 48px; }.promo-finale h2 { font-size: 40px; }.promo-finale p { font-size: 12px; }.promo-finale-buttons { flex-direction: column; align-items: stretch; }.promo-footer-inner { flex-wrap: wrap; gap: 20px; }.promo-footer p:last-child { width: 100%; }.promo-kicker { font-size: 10px; } }
@media (prefers-reduced-motion: no-preference) { .promo-hero-copy { animation: welcome .7s ease-out both; }.promo-hero h1 span { animation: happy-wiggle 4s ease-in-out infinite; } }
@keyframes welcome { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes happy-wiggle { 0%, 80%, 100% { transform: rotate(10deg); } 86% { transform: rotate(-8deg); } 93% { transform: rotate(15deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }