/* =========================================================================
   css/proceso2026.css - Cabecera "Nuestro proceso de certificacion" 2026 de
   la web principal (partials/proceso2026.php). Todo bajo .proceso26.
   Junta lo que en agencias reparten estilos.css (.certificacion-section,
   .frase-encabezado, .certificacion-text, .destacado.subtitulo, .proceso-btn)
   y comun.css (.ec-2, imagen plegada).
   ========================================================================= */

.proceso26 {
	clear: both;
	padding: 60px 24px 0;
	background-color: #fff;
	font-family: var(--fuente-texto);
	text-align: center;
	container-type: inline-size; /* el titulo se mide con cqw (ancho sin el padding) */
}

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

/* El h2 solo envuelve la imagen del titulo: sin los estilos de estilos2.css */
/* Titulo en texto relleno con una foto (img/fondo_titulos.png), como la antigua imagen
   encabezado-proceso-certificacion_*.png. Sin soporte de background-clip: text, en color */
.proceso26 .proceso26-titulo {
	margin: 0;
	padding: 0;
	background: none;
	color: #2e3946;
	font-family: var(--fuente-titulos);
	/* En escritorio, una linea del mismo ancho que las tarjetas de servicios de debajo
	   (85% de la seccion, css/servicios2026.css): el texto mide unas 20.8 veces la letra */
	font-size: clamp(1.6rem, 4.5vw, 4.25rem);
	font-size: max(1.6rem, 6.4cqw);
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.proceso26 .proceso26-titulo {
		display: inline-block;
		/* El fondo solo pinta dentro de la caja: el padding superior deja sitio a las
		   tildes de las mayusculas (Ó) y el margen negativo lo compensa */
		margin-top: -.2em;
		padding-top: .2em;
		background: url('../img/fondo_titulos.png') center / cover no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

@media (min-width: 768px) {
	.proceso26 .proceso26-titulo { white-space: nowrap; }
}

/* Mismo ancho que las tarjetas de servicios (85%) */
.proceso26-texto {
	max-width: 85%;
	margin: 0 auto;
}

.proceso26 .proceso26-texto p {
	margin: 25px auto 10px;
	color: #212529;
	font-size: clamp(0.9rem, 0.75rem + 0.64vw, 1.2rem);
	line-height: 1.3;
}

.proceso26 .proceso26-texto .proceso26-destacado {
	max-width: 84%;
	margin: 20px auto 15px;
	color: #f4b333;
	font-size: clamp(1.15rem, 0.9rem + 1vw, 1.75rem);
	font-weight: 700;
	line-height: 1;
}

.proceso26 .proceso26-texto .proceso26-negrita {
	font-weight: 700;
}

.proceso26-boton {
	margin-top: 25px;
	padding: 12px 34px;
	border: none;
	border-radius: 6px;
	background-color: #f4b333;
	color: #fff;
	font-family: var(--fuente-texto);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .3px;
	cursor: pointer;
	transition: background-color .3s ease;
}

.proceso26-boton:hover,
.proceso26-boton:focus-visible {
	background-color: #dd9d1f;
}

.proceso26-boton:focus-visible {
	outline: 3px solid #333f4f;
	outline-offset: 2px;
}

/* Imagen del proceso, plegada hasta pulsar el boton */
.proceso26-imagen {
	max-width: 85%;
	margin: 30px auto 0;
}

.proceso26-imagen[hidden] {
	display: none;
}

.proceso26-imagen img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Tablet y movil ---------- */
@media (max-width: 991px) {
	.proceso26 {
		padding: 40px 16px 0;
	}

	/* Las tarjetas de servicios pasan a todo el ancho: el titulo tambien */
	.proceso26 .proceso26-titulo {
		font-size: max(1.6rem, 7.5cqw);
	}

	.proceso26-texto,
	.proceso26 .proceso26-texto .proceso26-destacado,
	.proceso26-imagen {
		max-width: 100%;
	}
}