/* =========================================================================
   css/certificacion2026.css - Landing "Certificacion de Sistemas" 2026
   (certificacion-sistemas-gestion.php). Lo comun (dos columnas, titulos, listas,
   columna derecha fija al hacer scroll) esta en css/landing2026.css y las
   tarjetas de normas en css/normas2026.css; aqui lo propio de esta pagina, como
   agencias/css/paginas/certificacion-sistemas-gestion.css y
   .certificacion-sistemas-section de agencias/css/estilos.css.
   ========================================================================= */

/* Texto gris gigante de fondo ("SISTEMAS DE GESTION"), a todo el ancho de la
   pantalla: .cert26 va dentro de .zona_interna (80%), asi que se alarga un 12,5%
   por cada lado. La imagen (segun el idioma) la pone la pagina en linea */
/* Fuente y color de .landing26 tambien para el bloque a todo el ancho (que no lo es) */
.cert26 {
	position: relative;
	width: 100%;
	font-family: var(--fuente-texto);
	color: #4a4f57;
	text-align: left;
}

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

.cert26 .cert26-fondo {
	position: absolute;
	top: 0;
	left: -12.5%;
	right: -12.5%;
	height: 100%;
	z-index: 0;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity: .5;
	pointer-events: none;
}

/* Por debajo de 1000px .zona_interna ya ocupa casi todo el ancho (98-100%): alargarlo
   un 12,5% sacaria la imagen de la pantalla y saldria scroll horizontal */
@media (max-width: 1000px) {
	.cert26 .cert26-fondo {
		left: 0;
		right: 0;
	}
}

/* "STAREGISTER" gris de fondo como texto (antes img/texto-gris-staregister.png), en quienes_somos.php,
   porque-elegir-staregister.php, clientes-reconocimientos.php, acreditaciones-reconocimientos.php,
   normas.php, homologacion*.php, conviertete-socio.php y red_internacional.php:
   <div class="cert26-fondo cert26-fondo-texto" aria-hidden="true">STAREGISTER</div>
   line-height .72 = alto de las mayusculas de Montserrat; la caja mide eso mas la holgura de
   arriba (.3em) y de abajo (.05em), asi nada se corta sea cual sea el tamano.
   La Montserrat variable tiene trazos solapados y el contorno los dibuja (lineas dentro de la A,
   R, G): relleno blanco pintado encima del contorno (paint-order) para taparlos; por eso el
   contorno es el doble de grueso de lo que se ve. Tres clases para ganar a las .<pagina>-fondo
   de cada pagina (alto y opacidad de la imagen) */
.cert26 .cert26-fondo.cert26-fondo-texto {
	height: auto;
	margin-top: calc(30px - .3em); /* separado del menu: 30px hasta las letras, con el padding */
	padding-bottom: .05em; /* lo redondo de abajo (S, G, O) y el contorno */
	padding-top: .3em; /* holgura: tildes (Ó), lo redondo (S, G, R) y el contorno sobresalen de las mayusculas */
	overflow: hidden;
	background: none;
	color: #fff;
	paint-order: stroke fill;
	font-family: var(--fuente-texto);
	font-size: 125px;
	font-weight: 900;
	letter-spacing: .04em;
	line-height: .72;
	text-align: left;
	white-space: nowrap;
	-webkit-text-stroke: 4px rgba(44, 57, 69, .06); /* #2c3945 al 6% */
	opacity: 1; /* el color del contorno tal cual (las .<pagina>-fondo lo dejaban al 40%) */
}

@media (max-width: 1000px) {
	.cert26 .cert26-fondo.cert26-fondo-texto {
		margin-top: calc(18px - .3em);
		font-size: 73px;
	}
}

/* Textos largos: la letra baja hasta que quepan en el 96% de la pantalla, como las imagenes
   texto-gris-*_xx.png que se ajustaban al ancho. --cert26-fondo-em: lo que mide la frase en em
   (Montserrat 900 con este espaciado) */
.cert26 .cert26-fondo.cert26-fondo-texto--largo {
	font-size: min(125px, calc(96vw / var(--cert26-fondo-em)));
}

@media (max-width: 1000px) {
	.cert26 .cert26-fondo.cert26-fondo-texto--largo {
		font-size: min(73px, calc(96vw / var(--cert26-fondo-em)));
	}
}

/* "ESTAMOS CONTRATANDO": empleo.php */
.cert26-fondo-texto--contratando {
	--cert26-fondo-em: 14.75;
}

/* "ACTUALIDAD": noticias.php */
.cert26-fondo-texto--actualidad {
	--cert26-fondo-em: 7.6;
}

/* "SISTEMAS DE GESTIÓN": certificacion-sistemas-gestion.php, certificacion-proceso.php y
   verificador_certificado.php */
.cert26-fondo-texto--sistemas {
	--cert26-fondo-em: 13;
}

/* "FORMACIÓN": formacion.php, eventos_formativos.php y las landings de formacion
   (partials/formacionlanding2026.php) */
.cert26-fondo-texto--formacion {
	--cert26-fondo-em: 7;
}

/* "CONTACTA CON EXPERTOS": contacto.php */
.cert26-fondo-texto--contacto {
	--cert26-fondo-em: 15.5;
}

/* "COMPETENCIA PROFESIONAL": certificacion-competencias-profesionales.php, training-provider.php,
   centros-formacion.php y acreditacion-proceso.php */
.cert26-fondo-texto--competencia {
	--cert26-fondo-em: 16.9;
}

/* "PROPIEDAD INTELECTUAL": propiedad-intelectual.php */
.cert26-fondo-texto--propiedad {
	--cert26-fondo-em: 15.6;
}

/* El contenido empieza por debajo del texto (como las paginas que ya lo hacian con la imagen) */
.cert26 > .cert26-fondo-texto ~ .cert26-columnas,
.cert26 > .cert26-fondo-texto ~ .cont26-rejilla,
.cert26 > .cert26-fondo-texto ~ .emp26-rejilla,
.cert26 > .cert26-fondo-texto ~ .leg26-rejilla {
	padding-top: 160px;
}

@media (max-width: 1000px) {
	.cert26 > .cert26-fondo-texto ~ .cert26-columnas,
	.cert26 > .cert26-fondo-texto ~ .cont26-rejilla,
	.cert26 > .cert26-fondo-texto ~ .emp26-rejilla,
	.cert26 > .cert26-fondo-texto ~ .leg26-rejilla {
		padding-top: 100px;
	}
}

.cert26 > * {
	position: relative;
	z-index: 1;
}

/* El titulo empieza debajo del texto gris (la imagen es 11,3 veces mas ancha que alta) */
.cert26 .cert26-columnas {
	padding-top: max(60px, 8vw);
	padding-bottom: 20px;
}

.landing26-contenido .cert26-titulo,
.landing26-contenido .cert26-denominacion {
	text-transform: uppercase;
}

.landing26-contenido .cert26-denominacion {
	padding-bottom: 20px;
}

/* El formulario de cotizacion lo saca js/columna2026.js a una ventana emergente:
   oculto mientras (y si no hubiera JS, no queda en medio del texto) */
.cert26-cotizacion .contacto_web_embebido {
	display: none;
}

/* ---------- A todo el ancho: "Lo que nos diferencia" y normas ---------- */
.cert26 .cert26-ancho {
	width: 100%;
	padding: 0 0 50px;
}

.cert26-titulo-normas {
	margin: 35px 0 10px;
	color: #f4b333;
	font-family: var(--fuente-titulos);
	font-size: 1.2rem;
	font-weight: 800;
	text-align: left !important;
	text-transform: uppercase;
}

/* Ventajas de la lista: el texto de la BD las marca con .negrita_st, que en
   estilos2.css es la Anton amarilla al 150%; en agencias son negrita normal */
.cert26 .negrita_st {
	color: #334050;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
}

/* Titulos largos ("Sistemas de gestion de la denuncia de irregularidades") sin salirse */
.cert26-normas .normas26-nombre {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Rejilla de tarjetas: 6 por fila desde 1600px, 5 hasta 1200, 4 hasta 992,
   3 en tablet y 2 en movil (como en agencias). Sin el fondo ni el relleno de la
   seccion .normas26 del carrusel */
.normas26.cert26-normas {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin: 0 -10px;
	padding: 0;
	background: none;
}

@media (max-width: 1599.98px) {
	.normas26.cert26-normas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
	.normas26.cert26-normas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
	.normas26.cert26-normas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cert26 .cert26-ancho { padding: 0 16px 40px; }
}

@media (max-width: 575.98px) {
	.normas26.cert26-normas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cert26-otras,
.cert26-otras:visited {
	display: inline-block;
	margin-top: 30px;
	color: #f4b333;
	font-family: var(--fuente-texto);
	font-size: 1.3rem;
	font-weight: 700;
	text-decoration: none;
}

.cert26-otras:hover {
	color: #dd9d1f;
	text-decoration: underline;
}

/* Documentos bajo la columna derecha (submenu_acreditaciones_sistemas.php, en
   certificacion-sistemas-gestion.php): mismo gris que las cifras, titulos y lista 2026 */
.cert26-documentos {
	margin-top: 20px;
	padding: 20px 8% 24px;
	background-color: #f1f1f3;
}

.cert26-documentos .margen_2_5 {
	width: auto;
	padding: 0;
}

.cert26-documentos h2 {
	margin: 0 0 6px;
	padding: 0;
	background: none;
	color: #232d3b;
	font-family: var(--fuente-titulos);
	font-size: 1.3rem;
	font-weight: normal;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.cert26-documentos .separador {
	padding: 0;
	height: 22px;
}

.cert26-documentos .listado_submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cert26-documentos .listado_submenu li {
	position: relative;
	padding: 9px 0 9px 16px;
	border-bottom: 1px solid rgba(51, 63, 79, .15);
	font-family: var(--fuente-texto);
	font-size: .9rem;
	line-height: 1.3;
}

.cert26-documentos .listado_submenu li:last-child {
	border-bottom: none;
}

/* Vineta cuadrada amarilla */
.cert26-documentos .listado_submenu li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 6px;
	height: 6px;
	background-color: #f4b333;
}

.cert26-documentos .listado_submenu li a {
	color: #232d3b;
	text-decoration: none;
}

.cert26-documentos .listado_submenu li a:hover,
.cert26-documentos .listado_submenu li a:focus-visible {
	color: #dd9d1f;
	text-decoration: underline;
}