@import url('./variables.css');

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  padding-top: 70px;    /* deja espacio para la navbar */
  background-color: var(--bg-secondary);
}

/* 1) Zona hero ocupa todo el ancho y alto mínimo */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 2) aquí va tu GIF de fondo: */
  background: url("../../images/fondo.gif") center center / cover no-repeat;

  /* 3) añade algo de espaciado vertical si lo necesitas */
  padding: var(--spacing-3xl) 0;
}

/* 4) Deja tu panel con su bg-white sin tocarlo */
.hero-panel {
  position: relative;
  z-index: 1;
}

/* Botones redondeados */
.btn-rounded {
  border-radius: var(--radius-full);
}

/* Tarjetas de sección ya redondeadas por Bootstrap (rounded-3) */
.section h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  font-family: var(--font-display);
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--tracking-tight);
}

/* Personaliza enlaces nav */
.navbar .nav-link {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}
.navbar .nav-link:hover {
  color: var(--stormy-teal);
}

/* Ajuste footer */
footer {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}