/* ============================================================
   JE PEUX — Páginas de coleção imersivas (Vitacé / Clássica)
   "Explica como ninguém": hero wordmark + capítulos full-bleed.
   ============================================================ */

/* ---- Hero (full-bleed, texto ancorado embaixo-esquerda, foto respira) ---- */
.ic-hero { position: relative; min-height: 100svh; display: grid; align-items: end; justify-items: start; text-align: left; color: var(--je-white); overflow: hidden; margin-top: calc(-1 * (var(--header-h) + var(--announce-h))); }
.ic-hero__media { position: absolute; inset: 0; will-change: transform; transform: scale(1.02); transform-origin: 50% 45%; }
/* scrim leve só no topo (legibilidade do header) e na base (texto) — meio livre */
.ic-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,31,0.30) 0%, rgba(20,16,31,0) 22%, rgba(20,16,31,0) 46%, rgba(20,16,31,0.42) 70%, rgba(20,16,31,0.82) 100%); }
.ic-hero__inner { position: relative; padding: 0 var(--gutter) clamp(3.4rem, 9vh, 7rem); max-width: 760px; will-change: transform, opacity; }
.ic-hero__eyebrow { color: rgba(255,255,255,0.9); }
.ic-hero__mark { font-family: var(--font-logo); font-weight: 700; font-size: var(--fs-display); letter-spacing: 0.06em; line-height: 0.86; margin: 0.4rem 0 0.2rem; padding-left: 0.06em; text-shadow: 0 4px 40px rgba(20,16,31,0.45); }
.ic-hero__tag { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.ic-hero__sub { font-size: var(--fs-lg); color: rgba(255,255,255,0.92); max-width: 46ch; margin: 1.5rem 0 0; text-shadow: 0 2px 24px rgba(20,16,31,0.45); }
.ic-hero .btn { margin-top: 2rem; background: var(--je-white); color: var(--je-purple); border-color: var(--je-white); }
.ic-hero .btn:hover { background: var(--je-yellow); border-color: var(--je-yellow); color: var(--je-purple-ink); }

/* entrada encenada: a foto aparece primeiro, depois o texto sobe em cascata */
.ic-hero__inner > * { opacity: 0; transform: translateY(28px); animation: ic-hero-in 0.95s var(--ease-out) forwards; }
.ic-hero__eyebrow { animation-delay: 0.35s; }
.ic-hero__mark { animation-delay: 0.48s; }
.ic-hero__tag { animation-delay: 0.62s; }
.ic-hero__sub { animation-delay: 0.74s; }
.ic-hero .btn { animation-delay: 0.88s; }
@keyframes ic-hero-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ic-hero__inner > * { opacity: 1; transform: none; animation: none; } }

.ic-scrollcue { position: absolute; bottom: 1.6rem; right: var(--gutter); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.78); animation: ic-cue 2.4s var(--ease) infinite; }
@keyframes ic-cue { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } }

/* ---- Intro / manifesto (branco) ---- */
.ic-intro { text-align: center; }
.ic-intro h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 20ch; margin: 1rem auto 1.4rem; }
.ic-intro p { color: var(--je-ash); max-width: 56ch; margin: 0 auto; font-size: var(--fs-lg); }
.ic-steps-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
.ic-steps-row .chip { background: var(--je-purple-tint); }

/* ---- Capítulo (produto como história) ---- */
.ic-chapter { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 92vh; }
.ic-chapter:nth-child(even) .ic-chapter__media { order: 2; }
.ic-chapter__media { position: relative; min-height: 60vh; }
.ic-chapter__media .ph { position: absolute; inset: 0; }
.ic-chapter__step { position: absolute; top: 1.8rem; left: 2rem; z-index: 2; font-family: var(--font-logo); font-weight: 700; font-size: clamp(3rem, 7vw, 6rem); color: rgba(46,36,71,0.14); line-height: 1; }
.ic-chapter__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1rem; padding: clamp(2.5rem, 6vw, 6rem); }
.ic-chapter__body .eyebrow { color: var(--je-purple); }
.ic-chapter__name { font-size: var(--fs-3xl); }
.ic-chapter__sub { color: var(--je-ash); font-size: var(--fs-lg); max-width: 42ch; }
.ic-chapter__meta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }
.ic-chapter__price { font-family: var(--font-head); font-size: 1.6rem; color: var(--je-purple); }
.ic-chapter__vol { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--je-ash); }
.ic-chapter__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ic-chapter__bullets { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.45rem; }
.ic-chapter__bullets li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); color: var(--je-ash); }
.ic-chapter__bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--je-lime); }

/* ---- Banda de ciência (dark + card de vidro) ---- */
.ic-science { position: relative; min-height: 80vh; display: grid; place-items: center; color: var(--je-white); overflow: hidden; }
.ic-science .ph { position: absolute; inset: 0; }
.ic-science .ph::after { content: ""; position: absolute; inset: 0; background: rgba(20,16,31,0.55); }
.ic-science__card { position: relative; width: min(560px, 88vw); text-align: center; padding: clamp(2rem, 5vw, 3.2rem); background: rgba(46,36,71,0.4); backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-lg); }
.ic-science__card h2 { font-size: var(--fs-2xl); margin-bottom: 0.8rem; }
.ic-science__card p { color: rgba(255,255,255,0.85); }

/* ---- Grid de extras / fechamento ---- */
.ic-extras { background: var(--je-grey-bg); }
.ic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ic-cta { text-align: center; }
.ic-cta h2 { font-size: var(--fs-3xl); margin-bottom: 1.4rem; }

/* ============================================================
   TEMPLATE TIMEX (scrollytelling) — blocos adicionais
   nav sticky+scroll-spy · scroll-in text · staggered · h-scroll · grid
   ============================================================ */

/* âncoras não ficam escondidas sob header + nav sticky ao pular */
.ic-scrollin, .ic-intro, .ic-chapter, .ic-science { scroll-margin-top: calc(var(--header-h) + 64px); }

/* ---- content_sticky_nav + scroll-spy ---- */
.ic-nav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-line); }
.ic-nav__inner { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.ic-nav__brand { font-family: var(--font-head); font-size: 1.35rem; color: var(--je-purple); letter-spacing: 0.02em; }
.ic-nav__links { display: flex; gap: 1.7rem; flex: 1; }
.ic-nav__links a { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--je-ash); position: relative; padding: 6px 0; transition: color var(--dur-fast); }
.ic-nav__links a.is-active { color: var(--je-purple); }
.ic-nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--je-purple); transition: right var(--dur) var(--ease); }
.ic-nav__links a.is-active::after { right: 0; }
.ic-nav__cta { height: 40px; padding-inline: 1.4rem; font-size: 0.95rem; }
@media (max-width: 760px) { .ic-nav__links { display: none; } .ic-nav__inner { justify-content: space-between; } }

/* ---- sticky_scroll_in_text (mídia presa, texto entra) — agora sobre CANVAS DE MARCA ---- */
.ic-scrollin { position: relative; background: var(--canvas-grad); color: var(--canvas-ink); overflow: hidden; isolation: isolate; }
.ic-scrollin__media { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.ic-scrollin__media::after { content: none; }
.ic-scrollin__steps { position: relative; margin-top: -100vh; z-index: 2; }
.ic-scrollin__step { min-height: 100vh; display: flex; align-items: center; padding: 0 clamp(1.5rem, 8vw, 9rem); }
.ic-scrollin__card { max-width: 560px; color: var(--canvas-ink); }
.ic-scrollin__card .eyebrow { color: var(--canvas-eyebrow); display: block; }
.ic-scrollin__card h2 { font-size: var(--fs-3xl); line-height: 0.94; margin: 0.6rem 0 1rem; }
.ic-scrollin__card p { color: color-mix(in srgb, var(--canvas-ink) 82%, transparent); font-size: var(--fs-lg); }

/* ---- staggered_media (grade escalonada editorial) ---- */
.ic-stagger { padding-block: var(--section-pad); }
.ic-stagger__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); align-items: start; }
.ic-stagger figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; position: relative; }
.ic-stagger figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.ic-stagger figure:hover img { transform: scale(1.04); }
.ic-stagger__a { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.ic-stagger__b { grid-column: 7 / 13; aspect-ratio: 16 / 10; margin-top: 3.5rem; }
.ic-stagger__c { grid-column: 2 / 7; aspect-ratio: 16 / 11; }
.ic-stagger__d { grid-column: 8 / 12; aspect-ratio: 3 / 4; margin-top: -3rem; }
@media (max-width: 760px) { .ic-stagger__grid { grid-template-columns: 1fr 1fr; } .ic-stagger figure { grid-column: auto !important; margin: 0 !important; } }

/* ---- horizontal_scroll_carousel (track arrastável) ---- */
.ic-hscroll { padding-block: var(--section-pad); overflow: hidden; }
.ic-hscroll__head { max-width: var(--maxw); margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); padding-inline: var(--gutter); }
.ic-hscroll__head h2 { font-size: var(--fs-2xl); }
.ic-hscroll__track { display: flex; gap: 1.2rem; overflow-x: auto; padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; }
.ic-hscroll__track::-webkit-scrollbar { display: none; }
.ic-hscroll__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ic-hscroll__slide { flex: 0 0 clamp(280px, 32vw, 420px); scroll-snap-align: start; color: inherit; }
.ic-hscroll__media { aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; position: relative; }
.ic-hscroll__cap { padding-top: 0.9rem; }
.ic-hscroll__cap h3 { font-size: var(--fs-xl); }
.ic-hscroll__cap p { color: var(--je-ash); font-size: var(--fs-sm); margin-top: 0.2rem; }

@media (max-width: 900px) {
  .ic-chapter { grid-template-columns: 1fr; }
  .ic-chapter:nth-child(even) .ic-chapter__media { order: 0; }
  .ic-grid { grid-template-columns: 1fr; }
  .ic-scrollin__media { height: 100svh; }
}

/* ============================================================
   CANVAS DE MARCA + WATERMARK DE LINHA (o diferencial nº1)
   Superfície de cor de marca contínua, com padrão de skincare em
   traço por trás. Cor do watermark = var(--wm-ink) por linha.
   ============================================================ */
.ic-canvas { position: relative; background: var(--canvas-grad); color: var(--canvas-ink); overflow: hidden; isolation: isolate; }
.ic-canvas .eyebrow { color: var(--canvas-eyebrow); }
.ic-canvas h2, .ic-canvas h3 { color: var(--canvas-ink); }
.ic-canvas p { color: color-mix(in srgb, var(--canvas-ink) 82%, transparent); }
/* tile repetido do watermark (recolorido via mask + background-color) */
.ic-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--wm-ink); opacity: var(--wm-opacity);
  -webkit-mask: url(../img/pattern/skincare-tile.svg) 0 0 / 232px 232px repeat;
          mask: url(../img/pattern/skincare-tile.svg) 0 0 / 232px 232px repeat;
}
/* 1 grafismo gigante ancorado à direita (molécula), tinta da linha */
.ic-canvas__hero { position: absolute; top: 50%; right: -6vw; translate: 0 -50%; z-index: -1; pointer-events: none; width: 46vw; max-width: 700px; aspect-ratio: 1; opacity: 0.16; color: var(--wm-ink); }
.ic-canvas__hero svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  .ic-canvas::before { animation: wm-drift 90s linear infinite; }
}
@keyframes wm-drift { to { background-position: 232px 232px; } }

/* ---- product spotlight: card + vídeo sobrepondo o canvas ---- */
.ic-spotlight { padding-bottom: clamp(4rem, 9vw, 8rem); }
.ic-spotlight__lifestyle { height: 46vh; min-height: 320px; position: relative; }
.ic-spotlight__stage { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: -14vh; position: relative; z-index: 2; }
.ic-spotlight__card { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,0.45); margin: 0; background: #EEEEF1; }
.ic-spotlight__card img, .ic-spotlight__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ic-spotlight__mute { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.28); backdrop-filter: blur(8px); color: #fff; cursor: pointer; z-index: 2; }
.ic-spotlight__copy { color: var(--canvas-ink); }
.ic-spotlight__copy h2 { font-size: var(--fs-3xl); line-height: 0.94; margin: 0.5rem 0 1rem; }
.ic-spotlight__copy p { max-width: 40ch; }
.ic-spotlight__copy .btn { margin-top: 1.4rem; }
@media (max-width: 900px) { .ic-spotlight__stage { grid-template-columns: 1fr; margin-top: -20vh; } }

/* ---- showcase de produto sobre canvas ESCURO + card espiando (INDIGLO-like) ---- */
.ic-showcase { background: var(--je-purple); padding: 6px; }             /* moldura fina de marca */
.ic-showcase__inner { position: relative; background: var(--canvas-dark); min-height: 82vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; padding: clamp(2.5rem, 6vw, 6rem); padding-right: 0; overflow: hidden; color: var(--canvas-ink); }
.ic-showcase__inner::before { opacity: 0.06; }
.ic-showcase__copy { max-width: 34ch; z-index: 2; }
.ic-showcase__copy .eyebrow { color: var(--canvas-eyebrow); }
.ic-showcase__copy h2 { font-size: var(--fs-2xl); color: var(--canvas-ink); margin: 0.5rem 0 1rem; }
.ic-showcase__copy p { color: color-mix(in srgb, var(--canvas-ink) 82%, transparent); }
.ic-showcase__cta { margin-top: 1.4rem; background: #fff; color: var(--je-purple-ink); border-color: #fff; }
.ic-showcase__hero { position: relative; height: 68vh; }
.ic-showcase__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ic-showcase__peek { position: absolute; right: -80px; top: 50%; translate: 0 -50%; width: 290px; background: #fff; border-radius: 8px; padding: 14px; box-shadow: 0 30px 70px rgba(0,0,0,0.5); transition: right var(--dur) var(--ease); color: var(--je-ink); z-index: 3; text-align: left; }
.ic-showcase__peek:hover { right: 22px; }
.ic-showcase__peek .pmedia { aspect-ratio: 1; border-radius: 6px; margin-bottom: 0.6rem; }
.ic-showcase__peek h3 { font-size: var(--fs-xl); color: var(--je-ink); }
.ic-showcase__peek p { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--je-ash); }
@media (max-width: 900px) { .ic-showcase__inner { grid-template-columns: 1fr; padding-right: clamp(2.5rem, 6vw, 6rem); } .ic-showcase__hero { height: 44vh; } .ic-showcase__peek { display: none; } }