* {
  box-sizing: border-box
}
:root {
  --bg: #140b07;
  --brown: #2a160e;
  --brown2: #3e2112;
  --cream: #fcf2e3;
  --mustard: #f9c73d;
  --text: #fff8ef;
  --ink: #2a160e;
  --muted: #d7c3b3;
  --header-h: 92px
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px)
}
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: #120a06;
  color: var(--text)
}
img {
  display: block;
  max-width: 100%
}
a {
  text-decoration: none;
  color: inherit
}
button {
  font: inherit
}
.container {
  width: min(1180px, 92vw);
  margin-inline: auto
}
/* TOPBAR: transparente no primeiro olhar; nasce no scroll */
.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: .28s ease
}
.topbar.scrolled {
  height: 76px;
  background: rgba(18, 9, 5, .94);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(249, 199, 61, .1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18)
}
.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 26px
}
.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 310px;
  position: relative
}
.brand-full {
  width: 310px;
  max-height: none;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center
}
.brand-symbol {
  display: none;
  width: 48px;
  height: 58px;
  object-fit: contain
}
.topbar.scrolled .brand-full {
  display: none
}
.topbar.scrolled .brand-symbol {
  display: block
}
.topbar.scrolled .brand {
  min-width: 48px
}
.nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  align-items: center
}
.nav a {
  font-size: .92rem;
  color: #fff6ee;
  white-space: nowrap
}
.nav a:hover {
  color: var(--mustard)
}
.desktop-cta {
  margin-left: 4px
}
.menu-btn {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--mustard);
  font-size: 1.8rem
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 012px;
  font-weight: 800
}
.btn-primary {
  background: var(--mustard);
  color: #24140c
}
.btn-outline {
  border: 1px solid rgba(255, 255, 255, .6);
  color: #fff
}
.btn-dark {
  background: #25140d;
  color: #fff
}
.btn-soft {
  background: #eadcc9;
  color: #3e2112
}
.hero {
  position: relative;
  min-height: 820px;
  overflow: hidden
}
.hero-media {
  position: absolute;
  inset: 0
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 4, 2, .30), rgba(8, 4, 2, .10) 20%, rgba(8, 4, 2, .17)), linear-gradient(90deg, rgba(8, 4, 2, .91), rgba(8, 4, 2, .58) 42%, rgba(8, 4, 2, .12) 76%)
}
.hero-content {
  position: relative;
  z-index: 2;
  min-height: 820px;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 76px
}
.hero-copy {
  max-width: 650px
}
.eyebrow, .kicker {
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--mustard);
  font-size: .78rem
}
/* Nova letra: manuscrita elegante, mais próxima da linguagem do Morango Cravejado */
.hero h1, .elastic-section h2, .marker {
  font-family: "Archivo Black", Inter, sans-serif;
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase
}
.hero h1 {
  font-size: clamp(3.7rem, 6.4vw, 6.7rem);
  margin: .18em 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .22)
}
.hero h1 span, .elastic-section h2 span {
  color: var(--mustard)
}
.lead {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: #f1dfcf
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 24px
}
.hero-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px
}
.hero-icons button {
  cursor: pointer;
  background: rgba(38, 20, 12, .66);
  border: 1px solid rgba(249, 199, 61, .32);
  color: #fff;
  border-radius: 14px;
  padding: 11px 14px;
  backdrop-filter: blur(3px)
}
.hero-icons button:hover {
  border-color: var(--mustard);
  transform: translateY(-1px)
}
.hero-icons span {
  margin-left: 6px
}
.module-area {
  padding: 28px 0 18px;
  background: linear-gradient(#170c08, #120a06)
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px
}
.module-card {
  min-height: 280px;
  border: 1px solid rgba(249, 199, 61, .38);
  border-radius: 8px;
  overflow: hidden;
  padding: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  background-image: linear-gradient(to top, rgba(15, 8, 5, .96), rgba(15, 8, 5, .14)), var(--bg-desktop);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  transition: .22s ease
}
.module-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 199, 61, .75)
}
.module-card h2 {
  margin: .4rem 0 .25rem;
  font-size: 1.08rem
}
.module-card p {
  margin: 0;
  color: #f0dac8;
  font-size: .88rem
}
.module-icon {
  font-size: 1.5rem
}
.open-module {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: var(--mustard);
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer
}
.elastic-host {
  padding: 8px 0 48px
}
.elastic-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, .8, .22, 1), opacity .25s ease;
  opacity: 0
}
.elastic-panel.open {
  grid-template-rows: 1fr;
  opacity: 1
}
.elastic-panel > div {
  overflow: hidden
}
.elastic-section {
  border-radius: 12px;
  overflow: hidden
}
.elastic-section.light {
  background: #fafdf4;
  color: var(--ink)
}
.elastic-section.pink {
  background: #fff;
  color: #2c1711
}
.elastic-section.dark, .elastic-section.chicken {
  background: linear-gradient(135deg, #3c2012, #f4c62938);
  color: #fff
}
.elastic-section.chicken {
  border: 1px solid rgba(249, 199, 61, .25)
}
.elastic-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 520px
}
.elastic-hero.reverse .copy {
  order: 2
}
.elastic-hero.reverse picture {
  order: 1
}
.elastic-hero .copy {
  padding: clamp(34px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center
}
.elastic-hero h2 {
  font-size: clamp(2.8rem, 4.6vw, 4.9rem)
}
.elastic-hero p {
  font-size: 1.03rem;
  line-height: 1.7;
  max-width: 54ch
}
.elastic-hero picture, .elastic-hero picture img {
  width: 100%;
  height: 100%
}
.elastic-hero picture img {
  object-fit: cover
}
.product-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px
}
.product-card {
  background: rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 12px
}
.light .product-card, .pink .product-card {
  background: #fff
}
.product-card picture, .product-card img {
  width: 100%
}
.product-card img {
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 14px
}
.product-card h3 {
  margin: .8rem 0 .2rem
}
.product-card p {
  margin: 0;
  opacity: .75
}
.close-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px
}
.social-strip {
  background: var(--cream);
  color: var(--ink);
  padding: 64px 0
}
.social-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 36px;
  align-items: center
}
.marker {
  font-size: 2.7rem;
  margin: 0;
  color: var(--brown)
}
.social-grid h2 {
  font-size: 2rem;
  margin: .2rem 0 1rem
}
.social-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}
.thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px
}
.thumbs picture, .thumbs img {
  width: 100%
}
.thumbs img {
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 8px
}
.contact {
  background: #170c08;
  padding: 54px 0 0
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr .8fr 1fr;
  gap: 34px;
  align-items: start;
  padding-bottom: 42px
}
.footer-logo {
  width: 155px
}
.contact h3 {
  color: var(--mustard);
  font-size: .95rem
}
.contact p {
  color: #dbc7b5;
  line-height: 1.55
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 9px
}
.footer-contact > a, .footer-social a {
  color: #f4dfcb
}
.footer-contact > a:hover, .footer-social a:hover {
  color: var(--mustard)
}
.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 7px;
  flex-wrap: wrap
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #100806
}
.footer-bottom-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  color: #bca694;
  font-size: .86rem
}
.footer-bottom a {
  color: var(--mustard)
}
/* Botão perto do mouse/dedo */
.back-to-top {
  position: fixed;
  z-index: 60;
  right: 24px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(249, 199, 61, .46);
  background: rgba(18, 9, 5, .92);
  color: var(--mustard);
  font-size: 1.55rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: .2s ease
}
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: none
}
.back-to-top:hover {
  background: var(--mustard);
  color: #24140c
}
@media(max-width:960px) {
  :root {
    --header-h: 82px
  }
  .topbar.scrolled {
    height: 70px
  }
  .nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 4vw;
    right: 4vw;
    background: #1d0f09;
    border: 1px solid rgba(249, 199, 61, .2);
    border-radius: 18px;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }
  .nav.mobile-open {
    display: flex
  }
  .nav a {
    padding: 13px 10px
  }
  .desktop-cta {
    display: none
  }
  .menu-btn {
    display: block
  }
  .brand {
    min-width: 230px
  }
  .brand-full {
    width: 230px
  }
  .topbar.scrolled .brand {
    min-width: 44px
  }
  .brand-symbol {
    width: 42px;
    height: 50px
  }
  .hero, .hero-content {
    min-height: 760px
  }
  .hero-copy {
    max-width: 540px
  }
  .module-grid {
    grid-template-columns: 1fr 1fr
  }
  .module-card {
    min-height: 190px
  }
  .elastic-hero {
    grid-template-columns: 1fr
  }
  .elastic-hero.reverse .copy, .elastic-hero.reverse picture {
    order: initial
  }
  .elastic-hero picture {
    height: 360px
  }
  .product-row {
    grid-template-columns: 1fr 1fr
  }
  .social-grid {
    grid-template-columns: 1fr
  }
  .contact-grid {
    grid-template-columns: 1fr 1fr
  }
}
@media(max-width:620px) {
  .container {
    width: min(100% - 36px, 1180px)
  }
  .brand {
    min-width: 200px
  }
  .brand-full {
    width: 200px
  }
  .hero, .hero-content {
    min-height: 820px
  }
  .hero-content {
    align-items: flex-end;
    padding-top: 112px;
    padding-bottom: 54px
  }
  .hero h1 {
    font-size: 4.25rem
  }
  .lead {
    font-size: 1rem
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch
  }
  .hero-icons {
    display: grid;
    grid-template-columns: 1fr 1fr
  }
  .module-area {
    padding-top: 18px
  }
  .module-grid {
    grid-template-columns: 1fr
  }
  .module-card {
    min-height: 158px;
    padding: 18px;
    background-image: linear-gradient(to top, rgba(15, 8, 5, .96), rgba(15, 8, 5, .14)), var(--bg-mobile)
  }
  .elastic-host {
    width: 100%;
    padding-inline: 0
  }
  .elastic-section {
    border-radius: 0
  }
  .elastic-hero .copy {
    padding: 34px 22px
  }
  .elastic-hero h2 {
    font-size: 3.3rem
  }
  .elastic-hero picture {
    height: 390px
  }
  .product-row {
    grid-template-columns: 1fr;
    padding: 12px
  }
  .product-card img {
    aspect-ratio: 4/5
  }
  .social-strip {
    padding: 44px 0
  }
  .marker {
    font-size: 3rem
  }
  .thumbs {
    grid-template-columns: repeat(5, 130px);
    overflow: auto;
    padding-bottom: 8px
  }
  .thumbs img {
    aspect-ratio: 4/5
  }
  .contact-grid {
    grid-template-columns: 1fr
  }
  .footer-bottom-inner {
    justify-content: center;
    text-align: center;
    padding: 13px 0
  }
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 58px;
    height: 58px
  }
}
/* ===== V5 — SOCIAL RAIL ===== */
.social-rail {
  position: fixed;
  z-index: 45;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 15px 9px;
  border: 1px solid rgba(249, 199, 61, .34);
  border-radius: 010px;
  background: rgba(18, 9, 5, .72);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  transition: .22s ease
}
.social-rail-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #fff7ed
}
.social-rail-line {
  width: 1px;
  height: 30px;
  background: rgba(249, 199, 61, .55)
}
.social-rail a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(249, 199, 61, .30);
  color: var(--mustard);
  transition: .18s ease
}
.social-rail a:hover {
  background: var(--mustard);
  color: #24140c;
  transform: scale(1.06)
}
.social-rail svg, .social-circle svg, .contact-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor
}
.social-rail rect, .social-rail circle, .social-circle rect, .social-circle circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}
.social-rail circle:last-child, .social-circle circle:last-child {
  fill: currentColor;
  stroke: none
}
/* ===== V5 — FOOTER ICONS ===== */
.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f4dfcb
}
.contact-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(249, 199, 61, .10);
  color: var(--mustard);
  border: 1px solid rgba(249, 199, 61, .22)
}
.footer-social {
  display: flex;
  gap: 9px;
  margin-top: 8px
}
.social-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(249, 199, 61, .28);
  color: var(--mustard);
  transition: .18s ease
}
.social-circle:hover {
  background: var(--mustard);
  color: #24140c
}
/* Fechar Elastano™ agora tem presença */
.close-elastic {
  min-width: 190px;
  box-shadow: 0 8px 24px rgba(249, 199, 61, .13)
}
.close-elastic:hover {
  filter: brightness(1.05);
  transform: translateY(-1px)
}
@media(max-width:1180px) {
  .social-rail {
    left: 8px
  }
}
@media(max-width:760px) {
  .social-rail {
    top: auto;
    left: 12px;
    bottom: 14px;
    transform: none;
    flex-direction: row;
    padding: 7px 9px;
    gap: 8px
  }
  .social-rail-label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: .72rem
  }
  .social-rail-line {
    width: 22px;
    height: 1px
  }
  .social-rail a {
    width: 34px;
    height: 34px
  }
  .back-to-top {
    bottom: 54px
  }
}
/* ===== V6 — LOGO COM MAIS PRESENÇA =====
   A logo inteira cresce no primeiro impacto sem aumentar a altura do header.
   No scroll ela continua sendo substituída pelo símbolo S. */
@media (min-width:961px) {
  .topbar:not(.scrolled) .brand-full {
    width: 180px;
    top: 40px;
  }
}
@media (min-width:621px) and (max-width:960px) {
  .topbar:not(.scrolled) .brand-full {
    width: 230px;
  }
}
@media (max-width:620px) {
  .topbar:not(.scrolled) .brand-full {
    width: 150px;
    top: 40px;
  }
}
.cards-section {
  position: relative;
  z-index: 5;
  margin-top: -110px;
}
.cards-grid {
  padding-bottom: 40px;
}
@media (max-width: 620px) {
  .cards-section {
    margin-top: -45px;
  }
}
/* ==================================================
   ALTERAÇÃO V8 — CARROSSEL / VITRINE DE PRODUTOS
   ================================================== */

.product-carousel{
  position: relative;
  padding: 26px 58px 30px;
}

.product-track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 2px 10px;
}

.product-track::-webkit-scrollbar{
  display: none;
}

.product-slide{
  flex: 0 0 clamp(190px, 18vw, 235px);
  scroll-snap-align: start;
  min-width: 0;
}

.product-slide img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .22s ease;
}

.product-slide:hover img{
  transform: scale(1.025);
}

.product-slide h3{
  margin: 10px 4px 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  color: inherit;
}

.carousel-arrow{
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(249,199,61,.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(18,9,5,.90);
  color: var(--mustard);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-prev{
  left: 8px;
}

.carousel-next{
  right: 8px;
}

.elastic-section.light .carousel-arrow,
.elastic-section.pink .carousel-arrow{
  background: rgba(42,22,14,.94);
}

.carousel-arrow:hover{
  background: var(--mustard);
  color: #24140c;
}


/* MOBILE */

@media (max-width:620px){

  .product-carousel{
    padding: 20px 0 24px 18px;
  }

  .product-track{
    gap: 12px;
    padding-right: 18px;
  }

  .product-slide{
    flex: 0 0 72vw;
    max-width: 280px;
  }

  .product-slide h3{
    font-size: .98rem;
    margin-top: 9px;
  }

  .carousel-arrow{
    display: none;
  }

}

/* ==================================================
   FIM DA ALTERAÇÃO V8
   ================================================== */
/* ===== ESCONDE SIGA AS REDES NO MOBILE ===== */

@media (max-width: 760px){
  .social-rail{
    display: none;
  }
}

/* ===== FIM ===== */