/**
 * Piqueras Training - Estilos de la Landing
 * Version: 2.0.1
 * 
 * Este archivo contiene todos los estilos personalizados de la landing page.
 * Compatible con tema hijo Astra.
 */

/* ===== HEADER/NAVEGACIÓN ===== */

/* Header fijo anclado arriba - NUNCA se solapa con el contenido */
header[role="banner"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  height: 64px; /* Altura del header - 16px de padding arriba y abajo */
}

/* Contenedor del header también negro */
header[role="banner"] > div {
  background-color: #000000 !important;
}

/* CRÍTICO: Reservar espacio arriba del body para el header fijo */
body {
  padding-top: 64px !important; /* Misma altura que el header */
}

/* Asegurar que el contenido principal esté por debajo */
main {
  position: relative;
  z-index: 1;
}

/* Menú móvil con fondo negro y z-index aún mayor */
#mobile-menu {
  z-index: 10000 !important;
  background-color: rgba(0, 0, 0, 0.98) !important;
}

/* ===== ESTILOS GLOBALES ===== */

/* Eliminar subrayado de todos los enlaces */
a {
  text-decoration: none !important;
  color: inherit;
}

a:visited,
a:active,
a:focus {
  color: inherit;
}

/* Ocultar scrollbar pero mantener funcionalidad de scroll */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* ===== SCROLLBARS PERSONALIZADAS ===== */

/* Ocultar scrollbars en elementos con clase .scrollbar-hide */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== ANIMACIONES DE HORARIOS ===== */

/* Animación hacia la DERECHA (Mañanas) */
@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}

/* Animación hacia la IZQUIERDA (Tardes) */
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
}

/* Aplicar animación a la fila de MAÑANAS */
.horarios-manana {
  animation: slideRight 2s ease-in-out infinite alternate;
}

/* Aplicar animación a la fila de TARDES */
.horarios-tarde {
  animation: slideLeft 2s ease-in-out infinite alternate;
}

/* Pausar animación al hacer hover */
.horarios-manana:hover,
.horarios-tarde:hover {
  animation-play-state: paused;
}

/* ===== OPTIMIZACIÓN DE PERFORMANCE ===== */

/* Forzar aceleración por hardware en elementos animados */
.animate-on-scroll {
  will-change: opacity, transform;
}

/* ===== HERO BACKGROUND ===== */

/* Contenedor de la imagen de fondo del hero */
.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Imagen de fondo con efecto parallax sutil */
.hero-background-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Imagen por defecto - cambiar URL según sea necesario */
  background-image: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920&q=80');
}

/* Overlay oscuro sobre la imagen para mejorar legibilidad */
.hero-background-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.7) 0%,
    rgba(10, 10, 10, 0.8) 50%,
    rgba(10, 10, 10, 0.95) 100%
  );
}

/* ===== ACCESIBILIDAD ===== */

/* Skip link - visible solo al recibir foco */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== FORMULARIO FLUENT FORMS ===== */

/* Estilos específicos para el wrapper del formulario */
.piqueras-form-wrapper {
  /* Añade estilos adicionales para el formulario si es necesario */
}

/* ===== RESPONSIVE OPTIMIZATIONS ===== */

/* Mejoras para dispositivos móviles */
@media (max-width: 768px) {
  /* Asegurar que las animaciones no afecten performance en móvil */
  .animate-on-scroll {
    will-change: auto;
  }
  
  /* Reducir intensidad de animaciones en móvil */
  .horarios-manana,
  .horarios-tarde {
    animation-duration: 3s;
  }
}

/* ===== FONDO NARANJA/AMARILLO PARA CARDS DEL MÉTODO ===== */

/* Cards del método con fondo degradado naranja/amarillo */
#method .method-card {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(251, 146, 60, 0.15) 100%) !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

/* Más intenso en desktop para verse mejor sobre la imagen de fondo */
@media (min-width: 1024px) {
  #method .method-card {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(251, 146, 60, 0.25) 100%) !important;
    border-color: rgba(234, 179, 8, 0.5) !important;
  }
}

#method .method-card:hover {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(251, 146, 60, 0.25) 100%) !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
}

/* Hover aún más intenso en desktop */
@media (min-width: 1024px) {
  #method .method-card:hover {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.35) 0%, rgba(251, 146, 60, 0.35) 100%) !important;
    border-color: rgba(234, 179, 8, 0.7) !important;
  }
}

/* Iconos del método */
#method .method-icon {
  background: linear-gradient(135deg, #eab308 0%, #fb923c 100%) !important;
  color: #000 !important;
}

#method .method-card:hover .method-icon {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* ===== PRINT STYLES ===== */

/* Ocultar elementos innecesarios al imprimir */
@media print {
  header,
  .mobile-menu,
  .animate-on-scroll,
  #mobile-menu-btn {
    display: none !important;
  }
  
  /* Asegurar que el contenido sea legible al imprimir */
  body {
    background: white !important;
    color: black !important;
  }
}