/* ════════════════════════════════════════════════════════════════════════════
 * HUMAKNITY — Fauna Robotics faithful aesthetic
 * Palette:  cream #F8F0E3 · ink #1A1209 · plum #3D1E2B · wine #9E4455 · rose #C08A8C · sand #D3B583
 * Radius:   cards 24px · big media 28px · pills 100px
 * Type:     Inter — bold tight headings, clean readable body
 * Only restyles. Never touches text content, image sources, or section order.
 * ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --hk-cream:   #F8F0E3;
  --hk-cream-2: #F1E8D8;   /* slightly deeper for alternating sections */
  --hk-card:    #EFE6D6;   /* warm card surface */
  --hk-ink:     #1A1209;
  --hk-muted:   rgba(26, 18, 9, 0.62);
  --hk-line:    rgba(26, 18, 9, 0.10);
  /* HUMAKNITY accent — single red, radial gradient everywhere */
  --hk-red-in:  #CB4441;   /* radial centre */
  --hk-red-out: #C75030;   /* radial edge */
  --hk-grad-radial: radial-gradient(circle at center, #CB4441 0%, #C75030 100%);

  /* solid red for text accents (gradients never go on text) */
  --hk-coral:   #CB4441;
  --hk-coral-d: #C75030;
  --hk-rose:    #CB4441;
  --swiper-theme-color: #CB4441;
  --swiper-pagination-color: #CB4441;
  --swiper-pagination-bullet-inactive-color: rgba(26,18,9,0.25);
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL
   ════════════════════════════════════════════════════════════════════════════ */
/* Kill stray horizontal overflow (full-bleed sections overshoot by a few px to
   avoid edge hairlines). `clip` doesn't create a scroll container, so sticky
   elements keep working. Set on both html and body so the viewport scrollbar
   doesn't appear regardless of which one the browser treats as the scroller. */
html { overflow-x: clip !important; }

.body-20 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--hk-cream) !important;
  color: var(--hk-ink) !important;
  overflow-x: clip !important;
}

/* Force Inter everywhere the export used system-ui stacks */
.body-20 h1, .body-20 h2, .body-20 h3, .body-20 p,
.body-20 a, .body-20 div, .body-20 span, .body-20 input, .body-20 strong {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   NAVBAR — Fauna full-width cream bar · logo centered · links left · CTA right
   ════════════════════════════════════════════════════════════════════════════ */
.navbar.w-nav {
  border-radius: 0 !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 66px !important;
  padding: 0 4.5% !important;
  /* liquid glass bar (intensified) */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08)) !important;
  background-color: rgba(248, 240, 227, 0.36) !important;
  backdrop-filter: saturate(220%) blur(34px) !important;
  -webkit-backdrop-filter: saturate(220%) blur(34px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 10px 34px -16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(255,255,255,0.15) !important;
  position: fixed !important;
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1) !important;
}
/* Smart navbar — hide on scroll down, reveal on scroll up */
.navbar.w-nav.hk-nav-hidden { transform: translateY(-100%) !important; }
.backdrop-filter-navbar { display: none !important; }

.container-328.w-container {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 66px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo — centered absolutely (premium balanced nav) */
.brand.w-nav-brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.image-117 {
  filter: none !important;            /* black logo reads on cream */
  height: 19px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Nav links (Música / Postura) — removed per request */
.nav-menu.w-nav-menu {
  display: none !important;
}
.funciones.w-nav-link,
.tecnologia.w-nav-link {
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: var(--hk-ink) !important;
  padding: 8px 14px !important;
  transition: color 0.2s ease !important;
}
.funciones.w-nav-link:hover,
.tecnologia.w-nav-link:hover { color: var(--hk-coral) !important; opacity: 1 !important; }

/* "Comprar" — primary CTA: plum→wine gradient for max contrast on the cream bar */
.comprar.w-nav-link {
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  background-color: #CB4441 !important;
  background-image: var(--hk-grad-radial) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;   /* legibility over light edges */
  border-radius: 100px !important;
  padding: 13px 26px !important;
  line-height: 1 !important;
  height: auto !important;          /* Webflow forces height:100%/60% — undo it */
  width: auto !important;
  align-self: center !important;    /* don't stretch to navbar height */
  display: inline-flex !important;
  align-items: center !important;
  transition: filter 0.2s ease, transform 0.2s ease !important;
}
.comprar.w-nav-link:hover { filter: brightness(1.15) !important; opacity: 1 !important; }
.comprar.w-nav-link:active { transform: scale(0.96) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   HERO — Fauna rounded full-bleed media card, text centered low
   ════════════════════════════════════════════════════════════════════════════ */
.hero {
  margin: 78px 14px 0 14px !important;
  width: calc(100vw - 28px) !important;
  height: 86vh !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  position: relative !important;
}
.hero-video-wrap { border-radius: 28px !important; }

.hero-texts {
  width: 100% !important;
  padding-left: 6% !important;
  padding-right: 6% !important;
  align-items: center !important;
  text-align: center !important;
  margin-top: 58vh !important;
}
/* Always-legible hero text: white with a soft adaptive shadow — invisible over
   dark areas of the video, adds just enough contrast over light areas. */
.hero-subtitle, .hero-subtitle strong {
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.42), 0 1px 3px rgba(0,0,0,0.5) !important;
  margin-bottom: 14px !important;
}
.hero-title {
  font-weight: 700 !important;
  font-size: 38px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.48) !important;
  max-width: 620px !important;
  text-align: center !important;
  text-wrap: balance !important;
  margin-bottom: 22px !important;
}
.hero-button.w-button {
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  border-radius: 100px !important;
  background-color: #CB4441 !important;
  background-image: var(--hk-grad-radial) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;   /* legibility over light edges */
  border: none !important;
  padding: 14px 30px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: filter 0.2s ease, transform 0.2s ease !important;
}
.hero-button.w-button:hover { filter: brightness(1.15) !important; }
.hero-button.w-button:active { transform: scale(0.96) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — unify every grey/beige surface to cream
   ════════════════════════════════════════════════════════════════════════════ */
.intro-section-1,
.content-1-section-1,
.section_2_app,
.lottie-section { background-color: var(--hk-cream) !important; }

.content-1-section-1 { padding-top: 16vh !important; }

/* Experts carousel + section-5 wrapper — slightly deeper cream */
.funciones-slider,
.container-69,
.container-318 { background-color: var(--hk-cream-2) !important; }

/* Section-5 image/text grid must be OPAQUE so the sticky "cada paso" headline
   behind it gets cleanly covered as it scrolls up — no peeking at the edges. */
.container-255,
.quick-stack-15 { background-color: var(--hk-cream-2) !important; }
.container-255 { margin-top: 0 !important; padding-top: 16vh !important; }   /* gap below the heading, before the images */

/* "La moda y la innovación…" — was a STICKY headline that stayed pinned while
   the design grid (ending in the dark full-bleed "Los 9 meses" block) scrolled
   up over it, so that coffee block visibly cut across the still-pinned headline.
   Made it a normal (relative) block: the headline scrolls away cleanly before
   the dark section arrives — no coffee band over the title. */
.container-87 { position: relative !important; top: 0 !important; height: 74vh !important; }
.container-86-copy-3 {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.section-5 { top: 0 !important; }

/* The philosophy panel (.container-109, "TECHNOLOGY WILL NEVER REPLACE HUMANITY")
   is position:sticky with z-index:10, and its parent .container-108 has a huge
   negative margin-top (~-300vh) that drags it UP so it overlaps the design
   section. Because of its z-index it painted ON TOP of the cream design content
   as a stray dark "coffee" band that appeared then vanished while scrolling.
   Lift the whole design section above it (but below the z-index:1000 navbar) so
   its opaque cream content covers the philosophy panel until you actually reach
   it. The philosophy reveal still runs once the design section scrolls away. */
.section-5 { position: relative !important; z-index: 20 !important; }
.container-69 { position: relative !important; }

/* Push the deeper-cream section down so the colour change lands halfway
   between the funciones card above and the "Diseñado por expertos" title.
   The gap above the colour line is plain page cream; the matching padding
   below it (section-inner) keeps the split even. */
.funciones-slider { margin-top: 80px !important; }

.funciones-slider { border: none !important; }

/* Philosophy — dark brown block (same as footer) with white text */
.container-109 { background-color: var(--hk-ink) !important; }
.container-109 .bold-text-35,
.container-109 .bold-text-35 strong.bold-text-35 { color: #fff !important; }
.container-109 .text-block-6-copy { color: rgba(255,255,255,0.72) !important; }
.container-109 .text-block-3-3 { color: rgba(255,255,255,0.5) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   3 FUNCIONES — Fauna "video + selectable options" feel
   Each card: large media radius, coral play affordance, pill caption
   ════════════════════════════════════════════════════════════════════════════ */
.section-1-title-2 {
  display: none !important;   /* "Qué hace la ropa por ti" — removed per request */
}

.div-block-136 {
  border-radius: 26px !important;
  box-shadow: 0 24px 60px -28px rgba(26,18,9,0.4) !important;
  background-color: #000 !important;            /* hides any corner seam */
}
/* Kill the thin hairline: let the media overflow 1px so the rounded clip
   trims it with no gap showing the cream background behind. */
.div-block-136 .hero-video-wrap {
  top: -1px !important;
  left: -1px !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
}

/* DESKTOP: show the 3 feature videos as 3 portrait cards side by side
   (static row, slider-like but no sliding). Mobile stays stacked as-is. */
@media (min-width: 768px) {
  .content-1-section-1 { padding-left: 6vw !important; padding-right: 6vw !important; }
  .div-block-134 { height: auto !important; width: 100% !important; }
  .quick-stack-21 {
    width: 88vw !important;
    height: 80vh !important;
  }
  /* 1 row × 3 columns */
  #w-node-c0d49f8f-43d4-4aad-6030-5707773fe2f5-a2dbbe00 {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    grid-column-gap: 20px !important;
    grid-row-gap: 0 !important;
  }
  /* each cell becomes a portrait card; trigger covers its own card */
  .quick-stack-21 .w-layout-cell { position: relative !important; height: 80vh !important; }
  .trigger {
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
  }
}

/* Icon chips — red radial pill (white icon) */
.div-block-145 {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.1)) !important;
  background-color: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 100px !important;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}
.div-block-145 .image-130 { filter: brightness(0) !important; opacity: 0.78 !important; }  /* dark icon on glass */
.div-block-136:hover .div-block-145 {
  transform: scale(1.08) !important;
  background-color: rgba(255,255,255,0.3) !important;
}

/* Caption label — Fauna dark glass pill */
.video_text {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border-radius: 100px !important;
  /* liquid glass (intensified) */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04)) !important;
  background-color: rgba(40,28,18,0.18) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  padding: 8px 16px !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FUNCIONES CARD — Fauna "video + selectable options" (built by hk-funciones.js)
   Sticky panel: left = lottie media · right = cream card with pill buttons
   ════════════════════════════════════════════════════════════════════════════ */
.lottie-sticky {
  border-radius: 28px !important;
  background-color: var(--hk-card) !important;   /* cream panel behind card */
  overflow: hidden !important;
}
/* Right card column */
.lottie-section .lottie-text-div {
  width: 46% !important;
  height: 100% !important;
  padding: 52px 48px !important;
  display: flex !important;
  flex-flow: column !important;
  justify-content: space-between !important;
  background-color: var(--hk-card) !important;
}
/* Left media column — inset the video from the panel edges */
.lottie-section .div-block-129 {
  width: 54% !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
.lottie-section .div-block-129 canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;   /* concentric: 28px panel − 16px padding */
}
.lottie-section .div-block-129 .scroll-image-1,
.lottie-section .div-block-129 .scroll-image-2,
.lottie-section .div-block-129 .scroll-image-3 {
  border-radius: 12px !important;   /* concentric: 28px panel − 16px padding */
}

.hk-fn-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.hk-fn-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hk-coral);
  margin-bottom: 16px;
}
.hk-fn-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--hk-ink);
  text-wrap: balance;
  margin: 0 0 20px 0;
}
.hk-fn-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--hk-muted);
  text-wrap: pretty;
  max-width: 440px;
}
/* enter transition on feature change */
.hk-fn-head { transition: none; }
.hk-fn-in .hk-fn-sub,
.hk-fn-in .hk-fn-title,
.hk-fn-in .hk-fn-desc {
  animation: hkFnIn 0.5s cubic-bezier(0.22,0.61,0.36,1) both;
}
.hk-fn-in .hk-fn-title { animation-delay: 0.04s; }
.hk-fn-in .hk-fn-desc  { animation-delay: 0.08s; }
@keyframes hkFnIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Pill buttons (the titles) */
.hk-fn-btns {
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-top: 28px;
}
.hk-fn-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  /* inactive = liquid glass (intensified) */
  color: var(--hk-ink);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12));
  background-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 16px -10px rgba(0,0,0,0.2);
  border-radius: 100px;
  padding: 15px 22px;
  cursor: pointer;
  text-align: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.hk-fn-btn:hover { background-color: rgba(255,255,255,0.4); }
.hk-fn-btn:active { transform: scale(0.96); }
.hk-fn-btn.is-active {
  /* selected = solid red */
  color: #fff;
  background: var(--hk-grad-radial);
  border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(199,80,48,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.hk-fn-btn.is-active:hover { filter: brightness(1.06); }

@media (max-width: 767px) {
  .lottie-section .lottie-text-div { width: 100% !important; padding: 32px 24px !important; }
  .hk-fn-title { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LOTTIE SECTION 2 — "La tecnología vive dentro de tu ropa"
   Fix: kill the mismatched cream box · center + round the media card
   ════════════════════════════════════════════════════════════════════════════ */
.lottie-section-2 {
  background-color: transparent !important;   /* was a lighter box on cream-2 */
  width: 100% !important;
  height: 170vh !important;
  margin-top: 0 !important;
}
.lottie-sticky-2 {
  width: 100% !important;
  height: 100vh !important;          /* fill viewport so content can center */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  align-items: center !important;
  justify-content: center !important; /* center heading + media as a group */
  top: 0 !important;
  padding-top: 0 !important;
}
/* Heading block — centered with breathing room */
.section-heading-2 {
  align-items: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 32px !important;
}
/* Media card — rounded, centered, premium · taller box */
.div-block-129-2 {
  width: 48vw !important;
  max-width: 680px !important;
  height: 68vh !important;                      /* taller than original, still fits centered */
  aspect-ratio: auto !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background-color: #1A1209 !important;        /* matches the dark garment shot */
  box-shadow: 0 30px 70px -30px rgba(26,18,9,0.45) !important;
}
.div-block-129-2 canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 26px !important;
}
.scroll-image-4 { border-radius: 26px !important; }

.lottie-text-title {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  text-wrap: balance !important;
  color: var(--hk-ink) !important;
}
.lottie-text-title .text-span-16 { color: rgba(26,18,9,0.45) !important; }
.lottie-text {
  font-weight: 400 !important;
  line-height: 1.65 !important;
  font-size: 15px !important;
  color: var(--hk-muted) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADINGS — shared large display style
   ════════════════════════════════════════════════════════════════════════════ */
.section-2-text-1 {
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  text-wrap: balance !important;
  color: var(--hk-ink) !important;
}
.section-2-text-2 {
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  text-wrap: pretty !important;
  color: var(--hk-muted) !important;
}
.bold-text-2-copy-copy {
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
  color: var(--hk-ink) !important;
}
/* keep its width so the word-split reveal wraps normally (not 1 word/line) */
.bold-text-2-copy-copy.hk-rv {
  display: block !important;
  width: 60vw !important;
  max-width: 60vw !important;
  margin: 0 auto !important;
  text-align: center !important;
  white-space: normal !important;
}
.bold-text-35, .bold-text-35 strong.bold-text-35 {
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  line-height: 1.0 !important;
  color: var(--hk-ink) !important;
}
.text-block-6-copy {
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: -0.01em !important;
  text-wrap: pretty !important;
  color: var(--hk-muted) !important;
}

/* Eyebrow labels */
.text-block-3, .text-block-3-3, .section-1-subtitle {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(26,18,9,0.42) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION-5 — "Made responsible / safe / green" + design photo cards
   ════════════════════════════════════════════════════════════════════════════ */
.text-block-71 {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.0 !important;
  text-wrap: balance !important;
  color: var(--hk-ink) !important;
}
.text-block-10-4-2 {
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em !important;
  color: var(--hk-muted) !important;
}
.text-block-10-4-3 {
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  mix-blend-mode: difference !important;   /* inverts vs the image behind it */
}
.text-block-10-5-2 {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  mix-blend-mode: difference !important;   /* inverts vs the image behind it */
}
/* Photo cards — warm surface, large radius */
.container-321 {
  background-color: #E2D2B8 !important;   /* neutral warm beige (no accent colours) */
  background-image: none !important;
  border-radius: 26px !important;
}

/* "Los 9 meses" image (cell-45): the image box was 160vh tall, pushing the
   overlay text far below the viewport so it never showed. Shorten it so the
   bottom of the image — where the text sits — lands in view. */
/* Blend setup for "Los 9 meses": container-241-3 is the isolation group; the
   static image-76 is the blend backdrop; the absolute text overlay (no z-index,
   no transform) sits above it and inverts via mix-blend-mode. */
.container-241-3 {
  height: 110vh !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.image-102 { border-radius: 26px !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) !important; }
/* image-76 = positioned layer (taller than its box) so JS can pan it vertically
   via `top` for parallax — `top` (unlike transform) keeps the text blend intact */
.image-76 {
  border-radius: 26px !important;
  position: absolute !important;
  left: 0 !important;
  top: -10%;                  /* no !important — JS animates this for parallax */
  width: 100% !important;
  height: 120% !important;
  object-fit: cover !important;
  z-index: -1 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SLIDER (experts) — Fauna rounded media + coral pagination
   ════════════════════════════════════════════════════════════════════════════ */
.slide.swiper-slide, .swiper-slide, .slide {
  border-radius: 26px !important;
  background-color: var(--hk-card) !important;
}
.paragraph-12, .paragraph-12-centered,
.paragraph-12-copy, .paragraph-12-copy-black-copy {
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
}
/* Room for the hover lift so the card top isn't clipped by overflow:hidden */
.funciones-slider .swiper,
.section_2_app .swiper {
  padding-top: 16px !important;
  margin-top: -16px !important;
}

/* ── Liquid glass on the slider controls (play / pause / pagination) ── */
.swiper-button,
.swiper-pagination {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.1)) !important;
  background-color: rgba(255,255,255,0.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SLIDERS — Apple product-gallery composition (applied to BOTH carousels:
   .funciones-slider "Diseñado por expertos" + .section_2_app "La app").
   NOTE: both sections share a duplicate id="demo", so we scope by CLASS, never
   by #demo. Measurements mirror Apple's gallery component:
     · caption  17px / 25px line / -0.022em / weight 400, 20px below the card
     · media    border-radius scales 18→28px like Apple's responsive cards
     · arrows   36px circles, subtle gray, bottom-right (no dots / play pill)
   Arrow elements + autoplay are wired by hk-funciones.js.
   ════════════════════════════════════════════════════════════════════════════ */
/* Card is just the image — drop the filled card background + center alignment */
.funciones-slider .slide.swiper-slide,
.section_2_app .slide.swiper-slide {
  background: transparent !important;
  background-color: transparent !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  row-gap: 0 !important;
  height: auto !important;
}
/* Uniform rounded image card (was an absolutely-overlaid full-bleed image) */
.funciones-slider .image-124,
.section_2_app .image-124 {
  order: 0 !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  border-radius: clamp(18px, 4vw, 28px) !important;
  display: block !important;
}
/* Subtle edge outline so the media reads with consistent depth.
   inset box-shadow follows the border-radius (outline would not). */
.section_2_app .image-124 { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) !important; }
.funciones-slider .image-124 { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1) !important; }
/* Caption below the card — Apple gallery type spec */
.funciones-slider .paragraph-12,
.funciones-slider .paragraph-12-centered,
.funciones-slider .paragraph-12-copy,
.funciones-slider .paragraph-12-copy-black-copy,
.section_2_app .paragraph-12,
.section_2_app .paragraph-12-centered,
.section_2_app .paragraph-12-copy,
.section_2_app .paragraph-12-copy-black-copy {
  order: 1 !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 12px !important;
  margin: 20px 0 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  color: rgba(45, 40, 32, 0.7) !important;
  /* Apple gallery caption type — San Francisco (renders natively on Apple
     devices via -apple-system): small, semibold, tight line spacing */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Quote attribution (-Ltf. Kaliria…) shares the caption's text style */
.funciones-slider .text-span-17,
.section_2_app .text-span-17 {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
}

/* Hide the old pagination dots + autoplay play/pause buttons (kept in DOM for
   the Swiper init guard) and lay the controls row out as Apple does */
.funciones-slider .swiper-pagination,
.funciones-slider .swiper-navigation-buttons,
.section_2_app .swiper-pagination,
.section_2_app .swiper-navigation-buttons { display: none !important; }
.funciones-slider .div-block-130,
.section_2_app .div-block-130 { width: 100% !important; }
.funciones-slider .swiper-controls,
.section_2_app .swiper-controls {
  width: 100% !important;
  height: auto !important;
  margin: 24px 0 0 !important;
  padding: 0 max(22px, 5vw) !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* Apple paddlenav arrows: 36px gray circles (neutralise Swiper's absolute nav) */
.funciones-slider .hk-nav-arrow,
.section_2_app .hk-nav-arrow {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: rgba(45, 40, 32, 0.72);
  background-color: rgba(45, 40, 32, 0.05) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background-color .2s ease, transform .15s ease;
}
.funciones-slider .hk-nav-arrow::after,
.section_2_app .hk-nav-arrow::after { content: "" !important; display: none !important; }
/* Extend the tap target to ~44px without growing the visible 36px circle */
.funciones-slider .hk-nav-arrow::before,
.section_2_app .hk-nav-arrow::before { content: "" !important; position: absolute !important; inset: -4px !important; display: block !important; }
.funciones-slider .hk-nav-arrow:active,
.section_2_app .hk-nav-arrow:active { transform: scale(0.96) !important; }
.funciones-slider .hk-nav-arrow svg,
.section_2_app .hk-nav-arrow svg { width: 16px; height: 16px; display: block; }
.funciones-slider .hk-nav-arrow:hover,
.section_2_app .hk-nav-arrow:hover { background-color: rgba(45, 40, 32, 0.1) !important; }
.funciones-slider .hk-nav-arrow:active,
.section_2_app .hk-nav-arrow:active { background-color: rgba(45, 40, 32, 0.14) !important; }
.funciones-slider .swiper-button-disabled,
.section_2_app .swiper-button-disabled { opacity: 0.42 !important; pointer-events: none !important; }

/* Webflow baked a `margin-left:-30vw` onto .swiper-wrapper that shoves the whole
   track 30vw off the left edge on desktop — undo it so the track starts at 0. */
.funciones-slider .swiper-wrapper,
.section_2_app .swiper-wrapper { margin-left: 0 !important; }

/* App-slider, slide 1: the old App Store badge (.link-block-7 overlay) is replaced
   by a clickable text link that sits BELOW the caption (order:2 in the flex column:
   image=0, caption=1, link=2), aligned to the caption's 12px gutter. */
.section_2_app .hk-app-link {
  order: 2 !important;
  align-self: flex-start;
  width: auto;
  margin: 8px 12px 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--hk-coral) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-font-smoothing: antialiased;
  transition: opacity .2s ease, transform .15s ease;
}
.section_2_app .hk-app-link:hover { opacity: .65 !important; }
.section_2_app .hk-app-link:active { transform: scale(0.96) !important; }
@media (min-width: 768px) {
  .section_2_app .hk-app-link { font-size: 16px; margin-top: 10px; }
}

/* Desktop: captions read at Apple's gallery size (~17px), not the 14px we tuned
   for mobile. Larger card, larger caption below it. */
@media (min-width: 768px) {
  .funciones-slider .paragraph-12,
  .funciones-slider .paragraph-12-centered,
  .funciones-slider .paragraph-12-copy,
  .funciones-slider .paragraph-12-copy-black-copy,
  .section_2_app .paragraph-12,
  .section_2_app .paragraph-12-centered,
  .section_2_app .paragraph-12-copy,
  .section_2_app .paragraph-12-copy-black-copy {
    font-size: 17px !important;
    line-height: 1.47 !important;
    font-weight: 400 !important;
    letter-spacing: -0.012em !important;
    margin-top: 22px !important;
  }
}

/* ── Coffee-brown background ONLY on the slider block (.container-329) ──
   The funciones-slider <section> also holds the "La tecnología vive dentro de
   tu ropa" block below, which must stay on the normal background. So we paint
   just the carousel container and flip its heading / captions / arrows light. */
.funciones-slider .container-329 { background-color: var(--hk-ink) !important; }
.funciones-slider .container-329 .section-2-text-1 { color: var(--hk-cream) !important; }
.funciones-slider .container-329 .section-2-text-2 { color: rgba(248, 240, 227, 0.72) !important; }
.funciones-slider .paragraph-12,
.funciones-slider .paragraph-12-centered,
.funciones-slider .paragraph-12-copy,
.funciones-slider .paragraph-12-copy-black-copy { color: rgba(248, 240, 227, 0.82) !important; }
.funciones-slider .hk-nav-arrow {
  color: rgba(248, 240, 227, 0.9);
  background-color: rgba(255, 255, 255, 0.12) !important;
}
.funciones-slider .hk-nav-arrow:hover { background-color: rgba(255, 255, 255, 0.2) !important; }
.funciones-slider .hk-nav-arrow:active { background-color: rgba(255, 255, 255, 0.26) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   FUNCIONES INTRO — Fauna-style headline reveal (built by hk-reveal-text.js)
   ════════════════════════════════════════════════════════════════════════════ */
.section-heading-1 .section-2-text-2.hk-rv {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(34px, 5vw, 88px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
  color: var(--hk-ink) !important;
  max-width: 18ch !important;
  margin: 0 auto !important;
}
.hk-rv-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);  /* slower */
  will-change: opacity, transform;
}
.hk-rv.is-in .hk-rv-word { opacity: 1; transform: none; }      /* whole-block reveal */
.hk-rv-word.is-in { opacity: 1; transform: none; }             /* per-word reveal (scrub) */

/* ════════════════════════════════════════════════════════════════════════════
   MODALS (audio / posture popups)
   ════════════════════════════════════════════════════════════════════════════ */
/* Center the modal box vertically (was margin-pushed to the bottom) + liquid glass */
.audio-stimulation-wrapper {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.06)) !important;
  background-color: rgba(248, 240, 227, 0.38) !important;
  backdrop-filter: blur(44px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(44px) saturate(210%) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.section-1-title {
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
}
.section-1-text {
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: -0.01em !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER — warm near-black block (premium contrast to cream), coral accents
   ════════════════════════════════════════════════════════════════════════════ */
.container-111 { background-color: var(--hk-ink) !important; }
.footer-6 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}
.footer-7 {
  color: rgba(255,255,255,0.6) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.6 !important;
}
.footer-8 {
  color: rgba(255,255,255,0.4) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.footer-1 {
  color: rgba(255,255,255,0.78) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.6 !important;
}
.footer-2 {
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.footer-3, .footer-4, .footer-5 {
  color: rgba(255,255,255,0.62) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.8 !important;
  transition: color 0.2s ease !important;
}
.footer-3:hover, .footer-5:hover { color: var(--hk-rose) !important; opacity: 1 !important; }

/* Newsletter form */
.form-block.w-form { width: 80% !important; margin-left: 10% !important; }
/* Mobile: line up the register block with the rest of the footer text. The
   addresses/links are .w-container (88% wide, centered → ~23px inset); the form
   is .w-form (no auto-centering) so it sat flush at the edge. Match it: same 88%
   centered width so its left edge aligns with the footer text. */
@media (max-width: 767px) {
  .form-block.w-form { width: 88% !important; margin-left: auto !important; margin-right: auto !important; }
}
.text-field-3.w-input {
  border-radius: 100px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  padding: 14px 22px !important;
}
.text-field-3.w-input::placeholder { color: rgba(255,255,255,0.4) !important; }
.submit-button-2.w-button {
  background-color: #CB4441 !important;
  background-image: var(--hk-grad-radial) !important;   /* red radial */
  border-radius: 100px !important;
  transition: filter 0.2s ease, transform 0.2s ease !important;
}
.submit-button-2.w-button:hover { filter: brightness(1.12) !important; }
.submit-button-2.w-button:active { transform: scale(0.96) !important; }
/* The submit arrow (white chevron, rotated → points right) was hidden BEHIND the
   button (button z-index:20). Bring it on top and let clicks pass through to the
   button so it shows as the send arrow on both desktop and mobile. */
.image-103-2 {
  z-index: 21 !important;
  pointer-events: none !important;
  height: 26px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SPACING — let sections breathe like Fauna
   ════════════════════════════════════════════════════════════════════════════ */
.section-inner { padding-top: 80px !important; padding-bottom: 80px !important; }

/* Tighten the gap between the app slider section and section-5 */
.section_2_app { padding-bottom: 3vh !important; }
.container-69 { margin-top: 0 !important; }
.section-heading-1 { margin-top: 22vh !important; margin-bottom: 18vh !important; }

/* ════════════════════════════════════════════════════════════════════════════
   WIDTHS — fill the viewport better; less empty cream around content
   (sections were ~70–80vw centered, leaving large blank gutters)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Funciones card keeps its original 70vw width (looked right) */

  /* Centered headings were boxed in by 25vw side padding — widen them */
  .section-heading {
    padding-left: 14vw !important;
    padding-right: 14vw !important;
    margin-top: 9vh !important;
  }

  /* Section-5 (design / "Made responsible") layout */
  .quick-stack-15 { width: 90vw !important; }
  .container-255  { width: 90vw !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* ── Hero ── */
  .hero {
    margin: 70px 8px 0 8px !important;
    width: calc(100vw - 16px) !important;
    border-radius: 18px !important;
    height: 78vh !important;
  }
  .hero-texts { margin-top: 56vh !important; padding-left: 6% !important; padding-right: 6% !important; }
  .hero-title { font-size: 26px !important; }
  .hero-subtitle, .hero-subtitle strong { font-size: 11px !important; }

  /* CTA moved below the video card — full width, small gap above */
  .hk-hero-btn-mobile {
    display: flex !important;
    width: calc(100vw - 16px) !important;
    margin: 10px auto 0 !important;
    justify-content: center !important;
  }

  /* ── Navbar → floating rounded pill ── */
  .navbar.w-nav {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
    width: calc(100vw - 20px) !important;
    height: 56px !important;
    padding: 0 8px 0 22px !important;
    border-radius: 20px !important;
    /* liquid glass pill (intensified) */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.08)) !important;
    background-color: rgba(243, 240, 233, 0.32) !important;
    -webkit-backdrop-filter: blur(32px) saturate(220%) !important;
    backdrop-filter: blur(32px) saturate(220%) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 1px rgba(255,255,255,0.2) !important;
  }
  .container-328.w-container { height: 56px !important; padding: 0 !important; }
  .image-117 { height: 18px !important; }
  .w-nav-button { display: none !important; }      /* hamburger does nothing (links hidden) */
  .navbar.w-nav.hk-nav-hidden { transform: none !important; }  /* stay fixed on mobile (no hide on scroll) */
  /* In the hero: logo centered, Comprar hidden */
  .brand.w-nav-brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .comprar.w-nav-link {
    display: none !important;
    font-size: 13px !important;
    padding: 9px 18px !important;
    border: none !important;          /* remove the dark outline */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Past the hero: logo to the left, Comprar appears on the right */
  .navbar.w-nav.hk-past-hero .brand.w-nav-brand {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
  .navbar.w-nav.hk-past-hero .comprar.w-nav-link {
    display: inline-flex !important;
  }

  /* ── Funciones intro headline ── */
  .section-heading-1 { margin-top: 8vh !important; margin-bottom: 16vh !important; }
  /* Cinematic headline: wider measure, generous leading, refined tracking */
  .section-heading-1 { width: 100% !important; align-items: center !important; padding-left: 0 !important; padding-right: 0 !important; }
  .section-heading-1 .section-2-text-2.hk-rv {
    max-width: 84vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.05em !important;
    text-align: center !important;
    color: #15110A !important;
  }
  /* blur-to-sharp word reveal — properties set separately so the JS per-word
     transition-delay (stagger) is preserved → real word-by-word reveal */
  .section-heading-1 .hk-rv-word {
    filter: blur(9px) !important;
    transform: translateY(0.5em) scale(1.04) !important;
    transition-property: opacity, transform, filter !important;
    transition-duration: 0.95s !important;
    transition-timing-function: cubic-bezier(.2,.6,.2,1) !important;
  }
  .section-heading-1 .hk-rv.is-in .hk-rv-word {
    filter: blur(0) !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* ── Funciones card → mobile: ONE fixed-size box that fills the screen with
        equal margins on all sides; video flexes to fill, text/buttons pinned
        at the bottom. Box height never changes with the text. ── */
  .lottie-section { height: 320svh !important; width: 100vw !important; }
  .lottie-sticky {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: calc(100vw - 24px) !important;          /* 12px each side */
    margin: 0 auto !important;
    height: calc(100svh - 84px) !important;        /* fixed: 60px navbar + 12px top + 12px bottom */
    top: 72px !important;                           /* 60px navbar + 12px gap (= side margin) */
    background: var(--hk-card) !important;
    border-radius: 22px !important;
    padding: 12px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  /* video fills all remaining height (min-height:0 lets the flex item shrink) */
  .lottie-section .div-block-129 {
    order: -1 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 10px !important;   /* concentric: 22px box − 12px padding */
  }
  .lottie-section .div-block-129 canvas,
  .lottie-section .div-block-129 .scroll-image-1,
  .lottie-section .div-block-129 .scroll-image-2,
  .lottie-section .div-block-129 .scroll-image-3 {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px !important;   /* concentric: 22px box − 12px padding */
  }
  /* text + buttons take only what they need, pinned under the video */
  .lottie-section .lottie-text-div {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    padding: 0 4px !important;
    background: transparent !important;
  }
  .hk-fn-card { height: auto !important; display: block !important; }
  .hk-fn-sub { font-size: 10.5px !important; margin-bottom: 5px !important; }
  .hk-fn-title { font-size: 21px !important; line-height: 1.05 !important; margin-bottom: 7px !important; }
  .hk-fn-desc { font-size: 12.5px !important; line-height: 1.42 !important; }
  /* buttons: horizontal swipeable chips (saves vertical space) */
  .hk-fn-btns {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  /* fade only on the side(s) where chips are cut off (classes toggled by JS) */
  .hk-fn-btns.hk-fade-left.hk-fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%) !important;
  }
  .hk-fn-btns.hk-fade-left:not(.hk-fade-right) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px) !important;
    mask-image: linear-gradient(to right, transparent 0, #000 26px) !important;
  }
  .hk-fn-btns.hk-fade-right:not(.hk-fade-left) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%) !important;
  }
  .hk-fn-btns::-webkit-scrollbar { display: none !important; }
  .hk-fn-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
    padding: 10px 16px !important;
  }

  /* ── Tech section "La tecnología vive dentro de tu ropa" (mobile fixes) ── */
  /* Gap above the section so the title isn't glued to the brown slider block
     above — matches the sticky's 14vh offset */
  .lottie-section-2 { margin-top: 14vh !important; }
  /* Sticky band starts just below the navbar; content sits at the TOP of the
     band (title right under the navbar) so it reads high, not mid-screen */
  .lottie-sticky-2 {
    top: 14vh !important;
    height: 86vh !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }
  /* Title + subtitle: both full-width and centered (title was left-aligned) */
  .lottie-section-2 .section-heading-2 {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  .lottie-section-2 .section-2-text-1,
  .lottie-section-2 .section-2-text-2 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .lottie-section-2 .section-2-text-1 {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.08 !important;
  }
  /* Tall circuit "video", but not hugging the bottom edge */
  .div-block-129-2 { width: 86vw !important; max-width: none !important; height: 58vh !important; }

  /* ── "La moda y la innovación…" heading ── */
  .container-86-copy-3 { width: 90vw !important; }
  .bold-text-2-copy-copy.hk-rv { width: 90vw !important; max-width: 90vw !important; font-size: clamp(30px, 9vw, 48px) !important; }
  .container-87 { top: 0 !important; height: 70vh !important; }

  /* ── Centered section headings (experts / app) ── */
  .section-heading { padding-left: 6vw !important; padding-right: 6vw !important; }

  /* ── 3 video cards (stacked on mobile) — were too narrow (20vw padding) ── */
  .content-1-section-1 { padding-left: 5vw !important; padding-right: 5vw !important; padding-top: 3vh !important; }

  /* "Los 9 meses" (.hk-9m) — base is inline in index.html (photo + text below).
     On mobile, overlay the text on the lower part of the photo with a coffee
     gradient for legibility. */
  /* The full-bleed section lands at x≈1px (its grid cell is offset), leaving a
     ~1px hairline of page background on the left edge. Overshoot both sides by a
     couple px so the image + gradient cover edge-to-edge; the overshoot is clipped
     page-wide by .body-20 { overflow-x: clip } so it adds no horizontal scroll. */
  .hk-9m {
    position: relative !important;
    height: 100vh !important;
    overflow: hidden !important;
    border-radius: 26px 26px 0 0 !important;
    isolation: isolate !important;
    width: calc(100vw + 4px) !important;
    margin-left: calc(50% - 50vw - 2px) !important;
  }
  .hk-9m-img { height: 100vh !important; object-fit: cover !important; object-position: center !important; }
  /* Gradient lives on the SECTION (not the text), pinned to the bottom, so it
     stays fixed while only the text parallaxes. z-index sits above the image but
     below the text, so the text still inverts (mix-blend) over it + the photo. */
  .hk-9m::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 50vh !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background-image: linear-gradient(to bottom,
      rgba(26, 18, 9, 0) 0%,
      rgba(26, 18, 9, 0.55) 45%,
      #1A1209 100%) !important;
  }
  .hk-9m-text {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 50vh !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 7vw 9vw 7vw !important;
    background-image: none !important;
  }
  .hk-9m-text h2,
  .hk-9m-text p {
    color: #fff !important;
    mix-blend-mode: difference !important;
  }
}

/* "Los 9 meses" on desktop: full photo (woman complete), text overlaid on its
   lower part with 15vw left margin. No gradient — the text uses mix-blend-mode
   difference so it auto-inverts (black over light, white over dark areas). */
@media (min-width: 768px) {
  .hk-9m { position: relative; isolation: isolate; }
  .hk-9m-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 7vw 28vh 15vw !important;
    background-image: none !important;
  }
  .hk-9m-text h2,
  .hk-9m-text p {
    color: #fff !important;
    mix-blend-mode: difference !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   STATS / BATTERY SECTION (.hk-stats) — Apple "battery built for stamina" style
   Coffee-brown block after the app slider · big terracotta numbers · real figures.
   ════════════════════════════════════════════════════════════════════════════ */
.hk-stats {
  width: 100%;
  background-color: var(--hk-ink, #1A1209);
  color: #F8F0E3;
  padding: 14vw 7vw 16vw;
  -webkit-font-smoothing: antialiased;
}
.hk-stats-inner { max-width: 700px; margin: 0 auto; }
.hk-stats-icon { display: none; }   /* desktop-only accent icon */
/* Apple battery-section type: headline ~40px semibold, body 17px */
.hk-stats-title {
  margin: 0 0 22px;
  color: #F8F0E3;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
  font-size: clamp(30px, 8.2vw, 40px);
}
.hk-stats-intro {
  margin: 0 0 44px;
  max-width: 600px;
  color: rgba(248, 240, 227, 0.62);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  font-size: 17px;
}
.hk-stat { margin-bottom: 46px; }
.hk-stat:last-child { margin-bottom: 0; }
.hk-stat-kicker,
.hk-stat-desc {
  display: block;
  color: rgba(248, 240, 227, 0.62);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.01em;
  font-size: 16px;
}
.hk-stat-kicker { margin-bottom: 2px; }
.hk-stat-desc { margin-top: 8px; max-width: 520px; text-wrap: pretty; }
.hk-stat-num {
  display: block;
  color: var(--hk-coral, #CB4441);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-size: clamp(33px, 9vw, 40px);
}
@media (min-width: 768px) {
  .hk-stats { padding: 100px 8vw 120px; }
  .hk-stats-inner { max-width: 820px; }
  .hk-stats-icon { display: block; width: 44px; height: 44px; margin-bottom: 22px; }
  .hk-stats-title { font-size: 48px; margin-bottom: 24px; }
  .hk-stats-intro { margin-bottom: 80px; max-width: 560px; }
  /* stats as a 2×2 grid (Apple desktop) */
  .hk-stats-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 64px; }
  .hk-stat { margin-bottom: 0; }
  .hk-stat-num { font-size: 48px; }
}