:root{
    --w:300px; --h:600px;
    --bg:#0a0a0c;
    --ink:#f4f4f5;
    --muted:#8a8e98;
    --accent:#8DBB01;
    --slide-dur:5000ms;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    background:#1b1d22;display:flex;align-items:center;justify-content:center;min-height:100vh;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:var(--ink);
  }

  .banner{
    position:relative;width:var(--w);height:var(--h);
    background:#000;overflow:hidden;border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    isolation:isolate;user-select:none;
  }

  /* PROGRESS BARS */
  .progress{
    position:absolute;left:8px;right:8px;top:8px;height:3px;z-index:12;
    display:flex;gap:4px;
  }
  .progress i{
    flex:1;height:100%;background:rgba(255,255,255,.28);overflow:hidden;border-radius:2px;
  }
  .progress i::after{
    content:"";display:block;height:100%;width:100%;background:#fff;
    transform:scaleX(0);transform-origin:left center;
  }
  .progress i.is-done::after{ transform:scaleX(1); }
  .progress i.is-current::after{ animation:fillBar var(--slide-dur) linear forwards; }
  .banner.is-paused .progress i.is-current::after{ animation-play-state:paused; }
  @keyframes fillBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  /* HEADER */
  .head{
    position:absolute;left:0;right:0;top:18px;z-index:11;
    padding:6px 12px;
    display:flex;align-items:center;justify-content:space-between;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  }
  .who{ display:flex;align-items:center;gap:9px; }
  .avatar{
    width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
    overflow:hidden;background:#fff;
    box-shadow:0 0 0 2px #000;
  }
  .avatar img{ width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;transform:scale(1.18); }
  .who .text{ display:flex;flex-direction:column;gap:1px; }
  .who .name{ font-size:13px;font-weight:600;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.6); }
  .who .time{ font-size:10px;font-weight:400;color:rgba(255,255,255,.7);text-shadow:0 1px 4px rgba(0,0,0,.6); }
  .head .icons{ display:flex;align-items:center;gap:14px; }
  .head .icons svg{ width:18px;height:18px;color:#fff;opacity:.92; }
  .head .icons .ic-btn{ cursor:pointer;display:grid;place-items:center;width:24px;height:24px; }
  .head .icons .ic-btn:hover{ opacity:1; }
  /* paused state highlight for the pause/resume button */
  .head .icons .ic-btn.is-on svg{ color:var(--accent);opacity:1; }

  /* SLIDES */
  .slides{ position:absolute;inset:0;overflow:hidden; }
  .slide{ position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .25s ease; }
  .slide.is-active{ opacity:1;visibility:visible; }
  .slide .bg{ position:absolute;inset:0;background-size:cover;background-position:center; }

  /* ── SLIDE 1 — IMAGE ── */
  .video-wrap{ position:absolute;inset:0;background:#000;overflow:hidden; }
  .video-wrap img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;
  }
  .video-wrap::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 26%, transparent 54%, rgba(0,0,0,.9) 100%);
  }
  .slide-video .stamp{
    position:absolute;left:14px;top:74px;z-index:3;
    border:1px solid #fff;color:#fff;background:rgba(0,0,0,.4);
    padding:3px 8px 4px;padding-left:calc(8px + .34em);
    font-size:9px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
    transform:rotate(-2deg);
  }
  .slide-video .copy{ position:absolute;left:14px;right:14px;bottom:84px;z-index:3; }
  .slide-video .copy .small{
    font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;
    color:var(--accent);margin-bottom:6px;
  }
  .slide-video .copy h1{
    font-family:'Bebas Neue',sans-serif;font-size:72px;line-height:.85;letter-spacing:.01em;color:#fff;
    text-shadow:0 4px 20px rgba(0,0,0,.6);
  }
  .slide-video .copy h1 .red{ color:var(--accent); }
  .slide-video .copy .sub{
    margin-top:8px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);
  }
  /* tap-to-unmute hint chip */
  .sound-hint{
    position:absolute;right:12px;top:80px;z-index:6;
    display:flex;align-items:center;gap:6px;cursor:pointer;
    background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(6px);border-radius:99px;padding:6px 11px 6px 9px;
    transition:opacity .3s ease, transform .15s ease;
  }
  .sound-hint:hover{ transform:translateY(-1px); }
  .sound-hint svg{ width:14px;height:14px;color:#fff; }
  .sound-hint span{ font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff; }
  .banner.is-unmuted .sound-hint{ opacity:0;pointer-events:none; }

  /* ── SLIDE 2 — COLORWAYS (interactive) ── */
  .slide-colors .bg{
    background-color:#0a0a0c;
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,.62) 100%),
      url('recursos/1629937757554-84e1271f0507.jpg');
    background-size:cover, cover;background-position:center, center;
    filter:blur(3px) brightness(.5);transform:scale(1.05);
  }
  .slide-colors .copy{ position:absolute;left:14px;right:14px;top:64px;z-index:3; }
  .slide-colors .copy .small{
    font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;
  }
  .slide-colors .copy h2{ font-family:'Bebas Neue',sans-serif;font-size:38px;line-height:.9;letter-spacing:.02em; }

  /* big live preview disc that changes color */
  .preview{
    position:absolute;left:0;right:0;top:150px;z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    pointer-events:none;
  }
  .preview .disc{
    width:128px;height:128px;border-radius:50%;
    background:#1a1a1c center/cover no-repeat;
    box-shadow:0 12px 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.14);
    transition:box-shadow .45s ease, transform .45s cubic-bezier(.2,.8,.2,1.2);
  }
  .preview.pop .disc{ animation:discPop .6s cubic-bezier(.2,.8,.2,1.5); }
  @keyframes discPop{
    0%  { transform:scale(.84) rotate(-16deg); }
    50% { transform:scale(1.13) rotate(7deg); }
    100%{ transform:scale(1) rotate(0); }
  }
  .preview.pop .pv-name{ animation:nameRise .5s ease; }
  .preview.pop .pv-code{ animation:nameRise .5s ease .05s both; }
  @keyframes nameRise{
    0%  { opacity:0; transform:translateY(12px); }
    100%{ opacity:1; transform:translateY(0); }
  }
  .preview .pv-name{ font-family:'Bebas Neue',sans-serif;font-size:30px;line-height:1;letter-spacing:.04em;text-align:center; }
  .preview .pv-code{ font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:-4px;text-align:center; }

  .swatches{
    position:absolute;left:14px;right:14px;bottom:84px;z-index:6;
    display:flex;gap:12px;justify-content:center;
  }
  .sw{
    cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:6px;border-radius:14px;border:1px solid transparent;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .sw:hover{ transform:translateY(-2px); }
  .sw.is-active{ border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08); }
  .sw .dot{
    width:40px;height:40px;border-radius:50%;
    background:#222 center/cover no-repeat;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.5);
    transition:transform .15s ease;
  }
  .sw.is-active .dot{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.18), 0 0 0 2px var(--accent), 0 4px 12px rgba(0,0,0,.5); }
  .sw .t{ font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);text-align:center;max-width:70px; }

  /* product link button + heart (slide 2 only — replaces the comment box) */
  .slide-colors .product-cta{
    position:absolute;left:14px;right:14px;bottom:18px;z-index:7;
    display:flex;align-items:stretch;gap:10px;
  }
  .slide-colors .product-cta .pc-main{
    all:unset;box-sizing:border-box;flex:1;
    display:flex;align-items:center;justify-content:center;gap:10px;
    height:46px;background:var(--accent);color:#fff;
    font-weight:700;font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em;
    cursor:pointer;border-radius:2px;box-shadow:0 8px 22px rgba(141,187,1);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .slide-colors .product-cta .pc-main:hover{ transform:translateY(-1px);box-shadow:0 14px 32px rgba(141,187,1); }
  .slide-colors .product-cta .pc-main:active{ transform:translateY(0) scale(.99); }
  .slide-colors .product-cta .arr{ font-family:'Bebas Neue',sans-serif;font-size:18px;transition:transform .25s ease; }
  .slide-colors .product-cta .pc-main:hover .arr{ transform:translateX(4px); }
  /* heart kept on slide 2 — plain icon, no container (same as the first section) */
  .slide-colors .product-cta .pc-like{
    all:unset;box-sizing:border-box;flex:0 0 auto;
    width:44px;height:46px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:#fff;
    transition:transform .15s ease, color .2s ease;
  }
  .slide-colors .product-cta .pc-like svg{ width:25px;height:25px; }
  .slide-colors .product-cta .pc-like:hover{ transform:translateY(-1px);color:var(--accent); }
  .slide-colors .product-cta .pc-like.liked{ color:var(--accent); }
  .slide-colors .product-cta .pc-like.liked svg{ fill:var(--accent);animation:likePop .35s ease; }

  /* hide the comment footer while the colorways slide is active */
  .banner.colors-active .footer{ display:none; }

  /* FOOTER */
  .footer{
    position:absolute;left:0;right:0;bottom:0;height:56px;z-index:11;
    padding:8px 12px 12px;display:flex;align-items:center;gap:8px;
    background:linear-gradient(to top, rgba(0,0,0,.85) 60%, transparent);
  }
  .reply{
    flex:1;display:flex;align-items:center;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
    border-radius:99px;padding:0 14px;height:34px;backdrop-filter:blur(8px);
  }
  .reply input{ all:unset;flex:1;font-size:11px;color:#fff;line-height:34px; }
  .reply input::placeholder{ color:rgba(255,255,255,.55); }
  .footer .ic-btn{ width:30px;height:30px;display:grid;place-items:center;color:#fff;cursor:pointer; }
  .footer .ic-btn svg{ width:20px;height:20px; }
  .footer .ic-btn:hover{ color:var(--accent); }
  .footer .ic-btn.liked{ color:var(--accent); }
  .footer .ic-btn.liked svg{ fill:var(--accent);animation:likePop .35s ease; }
  @keyframes likePop{ 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

  /* TAP zones (navigation) — BELOW interactive controls */
  .tap{ position:absolute;top:30px;bottom:60px;width:30%;z-index:5;cursor:pointer; }
  .tap.left{ left:0; }
  .tap.right{ right:0; }

  /* Brand reply toast */
  .toast{
    position:absolute;left:12px;right:12px;bottom:64px;z-index:13;
    background:rgba(255,255,255,.95);color:#0a0a0c;
    padding:10px 12px;border-radius:14px 14px 14px 4px;font-size:11px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    transform:translateY(80%);opacity:0;pointer-events:none;
    transition:transform .35s cubic-bezier(.2,.8,.2,1.2), opacity .25s ease;
  }
  .toast.show{ transform:translateY(0);opacity:1; }
  .toast .from{ font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:2px; }

  /* FLOATING HEARTS */
  .hearts{ position:absolute;inset:0;z-index:14;pointer-events:none;overflow:hidden; }
  .heart-p{
    position:absolute;bottom:54px;
    width:22px;height:22px;color:var(--accent);
    will-change:transform,opacity;
    animation:floatUp 1.25s ease-out forwards;
  }
  .heart-p svg{ width:100%;height:100%;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
  @keyframes floatUp{
    0%  { transform:translate(0,0) scale(.4) rotate(0deg); opacity:0; }
    12% { opacity:1; transform:translate(0,-14px) scale(1.15) rotate(-6deg); }
    100%{ transform:translate(var(--dx,0),-200px) scale(.7) rotate(var(--rot,8deg)); opacity:0; }
  }

  .banner::after{
    content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);z-index:60;
  }

  @media (prefers-reduced-motion: reduce){
    .progress i.is-current::after{ animation:none !important;transform:scaleX(0) !important; }
  }