/* 
 * styles.css
 * Archivo principal de estilos que contiene variables globales, 
 * reset de CSS y estilos básicos compartidos
 */

 @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Poppins:wght@300;400;500;600;700;800&display=swap");

 :root {
   --color-primary: #fd1818;
   --color-primary-dark: #fc1818;
   --color-text: #ffffff;
   --color-text-secondary: #c0c0c0;
   --color-background: #0f0f0f;
   --color-overlay: rgba(0, 0, 0, 0.5);
   --color-footer-background: #1a1a1a;
   --color-footer-hover: #e1160d;
   --color-success: #22f733;
   --color-gold: #ffd700;
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
   font-family: "Montserrat", sans-serif;
   background-color: var(--color-background);
   color: var(--color-text);
   line-height: 1.6;
 }
 
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }
 
 main {
   padding-top: 70px;
 }
 
 /* Animation Styles */
 .reveal {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.5s ease-out, transform 0.5s ease-out;
 }
 
 .reveal.visible {
   opacity: 1;
   transform: translateY(0);
 }