/* Theme Name: UGM Description: Tema de la migracion de www.ugm.cl desde Prontus. Los tokens de color, tipografia y espaciado viven en theme.json y son la unica fuente de valores: ningun componente inventa los suyos. Author: Naitus Version: 0.1.0 Requires PHP: 8.2 Text Domain: ugm */ /* ---------- Tokens derivados ---------- Los colores base vienen de theme.json. Aca solo se definen los roles semanticos (fondo, superficie, texto) que cambian entre modo claro, oscuro y alto contraste. Un componente usa el rol, nunca el color crudo, para que los tres modos funcionen sin duplicar reglas. */ :root { --ugm-fondo: var(--wp--preset--color--blanco); --ugm-superficie: var(--wp--preset--color--gris-claro); --ugm-texto: var(--wp--preset--color--grafito); --ugm-texto-suave: var(--wp--preset--color--gris); --ugm-borde: #DCDDDF; --ugm-enlace: var(--wp--preset--color--azul); --ugm-barra: var(--wp--preset--color--grafito); --ugm-barra-texto: var(--wp--preset--color--blanco); --ugm-foco: var(--wp--preset--color--acento); --ugm-radio: 6px; /* Celeste de los sitios de admisión, para que las tarjetas de programa hablen el mismo idioma que el destino al que llevan. */ --ugm-celeste: #61B7E4; --ugm-medida: 68ch; } [data-tema="oscuro"] { --ugm-fondo: var(--wp--preset--color--grafito); --ugm-superficie: var(--wp--preset--color--grafito-medio); --ugm-texto: #F2F3F4; --ugm-texto-suave: #C3C7CC; --ugm-borde: #3C4650; --ugm-enlace: #9FB2FF; --ugm-barra: #10161C; } /* Alto contraste: negro puro sobre blanco puro y viceversa, bordes visibles. Es un modo declarado por el sitio actual, no un extra (CA-01.3). */ [data-contraste="alto"] { --ugm-fondo: #000000; --ugm-superficie: #000000; --ugm-texto: #FFFFFF; --ugm-texto-suave: #FFFFFF; --ugm-borde: #FFFFFF; --ugm-enlace: #FFFF00; --ugm-barra: #000000; --ugm-barra-texto: #FFFFFF; --ugm-foco: #FFFF00; } /* ---------- Reset minimo ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--ugm-fondo); color: var(--ugm-texto); } img { max-width: 100%; } /* D-74: dentro del contenido migrado el alto lo da el atributo `height` del HTML, como en producción, que no tiene esta regla. `:where` mantiene la especificidad del reset. */ img:where(:not(.CUERPO img, .ugm-cuerpo img, .ugm-intro__texto img)) { height: auto; } a { color: var(--ugm-enlace); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ugm-foco); outline-offset: 2px; } /* ---------- Estructura ---------- */ .ugm-contenedor { width: min(100% - var(--wp--preset--spacing--50) * 2, var(--wp--custom--ancho, 1240px)); margin-inline: auto; } .ugm-saltar { position: absolute; left: -9999px; top: var(--wp--preset--spacing--20); background: var(--ugm-fondo); color: var(--ugm-texto); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); z-index: 100; border-radius: var(--ugm-radio); } .ugm-saltar:focus { left: var(--wp--preset--spacing--40); } .ugm-cabecera { background: var(--ugm-barra); color: var(--ugm-barra-texto); } .ugm-cabecera a { color: var(--ugm-barra-texto); } .ugm-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--50); padding-block: var(--wp--preset--spacing--40); flex-wrap: wrap; } .ugm-marca { font-weight: 700; font-size: var(--wp--preset--font-size--m); text-decoration: none; } .ugm-menu ul { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50); list-style: none; margin: 0; padding: 0; } .ugm-menu a { text-decoration: none; padding-block: var(--wp--preset--spacing--20); display: inline-block; } .ugm-menu a:hover { text-decoration: underline; } .ugm-controles { display: flex; gap: var(--wp--preset--spacing--20); } .ugm-boton-modo { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--ugm-radio); /* 44px de alto minimo: objetivo tactil accesible. */ min-height: 44px; padding-inline: var(--wp--preset--spacing--40); font: inherit; font-size: var(--wp--preset--font-size--s); cursor: pointer; } .ugm-boton-modo:hover { background: rgba(255,255,255,0.12); } .ugm-boton-modo:active { transform: translateY(1px); } main { display: block; } .ugm-principal { padding-block: var(--wp--preset--spacing--70); } .ugm-migas { font-size: var(--wp--preset--font-size--s); color: var(--ugm-texto-suave); margin-bottom: var(--wp--preset--spacing--40); } .ugm-migas a { color: inherit; } .ugm-articulo { max-width: var(--ugm-medida); } .ugm-articulo h1 { margin-top: 0; } .ugm-bajada { font-size: var(--wp--preset--font-size--m); color: var(--ugm-texto-suave); } .ugm-meta { font-size: var(--wp--preset--font-size--s); color: var(--ugm-texto-suave); } .ugm-firma { margin-block: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--40); background: var(--ugm-superficie); border-left: 4px solid var(--ugm-enlace); border-radius: var(--ugm-radio); } .ugm-firma p { margin: 0; } /* ---------- Grilla de noticias ---------- */ .ugm-grilla { display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); list-style: none; margin: 0; padding: 0; } .ugm-tarjeta { display: flex; flex-direction: column; background: var(--ugm-superficie); border: 1px solid var(--ugm-borde); border-radius: var(--ugm-radio); overflow: hidden; transition: transform 180ms ease-out; } @media (prefers-reduced-motion: no-preference) { .ugm-tarjeta:hover { transform: translateY(-2px); } } .ugm-tarjeta__cuerpo { padding: var(--wp--preset--spacing--40); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); } .ugm-tarjeta__titulo { font-size: var(--wp--preset--font-size--base); font-weight: 700; margin: 0; line-height: 1.35; } .ugm-tarjeta__titulo a { text-decoration: none; } .ugm-tarjeta__titulo a:hover { text-decoration: underline; } .ugm-tarjeta__fecha { font-size: var(--wp--preset--font-size--xs); color: var(--ugm-texto-suave); } /* ---------- Estados ---------- */ .ugm-vacio { padding: var(--wp--preset--spacing--70); background: var(--ugm-superficie); border: 1px dashed var(--ugm-borde); border-radius: var(--ugm-radio); text-align: center; } /* ---------- Paginacion ---------- */ .ugm-paginacion { margin-top: var(--wp--preset--spacing--70); } .ugm-paginacion .page-numbers { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align: center; padding-inline: var(--wp--preset--spacing--20); border: 1px solid var(--ugm-borde); border-radius: var(--ugm-radio); text-decoration: none; margin-right: var(--wp--preset--spacing--10); } .ugm-paginacion .page-numbers.current { background: var(--ugm-enlace); color: var(--wp--preset--color--blanco); border-color: var(--ugm-enlace); } /* ---------- Pie ---------- */ .ugm-pie { background: var(--ugm-barra); color: var(--ugm-barra-texto); margin-top: var(--wp--preset--spacing--80); } .ugm-pie a { color: var(--ugm-barra-texto); } .ugm-pie__cols { display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-block: var(--wp--preset--spacing--70); } .ugm-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--20); } .ugm-pie__legal { border-top: 1px solid rgba(255,255,255,0.2); padding-block: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--s); } /* * D-76: el pie no cabia entre 770 y 1140px y la pagina quedaba mas ancha que la pantalla. Los * cuatro logos (944px) iban en una sola linea que no se podia partir, y desde 991px las redes * sociales (200px) se sumaban a la misma fila. Los logos conservan su tamano y los que no caben * pasan a la linea de abajo. Produccion tiene el mismo defecto (D-76). Fuera de este rango el pie * queda como esta. */ @media (min-width: 768px) and (max-width: 1277px) { .footer .footer__top .footer__info { flex-wrap: wrap; gap: 20px 25px; min-width: 0; } } @media (min-width: 768px) and (max-width: 990px) { .footer .footer__top .footer__info { justify-content: center; } } @media (min-width: 991px) and (max-width: 1277px) { .footer .footer__top { flex: 1 1 auto; min-width: 0; gap: 20px; } /* El espacio entre logos es el de produccion en este rango, 20px: con 25 se partia de mas. */ .footer .footer__top .footer__info { flex: 1 1 0; gap: 20px; } .footer .footer__top .footer__social { flex: 0 0 auto; } } /* ---------- Aviso de entorno ---------- */ .ugm-aviso-local { background: var(--wp--preset--color--acento); color: #fff; text-align: center; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--s); } /* ---------- Accesos de sección (D-17) ---------- Reemplaza la barra de píldoras. Cada tarjeta anticipa a dónde lleva: documento, sitio externo o página interna. Los valores salen de los tokens de theme.json. */ .ugm-accesos { background: var(--wp--preset--color--grafito); color: var(--wp--preset--color--blanco); padding-block: var(--wp--preset--spacing--70); } /* El ancho y el centrado los pone `.auxi`, el contenedor del propio sitio, para que este bloque caiga en el mismo eje que el resto de la pagina, sea cual sea la plantilla en que se use. */ .ugm-accesos__auxi { box-sizing: border-box; } .ugm-accesos__titulo { margin: 0 0 var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--l); color: var(--wp--preset--color--blanco); } /* Tres columnas en escritorio, como la referencia. No se usa auto-fit porque con tarjetas angostas metia cuatro y las etiquetas largas quedaban en tres lineas. */ .ugm-accesos__grilla { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .ugm-accesos__grilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ugm-accesos__grilla { grid-template-columns: repeat(3, 1fr); } } .ugm-acceso { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); height: 100%; /* 44px de alto mínimo por objetivo táctil; el padding ya lo supera. */ padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--grafito-medio); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--ugm-radio); color: var(--wp--preset--color--blanco); text-decoration: none; transition: border-color 180ms ease-out, background-color 180ms ease-out; } .ugm-acceso:hover { background: #36414d; border-color: rgba(255, 255, 255, 0.38); } .ugm-acceso:focus-visible { outline: 3px solid var(--wp--preset--color--acento); outline-offset: 2px; } .ugm-acceso:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .ugm-acceso { transition: none; } .ugm-acceso:active { transform: none; } } .ugm-acceso__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wp--preset--spacing--40); } .ugm-acceso__titulo { font-weight: 700; font-size: var(--wp--preset--font-size--base); line-height: 1.35; } .ugm-acceso__icono { flex: 0 0 auto; display: inline-flex; color: var(--wp--preset--color--blanco); opacity: 0.85; } .ugm-acceso__desc { /* Gris claro sobre el fondo de la tarjeta: contraste sobre 4.5:1. */ color: #C7CCD2; font-size: var(--wp--preset--font-size--s); line-height: 1.5; } /* El aviso de "se abre en pestaña nueva" existe para lectores de pantalla: el icono solo no puede ser el único portador de esa información. */ .ugm-acceso__aviso { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * La pagina actual (D-44). La tarjeta sigue siendo un enlace, pero lleva * `aria-current="page"`, un filete celeste a la izquierda y el rotulo "Estás aquí" en vez de * la flecha: la flecha promete ir a otro lado y aca no hay otro lado. */ .ugm-acceso--actual, .ugm-acceso--actual:hover { border-color: var(--ugm-celeste); box-shadow: inset 4px 0 0 var(--ugm-celeste); } .ugm-acceso__actual { flex: none; padding: 2px var(--wp--preset--spacing--20); border-radius: 999px; background: var(--ugm-celeste); color: var(--wp--preset--color--grafito); font-size: var(--wp--preset--font-size--xs); font-weight: 700; line-height: 1.5; white-space: nowrap; } /* Sobre banda clara el celeste no llega al contraste de un borde: pasa al azul. */ .ugm-banda:not(.ugm-banda--oscura) .ugm-acceso--actual { border-color: var(--wp--preset--color--azul); box-shadow: inset 4px 0 0 var(--wp--preset--color--azul); } .ugm-banda:not(.ugm-banda--oscura) .ugm-acceso__actual { background: var(--wp--preset--color--azul); color: var(--wp--preset--color--blanco); } /* * En movil los accesos de navegacion se compactan (D-44): dos columnas y sin descripcion. * Con descripcion, las ocho tarjetas de Vinculacion con el Medio median mas de una pantalla * antes del contenido de la pagina. Las descripciones son una ayuda de escritorio, no * contenido de produccion (contracts/accesos-descripciones.csv). */ @media (max-width: 767px) { .ugm-accesos--navegacion { padding-block: var(--wp--preset--spacing--50); } .ugm-accesos--navegacion .ugm-accesos__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); } .ugm-accesos--navegacion .ugm-acceso { justify-content: center; min-height: 56px; padding: var(--wp--preset--spacing--30); } .ugm-accesos--navegacion .ugm-acceso__desc { display: none; } .ugm-accesos--navegacion .ugm-acceso__cabecera { gap: var(--wp--preset--spacing--20); } /* La flecha queda siempre junto al titulo; solo el rotulo "Estás aquí" baja de linea. */ .ugm-accesos--navegacion .ugm-acceso--actual .ugm-acceso__cabecera { flex-wrap: wrap; } .ugm-accesos--navegacion .ugm-acceso__titulo { font-size: var(--wp--preset--font-size--s); line-height: 1.35; } .ugm-accesos--navegacion .ugm-acceso__icono svg { width: 18px; height: 18px; } } /* En modo alto contraste los bordes tienen que verse sí o sí. */ [data-contraste="alto"] .ugm-accesos { background: var(--ugm-fondo); } [data-contraste="alto"] .ugm-acceso { background: var(--ugm-fondo); border-color: var(--ugm-borde); color: var(--ugm-texto); } [data-contraste="alto"] .ugm-acceso__desc { color: var(--ugm-texto); } /* ---------- Hero: unifica la variante con slider (D-18) ---------- El sitio actual tiene dos encabezados de portal. El banner, que usan 11 de las 17 páginas, pone el título a la altura del centro y en 50px. El slider, que usan 2, lo pega abajo a la izquierda y en 34px. Nada lo justifica: es el mismo tipo de página. Se alinea el slider al banner, que es el patrón dominante. */ /* El bloque necesita ser la referencia de posicionamiento: sin esto el contenido absoluto se cuelga de un ancestro más alto y el título termina abajo. */ .enc-main__slider { position: relative; } .enc-main__slider .enc-main__content { position: absolute; inset: 0; /* Ojo con los ejes: el sitio pone este contenedor en flex-direction column, asi que justify-content controla el vertical y align-items el horizontal, al reves de lo que uno espera. El sitio lo usa para pegar el titulo abajo (justify: end). */ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; width: min(100% - var(--wp--preset--spacing--70) * 2, 1296px); margin-inline: auto; /* Los 30px de abajo suben el título 15px y lo dejan a la misma altura exacta que en las páginas con banner. El sitio ya usa ese mismo valor en esta variante. */ padding: 0 0 var(--wp--preset--spacing--60); } .enc-main__slider .enc-main__title { font-size: 50px; margin: 0; padding: 0; text-align: left; } /* En móvil solo se iguala el tamaño. Los márgenes laterales los resuelve el propio sitio y ahí las dos variantes ya se ven parejas. */ @media (max-width: 767px) { .enc-main__slider .enc-main__title { font-size: 30px; } } /* ---------- Mega menú de Facultades y Escuelas (D-20) ---------- El sistema de diseño del sitio ya traía las clases sub-menu__mega y sub-menu__title sin usar, así que se heredan sus colores y su tipografía. Lo que falta es la maqueta: columnas parejas, ritmo vertical y el panel contenido al ancho del sitio. */ .sub-menu__mega { padding-block: var(--wp--preset--spacing--60); } .header__links .sub-menu__mega .sub-menu__row { padding: 0; align-content: start; } .header__links .sub-menu__mega .sub-menu__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); } /* La facultad encabeza su grupo y se lee como tal: es un enlace, no un rótulo muerto. */ .header__links .sub-menu__mega .sub-menu__title { margin-bottom: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); border-bottom: 1px solid #DCDDDF; } .header__links .sub-menu__mega .sub-menu__title a { display: block; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); margin: 0; border-radius: var(--ugm-radio); line-height: 1.3; } .header__links .sub-menu__mega .sub-menu__content > a { display: block; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); margin: 0; border-radius: var(--ugm-radio); line-height: 1.35; /* El sitio deja 13px de padding y separación extra entre enlaces. Con una lista de cinco escuelas eso estiraba el panel a 640px de alto y lo dejaba medio vacío. */ } .header__links .sub-menu__mega .sub-menu__row li a + a { margin-top: 0; } /* ---------- Portada de escuela: hero con descripción ---------- */ /* El hero es una foto a sangre y encima va texto blanco. Sin una capa de por medio el contraste depende de qué haya en la foto, que cambia por escuela: sobre la biblioteca de Derecho el texto se perdía. El degradado sube desde abajo, deja la foto visible arriba y garantiza fondo oscuro justo donde está el texto. */ .ugm-hero { position: relative; /* * Color de respaldo mientras carga la foto. El banner solo trae la imagen, asi que * hasta que llega el area queda blanca y el titulo, que es blanco, desaparece. Con la * foto encima este color no se ve nunca: solo cubre ese hueco de tiempo, y lo que se * lee ahi no es una pantalla en blanco sino el banner sin foto todavia. */ background-color: var(--wp--preset--color--azul-oscuro); } /* * Bajo 426px el v1 hace `background: none !important` para cambiar la foto de fondo por * un ``, y de paso borra el color de respaldo. Hay que reponerlo con el mismo peso. */ @media (max-width: 425px) { /* Con el mismo peso no basta: entre dos `!important` gana el selector mas especifico, y el del v1 encadena dos clases. */ .main .ugm-hero.dest-full { background-color: var(--wp--preset--color--azul-oscuro) !important; } } .ugm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(12, 16, 20, 0.92) 0%, rgba(12, 16, 20, 0.82) 35%, rgba(12, 16, 20, 0.5) 65%, rgba(12, 16, 20, 0.15) 90%, rgba(12, 16, 20, 0) 100% ); pointer-events: none; } /* El contenido va sobre el degradado, no debajo. */ .ugm-hero .auxi, .ugm-hero > a { position: relative; z-index: 1; } /* El texto llegaba pegado al borde de abajo y la última línea quedaba cortada. */ .ugm-hero .cont-txt { padding-bottom: var(--wp--preset--spacing--60); } /* * El blanco del título lo ponía una regla del v1 que apunta al `h2`. Al quitar la barra * celeste el título pasó a ser el `h1` de la página y perdió el color: quedaba gris * oscuro sobre una foto oscura. Se declara acá, atado al bloque y no a la etiqueta. */ .ugm-hero .cont-txt .tit { color: var(--wp--preset--color--blanco); } [data-contraste="alto"] .ugm-hero::after { background: rgba(0, 0, 0, 0.82); } /* * El titulo del hero venia con la serif del v1 (Roboto Slab). Los banners del resto del * sitio, como el de Vinculacion con el Medio, usan DMSans-Medium, asi que se iguala. * El peso va en 400 porque la medium ya es una fuente aparte: pedirle 700 la engordaria * de forma sintetica. */ .ugm-hero .auxi .cont-txt .tit { font-family: "DMSans-Medium", sans-serif; font-weight: 400; } .ugm-hero-escuela__facultad { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--s); letter-spacing: 0.02em; } .ugm-hero-escuela__facultad a { color: var(--wp--preset--color--blanco); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 2px; } .ugm-hero-escuela__facultad a:hover { border-bottom-color: var(--wp--preset--color--blanco); } .ugm-hero-escuela__desc { margin: var(--wp--preset--spacing--30) 0 0; max-width: 52ch; color: var(--wp--preset--color--blanco); font-size: var(--wp--preset--font-size--m); line-height: 1.5; } /* ---------- Formulario de contacto de escuela ---------- */ .ugm-form { background: var(--wp--preset--color--gris-claro); padding-block: var(--wp--preset--spacing--80); } /* El ancho y el centrado los pone `.auxi`, el contenedor del propio sitio, para que este bloque caiga en el mismo eje que el resto de la pagina, sea cual sea la plantilla en que se use. */ .ugm-form__auxi { box-sizing: border-box; display: grid; gap: var(--wp--preset--spacing--60); grid-template-columns: 1fr; } @media (min-width: 900px) { .ugm-form__auxi { grid-template-columns: 1fr 1.3fr; align-items: start; } } .ugm-form__titulo { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xl); line-height: 1.2; color: var(--wp--preset--color--grafito); } .ugm-form__bajada { margin: 0; color: var(--wp--preset--color--gris); line-height: 1.6; max-width: 46ch; } .ugm-form__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--wp--preset--spacing--40); } .ugm-campo { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); } .ugm-campo--ancho { grid-column: 1 / -1; } .ugm-campo label { font-size: var(--wp--preset--font-size--s); font-weight: 700; color: var(--wp--preset--color--grafito); } .ugm-campo input[type="text"], .ugm-campo input[type="email"], .ugm-campo input[type="tel"], .ugm-campo select, .ugm-campo textarea { /* 44px de alto mínimo: objetivo táctil accesible. */ min-height: 44px; padding: var(--wp--preset--spacing--30); border: 1px solid #C4C7CB; border-radius: var(--ugm-radio); background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--grafito); font-family: inherit; font-size: var(--wp--preset--font-size--base); } .ugm-campo textarea { min-height: 120px; resize: vertical; } .ugm-campo :is(input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--azul); outline-offset: 1px; border-color: var(--wp--preset--color--azul); } /* El error se dice en texto, no solo con un borde de color. */ .ugm-campo__error { margin: 0; color: #B3261E; font-size: var(--wp--preset--font-size--s); } .ugm-campo--error :is(input, select, textarea) { border-color: #B3261E; } .ugm-consentimiento { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); font-weight: 400; font-size: var(--wp--preset--font-size--s); line-height: 1.5; color: var(--wp--preset--color--grafito); } .ugm-consentimiento input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; } .ugm-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .ugm-form__aviso { grid-column: 1 / -1; margin: 0; padding: var(--wp--preset--spacing--40); border-radius: var(--ugm-radio); background: var(--wp--preset--color--blanco); border: 1px solid #C4C7CB; font-size: var(--wp--preset--font-size--s); line-height: 1.5; } /* El enlace de la política va subrayado: dentro de un texto corrido, el color solo no lo distingue (axe link-in-text-block). */ .ugm-consentimiento a { text-decoration: underline; text-underline-offset: 2px; } [data-tema="oscuro"] .ugm-form { background: var(--ugm-superficie); } [data-tema="oscuro"] :is(.ugm-form__titulo, .ugm-campo label, .ugm-consentimiento) { color: var(--ugm-texto); } [data-tema="oscuro"] .ugm-form__bajada { color: var(--ugm-texto-suave); } [data-tema="oscuro"] .ugm-form__campos .btn__primary--outline { color: var(--ugm-texto); border-color: var(--ugm-texto); } [data-tema="oscuro"] .ugm-campo :is(input, select, textarea) { background: var(--ugm-fondo); color: var(--ugm-texto); border-color: var(--ugm-borde); } /* ---------- Portada de facultad: escuelas y carreras ---------- */ /* * La facultad lleva la clase de body `articulo`, y el v2 le deja a `.main` 70px de * padding abajo. Como esta plantilla cierra con una seccion de fondo oscuro, ese padding * salia como una franja blanca entre la seccion y el pie. En el sitio actual no se nota * porque ahi el ultimo bloque es blanco. La plantilla maneja su propio ritmo vertical. */ .single-facultad .main { padding-bottom: 0; } /* * El titulo de la seccion se despega del primer grupo de escuelas: pasa de 24 a 48px de * aire abajo. Con 24 quedaba a la misma distancia del primer grupo que los grupos entre * si, y se leia como uno mas de la lista en vez de como el encabezado de todos. * * Solo en facultad, que es donde este titulo encabeza una lista agrupada. */ .ugm-accesos--facultad .ugm-accesos__titulo { margin-bottom: var(--wp--preset--spacing--70); } .ugm-accesos--facultad .ugm-grupo + .ugm-grupo { margin-top: var(--wp--preset--spacing--70); } .ugm-grupo__titulo { margin: 0 0 var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--20); border-bottom: 1px solid rgba(255, 255, 255, 0.22); font-size: var(--wp--preset--font-size--m); color: var(--wp--preset--color--blanco); } .ugm-grupo__titulo a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .ugm-grupo__titulo a:hover { border-bottom-color: currentColor; } .ugm-grupo__titulo a:focus-visible { outline: 3px solid var(--wp--preset--color--acento); outline-offset: 3px; } [data-contraste="alto"] .ugm-grupo__titulo { color: var(--ugm-texto); border-bottom-color: var(--ugm-borde); } /* ---------- Carreras y programas de una escuela (D-23) ---------- Toma el lenguaje de los sitios de admisión, que es a donde lleva cada tarjeta: píldora con borde celeste arriba y el nombre grande. */ .ugm-programas { background: var(--wp--preset--color--grafito); color: var(--wp--preset--color--blanco); padding-block: var(--wp--preset--spacing--80); } /* El ancho y el centrado los pone `.auxi`, el contenedor del propio sitio, para que este bloque caiga en el mismo eje que el resto de la pagina, sea cual sea la plantilla en que se use. */ .ugm-programas__auxi { box-sizing: border-box; } .ugm-programas__cabecera { margin-bottom: var(--wp--preset--spacing--50); } .ugm-programas__titulo { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--xl); color: var(--wp--preset--color--blanco); } .ugm-programas__bajada { margin: 0; color: #C7CCD2; max-width: 62ch; line-height: 1.6; } /* ---------- Tarjeta de programa ---------- */ .ugm-programas__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; } .ugm-programa { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); height: 100%; padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--grafito-medio); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--ugm-radio); color: var(--wp--preset--color--blanco); text-decoration: none; transition: border-color 180ms ease-out, background-color 180ms ease-out; } .ugm-programa:hover { background: #36414d; border-color: var(--ugm-celeste); } .ugm-programa:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } .ugm-programa__etiquetas { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); } /* Misma píldora que usan los sitios de admisión. */ .ugm-etiqueta { padding: 2px 9px; border: 1px solid var(--ugm-celeste); border-radius: 4px; color: var(--ugm-celeste); font-size: var(--wp--preset--font-size--xs); font-weight: 700; text-transform: uppercase; line-height: 1.6; } .ugm-programa__titulo { font-size: var(--wp--preset--font-size--l); font-weight: 700; line-height: 1.25; /* Empuja el pie al fondo para que todas las tarjetas lo alineen. */ margin-bottom: auto; } .ugm-programa__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--wp--preset--font-size--s); color: #C7CCD2; } .ugm-programa:hover .ugm-programa__pie { color: var(--wp--preset--color--blanco); } .ugm-programa__icono { display: inline-flex; flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .ugm-programa { transition: none; } } [data-contraste="alto"] .ugm-programas { background: var(--ugm-fondo); } [data-contraste="alto"] .ugm-programa { background: var(--ugm-fondo); border-color: var(--ugm-borde); color: var(--ugm-texto); } [data-contraste="alto"] .ugm-etiqueta { color: var(--ugm-texto); border-color: var(--ugm-borde); } [data-contraste="alto"] :is(.ugm-programa__pie, .ugm-programas__bajada) { color: var(--ugm-texto); } /* ---------- Menú móvil: agrupación por facultad ---------- El acordeón del sitio es de un solo nivel, así que la facultad entra como un ítem más y sus escuelas se sangran. La jerarquía se lee sin necesitar un segundo desplegable. */ .accordionItemContent .ugm-movil-grupo > a { font-weight: 700; } .accordionItemContent .ugm-movil-grupo + .ugm-movil-hijo, .accordionItemContent .ugm-movil-hijo + .ugm-movil-hijo { margin-left: var(--wp--preset--spacing--40); } .accordionItemContent .ugm-movil-grupo:not(:first-child) { margin-top: var(--wp--preset--spacing--30); } /* ---------- Eje de alineacion de escuela y facultad ---------- */ /* * Estas dos plantillas mezclan bandas heredadas del sitio actual, que se alinean con * `.auxi`, y componentes nuevos, que traian su propio contenedor. Cada grupo venia con un * ancho distinto: 1350 el hero, 1360 las noticias, 1200 la barra de seccion y 1240 los * componentes nuevos. Como cada banda ademas cambia de color de fondo, esos desfases se * leen como escalones en el borde izquierdo. * * Aca se define un solo eje para las dos plantillas, y se le cuelgan todas las bandas. * Se toma la medida de `.auxi`, que es la que ya usa la mayoria del contenido heredado. * Va acotado a `.main` a proposito: el pie tambien usa `.auxi` y tiene su propio ancho. */ .single-escuela, .single-facultad { --ugm-eje: 1300px; --ugm-eje-aire: 15px; } @media (min-width: 1400px) { .single-escuela, .single-facultad { --ugm-eje: 1350px; } } @media (max-width: 425px) { .single-escuela, .single-facultad { --ugm-eje-aire: 10px; } } .single-escuela .main .auxi, .single-facultad .main .auxi { box-sizing: border-box; width: 100%; max-width: var(--ugm-eje); margin-inline: auto; padding-inline: var(--ugm-eje-aire); } /* * La barra de seccion fija su ancho con `!important` desde el v1 (1200px, mas angosta que * el contenido). Entra al mismo eje que el resto: el escalon entre la barra y el hero se * notaba justo en el borde donde cambia el color de fondo. */ .single-escuela .main .nav-sec .auxi, .single-facultad .main .nav-sec .auxi { max-width: var(--ugm-eje) !important; } /* * El hero de facultad trae del sitio actual una sangria propia (`padding-left: 3%`) y un * ancho mas angosto que el resto de la pagina. Con todas las bandas en un mismo eje ese * desfase queda a la vista, asi que se iguala. El aire de abajo se conserva tal cual: es * lo que le da al hero su altura. */ .single-facultad .main .dest-full .auxi { max-width: var(--ugm-eje); padding-left: var(--ugm-eje-aire); padding-right: var(--ugm-eje-aire); padding-bottom: 0; /* El titulo va centrado en el alto, no apoyado abajo como en escuela. */ align-items: center; } /* * El hero de facultad va a la mitad de alto que el del sitio actual: 245px en vez de 490, * y 158 en vez de 315 bajo 768px. Solo facultad. Escuela conserva el alto original, que es * el que necesita para el bloque de facultad, titulo y descripcion. * * Es `min-height`, no `height`: si el titulo de una facultad ocupa mas que eso, el banner * crece en vez de cortarlo. */ .single-facultad .main .dest-full.dest-video { min-height: 245px; } /* * Centrar el titulo no basta con `align-items` en el contenedor: el bloque de texto trae * `align-self: end` propio del sitio actual, con mas peso, que es lo que lo pegaba abajo. * Por eso el selector nombra tambien el `.auxi`: para pasarle por encima. */ .single-facultad .ugm-hero .auxi .cont-txt { align-self: center; /* Aire arriba y abajo, para que un titulo largo no toque los bordes del banner. */ padding-block: var(--wp--preset--spacing--40); } @media (max-width: 767px) { .single-facultad .main .dest-full.dest-video { min-height: 192px; } /* * En movil el sitio cambia la foto de fondo por un `` dentro del flujo, y ese * `` pasa a mandar el alto del banner: con su proporcion daba 384px y el * `min-height` no servia de nada. Se saca del flujo y queda de fondo recortado, para * que el alto lo fije el banner y no la foto. */ .single-facultad .ugm-hero .img-wrap { position: absolute; inset: 0; height: auto; } .single-facultad .ugm-hero .img-wrap img { width: 100%; height: 100%; object-fit: cover; } /* * Bajo 426px el sitio saca el texto del flujo y lo cuelga del borde inferior * (`position: absolute; bottom: 5%`). Vuelve al flujo para poder centrarse. El * selector nombra `.main` para pesar lo mismo que el del sitio y ganar por orden. */ .single-facultad .main .dest-full .auxi { position: relative; top: auto; bottom: auto; } } /* ---------- Bienvenida de la decana (testimonio) ---------- */ /* * Va sobre fondo claro, entre el hero y el listado de escuelas, para que la portada de * facultad respire entre dos bandas oscuras y para que la bienvenida se lea como lo que * es: alguien hablando, no otra seccion de navegacion. */ .ugm-bienvenida { background: var(--wp--preset--color--gris-claro); padding-block: var(--wp--preset--spacing--80); } /* * El testimonio se compone como pieza aparte: mas angosto que el resto de la pagina y * centrado. A todo el ancho de la columna el parrafo daba 116 caracteres por linea, muy por * encima de los 45 a 75 en que el ojo encuentra el renglon siguiente sin perderse. Acotado * quedan 67, y centrarlo separa la bienvenida del resto sin necesidad de ningun adorno. * * Es la unica banda de estas dos plantillas que se sale del eje unico de D-26, y es a * proposito: una cita es una pausa dentro de la pagina, no otra fila del listado. * * Bajo 900px no hace nada, porque ahi la columna ya es mas angosta que este tope. */ .single-facultad .main .ugm-bienvenida__auxi { max-width: 900px; } .ugm-bienvenida__titulo { margin: 0 0 var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--l); color: var(--wp--preset--color--azul); } .ugm-bienvenida__pieza { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); margin: 0; align-items: start; } @media (min-width: 768px) { .ugm-bienvenida__pieza { grid-template-columns: 180px 1fr; gap: var(--wp--preset--spacing--70); } } .ugm-bienvenida__retrato { /* El retrato del sitio viene en 120x180: se respeta esa proporcion para no deformarlo. */ aspect-ratio: 2 / 3; max-width: 180px; overflow: hidden; border-radius: var(--ugm-radio); background: #DDE1E4; } .ugm-bienvenida__retrato img { width: 100%; height: 100%; object-fit: cover; display: block; } .ugm-bienvenida__cita { margin: 0; /* La comilla es decorativa: el texto ya se anuncia como cita por el blockquote. */ position: relative; padding-left: var(--wp--preset--spacing--50); border-left: 3px solid var(--ugm-celeste); } .ugm-bienvenida__cita p { margin: 0; font-size: var(--wp--preset--font-size--m); line-height: 1.6; color: var(--wp--preset--color--grafito); } .ugm-bienvenida__firma { display: flex; flex-direction: column; gap: 2px; margin-top: var(--wp--preset--spacing--40); padding-left: var(--wp--preset--spacing--50); } .ugm-bienvenida__nombre { font-weight: 700; color: var(--wp--preset--color--azul); } .ugm-bienvenida__cargo { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } /* En modo oscuro y en alto contraste la banda clara desentona con las de al lado. */ [data-tema="oscuro"] .ugm-bienvenida, [data-contraste="alto"] .ugm-bienvenida { background: var(--ugm-fondo); } [data-tema="oscuro"] .ugm-bienvenida__titulo, [data-tema="oscuro"] .ugm-bienvenida__nombre, [data-contraste="alto"] .ugm-bienvenida__titulo, [data-contraste="alto"] .ugm-bienvenida__nombre { color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .ugm-bienvenida__cita p, [data-contraste="alto"] .ugm-bienvenida__cita p { color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .ugm-bienvenida__cargo, [data-contraste="alto"] .ugm-bienvenida__cargo { color: #C7CCD2; } /* ---------- Encabezado: sin salto al empezar a bajar ---------- */ /* * El script del sitio le pone la clase `sticky` al encabezado al primer pixel de scroll, y * el v2 traduce esa clase a `position: fixed`. Al salirse del flujo, el encabezado deja un * hueco que el contenido rellena de golpe: la pagina entera pegaba un tiron hacia arriba de * su altura completa, 176px en escritorio y 89 en movil. * * En el sitio actual esto no pasa, pero no porque este resuelto: en las paginas internas el * encabezado vive en shadow DOM y `document.getElementById("header")` no lo atraviesa, asi * que el script nunca lo encuentra y el encabezado fijo simplemente no funciona. Al mudarlo * al DOM normal el comportamiento se activo por primera vez, con el hueco incluido. * * `position: sticky` lo deja anclado igual, pero sin salirse del flujo: sigue ocupando su * espacio, asi que no hay hueco que rellenar y no hay salto. Se ajusta solo a cada ancho, * sin repetir la altura del encabezado en ningun lado. * * Queda un desplazamiento de 20px cuando el encabezado se compacta al anclarse. Ese va * suavizado por la transicion de 0,3s que el propio sitio ya tiene en el logo y en la barra * inferior, asi que se lee como que el encabezado se encoge, no como un tiron. */ body:not(.home) .header { position: sticky; top: 0; z-index: 1001; } body:not(.home) .header.sticky { position: sticky; } /* * La portada se excluye a proposito: ahi el encabezado va superpuesto sobre el hero, con * `position: fixed` desde el inicio, y por eso no tiene salto. Bajo 768px si lo tiene, * porque el sitio lo devuelve al flujo, asi que ahi recibe el mismo trato. */ @media (max-width: 767px) { .home .header { position: sticky; top: 0; z-index: 1001; } .home .header.sticky { position: sticky; } } /* ---------- Encabezado siempre compacto, D-56 ---------- */ /* * El script del sitio compacta el encabezado al primer pixel de scroll (clase `sticky`): logo * de 210 a 180px y menos aire arriba y bajo los enlaces, 152 a 142px de alto en 1440. Al * volver arriba se agrandaba de nuevo, y el encabezado cambiaba de tamano mientras se * navegaba. Queda siempre en su medida compacta: son las mismas reglas del v2 para * `.header.sticky`, con sus mismos cortes, aplicadas al encabezado en todo momento. La clase * la sigue poniendo el script, pero ya no cambia la medida. */ .header .header__logo { -webkit-flex: 0 1 180px; flex: 0 1 180px; } .header .header__bottom { padding: 20px 4vw 0; } .header .header__bottom .header__links > li > a:not(.btn__primary) { padding-bottom: 37px; } .header .header__btns .desp { padding-bottom: 30px; } @media (min-width: 991px) and (max-width: 1277px) { .header .header__bottom { padding: 20px 20px 0; } } @media (min-width: 1277px) and (max-width: 1399px) { .header .header__bottom { padding: 30px 2vw 0; } } /* ---------- Desplegable de Admision, D-57 ---------- */ /* Icono de enlace externo junto al nombre de cada sitio de admision: sale del sitio y abre una pestana nueva. Toma el color del enlace, tambien al pasar el mouse. */ .ugm-externo { display: inline-flex; flex: none; margin-left: var(--wp--preset--spacing--20); vertical-align: -1px; } .ugm-externo svg { width: 14px; height: 14px; } .header__btns .sub-menu__content a { display: flex; align-items: center; justify-content: space-between; } /* * El boton Admision, con el mouse encima, pasaba a blanco sobre un gris de 4,27:1 (el v2 le * pone blanco al 40%). Con blanco al 28% queda sobre 5:1 y se sigue viendo el cambio. */ .header__links .desp:hover .btn__primary--blur { background-color: rgba(255, 255, 255, 0.28); } /* ---------- Un solo tamano de titulo en todos los banners ---------- */ /* * El sitio actual usa cinco tamanos distintos para lo mismo: 60px la portada, 50 los * portales de seccion y las paginas internas, 35 el archivo de noticias, 36 facultad y 30 * escuela. En movil van de 30 a 16. Nada de eso responde a una jerarquia: son plantillas * que se fueron construyendo por separado, y el resultado es que el mismo elemento cambia * de peso segun donde caiga el visitante. * * Se unifican todos en el tamano de facultad, 36px en escritorio y 26 en movil, y en * DMSans-Medium, que ya usan los portales y las dos portadas de facultad y escuela. La * portada queda fuera a proposito: su banner es la vitrina del sitio y ahi el tamano si * cumple una funcion. * * Solo el `h1`: `.block-head__title` tambien encabeza secciones dentro de la pagina * ("Noticias de Escuela de Humanidades"), y esas son `h2`. Cambiarlas tambien aplastaria * la jerarquia dentro de cada pagina, que es lo contrario de lo que se busca. */ body:not(.home) .enc-main__title, body:not(.home) h1.block-head__title, /* Escuela y facultad necesitan este peso de selector: el v1 fija su tamano con seis clases encadenadas desde el body. */ .single-escuela .main .dest-full .auxi .cont-txt .tit, .single-facultad .main .dest-full .auxi .cont-txt .tit { font-family: "DMSans-Medium", sans-serif; font-weight: 400; font-size: 2.25rem; line-height: 1.3; } @media (max-width: 767px) { body:not(.home) .enc-main__title, body:not(.home) h1.block-head__title, .single-escuela .main .dest-full .auxi .cont-txt .tit, .single-facultad .main .dest-full .auxi .cont-txt .tit { font-size: 1.625rem; line-height: 1.25; } } /* ---------- Menu principal ---------- */ /* * Los items del menu principal bajan de 16 a 14px, la misma medida que la barra superior. * * El selector nombra `.header__bottom` y usa hijo directo a proposito: deja fuera el boton * de Admision, que es una llamada a la accion y no un item de menu, y deja fuera los * submenus, que cuelgan un nivel mas abajo. El menu movil tampoco se toca: usa otro * marcado (`.menu__links`), donde 14px seria demasiado chico para tocar con el dedo. */ .header__bottom .header__links > li > a { font-size: 0.875rem; line-height: 1.4; } /* * El resto del encabezado se ordena alrededor de esos 14px: * * - La barra superior baja a 13. Son accesos secundarios y ahora se subordinan al menu * principal en vez de medir lo mismo. * - El boton de Admision baja a 14. Sigue destacando, pero por su fondo y su forma, no * por el tamano de la letra. * - Los submenus bajan de 15 a 14. Estaban por encima del menu del que cuelgan, o sea * con la jerarquia invertida. La regla cubre los dos desplegables, el del menu y el * de Admision, que comparten marcado. * * Todo esto vive dentro de `div.desktop`, asi que el menu movil no se ve afectado. */ .header__top .header__links > li > a { font-size: 0.8125rem; } .header__btns .desp > a { font-size: 0.875rem; } /* Necesita este peso: el v2 fija los 15px con `.header__links .sub-menu__row li a`. */ .header .header__links .sub-menu__row li a { font-size: 0.875rem; } /* * Puente de hover entre el item del menu y su desplegable. * * El desplegable se posiciona con `top: 88%` sobre `nav.header__cont`, no sobre el item * del que cuelga. Mientras el encabezado esta en su alto normal eso deja 2px de separacion * y no se nota, pero al bajar y compactarse el encabezado el item se encoge mas rapido que * ese 88%, y la separacion crece a 12px. Al bajar el puntero del item al desplegable pasa * por esa franja, donde no hay ni item ni desplegable: el `:hover` se corta y el menu se * cierra antes de llegar. * * Esta franja transparente pertenece al enlace, asi que mantiene vivo el `:hover` del `li` * mientras el puntero la cruza. Solo existe con el menu abierto (`li:hover`), para no dejar * una banda invisible sobre el contenido cuando esta cerrado. * * El `::before` del enlace ya esta ocupado por el subrayado del item activo. */ .header__bottom .header__links > li:hover > a::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; } /* ---------- Contacto de escuela: roles clave y vias de admision ---------- */ /* * Va sobre fondo claro, como iba el formulario al que reemplaza. La escuela encadena * programas, enlaces y noticias sobre fondo oscuro, y el pie tambien es oscuro: sin esta * banda clara el final de la pagina se vuelve un bloque unico sin respiro. */ .ugm-contacto { background: var(--wp--preset--color--gris-claro); padding-block: var(--wp--preset--spacing--80); color: var(--wp--preset--color--grafito); } .ugm-contacto__bloque + .ugm-contacto__bloque { margin-top: var(--wp--preset--spacing--80); } .ugm-contacto__titulo { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--l); color: var(--wp--preset--color--azul); } .ugm-contacto__bajada { margin: 0 0 var(--wp--preset--spacing--50); max-width: 58ch; color: var(--wp--preset--color--gris); line-height: 1.5; } .ugm-contacto__grilla { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .ugm-contacto__grilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .ugm-contacto__grilla { grid-template-columns: repeat(3, 1fr); } } /* ---------- Tarjeta de un rol ---------- */ .ugm-rol { display: flex; flex-direction: column; gap: 4px; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--blanco); border: 1px solid #DCE0E3; border-radius: var(--ugm-radio); } /* * El rol va primero y en mayusculas pequenas: el visitante busca "a quien le escribo", * no "quien es esta persona". El nombre viene despues, como dato de quien responde. */ .ugm-rol__cargo { margin: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; /* Celeste oscurecido para que aguante sobre blanco: 5,6:1, sobre el 4,5 que pide AA. */ color: #1F6F94; } .ugm-rol__nombre { margin: 0; font-size: var(--wp--preset--font-size--m); font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--grafito); } .ugm-rol__nota { margin: 4px 0 0; font-size: var(--wp--preset--font-size--s); line-height: 1.5; color: var(--wp--preset--color--gris); } .ugm-rol__correo { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); /* Empuja el correo al fondo: todas las tarjetas lo alinean aunque el texto varie. */ margin-top: auto; padding-top: var(--wp--preset--spacing--30); color: var(--wp--preset--color--azul); font-size: var(--wp--preset--font-size--s); text-decoration: none; border-bottom: 1px solid transparent; overflow-wrap: anywhere; } .ugm-rol__correo:hover { border-bottom-color: currentColor; } .ugm-rol__correo:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 3px; } .ugm-rol__icono { flex: 0 0 auto; display: inline-flex; } /* ---------- Las tarjetas de admision, sobre fondo claro ---------- */ /* * Se reusa la tarjeta de acceso de D-17, que ya trae el icono de destino y la apertura en * pestana nueva, con una variante clara. Un boton a secas no serviria: el visitante tiene * que elegir cual de los tres sitios es el suyo, y eso necesita una linea que lo explique. */ .ugm-contacto .ugm-acceso { background: var(--wp--preset--color--blanco); border-color: #DCE0E3; color: var(--wp--preset--color--grafito); } .ugm-contacto .ugm-acceso:hover { background: var(--wp--preset--color--blanco); border-color: var(--ugm-celeste); } .ugm-contacto .ugm-acceso__titulo { color: var(--wp--preset--color--azul); } .ugm-contacto .ugm-acceso__icono { color: var(--wp--preset--color--azul); opacity: 1; } .ugm-contacto .ugm-acceso__desc { color: var(--wp--preset--color--gris); } /* En modo oscuro y alto contraste la banda clara desentona con las de al lado. */ [data-tema="oscuro"] .ugm-contacto, [data-contraste="alto"] .ugm-contacto { background: var(--ugm-fondo); color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] :is(.ugm-contacto__titulo, .ugm-rol__nombre), [data-contraste="alto"] :is(.ugm-contacto__titulo, .ugm-rol__nombre) { color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] :is(.ugm-contacto__bajada, .ugm-rol__nota), [data-contraste="alto"] :is(.ugm-contacto__bajada, .ugm-rol__nota) { color: #C7CCD2; } [data-tema="oscuro"] .ugm-rol, [data-contraste="alto"] .ugm-rol { background: var(--wp--preset--color--grafito-medio); border-color: rgba(255, 255, 255, 0.14); } [data-tema="oscuro"] .ugm-rol__correo, [data-contraste="alto"] .ugm-rol__correo { color: var(--ugm-celeste); } [data-tema="oscuro"] .ugm-contacto .ugm-acceso, [data-contraste="alto"] .ugm-contacto .ugm-acceso { background: var(--wp--preset--color--grafito-medio); border-color: rgba(255, 255, 255, 0.14); color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .ugm-contacto :is(.ugm-acceso__titulo, .ugm-acceso__icono), [data-contraste="alto"] .ugm-contacto :is(.ugm-acceso__titulo, .ugm-acceso__icono) { color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .ugm-contacto .ugm-acceso__desc, [data-contraste="alto"] .ugm-contacto .ugm-acceso__desc { color: #C7CCD2; } /* * El texto del hero de escuela, centrado en el eje vertical. * * Venia apoyado abajo: `align-items: flex-end` en el contenedor y `align-self: end` en el * propio bloque de texto, los dos del sitio actual. Con el bloque de escuela, que son tres * piezas (facultad, titulo y descripcion), quedaba todo el peso en el borde inferior y el * banner se veia vacio arriba. * * Va desde 426px porque bajo ese ancho el sitio cambia de composicion: la foto deja de ser * fondo y pasa a ser una imagen en el flujo, con el texto en su propia banda debajo. Ahi * no hay nada que centrar sobre la foto. */ @media (min-width: 426px) { .single-escuela .main .dest-full .auxi { align-items: center; } .single-escuela .ugm-hero .auxi .cont-txt { align-self: center; /* Simetrico: con el padding solo abajo, el centrado quedaba corrido hacia arriba. */ padding-block: var(--wp--preset--spacing--40); } } /* ---------- Un solo tamano para los titulos de seccion de escuela y facultad ---------- */ /* * Los titulos de seccion competian con el del banner y entre ellos: 32px "Carreras y * programas", 35px "Noticias de...", 24px los tres bloques nuevos, contra un banner de 36. * Con dos y tres puntos de diferencia, el ojo no distingue quien manda. * * Todos pasan a 24px, dos tercios del banner. Es un salto que se lee de una, y es el * tamano que ya tenian tres de los cinco, asi que la pagina queda pareja sin inventar una * medida nueva: `l` es un token que ya existe en theme.json. * * La escala de la pagina queda 36 / 24 / 20 / 16: banner, seccion, grupo y texto. * * Tambien se fija la interlinea. "Carreras y programas" venia con interlinea igual al * tamano de la letra, asi que un titulo de dos lineas se habria tocado consigo mismo. */ .single-escuela .ugm-programas__titulo, .single-escuela .block-head__title, .single-facultad .block-head__title { font-size: var(--wp--preset--font-size--l); line-height: 1.3; } .single-escuela .ugm-accesos__titulo, .single-escuela .ugm-contacto__titulo, .single-facultad .ugm-accesos__titulo, .single-facultad .ugm-bienvenida__titulo { line-height: 1.3; } /* * En movil el token `l` cae a 16px por la tipografia fluida del tema, o sea al mismo * tamano que el texto corrido: un titulo de seccion que no se distingue de un parrafo * deja de ser un titulo. Se le pone un piso de 20px, que mantiene la escala 26 / 20 / 16. */ @media (max-width: 767px) { .single-escuela .ugm-programas__titulo, .single-escuela .ugm-accesos__titulo, .single-escuela .ugm-contacto__titulo, .single-escuela .block-head__title, .single-facultad .ugm-accesos__titulo, .single-facultad .ugm-bienvenida__titulo, .single-facultad .block-head__title { font-size: 1.25rem; } } /* ========================================================================= * Financiamiento estudiantil (UFE), D-36 * * Mismo sistema que escuela y facultad: un solo eje de alineacion, bandas que alternan * oscuro y claro, titulo de portada en DMSans-Medium y tarjetas con icono de destino. * ====================================================================== */ .page-template-page-ufe { --ugm-eje: 1300px; --ugm-eje-aire: 15px; } @media (min-width: 1400px) { .page-template-page-ufe { --ugm-eje: 1350px; } } @media (max-width: 425px) { .page-template-page-ufe { --ugm-eje-aire: 10px; } } .page-template-page-ufe .main .auxi { box-sizing: border-box; width: 100%; max-width: var(--ugm-eje); margin-inline: auto; padding-inline: var(--ugm-eje-aire); } /* * Al saltar desde el indice, el titulo de la seccion quedaba tapado por el encabezado * anclado. Se deja ese espacio arriba de cada destino. */ .page-template-page-ufe :is(section, header)[id] { scroll-margin-top: 170px; } @media (max-width: 767px) { .page-template-page-ufe :is(section, header)[id] { scroll-margin-top: 100px; } } /* ---------- Portada ---------- */ /* * Sin foto a proposito. La unica imagen de la pagina que servia de fondo mide 750px de * ancho, y estirada a toda la pantalla se veria pastosa. Se usa en la introduccion, a su * tamano, y la portada queda en el azul de respaldo que ya usan escuela y facultad. */ .ugm-portada { display: flex; align-items: center; min-height: 245px; background: var(--wp--preset--color--azul-oscuro); color: var(--wp--preset--color--blanco); } @media (max-width: 767px) { .ugm-portada { min-height: 192px; } } .ugm-portada__auxi { padding-block: var(--wp--preset--spacing--50); } .ugm-portada__migas { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--s); color: rgba(255, 255, 255, 0.72); } .ugm-portada__migas a { color: var(--wp--preset--color--blanco); text-decoration: underline; text-underline-offset: 3px; } .ugm-portada__migas a:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } .ugm-portada__titulo { margin: 0; max-width: 700px; font-family: "DMSans-Medium", sans-serif; font-weight: 400; font-size: 2.25rem; line-height: 1.3; color: var(--wp--preset--color--blanco); } @media (max-width: 767px) { .ugm-portada__titulo { font-size: 1.625rem; line-height: 1.25; } } .ugm-portada__bajada { margin: var(--wp--preset--spacing--30) 0 0; max-width: 700px; font-size: var(--wp--preset--font-size--m); line-height: 1.5; color: var(--wp--preset--color--blanco); } /* ---------- Indice ---------- */ /* * La pagina mide mas de siete pantallas. El indice deja saltar a cada seccion, y va * pegado a la portada para que sea lo primero que se encuentra. */ .ugm-indice { background: var(--wp--preset--color--blanco); border-bottom: 1px solid #DCE0E3; padding-block: var(--wp--preset--spacing--40); } .ugm-indice__rotulo { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--gris); } .ugm-indice__lista { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; } .ugm-indice__lista a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--wp--preset--spacing--40); border: 1px solid #DCE0E3; border-radius: 999px; color: var(--wp--preset--color--azul); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; transition: border-color 160ms ease-out, background-color 160ms ease-out; } .ugm-indice__lista a:hover { border-color: var(--ugm-celeste); background: #F2F9FD; } .ugm-indice__lista a:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } /* ---------- Bandas ---------- */ .ugm-banda { padding-block: var(--wp--preset--spacing--80); background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--grafito); } .ugm-banda--gris { background: var(--wp--preset--color--gris-claro); } .ugm-banda--oscura { background: var(--wp--preset--color--grafito); color: var(--wp--preset--color--blanco); } .ugm-banda__antetitulo { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--s); font-weight: 700; color: #1F6F94; } /* * Varios titulos vienen en mayusculas sostenidas desde produccion, y se conservan tal * cual porque son senal de posicionamiento. Un poco de espaciado entre letras es lo que * la tipografia recomienda para leer mayusculas sin que se amontonen. */ .ugm-banda__titulo { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--l); line-height: 1.3; letter-spacing: 0.01em; color: var(--wp--preset--color--azul); } .ugm-banda--oscura .ugm-banda__titulo { color: var(--wp--preset--color--blanco); } .ugm-banda__bajada { margin: 0 0 var(--wp--preset--spacing--40); max-width: 70ch; line-height: 1.6; color: var(--wp--preset--color--gris); } .ugm-banda--oscura .ugm-banda__bajada { color: #C7CCD2; } .ugm-bloque { margin-top: var(--wp--preset--spacing--60); } /* * Es `h2` porque asi estaba en produccion ("Primer Año", "Becas Pregrado Regular"), pero * se ve como subtitulo: un encabezado de nivel 2 no tiene por que medir lo mismo que otro. */ .ugm-bloque__titulo { margin: 0 0 var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--20); border-bottom: 1px solid #DCE0E3; font-size: var(--wp--preset--font-size--m); line-height: 1.3; color: var(--wp--preset--color--grafito); } .ugm-banda--oscura .ugm-bloque__titulo { border-bottom-color: rgba(255, 255, 255, 0.22); color: var(--wp--preset--color--blanco); } /* Las tarjetas de acceso en una banda clara: la misma variante que en contacto de escuela. */ .ugm-banda:not(.ugm-banda--oscura) .ugm-acceso { background: var(--wp--preset--color--blanco); border-color: #DCE0E3; color: var(--wp--preset--color--grafito); } .ugm-banda--gris .ugm-acceso { background: var(--wp--preset--color--blanco); } .ugm-banda:not(.ugm-banda--oscura) .ugm-acceso:hover { border-color: var(--ugm-celeste); background: var(--wp--preset--color--blanco); } .ugm-banda:not(.ugm-banda--oscura) .ugm-acceso__titulo { color: var(--wp--preset--color--azul); } .ugm-banda:not(.ugm-banda--oscura) .ugm-acceso__icono { color: var(--wp--preset--color--azul); opacity: 1; } /* El titulo de tarjeta ahora puede ser un `h4`: se le quita el margen de encabezado. Variante compacta: la usa UFE, donde los titulos vienen en mayusculas y son largos. */ .page-template-page-ufe .ugm-acceso__titulo, .ugm-accesos--compacto .ugm-acceso__titulo { margin: 0; font-size: 0.875rem; letter-spacing: 0.01em; line-height: 1.4; } .ugm-accesos__grilla--una { grid-template-columns: minmax(0, 420px); } /* ---------- Boton de llamada a la accion ---------- */ .ugm-banda__accion { margin: var(--wp--preset--spacing--60) 0 0; } .ugm-boton { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); min-height: 48px; padding: 0 var(--wp--preset--spacing--50); border-radius: 999px; background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--azul); font-weight: 700; text-decoration: none; transition: background-color 160ms ease-out; } .ugm-boton:hover { background: #E7F4FB; } .ugm-boton:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 3px; } .ugm-banda:not(.ugm-banda--oscura) .ugm-boton { background: var(--wp--preset--color--azul); color: var(--wp--preset--color--blanco); } .ugm-banda:not(.ugm-banda--oscura) .ugm-boton:hover { background: var(--wp--preset--color--azul-oscuro); } .ugm-boton__icono { display: inline-flex; } .ugm-boton__icono svg { width: 18px; height: 18px; } /* ---------- Canales de atencion ---------- */ .ugm-canales { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); margin: var(--wp--preset--spacing--50) 0 0; padding: 0; list-style: none; } @media (min-width: 700px) { .ugm-canales { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .ugm-canales { grid-template-columns: repeat(3, 1fr); } } .ugm-canal { display: flex; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--blanco); border: 1px solid #DCE0E3; border-radius: var(--ugm-radio); } .ugm-canal__icono { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--azul); color: var(--wp--preset--color--blanco); } .ugm-canal__titulo { margin: 0 0 4px; font-weight: 700; line-height: 1.35; color: var(--wp--preset--color--grafito); } .ugm-canal__titulo a { color: var(--wp--preset--color--azul); text-decoration: underline; text-underline-offset: 3px; } .ugm-canal__detalle { margin: 0; font-size: var(--wp--preset--font-size--s); line-height: 1.5; color: var(--wp--preset--color--gris); } .ugm-canal__valores { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding: 0; list-style: none; } /* Los numeros y el correo son lo que el visitante viene a buscar: van grandes y tocables. */ .ugm-canal__valores a { display: inline-block; padding-block: 4px; font-size: var(--wp--preset--font-size--m); font-weight: 700; color: var(--wp--preset--color--azul); text-decoration: none; border-bottom: 1px solid transparent; } .ugm-canal__valores a:hover { border-bottom-color: currentColor; } :is(.ugm-canal__valores, .ugm-canal__titulo, .ugm-info__col, .ugm-rol__vias) a:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } /* ---------- Introduccion ---------- */ .ugm-intro { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); align-items: center; } @media (min-width: 900px) { .ugm-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } .ugm-intro__foto { overflow: hidden; border-radius: var(--ugm-radio); aspect-ratio: 750 / 550; max-width: 750px; } .ugm-intro__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .ugm-intro__texto p { margin: 0 0 var(--wp--preset--spacing--40); max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; color: var(--wp--preset--color--grafito); } .ugm-intro__texto p:last-child { margin-bottom: 0; } /* ---------- Fechas clave ---------- */ .ugm-fechas { display: grid; gap: var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--50) 0 0; padding: 0; list-style: none; } .ugm-fecha { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--blanco); border: 1px solid #DCE0E3; border-left: 4px solid var(--ugm-celeste); border-radius: var(--ugm-radio); } @media (min-width: 768px) { .ugm-fecha { grid-template-columns: 220px 1fr; gap: var(--wp--preset--spacing--50); align-items: start; } } .ugm-fecha__cuando { margin: 0; font-weight: 700; line-height: 1.35; color: var(--wp--preset--color--azul); } .ugm-fecha__titulo { margin: 0 0 var(--wp--preset--spacing--20); font-weight: 700; line-height: 1.4; color: var(--wp--preset--color--grafito); } .ugm-fecha__meta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); margin: 0; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .ugm-fecha__meta div { display: flex; gap: 4px; } .ugm-fecha__meta dt::after { content: ":"; } .ugm-fecha__meta dd { margin: 0; font-weight: 700; color: var(--wp--preset--color--grafito); } .ugm-fechas__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50); } .ugm-fechas__nota { margin: 0; font-size: var(--wp--preset--font-size--s); font-style: italic; color: var(--wp--preset--color--gris); } .ugm-fechas__pie .ugm-accesos__grilla { flex: 0 1 420px; } /* ---------- FUAS: etapas ---------- */ /* * Cuatro etapas en secuencia, con su numero y una linea que las une: en origen eran cuatro * cajas iguales sin nada que dijera que una viene despues de la otra. */ .ugm-etapas { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); margin: var(--wp--preset--spacing--50) 0 0; padding: 0; list-style: none; counter-reset: etapa; } @media (min-width: 900px) { .ugm-etapas { grid-template-columns: repeat(4, 1fr); } } .ugm-etapa { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--grafito-medio); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--ugm-radio); } .ugm-etapa__numero { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ugm-celeste); color: var(--wp--preset--color--grafito); font-weight: 700; } .ugm-etapa__enlace { display: flex; flex-direction: column; gap: 2px; color: var(--wp--preset--color--blanco); text-decoration: none; } .ugm-etapa__enlace:hover .ugm-etapa__nombre { text-decoration: underline; text-underline-offset: 3px; } .ugm-etapa__enlace:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 3px; } .ugm-etapa__etapa { margin: 0; font-size: var(--wp--preset--font-size--s); font-weight: 400; color: #C7CCD2; } .ugm-etapa__nombre { font-size: var(--wp--preset--font-size--m); font-weight: 700; line-height: 1.3; } .ugm-etapa__detalle { margin: 0; font-size: var(--wp--preset--font-size--s); line-height: 1.5; color: #DDE1E4; } /* La nota va al pie de la tarjeta, separada: es el hito que cierra cada etapa. */ .ugm-etapa__nota { margin: auto 0 0; padding-top: var(--wp--preset--spacing--30); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--wp--preset--font-size--s); font-weight: 700; color: var(--wp--preset--color--blanco); } /* ---------- Asistentes sociales ---------- */ .ugm-rol__escuelas { margin: 0 0 var(--wp--preset--spacing--20); padding: 0; list-style: none; font-size: var(--wp--preset--font-size--s); line-height: 1.5; color: var(--wp--preset--color--gris); } .ugm-rol__vias { display: flex; flex-direction: column; gap: 2px; margin-top: auto; } .ugm-rol__vias .ugm-rol__correo { margin-top: 0; } /* ---------- Servicios ---------- */ .ugm-servicios { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60); margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; } @media (min-width: 768px) { .ugm-servicios { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .ugm-servicios { grid-template-columns: repeat(3, 1fr); } } .ugm-servicios li { position: relative; padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) 28px; border-bottom: 1px solid #E6E9EB; line-height: 1.45; } .ugm-servicios li::before { content: ""; position: absolute; left: 4px; top: 0.95em; width: 10px; height: 6px; border-left: 2px solid #1F6F94; border-bottom: 2px solid #1F6F94; transform: rotate(-45deg); } /* ---------- Informacion de la unidad ---------- */ .ugm-info { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--40); } @media (min-width: 768px) { .ugm-info { grid-template-columns: repeat(3, 1fr); } } .ugm-info__col { padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--blanco); border: 1px solid #DCE0E3; border-radius: var(--ugm-radio); } .ugm-info__titulo { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--azul); } .ugm-info__col p { margin: 0 0 var(--wp--preset--spacing--20); line-height: 1.55; } .ugm-info__rotulo { margin: var(--wp--preset--spacing--30) 0 2px !important; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--gris); } .ugm-info__rotulo:first-of-type { margin-top: 0 !important; } .ugm-info__lista { margin: 0; padding: 0; list-style: none; } .ugm-info__col a { color: var(--wp--preset--color--azul); font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; } .ugm-info__col a:hover { border-bottom-color: currentColor; } .ugm-horario { margin: 0; } .ugm-horario div + div { margin-top: var(--wp--preset--spacing--30); } .ugm-horario dt { font-weight: 700; } .ugm-horario dd { margin: 0; line-height: 1.5; } .ugm-horario__pausa { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } /* ---------- Modo oscuro y alto contraste ---------- */ [data-tema="oscuro"] .page-template-page-ufe :is(.ugm-banda, .ugm-banda--gris, .ugm-indice), [data-contraste="alto"] .page-template-page-ufe :is(.ugm-banda, .ugm-banda--gris, .ugm-indice) { background: var(--ugm-fondo); color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .page-template-page-ufe :is(.ugm-canal, .ugm-fecha, .ugm-info__col, .ugm-rol, .ugm-banda .ugm-acceso), [data-contraste="alto"] .page-template-page-ufe :is(.ugm-canal, .ugm-fecha, .ugm-info__col, .ugm-rol, .ugm-banda .ugm-acceso) { background: var(--wp--preset--color--grafito-medio); border-color: rgba(255, 255, 255, 0.14); color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .page-template-page-ufe :is(.ugm-banda__titulo, .ugm-bloque__titulo, .ugm-canal__titulo, .ugm-fecha__titulo, .ugm-fecha__meta dd, .ugm-intro__texto p, .ugm-acceso__titulo, .ugm-acceso__icono, .ugm-rol__nombre), [data-contraste="alto"] .page-template-page-ufe :is(.ugm-banda__titulo, .ugm-bloque__titulo, .ugm-canal__titulo, .ugm-fecha__titulo, .ugm-fecha__meta dd, .ugm-intro__texto p, .ugm-acceso__titulo, .ugm-acceso__icono, .ugm-rol__nombre) { color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .page-template-page-ufe :is(.ugm-banda__bajada, .ugm-canal__detalle, .ugm-fecha__meta, .ugm-fechas__nota, .ugm-rol__escuelas, .ugm-horario__pausa, .ugm-indice__rotulo), [data-contraste="alto"] .page-template-page-ufe :is(.ugm-banda__bajada, .ugm-canal__detalle, .ugm-fecha__meta, .ugm-fechas__nota, .ugm-rol__escuelas, .ugm-horario__pausa, .ugm-indice__rotulo) { color: #C7CCD2; } [data-tema="oscuro"] .page-template-page-ufe :is(.ugm-canal__valores a, .ugm-info__col a, .ugm-fecha__cuando, .ugm-indice__lista a, .ugm-banda__antetitulo, .ugm-info__titulo), [data-contraste="alto"] .page-template-page-ufe :is(.ugm-canal__valores a, .ugm-info__col a, .ugm-fecha__cuando, .ugm-indice__lista a, .ugm-banda__antetitulo, .ugm-info__titulo) { color: var(--ugm-celeste); } @media (prefers-reduced-motion: reduce) { .ugm-indice__lista a, .ugm-boton { transition: none; } } /* * Tipografia de la pagina UFE: Work Sans para el contenido, como escuela y facultad, y * DMSans-Medium solo en el titulo de portada. El reset del sitio deja `strong` sin peso * (`font: inherit`), asi que se lo devuelve: las negritas de la introduccion son de origen. */ :is(.page-template-page-ufe, .page-template-page-ui-kit) .main { font-family: "Work Sans", sans-serif; } :is(.page-template-page-ufe, .page-template-page-ui-kit) .main :is(strong, b) { font-weight: 700; } /* * Tres textos que en modo oscuro y alto contraste quedaban con su color de modo claro * sobre fondo oscuro, medidos con axe-core: el enlace a asistentes (1,05:1), el rotulo de * cada contacto (2,2:1) y los rotulos de contacto de la unidad. Van al celeste y al gris * claro que ya usa el resto de la pagina en esos modos. */ [data-tema="oscuro"] .page-template-page-ufe :is(.ugm-canal__titulo a, .ugm-rol__cargo, .ugm-rol__correo), [data-contraste="alto"] .page-template-page-ufe :is(.ugm-canal__titulo a, .ugm-rol__cargo, .ugm-rol__correo) { color: var(--ugm-celeste); } [data-tema="oscuro"] .page-template-page-ufe .ugm-info__rotulo, [data-contraste="alto"] .page-template-page-ufe .ugm-info__rotulo { color: #C7CCD2; } /* * El script de anclas del sitio (anclas.js) calcula el destino como `offsetTop` menos la * altura del encabezado. Pero el v2 le pone `position: relative` a `.main`, y eso hace que * `offsetTop` se mida desde `.main` y no desde la pagina: la altura del encabezado queda * restada dos veces, y cada salto del indice dejaba un hueco muerto exacto de esa altura * (152px en escritorio, 89 en movil) entre el encabezado y la seccion. * * Con `.main` estatico, `offsetTop` vuelve a medirse desde la pagina y el salto aterriza * justo bajo el encabezado. En esta plantilla nada se posiciona contra `.main`. */ .page-template-page-ufe .main { position: static; } /* * En movil el indice ocupaba mas de 230px de alto con los nueve chips apilados, o sea * casi una pantalla de navegacion antes del primer contenido. Pasa a una sola fila que se * desliza de lado. El desvanecido a la derecha avisa que hay mas. */ @media (max-width: 767px) { .ugm-indice .auxi { position: relative; } .ugm-indice__lista { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; /* que el ultimo chip no quede bajo el desvanecido */ padding-right: 32px; } .ugm-indice__lista::-webkit-scrollbar { display: none; } .ugm-indice__lista li { flex: 0 0 auto; scroll-snap-align: start; } .ugm-indice .auxi::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--wp--preset--color--blanco)); pointer-events: none; } } /* ---------- Video en la pagina, D-39 ---------- */ /* * El video no ocupa la columna entera: a 1296px mediria 730px de alto, mas que la pantalla * de un portatil, y obligaria a bajar para ver los controles. A 800px cabe completo con su * titulo en una pantalla de 768px de alto. Titulo, bajada y video comparten el eje central. */ .ugm-video__cab { max-width: 800px; margin: 0 auto var(--wp--preset--spacing--50); text-align: center; } .ugm-video__cab .ugm-banda__bajada { margin-inline: auto; margin-bottom: 0; } .ugm-video__marco { position: relative; max-width: 800px; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ugm-radio); background: var(--wp--preset--color--azul-oscuro); } .ugm-video__marco iframe, .ugm-video__portada, .ugm-video__portada img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ugm-video__portada img { object-fit: cover; } /* Archivo de video propio (D-61): el reproductor del navegador ocupa el marco. `contain` muestra la portada completa aunque no sea 16:9, con franjas del color del marco: recortada, se perdia lo importante. */ .ugm-video__archivo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--wp--preset--color--azul-oscuro); } .ugm-video__archivo:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: -3px; } .ugm-video__portada:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: -3px; } .ugm-video__accion { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ugm-video__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--wp--preset--color--azul); color: var(--wp--preset--color--blanco); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transform: translate(-50%, -50%); transition: transform 160ms ease-out, background-color 160ms ease-out; } /* El triangulo se ve descentrado si se centra por su caja: se corre hacia su punta. */ .ugm-video__play svg { margin-left: 3px; } .ugm-video__portada:hover .ugm-video__play, .ugm-video__portada:focus-visible .ugm-video__play { background: var(--wp--preset--color--azul-oscuro); transform: translate(-50%, -50%) scale(1.08); } @media (max-width: 767px) { .ugm-video__play:not(.ugm-imagen-texto__video *) { width: 56px; height: 56px; } /* El mismo piso de 20px que los titulos de seccion de escuela y facultad. */ .ugm-video .ugm-banda__titulo { font-size: 1.25rem; } } /* * Los modos oscuro y alto contraste de las bandas estan escritos para UFE. Esta seccion * vive en cualquier portal, asi que trae los suyos. */ [data-tema="oscuro"] .ugm-video, [data-contraste="alto"] .ugm-video { background: var(--ugm-fondo); } [data-tema="oscuro"] .ugm-video .ugm-banda__titulo, [data-contraste="alto"] .ugm-video .ugm-banda__titulo { color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .ugm-video .ugm-banda__bajada, [data-contraste="alto"] .ugm-video .ugm-banda__bajada { color: #C7CCD2; } @media (prefers-reduced-motion: reduce) { .ugm-video__play { transition: none; } } /* Con ancla (D-44), el salto no la deja bajo el encabezado fijo: 142px en escritorio, 89 en movil. */ .ugm-video[id] { scroll-margin-top: 160px; } @media (max-width: 767px) { .ugm-video[id] { scroll-margin-top: 100px; } } /* ---------- Bloque de imagen y texto, D-40 ---------- */ /* * Dos columnas, 7 y 5: el contenido manda y la imagen acompana. La imagen se acota a * 440px porque las de estos bloques son cuadradas: a media pantalla medirian 650px de * alto cada una. En movil se apila con el titulo primero, para que se sepa de que trata * antes de ver la imagen. */ .ugm-imagen-texto__auxi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp--preset--spacing--70); align-items: center; } .ugm-imagen-texto--izquierda .ugm-imagen-texto__auxi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .ugm-imagen-texto--izquierda .ugm-imagen-texto__imagen { order: -1; } .ugm-imagen-texto__imagen { justify-self: center; width: 100%; max-width: 440px; margin: 0; } /* El video en el lugar de la imagen (D-75): llena la columna y no lleva el margen del video bajo el texto. */ .ugm-imagen-texto__imagen--video { max-width: none; margin: 0; } .ugm-imagen-texto__imagen img { display: block; width: 100%; height: auto; border-radius: var(--ugm-radio); } .ugm-imagen-texto .ugm-banda__titulo { margin-bottom: var(--wp--preset--spacing--40); } .ugm-imagen-texto__cuerpo { max-width: 70ch; line-height: 1.7; color: var(--wp--preset--color--grafito); } .ugm-imagen-texto__cuerpo p { margin: 0 0 var(--wp--preset--spacing--40); } .ugm-imagen-texto__cuerpo :is(p, ul, ol):last-child { margin-bottom: 0; } .ugm-imagen-texto__cuerpo :is(ul, ol) { margin: 0 0 var(--wp--preset--spacing--40); padding-left: 1.25em; } .ugm-imagen-texto__cuerpo ul { list-style: disc; } .ugm-imagen-texto__cuerpo ol { list-style: decimal; } .ugm-imagen-texto__cuerpo li { margin-bottom: var(--wp--preset--spacing--20); padding-left: 0.25em; } .ugm-imagen-texto__cuerpo li::marker { color: var(--wp--preset--color--azul); } .ugm-imagen-texto__cuerpo :is(strong, b) { font-weight: 700; } .ugm-imagen-texto__cuerpo a { color: var(--wp--preset--color--azul); text-decoration: underline; text-underline-offset: 3px; } .ugm-imagen-texto__video { margin-top: var(--wp--preset--spacing--40); } /* * Dentro del bloque, la miniatura suele ser una lamina blanca con el titulo del video. El * borde marca donde termina sobre la banda clara, y el boton va a la esquina como pildora * con texto: al centro tapaba justo las palabras de la lamina. */ .ugm-imagen-texto__video .ugm-video__marco { max-width: none; border: 1px solid #DCE0E3; } .ugm-imagen-texto__video .ugm-video__play { top: auto; right: auto; bottom: var(--wp--preset--spacing--30); left: var(--wp--preset--spacing--30); gap: var(--wp--preset--spacing--20); grid-auto-flow: column; width: auto; height: 44px; padding: 0 var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30); border-radius: 999px; font-weight: 700; font-size: var(--wp--preset--font-size--s); transform: none; } .ugm-imagen-texto__video .ugm-video__play::after { content: "Ver video"; } .ugm-imagen-texto__video .ugm-video__play svg { width: 20px; height: 20px; margin-left: 0; } .ugm-imagen-texto__video .ugm-video__portada:hover .ugm-video__play, .ugm-imagen-texto__video .ugm-video__portada:focus-visible .ugm-video__play { transform: none; } /* * Bajo 1024px las dos columnas quedan angostas: a 768px el texto tendria 285px. Se apilan, * con el titulo primero y la imagen en seguida, para que se sepa de que trata la pieza antes * de leerla. `display: contents` deja al titulo, al texto y a la imagen como hermanos de la * grilla, asi se pueden ordenar sin duplicar marcado. */ @media (max-width: 1023px) { .ugm-imagen-texto__auxi, .ugm-imagen-texto--izquierda .ugm-imagen-texto__auxi { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); } .ugm-imagen-texto__contenido { display: contents; } .ugm-imagen-texto__contenido > * { order: 2; margin: 0; } .ugm-imagen-texto .ugm-banda__titulo { order: 0; margin: 0; } .ugm-imagen-texto .ugm-imagen-texto__imagen, .ugm-imagen-texto--izquierda .ugm-imagen-texto__imagen { order: 1; justify-self: start; } } @media (max-width: 767px) { .ugm-imagen-texto .ugm-imagen-texto__imagen { max-width: none; } /* Mismo piso de 20px que los titulos de seccion de escuela y facultad. */ .ugm-imagen-texto .ugm-banda__titulo { font-size: 1.25rem; } } [data-tema="oscuro"] .ugm-imagen-texto, [data-contraste="alto"] .ugm-imagen-texto { background: var(--ugm-fondo); } [data-tema="oscuro"] .ugm-imagen-texto.ugm-banda--gris, [data-contraste="alto"] .ugm-imagen-texto.ugm-banda--gris { background: var(--wp--preset--color--grafito-medio); } [data-tema="oscuro"] .ugm-imagen-texto :is(.ugm-banda__titulo, .ugm-imagen-texto__cuerpo), [data-contraste="alto"] .ugm-imagen-texto :is(.ugm-banda__titulo, .ugm-imagen-texto__cuerpo) { color: var(--wp--preset--color--blanco); } [data-tema="oscuro"] .ugm-imagen-texto__cuerpo a, [data-contraste="alto"] .ugm-imagen-texto__cuerpo a { color: var(--ugm-celeste); } [data-tema="oscuro"] .ugm-imagen-texto__cuerpo li::marker, [data-contraste="alto"] .ugm-imagen-texto__cuerpo li::marker { color: var(--ugm-celeste); } /* ---------- Titulos de los portales con bloques, D-41, D-42 y D-75 ---------- */ /* * Acreditacion mezclaba tres tamanos para titulos del mismo nivel: 24px en los bloques nuevos, * 35px en "Noticias acreditacion" y 30px en las tarjetas con foto, que ademas son H3 y * quedaban mas grandes que los H2. Los H2 van a la escala de seccion del UI Kit, 24 y 20px, * y los H3 de las tarjetas un escalon abajo, 20 y 16px, el nivel de grupo del kit. * Estudiantes tiene la misma composicion y el mismo problema (D-42), y el portal de * Investigacion tambien (D-50), y Direccion de Desarrollo Estudiantil, con su slider a bandas * (D-75). */ :is(body.ugm-pagina-acreditacion-ugm, body.ugm-pagina-estudiantes, body.ugm-pagina-investigacion, body.ugm-pagina-direccion-de-desarrollo-estudiantil, body.ugm-pagina-direccion-de-convivencia) .block-head .block-head__title { font-size: var(--wp--preset--font-size--l); line-height: 1.3; } :is(body.ugm-pagina-acreditacion-ugm, body.ugm-pagina-estudiantes, body.ugm-pagina-investigacion, body.ugm-pagina-direccion-de-desarrollo-estudiantil, body.ugm-pagina-direccion-de-convivencia) .card .card__content .card__title { font-size: var(--wp--preset--font-size--m); line-height: 1.3; } @media (max-width: 767px) { :is(body.ugm-pagina-acreditacion-ugm, body.ugm-pagina-estudiantes, body.ugm-pagina-investigacion, body.ugm-pagina-direccion-de-desarrollo-estudiantil, body.ugm-pagina-direccion-de-convivencia) .block-head .block-head__title { font-size: 1.25rem; } :is(body.ugm-pagina-acreditacion-ugm, body.ugm-pagina-estudiantes, body.ugm-pagina-investigacion, body.ugm-pagina-direccion-de-desarrollo-estudiantil, body.ugm-pagina-direccion-de-convivencia) .card .card__content .card__title { font-size: 1rem; } } /* ---------- Menu lateral de seccion, D-52 ---------- */ /* * Los accesos de seccion como menu a un costado del contenido. El texto conserva su columna * de 750px, que es su ancho de lectura; el menu toma 260 a la izquierda y acompana al bajar. * Usa los colores de rol (texto, superficie, borde, enlace), asi que responde solo al modo * oscuro y al alto contraste. */ /* * `.art-content .auxi.ugm-lateral__auxi`: el v2 le pone `display: flex` y centra el `.auxi` * de los articulos, que ademas mide 1250px. El menu se alinea en cambio con el titulo de la * portada, que va sobre el eje de 90% del ancho: 5% de margen desde 1400, y bajo eso la * cuenta de 1250 con 15 de aire, la misma del hero (D-46). */ .ugm-lateral { container-type: inline-size; } /* * D-71: la columna de texto va centrada en la pantalla, como sin menu, pero nunca a * menos de `--ugm-lateral-seguridad` del menu. Hay bloques mas anchos que la columna que se * salen por los dos lados (el de autoridades de Nosotros VcM mide 896px, 73 de mas por lado), y * con la columna pegada al menu quedaban debajo de el. 97 = 73 de desborde + 24 de aire. */ .art-content .auxi.ugm-lateral__auxi { --ugm-lateral-izq: 5cqw; --ugm-lateral-menu: 260px; --ugm-lateral-texto: 750px; --ugm-lateral-seguridad: 97px; display: grid; grid-template-columns: var(--ugm-lateral-menu) minmax(0, 1fr); column-gap: 0; /* El v2 le pone `gap: 110px` al `.auxi` del articulo: apilado, se volvia espacio vertical. */ row-gap: 0; justify-content: start; align-items: start; max-width: none; margin-inline: 0; padding-inline: var(--ugm-lateral-izq) var(--ugm-eje-aire, 15px); } @media (max-width: 1399px) { .art-content .auxi.ugm-lateral__auxi { --ugm-lateral-izq: max(15px, calc((100cqw - 1250px) / 2 + 15px)); } } .ugm-lateral .art-col { max-width: var(--ugm-lateral-texto); margin: 0; margin-left: max( calc((100cqw - var(--ugm-lateral-texto)) / 2 - var(--ugm-lateral-izq) - var(--ugm-lateral-menu)), var(--ugm-lateral-seguridad) ); } .ugm-lateral__menu { position: sticky; top: 176px; padding-top: var(--wp--preset--spacing--30); } .ugm-lateral__resumen { display: none; } .ugm-lateral__titulo { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--s); font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; color: var(--ugm-texto-suave); } .ugm-lateral__lista { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ugm-borde); } .ugm-lateral__lista li { margin: 0; } .ugm-lateral__enlace { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wp--preset--spacing--30); margin-left: -1px; padding: 10px var(--wp--preset--spacing--40); border-left: 3px solid transparent; color: var(--ugm-texto); font-size: var(--wp--preset--font-size--base); line-height: 1.35; text-decoration: none; transition: background-color 160ms ease-out, color 160ms ease-out; } .ugm-lateral__enlace:hover { background: var(--ugm-superficie); color: var(--ugm-enlace); } .ugm-lateral__enlace:focus-visible { outline: 3px solid var(--ugm-foco); outline-offset: -3px; } .ugm-lateral__enlace--actual { border-left-color: var(--ugm-enlace); background: var(--ugm-superficie); color: var(--ugm-enlace); font-weight: 700; } .ugm-lateral__icono { flex: none; display: inline-flex; margin-top: 2px; } .ugm-lateral__icono svg { width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .ugm-lateral__enlace { transition: none; } } /* * Bajo 1240 no hay ancho para el menu y el bloque mas ancho del texto (D-71): el menu se * pliega arriba del contenido en un desplegable que dice donde se esta. tema.js lo cierra al cargar; sin JavaScript queda * abierto. */ @media (max-width: 1239px) { .art-content .auxi.ugm-lateral__auxi { grid-template-columns: minmax(0, 1fr); padding-right: 15px; } /* Con margen automatico un item de grilla se encoge a su contenido: el ancho va explicito. */ .ugm-lateral .art-col { width: 100%; margin-inline: auto; } .ugm-lateral__menu { position: static; margin-bottom: var(--wp--preset--spacing--50); padding-top: 0; border: 1px solid var(--ugm-borde); border-radius: var(--ugm-radio); } .ugm-lateral__resumen { position: relative; color: var(--ugm-texto); display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: var(--wp--preset--spacing--30) 48px var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); cursor: pointer; list-style: none; } .ugm-lateral__resumen::-webkit-details-marker { display: none; } /* Chevron dibujado con bordes: apunta abajo cerrado y arriba abierto. */ .ugm-lateral__resumen::after { content: ""; position: absolute; top: 50%; right: var(--wp--preset--spacing--40); width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); } .ugm-lateral__plegable[open] .ugm-lateral__resumen::after { transform: translateY(-30%) rotate(-135deg); } .ugm-lateral__resumen:focus-visible { outline: 3px solid var(--ugm-foco); outline-offset: 2px; } .ugm-lateral__resumen-rotulo { font-size: var(--wp--preset--font-size--s); color: var(--ugm-texto-suave); } .ugm-lateral__resumen-actual { font-weight: 700; color: var(--ugm-texto); } /* Dentro del desplegable el titulo ya lo dice el resumen. */ .ugm-lateral__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ugm-lateral__lista { border-left: 0; border-top: 1px solid var(--ugm-borde); padding-block: var(--wp--preset--spacing--20); } .ugm-lateral__enlace { margin-left: 0; min-height: 44px; align-items: center; } } /* * Modo contraste del sitio (`body.contraste`, el interruptor del encabezado): el v2 pasa todo * a blanco sobre negro. La linea guia y el filete azul de la pagina actual desaparecian sobre * el negro; pasan a blanco tenue y a celeste, que contrasta 9:1. */ body.contraste .ugm-lateral__lista, body.contraste .ugm-lateral__menu { border-color: rgba(255, 255, 255, 0.45) !important; } body.contraste .ugm-lateral__enlace--actual { border-left-color: var(--ugm-celeste) !important; } body.contraste .ugm-lateral__enlace:focus-visible, body.contraste .ugm-lateral__resumen:focus-visible { outline-color: var(--ugm-celeste); } /* ---------- Tarjetas de noticia con imagen de alto fijo, D-54 ---------- */ /* * Las tarjetas de noticia tomaban el alto de su imagen: con fotos de 16:9, 4:3 y afiches * verticales en la misma fila, las tarjetas quedaban desparejas y un afiche podia medir * 600px. La imagen pasa a un marco de 16:9, la proporcion de casi todas, y se recorta para * llenarlo. El recorte conserva la parte de arriba, donde suelen estar los rostros y el * titulo de un afiche. * * Vale para las dos tarjetas de noticia (partes-tarjeta.php y partes-tarjeta-home.php) en * todo el sitio. Las tarjetas con modificador propio (foto de fondo, icono, revista, video) * tienen su propio marco y no se tocan. */ :is(.card:not([class*="card__"]), .card.card__dark) .card__img { aspect-ratio: 16 / 9; background: var(--ugm-superficie); } :is(.card:not([class*="card__"]), .card.card__dark) .card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ---------- Sin texto justificado, D-49 ---------- */ /* * El contenido migrado trae `text-align: justify` pegado desde Word en 146 paginas y 986 * noticias. En una columna de lectura abre rios de espacio entre palabras y cuesta mas leer, * sobre todo con dislexia (WCAG 1.4.8). `wp ugm estilos` lo quita del contenido pagina por * pagina; esta regla lo anula en todo el sitio, incluido lo que se pegue en el futuro. Solo * toca la alineacion del texto: el `justify-content` de las grillas no coincide con el * selector. */ .main :is([style*="text-align: justify"], [style*="text-align:justify"]) { text-align: start !important; } /* ---------- Investigacion, D-50 ---------- */ /* * El menu enlaza secciones del portal por un id que numeraba anclas.js segun su orden * (`#seccion_2`, `#seccion_4`). Con el slider convertido en bloques la numeracion se corria, * asi que esos id van fijos en los datos. Este margen evita que el salto las deje bajo el * encabezado fijo: 142px en escritorio, 89 en movil. */ .main [id^="seccion_"] { scroll-margin-top: 160px; } @media (max-width: 767px) { .main [id^="seccion_"] { scroll-margin-top: 100px; } } /* * Comite Etico Cientifico: los titulos del contenido venian a 26, 25 y 22px en negrita, por * encima de la escala del UI Kit. H2 a la escala de seccion (24 y 20px), H3 a la de grupo * (20 y 18) y H4 un escalon abajo (18 y 16). Nivel y texto de cada encabezado no cambian. */ body.ugm-pagina-investigacion-comite-etico-cientifico .CUERPO h2 { font-size: var(--wp--preset--font-size--l); line-height: 1.3; } body.ugm-pagina-investigacion-comite-etico-cientifico .CUERPO h3 { font-size: var(--wp--preset--font-size--m); line-height: 1.3; } body.ugm-pagina-investigacion-comite-etico-cientifico .CUERPO h4 { font-size: 1.125rem; line-height: 1.35; } /* * Nosotros, Politica y Modelo y el Comite arman con tablas la foto de una persona al lado de * su texto. Sin los anchos fijos de Prontus (`wp ugm estilos --anchos`), en movil la columna * de la foto se encogia a 44px. Bajo 768 las celdas se apilan: la foto arriba, el texto * abajo. Solo en tablas sin encabezados de columna, que son de maquetacion, no de datos. */ /* Desde 768, la celda de la foto conserva los 220px que tenia en produccion; el texto toma el resto. */ @media (min-width: 768px) { :is(body.ugm-pagina-investigacion-nosotros, body.ugm-pagina-investigacion-comite-etico-cientifico) .CUERPO table:not(:has(th)) td:first-child:has(img) { width: 220px; padding-right: var(--wp--preset--spacing--40); vertical-align: top; } :is(body.ugm-pagina-investigacion-nosotros, body.ugm-pagina-investigacion-comite-etico-cientifico) .CUERPO table:not(:has(th)) td:first-child:has(img) img { width: 100%; max-width: 200px; height: auto; } } @media (max-width: 767px) { :is(body.ugm-pagina-investigacion-nosotros, body.ugm-pagina-investigacion-politica-y-modelo, body.ugm-pagina-investigacion-comite-etico-cientifico) .CUERPO table:not(:has(th)), :is(body.ugm-pagina-investigacion-nosotros, body.ugm-pagina-investigacion-politica-y-modelo, body.ugm-pagina-investigacion-comite-etico-cientifico) .CUERPO table:not(:has(th)) :is(tbody, tr, td) { display: block; width: 100%; height: auto; } :is(body.ugm-pagina-investigacion-nosotros, body.ugm-pagina-investigacion-politica-y-modelo, body.ugm-pagina-investigacion-comite-etico-cientifico) .CUERPO table:not(:has(th)) td { padding-inline: 0; } :is(body.ugm-pagina-investigacion-nosotros, body.ugm-pagina-investigacion-politica-y-modelo, body.ugm-pagina-investigacion-comite-etico-cientifico) .CUERPO table:not(:has(th)) img { width: auto; max-width: min(200px, 100%); height: auto; /* Algunas fotos traen `float: left` y margen pegados: apiladas, el texto se envolvia. */ float: none !important; display: block; margin: 0 0 var(--wp--preset--spacing--30) !important; } } @media (max-width: 767px) { body.ugm-pagina-investigacion-comite-etico-cientifico .CUERPO h2 { font-size: 1.25rem; } body.ugm-pagina-investigacion-comite-etico-cientifico .CUERPO h3 { font-size: 1.125rem; } body.ugm-pagina-investigacion-comite-etico-cientifico .CUERPO h4 { font-size: 1rem; } } /* * El v2 pinta en negro puro (#000) los titulos de las revistas y el encabezado de las * secciones claras. Pasan al grafito de la paleta: no hay negro en el sistema (D-50). */ .card__revista :is(.card__title, .card__description), .box__arts:not(.bg-blue) .block-head__title { color: var(--wp--preset--color--grafito); } /* Investigacion: las tarjetas de Productividad cientifica son H2, como en produccion (D-58), al mismo nivel que el titulo de su seccion: van a su misma medida, 24 y 20px. */ body.ugm-pagina-investigacion .card.card__bg .card__content .card__title { font-size: var(--wp--preset--font-size--l); } @media (max-width: 767px) { body.ugm-pagina-investigacion .card.card__bg .card__content .card__title { font-size: 1.25rem; } } /* ---------- Tarjetas con foto de fondo, D-48 ---------- */ /* * Las tarjetas con la foto de fondo (`card__bg`, y su variante de ancho completo * `card__bg--full`) heredaban el interlineado de 1,6 que el v2 le da a todo `.card__title`: * un titulo de 30px quedaba con 48px entre lineas, espaciado de texto corrido. Pasa a 1,2, * la proporcion de los titulos grandes del UI Kit (el hero de la home). Vale para todo el * sitio: facultades de la home, tarjetas de los portales y las de acceso. */ /* La segunda linea le gana a la escala de titulos de D-41 en Acreditacion y Estudiantes. */ .card.card__bg .card__title, body .card.card__bg .card__content .card__title { line-height: 1.2; } /* ========================================================================= * Hero de la home, D-46 * * Texto en HTML a la izquierda sobre azul oscuro, imagen a la derecha hasta el borde. El * texto se alinea con las tarjetas de acceso que vienen justo debajo y la imagen no: asi el * hero conserva su amplitud y el titulo cae en la misma linea que lo siguiente. La home no * tiene un solo eje (las tarjetas usan el 90% del ancho y otras secciones 1360px): se toma * el de las tarjetas, que es el vecino inmediato. La columna de texto es de * 5/12 y la imagen de 7/12, porque la foto sigue siendo la protagonista. * * El alto es fijo por ancho, no por slide: si cada slide midiera distinto, la pagina * saltaria en cada cambio (CLS). 520px mas el menu dejan asomar la seccion siguiente en una * pantalla de 900px de alto, que es la senal de que hay mas abajo. * ========================================================================= */ .ugm-hero-home { --ugm-hero-alto: 520px; --ugm-hero-texto: 5; --ugm-hero-izq: 5cqw; --ugm-hero-der: var(--wp--preset--spacing--60); --ugm-hero-controles: 72px; container-type: inline-size; position: relative; background: var(--wp--preset--color--azul-oscuro); color: var(--wp--preset--color--blanco); } /* El H1 de la home es uno solo y no se ve: el nombre de la universidad ya esta en el logo. */ .ugm-hero-home__h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ugm-hero-home__slide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); /* min-height y no height: el v2 fija `.swiper-slide { height: auto !important }`. */ min-height: var(--ugm-hero-alto); background: var(--wp--preset--color--azul-oscuro); } .ugm-hero-home__texto { display: flex; flex-direction: column; justify-content: center; padding: var(--wp--preset--spacing--60) var(--ugm-hero-der) calc(var(--ugm-hero-controles) + var(--wp--preset--spacing--30)) var(--ugm-hero-izq); } .ugm-hero-home__titulo { margin: 0 0 var(--wp--preset--spacing--40); font-family: "DMSans-Medium", sans-serif; font-weight: 400; font-size: 2.5rem; line-height: 1.2; color: var(--wp--preset--color--blanco); } .ugm-hero-home__bajada { margin: 0 0 var(--wp--preset--spacing--50); font-size: 1.125rem; line-height: 1.55; color: var(--wp--preset--color--blanco); } .ugm-hero-home__accion { margin: 0; } .ugm-hero-home__imagen { position: relative; overflow: hidden; background: var(--wp--preset--color--azul-oscuro); } .ugm-hero-home__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ugm-hero-home__imagen--izquierda img { object-position: left center; } .ugm-hero-home__imagen--derecha img { object-position: right center; } /* Para las piezas con texto incrustado, mientras se reemplazan: se ven enteras, sin recorte. */ .ugm-hero-home__imagen--completa img { object-fit: contain; } /* ---------- Controles ---------- */ .ugm-hero-home__controles { position: absolute; z-index: 2; bottom: var(--wp--preset--spacing--40); left: var(--ugm-hero-izq); width: calc(100cqw * var(--ugm-hero-texto) / 12 - var(--ugm-hero-izq) - var(--ugm-hero-der)); display: flex; align-items: center; gap: var(--wp--preset--spacing--30); } .ugm-hero-home__controles button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20); min-width: 44px; height: 44px; padding: 0 var(--wp--preset--spacing--30); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; background: transparent; color: var(--wp--preset--color--blanco); font: inherit; font-size: var(--wp--preset--font-size--s); cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out; } .ugm-hero-home__controles button:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--wp--preset--color--blanco); } .ugm-hero-home__controles button:focus-visible, .ugm-hero-home__puntos .swiper-pagination-bullet:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } .ugm-hero-home__flecha { padding: 0; width: 44px; } /* * Pausa y reproducir: solo el icono, del mismo tamano que las flechas. El texto queda para * lectores de pantalla, y el nombre accesible del boton cambia con su estado (D-47). */ .ugm-hero-home__pausa { width: 44px; padding: 0; } .ugm-hero-home__pausa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Los iconos van dibujados con CSS para no depender de dos imagenes. */ .ugm-hero-home__pausa-icono { width: 10px; height: 12px; border-inline: 3px solid currentColor; } .ugm-hero-home__pausa[aria-pressed="true"] .ugm-hero-home__pausa-icono { width: 0; height: 0; border-block: 6px solid transparent; border-inline: 10px solid currentColor; border-inline-end-width: 0; } /* * Los puntos son el indicador y tambien un atajo. Cada uno tiene 24px de area tactil * (WCAG 2.5.8) aunque el punto visible mida 10. */ .ugm-hero-home__puntos { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .ugm-hero-home .ugm-hero-home__puntos .swiper-pagination-bullet { width: 24px; height: 24px; margin: 0; padding: 7px; border-radius: 50%; background: var(--wp--preset--color--blanco); background-clip: content-box; opacity: 0.45; cursor: pointer; } .ugm-hero-home .ugm-hero-home__puntos .swiper-pagination-bullet-active { opacity: 1; } .ugm-hero-home__contador { margin: 0 0 0 auto; font-size: var(--wp--preset--font-size--s); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .ugm-hero-home__controles button { transition: none; } } /* ---------- Anchos ---------- */ /* Bajo 1400 las tarjetas se acotan a 1250px con 15 de aire: se replica esa misma cuenta. */ @media (max-width: 1399px) { .ugm-hero-home { --ugm-hero-izq: max(15px, calc((100cqw - 1250px) / 2 + 15px)); } } /* * Bajo 1280 la columna de texto ya no tiene lugar para una fila de puntos junto a los demas * controles, y con muchos slides los puntos se irian a una segunda linea. El contador "1 / 8" * dice lo mismo. */ @media (max-width: 1279px) { .ugm-hero-home { --ugm-hero-alto: 460px; } .ugm-hero-home__puntos { display: none; } .ugm-hero-home__titulo { font-size: 2.25rem; } } /* Entre 768 y 1023 la columna de 5/12 queda angosta para el titulo: pasa a mitad y mitad. */ @media (max-width: 1023px) { .ugm-hero-home { --ugm-hero-alto: 420px; --ugm-hero-texto: 6; --ugm-hero-der: var(--wp--preset--spacing--50); } .ugm-hero-home__slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ugm-hero-home__titulo { font-size: 2rem; } } /* * Bajo 768 se apila: la imagen arriba, a 16:10, y el texto abajo. El alto del texto se * reserva para que los slides no cambien de alto entre si; Swiper iguala todos al mas alto. */ @media (max-width: 767px) { .ugm-hero-home { --ugm-hero-izq: var(--ugm-eje-aire, 15px); --ugm-hero-der: var(--ugm-eje-aire, 15px); --ugm-hero-controles: 60px; } .ugm-hero-home__slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; } .ugm-hero-home__imagen { order: -1; aspect-ratio: 16 / 10; } .ugm-hero-home__texto { justify-content: flex-start; min-height: 300px; padding-top: var(--wp--preset--spacing--50); } .ugm-hero-home__titulo { font-size: 1.75rem; line-height: 1.25; margin-bottom: var(--wp--preset--spacing--30); } .ugm-hero-home__bajada { font-size: 1rem; margin-bottom: var(--wp--preset--spacing--40); } .ugm-hero-home__controles { bottom: var(--wp--preset--spacing--30); width: calc(100% - 2 * var(--ugm-eje-aire, 15px)); gap: var(--wp--preset--spacing--20); } } /* ---------- El menu de la home, solido ---------- */ /* * El v2 deja el encabezado de la home transparente y fijo, superpuesto al hero: el menu se * leia sobre la foto, a veces sobre texto incrustado. Con el hero partido en dos ya no hay * foto detras, y el encabezado pasa a ser el mismo de las paginas internas: fondo solido, * anclado con `sticky` (D-29) en todos los anchos. Mismos colores que el v2 usa en el resto * del sitio, que son los tokens grafito y grafito medio. */ body.home .header { position: sticky; top: 0; z-index: 1001; } body.home .header.sticky { position: sticky; } body.home .header__top { background-color: var(--wp--preset--color--grafito-medio); } body.home .header__bottom { background-color: var(--wp--preset--color--grafito); } /* --------------------------------------------------------------------------- * Acordeon de preguntas frecuentes (D-66) * * El CSS del sitio dibuja `.menujq__faq`. Aqui solo se adapta a que el control es un boton * dentro del H2 y la respuesta un `div`: el relleno pasa de la cabecera al boton, para que * toda la franja se pueda pulsar, y el de la lista de respuesta al `div`. Mismos valores * que produccion. * ------------------------------------------------------------------------ */ .ugm-acordeon .menujq__faq .menujq__head { padding: 0; } .ugm-acordeon__boton { display: block; width: 100%; padding: 25px 25px 25px 70px; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: start; cursor: pointer; } .ugm-acordeon__boton:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: -3px; } .ugm-acordeon .menujq__content { padding: 0 30px 30px; } @media (max-width: 767px) { .ugm-acordeon__boton { padding: 15px 15px 15px 40px; } .ugm-acordeon .menujq__content { padding: 0 15px 20px; } } /* La flecha de la cabecera no intercepta el clic del boton. */ .ugm-acordeon .menujq__head::after { pointer-events: none; } /* ========================================================================= * UI Kit, D-37 * * Solo la estructura del kit: navegacion, fichas y bloques de codigo. Los componentes * que muestra traen sus propios estilos, que son los mismos del sitio. * ====================================================================== */ .ugm-kit__lead { margin: var(--wp--preset--spacing--30) 0 0; max-width: 60ch; font-size: var(--wp--preset--font-size--m); line-height: 1.5; color: rgba(255, 255, 255, 0.85); } .ugm-kit { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); box-sizing: border-box; max-width: 1350px; margin-inline: auto; padding: var(--wp--preset--spacing--70) 15px var(--wp--preset--spacing--80); } @media (min-width: 1100px) { .ugm-kit { grid-template-columns: 240px minmax(0, 1fr); } } /* La navegacion se queda a mano al bajar, bajo el encabezado anclado. */ .ugm-kit__nav { align-self: start; font-size: var(--wp--preset--font-size--s); } @media (min-width: 1100px) { .ugm-kit__nav { position: sticky; top: 170px; max-height: calc(100vh - 190px); overflow-y: auto; padding-right: var(--wp--preset--spacing--30); } } .ugm-kit__nav-grupo { margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--gris); } .ugm-kit__nav-grupo:first-child { margin-top: 0; } .ugm-kit__nav ul { margin: 0; padding: 0; list-style: none; } .ugm-kit__nav a { display: block; padding: 4px 0 4px var(--wp--preset--spacing--30); border-left: 2px solid #DCE0E3; color: var(--wp--preset--color--grafito); text-decoration: none; } .ugm-kit__nav a:hover { border-left-color: #1F6F94; color: #1F6F94; } .ugm-kit__nav a:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } @media (max-width: 1099px) { .ugm-kit__nav ul { display: flex; flex-wrap: wrap; gap: 4px var(--wp--preset--spacing--30); } .ugm-kit__nav a { border-left: 0; padding: 2px 0; } } .ugm-kit__contenido { min-width: 0; } /* Los destinos de ancla quedan bajo el encabezado anclado, no tapados por el. */ .ugm-kit :is([id]) { scroll-margin-top: 170px; } .ugm-kit__seccion { margin-bottom: var(--wp--preset--spacing--80); } .ugm-kit__seccion-titulo { margin: 0 0 var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--20); border-bottom: 2px solid var(--wp--preset--color--azul); font-size: var(--wp--preset--font-size--l); line-height: 1.3; color: var(--wp--preset--color--azul); } .ugm-kit__seccion > p, .ugm-kit__intro-sec { max-width: 72ch; line-height: 1.6; color: var(--wp--preset--color--grafito); } .ugm-kit__sub { margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--m); color: var(--wp--preset--color--grafito); } .ugm-kit code { padding: 1px 5px; border-radius: 4px; background: #EEF1F3; color: #1B232B; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; } .ugm-kit__nota { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-left: 3px solid var(--ugm-celeste); background: #F2F9FD; font-size: var(--wp--preset--font-size--s); } .ugm-kit__principios { display: grid; gap: var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; } .ugm-kit__principios li { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background: var(--wp--preset--color--gris-claro); border-radius: var(--ugm-radio); line-height: 1.55; } .ugm-kit__principios span { display: inline-block; margin-left: 6px; font-size: var(--wp--preset--font-size--xs); font-weight: 700; color: #1F6F94; } /* ---------- Fichas ---------- */ .ugm-kit__ficha { margin-top: var(--wp--preset--spacing--70); padding-top: var(--wp--preset--spacing--50); border-top: 1px solid #DCE0E3; } .ugm-kit__ficha-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wp--preset--spacing--30); } .ugm-kit__ficha-titulo { margin: 0; font-size: var(--wp--preset--font-size--m); color: var(--wp--preset--color--grafito); } .ugm-kit__decision { padding: 2px 8px; border: 1px solid #1F6F94; border-radius: 4px; color: #1F6F94; font-size: var(--wp--preset--font-size--xs); font-weight: 700; } .ugm-kit__cuando, .ugm-kit__variantes, .ugm-kit__donde { margin: var(--wp--preset--spacing--20) 0 0; max-width: 80ch; line-height: 1.55; color: var(--wp--preset--color--grafito); } .ugm-kit__variantes, .ugm-kit__donde { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .ugm-kit__donde a { color: #1F6F94; } .ugm-kit__vista-previa { margin-top: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--50); border: 1px solid #DCE0E3; border-radius: var(--ugm-radio); background: var(--wp--preset--color--blanco); } .ugm-kit__vista-previa--oscuro { background: var(--wp--preset--color--grafito); border-color: var(--wp--preset--color--grafito); color: var(--wp--preset--color--blanco); } .ugm-kit__vista-previa--gris { background: var(--wp--preset--color--gris-claro); } .ugm-kit__vista-previa--azul { background: var(--wp--preset--color--azul-oscuro); border-color: var(--wp--preset--color--azul-oscuro); } /* Componentes que traen su propia banda: se muestran sin relleno extra. */ .ugm-kit__vista-previa--sin-marco { padding: 0; overflow: hidden; } .ugm-kit__en-banda { padding: var(--wp--preset--spacing--50); } .ugm-kit__leyenda { margin: 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background: var(--wp--preset--color--blanco); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .ugm-kit__aviso { margin: 0; padding: var(--wp--preset--spacing--40); color: var(--wp--preset--color--gris); } /* ---------- Codigo ---------- */ .ugm-kit__codigo { margin-top: var(--wp--preset--spacing--30); } .ugm-kit__codigo summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--wp--preset--spacing--40); border: 1px solid #DCE0E3; border-radius: 999px; color: var(--wp--preset--color--azul); font-size: var(--wp--preset--font-size--s); font-weight: 700; cursor: pointer; list-style: none; } .ugm-kit__codigo summary::-webkit-details-marker { display: none; } .ugm-kit__codigo summary::before { content: "‹›"; margin-right: 6px; letter-spacing: -2px; } .ugm-kit__codigo[open] summary { border-color: var(--ugm-celeste); } .ugm-kit__codigo summary:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } .ugm-kit__codigo-cuerpo { position: relative; margin-top: var(--wp--preset--spacing--30); } .ugm-kit__codigo pre, .ugm-kit__pre { margin: 0; padding: var(--wp--preset--spacing--40); overflow-x: auto; border-radius: var(--ugm-radio); background: var(--wp--preset--color--grafito); color: #E6E9EB; font-size: 0.8125rem; line-height: 1.6; tab-size: 4; } .ugm-kit__codigo pre code, .ugm-kit__pre code { padding: 0; background: none; color: inherit; font-size: inherit; } .ugm-kit__copiar { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: transparent; color: var(--wp--preset--color--blanco); font: inherit; font-size: var(--wp--preset--font-size--xs); cursor: pointer; } .ugm-kit__copiar:hover { border-color: var(--wp--preset--color--blanco); } .ugm-kit__copiar:focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } /* ---------- Marcos con paginas reales ---------- */ .ugm-kit__marco { --escala: 0.66; position: relative; height: calc(var(--alto) * var(--escala)); margin-top: var(--wp--preset--spacing--40); overflow: hidden; border: 1px solid #DCE0E3; border-radius: var(--ugm-radio); background: var(--wp--preset--color--gris-claro); } .ugm-kit__marco iframe { position: absolute; top: 0; left: 0; width: 1440px; height: var(--alto); border: 0; transform: scale(var(--escala)); transform-origin: top left; pointer-events: none; } .ugm-kit__marco-pie { margin: var(--wp--preset--spacing--20) 0 0; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .ugm-kit__marco-pie a { color: #1F6F94; } /* ---------- Fundamentos ---------- */ .ugm-kit__colores, .ugm-kit__tamanos, .ugm-kit__espacios, .ugm-kit__formas, .ugm-kit__iconos, .ugm-kit__familias, .ugm-kit__sueltos { margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; } .ugm-kit__colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--40); } .ugm-kit__color { display: flex; flex-direction: column; gap: 4px; padding: var(--wp--preset--spacing--30); border: 1px solid #DCE0E3; border-radius: var(--ugm-radio); } .ugm-kit__muestra { display: block; height: 64px; margin-bottom: var(--wp--preset--spacing--20); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; } .ugm-kit__muestra--chica { display: inline-block; width: 28px; height: 28px; margin: 0; vertical-align: middle; } .ugm-kit__color-nombre { font-weight: 700; } .ugm-kit__token { align-self: flex-start; } .ugm-kit__contrastes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .ugm-kit__cr { padding: 1px 6px; border-radius: 4px; font-size: var(--wp--preset--font-size--xs); font-weight: 700; } /* El estado no se lee solo por el color: el texto dice el numero. */ .ugm-kit__cr--texto { background: #E3F4E8; color: #1D5B30; } .ugm-kit__cr--grande { background: #FFF3D6; color: #6B4E00; } .ugm-kit__cr--no { background: #FBE3E4; color: #8A1C24; } .ugm-kit__familias { display: grid; gap: var(--wp--preset--spacing--30); } .ugm-kit__familias li { display: flex; flex-direction: column; gap: 2px; padding: var(--wp--preset--spacing--30) 0; border-bottom: 1px solid #E6E9EB; } .ugm-kit__familias small, .ugm-kit__tamanos small, .ugm-kit__espacios small, .ugm-kit__formas small, .ugm-kit__iconos small, .ugm-kit__sueltos small { color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--s); } .ugm-kit__tabla-marco { overflow-x: auto; } .ugm-kit__tabla { width: 100%; margin-top: var(--wp--preset--spacing--30); border-collapse: collapse; font-size: var(--wp--preset--font-size--s); } .ugm-kit__tabla th { padding: var(--wp--preset--spacing--20); border-bottom: 2px solid #DCE0E3; text-align: left; color: var(--wp--preset--color--gris); } .ugm-kit__tabla td { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); border-bottom: 1px solid #E6E9EB; vertical-align: middle; } .ugm-kit__tamanos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--wp--preset--spacing--30); } .ugm-kit__tamanos li { display: flex; flex-direction: column; gap: 4px; } .ugm-kit__tamanos li > span { line-height: 1.1; } .ugm-kit__espacios li, .ugm-kit__formas li, .ugm-kit__iconos li, .ugm-kit__sueltos li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--20) 0; } .ugm-kit__barra { display: inline-block; height: 16px; min-width: 2px; border-radius: 2px; background: var(--ugm-celeste); } .ugm-kit__forma { display: inline-block; width: 64px; height: 40px; background: var(--wp--preset--color--azul); } .ugm-kit__icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ugm-radio); background: var(--wp--preset--color--gris-claro); color: var(--wp--preset--color--azul); } .ugm-kit__sueltos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 var(--wp--preset--spacing--40); } /* Los componentes heredados usan columnas flotantes: la vista previa las contiene. */ .ugm-kit__vista-previa { display: flow-root; } .ugm-kit__codigo summary::before { content: ""; margin-right: 6px; letter-spacing: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .ugm-kit__seccion > p + p { margin-top: var(--wp--preset--spacing--30); } /* Los enlaces dentro de un parrafo se distinguen por el subrayado, no solo por el color. */ .ugm-kit :is(.ugm-kit__donde, .ugm-kit__nota, .ugm-kit__marco-pie, .ugm-kit__leyenda, .ugm-kit__cuando, .ugm-kit__seccion > p) a { text-decoration: underline; text-underline-offset: 3px; } .ugm-kit :is(.ugm-kit__tabla-marco, pre):focus-visible { outline: 3px solid var(--ugm-celeste); outline-offset: 2px; } /* Titulo de los auspiciadores en el pie de congreso (D-68), como «Patrocinan» en el CIP 2023. */ .footer.footer--congreso .footer__center .ugm-congreso-pie__titulo { margin: 0 0 16px; color: #ffffff; font-size: 1.125rem; text-align: center; } /* ---------- Galeria de fotos, D-73 ---------- */ /* * El sitio actual pone estas dos variables de Swiper en el atributo style del carrusel. Van * aqui para que el marcado no lleve estilos en linea. Los demas estilos de la galeria * (.mySwiper y .mySwiper2) ya vienen en el CSS del sitio. */ .mySwiper2 { --swiper-navigation-color: #fff; --swiper-pagination-color: #fff; } /* * En produccion el carrusel y la tira miden siempre el ancho de la columna (750px en las 46 * galerias medidas), porque sus fotos, cargadas todas a la vez, suman mas que ese ancho. Aqui * las galerias largas cargan de forma diferida a partir de la foto 12, y las que aun no * llegaron no suman nada: el contenedor se encogia al tamano de las ya cargadas (530px en una * nota de tres fotos, antes de cargarlas de una vez). Se fija el ancho para que no dependa de lo * ya cargado. */ /* `body.articulo .swiper { width: auto }` del sitio pesa 0,2,1: este selector tiene que pesar mas. */ .articulo .art-col > .swiper.mySwiper2, .articulo .art-col > .swiper.mySwiper { width: 100%; } /* ---------- Barra de anuncio (D-78) ---------- * Componente nuevo, producción no lo tiene. Sale solo si un editor lo activa en Opciones UGM. * Usa los tokens de theme.json; en el modo oscuro del sitio (`body.contraste`) pasa a negro. */ .ugm-anuncio { background: var(--wp--preset--color--azul); color: var(--wp--preset--color--blanco); text-align: center; padding: 10px 16px; } .ugm-anuncio__texto { margin: 0; font-size: var(--wp--preset--font-size--s); line-height: 1.4; } .ugm-anuncio a { color: inherit; text-decoration: underline; } .ugm-anuncio a:hover { text-decoration-thickness: 2px; } .ugm-anuncio a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } body.contraste .ugm-anuncio { background: #000; color: #fff; border-bottom: 1px solid #fff; } /* Video de Prontus en el contenido (D-92). Antes era un iframe del reproductor de Prontus que ocupaba el ancho de la columna y el alto de su atributo (750x360 a 1440px, 360x360 a 390px). El