@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Permanent+Marker&display=swap');

:root{
  --black: #0c0c0d;
  --charcoal: #1a1817;
  --charcoal-light: #24211f;
  --cream: #f2ead9;
  --cream-dim: #d8cdb4;
  --orange: #e0602a;
  --orange-deep: #b8451c;
  --gold: #d1a138;
  --error: #e05252;
  --ok: #4caf7d;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Oswald', sans-serif;
  background: var(--black);
  color: var(--cream);
  min-height:100vh;
  padding: 6vw 4vw;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(224,96,42,0.08) 0, transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(209,161,56,0.07) 0, transparent 45%);
}

.wrap{
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.form-header{
  text-align:center;
  margin-bottom: 28px;
}
.form-header img{
  height: 72px;
  width:auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 8px rgba(224,96,42,0.25));
}
.eyebrow{
  font-family:'Oswald'; font-weight:600; letter-spacing:4px; font-size:11px;
  color: var(--gold); text-transform:uppercase;
}
.form-title{
  font-family:'Bebas Neue'; font-size: 34px; letter-spacing:1px;
  color: var(--cream); line-height:1;
  margin-top: 4px;
}
.form-title span{ color: var(--orange); }
.form-sub{
  font-size: 13px; color: var(--cream-dim); margin-top: 8px;
  max-width: 440px; margin-left:auto; margin-right:auto; line-height:1.5;
}

/* ---------- Card ---------- */
.card{
  background: var(--charcoal);
  border: 1px solid rgba(224,96,42,0.35);
  border-radius: 4px;
  padding: 28px 24px;
  position: relative;
}
.card::before{
  content:"";
  position:absolute; top:-1px; left:24px; right:24px; height:3px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px);
}

.field{
  margin-bottom: 20px;
}
.field label{
  display:block;
  font-family:'Oswald'; font-weight:600; font-size:11.5px; letter-spacing:1.5px;
  text-transform: uppercase; color: var(--cream-dim);
  margin-bottom: 6px;
}
.field label .req{ color: var(--orange); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field textarea{
  width:100%;
  background: var(--black);
  border: 1px solid #3a3532;
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--cream);
  font-family:'Oswald'; font-size:14.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color: #6b645c; }

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,96,42,0.15);
}

.field textarea{ resize: vertical; min-height: 90px; }

.field.has-error input,
.field.has-error textarea,
.field.has-error select{
  border-color: var(--error);
}
.field-error{
  display:none;
  font-size: 11.5px; color: var(--error);
  margin-top: 5px;
}
.field.has-error .field-error{ display:block; }

/* ---------- Row layout (curso + grupo) ---------- */
.field-row{
  display:flex; gap: 14px;
}
.field-row .field{ flex:1; }

/* ---------- Select ---------- */
.field select{
  width:100%;
  background: var(--black);
  border: 1px solid #3a3532;
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--cream);
  font-family:'Oswald'; font-size:14.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23d1a138' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.field select:focus{
  outline:none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,96,42,0.15);
}
.field select option{
  background: var(--black);
  color: var(--cream);
}

@media (max-width: 480px){
  .field-row{ flex-direction:column; gap:0; }
}

/* ---------- Instrumento choice ---------- */
.instrumento-choice{
  display:flex; gap: 12px;
}
.instrumento-option{
  flex:1;
  position:relative;
}
.instrumento-option input{
  position:absolute; opacity:0; width:0; height:0;
}
.instrumento-option label{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border: 1px solid #3a3532;
  border-radius: 3px;
  padding: 14px 10px;
  text-align:center;
  font-family:'Bebas Neue'; font-size:17px; letter-spacing:1px;
  color: var(--cream-dim);
  cursor:pointer;
  background: var(--black);
  transition: all 0.15s ease;
  text-transform:uppercase;
  margin:0;
}
.instrumento-option input:checked + label{
  border-color: var(--orange);
  background: rgba(224,96,42,0.12);
  color: var(--cream);
}
.instrumento-option input:focus-visible + label{
  box-shadow: 0 0 0 3px rgba(224,96,42,0.25);
}
.pick-icon{
  width:9px; height:9px; background: var(--orange);
  border-radius: 1px 1px 1px 60%;
  transform: rotate(45deg);
  flex-shrink:0;
  opacity:0;
}
.instrumento-option input:checked + label .pick-icon{ opacity:1; }

/* ---------- Submit ---------- */
.submit-btn{
  width:100%;
  background: var(--orange);
  color: var(--black);
  border: none;
  border-radius: 3px;
  padding: 15px;
  font-family:'Bebas Neue'; font-size: 19px; letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  margin-top: 6px;
}
.submit-btn:hover{ background: #ef6f39; }
.submit-btn:active{ transform: scale(0.99); }
.submit-btn:disabled{
  background: #6b5a4c; cursor:not-allowed;
}

/* ---------- Feedback banner ---------- */
.form-feedback{
  display:none;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 3px;
  font-size: 13.5px;
  line-height:1.5;
}
.form-feedback.show{ display:block; }
.form-feedback.ok{
  background: rgba(76,175,125,0.12);
  border: 1px solid var(--ok);
  color: #a9e0c4;
}
.form-feedback.error{
  background: rgba(224,82,82,0.12);
  border: 1px solid var(--error);
  color: #f2b6b6;
}

/* ---------- Success state ---------- */
.success-state{
  display:none;
  text-align:center;
  padding: 20px 0;
}
.success-state.show{ display:block; }
.success-state .marker-note{
  font-family:'Permanent Marker'; color: var(--gold); font-size: 20px;
  display:block; margin-bottom: 10px; transform: rotate(-1deg);
}
.success-state p{
  color: var(--cream-dim); font-size: 13.5px; line-height:1.6;
}

.form-footer{
  text-align:center; margin-top:22px;
  font-size: 11px; letter-spacing:1px; color: var(--cream-dim);
  text-transform:uppercase;
}
.form-footer b{ color: var(--orange); }

@media (max-width: 480px){
  .form-title{ font-size: 28px; }
  .instrumento-choice{ flex-direction:column; }
}