/* =========================================================
   KEM SHOP 2026 — Colors & Type Foundations
   ========================================================= */

/* Webfonts:
   - Bodoni Moda — closest free substitute for PERANDORY (high-contrast didone)
   - Pinyon Script — closest free substitute for Symphony (delicate copperplate cursive)
   - Inter — UI body
   ORIGINAL FONTS: Perandory (display serif) + Symphony (script). Substituted because not free. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,700&family=MonteCarlo&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ─────────── Brand palette (user-specified) ─────────── */
  --kem-espresso:      #2f1a00;  /* deepest brown — KEM serif logo, headings */
  --kem-cocoa:         #604c35;  /* mid brown — Shop script, accents, body on cream */
  --kem-mocha:         #af977a;  /* warm taupe — secondary, dividers, soft text */
  --kem-cream:         #fff3e5;  /* primary background */

  /* Extended (derived for richer system) */
  --kem-cream-50:      #fffaf3;  /* almost-white cream highlight */
  --kem-cream-200:     #fbe8d2;  /* card / hover surface */
  --kem-blush:         #f5dcc6;  /* pink-blush accent (acuarela touch) */
  --kem-rose:          #e9b9a3;  /* rose pastel accent */
  --kem-sand:          #d9c3a7;  /* between mocha & cream */
  --kem-bark:          #4a3520;  /* between espresso & cocoa */

  /* ─────────── Semantic colors ─────────── */
  --bg:                var(--kem-cream);
  --bg-elev:           var(--kem-cream-50);
  --bg-card:           #ffffff;
  --bg-soft:           var(--kem-cream-200);

  --fg:                var(--kem-espresso);     /* primary text */
  --fg-muted:          var(--kem-cocoa);        /* secondary text */
  --fg-soft:           var(--kem-mocha);        /* tertiary / hint */
  --fg-on-dark:        var(--kem-cream);        /* text on espresso surface */

  --accent:            var(--kem-cocoa);        /* primary action color */
  --accent-hover:      var(--kem-bark);
  --accent-press:      var(--kem-espresso);

  --border:            rgba(47, 26, 0, 0.12);   /* hairline */
  --border-strong:     rgba(47, 26, 0, 0.24);
  --divider:           var(--kem-sand);

  --success:           #6a8a5a;
  --warning:           #c97f3a;
  --danger:            #a84a3a;

  /* ─────────── Type families ─────────── */
  --font-serif:        'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --font-script:       'MonteCarlo', 'Petit Formal Script', 'Brush Script MT', cursive;
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─────────── Type scale (modular, 1.25 minor third) ─────────── */
  --fs-xs:             12px;
  --fs-sm:             14px;
  --fs-base:           16px;
  --fs-md:             18px;
  --fs-lg:             22px;
  --fs-xl:             28px;
  --fs-2xl:            36px;
  --fs-3xl:            48px;
  --fs-4xl:            64px;
  --fs-display:        96px;

  --lh-tight:          1.05;
  --lh-snug:           1.2;
  --lh-normal:         1.5;
  --lh-relaxed:        1.7;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.18em;   /* "PASO #1", labels */

  /* ─────────── Spacing (4px base) ─────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ─────────── Radii ─────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ─────────── Elevation (warm-tinted, soft) ─────────── */
  --shadow-xs:   0 1px 2px rgba(47, 26, 0, 0.06);
  --shadow-sm:   0 2px 6px rgba(47, 26, 0, 0.08);
  --shadow-md:   0 8px 20px -6px rgba(47, 26, 0, 0.12), 0 2px 4px rgba(47, 26, 0, 0.04);
  --shadow-lg:   0 18px 40px -12px rgba(47, 26, 0, 0.18), 0 4px 8px rgba(47, 26, 0, 0.06);
  --shadow-xl:   0 32px 64px -16px rgba(47, 26, 0, 0.22);
  --shadow-inset:inset 0 1px 2px rgba(47, 26, 0, 0.08);

  /* ─────────── Motion ─────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur:         220ms;
  --dur-slow:    400ms;
}

/* =========================================================
   Semantic typography classes (use these in pages)
   ========================================================= */
html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); }

.kem-display {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.kem-h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.kem-h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.kem-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.kem-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--fg-muted);
}
.kem-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.kem-step-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}
.kem-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}
.kem-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.kem-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--fg-soft);
  letter-spacing: 0.02em;
}
.kem-cta {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* =========================================================
   KEM SHOP Landing — Page Styles
   ========================================================= */

    /* Reset for semantic HTML elements (no default margins/padding) */
    figure, blockquote, article { margin: 0; padding: 0; }
    blockquote { quotes: none; }

    /* PP Eiko — user-licensed brand serif */
    @font-face {
      font-family: 'PP Eiko';
      src: url('../fonts/PPEiko-Thin.otf') format('opentype');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'PP Eiko';
      src: url('../fonts/PPEiko-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'PP Eiko';
      src: url('../fonts/PPEiko-Heavy.otf') format('opentype');
      font-weight: 800;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --font-display: 'PP Eiko', 'Bodoni Moda', Didot, serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      background: var(--kem-cream);
      color: var(--kem-espresso);
      font-family: var(--font-sans);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ─────── LAYOUT ─────── */
    .wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .section {
      padding: 96px 0;
      position: relative;
    }

    .eyebrow {
      display: inline-block;
      padding: 6px 14px;
      background: var(--kem-blush);
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--kem-cocoa);
      font-weight: 600;
    }

    h2.h-display {
      font-family: var(--font-display);
      font-size: 56px;
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 500;
      margin: 16px 0 12px;
    }

    h2.h-display em {
      font-style: italic;
      color: var(--kem-cocoa);
      font-weight: 200;
    }

    .lead {
      font-size: 17px;
      line-height: 1.6;
      color: var(--kem-cocoa);
      max-width: 640px;
    }

    /* ─────── HEADER (V3 layout, V2 pill nav) ─────── */
    .util {
      background: var(--kem-espresso);
      color: var(--kem-cream);
      padding: 8px 0;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .util-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .util-left {
      display: flex;
      gap: 24px;
    }

    .util-left span {
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }

    .util-left .pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #6a8a5a;
      box-shadow: 0 0 0 4px rgba(106, 138, 90, 0.32);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 4px rgba(106, 138, 90, 0.32);
      }

      50% {
        box-shadow: 0 0 0 8px rgba(106, 138, 90, 0);
      }
    }

    .util-left .util-dup { display: none; }

    .util-right {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .util-right a:hover {
      color: var(--kem-blush);
    }

    .nav {
      padding: 18px 0;
      background: rgba(255, 243, 229, 0.86);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .nav-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
    }

    .nav-pill {
      display: flex;
      gap: 4px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid var(--border);
      border-radius: 999px;
    }

    .nav-pill a {
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--kem-cocoa);
      transition: background 200ms, color 200ms;
    }

    .nav-pill > a:hover {
      background: var(--kem-cream-200);
      color: var(--kem-espresso);
    }

    .nav-pill a.active {
      background: var(--kem-espresso);
      color: var(--kem-cream);
    }

    .nav-actions {
      display: flex;
      gap: 8px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 999px;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0;
      border: 1.5px solid transparent;
      transition: all 220ms var(--ease-out);
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--kem-espresso);
      color: var(--kem-cream);
      border-color: var(--kem-espresso);
    }

    .btn-primary:hover {
      background: var(--kem-bark);
    }

    .btn-cocoa {
      background: var(--kem-cocoa);
      color: var(--kem-cream);
      border-color: var(--kem-cocoa);
    }

    .btn-ghost {
      background: transparent;
      color: var(--kem-espresso);
      border-color: rgba(47, 26, 0, 0.32);
    }

    .btn-ghost:hover {
      background: var(--kem-cream-200);
    }

    .hero .btn-ghost:hover {
      background: rgba(255, 243, 229, 0.15);
      color: var(--kem-cream);
    }

    .btn-cream {
      background: var(--kem-cream);
      color: var(--kem-espresso);
      border-color: var(--kem-cream);
    }

    .btn-cream:hover {
      background: var(--kem-blush);
    }

    .btn-blush {
      background: var(--kem-blush);
      color: var(--kem-espresso);
      border-color: var(--kem-blush);
    }

    .btn-lg {
      padding: 14px 24px;
      font-size: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ─────── HERO (V2 grid + V3 espresso bg) ─────── */
    .hero {
      background: var(--kem-espresso);
      color: var(--kem-cream);
      padding: 80px 0 96px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      top: -200px;
      left: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(245, 220, 198, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      bottom: -100px;
      right: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(233, 185, 163, 0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 56px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .hero-pill {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 8px 16px;
      background: rgba(255, 243, 229, 0.1);
      border: 1px solid rgba(255, 243, 229, 0.18);
      border-radius: 999px;
      font-size: 13px;
      color: var(--kem-blush);
      font-weight: 500;
    }

    .hero-pill .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #6a8a5a;
      box-shadow: 0 0 0 4px rgba(106, 138, 90, 0.32);
      animation: pulse 2s ease-in-out infinite;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: 88px;
      line-height: 0.98;
      letter-spacing: -0.025em;
      font-weight: 500;
      margin: 24px 0 8px;
      color: var(--kem-cream);
    }

    .hero-title em {
      font-style: italic;
      color: var(--kem-rose);
      font-weight: 200;
    }

    .hero-script {
      font-family: var(--font-script);
      font-size: 64px;
      color: var(--kem-rose);
      line-height: 1;
      display: block;
      margin-bottom: 28px;
    }

    .hero-sub {
      font-size: 17px;
      line-height: 1.6;
      color: rgba(255, 243, 229, 0.82);
      max-width: 520px;
      margin-bottom: 32px;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero-trust {
      display: flex;
      gap: 24px;
      align-items: center;
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 243, 229, 0.16);
      flex-wrap: wrap;
    }

    .trust-item {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 13px;
      color: rgba(255, 243, 229, 0.85);
    }

    .trust-item svg {
      color: #a8c992;
      flex-shrink: 0;
    }

    /* Hero collage — flex mosaic */
    .collage {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .collage-main {
      width: 59%;
      flex-shrink: 0;
      aspect-ratio: 9 / 16.2;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
    }

    .collage-main iframe {
      width: 100%;
      height: calc(100% + 68px);
      margin-top: -68px;
      border: none;
      display: block;
    }

    .collage-aside {
      align-self: stretch;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }

    .collage-tag {
      background: rgba(255, 243, 229, 0.08);
      border: 1px solid rgba(255, 243, 229, 0.16);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 11px;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255, 243, 229, 0.65);
      text-align: center;
    }

    .collage-stat {
      flex: 1;
      background: var(--kem-blush);
      border-radius: 20px;
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: var(--kem-espresso);
      text-align: center;
    }

    .collage-stat-logo {
      width: 100%;
      max-width: 130px;
    }

    .collage-stat-label {
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--kem-cocoa);
    }

    .collage-countdown {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .countdown-unit {
      background: rgba(255, 255, 255, 0.55);
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .countdown-num {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 600;
      line-height: 1;
      color: var(--kem-espresso);
    }

    .countdown-lbl {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--kem-cocoa);
      font-weight: 600;
    }

    .collage-stat-date {
      font-size: 10px;
      color: var(--kem-cocoa);
      font-weight: 500;
      line-height: 1.5;
    }

    .collage-card {
      background: var(--kem-cream);
      border-radius: 16px;
      padding: 14px 16px;
      display: flex;
      gap: 10px;
      align-items: center;
      color: var(--kem-espresso);
    }

    .collage-card-icon {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--kem-cream-200);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kem-cocoa);
      flex-shrink: 0;
    }

    .collage-card-t {
      font-weight: 600;
      font-size: 12px;
      line-height: 1.3;
    }

    .collage-card-d {
      font-size: 11px;
      color: var(--kem-mocha);
      margin-top: 2px;
    }

    /* ─────── MARQUEE STRIP (V2 strip with daisy as separator) ─────── */
    .strip {
      background: var(--kem-cream-200);
      padding: 22px 0;
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .strip-track {
      display: flex;
      gap: 56px;
      align-items: center;
      white-space: nowrap;
      animation: scroll 38s linear infinite;
    }

    @keyframes scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .strip-track>* {
      font-family: var(--font-display);
      font-size: 22px;
      font-style: italic;
      font-weight: 500;
      color: var(--kem-espresso);
      flex-shrink: 0;
    }

    .strip-track .strip-daisy {
      display: inline-flex;
      align-items: center;
    }

    /* ─────── PLATFORMS (V2) ─────── */
    .plats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 40px;
    }

    .plat-card {
      background: #fff;
      border-radius: 20px;
      padding: 28px;
      border: 1px solid var(--border);
      transition: all 220ms;
      cursor: pointer;
    }

    .plat-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: var(--border-strong);
    }

    .plat-mark-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
    }

    .plat-arrow {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--kem-cream-200);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kem-cocoa);
    }

    .plat-tag {
      font-size: 14px;
      line-height: 1.5;
      color: var(--kem-cocoa);
    }

    /* ─────── PROCESS (V2) ─────── */
    .process-bg {
      background: var(--kem-cream);
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-top: 48px;
    }

    .step-card {
      background: #fff;
      border-radius: 24px;
      padding: 28px 24px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }

    .step-deco {
      position: absolute;
      bottom: -40px;
      right: -40px;
      width: 100px;
      height: 100px;
      pointer-events: none;
      opacity: 0.15;
    }

    .step-card.featured .step-deco {
      opacity: 0.18;
      filter: brightness(0) invert(1);
    }

    .step-card.featured {
      background: var(--kem-cocoa);
      color: var(--kem-cream);
      border-color: var(--kem-cocoa);
    }

    .step-num {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: var(--kem-mocha);
      margin-bottom: 32px;
    }

    .step-card.featured .step-num {
      color: var(--kem-rose);
    }

    .step-circle {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--kem-cream-200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: fantasy;
      font-weight: 400;
      color: var(--kem-espresso);
      font-size: 14px;
    }

    .step-card.featured .step-circle {
      background: rgba(255, 243, 229, 0.18);
      color: var(--kem-cream);
    }

    .step-t {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.2;
      margin: 0 0 8px;
    }

    .step-d {
      font-size: 14px;
      line-height: 1.55;
      color: var(--kem-cocoa);
      margin: 0;
    }

    .step-card.featured .step-d {
      color: rgba(255, 243, 229, 0.85);
    }

    /* ─────── PRICING (V2) ─────── */
    .prices-grid {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 32px;
      margin-top: 48px;
      align-items: stretch;
    }

    .prices-side {
      background: var(--kem-espresso);
      color: var(--kem-cream);
      border-radius: 28px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      position: relative;
      overflow: hidden;
    }

    .prices-side h3 {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 500;
      line-height: 1.1;
      margin: 0;
      color: var(--kem-cream);
    }

    .prices-side h3 em {
      font-style: italic;
      color: var(--kem-blush);
      font-weight: 200;
    }

    .prices-side p {
      font-size: 15px;
      line-height: 1.55;
      color: rgba(255, 243, 229, 0.82);
      margin: 0;
    }

    .prices-bullets {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .prices-bullet {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14px;
    }

    .prices-bullet svg {
      color: var(--kem-rose);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .prices-cards {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: 12px;
    }

    .pcard {
      background: #fff;
      border-radius: 20px;
      padding: 24px 28px;
      border: 1px solid var(--border);
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 20px;
      align-items: center;
      transition: all 220ms;
    }

    .pcard:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .pcard-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: var(--kem-cream-200);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kem-cocoa);
    }

    .pcard-l-label {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--kem-mocha);
      font-weight: 600;
      margin-bottom: 4px;
    }

    .pcard-l-t {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--kem-espresso);
      margin-bottom: 4px;
    }

    .pcard-l-d {
      font-size: 13px;
      color: var(--kem-cocoa);
    }

    .pcard-amt {
      font-family: var(--font-display);
      font-size: 44px;
      font-weight: 600;
      color: var(--kem-espresso);
      line-height: 1.5;
      letter-spacing: -0.02em;
      text-align: center;
    }

    .pcard-amt small {
      font-size: 11px;
      font-family: var(--font-sans);
      font-weight: 500;
      color: var(--kem-mocha);
      display: block;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* ─────── GALLERY (V3 wide layout) ─────── */
    .gallery-bg {
      background: var(--kem-cream-200);
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 8px;
      margin-top: 48px;
      height: 480px;
    }

    .gal {
      overflow: hidden;
      border-radius: 12px;
      position: relative;
    }

    .gal:nth-child(1) {
      grid-column: span 3;
      grid-row: span 2;
    }

    .gal:nth-child(2) {
      grid-column: span 3;
    }

    .gal:nth-child(3) {
      grid-column: span 2;
    }

    .gal:nth-child(4) {
      grid-column: span 2;
    }

    .gal:nth-child(5) {
      grid-column: span 3;
    }

    .gal img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 600ms;
    }

    .gal:hover img {
      transform: scale(1.06);
    }

    .gal-cap {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: rgba(47, 26, 0, 0.78);
      color: var(--kem-cream);
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
    }

    /* ─────── TESTIMONIALS (V2) ─────── */
    .testi-bg {
      background: var(--kem-cream);
    }

    .testi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
      margin-top: 48px;
    }

    .testi {
      background: #fff;
      border-radius: 22px;
      padding: 28px;
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .testi-stars {
      display: flex;
      gap: 2px;
      color: #c97f3a;
    }

    .testi-q {
      font-size: 15px;
      line-height: 1.6;
      color: var(--kem-espresso);
      flex: 1;
    }

    .testi-foot {
      display: flex;
      gap: 12px;
      align-items: center;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .testi-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--kem-blush);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kem-espresso);
      font-weight: 700;
      font-size: 14px;
      font-family: var(--font-display);
    }

    .testi-name {
      font-weight: 600;
      font-size: 13px;
      color: var(--kem-espresso);
    }

    .testi-city {
      font-size: 12px;
      color: var(--kem-mocha);
    }

    /* ─────── FAQ ─────── */
    .faq-grid {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 56px;
      align-items: flex-start;
      margin-top: 32px;
    }

    .faq-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 8px 24px;
    }

    .faq-item {
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
    }

    .faq-item:last-child {
      border-bottom: none;
    }

    .faq-q {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      list-style: none;
    }

    .faq-q::-webkit-details-marker {
      display: none;
    }

    .faq-q-text {
      font-weight: 600;
      font-size: 16px;
      color: var(--kem-espresso);
    }

    .faq-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--kem-cream-200);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kem-cocoa);
      transition: all 220ms;
      flex-shrink: 0;
    }

    details[open] .faq-icon {
      background: var(--kem-espresso);
      color: var(--kem-cream);
      transform: rotate(45deg);
    }

    .faq-a {
      font-size: 14px;
      line-height: 1.6;
      color: var(--kem-cocoa);
      margin: 12px 0 0;
    }

    /* ─────── BIG CTA ─────── */
    .bigcta {
      background: var(--kem-espresso);
      color: var(--kem-cream);
      padding: 96px 0;
      position: relative;
      overflow: hidden;
    }

    .bigcta::before {
      content: "";
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, var(--kem-rose) 0%, transparent 70%);
      opacity: 0.18;
    }

    .bigcta-inner {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 64px;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    .bigcta-eyebrow {
      background: rgba(255, 243, 229, 0.16);
      color: var(--kem-blush);
      margin-bottom: 0;
    }

    .bigcta h2 {
      font-family: var(--font-display);
      font-size: 76px;
      line-height: 0.95;
      font-weight: 500;
      letter-spacing: -0.03em;
      color: var(--kem-cream);
      margin: 16px 0;
    }

    .bigcta h2 em {
      font-style: italic;
      color: var(--kem-rose);
      font-weight: 200;
    }

    .bigcta p {
      font-size: 18px;
      line-height: 1.55;
      color: rgba(255, 243, 229, 0.78);
      max-width: 480px;
      margin: 0 0 32px;
    }

    .channels {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .channel {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 18px 22px;
      background: rgba(255, 243, 229, 0.06);
      border: 1px solid rgba(255, 243, 229, 0.14);
      border-radius: 18px;
      transition: all 220ms;
    }

    .channel:hover {
      background: rgba(255, 243, 229, 0.12);
      transform: translateX(4px);
    }

    .channel-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: var(--kem-cream);
      color: var(--kem-espresso);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .channel-l {
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--kem-rose);
      margin-bottom: 2px;
      font-weight: 600;
    }

    .channel-h {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--kem-cream);
    }

    .channel-body {
      flex: 1;
    }

    .channel-arrow {
      color: var(--kem-cream);
    }

    /* ─────── FOOTER ─────── */
    .foot {
      background: var(--kem-cream);
      padding: 56px 0 32px;
      border-top: 1px solid var(--border);
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.4fr;
      gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--border);
    }

    .foot-tag {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 16px;
      line-height: 1.5;
      color: var(--kem-cocoa);
      margin-top: 16px;
      max-width: 280px;
    }

    .foot-h {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--kem-mocha);
      margin-bottom: 16px;
      font-weight: 600;
    }

    .foot ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .foot ul a {
      font-size: 14px;
      color: var(--kem-cocoa);
    }

    .foot ul a:hover {
      color: var(--kem-espresso);
    }

    .foot-social {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .soc-item {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      transition: all 220ms;
      color: var(--kem-espresso);
      width: fit-content;
    }

    .soc-item:hover {
      background: var(--kem-cream-200);
      transform: translateX(2px);
    }

    .soc-item-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--kem-cream-200);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kem-cocoa);
    }

    .soc-item-l {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kem-mocha);
      font-weight: 600;
    }

    .soc-item-h {
      font-weight: 600;
      font-size: 14px;
    }

    .foot-bot {
      display: flex;
      justify-content: space-between;
      padding-top: 24px;
      font-size: 12px;
      color: var(--kem-mocha);
      letter-spacing: 0.04em;
    }

    .foot-bot-r {
      display: flex;
      gap: 16px;
    }

    /* Floating WhatsApp */
    .fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 100;
      background: var(--kem-espresso);
      color: var(--kem-cream);
      padding: 14px 22px;
      border-radius: 999px;
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 600;
      font-size: 14px;
      box-shadow: 0 12px 32px -8px rgba(47, 26, 0, 0.4);
      transition: all 220ms;
    }

    .fab:hover {
      background: var(--kem-cocoa);
      transform: translateY(-2px);
    }

    /* Logo */
    .logo {
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }

    .logo-img {
      height: 44px;
      width: auto;
      display: block;
    }

    .logo .k {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 32px;
      color: var(--kem-espresso);
      letter-spacing: 0.02em;
    }

    .logo .s {
      font-family: var(--font-script);
      font-weight: 400;
      font-size: 28px;
      color: var(--kem-cocoa);
      margin-left: -4px;
      position: relative;
      top: 4px;
      display: inline-flex;
      align-items: baseline;
    }

    .logo.dark .k {
      color: var(--kem-cream);
    }

    .logo.dark .s {
      color: var(--kem-blush);
    }

    /* ── Smooth scroll ── */
    html { scroll-behavior: smooth; }

    /* ── Hero load animations ── */
    @keyframes kem-hero-up {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .hero-pill    { animation: kem-hero-up 0.6s  0.05s ease-out both; }
    .hero-title   { animation: kem-hero-up 0.75s 0.15s ease-out both; }
    .hero-script  { animation: kem-hero-up 0.7s  0.28s ease-out both; }
    .hero-sub     { animation: kem-hero-up 0.65s 0.38s ease-out both; }
    .hero-actions { animation: kem-hero-up 0.65s 0.48s ease-out both; }
    .hero-trust   { animation: kem-hero-up 0.6s  0.58s ease-out both; }
    .collage      { animation: kem-hero-up 0.85s 0.20s ease-out both; }

    /* ── FAQ open animation ── */
    @keyframes kem-faq-in {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Solo anima el contenido cuando el details ya está abierto y el wrap tiene altura */
    details[open] .faq-a {
      animation: kem-faq-in 0.22s 0.04s ease-out both;
    }

    /* ── Scroll reveal ── */
    [data-reveal] {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    [data-reveal].is-visible {
      opacity: 1;
      transform: none;
      transition: all 220ms ease;
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-pill, .hero-title, .hero-script, .hero-sub,
      .hero-actions, .hero-trust, .collage { animation: none; }
      details[open] .faq-a { animation: none; }
      [data-reveal] { opacity: 1; transform: none; transition: none; }
    }

    /* ─────── ORDER FORM ─────── */
    .order-card {
      background: #fff;
      border-radius: 28px;
      padding: 44px;
      box-shadow: var(--shadow-md);
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .order-field {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .order-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--kem-mocha);
    }

    .order-input {
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--kem-espresso);
      background: var(--kem-cream);
      border: 1px solid var(--border-strong);
      border-radius: 14px;
      padding: 14px 16px;
      outline: none;
      transition: border-color 200ms, box-shadow 200ms;
      width: 100%;
      box-sizing: border-box;
    }

    .order-input:focus {
      border-color: var(--kem-cocoa);
      box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.12);
    }

    textarea.order-input {
      resize: vertical;
    }

    .platform-group {
      display: flex;
      gap: 8px;
    }

    .platform-btn {
      flex: 1;
      padding: 14px 12px;
      border-radius: 14px;
      border: 1px solid var(--border-strong);
      background: transparent;
      color: var(--kem-espresso);
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: all 200ms cubic-bezier(.22,1,.36,1);
    }

    .platform-btn:hover:not(.is-active) {
      background: var(--kem-cream-200);
    }

    .platform-btn.is-active {
      background: var(--kem-espresso);
      border-color: var(--kem-espresso);
      color: var(--kem-cream);
    }

    .order-two-col {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 14px;
    }

    .size-group {
      display: flex;
      gap: 6px;
    }

    .size-btn {
      flex: 1;
      height: 44px;
      border-radius: 999px;
      border: 1px solid var(--border-strong);
      background: transparent;
      color: var(--kem-espresso);
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 15px;
      cursor: pointer;
      transition: all 200ms;
    }

    .size-btn:hover:not(.is-active) {
      background: var(--kem-cream-200);
    }

    .size-btn.is-active {
      background: var(--kem-espresso);
      border-color: transparent;
      color: var(--kem-cream);
    }

    .order-actions {
      display: flex;
      gap: 12px;
      margin-top: 6px;
      align-items: center;
      flex-wrap: wrap;
    }

    .order-actions-text {
      font-size: 13px;
      color: var(--kem-mocha);
    }

    .order-actions-text a {
      color: var(--kem-cocoa);
      font-weight: 600;
    }

    .order-success {
      text-align: center;
      padding: 28px 12px;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      gap: 0;
    }

    .order-success.is-visible {
      display: flex;
    }

    .order-form-inner {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .order-form-inner.is-hidden {
      display: none;
    }

    .order-success-title {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 500;
      color: var(--kem-espresso);
      margin: 20px 0 10px;
      letter-spacing: -0.02em;
    }

    .order-success-script {
      font-family: var(--font-script);
      font-size: 28px;
      color: var(--kem-cocoa);
      margin: 0 0 24px;
    }

    .order-success .btn-ghost {
      border-color: rgba(47, 26, 0, 0.32);
      color: var(--kem-espresso);
    }

    /* ── Platform brand logos (were inline styles) ── */
    .plat-logo-shein {
      font-family: var(--font-sans);
      color: #1a1a1a;
      letter-spacing: 0.06em;
      font-weight: 800;
      font-size: 24px;
    }

    .plat-logo-temu {
      font-family: var(--font-sans);
      color: #FB7701;
      letter-spacing: -0.02em;
      font-weight: 800;
      font-size: 26px;
    }

    .plat-logo-amazon {
      font-family: var(--font-sans);
      color: #221F1F;
      letter-spacing: -0.02em;
      font-weight: 700;
      font-size: 24px;
    }

    .plat-logo-aliexpress {
      font-family: var(--font-sans);
      color: #E62E04;
      letter-spacing: -0.01em;
      font-weight: 800;
      font-size: 22px;
    }

    /* Hero ghost button on dark bg (was inline) */
    .btn-ghost-hero {
      color: var(--kem-cream);
      border-color: rgba(255, 243, 229, 0.4);
    }

    /* Pricing side eyebrow on dark bg (was inline) */
    .eyebrow-dark {
      background: rgba(255, 243, 229, 0.18);
      color: var(--kem-blush);
      text-align: center;
    }

    /* FAQ lead spacing (was inline) */
    .faq-lead {
      margin-bottom: 24px;
    }

    /* Footer script text (was inline) */
    .foot-bot-script {
      font-family: var(--font-script);
      font-size: 18px;
      color: var(--kem-cocoa);
      line-height: 1;
    }