/* ==========================================================================
   Modalidades — avulso vs. contrato mensal
   ========================================================================== */
.modes{background:var(--paper-dim);}
.modes-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:780px){.modes-grid{grid-template-columns:1fr;}}

.mode-card{
  background:var(--paper); border:1.5px solid var(--line);
  padding:36px 32px; border-radius:4px;
  transition:border-color 0.3s ease, transform 0.3s ease;
}
.mode-card:hover{border-color:var(--route); transform:translateY(-4px);}
.mode-card .mode-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--route-deep);
}
.mode-card h3{font-size:27px; text-transform:uppercase; margin:12px 0 14px;}
.mode-card p{color:var(--steel); font-size:15px; margin-bottom:18px;}
.mode-card ul{display:flex; flex-direction:column; gap:9px;}
.mode-card li{
  font-size:14px; color:var(--ink); display:flex; gap:9px; align-items:flex-start;
}
.mode-card li::before{
  content:"—"; color:var(--route-deep); flex:none;
}