.model-viewer-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9; /* Fondo claro */
}

#ar-button {
  background-color: #4285f4;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#ar-button:hover {
  background-color: #357ae8;
}

.about-wrapp .row img {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.row img {
  width: 100%;
  max-width: 700px; /* Tamaño máximo incrementado */
  height: auto;
  border: 3px solid #ddd; /* Bordes decorativos */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Sombra para estética */
  margin-bottom: 20px; /* Espaciado entre imágenes */
}


/* Componente del model-viewer */
.model-viewer {
  width: 100%;
  height: 500px; /* Aumento la altura para mayor visibilidad */
  max-width: 100%; /* Ocupa el máximo ancho posible */
  min-height: 600px; /* Asegura que haya suficiente altura en pantallas grandes */
  background-color: #ffffff;
  margin: 0 auto; /* Centrarlo en la pantalla */
  position: relative;
  display: block;
}

/* Botón AR */
#ar-button {
  background-image: url(ar_icon.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 12px 50%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  padding: 0px 16px 0px 40px;
  font-family: Roboto Regular, Helvetica Neue, sans-serif;
  font-size: 14px;
  color: #4285f4;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: 1px solid #DADCE0;
  transition: background-color 0.3s;
}

#ar-button:active {
  background-color: #E8EAED;
}

#ar-button:focus {
  outline: none;
}

#ar-button:focus-visible {
  outline: 1px solid #4285f4;
}

/* Animaciones */
@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes elongate {
  from { transform: translateX(100px); }
  to { transform: translateX(-100px); }
}

model-viewer > #ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 120px;
  animation: elongate 2s infinite ease-in-out alternate;
  display: none;
}

model-viewer[ar-status="session-started"] > #ar-prompt {
  display: block;
}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}

/* Estilos responsivos */
@media (max-width: 768px) {
  .model-viewer {
    height: 400px; /* Ajusta la altura para pantallas pequeñas */
  }

  #ar-button {
    font-size: 12px;
    height: 32px;
    line-height: 32px;
  }
}

@media (max-width: 576px) {
  .model-viewer {
    height: 300px; /* Ajuste extra para móviles muy pequeños */
  }

  #ar-button {
    font-size: 12px;
    padding: 0px 12px 0px 36px;
  }
}
.about-wrapp .row img {
  width: 100%;
  max-width: 500px; /* Aumentar el tamaño máximo */
  height: auto;
  border: 2px solid #ddd; /* Opcional: Bordes para estética */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  margin: 0 auto 20px auto; /* Margen inferior entre imágenes */
}