/* =========================================================================
   css/contactopagina2026.css - Pagina de contacto 2026 (contacto.php). Copia
   del aspecto de agencias/contacto.php: titulos, tarjeta del formulario
   (cabecera oscura y el formulario como agencias/css/secciones/cotizacion2026.css)
   y tarjeta de la sede (agencias/css/secciones/agencia2026.css). El texto gris
   de fondo esta en css/certificacion2026.css.
   ========================================================================= */

/* Rejilla: titulos | "Estamos aqui", formulario | sede, frase final */
.cont26-rejilla {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-areas:
		"intro aqui"
		"form sede"
		"cierre .";
	column-gap: 48px;
	padding: max(60px, 8vw) 0 50px;
}

.cont26-intro { grid-area: intro; }
.cont26-aqui { grid-area: aqui; display: flex; align-items: flex-end; }
.cont26-formulario { grid-area: form; }
.cont26-sede { grid-area: sede; }
.cont26-cierre { grid-area: cierre; }

/* estilos2.css da a h1/h2 la Anton, fondo y otros tamanos */
.cont26 .cont26-titulo,
.cont26 .cont26-subtitulo,
.cont26 .cont26-lema {
	margin: 0;
	padding: 0;
	background: none;
	font-family: var(--fuente-titulos);
	letter-spacing: 0;
	text-transform: uppercase;
}

.cont26 .cont26-titulo {
	color: #333f4f;
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1.15;
}

.cont26 .cont26-subtitulo {
	padding-bottom: 25px;
	color: #f4b333;
	font-size: 2.5rem;
	font-weight: normal;
	line-height: 1.2;
}

.cont26 .cont26-lema {
	margin-bottom: 15px;
	color: #f4b333;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: none;
}

.cont26-intro p {
	margin: 0 0 20px;
	line-height: 1.5;
}

/* "Estamos aqui / para ayudarte a avanzar." a la derecha, sobre la tarjeta de la sede */
.cont26 .cont26-aqui p {
	width: 100%;
	margin: 0 0 16px;
	font-size: 2rem;
	line-height: 1.05;
	text-align: right;
}

.cont26-amarillo { color: #f4b333; }
.cont26-gris { color: #e3e3e3; white-space: nowrap; }

/* ---------- Tarjeta del formulario ---------- */
.cont26-formulario,
.cont26-panel {
	overflow: hidden;
	border: 1px solid #e6e9ee;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.cont26-tarjeta-cabecera,
.cont26-panel-cabecera {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background-color: #232d3b;
}

.cont26-tarjeta-cabecera p {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	text-align: left !important;
}

.cont26-icono-cabecera {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(244, 179, 51, .15);
	color: #f4b333;
}

.cont26-tarjeta-cuerpo {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* El formulario de siempre: sin su cabecera azul (ya esta la de la tarjeta) */
.cont26-formulario .contacto_web_embebido {
	margin: 0;
}

.cont26-formulario #zonamasinfo {
	display: none;
}

.cont26-formulario .contacto_web_embebido form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Filas de www (.modulo_100 con dos .modulo_48) aplanadas: cada campo es una celda */
.cont26-formulario form > .modulo_100 { display: contents; }
.cont26-formulario form .modulo_48 { width: auto; float: none; }

.cont26-formulario form > .modulo_100:has(> textarea),
.cont26-formulario form > .modulo_100:has(> input.imput_texto),
.cont26-formulario form > .modulo_100:has(> #he_leido_e),
.cont26-formulario form #msgbox_e,
.cont26-formulario form .texto_lopd,
.cont26-formulario form .enviar_form {
	display: block;
	grid-column: 1 / -1;
	padding: 0 !important;
}

.cont26-formulario form label {
	display: block;
	margin-bottom: .3rem;
	color: #3d4654;
	font-size: .82rem;
	font-weight: 600;
}

.cont26-obligatorio {
	color: #dc3545;
	font-weight: 700;
}

.cont26-formulario .imput_texto {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: .55rem .8rem;
	border: 1px solid #d5d9e0;
	border-radius: .375rem;
	background-color: #fff;
	color: #333;
	font-family: var(--fuente-texto);
	font-size: .92rem;
}

.cont26-formulario textarea.imput_texto {
	height: 120px !important;
	resize: none;
}

.cont26-formulario .imput_texto:focus {
	outline: none;
	border-color: #f4b333;
	box-shadow: 0 0 0 .2rem rgba(244, 179, 51, .25);
}

.cont26-formulario #msgbox_e:empty { display: none; }

.cont26-formulario .messageboxerror {
	padding: .6rem .9rem;
	border: 1px solid #f1aeb5;
	border-radius: .375rem;
	background: #f8d7da;
	color: #58151c;
	font-size: .85rem;
	text-align: left;
}

/* Texto legal en caja gris con scroll propio */
.cont26-formulario .texto_lopd {
	height: auto;
	max-height: 150px;
	margin: 0;
	padding: .8rem 1rem;
	border: 1px solid #e6e9ee;
	border-radius: .5rem;
	background-color: #f5f6f8;
	font-size: 0; /* texto_lopd.php empieza con un BOM y un salto: sin esto, linea en blanco */
	scrollbar-width: thin;
}

.cont26-formulario .texto_lopd p {
	color: #5b6573;
	font-size: .75rem;
	line-height: 1.5;
	text-align: left !important;
}

.cont26-formulario .texto_lopd p:first-child { margin-top: 0; }

/* Consentimiento: casilla y texto en la misma linea */
.cont26-formulario form > .modulo_100:has(> #he_leido_e) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.cont26-formulario #he_leido_e {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: #344050;
	cursor: pointer;
}

.cont26-formulario label[for="he_leido_e"],
.cont26-formulario label[for="he_leido_e"] .t_80 {
	margin: 0;
	color: #5b6573;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.cont26-formulario label[for="he_leido_e"] a {
	color: #232d3b !important;
	font-weight: 600;
}

/* Boton amarillo a la derecha, con el avion de papel */
.cont26-formulario .enviar_form {
	display: flex !important;
	justify-content: flex-end;
}

.cont26-formulario .boton_enviar {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: .75rem 2.5rem !important;
	border: 0;
	border-radius: 6px;
	background-color: #ffb800;
	color: #fff;
	font-family: var(--fuente-texto);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .3px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.cont26-formulario .boton_enviar::before {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M22 2 2 10.5l7 2.7L18 6l-7.2 8.6v7.4l4.1-5.1 4.6 2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cont26-formulario .boton_enviar:hover,
.cont26-formulario .boton_enviar:focus-visible {
	background-color: #e5a500;
	transform: translateY(-1px);
}

/* ---------- Tarjeta de la sede ---------- */
.cont26-panel-etiqueta {
	color: #c9d0da;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cont26-panel-nombre {
	color: #f4b333;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.cont26 .cont26-panel-datos {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 1.5rem;
	list-style: none;
}

.cont26 .cont26-panel-datos li {
	display: flex;
	gap: 1rem;
	padding: 0;
	background: none;
	color: #3d4654;
	font-size: .92rem;
	line-height: 1.5;
	list-style: none;
	word-break: break-word;
}

.cont26-panel-icono {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #fdf3dd;
	color: #dd9d1f;
}

/* Iconos solidos de Font Awesome (location-dot, phone, envelope) en SVG: todos a la misma
   altura, como el .fa-solid de agencias (font-size .9rem en un circulo de 36px), algo mas grandes */
.cont26-panel-icono svg {
	display: block;
	width: auto;
	height: 16px;
}

.cont26-panel-titulo {
	color: #8a93a0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cont26-panel-datos a,
.cont26-panel-datos a:visited {
	color: #232d3b;
	font-weight: 600;
	text-decoration: none;
}

.cont26-panel-datos a:hover { color: #dd9d1f; }

/* Frase final, grande y en amarillo fino */
.cont26-cierre p {
	margin: 25px 0 0;
	color: #f4b333;
	font-size: 1.75rem;
	line-height: 1.2;
	text-align: left !important;
}

/* ---------- Tablet y movil: una columna ---------- */
@media (max-width: 991.98px) {
	.cont26-rejilla {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "intro" "form" "cierre" "aqui" "sede";
		padding: 30px 16px 40px;
	}

	.cont26 .cont26-aqui p { margin-top: 30px; text-align: left; }
	.cont26 .cont26-titulo { font-size: 2.2rem; }
	.cont26 .cont26-subtitulo { font-size: 1.6rem; padding-bottom: 15px; }
	.cont26 .cont26-lema { font-size: 1.25rem; }
	.cont26-cierre p { font-size: 1.4rem; }
}

@media (max-width: 575.98px) {
	.cont26-formulario .contacto_web_embebido form { grid-template-columns: 1fr; }
	.cont26-formulario .enviar_form { justify-content: stretch; }
	.cont26-formulario .boton_enviar { justify-content: center; width: 100%; }
	.cont26-gris { white-space: normal; }
}
