/* Importar la tipografía interno */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap");

/* Evitar desbordamientos globales */
html,
body {
  background-color: #ffffff; /* Fondo blanco para toda la página */
  margin: 0; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina relleno por defecto */
}

/* Separador Rosa */
.separator {
  width: 80px; /* Ancho del separador */
  height: 4px; /* Altura del separador */
  background-color: var(--pink-color); /* Color rosa definido en :root */
  margin: 2rem 0; /* Margen superior e inferior */
}

/* ==================== ESCANEO Y DIGITALIZACIÓN 3D ==================== */
/* ==================== HERO SECTION: ESCANEO 3D ==================== */

/* Fondo Parallax del Hero */
#escaner-hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Asegura que no se alarga más de lo necesario */
  background-image: url("/src/images/escaneres/escaneo3d-servicio.webp"); /* Imagen específica para Escaneo */
  background-size: cover;
  background-position: center;
  transform: translateY(0);
  z-index: 0;
  overflow: hidden; /* Prevé desbordamientos */
}

#escaner-hero {
  position: relative;
  height: 120vh; /* Asegura que solo ocupa la pantalla visible */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente el contenido */
  align-items: flex-start; /* Mantén los elementos alineados a la izquierda */
  overflow: hidden; /* Evita solapamientos no deseados */
}

/* Ajustar posición del título en el Hero */
#escaner-hero h1 {
  margin-top: 5rem; /* Añade espacio superior */
  margin-bottom: 0rem; /* Espaciado inferior opcional */
  color: var(--secondary-color); /* Mantén el color */
}
/* Subtítulo del Hero */
#escaner-hero h3 {
  color: var(--secondary-color); /* Gris claro */
  margin-top: 0rem;
  margin-bottom: 0.75rem;
  text-transform: none; /* Opcional: Normalizar texto */
  text-align: left; /* Alinea el texto a la izquierda */
}

/* Filtro oscuro sobre la imagen de fondo */
#escaner-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* Contenedor principal del contenido */
#escaner-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 0 2rem; /* Márgenes laterales */
}

/* ==================== BOTONES HERO ==================== */
.hero-buttons {
  margin-top: 60px;
  display: flex;
  gap: 3.125rem; /* 50px -> 3.125rem */
  justify-content: center; /* Centra los botones horizontalmente */
  align-items: center; /* Asegura alineación vertical */
  width: 100%; /* Opcional: para garantizar centrado en el contenedor */
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
  margin: 10 auto; /* Asegura que estén centrados dentro de su contenedor */
}

/* Botón Primario */
.hero-buttons .btn-primary {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo rosa */
  color: #ffffff; /* Texto blanco */
  padding: 0.625rem 3rem; /* 10px 30px -> 0.625rem 1.875rem */
  border-radius: 1.25rem; /* 20px -> 1.25rem */
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--pink-color); /* Borde rosa */
  transition: all 0.3s ease;
}

.hero-buttons .btn-primary:hover {
  background-color: var(--pink-color); /* Fondo transparente */
  color: #fff; /* Texto rosa */
  border: 2px solid var(--pink-color); /* Mantén el borde rosa */
}

/* Botón Secundario */
.hero-buttons .btn-secondary {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo rosa */
  color: #ffffff; /* Texto blanco */
  padding: 0.625rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 20px;
  border: 2px solid var(--pink-color); /* Borde rosa */
  transition: all 0.3s ease;
}

.hero-buttons .btn-secondary:hover {
  background-color: var(--pink-color); /* Fondo transparente */
  color: #fff; /* Texto rosa */
  border: 2px solid var(--pink-color); /* Mantén el borde rosa */
}
@media (max-width: 768px) {
  #escaner-hero {
    padding: 1.5rem; /* Margen interno para pantallas medianas */
    text-align: left; /* Asegura alineación a la izquierda */
  }

  #escaner-hero .hero-buttons a {
    width: 100%; /* Botones ocupan el ancho del contenedor */
    max-width: 300px; /* Limita el ancho máximo */
    padding: 0.5rem 1rem; /* Ajusta el relleno para reducir tamaño visual */
    font-size: 0.875rem; /* Tamaño de texto más pequeño */
  }
  #escaner-hero .container {
    padding: 0; /* Elimina padding que pueda desbordar */
    margin: 0 auto; /* Centra horizontalmente el contenedor */
    width: 100%; /* Ajusta al 100% de la pantalla */
    box-sizing: border-box; /* Incluye padding/margin dentro del ancho */
  }
}

@media (max-width: 480px) {
  #escaner-hero {
    padding: 1rem; /* Margen interno reducido para pantallas pequeñas */
    text-align: left; /* Asegura alineación correcta */
  }
  #escaner-hero .container {
    padding: 0 1rem; /* Ajusta el margen interno del contenedor */
  }
  #escaner-hero .hero-buttons {
    flex-direction: column; /* Botones apilados verticalmente */
    align-items: stretch; /* Asegura que los botones ocupen el ancho disponible */
    gap: 1rem; /* Espaciado más pequeño */
  }
}

/* ==================== TÍTULOS DE APLICACIONES ==================== */

#aplicaciones-escaner {
  background-color: #ffffff; /* Fondo blanco */
  padding: 6rem 2rem; /* Espaciado interno */
  margin: 0 auto; /* Centrado horizontal */
}

/* Estado inicial: Oculto */
#aplicaciones-escaner .section-title,
#aplicaciones-escaner .section-subtitle {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

/* Estado visible: Posición normal */
#aplicaciones-escaner .title-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cascada retrasada */
#aplicaciones-escaner .section-title {
  transition-delay: 0.2s;
}

#aplicaciones-escaner .section-subtitle {
  transition-delay: 0.4s;
}

/* Diseño de la grilla de aplicaciones */
#aplicaciones-escaner .applications-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  justify-items: center;
}

#aplicaciones-escaner .application-card {
  position: relative;
  max-width: 18.75rem;
  border-radius: 0.5rem;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background-color: #1b1b1b;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s ease;
}

#aplicaciones-escaner .application-card:hover {
  transform: translateY(-5px);
}

/* Barra de título */
#aplicaciones-escaner .application-title-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--secondary-color);
  padding: 0.625rem 0;
  font-weight: bold;
  transform: translateY(0);
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

/* Contenido de la tarjeta */
#aplicaciones-escaner .application-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  padding: 15px;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out, opacity 0.3s ease;
  text-align: center;
  z-index: 3;
  opacity: 0;
}

/* Mostrar contenido al pasar el mouse */
#aplicaciones-escaner .application-card:hover .application-content {
  transform: translateY(0);
  opacity: 1;
}

/* Animar el título hacia arriba */
#aplicaciones-escaner .application-card:hover .application-title-bar {
  transform: translateY(-500%);
}

/* Línea degradada */
#aplicaciones-escaner .application-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 5px;
  background-image: linear-gradient(to right, #c5097f, #2c41c2);
  z-index: 3;
  transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
}

#aplicaciones-escaner .application-card:hover::after {
  width: 100%;
  left: 0;
}

/* Responsive */
@media (max-width: 768px) {
  html,
  body {
    background-color: #ffffff; /* Fuerza el fondo blanco */
  }

  #aplicaciones-escaner {
    background-color: #ffffff; /* Fuerza el fondo blanco */
  }
}

@media (max-width: 768px) {
  #aplicaciones-escaner .applications-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #aplicaciones-escaner .applications-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ==================== SERVICIO ESCANEO 3D ==================== */
#servicio-escaner {
  background-image: url("/src/images/escaneres/escaneo3d-hero.webp");
  background-size: 120%;
  background-position: center calc(-20vh);
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 0 40px;
  height: 100vh;
  text-align: left;
  position: relative;
  overflow: hidden;
}

#servicio-escaner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

#servicio-escaner .service-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

#servicio-escaner .servicio-section-title {
  margin-bottom: 1rem;
}

#servicio-escaner .section-description-servicio {
  margin-top: 15px;
  margin-bottom: 2rem;
}

#servicio-escaner .button-container {
  margin-top: 3rem;
  text-align: center;
}

.btn-presupuesto {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 0.9375rem 1.875rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1.875rem;
  border: 2px solid #da0076;
  transition: all 0.3s ease;
}

.btn-presupuesto:hover {
  background-color: #da0076;
  color: #fff;
}

/* Responsive Servicio Escaneo 3D */
@media (max-width: 768px) {
  #servicio-escaner {
    padding: 2rem 1rem;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
    background-position: center;
  }

  #servicio-escaner h2,
  #servicio-escaner h4 {
    z-index: 2;
    margin-bottom: 1rem;
  }

  #servicio-escaner .section-description-servicio {
    margin: 1rem 0;
    max-width: 100%;
    line-height: 1.6;
  }

  #servicio-escaner .button-container {
    margin-top: 2rem;
  }

  #servicio-escaner .btn-presupuesto {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}

@media (max-width: 480px) {
  #servicio-escaner {
    padding: 1.5rem 0.75rem;
    height: auto;
    min-height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
    background-position: center;
  }

  #servicio-escaner h2,
  #servicio-escaner h4 {
    z-index: 2;
    margin-bottom: 1rem;
  }

  #servicio-escaner .section-description-servicio {
    margin: 1rem 0;
    max-width: 100%;
  }

  #servicio-escaner .button-container {
    margin-top: 1.5rem;
  }
}

/* ==================== ANIMACIÓN EN CASCADA ==================== */
/* Estado inicial (invisible) */
#servicio-escaner .servicio-section-title,
#servicio-escaner .section-description-servicio,
#servicio-escaner .button-container {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease-out;
}

/* Estado visible (con animación) */
#servicio-escaner.title-visible .servicio-section-title {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

#servicio-escaner.title-visible .section-description-servicio {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

#servicio-escaner.title-visible .button-container {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}

/* ==================== CONSULTORÍA ESCANEO 3D ==================== */
#consultoria-escaner {
  background-color: #000000; /* Fondo negro */
  padding: 3.75rem 6.25rem;
  text-align: right;
  color: #ffffff; /* Texto blanco */
}

/* RESPONSIVE */
@media (max-width: 480px) {
  #consultoria-escaner {
    padding: 5rem 1rem;
  }

  #consultoria-escaner .button-container {
    margin-top: 1.5rem;
    text-align: center;
  }
}

/* Títulos, subtítulos y descripción alineados a la derecha */
#consultoria-escaner .section-title,
#consultoria-escaner .section-subtitle,
#consultoria-escaner .section-description {
  text-align: right;
  color: #ffffff;
}

/* Separador Rosa */
#consultoria-escaner .separator {
  width: 5rem;
  height: 0.25rem;
  background-color: var(--pink-color);
  margin: 20px 0;
  margin-left: auto;
}

/* Botón centrado */
#consultoria-escaner .button-container {
  text-align: center;
  margin-top: 60px;
}

/* Botón en fondo oscuro */
#consultoria-escaner .btn-presupuesto-dark {
  display: inline-block;
  background-color: transparent;
  color: #ffffff;
  padding: 0.9375rem 1.875rem; /* 15px 30px */
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1.875rem; /* 30px */
  border: 2px solid #da0076; /* Rosa fuerte */
  transition: all 0.3s ease;
}

#consultoria-escaner .btn-presupuesto-dark:hover {
  background-color: #da0076; /* Rosa fuerte en hover */
  color: #ffffff;
}

/* ========== Entrada en Cascada ========== */
/* Estado inicial (invisible) */
#consultoria-escaner .section-title,
#consultoria-escaner .section-subtitle,
#consultoria-escaner .section-description,
#consultoria-escaner .button-container,
#consultoria-escaner .separator {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease-out;
}

/* Estado visible (con animación) */
#consultoria-escaner.title-visible .section-title {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

#consultoria-escaner.title-visible .section-subtitle {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

#consultoria-escaner.title-visible .section-description {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}

#consultoria-escaner.title-visible .separator {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
}

#consultoria-escaner.title-visible .button-container {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
}