/* Formulario de contacto.
   ---------------------------------------------------------------------------
   Una sola columna centrada, y no dos.

   La primera version ponia el titular y la entradilla a la izquierda y el
   formulario a la derecha. Con cuatro campos cuadraba; con ocho, la columna
   izquierda se queda en un tercio de la altura y el resto es un hueco negro de
   media pantalla al lado de un formulario largo. Centrado, la vista baja en
   linea recta —titulo, desafio, datos, boton— que es como se rellena un
   formulario.
   -------------------------------------------------------------------------- */

.sg-con {
	position: relative;
	padding-block: 5.5rem;
}

.sg-con__caja {
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.sg-con__intro {
	margin-bottom: 2.2rem;
}

.sg-con__titular {
	margin: 0 0 0.7rem;
	font-size: var(--wp--preset--font-size--seccion, 2.2rem);
	line-height: 1.15;
	text-wrap: balance;
}

.sg-con__guia {
	margin: 0;
	color: var(--wp--preset--color--suave, #93a7c1);
	font-size: var(--wp--preset--font-size--guia, 1.1rem);
	line-height: 1.6;
	max-width: 52ch;
	/* Reparte las lineas para que la ultima no quede colgando con dos
	   palabras, que es como salia: «...mas util sera / nuestra respuesta.» */
	text-wrap: pretty;
}

/* El parte de lo ocurrido: lo primero que hay que leer al volver de enviar. */
.sg-con__parte {
	margin: 0 0 1.4rem;
	padding: 0.9rem 1.15rem;
	border-radius: 10px;
	border: 1px solid;
	font-size: 0.95rem;
	line-height: 1.5;
}

.sg-con__parte--bien {
	border-color: var(--wp--preset--color--cian, #00C2E0);
	background: rgba(0, 194, 224, 0.09);
	color: var(--wp--preset--color--texto, #e9eff7);
}

.sg-con__parte--mal {
	border-color: #d97757;
	background: rgba(217, 119, 87, 0.1);
	color: var(--wp--preset--color--texto, #e9eff7);
}

/* ------------------------------------------------------------ el formulario */

.sg-con__form {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.sg-con__rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
}

.sg-con__campo {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	min-width: 0;
}

.sg-con__campo--ancho {
	grid-column: 1 / -1;
}

.sg-con__campo label {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--texto, #e9eff7);
}

.sg-con__req {
	color: var(--wp--preset--color--cian, #00C2E0);
	margin-inline-start: 0.1em;
}

/* Campos rellenos, no cajas con marco. Sobre un fondo casi negro un borde de
   un pixel es lo unico que se ve del campo, y ocho de ellos dibujan una reja;
   una superficie mas clara dice «aqui se escribe» sin trazar ninguna linea. */
.sg-con__campo input,
.sg-con__campo textarea,
.sg-con__campo select {
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--wp--preset--color--fondo-3, #151b25);
	color: var(--wp--preset--color--texto, #e9eff7);
	font: inherit;
	font-size: 0.98rem;
	line-height: 1.45;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sg-con__campo textarea {
	resize: vertical;
	min-height: 8.5rem;
}

.sg-con__campo input::placeholder,
.sg-con__campo textarea::placeholder {
	color: var(--wp--preset--color--tenue, #6a7d96);
}

.sg-con__campo input:hover,
.sg-con__campo textarea:hover,
.sg-con__campo select:hover {
	background: #1a2130;
}

.sg-con__campo input:focus,
.sg-con__campo textarea:focus,
.sg-con__campo select:focus {
	outline: none;
	border-color: var(--wp--preset--color--cian, #00C2E0);
	box-shadow: 0 0 0 3px rgba(0, 194, 224, 0.18);
}

/* El navegador marca en rojo los campos vacios desde el primer pintado si se
   usa `:invalid` a secas. `:user-invalid` espera a que el visitante haya
   intentado algo, que es cuando el aviso significa algo. */
.sg-con__campo input:user-invalid,
.sg-con__campo textarea:user-invalid,
.sg-con__campo select:user-invalid {
	border-color: #d97757;
}

/* --- el desplegable de país --- */

.sg-con__select {
	position: relative;
	display: block;
}

.sg-con__campo select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 2.6rem;
	cursor: pointer;
}

/* La flecha, dibujada con dos bordes girados 45°: sin SVG, sin fichero y
   heredando el color, así que no hay que mantener una version por tema. */
.sg-con__select::after {
	content: "";
	position: absolute;
	inset-inline-end: 1.1rem;
	top: calc(50% - 0.22rem);
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid var(--wp--preset--color--suave, #93a7c1);
	border-bottom: 2px solid var(--wp--preset--color--suave, #93a7c1);
	transform: rotate(45deg);
	pointer-events: none;
}

/* El menú desplegado lo pinta el sistema, no el CSS de la página: sin esto,
   en Windows sale una lista blanca con texto blanco. */
.sg-con__campo select option {
	background: var(--wp--preset--color--fondo-2, #10151d);
	color: var(--wp--preset--color--texto, #e9eff7);
}

/* --- la casilla de novedades --- */

.sg-con__casilla {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin-top: 0.3rem;
	color: var(--wp--preset--color--suave, #93a7c1);
	font-size: 0.88rem;
	line-height: 1.5;
	cursor: pointer;
}

.sg-con__casilla input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.1rem 0 0;
	/* `accent-color` deja la casilla NATIVA con el color de la marca. Una
	   casilla dibujada a mano se ve igual y pierde el estado indeterminado, el
	   soporte de lectores de pantalla y el comportamiento del teclado. */
	accent-color: var(--wp--preset--color--cian, #00C2E0);
	cursor: pointer;
}

.sg-con__casilla input:focus-visible {
	outline: 2px solid var(--wp--preset--color--cian, #00C2E0);
	outline-offset: 2px;
}

/* --- la nota legal --- */

.sg-con__legal {
	margin: 0;
	color: var(--wp--preset--color--tenue, #6a7d96);
	font-size: 0.8rem;
	line-height: 1.55;
}

.sg-con__legal a {
	color: var(--wp--preset--color--suave, #93a7c1);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sg-con__legal a:hover {
	color: var(--wp--preset--color--cian, #00C2E0);
}

/* El cepo para robots. Fuera de pantalla y no `display:none`: hay bots que
   saltan los campos ocultos con display, y muy pocos los que estan
   simplemente colocados donde no se ven. */
.sg-con__cepo {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- el pie --- */

.sg-con__pie {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	margin-top: 0.8rem;
	text-align: center;
}

.sg-con__boton {
	padding: 0.9rem 2.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--cian, #00C2E0);
	color: #04222a;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.sg-con__boton:hover {
	background: var(--wp--preset--color--cian-2, #4dd8ed);
}

.sg-con__boton:active {
	transform: translateY(1px);
}

.sg-con__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--texto, #e9eff7);
	outline-offset: 3px;
}

.sg-con__nota {
	margin: 0;
	max-width: 42ch;
	color: var(--wp--preset--color--tenue, #6a7d96);
	font-size: 0.82rem;
	line-height: 1.45;
}

/* ---------------------------------------------------------------- pantallas */

@media (max-width: 640px) {
	.sg-con {
		padding-block: 4rem;
	}
	/* Una columna: dos campos de menos de 9 rem por fila obligan a abreviar
	   («Compañ...») y a escribir dentro de una ranura. */
	.sg-con__rejilla {
		grid-template-columns: 1fr;
	}
	.sg-con__boton {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sg-con__campo input,
	.sg-con__campo textarea,
	.sg-con__campo select,
	.sg-con__boton {
		transition: none;
	}
	.sg-con__boton:active {
		transform: none;
	}
}