@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: darken;
    }
    .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: 100vh; }
    .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: 44px; height: 44px;
      background: var(--red);
      border-radius: 50%;
      margin-top: 32px;
      border: none;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      color: transparent;
      font-family: var(--mono);
      font-size: 18px;
      transition: width 0.3s ease, height 0.3s ease, color 0.2s ease 0.1s;
    }
    .s-manifesto .dot-below:hover {
      width: 56px; height: 56px;
      color: #fff;
    }
    /* ══════════════════════════════════════════
       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% — freely positioned photos + text card
       ───────────────────────────────────────────────────────── */
    .s-00.s-pct {
      /* scene already position:absolute;inset:0 — children abs-positioned */
    }

    /* Photo layer: full-scene container */
    .pct-strips {
      position: absolute;
      inset: 0;
      overflow: visible;
    }
    .pct-strips img {
      position: absolute;
      height: auto;
    }

    /* S00 strips: always full height, cover crop */
    .s-00 .pct-strips img { height: 100%; top: 0; object-fit: cover; }

    /* Photo positions — tight strips */
    .s-00 img:nth-child(1) { left: 12%; width: 20%; z-index: 1; }
    .s-00 img:nth-child(2) { left: 20%; width: 20%; z-index: 2; }
    .s-00 img:nth-child(3) { left: 28%; width: 20%; z-index: 3; }

    /* Text card: freely positioned */
    .pct-card {
      position: absolute;
      left: 60.0%;
      top: 30.6%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0;
      z-index: 10;
    }
    .pct-card-inner {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .pct-brand-logo {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(14px, 1.6vw, 20px);
      color: var(--red);
      letter-spacing: 0.04em;
      opacity: 0.6;
    }
    .pct-brand-logo sup { font-size: 0.6em; font-style: normal; }
    .pct-card-inner .pct-title-row { margin-top: 0; }
    .pct-card-inner .pct-number {
      font-size: clamp(72px, 14vw, 140px);
      line-height: 0.82;
    }

    /* ─────────────────────────────────────────────────────────
       Scattered layouts (15% / 30% / 45%)
       ───────────────────────────────────────────────────────── */
    .s-scattered {
      overflow: hidden;
    }

    /* Text column — default left, top-aligned */
    .s-scattered .pct-text {
      position: relative;
      z-index: 5;
      flex: 0 0 40%;
    }

    /* 30% variant — centered card over scattered photos */
    .pct-text-card {
      position: absolute !important;
      top: 8.8%;
      left: 39.2%;
      transform: none;
      flex: none !important;
      width: clamp(220px, 32vw, 380px);
      background: transparent;
      padding: 0;
      z-index: 6;
    }
    .pct-text-card .pct-brand-logo {
      opacity: 0.5;
      font-size: clamp(12px, 1.2vw, 16px);
      margin-bottom: 8px;
    }

    /* 45% variant — bottom-left pinned */
    .pct-text-bl {
      position: absolute !important;
      bottom: clamp(40px, 6vh, 80px);
      left: clamp(24px, 4vw, 56px);
      top: auto !important;
      flex: none !important;
      padding: 0 !important;
      width: clamp(220px, 34vw, 420px);
      z-index: 5;
    }

    /* 60%/70% variant — top-left pinned */
    .pct-text-tl {
      position: absolute !important;
      top: clamp(80px, 14vh, 130px);
      left: clamp(24px, 4vw, 56px);
      flex: none !important;
      padding: 0 !important;
      width: clamp(200px, 32vw, 400px);
      z-index: 5;
    }

    /* Scattered photos container — covers the right 60% of the scene */
    /* Scattered + overlap wraps cover full scene */
    .scattered-wrap,
    .overlap-wrap {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    /* Fotos con fondo transparente — aspect ratio natural, sin object-fit */
    .scattered-wrap img,
    .overlap-wrap img {
      position: absolute;
      height: auto;
      display: block;
    }

    /* ── 15% — configurador ── */
    .s-15 .pct-text { position: absolute; left: 4.5%; top: 23.5%; flex: none; }
    .s-15 .sp-1 { left: 14.0%; top: -52.0%; width: 70.0%; transform: rotate(-19deg); z-index: 1; }
    .s-15 .sp-2 { left: 29.7%; top:  17.5%; width: 73.6%; transform: rotate(160deg); z-index: 2; }
    .s-15 .sp-3 { left: 64.5%; top:  10.7%; width: 52.5%; transform: rotate(66deg);  z-index: 3; }

    /* ── 30% — configurador ── */
    .s-30 .sp-1 { left: -18.8%; top:  -5.1%; width: 58.9%; transform: rotate(90deg);  z-index: 1; }
    .s-30 .sp-2 { left:  13.9%; top:  29.1%; width: 75.7%;                             z-index: 2; }
    .s-30 .sp-3 { left:  67.1%; top:  -9.1%; width: 56.8%; transform: rotate(-88deg); z-index: 3; }

    /* ── 45% — configurador ── */
    .s-45 .pct-text-bl { position: absolute !important; bottom: auto !important; top: 44% !important; left: 11.7% !important; z-index: 10 !important; overflow: visible !important; }
    .s-45 .sp-1 { left:  62.0%; top: -41.3%; width: 57.7%; transform: rotate(195deg); z-index: 1; }
    .s-45 .sp-2 { left:  23.5%; top:  11.8%; width: 72.0%;                             z-index: 2; }
    .s-45 .sp-3 { left: -28.0%; top: -56.9%; width: 76.0%; transform: rotate(145deg); z-index: 3; }

    /* ── 60% — configurador ── */
    .s-60 .pct-text { position: absolute; left: 4.2%; top: 20.2%; flex: none; overflow: visible !important; }
    .s-60 .pct-detail { display: none; }
    .s-60 .op-1 { left: 50.0%; top:  4.6%; width: 61.2%; transform: rotate(-11deg); z-index: 2; }
    .s-60 .op-2 { left: 20.0%; top: 28.1%; width: 68.5%; transform: rotate(1deg);   z-index: 2; }
    .s-60 .op-3 { left: 66.0%; top: 20.4%; width: 62.0%; transform: rotate(-26deg); z-index: 3; }

    /* ── 70% — pantalones completos portrait desde abajo (front-nobg) ── */
    .s-70 .op-1 {
      width: 38%;
      bottom: 0; left: 4%;
      transform: rotate(-6deg);
      transform-origin: bottom center;
      z-index: 1;
    }
    .s-70 .op-2 {
      width: 46%;
      bottom: 0; left: 24%;
      transform: rotate(1deg);
      transform-origin: bottom center;
      z-index: 2;
    }
    .s-70 .op-3 {
      width: 40%;
      bottom: 0; right: -4%;
      transform: rotate(5deg);
      transform-origin: bottom center;
      z-index: 3;
    }

    /* "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 — clonado de pag2 (EL PUNTO DE PARTIDA)
       ══════════════════════════════════════════ */
    .s-selector {
      background: var(--cream);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(70px, 8vh, 100px) clamp(24px, 4vw, 60px) clamp(60px, 6vh, 80px);
      position: relative;
    }
    .sel-header {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .s-selector .sel-title-script,
    .s-70-sel .sel-title-script {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(32px, 4.5vw, 52px);
      color: var(--red);
      text-align: center;
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin: 0;
    }
    .s-selector .sel-sub,
    .s-70-sel .sel-sub {
      font-family: var(--mono);
      font-size: clamp(13px, 1.4vw, 18px);
      font-weight: 400;
      text-align: center;
      color: var(--red);
      margin-top: 8px;
      margin-bottom: clamp(8px, 1.5vh, 16px);
      line-height: 1.5;
      letter-spacing: 0.02em;
    }
    .sel-grid {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: clamp(24px, 5vw, 80px);
      flex: 0 1 auto;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
    }
    .sel-item {
      display: flex; flex-direction: column;
      align-items: center;
      cursor: pointer;
      flex: 1;
      max-width: clamp(200px, 26vw, 300px);
      opacity: 0.42;
      transform: translateX(0) scale(1);
      transition: opacity .45s var(--ease2), transform .45s var(--ease2), flex .45s var(--ease2);
    }
    .sel-item.selected {
      opacity: 1;
      transform: translateX(0) scale(1.06);
      flex: 1.25;
      z-index: 10;
    }
    .sel-item:not(.selected) {
      transform: scale(0.92);
    }
    .sel-pant-wrap {
      position: relative;
      width: clamp(150px, 18vw, 240px);
      height: clamp(280px, 46vh, 520px);
      flex-shrink: 0;
    }
    .sel-pant-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      transition: opacity .35s ease;
    }
    .sel-dots {
      display: flex;
      gap: 7px;
      justify-content: center;
      margin-top: 10px;
    }
    .sel-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(150,18,18,.2);
      cursor: pointer;
      transition: background .2s, transform .2s;
      border: none;
      padding: 0;
      flex-shrink: 0;
    }
    .sel-dot.active {
      background: var(--red);
      transform: scale(1.2);
    }
    .sel-dot:hover { background: rgba(150,18,18,.5); }
    .sel-item-name {
      font-family: var(--mono);
      font-weight: 500;
      font-size: clamp(14px, 1.6vw, 20px);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--red);
      margin-top: 12px;
      text-align: center;
    }
    .sel-item-fabric {
      font-family: var(--mono);
      font-size: clamp(10px, 1vw, 12px);
      color: rgba(26,20,18,.55);
      margin-top: 4px;
      text-align: center;
      letter-spacing: 0.04em;
      font-style: italic;
    }
    .sel-line {
      width: clamp(40px, 6vw, 80px);
      height: 1.5px;
      background: var(--red);
      margin-top: 10px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease2);
    }
    .sel-item.selected .sel-line { transform: scaleX(1); }
    .sel-item-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
    }
    .sel-item-info {
      width: 26px; height: 26px;
      background: var(--red);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono);
      font-size: 11px; font-weight: 600;
      color: var(--cream);
      border: none;
      cursor: pointer;
      transition: all .2s;
      flex-shrink: 0;
    }
    .sel-item-info:hover { background: var(--red-dark); transform: scale(1.1); }
    .sel-item-gallery {
      width: 26px; height: 26px;
      background: transparent;
      border: 1.5px solid var(--red);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono);
      font-size: 14px; font-weight: 700;
      color: var(--red);
      cursor: pointer;
      transition: all .2s;
      flex-shrink: 0;
    }
    .sel-item-gallery:hover { background: var(--red); color: var(--cream); transform: scale(1.1); }
    .sel-continuar {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: clamp(16px, 2.5vh, 32px);
    }
    .sel-btn-continuar {
      font-family: var(--mono);
      font-size: clamp(12px, 1.1vw, 14px);
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--red);
      background: transparent;
      border: 1.5px solid var(--red);
      border-radius: 40px;
      padding: 12px 32px;
      cursor: pointer;
      transition: all .25s;
    }
    .sel-btn-continuar:hover {
      background: var(--red);
      color: var(--cream);
    }

    /* 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;
      }

      /* 0% mobile: scale down photo positions, reposition card */
      .s-00 .pct-strips img:nth-child(1) { left: -20%; width: 70%; }
      .s-00 .pct-strips img:nth-child(2) { left: -6%;  width: 60%; }
      .s-00 .pct-strips img:nth-child(3) { left:  8%;  width: 52%; }
      .pct-card {
        left: 52%;
        top: 28%;
        padding: 0;
      }
      .pct-card-inner .pct-number { font-size: clamp(56px, 14vw, 88px); }

      /* Scattered — mobile: hide scattered photos, show text normally */
      .s-scattered .pct-text {
        position: relative;
        z-index: 5;
        flex: 0 0 auto;
        padding: clamp(64px, 12vh, 88px) 20px 16px;
        width: 100%;
      }
      .pct-text-card {
        position: relative !important;
        top: auto; left: auto;
        transform: none;
        width: 100%;
        box-shadow: none;
        padding: clamp(64px, 12vh, 88px) 20px 16px;
      }
      .pct-text-bl {
        position: relative !important;
        bottom: auto; left: auto;
        width: 100%;
        padding: clamp(64px, 12vh, 88px) 20px 16px !important;
      }
      .pct-text-tl {
        position: relative !important;
        top: auto; left: auto;
        width: 100%;
        padding: clamp(64px, 12vh, 88px) 20px 16px !important;
      }
      .scattered-wrap {
        position: relative;
        width: 100%;
        height: 38vh;
        min-height: 160px;
      }
      .scattered-wrap img {
        width: 38% !important;
        height: 100% !important;
      }
      .s-15 .sp-1, .s-30 .sp-1, .s-45 .sp-1 {
        left: 2% !important; right: auto !important; top: 0 !important; bottom: 0 !important;
        transform: rotate(-2deg) !important;
      }
      .s-15 .sp-2, .s-30 .sp-2, .s-45 .sp-2 {
        left: 31% !important; right: auto !important; top: 0 !important; bottom: 0 !important;
        transform: rotate(3deg) !important;
      }
      .s-15 .sp-3, .s-30 .sp-3, .s-45 .sp-3 {
        right: 2% !important; left: auto !important; top: 0 !important; bottom: 0 !important;
        transform: rotate(-1deg) !important;
      }

      /* Overlap — mobile: strip to 3-panel row */
      .overlap-wrap {
        position: relative;
        width: 100%;
        height: 46vh;
        min-height: 200px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
      }
      .overlap-wrap img {
        position: relative !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        transform: none !important;
        top: auto !important; bottom: auto !important;
        left: auto !important; right: auto !important;
      }
    }

    /* ══════════════════════════════════════════
       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); }
      .s-selector .sel-sub, .s-70-sel .sel-sub, .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-item { min-height: 56px; }
      .sel-item-info { width: 28px; height: 28px; font-size: 12px; }
      .sel-pant-wrap { width: clamp(110px, 28vw, 200px); height: clamp(180px, 38vh, 360px); }

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

/* ═══════════════════════════════════════════════════════════ */
/* MOBILE — MAY 2026: Photo scenes + checkout fixes            */
/* ═══════════════════════════════════════════════════════════ */

/* ── Manifesto scene: hero title on mobile ── */
@media (max-width: 768px) {
  .s-manifesto h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
    padding: 0 clamp(16px, 5vw, 24px) !important;
    line-height: 1.2 !important;
  }
  .s-manifesto .dot-below {
    margin-top: 24px;
  }
}

/* ── PCT scenes: text padding and number size on mobile ── */
@media (max-width: 768px) {
  /* Reduce the huge top padding that pushes content down */
  .s-pct .pct-text {
    padding-top: clamp(56px, 10vh, 76px) !important;
  }
  /* pct-number already handled by existing rule — ensure it is readable */
  .s-pct .pct-tagline {
    margin-top: 10px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
  }
  .s-pct .pct-label {
    margin-top: 12px !important;
  }
  .s-pct .pct-sub {
    margin-top: 6px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
  }
  /* 0% scene: card should not go too far right on narrow screens */
  .pct-card {
    left: auto !important;
    right: clamp(8px, 3vw, 16px) !important;
    top: 28% !important;
    max-width: 46% !important;
  }
  .pct-card-inner .pct-number {
    font-size: clamp(48px, 12vw, 80px) !important;
  }
  .pct-card-inner .pct-title {
    font-size: clamp(11px, 3vw, 15px) !important;
  }
}

/* ── Checkout scene: scrollable ── */
@media (max-width: 768px) {
  .s-checkout-unified {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .checkout-unified-left {
    overflow-y: visible !important;
    justify-content: flex-start !important;
  }
  /* Right panel: tighter on mobile — show composition but not huge */
  .checkout-unified-right {
    height: 220px !important;
  }
  /* Prevent caja+key from overflowing its column */
  .caja-key-wrap {
    width: clamp(180px, 52vw, 260px) !important;
  }
}

/* ── Checkout button: compact on mobile ── */
@media (max-width: 640px) {
  .checkout-total {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .checkout-total-text {
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }
  .s-checkout-unified .checkout-btn {
    padding: 9px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    border-radius: 2px !important;
  }
  /* Section title in form: tighter on small screens */
  .s-checkout-unified .checkout-section-title {
    font-size: clamp(13px, 3.5vw, 17px) !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }
  /* Form inputs: font-size 16px prevents iOS zoom */
  .s-checkout-unified .checkout-field input {
    font-size: 16px !important;
    padding: 10px 0 !important;
  }
  /* Checkout content: tighter padding on small phones */
  .checkout-unified-content {
    padding: 72px 16px 24px !important;
    gap: 12px !important;
  }
  /* h2 inside checkout */
  .checkout-unified-left h2 {
    font-size: clamp(20px, 6vw, 32px) !important;
  }
  .checkout-unified-sub {
    font-size: clamp(10px, 2.8vw, 13px) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE PHOTO CONFIGURATOR  (max-width: 640px)
   Mismo sistema que desktop: left / top / width / transform por foto.
   El porcentaje de left/top es relativo a la escena (100vw × 100dvh).
   Valores negativos = la foto sale por ese borde (efecto "asomando").
   DESKTOP: NO tocar — está en el bloque :root {} de arriba.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 0%: tres tiras de tejido en tercios iguales ── */
  .s-00 .pct-strips {
    position: absolute !important;
    inset: 0 !important;
  }
  .s-00 .pct-strips img {
    position: absolute !important;
    height: 100% !important;
    top: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .s-00 .pct-strips img:nth-child(1) { left:  4.5% !important; width: 10.2% !important; z-index: 1 !important; }
  .s-00 .pct-strips img:nth-child(2) { left: 15.6% !important; width:  9.7% !important; z-index: 2 !important; }
  .s-00 .pct-strips img:nth-child(3) { left: 26.2% !important; width:  7.8% !important; z-index: 3 !important; }

  /* ── Sin clip en móvil: fotos salen de los márgenes ── */
  .scene { overflow: visible !important; }

  /* ── Contenedor de fotos: full scene, sin clip ── */
  .scattered-wrap,
  .overlap-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    z-index: 2 !important;
    pointer-events: none !important;
    overflow: visible !important;
  }

  /* ── Imágenes: base absoluta ── */
  .scattered-wrap img,
  .overlap-wrap img {
    position: absolute !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    object-fit: unset !important;
  }

  /* ── Reset fila-de-3 del bloque 768px anterior ── */
  .s-15 .sp-1, .s-15 .sp-2, .s-15 .sp-3,
  .s-30 .sp-1, .s-30 .sp-2, .s-30 .sp-3,
  .s-45 .sp-1, .s-45 .sp-2, .s-45 .sp-3 {
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
  }

  /* ── Texto siempre encima ── */
  .s-scattered .pct-text,
  .s-scattered .pct-text-card,
  .s-scattered .pct-text-bl,
  .s-scattered .pct-text-tl,
  .s-60 .pct-text-tl { position: relative !important; z-index: 10 !important; }

  /* ═══════════════════════════════════
     Composiciones móvil — todas visibles
     Valores: left/top = % del viewport
     width = % del ancho del viewport
     ═══════════════════════════════════ */

  /* 15% */
  .s-15 .sp-1 { left:  39.2% !important; top:  57.1% !important; width: 101.9% !important; transform: rotate(111deg) !important; z-index: 1 !important; }
  .s-15 .sp-2 { left:  49.5% !important; top:  -6.5% !important; width:  85.1% !important; transform: rotate(67deg)  !important; z-index: 2 !important; }
  .s-15 .sp-3 { left:  48.3% !important; top:  32.3% !important; width:  82.9% !important; transform: rotate(79deg)  !important; z-index: 3 !important; }

  /* 30% */
  .s-30 .sp-1 { left:  53.1% !important; top:  13.5% !important; width: 82.4% !important; transform: rotate(267deg)  !important; z-index: 1 !important; }
  .s-30 .sp-2 { left:  56.2% !important; top:  54.0% !important; width: 78.6% !important; transform: rotate(-84deg)  !important; z-index: 2 !important; }
  .s-30 .sp-3 { left: -36.5% !important; top:  42.9% !important; width: 89.6% !important; transform: rotate(94deg)   !important; z-index: 3 !important; }

  /* 45% */
  .s-45 .sp-1 { left:  24.8% !important; top:  -9.1% !important; width: 72.4% !important; transform: rotate(180deg)  !important; z-index: 1 !important; }
  .s-45 .sp-2 { left: -19.2% !important; top:  17.8% !important; width: 78.4% !important; transform: rotate(88deg)   !important; z-index: 2 !important; }
  .s-45 .sp-3 { left:  38.3% !important; top:  15.7% !important; width: 94.8% !important; transform: rotate(-86deg)  !important; z-index: 3 !important; }

  /* 60% */
  .s-60 .op-1 { left:  56.9% !important; top: 52.0% !important; bottom: auto !important; width: 75.5% !important; transform: rotate(-47deg)  !important; z-index: 2 !important; }
  .s-60 .op-2 { left:  -8.1% !important; top: 65.5% !important; bottom: auto !important; width: 74.9% !important; transform: rotate(-1deg)   !important; z-index: 2 !important; }
  .s-60 .op-3 { left:  30.6% !important; top: 62.8% !important; bottom: auto !important; width: 93.4% !important; transform: rotate(-2deg)   !important; z-index: 3 !important; }
}

/* ══════════════════════════════════════════════════════════════
   SELECTOR CAROUSEL — mobile (max-width: 640px)
   Muestra solo el ítem .selected. Flechas prev/next lo cambian.
   Efecto colgador: entra con swing cada vez que aparece.
   ══════════════════════════════════════════════════════════════ */
@keyframes selSwingIn {
  0%   { transform: rotate(-8deg) translateY(-10px); opacity: 0; }
  55%  { transform: rotate(2.5deg) translateY(3px);  opacity: 1; }
  75%  { transform: rotate(-1deg)  translateY(0);    opacity: 1; }
  100% { transform: rotate(0)      translateY(0);    opacity: 1; }
}

@media (max-width: 768px) {
  /* ── Escena: columna, sin scroll, hueco abajo para flechas ── */
  .s-70-sel.scene {
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: clamp(44px, 6vh, 56px) 0 80px !important;
  }

  /* Wrapper: ocupa toda la altura restante */
  .s70-selector-wrap {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Título y subtítulo: mínimo espacio */
  .s-70-sel .sel-header { flex-shrink: 0 !important; margin-bottom: 0 !important; }
  .s-70-sel .sel-title-script { font-size: clamp(17px, 4.5vw, 22px) !important; line-height: 1.1 !important; }
  .s-70-sel .sel-sub {
    flex-shrink: 0 !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
    margin-bottom: 4px !important;
  }

  /* Grid: crece para llenar el espacio restante */
  .s-70-sel .sel-grid {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Ocultar ítems no seleccionados */
  .s-70-sel .sel-item { display: none !important; }

  /* Ítem seleccionado: ocupa todo el grid, relativo para botones absolutos */
  .s-70-sel .sel-item.selected {
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: none !important;
    animation: selSwingIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  }

  /* Foto: flex:1 para ocupar TODO el espacio vertical disponible */
  .s-70-sel .sel-pant-wrap {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 76vw !important;
    height: 0 !important;
    margin-top: 0 !important;
  }
  .s-70-sel .sel-pant-img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Dots: justo debajo de la foto */
  .s-70-sel .sel-dots {
    flex-shrink: 0 !important;
    margin-top: 6px !important;
  }

  /* Nombre del pantalón: debajo de los dots */
  .s-70-sel .sel-item-name {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    margin-top: 4px !important;
  }

  /* ⓘ y + : flotando a izquierda y derecha de la foto */
  .s-70-sel .sel-item-actions {
    position: absolute !important;
    top: 0 !important;
    bottom: 48px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
  .s-70-sel .sel-item-actions button {
    pointer-events: all !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(242,241,237,0.88) !important;
    border: 1px solid rgba(150,18,18,0.3) !important;
    color: var(--red, #961212) !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1) !important;
  }

  /* Flechas: fijas en la parte inferior */
  .sel-carousel-nav {
    position: fixed !important;
    bottom: 28px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    margin-top: 0 !important;
  }
  .sel-carousel-arrow {
    background: rgba(242,241,237,0.92) !important;
    border: 1px solid rgba(150,18,18,0.4) !important;
    color: var(--red, #961212) !important;
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  }
  .sel-carousel-arrow:active {
    background: var(--red, #961212) !important;
    color: #f2f1ed !important;
  }
  .sel-carousel-dots {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .sel-carousel-dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: rgba(150,18,18,0.2) !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.2s !important;
  }
  .sel-carousel-dot.active {
    background: var(--red, #961212) !important;
    transform: scale(1.4) !important;
  }
}

/* ── Desktop: ocultar nav del carrusel ── */
@media (min-width: 769px) {
  .sel-carousel-nav { display: none !important; }
}