/* =====================================================================
   TSD ALMIDA — estilos de toda la web
   =====================================================================
   Copia visual de la web anterior (plantilla "Advik" con Bootstrap,
   fullPage.js y Vegas), rehecha a mano sin librerías: sólo lo que se usa.
   Las medidas y colores salen de la web anterior, medidos en el navegador.

   Orden: primero el MÓVIL; lo de ordenador va en @media (min-width:768px).
   ===================================================================== */

/* ---- Letras, alojadas en la propia web (sin Google Fonts: RGPD) ------ */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fuentes/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fuentes/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fuentes/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fuentes/roboto-latin-700-normal.woff2") format("woff2"); }
/* Iconos de contacto (teléfono, correo, dirección): la misma fuente que la web anterior. */
@font-face { font-family: "Flaticon"; font-weight: 400; font-style: normal; font-display: block; src: url("../fuentes/flaticon.woff") format("woff"); }

/* ---- Colores y medidas: cambiar aquí cambia toda la web --------------- */
:root {
	--naranja: #e06200;          /* el de la marca: iconos, menú al pasar */
	--azul: #164186;             /* botones */
	--azul-cookies: #174185;
	--oscuro: #121215;           /* fondo del pie, la 404 y el resultado del formulario */
	--negro: #1d1d1d;            /* fondo general y del menú en el móvil */
	--blanco: #fff;
	--claro: #cacaca;            /* fondo de las páginas legales */
	--texto-claro: #424242;      /* texto de las páginas legales */
	--letra: "Poppins", Helvetica, Arial, sans-serif;
	--titulos: "Roboto", Helvetica, Arial, sans-serif;
	--sombra-texto: 0 1px 2px rgba(0, 0, 0, .2);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--letra);
	font-size: 16px;
	line-height: 1.5;
	color: var(--blanco);
	background-color: var(--negro);
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--blanco); }
a:hover { color: var(--naranja); }

/* Texto sólo para lectores de pantalla y buscadores (el h1 de la portada:
   la web anterior no tenía ninguno y visualmente no lo lleva). */
.solo-lectores {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* =====================================================================
   CABECERA: logo y botón del menú
   ===================================================================== */
.logo {
	position: absolute;
	top: 8px;
	left: 16px;
	z-index: 20;
	display: flex;
}
.logo img { height: 40px; width: auto; }

.boton-menu {
	position: fixed;
	top: 8px;
	right: 16px;
	z-index: 999;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, .2);
	cursor: pointer;
	transition: .3s ease-in-out;
}
.boton-menu:focus { outline: none; }
.boton-menu:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* Las tres rayas de distinto largo, que se cruzan en aspa al abrir */
/* Posición fija dentro del botón: un <button> centra su contenido en
   vertical por su cuenta y las rayas quedaban 5 px más bajas que en la
   web anterior. */
.barras { position: absolute; top: 13px; left: 8px; display: block; width: 24px; }
.barras span {
	display: block;
	height: 2px;
	width: 100%;
	margin-bottom: 4px;
	background: var(--blanco);
	transition: .3s;
}
.barras span:nth-child(2) { width: 18px; }
.barras span:nth-child(3) { width: 12px; }
.menu-abierto .barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 24px; }
.menu-abierto .barras span:nth-child(2) { width: 0; }
.menu-abierto .barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 24px; }

/* ---- Menú a pantalla completa -------------------------------------------- */
.menu {
	position: fixed;
	inset: 0;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--negro);
	visibility: hidden;
	opacity: 0;
	transform: scale(1.2);
	transition: .3s;
}
.menu-abierto .menu { visibility: visible; opacity: 1; transform: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li {
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(-20px);
	transition: .3s;
}
.menu-abierto .menu li { opacity: 1; transform: none; }
/* Entran uno detrás de otro, como en la web anterior */
.menu li:nth-child(1) { transition-delay: .3s; }
.menu li:nth-child(2) { transition-delay: .4s; }
.menu li:nth-child(3) { transition-delay: .5s; }
.menu li:nth-child(4) { transition-delay: .6s; }
.menu li:nth-child(5) { transition-delay: .7s; }
.menu li:nth-child(6) { transition-delay: .8s; }
.menu a {
	display: block;
	padding: 8px 0;
	color: var(--blanco);
	text-decoration: none;
	transition: .3s;
}
.menu a:hover, .menu a:focus-visible { color: var(--naranja); }

/* Con el menú abierto, lo de detrás se difumina */
.paginas .seccion, .portada-fondo { transition: opacity .6s, filter .6s; }
.menu-abierto .paginas .seccion { opacity: .1; filter: blur(5px); }
.menu-abierto .portada-fondo { filter: blur(10px); }

/* =====================================================================
   FONDO DE FOTOS (detrás de toda la portada): pasan solas, con zoom lento
   ===================================================================== */
.portada-fondo {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--negro);
}
.portada-fondo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s;
}
.portada-fondo img.activa { opacity: 1; }
/* Velo oscuro encima de la foto, para que se lea el texto */
.portada-fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(2, 3, 10, .4);
}
/* Los cuatro movimientos de la web anterior (kenburns de Vegas) */
.kb-arriba    { animation: kb-arriba 6s linear forwards; }
.kb-abajo     { animation: kb-abajo 6s linear forwards; }
.kb-izquierda { animation: kb-izquierda 6s linear forwards; }
.kb-derecha   { animation: kb-derecha 6s linear forwards; }
@keyframes kb-arriba    { from { transform: scale(1.5) translate(0, 10%); }  to { transform: scale(1) translate(0, 0); } }
@keyframes kb-abajo     { from { transform: scale(1.5) translate(0, -10%); } to { transform: scale(1) translate(0, 0); } }
@keyframes kb-izquierda { from { transform: scale(1.5) translate(10%, 0); }  to { transform: scale(1) translate(0, 0); } }
@keyframes kb-derecha   { from { transform: scale(1.5) translate(-10%, 0); } to { transform: scale(1) translate(0, 0); } }

/* =====================================================================
   SECCIONES
   ===================================================================== */
.seccion {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 72px 0 48px;
	overflow: hidden;
}
/* Fondo liso sólo para las páginas SIN fotos detrás (404 y resultado del
   formulario). En la portada ninguna sección lleva fondo: las fotos que
   cambian (.portada-fondo) están fijas detrás y se ven en TODAS las pantallas
   al bajar, como en la web de 2022. Un fondo allí las tapa. */
.seccion-oscura { background: var(--oscuro); }
#home { min-height: 100vh; min-height: 100svh; }

.envoltorio {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}

.titulo {
	font-family: var(--titulos);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.1;
	margin: 0 0 32px;
	text-shadow: var(--sombra-texto);
	overflow-wrap: break-word;
}
.texto {
	font-family: var(--titulos);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.6;
	margin: 0 0 8px;
	opacity: .75;
	text-shadow: var(--sombra-texto);
}
.envoltorio > .texto:last-child, .bloque-texto { margin-bottom: 32px; }

/* Palabra gigante en vertical a la izquierda. Sólo de adorno: en el móvil
   no cabe y no se enseña (igual que en la web anterior). */
.titulo-fondo { display: none; }

/* Flecha de "siguiente sección". En el móvil no hace falta. */
.bajar { display: none; }

/* ---- Entrada animada del contenido al llegar a cada sección ------------- */
.anim { opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; }
.vista .anim { opacity: 1; transform: none; }
.vista .texto.anim { opacity: .75; }
.vista .anim:nth-child(2) { transition-delay: .15s; }
.vista .anim:nth-child(3) { transition-delay: .3s; }
/* Sin JavaScript no hay quien ponga ".vista": se enseña todo de entrada. */
.sin-js .anim { opacity: 1; transform: none; }
.sin-js .texto.anim { opacity: .75; }

/* =====================================================================
   BOTONES
   ===================================================================== */
.botones { margin: 0 -2px; }
.boton {
	display: inline-block;
	min-height: 46px;
	margin: 0 2px 8px;
	padding: 12px 24px;
	font-family: var(--letra);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--blanco);
	text-align: center;
	text-decoration: none;
	background-color: var(--azul);
	border: 1px solid transparent;
	border-radius: 50px;
	cursor: pointer;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s;
}
.boton:hover, .boton:focus-visible { color: var(--blanco); background-color: var(--naranja); border-color: var(--naranja); outline: none; }

/* "Enviar": transparente con borde fino, a todo el ancho */
.boton-contorno {
	display: flex;
	width: 100%;
	margin: 0 0 8px;
	justify-content: center;
	align-items: center;
	line-height: 1.25;
	letter-spacing: .2em;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .2);
	transition: background-color .3s, color .3s;
}
.boton-contorno:hover, .boton-contorno:focus-visible {
	background: var(--blanco);
	color: var(--negro);
	border-color: var(--blanco);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}
.boton-contorno[disabled] { opacity: .7; cursor: wait; }

/* "Volver a ...": sólo texto con flecha, que se mueve un poco al pasar */
.boton-volver { background: transparent; border: 0; padding-left: 0; margin-left: 0; }
.boton-volver:hover, .boton-volver:focus-visible { background: transparent; border: 0; color: var(--blanco); transform: translateX(-5%); }
.flecha {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 2px;
	margin-right: 8px;
	vertical-align: middle;
	background: currentColor;
}
/* La punta: un cuadradito con dos bordes, girado, pegado a la izquierda */
.flecha::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

/* =====================================================================
   PANELES (Empleo y Servicios): se mueven en horizontal
   ===================================================================== */
.con-paneles { padding: 0; display: block; }
.paneles {
	display: flex;
	align-items: flex-start;
	width: 100%;
	transition: transform .7s cubic-bezier(.55, .085, 0, .99);
}
.panel {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 72px 0 48px;
	/* El panel que no se ve no puede recibir el foco del teclado, pero se
	   espera a que acabe de salir para esconderlo del todo. */
	visibility: hidden;
	height: 0;
	overflow: hidden;
	transition: visibility 0s .7s, height 0s .7s;
}
.panel.activo { visibility: visible; height: auto; overflow: visible; transition: none; }
.panel.saliendo { height: auto; visibility: visible; }
/* Sin JavaScript: los paneles uno debajo de otro, todos visibles */
.sin-js .paneles { flex-direction: column; }
.sin-js .panel { visibility: visible; height: auto; overflow: visible; }

/* =====================================================================
   FORMULARIO "TRABAJA CON NOSOTROS"
   ===================================================================== */
.formulario { width: 100%; max-width: 768px; margin: 0 auto; text-align: left; }
.campo { position: relative; margin-bottom: 16px; }
.campo label { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.campo sup { font-size: 9px; }
.campo .nota { font-weight: 400; opacity: .75; }

.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
	display: block;
	width: 100%;
	height: 28px;
	padding: 1px 2px;
	font: inherit;
	font-size: 16px;   /* 16 px: con menos, el iPhone hace zoom al escribir */
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--blanco);
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.campo textarea { height: 96px; padding: 6px 12px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: rgba(51, 70, 209, .8); }
.campo-suma input[type="text"] { max-width: 120px; }

.campo-adjunto { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.campo-adjunto label { margin-bottom: 4px; }
.campo-adjunto input { max-width: 100%; font-family: var(--letra); font-size: 14px; color: var(--blanco); }

.campo-privacidad label { font-size: 12px; }
.campo-privacidad input { margin: 0 8px 0 0; vertical-align: -2px; }
.campo-privacidad a { color: var(--blanco); text-decoration: underline; }

/* Error de un campo (lo pone js/web.js con lo que contesta el servidor) */
.campo.con-error input, .campo.con-error textarea { border-bottom-color: #ff8a3d; }
.error-campo { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #ffb27a; }

/* Campo trampa para robots: fuera de la pantalla, nunca visible */
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.aviso-formulario { margin: 0 0 16px; font-size: .9rem; min-height: 0; }
.aviso-formulario:empty { display: none; }
.aviso-formulario.error { color: #ffb27a; font-weight: 700; }
.aviso-formulario.ok { color: var(--blanco); font-weight: 700; }

.botones-formulario .boton-volver { margin-top: 4px; }

/* =====================================================================
   CONTACTO: tres columnas con icono naranja
   ===================================================================== */
.contacto {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 798px;
	padding: 0 15px;
	text-align: center;
}
.contacto > div { padding: 0 15px; }
.icono { display: block; font-family: "Flaticon"; font-size: 48px; line-height: 1.6; color: var(--naranja); text-shadow: var(--sombra-texto); margin-bottom: 8px; }
.icono-telefono::before  { content: "\f109"; }
.icono-correo::before    { content: "\f10a"; }
.icono-direccion::before { content: "\f10b"; }
.contacto p { margin: 0 0 16px; font-size: 16px; line-height: 28px; opacity: .75; overflow-wrap: anywhere; }
.contacto a { color: var(--blanco); text-decoration: none; }
.contacto a:hover { color: var(--naranja); }

/* =====================================================================
   PIE Y AVISO DE COOKIES
   ===================================================================== */
.pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding: 24px 16px 96px;  /* abajo deja sitio al aviso de cookies */
	background: var(--oscuro);
}
.pie p { margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.pie a { font-size: 16px; color: rgba(255, 255, 255, .5); text-decoration: none; }
.pie a:hover { color: var(--blanco); }
.pie a.actual { color: var(--blanco); text-decoration: underline; }

.aviso-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
	padding: 10px;
	text-align: center;
	background-color: rgba(224, 99, 0, .69);
	border-top: 1px solid var(--blanco);
}
.aviso-cookies p { margin: 0; font-size: .9rem; }
.aviso-cookies button {
	padding: 5px 14px;
	font-family: var(--letra);
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--blanco);
	background-color: var(--azul-cookies);
	border: 0;
	cursor: pointer;
}
.aviso-cookies.oculto { display: none; }

/* =====================================================================
   PUNTOS DE LA DERECHA (los crea js/web.js; uno por sección)
   ===================================================================== */
.puntos { display: none; }

/* =====================================================================
   PÁGINAS LEGALES: mismo diseño en claro
   ===================================================================== */
.pagina-legal { background-color: var(--claro); color: var(--texto-claro); }
.pagina-legal .seccion { background: var(--claro); }
.pagina-legal .titulo, .pagina-legal .texto { color: var(--texto-claro); }
.pagina-legal .titulo-fondo { color: #6d6d6d; }
.pagina-legal .bajar span { color: var(--texto-claro); }
.pagina-legal .menu { background: #424242; }
.pagina-legal .pie { background: var(--claro); }
.pagina-legal .pie p, .pagina-legal .pie a { color: var(--texto-claro); }
.pagina-legal .pie a:hover { color: #000; }
.titulo-aviso { font-size: 30px; text-decoration: underline; margin-bottom: 24px; }
.texto-legal { text-align: center; }

/* Tablas de protección de datos. En el móvil, cada fila se apila:
   el título arriba y el texto debajo, a todo el ancho. */
.tabla-legal {
	width: 100%;
	border-collapse: collapse;
	border: 2px solid #757575;
	box-shadow: 2px 2px 3px gray;
	text-align: left;
	font-size: 15px;
	line-height: 1.5;
	color: var(--texto-claro);
}
.tabla-legal th, .tabla-legal td { padding: 5px; border: 1px solid #757575; vertical-align: middle; }
.tabla-legal th { font-weight: 700; text-align: left; }
.tabla-legal td.negrita, .tabla-legal b { font-weight: 700; }
.tabla-legal a { color: #252525; text-decoration: underline; }
@media (max-width: 600px) {
	.tabla-legal, .tabla-legal tbody, .tabla-legal tr, .tabla-legal th, .tabla-legal td { display: block; width: 100%; }
	.tabla-legal th { border-bottom: 0; padding-bottom: 0; }
	.tabla-legal td { border-top: 0; }
	.tabla-legal tr + tr th { border-top: 2px solid #757575; }
}

/* =====================================================================
   ORDENADOR Y TABLETA (desde 768 px de ancho)
   ===================================================================== */
@media (min-width: 768px) {

	.logo { position: fixed; top: 32px; left: 64px; }
	.logo img { height: 48px; }

	.boton-menu { top: 32px; right: 56px; background: transparent; }

	/* El menú va sobre la página difuminada, sin fondo propio */
	.menu { background: transparent; }
	.menu li { font-size: 3rem; line-height: .8; }

	.seccion { min-height: 100vh; padding: 96px 0; }
	.con-paneles { padding: 0; }
	.panel { padding: 96px 0; }
	.panel.activo, .panel.saliendo { min-height: 100vh; }

	.titulo { font-size: 3rem; }
	.texto { font-size: 1.5rem; }
	.reducido .texto { width: 80%; margin-left: auto; margin-right: auto; }

	.titulo-fondo {
		display: block;
		position: absolute;
		/* A media altura de la sección; en las muy largas (aviso legal), a
		   media pantalla, para que no se vaya abajo del todo. */
		top: 50%;
		top: min(50%, 50vh);
		left: 85px;
		z-index: 0;
		margin: 0;
		font-family: var(--titulos);
		font-size: 8rem;
		font-weight: 700;
		line-height: 12rem;
		text-transform: uppercase;
		white-space: nowrap;
		writing-mode: vertical-rl;
		color: var(--blanco);
		opacity: 0;
		transform: translateX(-50%) translateY(-50%) scale(1.2);
		transition: opacity .3s ease-in-out .3s, transform .3s ease-in-out .3s;
		pointer-events: none;
		user-select: none;
	}
	/* Los títulos largos van más pequeños y en dos columnas */
	.titulo-fondo.pequeno { font-size: 4rem; line-height: 1; white-space: normal; max-height: 50vh; }
	.activa .titulo-fondo { opacity: .4; transform: translateX(-50%) translateY(-50%); }
	.envoltorio, .contacto { position: relative; z-index: 1; }

	.bajar {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 32px;
		z-index: 2;
		width: 200px;
		height: 50px;
		margin-left: -100px;
		font-size: 12px;
		line-height: 12px;
		text-align: center;
		text-decoration: none;
		color: var(--blanco);
	}
	.bajar span { position: absolute; left: 0; right: 0; bottom: 0; }
	/* La uve de la flecha */
	.bajar::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 30px;
		width: 12px;
		height: 12px;
		margin-left: -6px;
		border: 2px solid currentColor;
		border-top: 0;
		border-right: 0;
		transform: rotate(-45deg);
		opacity: .5;
		transition: .3s;
	}
	.bajar:hover { color: var(--blanco); }
	.bajar:hover::before { bottom: 18px; opacity: 1; }

	.contacto { flex-direction: row; }
	.contacto > div { flex: 1 1 0; }

	.puntos {
		display: block;
		position: fixed;
		top: 50%;
		right: 78px;
		z-index: 100;
		transform: translateY(-50%);
	}
	.puntos ul { list-style: none; margin: 0; padding: 0; }
	.puntos li { width: 10px; height: 10px; margin: 10px 0; }
	.puntos a { position: relative; display: block; width: 10px; height: 10px; opacity: .2; transition: .3s; }
	.puntos a:hover { opacity: .6; }
	.puntos span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 8px;
		margin: -4px 0 0 -4px;
		border-radius: 30px;
		background: var(--blanco);
	}
	.puntos span::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .15); transition: .3s; }
	.puntos a.activo { opacity: 1; }
	.puntos a.activo span::after { inset: -4px; }
	/* Etiqueta con el nombre al pasar el ratón */
	.puntos a::before {
		content: attr(data-nombre);
		position: absolute;
		right: 22px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 12px;
		white-space: nowrap;
		color: var(--blanco);
		opacity: 0;
		transition: .3s;
		pointer-events: none;
	}
	.puntos a:hover::before { opacity: 1; }

	/* Pie fijo abajo a la izquierda, como en la web anterior */
	.pie {
		position: fixed;
		left: 16px;
		right: 64px;
		bottom: 32px;
		z-index: 10;
		padding: 0;
		gap: 0;
		background: transparent;
		flex-wrap: nowrap;
	}
	.pie p { position: relative; top: 3px; }
	.pie a { position: relative; top: 3px; margin-left: 3%; }
	.pagina-legal .pie { background: transparent; }

	.aviso-cookies { flex-wrap: nowrap; }
	.aviso-cookies p { margin: 15px 0 16px; }

	.campo-adjunto input { font-size: 16px; }
}

@media (max-width: 1366px) and (min-width: 768px) {
	.titulo-fondo { font-size: 5rem; line-height: 7.5rem; }
	.titulo-fondo.pequeno { font-size: 4rem; line-height: 1; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.titulo-fondo, .titulo-fondo.pequeno { font-size: 5rem; left: 55px; }
}

/* Pantalla completa sección a sección (como fullPage.js en la web anterior),
   sólo si cabe: ordenador o tableta, y con altura suficiente. */
@media (min-width: 768px) and (min-height: 480px) {
	html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
	.seccion { scroll-snap-align: start; }
}
@media (max-height: 479px) {
	.bajar { display: none; }
}

/* Quien tiene pedido al sistema "reducir movimiento", sin animaciones */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}