/* ── SKYNTRA Design System ──────────────────────────────── */
:root {
  --black: #0A0A0A;
  --white: #F5F5F0;
  --red: #C8102E;
  --red-dark: #8B0D20;
  --gray-industrial: #1A1A1A;
  --gray-mid: #2E2E2E;       /* bordes/lineas sutiles (no para texto) */
  --gray-text: #8C887E;      /* labels mono pequeñas (legible sobre negro) */
  --text-soft: #C4C1B8;      /* TEXTO secundario legible (párrafos, respuestas) */
  --gold: #C9A84C;
  --font-display: 'Bebas Neue', cursive;
  --font-mono: 'Space Mono', monospace;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: clip; }   /* nunca scroll horizontal (clip no rompe el scroll suave) */
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-mono);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Custom Cursor ─────────────────────────────────────── */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.18s ease, height 0.18s ease;
  will-change: transform;
}
.cursor.expanded { width: 28px; height: 28px; }

/* ── Scroll Progress ───────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  z-index: 9998;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ── Fixed Header ──────────────────────────────────────── */
.sk-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  pointer-events: none;
}
.sk-header > * { pointer-events: all; }

.sk-logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--white);
  text-decoration: none;
}

.sk-btn-coming {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--red);
  border: 1px solid var(--red);
  color: #fff;
  cursor: not-allowed;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  padding: 0.55rem 1.4rem;
  outline: none;
}
/* brillo tornasol sutil que se desplaza */
.sk-btn-coming::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,0.55) 34%, rgba(120,200,255,0.45) 44%, rgba(255,120,200,0.45) 54%, transparent 68%);
  background-size: 250% 100%;
  mix-blend-mode: screen;
  animation: sk-sheen 3.4s linear infinite;
}
@keyframes sk-sheen { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }

/* ── Section Base ──────────────────────────────────────── */
.sk-section { position: relative; }

.ch-num {
  position: absolute;
  top: 2rem; right: 2rem;
  font-family: var(--font-display);
  font-size: 18vw;
  color: var(--white);
  opacity: 0.03;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
#hero {
  --hbg: 1;
  height: 100dvh;
  background:
    radial-gradient(calc(60% * var(--hbg)) calc(70% * var(--hbg)) at 82% 42%, rgba(200,16,46,0.28), transparent 60%),
    radial-gradient(calc(40% * var(--hbg)) calc(50% * var(--hbg)) at 8% 90%, rgba(200,16,46,0.12), transparent 60%),
    linear-gradient(180deg, #120406 0%, var(--black) 55%);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow: hidden;
  position: relative;
}

/* halo rojo detrás del envase para darle presencia */
#hero .hero-zona-b::before {
  content: '';
  position: absolute;
  width: calc(78% * var(--hbg, 1));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.55), rgba(200,16,46,0) 68%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
#hero .hero-zona-b { position: relative; }
#hero.no-halo .hero-zona-b::before { display: none; }
.product-placeholder { z-index: 1; }

.hero-zona-a {
  grid-column: 1 / 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 2rem 3rem 4rem;
}

.hero-zona-b {
  grid-column: 8 / 13;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 3rem 3rem 2rem;
}

.title-mask { overflow: hidden; line-height: 0.9; }

.title-line {
  display: block;
  font-family: var(--font-display);
  font-size: 12vw;
  line-height: 0.9;
  color: var(--white);
}
.title-line.red { color: var(--red); }

.hero-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-soft);
  letter-spacing: 0.15em;
  margin-top: 1.75rem;
  text-transform: uppercase;
}

.claims-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: calc(0.6rem * var(--claim-scale, 1));
  color: var(--text-soft);
  letter-spacing: 0.1em;
}

.sep { color: var(--gray-mid); padding: 0 0.15rem; }

/* ── Fila de compra del hero (look tienda single-product) ── */
.hero-shop {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: 2rem; flex-wrap: wrap;
}
.hero-price {
  font-family: var(--font-display); font-size: 1.7rem;
  color: var(--white); letter-spacing: 0.03em;
}
.hero-buy {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  background: var(--red); color: #fff; text-decoration: none;
  padding: 0.85rem 1.9rem; border: 1px solid var(--red);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.hero-buy:hover { background: transparent; color: var(--red); transform: translateY(-1px); }
.hero-buy.is-soon {
  background: transparent; color: var(--gray-mid); border-color: var(--gray-mid);
  cursor: default; pointer-events: none; letter-spacing: 0.22em;
}
.hero-price-note {
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--gray-text);
  letter-spacing: 0.12em; flex-basis: 100%;
}

.product-placeholder {
  position: relative;
  width: 100%;
  max-width: calc(380px * var(--hms, 1));   /* --hms lo setea el admin (solo PC) */
  aspect-ratio: 1 / 1;
  border: 1px solid var(--gray-mid);
  background: var(--gray-industrial);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
/* la imagen del envase "respira" suavemente */
.product-placeholder.has-image {
  animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ── Hero slider (imagen o mp4, estilo floema) ───────────── */
.hero-media { position: relative; overflow: hidden; }

.hero-slides { position: absolute; inset: 0; z-index: 0; }

.hero-slide {
  position: absolute; inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hero-dots {
  position: absolute;
  bottom: 0.7rem; left: 0; right: 0;
  display: flex; gap: 0.4rem; justify-content: center;
  z-index: 2;
}
.hero-dot {
  width: 18px; height: 2px;
  background: rgba(245,245,240,0.3);
  border: 0; padding: 0; cursor: pointer;
  transition: background 0.3s;
}
.hero-dot.is-active { background: var(--red); }

/* badge / label por encima del slider */
.hero-media .product-badge,
.hero-media .product-label { position: relative; z-index: 2; }
.hero-media .product-badge { position: absolute; top: 1rem; right: 1rem; }

.product-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--red);
  letter-spacing: 0.12em;
}

.product-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gray-mid);
  letter-spacing: 0.12em;
}

/* ── Imagen cargada desde el admin sobre un placeholder ──── */
.has-image { color: transparent; }
.product-placeholder.has-image {
  border-color: transparent;
  background-color: transparent;
}
.product-placeholder.has-image .product-label { display: none; }
.ch02-visual.has-image,
.cmp-media.has-image,
.ch04-card-img.has-image,
.moment-visual.has-image { border-color: transparent; }

/* ── Fondo ROJO del hero (toggle desde el admin) ──────────
   Inspirado en las fotos del envase: el panel del producto
   se vuelve un rojo intenso con profundidad radial. */
#hero.hero-red .hero-zona-b {
  background: radial-gradient(115% 90% at 50% 38%,
    #d6141f 0%, #b80e18 52%, #8b0d20 100%);
}
#hero.hero-red .product-placeholder {
  border-color: rgba(255,255,255,0.12);
  background-color: rgba(0,0,0,0.06);
}
#hero.hero-red .product-badge { color: var(--white); }
#hero.hero-red .product-label { color: rgba(255,255,255,0.7); }

/* Cursor personalizado desactivado desde settings */
body.cursor-off { cursor: auto; }
body.cursor-off .cursor { display: none; }

/* Etiquetas en las esquinas inferiores (ya NO cruzan el hero) */
.hero-deco-l {
  position: absolute;
  bottom: 3.5rem; left: 4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gray-text);
  pointer-events: none;
  z-index: 2;
}

.hero-deco-r {
  position: absolute;
  bottom: 3.7rem; right: 3rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-text);
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 2;
}

/* keyframe del marquee (lo usa el bloque "barra") */
@keyframes hero-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════
   CHAPTER 01 — THE MARK
   ══════════════════════════════════════════════════════════ */
#ch01 {
  background: var(--black);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 3rem;
}

.ch01-content {
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 960px;
  width: 100%;
}

.ch01-kicker {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--red);
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
}

.ch01-headline {
  font-family: var(--font-display);
  font-size: 8vw;
  color: var(--white);
  line-height: 0.9;
}

.ch01-sub {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gray-text);
  margin-top: 2.5rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.skin-lines-wrap {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
}

/* ══════════════════════════════════════════════════════════
   CHAPTER 02 — THE HEAT
   ══════════════════════════════════════════════════════════ */
#ch02 {
  background: #0D0505;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 7rem 4rem;
}

.ch02-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.ch02-left { flex: 1; min-width: 0; }

.ch02-name {
  font-family: var(--font-display);
  font-size: 6vw;
  color: var(--white);
  line-height: 0.9;
}

.ch02-phase {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--red);
  letter-spacing: 0.3em;
  margin: 1.25rem 0;
}

.ch02-desc {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gray-text);
  max-width: 440px;
  line-height: 1.75;
}

.ch02-visual {
  flex: 0 0 auto;
  width: min(360px, 100%);
  height: 360px;
  border: 1px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gray-text);
  letter-spacing: 0.12em;
}

/* ══════════════════════════════════════════════════════════
   CHAPTER 04 — THE SHIELD
   ══════════════════════════════════════════════════════════ */
#ch04 {
  background: var(--gray-industrial);
  min-height: 150vh;
  padding: 7rem 4rem 7rem;
}

.ch04-title {
  font-family: var(--font-display);
  font-size: 10vw;
  color: var(--white);
  text-align: center;
  margin-bottom: 5rem;
  line-height: 0.9;
}

.ch04-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ch04-card {
  border: 1px solid var(--gray-mid);
  padding: 2rem;
  background: transparent;
  transition: border-color 0.3s ease;
  cursor: default;
}

.ch04-card:hover { border-color: var(--red); }

.ch04-card-img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--gray-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-text);
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.ch04-oil-nm {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--white);
  line-height: 0.9;
}

.ch04-oil-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--red);
  letter-spacing: 0.22em;
  margin: 0.4rem 0 0.75rem;
}

.ch04-oil-desc {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gray-text);
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════
   CHAPTER 05 — THE GUARDIANS
   ══════════════════════════════════════════════════════════ */
#ch05 {
  background: var(--black);
  min-height: 150vh;
  padding: 7rem 4rem 7rem;
}

.ch05-title {
  font-family: var(--font-display);
  font-size: 8vw;
  color: var(--white);
  margin-bottom: 4rem;
  line-height: 0.9;
}

.ch05-cards { display: flex; gap: 1.5rem; }

.ch05-card {
  flex: 1;
  min-width: 0;
  aspect-ratio: 3 / 4;
  background: var(--gray-industrial);
  border: 1px solid var(--gray-mid);
  position: relative;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color 0.3s;
  overflow: hidden;
  cursor: default;
}

.ch05-card:hover { border-color: var(--red); }

.ch05-card-num {
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--font-display);
  font-size: 4vw;
  color: var(--white);
  opacity: 0.07;
  line-height: 1;
  transition: opacity 0.3s;
}

.ch05-card:hover .ch05-card-num { opacity: 0.25; }

.ch05-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-mid);
  letter-spacing: 0.1em;
}

.ch05-info { position: relative; z-index: 2; }

.ch05-botanical {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--gray-text);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.ch05-common {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--white);
  line-height: 1;
}

.ch05-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--gray-text);
  margin: 0.25rem 0 0.65rem;
}

.ch05-tag {
  display: inline-block;
  border: 1px solid var(--red);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  padding: 0.2rem 0.6rem;
}

/* ══════════════════════════════════════════════════════════
   CHAPTER 07 — SESSION TO DAILY (PINNED HORIZONTAL)
   ══════════════════════════════════════════════════════════ */
#ch07 {
  background: var(--black);
  height: 100vh;
  overflow: hidden;
}

.ch07-inner {
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.ch07-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 8vw;
  will-change: transform;
}

.ch07-timeline-bar {
  position: absolute;
  bottom: 34%;
  left: 8vw;
  height: 1px;
  background: var(--gray-mid);
  pointer-events: none;
  z-index: 0;
}

.moment {
  flex: 0 0 72vw;
  padding: 0 4vw;
  position: relative;
  z-index: 1;
}

.moment-day {
  font-family: var(--font-display);
  font-size: 5.5vw;
  color: var(--white);
  line-height: 0.9;
  margin-bottom: 0.4rem;
}

.moment-step {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gray-text);
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
}

.moment-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gray-text);
  max-width: 300px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.moment-visual {
  width: 200px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-text);
  letter-spacing: 0.1em;
}

.moment-visual.day-0  { border: 1px solid var(--red); }
.moment-visual.day-7  { border: 1px solid var(--gray-mid); }
.moment-visual.day-30 { border: 1px solid rgba(245,245,240,0.6); }
.moment-visual.year-5 { border: 1px solid var(--gold); color: var(--gold); }

/* ══════════════════════════════════════════════════════════
   CHAPTER 08 — CTA
   ══════════════════════════════════════════════════════════ */
#ch08 {
  background: var(--black);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 5rem;
  border-top: 1px solid var(--gray-mid);
}

.ch08-inner { max-width: 800px; }

.ch08-kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--red);
  letter-spacing: 0.3em;
  margin-bottom: 2.5rem;
}

.ch08-headline {
  font-family: var(--font-display);
  font-size: 10vw;
  color: var(--white);
  line-height: 0.9;
  margin-bottom: 3.5rem;
}

.ch08-formats {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.ch08-format {
  border: 1px solid var(--gray-mid);
  padding: 2.5rem 3rem;
  min-width: 180px;
  transition: border-color 0.3s;
}

.ch08-format-ml {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--white);
  line-height: 1;
}

.ch08-format-desc {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-text);
  letter-spacing: 0.18em;
  margin-top: 0.5rem;
}

.ch08-cta {
  display: inline-block;
  border: 1px solid var(--gray-mid);
  color: var(--gray-mid);
  cursor: not-allowed;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  padding: 1rem 3.5rem;
  background: transparent;
  outline: none;
}

.ch08-footnote {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray-mid);
  letter-spacing: 0.12em;
  margin-top: 2.5rem;
}

/* ── Footer ────────────────────────────────────────────── */
footer {
  background: var(--black);
  border-top: 1px solid var(--gray-mid);
  padding: 3.5rem 4rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
/* 2 columnas: newsletter (izq) | proteam + redes (der) */
.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.footer-col { min-width: 0; }
.footer-news { text-align: left; }
.footer-pro {
  display: flex; flex-direction: column; gap: 1.8rem;
  align-items: flex-start;
  padding-left: clamp(0rem, 4vw, 3rem);
  border-left: 1px solid var(--gray-mid);
}
.footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-mid);
}

/* ── Suscripción / newsletter (columna izquierda) ──────── */
.footer-sub { text-align: left; }
.footer-sub-kicker {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.35em; color: var(--red); text-transform: uppercase;
}
.footer-sub-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1;
  margin: 0.6rem 0 0.5rem; color: var(--white);
}
.footer-sub-text {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-soft); letter-spacing: 0.06em; margin-bottom: 1.5rem;
}
.footer-sub-form { display: flex; gap: 0.5rem; max-width: 440px; margin: 0; }
.footer-sub-input {
  flex: 1; min-width: 0; background: transparent;
  border: 1px solid var(--gray-mid); color: var(--white);
  padding: 0.9rem 1rem; font-family: var(--font-mono); font-size: 0.8rem;
  transition: border-color 0.2s;
}
.footer-sub-input::placeholder { color: var(--gray-text); }
.footer-sub-input:focus { outline: none; border-color: var(--red); }
.footer-sub-btn {
  background: var(--red); color: #fff; border: 0;
  padding: 0.9rem 1.5rem; font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.16em; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s; white-space: nowrap;
}
.footer-sub-btn:hover { background: var(--white); color: var(--red); transform: translateY(-1px); }
.footer-sub-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.footer-sub-msg { font-family: var(--font-mono); font-size: 0.68rem; margin-top: 0.85rem; min-height: 1em; letter-spacing: 0.05em; }
.footer-sub-msg.ok  { color: #6ee7a8; }
.footer-sub-msg.err { color: var(--red); }

/* ── Footer: PRO TEAM (columna derecha) ─────────────────── */
.footer-proteam {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
}
.footer-proteam-text {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  color: var(--text-soft); text-transform: uppercase;
}
/* Redes sociales (debajo del proteam) */
.footer-redes { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.footer-redes-label {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.25em;
  color: var(--gray-text); text-transform: uppercase;
}
.footer-redes .footer-social { position: static; transform: none; left: auto; bottom: auto; display: flex; gap: 0.7rem; flex-wrap: wrap; }
/* si aún no hay redes configuradas, ocultamos el bloque (el espacio queda listo) */
.footer-redes:has(.footer-socials.is-off) { display: none; }

/* ── Redes sociales: icono + nombre (hero + footer) ─────── */
.hero-socials, .footer-socials { display: flex; }
.hero-socials.is-off, .footer-socials.is-off { display: none; }
.soc-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--white);
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  transition: color 0.2s;
}
.soc-link:hover { color: var(--red); }
.soc-ico-svg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--gray-text); color: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.soc-ico-svg svg { width: 16px; height: 16px; display: block; }
.soc-link:hover .soc-ico-svg { background: var(--red); border-color: var(--red); color: #fff; }

/* Hero: redes centradas horizontalmente en la zona roja, abajo */
.hero-socials {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3;
  flex-direction: row; align-items: center; justify-content: center; gap: 1.3rem;
}
/* Footer: redes en fila/columna dentro de la columna derecha */
.footer-socials { flex-direction: column; gap: 0.7rem; }

/* footer izquierda: form arriba, mensaje, y el texto debajo */
.footer-news .footer-sub-kicker { display: block; margin-top: 1.6rem; }
.footer-news .footer-sub-heading { font-size: clamp(1.3rem, 2.8vw, 1.9rem); }
.footer-proteam-btn {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.1em;
  background: transparent; color: var(--white);
  border: 1px solid var(--white); padding: 0.7rem 1.6rem; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.footer-proteam-btn:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-1px); }
/* segundo botón: distribuidores (más discreto, debajo del pro team) */
.footer-distrib-btn { font-size: 0.92rem; border-color: var(--gray-mid); color: var(--text-soft); }
.footer-distrib-btn:hover { color: #fff; }

/* ── Pantalla PRO TEAM (modal de postulación) ───────────── */
.proteam {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(8, 5, 6, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.proteam.open { opacity: 1; visibility: visible; }
.proteam-panel {
  position: relative; width: min(640px, 100%);
  max-height: 90vh; overflow-y: auto;
  background: var(--black); border: 1px solid var(--gray-mid);
  padding: 2.5rem clamp(1.4rem, 4vw, 2.8rem);
  transform: translateY(16px); transition: transform 0.3s ease;
}
.proteam.open .proteam-panel { transform: translateY(0); }
.proteam-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--gray-mid);
  color: var(--white); font-size: 0.9rem; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.proteam-close:hover { background: var(--red); border-color: var(--red); }
.proteam-kicker { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.35em; color: var(--red); text-transform: uppercase; }
.proteam-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1; margin: 0.6rem 0 0.5rem; color: var(--white); }
.proteam-intro { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; color: var(--text-soft); margin-bottom: 1.8rem; }
.proteam-form { display: flex; flex-direction: column; gap: 1rem; }
.pt-row { display: flex; gap: 1rem; }
.pt-field { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--gray-text); text-transform: uppercase; }
.pt-field input, .pt-field textarea {
  background: transparent; border: 1px solid var(--gray-mid); color: var(--white);
  padding: 0.75rem 0.85rem; font-family: var(--font-mono); font-size: 0.82rem;
  text-transform: none; letter-spacing: normal; transition: border-color 0.2s;
}
.pt-field input:focus, .pt-field textarea:focus { outline: none; border-color: var(--red); }
.pt-field textarea { resize: vertical; min-height: 90px; }
.proteam-submit {
  margin-top: 0.6rem; background: var(--red); color: #fff; border: 0;
  padding: 1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.proteam-submit:hover { background: var(--white); color: var(--red); }
.proteam-submit:disabled { opacity: 0.5; cursor: default; }
.proteam-msg { font-family: var(--font-mono); font-size: 0.7rem; min-height: 1em; letter-spacing: 0.04em; }
.proteam-msg.ok  { color: #6ee7a8; }
.proteam-msg.err { color: var(--red); }
@media (max-width: 600px) { .pt-row { flex-direction: column; } }

.footer-logo {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--gray-text);
}

.footer-claim {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-soft);
  letter-spacing: 0.15em;
}

.footer-legal {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--gray-text);
  letter-spacing: 0.08em;
  text-align: right;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-legal-links a { color: var(--text-soft); text-decoration: none; transition: color 0.2s; }
.footer-legal-links a:hover { color: var(--red); }

/* ── Sección BLOG / Guías del home ── */
/* Carrusel horizontal (scroll lateral): una sola fila, sin disposición rara */
.blog-grid { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 1.2rem; width: 100%; max-width: 1120px; margin: 1.6rem auto 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: .3rem .1rem 1rem; scrollbar-width: thin; scrollbar-color: var(--gray-mid) transparent; }
.blog-grid::-webkit-scrollbar { height: 6px; }
.blog-grid::-webkit-scrollbar-track { background: transparent; }
.blog-grid::-webkit-scrollbar-thumb { background: var(--gray-mid); border-radius: 3px; }
.blog-grid::-webkit-scrollbar-thumb:hover { background: var(--red); }
.blog-card { flex: 0 0 320px; max-width: 320px; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--gray-mid, #2E2E2E); background: rgba(20,20,20,.4); border-radius: 10px; overflow: hidden; transition: border-color .25s, transform .25s; color: var(--white, #F5F5F0); }
.blog-card:hover { border-color: var(--red); transform: translateY(-3px); }
.blog-card-img { aspect-ratio: 16 / 9; background: #141414 center / cover no-repeat; display: block; }
.blog-card-t { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .02em; line-height: 1.05; padding: 1rem 1.1rem .35rem; text-align: left; }
.blog-card-d { font-family: var(--font-mono); font-size: .78rem; line-height: 1.6; color: var(--text-soft); padding: 0 1.1rem 1.1rem; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .blog-card { flex-basis: 80%; max-width: 80%; } }
.blog-all { display: inline-block; margin-top: 1.6rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); text-decoration: none; }
.blog-all:hover { color: var(--white); }
/* Sección de blog en el home: título/kicker/sub/cards centrados como los chapters. */
#blog { text-align: center; }
#blog .merch-inner { max-width: 1000px; width: 100%; margin: 0 auto; }
#blog .merch-kicker, #blog .merch-title, #blog .merch-sub { width: 100%; }
#blog .merch-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
/* Desktop: además centrada verticalmente y a pantalla completa (como #ch08). */
html:not(.is-mobile) #blog { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 6rem 2rem 5rem; }

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes glitch-a {
  0%, 88%, 100% { transform: translateX(0);   opacity: 0; }
  90%           { transform: translateX(-4px); opacity: 0.9; }
  92%           { transform: translateX(4px);  opacity: 0.9; }
  94%           { transform: translateX(-2px); opacity: 0.9; }
  96%           { transform: translateX(0);    opacity: 0;   }
}

@keyframes glitch-b {
  0%, 82%, 100% { transform: translateX(0);  opacity: 0; }
  84%           { transform: translateX(4px); opacity: 0.7; }
  86%           { transform: translateX(-4px);opacity: 0.7; }
  88%           { transform: translateX(0);   opacity: 0;   }
}

/* ══════════════════════════════════════════════════════════
   HEADER ACTIONS + THEME TOGGLE
   ══════════════════════════════════════════════════════════ */
.sk-header-actions { display: flex; align-items: center; gap: 0.8rem; }

.sk-theme-toggle {
  background: transparent;
  border: 1px solid var(--gray-mid);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sk-theme-toggle:hover { border-color: var(--red); color: var(--red); }

/* Ocultar capítulos / secciones desactivadas desde el admin */
.ch-off { display: none !important; }

/* ══════════════════════════════════════════════════════════
   VARIACIONES DE FONDO (sutiles, adaptan al tema vía var(--black))
   ══════════════════════════════════════════════════════════ */
#ch01 { background: radial-gradient(120% 80% at 50% 0%, rgba(200,16,46,0.07), transparent 55%), var(--black); }
#ch02 { background: linear-gradient(180deg, rgba(200,16,46,0.10), transparent 40%), var(--black); }
#ch03 { background: radial-gradient(90% 60% at 0% 30%, rgba(200,16,46,0.05), transparent 55%), var(--black); }
#ch05 { background: radial-gradient(90% 60% at 100% 0%, rgba(200,16,46,0.06), transparent 55%), var(--black); }
#ch08 { background: linear-gradient(180deg, rgba(200,16,46,0.06), var(--black) 55%); }

/* ══════════════════════════════════════════════════════════
   VIDEO
   ══════════════════════════════════════════════════════════ */
#video {
  background: linear-gradient(180deg, var(--black), rgba(200,16,46,0.06));
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 7rem 4rem;
}
.video-inner { width: 100%; max-width: 1000px; text-align: center; }
.video-kicker {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--red); letter-spacing: 0.3em; margin-bottom: 2rem;
}
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--gray-mid); background: #000; overflow: hidden;
}
.video-frame iframe, .video-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0;
}
.video-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--gray-text); letter-spacing: 0.15em;
}
.video-caption {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--gray-text); letter-spacing: 0.2em; margin-top: 1.5rem;
}

/* ══════════════════════════════════════════════════════════
   HOLO HOVER — las imágenes siguen el mouse (estilo pokémon)
   + patrón del logo SKYNTRA que brilla tornasol
   ══════════════════════════════════════════════════════════ */
body.fx-on .holo-on {
  position: relative; overflow: hidden; isolation: isolate;
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
body.fx-on .holo-on.holo-active { transition: transform 0.08s ease-out; }

/* Glare: luz blanca que sigue el puntero */
body.fx-on .holo-on::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.55), rgba(255,255,255,0) 42%);
  mix-blend-mode: overlay; opacity: var(--pfc, 0); transition: opacity 0.3s;
}

/* Patrón del logo holográfico: la MÁSCARA es el logo; el degradado tornasol
   se mueve con el puntero y solo se ve dentro de la forma del logo */
body.fx-on .holo-on::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, #ec4899, #8b5cf6 20%, #22d3ee 40%, #34d399 60%, #fbbf24 80%, #ec4899);
  background-size: 300% 300%;
  background-position: var(--bgx, 50%) var(--bgy, 50%);
  -webkit-mask-image: var(--logo-mask); mask-image: var(--logo-mask);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: var(--holo-size, 110px) var(--holo-rep, 130px);
          mask-size: var(--holo-size, 110px) var(--holo-rep, 130px);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--pfc, 0) * 0.9); transition: opacity 0.3s;
}

/* ══════════════════════════════════════════════════════════
   MODO CLARO — se invierte la paleta vía variables
   ══════════════════════════════════════════════════════════ */
body.light {
  --black: #F3F1EA;
  --white: #14110F;
  --gray-industrial: #E7E4DB;
  --gray-mid: #C7C2B6;       /* bordes claros */
  --gray-text: #6E6A60;      /* labels mono (legible sobre crema) */
  --text-soft: #46433C;      /* texto secundario legible */
  --gold: #8A6E18;
}
/* transición suave de TONO al cambiar claro/oscuro (sin "reset") */
body, .sk-section, #hero, footer, .sk-header, .blk, .proteam-panel {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
body.light #ch04 { background: var(--gray-industrial); }
body.light #hero {
  background:
    radial-gradient(60% 70% at 82% 42%, rgba(200,16,46,0.16), transparent 60%),
    linear-gradient(180deg, #fbe9e9 0%, var(--black) 55%);
}
body.light .skin-line { stroke: #CBC7BC !important; }

/* ══════════════════════════════════════════════════════════
   LOGO SVG (header / footer)
   ══════════════════════════════════════════════════════════ */
.sk-logo {
  display: inline-flex; align-items: center;
  height: 24px;
  color: var(--white); text-decoration: none;
}
.footer-logo {
  display: inline-flex; align-items: center;
  height: 22px;
  color: var(--gray-text);
}
.sk-logo svg, .footer-logo svg { height: 100%; width: auto; display: block; overflow: visible; }
.sk-logo path, .footer-logo path { fill: currentColor; }

/* ══════════════════════════════════════════════════════════
   INTRO — stencil de tatuaje (trazo púrpura → relleno)
   ══════════════════════════════════════════════════════════ */
.intro {
  position: fixed; inset: 0; z-index: 10000;
  background: #08070a;
  display: flex; align-items: center; justify-content: center;
}
.intro.is-done { pointer-events: none; }
.intro-logo { width: min(62vw, 480px); color: #F5F5F0; }
.intro-logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.intro-logo path { fill: #F5F5F0; }
/* Fallback sin GSAP: dibuja el trazo con CSS */
.intro.draw .intro-logo path {
  fill-opacity: 0;
  stroke: #7c3aed; stroke-width: 1.1px;
  animation: stencil-draw 1.6s ease forwards, stencil-fill 0.6s ease 1.5s forwards;
}
@keyframes stencil-draw { to { stroke-dashoffset: 0; } }
@keyframes stencil-fill { to { fill-opacity: 1; stroke: rgba(124,58,237,0); } }

/* ══════════════════════════════════════════════════════════
   IMÁN ENTRE SECCIONES (scroll snap, suave)
   ══════════════════════════════════════════════════════════ */
/* el imán se desactiva si Lenis (smooth scroll) está activo, para no chocar */
html.snap-on:not(.lenis) { scroll-snap-type: y proximity; }
html.snap-on #hero,
html.snap-on section.sk-section:not(.ch-off) { scroll-snap-align: start; scroll-snap-stop: normal; }
/* En táctil el "reel" (una sección por swipe) lo maneja el gesto en JS
   (main.js); el snap nativo se apaga en html.is-touch para no pelear. */

/* Entradas laterales (3ª y 6ª sección) — animadas por GSAP */
.enter-side { will-change: transform, opacity; }

/* Lenis (smooth scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   MINI HUB de navegación (centro-derecha)
   ══════════════════════════════════════════════════════════ */
.mini-hub {
  position: fixed;
  right: 1.6rem; top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex; align-items: center; gap: 0.7rem;
  pointer-events: none;
}
.mini-hub.is-off { display: none; }
.mini-hub-label {
  font-family: var(--font-mono);
  font-size: 0.5rem; letter-spacing: 0.2em;
  color: var(--gray-text); text-transform: uppercase;
  writing-mode: vertical-rl; text-orientation: mixed;
  opacity: 0.8;
}
.mini-hub-dots {
  display: flex; flex-direction: column; gap: 0.55rem;
  pointer-events: auto;
}
.mini-hub-dot {
  width: 9px; height: 9px; padding: 0;
  border: 1px solid var(--gray-text);
  border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.mini-hub-dot:hover { border-color: var(--red); }
.mini-hub-dot.is-active {
  background: var(--red); border-color: var(--red);
  transform: scale(1.25);
}

/* ══════════════════════════════════════════════════════════
   HERO — fondo de video con título invertido (estilo indigo)
   ══════════════════════════════════════════════════════════ */
.hero-bgvideo {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.hero-bgvideo.is-off { display: none; }
.hero-bgvideo video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: var(--vop, 1); }
.hero-bgvideo::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,var(--dim, 0.15));
}
#hero.has-bgvideo { background: #000; }
#hero.has-bgvideo .hero-zona-a,
#hero.has-bgvideo .hero-zona-b { position: relative; z-index: 1; }
#hero.has-bgvideo .title-line {
  mix-blend-mode: var(--hero-blend, difference);
  color: #fff;
}
#hero.has-bgvideo .title-line.red { color: #fff; }

/* ══════════════════════════════════════════════════════════
   REVEALS unificados (data-reveal)
   ══════════════════════════════════════════════════════════ */
[data-reveal] { will-change: transform, opacity; }
.reveal-w { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-w > span { display: inline-block; }

/* ══════════════════════════════════════════════════════════
   CH02 — kicker (reemplaza al HUD)
   ══════════════════════════════════════════════════════════ */
.ch02-kicker {
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.3em;
  color: var(--red); margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════
   CH03 — Comparativa Petrolato vs SKYNTRA
   ══════════════════════════════════════════════════════════ */
#ch03 { min-height: 100vh; display: flex; align-items: center; padding: 7rem 4rem; }
.ch03-inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.ch03-kicker {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.3em; color: var(--red); margin-bottom: 1rem;
}
.ch03-title {
  font-family: var(--font-display); font-size: 6vw; line-height: 0.9;
  color: var(--white); margin-bottom: 3rem;
}
/* ── Títulos de sección: mismo tamaño/tipografía en todas (consistente en mobile y desktop) ── */
.ch01-headline, .ch02-name, .ch03-title, .ch04-title, .ch05-title, .ch08-headline, .merch-title {
  font-family: var(--font-display); font-size: clamp(3rem, 10vw, 8rem); line-height: 0.9; font-weight: 400;
}
.cmp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.cmp-col {
  border: 1px solid var(--gray-mid);
  padding: 2rem; display: flex; flex-direction: column; gap: 1rem;
}
.cmp-good { border-color: var(--red); background: rgba(200,16,46,0.04); }
.cmp-name {
  font-family: var(--font-display); font-size: 2rem;
  line-height: 1; letter-spacing: 0.04em;
}
.cmp-bad .cmp-name { color: var(--gray-text); }
.cmp-good .cmp-name { color: var(--white); }
.cmp-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.cmp-list li {
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5;
  color: var(--gray-text); padding-left: 1.5rem; position: relative;
}
.cmp-bad .cmp-list li::before {
  content: '✕'; position: absolute; left: 0; color: var(--gray-text); font-weight: 700;
}
.cmp-good .cmp-list li {
  color: var(--white);
}
.cmp-good .cmp-list li::before {
  content: '✓'; position: absolute; left: 0; color: var(--red); font-weight: 700;
}
.cmp-media {
  width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--gray-mid); margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--gray-text); letter-spacing: 0.12em;
}

/* ══════════════════════════════════════════════════════════
   CH07 — Roadmap compacto (ya no es scroll horizontal fijado)
   ══════════════════════════════════════════════════════════ */
#ch07 { height: auto; min-height: auto; overflow: visible; padding: 6rem 4rem; }
.ch07-inner { height: auto; display: block; overflow: visible; }
.ch07-timeline-bar { display: none; }
.ch07-track {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  padding: 0; transform: none !important; justify-content: center;
}
.moment {
  flex: 1 1 220px; max-width: 270px; padding: 0;
}
.moment-day { font-size: 2.2rem; margin-bottom: 0.3rem; }
.moment-step { margin-bottom: 0.8rem; }
.moment-text { font-size: 0.75rem; max-width: none; margin-bottom: 1rem; }
.moment-visual { width: 100%; height: 170px; }

/* ══════════════════════════════════════════════════════════
   CURSOR — más gamificado (crece en hover formando un anillo)
   ══════════════════════════════════════════════════════════ */
.cursor {
  transition: width 0.25s cubic-bezier(.2,.8,.2,1), height 0.25s cubic-bezier(.2,.8,.2,1),
              background 0.25s, border-color 0.25s;
}
.cursor.expanded {
  width: 48px; height: 48px;
  background: transparent;
  border: 1.5px solid var(--white);
}

/* ══════════════════════════════════════════════════════════
   BLOQUES — secciones personalizadas (presets de layout)
   ══════════════════════════════════════════════════════════ */
.blk { min-height: 100vh; display: flex; align-items: center; padding: 7rem 4rem; background: var(--black); }
.blk-inner { width: 100%; max-width: 1200px; margin: 0 auto; }

/* 1 columna (centrada) */
.blk-one .blk-inner {
  max-width: 880px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.blk-one .blk-media { width: 100%; max-width: 560px; }

/* 2 columnas */
.blk-two .blk-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.blk-two.flip .blk-text { order: 2; }

/* lateral (media a sangre, ancha) */
.blk-lateral { padding: 0; }
.blk-lateral .blk-inner {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 0;
  max-width: none; min-height: 100vh; align-items: stretch;
}
.blk-lateral .blk-text {
  padding: 7rem 4rem; display: flex; flex-direction: column; justify-content: center; gap: 1.3rem;
}
.blk-lateral .blk-media { min-height: 100vh; }
.blk-lateral.flip .blk-text { order: 2; }
.blk-lateral.flip .blk-media { order: 1; }

/* texto */
.blk-text { display: flex; flex-direction: column; gap: 1.2rem; }
.blk-kicker { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.3em; color: var(--red); }
.blk-title { font-family: var(--font-display); font-size: 5vw; line-height: 0.9; color: var(--white); }
.blk-one .blk-title { font-size: 6vw; }
.blk-text-p { font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.8; color: var(--gray-text); max-width: 48ch; }
.blk-one .blk-text-p { margin: 0 auto; }
.blk-cta {
  display: inline-block; align-self: flex-start;
  border: 1px solid var(--red); color: var(--red);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em;
  padding: 0.8rem 2rem; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.blk-one .blk-cta { align-self: center; }
.blk-cta:hover { background: var(--red); color: #fff; }

/* media */
.blk-media { display: flex; }
.blk-media-fill {
  width: 100%; min-height: 320px;
  border: 1px solid var(--gray-mid);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--gray-text);
  letter-spacing: 0.12em; overflow: hidden; position: relative;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.blk-lateral .blk-media-fill { border: 0; min-height: 100vh; }
.blk-media-fill video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blk-media-fill.has-image { color: transparent; }

/* variantes de fondo */
.blkbg-panel { background: var(--gray-industrial); }
.blkbg-red {
  background: radial-gradient(115% 90% at 50% 38%, #d6141f 0%, #b80e18 52%, #8b0d20 100%);
}
.blkbg-red .blk-title { color: #fff; }
.blkbg-red .blk-kicker { color: #fff; }
.blkbg-red .blk-text-p { color: rgba(255,255,255,0.85); }
.blkbg-red .blk-cta { border-color: #fff; color: #fff; }
.blkbg-red .blk-cta:hover { background: #fff; color: var(--red); }

/* ══════════════════════════════════════════════════════════
   CURSOR GHOST (estela que se desvanece)
   ══════════════════════════════════════════════════════════ */
.cursor-ghost {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--white);
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference; opacity: 0.3;
  transition: width 0.3s, height 0.3s, opacity 0.3s, border-color 0.3s;
  will-change: transform;
}
.cursor-ghost.expanded { width: 72px; height: 72px; opacity: 0.16; }
body.cursor-off .cursor-ghost { display: none; }

/* ══════════════════════════════════════════════════════════
   LIGHTBOX (modo galería)
   ══════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  width: 90vw; height: 84vh;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.lightbox-close {
  position: absolute; top: 1.5rem; right: 2rem;
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; color: #fff;
}

/* ══════════════════════════════════════════════════════════
   MODO POR SECCIÓN (solo invierte las variables de paleta)
   ══════════════════════════════════════════════════════════ */
.mode-light {
  --black: #F3F1EA; --white: #14110F; --gray-industrial: #E7E4DB;
  --gray-mid: #CBC7BC; --gray-text: #75716A; --gold: #9A7B1F;
}
.mode-dark {
  --black: #0A0A0A; --white: #F5F5F0; --gray-industrial: #1A1A1A;
  --gray-mid: #2E2E2E; --gray-text: #555555; --gold: #C9A84C;
}
.mode-light.blk, .mode-dark.blk { background: var(--black); }

/* ══════════════════════════════════════════════════════════
   BLOQUE SLIDER (full-screen clásico)
   ══════════════════════════════════════════════════════════ */
.blk.blk-slider { padding: 0; display: block; position: relative; min-height: 100vh; overflow: hidden; }
.blk-slidewrap { position: absolute; inset: 0; overflow: hidden; }
.blk-slider-stage { position: absolute; inset: 0; }
.blk-sl {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.05);
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 5s linear;
}
.blk-sl.is-active { opacity: 1; transform: scale(1); }
.blk-slider-dots { position: absolute; bottom: 1.6rem; left: 0; right: 0; display: flex; gap: 0.45rem; justify-content: center; z-index: 3; }
.blk-slider-cap { position: absolute; left: 4rem; bottom: 3rem; z-index: 3; max-width: 520px; }
.blk-slider-cap .blk-title { font-size: 4.5vw; }
.blk-slider-cap .blk-text-p { color: rgba(255,255,255,0.85); }

/* ══════════════════════════════════════════════════════════
   BLOQUE GALERÍA (grid → lightbox)
   ══════════════════════════════════════════════════════════ */
.blk-gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 2.5rem; width: 100%;
}
.blk-gthumb {
  aspect-ratio: 1; border: 0; cursor: pointer; padding: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.25) brightness(0.92);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), filter 0.35s;
}
.blk-gthumb:hover { transform: scale(1.04); filter: none; }
.blk-empty { color: var(--gray-text); font-family: var(--font-mono); font-size: 0.7rem; }

/* ── Bloque FAQ (acordeón de dropdowns) ─────────────────── */
.blk-faq-inner { width: 100%; max-width: 820px; margin: 0 auto; }
.blk-faq-list { border-top: 1px solid var(--gray-mid); }
.blk-faq-item { border-bottom: 1px solid var(--gray-mid); }
.blk-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 1.4rem 0.2rem; color: var(--white);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: 0.02em;
  transition: color 0.2s;
}
.blk-faq-q:hover { color: var(--red); }
.blk-faq-icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; color: currentColor; }
.blk-faq-icon::before, .blk-faq-icon::after {
  content: ''; position: absolute; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease;
}
.blk-faq-icon::before { top: 8px; left: 0; width: 18px; height: 2px; }    /* — */
.blk-faq-icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }    /* | */
.blk-faq-item.is-open .blk-faq-icon::after { transform: rotate(90deg); opacity: 0; }  /* + → — */
.blk-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.blk-faq-item.is-open .blk-faq-a { max-height: 600px; }
.blk-faq-a-in {
  font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.7;
  color: var(--text-soft); padding: 0.2rem 2.2rem 1.4rem 0.2rem;
}
.blk-faq-a-in a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.blk-faq-a-in a:hover { opacity: 0.75; }
.blk-faq-a-in strong { color: var(--white); }
/* Filtro por categoría (chips) */
/* Paginación de categorías (arriba) */
.blk-faq-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.8rem; }
.blk-faq-cat {
  background: transparent; border: 1px solid var(--gray-mid); border-radius: 999px;
  color: var(--text-soft); cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 1rem; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.blk-faq-cat:hover { color: var(--white); border-color: var(--text-soft); }
.blk-faq-cat.is-active { color: var(--white); border-color: var(--red); background: var(--red); }
.blk-faq-hidden { display: none; }

/* Contenedor con scroll: las preguntas viven acá dentro (no alargan la sección) */
.blk-faq-scroll {
  margin-top: 1.3rem;
  max-height: 56vh;
  overflow-y: auto;
  overscroll-behavior: contain;              /* el scroll no se escapa a la página */
  -webkit-overflow-scrolling: touch;
  padding-right: 0.5rem;
}
.blk-faq-scroll::-webkit-scrollbar { width: 6px; }
.blk-faq-scroll::-webkit-scrollbar-thumb { background: var(--gray-mid); border-radius: 3px; }
.blk-faq-scroll::-webkit-scrollbar-track { background: transparent; }
.blk-faq-scroll { scrollbar-width: thin; scrollbar-color: var(--gray-mid) transparent; }

@media (max-width: 640px) {
  /* chips en una tira horizontal desplazable (se ve prolijo con 6 categorías) */
  .blk-faq-cats {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: -0.2rem; padding: 0 0.2rem 0.2rem;
  }
  .blk-faq-cats::-webkit-scrollbar { display: none; }
  .blk-faq-cat { font-size: 0.6rem; padding: 0.45rem 0.85rem; }
  .blk-faq-scroll { max-height: 60vh; }
}

/* ── Bloque PANTALLA TRIPLE (3 paneles 9:16) ────────────── */
.blk-tri-inner { width: 100%; max-width: 1200px; margin: 0 auto; }
.blk-tri-head { text-align: center; }
.blk-tri-head .blk-cta { margin-top: 1.2rem; }
.blk-tri-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin-top: 2.2rem;
}
.blk-tri-panel {
  aspect-ratio: 9 / 16; background: var(--gray-industrial);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden; position: relative; border: 1px solid var(--gray-mid);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--white);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
}
.blk-tri-panel:hover { transform: translateY(-6px); border-color: var(--red); }
.blk-tri-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blk-tri-ph { font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray-text); letter-spacing: 0.2em; }
/* nombre que aparece al hover (link al perfil) */
.blk-tri-name {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.2rem 1rem 1rem; text-align: center;
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.06em; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.blk-tri-panel:hover .blk-tri-name { opacity: 1; transform: translateY(0); }
/* fila de botones (ver más patrocinados + IG) */
.blk-tri-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.blk-cta-ghost { background: transparent; color: var(--white); border: 1px solid var(--white); }
.blk-cta-ghost:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 768px) {
  .blk-tri-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .blk-tri-panel { aspect-ratio: 16 / 9; }   /* en teléfono: horizontales 16:9 */
  .blk-tri-name { opacity: 1; transform: none; }   /* en táctil el nombre siempre visible */
}

/* ── Bloque COSMÉTICO (claims / ingredientes + imagen) ──── */
/* Ingredientes: tira(s) horizontal(es) con auto-scroll + arrastre.
   Desktop = 1 tira; móvil = 2 tiras. */
.blk-cos-inner { width: 100%; max-width: 1180px; margin: 0 auto; }
.blk-cos-head { text-align: center; max-width: 900px; margin: 0 auto; }
/* Título de ingredientes (cosmetic): en desktop más contenido, en una línea
   cuando cabe, y si no, en dos líneas balanceadas (sin saltos raros). */
.blk-cos-title { font-size: 3.5vw; text-wrap: balance; }
.blk-cos-strips {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  display: flex; flex-direction: column; gap: clamp(0.7rem, 2vw, 1.1rem);
}
/* la tira: se puede arrastrar; el scrollbar se oculta */
.blk-cos-strip {
  overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x;                 /* arrastre horizontal; el swipe vertical va a la página */
  cursor: grab; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.blk-cos-strip::-webkit-scrollbar { display: none; }
.blk-cos-strip.is-grabbing { cursor: grabbing; }
.blk-cos-track { display: inline-flex; align-items: flex-start; }
.blk-cos-card {
  flex: 0 0 auto; width: 250px; margin-right: 1rem; text-align: left;
  user-select: none; -webkit-user-drag: none;
}
/* miniatura: aspect-ratio FIJO (se mantiene la proporción; no reflowea) */
.blk-cos-thumb {
  display: none; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 0.55rem;
  background: var(--gray-industrial); background-size: cover; background-position: center;
  border: 1px solid var(--gray-mid);
}
.blk-cos-card.has-thumb .blk-cos-thumb { display: block; }
.blk-cos-label {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(1.15rem * var(--claim-scale, 1)); letter-spacing: 0.04em; color: var(--white);
}
.blk-cos-desc { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: calc(0.7rem * var(--claim-scale, 1)); line-height: 1.55; color: var(--text-soft); }
.blk-cos-card img { pointer-events: none; }

@media (max-width: 700px) {
  .blk-cos-card { width: 172px; margin-right: 0.7rem; }
  .blk-cos-label { font-size: calc(1.02rem * var(--claim-scale, 1)); }
}

/* ── Bloque RESEÑAS ──────────────────────────────────────── */
.blk-rev-inner { text-align: center; }
.blk-rev-marquee { margin-top: 2.2rem; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.blk-rev-track { display: inline-flex; align-items: stretch; padding: 0.6rem 0; will-change: transform; animation: blk-rev-scroll 70s linear infinite; }
@media (hover: hover) { .blk-rev-marquee:hover .blk-rev-track { animation-play-state: paused; } }
.blk-rev-card { width: 240px; margin-right: 1.2rem; flex: none; border: 1px solid var(--gray-mid); background: rgba(20,20,20,0.4); padding: 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; text-align: left; animation: blk-rev-float 5s ease-in-out infinite; }
.blk-rev-card:nth-child(odd) { animation-delay: -2.5s; }
@keyframes blk-rev-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blk-rev-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.blk-rev-head { display: flex; align-items: center; gap: 0.8rem; }
.blk-rev-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.blk-rev-noimg { display: flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 1.3rem; }
.blk-rev-name { font-family: var(--font-mono); font-size: 0.8rem; color: var(--white); }
.blk-rev-stars { color: var(--red); font-size: 0.85rem; letter-spacing: 2px; }
.blk-rev-text { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; color: var(--text-soft); }
.blk-rev-link { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--gray-text); text-decoration: none; text-transform: uppercase; align-self: flex-start; }
.blk-rev-link:hover { color: var(--red); }

/* ── Bloque COLABORADORES (logos marquee) ────────────────── */
.blk-collab-inner { text-align: center; }
.blk-collab-marquee { margin-top: 2.2rem; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* gap como margin-right (incl. la última celda) → el loop -50% cierra exacto, sin salto */
.blk-collab-track { display: inline-flex; align-items: center; will-change: transform; animation: blk-collab-scroll 28s linear infinite; }
@media (hover: hover) { .blk-collab-marquee:hover .blk-collab-track { animation-play-state: paused; } }
.blk-collab-logo { flex: none; display: inline-flex; align-items: center; margin-right: 3.5rem; }
.blk-collab-logo[href] { cursor: pointer; }
.blk-collab-logo img { height: 54px; width: auto; max-width: 170px; object-fit: contain; opacity: 1; transition: transform 0.2s ease; }
.blk-collab-logo[href]:hover img { transform: scale(1.09); }
@keyframes blk-collab-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Bloque MIXTO (mitad colaboradores + mitad reseñas) ──── */
.blk-mix-inner { text-align: center; }
.blk-mix-half { margin-top: 1.8rem; }
.blk-mix-lbl { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.22em; color: var(--gray-text); text-transform: uppercase; margin-bottom: 0.9rem; }
.blk-mix-half .blk-rev-marquee, .blk-mix-half .blk-collab-marquee { margin-top: 0; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .blk-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .blk-slider-cap { left: 1.5rem; right: 1.5rem; bottom: 2rem; }
  .blk-slider-cap .blk-title { font-size: 11vw; }
  .sk-header { padding: 1.25rem 1.5rem; }

  #hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100dvh;
  }
  .hero-zona-a { padding: 5.5rem 1.5rem 2rem; }
  .hero-zona-b { padding: 1.5rem 1.5rem 4rem; }
  .title-line  { font-size: 18vw; }
  .hero-deco-l { left: 1.5rem; }
  .hero-deco-r { right: 1.5rem; }

  .skin-lines-wrap { display: none; }

  #ch02 { padding: 7rem 1.5rem 4rem; }
  .ch02-inner { flex-direction: column; gap: 3rem; }
  .ch02-visual { width: 100%; max-width: 100%; height: 260px; }

  #ch03 { padding: 7rem 1.5rem 5rem; }

  #ch04 { padding: 7rem 1.5rem 5rem; }
  .ch04-grid { grid-template-columns: 1fr; }
  .ch04-oil-nm { font-size: 8vw; }

  #ch05 { padding: 7rem 1.5rem 5rem; }
  .ch05-cards { overflow-x: scroll; -webkit-overflow-scrolling: touch; padding-bottom: 1.5rem; }
  .ch05-card  { flex: 0 0 75vw; }
  .ch05-common { font-size: 7vw; }

  .moment { flex: 0 0 88vw; }
  .moment-day { font-size: 11vw; }

  .ch08-formats  { flex-direction: column; align-items: center; }

  footer { align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-pro { border-left: 0; padding-left: 0; padding-top: 2rem; border-top: 1px solid var(--gray-mid); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-social { position: static; transform: none; }
  .footer-legal { text-align: left; }
  .footer-sub-form { flex-direction: column; }
  .footer-sub-btn { padding: 0.95rem; }
}

/* ── Bloques: responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .blk { padding: 6rem 1.5rem; }
  .blk-two .blk-inner,
  .blk-lateral .blk-inner { grid-template-columns: 1fr; gap: 2.5rem; min-height: auto; }
  .blk-two.flip .blk-text,
  .blk-lateral.flip .blk-text { order: 0; }
  .blk-two.flip .blk-media,
  .blk-lateral.flip .blk-media { order: 0; }
  .blk-lateral .blk-text { padding: 2rem 0; }
  .blk-lateral .blk-media,
  .blk-lateral .blk-media-fill { min-height: 60vh; }
  .blk-title, .blk-one .blk-title { font-size: 12vw; }
}

/* ══════════════════════════════════════════════════════════
   CURSOR refinado: punto invertido + pulso suave + ghost glass
   ══════════════════════════════════════════════════════════ */
.cursor { animation: cursor-pulse 2.6s ease-out infinite; }
@keyframes cursor-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
.cursor-ghost {
  mix-blend-mode: normal;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0.6;
}
.cursor-ghost.expanded { opacity: 0.4; }
body.light .cursor-ghost { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.22); }

/* ══════════════════════════════════════════════════════════
   HERO — el texto invierte con el modo; claims en rojo
   ══════════════════════════════════════════════════════════ */
.hero-subtitle { color: var(--white); }
.claims-row { color: var(--red); }
.claims-row .sep { color: var(--red); opacity: 0.45; }

.hero-social {
  position: absolute; left: 0; right: 0; bottom: 16%; z-index: 3;
  display: flex; flex-direction: row; justify-content: center; gap: 1.4rem;
}
.hero-social.is-off { display: none; }
.hero-soc {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: #fff; text-decoration: none;
  background: rgba(0,0,0,0.62); border: 1px solid rgba(255,255,255,0.15);
  padding: 0.4rem 0.7rem; border-radius: 2px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.hero-soc:hover { color: var(--red); border-color: var(--red); }

/* ══════════════════════════════════════════════════════════
   BLOQUE FULLSCREEN (media a sangre + texto encima)
   ══════════════════════════════════════════════════════════ */
.blk.blk-fullscreen { padding: 0; display: block; position: relative; min-height: 100vh; overflow: hidden; }
.blk-fs-media { position: absolute; inset: 0; min-height: 100vh; border: 0 !important; background-size: cover; background-position: center; }
.blk-fs-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blk-fullscreen::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.42); z-index: 1; pointer-events: none; }
.blk-fs-text {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 1.2rem; padding: 0 6vw;
}
.blk-fullscreen .blk-title { font-size: 6.5vw; color: #fff; }
.blk-fullscreen .blk-text-p { color: rgba(255,255,255,0.88); }

/* ══════════════════════════════════════════════════════════
   INTRO — capa de piel detrás del trazo púrpura
   ══════════════════════════════════════════════════════════ */
.intro-skin {
  position: absolute; inset: 0;
  background: url('../assets/images/skin.webp') center / cover no-repeat;
  opacity: 0; transition: opacity 0.7s ease;
}
.intro.skin-on .intro-skin { opacity: 1; }
.intro-logo { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .blk-fullscreen .blk-title { font-size: 12vw; }
  .blk-fs-text { padding: 0 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   CURSOR — sin outline, escalable (settings), grande en títulos
   ══════════════════════════════════════════════════════════ */
.cursor-ghost {
  border: none;
  background: rgba(255,255,255,0.10);
  width: calc(34px * var(--cur-scale, 1));
  height: calc(34px * var(--cur-scale, 1));
}
.cursor-ghost.expanded {
  width: calc(74px * var(--cur-scale, 1));
  height: calc(74px * var(--cur-scale, 1));
  opacity: 0.5;
}
.cursor-ghost.big {
  width: calc(130px * var(--cur-scale, 1));
  height: calc(130px * var(--cur-scale, 1));
  opacity: 0.55;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.12);
}
.cursor.big { width: 14px; height: 14px; }
body.light .cursor-ghost { background: rgba(0,0,0,0.06); }

/* ══════════════════════════════════════════════════════════
   MOTION BLUR al moverse entre secciones
   ══════════════════════════════════════════════════════════ */
#hero, section.sk-section, footer { transition: filter 0.28s ease; }
body.is-scrolling :is(#hero, section.sk-section, footer) { filter: blur(var(--scroll-blur, 0px)); }

/* ══════════════════════════════════════════════════════════
   FIT-SCREEN — cada sección ocupa exactamente la pantalla
   ══════════════════════════════════════════════════════════ */
body.fit-screen #hero { height: 100dvh; }
body.fit-screen :is(#ch01, #ch02, #ch03, #ch04, #ch05, #ch07, #ch08) {
  height: 100dvh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding-top: 6rem; padding-bottom: 3rem;
}
body.fit-screen .blk:not(.blk-bar) {
  height: 100dvh; min-height: 100dvh; overflow: hidden;
}
/* Móvil: las secciones NO se recortan — crecen si el contenido lo necesita
   (el swipe avanza por pantalla dentro de secciones altas). Arregla títulos
   cortados (p.ej. INGREDIENTES ACTIVOS). */
html.is-mobile body.fit-screen .blk:not(.blk-bar),
html.is-mobile body.fit-screen :is(#ch01, #ch02, #ch03, #ch04, #ch05, #ch07, #ch08) {
  height: auto; min-height: 100dvh; overflow: visible;
}
/* compactar la sección de ingredientes en móvil (menos riesgo de crecer) */
/* título en UNA línea (el \n del admin se vuelve espacio en cosmetic) */
html.is-mobile .blk-cosmetic .blk-title { font-size: 9vw; }
/* descripciones completas (sin recortar) con tarjetas más anchas */
html.is-mobile .blk-cos-card { width: 216px; }
/* dejar respirar el contenido para que NO se corte dentro del 100dvh */
body.fit-screen #ch04, body.fit-screen #ch05 { padding-top: 5rem; padding-bottom: 2rem; }
body.fit-screen .ch04-title, body.fit-screen .ch05-title { margin-bottom: 2.5rem; }
body.fit-screen #ch04 { min-height: 100dvh; }

/* ══════════════════════════════════════════════════════════
   BLOQUE BARRA (franja animada, agregable entre secciones)
   ══════════════════════════════════════════════════════════ */
.blk.blk-bar {
  min-height: 0; height: auto; padding: 1.1rem 0;
  display: flex; align-items: center; overflow: hidden;
  background: var(--red);
}
.blk-bar.blkbg-default, .blk-bar.blkbg-red { background: var(--red); }
.blk-bar.blkbg-panel { background: var(--gray-industrial); }
.blk-bar-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  animation: hero-marquee 26s linear infinite; will-change: transform;
}
.blk-bar:hover .blk-bar-track { animation-play-state: paused; }
.blk-bar-track span {
  font-family: var(--font-display); font-size: 2.1rem;
  letter-spacing: 0.12em; color: #fff; padding: 0 1.1rem;
}
.blk-bar-track .blk-bar-dot { color: rgba(255,255,255,0.5); font-size: 0.9rem; }

/* ══════════════════════════════════════════════════════════
   TOPBAR NAV + LOGO escalable
   ══════════════════════════════════════════════════════════ */
.sk-logo { height: calc(24px * var(--logo-scale, 1)); }
.sk-topnav { display: none; gap: 1.3rem; pointer-events: all; }
body.topbar-on .sk-topnav { display: flex; align-items: center; flex-wrap: wrap; }
.sk-topnav a {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em;
  color: var(--gray-text); text-decoration: none; text-transform: uppercase; transition: color 0.2s;
}
.sk-topnav a:hover { color: var(--white); }

/* ══════════════════════════════════════════════════════════
   CLAIMS con fondito negro
   ══════════════════════════════════════════════════════════ */
.claims-row span:not(.sep) {
  background: rgba(0,0,0,0.62); color: var(--red);
  padding: 0.3rem 0.6rem; border-radius: 2px;
}
.claims-row .sep { color: var(--gray-mid); }

/* ══════════════════════════════════════════════════════════
   EFECTO DE CAPA DEL TÍTULO (hero)
   ══════════════════════════════════════════════════════════ */
#hero.titlefx-exclusion .title-line { mix-blend-mode: exclusion; }
#hero.titlefx-difference .title-line { mix-blend-mode: difference; color: #fff; }
#hero.titlefx-difference .title-line.red { color: #fff; }
#hero.titlefx-opacity .title-line { opacity: 0.55; }
#hero.titlefx-blur .title-line { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }

/* ══════════════════════════════════════════════════════════
   CH08 — hover por lado (tinte + PNG del formato)
   ══════════════════════════════════════════════════════════ */
#ch08 { position: relative; overflow: hidden; }
/* Cada producto ocupa SU mitad: imagen del envase visible en su lado; al hover,
   el video del producto se reproduce en esa misma mitad. */
.ch08-bg {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  opacity: 0.5; transition: opacity 0.4s ease; pointer-events: none; z-index: 0;
}
.ch08-bg-0 { left: 0; }
.ch08-bg-1 { right: 0; }
.ch08-vid {
  position: absolute; top: 0; bottom: 0; width: 50%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0;
}
.ch08-vid-0 { left: 0; }
.ch08-vid-1 { right: 0; }
#ch08.fmt-0 .ch08-bg-0, #ch08.fmt-1 .ch08-bg-1 { opacity: 0.85; }
#ch08.fmt-0 .ch08-vid-0, #ch08.fmt-1 .ch08-vid-1 { opacity: 1; }
#ch08::before, #ch08::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 55%; pointer-events: none;
  opacity: 0; transition: opacity 0.5s; z-index: 0;
}
#ch08::before { left: 0; background: radial-gradient(circle at 28% 50%, rgba(200,16,46,0.2), transparent 70%); }
#ch08::after { right: 0; background: radial-gradient(circle at 72% 50%, rgba(200,16,46,0.2), transparent 70%); }
#ch08.fmt-0::before, #ch08.fmt-1::after { opacity: 1; }
.ch08-inner { position: relative; z-index: 1; }
.ch08-format { cursor: pointer; transition: border-color 0.3s, transform 0.3s; }
.ch08-format:hover { border-color: var(--red); transform: translateY(-4px); }

/* ══════════════════════════════════════════════════════════
   BOTÓN COMPRAR — sube tras inactividad, se baja al mover el mouse
   ══════════════════════════════════════════════════════════ */
.idle-buy {
  position: fixed; right: 1.6rem; bottom: -5rem;   /* oculto abajo (sin transform: lo usa el imán) */
  z-index: 9000;
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.16em;
  color: #fff; background: var(--red); padding: 0.85rem 2.8rem; text-decoration: none;
  box-shadow: 0 12px 45px rgba(200,16,46,0.5);
  opacity: 0; pointer-events: none;
  transition: bottom 0.55s cubic-bezier(.2,.9,.3,1), opacity 0.45s ease, background 0.2s;
}
.idle-buy.show { bottom: 1.6rem; opacity: 1; pointer-events: auto; }
.idle-buy:hover { background: #e11d33; }

/* COMPRAR en el hero → página de la crema.
   Desktop: centrado ABAJO. Móvil: en pleno centro.
   (inset + margin:auto en vez de top:% — el grid/flex del hero lo desplazaba) */
.hero-shop {
  position: absolute; inset: auto 0 2.8rem 0; margin: 0 auto;
  width: fit-content; height: fit-content;
  z-index: 6;
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.18em;
  color: #fff; background: var(--red); text-decoration: none;
  padding: 0.9rem 3.2rem;
  box-shadow: 0 12px 45px rgba(200, 16, 46, 0.5);
  transition: background 0.2s, transform 0.25s ease;
}
.hero-shop:hover { background: #e11d33; transform: scale(1.05); }
/* móvil: abajo al centro (conviviendo con el WhatsApp, que va a la derecha) */
html.is-mobile .hero-shop { inset: auto 0 1.3rem 0; margin: 0 auto; }
/* Botón flotante de WhatsApp (persistente; se sube ARRIBA del COMPRAR cuando aparece) */
.wa-float {
  position: fixed; right: 1.6rem; bottom: -5rem; z-index: 9001;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 30px rgba(37,211,102,0.45);
  opacity: 0; pointer-events: none;
  transition: bottom 0.45s cubic-bezier(.2,.9,.3,1), opacity 0.45s ease, transform 0.2s;
}
.wa-float.show { bottom: 1.6rem; opacity: 1; pointer-events: auto; }
body.buy-on .wa-float.show { bottom: 6.8rem; }   /* sube arriba del COMPRAR mientras está visible */
.wa-float:hover { transform: scale(1.08); }
/* ícono custom subido desde el panel: ocupa todo el círculo (sin fondo verde) */
.wa-float.wa-custom { background: none; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.wa-float.wa-custom img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════
   VIDEO DE FONDO POR SECCIÓN
   ══════════════════════════════════════════════════════════ */
/* la sección crea contexto de apilado (isolate) para que el video en
   z-index:-1 se vea SIEMPRE (no solo durante la transición con blur) */
.has-secbg { background: #000 !important; isolation: isolate; }
.sec-bgvideo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sec-bgvideo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-bgvideo::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,var(--dim, 0.45)); }

/* Hero media: parallax suave siguiendo el mouse */
body.hero-parallax #hero-media { transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }

/* Split-flap del título */
body.split-flap #hero-l1 span,
body.split-flap #hero-l2 span,
body.split-flap #hero-l3 span { display: inline-block; }

/* ══════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — apaga blur/animaciones intensas
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body.is-scrolling :is(#hero, section.sk-section, footer) { filter: none !important; }
  .hero-slide, .blk-sl, .hero-marquee-track, .blk-bar-track,
  .product-placeholder.has-image, .idle-buy, .sk-btn-coming::after { animation: none !important; }
  .hero-slide, .blk-sl { transition: opacity 0.2s linear !important; }
}

/* ══════════════════════════════════════════════════════════
   A11Y — foco visible + reset del botón del lightbox
   ══════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px; border-radius: 1px;
}
.lightbox-close {
  background: transparent; border: 0; cursor: pointer;
}
/* Solo para lectores de pantalla (texto no visible) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Skip link: aparece al tabular, deja saltar la cabecera hacia el contenido */
.skip-link {
  position: fixed; top: -120px; left: 1rem; z-index: 10001;
  background: var(--red); color: #fff; padding: 0.65rem 1.1rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-decoration: none; transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }
#hero:focus { outline: none; }   /* recibe foco desde el skip link sin marco feo */
/* Cursor real (no el custom) para quien pide menos movimiento o no tiene mouse */
@media (prefers-reduced-motion: reduce) { body { cursor: auto; } .cursor { display: none; } }
@media (hover: none) { body { cursor: auto; } .cursor { display: none; } }

/* ══ View Transitions: navegación entre páginas deslizando desde un lado
   (Chrome/Edge; donde no hay soporte, navega instantáneo sin animación). ══ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: sk-vt-out .38s cubic-bezier(.4,0,.2,1) both; }
  ::view-transition-new(root) { animation: sk-vt-in  .42s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes sk-vt-out { from { opacity: 1; transform: translateX(0); }  to { opacity: 0; transform: translateX(-40px); } }
@keyframes sk-vt-in  { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: translateX(0); } }

/* ══════════════════════════════════════════════════════════
   BOCINA del hero (solo visible si el hero tiene video) + split-flap
   ══════════════════════════════════════════════════════════ */
/* Bocina del hero: ahora vive en el HEADER, junto al carrito (no se solapa
   con nada del hero). El JS la muestra solo cuando el slider tiene video. */
.hero-mute {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 0.9rem; cursor: pointer; display: none;
  align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.2s;
}
.hero-mute:hover { background: var(--red); transform: scale(1.08); }
.sk-header.hdr-light .hero-mute { color: #14110F; border-color: rgba(0,0,0,0.3); background: rgba(255,255,255,0.4); }
.flap-c { display: inline-block; }

/* ── Redes sociales en el footer (centradas) ───────────── */
footer { position: relative; }
.footer-social {
  position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 50%);
  display: flex; gap: 1rem; z-index: 1;
}
.footer-social.is-off { display: none; }
@media (max-width: 900px) {
  .footer-social { position: static; transform: none; justify-content: center; margin: 0.5rem 0; }
}

/* ── Logo del header: color por sección + drop-shadow + crece en el hero ── */
.sk-logo {
  transition: color 0.35s ease,
              transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.4s ease;
  transform-origin: left center;
  /* separa el logo del fondo y de los títulos del hero */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
/* Prominente mientras el hero está a la vista; al bajar se encoge arriba */
.sk-header.at-hero .sk-logo {
  transform: scale(var(--logo-hero-scale, 2));
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}
.sk-header.hdr-light .sk-logo { color: #14110F; }       /* negro sobre secciones claras */
.sk-header.hdr-light .sk-theme-toggle { color: #14110F; border-color: rgba(0,0,0,0.3); }
.sk-header.hdr-light .sk-topnav a { color: #4a463f; }

/* ── Capa WebGL del hero (PixiJS, opcional) ─────────────── */
.hero-fx-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
  opacity: var(--hero-fx-opacity, 1);
  transition: opacity 0.4s ease;
}
/* Sombra suave bajo los títulos del hero (legibilidad sobre el fluido/video).
   La fuerza la controla --hero-title-shadow (0–1) desde el panel. */
#hero.hero-title-shadow .title-line {
  text-shadow: 0 calc(2px + 7px * var(--hero-title-shadow, 0))
                 calc(10px + 28px * var(--hero-title-shadow, 0))
                 rgba(0, 0, 0, calc(0.6 * var(--hero-title-shadow, 0)));
}
#hero.hero-title-shadow .hero-subtitle,
#hero.hero-title-shadow .claims-row {
  text-shadow: 0 calc(1px + 3px * var(--hero-title-shadow, 0))
                 calc(6px + 14px * var(--hero-title-shadow, 0))
                 rgba(0, 0, 0, calc(0.5 * var(--hero-title-shadow, 0)));
}
/* el contenido del hero debe quedar por encima del canvas */
#hero.has-fx .hero-zona-a,
#hero.has-fx .hero-zona-b,
#hero.has-fx .hero-deco-l,
#hero.has-fx .hero-deco-r { position: relative; z-index: 1; }
/* con shader, el bgvideo opcional manda por encima del canvas */
#hero.has-fx .hero-bgvideo { z-index: 0; }

/* Holo GPU: la iridiscencia real (canvas) reemplaza el glare blanco;
   el patrón del logo (::after) se conserva como firma de marca */
.holo-fx-canvas { display: block; border-radius: inherit; }
body.holo-gpu.fx-on .holo-on::before { display: none; }

/* Cortina de transición líquida (overlay fullscreen) */
.fx-transition-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 9990; pointer-events: none;
  opacity: 0; transition: opacity 0.12s linear;
}
/* Canvas de distorsión de títulos (hijo del título, opt-in vía [data-warp]) */
.fx-warp-canvas { display: block; }

/* Distorsión del título del hero: aberración cromática sobre el TEXTO real
   (robusto: nunca lo oculta, convive con split-flap y la máscara de entrada;
   no toca transform porque GSAP lo controla en la entrada). --tw-split lo
   anima main.js según la velocidad de scroll. */
body.title-warp .title-line {
  text-shadow:
    var(--tw-split, 0px) 0 0 rgba(255, 0, 90, 0.55),
    var(--tw-split-neg, 0px) 0 0 rgba(0, 220, 255, 0.55);
  transition: text-shadow 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
  body.title-warp .title-line { text-shadow: none; }
}

/* ══════════════════════════════════════════════════════════
   MÓVIL — navegación tipo REEL (un swipe = una sección)
   scroll-snap nativo mandatory + snap-stop:always. Cada sección
   ocupa exactamente una pantalla. Activado por html.is-mobile.
   ══════════════════════════════════════════════════════════ */
/* En táctil el reel lo maneja el JS (main.js): arrastre 1:1 + asiento en una
   sección al soltar. Apagamos el snap NATIVO del navegador para que no pelee
   con el gesto, y scroll-behavior:auto para que nada suavice por encima del JS. */
html.is-touch { scroll-snap-type: none !important; }
html.is-mobile {
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;   /* no rebota a la barra del navegador */
}
html.is-mobile #hero,
html.is-mobile section.sk-section,
html.is-mobile #video,
html.is-mobile footer { min-height: 100dvh; }
/* el footer cierra el reel (puede ser más corto) */
html.is-mobile footer { min-height: auto; padding-bottom: 4rem; }

/* Sección = una pantalla centrada. Paddings y tipos compactos para
   que el contenido quepa sin recortarse. Gateado por la clase is-mobile
   (la pone la detección JS solo en táctil), no por la media de puntero. */
@media (max-width: 768px) {
  html.is-mobile #hero,
  html.is-mobile section.sk-section {
    min-height: 100dvh;               /* al menos una pantalla; crece si hace falta */
    display: flex; flex-direction: column; justify-content: center;
    padding: 5rem 1.25rem 4.5rem;     /* centrado: si el contenido cabe = reel; si no, crece sin recortar */
  }
  html.is-mobile .hero-zona-a { padding: 0 0 1rem; flex: 0 0 auto; justify-content: flex-end; }
  /* zona del envase: columna (envase arriba, redes debajo) para que nada se tape */
  html.is-mobile .hero-zona-b {
    padding: 0; flex: 1 1 auto; min-height: 0;
    flex-direction: column; gap: 1rem;
  }
  /* envase MÁS PEQUEÑO para que encaje bien en su zona.
     OJO: width:100% (no auto) — con aspect-ratio, width:auto colapsa a 0. */
  html.is-mobile .product-placeholder {
    width: 100%; max-width: 250px; max-height: 38vh; margin: 0 auto;
  }
  /* sin imágenes dedicadas: el envase (PNG) se ve COMPLETO (contain, sin recorte) */
  html.is-mobile .hero-media:not(.hero-rect) .hero-slide { background-size: contain; }
  /* con imágenes dedicadas de móvil: recuadro RECTANGULAR que se llena (cover) */
  html.is-mobile .hero-media.hero-rect {
    aspect-ratio: 3 / 4; max-width: 300px; max-height: 52vh;
    border-color: transparent; background: transparent;
  }
  html.is-mobile .hero-media.hero-rect .hero-slide { background-size: cover; }
  /* redes: en flujo, centradas horizontalmente bajo el envase */
  html.is-mobile .hero-socials {
    position: static; left: auto; right: auto; bottom: auto; top: auto; transform: none;
    flex-direction: row; justify-content: center; gap: 1.1rem; margin: 0.6rem 0 0; z-index: 3;
  }
  /* etiquetas decorativas: estorban en móvil → fuera */
  html.is-mobile .hero-deco-l,
  html.is-mobile .hero-deco-r { display: none; }
  /* halo rojo más contenido detrás del envase pequeño */
  html.is-mobile #hero .hero-zona-b::before { width: 60%; }

  /* ── HERO móvil "video-forward": el video ocupa casi toda la pantalla y el
     texto (título/subtítulo/claims) va superpuesto abajo con degradado.
     Solo cuando NO hay imágenes dedicadas de móvil (.hero-rect). ── */
  html.is-mobile #hero:not(:has(.hero-rect)) { display: flex; flex-direction: column; position: relative; }
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-zona-b {
    position: absolute; inset: 0; z-index: 0; padding: 0; margin: 0;
    flex-direction: row; gap: 0; align-items: stretch;
  }
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-zona-b .product-placeholder {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; aspect-ratio: auto;
  }
  /* video/imagen COMPLETOS (contain) y a pantalla casi completa */
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-slide { background-size: contain; }
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-slide video { object-fit: contain; }
  /* fuera lo que estorba sobre el video */
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-zona-b::before,
  html.is-mobile #hero:not(:has(.hero-rect)) .product-badge,
  html.is-mobile #hero:not(:has(.hero-rect)) .product-label,
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-socials { display: none; }
  /* título un poco más compacto → deja ver más video */
  html.is-mobile #hero:not(:has(.hero-rect)) .title-line { font-size: 13vw; }
  /* degradado negro a PANTALLA COMPLETA (no solo bajo el texto) */
  html.is-mobile #hero:not(:has(.hero-rect))::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.55) 26%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.35) 100%);
  }
  /* texto superpuesto abajo, legible sobre el degradado.
     El padding-bottom deja sitio al botón COMPRAR (abajo al centro). */
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-zona-a {
    position: relative; z-index: 3; margin-top: auto; flex: 0 0 auto;
    padding: 4.5rem 1.4rem 6.4rem; justify-content: flex-end;
  }
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-subtitle { margin-top: 0.9rem; }
  /* dots del slider: sutiles, verticales, al costado derecho (no se solapan con el texto) */
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-dots {
    left: auto; right: 0.55rem; bottom: auto; top: 50%;
    transform: translateY(-50%);
    flex-direction: column; gap: 0.45rem; z-index: 4; opacity: 0.55;
  }
  html.is-mobile #hero:not(:has(.hero-rect)) .hero-dot { width: 2px; height: 16px; }
  /* el mini-hub (menú lateral) no se muestra mientras el hero domina la pantalla */
  html.is-mobile body.at-hero .mini-hub { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

  /* listas/grids pesadas → scroll horizontal para no crecer en alto */
  html.is-mobile .ch04-grid {
    display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
  }
  html.is-mobile .ch04-card { flex: 0 0 78vw; scroll-snap-align: center; }
  html.is-mobile .ch07-track,
  html.is-mobile .ch05-cards {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  html.is-mobile .moment,
  html.is-mobile .ch05-card { scroll-snap-align: center; }

  /* tipografías un punto más contenidas para que entren en 1 pantalla */
  html.is-mobile .title-line   { font-size: 15.5vw; line-height: 0.92; }
  html.is-mobile .ch-num,
  html.is-mobile .skin-lines-wrap { display: none; }

  /* indicador de progreso del reel: barra de puntos abajo-centro (tipo story) */
  html.is-mobile .mini-hub {
    right: auto; left: 50%; top: auto; bottom: 0.8rem;
    transform: translateX(-50%); gap: 0;
  }
  html.is-mobile .mini-hub-label { display: none; }
  html.is-mobile .mini-hub-dots { flex-direction: row; gap: 0.5rem; }
  html.is-mobile .mini-hub-dot { width: 7px; height: 7px; }

  /* tap targets ≥ ~44px */
  html.is-mobile .hero-mute { width: 46px; height: 46px; }
  html.is-mobile .sk-theme-toggle,
  html.is-mobile .sk-btn-coming { min-height: 40px; }
  html.is-mobile .hero-dot { width: 12px; height: 12px; }


  /* sin cursor custom en táctil */
  html.is-touch .cursor,
  html.is-touch .cursor-ghost { display: none !important; }
  html.is-touch { cursor: auto; }

  /* hover de imágenes: en táctil mostrar el holo en reposo (no hay hover) */
  html.is-touch #ch08.fmt-0 .ch08-bg-0,
  html.is-touch #ch08 .ch08-format { opacity: 1; }

  /* grano un poco menos denso en pantallas pequeñas */
  html.is-mobile .sk-grain::before { background-size: 200px 200px; opacity: 0.045; }

  /* IMÁGENES DE PRODUCTO/VISUALES: en móvil que se vean COMPLETAS (sin recorte).
     setVisual escribe background-size inline, por eso usamos !important. */
  html.is-mobile .ch02-visual,
  html.is-mobile .ch03-image,
  html.is-mobile .ch04-card-img,
  html.is-mobile .ch05-ph,
  html.is-mobile .moment-visual {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* En equipos sin GPU/poca memoria/save-data: el fondo WebGL del hero
   no se monta (JS), aquí reforzamos el fondo CSS para que luzca bien. */
html.is-lite #hero { background-attachment: scroll; }

/* ── Grano fílmico + viñeta global (cereza "agencia premium") ── */
.sk-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9996;
  opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(135% 130% at 50% 42%, transparent 56%, rgba(0,0,0,0.32) 100%);
}
body.grain-on .sk-grain { opacity: 1; }
body.light.grain-on .sk-grain {
  background: radial-gradient(135% 130% at 50% 42%, transparent 60%, rgba(20,17,15,0.14) 100%);
}
.sk-grain::before {
  content: ''; position: absolute; inset: -60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05; mix-blend-mode: overlay;
  animation: sk-grain 0.5s steps(3) infinite;
}
@keyframes sk-grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-5%, -4%); }
  66%  { transform: translate(4%, -6%); }
  100% { transform: translate(-3%, 5%); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-grain::before { animation: none; }
}