/* ====================== */
/* VARIABLES GLOBALES     */
/* ====================== */
:root {
  --color-primary: #00205c;       /* Color principal (azul oscuro) */
  --color-secondary: #ffa300;     /* Color secundario (amarillo anaranjado) */
  --color-white: #ffffff;         /* Blanco para fondos o textos */
  --color-dark: #0a0a0a;          /* Color oscuro para textos principales */
  --spacing: 16px;                /* Espaciado base utilizado en paddings y márgenes */
  --max-width: 1200px;            /* Ancho máximo para centrar contenidos */
}

/* ====================== */
/* RESET DE ESTILOS       */
/* ====================== */
* {
  margin: 0;                      /* Elimina márgenes por defecto */
  padding: 0;                     /* Elimina rellenos por defecto */
  box-sizing: border-box;        /* Incluye paddings y bordes dentro del ancho/alto total */
}

/* ====================== */
/* ESTILOS DEL BODY       */
/* ====================== */
body {
  font-family: Arial, sans-serif;              /* Tipografía base */
  color: var(--color-dark);                    /* Color del texto principal */
  background: var(--color-white);              /* Fondo blanco */
  line-height: 1.6;                             /* Altura de línea para mejor legibilidad */
}

/* ====================== */
/* CONTENEDOR GENERAL     */
/* ====================== */
.container {
  width: 90%;                                   /* Anchura relativa al viewport */
  max-width: var(--max-width);                  /* Limita el ancho máximo */
  margin: 0 auto;                               /* Centra horizontalmente */
}

/* ====================== */
/* BOTÓN ESTÁNDAR         */
/* ====================== */
.btn {
  display: inline-block;                        /* Hace que el botón fluya en línea */
  padding: var(--spacing);                      /* Espaciado interno */
  border-radius: 8px;                           /* Bordes redondeados */
  background: linear-gradient(90deg, #ff3f3f 0%, #ff9f3f 100%); /* Fondo degradado */
  color: var(--color-white);                    /* Color del texto */
  text-decoration: none;                        /* Sin subrayado */
  font-weight: bold;                            /* Texto en negrita */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animaciones suaves */
}

/* ====================== */
/* EFECTO HOVER EN BOTÓN  */
/* ====================== */
.btn:hover {
  transform: translateY(-2px);                  /* Eleva ligeramente el botón */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);       /* Sombra al hacer hover */
}

/* ====================== */
/* ÍCONO DENTRO DEL BOTÓN */
/* ====================== */
.btn i {
  margin-right: 8px;                            /* Separación entre ícono y texto */
  font-size: 1.1em;                              /* Tamaño del ícono ligeramente mayor */
  vertical-align: middle;                       /* Alineación vertical centrada */
}