/* ASCII only */
/* Formulario de contacto: ancho maximo y centrado */
.contact-form { 
  max-width: 640px;   /* limita el ancho del formulario */
  margin: 0 auto;     /* centra horizontalmente */
}

/* Campo generico: bloque y separacion vertical */
.field { 
  display: block; 
  margin-bottom: 12px; /* espacio entre campos */
}

/* Etiqueta del campo (texto encima del input) */
.field span { 
  display: block; 
  margin-bottom: 6px;  /* separacion etiqueta-input */
  font-size: 14px; 
  color: #333; 
}

/* Inputs y textarea: estilo base uniforme */
input[type="text"], 
input[type="email"], 
textarea {
  width: 100%;               /* ocupan todo el ancho del contenedor */
  padding: 10px 12px;        /* espacio interno para mejor usabilidad */
  border: 1px solid #d9d9d9; /* borde gris claro */
  border-radius: 8px;        /* esquinas redondeadas */
  outline: none;             /* quita contorno azul del navegador */
}

/* Estado de enfoque: realce accesible al enfocar */
input:focus, 
textarea:focus { 
  border-color: #3969b5;                /* resalta el borde en azul */
  box-shadow: 0 0 0 3px rgba(57,105,181,.12); /* halo sutil alrededor */
}