/**
 * Cabecera, pie y barra fija de movil.
 *
 * La cabecera mantiene el telefono visible en todos los tamanos de pantalla,
 * y en movil la barra inferior duplica ese acceso. Redundancia deliberada:
 * es el canal por el que entran la mayoria de los leads.
 */

@layer layout {

	/* ==================================================================
	   Salto al contenido
	   ================================================================== */

	.salto-contenido {
		position: absolute;
		top: -100%;
		left: var(--space-4);
		z-index: 100;
		padding: var(--space-3) var(--space-4);
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		background: var(--color-primary-800);
		color: var(--color-white);
		font-weight: 600;
		text-decoration: none;
	}

	.salto-contenido:focus {
		top: 0;
		color: var(--color-white);
	}

	/* ==================================================================
	   Cabecera
	   ================================================================== */

	.cabecera {
		position: sticky;
		top: 0;
		z-index: 50;
		background: var(--color-white);
		border-block-end: 1px solid var(--color-border);
	}

	/* --- Cinta superior (oficina + contacto) ---------------------------
	   Segunda fila de cabecera en escritorio: saca los enlaces de "la
	   oficina" y contacto de la fila principal para que los cinco ejes de
	   producto quepan en una sola línea. En móvil se oculta y sus enlaces
	   viven dentro del panel de la hamburguesa. */
	.cabecera__cinta {
		display: none;
	}

	/* Duplicado de esos enlaces dentro del panel: solo para móvil. */
	.navegacion__superior {
		display: none;
	}

	@media (width >= 60rem) {
		.cabecera__cinta {
			display: block;
			border-block-end: 1px solid var(--color-border);
			background: var(--color-surface-neutra);
			font-size: var(--text-small);
		}

		.cabecera__cinta-interior {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-4);

			/* Altura fija y contenido centrado: logo y enlaces comparten eje. */
			min-height: 2.5rem;
		}

		/* En la cinta el sello va en fila (logo + DGSFP), compacto y sin el
		   borde separador que usa en la fila principal. */
		.cabecera__cinta .sello-oac {
			flex-direction: row;
			align-items: center;
			gap: var(--space-3);
			padding-inline-start: 0;
			border-inline-start: 0;
		}

		.cabecera__cinta .sello-oac__logo {
			height: 1.5rem;
		}

		.cabecera__cinta .menu {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--space-1) var(--space-6);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		/* Cada elemento como caja flex: elimina el desajuste de línea base que
		   dejaba el primer enlace ("Sobre nosotros") más arriba que el resto. */
		.cabecera__cinta .menu li {
			display: flex;
			align-items: center;
			margin: 0;
		}

		.cabecera__cinta .menu a {
			display: flex;
			align-items: center;
			padding-block: var(--space-1);
			color: var(--color-muted);
			font-weight: 500;
			text-decoration: none;
		}

		.cabecera__cinta .menu a:hover,
		.cabecera__cinta .current-menu-item > a {
			color: var(--color-primary-500);
		}
	}

	.cabecera__interior {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		min-height: 4.5rem;
	}

	.logo {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
	}

	/* El logotipo lo genera WordPress desde la biblioteca, asi que se estiliza
	   por la clase que anade el nucleo y no por una propia. */
	.logo img,
	.custom-logo {
		width: 130px;
		height: auto;
	}

	.logo--texto {
		color: var(--color-primary-500);
		font-family: var(--font-heading);
		font-size: var(--text-h3);
		font-weight: 700;
		text-decoration: none;
	}

	/* Sello de OAC. Separado del logo de Mazaseg por una linea fina: son dos
	   marcas, la propia y el aval de Adeslas, y sin separacion se leerian como
	   una sola. Mazaseg manda en tamano; esto es el respaldo. */
	.sello-oac {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		gap: 0.15rem;
		padding-inline-start: var(--space-4);
		border-inline-start: 1px solid var(--color-border);
	}

	.sello-oac__logo {
		width: auto;
		height: 2rem;
	}

	.sello-oac__texto {
		max-width: 12rem;
		color: var(--color-muted);
		font-size: var(--text-small);
		line-height: 1.2;
	}

	.sello-oac__dgs {
		color: var(--color-muted);
		font-size: var(--text-overline);
		letter-spacing: 0.02em;
	}

	.sello-oac__excelente {
		color: var(--color-primary-700);
		font-size: var(--text-small);
		font-weight: 700;
		letter-spacing: 0.01em;
	}

	.cabecera__navegacion {
		flex-grow: 1;
	}

	.cabecera__navegacion .menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1) var(--space-5, 1.25rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cabecera__navegacion .menu li {
		margin: 0;
	}

	/* Acotado a `.menu`: dentro del nav tambien hay un boton, y esta capa se
	   aplica despues de la de componentes, asi que una regla mas amplia le
	   pisaria el color y el display sin importar la especificidad. */
	.cabecera__navegacion .menu a {
		display: block;
		padding: var(--space-2) 0;
		color: var(--color-ink);
		font-weight: 600;
		text-decoration: none;
	}

	.cabecera__navegacion .menu a:hover,
	.cabecera__navegacion .current-menu-item > a {
		color: var(--color-primary-500);
	}

	/* --- Submenús ------------------------------------------------------
	   En escritorio son desplegables (hover/foco); en móvil se muestran
	   indentados dentro del panel a pantalla completa (ver más abajo). */
	.cabecera__navegacion .sub-menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Icono SVG dentro de un enlace del menú (submenú de "otros seguros"). */
	.cabecera__navegacion .menu-icono {
		display: inline-flex;
		flex-shrink: 0;
		margin-inline-end: var(--space-3);
		fill: var(--color-primary-500);
	}

	.cabecera__navegacion .menu-icono svg {
		width: 1.25rem;
		height: 1.25rem;
		fill: inherit;
	}

	/* --- Mega-menú de salud: estilos comunes a PC y móvil -------------- */
	.cabecera__navegacion .mega__titulo {
		margin: 0 0 var(--space-2);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--color-muted);
	}

	.cabecera__navegacion .mega__enlaces {
		display: grid;
		gap: 0.1rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Enlace del mega: icono + (nombre / subtítulo breve). */
	.cabecera__navegacion .mega__enlaces a {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-sm);
		color: var(--color-ink);
		text-decoration: none;
	}

	.cabecera__navegacion .mega-enlace__cuerpo {
		display: flex;
		min-inline-size: 0;
		flex-direction: column;
		gap: 0.1rem;
	}

	.cabecera__navegacion .mega-enlace__nombre {
		font-weight: 600;
		white-space: nowrap;
	}

	.cabecera__navegacion .mega-enlace__sub {
		font-size: var(--text-small);
		font-weight: 400;
		line-height: 1.25;
		color: var(--color-muted);
	}

	/* Al pasar el ratón se resalta el nombre; el subtítulo se mantiene. */
	.cabecera__navegacion .mega__enlaces a:hover .mega-enlace__nombre {
		color: var(--color-primary-500);
	}

	.cabecera__navegacion .mega-icono {
		display: inline-flex;
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		fill: var(--color-primary-500);
	}

	.cabecera__navegacion .mega-icono svg {
		width: 100%;
		height: 100%;
		fill: inherit;
	}

	/* Planes de salud: mismo corazón con degradado de azul según el nivel
	   (Go el más claro, Plena Total el más oscuro). */
	.cabecera__navegacion .mega__enlaces--planes li:nth-child(1) .mega-icono {
		fill: #63aede;
	}

	.cabecera__navegacion .mega__enlaces--planes li:nth-child(2) .mega-icono {
		fill: #2f93cf;
	}

	.cabecera__navegacion .mega__enlaces--planes li:nth-child(3) .mega-icono {
		fill: var(--color-primary-500);
	}

	.cabecera__navegacion .mega__enlaces--planes li:nth-child(4) .mega-icono {
		fill: var(--color-primary-700);
	}

	.cabecera__navegacion .mega__enlaces--planes li:nth-child(5) .mega-icono {
		fill: var(--color-primary-900);
	}

	.cabecera__navegacion .mega__ayuda {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-6);
		border-radius: var(--radius-md);
		background: var(--color-primary-50);
	}

	.cabecera__navegacion .mega__ayuda-titulo {
		margin: 0;
		font-family: var(--font-heading);
		font-weight: 700;
		color: var(--color-primary-900);
	}

	.cabecera__navegacion .mega__ayuda-texto {
		margin: 0;
		font-size: var(--text-small);
		line-height: 1.4;
		color: var(--color-body);
	}

	/* Botón blanco sobre la tarjeta azul clara; al pasar el ratón se invierte.
	   `margin-block-start: auto` lo empuja al fondo de la tarjeta cuando esta
	   se estira a la altura de las columnas, dejando el mismo aire arriba y
	   abajo (el padding de la tarjeta es simétrico). */
	.cabecera__navegacion .mega__ayuda .boton {
		/* `.menu a` (más específico que `.boton`) le pisaba display y padding y
		   descentraba el texto: los reponemos aquí, que ganamos por clases. */
		display: flex;
		margin-block-start: auto;
		padding: var(--space-3);
		white-space: nowrap;
		background: var(--color-white);
		border-color: transparent;
		color: var(--color-primary-700);
	}

	.cabecera__navegacion .mega__ayuda .boton:hover {
		background: var(--color-primary-900);
		border-color: var(--color-primary-900);
		color: var(--color-white);
	}

	/* Barra "ver todos" a sangre y pegada al fondo del panel, azul de marca.
	   El selector lleva `.mega` para ganar al color de `.menu a` (que si no,
	   por el elemento `a`, dejaría el texto en tinta en vez de blanco). */
	.cabecera__navegacion .mega .mega__todos {
		display: block;
		padding: var(--space-3);
		background: var(--color-primary-500);
		color: var(--color-white);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.cabecera__navegacion .mega .mega__todos::after {
		content: "→";
		margin-inline-start: var(--space-2);
	}

	.cabecera__navegacion .mega .mega__todos:hover {
		background: var(--color-primary-700);
		color: var(--color-white);
	}

	@media (width >= 60rem) {
		.cabecera__navegacion .menu > li {
			position: relative;
		}

		/* Con icono inyectado, el enlace top-level alinea icono + texto (+ flecha). */
		.cabecera__navegacion .menu > li > a {
			display: flex;
			align-items: center;
		}

		/* Flechita que avisa de que el elemento despliega. */
		.cabecera__navegacion .menu-item-has-children > a::after,
		.cabecera__navegacion .has-mega > a::after {
			content: "";
			display: inline-block;
			width: 0.45rem;
			height: 0.45rem;
			margin-inline-start: 0.45em;
			border-inline-end: 2px solid currentColor;
			border-block-end: 2px solid currentColor;
			transform: translateY(-0.15em) rotate(45deg);
		}

		.cabecera__navegacion .sub-menu {
			position: absolute;
			inset-block-start: 100%;
			inset-inline-start: 0;
			z-index: 60;
			/* max-content: el panel se ajusta al enlace más largo (icono +
			   texto sin cortar) y respeta su padding a la derecha. */
			width: max-content;
			min-width: 15rem;
			padding: var(--space-2);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-md);
			background: var(--color-white);
			box-shadow: var(--shadow-md);
			/* Oculto hasta hover/foco, sin salir del flujo del foco. */
			opacity: 0;
			visibility: hidden;
			transform: translateY(0.35rem);
			transition:
				opacity var(--transition),
				transform var(--transition),
				visibility var(--transition);
		}

		.cabecera__navegacion .menu > li:hover > .sub-menu,
		.cabecera__navegacion .menu > li:focus-within > .sub-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.cabecera__navegacion .sub-menu a {
			display: flex;
			align-items: center;
			padding: var(--space-3) var(--space-4);
			border-radius: var(--radius-sm);
			font-weight: 500;
			white-space: nowrap;
		}

		.cabecera__navegacion .sub-menu a:hover {
			background: var(--color-surface-neutra);
			color: var(--color-primary-500);
		}

		/* --- Mega-menú de salud (escritorio) ---------------------------- */
		.cabecera__navegacion .mega {
			position: absolute;
			inset-block-start: 100%;
			inset-inline-start: 0;
			z-index: 60;
			display: flex;
			flex-direction: column;
			gap: 0;
			inline-size: min(64rem, 94vw);
			padding: 0;
			overflow: hidden;
			border-radius: var(--radius-md);
			background: var(--color-white);
			box-shadow: var(--shadow-md);
			opacity: 0;
			visibility: hidden;
			transform: translateY(0.35rem);
			transition:
				opacity var(--transition),
				transform var(--transition),
				visibility var(--transition);
		}

		.cabecera__navegacion .menu > li.has-mega:hover > .mega,
		.cabecera__navegacion .menu > li.has-mega:focus-within > .mega {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		/* Fila superior: columnas de enlaces + tarjeta de ayuda. El padding del
		   panel vive aquí (no en .mega) para que la barra de abajo llegue a los
		   bordes y quede pegada al fondo. */
		.cabecera__navegacion .mega__principal {
			display: flex;
			gap: var(--space-8);
			padding: var(--space-6);
		}

		.cabecera__navegacion .mega__grupos {
			display: flex;
			flex: 1;
			gap: var(--space-8);
		}

		/* Columnas iguales: reparten el ancho y dan sitio a que los planes
		   quepan en una línea. */
		.cabecera__navegacion .mega__grupo {
			flex: 1;
		}

		/* La ayuda es una tarjeta lateral destacada, ancho fijo. */
		.cabecera__navegacion .mega__ayuda {
			flex: 0 0 15rem;
		}
	}

	.menu-vacio {
		margin: 0;
		color: var(--color-muted);
		font-size: var(--text-small);
		font-style: italic;
	}

	.cabecera__acciones {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-inline-start: auto;
	}

	/* El azul del logotipo, no el oscurecido: en la cabecera conviven a
	   centimetros y cualquier diferencia se lee como error de color. */
	.cabecera__telefono {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-height: var(--touch-min);
		color: var(--color-primary-500);
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	.cabecera__telefono svg {
		width: 1.125rem;
		height: 1.125rem;
	}

	/* Sin borde: el icono ya se explica solo. Conserva los 44x44 del objetivo
	   tactil aunque no se vea su contorno, y el fondo solo aparece al pulsar
	   para dar respuesta al toque. */
	.cabecera__hamburguesa {
		display: none;
		align-items: center;
		justify-content: center;
		width: var(--touch-min);
		height: var(--touch-min);
		padding: 0;
		border: 0;
		border-radius: var(--radius-md);
		background: transparent;

		color: var(--color-ink);
		cursor: pointer;
	}

	.cabecera__hamburguesa:active {
		background: var(--color-surface-neutra);
	}

	.cabecera__hamburguesa svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	/* La barra interna y el boton de cerrar solo existen en el menu a
	   pantalla completa; en escritorio sobran. */
	.navegacion__barra,
	.navegacion__cerrar,
	.navegacion__contacto,
	.navegacion__rotulo {
		display: none;
	}

	/* --- Movil: menu a pantalla completa --------------------------------
	   Ocupar toda la pantalla elimina el ruido de fondo y deja sitio para
	   poner el telefono y el WhatsApp dentro del propio menu, que es donde
	   acaba mucha gente despues de mirar las opciones.

	   El telefono sigue ademas en la barra superior y en la barra fija
	   inferior: redundancia deliberada en el canal que mas convierte. */

	@media (width < 60rem) {

		/* Cabecera mas fina: en movil ocupa pantalla, que es justo lo que le
		   falta. Al ir pegada arriba, cada pixel que se ahorra se ve durante
		   todo el desplazamiento. */
		.cabecera__interior {
			min-height: 3.5rem;
		}

		/* El sello de OAC no cabe en la cabecera fina de movil sin recargarla.
		   La identificacion y el codigo DGSFP siguen en el pie, visibles en
		   todos los tamanos, asi que aqui no se pierde nada obligatorio. */
		.sello-oac {
			display: none;
		}

		/* Mas pequeno en movil para aligerar la cabecera. */
		.logo img,
		.custom-logo {
			width: 110px;
			height: auto;
		}

		/* El orden del HTML pone el boton antes del telefono, porque asi es
		   como conviene que lo lea un lector de pantalla. Visualmente
		   interesa lo contrario: logo, telefono y el boton al extremo. */
		.cabecera__hamburguesa {
			display: inline-flex;
			order: 3;
		}

		.cabecera__acciones {
			order: 2;

			/* Ocupa todo el hueco entre el logo y la hamburguesa para que el
			   CTA se estire al máximo ancho disponible. */
			flex: 1;
		}

		/* En movil, el boton de accion de la cabecera es "Calcula tu seguro"
		   (el calculador, que es la conversion principal). El telefono no se
		   pierde: sigue en la barra fija inferior y dentro del panel del menu,
		   ambos siempre visibles. */
		.cabecera__telefono {
			display: none;
		}

		/* Ocupa el ancho del hueco de acciones (entre logo y hamburguesa).
		   Hereda coral, radio y contraste de `.boton--acento`. */
		.cabecera__cta {
			width: 100%;
			min-height: 2.5rem;
			padding-inline: var(--space-3);
			font-size: var(--text-small);
			white-space: nowrap;
		}

		.cabecera__navegacion {
			position: fixed;
			inset: 0;
			z-index: 70;
			display: flex;
			flex-direction: column;

			/* El relleno inferior deja libre la franja de la bandeja, que se
			   pinta por encima del panel: sin el, el CTA quedaria tapado.
			   El respaldo a 0px cubre la franja entre 48rem y 60rem, donde
			   el menu ya es de pantalla completa pero la bandeja no existe. */
			padding: 0 var(--gutter) calc(var(--barra-alto, 0px) + var(--space-6));
			overflow-y: auto;
			overscroll-behavior: contain;
			background: var(--color-white);

			/* Fuera de pantalla en lugar de display:none, para que la
			   transicion tenga algo que animar. */
			transform: translateX(100%);
			visibility: hidden;
			transition: transform 220ms ease, visibility 220ms;
		}

		.cabecera__navegacion.esta-abierto {
			transform: translateX(0);
			visibility: visible;
		}

		/* Misma altura que la cabecera: al abrir el menu, el logo no debe
		   saltar de sitio. */
		.navegacion__barra {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 3.5rem;
			margin-inline: calc(var(--gutter) * -1);
			padding-inline: var(--gutter);
			border-block-end: 1px solid var(--color-border);
		}

		/* Mismo tratamiento que el boton que lo abre: son el mismo control en
		   dos estados y deben verse igual. */
		.navegacion__cerrar {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: var(--touch-min);
			height: var(--touch-min);
			padding: 0;
			border: 0;
			border-radius: var(--radius-md);
			background: transparent;
			color: var(--color-ink);
			cursor: pointer;
		}

		.navegacion__cerrar:active {
			background: var(--color-surface-neutra);
		}

		.navegacion__cerrar svg {
			width: 1.5rem;
			height: 1.5rem;
		}

		/* Rótulo de sección "Seguros" sobre el bloque de productos. */
		.navegacion__rotulo {
			display: block;
			margin: 0;
			padding-block: var(--space-4) var(--space-1);
			font-size: var(--text-overline);
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: var(--color-muted);
		}

		.cabecera__navegacion .menu {
			flex-direction: column;
			gap: 0;
			padding-block: var(--space-4);
		}

		.cabecera__navegacion .menu li + li {
			border-block-start: 1px solid var(--color-border);
		}

		.cabecera__navegacion .menu a {
			min-height: 3.25rem;
			display: flex;
			align-items: center;
			font-family: var(--font-heading);
			font-size: var(--text-h3);
			font-weight: 600;
		}

		/* Submenús dentro del panel: indentados y más discretos que las
		   secciones raíz, pero manteniendo el objetivo táctil de 44 px. */
		.cabecera__navegacion .sub-menu {
			padding-inline-start: var(--space-4);
			border-block-start: 1px solid var(--color-border);
		}

		.cabecera__navegacion .sub-menu a {
			min-height: 2.75rem;
			font-family: var(--font-body);
			font-size: var(--text-body-l);
			font-weight: 500;
		}

		/* Mega de salud dentro del panel: grupos apilados con su título, e
		   indentado como los demás submenús. La tarjeta de ayuda va al final. */
		.cabecera__navegacion .mega {
			padding-inline-start: var(--space-4);
			border-block-start: 1px solid var(--color-border);
		}

		.cabecera__navegacion .mega__grupo {
			padding-block: var(--space-3);
		}

		.cabecera__navegacion .mega__grupo + .mega__grupo {
			border-block-start: 1px solid var(--color-border);
		}

		.cabecera__navegacion .mega__enlaces a {
			min-height: 2.75rem;
			display: flex;
			align-items: flex-start;
			font-size: var(--text-body-l);
			font-weight: 500;
		}

		.cabecera__navegacion .mega__ayuda {
			margin-block: var(--space-3);
		}

		/* Enlaces de oficina y contacto dentro del panel (en escritorio van
		   en la cinta superior). Separados del bloque de producto. */
		.navegacion__superior {
			display: block;
			margin-block-start: var(--space-2);
			border-block-start: 2px solid var(--color-border);
		}

		.navegacion__contacto {
			display: grid;
			gap: var(--space-3);

			/* Empuja el bloque de contacto al fondo del panel. */
			margin-block-start: auto;
			padding-block-start: var(--space-6);
		}

		/* Con el menu abierto, el fondo no debe poder desplazarse. */
		/* --- Navegación por pantallas (drill-down) --------------------
		   El mega de salud y el submenú de "más seguros" pasan a ser
		   sub-pantallas: cerradas de primeras, entran desde la derecha al
		   tocar su sección, con barra de "volver" arriba. El JS las abre; sin
		   JS, el enlace del padre lleva a su página (degradación elegante). */
		.cabecera__navegacion .sub-menu,
		.cabecera__navegacion .mega {
			position: fixed;
			inset: 0;
			z-index: 72;
			display: flex;
			flex-direction: column;
			gap: 0;
			padding: calc(3.5rem + var(--space-3)) var(--gutter) calc(var(--barra-alto, 0px) + var(--space-6));
			border: 0;
			overflow-y: auto;
			overscroll-behavior: contain;
			background: var(--color-white);
			transform: translateX(100%);
			visibility: hidden;
			transition: transform 220ms ease, visibility 220ms;
		}

		.cabecera__navegacion .sub-menu.esta-activo,
		.cabecera__navegacion .mega.esta-activo {
			transform: translateX(0);
			visibility: visible;
		}

		/* Barra superior de la sub-pantalla (volver + título-enlace al hub). */
		.navegacion__subbar {
			position: fixed;
			inset-block-start: 0;
			inset-inline: 0;
			z-index: 73;
			display: none;
			align-items: center;
			gap: var(--space-3);
			min-height: 3.5rem;
			padding-inline: var(--gutter);
			border-block-end: 1px solid var(--color-border);
			background: var(--color-white);
		}

		.cabecera__navegacion.con-sub .navegacion__subbar {
			display: flex;
		}

		.navegacion__volver {
			display: inline-flex;
			align-items: center;
			gap: var(--space-1);
			min-height: var(--touch-min);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--color-primary-500);
			font-family: var(--font-body);
			font-size: var(--text-body);
			font-weight: 700;
			cursor: pointer;
		}

		.navegacion__volver svg {
			width: 1.25rem;
			height: 1.25rem;
		}

		.navegacion__subtitulo {
			font-family: var(--font-heading);
			font-size: var(--text-h4);
			font-weight: 700;
			color: var(--color-ink);
			text-decoration: none;
		}

		/* Indicador ">" en los ítems que abren una sub-pantalla. */
		.cabecera__navegacion .menu > li.tiene-sub > a::after {
			content: "";
			margin-inline-start: auto;
			width: 0.5rem;
			height: 0.5rem;
			border-inline-end: 2px solid var(--color-muted);
			border-block-start: 2px solid var(--color-muted);
			transform: rotate(45deg);
		}

		body.menu-abierto {
			overflow: hidden;
		}
	}

	/* ==================================================================
	   Migas de pan
	   ================================================================== */

	.migas {
		padding-block: var(--space-4);
		background: var(--color-primary-500);
	}

	.migas__lista {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--space-2);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--text-small);
		/* Una sola fila: si no cabe (móvil), se desliza en horizontal en vez de
		   partirse en dos líneas. */
		overflow-x: auto;
		scrollbar-width: none;
	}

	.migas__lista::-webkit-scrollbar {
		display: none;
	}

	.migas__paso {
		margin: 0;
		flex-shrink: 0;
		color: var(--color-white);
		white-space: nowrap;
	}

	/* El separador se genera desde CSS y no va en el HTML: no es contenido,
	   y en el marcado lo leeria un lector de pantalla como si lo fuera. */
	.migas__paso + .migas__paso::before {
		content: "›";
		margin-inline-end: var(--space-2);
		color: var(--color-primary-100);
	}

	.migas__paso a {
		color: var(--color-white);
		text-decoration: none;
	}

	.migas__paso a:hover {
		color: var(--color-white);
		text-decoration: underline;
	}

	.migas__paso [aria-current="page"] {
		color: var(--color-white);
		font-weight: 600;
	}

	/* ==================================================================
	   Boton flotante de WhatsApp (escritorio)
	   ================================================================== */

	/* En movil este acceso lo cubre la barra inferior; aqui estorbaria. */
	.flotante-whatsapp {
		display: none;
	}

	@media (width >= 48rem) {

		.flotante-whatsapp {
			position: fixed;
			right: var(--gutter);
			bottom: var(--gutter);
			z-index: 60;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: var(--space-3);
		}

		/* --- El boton --- */

		.flotante-whatsapp__boton {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 3.5rem;
			height: 3.5rem;
			border-radius: var(--radius-pill);
			background: var(--color-whatsapp);
			color: var(--color-white);
			box-shadow: var(--shadow-lg);
			transition: transform var(--transition), background-color var(--transition);
		}

		.flotante-whatsapp__boton:hover {
			background: var(--color-whatsapp-oscuro);
			color: var(--color-white);
			transform: scale(1.06);
		}

		.flotante-whatsapp__boton:active {
			transform: scale(0.97);
		}

		.flotante-whatsapp__boton svg {
			width: 1.75rem;
			height: 1.75rem;
		}

		/* Onda de atencion. Se limita a tres repeticiones a proposito: un
		   movimiento perpetuo en una esquina fija cansa la vista y, pasados
		   los cinco segundos, la WCAG 2.2.2 exigiria un control para
		   detenerlo. Tres pasadas avisan y se apagan solas. */
		.flotante-whatsapp__boton::after {
			content: "";
			position: absolute;
			inset: 0;
			border: 2px solid var(--color-whatsapp);
			border-radius: inherit;
			opacity: 0;
			pointer-events: none;
		}

		.flotante-whatsapp.esta-avisando .flotante-whatsapp__boton::after {
			animation: mazaseg-onda 1.6s ease-out 3;
		}

		/* --- La burbuja --- */

		.flotante-whatsapp__burbuja {
			position: relative;
			display: flex;
			max-width: 17.5rem;
			padding: var(--space-4);
			border-radius: var(--radius-lg);
			background: var(--color-white);
			box-shadow: var(--shadow-lg);

			/* Sale desde el boton, no desde la nada: refuerza que el aviso
			   viene de ahi y adonde hay que pulsar. */
			transform: translateY(0.5rem) scale(0.96);
			transform-origin: bottom right;
			opacity: 0;
			transition:
				opacity var(--transition),
				transform var(--transition);
		}

		.flotante-whatsapp__burbuja[hidden] {
			display: none;
		}

		.flotante-whatsapp__burbuja.esta-visible {
			transform: translateY(0) scale(1);
			opacity: 1;
		}

		/* Pico apuntando al boton. */
		.flotante-whatsapp__burbuja::after {
			content: "";
			position: absolute;
			right: 1.4rem;
			bottom: -0.45rem;
			width: 0.9rem;
			height: 0.9rem;
			background: var(--color-white);
			transform: rotate(45deg);
		}

		.flotante-whatsapp__mensaje {
			display: block;
			padding-right: var(--space-4);
			color: var(--color-body);
			text-decoration: none;
		}

		/* Sin subrayado hace falta otra senal de que esto se puede pulsar. Se
		   eleva en vez de teñirse: cualquier fondo mas oscuro comeria
		   contraste al texto gris, que ya va justo de margen. */
		.flotante-whatsapp__burbuja.esta-visible:hover {
			transform: translateY(-2px) scale(1);
		}

		.flotante-whatsapp__titulo {
			display: block;
			margin-bottom: var(--space-1);
			color: var(--color-primary-900);
			font-family: var(--font-heading);
			font-size: var(--text-body);
			font-weight: 600;
			line-height: var(--leading-heading);
		}

		.flotante-whatsapp__texto {
			display: block;
			color: var(--color-muted);
			font-size: var(--text-small);
			line-height: 1.45;
		}

		.flotante-whatsapp__cerrar {
			position: absolute;
			top: 0.35rem;
			right: 0.35rem;

			/* 24x24 es el minimo de la WCAG 2.2 para un objetivo puntero. */
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.75rem;
			height: 1.75rem;
			padding: 0;
			border: 0;
			border-radius: var(--radius-pill);
			background: none;
			color: var(--color-muted);
			cursor: pointer;
		}

		.flotante-whatsapp__cerrar:hover {
			background: var(--color-surface);
			color: var(--color-ink);
		}

		.flotante-whatsapp__cerrar svg {
			width: 0.85rem;
			height: 0.85rem;
		}
	}

	@keyframes mazaseg-onda {

		from {
			opacity: 0.5;
			transform: scale(1);
		}

		to {
			opacity: 0;
			transform: scale(1.65);
		}
	}

	/* Quien pide menos movimiento sigue viendo la burbuja: lo que se retira es
	   la animacion, no el aviso. */
	@media (prefers-reduced-motion: reduce) {

		.flotante-whatsapp__burbuja {
			transform: none;
			transition: none;
		}

		.flotante-whatsapp.esta-avisando .flotante-whatsapp__boton::after {
			animation: none;
		}
	}

	/* ==================================================================
	   Barra fija de movil
	   ================================================================== */

	.barra-movil {
		display: none;
	}

	@media (width < 48rem) {

		:root {

			/* 46px. El suelo son los 44px de --touch-min, minimo de objetivo
			   tactil de la WCAG: por debajo, la gente mayor empieza a fallar
			   el toque, y es buena parte del publico de esta web. */
			--barra-boton: 2.875rem;

			/* Alto real de la bandeja. Lo consumen tambien el relleno del
			   body y el del panel del menu, que deben dejarle sitio: una
			   sola fuente para los tres evita que se desincronicen. */
			--barra-alto: calc(var(--barra-boton) + var(--space-3) * 2);
		}

		/* Bandeja gris neutra bajo los botones. Flotando directamente sobre
		   el blanco de la pagina podian confundirse con el contenido. */
		.barra-movil {
			position: fixed;
			inset-inline: 0;
			bottom: 0;
			z-index: 60;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-3);
			padding: var(--space-3) var(--gutter);
			padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
			background: var(--color-surface-neutra);
			border-block-start: 1px solid var(--color-border);
		}

		/* Mismo radio que el resto de botones del sitio: son botones, no un
		   control aparte del sistema. */
		.barra-movil__accion {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--space-2);
			min-height: var(--barra-boton);
			padding-inline: var(--space-4);
			border-radius: var(--radius-md);
			color: var(--color-white);
			font-weight: 700;
			text-decoration: none;
			transition: transform var(--transition);
		}

		.barra-movil__accion:active {
			transform: scale(0.97);
		}

		.barra-movil__accion svg {
			flex-shrink: 0;
			width: 1.25rem;
			height: 1.25rem;
		}

		.barra-movil__accion--llamar {
			background: var(--color-primary-500);
		}

		/* Aqui va el verde oscuro y no el del flotante a proposito: este boton
		   lleva la palabra "WhatsApp" escrita, y el texto exige 4.5:1 (4.31:1
		   se queda a un pelo, ver tests/color.test.php). El flotante solo
		   lleva el icono, que es un objeto grafico y se conforma con 3:1, y
		   por eso puede permitirse el verde mas claro. */
		.barra-movil__accion--whatsapp {
			background: var(--color-whatsapp-oscuro);
		}

		/* Sitio para que la bandeja no tape el final del contenido. */
		body {
			padding-block-end: calc(var(--barra-alto) + var(--space-6));
		}
	}

	/* ==================================================================
	   Pie
	   ================================================================== */

	.pie {
		padding-block: var(--space-12) var(--space-8);
		background: var(--color-primary-900);
		color: #b8c6d2;
	}

	.pie a {
		color: var(--color-white);
		text-decoration: none;
	}

	.pie a:hover {
		color: var(--color-white);
		text-decoration: underline;
	}

	.pie__superior {
		display: grid;
		gap: var(--space-8);
	}

	@media (width >= 48rem) {

		.pie__superior {
			grid-template-columns: 1.4fr 1fr 1fr 1fr;
		}
	}

	.pie__titulo {
		margin-block-end: var(--space-3);
		color: var(--color-white);
		font-size: var(--text-body);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* El logotipo es azul: sobre el pie oscuro se invierte a blanco. Con SVG
	   se resolveria con `fill`; con PNG hace falta el filtro. */
	.pie .logo img,
	.pie .custom-logo {
		filter: brightness(0) invert(1);
	}

	.pie .logo--texto {
		color: var(--color-white);
	}

	.pie__claim {
		margin-block: var(--space-4) var(--space-3);
		max-width: 24rem;
	}

	.pie__aval {
		margin: 0;
		color: var(--color-white);
		font-weight: 600;
	}

	.pie__direccion {
		font-style: normal;
		line-height: var(--leading-body);
	}

	.pie__horario {
		margin-block-start: var(--space-3);
		font-size: var(--text-small);
	}

	.pie__menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pie__menu li {
		margin: 0;
	}

	.pie__menu a {
		display: block;
		padding-block: var(--space-2);
	}

	.pie__inferior {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-4);
		justify-content: space-between;
		margin-block-start: var(--space-12);
		padding-block-start: var(--space-6);
		border-block-start: 1px solid rgb(255 255 255 / 15%);
		font-size: var(--text-small);
	}

	.pie__inferior p {
		margin: 0;
	}

	/* Misma pinta que el menu de arriba: son enlaces del mismo rango y con
	   dos estilos distintos se leerian como dos cosas. */
	.pie__legales {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pie__legales li {
		margin: 0;
	}

	/* Sin atenuar, al reves que el resto del pie: la gente los busca
	   precisamente cuando quiere reclamar algo. */
	.pie__legales a {
		display: block;
		padding-block: var(--space-2);
		color: var(--color-white);
	}

	.pie__legales a:hover {
		color: var(--color-primary-100);
	}

	.pie__mediador {
		max-width: 32rem;
		opacity: 0.75;
	}

	.pie__credito {
		opacity: 0.75;
	}

	/* ==================================================================
	   Barra fija "Quiero que me llamen" (solo escritorio)
	   ================================================================== */

	.barra-llamada {
		display: none;
	}

	@media (width >= 60rem) {
		.barra-llamada {
			position: fixed;
			inset-inline: 0;
			inset-block-end: 0;
			z-index: 80;
			display: block;
			padding-block-end: var(--space-3);
			background: var(--color-primary-800);
			color: var(--color-white);
			box-shadow: 0 -8px 28px rgb(5 46 72 / 32%);
			transform: translateY(100%);
			transition: transform 260ms ease;
		}

		.barra-llamada.esta-visible {
			transform: translateY(0);
		}

		/* Píldora flotante, centrada sobre el borde superior de la barra. */
		.barra-llamada__pill {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: var(--space-2) var(--space-4);
			border-radius: 999px;
			background: var(--color-primary-500);
			color: var(--color-white);
			font-family: var(--font-heading);
			font-size: var(--text-small);
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			white-space: nowrap;
			box-shadow: var(--shadow-md);
		}

		.barra-llamada__interior {
			display: flex;
			align-items: center;
			gap: var(--space-6);
			padding-block: var(--space-3) var(--space-2);
		}

		.barra-llamada__lema {
			flex-shrink: 0;
			margin: 0;
			font-family: var(--font-heading);
			font-size: var(--text-body-l);
			font-weight: 800;
			line-height: 1.05;
			text-transform: uppercase;
			letter-spacing: 0.02em;
		}

		.barra-llamada__lema strong {
			color: var(--color-primary-100);
		}

		.barra-llamada__form {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--space-4);
		}

		.barra-llamada__tel {
			flex: 1;
			min-width: 12rem;
			max-width: 18rem;
		}

		.barra-llamada__consent {
			display: flex;
			align-items: flex-start;
			gap: var(--space-2);
			max-width: 15rem;
			font-size: var(--text-small);
			line-height: 1.25;
			color: rgb(255 255 255 / 88%);
		}

		.barra-llamada__consent input {
			margin-block-start: 0.15em;
		}

		.barra-llamada__consent a {
			color: var(--color-white);
		}

		.barra-llamada__form .boton {
			flex-shrink: 0;
			gap: var(--space-2);
		}

		.barra-llamada__gracias {
			flex: 1;
			margin: 0;
			font-weight: 700;
		}

		.barra-llamada__pie {
			margin: 0;
			color: rgb(255 255 255 / 68%);
			font-size: 0.72rem;
			text-align: center;
		}

		.barra-llamada__cerrar {
			position: absolute;
			top: var(--space-2);
			right: var(--space-3);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 2rem;
			height: 2rem;
			padding: 0;
			border: 0;
			background: transparent;
			color: rgb(255 255 255 / 70%);
			cursor: pointer;
		}

		.barra-llamada__cerrar:hover {
			color: var(--color-white);
		}

		.barra-llamada__cerrar svg {
			width: 1.25rem;
			height: 1.25rem;
		}

		.barra-llamada__hp {
			position: absolute;
			left: -9999px;
		}

		/* La burbuja de WhatsApp sube para no quedar tapada por la barra. */
		.flotante-whatsapp {
			transition: inset-block-end 260ms ease;
		}

		body.con-barra-llamada .flotante-whatsapp {
			inset-block-end: 6rem;
		}
	}
}