:root {
  --expresso: #351904;
  --ember: #8B3B00;
  --gold: #E08D00;
  --malibu: #FFECB9;
  --vanilla: #9FD8EF;

  --bg: #201002;
  --text: #FFF6E4;
  --text-muted: #E9CBA0;

  --radius-lg: 24px;
  --radius-md: 16px;
  --wrap: 1140px;
  --gutter: 24px;
}

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces/Fraunces-VariableFont.ttf") format("truetype-variations"),
       url("../assets/fonts/fraunces/Fraunces-VariableFont.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Exo";
  src: url("../assets/fonts/exo/Exo-VariableFont_wght.ttf") format("truetype-variations"),
       url("../assets/fonts/exo/Exo-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Base: mobile first. Regras acima de 600px/900px vem nas media queries no fim
   do arquivo — 80-90% do publico acessa pelo celular (decisao de 16/09).

   Regra de ouro contra bloco encostando na borda: nunca combinar `.wrap` com uma
   classe que define `padding` (shorthand) no mesmo elemento — o shorthand mais
   tardio no arquivo vence e apaga o respiro lateral do `.wrap`. Por isso todo
   card do tipo glass-panel fica num filho de `.wrap`, nunca na própria `.wrap`. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Exo", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, var(--expresso) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 14px;
}

h1 { font-size: clamp(1.9rem, 7vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 5.5vw, 2.4rem); }
h3 { font-size: 1.15rem; margin-bottom: 6px; }

p { line-height: 1.6; margin: 0 0 16px; color: var(--text-muted); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.center { text-align: center; margin-left: auto; margin-right: auto; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
}

/* Liquid Glass */
.glass-panel {
  background: linear-gradient(160deg, rgba(255, 236, 185, 0.14), rgba(139, 59, 0, 0.22));
  border: 1px solid rgba(255, 236, 185, 0.28);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  padding: 24px;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(32, 16, 2, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 236, 185, 0.14);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

.topbar-logo { height: 20px; width: auto; }

.topbar-cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--expresso);
  background: linear-gradient(160deg, var(--malibu), var(--gold));
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 236, 185, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: var(--expresso);
  width: 100%;
  white-space: nowrap;
}

.btn:hover, .btn:active { transform: translateY(-2px); }

.btn-shopee {
  background: linear-gradient(160deg, #FFD68A, var(--gold));
  box-shadow: 0 10px 30px rgba(224, 141, 0, 0.35);
}

.btn-ml {
  background: linear-gradient(160deg, var(--malibu), #FFD68A);
  box-shadow: 0 10px 30px rgba(255, 236, 185, 0.25);
}

.btn-lg { padding: 18px 30px; font-size: 1.05rem; }

.cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0;
}

.cta-row-final { max-width: 380px; margin-left: auto; margin-right: auto; }

/* Hero — carrossel de modelos primeiro (pedido de 16/09: tem que ser a primeira
   coisa depois do menu), texto de abertura logo abaixo, fundidos numa unica secao. */
.hero { padding-top: 12px; padding-bottom: 12px; }

.hero-top { padding-top: 28px; padding-bottom: 4px; }

.hero-lead { font-size: 1rem; }

.hero-slogan {
  font-family: "Fraunces", serif;
  font-style: italic;
  color: var(--malibu);
  margin: 0;
}

/* Carrosseis (hero, tamanhos) — CSS scroll-snap nativo, sem lib JS */
.tamanhos { padding: 56px 0 40px; }

.tamanhos-lead { max-width: 520px; }

.carousel {
  position: relative;
  margin-top: 14px;
}

.carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--gutter) 16px;
}

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

/* Cartoes de tamanho (N6-N1): a propria imagem ja traz numero e medida
   (arte pronta de post-06-variedade-tamanho), sem legenda extra sobreposta */
.carousel-card {
  flex: 0 0 46%;
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}

.carousel-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Cartoes do hero (modelos): maiores, foto com legenda sobreposta, cara de hero */
.hero-slide {
  position: relative;
  flex: 0 0 84%;
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #FFF;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}

/* object-fit: contain (nao cover) para o produto nunca ser cortado nas laterais
   — as fotos sao quase quadradas, o cartao e mais alto que largo (3:4). Pedido
   de 16/09: produto tem que aparecer inteiro. */
.hero-slide img { width: 100%; height: 100%; object-fit: contain; }

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(32, 16, 2, 0.94) 0%, rgba(32, 16, 2, 0.6) 34%, rgba(32, 16, 2, 0) 62%);
}

.hero-slide-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
}

.hero-slide-copy h2 { font-size: 1.4rem; margin-bottom: 6px; }
.hero-slide-copy p { font-size: 0.9rem; margin-bottom: 10px; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--expresso);
  background: var(--gold);
  padding: 5px 12px;
  border-radius: 999px;
}

/* Escondida no mobile sempre; no desktop (media query abaixo) fica display:flex
   por padrao, e o main.js soma uma camada por cima: escondida de novo (inline
   style) sempre que o carrossel nao tiver overflow, ou seja, quando todos os
   cartoes ja cabem na tela (pedido de 16/09) — checagem dinamica por
   scrollWidth, nao um "sempre escondida" fixo pra um carrossel especifico,
   porque o que cabe depende da largura real da janela. */
.carousel-arrow { display: none; }

.material-nota, .tamanhos-nota { color: var(--gold); font-weight: 600; padding: 0 var(--gutter); max-width: 620px; }

/* Frete — glass-panel mora DENTRO do .wrap (filho), nunca junto na mesma tag,
   senao o shorthand padding do glass-panel apaga o respiro lateral do .wrap.
   A tag "leve mais por menos" funciona como divisor entre secoes: metade de
   baixo dentro do cartao, metade de cima estourando pra fora do limite
   superior (pedido de 16/09) — por isso e position:absolute, fora do flex,
   com transform: translate(-50%,-50%) pra centralizar e subir a partir do
   proprio tamanho dela, sem depender de calculo de altura fixo.
   Padding-top grande no mobile (128px) e de proposito: a tag estoura ~97px
   pra cima do cartao, entao a secao precisa desse respiro pra ela nao invadir
   o texto da secao de tamanhos logo acima (bug reportado em 16/09). No
   desktop o estouro e menor em proporcao e ja sobra espaco, por isso a
   media query de 900px devolve o padding-top ao valor original. */
.frete { padding: 128px 0 56px; }

.frete-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 104px;
}

.frete-tag {
  position: absolute;
  top: 0;
  left: 50%;
  width: 240px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.frete-copy h2 { margin-bottom: 10px; }
.frete-copy p { margin: 0; }

/* Lifestyle — mobile: imagem inteira (proporcao igual a original, sem corte) e
   texto abaixo, nunca sobreposto. Pedido de 16/09: o rosto e a forminha tem que
   aparecer inteiros antes do bloco de texto comecar. */
.lifestyle-media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.lifestyle-media img { width: 100%; height: 100%; object-fit: cover; }

.lifestyle-inner { padding-top: 24px; padding-bottom: 8px; }
.lifestyle-copy { text-align: center; }
.lifestyle-copy h2 { margin: 0; }

/* CTA final */
.cta-final { padding: 24px 0 72px; }
.cta-final-lead { max-width: 420px; }

/* Footer */
.footer { padding: 36px 0; border-top: 1px solid rgba(255, 236, 185, 0.14); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-logo { height: 18px; opacity: 0.85; }
.footer-slogan { font-family: "Fraunces", serif; font-style: italic; color: var(--text-muted); margin: 0; font-size: 0.9rem; }

/* Tablet e acima */
@media (min-width: 600px) {
  .cta-row { flex-direction: row; }
  .btn { width: auto; }
  .hero-slide { flex-basis: 380px; }
  .carousel-card { flex-basis: 220px; }
}

/* Desktop */
@media (min-width: 900px) {
  :root { --gutter: 32px; }

  .hero { padding-top: 32px; padding-bottom: 16px; }
  .hero-top { padding-top: 32px; padding-bottom: 8px; max-width: 640px; }

  /* Hero menor e centralizada (pedido de 16/09, so desktop): o carrossel de
     modelos era full-bleed, sem limite de largura, e ficava desproporcional
     em tela larga (cartoes de largura fixa colados a esquerda, setas coladas
     na borda do viewport). Agora o carrossel fica dentro do mesmo .wrap do
     resto da pagina, centralizado, com cartao um pouco menor. */
  .carousel-hero {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .carousel-hero .carousel-track {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .hero-slide { flex-basis: 300px; }

  .tamanhos { padding: 96px 0 64px; }

  .carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 236, 185, 0.35);
    background: rgba(32, 16, 2, 0.6);
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 2;
  }
  .carousel-arrow-prev { left: 4px; }
  .carousel-arrow-next { right: 4px; }
  .carousel-arrow:hover { background: rgba(224, 141, 0, 0.85); color: var(--expresso); }

  /* Frete no desktop: a tag deixa de ser divisor sobreposto e vira coluna
     esquerda, texto na coluna direita, alinhado a esquerda (pedido de 16/09,
     so desktop — no mobile continua estourando o topo do cartao). */
  .frete { padding-top: 16px; }
  .frete-inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 40px;
    padding: 40px;
  }
  .frete-tag {
    position: static;
    transform: none;
    width: 260px;
    flex-shrink: 0;
  }
  .frete-copy { max-width: 520px; }

  /* Lifestyle no desktop: texto na coluna esquerda, foto inteira (sem corte
     esticado) numa coluna a direita — a versao de banner de fundo ficava
     irreconhecivel em tela larga (pedido de 16/09). */
  .lifestyle {
    position: static;
    display: flex;
    align-items: stretch;
    gap: 40px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 64px var(--gutter);
    min-height: 420px;
    overflow: visible;
  }
  .lifestyle-media {
    position: static;
    order: 2;
    flex: 1 1 45%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .lifestyle-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  .lifestyle-media::after { display: none; }
  .lifestyle-inner {
    order: 1;
    flex: 1 1 55%;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }
  .lifestyle-copy { text-align: left; max-width: 460px; }

  /* CTA final: max-width:380px (regra base, pensada pra empilhar os botoes no
     mobile) sobrava estreito demais pra dois botoes lado a lado com o texto
     de "Comprar no Mercado Livre" — cada um quebrava em duas linhas. No
     desktop os botoes ja nao empilham (flex-direction:row desde 600px), entao
     o bloco pode crescer e so fica centralizado por justify-content. */
  .cta-row-final { max-width: none; justify-content: center; }

  .footer-logo { height: 22px; }
}