.sy-tut {
    --tut-red: rgb(var(--bfa,255,59,69));
    --tut-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --tut-tilt-y: -16deg;
    --tut-tilt-x: 7deg;
    position: relative;
    display: grid;
    align-items: center;
    gap: 28px;
    grid-template-columns: 1fr;
  }

  .sy-tut--footer {
    margin-top: 40px;
    padding: 28px 22px;
    border-radius: 22px;
    border: 1px solid transparent;
    background:
      radial-gradient(60% 80% at 85% 50%, rgba(var(--bfd,225,29,42), 0.14), transparent 70%) padding-box,
      linear-gradient(180deg, rgba(16, 10, 11, 0.95), rgba(7, 5, 6, 0.95)) padding-box,
      linear-gradient(135deg, rgba(var(--bfa,255,59,69), 0.45), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.04) 65%, rgba(var(--bfa,255,59,69), 0.3)) border-box;
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  @media (min-width: 768px) {
    .sy-tut {
      grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
      gap: 40px;
    }

    .sy-tut--footer {
      padding: 36px 44px;
    }
  }

  .sy-tut--pdp {
    margin-top: 24px;
  }

  .sy-tut-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .sy-tut-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--bfa,255,59,69), 0.35);
    background: rgba(var(--bfd,225,29,42), 0.1);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--bfl,255,138,143));
  }

  .sy-tut-eyebrow svg {
    width: 15px;
    height: 15px;
  }

  .sy-tut-title {
    margin-top: 14px;
    font-family: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .sy-tut-title span {
    background: linear-gradient(90deg, rgb(var(--bfa,255,59,69)), rgb(var(--bfl,255,138,143)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .sy-tut-lead {
    max-width: 40ch;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.66);
  }

  .sy-tut-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
  }

  .sy-tut-meta svg {
    width: 15px;
    height: 15px;
    color: var(--tut-red);
  }

  /* Palco 3D */
  .sy-tut-stage {
    position: relative;
    width: 100%;
    max-width: 360px;
    justify-self: center;
    padding: 6px 6px 28px;
    perspective: 1100px;
  }

  .sy-tut-frame {
    --rx: var(--tut-tilt-x);
    --ry: var(--tut-tilt-y);
    position: relative;
    aspect-ratio: 1;
    border-radius: 24px;
    padding: 8px;
    border: 1.5px solid transparent;
    background:
      linear-gradient(180deg, #160c0d, #070405) padding-box,
      linear-gradient(140deg, rgb(var(--bfa,255,59,69)), rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0.05) 62%, rgb(var(--bfa,255,59,69))) border-box;
    box-shadow:
      0 30px 60px -28px rgba(var(--bfd,225,29,42), 0.65),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.9s var(--tut-ease), box-shadow 0.5s var(--tut-ease);
  }

  .sy-tut-frame.is-tilt {
    transition: transform 0.15s ease-out, box-shadow 0.5s var(--tut-ease);
  }

  .sy-tut-stage:hover .sy-tut-frame {
    box-shadow:
      0 36px 70px -26px rgba(var(--bfd,225,29,42), 0.85),
      0 0 34px -10px rgba(var(--bfa,255,59,69), 0.6),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Luz percorrendo a borda */
  .sy-tut-ring {
    position: absolute;
    inset: -1.5px;
    z-index: 3;
    overflow: hidden;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }

  .sy-tut-ring i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    aspect-ratio: 1;
    margin: -80% 0 0 -80%;
    background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--bfa,255,59,69), 0.9) 74%, rgb(var(--bfl,255,224,226)) 76%, rgba(var(--bfa,255,59,69), 0.9) 78%, transparent 90%);
    animation: sy-tut-spin 6s linear infinite;
  }

  @keyframes sy-tut-spin {
    to { transform: rotate(1turn); }
  }

  /* Tela */
  .sy-tut-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 17px;
    background: #050304;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  .sy-tut-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.6s var(--tut-ease);
  }

  .sy-tut.is-ready .sy-tut-video {
    opacity: 1;
  }

  .sy-tut-skel {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 45%, rgba(var(--bfd,225,29,42), 0.22), transparent 60%),
      linear-gradient(180deg, #120a0b, #070405);
    transition: opacity 0.6s var(--tut-ease);
  }

  .sy-tut-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: sy-tut-skel 1.4s ease-in-out infinite;
  }

  @keyframes sy-tut-skel {
    to { transform: translateX(100%); }
  }

  .sy-tut.is-ready .sy-tut-skel {
    opacity: 0;
  }

  .sy-tut.is-ready .sy-tut-skel::after {
    animation: none;
  }

  /* Linha de "scan" discreta sobre o vídeo */
  .sy-tut-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(var(--bfa,255,59,69), 0.08), transparent);
    animation: sy-tut-scan 5s linear infinite;
  }

  @keyframes sy-tut-scan {
    from { transform: translateY(-100%); }
    to { transform: translateY(340%); }
  }

  .sy-tut-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(180deg, rgb(var(--bfa,255,77,86)), rgb(var(--bfd,179,18,29)));
    box-shadow: 0 12px 30px -8px rgba(var(--bfd,225,29,42), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.35s var(--tut-ease), transform 0.35s var(--tut-ease);
  }

  .sy-tut-play svg {
    grid-area: 1 / 1;
    width: 24px;
    height: 24px;
  }

  .sy-tut-ico-play {
    margin-left: 3px;
  }

  .sy-tut-ico-pause {
    opacity: 0;
  }

  .sy-tut-play:hover {
    transform: scale(1.08);
  }

  .sy-tut.is-playing .sy-tut-play {
    opacity: 0;
    transform: scale(0.85);
  }

  .sy-tut.is-playing .sy-tut-screen:hover .sy-tut-play {
    opacity: 0.9;
    transform: scale(1);
  }

  .sy-tut.is-playing .sy-tut-ico-play {
    opacity: 0;
  }

  .sy-tut.is-playing .sy-tut-ico-pause {
    opacity: 1;
  }

  /* Selo e botão de tela cheia (flutuam à frente) */
  .sy-tut-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 6, 7, 0.86);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    transform: translateZ(40px);
  }

  .sy-tut-rec {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tut-red);
    box-shadow: 0 0 8px var(--tut-red);
    animation: sy-tut-blink 1.4s ease-in-out infinite;
  }

  @keyframes sy-tut-blink {
    50% { opacity: 0.25; }
  }

  .sy-tut-full {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 4;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(10, 6, 7, 0.86);
    color: #fff;
    cursor: pointer;
    transform: translateZ(40px);
    transition: border-color 0.3s var(--tut-ease), background-color 0.3s var(--tut-ease);
  }

  .sy-tut-full svg {
    width: 16px;
    height: 16px;
  }

  .sy-tut-full:hover {
    border-color: var(--tut-red);
    background: rgba(var(--bfd,225,29,42), 0.35);
  }

  .sy-tut-play:focus-visible,
  .sy-tut-full:focus-visible {
    outline: 2px solid var(--tut-red);
    outline-offset: 3px;
  }

  /* Cantoneiras HUD */
  .sy-tut-corner {
    position: absolute;
    z-index: 4;
    width: 18px;
    height: 18px;
    border: 0 solid var(--tut-red);
    pointer-events: none;
    transform: translateZ(24px);
  }

  .sy-tut-c1 { top: -8px; right: -8px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 8px; }
  .sy-tut-c2 { bottom: -8px; left: -8px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 8px; }

  /* Sombra/reflexo no "chão" */
  .sy-tut-floor {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 26px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(var(--bfd,225,29,42), 0.45), transparent 70%);
  }

  .sy-tut.is-off *,
  .sy-tut.is-off *::before,
  .sy-tut.is-off *::after {
    animation-play-state: paused !important;
  }

  @media (max-width: 767px) {
    .sy-tut {
      --tut-tilt-y: -6deg;
      --tut-tilt-x: 4deg;
    }

    .sy-tut-badge,
    .sy-tut-full {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(10, 6, 7, 0.85);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sy-tut {
      --tut-tilt-y: 0deg;
      --tut-tilt-x: 0deg;
    }

    .sy-tut-ring i,
    .sy-tut-scan,
    .sy-tut-rec,
    .sy-tut-skel::after {
      animation: none;
    }
  }