/* =========================================================================
   ESTILOS COMUNES DE LAS VISTAS DE AGENCIAS
   Generado al sacar los estilos en linea de los .php (atributos style y
   bloques <style>). Lo usan varias vistas o
   sale de ficheros compartidos (cabecera, pie, submenus, secciones, formularios).
   Las clases ec-N / ev-<vista>-N sustituyen a un style="..." concreto. Sus
   declaraciones llevan !important porque el estilo en linea ganaba a cualquier
   regla normal; no lo llevan display/visibility/opacity (las cambia jQuery con
   .show()/.hide()) ni las propiedades en las que ya habia una regla !important
   que le ganaba al estilo en linea. En los <a> sin href ni class se usa
   data-estilo="..." (una class anularia a:not([class]) de Bootstrap).
   ========================================================================= */

/* ---------- Antes en partesuperior.php (bloque <style>) ---------- */
/*
.skiptranslate {display: none;}
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
body {
    top: 0px !important; 
    }
*/

/* ---------- Antes en partesuperior.php (bloque <style>) ---------- */
	.goog-te-banner-frame.skiptranslate {
		display: none !important;
	} body { top: 0px !important; }
	.goog-tooltip {
		display: none !important;
	}
	.goog-tooltip:hover {
		display: none !important;
	}
	.goog-text-highlight {
		background-color: transparent !important;
		border: none !important; 
		box-shadow: none !important;
	}

/* ---------- Antes en partesuperior.php (bloque <style>) ---------- */
	#cssmenu > ul > li.has-sub > a:before {display:none;visibility: hidden;}
	#cssmenu > ul > li.has-sub > a:after {display:none;visibility: hidden;}

/* ---------- Antes en validacion_formularios.php (bloque <style>) ---------- */
		/* Campo obligatorio sin rellenar: solo el borde, sin relleno ni halo */
		.sr-campo-error{
			border-color:#d9534f !important;
		}
		/* Casillas de aceptacion */
		.sr-check-error{
			outline:1px solid #d9534f;
			outline-offset:2px;
		}

		/* Aviso flotante: centrado en la pantalla para que no pase desapercibido */
		.sr-toast{
			position:fixed;
			left:50%;
			top:50%;
			transform:translate(-50%, -50%) scale(.96);
			z-index:1000001;            /* por encima de los popups de contacto */
			width:max-content;
			max-width:min(440px, 92vw);
			background:#fff;
			border-top:3px solid #d9534f;
			border-radius:4px;
			box-shadow:0 18px 50px rgba(0,0,0,.28);
			padding:20px 26px;
			font-family:Exo, sans-serif;
			text-align:center;
			opacity:0;
			transition:opacity .2s ease, transform .2s ease;
			cursor:pointer;             /* se puede cerrar haciendo clic */
		}
		.sr-toast.visible{ opacity:1; transform:translate(-50%, -50%) scale(1); }
		.sr-toast .sr-toast-titulo{
			display:block;
			font-weight:800;
			font-size:1.05rem;
			color:#333f4f;
			margin-bottom:8px;
		}
		.sr-toast ul{ list-style:none; margin:0; padding:0; }
		.sr-toast li{
			font-size:.85rem;
			line-height:1.5;
			color:#6b7280;
		}

/* ---------- Antes en popup_cotizacion.php (bloque <style>) ---------- */
		/* Fondo oscuro compartido */
		#overlay_cotizacion_popup{
			position: fixed;
			inset: 0;
			background: rgba(20,26,34,.72);
			backdrop-filter: blur(3px);
			-webkit-backdrop-filter: blur(3px);
			z-index: 999998;
			display: none;
		}

		body #cotizacion_desplegable{
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 94%;
			max-width: 820px;
			height: auto;
			max-height: 90vh;
			overflow-y: auto;
			overflow-x: hidden;
			margin: 0;
			padding: 0;
			border-radius: 4px;
			background: #ffffff;
			box-shadow: 0 24px 70px rgba(0,0,0,.45);
			z-index: 999999;
			text-align: left;
		}
		body #cotizacion_desplegable.oculto{ display: none; }
		body #cotizacion_desplegable .cuerpo_cotizacion{ padding: 0 0 10px 0; }
		body #cotizacion_desplegable .contacto_web_embebido{ margin: 0; }

		body #cotizacion_desplegable .contacto_web_embebido h5,
		body #cotizacion_desplegable .contacto_web_embebido #zonamasinfo{
			box-sizing: border-box;
			border-radius: 4px 4px 0 0;
			padding: 16px 54px 16px 22px;
			font-size: 20px;
			line-height: 1.3;
			margin: 0;
		}
		body #cotizacion_desplegable .contacto_web_embebido form{
			width: 100%;
			padding: 8px 22px 4px;
			box-sizing: border-box;
		}
		body #cotizacion_desplegable .contacto_web_embebido .form-control{
			width: 100%;
			box-sizing: border-box;
			border-radius: 3px;
		}
		body #cotizacion_desplegable .contacto_web_embebido textarea.form-control{ min-height: 80px; }
		body #cotizacion_desplegable .contacto_web_embebido label{ font-size: 13px; }
		body #cotizacion_desplegable .texto_lopd{ font-size: 12px; line-height: 1.4; }

		/* Checkbox y texto de la politica, en la misma linea */
		body #cotizacion_desplegable .contacto_web_embebido form > div:has(> input[type="checkbox"]){
			display: flex;
			align-items: flex-start;
			gap: 8px;
		}
		body #cotizacion_desplegable .contacto_web_embebido form > div:has(> input[type="checkbox"]) input[type="checkbox"]{
			flex: 0 0 auto;
			margin: 3px 0 0 0;
		}
		body #cotizacion_desplegable .contacto_web_embebido form > div:has(> input[type="checkbox"]) label{
			margin: 0;
		}

		body #cotizacion_desplegable .boton_enviar{
			border: 0;
			background: #344050;
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: .5px;
			text-transform: uppercase;
			padding: 13px 30px !important;
			border-radius: 3px;
			cursor: pointer;
			transition: background .15s ease;
		}
		body #cotizacion_desplegable .boton_enviar:hover{ background: #1f2833; }

		#cerrar_cotizacion_popup{
			position: absolute;
			top: 13px;
			right: 14px;
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: rgba(255,255,255,.18);
			border: 1px solid rgba(255,255,255,.45);
			color: #fff;
			font-size: 17px;
			line-height: 1;
			cursor: pointer;
			z-index: 1000000;
			transition: background .15s ease;
		}
		#cerrar_cotizacion_popup i{ pointer-events: none; }
		#cerrar_cotizacion_popup:hover{ background: rgba(255,255,255,.35); }

		#muestra_cotizacion{ cursor: pointer; }

		@media only screen and (max-width: 700px){
			body #cotizacion_desplegable .contacto_web_embebido .modulo_48{
				width: 100%;
				float: none;
			}
		}

		/* --- Enlace politica de proteccion de datos --- */
		.link_politica{
			text-decoration: underline !important;
			text-underline-offset: 2px;
			font-weight: 700;
			color: #1d4ed8 !important;
			cursor: pointer;
		}
		.link_politica:hover{ color: #16309b !important; }

/* ---------- Antes en submenu_acreditaciones_sistemas.php (bloque <style>) ---------- */
/* ================= POPUP FORMULARIO DE CONTACTO ================= */

#overlay_contacto_popup{
	position: fixed;
	inset: 0;
	background: rgba(20,26,34,.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 999998;
	display: none;
}

body #contacto_desplegable{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 520px;
	height: auto;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: 0 24px 70px rgba(0,0,0,.45);
	z-index: 999999;
	font-family: inherit;
}

/* --- Cabecera --- */
body #contacto_desplegable #oculta_contacto{
	position: relative;
	float: none;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	cursor: default;
	background-position: center 25%;
	background-size: cover;
	min-height: 118px;
	border-radius: 4px 4px 0 0;
}
body #contacto_desplegable #oculta_contacto:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(52,64,80,.85) 0%, rgba(52,64,80,.35) 100%);
	border-radius: 4px 4px 0 0;
}
body #contacto_desplegable #oculta_contacto .margen_2{
	position: relative;
	z-index: 2;
	padding: 30px 24px 24px;
	width: 100%;
	box-sizing: border-box;
}
body #contacto_desplegable #oculta_contacto .modulo_30{ display: none; }
body #contacto_desplegable #oculta_contacto .modulo_65{
	width: 100%;
	float: none;
	margin: 0 !important;
	text-align: left;
}
body #contacto_desplegable #oculta_contacto .t_80{
	font-size: 13px !important;
	letter-spacing: 2px;
	opacity: .9;
}
body #contacto_desplegable #oculta_contacto .t_200{
	font-size: 30px !important;
	line-height: 1.1;
}

/* --- Cuerpo --- */
body #contacto_desplegable .cajafondo{
	float: none;
	width: 100%;
	margin: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: none;
	background: #f4b333;
}
body #contacto_desplegable .margen_2_5{
	width: 100%;
	padding: 22px 24px 24px;
	box-sizing: border-box;
}

/* --- Campos --- */
body #contacto_desplegable .saltopuro{ margin: 0; }
body #contacto_desplegable #contactoHeader input[type=text]{
	width: 100%;
	height: 44px;
	margin: 0 0 10px 0;
	padding-left: 44px !important;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 3px;
	font-size: 15px;
	color: #333;
	background-position: 10px center !important;
	background-size: 22px 22px !important;
	transition: box-shadow .15s ease, border-color .15s ease;
}
body #contacto_desplegable #contactoHeader input[type=text]:focus{
	outline: none;
	border-color: #344050;
	box-shadow: 0 0 0 3px rgba(52,64,80,.18);
}
body #contacto_desplegable #contactoHeader input::placeholder{ color: #8a8a8a; }

/* --- Pie: checkboxes + boton --- */
body #contacto_desplegable .fila_pie{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-top: 6px;
}
body #contacto_desplegable .bloque_checks{ flex: 1; }
body #contacto_desplegable .bloque_checks label{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.35;
	color: #344050;
	margin-bottom: 8px;
	cursor: pointer;
	font-weight: 500;
}
body #contacto_desplegable .bloque_checks input[type=checkbox]{
	width: 16px;
	height: 16px;
	margin: 1px 0 0 0;
	flex: 0 0 16px;
	accent-color: #344050;
	cursor: pointer;
}
body #contacto_desplegable #enviar_contacto_header{
	border: 0;
	background: #344050;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 13px 30px;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, transform .1s ease;
}
body #contacto_desplegable #enviar_contacto_header:hover{ background: #1f2833; }
body #contacto_desplegable #enviar_contacto_header:active{ transform: translateY(1px); }

/* --- Mensaje de error dentro del popup --- */
body #contacto_desplegable #oculta_contacto_2{
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 0;
}
body #contacto_desplegable #oculta_contacto_2 > div{
	font-size: 14px !important;
	padding: 12px 24px !important;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

/* --- Boton cerrar --- */
#cerrar_contacto_popup{
	position: absolute;
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0,0,0,.35);
	border: 1px solid rgba(255,255,255,.45);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	z-index: 1000000;
	transition: background .15s ease, color .15s ease;
}
#cerrar_contacto_popup i{ pointer-events: none; }
#cerrar_contacto_popup:hover{ background: rgba(0,0,0,.6); }

/* ================= POPUP SOLICITUD DE COTIZACION ================= */
body #cotizacion_desplegable{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 94%;
	max-width: 820px;
	height: auto;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: 0 24px 70px rgba(0,0,0,.45);
	z-index: 999999;
	text-align: left;
}
body #cotizacion_desplegable .cuerpo_cotizacion{ padding: 0 0 10px 0; }
body #cotizacion_desplegable .contacto_web_embebido{ margin: 0; }

/* Cabecera del formulario embebido: puede venir como <h5> (cotizacion generica)
   o como <div id="zonamasinfo"> (eventos, certificacion, generico). Se iguala
   la caja para que la altura sea siempre la misma y el boton de cerrar
   quede centrado verticalmente en cualquiera de los dos casos. */
body #cotizacion_desplegable .contacto_web_embebido h5,
body #cotizacion_desplegable .contacto_web_embebido #zonamasinfo{
	box-sizing: border-box;
	border-radius: 4px 4px 0 0;
	padding: 16px 54px 16px 22px;
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
}
body #cotizacion_desplegable .contacto_web_embebido form{
	width: 100%;
	padding: 8px 22px 4px;
	box-sizing: border-box;
}
body #cotizacion_desplegable .contacto_web_embebido .form-control{
	width: 100%;
	box-sizing: border-box;
	border-radius: 3px;
}
body #cotizacion_desplegable .contacto_web_embebido textarea.form-control{ min-height: 80px; }
body #cotizacion_desplegable .contacto_web_embebido label{ font-size: 13px; }
body #cotizacion_desplegable .texto_lopd{ font-size: 12px; line-height: 1.4; }

/* Casilla de aceptacion de la politica de privacidad: el checkbox y el
   texto "Marcando esta casilla..." deben quedar en la misma linea (antes
   el checkbox aparecia suelto encima del parrafo). */
body #cotizacion_desplegable .contacto_web_embebido form > div:has(> input[type="checkbox"]){
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
body #cotizacion_desplegable .contacto_web_embebido form > div:has(> input[type="checkbox"]) input[type="checkbox"]{
	flex: 0 0 auto;
	margin: 3px 0 0 0;
}
body #cotizacion_desplegable .contacto_web_embebido form > div:has(> input[type="checkbox"]) label{
	margin: 0;
}

body #cotizacion_desplegable .boton_enviar{
	border: 0;
	background: #344050;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 13px 30px !important;
	border-radius: 3px;
	cursor: pointer;
	transition: background .15s ease;
}
body #cotizacion_desplegable .boton_enviar:hover{ background: #1f2833; }

#cerrar_cotizacion_popup{
	position: absolute;
	top: 13px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.45);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	z-index: 1000000;
	transition: background .15s ease;
}
#cerrar_cotizacion_popup i{ pointer-events: none; }
#cerrar_cotizacion_popup:hover{ background: rgba(255,255,255,.35); }

@media only screen and (max-width: 700px){
	body #cotizacion_desplegable .contacto_web_embebido .modulo_48{
		width: 100%;
		float: none;
	}
}

/* --- Enlace politica de proteccion de datos --- */
.link_politica{
	text-decoration: underline !important;
	text-underline-offset: 2px;
	font-weight: 700;
	color: #1d4ed8 !important;
	cursor: pointer;
}
.link_politica:hover{ color: #16309b !important; }

@media only screen and (max-width: 600px){
	body #contacto_desplegable .fila_pie{
		flex-direction: column;
		align-items: stretch;
	}
	body #contacto_desplegable #enviar_contacto_header{ width: 100%; }
}

/* ---------- Antes en modulo_experiencia.php (bloque <style>) ---------- */
		.mod-experiencia {
			flex: 0 0 100%;
			width: 100%;
			max-width: 100%;
			background: transparent;
			padding: 10px 8% 20px 8%;
			margin: 10px 0 20px 0;
			box-sizing: border-box;
		}

		.mod-experiencia .mod-exp-item {
			display: flex;
			align-items: center;
			gap: 14px;
			padding: 14px 0;
			border-bottom: 1px solid #dcdcdc;
		}

		.mod-experiencia .mod-exp-item:first-child {
			padding-top: 4px;
		}

		.mod-experiencia .mod-exp-item:last-child {
			border-bottom: 0;
			padding-bottom: 4px;
		}

		.mod-experiencia .mod-exp-icono {
			flex: 0 0 46px;
			width: 46px;
			text-align: center;
		}

		.mod-experiencia .mod-exp-icono img {
			max-width: 100%;
			height: auto;
			display: block;
			margin: 0 auto;
		}

		.mod-experiencia .mod-exp-texto {
			min-width: 0;
		}

		.mod-experiencia .mod-exp-cifra {
			display: block;
			font-family: Exo, sans-serif, 'Anton';
			font-weight: 800;
			font-size: 1.5rem;
			line-height: 1.1;
			color: var(--staregister-dark, #232D3B);
		}

		.mod-experiencia .mod-exp-detalle {
			display: block;
			font-family: Exo, sans-serif;
			font-weight: 600;
			font-size: .72rem;
			letter-spacing: .02em;
			line-height: 1.25;
			color: #6b7280;
			margin-top: 3px;
		}

		@media (max-width:991px) {
			.mod-experiencia {
				padding-left: 5%;
				padding-right: 5%;
			}
		}

/* ---------- Antes en parteinferior.php (bloque <style>) ---------- */
	/* 
	.wrapper {
		display: table;
		text-align:left;
		background-color: #ffffff;
		margin-top:17px;
	}

	.c {
	   display: table-cell;
	   text-align: center;
	   vertical-align: middle;
			  border: 1px solid #DDDDDD;
				 width: 110px;
	   height: 110px;
	   right:10px;

	} */

/* ---------- Antes en parteinferior.php (bloque <style>) ---------- */
	:root {
		--sr-bg-light: #F2F2F4; /* Fondo gris de la imagen original */
		--sr-yellow: #FFB800;
		--sr-dark: #232D3B;
	}

	.logo-slider-section {
		/* background-color: var(--sr-bg-light); */
		padding: 0 0 0 0;
	}

	/* Contenedor relativo para posicionar las flechas */
	.slider-wrapper {
		position: relative;
		padding: 0 60px; /* Espacio interno para que quepan las flechas */
		max-width: 100%;
		margin: 0 auto;
	}

	.logo-slide {
		padding: 0 20px;
		outline: none;
		display: flex !important;
		align-items: center;
		justify-content: center;
		max-width: 100%;
		height: 100px; /* Centrado vertical */
		cursor: pointer;
	}

	.logo-slide img {
		max-width: 140px;
		max-height: 60px;
		width: auto;
		filter: grayscale(100%);
		opacity: 0.5;
		transition: all 0.4s ease-in-out;
		object-fit: contain;
	}

	/* --- EFECTO HOVER (COLOR Y NITIDEZ) --- */
	/* Aplicamos el efecto directamente a la imagen cuando se hace hover en el slide */
	.logo-slide:hover img {
		filter: grayscale(0%); /* Recupera color original */
		opacity: 1; /* Nitidez completa */
		transform: scale(1.08); /* Pequeño zoom decorativo */
	}

	/* --- POSICIONAMIENTO LATERAL DE FLECHAS --- */
	.slick-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 45px;
		height: 45px;
		background-color: trana !important; 
		background: none !important;
		opacity: 1 !important;
		border-radius: 50%;
		z-index: 100;
		border: none;
		box-shadow: 0 4px 10px rgba(0,0,0,0.1);
		cursor: pointer;
		display: flex !important;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		margin: 0 0px;
	}

	/* Flecha Izquierda */
	.slick-prev {
		left: 0; /* Pegada al borde izquierdo del wrapper */
	}

	/* Flecha Derecha */
	.slick-next {
		right: 0; /* Pegada al borde derecho del wrapper */
	}

	/* Iconos de las flechas */
	.slick-arrow i {
		color: var(--sr-dark);
		font-size: 18px;
	}

	.slick-arrow:hover {
		background-color: var(--sr-yellow) !important;
	}
	
	.slick-arrow:hover i {
		color: #fff;
	}

	/* Puntos inferiores estilo Staregister */
	.slick-dots {
		bottom: -50px;
		display: flex !important;
		justify-content: center;
		list-style: none;
		padding: 0;
	}
	.slick-dots li { margin: 0 6px; }
	.slick-dots li button {
		font-size: 0;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #D1D1D1;
		border: none;
		padding: 0;
	}
	.slick-dots li.slick-active button {
		background-color: #888888;
	}
	
	.slick-slide {
		height: auto !important;
	}

/* ---------- Antes atributos style="..." ---------- */

/* catalogo_formacion.php, eventos_formativos.php, cookies_AEPD.php, secciones/seccion_contacto.php */
.ec-1 {
	display: none;
}

/* certificacion-sistemas.php, index.php */
.ec-2 {
	margin: auto;
	display: none;
}

/* certificacion-sistemas.php, partesuperior.php */
.ec-3 {
	padding: 0 !important;
}

/* certificacion-sistemas.php, index.php */
.ec-4 {
	display: inline-block;
}

/* certificacion-sistemas.php, secciones/seccion_somos.php */
.ec-5 {
	text-align: justify !important;
}

/* certificacion-sistemas.php, secciones/seccion_somos.php */
.ec-6 {
	margin-top: -10px !important;
}

/* evento.php, evento_original.php */
.ec-7 {
	color: green !important;
}

/* evento.php, evento_original.php */
.ec-8 {
	color: red !important;
}

/* evento.php, evento_original.php */
.ec-9 {
	width: 40px !important;
}

/* evento.php, evento_original.php */
.ec-10 {
	width: 23% !important;
	padding-left: 1% !important;
	padding-right: 1% !important;
	padding-top: 10px !important;
}

/* evento.php, evento_original.php */
.ec-11 {
	max-width: 90% !important;
}

/* evento.php, evento_original.php, contacto_embebido_certificacion.php, contacto_embebido_cotizacion.php, contacto_embebido_empleo.php, contacto_embebido_eventos.php, contacto_embebido_generico.php, texto_lopd.php */
.ec-12 {
	text-decoration: underline;
}

/* eventos_formativos.php, submenu_acreditaciones_sistemas.php */
.ec-13 {
	margin-top: 15px !important;
}

/* eventos_formativos.php, formacion.php */
.ec-14 {
	top: 10 !important;
	right: 30 !important;
}

/* eventos_formativos.php, formacion.php */
.ec-15 {
	font-size: 100%;
}

/* eventos_formativos.php, formacion.php */
.ec-16 {
	height: 20px !important;
	clear: left !important;
}

/* noticia.php, quienes_somos.php */
.ec-17 {
	clear: both !important;
}

/* politica-de-cookies.php, cookies_AEPD.php */
.ec-18 {
	padding-bottom: 20px !important;
}

/* verificador_certificado.php, partesuperior.php */
.ec-19 {
	width: 100% !important;
}

/* partesuperior.php */
.ec-20 {
	height: 110px !important;
}

/* partesuperior.php */
.ec-21 {
	padding: 2px !important;
}

/* partesuperior.php */
.ec-22 {
	clear: left !important;
	height: 25px !important;
	top: 75px !important;
	z-index: -999 !important;
}

/* partesuperior.php */
.ec-23 {
	color: #333F4F !important;
	font-size: 80% !important;
}

/* partesuperior.php */
.ec-24 {
	clear: both !important;
	min-height: 45px !important;
	background-color: #333f4f !important;
	z-index: 999 !important;
	padding: 0 !important;
}

/* partesuperior.php */
.ec-25 {
	height: 320px !important;
}

/* Banner interior en escritorio (en movil lo ajusta movil.css). Con el alto fijo,
   un titulo que ocupa dos lineas (p. ej. en ingles "PROFESSIONAL COMPETENCE")
   empujaba "STAREGISTER" por debajo del menu. Ahora los textos se apoyan abajo
   (donde quedaban con un titulo corto) y, si no caben, el banner crece.
   Alineados a la izquierda con el contenido: .container-fluid.px-5 (3rem) +
   .row-custom-width (85% centrado, 7,5% a cada lado), que usan todas las vistas. */
@media only screen and (min-width: 992px) {
	#cabecerainterior:not(.cabecera-home) {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: auto !important;
		min-height: 320px;
		padding: 30px 0 18px;
	}

	#cabecerainterior:not(.cabecera-home) #textos_cabecera_no_home {
		margin: 0 0 0 calc(3rem + (100% - 6rem) * .075);
	}

	#cabecerainterior:not(.cabecera-home) #texto_cabecera {
		margin-top: 0;
	}
}

/* Hasta 1000px el contenido va ademas dentro de .zona_interna al 98% (principal.css) */
@media only screen and (min-width: 992px) and (max-width: 1000px) {
	#cabecerainterior:not(.cabecera-home) #textos_cabecera_no_home {
		margin-left: calc(1% + 3rem + (98% - 6rem) * .075);
	}
}

/* cookies_AEPD.php */
.ec-26 {
	position: fixed !important;
	bottom: 0px !important;
	left: 0px !important;
	background-color: #fff !important;
	padding: 10px 30px !important;
	z-index: 9998 !important;
	width: 30% !important;
	font-size: 70% !important;
	border: 1px solid red !important;
}

/* cookies_AEPD.php */
.ec-27 {
	display: none;
	padding-bottom: 20px !important;
}

/* navegacion.php */
.ec-28 {
	z-index: 99 !important;
}

/* contacto_embebido_certificacion.php, contacto_embebido_empleo.php, contacto_embebido_eventos.php, contacto_embebido_generico.php, secciones/seccion_contacto.php */
.ec-29 {
	height: 100px !important;
}

/* contacto_embebido_certificacion.php, contacto_embebido_cotizacion.php, contacto_embebido_empleo.php, contacto_embebido_eventos.php, contacto_embebido_generico.php */
.ec-30 {
	display: flex;
}

/* contacto_embebido_certificacion.php, contacto_embebido_cotizacion.php, contacto_embebido_empleo.php, contacto_embebido_eventos.php, contacto_embebido_generico.php */
.ec-31 {
	margin: 3px 0 0 0 !important;
}

/* secciones/seccion_contacto.php */
.ec-32 {
	text-decoration: underline !important;
}

/* secciones/seccion_formacion.php, secciones/seccion_formacion_catalogo.php, secciones/seccion_formacion_eventos.php, secciones/seccion_normas.php, secciones/seccion_somos.php */
.ec-33 {
	clear: both !important;
	margin-top: 40px !important;
}

/* submenu_acreditaciones_sistemas.php */
.ec-34 {
	align-items: center !important;
}

/* submenu_actualidad.php, submenu_eventos.php */
.ec-35 {
	top: 0 !important;
	left: 0 !important;
	float: left !important;
	padding: 20px 30px 10px 30px !important;
}

/* submenu_formacion.php */
.ec-36 {
	top: 0 !important;
	left: 0 !important;
	padding: 20px 30px !important;
}

/* submenu_noticias.php */
.ec-37 {
	text-decoration: none;
}

/* submenu_quienes_somos.php */
.ec-38 {
	padding: 2% 6% !important;
	background-color: #fff !important;
}

/* submenu_quienes_somos.php */
.ec-39 {
	margin: 77px auto 40px auto;
}


/* parteinferior.php */
.ec-42 {
	padding-left: -10px !important;
	padding-right: -10px !important;
}

/* parteinferior.php */
.ec-43,
[data-estilo="ec-43"] {
	cursor: default !important;
}

/* parteinferior.php */
.ec-44 {
	max-width: 170px !important;
	max-height: 100px !important;
	margin-left: 7px !important;
	cursor: default !important;
}

/* "Estamos aquí / para ayudarte a avanzar." (quienes_somos.php, contacto.php y
   submenu_quienes_somos.php): la segunda frase va siempre en una linea. Si no
   cabe a su tamano, se reduce segun el ancho del titulo (unidad cqi: 1% del
   ancho del contenedor; la frase mide unas 12,3-13 veces su tamano de letra). */
.titulo-ajustado {
	container-type: inline-size;
}

.titulo-ajustado .una-linea {
	white-space: nowrap;
	font-size: min(1em, 7.4cqi);
}

/* "Actualidad" (secciones/seccion_actualidad.php): en cada fila de tarjetas,
   la fecha, el texto y los botones "Saber mas" / "Ver + noticias" quedan a la
   misma altura en todas. Las tarjetas comparten las filas de una rejilla
   (subgrid): categoria | titulo | fecha | texto | botones. Cada fila mide lo
   que la mas alta de esas tarjetas, asi el titulo se sigue viendo entero.
   .normas-card es display: contents en estilos.css; aqui pasa a ser la rejilla.
   En movil (<768px) la seccion no se muestra (movil.css). */
@media (min-width: 768px) {
	#actualidad .normas-card {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	#actualidad .normas-card > [class*="col-"] {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		width: auto;
		max-width: none;
		padding: 0;
	}

	#actualidad .normas-card .news-card-horizontal {
		display: grid !important;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		grid-template-columns: 40% 60%;
		min-height: 0;
	}

	#actualidad .normas-card .news-image-wrapper {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	#actualidad .normas-card .news-content-wrapper {
		display: grid;
		grid-column: 2;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	#actualidad .normas-card .news-content-wrapper > * {
		margin-top: 0;
	}

	/* Botones abajo del todo */
	#actualidad .normas-card .news-content-wrapper > :last-child {
		align-self: end;
		padding-top: 8px;
	}

	/* Si no caben en una linea, "Ver + noticias" baja alineado a la izquierda */
	#actualidad .normas-card .news-content-wrapper > :last-child {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	#actualidad .normas-card .news-content-wrapper > :last-child > a {
		margin: 0;
	}

	/* Texto centrado en vertical: con el interlineado heredado (mucho mayor que
	   los 11px de la letra) quedaba mas hueco debajo que encima */
	#actualidad .normas-card .news-content-wrapper > :last-child > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 24px;
		padding: 0 15px;
		line-height: 1;
	}
}

@media (min-width: 992px) {
	#actualidad .normas-card {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Tarjetas de normas (.card-overlay-container, en certificacion-sistemas-gestion,
   la portada, seccion_normas...): el titulo se dimensiona segun el ancho de la
   TARJETA (cqi = 1% de ese ancho), no solo el de la ventana; con 6 por fila los
   titulos largos se salian por arriba y por la derecha. Si aun asi alguno no
   cabe, js/script.js (ajustarTitulosTarjetas) le baja la letra hasta que quepa. */
.card-overlay-container {
	container-type: inline-size;
}

.card-content h4 {
	font-size: clamp(.95rem, min(1.8vw, 13cqi), 2.1rem);
	line-height: 1.1;
}

/* Calendario de eventos (componentes/calendario.php): los dias con eventos
   llevaban el amarillo en la celda entera (td.ui-state-highlight), asi que los
   dias seguidos quedaban pegados. El amarillo pasa al numero, con hueco alrededor. */
.ui-datepicker td.dayWithEvents,
.ui-datepicker td.dayWithEvents.ui-state-highlight {
	background: transparent !important;
	padding: 2px !important;
}

.ui-datepicker td.dayWithEvents > a,
.ui-datepicker td.dayWithEvents > span {
	display: block;
	margin: 0 auto;
	max-width: 34px;
	border-radius: 6px;
	background: var(--staregister-yellow, #f4b333) !important;
	color: #000 !important;
	font-weight: bold;
}

.ui-datepicker td.dayWithEvents > a:hover {
	background: #dd9d1f !important;
}

/* Titulos-imagen de las secciones (.frase-encabezado: "Nuestro proceso de
   certificacion"... en la portada). En movil iban de borde a borde: se les da
   margen a los lados y aire arriba y abajo. */
@media (max-width: 767.98px) {
	.frase-encabezado {
		padding: 12px 28px 0;
		margin-bottom: 28px;
	}
}

/* "PROXIMOS EVENTOS" sobre el calendario (submenu_formacion.php, submenu_eventos.php):
   en movil y tablet, donde la columna va debajo del contenido, centrado */
@media (max-width: 991.98px) {
	.agenda-title-formacion {
		width: 100%;
		text-align: center;
	}
}