* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #002776;
}

.font-sport {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
}

/* Three-color Brazil strip */
.brasil-strip {
  height: 6px;
  background: linear-gradient(90deg, #009739 33.33%, #FEDD00 33.33% 66.66%, #002776 66.66%);
}

/* Sticker card frame (double border: yellow + green) */
.sticker-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px #FEDD00,
    0 0 0 8px #009739,
    0 12px 40px rgba(0, 0, 0, 0.6);
}

/* Photo placeholder when image is missing */
.photo-placeholder {
  aspect-ratio: 1;
  background: linear-gradient(160deg, #001a5c 0%, #002776 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
}

/* Countdown number display */
.countdown-number {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: #FEDD00;
}

.countdown-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

/* Convocado list card */
.convocado-card {
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #009739;
  transition: transform 0.15s, box-shadow 0.15s, border-left-color 0.15s;
}

.convocado-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border-left-color: #FEDD00;
}

/* Destaque card (últimas convocações) */
.destaque-card {
  background: linear-gradient(135deg, #002776, #003dab);
  border: 2px solid rgba(254, 221, 0, 0.5);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.destaque-card:hover {
  transform: translateY(-2px);
  border-color: #FEDD00;
  box-shadow: 0 6px 20px rgba(254, 221, 0, 0.2);
}

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #009739;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(0, 151, 57, 0.4);
}

.btn-primary:hover {
  background: #007a2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 151, 57, 0.5);
}

/* Secondary button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: #FEDD00;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid #FEDD00;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.btn-secondary:hover {
  background: #FEDD00;
  color: #002776;
  transform: translateY(-2px);
}

/* Form input */
.form-input {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 1rem;
  color: #1f2937;
  background: white;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: 'Inter', sans-serif;
}

.form-input:focus {
  border-color: #009739;
  box-shadow: 0 0 0 3px rgba(0, 151, 57, 0.15);
}

/* Page background */
.page-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #002776 0%, #001f5e 50%, #000d2e 100%);
}