/*
 * R7 · Acción (componentes.md). En la fase 1, lo que usa HABLEMOS: la
 * píldora con contorno, la variante con fondo y la flecha. En la 4b,
 * --bajar (DESLIZA PARA SEGUIR ↓) y el CTA de cierre de R8. En la 5a, la
 * flecha sola (--sola) del 03.
 */

.loha-accion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
	min-height: var(--control-minimo);
	padding: 0 1.6em;
	border: 1px solid transparent;
	border-radius: 999px;
	color: inherit;
	font-family: var(--sans);
	font-size: var(--fs-interfaz);
	font-weight: 600;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background-color var(--t-hover) ease,
		border-color var(--t-hover) ease,
		color var(--t-hover) ease;
}

.loha-accion--contorno {
	border-color: currentColor;
}

/*
 * DECISIÓN ABIERTA: variante con fondo azul y texto beige, preparada.
 * Se activa para todo el sitio con el filtro loha_variante_accion
 * (decisiones-abiertas.md).
 */
.loha-accion--relleno {
	border-color: var(--azul);
	background-color: var(--azul);
	color: var(--beige-100);
}

/* Las píldoras nunca son más anchas que su sitio. Si el texto no cabe en
   una línea, pasa a dos dentro de la píldora, repartidas, con la flecha
   a su derecha: a 320 px, «Conocer otras experiencias» (franja del 04)
   pide 317 px y hay 280. HABLEMOS de la cabecera va siempre en una
   línea (cabecera.css). El relleno vertical solo se nota con dos
   líneas: con una manda el alto mínimo. */
.loha-accion--contorno,
.loha-accion--relleno {
	max-width: 100%;
	padding-block: 0.5em;
	white-space: normal;
	text-wrap: balance;
}

/* Sobre fondo oscuro la variante con fondo se invierte, o desaparecería. */
.loha-cabecera--sobre-oscuro .loha-accion--relleno {
	border-color: var(--beige-100);
	background-color: var(--beige-100);
	color: var(--azul);
}

.loha-accion__flecha {
	transition: transform var(--t-hover) var(--curva-suave);
}

/* La flecha avanza 6 px: con puntero fino al pasar por encima; con
   teclado, al enfocar. */
@media (hover: hover) and (pointer: fine) {
	.loha-accion:hover .loha-accion__flecha {
		transform: translateX(6px);
	}
}

.loha-accion:focus-visible .loha-accion__flecha {
	transform: translateX(6px);
}

/* --bajar: texto y flecha ↓, sin caja. La flecha baja 6 px. */
.loha-accion--bajar {
	gap: clamp(1.5rem, 1rem + 2.5vw, 4rem);
	padding: 0;
	border-radius: 0;
	font-size: var(--fs-micro);
	font-weight: 500;
}

.loha-accion--bajar .loha-accion__flecha {
	width: 1.9em;
	height: 1.9em;
}

@media (hover: hover) and (pointer: fine) {
	.loha-accion--bajar:hover .loha-accion__flecha {
		transform: translateY(6px);
	}
}

.loha-accion--bajar:focus-visible .loha-accion__flecha {
	transform: translateY(6px);
}

/* --linea (epílogo): de peso secundario, sin aspecto de botón. El texto
   y debajo una línea que pasa de largo y acaba en la flecha, como en la
   previa. La línea es del grosor del trazo de los iconos (1,5 px); la
   flecha de Lucide monta sobre su final con su propio astil, así que al
   avanzar 6 px la línea sigue entera. Color: --c-texto-2 en reposo y
   --c-texto al pasar o enfocar (sobre azul, de --beige-100 a blanco). */
.loha-accion--linea {
	display: inline-grid;
	justify-items: start;
	row-gap: 0.55rem;
	padding: 0.4rem 0;
	border-radius: 0;
	color: var(--c-texto-2);
	font-size: var(--fs-interfaz);
	font-weight: 500;
}

.loha-accion__trazo {
	display: flex;
	align-items: center;
	width: calc(100% + 3.5rem);
}

.loha-accion__trazo::before {
	content: "";
	flex: 1;
	height: 1.5px;
	background-color: currentColor;
}

.loha-accion--linea .loha-accion__flecha {
	width: 1.6em;
	height: 1.6em;
	margin-left: -1.1em;
}

@media (hover: hover) and (pointer: fine) {
	.loha-accion--linea:hover {
		color: var(--c-texto);
	}
}

.loha-accion--linea:focus-visible {
	color: var(--c-texto);
}

/* La flecha sola (03.1 y 03.3): el texto, solo para lectores de
   pantalla («Ir a la siguiente sección»). Al pie de su sección, en su
   propia línea, con el icono en el margen del texto.

   Completa, como en las previas de la segunda revisión del cliente
   (noviembre de 2026): línea vertical y punta, la misma en las dos
   pantallas. Es la arrow-down de Lucide con el astil alargado
   (iconos/arrow-down-largo.svg): la misma punta y el mismo trazo, en un
   solo SVG, sin empalmes. La flecha mide 1,8 veces el ancho de su punta,
   la proporción de las previas (51 × 29 px en la del 03.1 y 37 × 20 en la
   del 03.3, a 1400 px). Sin texto, la flecha es la única señal: el icono
   mide lo que el área mínima de ancho (44 px; la punta, 14/24 de eso,
   26 px; la flecha, 46 px de alto). Arriba y abajo, solo el aire de los
   remates redondos (1/24), no el de Lucide (5/24): 44 × 50 px, para que
   la apertura del 03 siga cabiendo en la ventana. Baja entera 6 px al
   pasar o enfocar (--bajar). */
.loha-accion--sola {
	display: flex;
	width: fit-content;
	min-width: var(--control-minimo);
	margin-top: var(--separacion);
	justify-content: flex-start;
}

.loha-accion--sola .loha-accion__flecha {
	width: var(--control-minimo);
	height: auto;
	aspect-ratio: 24 / 27.2;
}

/* R8 · Cierre: el remate y, debajo, el CTA, que mide 56 px de alto en
   todos los tramos (espaciado.md; el brief pide 54 como mínimo). En M, a
   ancho completo: el texto puede pasar a dos líneas. */
.loha-cierre .loha-encabezado__remate {
	margin-top: 0;
}

.loha-cierre__accion {
	min-height: var(--cta-alto);
	margin-top: clamp(1.25rem, 0.9rem + 1vw, 2rem);
	padding-inline: 2em 1.6em;
}

@media (max-width: 599px) {
	.loha-cierre__accion {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding-block: 0.9em;
		white-space: normal;
		text-align: left;
	}
}

/* Texto corto en M (02, revisión del cliente, 02-17): el CTA largo del 02
   («Hablemos de lo que tu espacio necesita resolver») cabe en una línea
   desde 600 px; por debajo pasaba a dos o tres. Si el campo trae la
   versión corta, en M se ve esa. display: none también la saca del árbol
   de accesibilidad: se lee la que se ve. */
.loha-accion__corto {
	display: none;
}

@media (max-width: 599px) {
	.loha-accion__largo {
		display: none;
	}

	.loha-accion__corto {
		display: inline;
	}
}

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