/* css/presentacion.css */

/* Oculta el <img> SEO */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden;
}

/* Hero con 4 picos y menos padding para mostrar más imagen */
.hero-section {
  position: relative;
  background: url('../images/1.webp') center/cover no-repeat;
  clip-path: polygon(
    0% 1.5%, 20% 0%, 40% 1.5%, 60% 0%, 80% 1.5%, 100% 1.5%,
    100% 98.5%, 80% 100%, 60% 98.5%, 40% 100%, 20% 98.5%, 0% 98.5%
  );
  color: #fff;
  text-align: center;
  padding: 30rem 1rem;
  overflow: hidden;
  font-family: 'Adobe Clean Regular', sans-serif;
}



/* Contenido transparente sin fondo */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  background: transparent; /* sin fondo */
  border-radius: 0;
  padding: 0;
}

/* Título en una línea, más grande */
.hero-content h2 {
  font-family: 'Adobe Clean Bold', sans-serif;
  font-size: 4rem;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 1rem;
}

/* Párrafo descriptivo */
.hero-content p {
  font-family: 'Adobe Clean Regular', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 2rem;
}

/* Botón gigante con pulso */
.btn-test {
  display: inline-block;
  font-family: 'Adobe Clean Bold', sans-serif;
  font-size: 1.75rem;
  padding: 1.25rem 2.5rem;
  border-radius: 9999px;
  background: #319d70;
  color: #fff;
  text-decoration: none;
  animation: pulse 2s infinite ease-in-out;
  transition: background 0.2s;
  z-index: 2;
}
.btn-test:hover {
  background: #278a5d;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}

/* Estadísticas justo debajo de la imagen, sin fondo */
.stats-outside {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  padding: 1.5rem 1rem;
  background: transparent; /* transparente */
  font-family: 'Adobe Clean Regular', sans-serif;
  color: #333; /* texto oscuro sobre fondo claro */
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-family: 'Adobe Clean Bold', sans-serif;
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.stat-item:nth-child(1) .stat-number { color: #319d70; }
.stat-item:nth-child(2) .stat-number { color: #5a3d5b; }

.stat-item p {
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 1rem;
  }
  .hero-content h2 {
    font-size: 2.5rem;
    white-space: normal;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .btn-test {
    font-size: 1.25rem;
    padding: 1rem 2rem;
  }
  .stats-outside {
    flex-direction: column;
    gap: 2rem;
  }
  .stat-number {
    font-size: 2.5rem;
  }
}