/* =========================================================================
   css/secciones/contacto2026.css - Seccion "Contacta con nosotros" 2026
   (secciones/contacto2026.php). Todo bajo .contacto26.
   ========================================================================= */

/* Fondo de edificios de siempre, con un velo oscuro para que se lea el texto.
   Hasta 1366px movil.css quita las imagenes de fondo de los <section> (a
   proposito): queda el color oscuro de respaldo y el texto se sigue leyendo. */
.contacto26 {
	position: relative;
	background: linear-gradient(rgba(26, 30, 38, 0.72), rgba(26, 30, 38, 0.72)), url('../../img/formulario-contacto.png') center / cover no-repeat;
	background-color: #232d3b;
	color: #fff;
}

.contacto26-caja {
	max-width: 960px;
}

.contacto26-titulo {
	font-weight: 800;
	font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem) !important;   /* principal.css fuerza los h2 */
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

.contacto26-subtitulo {
	color: var(--sr-yellow, #ffb800);
	font-weight: 600;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

/* ---------- Tarjeta del formulario ---------- */
/* Sin tarjeta: el formulario va directamente sobre el fondo oscuro de la seccion */
.contacto26-form {
	color: #fff;
}

/* Mensajes de error en un rojo mas claro, que se lea sobre el fondo oscuro
   (tambien el texto de la casilla de privacidad, que Bootstrap pone en rojo oscuro) */
.contacto26 .invalid-feedback,
.contacto26 .form-check-input.is-invalid ~ .form-check-label {
	color: #ff8f8f;
}

/* estilos.css pone a todos los .form-control esquinas rectas (!important),
   margen y letra grande: aqui se devuelven los de Bootstrap */
.contacto26 .form-control {
	border-radius: var(--bs-border-radius) !important;
	margin-bottom: 0;
	font-size: 1rem;
}

.contacto26 .form-control:focus,
.contacto26 .form-check-input:focus {
	border-color: var(--sr-yellow, #ffb800);
	box-shadow: 0 0 0 0.25rem rgba(255, 184, 0, 0.25);
}

/* Textos de los campos (etiquetas flotantes) en amarillo, tanto dentro del
   campo vacio como arriba cuando ya tiene texto o el foco */
.contacto26 .form-floating > label,
.contacto26 .form-floating > .form-control:focus ~ label,
.contacto26 .form-floating > .form-control:not(:placeholder-shown) ~ label {
	color: #f4b333;
	font-weight: 600;
}

.contacto26-mensaje {
	height: 130px !important;   /* form-floating fija el alto del textarea */
	resize: vertical;
}

/* ---------- Privacidad ---------- */
.contacto26-privacidad {
	font-size: 0.8rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
}

/* Enlace a la politica: amarillo de marca, subrayado y con icono de
   "se abre en otra pestana" */
.contacto26-privacidad a.contacto26-enlace {
	color: var(--sr-yellow, #ffb800);
	font-weight: 600;
	text-decoration: underline !important;   /* hay una regla global "a { text-decoration: none !important }" */
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.contacto26-privacidad a.contacto26-enlace:hover,
.contacto26-privacidad a.contacto26-enlace:focus {
	color: #fff;
}

.contacto26-privacidad a.contacto26-enlace i {
	font-size: 0.7em;
}

/* Campo obligatorio: asterisco rojo */
.contacto26-obligatorio {
	margin-left: 2px;
	color: #ff6b6b;   /* rojo claro: se lee sobre el fondo oscuro */
	font-weight: 700;
	font-size: 1.1em;
}

.contacto26 .form-check-input:checked {
	background-color: var(--sr-yellow, #ffb800);
	border-color: var(--sr-yellow, #ffb800);
}

/* ---------- Boton ---------- */
.contacto26-boton {
	background-color: var(--sr-yellow, #ffb800);
	border: 0;
	border-radius: var(--bs-border-radius);
	color: #fff;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.contacto26-boton:hover,
.contacto26-boton:focus {
	background-color: #e5a500;
	color: #fff;
	transform: translateY(-1px);
}

.contacto26-boton:disabled {
	opacity: 0.7;
}