/*
	Beresoft · Retoques propios sobre la plantilla Massively (main.css no se modifica).
	Colores del logotipo: morado #650464 · naranja #e5a13c · gris #949392
*/

/* ---------- Menú centrado: la plantilla reserva a la derecha el hueco de los iconos sociales, que no se usan ---------- */
#nav { padding-right: 0; }
#nav ul.links { justify-content: center; }

/* ---------- Logotipo ----------
   La cabecera de la plantilla no se usa: el logotipo va dentro del menú.
   Escritorio: primera casilla de la barra, a la izquierda.
   Móvil: la plantilla traslada el menú al panel lateral; el logotipo es su primer elemento. */
#header { display: none !important; }

#nav .nav-logo { display: none; }
@media screen and (min-width: 981px) {
	#nav { margin-top: 1.5rem; align-items: stretch; }
	/* Bloque blanco a toda la altura de la barra, con esquinas rectas, como el apartado activo del menú */
	#nav .nav-logo {
		display: flex; align-items: center; flex: 0 0 auto; align-self: stretch; margin: 0; padding: 0 1.4rem;
		background: #ffffff; border: 0; border-radius: 0; line-height: 0; transition: box-shadow 0.2s ease-in-out;
	}
	#nav .nav-logo:hover { box-shadow: inset 0 -3px 0 #e5a13c; }
	#nav .nav-logo img { height: 2.1rem; width: auto; display: block; }
	#nav ul.links li a { padding-left: 1.1rem; padding-right: 1.1rem; }
	/* La plantilla fuerza el texto a su color normal al pasar el ratón; aquí se pone naranja, como el selector de modo */
	html #nav ul.links li a:hover { color: #f59432 !important; }
}
@media screen and (max-width: 980px) {
	/* Sin cabecera, el contenido empieza bajo el botón «Menu» de la plantilla */
	#main { margin-top: 4rem; }
	#navPanel .nav-logo {
		display: flex; justify-content: center; align-items: center; margin: 0 0 1.25rem 0; padding: 0.9rem 1rem;
		background: #ffffff; border: 0; border-radius: 0; line-height: 0;
	}
	#navPanel .nav-logo img { height: 2.6rem; width: auto; display: block; }
	#navPanel .nav-logo { transition: box-shadow 0.2s ease-in-out; }
	#navPanel .nav-logo:hover, #navPanel .nav-logo:active { box-shadow: inset 0 -3px 0 #e5a13c; }
}

/* ---------- Toque morado: los antetítulos y sus líneas (tono aclarado para que se lea sobre negro) ---------- */
#main .date { color: #c99bc8; }
#main header.major .date::before,
#main header.major .date::after { border-top-color: rgba(201, 155, 200, 0.7); }
html.tema-claro #main .date { color: #650464; }
html.tema-claro #main header.major .date::before,
html.tema-claro #main header.major .date::after { border-top-color: rgba(101, 4, 100, 0.3); }

/* ---------- Sellos de certificación en Seguridad ---------- */
.sellos-iso { display: flex; justify-content: center; align-items: center; gap: clamp(3rem, 13vw, 10rem); margin: 0 0 3rem 0; }
.sellos-iso img { width: clamp(110px, 15vw, 170px); height: auto; display: block; }

/* ---------- Selector de modo claro / oscuro ----------
   Escritorio: última casilla de la barra del menú, simétrica al logotipo, con un icono de Font Awesome
   (la misma familia que la flecha de la portada).
   Móvil: la plantilla traslada el contenido del menú al panel lateral; ahí aparece como una entrada más, con texto. */
.tema-toggle[hidden] { display: none !important; }
#nav .tema-toggle, #navPanel .tema-toggle {
	all: unset; box-sizing: border-box; cursor: pointer;
	display: flex; align-items: center; gap: 0.75rem;
	font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: 900; font-size: 0.8rem;
	letter-spacing: 0.075em; text-transform: uppercase; line-height: 1;
	color: inherit !important;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
/* margin a 0: la plantilla da a los iconos de los botones 0,5rem de margen derecho, que descentraba el icono */
#nav .tema-toggle::before, #navPanel .tema-toggle::before { font-size: 1.05rem; line-height: 1; width: 1.1em; text-align: center; margin: 0 !important; }
#nav .tema-toggle:focus-visible, #navPanel .tema-toggle:focus-visible { outline: 2px solid #f59432; outline-offset: -2px; }
#nav .tema-toggle:hover, #navPanel .tema-toggle:hover { color: #f59432 !important; }

@media screen and (min-width: 981px) {
	#nav .tema-toggle {
		flex: 0 0 auto; align-self: stretch; justify-content: center; width: 3.75rem; gap: 0;
	}
	#nav .tema-toggle:hover { background-color: rgba(255, 255, 255, 0.1); }
	#nav .tema-toggle .tema-texto {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
	html.tema-claro #nav .tema-toggle:hover { background-color: rgba(33, 41, 49, 0.06); }
}
/* Pantallas justas para logotipo + 7 apartados + selector */
@media screen and (min-width: 981px) and (max-width: 1100px) {
	#nav ul.links li a { padding-left: 0.85rem; padding-right: 0.85rem; }
}

/* Móvil: sin el hueco que deja la lista de apartados; el selector sigue el ritmo del menú, con su línea separadora */
#navPanel .links { margin-bottom: 0; }
/* El margen lateral pasa del <li> al enlace para que el fondo del hover ocupe toda la fila, como en la barra */
#navPanel .links li { padding-left: 0; }
#navPanel .links li a { padding-left: 0.5rem; padding-right: 0.5rem; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
/* Mismo tamaño y altura de línea que los apartados (0,9rem y la del cuerpo), para que el texto quede igual de separado de su línea */
#navPanel .tema-toggle {
	width: 100%; padding: 0.75rem 0.5rem; font-size: 0.9rem; line-height: 2.375;
	border-top: solid 2px #eeeeee;
}
#navPanel .links li a:hover, #navPanel .links li a:active,
#navPanel .tema-toggle:hover, #navPanel .tema-toggle:active { background-color: rgba(255, 255, 255, 0.1); color: #f59432 !important; }
html.tema-claro #navPanel .tema-toggle { border-top-color: #e2e4e7; }
html.tema-claro #navPanel .links li a:hover, html.tema-claro #navPanel .links li a:active,
html.tema-claro #navPanel .tema-toggle:hover, html.tema-claro #navPanel .tema-toggle:active { background-color: rgba(33, 41, 49, 0.06); }