:root {
      --wine: #6E001B;
      --wine-dark: #3A000E;
      --mist: #F3EFEF;
      --line: #DDD3D5;
      --muted: #5E5256;
      --dim: #8C7E82;
      --pink: #E6A0B0;
      --bone: #EDE8DF;
    }

    * { box-sizing: border-box; }

    :root { --display: 'Playfair Display', 'Playfair Display Fallback', 'Didot', 'Bodoni MT', Georgia, serif; }
    h1, h2, h3 { font-variant-numeric: lining-nums; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
      background: #fff;
      color: #000;
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; }

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

    a:focus-visible { outline: 2px solid #6E001B; outline-offset: 3px; }

    .page {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 28px clamp(16px, 3vw, 40px);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .ch-s { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
    .ch-m { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
    .ch-l { clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px)); }

    .lbl { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
    .sec { font-size: 12px; font-weight: 700; letter-spacing: .14em; }

    .btn {
      display: inline-flex;
      align-items: center;
      padding: 15px 28px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px 40px;
      flex-wrap: wrap;
      margin: -28px calc(-1 * clamp(16px, 3vw, 40px)) 0;
      padding: 12px clamp(16px, 3vw, 40px);
      background: rgba(255, 255, 255, .92);
      -webkit-backdrop-filter: saturate(1.5) blur(12px);
      backdrop-filter: saturate(1.5) blur(12px);
      border-bottom: 1px solid rgba(26, 18, 20, .1);
    }

    .brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
    .brand img { display: block; height: 48px; width: auto; }

    .header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

    .site-nav {
      display: flex;
      gap: 12px 36px;
      flex-wrap: wrap;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .site-nav > a { position: relative; padding-bottom: 4px; transition: color .2s; }
    .site-nav > a::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1px;
      background: #E6A0B0;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease-out;
    }
    .site-nav > a:hover::after,
    .site-nav > a.is-active::after { transform: scaleX(1); }
    .site-nav > a.is-active { color: #6E001B; }

    .nav-extra { display: none; }

    .nav-toggle {
      display: none;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid rgba(26, 18, 20, .18);
      background: transparent;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .nav-toggle:hover { background: rgba(110, 0, 27, .06); }
    .nav-toggle:focus-visible { outline: 2px solid #6E001B; outline-offset: 3px; }
    .nav-bars { display: block; position: relative; width: 20px; height: 14px; }
    .nav-bars i {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: #1A1214;
      transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s;
    }
    .nav-bars i:nth-child(1) { top: 0; }
    .nav-bars i:nth-child(2) { top: 6px; }
    .nav-bars i:nth-child(3) { top: 12px; }
    .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    section[id] { scroll-margin-top: 96px; }

    .hero {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      padding: clamp(28px, 5vw, 64px);
      background: radial-gradient(70% 70% at 72% 48%, #5A0017 0%, #1A0008 55%, #000 100%);
      color: #fff;
    }

    .hero-watermark {
      position: absolute;
      left: -40px;
      top: 50%;
      height: 130%;
      width: auto;
      transform: translateY(-50%);
      opacity: .05;
      pointer-events: none;
    }

    .hero-left {
      position: relative;
      flex: 1 1 460px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 40px;
    }

    .hero-brand { display: flex; align-items: center; gap: 14px; }
    .hero-brand img { height: 52px; width: auto; }
    .hero-brand .divider { width: 1px; height: 40px; background: rgba(255, 255, 255, .35); display: inline-block; }
    .hero-brand .lbl { color: rgba(255, 255, 255, .85); line-height: 1.6; }

    .hero-title { margin: 0; font-weight: 400; }
    .hero-title .big {
      font-family: var(--display);
      font-size: clamp(46px, 6.8vw, 106px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.012em;
      text-transform: uppercase;
    }
    .hero-title .script {
      font-family: var(--display);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(58px, 8.6vw, 134px);
      line-height: 1.04;
      letter-spacing: -.015em;
      margin-top: 2px;
    }

    .hero-desc { max-width: 430px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .82); }

    .hero-right { position: relative; display: flex; flex-direction: column; gap: 28px; }

    .stats { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
    .stat { flex: 1 1 120px; padding: 18px 20px 0 0; }
    .stat + .stat { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .22); }
    .stat .v { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
    .stat .k { margin-top: 8px; color: rgba(255, 255, 255, .7); }

    .price-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }
    .price-chip { padding: 16px 30px 16px 22px; background: #6E001B; }
    .price-chip .v { font-size: 28px; font-weight: 700; margin-top: 2px; }

    .hero-media { position: relative; flex: 1 1 440px; max-width: 600px; min-width: 0; align-self: center; }
    .hero-shot { position: relative; aspect-ratio: 1086/1448; max-width: 100%; background: #111; overflow: hidden; }
    .hero-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

    .hs {
      position: absolute;
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 5px rgba(255, 255, 255, .28);
    }

    .hl {
      position: absolute;
      transform: translateY(-50%);
      width: 158px;
      padding: 11px 14px;
      background: #fff;
      color: #000;
    }
    .hl b { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6E001B; }
    .hl span { display: block; font-size: 13px; font-weight: 600; margin-top: 3px; line-height: 1.25; }

    .marquee {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      overflow: hidden;
      padding: 18px 28px;
      background: #6E001B;
      color: #fff;
      white-space: nowrap;
    }
    .marquee span { font-size: 15px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
    .marquee img { height: 30px; width: auto; }

    .statement { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
    .statement-visual {
      flex: 0 1 380px;
      min-width: 0;
      min-height: 460px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F3EFEF;
    }
    .statement-visual img { height: 340px; width: auto; max-width: 70%; object-fit: contain; }
    .statement-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
    .statement-head { margin: 0; font-family: var(--display); font-size: clamp(28px, 3.5vw, 50px); font-weight: 600; line-height: 1.2; letter-spacing: -.012em; }
    .statement-head .dim { color: #8C7E82; }
    .statement-script { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(44px, 5.6vw, 82px); line-height: 1.08; letter-spacing: -.012em; color: #6E001B; }

    .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
    .sec-title { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin: 0; }
    .sec-title .big { font-family: var(--display); font-size: clamp(34px, 4.8vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
    .sec-title .script { font-family: var(--display); font-style: italic; font-size: clamp(46px, 6.2vw, 90px); line-height: 1.05; color: #6E001B; font-weight: 500; text-transform: none; letter-spacing: -.012em; }

    /* Título con script más pesado para equilibrar con el sans en negrita */
    .sec-title.balanced { align-items: baseline; gap: 14px; }
    .sec-title.balanced .big { font-weight: 800; letter-spacing: -.01em; font-size: clamp(34px, 4.8vw, 68px); }
    .sec-title.balanced .script { font-size: clamp(46px, 6.2vw, 90px); }

    .esenciales { margin-top: 36px; display: flex; flex-direction: column; gap: 24px; }
    .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 16px; }
    .s2 { grid-column: span 2; }
    .r2 { grid-row: span 2; }
    .tile { padding: 22px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; }
    .tile .v34 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }

    .bento-img { position: relative; background: #111; overflow: hidden; min-height: 260px; }
    .bento-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; }
    .bento-img .card { position: absolute; left: 18px; bottom: 18px; padding: 12px 16px; background: #fff; color: #000; }
    .bento-img .card .lbl { color: #6E001B; }
    .bento-img .card .t { font-size: 15px; font-weight: 600; margin-top: 4px; }

    .watts { position: relative; }
    .watts-watermark { position: absolute; right: 18px; top: 50%; height: 150%; width: auto; transform: translateY(-50%); opacity: .08; }
    .watts .v { position: relative; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
    .watts .n { position: relative; font-size: 14px; color: #5E5256; margin-top: 8px; }
    .watts .lbl { position: relative; color: #6E001B; }

    .tile .t22 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
    .tile .n13 { font-size: 13px; color: #5E5256; margin-top: 6px; }
    .swatch-dots span { width: 28px; height: 28px; border-radius: 50%; display: inline-block; }

    .anatomia {
      position: relative;
      overflow: hidden;
      margin-top: 36px;
      background: radial-gradient(60% 70% at 30% 50%, #3A000E 0%, #0A0004 60%, #000 100%);
      color: #fff;
      padding: clamp(24px, 4vw, 56px);
      display: flex;
      flex-direction: column;
      gap: 36px;
    }
    .anatomia-watermark { position: absolute; right: -30px; bottom: -60px; height: 90%; width: auto; opacity: .05; pointer-events: none; }
    .anatomia .sec { color: #E6A0B0; }
    .anatomia .script { color: #E6A0B0; }
    .anatomia-grid { position: relative; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
    .anatomia-media { flex: 1 1 380px; max-width: 520px; min-width: 0; }
    .anatomia-shot { position: relative; aspect-ratio: 1086/1448; max-width: 100%; background: #111; overflow: hidden; }
    .anatomia-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

    .mk {
      position: absolute;
      width: 30px;
      height: 30px;
      margin: -15px 0 0 -15px;
      border-radius: 50%;
      background: #fff;
      color: #000;
      font-size: 13px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 5px rgba(255, 255, 255, .25);
    }

    .anatomia-list { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }
    .anatomy-row { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
    .anatomy-row:last-child { border-bottom: 0; }
    .anatomy-row .n { font-size: 13px; font-weight: 800; color: #E6A0B0; width: 22px; flex: 0 0 22px; }
    .anatomy-row .t { font-size: 18px; font-weight: 700; }
    .anatomy-row .d { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); margin-top: 4px; }


    /* ===== Anatomía interactiva (estilo HUD) ===== */
    .anatomia-stage { position: relative; }
    .pin {
      position: absolute;
      width: 30px; height: 30px;
      margin: -15px 0 0 -15px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #fff;
      color: #000;
      font: 800 13px 'Montserrat', system-ui, sans-serif;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
      transition: background .2s, box-shadow .2s;
      z-index: 4;
    }
    .pin::before {
      content: ""; position: absolute; inset: -5px; border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .7);
      animation: pinPulse 2.4s ease-out infinite;
      pointer-events: none;
    }
    .pin::after {
      content: ""; position: absolute; inset: -11px; border-radius: 50%;
      border: 1.5px dashed #fff;
      opacity: 0; transform: scale(.6);
      transition: opacity .25s, transform .25s;
      pointer-events: none;
    }
    .pin:focus-visible { outline: 2px solid #E6A0B0; outline-offset: 8px; }
    .pin[aria-expanded="true"] { background: #E6A0B0; box-shadow: 0 0 0 4px rgba(230, 160, 176, .35), 0 0 18px rgba(230, 160, 176, .7); }
    .pin[aria-expanded="true"]::before { animation: none; opacity: 0; }
    .pin[aria-expanded="true"]::after { opacity: 1; transform: scale(1); animation: pinSpin 6s linear infinite; }
    @keyframes pinPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
    @keyframes pinSpin { to { transform: rotate(360deg); } }

    .leader { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; overflow: visible; }
    .leader .ln, .leader .lns { fill: none; stroke-linejoin: round; stroke-linecap: square; }
    .leader .lns { stroke: rgba(0, 0, 0, .55); stroke-width: 4; }
    .leader .ln { stroke: #fff; stroke-width: 1.6; }
    .leader .ar { fill: #fff; stroke: rgba(0, 0, 0, .55); stroke-width: 1; }
    .leader .nd { fill: #E6A0B0; stroke: #fff; stroke-width: 1.5; }
    .leader .ln, .leader .lns, .leader .ar, .leader .nd { opacity: 0; }
    .leader.is-open .ln, .leader.is-open .lns { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hudDraw .34s cubic-bezier(.4, 0, .2, 1) .05s forwards; }
    .leader.is-open .ar { opacity: 1; animation: hudPop .2s ease-out both; }
    .leader.is-open .nd { opacity: 1; animation: hudPop .2s ease-out .36s both; }
    @keyframes hudDraw { to { stroke-dashoffset: 0; } }
    @keyframes hudPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
    .leader .ar, .leader .nd { transform-box: fill-box; transform-origin: center; }

    .pin-card {
      position: absolute; z-index: 5;
      width: min(270px, 62%);
      padding: 14px 16px 16px;
      background: rgba(14, 0, 6, .88);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      border: 1px solid rgba(230, 160, 176, .5);
      color: #fff;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .15s, visibility 0s .15s;
    }
    .pin-card.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: none; animation: hudRender .42s cubic-bezier(.2, .8, .2, 1) .34s both; }
    @keyframes hudRender { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
    .pin-card::before, .pin-card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid #fff; pointer-events: none; }
    .pin-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
    .pin-card::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
    .pin-card .pc-scan {
      position: absolute; left: 0; right: 0; top: 0; height: 2px;
      background: linear-gradient(90deg, transparent, #E6A0B0, transparent);
      box-shadow: 0 0 10px #E6A0B0; opacity: 0; pointer-events: none;
    }
    .pin-card.is-open .pc-scan { animation: hudScan .5s ease-out .34s both; }
    @keyframes hudScan { 0% { top: 100%; opacity: 1; } 90% { opacity: 1; } 100% { top: 0; opacity: 0; } }
    .pin-card .pc-head { display: flex; align-items: center; gap: 10px; }
    .pin-card .pc-n { font-size: 12px; font-weight: 800; color: #E6A0B0; letter-spacing: .1em; }
    .pin-card .pc-bar { flex: 1; height: 1px; background: rgba(255, 255, 255, .35); transform-origin: left; }
    .pin-card.is-open .pc-bar { animation: hudBar .4s ease-out .6s both; }
    @keyframes hudBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .pin-card .pc-t, .pin-card .pc-d { opacity: 0; }
    .pin-card.is-open .pc-t { animation: hudText .3s ease-out .62s both; }
    .pin-card.is-open .pc-d { animation: hudText .3s ease-out .72s both; }
    @keyframes hudText { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    .pin-card .pc-t { font-size: 16px; font-weight: 700; margin-top: 8px; letter-spacing: -.01em; }
    .pin-card .pc-d { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); margin-top: 5px; }
    .pin-card .pc-x {
      position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
      border: 0; background: transparent; color: rgba(255, 255, 255, .7); font-size: 17px; line-height: 1; cursor: pointer;
    }
    .pin-card .pc-x:hover { color: #fff; }
    .pin-card .pc-x:focus-visible { outline: 2px solid #E6A0B0; }
    .anatomia-hint { font-size: 12px; color: rgba(255, 255, 255, .6); margin: 14px 0 0; }

    .anatomy-row { cursor: pointer; transition: opacity .2s; }
    .anatomy-row:focus-visible { outline: 2px solid #E6A0B0; outline-offset: 2px; }
    .anatomia-list.has-active .anatomy-row:not(.is-active) { opacity: .5; }
    .anatomy-row.is-active .n { color: #fff; }

    /* ===== Mazo de tarjetas (caja de regalo) ===== */
    .regalo-deckwrap { position: relative; flex: 1 1 360px; max-width: 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
    .deck { position: relative; aspect-ratio: 420 / 540; width: min(100%, max(300px, calc((100vh - 150px) * 420 / 540))); width: min(100%, max(300px, calc((100svh - 150px) * 420 / 540))); margin-inline: auto; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
    .deck:focus-visible { outline: 2px solid #E6A0B0; outline-offset: 6px; }
    /* con el reloj detenido (mouse encima, pausa, fuera de pantalla) también se congelan las animaciones CSS */
    .deck.is-paused .momento *, .deck.is-paused .momento *::after { animation-play-state: paused !important; }

    @media (prefers-reduced-motion: reduce) {
      .pin::before, .pin[aria-expanded="true"]::after { animation: none; }
      .pin-card, .pin-card * , .leader * { transition: none !important; animation-duration: .01s !important; animation-delay: 0s !important; }
    }

    .colores { margin-top: 36px; display: flex; flex-direction: column; gap: 24px; }
    .color-cards { display: flex; flex-wrap: wrap; gap: 20px; }
    .color-card { flex: 1 1 420px; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 22px; }
    .color-card .shot { aspect-ratio: 1086/820; max-width: 100%; background: #222; overflow: hidden; }
    .color-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .color-card .info { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 0 8px 8px; }
    .color-tag { display: flex; align-items: center; gap: 10px; }
    .color-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
    .color-name { font-size: 38px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
    .color-desc { font-size: 14px; line-height: 1.5; margin-top: 6px; max-width: 300px; }
    .color-buy { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
    .color-buy .v { font-size: 24px; font-weight: 700; }

    .regalo {
      position: relative;
      overflow: hidden;
      margin-top: 36px;
      background: linear-gradient(135deg, #6E001B 0%, #3A000E 60%, #000 100%);
      color: #fff;
      padding: clamp(24px, 4vw, 56px);
      display: flex;
      flex-wrap: wrap;
      gap: 48px;
      align-items: center;
    }
    .regalo-watermark { position: absolute; right: 4%; top: 50%; height: 110%; width: auto; transform: translateY(-50%); opacity: .06; pointer-events: none; }
    .regalo-media { position: relative; flex: 1 1 360px; max-width: 520px; min-width: 0; aspect-ratio: 3/4; background: #6E001B; overflow: hidden; }
    .regalo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .regalo-text { position: relative; flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
    .regalo .sec { color: #E6A0B0; }
    .regalo-title { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(44px, 5.6vw, 88px); line-height: 1.12; letter-spacing: -.012em; }
    .regalo-desc { max-width: 440px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .82); }

    .uso { margin-top: 36px; display: flex; flex-direction: column; gap: 24px; }
    .gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 16px; }
    .gal > div { position: relative; overflow: hidden; background: #F3EFEF; min-width: 0; }
    .gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .gal .g2 { grid-column: span 2; grid-row: span 2; }
    .gal .g2w { grid-column: span 2; }
    .cap { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; background: #fff; color: #000; font-size: 12px; font-weight: 600; }

    .pedidos {
      position: relative;
      margin-top: 36px;
      overflow: hidden;
      padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(120px, 16vw, 240px);
      background: linear-gradient(135deg, #6E001B 0%, #3A000E 55%, #000 100%);
      color: #fff;
    }
    .pedidos-watermark {
      position: absolute;
      left: 3%;
      bottom: -3vw;
      font-size: clamp(100px, 24vw, 340px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.045em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .07);
      white-space: nowrap;
      pointer-events: none;
    }
    .pedidos-mono { position: absolute; right: 46%; top: -10%; height: 80%; width: auto; opacity: .05; pointer-events: none; }
    .pedidos-inner { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
    .pedidos-brand { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
    .pedidos-brand .sec { color: #E6A0B0; }
    .pedidos-logo { height: 92px; width: auto; align-self: flex-start; }
    .pedidos-script { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(56px, 8vw, 116px); line-height: 1.04; letter-spacing: -.015em; margin-top: 16px; }
    .pedidos-elegancia { font-family: var(--display); font-size: clamp(42px, 6.2vw, 98px); font-weight: 800; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; margin: -4px 0 0; }
    .pedidos-card { flex: 0 1 440px; min-width: 0; background: #fff; color: #000; padding: 30px 32px 28px; display: flex; flex-direction: column; }
    .pedidos-card .head { padding-bottom: 14px; border-bottom: 1px solid #DDD3D5; }
    .pedidos-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid #DDD3D5; }
    .pedidos-row:last-of-type { border-bottom: 0; }
    .pedidos-row .k { color: #5E5256; }
    .pedidos-row .v { font-size: 20px; font-weight: 600; }
    .pedidos-note { font-size: 14px; line-height: 1.6; color: #4A3B40; margin: 16px 0 0; }

    /* ---------- texto introductorio ---------- */
    .lead { max-width: 780px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: #4A3B40; margin: 0; }
    .lead strong { color: #000; font-weight: 700; }
    .lead-right { max-width: 460px; }
    /* el hero es oscuro: los párrafos llevan texto claro (antes heredaban el gris oscuro de las secciones blancas) */
    .hero .lead { color: rgba(255, 255, 255, .88); }
    .hero .lead strong { color: #fff; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    /* ---------- ficha técnica ---------- */
    .specs-wrap { background: #fff; border: 1px solid #E7E0E1; padding: clamp(20px, 3vw, 34px); }
    .specs-title { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #6E001B; }
    .specs { width: 100%; border-collapse: collapse; text-align: left; }
    .specs th, .specs td { padding: 12px 0; border-bottom: 1px solid #EFE9EA; vertical-align: top; }
    .specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
    .specs th { width: 38%; padding-right: 20px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6E5259; }
    .specs td { font-size: 15px; line-height: 1.5; color: #1A1214; }

    /* ---------- preguntas frecuentes ---------- */
    .faq { margin-top: 36px; display: flex; flex-direction: column; gap: 24px; }
    .faq-intro { max-width: 520px; font-size: 15px; line-height: 1.6; color: #5E5256; margin: 0; }
    .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .faq-item { background: #fff; border: 1px solid #E7E0E1; }
    .faq-item[open] { border-color: #D9C9CD; }
    .faq-item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; position: relative; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::marker { content: ''; }
    .faq-item summary::after {
      content: '+';
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 22px;
      font-weight: 300;
      line-height: 1;
      color: #6E001B;
      transition: transform .25s ease, opacity .25s ease;
    }
    .faq-item[open] summary::after { content: '\2013'; }
    .faq-item summary h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #14100F; }
    .faq-item summary:focus-visible { outline: 2px solid #6E001B; outline-offset: -2px; }
    .faq-item > p { margin: 0; padding: 0 22px 20px; font-size: 14.5px; line-height: 1.7; color: #4A3B40; }
    .faq-item > p strong { color: #000; font-weight: 700; }
    .faq-item > p a { color: #6E001B; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }



    /* ===== Escena: foto en el teléfono -> batería baja -> la foto se vuelve Power Bank -> formas de cargar ===== */
    .momento { position: absolute; left: 0; top: 0; width: 420px; height: 540px; transform: scale(var(--ms, 1)); transform-origin: 0 0; transition: opacity .15s; }
    .mo-rig { position: absolute; inset: 0; perspective: 950px; perspective-origin: 50% 50%; }

    /* Power Bank como pieza con grosor (cara, trasera y bordes) para poder girarlo y pegarlo por detrás del teléfono */
    .mo-pb { position: absolute; left: 135px; top: 198px; z-index: 1; width: 150px; height: 104px; transform-origin: 50% 50%; transform-style: preserve-3d; }
    .mo-pb > * { opacity: var(--bo, 0); }
    .mo-pb-face { position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(145deg, #F6F1E7 0%, #D8D0C0 100%); box-shadow: 0 18px 34px rgba(0, 0, 0, .5), inset 0 -6px 12px rgba(0, 0, 0, .08); transform: translateZ(12px); backface-visibility: hidden; }
    .mo-pb-back { position: absolute; inset: 0; border-radius: 28px; background: #CBC3B1; transform: translateZ(-12px) rotateY(180deg); backface-visibility: hidden; }
    .mo-pb-er, .mo-pb-el { position: absolute; top: 28px; bottom: 28px; width: 24px; background: linear-gradient(90deg, #BDB5A3, #EAE3D3 50%, #C6BEAC); }
    .mo-pb-er { right: 0; transform-origin: 100% 50%; transform: translateZ(12px) rotateY(-90deg); }
    .mo-pb-el { left: 0; transform-origin: 0 50%; transform: translateZ(12px) rotateY(90deg); }
    /* destello dorado cuando el imán "pega" */
    .mo-pb-er::after, .mo-pb-el::after, .mo-edge::after { content: ""; position: absolute; inset: 0; background: #F2C85B; opacity: var(--fl, 0); }
    /* ranuras de los cables y puerto USB-C (se ven según la forma de conectar) */
    .mo-slot, .mo-port { position: absolute; background: #2B2A2E; opacity: 0; transition: opacity .3s; }
    .mo-slot { top: 30px; width: 6px; height: 18px; }
    .mo-slot-l { left: -1px; border-radius: 0 4px 4px 0; }
    .mo-slot-r { right: -1px; border-radius: 4px 0 0 4px; }
    .mo-port { left: 35px; bottom: -1px; width: 24px; height: 6px; border-radius: 4px 4px 0 0; }
    .momento[data-slots~="l"] .mo-slot-l, .momento[data-slots~="r"] .mo-slot-r, .momento[data-slots~="p"] .mo-port { opacity: 1; }
    .mo-lens { position: absolute; right: 12px; top: 12px; width: 80px; height: 80px; border-radius: 50%; background: #ECE6D9; box-shadow: inset 0 0 0 3px #CFC6B3; display: flex; align-items: center; justify-content: center; }
    .mo-lens::before { content: ""; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3a40, #08080a 70%); box-shadow: 0 0 0 0 rgba(242, 200, 91, 0); transition: box-shadow .4s; }
    .momento[data-mode="mag"][data-state="charging"] .mo-lens::before, .momento[data-mode="mag"][data-state="full"] .mo-lens::before { box-shadow: 0 0 22px 4px rgba(242, 200, 91, .75); }
    .momento[data-mode="mag"][data-state="charging"] .mo-lens::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #F2C85B; animation: moWave 1.1s ease-out infinite; }
    @keyframes moWave { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
    .mo-led { position: absolute; left: 14px; top: 14px; width: 18px; height: 7px; border-radius: 4px; background: #B9B1A0; transition: background .3s, box-shadow .3s; }
    .momento[data-state="charging"] .mo-led, .momento[data-state="full"] .mo-led { background: #7FE3D6; box-shadow: 0 0 8px #7FE3D6; }
    .mo-msp { position: absolute; left: 16px; bottom: 12px; height: 38px; width: auto; opacity: .55; }

    /* cables */
    .mo-cable { position: absolute; inset: 0; width: 420px; height: 540px; z-index: 2; overflow: visible; pointer-events: none; }
    .cb-out { stroke: rgba(15, 4, 8, .55); stroke-width: 8; stroke-linecap: round; fill: none; opacity: 0; }
    .cb { stroke: var(--cab); stroke-width: 5.2; stroke-linecap: round; fill: none; opacity: 0; }
    .cb-fx { stroke: #F2C85B; stroke-width: 2.2; stroke-linecap: round; fill: none; stroke-dasharray: 5 15; opacity: 0; filter: drop-shadow(0 0 3px rgba(242, 200, 91, .9)); }
    .cb-collar { fill: var(--cab); stroke: rgba(15, 4, 8, .45); stroke-width: .8; }
    .plug { opacity: 0; }
    .plug[data-k="usbc"] .p-lt, .plug[data-k="lt"] .p-usbc { display: none; }
    .mo-click { position: absolute; left: 0; top: 0; z-index: 4; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #F2C85B; opacity: 0; pointer-events: none; }

    /* rótulo de la forma de conectar */
    .mo-label { position: absolute; left: 0; right: 0; top: 486px; z-index: 6; text-align: center; opacity: 0; pointer-events: none; }
    .mo-label b { display: block; font-size: 15px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
    .mo-label span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .78); }

    /* la foto que sale del teléfono y viaja hasta convertirse en el Power Bank (la mueve el JS cuadro a cuadro) */
    .mo-fly { position: absolute; left: 0; top: 0; z-index: 5; width: 238px; height: 428px; overflow: hidden; box-sizing: border-box; background: #000; border: 0 solid #fff; opacity: 0; pointer-events: none; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); }
    .mo-fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; -webkit-user-drag: none; }
    .mo-fly img.on { opacity: 1; }

    /* teléfono con grosor: cara frontal, bordes laterales y tapa trasera (iPhone = isla dinámica, Android = cámara puntual) */
    .mo-phone { position: absolute; left: 135px; top: 119px; z-index: 3; width: 150px; height: 262px; transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform; --pr: 30px; --frame: #1b1b1f; }
    .mo-phone[data-k="iphone"] { --pr: 34px; --frame: #4a4a51; }
    .mo-phone[data-lvl="low"] { --lv: #FF4D5E; }
    .mo-phone[data-lvl="mid"] { --lv: #FFB347; }
    .mo-phone[data-lvl="hi"] { --lv: #F2C85B; }
    .mo-phone.second { display: none; }
    .mo-phone.second .mo-screen, .mo-phone.second .mo-alert, .mo-phone.second .mo-lowbat { display: none; }
    .mo-front {
      position: absolute; inset: 0; padding: 12px 12px 14px;
      border-radius: var(--pr); border: 5px solid var(--frame);
      background: radial-gradient(120% 70% at 50% 0%, #2a2230 0%, #0b0b0e 70%);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      color: #fff; backface-visibility: hidden;
    }
    .momento[data-mode="mag"][data-state="charging"] .mo-phone:not(.second) .mo-front, .momento[data-mode="mag"][data-state="full"] .mo-phone:not(.second) .mo-front {
      box-shadow: 0 0 0 1px rgba(242, 200, 91, .55), 0 0 42px rgba(242, 200, 91, .42), 0 20px 40px rgba(0, 0, 0, .5);
    }
    .mo-edge { position: absolute; top: 36px; bottom: 36px; width: 20px; background: linear-gradient(90deg, #17171b, #55555d 40%, #2a2a30 60%, #0e0e11); }
    .mo-phone[data-k="iphone"] .mo-edge { background: linear-gradient(90deg, #3a3a41, #b4b4bd 40%, #7a7a83 60%, #34343a); }
    .mo-edge-r::before { content: ""; position: absolute; left: 4px; right: 4px; top: 38%; height: 16%; border-radius: 2px; background: rgba(255,255,255,.22); }
    .mo-front::before { content: ""; position: absolute; inset: 0; z-index: 7; border-radius: calc(var(--pr) - 5px); pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 28%, transparent 42%); }
    .mo-edge-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
    .mo-edge-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
    .mo-back { position: absolute; inset: 0; border-radius: var(--pr); border: 5px solid var(--frame); background: linear-gradient(160deg, #26262c, #131316); transform: translateZ(-20px) rotateY(180deg); backface-visibility: hidden; }
    .mo-notch { position: absolute; top: 7px; left: 50%; z-index: 5; background: #000; pointer-events: none; }
    .mo-phone[data-k="android"] .mo-notch { width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px #111, 0 0 0 2.5px rgba(255, 255, 255, .07); }
    .mo-phone[data-k="iphone"] .mo-notch { width: 44px; height: 13px; margin-left: -22px; top: 8px; border-radius: 8px; }
    .mo-status { position: relative; z-index: 4; align-self: stretch; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; padding: 0 4px; }
    .mo-sr { display: flex; align-items: center; gap: 4px; }
    .mo-bolt { display: none; width: 7px; height: 11px; background: #F2C85B; clip-path: polygon(60% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 56% 38%); }
    .momento[data-state="charging"] .mo-bolt, .momento[data-state="full"] .mo-bolt { display: block; }
    .mo-bat { position: relative; width: 22px; height: 11px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 3.5px; }
    .mo-bat::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; background: rgba(255, 255, 255, .7); border-radius: 0 1px 1px 0; }
    .mo-bat i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 3%; max-width: calc(100% - 2px); border-radius: 1.5px; background: var(--lv, #FF4D5E); transition: background .3s; }
    .mo-alert {
      position: relative; z-index: 4; align-self: stretch; display: flex; gap: 8px; align-items: center;
      padding: 7px 8px; border-radius: 12px; background: rgba(24, 20, 28, .88);
      transform: translateY(-140%); opacity: 0;
      transition: transform .55s cubic-bezier(.2, .9, .2, 1), opacity .3s;
    }
    .mo-ico { flex: 0 0 22px; height: 22px; border-radius: 6px; background: #E6A0B0; position: relative; }
    .mo-ico::before { content: ""; position: absolute; left: 5px; right: 5px; top: 7px; bottom: 5px; border: 1.5px solid #3A000E; border-radius: 2px; }
    .mo-ico::after { content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 1.5px; background: #3A000E; }
    .mo-alert b { display: block; font-size: 11px; font-weight: 700; line-height: 1.15; }
    .mo-alert small { display: block; font-size: 9.5px; color: rgba(255, 255, 255, .7); margin-top: 1px; }
    .mo-alert.show { transform: none; opacity: 1; }
    /* aviso de batería baja, debajo del mensaje */
    .mo-lowbat {
      position: absolute; left: 12px; right: 12px; top: 84px; z-index: 4;
      display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 12px;
      background: rgba(58, 8, 16, .94); box-shadow: 0 0 0 1px rgba(255, 77, 94, .55);
      transform: translateY(-30%) scale(.94); opacity: 0;
      transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .25s;
    }
    .mo-lowbat.show { transform: none; opacity: 1; }
    .mo-lowbat i { flex: 0 0 22px; height: 22px; border-radius: 6px; background: #FF4D5E; position: relative; }
    .mo-lowbat i::before { content: ""; position: absolute; left: 4px; top: 7px; width: 12px; height: 7px; border: 1.5px solid #3A000E; border-radius: 2px; }
    .mo-lowbat i::after { content: ""; position: absolute; left: 6px; top: 9px; width: 2.5px; height: 3px; background: #3A000E; }
    .mo-lowbat b { display: block; font-size: 11px; font-weight: 700; line-height: 1.15; color: #FFB3BB; }
    .mo-lowbat small { display: block; font-size: 9.5px; color: rgba(255, 255, 255, .7); margin-top: 1px; }
    /* la foto vive en la pantalla del teléfono; el JS la saca de ahí como "flyer" */
    .mo-screen { position: absolute; inset: 0; z-index: 1; border-radius: calc(var(--pr) - 5px); overflow: hidden; background: #000; opacity: 0; pointer-events: none; }
    .mo-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
    .mo-screen img.on { opacity: 1; }
    .mo-screen::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent); }
    .mo-ring { position: relative; width: 98px; height: 98px; margin-top: 6px; }
    .mo-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
    .mo-ring circle { fill: none; stroke-width: 7; }
    .mo-ring .trk { stroke: rgba(255, 255, 255, .13); }
    .mo-ring .prg { stroke: var(--lv, #FF4D5E); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 97; transition: stroke .3s; filter: drop-shadow(0 0 4px var(--lv, #FF4D5E)); }
    .mo-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
    .mo-cap { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .8); min-height: 14px; }
    .momento[data-state="low"] .mo-ring, .momento[data-state="idle"] .mo-ring { animation: moShake 1.1s ease-in-out infinite; }
    .momento[data-state="low"] .mo-pct { color: #FF8C97; }
    @keyframes moShake { 0%, 86%, 100% { transform: none; } 90% { transform: translateX(-2px); } 94% { transform: translateX(2px); } 98% { transform: translateX(-1px); } }

    /* frase: se escribe palabra por palabra y luego pasa el destello de foil */
    /* cada palabra lleva "aire" vertical y lateral para que ni el degradado dorado ni la animación recorten astas, colas o la cursiva */
    .regalo-title .w { display: inline-block; padding: .16em .12em .24em; margin: -.16em -.12em -.24em; }
    .regalo-title.is-armed .w { opacity: 0; transform: translateY(.45em); }
    .regalo-title.is-written .w { animation: moRise .85s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .15s) both; }
    @keyframes moRise { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
      .regalo-title.is-foil .w {
        background-image: linear-gradient(100deg, #C99A32 0%, #EBC76B 22%, #C99A32 33%, #FFF3C2 50%, #C99A32 67%, #EBC76B 78%, #C99A32 100%);
        background-size: 300% 100%; background-position: 0% 0;
        -webkit-background-clip: text; background-clip: text;
        color: transparent; -webkit-text-fill-color: transparent;
        animation: moFoil 1.5s ease-in-out calc(var(--i) * .14s) both;
      }
    }
    @keyframes moFoil { from { background-position: 100% 0; } to { background-position: 0% 0; } }

    @media (prefers-reduced-motion: reduce) {
      .mo-alert { transition: none; }
      .mo-ring, .mo-lens::after, .mo-click { animation: none !important; }
      .regalo-title .w { animation: none !important; transform: none !important; }
      .site-nav, .site-nav > a, .nav-extra, .nav-bars i { transition: none !important; animation: none !important; }
    }

    @media (max-width: 900px) {
      .bento, .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .faq-list { grid-template-columns: minmax(0, 1fr); }

      /* barra móvil: logo · Pedir · menú */
      .site-header {
        flex-wrap: nowrap;
        gap: 12px;
        /* sin backdrop-filter: genera un containing block y rompería el panel fixed */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255, 255, 255, .97);
        padding: 10px clamp(16px, 3vw, 40px);
      }
      .brand img { height: 34px; }
      .header-cta { padding: 11px 14px; font-size: 11px; letter-spacing: .1em; }

      .nav-toggle { display: inline-flex; }

      /* el nav se vuelve un panel a pantalla completa (empieza debajo de la barra) */
      .site-nav {
        position: fixed;
        top: var(--hdr-h, 67px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        margin: 0;
        padding: 28px 24px 40px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2px;
        background: #0A0004;
        color: #fff;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .28s ease-out, transform .28s ease-out, visibility 0s .28s;
      }
      .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .28s ease-out, transform .28s ease-out;
      }
      .site-nav > a {
        font-size: clamp(26px, 7.4vw, 34px);
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: none;
        color: #fff;
        padding: 12px 0;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        opacity: 0;
        transform: translateY(14px);
      }
      .site-nav.is-open > a {
        opacity: 1;
        transform: none;
        transition: opacity .4s ease-out, transform .4s ease-out;
      }
      .site-nav.is-open > a:nth-child(1) { transition-delay: .06s; }
      .site-nav.is-open > a:nth-child(2) { transition-delay: .12s; }
      .site-nav.is-open > a:nth-child(3) { transition-delay: .18s; }
      .site-nav.is-open > a:nth-child(4) { transition-delay: .24s; }
      .site-nav.is-open > a:nth-child(5) { transition-delay: .30s; }
      .site-nav.is-open > a:nth-child(6) { transition-delay: .36s; }
      .site-nav > a::after { display: none; }
      .site-nav > a.is-active { color: #E6A0B0; }

      .nav-extra {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: 30px;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, .14);
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .4s ease-out .34s, transform .4s ease-out .34s;
      }
      .site-nav.is-open .nav-extra { opacity: 1; transform: none; }

      .nav-contact { display: flex; flex-direction: column; gap: 8px; }
      .nav-contact a { color: #E6A0B0; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
      .nav-contact span { color: rgba(255, 255, 255, .55); font-size: 12px; letter-spacing: .06em; }
    }

    @media (max-width: 560px) {
      .bento, .gal { grid-template-columns: minmax(0, 1fr); }
      .s2 { grid-column: auto; }
      .s2.r2 { grid-row: auto; }
      .gal .g2, .gal .g2w { grid-column: auto; grid-row: auto; }
      .hl { width: 128px; padding: 8px 10px; }
      .site-nav { gap: 10px 18px; }
      .specs th { width: auto; padding-right: 14px; font-size: 10px; }
      .specs td { font-size: 14px; }
      .faq-item summary { padding: 16px 46px 16px 18px; }
      .faq-item > p { padding: 0 18px 18px; }
    }


/* ---------- enlaces a páginas de contenido ---------- */
.linkcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.linkcard {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid #E7E0E1; padding: 24px;
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.linkcard:hover { border-color: #6E001B; transform: translateY(-2px); }
.linkcard .lbl { color: #6E001B; }
.linkcard .t { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.linkcard .d { font-size: 14px; color: #5E5256; line-height: 1.55; }


/* ===== Footer ===== */
.site-footer { position: relative; overflow: hidden; margin-top: 4px; color: #fff; background: linear-gradient(150deg, #5a0016 0%, #1a0007 48%, #000 100%); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #F2C85B, rgba(242, 200, 91, 0) 70%); }
.sf-mark { position: absolute; right: clamp(-40px, -2vw, -10px); bottom: -20%; height: 130%; width: auto; opacity: .06; pointer-events: none; }
.sf-main { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: clamp(28px, 4vw, 64px); padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px) clamp(28px, 3.5vw, 44px); }
.sf-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sf-logo { height: clamp(52px, 5vw, 72px); width: auto; max-width: 100%; }
.sf-tag { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; font-weight: 600; }
.sf-tag em { font-style: italic; font-weight: 500; color: #F2C85B; }
.sf-note { margin: 0; max-width: 340px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.sf-col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; min-width: 0; }
.sf-h { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #F2C85B; }
.sf-col a:not(.btn) { font-size: 15px; color: rgba(255, 255, 255, .86); text-decoration: none; transition: color .2s, transform .2s; }
.sf-col a:not(.btn):hover { color: #fff; transform: translateX(3px); }
.sf-col a:focus-visible { outline-color: #F2C85B; }
.sf-ship { font-size: 14px; color: rgba(255, 255, 255, .62); line-height: 1.5; }
.sf-cta { margin-top: 8px; background: #fff; color: #000; }
.sf-bar { position: relative; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px clamp(24px, 4vw, 56px) 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
@media (max-width: 980px) {
  .sf-main { grid-template-columns: 1fr 1fr; }
  .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sf-main { grid-template-columns: 1fr; gap: 28px; }
  .sf-bar { flex-direction: column; gap: 6px; }
}