/* HERO SECTION MEJORADO Y MÁS PROFESIONALES */
/* Reemplaza los estilos del hero en tu CSS principal */

.hero {
  /* Gradiente más sofisticado y profesional */
  background: linear-gradient(135deg, #ab8e75 0%, #8b6f56 25%, #281f1c 50%, #3d2e28 75%, #c0a18b 100%);

  /* Overlay adicional para más profundidad */
  position: relative;
  color: var(--color-white);
  text-align: center;

  /* ALTURA MUCHO MÁS GRANDE Y PROFESIONAL */
  min-height: 80vh; /* Aumentado de 35vh a 70vh */
  padding: 6rem 0; /* Aumentado el padding */

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay profesional para dar más profundidad */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Patrón de textura sutil */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.01) 0px,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 20px
    );
  z-index: 1;
}

.hero-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Patrones de trenzas más grandes y elegantes */
.braid-pattern {
  position: absolute;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.08) 0px,
    rgba(255, 255, 255, 0.08) 15px,
    transparent 15px,
    transparent 30px
  );
  opacity: 0.4;
  animation: float 8s ease-in-out infinite;
  border-radius: 50%;
}

.braid-1 {
  top: 15%;
  left: -8%;
  width: clamp(150px, 20vw, 250px); /* Más grandes */
  height: clamp(150px, 20vw, 250px);
  animation-delay: 0s;
}

.braid-2 {
  top: 55%;
  right: -12%;
  width: clamp(180px, 25vw, 300px); /* Más grandes */
  height: clamp(120px, 18vw, 200px);
  border-radius: 150px;
  animation-delay: 3s;
}

.braid-3 {
  bottom: 8%;
  left: 8%;
  width: clamp(140px, 18vw, 220px); /* Más grandes */
  height: clamp(140px, 18vw, 220px);
  animation-delay: 6s;
}

/* Elementos flotantes más elegantes */
.floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-icon {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* Contenido del hero más espacioso */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px; /* Más ancho */
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Botón más elegante y grande */
.hero .btn-primary {
  padding: 1.2rem 3rem; /* Mucho más grande */
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  animation: slideInFromBottom 1.2s ease-out 0.6s both;
}

.hero .btn-primary:hover {
  transform: translateY(-5px) scale(1.05);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Animaciones mejoradas */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-25px) rotate(2deg) scale(1.02);
  }
  66% {
    transform: translateY(-15px) rotate(-1deg) scale(0.98);
  }
}

@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 0.25;
  }
  25% {
    transform: translateY(-20px) scale(1.1) rotate(5deg);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-10px) scale(1.05) rotate(-3deg);
    opacity: 0.35;
  }
  75% {
    transform: translateY(-25px) scale(0.95) rotate(2deg);
    opacity: 0.3;
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(80px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* RESPONSIVE MEJORADO */
@media (max-width: 1200px) {
  .hero {
    min-height: 65vh;
    padding: 5rem 0;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 60vh;
    padding: 4rem 0;
  }

  .hero-content {
    padding: 0 1.5rem;
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 1rem;
    letter-spacing: 1px;
  }

  .hero p {
    font-size: clamp(1rem, 4vw, 1.4rem);
    margin-bottom: 2rem;
  }

  .hero .btn-primary {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  /* Patrones más pequeños en móvil */
  .braid-1,
  .braid-2,
  .braid-3 {
    width: clamp(80px, 15vw, 120px);
    height: clamp(80px, 15vw, 120px);
  }

  .floating-icon {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 55vh;
    padding: 3rem 0;
  }

  .hero-content {
    padding: 0 1rem;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
    margin-bottom: 0.8rem;
  }

  .hero p {
    font-size: clamp(0.9rem, 5vw, 1.2rem);
    margin-bottom: 1.5rem;
  }

  .hero .btn-primary {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* EFECTOS ADICIONALES PARA MÁS PROFESIONALISMO */

/* Efecto de brillo sutil */
.hero-content::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  animation: shine 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Partículas flotantes adicionales */
.hero-decoration::after {
  content: "✨";
  position: absolute;
  top: 25%;
  left: 75%;
  font-size: 1rem;
  opacity: 0.3;
  animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Mejora del contraste para mejor legibilidad */
.hero h1,
.hero p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Estados de hover mejorados */
.hero .btn-primary:active {
  transform: translateY(-3px) scale(1.02);
  transition: all 0.1s ease;
}

/* Gradiente de fondo alternativo más elegante */
.hero.elegant-variant {
  background: linear-gradient(135deg, #8b6f56 0%, #ab8e75 20%, #281f1c 40%, #3d2e28 60%, #c0a18b 80%, #e9c3b0 100%);
}

/* Versión con imagen de fondo (opcional) */
.hero.with-background {
  background: linear-gradient(
      135deg,
      rgba(139, 111, 86, 0.9) 0%,
      rgba(171, 142, 117, 0.8) 25%,
      rgba(40, 31, 28, 0.9) 50%,
      rgba(61, 46, 40, 0.8) 75%,
      rgba(192, 161, 139, 0.9) 100%
    ),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="braids" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0,10 Q10,0 20,10 Q10,20 0,10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23braids)"/></svg>');
  background-size: cover, 100px 100px;
  background-position: center, center;
}
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Mejora del contraste para mejor legibilidad */
.hero h1,
.hero p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Estados de hover mejorados */
.hero .btn-primary:active {
  transform: translateY(-3px) scale(1.02);
  transition: all 0.1s ease;
}

/* Gradiente de fondo alternativo más elegante */
.hero.elegant-variant {
  background: linear-gradient(135deg, #8b6f56 0%, #ab8e75 20%, #281f1c 40%, #3d2e28 60%, #c0a18b 80%, #e9c3b0 100%);
}

/* Versión con imagen de fondo (opcional) */
.hero.with-background {
  background: linear-gradient(
      135deg,
      rgba(139, 111, 86, 0.9) 0%,
      rgba(171, 142, 117, 0.8) 25%,
      rgba(40, 31, 28, 0.9) 50%,
      rgba(61, 46, 40, 0.8) 75%,
      rgba(192, 161, 139, 0.9) 100%
    ),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="braids" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0,10 Q10,0 20,10 Q10,20 0,10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23braids)"/></svg>');
  background-size: cover, 100px 100px;
  background-position: center, center;
}