/* 
 * GLOBAL STYLES
 * Estilos globales para Todo Versus
 * Incluye configuraciones que afectan a todo el sitio
 */

/* ===== RESET CSS ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Evita scroll horizontal */
}

/* Variables globales de Todo Versus */
:root {
  --primary-color: #ED2F59;
  --secondary-color: #F8AD56;
  --accent-color: #FFE85A;
  --text-dark: #333333;
  --text-light: #ffffff;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

/* Comportamiento de scroll suave para toda la página */
html {
    scroll-behavior: smooth;
  }
  
  /* Ajuste para el navbar fijo */
  body {
    padding: 0; /* Sin padding */
    margin: 0; /* Sin margin */
    transition: height 0.3s ease; /* Eliminar saltos bruscos en cambios de altura */
  }
  
  /* Divisor de sección - no usado pero mantenido para referencia futura */
  .section-divider {
    display: none;
  }
  
  /* Clase para añadir animación a elementos cuando entran en el viewport */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Transiciones generales */
  a, button, .btn {
    transition: all 0.3s ease;
  }
  
  /* Animación para elementos al hacer hover */
  .hover-scale {
    transition: transform 0.3s ease;
  }
  
  .hover-scale:hover {
    transform: scale(1.05);
  }

  /* ===== CONTENEDORES PRINCIPALES ===== */
  main {
    margin: 0;
    padding: 0;
    width: 100%;
  }