/* ─── iNutre Online · ALTO PADRÃO
      🤍 Branco quente · 🤎 Areia · ⚫ Preto
      Refs: Aesop · Augustinus Bader · Le Labo · Necessaire
   ───────────────────────────────────────────────────────── */

:root{
  /* — Papel & areia — */
  --paper:     #FAF7F1;     /* warm white (não branco puro) */
  --paper-2:   #F4EFE3;     /* section alt mais quente */
  --sand:      #E5DBC4;     /* areia luxe */
  --sand-2:    #D6C9A8;     /* areia média */
  --clay:      #B5A788;     /* clay sutil (acento) */

  /* — Inks (quentes, nunca puros) — */
  --ink:       #0E0D0A;
  --ink-soft:  #4A463F;
  --ink-mute:  #8E8A82;

  /* — Lines — */
  --rule:      rgba(14,13,10,0.12);
  --rule-d:    rgba(14,13,10,0.22);
  --ease:      cubic-bezier(.2,.7,.2,1);
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ background:var(--paper); color:var(--ink); }
body{
  font-family: 'Geist', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-feature-settings:"ss01","ss02","cv11";
  letter-spacing: -.005em;
}

/* ─── Tipografia ────────────────────────────────────────── */
.font-display{
  font-family: 'Fraunces', 'Cormorant Garamond', ui-serif, Georgia, serif;
  font-feature-settings:"liga","dlig","ss01";
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.font-serif{
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}
.font-mono{ font-family: 'Geist Mono', ui-monospace, monospace; }

.tracking-x{ letter-spacing:.16em; }
.tracking-xx{ letter-spacing:.26em; }
.tracking-tight{ letter-spacing:-.018em; }

/* ─── Display sizes (com line-heights seguros) ──────────── */
.h-1{
  display: block;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  font-weight: 400;
  margin: 0 0 0.4em 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.h-2{
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  font-weight: 400;
  margin: 0 0 0.5em 0;
  font-variation-settings: "opsz" 96, "SOFT" 30;
}
.h-3{
  display: block;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  font-weight: 500;
  margin: 0 0 0.5em 0;
  font-variation-settings: "opsz" 32, "SOFT" 30;
}

/* — italic refinado — */
em.italic{
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* ─── Cores ─────────────────────────────────────────────── */
.ink{ color:var(--ink); }
.ink-soft{ color:var(--ink-soft); }
.ink-mute{ color:var(--ink-mute); }
.clay{ color:var(--clay); }
.bg-paper{ background:var(--paper); }
.bg-paper-2{ background:var(--paper-2); }
.bg-sand{ background:var(--sand); }
.bg-sand-2{ background:var(--sand-2); }
.bg-ink{ background:var(--ink); color:var(--paper); }

.bg-white{ background:var(--paper); }   /* sobrescreve tailwind */
.bg-beige{ background:var(--sand); }    /* compat */

.rule{ border-color:var(--rule); }
.rule-d{ border-color:var(--rule-d); }

/* ─── Buttons (refined, smaller) ────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.4rem;
  font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:#1C1B17; transform: translateY(-1px); }

.btn-out{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--ink); color:var(--ink);
  padding:.65rem 1.4rem;
  font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  transition: background .35s var(--ease), color .35s var(--ease);
  background: transparent;
}
.btn-out:hover{ background:var(--ink); color:var(--paper); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid rgba(250,247,241,.4); color:var(--paper);
  padding:.65rem 1.4rem;
  font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn-ghost:hover{ background:var(--paper); color:var(--ink); }

/* ─── Tags ──────────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .6rem;
  border:1px solid var(--rule);
  font-family:'Geist Mono', monospace;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  background: var(--paper);
  border-radius: 9999px;
}
.tag-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tag-beige{ background:var(--sand); color:var(--ink); border-color:var(--clay); }

/* ─── Section number ────────────────────────────────────── */
.secnum{
  font-family:'Geist Mono', monospace;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom: 0.75rem;
}

.folio{ font-variant-numeric: tabular-nums lining-nums; }

/* ─── Product card ──────────────────────────────────────── */
.pc{ transition: transform .8s var(--ease); display:block; }
.pc img{ transition: transform 1.8s var(--ease); }
.pc:hover img{ transform: scale(1.04); }

/* ─── Reveal animation ──────────────────────────────────── */
.reveal{ opacity:0; transform: translateY(14px); animation: rise 1.1s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform: translateY(0); } }
.d-1{animation-delay:.06s}.d-2{animation-delay:.2s}.d-3{animation-delay:.36s}.d-4{animation-delay:.52s}.d-5{animation-delay:.68s}

/* ─── Lift line ─────────────────────────────────────────── */
.lift-line{ position:relative; padding-bottom:.1em; }
.lift-line::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform: scaleX(0); transform-origin:right;
  transition: transform .5s var(--ease);
}
.lift-line:hover::after{ transform: scaleX(1); transform-origin:left; }

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--clay); border-radius:9999px; }

::selection{ background:var(--sand); color:var(--ink); }

/* ─── Live dot ──────────────────────────────────────────── */
.live-dot{
  width:.4rem; height:.4rem; border-radius:9999px;
  background:var(--ink); opacity:.6;
  animation: blink 2.4s ease-in-out infinite; display:inline-block;
}
@keyframes blink{ 50%{ opacity:.2; } }

/* ─── Video frame ───────────────────────────────────────── */
.video-frame{ position:relative; overflow:hidden; }
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }

/* ─── Garantias contra overlap ──────────────────────────── */
h1, h2, h3, h4, h5, h6{
  display: block;
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
h1 + p, h2 + p, h3 + p, .secnum + h1, .secnum + h2{
  margin-top: 0.5em;
}
section > div > *{ position: static; }

/* — accent serif italic — */
.font-display em.italic,
.font-serif em.italic{
  font-style: italic;
  font-weight: inherit;
}

/* — focus styles — */
*:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
}

/* ─── STORIES 9:16 GRID ─────────────────────────────────── */
.story-card{
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--paper-2);
}
.story-card video,
.story-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.001);
  transition: transform 2s var(--ease), filter .8s var(--ease);
  filter: saturate(1) contrast(1.02);
}
.story-card:hover video,
.story-card:hover img{
  transform: scale(1.07);
  filter: saturate(1.1) contrast(1.05);
}

.story-overlay{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(14,13,10,.10) 0%,
    rgba(14,13,10,.0) 35%,
    rgba(14,13,10,.0) 60%,
    rgba(14,13,10,.78) 100%);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 1rem;
  transition: background .5s var(--ease);
}
.story-card:hover .story-overlay{
  background: linear-gradient(180deg,
    rgba(14,13,10,.06) 0%,
    rgba(14,13,10,.0) 30%,
    rgba(14,13,10,.0) 55%,
    rgba(14,13,10,.85) 100%);
}

.story-top{
  display:flex; align-items:center; justify-content:space-between;
  color: var(--paper);
}
.story-top .live-dot{ background: var(--paper); opacity:.9; }

.story-bottom{
  color: var(--paper);
  transform: translateY(8px);
  transition: transform .5s var(--ease);
}
.story-card:hover .story-bottom{
  transform: translateY(0);
}

.story-mono{
  font-family:'Geist Mono', monospace;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  opacity:.85;
}

.story-title{
  font-family:'Fraunces', serif;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height:1.1;
  font-weight:400;
  margin-top:.25rem;
  font-variation-settings:"opsz" 96, "SOFT" 60;
}
.story-title em{ font-style:italic; font-variation-settings:"opsz" 96, "SOFT" 100, "WONK" 1; }

.story-play{
  position:absolute;
  top:50%; left:50%; transform: translate(-50%, -50%) scale(.6);
  width:54px; height:54px; border-radius:9999px;
  border:1px solid rgba(250,247,241,.5);
  display:flex; align-items:center; justify-content:center;
  color: var(--paper);
  opacity:0;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  backdrop-filter: blur(4px);
  background: rgba(14,13,10,.18);
  pointer-events:none;
}
.story-card:hover .story-play{
  opacity:1;
  transform: translate(-50%, -50%) scale(1);
}

/* ─── CARROSSEL DE BANNERS ──────────────────────────────── */
.carousel-wrap{ position:relative; overflow:hidden; }
.carousel{
  display:flex;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  position:relative;
  min-height: 64vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.carousel-slide img,
.carousel-slide video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0;
  transform: scale(1.001);
  transition: transform 8s linear;
}
.carousel-slide.is-active img,
.carousel-slide.is-active video{
  transform: scale(1.08);
}
.carousel-slide .scrim{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(14,13,10,.65) 0%, rgba(14,13,10,.4) 40%, rgba(14,13,10,.05) 70%, rgba(14,13,10,.0) 100%);
  z-index:1;
}
.carousel-content{
  position:relative; z-index:2;
  max-width: 640px;
  padding: 4rem 3rem;
  color: var(--paper);
}
.carousel-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Geist Mono', monospace;
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--paper); opacity:.9;
  border:1px solid rgba(250,247,241,.4);
  padding: .35rem .7rem;
  border-radius: 9999px;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(6px);
  background: rgba(14,13,10,.2);
}
.carousel-title{
  font-family:'Fraunces', serif;
  font-size: clamp(2rem, 4.8vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -.02em;
  font-weight: 400;
  margin-bottom: 1.25rem;
  font-variation-settings:"opsz" 144, "SOFT" 30;
}
.carousel-title em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.carousel-desc{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.4;
  opacity:.92;
  margin-bottom: 2rem;
  max-width: 44ch;
  font-weight: 300;
}
.carousel-price{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom: 1.75rem;
  font-family:'Fraunces', serif;
}
.carousel-price .from{
  font-family:'Geist Mono', monospace; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; opacity:.7;
}
.carousel-price .num{
  font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height:1;
  font-variation-settings:"opsz" 96;
}
.carousel-price .strike{
  font-family:'Geist Mono', monospace;
  font-size:.85rem; opacity:.6; text-decoration: line-through;
}

.carousel-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--paper); color:var(--ink);
  padding:.85rem 1.6rem;
  font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-family:'Geist', sans-serif;
  transition: transform .35s var(--ease), background .35s var(--ease);
  border-radius:9999px;
}
.carousel-btn:hover{ transform: translateY(-2px); background: var(--sand); }
.carousel-btn-out{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid rgba(250,247,241,.5); color:var(--paper);
  padding:.8rem 1.6rem;
  font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-family:'Geist', sans-serif;
  transition: background .35s var(--ease), color .35s var(--ease);
  border-radius:9999px;
}
.carousel-btn-out:hover{ background:var(--paper); color:var(--ink); }

/* arrows */
.carousel-arrow{
  position:absolute;
  top:50%; transform: translateY(-50%);
  width:48px; height:48px;
  border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(14,13,10,.45);
  color: var(--paper);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(250,247,241,.2);
  cursor:pointer;
  z-index:10;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.carousel-arrow:hover{ background: rgba(14,13,10,.7); transform: translateY(-50%) scale(1.08); }
.carousel-arrow.left{ left: 1.5rem; }
.carousel-arrow.right{ right: 1.5rem; }

/* dots */
.carousel-dots{
  position:absolute;
  bottom: 1.8rem; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  gap: 8px; z-index:10;
}
.carousel-dot{
  width: 22px; height: 2px;
  background: rgba(250,247,241,.4);
  border:0; cursor:pointer;
  transition: background .3s var(--ease), width .4s var(--ease);
}
.carousel-dot.active{ background: var(--paper); width:42px; }

/* progress bar bottom */
.carousel-progress{
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background: rgba(250,247,241,.1); z-index:10;
}
.carousel-progress-fill{
  height:100%; background: var(--paper);
  width:0; transition: width 6s linear;
}
.carousel-progress-fill.is-running{ width:100%; }

@media (max-width: 768px){
  .carousel-content{ padding: 3rem 1.5rem; }
  .carousel-arrow{ width: 38px; height: 38px; }
  .carousel-arrow.left{ left: .75rem; }
  .carousel-arrow.right{ right: .75rem; }
}