/*
  Semana 7 · Formulario con PHP
  Archivo base incompleto.

  Instrucción:
  - No cambies los nombres de las clases.
  - Completa colores, fuentes, tamaños y detalles visuales usando tu paleta asignada.
  - Este archivo está incompleto a propósito.
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:Georgia, Arial, sans-serif /* escribe aquí tu fuente principal */;
  color:#1E1B4B /* color de texto */;
  background:#FAF5FF /* color de fondo */;
}

.encabezado {
  padding: 24px /* espacio interno */;
  text-align: center;
  color: #1E1B4B/* color del texto del encabezado */;
  background: #C084FC/* color principal de tu paleta */;
}

.encabezado h1 {
  margin: 8px 0;
  font-size: 32px /* tamaño del título principal */;
}

.etiqueta {
  margin: 0;
  font-size: 12px /* tamaño pequeño */;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:#7C3AED /* color de acento */;
}

.contenedor {
  width: min(1000px, 92%);
  margin: 32px auto;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
  align-items: start;
}

.tarjeta,
.ayuda {
  background:#FAF5FF /* fondo de tarjetas */;
  padding: 24px /* espacio interno */;
  border-radius: 12px /* esquinas */;
  box-shadow: 0 4px 6px rgba(30, 27, 75, 0.1)/* sombra */;
}

.paso {
  margin: 0 0 8px;
  font-weight: bold;
  color: #5324a5/* color de acento */;
}

.intro {
  color:#57535a /* color de texto secundario */;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  margin-top: 8px;
  font-weight: bold;
}

input,
select,
textarea,
button {
  width: 100%;
  padding: 12px;
  font: inherit;
  border-radius: 8px /* esquinas de campos */;
}

input,
select,
textarea {
  border: 1px solid #C084FC /* color de borde */;
  background:#FFFFFF /* fondo de campos */;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #C084FC/* color de enfoque suave */;
  border-color: #7C3AED /* color de enfoque */;
}

button,
.boton {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius:8px /* esquinas del botón */;
  color: #FAF5FF/* texto del botón */;
  background:#7C3AED /* color del botón */;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.boton:hover {
  background:#C084FC /* color hover del botón */;
}

.flujo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.flujo span {
  padding: 10px;
  text-align: center;
  border-radius:8px /* esquinas */;
  background:#C084FC /* color suave */;
  color:#1E1B4B /* color de texto */;
  font-weight: bold;
}

.nota,
.alerta {
  margin-top: 18px;
  padding: 14px;
  border-radius: 8px /* esquinas */;
  background: #FAF5FF/* color de aviso */;
  border-left: 6px solid #F59E0B/* color de acento */;
}

.resumen {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.dato {
  padding: 14px;
  border-radius:8px  /* esquinas */;
  background:#FAF5FF /* fondo de dato */;
  border: 1px solid #C084FC/* borde */;
}

.dato strong,
.dato span {
  display: block;
}

.dato span {
  margin-top: 4px;
  color: #1E1B4B/* color de texto del dato */;
}

@media (max-width: 800px) {
  .contenedor {
    grid-template-columns: 1fr;
  }

  .encabezado h1 {
    font-size: 24px /* tamaño en celular */;
  }
}