/* custom.css - estilos adicionales para Las Heras Sports */
:root {
  --primary-green: #22c55e;
  --dark-green: #16a34a;
  --accent-black: #1f2937;
  --light-gray: #f3f4f6;
  --white: #ffffff;
  --text-gray: #4b5563;
}

body {
  background-color: var(--light-gray);
}

/* Sombra personalizada para cards */
.card-shadow {
  box-shadow: 0 4px 24px 0 rgba(34, 197, 94, 0.08), 0 1.5px 6px 0 rgba(31, 41, 55, 0.08);
}

/* Animación de hover para botones principales */
.btn-main {
  transition: transform 0.15s cubic-bezier(.4,0,.2,1), box-shadow 0.15s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.btn-main:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 24px 0 rgba(34, 197, 94, 0.15);
}

/* Fix para botones dentro de cards - evita conflictos de posicionamiento */
.card .btn-main {
  position: static !important;
  z-index: 10;
}

.card .btn-main:hover {
  transform: scale(1.02) !important; /* Efecto más sutil para evitar overflow */
  box-shadow: 0 2px 12px 0 rgba(34, 197, 94, 0.15) !important;
}

/* WhatsApp botón flotante (opcional) */
.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 50;
  background: var(--primary-green);
  color: var(--white);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(34,197,94,0.25);
  cursor: pointer;
  transition: background 0.2s;
}
.whatsapp-float:hover {
  background: var(--dark-green);
}

/* Navbar mejorado */
.navbar-hidden {
  transform: translateY(-100%) !important;
}

.navbar-visible {
  transform: translateY(0) !important;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
}

.mobile-menu.active {
  display: block;
}

.mobile-menu a {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  text-decoration: none;
  transition: background-color 0.2s;
}

.mobile-menu a:hover {
  background-color: #f9fafb;
  color: #22c55e;
}

.mobile-menu a:last-child {
  border-bottom: none;
}

/* Gradientes personalizados */
.gradient-hero {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
}

.gradient-section {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* Sombras de texto mejoradas */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-strong {
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Efectos de texto */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Botón con efecto de onda */
.btn-ripple {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

.btn-ripple:hover::before {
  width: 300px;
  height: 300px;
}

.btn-ripple span,
.btn-ripple svg {
  position: relative;
  z-index: 2;
}

/* Animación flotante para cards */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Efecto de brillo en hover */
.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
  pointer-events: none;
  z-index: 1;
}

.shine-effect:hover::after {
  left: 100%;
}

/* Asegurar que el contenido de la card esté por encima del shine effect */
.shine-effect > * {
  position: relative;
  z-index: 2;
}

/* Pulso para elementos destacados */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}

.pulse-green {
  animation: pulse-green 2s infinite;
}

/* Patrones de fondo */
.pattern-dots {
  background-image: radial-gradient(circle, rgba(34, 197, 94, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  h1 {
    font-size: 2rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  h3 {
    font-size: 1.25rem !important;
  }
}

/* Hero Carousel */
.hero-slider { position: absolute; inset: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 800ms ease; }
.hero-slide.active { opacity: 1; }
.hero-control { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.35); color: #fff; border-radius: 9999px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 20; }
.hero-control:hover { background: rgba(0,0,0,0.5); }
.hero-control.prev { left: 16px; }
.hero-control.next { right: 16px; }
.hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }
.hero-dots button { width: 10px; height: 10px; border-radius: 9999px; background: rgba(255,255,255,0.5); border: none; cursor: pointer; }
.hero-dots button.active { background: #fff; }

/* Ajustes responsivos para evitar superposición de controles con CTAs en mobile */
@media (max-width: 640px) {
  /* En mobile: colocar controles MÁS ABAJO (debajo de los CTAs) */
  .hero-control { 
    top: auto;          /* anulamos posición original */
    bottom: 120px;      /* espacio suficiente sobre los dots y scroll indicator */
    transform: none;    /* quitamos translateY que dependía de top */
    width: 36px; 
    height: 36px; 
  }
  .hero-control.prev { left: 8px; }
  .hero-control.next { right: 8px; }
}
@media (max-width: 480px) {
  .hero-control { bottom: 110px; }
  /* Alternativa (descomentar si querés ocultarlas en pantallas ultra chicas): */
  /* .hero-control { display:none; } */
}