/* Netgate V4 — solo estados de comportamiento. La apariencia vive en las clases globales de Elementor. */

/* Foco visible accesible */
.ng-pagina :focus-visible, .ng-cab :focus-visible, .ng-pie :focus-visible { outline: 3px solid #00A9C9; outline-offset: 3px; }

/* ---------- Aparición al bajar ---------- */
[data-ng-rv="0"] { opacity: 0; transform: translateY(24px); }
[data-ng-rv="1"] { opacity: 1; transform: none; transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); }

/* ---------- Menú ---------- */
.ng-menu-btn .ng-chevron { width: 12px; height: 12px; transition: transform .2s; flex: 0 0 auto; }
.ng-menu-grupo.ng-abierto > .ng-menu-btn .ng-chevron { transform: rotate(180deg); }
.ng-menu-grupo.ng-abierto > .ng-menu-btn,
.ng-menu-btn.ng-actual { color: #6A0DB0; border-bottom-color: #6A0DB0; }
.ng-menu-grupo.ng-abierto > .ng-menu-sub { display: flex; animation: ngIn .28s cubic-bezier(.22,.61,.36,1) both; }
.ng-menu-item.ng-actual { color: #6A0DB0; background-color: #F1E9FB; }
@keyframes ngIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.ng-cab-antel.ng-visible { display: block; }
.ng-cab-hamb svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
	.ng-cab.ng-menu-abierto .ng-menu {
		display: flex; position: absolute; left: 12px; right: 12px; width: auto; top: 100%; margin-top: 6px; z-index: 5;
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		background: #fff; border: 1px solid #DCD4EF; border-radius: 14px; padding: 6px;
		box-shadow: 0 18px 40px rgba(27,10,94,.16); animation: ngIn .28s cubic-bezier(.22,.61,.36,1) both;
		max-height: calc(100vh - 110px); overflow-y: auto;
	}
	.ng-cab.ng-menu-abierto .ng-menu-btn { width: 100%; justify-content: space-between; min-height: 48px; border-bottom: 0; }
	.ng-cab .ng-menu-grupo.ng-abierto > .ng-menu-sub {
		position: static; min-width: 0; width: auto; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px 12px;
	}
}

/* ---------- Banner ---------- */
.ng-banner { touch-action: pan-y; }
.ng-banner-pista { transition: transform .6s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.ng-ban-flecha {
	position: absolute; z-index: 3; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 0;
	background: rgba(255,255,255,.88); color: #1B0A5E; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 16px rgba(10,4,40,.25); padding: 0;
}
.ng-ban-flecha svg { width: 20px; height: 20px; }
.ng-ban-flecha.ng-prev { left: 16px; } .ng-ban-flecha.ng-next { right: 16px; }
.ng-ban-ctrl { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0 2px; width: 100%; }
.ng-ban-punto { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ng-ban-punto span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #C9BFE3; transition: background .2s, transform .2s; }
.ng-ban-punto[aria-current="true"] span { background: #6A0DB0; transform: scale(1.15); }
.ng-pausa {
	min-width: 32px; height: 32px; padding: 0 10px; border: 1.5px solid #B9AFD9; border-radius: 999px; background: #fff; color: #1B0A5E;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
}
.ng-pausa svg { width: 14px; height: 14px; }
.ng-ban-ctrl .ng-pausa { margin-left: 6px; }
@media (max-width: 767px) {
	.ng-ban-flecha { width: 36px; height: 36px; margin-top: -18px; }
	.ng-ban-flecha.ng-prev { left: 8px; } .ng-ban-flecha.ng-next { right: 8px; }
}

/* ---------- Carrusel de logos ---------- */
.ng-logos-ctrl { display: flex; justify-content: flex-end; width: 100%; }
.ng-logos.ng-sin-movimiento { overflow-x: auto; }

/* ---------- Formulario ---------- */
.ng-form .ng-error-campo { font-size: 13px; font-weight: 600; color: #B42318; }
.ng-form [aria-invalid="true"] { border-color: #B42318 !important; }
.ng-contador { align-self: flex-end; font-size: 13px; color: #4A4666; }

/* ---------- Acordeón ---------- */
.ng-acordeon-item.ng-abierto .ng-acordeon-panel { display: block; animation: ngIn .28s cubic-bezier(.22,.61,.36,1) both; }
.ng-acordeon-item.ng-abierto .ng-acordeon-ico { transform: rotate(180deg); }
.ng-acordeon-btn:hover .ng-acordeon-tit { color: #6A0DB0; }

@media (prefers-reduced-motion: reduce) {
	[data-ng-rv] { opacity: 1 !important; transform: none !important; }
	.ng-banner-pista, .ng-menu-sub, .ng-menu, .ng-acordeon-panel, .ng-acordeon-ico { transition: none !important; animation: none !important; }
}

/* Galería con flechas (v1.4) */
.ng-galeria-pista::-webkit-scrollbar { display: none; }
.ng-galeria-flecha[aria-disabled="true"] { opacity: .35; cursor: default; }
.ng-galeria-item > * { height: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { .ng-galeria-pista { scroll-behavior: smooth; } }

/* Grupos de opciones y elementos plegados (v1.5) */
.ng-plegado.ng-plegado.ng-plegado { display: none !important; }
.ng-opcion { user-select: none; }
.ng-grupo-filtro .ng-opcion[aria-pressed="true"] { background: #6A0DB0 !important; color: #ffffff !important; border-color: #6A0DB0 !important; }
.ng-grupo-filtro .ng-opcion[aria-pressed="false"] { background: #ffffff !important; color: #1B0A5E !important; border-color: #E4E0F2 !important; }
.ng-grupo-tipo .ng-opcion[aria-pressed="true"] { background: #ffffff !important; color: #6A0DB0 !important; box-shadow: 0 2px 8px rgba(27,10,94,0.12) !important; }
.ng-grupo-tipo .ng-opcion[aria-pressed="false"] { background: transparent !important; color: #4A4666 !important; box-shadow: none !important; }
.ng-opcion:focus-visible { outline: 3px solid #00A9C9; outline-offset: 2px; }