/* Tokens del prototipo en el <body>. El tema Hello Elementor fija su propia
   tipografía directamente en body, y eso gana a la herencia desde <html>. */
body {
  font-family: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--background, #f8fafd);
  color: var(--foreground, #132938);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
.font-mono { font-family: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace; }

/* ---------------------------------------------------------------------------
   Hello Elementor impone márgenes/paddings propios a las etiquetas
   (p. ej. `p { margin-block: 0 .9rem }`), y esas reglas de etiqueta ganan al
   preflight de Tailwind (que usa `*`). El prototipo parte de todo a cero.
   --------------------------------------------------------------------------- */
p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote, figure, pre,
table, fieldset, hr, form, address, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
input::placeholder, textarea::placeholder { color: currentColor; opacity: .5; }

/* El enlace "Skip to content" del tema no existe en el prototipo */
.skip-link { display: none !important; }

/* El widget de icono de Elementor impone un color por defecto (#69727d): los
   iconos del prototipo heredan el color de las clases Tailwind del contenedor. */
.elementor-icon { color: inherit; }

/* Filas con icono + texto: los envoltorios de Elementor no deben añadir altura
   (antes el texto era un nodo suelto). Se hacen transparentes en el diseño. */
.sar-fila-inline > .elementor-widget-text-editor,
.sar-fila-inline > .elementor-widget-text-editor > .elementor-widget-container { display: contents; }
.sar-fila-inline > .elementor-widget-text-editor > *:not(.elementor-widget-container),
.sar-fila-inline > .elementor-widget-text-editor .elementor-widget-container > * { flex: 1 1 auto; min-width: 0; }

/* Los widgets de texto deben heredar la tipografía del contenedor: en el
   original eran nodos de texto que heredaban de las clases Tailwind, pero el
   widget aplica la tipografía del Kit de Elementor (16px) y descuadraba
   tamaños y alturas (p. ej. la lista de Moodle: 24px de línea en vez de 22,75). */
.elementor-widget-text-editor,
.elementor-widget-text-editor > .elementor-widget-container { font-size: inherit; line-height: inherit; font-family: inherit; }

/* Insignias y chips (inline-flex): el envoltorio del widget no debe añadir una
   línea de texto extra (la insignia medía 40px en vez de 22px). */
.sar-widget-inline, .sar-widget-inline > .elementor-widget-container { display: contents; }
.sar-fila-inline > .elementor-widget-icon,
.sar-fila-inline > .elementor-widget-icon > .elementor-widget-container,
.sar-fila-inline > .elementor-widget-icon .elementor-icon-wrapper { display: contents; }

/* ------------------------------------------------------------------ *
 *  Header pegajoso (el prototipo lleva `sticky top-0 z-50` en <header>;
 *  en Elementor esa clase recae en un contenedor interno cuyo bloque
 *  contenedor es el envoltorio del tema, así que no llegaba a pegarse).
 *  ------------------------------------------------------------------ */
.elementor-location-header { position: sticky; top: 0; z-index: 50; }

/* Botón "volver arriba": la página es larga y el menú queda muy arriba. */
.sar-arriba {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 9999px;
	background-color: #3B8EC4;
	color: #fff;
	box-shadow: 0 10px 15px -3px rgb(15 59 92 / 0.25), 0 4px 6px -4px rgb(15 59 92 / 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, background-color .2s ease, visibility .2s;
}
.sar-arriba:hover { background-color: #1E5F8A; }
.sar-arriba:focus-visible { outline: 2px solid #0F3B5C; outline-offset: 2px; }
.sar-arriba.sar-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sar-arriba svg { width: 20px; height: 20px; display: block; }

/* Marca invisible a 400 px del principio: al salir de pantalla aparece el botón
   (así no depende sólo del evento de scroll y funciona en cualquier navegador). */
.sar-centinela { position: absolute; top: 0; left: 0; width: 1px; height: 400px; pointer-events: none; visibility: hidden; }
@media (min-width: 1024px) { .sar-arriba { right: 32px; bottom: 32px; } }
@media print { .sar-arriba { display: none; } }

/* Los títulos son del diseño: el widget de Encabezado no debe imponer la
   tipografía global de Elementor (Roboto), que cambia los cortes de línea y la
   altura de las secciones. Se hereda del contenedor, como el resto del diseño. */
.elementor-widget-heading .elementor-heading-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}