/* Estilo base das setas Splide */
.splide__arrow {
  background-color: rgba(
    255,
    255,
    255,
    0.25
  ); /* bolinha branca com transparência */
  color: #ec0b10; /* seta vermelha */
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  z-index: 10;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
}

/* Hover com bolinha sólida vermelha e seta branca */
.splide__arrow:hover {
  background-color: rgba(
    236,
    11,
    16,
    0.45
  ); /* vermelho Art Closet com 25% opacidade */
  color: white;
  transform: translateY(-50%);
}

.splide__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor !important;
  stroke: none !important;
  display: block;
  transition: fill 0.3s ease;
}

#splide .img-wrapper {
  position: relative;
}

/* Slider de Depoimentos */
#splide-depoimentos .splide__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Slider de Showroom/Fotos */
#splide .splide__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Remove o ícone SVG duplicado padrão da Splide */
.splide__arrow > svg:first-child:not(:last-child) {
  display: none !important;
}

/* Legenda com margem inferior consistente */
.splide__slide figcaption {
  margin-bottom: 1.5rem; /* mais espaçamento */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.4;
}

/* Garante espaço fixo abaixo das legendas para os bullets */
.splide__track {
  padding-bottom: 3rem;
}

@media (max-width: 640px) {
  /* POSICIONAMENTO DAS SETAS DO SLIDER DE DEPOIMENTOS */
  #splide-depoimentos .splide__arrow--prev {
    left: -1rem;
  }

  #splide-depoimentos .splide__arrow--next {
    right: -1rem;
  }
}

/* POSICIONAMENTO DAS SETAS DO SLIDER DE FOTOS */
#splide .splide__arrow--prev {
  left: 0.5rem;
}

#splide .splide__arrow--next {
  right: 0.5rem;
}

/* BLOCO 3D HÍBRIDO - ANIMAÇÃO + INTERAÇÃO */
.scene {
  perspective: 1200px;
  touch-action: none;
  user-select: none;
}

/* Estado inicial inclinado + sombra */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg); /* Novo: posição inicial 3D */
  transition: transform 0.2s ease-out;
  cursor: grab;
  user-select: none;
}

/* Faces do cubo */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #151515;
  /* border: 1px solid #1f1f1f; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  color: #fff;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}


@media (max-width: 768px) {
  .face {
    background-color: #2a2a2a !important; Tom mais claro que o #151515
    /* border: 1px solid #3a3a3a; Realce sutil nas quinas no mobile */
  }
}

/* Ajustes de posicionamento 3D */
.front {
  transform: rotateY(0deg) translateZ(100px);
}
.back {
  transform: rotateY(180deg) translateZ(100px);
}
.right {
  transform: rotateY(90deg) translateZ(100px);
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.top {
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

/* Fade suave para transdição de faces .face {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.face.fade-out {
  opacity: 0;
} */
/* Estilo realista dos post-its */
.postit-shadow {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.postit-shadow:hover {
  transform: scale(1.05) rotate(3deg);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
}


/* BLOCO 3D HÍBRIDO - ANIMAÇÃO + INTERAÇÃO
.scene {
  perspective: 1400px;
  touch-action: none;
  user-select: none;
  cursor: grab;
} */

/* Cursor de "volante" personalizado para o modo de alinhamento */
.cursor-volante {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>')
      16 16,
    auto;
}

/* Versão do cursor para o tema escuro */
.dark .cursor-volante {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>')
      16 16,
    auto;
}



/* Faces do cubo */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #151515;
  /* border: 0.3px solid rgba(255, 255, 255, 0.15); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  color: #fff;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden; /* Garante que o conteúdo não vaze */
}

@media (max-width: 768px) {
  .face {
    background-color: #2a2a2a !important; /* Tom mais claro que o #151515 */
    /* border: 0.3px solid rgba(255, 255, 255, 0.15); Realce sutil nas quinas no mobile */
  }
}

/* Padrão - Mobile (200px cubo) */
.front,
.back,
.right,
.left,
.top,
.bottom {
  transform: rotateY(0deg) translateZ(100px);
}

.back {
  transform: rotateY(180deg) translateZ(100px);
}
.right {
  transform: rotateY(90deg) translateZ(100px);
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.top {
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

/* Tablet (sm: 250px cubo) */
@media (min-width: 640px) {
  .front {
    transform: rotateY(0deg) translateZ(125px);
  }
  .back {
    transform: rotateY(180deg) translateZ(125px);
  }
  .right {
    transform: rotateY(90deg) translateZ(125px);
  }
  .left {
    transform: rotateY(-90deg) translateZ(125px);
  }
  .top {
    transform: rotateX(90deg) translateZ(125px);
  }
  .bottom {
    transform: rotateX(-90deg) translateZ(125px);
  }
}

/* Desktop (md: 300px cubo) */
@media (min-width: 768px) {
  .front {
    transform: rotateY(0deg) translateZ(150px);
  }
  .back {
    transform: rotateY(180deg) translateZ(150px);
  }
  .right {
    transform: rotateY(90deg) translateZ(150px);
  }
  .left {
    transform: rotateY(-90deg) translateZ(150px);
  }
  .top {
    transform: rotateX(90deg) translateZ(150px);
  }
  .bottom {
    transform: rotateX(-90deg) translateZ(150px);
  }
}

/* Visibilidade dos prompts do cubo 3D */
.scene.show-prompt #interaction-prompt,
.scene.show-align-prompt #align-prompt,
.scene.show-zoom-prompt #zoom-prompt {
  opacity: 1;
}

/* ✅ ESTILOS CORRIGIDOS E NOVOS */

/* Fundo estrelado */
#starry-background {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

/* Estilos para as mensagens de instrução no cubo */
#interaction-prompt p,
#align-prompt p,
#zoom-prompt p {
  background-color: rgba(
    0,
    109,
    255,
    0.75
  ) !important; /* #006DFF com 75% de opacidade */
  color: white !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  text-align: center !important;
  pointer-events: none !important;
  box-shadow: 0 4px 15px rgba(0, 109, 255, 0.4) !important;
}

/* ✅ CORREÇÃO FINAL: Estilos para o Splide Slideshow */
#splide-container .splide__arrow {
  background: rgba(
    0,
    109,
    255,
    0.3
  ) !important; /* Azul #006DFF com 30% de opacidade */
  backdrop-filter: blur(4px);
  border-radius: 9999px; /* Círculo perfeito */
  width: 3em;
  height: 3em;
  z-index: 30;
  transition: background-color 0.3s ease;
}

#splide-container .splide__arrow:hover {
  background: rgba(
    0,
    109,
    255,
    0.9
  ) !important; /* Azul #006DFF com 90% de opacidade no hover */
}

#splide-container .splide__arrow--prev {
  left: 6rem; /* Movido para mais perto da imagem */
}
#splide-container .splide__arrow--next {
  right: 6rem; /* Movido para mais perto da imagem */
}

#splide-container .splide__arrow svg {
  fill: white !important;
  width: 1.5em;
  height: 1.5em;
}

#splide-container .splide__pagination {
  z-index: 30;
}

#splide-container .splide__pagination__page {
  background: rgba(255, 255, 255, 0.5);
  width: 12px;
  height: 12px;
  margin: 5px;
}

#splide-container .splide__pagination__page.is-active {
  background: #006dff;
  transform: scale(1.4);
}

/* Slider de Depoimentos */
#splide-depoimentos .splide__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Slider de Showroom/Fotos */
#splide .splide__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}


/* Container do conteúdo clonado da face */
.splide__slide .face-content {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
}

/* Imagem dentro do slide */
.splide__slide .face-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Mensagem de retorno temporária */
#close-splide-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  border-radius: 8px;
  background-color: rgba(0, 109, 255, 0.85);
  color: white;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 30;
}

#close-splide-message.visible {
  opacity: 1;
}

#close-splide-message.fade-out {
  opacity: 0;
  transition: opacity 1s ease-in-out 5s;
}


section h1 {
  font-size: 2rem;
}