/**
 * Bloque de captación de la portada — [solis_contacto]
 *
 * Panel oscuro a sangre con el reclamo a la izquierda y una rejilla de seis
 * columnas a la derecha, que es lo que da la alineación del formulario:
 *
 *   pregunta (2) · opción (2) · opción (2)
 *   nombres  (3) · apellidos (3)
 *   teléfono (2) · correo   (2) · distrito (2)
 *   acuerdos (3) · botón    (3)
 */

.solis-contacto {
	--verde: #0B3B22;
	--verde-claro: #16543A;
	--naranja: #FA6407;
	--naranja-oscuro: #E05300;
	--enlace: #FFC24A;

	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px;
	border-radius: 26px;
	background: var(--verde);
	color: #fff;

	display: grid;
	grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
	gap: 46px;
	align-items: start;
}

/* Sin esto las pistas heredan su ancho mínimo de contenido (los campos de
   texto miden 20 caracteres por defecto) y el panel se sale de la pantalla. */
.solis-contacto__reclamo,
.solis-contacto__form,
.solis-contacto__campo,
.solis-contacto__opcion,
.solis-contacto__acuerdos,
.solis-contacto__accion { min-width: 0; }

.solis-contacto *,
.solis-contacto *::before,
.solis-contacto *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- reclamo */

.solis-contacto__reclamo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
}

.solis-contacto__icono {
	width: 76px;
	display: block;
}

.solis-contacto__icono svg {
	width: 100%;
	height: auto;
	display: block;
}

.solis-contacto__titulo {
	margin: 0 !important;
	font-size: clamp(30px, 3.2vw, 46px);
	line-height: 1.06;
	font-weight: 700;
	color: #fff !important;
	letter-spacing: -.01em;
}

.solis-contacto__bajada {
	grid-column: 2;
	margin: 22px 0 0;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;
	color: rgba(255, 255, 255, .88);
	max-width: 30ch;
}

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

.solis-contacto__form {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px 20px;
	align-items: start;
	margin: 0;
}

/* El honeypot de Solis_Leads no debe ocupar hueco en la rejilla. */
.solis-contacto__form .solis-hp {
	position: absolute !important;
	left: -9999px;
}

.solis-contacto__pregunta {
	grid-column: span 2;
	align-self: center;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .82);
}

/* ------------------------------------------------------------ opciones */

.solis-contacto__opcion {
	grid-column: span 2;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	min-height: 68px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 7px;
	cursor: pointer;
	transition: border-color .18s, background .18s;
}

.solis-contacto__opcion:hover { border-color: #fff; }

/* El radio real se queda accesible, pero lo dibujamos nosotros. */
.solis-contacto__opcion input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.solis-contacto__marca {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 5px var(--verde);
	transition: box-shadow .18s, background .18s;
}

.solis-contacto__opcion input:checked ~ .solis-contacto__marca {
	background: var(--naranja);
	box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--naranja);
}

.solis-contacto__opcion:has(input:checked) {
	border-color: var(--naranja);
	background: rgba(250, 100, 7, .1);
}

.solis-contacto__opcion input:focus-visible ~ .solis-contacto__marca {
	outline: 2px solid var(--enlace);
	outline-offset: 3px;
}

.solis-contacto__opcion-texto { display: block; line-height: 1.3; }

.solis-contacto__opcion-texto b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.solis-contacto__opcion-texto i {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .72);
}

/* -------------------------------------------------------------- campos */

.solis-contacto__campo {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.solis-contacto__campo--mitad { grid-column: span 3; }
.solis-contacto__campo--tercio { grid-column: span 2; }

.solis-contacto__campo input {
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 0 16px !important;
	border: 1px solid transparent !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: #111 !important;
	font-size: 15px;
	font-weight: 400;
	font-family: inherit;
	transition: border-color .18s, box-shadow .18s;
}

.solis-contacto__campo input::placeholder { color: #8D8D8D; }

.solis-contacto__campo input:focus {
	outline: 0;
	border-color: var(--naranja) !important;
	box-shadow: 0 0 0 3px rgba(250, 100, 7, .35);
}

.solis-contacto__campo input:user-invalid {
	border-color: #FF7A6B !important;
}

/* ------------------------------------------------------------ acuerdos */

.solis-contacto__acuerdos {
	grid-column: span 3;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.solis-contacto__check {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .88);
	cursor: pointer;
}

.solis-contacto__check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.solis-contacto__caja {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 3px;
	background: transparent;
	position: relative;
	transition: background .18s, border-color .18s;
}

.solis-contacto__check input:checked ~ .solis-contacto__caja {
	background: var(--naranja);
	border-color: var(--naranja);
}

/* La marca de verificación se dibuja con dos bordes girados. */
.solis-contacto__check input:checked ~ .solis-contacto__caja::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.solis-contacto__check input:focus-visible ~ .solis-contacto__caja {
	outline: 2px solid var(--enlace);
	outline-offset: 2px;
}

.solis-contacto__check a {
	color: var(--enlace) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.solis-contacto__check a:hover { color: #fff !important; }

/* --------------------------------------------------------------- botón */

.solis-contacto__accion {
	grid-column: span 3;
	align-self: center;
	display: flex;
	justify-content: flex-end;
}

.solis-contacto__enviar {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 17px 26px;
	border: 0;
	border-radius: 6px;
	background: var(--naranja);
	color: #fff !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .18s, transform .18s;
}

.solis-contacto__enviar:hover {
	background: var(--naranja-oscuro);
	transform: translateY(-1px);
}

.solis-contacto__enviar:disabled { opacity: .6; cursor: default; transform: none; }
.solis-contacto__enviar svg { width: 22px; height: 22px; flex: 0 0 auto; }

.solis-contacto__estado {
	grid-column: 1 / -1;
	margin: 0 !important;
	text-align: right;
	color: rgba(255, 255, 255, .9);
}

/* Mientras no hay nada que decir no debe reservar alto ni dejar hueco. */
.solis-contacto__estado:empty { display: none; }

.solis-contacto__estado.es-exito { color: #9BE7B4 !important; }
.solis-contacto__estado.es-error { color: #FFB3A7 !important; }

/* --------------------------------------------------------- adaptación */

@media (max-width: 1180px) {
	.solis-contacto { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 40px; }
	.solis-contacto__bajada { max-width: 46ch; }
}

@media (max-width: 880px) {
	.solis-contacto__pregunta { grid-column: 1 / -1; }
	.solis-contacto__opcion { grid-column: span 3; }
	.solis-contacto__campo--mitad,
	.solis-contacto__campo--tercio { grid-column: span 3; }
	.solis-contacto__acuerdos,
	.solis-contacto__accion { grid-column: 1 / -1; }
	.solis-contacto__accion { justify-content: flex-start; }
}

@media (max-width: 620px) {
	.solis-contacto {
		padding: 30px 22px;
		border-radius: 18px;
	}
	.solis-contacto__reclamo { grid-template-columns: 1fr; row-gap: 16px; }
	.solis-contacto__icono { width: 60px; }
	.solis-contacto__bajada { grid-column: 1; margin-top: 14px; }
	.solis-contacto__opcion,
	.solis-contacto__campo--mitad,
	.solis-contacto__campo--tercio { grid-column: 1 / -1; }
	.solis-contacto__enviar { width: 100%; justify-content: space-between; }
	.solis-contacto__estado { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.solis-contacto__enviar,
	.solis-contacto__opcion,
	.solis-contacto__caja,
	.solis-contacto__marca { transition: none; }
	.solis-contacto__enviar:hover { transform: none; }
}