@font-face {
      font-family: 'PP Editorial New';
      src: url('fonts/PPEditorialNew-Variable.woff2') format('woff2-variations');
      font-weight: 100 900; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'PP Editorial New';
      src: url('fonts/PPEditorialNew-ItalicVariable.woff2') format('woff2-variations');
      font-weight: 100 900; font-style: italic; font-display: swap;
    }

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

    :root {
      --cream: #f2f1ed;
      --red: #961212;
      --red-dark: #6b1a1a;
      --gold: #c9a84c;
      --gold-bright: #d4af37;
      --serif: 'PP Editorial New', 'Cormorant Garamond', serif;
      --mono: 'Geist Mono', monospace;
      --script: 'Dancing Script', cursive;
      --ease: cubic-bezier(.625,.05,0,1);
      --ease2: cubic-bezier(.16,1,.3,1);
      --dur-fast: 150ms;
      --dur-smooth: 300ms;
      --dur-entrance: 500ms;
      /* ── Layout system ── */
      --edge-margin: clamp(20px, 5vw, 48px);
      --col-text: 44%;
    }

    html, body {
      width: 100%; height: 100dvh;
      overflow: hidden;
      font-family: var(--mono);
      background: var(--cream);
      color: var(--red);
      -webkit-font-smoothing: antialiased;
      cursor: none;
    }
    @media (pointer: coarse) { html, body { cursor: auto; } }

    /* ── Grain ─────────────────────────────── */
    .grain {
      position: fixed; inset: 0; z-index: 9999;
      pointer-events: none; opacity: 0.52;
      mix-blend-mode: multiply;
    }
    .grain svg { width: 100%; height: 100%; }
    @media (pointer: coarse) { .grain { display: none; } }

    /* ── Cursor ────────────────────────────── */
    .cursor-dot {
      position: fixed; z-index: 9998;
      width: 8px; height: 8px;
      background: var(--red);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: width var(--dur-smooth) var(--ease2), height var(--dur-smooth) var(--ease2), background var(--dur-smooth), border-color var(--dur-smooth);
      will-change: left, top;
    }
    .cursor-dot.hover {
      width: 32px; height: 32px;
      background: transparent;
      border: 1.5px solid var(--red);
    }
    .cursor-dot.hover-light { border-color: var(--cream); }
    .cursor-dot.on-red { background: var(--cream); }
    .cursor-dot.on-red.hover { background: transparent; border-color: var(--cream); }
    @media (pointer: coarse) { .cursor-dot { display: none; } }

    /* ── Header ────────────────────────────── */
    .header {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex; flex-direction: column; align-items: flex-start;
      gap: 10px;
      padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 48px);
      pointer-events: none;
      transition: opacity var(--dur-entrance);
    }
    .header > * { pointer-events: auto; }
    .header.hidden { opacity: 0; pointer-events: none; }

    .brand {
      font-family: var(--serif);
      font-size: clamp(20px, 2.5vw, 28px);
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.02em;
      color: var(--red);
      transition: color var(--dur-entrance) var(--ease);
      user-select: none;
    }
    .brand sup {
      font-size: 0.55em;
      font-style: normal;
      font-weight: 500;
      vertical-align: super;
    }
    .brand.light { color: var(--cream); }
    .brand.gold { color: var(--gold); }
    .brand-logo {
      height: clamp(22px, 2.4vw, 32px);
      width: auto;
      display: block;
    }
    .brand-logo-light { display: none; }
    .brand.light .brand-logo-dark { display: none; }
    .brand.light .brand-logo-light { display: block; }

    /* ── Nav Arrows ────────────────────────── */
    .nav-arrows {
      position: fixed; bottom: clamp(20px, 3vw, 40px);
      left: 0; right: 0; z-index: 100;
      display: flex; justify-content: space-between;
      padding: 0 clamp(20px, 4vw, 48px);
      pointer-events: none;
      transition: opacity .4s;
    }
    .nav-arrows > * { pointer-events: auto; }
    .nav-btn {
      display: flex; align-items: center; justify-content: center;
      background: transparent;
      border: none;
      font-family: var(--serif);
      font-weight: 300;
      font-style: italic;
      font-size: clamp(36px, 5.5vw, 60px);
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--red);
      cursor: none;
      padding: 4px 10px;
      opacity: 0.75;
      transition: opacity var(--dur-smooth) var(--ease);
    }
    .nav-btn:hover { opacity: 1; }
    .nav-btn.light { color: var(--cream); }
    .nav-btn:disabled { opacity: 0.12; pointer-events: none; }
    @media (pointer: coarse) { .nav-btn { cursor: pointer; } }

    /* ── Scenes ────────────────────────────── */
    .scenes { position: relative; width: 100%; height: 100dvh; }
    .scene {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity .6s var(--ease), visibility .6s;
      overflow: hidden;
    }
    .scene.active { opacity: 1; visibility: visible; }

    /* ── Anim in ───────────────────────────── */
    .scene .anim-in {
      opacity: 0; transform: translateY(20px);
      transition: opacity .6s var(--ease2), transform .6s var(--ease2);
    }
    .scene.active .anim-in { opacity: 1; transform: translateY(0); }
    .scene.active .anim-in.d1 { transition-delay: .1s; }
    .scene.active .anim-in.d2 { transition-delay: .2s; }
    .scene.active .anim-in.d3 { transition-delay: .3s; }
    .scene.active .anim-in.d4 { transition-delay: .4s; }
    .scene.active .anim-in.d5 { transition-delay: .5s; }

    /* ── Satin Red BG (CSS, no photo) ─────── */
    .satin-bg {
      position: absolute; inset: 0;
      background:
        linear-gradient(155deg, #8a1515 0%, #961212 20%, #7a1010 40%, #961212 60%, #6b1818 80%, #961212 100%);
      z-index: 0;
    }
    .satin-bg::before {
      content: '';
      position: absolute; inset: 0;
      z-index: 1;
      opacity: 0.28;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: cover;
      pointer-events: none;
    }
    .satin-bg::after {
      content: '';
      position: absolute; inset: 0;
      z-index: 2;
      background:
        radial-gradient(ellipse at 25% 30%, rgba(180,30,30,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 70%, rgba(100,14,14,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(150,18,18,0.1) 0%, transparent 70%);
    }

    /* ══════════════════════════════════════════
       SCENE: Cover — crimson, llave dorada
       ══════════════════════════════════════════ */
    .s-cover {
      background:
        radial-gradient(ellipse at 38% 55%, rgba(60,0,10,0.6) 0%, transparent 55%),
        radial-gradient(ellipse at 72% 28%, rgba(140,5,5,0.3) 0%, transparent 50%),
        var(--red);
      overflow: hidden;
    }
    .cover-title {
      position: absolute;
      top: clamp(72px, 14vh, 120px);
      left: clamp(40px, 7vw, 100px);
      font-family: var(--serif);
      font-weight: 400;
      font-style: normal;
      font-size: clamp(36px, 5.5vw, 80px);
      color: var(--cream);
      letter-spacing: -0.03em;
      text-align: left;
      line-height: 1.05;
      font-feature-settings: 'dlig' 1;
      z-index: 2;
    }
    .cover-sub {
      position: absolute;
      top: calc(clamp(72px, 14vh, 120px) + clamp(72px, 10vw, 140px));
      left: clamp(40px, 7vw, 100px);
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 16px);
      font-weight: 300;
      color: var(--cream);
      text-align: left;
      width: min(480px, 55vw);
      line-height: 1.55;
      opacity: 0.72;
      z-index: 2;
    }
    .cover-key {
      position: absolute;
      right: clamp(40px, 6vw, 80px);
      top: 50%;
      transform: translateY(-50%) rotate(8deg);
      width: clamp(180px, 28vw, 380px);
      pointer-events: none;
      z-index: 1;
      filter: drop-shadow(0 8px 32px rgba(0,0,0,.4));
    }
    .cover-saber {
      position: absolute;
      right: 13%;
      top: 29%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      z-index: 3;
    }
    .cover-saber-circle {
      width: 38px; height: 38px;
      border: 1.5px solid var(--cream);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--cream);
      font-size: 13px;
    }
    .cover-saber span {
      font-family: var(--mono);
      font-size: clamp(11px, 1vw, 14px);
      font-weight: 300;
      color: var(--cream);
      text-align: center;
      line-height: 1.3;
      width: 72px;
    }
    .cover-cta {
      position: absolute;
      bottom: 8%;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--serif);
      font-weight: 200;
      font-size: clamp(16px, 1.4vw, 24px);
      color: var(--cream);
      border: 1.5px solid rgba(242,241,237,0.7);
      border-radius: 100px;
      padding: 14px 36px;
      white-space: nowrap;
      cursor: none;
      z-index: 3;
      transition: opacity 0.25s;
    }
    .cover-cta:hover { opacity: 0.65; }
    @media (pointer: coarse) { .cover-cta { cursor: pointer; } }

    /* ══════════════════════════════════════════
       SCENE: Manifesto
       ══════════════════════════════════════════ */
    .s-manifesto {
      background: var(--cream);
    }
    .s-manifesto h1 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(36px, 8vw, 64px);
      color: var(--red);
      line-height: 1.15;
      letter-spacing: -0.03em;
      text-align: center;
      padding: 0 clamp(24px, 6vw, 80px);
    }
    .s-manifesto .dot-below {
      width: 14px; height: 14px;
      background: var(--red);
      border-radius: 50%;
      margin-top: 32px;
    }
    /* ══════════════════════════════════════════
       SCENES: Percentage (0%–70%)
       ══════════════════════════════════════════ */
    /* ══ PERCENTAGE SCENES — flex row: texto izq + grid 3 fotos dcha ══ */
    .s-pct {
      background: var(--cream);
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
    }

    .s-pct .pct-text {
      position: relative;
      z-index: 4;
      flex: 0 0 38%;
      padding: clamp(80px, 16vh, 130px) clamp(24px, 4vw, 56px) clamp(40px, 6vh, 72px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
    }

    .s-pct .pct-number {
      font-family: var(--serif);
      font-weight: 300;
      font-size: clamp(64px, 13vw, 130px);
      line-height: 0.85;
      color: var(--red);
    }

    .s-pct .pct-title-row {
      display: flex;
      align-items: flex-start;
      gap: clamp(8px, 2vw, 20px);
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .s-pct .pct-title {
      font-family: var(--mono);
      font-weight: 400;
      font-size: clamp(13px, 1.5vw, 17px);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--red);
      line-height: 1.35;
    }

    .s-pct .pct-detail {
      font-family: var(--mono);
      font-weight: 400;
      font-size: clamp(10px, 1.1vw, 13px);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--red);
      line-height: 1.3;
      padding-top: 6px;
    }

    .s-pct .pct-tagline {
      font-family: var(--mono);
      font-weight: 300;
      font-size: clamp(12px, 1.3vw, 15px);
      font-style: italic;
      color: var(--red);
      margin-top: 16px;
      letter-spacing: 0.02em;
      line-height: 1.5;
    }

    .s-pct .pct-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: clamp(9px, 0.85vw, 11px);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--red);
      margin-top: 24px;
      opacity: 0.55;
    }

    .s-pct .pct-sub {
      font-family: var(--mono);
      font-weight: 300;
      font-size: clamp(12px, 1.3vw, 15px);
      line-height: 1.65;
      color: var(--red);
      margin-top: 10px;
      letter-spacing: 0.02em;
    }

    /* Abanico de 3 fotos — una pasa por encima de la otra */
    .pct-fan {
      flex: 1;
      position: relative;
      overflow: hidden;
      align-self: stretch;
    }

    .pct-fan img {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 58%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .pct-fan img:nth-child(1) { left: 0;    z-index: 1; }
    .pct-fan img:nth-child(2) { left: 24%;  z-index: 2; }
    .pct-fan img:nth-child(3) { left: 47%;  z-index: 3; right: 0; width: auto; min-width: 42%; }

    /* Pantalones completos: alinear desde abajo */
    .pct-fan.align-bottom img { object-position: center bottom; }

    /* Ocultar elementos viejos que ya no se usan */
    .s-pct .pct-photo,
    .s-00-photo,
    .s-00-cinta { display: none; }

    /* ─────────────────────────────────────────────────────────
       Fan: tricolor — 3 equal panels, no overlap (0% section)
       ───────────────────────────────────────────────────────── */
    .fan-tricolor {
      flex: 1;
      overflow: hidden;
      align-self: stretch;
      display: flex;
      flex-direction: row;
    }
    .fan-tricolor img {
      flex: 1;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      cursor: default;
    }

    /* ─────────────────────────────────────────────────────────
       Fan: click-to-foreground (sections 15%–70%)
       No opacity changes — only z-index + transform via JS
       ───────────────────────────────────────────────────────── */
    .fan-detail img {
      cursor: pointer;
      transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1),
                  box-shadow 0.45s ease;
    }
    .fan-detail img.fan-active {
      box-shadow: -14px 0 70px rgba(0, 0, 0, 0.42);
    }

    /* ─────────────────────────────────────────────────────────
       0% — column layout: text top, 3 panels spanning full width
       ───────────────────────────────────────────────────────── */
    .s-00.s-pct {
      flex-direction: column;
    }
    .s-00.s-pct .pct-text {
      flex: 0 0 auto;
      width: 100%;
      max-width: none;
      padding: clamp(80px, 14vh, 120px) clamp(32px, 6vw, 72px) clamp(20px, 3vh, 32px);
    }

    /* "Continuar" pill button — bottom-center */
    .pct-continuar {
      position: absolute;
      bottom: clamp(20px, 3vw, 40px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      white-space: nowrap;
    }

    /* ══════════════════════════════════════════
       SCENE: Selector — 3-column Figma layout
       ══════════════════════════════════════════ */
    .s-selector {
      background: var(--cream);
      padding: clamp(64px, 8vh, 88px) clamp(16px, 3vw, 40px) clamp(24px, 3vh, 40px);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: clamp(16px, 2.5vh, 32px);
      position: relative;
    }
    .selector-imperdible {
      position: absolute;
      top: clamp(56px, 9vh, 88px);
      right: clamp(24px, 4vw, 56px);
      width: clamp(36px, 5vw, 60px);
      transform: rotate(62deg);
      opacity: 0.85;
      pointer-events: none;
    }
    .selector-header { width: 100%; }
    .selector-supertitle {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(28px, 4.5vw, 52px);
      color: var(--red);
      letter-spacing: -0.03em;
      line-height: 1.05;
    }
    .selector-subtitle {
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 14px);
      font-weight: 300;
      color: var(--red);
      opacity: 0.6;
      margin-top: 6px;
      letter-spacing: 0.02em;
    }
    .selector-grid {
      display: flex;
      gap: clamp(8px, 2vw, 28px);
      justify-content: center;
      align-items: flex-end;
      flex: 1;
      width: 100%;
      max-width: 900px;
    }
    .sel-col {
      flex: 1;
      max-width: clamp(200px, 26vw, 300px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: none;
      opacity: 0.42;
      transition: opacity .45s var(--ease2), transform .45s var(--ease2), flex .45s var(--ease2);
      transform: translateX(0) scale(1);
    }
    @media (pointer: coarse) { .sel-col { cursor: pointer; } }
    .sel-col.active {
      opacity: 1;
      transform: translateX(0) scale(1.06);
      flex: 1.25;
      z-index: 10;
    }
    .sel-col:not(.active) {
      transform: scale(0.92);
    }

    /* Hover selector — controlado por JS con clases .sel-hovering y .sel-hovered-peer */
    .sel-col.sel-hovering {
      opacity: 1;
      transform: scale(1.12);
      flex: 1.3;
      z-index: 20;
      transition: opacity .22s var(--ease2), transform .22s var(--ease2), flex .22s var(--ease2);
    }
    .sel-col.sel-hovering .sel-img-stack {
      transform: scale(1.04);
    }
    .sel-col.sel-hovering .sel-line {
      transform: scaleX(1);
    }
    .sel-col.sel-hovered-peer {
      opacity: 0.22;
      transform: scale(0.87);
      transition: opacity .28s var(--ease2), transform .28s var(--ease2), flex .28s var(--ease2);
    }
    .sel-img-wrap {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .sel-img-stack {
      position: relative;
      width: 100%;
      height: clamp(220px, 52vh, 500px);
      flex-shrink: 0;
    }
    .sel-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      transition: opacity .35s ease;
    }
    .sel-img-back { opacity: 0; }
    .sel-col.active .sel-img-stack { transform: scale(1.04); transition: transform .45s var(--ease2); }
    .sel-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin: 6px 0 2px;
    }
    .sel-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      border: 1.5px solid var(--red);
      cursor: pointer;
      transition: background .2s;
      flex-shrink: 0;
    }
    .sel-dot.active { background: var(--red); }
    .sel-line {
      width: clamp(36px, 5vw, 64px);
      height: 1.5px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease2);
      margin-top: 2px;
    }
    .sel-col.active .sel-line { transform: scaleX(1); }
    .sel-name {
      font-family: var(--mono);
      font-size: clamp(12px, 1.4vw, 17px);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--red);
      text-align: center;
    }
    .sel-material {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(11px, 1vw, 13px);
      color: var(--red);
      opacity: 0.5;
      text-align: center;
      line-height: 1.4;
    }
    .info-circle {
      width: 24px; height: 24px;
      border: 1.5px solid var(--red);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 400;
      cursor: none;
      background: transparent;
      color: var(--red);
      transition: all var(--dur-fast);
      flex-shrink: 0;
    }
    @media (pointer: coarse) { .info-circle { cursor: pointer; } }
    .info-circle:hover { background: var(--red); color: var(--cream); }
    .selector-cta {
      display: flex;
      align-items: center;
      gap: clamp(32px, 8vw, 80px);
      width: 100%;
      justify-content: center;
    }

    /* product photos in history scenes */
    .pct-photo-wire {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.92;
      pointer-events: none;
      border-radius: 6px;
    }

    /* pill-btn white-space fix */
    .pill-btn { white-space: nowrap; }

    /* ══════════════════════════════════════════
       SCENE: Transition Red
       ══════════════════════════════════════════ */
    .s-transition-red {
      background: var(--red-dark);
      color: var(--cream);
    }
    .s-transition-red .trans-content {
      position: relative; z-index: 2;
      text-align: center;
      padding: 0 clamp(24px, 6vw, 80px);
    }
    .s-transition-red h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 6vw, 68px);
      color: var(--cream);
      text-transform: uppercase;
      line-height: 1.15;
    }
    .s-transition-red .trans-sub {
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 13px);
      font-weight: 300;
      color: var(--cream);
      opacity: 0.75;
      margin-top: 16px;
      line-height: 1.6;
    }
    .arrow-circle {
      width: 44px; height: 44px;
      border: 1.5px solid var(--cream);
      border-radius: 50%;
      background: transparent;
      color: var(--cream);
      font-family: var(--mono);
      font-size: 16px;
      cursor: none;
      display: inline-flex; align-items: center; justify-content: center;
      margin-top: 24px;
      transition: all var(--dur-smooth);
    }
    @media (pointer: coarse) { .arrow-circle { cursor: pointer; } }
    .arrow-circle:hover { background: var(--cream); color: var(--red); }
    .s-transition-red .dados-img {
      margin-top: clamp(24px, 4vh, 48px);
      width: clamp(130px, 18vw, 200px);
      opacity: 0.88;
      filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
    }

    /* ══════════════════════════════════════════
       SCENE: Queremos Saber Más Sobre Ti
       ══════════════════════════════════════════ */
    .s-perfil {
      background: var(--red-dark);
      color: var(--cream);
    }
    .s-perfil .perfil-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: clamp(20px, 3vh, 32px);
      padding: 0 clamp(24px, 6vw, 80px);
    }
    .s-perfil h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 5vw, 52px);
      color: var(--cream);
      letter-spacing: 0.04em;
      line-height: 1.15;
    }
    .s-perfil .perfil-fields {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: 100%;
      max-width: 360px;
    }
    .perfil-select,
    .perfil-input {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(242,241,237,.4);
      color: var(--cream);
      font-family: var(--mono);
      font-size: clamp(13px, 1.4vw, 15px);
      font-weight: 300;
      letter-spacing: 0.04em;
      padding: 10px 4px;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      transition: border-color .3s;
    }
    .perfil-input::placeholder { color: rgba(242,241,237,.4); }
    .perfil-select option { background: var(--red-dark); color: var(--cream); }
    .perfil-select:focus,
    .perfil-input:focus { border-bottom-color: var(--cream); }
    .s-perfil .perfil-genero {
      display: flex;
      gap: 32px;
      justify-content: center;
      margin-top: 8px;
    }
    .s-perfil .dados-img {
      width: clamp(120px, 16vw, 200px);
      opacity: 0.9;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
    }
    .check-label {
      font-family: var(--mono);
      font-size: clamp(12px, 1.2vw, 14px);
      font-weight: 300;
      color: var(--cream);
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      letter-spacing: 0.04em;
    }
    .check-label input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      width: 16px; height: 16px;
      border: 1.5px solid rgba(242,241,237,.5);
      background: transparent;
      cursor: pointer;
      flex-shrink: 0;
    }
    .check-label input[type="radio"]:checked {
      background: var(--cream);
      border-color: var(--cream);
    }

    /* ══════════════════════════════════════════
       SCENE: Danos Tu 30%
       ══════════════════════════════════════════ */
    .s-caja {
      background: var(--red-dark);
      color: var(--cream);
    }
    .s-caja .caja-content {
      position: relative; z-index: 2;
      text-align: center;
      display: flex; flex-direction: column;
      align-items: center; gap: 16px;
    }
    .s-caja h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 5.5vw, 60px);
      text-transform: uppercase;
      line-height: 1.15;
    }
    .s-caja .caja-sub {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      font-weight: 300;
      opacity: 0.75;
      max-width: 440px;
      line-height: 1.7;
    }
    .s-caja .key-visual,
    .s-caja .key-card-stack {
      position: relative;
      display: flex; flex-direction: column;
      align-items: center;
      margin-top: 8px;
      min-height: clamp(200px, 32vh, 340px);
    }
    .s-caja .key-img {
      width: clamp(80px, 12vw, 140px);
      filter: drop-shadow(0 8px 24px rgba(0,0,0,.3));
      position: relative;
      z-index: 3;
    }
    .key-card-stack .card-visual {
      margin-top: clamp(-30px, -4vw, -20px);
      z-index: 1;
    }
    .key-shadow {
      width: clamp(80px, 10vw, 120px);
      height: 6px;
      background: radial-gradient(ellipse, rgba(0,0,0,.25) 0%, transparent 70%);
      border-radius: 50%;
      margin-top: 8px;
    }
    .s-caja .card-visual {
      width: clamp(160px, 22vw, 240px);
      height: clamp(100px, 14vw, 155px);
      background: var(--red);
      border: 1px solid rgba(242,241,237,.2);
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-size: clamp(16px, 2vw, 22px);
      letter-spacing: 0.06em;
      box-shadow: 0 12px 40px rgba(0,0,0,.25);
    }

    /* ══════════════════════════════════════════
       SCENE: Todo Empieza Aquí — two-column
       ══════════════════════════════════════════ */
    .s-caja-landing {
      background: var(--red-dark);
      color: var(--cream);
      align-items: stretch;
      justify-content: stretch;
    }
    .caja-landing-content {
      display: flex;
      width: 100%; height: 100%;
      padding: clamp(70px, 8vh, 100px) clamp(24px, 5vw, 60px) clamp(30px, 4vh, 50px);
      gap: clamp(24px, 5vw, 60px);
      align-items: center;
    }
    .caja-landing-left {
      flex: 1;
      display: flex; flex-direction: column;
      justify-content: center;
      gap: clamp(14px, 2.2vh, 22px);
    }
    .caja-landing-left h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 5.5vw, 60px);
      text-transform: uppercase;
      line-height: 1.15;
    }
    .caja-landing-sub {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      font-weight: 300;
      opacity: 0.75;
      line-height: 1.7;
    }
    .caja-landing-info {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      font-weight: 300;
      opacity: 0.5;
      line-height: 1.7;
      margin-top: 4px;
    }
    .caja-landing-right {
      flex: 1;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .caja-landing-img {
      height: clamp(240px, 52vh, 500px);
      object-fit: contain;
      filter: drop-shadow(0 12px 32px rgba(0,0,0,.25));
    }
    @media (max-width: 768px) {
      .caja-landing-content { flex-direction: column; }
      .caja-landing-right { flex: 0 0 auto; }
      .caja-landing-img { height: clamp(160px, 30vh, 260px); }
    }

    /* Pill button */
    .pill-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 24px;
      border: 1.5px solid var(--cream);
      border-radius: 24px;
      background: transparent;
      font-family: var(--mono);
      font-size: clamp(10px, 1.2vw, 13px);
      font-weight: 400;
      color: var(--cream);
      letter-spacing: 0.04em;
      cursor: none;
      transition: all var(--dur-smooth) var(--ease);
    }
    @media (pointer: coarse) { .pill-btn { cursor: pointer; } }
    .pill-btn:hover { background: var(--cream); color: var(--red); }
    .pill-btn.dark {
      border-color: var(--red); color: var(--red);
    }
    .pill-btn.dark:hover { background: var(--red); color: var(--cream); }

    /* Big pill button — "COMPRAR LA CAJA" */
    .pill-btn-big {
      padding: 16px 40px;
      font-size: clamp(13px, 1.5vw, 17px);
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-width: 2px;
    }

    /* Saber más button */
    .saber-mas-wrap {
      position: absolute;
      right: -80px; top: 10%;
      display: flex; flex-direction: column;
      align-items: center; gap: 4px;
    }
    .saber-mas-btn {
      width: 36px; height: 36px;
      border: 1.5px solid var(--cream);
      border-radius: 50%;
      background: transparent;
      color: var(--cream);
      font-size: 16px;
      cursor: none;
      display: flex; align-items: center; justify-content: center;
    }
    .saber-mas-text {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--cream);
      opacity: 0.7;
    }

    /* ══════════════════════════════════════════
       SCENE: Checkout — full height, bolder
       ══════════════════════════════════════════ */
    .s-checkout {
      background: var(--red-dark);
      color: var(--cream);
      align-items: stretch;
      justify-content: stretch;
    }
    .s-checkout .checkout-content {
      position: relative; z-index: 2;
      display: flex;
      width: 100%; height: 100%;
      padding: clamp(70px, 8vh, 100px) clamp(24px, 5vw, 60px) clamp(30px, 4vh, 50px);
    }
    .checkout-left {
      flex: 1;
      display: flex; flex-direction: column;
      gap: 20px;
      overflow-y: auto;
      padding-right: clamp(20px, 4vw, 60px);
      max-width: 520px;
      justify-content: center;
    }
    .checkout-left::-webkit-scrollbar { width: 2px; }
    .checkout-left::-webkit-scrollbar-thumb { background: rgba(242,241,237,.2); }
    .checkout-section-title {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(18px, 2.2vw, 26px);
      margin-bottom: 10px;
    }
    .checkout-field {
      display: flex; flex-direction: column; gap: 4px;
      margin-bottom: 10px;
    }
    .checkout-field input {
      width: 100%; padding: 10px 0;
      background: transparent; border: none;
      border-bottom: 1px solid rgba(242,241,237,.35);
      font-family: var(--mono);
      font-size: clamp(11px, 1.2vw, 14px);
      font-weight: 400;
      color: var(--cream);
      outline: none; transition: border-color .3s;
    }
    .checkout-field input::placeholder { color: rgba(242,241,237,.4); }
    .checkout-field input:focus { border-bottom-color: var(--cream); }
    .checkout-row { display: flex; gap: 16px; }
    .checkout-row .checkout-field { flex: 1; }
    .checkout-total {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 12px; padding-top: 16px;
      border-top: 1px solid rgba(242,241,237,.25);
    }
    .checkout-total-text {
      font-family: var(--mono);
      font-size: clamp(16px, 2vw, 22px);
      font-weight: 500; letter-spacing: 0.08em;
    }
    .checkout-btn {
      padding: 14px 36px;
      background: var(--cream); border: none;
      border-radius: 2px;
      font-family: var(--mono);
      font-size: clamp(11px, 1.2vw, 14px);
      font-weight: 500; color: var(--red);
      text-transform: uppercase; letter-spacing: 0.1em;
      cursor: none; transition: opacity .25s;
    }
    @media (pointer: coarse) { .checkout-btn { cursor: pointer; } }
    .checkout-btn:hover { opacity: 0.85; }

    /* Checkout right — box + stars */
    .checkout-right {
      flex: 1;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .checkout-star {
      position: absolute;
      width: clamp(64px, 8vw, 110px);
      top: 10%; left: 20%;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
      z-index: 3;
    }
    .checkout-star.star-2 {
      top: auto; bottom: 18%; left: auto; right: 18%;
      width: clamp(48px, 6vw, 88px);
    }
    .box-3d {
      width: clamp(200px, 22vw, 320px);
      height: clamp(250px, 28vw, 400px);
      perspective: 800px;
    }
    .box-3d-inner {
      width: 100%; height: 100%;
      transform-style: preserve-3d;
      transform: rotateY(-18deg) rotateX(8deg);
    }
    .box-face {
      position: absolute;
      background: var(--red);
      border: 1px solid rgba(242,241,237,.15);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-size: clamp(18px, 2vw, 28px);
      color: var(--cream);
      letter-spacing: 0.08em;
      backface-visibility: hidden;
    }
    .box-face sup { font-size: 0.45em; font-style: normal; vertical-align: super; }
    .box-front { width: 100%; height: 100%; transform: translateZ(60px); }
    .box-right-face { width: 120px; height: 100%; right: 0; transform-origin: right center; transform: translateX(100%) rotateY(90deg); background: #7a0f0f; }
    .box-top { width: 100%; height: 120px; top: 0; transform-origin: top center; transform: translateY(-100%) rotateX(90deg); background: #ad1616; }

    /* ══════════════════════════════════════════
       SCENE: Unified Checkout (Todo empieza + form)
       ══════════════════════════════════════════ */
    .s-checkout-unified {
      background: var(--red-dark);
      color: var(--cream);
      /* Override .scene defaults — this scene needs horizontal layout */
      flex-direction: row !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      padding: 0 !important;
      overflow: visible !important;
    }
    .s-checkout-unified .satin-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .checkout-unified-content {
      position: relative; z-index: 2;
      display: flex;
      width: 100%; height: 100%;
      padding: clamp(80px, 10vh, 110px) clamp(32px, 5vw, 64px) clamp(24px, 3vh, 40px);
      gap: clamp(32px, 4vw, 64px);
    }
    /* ── Left: Title + Form ── */
    .checkout-unified-left {
      flex: 1 1 50%;
      display: flex; flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      padding-right: clamp(16px, 3vw, 40px);
      justify-content: center;
      min-width: 0;
    }
    .checkout-unified-left::-webkit-scrollbar { width: 2px; }
    .checkout-unified-left::-webkit-scrollbar-thumb { background: rgba(242,241,237,.2); }
    .checkout-unified-left h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(24px, 3.8vw, 48px);
      text-transform: uppercase;
      line-height: 1.05;
      letter-spacing: -0.01em;
      margin-bottom: 2px;
    }
    .checkout-unified-sub {
      font-family: var(--mono);
      font-size: clamp(10px, 0.9vw, 12px);
      font-weight: 300;
      opacity: 0.65;
      line-height: 1.65;
      margin-bottom: 12px;
    }
    /* Form fields inside unified checkout */
    .s-checkout-unified .checkout-section-title {
      font-size: clamp(15px, 1.8vw, 21px);
      margin-bottom: 6px;
      margin-top: 4px;
    }
    .s-checkout-unified .checkout-field { margin-bottom: 6px; }
    .s-checkout-unified .checkout-field input { padding: 8px 0; }
    .s-checkout-unified .checkout-total { margin-top: 8px; padding-top: 12px; }

    /* ── Right: Caja + Llave composition ── */
    .checkout-unified-right {
      flex: 0 0 40%;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: visible;
    }
    .caja-key-wrap {
      position: relative;
      width: clamp(360px, 50vh, 560px);
      aspect-ratio: 3/4;
    }
    .caja-key-wrap .caja-img {
      position: absolute;
      top: 42%; left: 50%;
      transform: translate(-50%, -50%) rotate(-8deg);
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 16px 40px rgba(0,0,0,.4));
      z-index: 2;
    }
    .caja-key-wrap .key-img {
      position: absolute;
      width: 130%;
      height: auto;
      object-fit: contain;
      /* Key BEHIND caja — shifted up so crown peeks above, lock peeks below */
      top: 42%; left: 50%;
      transform: translate(-46%, -50%) rotate(-40deg);
      transform-origin: center;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,.45));
      z-index: 0;
    }
    /* Stars — bigger */
    .s-checkout-unified .checkout-star {
      position: absolute;
      width: clamp(64px, 8vw, 110px);
      top: 12%; right: 8%;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
      z-index: 3;
    }
    .s-checkout-unified .checkout-star.star-2 {
      top: auto; bottom: 14%; right: auto; left: 5%;
      width: clamp(48px, 6vw, 88px);
    }

    /* ── Mobile (inline override for checkout-unified) ── */
    @media (max-width: 768px) {
      .s-checkout-unified {
        flex-direction: column !important;
        overflow-y: auto !important;
      }
      .checkout-unified-content {
        flex-direction: column;
        padding: 80px 20px 32px;
        gap: 16px;
        height: auto;
        min-height: 100%;
      }
      .checkout-unified-right {
        flex: 0 0 auto;
        order: -1;
        height: 260px;
      }
      /* Increased from 180px — enough to show caja + key composition */
      .caja-key-wrap {
        width: clamp(220px, 60vw, 300px);
        aspect-ratio: 3/4;
      }
      .checkout-unified-left {
        flex: 0 0 auto;
        padding-right: 0;
        overflow-y: visible;
      }
      /* Checkout form inputs — proper mobile spacing */
      .s-checkout-unified .checkout-field input { padding: 12px 0; font-size: 16px; }
      .s-checkout-unified .checkout-row { flex-direction: column; gap: 0; }
    }

    /* ══════════════════════════════════════════
       SCENE: Ya Estás Dentro — bigger ticket
       ══════════════════════════════════════════ */
    .s-dentro {
      background: var(--red-dark);
      color: var(--cream);
    }
    .s-dentro .dentro-content {
      position: relative; z-index: 2;
      text-align: center;
      display: flex; flex-direction: column;
      align-items: center; gap: 14px;
    }
    .s-dentro h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 5.5vw, 56px);
      text-transform: uppercase;
    }
    .s-dentro .dentro-sub {
      font-family: var(--mono);
      font-size: clamp(12px, 1.2vw, 15px);
      font-weight: 300;
      opacity: 0.8;
      line-height: 1.6;
    }

    /* Código de acceso — escena "Ya estás dentro" */
    .dentro-code {
      border: 1px solid rgba(201,168,76,.4);
      padding: clamp(16px, 3vh, 24px) clamp(24px, 4vw, 40px);
      text-align: center;
      margin: clamp(12px, 2vh, 20px) 0;
    }
    .dentro-code-label {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: var(--gold);
      opacity: 0.7;
      margin-bottom: 8px;
    }
    .dentro-code-value {
      font-family: var(--mono);
      font-size: clamp(28px, 5vw, 44px);
      font-weight: 700;
      letter-spacing: .15em;
      color: var(--gold);
      line-height: 1;
    }
    .dentro-code-hint {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 300;
      color: rgba(245,240,232,.35);
      margin-top: 8px;
      letter-spacing: .05em;
    }

    /* Golden ticket — recibo-dorado.png centrado con decoración */
    .ticket-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
    }
    .ticket-dorado {
      height: clamp(220px, 48vh, 460px);
      width: auto;
      object-fit: contain;
      filter: brightness(1.1) drop-shadow(0 16px 48px rgba(0,0,0,.2));
      position: relative;
      z-index: 2;
      mix-blend-mode: screen;
      opacity: 0.92;
    }
    .ticket-deco-dados {
      position: absolute;
      width: clamp(56px, 7vw, 96px);
      bottom: -8%;
      right: calc(50% - clamp(130px, 16vw, 240px));
      transform: rotate(35deg);
      opacity: 0.9;
      z-index: 3;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
    }
    .ticket-deco-star {
      position: absolute;
      width: clamp(36px, 4.5vw, 64px);
      top: 2%;
      left: calc(50% - clamp(100px, 13vw, 200px));
      opacity: 0.85;
      z-index: 3;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
    }
    .dentro-footer {
      font-family: var(--mono);
      font-size: clamp(12px, 1.2vw, 15px);
      font-weight: 300;
      opacity: 0.7;
      line-height: 1.6;
      margin-top: 12px;
    }

    /* ══════════════════════════════════════════
       Detail Modal
       ══════════════════════════════════════════ */
    .detail-overlay {
      position: fixed; inset: 0; z-index: 200;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.35);
      opacity: 0; visibility: hidden;
      transition: opacity .4s var(--ease), visibility .4s;
    }
    .detail-overlay.active { opacity: 1; visibility: visible; }
    .detail-card {
      width: clamp(300px, 42vw, 500px);
      max-height: 80vh;
      background: var(--red-dark);
      color: var(--cream);
      padding: clamp(28px, 4vw, 48px);
      overflow-y: auto;
      position: relative;
      box-shadow: 0 24px 60px rgba(0,0,0,.3);
    }
    .detail-close {
      position: absolute; top: 12px; right: 16px;
      background: none; border: none;
      color: var(--cream);
      font-size: 24px;
      cursor: none;
    }
    @media (pointer: coarse) { .detail-close { cursor: pointer; } }
    .detail-card h3 {
      font-family: var(--mono);
      font-size: clamp(14px, 1.6vw, 18px);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 6px;
    }
    .detail-material {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      font-weight: 300;
      letter-spacing: 0.06em;
      opacity: 0.6;
      margin-bottom: 16px;
      text-transform: uppercase;
    }
    .detail-body {
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 13px);
      font-weight: 300;
      line-height: 1.7;
    }
    .detail-price {
      font-family: var(--mono);
      font-size: clamp(12px, 1.4vw, 16px);
      font-weight: 400;
      margin-top: 20px;
      padding-top: 12px;
      border-top: 1px solid rgba(242,241,237,.15);
    }

    /* ══════════════════════════════════════════
       Mobile responsive
       ══════════════════════════════════════════ */
    @media (max-width: 768px) {
      .checkout-content { flex-direction: column; }
      .checkout-right { display: none; }
      .checkout-left { max-width: 100%; padding-right: 0; }
      .saber-mas-wrap { right: -60px; }

      /* ── Escenas % — móvil ─────────────────── */
      .s-pct {
        flex-direction: column;
      }
      .s-pct .pct-text {
        flex: 0 0 auto;
        padding: clamp(64px, 12vh, 88px) clamp(20px, 5vw, 32px) 16px;
      }
      .pct-fan {
        flex: 1;
        min-height: 120px;
      }
      .fan-tricolor {
        min-height: 140px;
      }
    }

    /* ══════════════════════════════════════════
       SCENE: Ajuste de Pantalón
       ══════════════════════════════════════════ */
    .s-ajuste {
      background: var(--cream);
      align-items: stretch;
      justify-content: stretch;
    }
    .ajuste-layout {
      display: flex;
      width: 100%; height: 100%;
      padding: clamp(70px, 8vh, 100px) clamp(24px, 5vw, 60px) clamp(30px, 4vh, 50px);
      gap: clamp(24px, 5vw, 60px);
    }
    .ajuste-left {
      flex: 0 0 clamp(260px, 36vw, 440px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(18px, 2.8vh, 30px);
    }
    .ajuste-title {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(24px, 3.2vw, 40px);
      color: var(--red);
      line-height: 1.15;
    }
    .ajuste-sub {
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 13px);
      font-weight: 300;
      color: var(--red);
      opacity: 0.55;
      margin-top: 4px;
      letter-spacing: 0.04em;
    }
    .ajuste-group { display: flex; flex-direction: column; gap: 10px; }
    .ajuste-group-label {
      font-family: var(--mono);
      font-size: clamp(9px, 0.9vw, 11px);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--red);
      opacity: 0.45;
    }
    .ajuste-options { display: flex; flex-wrap: wrap; gap: 8px; }
    .ajuste-opt {
      padding: 8px 18px;
      border: 1.5px solid var(--red);
      border-radius: 20px;
      background: transparent;
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 13px);
      font-weight: 400;
      color: var(--red);
      letter-spacing: 0.04em;
      cursor: none;
      transition: all var(--dur-smooth) var(--ease);
    }
    @media (pointer: coarse) { .ajuste-opt { cursor: pointer; } }
    .ajuste-opt:hover { background: rgba(150,18,18,.08); }
    .ajuste-opt.active { background: var(--red); color: var(--cream); }
    .ajuste-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ajuste-pant {
      max-height: clamp(300px, 68vh, 600px);
      max-width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 16px 40px rgba(150,18,18,.12));
      transition: opacity .4s var(--ease2), transform .5s var(--ease2);
    }

    /* ══════════════════════════════════════════
       SCENE: Tus Medidas
       ══════════════════════════════════════════ */
    .s-medida {
      background: var(--cream);
      align-items: stretch;
      justify-content: stretch;
    }
    .medida-layout {
      display: flex;
      width: 100%; height: 100%;
      padding: clamp(70px, 8vh, 100px) clamp(24px, 5vw, 60px) clamp(30px, 4vh, 50px);
      gap: clamp(24px, 5vw, 60px);
    }
    .medida-left {
      flex: 0 0 clamp(280px, 42vw, 520px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(10px, 1.8vh, 18px);
    }
    .medida-label {
      font-family: var(--mono);
      font-size: clamp(9px, 0.9vw, 11px);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--red);
      opacity: 0.45;
    }
    .medida-title {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(28px, 4.5vw, 52px);
      color: var(--red);
      line-height: 1.1;
    }
    .medida-number {
      margin-top: clamp(6px, 1.5vh, 16px);
      line-height: 1;
    }
    .medida-number .medida-big {
      font-family: var(--serif);
      font-weight: 300;
      font-size: clamp(80px, 17vw, 150px);
      line-height: 0.85;
      color: var(--red);
    }
    .medida-unit {
      font-family: var(--mono);
      font-size: clamp(18px, 2.5vw, 28px);
      font-weight: 300;
      letter-spacing: 0.04em;
      vertical-align: super;
      margin-left: 6px;
      color: var(--red);
    }
    .medida-formula {
      font-family: var(--mono);
      font-size: clamp(11px, 1.2vw, 14px);
      font-weight: 300;
      color: var(--red);
      opacity: 0.5;
      letter-spacing: 0.04em;
    }
    .medida-formula strong { opacity: 1; font-weight: 500; color: var(--red); }
    .medida-slider-wrap { margin-top: clamp(6px, 1.5vh, 14px); }
    .medida-slider {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 2px;
      background: rgba(150,18,18,.2);
      border-radius: 1px;
      outline: none;
      cursor: pointer;
    }
    .medida-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px; height: 20px;
      background: var(--red);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(150,18,18,.35);
      transition: transform .2s;
    }
    .medida-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
    .medida-slider::-moz-range-thumb {
      width: 20px; height: 20px;
      background: var(--red); border: none;
      border-radius: 50%; cursor: pointer;
    }
    .medida-range-labels {
      display: flex; justify-content: space-between;
      font-family: var(--mono); font-size: 10px;
      color: var(--red); opacity: 0.35; margin-top: 6px;
    }
    .medida-hint {
      display: flex; align-items: center; gap: 8px;
      margin-top: clamp(4px, 1vh, 10px); cursor: pointer;
    }
    .medida-hint-icon {
      width: 20px; height: 20px;
      border: 1.5px solid var(--red);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono); font-size: 11px;
      color: var(--red); flex-shrink: 0; opacity: 0.5;
    }
    .medida-hint span {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      color: var(--red); opacity: 0.5;
      text-decoration: underline; text-underline-offset: 3px;
      letter-spacing: 0.02em;
    }
    .medida-right {
      flex: 1;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .medida-photo {
      width: 100%;
      max-width: clamp(200px, 36vw, 460px);
      height: clamp(300px, 65vh, 580px);
      object-fit: cover;
      border-radius: 1px;
    }

    /* ══════════════════════════════════════════
       SCENE: Resumen
       ══════════════════════════════════════════ */
    .s-resumen {
      background: var(--cream);
      align-items: stretch;
      justify-content: stretch;
    }
    .resumen-layout {
      display: flex;
      width: 100%; height: 100%;
      padding: clamp(70px, 8vh, 100px) clamp(24px, 5vw, 60px) clamp(30px, 4vh, 50px);
      gap: clamp(24px, 5vw, 60px);
    }
    .resumen-left {
      flex: 0 0 clamp(260px, 36vw, 420px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(12px, 2vh, 20px);
    }
    .resumen-heading {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(28px, 4vw, 48px);
      color: var(--red);
    }
    .resumen-divider {
      width: 28px; height: 1px;
      background: var(--red); opacity: 0.3;
    }
    .resumen-row { display: flex; flex-direction: column; gap: 3px; }
    .resumen-row-label {
      font-family: var(--mono);
      font-size: clamp(9px, 0.9vw, 11px);
      text-transform: uppercase; letter-spacing: 0.14em;
      color: var(--red); opacity: 0.45; font-weight: 500;
    }
    .resumen-row-value {
      font-family: var(--mono);
      font-size: clamp(13px, 1.4vw, 16px);
      font-weight: 400; color: var(--red); letter-spacing: 0.04em;
    }
    .resumen-price {
      font-family: var(--serif);
      font-size: clamp(36px, 5.5vw, 56px);
      font-weight: 300; color: var(--red);
      margin-top: clamp(6px, 1.2vh, 12px);
    }
    .resumen-right {
      flex: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .resumen-pant {
      max-height: clamp(300px, 72vh, 640px);
      max-width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 16px 40px rgba(150,18,18,.1));
    }

    /* ══════════════════════════════════════════
       SCENE: Mi Cesta
       ══════════════════════════════════════════ */
    .s-cesta {
      background: var(--cream);
      align-items: stretch;
      justify-content: stretch;
    }
    .cesta-layout {
      display: flex;
      width: 100%; height: 100%;
      padding: clamp(70px, 8vh, 100px) clamp(24px, 5vw, 60px) clamp(30px, 4vh, 50px);
      gap: clamp(24px, 5vw, 60px);
      align-items: center;
    }
    .cesta-left { flex: 1; display: flex; flex-direction: column; gap: clamp(16px, 2.5vh, 28px); }
    .cesta-heading {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(28px, 4vw, 48px);
      color: var(--red);
    }
    .cesta-item {
      display: flex;
      gap: clamp(16px, 3vw, 28px);
      align-items: flex-start;
      padding: clamp(16px, 2.5vw, 24px);
      border: 1px solid rgba(150,18,18,.15);
      border-radius: 2px;
    }
    .cesta-item-img {
      width: clamp(60px, 10vw, 100px);
      height: clamp(80px, 14vw, 140px);
      object-fit: contain; flex-shrink: 0;
    }
    .cesta-item-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .cesta-item-name {
      font-family: var(--mono);
      font-size: clamp(13px, 1.4vw, 16px);
      font-weight: 500; color: var(--red);
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .cesta-item-meta {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      color: var(--red); opacity: 0.5; line-height: 1.6;
    }
    .cesta-item-edit {
      font-family: var(--mono); font-size: 11px;
      color: var(--red); opacity: 0.45;
      background: none; border: none; cursor: pointer;
      text-decoration: underline; text-underline-offset: 3px;
      padding: 0; margin-top: 4px; align-self: flex-start;
    }
    .cesta-item-price {
      font-family: var(--serif);
      font-size: clamp(22px, 3vw, 32px);
      color: var(--red); font-weight: 300; flex-shrink: 0;
    }
    .cesta-right {
      flex: 0 0 clamp(220px, 28vw, 320px);
      display: flex; flex-direction: column;
      gap: 0;
      padding: clamp(20px, 3vw, 32px);
      border: 1px solid rgba(150,18,18,.15);
      border-radius: 2px;
    }
    .cesta-envio {
      font-family: var(--mono);
      font-size: clamp(9px, 0.9vw, 11px);
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--red); font-weight: 500;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(150,18,18,.15);
      margin-bottom: 12px;
    }
    .cesta-line {
      display: flex; justify-content: space-between;
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 13px);
      color: var(--red); padding: 8px 0; opacity: 0.65;
    }
    .cesta-total {
      display: flex; justify-content: space-between;
      font-family: var(--mono);
      font-size: clamp(13px, 1.4vw, 16px);
      font-weight: 500; color: var(--red);
      padding: 12px 0;
      border-top: 1px solid rgba(150,18,18,.2);
      margin-top: 4px;
    }
    .cesta-iva {
      font-family: var(--mono); font-size: 10px;
      color: var(--red); opacity: 0.35; margin-bottom: 16px;
    }
    .cesta-pay-logos {
      display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
    }
    .cesta-pay-logo {
      font-family: var(--mono); font-size: 9px;
      color: var(--red); border: 1px solid rgba(150,18,18,.25);
      padding: 3px 8px; border-radius: 2px;
      display: flex; align-items: center; opacity: 0.5;
    }
    .cesta-btn {
      width: 100%; padding: 14px;
      background: var(--red); border: none; border-radius: 2px;
      font-family: var(--mono);
      font-size: clamp(11px, 1.2vw, 13px);
      font-weight: 500; color: var(--cream);
      text-transform: uppercase; letter-spacing: 0.1em;
      cursor: none; transition: opacity .25s;
    }
    @media (pointer: coarse) { .cesta-btn { cursor: pointer; } }
    .cesta-btn:hover { opacity: 0.85; }

    /* ══════════════════════════════════════════
       SCENE: Tu Cuenta
       ══════════════════════════════════════════ */
    .s-cuenta { background: var(--red-dark); color: var(--cream); }
    .cuenta-content {
      position: relative; z-index: 2;
      text-align: center;
      display: flex; flex-direction: column;
      align-items: center;
      gap: clamp(14px, 2.2vh, 22px);
      padding: 0 clamp(24px, 6vw, 80px);
      width: 100%; max-width: 440px;
    }
    .s-cuenta h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 5vw, 52px);
      color: var(--cream);
      letter-spacing: 0.04em;
      line-height: 1.15;
    }
    .cuenta-sub {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      color: var(--cream); opacity: 0.5;
      letter-spacing: 0.03em; line-height: 1.7;
    }
    .cuenta-fields { display: flex; flex-direction: column; width: 100%; gap: 0; }
    .cuenta-field {
      width: 100%; padding: 12px 0;
      background: transparent; border: none;
      border-bottom: 1px solid rgba(242,241,237,.2);
      font-family: var(--mono);
      font-size: clamp(13px, 1.3vw, 15px);
      font-weight: 300; color: var(--cream);
      outline: none; text-align: center;
      transition: border-color .3s;
    }
    .cuenta-field::placeholder { color: rgba(242,241,237,.3); }
    .cuenta-field:focus { border-bottom-color: rgba(242,241,237,.7); }
    .cuenta-dedal {
      width: clamp(48px, 6vw, 80px);
      opacity: 0.75;
      filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
      object-fit: contain;
    }

    /* ══════════════════════════════════════════
       Mobile — new scenes (768px)
       ══════════════════════════════════════════ */
    @media (max-width: 768px) {
      .ajuste-layout { flex-direction: column; overflow-y: auto; }
      .ajuste-left { flex: 0 0 auto; }
      .ajuste-right { flex: 0 0 180px; }
      .ajuste-pant { max-height: 180px; }

      .medida-layout { flex-direction: column; }
      .medida-right { display: none; }
      .medida-left { flex: 0 0 auto; }

      .resumen-layout { flex-direction: column; }
      .resumen-right { flex: 0 0 200px; }
      .resumen-pant { max-height: 200px; }

      .cesta-layout { flex-direction: column; overflow-y: auto; }
      .cesta-right { flex: 0 0 auto; width: 100%; }

      .cuenta-content { max-width: 100%; }

      /* Mobile typography optimization */
      h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
      .cover-title { font-size: clamp(32px, 9vw, 48px); }
      .pct-number { font-size: clamp(32px, 8vw, 48px); }
      .pct-detail { font-size: clamp(16px, 4vw, 22px); }
      .selector-subtitle, .pct-tagline { font-size: clamp(12px, 3vw, 14px); line-height: 1.5; }

      /* Touch targets 44px+ */
      .pill-btn, button, input[type="button"] { min-height: 44px; padding: 12px 16px; }
      .sel-col { min-height: 56px; }
      .info-circle { width: 32px; height: 32px; }

      /* Spacing cleanup */
      .scene { padding: clamp(60px, 12vh, 80px) clamp(18px, 5vw, 24px); }
      .selector-grid { gap: 12px; }
      .cesta-item { padding: clamp(12px, 3vw, 16px); }
    }