/* =========================================================================
   css/accesos2026.css - Seccion "Contacta con Staregister" 2026 de la web
   principal (partials/accesos2026.php). Todo bajo .accesos26.
   Junta lo que en agencias reparten estilos.css (.contacta-section,
   .contact-header, .banner-container, .text-wrapper) y movil.css, con una
   rejilla propia en lugar de las col-md-4 de Bootstrap.
   ========================================================================= */

.accesos26 {
	--a26-amarillo: #ffb800;
	clear: both;
	padding: 10px 24px 50px;
	background-color: #fff;
	font-family: var(--fuente-texto);
	text-align: left;
}

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

.accesos26-ancho {
	max-width: 85%;
	margin: 0 auto;
}

/* ---------- Cabecera (contact-header) ---------- */
.accesos26-cabecera {
	padding-bottom: 40px;
	text-align: center;
}

/* estilos2.css da a los h2 la Anton y otro tamano */
.accesos26 .accesos26-titulo {
	margin: 0 0 5px;
	padding: 0;
	background: none;
	color: var(--a26-amarillo);
	font-family: var(--fuente-titulos);
	font-size: clamp(1.6rem, 1.222rem + 1.61vw, 2.6rem);
	font-weight: 900;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}

.accesos26-intro {
	margin: 0 auto;
	padding: 0 160px;
	color: var(--a26-amarillo);
	font-size: clamp(1rem, 0.773rem + 0.969vw, 1.6rem);
	font-weight: 600;
	line-height: 1.3;
}

/* ---------- Banners (banner-container) ---------- */
.accesos26-banners {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.accesos26 .accesos26-banner {
	position: relative;
	display: flex;
	align-items: center;
	height: 140px;
	overflow: hidden;
	color: #fff;
	text-decoration: none !important;
}

.accesos26-banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.accesos26-banner:hover img,
.accesos26-banner:focus-visible img {
	transform: scale(1.05);
}

.accesos26-banner:focus-visible {
	outline: 3px solid var(--a26-amarillo);
	outline-offset: 2px;
}

.accesos26-texto {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	margin-top: 30px;
	padding: 0 15px;
	font-family: var(--fuente-titulos);
	text-transform: uppercase;
}

.accesos26-pequeno {
	display: block;
	font-size: 1.2rem;
	line-height: 20px;
}

.accesos26-grande {
	display: block;
	font-size: 2.6rem;
	line-height: 50px;
}

/* ---------- Tablet y movil ---------- */
@media (max-width: 1199px) {
	.accesos26-intro {
		padding: 0;
	}
}

@media (max-width: 991px) {
	.accesos26 {
		padding: 0 16px 40px;
	}

	.accesos26-ancho {
		max-width: 100%;
	}

	.accesos26-cabecera {
		padding-bottom: 24px;
	}

	.accesos26-intro {
		line-height: 1.45;
	}

	.accesos26 .accesos26-banner {
		height: 110px;
	}

	.accesos26-grande {
		font-size: 2.2rem;
		line-height: 42px;
	}
}

@media (max-width: 767px) {
	.accesos26-banners {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.accesos26-banner img {
		transition: none;
	}

	.accesos26-banner:hover img,
	.accesos26-banner:focus-visible img {
		transform: none;
	}
}

/* "Solicitud de cotizacion" es un boton (abre la ventana de cotizacion): sin el aspecto de boton */
.accesos26 .accesos26-boton {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.accesos26 .accesos26-boton:focus-visible {
	outline: 3px solid #f4b333;
	outline-offset: 2px;
}

/* Formulario de cotizacion: js/columna2026.js lo mueve a la ventana; mientras, oculto */
.accesos26-cotizacion {
	display: none;
}