/* Estilos generales */
body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  font-family: "din_condensedbold", arial, sans-serif;
}

@font-face {
  font-family: "din_condensedbold";
  src: url("Font/din-condensed-bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Fondo de la cámara */
video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Main Menu */
#main-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 100;
  pointer-events: auto; /* Asegura interacción con el menú */
}

#centralImage {
  width: 180px;
}

/* Contenedor principal de la imagen central y botones */
#buttonContainer {
  position: absolute; /* Asegura que sea posicionable dentro de la pantalla */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra el contenedor */
  width: 300px; /* Ajusta el tamaño al diseño deseado */
  height: 300px;
  display: flex;
  justify-content: center; /* Asegura la alineación horizontal */
  align-items: center; /* Asegura la alineación vertical */
}

.image-button {
  position: absolute; /* Posiciona cada botón respecto al contenedor */
  width: 60px; /* Ajusta el tamaño de los botones */
  height: 60px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;

  border-radius: 30px;
}

/* Efecto hover para los botones */
.image-button:hover {
  transform: scale(1.1); /* Aumenta ligeramente el tamaño */
}

/* Posiciones en círculo (usando rotación y traslación) */
.image-button:nth-child(1) {
  transform: rotate(00deg) translate(130px) rotate(0deg);
}
.image-button:nth-child(2) {
  transform: rotate(30deg) translate(130px) rotate(-30deg);
}
.image-button:nth-child(3) {
  transform: rotate(60deg) translate(130px) rotate(-60deg);
}
.image-button:nth-child(4) {
  transform: rotate(90deg) translate(130px) rotate(-90deg);
}
.image-button:nth-child(5) {
  transform: rotate(120deg) translate(130px) rotate(-120deg);
}
.image-button:nth-child(6) {
  transform: rotate(150deg) translate(130px) rotate(-150deg);
}
.image-button:nth-child(7) {
  transform: rotate(180deg) translate(130px) rotate(-180deg);
}
.image-button:nth-child(8) {
  transform: rotate(210deg) translate(130px) rotate(-210deg);
}
.image-button:nth-child(9) {
  transform: rotate(240deg) translate(130px) rotate(-240deg);
}
.image-button:nth-child(10) {
  transform: rotate(270deg) translate(130px) rotate(-270deg);
}
.image-button:nth-child(11) {
  transform: rotate(300deg) translate(130px) rotate(-300deg);
}
.image-button:nth-child(12) {
  transform: rotate(330deg) translate(130px) rotate(-330deg);
}

/* ficha tecnica */

#technical-sheet {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 200;
  box-sizing: border-box;
  pointer-events: none; /* Permite que los clics pasen al modelo detrás */
}

/* Parte superior: imagen e información */
#top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  padding-top: 5px;
  color: white;
  font-size: 15px;
  background-color: #dbb05c66;
  padding-bottom: 5px;
  pointer-events: auto; /* Habilita la interacción para estos elementos específicos */
}

.adultDdogAge {
  font-size: 14px;
}

.dog-profile {
  width: 130px;
  height: 130px; /* Asegura que la altura también se ajuste */
  object-fit: cover; /* Ajusta la imagen dentro del contenedor */
  border-radius: 65px;
}

.info-container-top-left {
  flex: 1;
  text-align: center;
}

.info-container-top-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 20px;
}

.info-container {
  display: flex;
  flex-direction: column;
}

.dog-age {
  margin: 0;
}

.toggle-button {
  background-color: #07daff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  margin-top: 10px;
  transition: background-color 0.3s ease;
  font-family: "din_condensedbold", arial, sans-serif;
  text-decoration: underline;
}

/* Contenedor inferior: nombre de la raza */

.info-container-lower {
  background-color: #dbb05c;
  margin: 0px;
  color: white;
  width: 100%;
  text-align: center;
}

.dog-breed {
  font-size: 30px;
  font-weight: bold;
  margin: 0;
}

#moleculeTabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  pointer-events: auto; /* Habilita la interacción para estos elementos específicos */
}

.tab {
  text-align: center;
}

.grafica {
  width: 300px;
  text-align: center;
}

.tab.active {
  display: block;
}

/* AR Scene - Solo ocupa la parte inferior */
#ar {
  position: fixed;
  bottom: 0; /* Lo limita a la parte inferior */
  left: 0;
  width: 100%;
  height: 20%; /* Solo el 20% de la altura de la pantalla */
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* Evita que bloquee visualmente */
  z-index: 1000; /* Trae la escena AR al frente */
  pointer-events: none; /* No intercepta eventos excepto el botón */
}

.tabContentButtom {
  position: fixed;
  bottom: 0; /* Lo limita a la parte inferior */
  left: 0;
  width: 100%;
  height: 10%; /* Solo el 20% de la altura de la pantalla */
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* Evita que bloquee visualmente */
  z-index: 1;
  pointer-events: none; /* No intercepta eventos excepto el botón */
}

/* Botón Back */
.backButton {
  width: auto; /* Escala real del PNG */
  height: auto;
  max-width: 100px; /* Controla el tamaño máximo */
  pointer-events: auto; /* Habilita interacción */
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  position: fixed;
  z-index: 100;
}

.backButton:hover {
  transform: scale(1.3); /* Efecto hover */
}

/* Clase para ocultar elementos */
.hidden {
  display: none;
}

#Molecula:active {
  opacity: 0.8; /* Breve retroalimentación visual */
  transition: opacity 0.2s ease;
}

a-scene {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70%; /* Ocupa la mitad inferior */
  z-index: 100; /* Asegura que el fondo esté detrás de todo */
  pointer-events: auto; /*No bloqueará los clics en los elementos del menú */
}

#dynamicPivot,
#dynamicModel {
  pointer-events: auto !important;
}

#tab3 {
  margin-top: 10px;
}

#saco {
  width: auto;
  height: 250px;
  margin-left: 0px;
  margin-right: 0px;
}
#lata {
  width: 250px;
  height: 250px;
  margin-left: 0px;
  margin-right: 0px;
}

#porcion {
  width: 250px;
  height: 250px;
}

/* Ajustes generales para el scroll horizontal */
.horizontal-scroll {
  display: flex;
  overflow-x: auto; /* Habilita el scroll horizontal */
  gap: 20px; /* Espacio entre los elementos */
  padding: 10px; /* Opcional: Espacio interno */
}

#tab4 {
  width: 100%;
}

.horizontal-scroll04 {
  display: flex;
  overflow-x: auto; /* Habilita el scroll horizontal */

  gap: 20px; /* Espacio entre los elementos */
  padding: 10px; /* Opcional: Espacio interno */

  margin: 0px; /* Centra el contenido si hay espacio extra */
  max-width: 100%; /* Asegura que no exceda el ancho del contenedor padre */
  box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
}

.horizontal-scroll img {
  flex-shrink: 0; /* Evita que las imágenes se reduzcan */
  max-width: 350%; /* Asegura que las imágenes mantengan su tamaño original */
  height: auto; /* Mantiene las proporciones */
  border-radius: 20px; /* Opcional: Bordes redondeados */
}

.horizontal-scroll04 img {
  flex-shrink: 0; /* Evita que las imágenes se reduzcan */
  max-width: 350%; /* Asegura que las imágenes mantengan su tamaño original */
  height: auto; /* Mantiene las proporciones */
  border-radius: 10px; /* Opcional: Bordes redondeados */
}

.porcion {
  width: 1000;
  height: 300;
}

/* Beneficios específicos */
.benefit-container {
  flex-shrink: 0; /* Evita que se reduzcan los elementos */
  min-width: 60%; /* Ancho mínimo para cada beneficio */
  max-width: 150px;
  text-align: center;
  color: white;
  margin: 0; /* Elimina márgenes adicionales */
  box-sizing: border-box; /* Incluye padding en el tamaño */
}

.benefit-container img {
  flex-shrink: 0; /* Evita que las imágenes se reduzcan */
  max-width: 80%; /* Asegura que las imágenes no sean más anchas que el contenedor */
  height: auto; /* Mantiene las proporciones */
  border-radius: 10px; /* Opcional: Bordes redondeados */
}

#tab4 h1 {
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 5px; /* Espaciado entre el título y la imagen */
  color: #dbb05c;
}

.beneficioP {
  font-size: 15px;
  color: #dbb05c;
}

.Molecula {
  margin-bottom: 20px;
}

#beneficio1 {
  background-color: red;
}

video::-webkit-media-controls-panel {
  z-index: 9999 !important;
  position: relative;
}

.a-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important; /* Mayor que el menú */
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  padding: 20px !important;
  border-radius: 10px !important;
}
a-scene {
  pointer-events: none;
}

.onboarding.hidden {
  display: none;
}


.onboarding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* deja pasar clicks */
  z-index: 9999;
}

.onboarding-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Texto molécula */
.hint-molecula {
  position: absolute;
  left: 50px;
  top: 200px;
  font-size: 18px;
  color: #333;
  animation: fadeIn 0.5s ease;
}

/* Mano croqueta */
.hint-rotate {
  position: absolute;
  right: 80px;
  bottom: 200px;
  text-align: center;
}

.hint-rotate img {
  width: 80px;
  animation: bounce 1.5s infinite;
}

.hint-rotate p {
  margin-top: 10px;
  font-size: 18px;
}

/* Animaciones */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.onboarding.hide {
  animation: fadeOut 0.5s forwards;
}