/**
 * Utilware Solutions - Estilos de Mockup con Frame de Celular
 * Implementa el diseño original con celulares inclinados
 */

/* ===== CONTENEDOR DE MOCKUP DE CELULAR ===== */
.phone-mockup-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  min-height: 550px;
  padding: 12px 15px;

  /* Frame de celular como fondo */
  background-image: url('/assets/images/asset-58a2e0e0.png');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;

  /* Bordes redondeados */
  border-radius: 30px;

  /* Rotación para efecto inclinado */
  transform: rotate(20deg);

  /* Centrado */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Z-index para superposición */
  z-index: 2000;

  /* Transiciones suaves */
  transition: transform 0.3s ease;
}

/* Hover effect - levanta ligeramente */
.phone-mockup-container:hover {
  transform: rotate(20deg) translateY(-10px);
}

/* ===== CONTENIDO DENTRO DEL CELULAR ===== */
.phone-mockup-content {
  width: 100%;
  max-width: 280px;
  min-height: 550px;

  /* Bordes redondeados para el contenido */
  border-radius: 36px;

  /* Ajuste de objeto */
  object-fit: cover;
  overflow: hidden;
}

/* Si es imagen */
.phone-mockup-content img {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  object-fit: cover;
}

/* Si es video */
.phone-mockup-content video {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  object-fit: cover;
}

/* ===== VARIANTE SIN ROTACIÓN ===== */
.phone-mockup-container.no-rotate {
  transform: rotate(0deg);
}

.phone-mockup-container.no-rotate:hover {
  transform: rotate(0deg) translateY(-10px);
}

/* ===== VARIANTE CON ROTACIÓN IZQUIERDA ===== */
.phone-mockup-container.rotate-left {
  transform: rotate(-15deg);
}

.phone-mockup-container.rotate-left:hover {
  transform: rotate(-15deg) translateY(-10px);
}

/* ===== CONTENEDOR DE MÚLTIPLES CELULARES ===== */
.phones-showcase {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 60px 0;
}

/* ===== RESPONSIVE - CELULARES ===== */
@media (max-width: 768px) {
  .phone-mockup-container {
    max-width: 250px;
    min-height: 450px;
    transform: rotate(0deg); /* Sin rotación en móvil */
  }

  .phone-mockup-container:hover {
    transform: rotate(0deg) translateY(-5px);
  }

  .phone-mockup-content {
    max-width: 230px;
    min-height: 450px;
  }

  .phones-showcase {
    flex-direction: column;
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .phone-mockup-container {
    max-width: 220px;
    min-height: 400px;
  }

  .phone-mockup-content {
    max-width: 200px;
    min-height: 400px;
  }
}

/* ===== IMAGEN DE FONDO CON ELEMENTOS DECORATIVOS ===== */
.hero-section-with-phones {
  position: relative;
  overflow: hidden;
}

/* Elementos decorativos de fondo */
.hero-section-with-phones::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-image: url('/assets/images/asset-0904d1c0.jpg');
  background-position: 100% 100%;
  background-size: 20% auto;
  background-repeat: no-repeat;
  opacity: 0.1;
  pointer-events: none;
}

/* ===== SECCIÓN CON FONDO AZUL Y ELEMENTOS ===== */
.feature-section-blue {
  position: relative;
  background-color: #1565D8;
  padding: 100px 16px;
  overflow: hidden;
}

/* Elemento decorativo superior derecha */
.feature-section-blue::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background-image: url('/assets/images/asset-0904d1c0.jpg');
  background-position: 100% 100%;
  background-size: 20% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.15;
  pointer-events: none;
}

/* Elemento decorativo central */
.feature-section-blue::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: url('/assets/images/asset-c18e1c0a.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.feature-section-blue > * {
  position: relative;
  z-index: 1;
}

/* ===== ANIMACIONES ADICIONALES ===== */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(20deg);
  }
  50% {
    transform: translateY(-15px) rotate(20deg);
  }
}

.phone-mockup-container.animate {
  animation: float 3s ease-in-out infinite;
}

/* ===== SOMBRAS Y PROFUNDIDAD ===== */
.phone-mockup-container {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.phone-mockup-container:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}