/**
 * Curso Hongos - Pie de pagina (footer)
 *
 * Aqui viven la ESTRUCTURA, los VALORES POR DEFECTO del diseno original y el
 * COMPORTAMIENTO (estados, transiciones, accesibilidad, impresion). La
 * apariencia — tipografia, colores, fondos, bordes, espaciados — la escribe
 * Elementor mediante el array `selectors` de cada control, que alimenta las
 * variables --chfoo-* declaradas mas abajo.
 *
 * Reparto de responsabilidades:
 *   - Este archivo: layout, estados, accesibilidad, impresion y los valores
 *                   por defecto, para que el widget se vea igual que el diseno
 *                   nada mas soltarlo, sin tocar un solo control.
 *   - Elementor:    valores de las variables y TIPOGRAFIA, por dispositivo,
 *                   con sus breakpoints nativos. Por eso el widget no tiene
 *                   controles propios de tamano de fuente: eso es trabajo del
 *                   grupo de Tipografia de Elementor.
 *   - Bloque <style> del widget: unicamente el punto de ruptura propio del
 *                   apilado en movil, que es una media query con un ancho
 *                   configurable por instancia y Elementor no sabe generar.
 *                   Ese bloque solo reescribe variables, nunca reglas.
 *
 * Todas las clases e IDs llevan el prefijo cursohongosfooter.
 */

/* ===================================================================
 * VALORES POR DEFECTO
 * =================================================================== */

.cursohongosfooter {
	/* Caja */
	--chfoo-z: 2;
	--chfoo-max-ancho: 1180px;
	--chfoo-int-pad: 0 48px 0 60px;
	--chfoo-gap: 18px;
	--chfoo-gap-fila: 18px;
	--chfoo-direccion: row;
	--chfoo-justificar: space-between;
	--chfoo-alinear: center;
	--chfoo-texto-align: left;

	/* Marca */
	--chfoo-marca-dir: row;
	--chfoo-marca-gap: 9px;
	--chfoo-marca-alinear: baseline;
	--chfoo-marca-justificar: flex-start;
	--chfoo-nombre-color: #f4f1e8;
	--chfoo-acento-color: #c9f24c;
	--chfoo-sub-color: rgba(244, 241, 232, 0.4);

	/* Logo (imagen) */
	--chfoo-logo-ancho: 140px;
	--chfoo-logo-alto: auto;
	--chfoo-logo-radio: 0px;
	--chfoo-logo-op: 1;
	--chfoo-logo-op-h: 1;

	/* Aviso legal + enlaces */
	--chfoo-meta-color: rgba(244, 241, 232, 0.5);
	--chfoo-meta-interlineado: 1.75;
	--chfoo-meta-max-ancho: none;
	--chfoo-enlace-color: inherit;
	--chfoo-enlace-color-h: #c9f24c;
	--chfoo-enlace-deco: none;
	--chfoo-enlace-deco-h: underline;
	--chfoo-enlace-offset: 3px;
	--chfoo-enlaces-align: flex-start;
	--chfoo-enlaces-gap: 8px;
	--chfoo-enlaces-margen: 6px;
	--chfoo-sep-color: currentColor;
	--chfoo-sep-op: 0.55;
	--chfoo-sep-esp: 0.4em;

	/* Redes */
	--chfoo-red-gap: 10px;
	--chfoo-red-size: 17px;
	--chfoo-red-caja: 36px;
	--chfoo-red-justificar: flex-start;
	--chfoo-red-color: rgba(244, 241, 232, 0.72);
	--chfoo-red-color-h: #16150f;
	--chfoo-red-fondo: transparent;
	--chfoo-red-fondo-h: #c9f24c;
	--chfoo-red-radio: 999px;
	--chfoo-red-borde-ancho: 1px;
	--chfoo-red-borde-color: rgba(244, 241, 232, 0.18);
	--chfoo-red-borde-color-h: #c9f24c;

	/* Volver arriba */
	--chfoo-arriba-caja: 42px;
	--chfoo-arriba-size: 18px;
	--chfoo-arriba-color: #16150f;
	--chfoo-arriba-color-h: #16150f;
	--chfoo-arriba-fondo: #c9f24c;
	--chfoo-arriba-fondo-h: #f4f1e8;
	--chfoo-arriba-radio: 999px;
	--chfoo-arriba-borde-ancho: 0px;
	--chfoo-arriba-borde-color: transparent;
	--chfoo-arriba-lado: 24px;
	--chfoo-arriba-abajo: 24px;
	--chfoo-arriba-z: 180;

	/* Linea superior opcional */
	--chfoo-linea-alto: 1px;
	--chfoo-linea-ancho: 100%;
	--chfoo-linea-color: rgba(244, 241, 232, 0.12);

	/* Movimiento */
	--chfoo-dur: 0.25s;
	--chfoo-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Foco visible */
	--chfoo-foco-color: #c9f24c;
	--chfoo-foco-ancho: 3px;
	--chfoo-foco-offset: 3px;
	--chfoo-foco-radio: 4px;
}

/* ===================================================================
 * RESET ACOTADO
 *
 * Solo dentro del widget. Muchos temas meten margenes en p / ul / li que
 * romperian el alineado de la fila.
 * =================================================================== */

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

.cursohongosfooter p,
.cursohongosfooter ul,
.cursohongosfooter li {
	margin: 0;
	padding: 0;
}

.cursohongosfooter ul {
	list-style: none;
}

.cursohongosfooter a {
	color: inherit;
	text-decoration: none;
}

/* ===================================================================
 * BARRA
 * =================================================================== */

.cursohongosfooter {
	position: relative;
	z-index: var(--chfoo-z);
	display: block;
	width: 100%;
	padding: 38px 0;
	color: #f4f1e8;
	background-color: #16150f;
}

/* Linea superior opcional: pseudo-elemento, asi no ensucia el markup. */
.cursohongosfooter[data-chfoo-linea="si"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--chfoo-linea-ancho);
	max-width: 100%;
	height: var(--chfoo-linea-alto);
	background: var(--chfoo-linea-color);
	transform: translateX(-50%);
	pointer-events: none;
}

/* ===================================================================
 * INTERIOR (la fila)
 * =================================================================== */

.cursohongosfooter__interior {
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--chfoo-direccion);
	align-items: var(--chfoo-alinear);
	justify-content: var(--chfoo-justificar);
	gap: var(--chfoo-gap-fila) var(--chfoo-gap);
	width: 100%;
	max-width: var(--chfoo-max-ancho);
	margin: 0 auto;
	padding: var(--chfoo-int-pad);
	text-align: var(--chfoo-texto-align);
}

/* ===================================================================
 * MARCA
 * =================================================================== */

.cursohongosfooter__marca {
	display: flex;
	flex-direction: var(--chfoo-marca-dir);
	align-items: var(--chfoo-marca-alinear);
	justify-content: var(--chfoo-marca-justificar);
	gap: var(--chfoo-marca-gap);
	min-width: 0;
}

.cursohongosfooter__marca-enlace {
	display: inline-flex;
	align-items: center;
	gap: var(--chfoo-marca-gap);
	min-width: 0;
	text-decoration: none;
}

.cursohongosfooter__nombre {
	display: inline-block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: var(--chfoo-nombre-color);
}

.cursohongosfooter__acento {
	color: var(--chfoo-acento-color);
}

.cursohongosfooter__sub {
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--chfoo-sub-color);
}

/* El envoltorio existe para poder poner la clase sin pelearse con las que
   anaden wp_get_attachment_image() o el grupo de imagen de Elementor. */
.cursohongosfooter__logo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	max-width: 100%;
	line-height: 0;
}

.cursohongosfooter__logo img {
	display: block;
	width: var(--chfoo-logo-ancho);
	height: var(--chfoo-logo-alto);
	max-width: 100%;
	border-radius: var(--chfoo-logo-radio);
	opacity: var(--chfoo-logo-op);
	object-fit: contain;
	transition: opacity var(--chfoo-dur) var(--chfoo-ease);
}

.cursohongosfooter__marca-enlace:hover .cursohongosfooter__logo img,
.cursohongosfooter__marca-enlace:focus-visible .cursohongosfooter__logo img {
	opacity: var(--chfoo-logo-op-h);
}

/* ===================================================================
 * AVISO LEGAL + ENLACES
 *
 * En modo "en linea" todo fluye como texto corrido, igual que el diseno
 * original: aviso, separadores y enlaces comparten linea y envuelven juntos.
 * =================================================================== */

.cursohongosfooter__meta {
	min-width: 0;
	max-width: var(--chfoo-meta-max-ancho);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: var(--chfoo-meta-interlineado);
	letter-spacing: 0.04em;
	color: var(--chfoo-meta-color);
}

/* Gancho de estilo del aviso. Hereda del bloque: el diseno original no le da
   nada propio, pero tenerlo aparte permite afinarlo sin tocar los enlaces. */
.cursohongosfooter__aviso {
	display: inline;
}

/* El <nav> va en linea para no partir el flujo de texto del aviso. */
.cursohongosfooter__enlaces {
	display: inline;
}

.cursohongosfooter__enlace {
	color: var(--chfoo-enlace-color);
	text-decoration: var(--chfoo-enlace-deco);
	text-underline-offset: var(--chfoo-enlace-offset);
	transition: color var(--chfoo-dur) var(--chfoo-ease);
}

.cursohongosfooter__enlace:hover,
.cursohongosfooter__enlace:focus-visible {
	color: var(--chfoo-enlace-color-h);
	text-decoration: var(--chfoo-enlace-deco-h);
	text-underline-offset: var(--chfoo-enlace-offset);
}

.cursohongosfooter__sep {
	padding: 0 var(--chfoo-sep-esp);
	color: var(--chfoo-sep-color);
	opacity: var(--chfoo-sep-op);
	user-select: none;
}

/* Enlaces como fila propia debajo del aviso. */
.cursohongosfooter__meta[data-chfoo-enlaces="fila"] .cursohongosfooter__enlaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--chfoo-enlaces-align);
	gap: 4px var(--chfoo-enlaces-gap);
	margin-top: var(--chfoo-enlaces-margen);
}

/* Enlaces uno debajo de otro. */
.cursohongosfooter__meta[data-chfoo-enlaces="columna"] .cursohongosfooter__enlaces {
	display: flex;
	flex-direction: column;
	align-items: var(--chfoo-enlaces-align);
	gap: var(--chfoo-enlaces-gap);
	margin-top: var(--chfoo-enlaces-margen);
}

/* Fuera del modo "en linea" los separadores sobran. */
.cursohongosfooter__meta[data-chfoo-enlaces="fila"] .cursohongosfooter__sep--enlace,
.cursohongosfooter__meta[data-chfoo-enlaces="columna"] .cursohongosfooter__sep--enlace,
.cursohongosfooter__meta[data-chfoo-enlaces="fila"] .cursohongosfooter__sep--aviso,
.cursohongosfooter__meta[data-chfoo-enlaces="columna"] .cursohongosfooter__sep--aviso {
	display: none;
}

/* ===================================================================
 * REDES SOCIALES (opcional)
 * =================================================================== */

.cursohongosfooter__redes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--chfoo-red-justificar);
	gap: var(--chfoo-red-gap);
}

.cursohongosfooter__red {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--chfoo-red-caja);
	height: var(--chfoo-red-caja);
	font-size: var(--chfoo-red-size);
	line-height: 1;
	color: var(--chfoo-red-color);
	background: var(--chfoo-red-fondo);
	border: var(--chfoo-red-borde-ancho) solid var(--chfoo-red-borde-color);
	border-radius: var(--chfoo-red-radio);
	transition:
		color var(--chfoo-dur) var(--chfoo-ease),
		background-color var(--chfoo-dur) var(--chfoo-ease),
		border-color var(--chfoo-dur) var(--chfoo-ease),
		transform var(--chfoo-dur) var(--chfoo-ease);
}

.cursohongosfooter__red:hover,
.cursohongosfooter__red:focus-visible {
	color: var(--chfoo-red-color-h);
	background: var(--chfoo-red-fondo-h);
	border-color: var(--chfoo-red-borde-color-h);
}

.cursohongosfooter[data-chfoo-red-anim="subir"] .cursohongosfooter__red:hover {
	transform: translateY(-2px);
}

.cursohongosfooter[data-chfoo-red-anim="crecer"] .cursohongosfooter__red:hover {
	transform: scale(1.12);
}

.cursohongosfooter__red svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cursohongosfooter__red i {
	font-size: inherit;
	line-height: 1;
}

/* ===================================================================
 * VOLVER ARRIBA (opcional)
 * =================================================================== */

/*
 * Sin JS el boton no puede subir nada: arranca en display:none y lo enciende
 * el propio script al inicializar la instancia. Asi no queda un control muerto
 * ni una parada inutil en el recorrido del tabulador.
 */
.cursohongosfooter__arriba {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: var(--chfoo-arriba-caja);
	height: var(--chfoo-arriba-caja);
	padding: 0;
	font: inherit;
	font-size: var(--chfoo-arriba-size);
	line-height: 1;
	color: var(--chfoo-arriba-color);
	background: var(--chfoo-arriba-fondo);
	border: var(--chfoo-arriba-borde-ancho) solid var(--chfoo-arriba-borde-color);
	border-radius: var(--chfoo-arriba-radio);
	cursor: pointer;
	appearance: none;
	transition:
		color var(--chfoo-dur) var(--chfoo-ease),
		background-color var(--chfoo-dur) var(--chfoo-ease),
		opacity var(--chfoo-dur) var(--chfoo-ease),
		transform var(--chfoo-dur) var(--chfoo-ease),
		visibility 0s linear var(--chfoo-dur);
}

.cursohongosfooter[data-chfoo-js="si"] .cursohongosfooter__arriba {
	display: inline-flex;
}

.cursohongosfooter__arriba:hover,
.cursohongosfooter__arriba:focus-visible {
	color: var(--chfoo-arriba-color-h);
	background: var(--chfoo-arriba-fondo-h);
}

.cursohongosfooter__arriba svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Con etiqueta de texto la caja crece a lo ancho. */
.cursohongosfooter__arriba--con-texto {
	width: auto;
	padding: 0 16px;
}

.cursohongosfooter__arriba-texto {
	font-size: 0.7em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Modo flotante: pegado a la ventana, oculto hasta que se baja. */
.cursohongosfooter__arriba--flotante {
	position: fixed;
	right: var(--chfoo-arriba-lado);
	bottom: var(--chfoo-arriba-abajo);
	z-index: var(--chfoo-arriba-z);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

.cursohongosfooter__arriba--flotante[data-chfoo-lado="izquierda"] {
	right: auto;
	left: var(--chfoo-arriba-lado);
}

.cursohongosfooter__arriba--flotante.cursohongosfooter__arriba--visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* ===================================================================
 * ACCESIBILIDAD
 * =================================================================== */

.cursohongosfooter a:focus-visible,
.cursohongosfooter button:focus-visible {
	outline: var(--chfoo-foco-ancho) solid var(--chfoo-foco-color);
	outline-offset: var(--chfoo-foco-offset);
	border-radius: var(--chfoo-foco-radio);
}

/* Solo para lectores de pantalla. */
.cursohongosfooter__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

@media (prefers-reduced-motion: reduce) {
	.cursohongosfooter,
	.cursohongosfooter * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===================================================================
 * AVISO DEL EDITOR
 * =================================================================== */

.cursohongosfooter-editor-hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 8px;
	padding: 10px 12px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12px;
	line-height: 1.45;
	color: #6b5b00;
	background: #fff8dc;
	border: 1px dashed #d8c56a;
	border-radius: 4px;
}

/* ===================================================================
 * IMPRESION
 * =================================================================== */

@media print {
	.cursohongosfooter {
		color: #000;
		background: none !important;
	}

	.cursohongosfooter__arriba,
	.cursohongosfooter__redes {
		display: none !important;
	}

	.cursohongosfooter__enlace::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}