/*
 * U1 · Acceso editorial (componentes.md, brief 02 páginas 5 y 9).
 *
 * «¿Qué necesita realmente este espacio?» + DESCUBRIR →. Una puerta a la
 * reflexión, no un CTA comercial: tarjeta de papel, sin color de acción.
 * En E y TA, estrecha y pegada al borde derecho de la apertura, a la
 * altura del titular; en TV y M, en el flujo después de la lista, a ancho
 * completo y en horizontal.
 *
 * Hover (puntero fino) y foco: contraste suave (el papel pasa a
 * --beige-100) y la flecha avanza 6 px, en 220 ms.
 */

.loha-acceso {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	min-height: var(--control-minimo);
	margin-top: var(--separacion);
	padding: 1.25rem 1.5rem;
	background-color: var(--papel);
	color: var(--azul);
	text-decoration: none;
	transition: background-color var(--t-hover) ease;
}

.loha-acceso__pregunta {
	font-family: var(--serif);
	font-size: var(--fs-intro);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.loha-acceso__accion {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 1.5rem;
	color: var(--azul-700);
	/* 13–14 px, como las demás acciones de texto con flecha (SEGUIR,
	   CONTINUAR): 13 px es el mínimo de los enlaces de acción. */
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

/* Móviles estrechos: con DESCUBRIR a 13 px, la pregunta pasaba de tres a
   cinco líneas a 360 px. La flecha, más cerca del texto. */
@media (max-width: 389px) {
	.loha-acceso__accion {
		gap: 0.75rem;
	}
}

.loha-acceso__flecha {
	width: 1.6em;
	height: 1.6em;
	color: var(--azul);
	transition: transform var(--t-hover) var(--curva-suave);
}

/* El contorno de foco, hacia dentro: la tarjeta toca el borde de la
   ventana y hacia fuera quedaría cortado. El foco vuelve aquí al cerrar
   la cortina: tras un toque o un clic no se pinta (foco.js), y eso
   incluye el papel y la flecha. */
.loha-acceso:focus-visible {
	outline-offset: -6px;
}

.loha-acceso:focus-visible:not(.loha-foco-puntero) {
	background-color: var(--beige-100);
}

.loha-acceso:focus-visible:not(.loha-foco-puntero) .loha-acceso__flecha {
	transform: translateX(6px);
}

@media (hover: hover) and (pointer: fine) {
	.loha-acceso:hover {
		background-color: var(--beige-100);
	}

	.loha-acceso:hover .loha-acceso__flecha {
		transform: translateX(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.loha-acceso,
	.loha-acceso__flecha {
		transition: none;
	}
}

/* E y TA: tarjeta estrecha al borde derecho, a la altura del titular, con
   una regla fina arriba como en la previa; la pregunta arriba y la acción
   debajo, con la flecha al final. */
@media (min-width: 1024px) {
	.loha-acceso {
		position: absolute;
		top: var(--area-segura);
		right: 0;
		flex-direction: column;
		align-items: stretch;
		width: clamp(12rem, 13vw, 16rem);
		margin: 0;
		padding: 1.75rem 1.5rem 1.5rem;
	}

	.loha-acceso::before {
		content: "";
		position: absolute;
		top: 1rem;
		right: 1.5rem;
		left: 1.5rem;
		border-top: 1px solid var(--azul-300);
	}

	.loha-acceso__accion {
		justify-content: space-between;
	}
}

/* ── --metodo (01) ────────────────────────────────────────── */
/* La tarjeta «MÉTODO LOHA · Seis fases» de la apertura del 01 (segunda
   revisión del cliente, noviembre de 2026): el mismo componente, en la
   misma posición, con la misma tipografía, hover, foco y adaptación a
   móvil, y desde noviembre de 2026 el mismo comportamiento: abre la
   cortina del método, como «Descubrir» en el 02, con la flecha a la
   derecha, que avanza 6 px al pasar o enfocar. Cambia el acabado, cálido
   y translúcido como en la previa: un cristal tostado sobre la foto, con
   desenfoque, y el texto en claro.
     --acceso-cristal  intensidad del tostado: la mínima con la que el
                       texto cumple sobre la foto (componentes.md).
   Sin desenfoque (navegadores sin backdrop-filter), el mismo tostado.
   En TV y M, en el flujo sobre el papel: el tostado, entero. */
.loha-acceso--metodo {
	--acceso-cristal: 1;
	background-color: color-mix(in srgb, var(--beige-700) calc(var(--acceso-cristal) * 100%), transparent);
	color: var(--blanco);
}

/* La acción, en blanco como el texto principal: en --beige-100, sobre
   el cristal no llegaba a 4,5 (3,5–3,7 al 82 %). La flecha, decorativa,
   en --beige-100. */
.loha-acceso--metodo .loha-acceso__accion {
	color: var(--blanco);
}

.loha-acceso--metodo .loha-acceso__flecha {
	color: var(--beige-100);
}

@media (min-width: 1024px) {
	.loha-acceso--metodo {
		--acceso-cristal: 0.85;
		-webkit-backdrop-filter: blur(14px) saturate(1.15);
		backdrop-filter: blur(14px) saturate(1.15);
	}

	.loha-acceso--metodo::before {
		border-top-color: color-mix(in srgb, var(--beige-100) 45%, transparent);
	}
}

/* Hover y foco: el cristal, más denso, en lugar del papel más oscuro del
   02. La flecha avanza como en el 02. */
.loha-acceso--metodo:focus-visible:not(.loha-foco-puntero) {
	background-color: var(--beige-700);
}

@media (hover: hover) and (pointer: fine) {
	.loha-acceso--metodo:hover {
		background-color: var(--beige-700);
	}
}