/* =========================================================================
   Hormiganzas — capa de movimiento
   Se carga después de main.css y solo añade estados: nunca cambia la
   posición ni el tamaño en reposo de nada.

   Tres reglas que se cumplen en todo el archivo:
   1. Solo se animan transform, opacity, color, sombra y borde. Nada que
      obligue al navegador a recalcular la maquetación, porque eso mueve el
      contenido y arruina el CLS del que dependen los anuncios.
   2. Todo movimiento tiene su estado :active. Un hover sin press se siente
      a medio hacer: se pulsa y no pasa nada.
   3. Nada se mueve si el visitante pidió que no. La regla global de
      prefers-reduced-motion en main.css desactiva este archivo entero.
   ========================================================================= */

/* Permite transicionar hacia alturas «auto», que es lo que hace posible
   desplegar las preguntas frecuentes sin JavaScript ni alturas fijas. */
:root {
	interpolate-size: allow-keywords;
}

/* -------------------------------------------------------------------------
   1. Botones
   ---------------------------------------------------------------------- */

.hz-btn {
	transition:
		background-color var(--hz-dur-rapida) var(--hz-ease),
		color var(--hz-dur-rapida) var(--hz-ease),
		transform var(--hz-dur-rapida) var(--hz-ease),
		box-shadow var(--hz-dur-media) var(--hz-ease);
}

.hz-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -8px rgba(15, 81, 50, 0.55);
}

/* El press devuelve el botón por debajo de su posición de reposo: es lo
   que da la sensación física de haberlo hundido. */
.hz-btn:active {
	transform: translateY(1px) scale(0.985);
	transition-duration: 60ms;
	box-shadow: none;
}

.hz-icono-btn {
	transition:
		background-color var(--hz-dur-rapida) var(--hz-ease),
		color var(--hz-dur-rapida) var(--hz-ease),
		transform var(--hz-dur-media) var(--hz-ease-rebote);
}

.hz-icono-btn:hover {
	transform: scale(1.08);
}

.hz-icono-btn:active {
	transform: scale(0.92);
	transition-duration: 60ms;
}

.hz-icono-btn .hz-icono {
	transition: transform var(--hz-dur-media) var(--hz-ease);
}

/* El icono gira al abrirse su panel */
.hz-icono-btn[aria-expanded="true"] .hz-icono {
	transform: rotate(90deg);
}

/* -------------------------------------------------------------------------
   2. Foco y salto de contenido
   ---------------------------------------------------------------------- */

:focus-visible {
	transition:
		outline-offset var(--hz-dur-rapida) var(--hz-ease),
		outline-color var(--hz-dur-rapida) var(--hz-ease);
}

.hz-saltar {
	transition: top var(--hz-dur-media) var(--hz-ease-rebote);
}

/* -------------------------------------------------------------------------
   3. Enlaces
   ---------------------------------------------------------------------- */

a {
	transition:
		color var(--hz-dur-rapida) var(--hz-ease),
		text-decoration-color var(--hz-dur-rapida) var(--hz-ease),
		text-decoration-thickness var(--hz-dur-rapida) var(--hz-ease);
}

/* Enlaces del cuerpo del artículo: el subrayado crece desde la izquierda
   en lugar de engordar de golpe. */
.hz-prosa a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition:
		background-size var(--hz-dur-media) var(--hz-ease),
		color var(--hz-dur-rapida) var(--hz-ease);
}

.hz-prosa a:hover {
	background-size: 100% 2px;
	text-decoration-color: transparent;
}

/* Enlace de sección: la flecha avanza y el círculo se llena */
.hz-enlace-seccion .hz-icono {
	transition: transform var(--hz-dur-media) var(--hz-ease);
}

.hz-enlace-seccion:hover .hz-icono {
	transform: translateX(3px);
}

.hz-enlace-seccion__flecha {
	transition:
		background-color var(--hz-dur-media) var(--hz-ease),
		color var(--hz-dur-media) var(--hz-ease),
		transform var(--hz-dur-rapida) var(--hz-ease);
}

.hz-enlace-seccion:active .hz-enlace-seccion__flecha {
	transform: scale(0.9);
	transition-duration: 60ms;
}

/* -------------------------------------------------------------------------
   4. Navegación y chips
   ---------------------------------------------------------------------- */

.hz-nav__lista a,
.hz-menu-movil__lista a,
.hz-pie__lista a,
.hz-redes a,
.hz-error__lista a,
.hz-paginacion .page-numbers {
	transition:
		background-color var(--hz-dur-rapida) var(--hz-ease),
		color var(--hz-dur-rapida) var(--hz-ease),
		transform var(--hz-dur-rapida) var(--hz-ease);
}

.hz-nav__lista a:active,
.hz-menu-movil__lista a:active,
.hz-error__lista a:active,
.hz-paginacion .page-numbers:active {
	transform: scale(0.96);
}

.hz-pie__lista a:hover,
.hz-redes a:hover {
	transform: translateX(2px);
}

.hz-chip {
	transition:
		background-color var(--hz-dur-media) var(--hz-ease),
		color var(--hz-dur-media) var(--hz-ease),
		transform var(--hz-dur-rapida) var(--hz-ease);
}

.hz-chip:hover {
	transform: translateY(-1px);
}

.hz-chip:active {
	transform: translateY(0) scale(0.96);
	transition-duration: 60ms;
}

/* Migas de pan */
.hz-migas a {
	transition: color var(--hz-dur-rapida) var(--hz-ease);
}

/* -------------------------------------------------------------------------
   5. Cabecera al desplazar
   La sombra aparece solo cuando hay contenido debajo, no siempre.
   ---------------------------------------------------------------------- */

.hz-cabecera {
	transition:
		box-shadow var(--hz-dur-media) var(--hz-ease),
		background-color var(--hz-dur-media) var(--hz-ease);
}

.hz-cabecera.esta-desplazada {
	box-shadow: 0 8px 24px -20px rgba(20, 17, 15, 0.6);
	background: color-mix(in srgb, var(--hz-papel) 94%, transparent);
}

/* -------------------------------------------------------------------------
   6. Tarjetas
   ---------------------------------------------------------------------- */

.hz-tarjeta,
.hz-tema {
	transition:
		transform var(--hz-dur-media) var(--hz-ease),
		box-shadow var(--hz-dur-media) var(--hz-ease),
		border-color var(--hz-dur-media) var(--hz-ease);
}

.hz-tarjeta:hover,
.hz-tema:hover {
	transform: translateY(-3px);
}

.hz-tarjeta:active,
.hz-tema:active {
	transform: translateY(-1px) scale(0.995);
	transition-duration: 80ms;
}

/* La imagen se acerca dentro de su marco. El marco no cambia de tamaño:
   solo la imagen, y por eso no mueve nada a su alrededor. */
.hz-tarjeta__imagen,
.hz-tema__enlace-imagen {
	overflow: hidden;
}

.hz-tarjeta__imagen img,
.hz-tema__imagen {
	transition: transform var(--hz-dur-lenta) var(--hz-ease);
}

.hz-tarjeta:hover .hz-tarjeta__imagen img,
.hz-tema:hover .hz-tema__imagen {
	transform: scale(1.04);
}

.hz-tarjeta__titulo a,
.hz-tema__titulo a,
.hz-destacado__titulo a,
.hz-ultimo__titulo {
	transition: color var(--hz-dur-rapida) var(--hz-ease);
}

.hz-tarjeta:hover .hz-tarjeta__titulo a,
.hz-tema:hover .hz-tema__titulo a {
	color: var(--hz-jade);
}

/* La flecha avanza aunque el puntero esté en cualquier parte de la tarjeta */
.hz-tema:hover .hz-enlace-seccion .hz-icono {
	transform: translateX(3px);
}

.hz-tema:hover .hz-enlace-seccion__flecha {
	background: var(--hz-jade);
	color: var(--hz-papel);
}

.hz-ultimo {
	transition: background-color var(--hz-dur-rapida) var(--hz-ease);
}

.hz-ultimo:hover {
	background: color-mix(in srgb, var(--hz-tinte) 55%, transparent);
}

/* -------------------------------------------------------------------------
   7. Preguntas frecuentes
   Despliegue real, sin alturas fijas ni JavaScript.
   ---------------------------------------------------------------------- */

.hz-faq__item {
	transition: border-color var(--hz-dur-media) var(--hz-ease);
}

.hz-faq__item:hover {
	border-color: color-mix(in srgb, var(--hz-jade) 35%, var(--hz-borde));
}

.hz-faq__pregunta {
	transition: color var(--hz-dur-rapida) var(--hz-ease);
}

.hz-faq__pregunta:hover {
	color: var(--hz-jade);
}

.hz-faq__pregunta::after {
	transition: transform var(--hz-dur-media) var(--hz-ease-rebote);
}

.hz-faq__item[open] .hz-faq__pregunta::after {
	transform: translateY(-50%) rotate(180deg);
}

/* ::details-content permite animar la apertura del <details> nativo.
   Donde no esté soportado, abre de golpe: se degrada sin romperse. */
.hz-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		block-size var(--hz-dur-media) var(--hz-ease),
		opacity var(--hz-dur-media) var(--hz-ease),
		content-visibility var(--hz-dur-media) allow-discrete;
}

.hz-faq__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* -------------------------------------------------------------------------
   8. Formularios
   ---------------------------------------------------------------------- */

.hz-form-busqueda input[type="search"],
.hz-avisos__form input[type="email"],
.hz-campo select,
.hz-campo__moneda {
	transition:
		border-color var(--hz-dur-media) var(--hz-ease),
		box-shadow var(--hz-dur-media) var(--hz-ease);
}

.hz-form-busqueda input[type="search"]:focus,
.hz-campo select:focus,
.hz-campo__moneda:focus-within {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hz-jade) 12%, transparent);
}

.hz-avisos__form input[type="email"]:focus {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hz-lila) 14%, transparent);
}

/* Opciones de la calculadora */
.hz-opcion span {
	transition:
		background-color var(--hz-dur-rapida) var(--hz-ease),
		border-color var(--hz-dur-rapida) var(--hz-ease),
		color var(--hz-dur-rapida) var(--hz-ease),
		transform var(--hz-dur-rapida) var(--hz-ease);
}

.hz-opcion span:hover {
	border-color: var(--hz-jade);
	transform: translateY(-1px);
}

.hz-opcion input:active + span {
	transform: scale(0.96);
}

/* La cifra del resultado late al cambiar. Lo dispara el JS de la
   calculadora añadiendo la clase. */
.hz-calc__neto {
	transition: transform var(--hz-dur-media) var(--hz-ease-rebote);
}

.hz-calc__neto.esta-cambiando {
	transform: scale(1.03);
}

/* -------------------------------------------------------------------------
   9. Tablas
   ---------------------------------------------------------------------- */

.hz-prosa tbody tr,
.hz-comparativa tbody tr {
	transition: background-color var(--hz-dur-rapida) var(--hz-ease);
}

.hz-prosa tbody tr:hover,
.hz-comparativa tbody tr:hover {
	background: color-mix(in srgb, var(--hz-tinte) 45%, transparent);
}

/* -------------------------------------------------------------------------
   10. Índice de contenidos
   ---------------------------------------------------------------------- */

.hz-indice__lista a {
	display: inline-block;
	transition:
		color var(--hz-dur-rapida) var(--hz-ease),
		transform var(--hz-dur-rapida) var(--hz-ease);
}

.hz-indice__lista a:hover {
	transform: translateX(3px);
}

/* Sección que se está leyendo ahora mismo. La marca el scrollspy. */
.hz-indice__lista .esta-activo a {
	color: var(--hz-jade);
	font-weight: 600;
}

.hz-indice__lista .esta-activo::marker {
	color: var(--hz-jade);
}

/* -------------------------------------------------------------------------
   11. Aparición al desplazar

   Se reproduce UNA vez al entrar en pantalla y el elemento se queda ya
   colocado. Es el comportamiento de Elementor.

   El primer intento usaba animation-timeline: view(), que ata la animación
   a la posición del scroll: al detenerse a media altura el elemento se
   quedaba a medio opacar, y al subir se deshacía. Por eso se veía roto.
   ---------------------------------------------------------------------- */

/* El estado oculto lo aplica el JavaScript, nunca esta hoja por su cuenta.
   Si el script no llega a ejecutarse, el contenido se ve igual: nadie se
   queda mirando una página en blanco por culpa de una animación. */
.hz-revelar {
	opacity: 0;
	transform: translateY(24px);
	will-change: opacity, transform;
}

.hz-revelar.esta-visible {
	animation: hz-revelar 620ms var(--hz-ease) both;
	animation-delay: var(--hz-retardo, 0ms);
}

/* Terminada la animación se suelta will-change: mantenerlo activo en
   decenas de elementos consume memoria de vídeo sin motivo. */
.hz-revelar.esta-hecho {
	will-change: auto;
}

@keyframes hz-revelar {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   12. Lo que deliberadamente NO se anima

   Los espacios publicitarios. Un anuncio que entra con movimiento se
   parece a los patrones que Google penaliza, y además llamaría la atención
   sobre el hueco vacío mientras carga.

   El cuerpo del artículo. Párrafos que aparecen al desplazar entorpecen la
   lectura larga, que es exactamente lo que este sitio pide de su visitante.
   ---------------------------------------------------------------------- */