/* ════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════ */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    img,
    svg {
      display: block
    }

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

    ul {
      list-style: none
    }

    button {
      font-family: inherit;
      background: none;
      border: none;
    }

    /* ════════════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════════════ */
    :root {
      --bg: #faf8f4;
      --bg3: #ede8df; /* circle photo frame bg */
      --bg2: var(--bg); /* alias — mismo que --bg */
      --line: rgba(9, 6, 2, 0.07);
      --text: #090602;
      --muted: #5a4a3c;
      --accent: #6d28d9;
      --a2: #7c3aed;
      --aglow: rgba(109, 40, 217, 0.16);
      --pur: #120238;
      --font: 'Poppins', sans-serif;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      /* spacing scale */
      --sp-xs: 12px;
      --sp-sm: 24px;
      --sp-md: 42px;
      --sp-lg: 68px;
      --sp-xl: 104px;
      /* horizontal padding */
      --pad-h: 60px;
      --hero-pad: 76px;
      /* type scale */
      --fs-label: clamp(0.62rem, 0.5vw + 0.5rem, 0.76rem);
      --fs-nav: clamp(0.68rem, 0.5vw + 0.56rem, 0.82rem);
      --fs-body: clamp(0.96rem, 0.2vw + 0.9rem, 1.04rem);
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      font-feature-settings: 'kern' 1, 'liga' 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Textura papel — capa 1: fibras horizontales */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.018 0.11' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
      background-size: 440px 220px;
      opacity: 0.04;
      pointer-events: none;
      z-index: 9979;
    }

    /* Textura papel — capa 2: grano fino */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68 0.68' numOctaves='6' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 260px 260px;
      opacity: 0.06;
      pointer-events: none;
      z-index: 9980;
    }

    /* ════════════════════════════════════════════════════
   INTRO — iris morado
════════════════════════════════════════════════════ */
    #intro {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background:
        radial-gradient(circle at 50% 42%, rgba(192, 90, 255, 0.55) 0%, transparent 38%),
        radial-gradient(circle at 50% 50%, #7c3aed 0%, #4c1d95 32%, transparent 62%),
        radial-gradient(circle at 50% 50%, #2e0f72 0%, #100530 55%, #040011 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }

    .intro-logo {
      opacity: 0
    }

    .intro-logo img {
      height: 52px;
      filter: brightness(0) invert(1)
    }

    .intro-handle {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.35);
      opacity: 0;
    }

    /* ════════════════════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════════════════ */
    #progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 1.5px;
      background: linear-gradient(90deg, var(--accent), var(--a2), #c084fc);
      width: 0%;
      z-index: 9999;
    }

    /* ════════════════════════════════════════════════════
   NAV — floating pill
════════════════════════════════════════════════════ */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 0;
      padding: 0 clamp(28px, 5vw, 76px);
      height: 72px;
      opacity: 0;
      background: rgba(250, 248, 244, 0.76);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      border-bottom: 1px solid rgba(9, 6, 2, 0.08);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
      transition: background 0.44s, box-shadow 0.44s, border-color 0.44s;
    }

    #nav::after {
      display: none
    }

    #nav.scrolled {
      background: rgba(250, 248, 244, 0.93);
      border-bottom-color: rgba(9, 6, 2, 0.11);
      box-shadow: 0 4px 40px rgba(9, 6, 2, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    /* ── Brand ── */
    .nav-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .nav-left img {
      height: 24px;
      width: auto;
      flex-shrink: 0;
    }

    .nav-brand-copy {
      display: flex;
      flex-direction: column;
      gap: 3px;
      line-height: 1;
    }

    .nav-brand-name {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text);
    }

    .nav-brand-tag {
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ── Links ── */
    .nav-center {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 0;
    }

    .nav-link {
      position: relative;
      padding: 10px 16px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: rgba(9, 6, 2, 0.62);
      transition: color 0.26s;
      border: 0;
      white-space: nowrap;
    }

    .nav-link::before {
      display: none
    }

    /* violet dot indicator */
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      transform: translateX(-50%) scale(0);
      opacity: 0;
      transition: transform 0.3s var(--spring), opacity 0.26s;
    }

    .nav-link:hover {
      color: var(--text)
    }

    .nav-link:hover::after {
      transform: translateX(-50%) scale(1);
      opacity: 1
    }

    .nav-link.active {
      color: var(--text)
    }

    .nav-link.active::after {
      transform: translateX(-50%) scale(1);
      opacity: 1
    }

    /* ── CTA ── */
    .nav-right {
      display: flex;
      align-items: center;
      justify-content: flex-end
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #fff;
      background: var(--accent);
      padding: 11px 26px;
      border-radius: 100px;
      border: none;
      box-shadow: 0 4px 16px rgba(109, 40, 217, 0.28);
      transition: background 0.28s, transform 0.28s var(--ease), box-shadow 0.28s;
    }

    .nav-cta:hover {
      background: var(--a2);
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(109, 40, 217, 0.38);
    }

    #nav.scrolled .nav-brand-name {
      color: var(--text)
    }

    #nav.scrolled .nav-brand-tag {
      color: var(--muted)
    }

    #nav.scrolled .nav-link {
      color: rgba(9, 6, 2, 0.48)
    }

    #nav.scrolled .nav-link.active {
      color: var(--text)
    }

    /* ════════════════════════════════════════════════════
   HERO — atelier split
   Photo: 42% · Text: 58%
   Text col uses flex rows: meta / content / scroll
════════════════════════════════════════════════════ */
    #hero {
      display: grid;
      grid-template-columns: 42fr 58fr;
      min-height: 100vh;
      overflow: hidden;
      background: var(--bg);
      place-content: center;
      padding-left: 64px;
    }

    /* ── Photo column ── */
    .hero-photo-col {
      position: relative;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 22px;
      padding: clamp(52px, 7vh, 88px) clamp(24px, 3vw, 48px);
      overflow: hidden;
    }

    /* violet bloom behind photo */
    .hero-photo-col::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse 70% 62% at 50% 47%,
          rgba(109, 40, 217, 0.12) 0%,
          rgba(124, 58, 237, 0.05) 48%,
          transparent 72%);
    }

    /* dot frame — visible only at outer edges, fades to center */
    .hero-photo-col::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image: radial-gradient(circle, rgba(9, 6, 2, 0.1) 1px, transparent 1px);
      background-size: 26px 26px;
      opacity: 0.22;
      mask-image: radial-gradient(ellipse 68% 65% at 50% 50%, transparent 45%, black 78%);
      -webkit-mask-image: radial-gradient(ellipse 68% 65% at 50% 50%, transparent 45%, black 78%);
    }

    .hero-photo-num {
      position: absolute;
      top: 28px;
      left: 28px;
      z-index: 4;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(9, 6, 2, 0.16);
      pointer-events: none;
    }


    /* Premium gradient ring */
    .hero-photo-ring {
      position: relative;
      z-index: 1;
      padding: 4px;
      border-radius: 50%;
      background: conic-gradient(from 140deg,
          #a78bfa 0%,
          #7c3aed 20%,
          #6d28d9 38%,
          #be185d 58%,
          #9333ea 78%,
          #a78bfa 100%);
      box-shadow:
        0 0 0 7px var(--bg),
        0 0 0 8px rgba(109, 40, 217, 0.1),
        0 0 56px rgba(109, 40, 217, 0.14),
        0 24px 52px rgba(9, 6, 2, 0.08);
      width: clamp(240px, 60%, 400px);
      animation: photo-glow 5s ease-in-out infinite;
    }

    @keyframes photo-glow {

      0%,
      100% {
        box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px rgba(109, 40, 217, 0.09), 0 0 56px rgba(109, 40, 217, 0.12), 0 24px 52px rgba(9, 6, 2, 0.08)
      }

      50% {
        box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px rgba(109, 40, 217, 0.18), 0 0 96px rgba(109, 40, 217, 0.26), 0 24px 52px rgba(9, 6, 2, 0.08)
      }
    }

    /* Circle frame */
    .hero-photo-frame {
      position: relative;
      border-radius: 50%;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 1/1;
      background: var(--bg3);
      box-shadow: inset 0 -12px 40px rgba(9, 6, 2, 0.12), inset 0 6px 20px rgba(255, 255, 255, 0.2);
    }

    .hero-photo-frame img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      will-change: transform;
      filter: contrast(1.07) brightness(0.97) saturate(0.9);
    }

    /* Handle badge — refined */
    .hero-photo-handle {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.13em;
      color: var(--text);
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(9, 6, 2, 0.09);
      border-radius: 100px;
      padding: 7px 18px;
      box-shadow: 0 2px 16px rgba(9, 6, 2, 0.06), 0 0 0 3px rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hph-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), #be185d);
      flex-shrink: 0;
      box-shadow: 0 0 6px rgba(109, 40, 217, 0.4);
      animation: handle-pulse 2.2s ease-in-out infinite;
    }

    @keyframes handle-pulse {

      0%,
      100% {
        box-shadow: 0 0 6px rgba(109, 40, 217, 0.4);
        transform: scale(1)
      }

      50% {
        box-shadow: 0 0 14px rgba(109, 40, 217, 0.7), 0 0 28px rgba(109, 40, 217, 0.2);
        transform: scale(1.15)
      }
    }

    /* ── Text column ── */
    .hero-text-col {
      display: flex;
      flex-direction: column;
      background: transparent;
      min-height: 100vh;
      position: relative;
    }

    .hero-text-col::after {
      display: none
    }

    .hero-eyebrow {
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      align-self: flex-start;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(9, 6, 2, 0.12);
      background: rgba(255, 255, 255, 0.46);
      margin-bottom: 20px;
      opacity: 0;
      position: relative;
    }

    .hero-eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    .hero-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: clamp(92px, 10.2vh, 122px) clamp(42px, 5vw, 92px) clamp(50px, 7vh, 90px);
      position: relative;
      z-index: 1;
    }

    .hero-stack {
      width: min(100%, 760px);
      position: relative;
      z-index: 1;
    }

    .hero-content::before {
      content: 'A';
      position: absolute;
      right: 0.02em;
      bottom: -0.12em;
      font-size: clamp(210px, 18vw, 330px);
      font-weight: 900;
      letter-spacing: -0.08em;
      color: rgba(9, 6, 2, 0.042);
      pointer-events: none;
      user-select: none;
      line-height: 1;
      z-index: 0;
    }

    .hero-content::after {
      display: none
    }

    h1 {
      font-size: clamp(46px, 4.9vw, 82px);
      line-height: 0.95;
      letter-spacing: -0.038em;
      margin-bottom: 0;
      max-width: 17ch;
      text-rendering: optimizeLegibility;
    }

    h1 .l1 {
      font-weight: 900;
      color: var(--text);
      display: block
    }

    h1 .l2 {
      font-weight: 500;
      font-style: normal;
      color: #34261c;
      display: block;
      font-size: 0.6em;
      letter-spacing: 0.008em;
      line-height: 1.02;
      margin-top: 0.12em;
    }

    .h-line {
      overflow: hidden;
      display: block
    }

    .h-line-inner {
      display: block
    }

    .hero-bio {
      font-size: clamp(1rem, 0.22vw + 0.96rem, 1.12rem);
      font-weight: 400;
      line-height: 1.78;
      color: #3d2e22;
      max-width: 52ch;
      opacity: 0;
      letter-spacing: 0.004em;
      margin-top: 22px;
      text-wrap: balance;
    }

    .hero-ctas {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 24px;
      opacity: 0;
      flex-wrap: wrap;
    }

    /* scroll indicator */
    .hero-scroll {
      flex-shrink: 0;
      padding: 0 var(--hero-pad) clamp(30px, 4vw, 48px);
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      position: relative;
      z-index: 1;
    }

    .hero-scroll-track {
      width: 58px;
      height: 1px;
      background: rgba(9, 6, 2, 0.06);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .hero-scroll-track::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, transparent 0%, var(--accent) 80%, rgba(109, 40, 217, 0.3) 100%);
      animation: scrollpulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes scrollpulse {
      0% {
        left: -100%
      }

      55% {
        left: 0%
      }

      100% {
        left: 100%
      }
    }

    .hero-scroll-label {
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(9, 6, 2, 0.3);
    }

    /* ════════════════════════════════════════════════════
   MARQUEE
════════════════════════════════════════════════════ */
    .marquee-strip {
      overflow: hidden;
      padding: 14px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--bg2);
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: mq 40s linear infinite
    }

    .marquee-track:hover {
      animation-play-state: paused
    }

    .mitem {
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 0 22px;
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(108, 92, 78, 0.65);
      white-space: nowrap;
    }

    .msep {
      width: 2px;
      height: 2px;
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: 0.5
    }

    @keyframes mq {
      from {
        transform: translateX(0)
      }

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

    /* ════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════ */
    .btn-fill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--accent);
      color: #fff;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      padding: 15px 32px;
      border-radius: 100px;
      box-shadow: 0 4px 24px var(--aglow);
      transition: background 0.3s, box-shadow 0.35s, transform 0.35s var(--ease);
      position: relative;
      overflow: hidden;
    }

    .btn-fill::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.1);
      transform: translateX(-110%) skewX(-15deg);
      transition: transform 0.55s var(--ease);
    }

    .btn-fill:hover::before {
      transform: translateX(110%) skewX(-15deg)
    }

    .btn-fill:hover {
      background: #5b21b6;
      box-shadow: 0 10px 38px rgba(109, 40, 217, 0.32), 0 0 0 1px rgba(109, 40, 217, 0.12);
      transform: translateY(-2px)
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.01em;
      position: relative;
      transition: color 0.3s, gap 0.4s var(--ease);
    }

    .btn-ghost::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform-origin: left;
      transform: scaleX(0.18);
      transition: transform 0.4s var(--ease);
    }

    .btn-ghost:hover {
      color: var(--text);
      gap: 16px
    }

    .btn-ghost:hover::after {
      transform: scaleX(1)
    }

    /* ════════════════════════════════════════════════════
   SHARED SECTION STYLES
════════════════════════════════════════════════════ */
    .sec {
      padding: var(--sp-xl) var(--pad-h);
      border-top: 1px solid rgba(9, 6, 2, 0.05);
    }

    .inn {
      max-width: 1340px;
      margin: 0 auto
    }

    .eyebrow {
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: var(--sp-sm);
    }

    .eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 1px;
      background: currentColor;
      flex-shrink: 0;
    }

    /* ════════════════════════════════════════════════════
   02 HISTORIA — narrative journey
════════════════════════════════════════════════════ */
    #historia {
      background: var(--bg);
      padding: clamp(80px, 10vh, 140px) 0;
      overflow: hidden;
      position: relative;
    }

    #historia::after {
      content: '02';
      position: absolute;
      right: -0.04em;
      bottom: -0.1em;
      font-size: clamp(180px, 17vw, 320px);
      font-weight: 900;
      letter-spacing: -0.08em;
      line-height: 1;
      color: rgba(9, 6, 2, 0.028);
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }

    /* ── Header ── */
    .hst-header {
      max-width: 860px;
      margin: 0 auto clamp(60px, 9vh, 120px);
      padding: 0 clamp(28px, 5vw, 76px);
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .hst-kicker {
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(9, 6, 2, 0.12);
      background: rgba(255, 255, 255, 0.46);
      box-shadow: 0 8px 30px rgba(9, 6, 2, 0.06);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      margin-bottom: clamp(20px, 2.5vh, 32px);
    }

    .hst-kicker::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    .hst-title {
      font-size: clamp(30px, 4vw, 64px);
      font-weight: 900;
      letter-spacing: -0.045em;
      line-height: 1.02;
      color: var(--text);
      margin-bottom: clamp(22px, 3vh, 38px);
      text-rendering: optimizeLegibility;
    }

    /* "recta." — itálica con acento, la curva tiene nombre */
    .hst-title-em {
      color: var(--accent);
      font-style: italic;
    }

    .hst-lead {
      font-size: clamp(1.0rem, 0.28vw + 0.94rem, 1.16rem);
      font-weight: 400;
      font-style: italic;
      line-height: 1.88;
      color: var(--muted);
      max-width: 52ch;
      margin: 0 auto;
      text-wrap: balance;
    }

    /* ── Journey track ── */
    .hst-track {
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 clamp(28px, 5vw, 76px);
      position: relative;
      counter-reset: beat;
    }

    /* Columna central 60px — espina absoluta centrada */
    .hst-path-wrap {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 60px;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .hst-path-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .hst-p-ghost {
      fill: none;
      stroke: rgba(109, 40, 217, 0.14);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-dasharray: 4 9;
      vector-effect: non-scaling-stroke;
    }

    .hst-p-draw {
      fill: none;
      stroke: var(--accent);
      stroke-width: 2.5;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .hst-draw-clip {
      position: absolute;
      inset: 0;
      clip-path: inset(0 0 100% 0);
    }

    /* Nodos */
    .hst-p-dot {
      position: absolute;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--accent);
      border: 2.5px solid var(--bg);
      box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.10);
      transform: translate(-50%, -50%);
      z-index: 10;
      opacity: 0;
      transition: opacity 0.4s, box-shadow 0.5s var(--ease);
    }

    .hst-p-dot.is-lit {
      opacity: 1;
      box-shadow: 0 0 0 6px rgba(109, 40, 217, 0.16), 0 0 20px rgba(109, 40, 217, 0.25);
    }

    .hst-p-dot--1 {
      left: 16.7%;
      top: 17%;
    }

    .hst-p-dot--2 {
      left: 83.3%;
      top: 50%;
    }

    .hst-p-dot--3 {
      left: 20%;
      top: 83%;
    }

    /* Beat: grid 3 col — contenido | espina 60px | contenido */
    .hst-beat {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      align-items: start;
      min-height: clamp(160px, 20vh, 260px);
      opacity: 0;
      transform: translateY(40px);
      position: relative;
      z-index: 1;
      counter-increment: beat;
    }

    /* Separador editorial — fina línea completa */
    .hst-beat+.hst-beat::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(109, 40, 217, 0.08);
    }

    /* Número de capítulo como marca de agua detrás */
    .hst-beat::after {
      content: "0" counter(beat);
      position: absolute;
      font-size: clamp(100px, 13vw, 200px);
      font-weight: 900;
      letter-spacing: -0.07em;
      line-height: 1;
      color: rgba(109, 40, 217, 0.035);
      pointer-events: none;
      user-select: none;
      z-index: 0;
      bottom: -0.1em;
      right: -0.04em;
    }

    .hst-beat--right::after {
      right: auto;
      left: -0.04em;
    }

    .hst-beat-body {
      padding: clamp(36px, 5.5vh, 72px) clamp(16px, 2.5vw, 32px);
      position: relative;
      z-index: 1;
    }

    .hst-beat--left .hst-beat-body {
      grid-column: 1;
    }

    .hst-beat--right .hst-beat-body {
      grid-column: 3;
    }

    /*
  Escala tipográfica de 3 pasos:
  fase (eyebrow 10px) → título (heading ~20px) → copia (body 15px)
  Jerarquía por PESO y COLOR, no por tamaños extremos.
*/
    .hst-beat-phase {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      opacity: 1;
      background: none;
      padding: 0;
      border-radius: 0;
      border: none;
    }

    .hst-beat-phase::before {
      content: '';
      width: 22px;
      height: 1px;
      background: var(--accent);
      flex-shrink: 0;
      border-radius: 0;
    }

    .hst-beat-title {
      font-size: clamp(1.06rem, 1.1vw, 1.32rem);
      font-weight: 800;
      letter-spacing: -0.022em;
      line-height: 1.28;
      color: var(--text);
      margin-bottom: 14px;
      max-width: 28ch;
    }

    .hst-beat-copy {
      font-size: 0.925rem;
      line-height: 1.82;
      color: var(--muted);
      max-width: 38ch;
    }

    /* ── Footer / closing — pull quote editorial ── */
    .hst-footer {
      max-width: 720px;
      margin: clamp(64px, 9vh, 112px) auto 0;
      padding: 0 clamp(28px, 5vw, 76px);
      text-align: center;
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(109, 40, 217, 0.08);
      padding-top: clamp(40px, 6vh, 72px);
    }

    .hst-closing {
      font-size: clamp(1.04rem, 1.0vw, 1.2rem);
      font-weight: 300;
      font-style: italic;
      line-height: 1.84;
      color: var(--text);
      letter-spacing: 0.004em;
    }

    .hst-closing strong {
      font-weight: 800;
      font-style: normal;
      color: var(--accent);
    }

    /* ════════════════════════════════════════════════════
   03 LO QUE AMO — composición editorial 2D
════════════════════════════════════════════════════ */
    #amo {
      background: var(--bg)
    }

    /* Header a la izquierda, items a la derecha */
    #amo .inn {
      display: grid;
      grid-template-columns: 29% 1fr;
      gap: 0 clamp(52px, 7vw, 100px);
      align-items: start;
    }

    .amo-head {
      margin-bottom: 0;
      position: sticky;
      top: 120px;
    }

    .amo-h2 {
      font-size: clamp(28px, 3.2vw, 50px);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1.05;
      color: var(--text);
      max-width: 13ch;
      text-rendering: optimizeLegibility;
    }

    /* ── Sub-grilla 2D: 01 arriba completo, 02+03 abajo lado a lado ── */
    .amo-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      border-top: 1px solid rgba(109, 40, 217, 0.08);
    }

    /* 01 ocupa el ancho completo */
    .amo-item:nth-child(1) {
      grid-column: 1 / -1;
      border-bottom: 1px solid rgba(109, 40, 217, 0.08);
      padding: clamp(40px, 6vh, 72px) 0 clamp(40px, 6vh, 72px) 0;
    }

    /* 02 — izquierda abajo */
    .amo-item:nth-child(2) {
      border-right: 1px solid rgba(109, 40, 217, 0.08);
      padding: clamp(36px, 5vh, 60px) clamp(28px, 3.5vw, 52px) clamp(36px, 5vh, 60px) 0;
    }

    /* 03 — derecha abajo */
    .amo-item:nth-child(3) {
      padding: clamp(36px, 5vh, 60px) 0 clamp(36px, 5vh, 60px) clamp(28px, 3.5vw, 52px);
    }

    .amo-item {
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(32px);
    }

    /* Números — marca de agua */
    .amo-item-num {
      display: block;
      font-size: clamp(52px, 6.5vw, 100px);
      font-weight: 900;
      letter-spacing: -0.07em;
      line-height: 0.88;
      color: rgba(109, 40, 217, 0.05);
      pointer-events: none;
      user-select: none;
      margin-bottom: 18px;
      transition: color 0.5s var(--ease);
    }

    .amo-item:nth-child(1) .amo-item-num {
      font-size: clamp(72px, 9.5vw, 148px);
      margin-bottom: 22px;
    }

    .amo-item:hover .amo-item-num {
      color: rgba(109, 40, 217, 0.12);
    }

    /* Category label */
    .amo-item-cat {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }

    .amo-item-cat::before {
      content: '';
      width: 18px;
      height: 1px;
      background: var(--accent);
      flex-shrink: 0;
    }

    /* Títulos */
    .amo-item-title {
      font-size: clamp(1.1rem, 1.3vw, 1.48rem);
      font-weight: 800;
      letter-spacing: -0.026em;
      line-height: 1.18;
      color: var(--text);
      margin-bottom: 14px;
      max-width: 20ch;
      transition: color 0.3s var(--ease);
    }

    /* El item 01 tiene title más grande */
    .amo-item:nth-child(1) .amo-item-title {
      font-size: clamp(1.6rem, 2.4vw, 2.3rem);
      max-width: 24ch;
      margin-bottom: 20px;
    }

    .amo-item:hover .amo-item-title {
      color: var(--accent);
    }

    /* Body */
    .amo-item-text {
      font-size: var(--fs-body);
      line-height: 1.88;
      color: var(--muted);
      max-width: 44ch;
    }

    .amo-item:nth-child(1) .amo-item-text {
      max-width: 56ch;
    }

    /* ════════════════════════════════════════════════════
   04 WAPUCLUB — brand feature spread
════════════════════════════════════════════════════ */
    #wapuclub {
      background: var(--bg);
    }

    /* ── Header bar: eyebrow + link ── */
    .wc-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: clamp(20px, 3vh, 30px);
      border-bottom: 1px solid rgba(109, 40, 217, 0.08);
      margin-bottom: clamp(44px, 6.5vh, 72px);
    }

    .wc-topbar .eyebrow {
      margin-bottom: 0;
    }

    .wc-extlink {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      opacity: 0.8;
      transition: opacity 0.3s var(--ease);
    }

    .wc-extlink:hover { opacity: 1; }

    /* ── Zona principal: heading+texto / logo — sin sticky ── */
    .wc-body {
      display: grid;
      grid-template-columns: 56fr 44fr;
      gap: 0 clamp(44px, 6.5vw, 88px);
      align-items: center;
      margin-bottom: clamp(48px, 7vh, 80px);
    }

    .wc-h2 {
      font-size: clamp(30px, 3.8vw, 60px);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1.04;
      color: var(--text);
      margin-bottom: clamp(16px, 2.5vh, 22px);
      text-rendering: optimizeLegibility;
    }

    .wc-h2 em {
      font-style: italic;
      font-weight: 300;
      color: var(--accent);
    }

    .wc-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(20px, 3vh, 28px);
    }

    .wc-text {
      font-size: clamp(0.88rem, 0.18vw + 0.84rem, 0.98rem);
      font-weight: 400;
      line-height: 1.88;
      color: var(--muted);
      max-width: 50ch;
    }

    /* Bloque del logo */
    .wc-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(14px, 2.2vh, 22px);
      padding-left: clamp(36px, 5vw, 68px);
      border-left: 1px solid rgba(109, 40, 217, 0.08);
    }

    .wc-logo {
      width: clamp(140px, 20vw, 240px);
      height: auto;
      display: block;
      filter: brightness(0) saturate(1) invert(14%) sepia(88%) saturate(1900%)
              hue-rotate(254deg) brightness(80%);
    }

    .wc-caption {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .wc-caption::before {
      content: '';
      width: 14px;
      height: 1px;
      background: var(--muted);
      opacity: 0.45;
      flex-shrink: 0;
    }

    /* ── Franja de pillars: 3 columnas horizontales ── */
    .wc-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(109, 40, 217, 0.08);
      border-bottom: 1px solid rgba(109, 40, 217, 0.06);
      margin-bottom: clamp(28px, 4.5vh, 48px);
    }

    .wc-pillar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: clamp(24px, 3.8vh, 40px) clamp(20px, 2.5vw, 40px) clamp(24px, 3.8vh, 40px) 0;
    }

    .wc-pillar:not(:first-child) {
      padding-left: clamp(20px, 2.5vw, 40px);
      border-left: 1px solid rgba(109, 40, 217, 0.08);
    }

    .wc-pillar:last-child {
      padding-right: 0;
    }

    .wc-pillar-num {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.24em;
      color: var(--accent);
    }

    .wc-pillar-name {
      font-size: clamp(13.5px, 1.2vw, 17px);
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
      line-height: 1.18;
    }

    .wc-pillar-desc {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.74;
      color: var(--muted);
      margin: 0;
      flex: 1;
    }

    .wc-pillar-tag {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .wc-pillar-tag::before {
      content: '';
      width: 12px;
      height: 1px;
      background: var(--accent);
      flex-shrink: 0;
    }

    /* CTA — slide fill */
    .btn-wc {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 26px;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text);
      border: 1.5px solid rgba(9, 6, 2, 0.18);
      border-radius: 3px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
    }

    .btn-wc::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.45s var(--ease);
      z-index: -1;
    }

    .btn-wc:hover {
      border-color: var(--accent);
      color: #fff;
    }

    .btn-wc:hover::before {
      transform: scaleX(1);
    }

    /* ════════════════════════════════════════════════════
   05 CLIENTES — logo strip con divisores
════════════════════════════════════════════════════ */
    #clientes {
      background: var(--bg);
    }

    /* ── Header: eyebrow + h2 + count ── */
    .cl-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: clamp(20px, 3vh, 30px);
      border-bottom: 1px solid rgba(109, 40, 217, 0.08);
      margin-bottom: clamp(36px, 5.5vh, 60px);
    }

    .cl-h2 {
      font-size: clamp(28px, 3.4vw, 52px);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1.08;
      margin-top: clamp(10px, 1.4vh, 18px);
    }

    .cl-count {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      padding-bottom: 6px;
      white-space: nowrap;
    }

    /* ── Franja de logos: 5 celdas sin bordes ── */
    .cl-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(9, 6, 2, 0.06);
    }

    /* ── Clientes pending (sin logo aún) ── */
    .cl-item--pending {
      cursor: default;
    }

    .cl-item--pending:hover {
      background: var(--bg);
    }

    .cl-item--pending::after {
      display: none;
    }

    .cl-pending-name {
      font-size: clamp(13px, 1.4vw, 18px);
      font-weight: 800;
      letter-spacing: -0.02em;
      color: rgba(9, 6, 2, 0.22);
    }

    .cl-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(16px, 2.4vh, 22px);
      padding: clamp(32px, 5vh, 60px) clamp(16px, 2vw, 28px);
      text-decoration: none;
      color: var(--text);
      position: relative;
      /* fondo explícito necesario para que mix-blend-mode funcione */
      background: var(--bg);
      transition: background 0.42s var(--ease);
    }

    /* línea inferior que crece en hover */
    /* separador vertical entre columnas */
    .cl-item + .cl-item {
      border-left: 1px solid rgba(9, 6, 2, 0.06);
    }

    /* separador horizontal — segunda fila */
    .cl-item:nth-child(n+5) {
      border-top: 1px solid rgba(9, 6, 2, 0.06);
    }

    /* reset borde izquierdo en primero de cada fila */
    .cl-item:nth-child(5) {
      border-left: none;
    }

    .cl-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0%;
      height: 1.5px;
      background: rgba(9, 6, 2, 0.15);
      transition: width 0.45s var(--ease);
    }

    .cl-item:hover::after {
      width: 48%;
    }

    .cl-item:hover {
      background: rgba(9, 6, 2, 0.03);
    }

    /* ── Logo ── */
    .cl-item-logo {
      height: clamp(34px, 4.2vw, 56px);
      width: auto;
      max-width: 160px;
      object-fit: contain;
      display: block;
      transform-origin: center;
      /* opacity como propiedad separada (no en filter) para que
         mix-blend-mode composite correctamente y elimine fondos blancos */
      mix-blend-mode: multiply;
      filter: grayscale(1);
      opacity: 0.62;
      transition: filter 0.44s var(--ease), transform 0.44s var(--ease),
                  opacity 0.44s var(--ease);
    }

    .cl-item:hover .cl-item-logo {
      filter: grayscale(0);
      opacity: 1;
      transform: scale(1.08);
    }

    /* FIORD: logo blanco → color #010619 (navy casi negro).
       Técnica: reduce brightness para salir de blanco puro,
       aplica sepia + hue-rotate + saturate para virar a azul oscuro. */
    .cl-item--invert .cl-item-logo {
      filter: brightness(0.1) sepia(1) hue-rotate(210deg) saturate(20) brightness(0.5);
      opacity: 0.88;
    }

    .cl-item--invert:hover .cl-item-logo {
      filter: brightness(0.1) sepia(1) hue-rotate(210deg) saturate(20) brightness(0.5);
      opacity: 1;
      transform: scale(1.08);
    }

    /* ── Categoría — sube suavemente en hover ── */
    .cl-item-cat {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0.55;
      transform: translateY(4px);
      transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    }

    .cl-item:hover .cl-item-cat {
      opacity: 1;
      transform: translateY(0);
    }

    /* ════════════════════════════════════════════════════
   06 RESEÑAS — grid 2×2 uniforme
════════════════════════════════════════════════════ */
    #resenas {
      background: var(--bg);
    }

    /* ── Header (mismo patrón que wc-topbar / cl-header) ── */
    .rv-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: clamp(20px, 3vh, 30px);
      border-bottom: 1px solid rgba(109, 40, 217, 0.08);
      margin-bottom: clamp(36px, 5.5vh, 60px);
    }

    .rv-h2 {
      font-size: clamp(26px, 3vw, 48px);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-top: clamp(10px, 1.4vh, 16px);
      max-width: 24ch;
    }

    .rv-google-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0.7;
      white-space: nowrap;
      padding-bottom: 4px;
    }

    /* ── Grid 2×2: los 4 cards iguales ── */
    .rv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 1fr;          /* filas de igual altura */
      gap: clamp(14px, 2vw, 22px);
    }

    /* ── Card ── */
    .rv-card {
      border: 1px solid rgba(9, 6, 2, 0.07);
      padding: clamp(28px, 4vh, 46px) clamp(24px, 3vw, 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
    }

    .rv-card:hover {
      border-color: rgba(109, 40, 217, 0.22);
      box-shadow: 0 8px 36px rgba(9, 6, 2, 0.06);
    }

    /* ── Stars ── */
    .rv-stars {
      color: #f59e0b;
      font-size: 13px;
      letter-spacing: 2px;
      margin-bottom: clamp(14px, 2.2vh, 22px);
    }

    /* ── Quote ── */
    .rv-quote {
      font-size: clamp(0.94rem, 1.15vw, 1.12rem);
      font-style: italic;
      font-weight: 300;
      line-height: 1.84;
      color: var(--text);
      flex: 1;
      margin-bottom: clamp(20px, 3vh, 30px);
    }

    /* ── Pie: foto + nombre + fecha ── */
    .rv-foot {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: clamp(16px, 2.4vh, 24px);
      border-top: 1px solid rgba(109, 40, 217, 0.08);
    }

    .rv-author-img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--accent), #9333ea);
    }

    .rv-author-name {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text);
    }


    /* ════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════ */
    footer {
      background: #070503;
      padding: var(--sp-xl) var(--pad-h) var(--sp-md);
    }

    .ft-inn {
      max-width: 1340px;
      margin: 0 auto;
    }

    /* ── Brand + Socials ── */
    .ft-mid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-xl);
      align-items: end;
      margin-bottom: clamp(48px, 7vh, 80px);
    }

    .ft-logo img {
      height: 38px;
      margin-bottom: 18px;
      filter: brightness(0) invert(1);
      opacity: 1;
    }

    .ft-title {
      font-size: clamp(15px, 1.4vw, 18px);
      font-weight: 700;
      line-height: 1.4;
      color: #fff;
      margin-bottom: 12px;
      max-width: 360px;
    }

    .ft-sub {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.88;
      color: rgba(255, 255, 255, 0.62);
      max-width: 400px;
    }

    /* ── Social icon grid ── */
    .ft-socials {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: flex-end;
    }

    .ft-social {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      padding: 16px 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      color: #fff;
      text-decoration: none;
      min-width: 70px;
      transition: border-color 0.32s var(--ease), color 0.32s var(--ease),
                  background 0.32s var(--ease), transform 0.32s var(--ease);
    }

    .ft-social:hover {
      border-color: var(--accent);
      color: #fff;
      background: rgba(109, 40, 217, 0.28);
      transform: translateY(-3px);
    }

    .ft-social svg {
      width: 20px;
      height: 20px;
      display: block;
      flex-shrink: 0;
    }

    .ft-social-logo {
      width: auto;
      height: 20px;
      display: block;
      filter: brightness(0) invert(1);
      transition: filter 0.32s var(--ease);
    }

    .ft-social:hover .ft-social-logo {
      filter: brightness(0) invert(1);
    }

    .ft-social-name {
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* ── Bottom bar ── */
    .ft-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: var(--sp-md);
      border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .ft-copy {
      font-size: 10.5px;
      color: rgba(255, 255, 255, 0.55);
    }

    .ft-handle {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
    }

    /* ════════════════════════════════════════════════════
   RESPONSIVE
   1100px · 768px · 600px · 480px · 360px
════════════════════════════════════════════════════ */

    /* ── Tablet landscape ≤ 1100px ── */
    @media(max-width:1100px) {

      /* Hero: columna única, foto arriba */
      #hero {
        grid-template-columns: 1fr;
        grid-template-rows: 55vh auto;
        padding-left: 0;
      }

      .hero-photo-col {
        min-height: 55vh;
        border-right: none;
        border-bottom: none;
        padding: clamp(36px, 5vh, 60px) 24px;
      }

      .hero-photo-ring {
        width: min(48%, 220px);
      }

      .hero-content {
        padding: clamp(96px, 11vh, 126px) var(--pad-h) var(--sp-md);
      }

      .hero-content::after { display: none; }

      .hero-stack { width: min(100%, 700px); }

      .hero-scroll {
        padding: var(--sp-xs) var(--pad-h) var(--sp-md);
      }

      /* Historia */
      .hst-title { font-size: clamp(26px, 3.8vw, 54px); }
      .hst-beat { min-height: clamp(140px, 16vh, 200px); }
      .hst-beat-body { padding: clamp(20px, 3vh, 36px) clamp(16px, 2vw, 28px); }

      /* Lo que amo */
      #amo .inn {
        grid-template-columns: 26% 1fr;
        gap: 0 clamp(36px, 5vw, 64px);
      }

      /* WapuClub */
      .wc-body {
        grid-template-columns: 58fr 42fr;
        gap: 0 clamp(32px, 4.5vw, 56px);
      }

      /* Clientes: 4 col */
      .cl-strip { grid-template-columns: repeat(4, 1fr); }
      .cl-item:nth-child(5) { border-left: none; }

      /* Footer */
      .ft-mid { grid-template-columns: 1fr; gap: 48px; }
      .ft-socials { justify-content: flex-start; }
    }

    /* ── Tablet portrait ≤ 768px ── */
    @media(max-width:768px) {
      :root {
        --pad-h: 24px;
        --hero-pad: 24px;
      }

      /* Nav: logo + CTA fila 1, links fila 2 scrollable */
      #nav {
        height: auto;
        padding: 10px 16px 0;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 0;
        /* totalmente transparente al inicio en mobile */
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: transparent;
        box-shadow: none;
      }

      #nav.scrolled {
        padding: 8px 16px 0;
        background: rgba(250, 248, 244, 0.96);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-bottom-color: rgba(9, 6, 2, 0.08);
        box-shadow: 0 4px 40px rgba(9, 6, 2, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7);
      }

      /* Fila 1: logo (col 1) y CTA (col 3) */
      .nav-left  { grid-row: 1; grid-column: 1; }
      .nav-right { grid-row: 1; grid-column: 3; justify-content: flex-end; }

      .nav-left img { height: 22px; }
      .nav-brand-copy { display: none; }

      /* Fila 2: links scrollables, ocupa todo el ancho */
      .nav-center {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 6px;
        border-top: 1px solid rgba(9, 6, 2, 0.05);
        margin-top: 6px;
      }

      .nav-center::-webkit-scrollbar { display: none; }

      .nav-link {
        display: inline-flex;
        white-space: nowrap;
        padding: 7px 10px;
        font-size: 0.62rem;
      }

      .nav-cta {
        padding: 8px 14px;
        font-size: 0.62rem;
        border-radius: 8px;
      }

      /* Hero */
      #hero { grid-template-rows: 40vh auto; }
      /* padding-top para que el nav fijo (≈85px) no tape la foto */
      .hero-photo-col { min-height: 40vh; padding: 88px 24px 10px; gap: 12px; border-bottom: none; }
      .hero-photo-ring { width: min(38%, 170px); }
      .hero-photo-handle { display: none; }
      .hero-photo-num { font-size: 7px; top: 12px; left: 12px; }
      .hero-text-col { min-height: auto; }

      /* texto pegado arriba — align-items flex-start para no centrar verticalmente */
      .hero-content { padding: 8px var(--hero-pad) 24px; align-items: flex-start; }
      .hero-content::before { font-size: clamp(140px, 30vw, 210px); }
      .hero-stack { width: 100%; }
      .hero-eyebrow { padding: 7px 12px; letter-spacing: 0.18em; }
      .hero-scroll { display: none; }
      /* ocultar botón ghost en mobile para más espacio */
      .hero-ctas .btn-ghost { display: none; }

      h1 { font-size: clamp(36px, 8vw, 52px); max-width: 15ch; }
      h1 .l2 { font-size: 0.72em; }
      .hero-bio { margin-top: 18px; max-width: 42ch; }
      .hero-ctas { margin-top: 20px; }
      .btn-fill { padding: 13px 24px; }
      .btn-ghost { font-size: 12px; }

      /* Secciones */
      .sec { padding: 72px var(--pad-h); }

      /* Historia */
      #historia { padding: clamp(56px, 8vh, 100px) 0; }
      #historia::after { font-size: clamp(120px, 22vw, 190px); }
      .hst-title { font-size: clamp(22px, 6.5vw, 36px); line-height: 1.06; }
      .hst-path-wrap { display: none; }
      .hst-beat { grid-template-columns: 1fr; min-height: auto; padding-bottom: clamp(18px, 4vh, 28px); }
      .hst-beat--left .hst-beat-body,
      .hst-beat--right .hst-beat-body { grid-column: auto; text-align: left; }

      /* Section headers — apilar en mobile */
      .cl-header,
      .rv-header,
      .wc-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      /* Lo que amo */
      #amo .inn { grid-template-columns: 1fr; gap: 0; }
      .amo-head { position: static; margin-bottom: clamp(36px, 5vw, 56px); }
      .amo-list { grid-template-columns: 1fr; }
      .amo-item:nth-child(1) { grid-column: auto; }
      .amo-item:nth-child(2) {
        border-right: none; padding-right: 0;
        border-bottom: 1px solid rgba(109, 40, 217, 0.08);
      }
      .amo-item:nth-child(3) { padding-left: 0; }
      .amo-item-num { font-size: clamp(44px, 11vw, 68px); margin-bottom: 10px; }
      .amo-item:nth-child(1) .amo-item-num { font-size: clamp(52px, 13vw, 84px); }

      /* WapuClub */
      .wc-body { grid-template-columns: 1fr; gap: 28px 0; }
      /* Logo: pequeño, alineado a la izquierda junto al texto */
      .wc-brand {
        display: flex; flex-direction: row; align-items: center; gap: 16px;
        border-left: none; padding-left: 0; border-top: none;
        padding-top: 0; margin-top: 0; order: -1;
      }
      .wc-logo { width: clamp(80px, 22vw, 120px); }
      .wc-caption { font-size: 8px; }

      /* Pillars: columna compacta con todo el contenido visible */
      .wc-pillars {
        display: flex; flex-direction: column;
        overflow: visible; scroll-snap-type: none;
        border-top: 1px solid rgba(109,40,217,0.08);
        border-bottom: 1px solid rgba(109,40,217,0.06);
        margin: 0; padding: 0; gap: 0;
      }
      .wc-pillar {
        display: flex; flex-direction: column;
        gap: 7px; padding: 18px 0;
        border-bottom: 1px solid rgba(109,40,217,0.06);
        border-left: none; border-top: none;
      }
      .wc-pillar:last-child { border-bottom: none; padding-right: 0; }
      .wc-pillar:not(:first-child) { border-left: none; padding-left: 0; }
      .wc-pillar-num { font-size: 8px; }
      .wc-pillar-name { font-size: 14px; }
      .wc-pillar-desc { display: block; font-size: 12.5px; line-height: 1.6; }
      .wc-pillar-tag { font-size: 8px; }

      /* Clientes: 4 col en tablet, sin overflow lateral */
      .cl-strip { grid-template-columns: repeat(4, 1fr); overflow: hidden; }
      .cl-item-logo { max-width: 90%; }

      /* Reseñas: 2 col hasta 600px */
      .rv-grid { grid-template-columns: 1fr 1fr; }

      /* Footer */
      footer { padding: 64px var(--pad-h) 44px; }
      .ft-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
      .ft-social { min-width: 60px; padding: 14px 12px; }
    }

    /* ── Mobile grande ≤ 600px ── */
    @media(max-width:600px) {

      /* Clientes: 2 columnas × 4 filas */
      .cl-strip { grid-template-columns: repeat(2, 1fr); overflow: hidden; }
      .cl-item-logo { max-width: 80%; }
      /* top border desde row 2 (item 3+) */
      .cl-item:nth-child(n+3) { border-top: 1px solid rgba(9,6,2,0.06); }
      /* sin border-left en primero de cada fila (impares) */
      .cl-item:nth-child(odd) { border-left: none; }

      /* Reseñas: columna única */
      .rv-grid { grid-template-columns: 1fr; }

      /* Footer socials: lista vertical en mobile — sin tarjetas, sin wrapping */
      .ft-socials {
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
        justify-content: flex-start;
      }
      .ft-social {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;
        padding: 11px 0;
        border: none;
        border-radius: 0;
        min-width: auto;
        background: transparent;
      }
      .ft-social:hover {
        background: transparent;
        transform: none;
        border-color: rgba(255,255,255,0.07);
        padding-left: 6px;
        transition: padding-left 0.28s var(--ease);
      }
      .ft-social svg { width: 18px; height: 18px; flex-shrink: 0; }
      .ft-social-logo { height: 18px; flex-shrink: 0; }
      .ft-social-name { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; flex: 1; }
    }

    /* ── Mobile ≤ 480px ── */
    @media(max-width:480px) {
      h1 { font-size: 26px; line-height: 1.0; max-width: 20ch; }
      h1 .l2 { font-size: 0.7em; }
      .hero-bio { max-width: 34ch; }

      .hst-title { font-size: clamp(28px, 9vw, 40px); }

      .cl-item-logo { height: clamp(28px, 8vw, 42px); }
    }

    /* ── Mobile pequeño ≤ 360px ── */
    @media(max-width:360px) {
      :root { --pad-h: 16px; }

      h1 { font-size: 28px; }
      .nav-link { padding: 6px 8px; font-size: 0.58rem; }
      .nav-cta { padding: 7px 10px; }
      .ft-social { padding: 12px 0; }
      .ft-social-name { font-size: 12px; }
    }