/* CSS propio del proyecto, no generado por transform.mjs.
   No colocar aquí nada que deba sobrevivir dentro de elementor-shared.css: ese fichero se
   sobrescribe por completo en cada `npm run transform` (paso de deduplicación de CSS). */

body.legal-page {
	background-color: var(--ast-global-color-5);
	background-image: none;
}
.legal-content {
	max-width: 760px;
	margin: 60px auto;
	padding: 0 24px;
	line-height: 1.6;
	color: #222;
}
.legal-content h1 { margin-bottom: 24px; }
.legal-content h4 { margin-top: 32px; margin-bottom: 8px; }
.legal-content ul { padding-left: 20px; }

/* Elementor oculta (visibility:hidden) cualquier elemento con animación de entrada hasta que
   su JS de frontend dispara la animación. En un export estático eso añade ~2s de retraso de
   LCP sin ningún beneficio (no hay nada "que revelar" en un snapshot). Se anula globalmente. */
.elementor-invisible { visibility: visible !important; opacity: 1 !important; }

/* Dos tipologías de botón (deshace el experimento con el naranja de marca #FF885E: se
   vuelve al verde azulado original #3AA6B9 = --ast-global-color-0, sin tocar la variable).

   Tipología A -- fondo claro alrededor (p.ej. "Probar la app", "MÁS SOBRE ENTIBO"):
   verde azulado por defecto, texto blanco; hover a azul oscuro de marca (#0F1E2E).
   Los botones de Elementor comparten clase (.elementor-button) así que se apuntan por el
   data-id de su widget en la home (src/_generated/index.json).

   Tipología B -- CTAs de "unirse" (nav "Únete ahora", "Quiero participar", "Unete al
   proyecto"): blanco por defecto con texto oscuro; hover a ese mismo verde azulado,
   manteniendo el texto oscuro (contraste ~5,9:1, de sobra). */

/* Contraste: texto blanco sobre este teal da 2.86:1 (falla el 4.5:1 requerido). Se mantiene el
   fondo de marca y se pasa el texto a oscuro, como ya hace la Tipología B de más abajo. */
[data-id="61976fa"] .elementor-button,
[data-id="90bd982"] .elementor-button {
	background-color: #3AA6B9 !important;
	border-color: #3AA6B9 !important;
	color: #0F1E2E !important;
}
[data-id="61976fa"] .elementor-button:hover,
[data-id="90bd982"] .elementor-button:hover {
	background-color: #0F1E2E !important;
	border-color: #0F1E2E !important;
	color: #ffffff !important;
}

[data-id="d95731a"] .elementor-button,
[data-id="915521f"] .elementor-button,
.ast-custom-button {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #0F1E2E !important;
}
[data-id="d95731a"] .elementor-button:hover,
[data-id="915521f"] .elementor-button:hover,
.ast-custom-button:hover {
	background-color: #3AA6B9 !important;
	border-color: #3AA6B9 !important;
	color: #0F1E2E !important;
}

/* Área táctil de los enlaces del menú de cabecera: 9px de padding se queda corto (~35px de
   alto) frente al mínimo recomendado de 44px. Solo en el <ul> de navegación: el
   .ast-builder-button-wrap del CTA "Únete ahora" lleva un <a class="menu-link"> duplicado
   que Astra mantiene oculto (fallback), y forzar su display aquí lo hacía visible por error. */
.main-navigation .menu-link {
	padding: 13px 12px !important;
	min-height: 44px;
}

/* Contraste: en la franja oscura "Transformamos el conteo de grullas..." el párrafo hereda
   un gris que apenas se lee sobre el navy de fondo. Se usa el mismo gris claro que ya usa la
   etiqueta de estado del timeline (EN CURSO / EN DESARROLLO / CICLO CONTINUO,
   .ha-horizontal-timeline-date), para no romper la identidad visual con blanco puro. */
[data-id="3fb2b6b"] p { color: #a2a2a2 !important; }