/* ==========================================================================
   Sitio ACTUAL · páginas con el filtro de Bricks (ES/EN): filtro y tarjetas con el diseño de /nuevo/;
   héroe propio solo en Grado. Lo carga app/grado-actual.php en esas páginas (body.nvg). Copia de
   "14. Listados y tarjetas" de nuevo.css aplicada al marcado de Bricks.
   Ojo: aquí html tiene font-size 62.5% (1rem = 10px), por eso los rem van ×1.6 respecto a nuevo.css.
   ========================================================================== */

@font-face { font-family: "PoppinsHost"; font-weight: 800; font-display: swap; src: url("/nuevo/assets/fonts/Poppins-ExtraBold.woff2") format("woff2"); }

.nvg {
	--c-turquesa: #00bbc4;
	--c-turquesa-txt: #007d84;
	--c-marino: #182640;
	--c-suave: #5b6878;
	--c-fondo: #f2f6f9;
	--c-borde: #dfe6ed;
	--c-blanco: #ffffff;
	--r-m: 1.6rem;
	--r-l: 2.4rem;
	--sombra-m: none; /* sin sombras: el usuario las ve falsas */
	--sombra-l: none;
}

/* Filtro de Bricks (sin JS, o hasta que el JS monte el nuevo) */
.nvg .brxe-filter-checkbox { min-width: 0; margin: 0 0 2.4rem; padding: 0; border: 0; }
.nvg .brxe-filter-checkbox .brx-filter-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nvg .brxe-filter-checkbox .brx-filter-options { display: flex; flex-wrap: wrap; gap: .64rem; margin: 0; padding: 0; list-style: none; }
.nvg .brxe-filter-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.nvg .brxe-filter-checkbox[data-mode=button] .bricks-button,
.nvg .nvg-chip {
	display: inline-flex; align-items: center; padding: .88rem 1.6rem; border: 1px solid var(--c-borde) !important; border-radius: 999px;
	background: var(--c-blanco) !important; color: var(--c-marino) !important; font-family: inherit; font-size: 1.2rem; font-weight: 600; letter-spacing: 0; line-height: 1.3;
	cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.nvg .nvg-chip::before { content: ""; display: inline-block; flex: none; width: .88rem; height: .88rem; margin-right: .72rem; border-radius: 999px; background: var(--fac, var(--c-marino)); }
.nvg .brxe-filter-checkbox[data-mode=button] .bricks-button:hover, .nvg .nvg-chip:hover { border-color: var(--c-turquesa) !important; }
.nvg .brxe-filter-checkbox[data-mode=button] .bricks-button.brx-option-active,
.nvg .nvg-chip[aria-pressed="true"] { border-color: var(--c-marino) !important; background: var(--c-marino) !important; color: var(--c-blanco) !important; }
.nvg .nvg-chip:focus-visible { outline: 2px solid var(--c-turquesa); outline-offset: 2px; }

/* Con JS: barra nueva (buscador + Todas + facultades) y el filtro de Bricks oculto */
.nvg .brxe-filter-checkbox.nvg-reemplazado { display: none; }
.nvg .nvg-filtro { position: sticky; top: calc(var(--nvg-cab, 0px) + .8rem); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; width: 100%; margin-bottom: 0; padding: 1.2rem; border: 1px solid var(--c-borde); border-radius: var(--r-l); background: rgba(255, 255, 255, .96); box-shadow: var(--sombra-m); backdrop-filter: blur(8px); }
.nvg.admin-bar .nvg-filtro { top: calc(var(--nvg-cab, 0px) + 32px + .8rem); }
.nvg .nvg-filtro__buscar { position: relative; flex: 1 1 28.8rem; display: flex; align-items: center; margin: 0; }
.nvg .nvg-filtro__ico { position: absolute; left: 1.6rem; width: 1.76rem; height: 1.76rem; color: var(--c-suave); pointer-events: none; }
.nvg .nvg-filtro__buscar input { width: 100%; min-height: 4.64rem; margin: 0; padding: .96rem 1.6rem .96rem 4.4rem; border: 1px solid var(--c-borde); border-radius: 999px; background: var(--c-fondo); font-family: inherit; font-size: 1.4rem; color: var(--c-marino); }
.nvg .nvg-filtro__buscar input:focus { outline: none; border-color: var(--c-turquesa); background: var(--c-blanco); outline: 3px solid rgba(0, 187, 196, .2); outline-offset: 0; }
.nvg .nvg-filtro__chips { display: flex; flex-wrap: wrap; gap: .64rem; }
.nvg .nvg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
	.nvg .nvg-filtro { position: static; }
	.nvg .nvg-filtro__chips { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; padding-bottom: .4rem; }
	.nvg .nvg-chip { flex: none; }
}

/* Rejilla y tarjetas */
.nvg .brx-grid:has(> .tarjeta-carrera) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(1.6rem, 1.44rem + .5vw, 2.4rem) !important; width: 100%; }
@media (max-width: 991px) { .nvg .brx-grid:has(> .tarjeta-carrera) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .nvg .brx-grid:has(> .tarjeta-carrera) { grid-template-columns: minmax(0, 1fr) !important; } }
.nvg .tarjeta-carrera[hidden] { display: none; }

.nvg .tarjeta-carrera { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--c-borde); border-radius: var(--r-l); background: var(--c-blanco); box-shadow: none; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.nvg .tarjeta-carrera:hover { transform: translateY(-6px); box-shadow: var(--sombra-l); }
.nvg .tarjeta-carrera > .brxe-image { display: block; width: 100%; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 10; object-fit: cover; background: var(--c-fondo); transition: transform .7s ease; }
.nvg .tarjeta-carrera:hover > .brxe-image { transform: scale(1.06); }
.nvg .tarjeta-carrera > .brxe-block { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .8rem; flex: 1; min-height: 0 !important; padding: 2rem !important; background: var(--c-blanco); }
.nvg .tarjeta-carrera .tarjeta-heading { margin: 0; font-size: clamp(1.8rem, 1.6rem + .4vw, 2.08rem) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0; color: var(--c-marino) !important; }
.nvg .tarjeta-carrera .p-text-tarjeta, .nvg .tarjeta-carrera .p-text-tarjeta p { margin: 0; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--c-suave) !important; text-wrap: pretty; }
.nvg .nvg-card__tag { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2; max-width: calc(100% - 2.4rem); padding: .4rem 1.2rem; border-radius: 999px; background: var(--fac, var(--c-turquesa)); color: var(--c-marino); font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.nvg .nvg-card__ir { display: inline-flex; align-items: center; gap: .64rem; margin-top: auto; padding-top: .64rem; color: var(--c-turquesa-txt); font-size: 1.4rem; font-weight: 700; }
.nvg .nvg-card__ir svg { width: 1.6rem; height: 1.6rem; transition: transform .2s; }
.nvg .tarjeta-carrera:hover .nvg-card__ir svg { transform: translateX(3px); }

.nvg .tarjeta-carrera .boton-principal { align-self: flex-start; margin-top: auto; }
.nvg .tarjeta-carrera .p-text-tarjeta + .boton-principal { margin-top: auto; }

.nvg .nvg-vacio { width: 100%; margin: 0; padding: 3.2rem; border: 1px dashed var(--c-borde); border-radius: var(--r-m); text-align: center; color: var(--c-suave); }
.nvg .nvg-vacio[hidden] { display: none; }

/* Héroe (sustituye la sección de Bricks; ver nvg_heroe() en app/grado-actual.php) ----------------- */

.nvgh {
	--cyan: #1ddddd;
	position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
	min-height: clamp(42rem, 62vh, 58rem); background: var(--c-marino) var(--nvgh-bg) 70% center / cover no-repeat; color: var(--c-blanco);
	font-family: PoppinsHost, Poppins, sans-serif;
}
/* Velo oscuro sobre la foto (no es un degradado de color): fuerte detrás del texto y casi transparente a la derecha,
   para que la foto se vea viva. La foto vive en ::after para poder acercarla al entrar (GSAP, assets/grado-actual.js). */
.nvgh { background-image: none; }
.nvgh::after { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--nvgh-bg) 70% center / cover no-repeat; transform-origin: 70% 50%; }
.nvgh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15, 26, 46, .94) 0%, rgba(15, 26, 46, .82) 38%, rgba(15, 26, 46, .35) 68%, rgba(15, 26, 46, .08) 100%); }
.nvgh__in { display: flex; align-items: center; justify-content: space-between; gap: 4rem; width: 90%; max-width: 135rem; margin-inline: auto; padding-block: clamp(3.2rem, 2.4rem + 2.4vw, 5.6rem); }
.nvgh__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; width: 100%; }

.nvgh__migas { display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: 1.2rem; color: rgba(255, 255, 255, .75); }
.nvgh__migas > * + *::before { content: "›"; margin-right: .8rem; opacity: .6; }
.nvgh__migas a { color: var(--c-blanco); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.nvgh__migas a:hover { color: var(--cyan); }
.nvgh__pill { padding: .56rem 1.5rem; border: 1px solid rgba(29, 221, 221, .55); border-radius: 999px; background: rgba(29, 221, 221, .12); color: var(--cyan); font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.nvgh__titulo { max-width: 24ch; margin: 0; font-size: clamp(2.8rem, 1.9rem + 2.2vw, 4.8rem); font-weight: 300; font-style: normal; line-height: 1.04; letter-spacing: -.025em; color: var(--c-blanco); text-wrap: balance; }
.nvgh__hl { display: block; font-weight: 800; color: var(--cyan); letter-spacing: -.03em; }
.nvgh__parrafo { max-width: 60ch; margin: 0; font-size: 1.55rem; line-height: 1.65; color: rgba(255, 255, 255, .9); }

.nvgh__botones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; }
.nvgh__btn { display: inline-flex; align-items: center; gap: .8rem; min-height: 4.4rem; padding: 1rem 2.2rem; border: 2px solid transparent; border-radius: 999px; font-size: 1.5rem; font-weight: 700; line-height: 1; text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.nvgh__btn svg { width: 1.8rem; height: 1.8rem; flex: none; }
.nvgh__btn--primario { background: var(--cyan); color: var(--c-marino); }
.nvgh__btn--primario:hover { background: var(--c-blanco); color: var(--c-marino); transform: translateY(-2px); }
.nvgh__btn--primario:hover svg { animation: nvgh-baja .6s ease; }
.nvgh__btn--contorno { border-color: rgba(255, 255, 255, .55); color: var(--c-blanco); }
.nvgh__btn--contorno:hover { border-color: var(--c-blanco); background: var(--c-blanco); color: var(--c-marino); transform: translateY(-2px); }
.nvgh__btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
@keyframes nvgh-baja { 50% { transform: translateY(3px); } }

/* 4-nov-2026: datos como fila informativa, sin borde ni fondo ni elevación al pasar (antes parecían botones y se tocaban
   sin respuesta). El único botón es el próximo inicio, que lleva a Admisiones. */
.nvgh__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem 2rem; width: 100%; margin: 1rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid rgba(255, 255, 255, .14); list-style: none; }
.nvgh__dato { display: flex; align-items: center; gap: 1rem; padding: 0; }
.nvgh__dato-ico { display: grid; place-items: center; flex: none; color: var(--cyan); }
.nvgh__dato-ico svg { width: 2.6rem; height: 2.6rem; }
.nvgh__dato-txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.nvgh__rotulo { font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.nvgh__valor { font-size: clamp(1.5rem, 1.3rem + .35vw, 1.8rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--c-blanco); }
/* Próximo inicio: botón cyan sólido, el dato que más importa y el único que se puede tocar. */
.nvgh__dato--fecha { display: block; }
.nvgh__dato-enlace { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; height: 100%; padding: 1.2rem 1.6rem; border-radius: 1.6rem; background: var(--cyan); color: var(--c-marino); text-decoration: none; transition: background .2s; }
.nvgh__dato-enlace:hover { background: #4ee6e6; }
.nvgh__dato-enlace:focus-visible { outline: 3px solid var(--c-blanco); outline-offset: 3px; }
.nvgh__dato--fecha .nvgh__dato-ico, .nvgh__dato--fecha .nvgh__rotulo, .nvgh__dato--fecha .nvgh__valor { color: var(--c-marino); }
.nvgh__dato-cta { margin-left: auto; font-size: 1.4rem; font-weight: 800; white-space: nowrap; }

@media (max-width: 991px) {
	.nvgh { min-height: 0; }
	.nvgh::before { background: rgba(15, 26, 46, .78); }
	.nvgh::after { background-image: var(--nvgh-bg-m); }
}
@media (max-width: 600px) {
	.nvgh__btn { flex: 1 1 100%; justify-content: center; }
	/* Celular: los cuatro datos en dos columnas compactas, para que el héroe no ocupe más de una pantalla. */
	.nvgh__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
	.nvgh__dato-ico svg { width: 2.2rem; height: 2.2rem; }
	.nvgh__dato--fecha { grid-column: 1 / -1; }
	.nvgh__valor { font-size: 1.35rem; }
	.nvgh__parrafo { font-size: 1.45rem; }
}

/* Animación de entrada (GSAP): oculto solo mientras llega el JS. Si no llega, se muestra solo a los 3 s. */
/* El título y el párrafo NO se ocultan: son el LCP del héroe y ocultarlos lo retrasaba hasta que llegaba el JS (4,5 s en un
   celular lento, 23-oct-2026). Solo se ocultan las piezas secundarias. */
.nvg-anim .nvgh [data-nvgh-a]:not(.nvgh__parrafo), .nvg-anim .nvgh [data-nvgh-dato] { opacity: 0; animation: nvgh-mostrar 0s 2s forwards; }
.nvg-anim.nvgh-listo .nvgh [data-nvgh-a]:not(.nvgh__parrafo), .nvg-anim.nvgh-listo .nvgh [data-nvgh-dato] { opacity: 1; animation: none; }
@keyframes nvgh-mostrar { to { opacity: 1; } }
.nvgh__titulo .nvgh-palabra { display: inline-block; will-change: transform, filter, opacity; }

/* Acercamiento lento de la foto al entrar (lo controla el JS; sin JS o con «reducir movimiento», la foto queda quieta). */
@keyframes nvgh-acerca { from { transform: scale(1.12); } to { transform: scale(1); } }
.nvg-anim.nvgh-listo .nvgh::after { animation: nvgh-acerca 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .nvgh::after { animation: none !important; } }

/* Sección de documentos (Validación, Homologación y sus landings) -------------------------------------------
   En Bricks: un bloque con dos H2 (antetítulo + título) y la «Nota» al lado, y debajo el código .documentos-requeridos
   (lista vertical con línea). Aquí: título arriba, documentos en tarjetas numeradas y la nota al final como aviso.
   Solo CSS sobre el marcado de Bricks (display: contents + order), con el título que añade grado-actual.js. */
.nvg .brxe-container:has(> .brxe-code .documentos-requeridos) { display: flex; flex-direction: column; gap: 2.4rem; }
.nvg .brxe-container:has(> .brxe-code .documentos-requeridos) > * { order: 4; }
.nvg .brxe-container:has(> .brxe-code .documentos-requeridos) > .brx-grid:has(.subheader) { display: contents !important; } /* Bricks fija display: grid por id */
.nvg .brx-grid:has(.subheader) > .brxe-block:not(:has(> .subheader)) { order: 1; display: flex; flex-direction: column; gap: .4rem; }
.nvg .brxe-container:has(> .brxe-code .documentos-requeridos) > .brxe-code { order: 2; }
.nvg .brx-grid:has(.subheader) > .brxe-block:has(> .subheader) { order: 3; }

/* Antetítulo + título (los dos H2 de Bricks) */
.nvg .brxe-block:has(> h2.brxe-heading + h2.brxe-heading) > h2.brxe-heading:first-child { margin: 0; color: var(--c-turquesa-txt) !important; font-size: 1.3rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .12em; text-transform: uppercase; }
.nvg .brxe-block:has(> h2.brxe-heading + h2.brxe-heading) > h2.brxe-heading + h2.brxe-heading { margin: 0; color: var(--c-marino) !important; font-size: clamp(2.6rem, 2rem + 1.4vw, 3.8rem) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em; }

/* Documentos: panel marino (título, ayuda, WhatsApp) + lista de verificación en filas, sin cajas (23-oct-2026,
   las tarjetas numeradas no gustaron). La estructura .nvg-docs la arma grado-actual.js alrededor de la lista de Bricks. */
.nvg .documentos-requeridos { padding: 0 !important; }
.nvg .nvg-docs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); overflow: hidden; border: 1px solid var(--c-borde); border-radius: 2.4rem; background: var(--c-blanco); }
.nvg .nvg-docs__panel { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: clamp(2.8rem, 1.8rem + 2vw, 4.4rem); background: var(--c-marino); color: var(--c-blanco); }
.nvg .nvg-docs__ante { margin: 0; color: #1ddddd; font-size: 1.2rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nvg .nvg-docs__titulo { margin: 0; color: var(--c-blanco); font-size: clamp(2.4rem, 2rem + .9vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.nvg .nvg-docs__ayuda { margin: 0; color: rgba(255, 255, 255, .78); font-size: 1.45rem; line-height: 1.6; }
.nvg .nvg-docs__wa { display: inline-flex; align-self: flex-start; align-items: center; gap: .8rem; margin-top: .8rem; padding: 1.1rem 2rem; border-radius: 999px; background: #1ddddd; color: var(--c-marino) !important; font-size: 1.4rem; font-weight: 700; text-decoration: none; transition: background .2s; }
.nvg .nvg-docs__wa:hover { background: var(--c-blanco); }
.nvg .nvg-docs__wa svg { width: 1.9rem; height: 1.9rem; }
.nvg .nvg-docs__der { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.2rem, 1.4rem + 1.6vw, 3.6rem) clamp(2rem, 1rem + 2vw, 4rem); }
.nvg .nvg-docs__sub { display: flex; align-items: center; gap: 1rem; margin: 0 0 .6rem; color: var(--c-turquesa-txt); font-size: 1.2rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nvg .nvg-docs__sub::after { content: ""; flex: 1; height: 1px; background: var(--c-borde); }
.nvg .nvg-docs .documentos-requeridos__lista { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 3.2rem !important; row-gap: 0 !important; padding: 0 !important; }
.nvg .nvg-docs .documentos-requeridos__item { display: flex !important; align-items: flex-start; gap: 1.4rem; min-height: 0 !important; padding: 1.8rem 0 !important; border: 0; border-bottom: 1px solid var(--c-borde); text-align: left !important; }
.nvg .nvg-docs .documentos-requeridos__item::before { display: none !important; }
.nvg .nvg-docs .documentos-requeridos__icono { flex: none; width: 4.4rem !important; height: 4.4rem !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--c-turquesa-suave, #e3f7f8) !important; color: var(--c-turquesa-txt) !important; box-shadow: none !important; }
.nvg .nvg-docs .documentos-requeridos__icono svg { width: 2rem !important; height: 2rem !important; }
.nvg .nvg-docs .documentos-requeridos__texto { max-width: none !important; margin: 0 !important; padding-top: .9rem; color: var(--c-marino) !important; font-size: 1.45rem !important; font-weight: 500 !important; line-height: 1.5 !important; }
.nvg .nvg-docs .documentos-requeridos__opcional { display: inline-block; margin: 0 0 0 .6rem !important; padding: .2rem .9rem !important; border-radius: 999px; background: var(--c-fondo) !important; color: var(--c-suave) !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; vertical-align: .1em; }
@media (max-width: 991px) {
	.nvg .nvg-docs { grid-template-columns: minmax(0, 1fr); }
	.nvg .nvg-docs .documentos-requeridos__lista { grid-template-columns: minmax(0, 1fr) !important; }
	.nvg .nvg-docs__der { padding: 2rem 2rem 1rem; }
}
.nvg .nvg-docs .documentos-requeridos__item:last-child { border-bottom: 0; }
@media (min-width: 992px) { .nvg .nvg-docs .documentos-requeridos__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }

/* Nota: aviso discreto debajo de los documentos */
.nvg .brx-grid:has(.subheader) > .brxe-block:has(> .subheader) { display: flex; flex-direction: column; gap: .4rem; padding: 1.6rem 2rem !important; border: 0 !important; border-left: 4px solid var(--c-turquesa) !important; border-radius: 1.2rem !important; background: var(--c-fondo) !important; }
.nvg .brx-grid:has(.subheader) .subheader { margin: 0; color: var(--c-marino) !important; font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; }
.nvg .brx-grid:has(.subheader) .subheader ~ .brxe-text, .nvg .brx-grid:has(.subheader) .subheader ~ .brxe-text p { margin: 0; color: var(--c-suave) !important; font-size: 1.35rem !important; line-height: 1.6 !important; }