:root{
  --accent:#e11d48;
  --primary:#000;
  --card-bg: #ffffff;
  --bg-dark: #0f1724;
}

/* Body */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #071124 0%, #0d1724 100%);
  color:#111;
  min-height:100vh;
}

/* Form wrapper */
.form-wrapper{
  width:100%;
  max-width:520px;
  border-radius:12px;
  padding:14px;
  margin:16px;
}

/* logo */
.logo{
  max-height:56px;
}

/* Step visibility */
.step { display: none; }
.step.active { display: block; }

/* Cards contacto */
.contact-methods { gap: .5rem; }
.card-option{
  border-radius:8px;
  border:1px solid #e9ecef;
  background:#f8f9fa;
  flex:1 1 0;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  padding:.5rem .75rem;
}
.card-option i { color: var(--accent); }
.card-option:hover{ transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.card-option.selected{ background: var(--primary); color:#fff; border-color:transparent; }
.card-option.selected i{ color: #fff; }

#problematicaSelectContainer,
#problematicaTextContainer {
  transition: all .25s ease;
}


/* Small screens — compact spacing */
@media (max-width: 576px){
  .form-wrapper{ padding:12px; margin:8px; }
  .logo{ max-height:46px; }
  .card-option{ padding:.45rem .5rem; font-size:.88rem; }
  #nextBtn, #agendaBtn { padding:.5rem .6rem; font-size:.92rem; }
}