/* ===== TOKENS ===== */
:root{
  --brand-bg: #eceff1;
  --brand-bg2:#f7f9fb;
  --text-strong:#111;
  --text-base:#222;
  --text-muted:#666;

  /* Botão acessível (contraste 8:1 com #fff) */
  --btn-bg:#0055cc;
  --btn-bg-hover:#003f99;
  --btn-text:#ffffff;
  --focus-ring:#111; /* anel de foco visível */
}

/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

/* ===== LAYOUT ===== */
body{
  background:linear-gradient(135deg,var(--brand-bg),var(--brand-bg2));
  color:var(--text-base);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.main-container{
  text-align:center;
  padding:20px;
}

h1{
  font-size:2rem;
  font-weight:600;
  margin-bottom:50px;
  color:var(--text-strong);
}

/* ===== OPTIONS ===== */
.options{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:50px;
}

.card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  width:380px;
  padding:22px;
  transition:transform .3s ease, box-shadow .3s ease;
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

/* ===== IMAGENS ===== */
.card img{
  width:100%;
  aspect-ratio:16/9; /* mantém 1920x1080 */
  object-fit:cover;
  border-radius:14px;
  margin-bottom:18px;
  transition:transform .4s ease;
}
.card:hover img{ transform:scale(1.03); }

/* ===== TEXTOS ===== */
.card h2{
  font-size:1.3rem;
  margin-bottom:10px;
  color:var(--text-strong);
}
.card p{
  font-size:.95rem;
  color:var(--text-muted);
  margin-bottom:20px;
}

/* ===== BOTÕES (Acessíveis) ===== */
.btn{
  display:inline-block;
  background:var(--btn-bg);
  color:var(--btn-text);
  text-decoration:none;
  padding:12px 26px;
  border-radius:10px;
  font-weight:500;
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.btn:hover{
  background:var(--btn-bg-hover);
  transform:scale(1.06);
}
.btn:active{
  transform:scale(0.99);
}

/* Foco visível para acessibilidade */
.btn:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}

/* ===== RESPONSIVO ===== */
@media (max-width:768px){
  .options{ flex-direction:column; gap:35px; }
  .card{ width:90%; margin:0 auto; }
  .card img{ aspect-ratio:16/9; }
}

/* ===== Preferências de movimento ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .card:hover, .card:hover img, .btn:hover{ transform:none !important; }
}