/*Autor: Jesus Gabriel Resendiz Del Valle*/
/*Fecha: 12/10/2026*/
/* Estilos compartidos por los encabezados h1 y h5. */
h1, h5 {

	color: red;

	font-size: 30px;

	font-family: "impact";
}

/* Estilos para los encabezados de nivel h3. */
h3 {
	/* Pinta el texto de color azul marino. */
	color: navy;
	/* Hace que el texto sea grande, con un tamaño de 45 píxeles. */
	font-size: 45px;
	/* Crea un borde de 2 píxeles de ancho y estilo sólido. */
	border: 2px solid;
	/* Establece el color rojo del borde. */
	border-color: red;
	/* Coloca un fondo amarillo detrás del encabezado. */
	background-color: yellow;
	/* Redondea las esquinas del borde 10 píxeles. */
	border-radius: 10px;
	/* Usa la tipografía Raleway para este encabezado. */
	font-family: "Raleway";
}


textarea,
input[type=text],
input[type=email]
 {
	/* Coloca un fondo azul en los controles del formulario. */
	background-color: gray;
	/* Añade un borde sólido de 1 píxel. */
	border: 1px solid;
	/* Redondea las esquinas de los controles 5 píxeles. */
	border-radius: 5px;
	/* Muestra el texto escrito en color rojo. */
	color: white;
}

/* Tipografía especial para el campo donde se escribe el nombre. */
input[type=text] {
	font-family: "Georgia";
}

/* Tipografía especial para el campo donde se escribe el correo. */
input[type=email] {
	font-family: "Verdana";
}

/* Tipografía especial para el campo donde se indica el tipo de información. */
textarea {
	font-family: "Courier New";
}

/* Aplica la misma tipografía del campo de nombre a su texto descriptivo. */
.texto-nombre {
	font-family: "Georgia";
}

/* Aplica la misma tipografía del campo de correo a su texto descriptivo. */
.texto-correo {
	font-family: "Verdana";
}

/* Aplica la misma tipografía del campo de información a su texto descriptivo. */
.texto-info {
	font-family: "Courier New";
}

/* Estilos específicos para el botón de envío de los formularios. */
input[type=submit] {
	/* Coloca un fondo naranja en el botón. */
	background-color: orange;
	/* Redondea las esquinas del botón 5 píxeles. */
	border-radius: 5px;
	/* Aumenta el texto del botón a 25 píxeles. */
	font-size: 25px;
	/* Usa Raleway para diferenciar el texto del botón. */
	font-family: "Raleway";
}

/* Estilos generales aplicados a todo el contenido de la página. */
body {
	/* Define un tamaño de texto base de 15 píxeles. */
	font-size: 15px;
	/* Establece el color rojo como color de texto general. */
	color: red;
	/* Primera tipografía: Lato para el texto general de la página. */
	font-family: "Lato";
}

/* Ajustes responsivos: los bordes y el relleno se incluyen en el ancho. */
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; }
.contenedor-formulario { width: 100%; max-width: 900px; margin: 0 auto; }
.encabezado-formulario, .enlace-regreso { text-align: center; }
h3 { padding: 12px; overflow-wrap: anywhere; }
form { width: 100%; max-width: 650px; margin: 0 auto; }
.tabla-formulario { width: 100%; border-collapse: collapse; }
.tabla-formulario td { padding: 10px; vertical-align: top; }
.tabla-formulario td:first-child { width: 38%; }
input[type=text], input[type=email], textarea {
    width: 100%; min-width: 0; padding: 10px; font-size: 16px;
}
textarea { resize: vertical; }
input[type=submit] { max-width: 100%; padding: 10px 24px; cursor: pointer; }
.acciones-formulario { text-align: center; }
.enlace-regreso a { overflow-wrap: anywhere; }

/* Tabletas y pantallas medianas. */
@media (min-width: 481px) and (max-width: 1020px) {
    body { padding: 20px; }
    h1, h5 { font-size: 28px; }
    h3 { font-size: 34px; }
}

/* Teléfonos: campos apilados y encabezados más pequeños. */
@media (max-width: 480px) {
    body { padding: 12px; }
    h1, h5 { font-size: 24px; }
    h3 { font-size: 24px; padding: 10px; }
    .tabla-formulario, .tabla-formulario tbody, .tabla-formulario tr,
    .tabla-formulario td { display: block; width: 100%; }
    .tabla-formulario td:first-child { width: 100%; }
    .tabla-formulario td { padding: 6px 0; }
    .tabla-formulario tr { margin-bottom: 14px; }
    input[type=submit] { width: 100%; font-size: 22px; }
}