@media (max-width: 700px) {
  html:has(.preview-workspace),
  body:has(.preview-workspace) {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: #050506 !important;
  }

  body:has(.preview-workspace)::before {
    display: none !important;
  }

  .preview-workspace {
    display: block !important;
    width: 100dvw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #050506 !important;
  }

  .preview-bar {
    display: none !important;
  }

  .preview-stage {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .preview-device {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #050506 !important;
    box-shadow: none !important;
  }

  .preview-phone {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .preview-reference {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .preview-blur {
    inset: -28px !important;
    width: calc(100% + 56px) !important;
    height: calc(100% + 56px) !important;
    object-fit: cover !important;
    filter: blur(20px) brightness(.38) saturate(.82) !important;
  }

  .preview-columns,
  .preview-rows,
  .preview-camera,
  .preview-gesture {
    display: none !important;
  }

  .preview-grid {
    inset: 0 !important;
  }

  .preview-cell span {
    top: calc(5px + env(safe-area-inset-top) * .1) !important;
  }
}

@media (display-mode: standalone) and (max-width: 700px) {
  .preview-workspace {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}

/* Home Segredos Club: correções de enquadramento e estados sem mídia. */
button[aria-label="Selecionar Vivian Souza"],
button[aria-label="Selecionar Vivian"] {
  background:
    radial-gradient(circle at 68% 22%, rgba(232,185,79,.42), transparent 34%),
    linear-gradient(145deg, #2a1e0a, #080706 62%, #15100a) !important;
}

button[aria-label="Selecionar Camilly"] {
  background:
    radial-gradient(circle at 65% 22%, rgba(232,185,79,.32), transparent 34%),
    linear-gradient(145deg, #17120a, #050505 62%, #120d06) !important;
}

button[aria-label="Selecionar Vivian Souza"] > img,
button[aria-label="Selecionar Vivian"] > img,
button[aria-label="Selecionar Camilly"] > img {
  visibility: hidden !important;
}

button[aria-label="Selecionar Vivian Souza"]::before,
button[aria-label="Selecionar Vivian"]::before,
button[aria-label="Selecionar Camilly"]::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: rgba(238, 194, 96, .78);
  font: 800 1.25rem/1 Georgia, serif;
}

button[aria-label="Selecionar Vivian Souza"]::before,
button[aria-label="Selecionar Vivian"]::before {
  content: "V";
}

button[aria-label="Selecionar Camilly"]::before {
  content: "C";
}

article:has(img[alt="Vivian Souza"]),
article:has(img[alt="Camilly"]),
div:has(> img[alt="Vivian Souza"]),
div:has(> img[alt="Camilly"]) {
  background:
    radial-gradient(circle at 66% 22%, rgba(232,185,79,.28), transparent 32%),
    linear-gradient(145deg, #211708, #050505 64%, #100c07) !important;
}

img[alt="Vivian Souza"],
img[alt="Camilly"],
article:has(img[alt="Vivian Souza"]) button[aria-label^="Abrir mídia"] img,
article:has(img[alt="Camilly"]) button[aria-label^="Abrir mídia"] img {
  visibility: hidden !important;
}

@media (min-width: 1024px) {
  main > section > div:nth-child(2) > div:first-child > article:first-child {
    padding: clamp(16px, 2dvh, 24px) !important;
  }

  main > section > div:nth-child(2) > div:first-child > article:first-child h1 {
    margin-top: clamp(8px, 1.4dvh, 16px) !important;
    font-size: clamp(2.75rem, 4.45vw, 5.35rem) !important;
    line-height: .79 !important;
  }

  main > section > div:nth-child(2) > div:first-child > article:first-child h1 + div {
    margin-top: clamp(8px, 1.3dvh, 14px) !important;
    font-size: clamp(12px, 1.55dvh, 16px) !important;
  }

  main > section > div:nth-child(2) > div:first-child > article:first-child p {
    margin-top: clamp(6px, 1dvh, 10px) !important;
    font-size: clamp(11px, 1.35dvh, 14px) !important;
    line-height: 1.4 !important;
  }

  main > section > div:nth-child(2) > div:first-child > article:first-child > div:last-child {
    gap: 6px !important;
  }

  main > section > div:nth-child(2) > div:first-child > article:first-child > div:last-child > span {
    padding-top: clamp(6px, 1dvh, 9px) !important;
    padding-bottom: clamp(6px, 1dvh, 9px) !important;
  }

  main > section > div:nth-child(2) > div:first-child > article:nth-child(2) img[alt] {
    object-fit: contain !important;
    object-position: center center !important;
    background: #050505 !important;
  }
}

@media (min-width: 1024px) and (max-height: 850px) {
  main > section > div:nth-child(2) {
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  main > section > div:nth-child(2) > div:first-child {
    gap: 10px !important;
  }

  main > section > div:nth-child(2) > div:first-child > article:first-child h1 {
    font-size: clamp(2.55rem, 4vw, 4.75rem) !important;
  }
}