/* ---------- El portal público ---------- Hoja propia, separada de la del área privada. Son dos cosas distintas: ésta se ve una vez, sin cuenta y desde cualquier lado; aquélla se mira ocho horas por día. Compartirlas obligaría a que cada regla sirva para las dos. El lenguaje visual, en cinco decisiones: · Una sola tipografía —Outfit—, con los titulares en peso alto y el interletrado cerrado. Limpia, geométrica y sin el aire acartonado de una serif institucional. · Superficies redondeadas sobre un fondo apenas gris: tarjetas de 28 px de radio, píldoras para todo lo que se aprieta y sombras largas y suaves en lugar de bordes marcados. · El verde de la corporación como único acento, y en grande donde manda: la portada, la franja de transparencia y cada estado activo. · Movimiento en todo lo que se toca. La curva tiene un rebote mínimo al final, que es lo que separa una interfaz que responde de una que se limita a cambiar de color. · Tema claro y oscuro, tamaño de letra, contraste alto, enlaces subrayados y quietud: cinco preferencias que viven en un solo lugar —el dock de abajo a la izquierda— y que el navegador recuerda. Índice 1. Variables y base 9. Sesiones 2. Utilidades y controles 9 bis. Las sesiones grabadas 3. Animaciones (wow) 10. Mesa directiva 4. Encabezado y menú 11. Transparencia 5. Portada 12. Pie 6. Cifras 13. Flotantes, aviso y 404 7. Accesos y secciones 14. Páginas internas 8. Noticias 15. Tamaños de pantalla 15 bis. El teléfono, diseñado como teléfono 16. Accesibilidad: el dock y las preferencias */ /* ============================================================ 1. Variables y base ============================================================ */ :root{ /* El verde de la corporación, en cinco pesos. Es el único acento del portal. */ --verde: #0b6b4f; --verde-vivo: #12a06f; --verde-menta: #7fe3bb; --verde-hondo: #062a20; --verde-noche: #041c15; /* El verde lavado de los fondos chicos: el círculo del ícono, la fecha de la agenda, la etiqueta del cargo. Es un token y no un color-mix() para que la página se vea igual en un navegador que todavía no conoce esa función: son los fondos de media interfaz, y sin ellos quedarían transparentes. */ --verde-tenue: #e2f0eb; --gris-tenue: #e3e9e6; /* El único color del portal que no es verde. Se usa donde algo salió mal —un campo mal llenado, una solicitud que no entró— y en el distintivo de una sesión en vivo. Es un rojo apagado a propósito: avisa sin gritar. */ --rojo: #d64545; /* El fondo del encabezado, que va translúcido para que el contenido se lea por debajo. */ --tope-fondo: rgba(233, 238, 235, .82); /* Las superficies. El fondo no es gris neutro: lleva una gota de verde, que es lo que hace que el acento no se vea pegado encima. */ --fondo: #e9eeeb; --tarjeta: #f2f6f4; --superficie: #fff; --tinta: #12211d; --tinta-2: #5f706a; --linea: rgba(6, 42, 32, .09); /* Sombras teñidas de verde y muy abiertas: separan la tarjeta del fondo sin dibujarle un borde. */ --sombra-1: 0 2px 10px rgba(6, 42, 32, .05); --sombra-2: 0 10px 30px rgba(6, 42, 32, .08); --sombra-3: 0 20px 50px rgba(6, 42, 32, .14); --sombra-verde: 0 15px 30px rgba(11, 107, 79, .3); --radio: 28px; --radio-2: 18px; --radio-3: 14px; /* Dos curvas. La primera tiene un rebote mínimo al final y es la de todo lo que se toca; la segunda arranca rápido y frena largo, para lo que entra en pantalla. */ --curva: cubic-bezier(.175, .885, .32, 1.275); --curva-2: cubic-bezier(.16, 1, .3, 1); --govco-alto: 32px; --govco-azul: #407bd4; --tope-alto: 120px; --ancho: 1240px; /* El aire de los costados. Es una variable y no un número suelto porque hay piezas que necesitan salirse justo esa distancia para tocar el borde de la pantalla —la tira de categorías del teléfono es una—, y cuando el valor estaba escrito dos veces, cambiar el de un corte dejaba a la otra pieza desalineada por cuatro píxeles. */ --aire: 24px; /* Cada cuánto pasa sola la portada. Está acá y no sólo en el script porque la barra que se llena debajo del titular tiene que durar exactamente lo mismo. */ --ritmo: 7s; } /* ---- El tema oscuro ---- Lo pone el atributo data-theme en : el botón flotante lo cambia y el navegador lo recuerda. El HTML lo escribe antes de pintar nada —hay un script de tres líneas en el — para que la página no aparezca en claro y salte a oscuro un cuadro después. El verde sube de tono: el de la corporación, sobre un fondo casi negro, se apaga. */ [data-theme="dark"]{ --verde: #2fc98f; --verde-vivo: #35d89a; --verde-tenue: rgba(47, 201, 143, .14); --gris-tenue: rgba(255, 255, 255, .08); /* Sobre el fondo casi negro, el rojo de arriba se apaga: sube de tono, igual que el verde. */ --rojo: #e8746f; --tope-fondo: rgba(17, 22, 20, .82); --fondo: #111614; --tarjeta: #1a211e; --superficie: #202826; --tinta: #eaefec; --tinta-2: #9aa8a3; --linea: rgba(255, 255, 255, .1); --sombra-1: 0 2px 10px rgba(0, 0, 0, .3); --sombra-2: 0 10px 30px rgba(0, 0, 0, .4); --sombra-3: 0 20px 50px rgba(0, 0, 0, .5); --sombra-verde: 0 15px 30px rgba(47, 201, 143, .22); } *{ margin: 0; padding: 0; box-sizing: border-box; } /* El "display" que el navegador le da a [hidden] lo pisa cualquier regla de clase, y el botón de volver arriba es un grid. Sin esto se queda a la vista desde el principio, que es justo cuando no sirve para nada. */ [hidden]{ display: none !important; } html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--tope-alto) + 20px); /* El dock de accesibilidad mueve esto en tres escalones. Todo el sitio está medido en rem justamente para que ese solo cambio agrande el portal entero sin romper una caja. */ font-size: 100%; -webkit-text-size-adjust: 100%; } /* ---- El tamaño del texto ---- Tres escalones y no un interruptor de sí o no: entre el 100 % y el 137,5 % hay dos paradas intermedias, y quien necesita letra grande casi nunca necesita justo el tope. El salto es de un octavo cada vez, que es el mínimo que se nota sin que la página dé un respingo. Por encima del 137,5 % el encabezado deja de entrar en un teléfono, así que ahí termina la escala: más allá está el zoom del navegador, que reacomoda otras cosas. */ html[data-texto="1"]{ font-size: 112.5%; } html[data-texto="2"]{ font-size: 125%; } html[data-texto="3"]{ font-size: 137.5%; } body{ font-family: Outfit, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.65; color: var(--tinta-2); background: var(--fondo); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .3s ease, color .3s ease; } img{ max-width: 100%; display: block; } h1, h2, h3, h4{ font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--tinta); } /* La palabra que va en verde adentro de un titular. Se marca con y no lleva cursiva: el color ya distingue. */ em{ font-style: normal; color: var(--verde); } /* El ancho del contenido y el aire de los costados. El padding usa max() con las áreas seguras del sistema: en un teléfono con muesca, girado de lado, el sistema reserva unos cuarenta píxeles de un borde, y sin esto el texto queda debajo de la muesca. Donde no hay muesca, env() vale cero y manda el número de siempre. */ .contenedor{ width: 100%; max-width: var(--ancho); margin: 0 auto; padding-left: max(var(--aire), env(safe-area-inset-left)); padding-right: max(var(--aire), env(safe-area-inset-right)); } /* ============================================================ 2. Utilidades y controles ============================================================ */ .visualmente-oculto{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* El salto al contenido vive fuera de la pantalla hasta que recibe el foco. Un portal público lo necesita: quien navega con teclado no tiene por qué recorrer el menú entero en cada página para llegar a lo que vino a leer. */ .saltar{ position: fixed; top: -80px; left: 20px; z-index: 3000; padding: 12px 22px; font-size: .9rem; font-weight: 600; color: #fff; background: var(--verde); text-decoration: none; border-radius: 0 0 12px 12px; transition: top .25s var(--curva-2); } .saltar:focus{ top: 0; } /* Un foco visible en todo el portal. El contorno que trae el navegador se pierde sobre tanto claro. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid var(--verde); outline-offset: 3px; } /* ---- La etiqueta ---- Versalita chica, muy espaciada y con un punto verde delante. */ .etiqueta{ display: inline-flex; align-items: center; gap: 10px; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); } .etiqueta::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .etiqueta.is-claro{ color: var(--verde-menta); } /* ---- Los botones ---- Píldora, peso alto y un salto de cinco píxeles al pasar por encima, con la sombra verde debajo. Es el gesto que se repite en todo lo que se aprieta. */ .boton{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 32px; font-family: inherit; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; color: #fff; background: var(--verde); border: 2px solid var(--verde); border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform .4s var(--curva), box-shadow .4s var(--curva), background-color .3s ease, color .3s ease, border-color .3s ease; } .boton:hover{ transform: translateY(-5px); background: var(--verde-hondo); border-color: var(--verde-hondo); box-shadow: var(--sombra-verde); } .boton svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--curva); } .boton:hover svg{ transform: translateX(4px); } .boton.is-linea{ color: var(--tinta); background: transparent; border-color: var(--linea); } .boton.is-linea:hover{ color: #fff; background: var(--verde); border-color: var(--verde); } /* Sobre las superficies verdes —la portada y la franja— se invierten: el lleno va blanco y el de línea se dibuja con el borde. */ .is-oscuro .boton{ color: var(--verde-hondo); background: #fff; border-color: #fff; } .is-oscuro .boton:hover{ color: var(--verde-hondo); background: var(--verde-menta); border-color: var(--verde-menta); box-shadow: 0 15px 30px rgba(0, 0, 0, .35); } .is-oscuro .boton.is-linea{ color: #fff; background: transparent; border-color: rgba(255, 255, 255, .45); } .is-oscuro .boton.is-linea:hover{ color: var(--verde-hondo); background: #fff; border-color: #fff; } /* ---- El enlace de texto ---- La raya crece de izquierda a derecha en lugar de aparecer de golpe. */ .enlace{ position: relative; align-self: flex-start; font-size: .92rem; font-weight: 600; color: var(--verde); text-decoration: none; padding-bottom: 4px; white-space: nowrap; } .enlace::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--curva-2); } .enlace:hover::after{ transform: scaleX(1); } .enlace.is-corto{ font-size: .84rem; } /* ---- La tarjeta ---- La pieza que arma casi todo el portal: superficie clara, radio grande, borde apenas insinuado y un salto con sombra al pasar por encima. */ .tarjeta{ background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); transition: transform .4s var(--curva), box-shadow .4s var(--curva), background-color .3s ease, border-color .3s ease; } .tarjeta.is-viva:hover{ transform: translateY(-10px); box-shadow: var(--sombra-3); } /* ============================================================ 3. Animaciones ============================================================ */ /* La biblioteca de entradas, en la línea de animate.css, y el motor que las dispara es el de WOW: un elemento con class="wow fadeInUp" queda escondido hasta que llega a la pantalla, y ahí recibe la clase "animated" y corre su animación una sola vez. data-wow-delay, data-wow-duration, data-wow-offset y data-wow-iteration funcionan igual que en la biblioteca original. El motor está en script.js. Lo que esconde el bloque es un style= en línea que escribe el JavaScript, nunca esta hoja. Es a propósito: si ese archivo no llega a correr —falla, tarda, está bloqueado— la página se ve entera y quieta, que es lo único aceptable en un portal público. Un opacity: 0 escrito acá dejaría media página en blanco para siempre. */ .animated{ animation-duration: .8s; animation-fill-mode: both; } @keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes fadeInUp{ from{ opacity: 0; transform: translate3d(0, 28px, 0); } to{ opacity: 1; transform: none; } } @keyframes fadeInLeft{ from{ opacity: 0; transform: translate3d(-32px, 0, 0); } to{ opacity: 1; transform: none; } } @keyframes fadeInRight{ from{ opacity: 0; transform: translate3d(32px, 0, 0); } to{ opacity: 1; transform: none; } } @keyframes zoomIn{ from{ opacity: 0; transform: scale3d(.92, .92, .92); } to{ opacity: 1; transform: none; } } .fadeIn{ animation-name: fadeIn; } .fadeInUp{ animation-name: fadeInUp; } .fadeInLeft{ animation-name: fadeInLeft; } .fadeInRight{ animation-name: fadeInRight; } .zoomIn{ animation-name: zoomIn; } /* Para lo que ya está a la vista y sólo tiene que latir: el punto de "en sesión". */ @keyframes latido{ 0%, 100%{ opacity: 1; } 50%{ opacity: .2; } } /* ---- Menos movimiento, no menos portal ---- Con la preferencia activa se apaga todo lo que se desplaza, se acerca o late —el movimiento es lo que marea, y para eso existe la preferencia—, pero los bloques siguen entrando con un fundido corto de opacidad, que no desplaza nada y que la norma no objeta. No es un caso de borde: Windows apaga los efectos de animación él solo en cuanto entra el ahorro de energía, así que "menos movimiento" es también lo que pide cualquier visitante con la batería baja. Dejar media página estática por eso sería de más. */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .animated, .portada-slide.is-activa .portada-sello, .portada-slide.is-activa .portada-titulo, .portada-slide.is-activa .portada-texto, .portada-slide.is-activa .portada-botones, .arriba{ animation-name: fadeIn !important; animation-duration: .5s !important; animation-timing-function: ease !important; } .portada-aurora span, .portada-foto.is-activa, .vivo-estado.is-vivo::before, .video-vivo::before, .portada-guia span{ animation: none !important; } .portada-punto.is-activo::after{ animation: none !important; transform: scaleX(1); } /* Y nada salta al pasar por encima: los estados se siguen viendo, con el color y la sombra, pero sin desplazamiento. */ .boton:hover, .tarjeta.is-viva:hover, .atajo:hover, .social a:hover, .flotante:hover, .arriba:hover{ transform: none; } } /* ============================================================ 4. Encabezado y menú ============================================================ */ /* Fijo, translúcido y con el fondo desenfocado por detrás: el contenido pasa por debajo y se lee a través. La altura no cambia al desplazar; lo único que se mueve es la línea de progreso del filo de abajo. El desenfoque va en un ::before y no en el encabezado, y eso es a propósito: un backdrop-filter —como cualquier transform o filter— convierte al elemento en el bloque contenedor de sus descendientes position: fixed, y el panel del menú del teléfono es uno. Puesto en el encabezado, el panel quedaba recortado adentro de sus ochenta y ocho píxeles en lugar de ocupar la pantalla. En un pseudo-elemento, el efecto es el mismo y el panel se mide contra la ventana. */ /* El encabezado va por encima del velo del menú (1100) y no por debajo. El panel del teléfono vive adentro de este
, y un position: fixed con z-index arma un contexto de apilamiento: el 1200 que declara el panel sólo compite contra sus hermanos de adentro, nunca contra el velo, que cuelga del . Con el encabezado en 1000 el velo le caía encima al panel entero —desenfocándolo y oscureciéndolo junto con la página que debía tapar—. Arriba del velo, el panel se lee nítido y el botón que lo abrió queda a la vista para cerrarlo. */ /* La barra de GOV.CO va arriba de todo y se queda en la página: al desplazar se va con el contenido y el encabezado sube a ocupar su lugar. `--govco-resto` es cuánto de ella sigue a la vista, y lo escribe script.js en cada cuadro; sin JavaScript vale el alto entero. `--tope-alto` sigue midiendo las dos juntas, que es lo que tapa la portada arriba de todo, así que los rellenos que se calculan con él no cambian. Sólo con la barra delante (`.govco ~ .tope`): el 404 no la lleva, y ahí el encabezado ocupa desde arriba el alto entero. */ .tope{ position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: var(--tope-alto); display: flex; flex-direction: column; align-items: stretch; border-bottom: 1px solid transparent; transition: height .4s var(--curva-2), border-color .3s ease; } .govco ~ .tope{ top: var(--govco-resto, var(--govco-alto)); height: calc(var(--tope-alto) - var(--govco-alto)); } .govco{ position: absolute; top: 0; left: 0; right: 0; z-index: 1050; display: flex; align-items: center; height: var(--govco-alto); background: var(--govco-azul); } .govco-enlace{ display: inline-flex; align-items: center; text-decoration: none; } .govco-marca{ display: block; width: 112px; height: 26px; background: url("img/govco-barra.jpg") -112px -4px no-repeat; } .tope-caja{ flex: 1; min-height: 0; } .tope::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tope-fondo); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background-color .3s ease; } /* Apenas se desplaza, el encabezado se afirma: aparece su línea de abajo y la sombra corta. Arriba de todo no lleva ninguna de las dos, para que la portada empiece limpia. */ .tope.is-corto{ border-bottom-color: var(--linea); box-shadow: var(--sombra-1); } .tope-caja{ display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } /* ---- Cuánto se leyó ---- */ .tope-progreso{ position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; } .tope-progreso span{ display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--verde), var(--verde-vivo)); /* Se dibuja entera y se estira con scaleX: así el navegador no tiene que volver a calcular la caja en cada píxel de desplazamiento. */ transform: scaleX(0); transform-origin: left; } /* ---- La marca ---- */ .marca{ display: inline-flex; align-items: center; gap: 14px; text-decoration: none; flex: none; min-width: 0; } .marca-sello{ flex: none; display: flex; align-items: center; } /* El escudo es un PNG con fondo transparente y proporción fija: se ata la altura y el ancho se acomoda solo, que es lo que mantiene la firma sin deformar. */ .marca-img{ height: 38px; width: auto; display: block; flex: none; transition: height .4s var(--curva-2); } .marca-img.is-compacto{ display: none; } .marca-texto{ display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .marca-nombre{ font-size: 1rem; font-weight: 800; letter-spacing: -.04em; color: var(--tinta); white-space: nowrap; } .marca-bajada{ font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--verde); } /* ---- El menú ---- */ /* La fila del encabezado —firma, siete secciones y los tres controles— vive dentro de la misma columna de 1240 px que el resto de la página, y ahí caben 1192 px de contenido. Ese número es el techo: la columna no crece por más ancho que tenga el monitor, así que si la fila se pasa, se pasa en todos los tamaños y la firma queda alineada con el texto mientras el botón de la derecha se sale por el borde. Medido con las siete secciones actuales: firma 286 + menú 665 + controles 171 + dos huecos de 24 = 1170. Quedan 22 px de margen. Por eso los tamaños de acá están medidos y no elegidos: cuatro píxeles más de aire en cada hueco del menú y la fila ya no cierra. Si mañana se agrega una sección más, hay que volver a medir —o bajar el corte del panel—, no confiar en que entre. */ .nav{ display: flex; align-items: center; gap: 15px; margin-left: auto; } .nav-link{ position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-family: inherit; font-size: .87rem; font-weight: 600; color: var(--tinta); background: none; border: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .3s ease; } .nav-link::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--curva-2); } .nav-link:hover{ color: var(--verde); } .nav-link:hover::after{ transform: scaleX(1); } .nav-link.is-activa{ color: var(--verde); } .nav-link.is-activa::after{ transform: scaleX(1); } .nav-flecha{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--curva-2); } .nav-grupo{ position: relative; } .nav-grupo:hover .nav-flecha, .nav-grupo.is-abierto .nav-flecha{ transform: rotate(180deg); } .nav-caja{ position: absolute; top: calc(100% + 18px); left: -14px; min-width: 250px; padding: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-2); box-shadow: var(--sombra-2); /* Escondido con opacidad y no con display:none para que la transición tenga algo que animar. pointer-events lo saca del camino mientras está cerrado. */ opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .28s var(--curva-2), transform .28s var(--curva-2), visibility .28s; } /* El puente invisible entre el enlace y el panel: sin él, el panel se cierra en el hueco de dieciocho píxeles que hay entre los dos. */ .nav-grupo::after{ content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 20px; } .nav-grupo:hover .nav-caja, .nav-grupo.is-abierto .nav-caja, .nav-caja:focus-within{ opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .nav-caja a{ display: block; padding: 10px 14px; font-size: .92rem; font-weight: 500; color: var(--tinta-2); text-decoration: none; border-radius: 10px; transition: background-color .22s ease, color .22s ease, transform .3s var(--curva-2); } .nav-caja a:hover{ background: var(--verde-tenue); color: var(--verde); transform: translateX(5px); } /* ---- Los controles de la derecha ---- */ .tope-acciones{ display: flex; align-items: center; gap: 10px; flex: none; } /* El botón redondo: el de tamaño de texto, el de tema en pantallas chicas y el del menú. Todos miden 46 px, que es lo que pide un objetivo táctil. */ .redondo{ display: grid; place-items: center; width: 44px; height: 44px; font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: 50%; cursor: pointer; transition: transform .35s var(--curva), color .3s ease, background-color .3s ease, border-color .3s ease; } .redondo:hover{ transform: translateY(-3px); color: var(--verde); border-color: var(--verde); } .redondo svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* La entrada al sistema interno: el único enlace del encabezado que no lleva a una página pública, así que se ve distinto. */ .nav-entrar{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: .9rem; font-weight: 600; color: #fff; background: var(--verde); border: 0; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform .4s var(--curva), box-shadow .4s var(--curva), background-color .3s ease; } .nav-entrar:hover{ transform: translateY(-4px); background: var(--verde-hondo); box-shadow: var(--sombra-verde); } .nav-entrar svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--curva); } .nav-entrar:hover svg{ transform: translateX(4px); } /* El velo que cubre la página detrás del panel del menú. Lo arma script.js, y arriba del ancho del panel no tiene nada que hacer. */ .nav-velo{ display: none; } /* ---- El botón del menú ---- Dos rayas en lugar de tres, y al abrir se cruzan. Menos dibujo para el mismo gesto. */ .nav-toggle{ display: none; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; } .nav-toggle span{ display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--curva-2); } .nav-toggle.is-abierto span:nth-child(1){ transform: translateY(4px) rotate(45deg); } .nav-toggle.is-abierto span:nth-child(2){ transform: translateY(-4px) rotate(-45deg); } /* ============================================================ 5. Portada ============================================================ */ /* Pantalla completa, la fotografía a sangre y encima un velo verde: el de la corporación, no un gris. Debajo del velo se mueven tres manchas de color —la aurora— y la fotografía se acerca muy despacio. Los tres destacados se turnan adentro: cambia el texto y cambia la foto, y la composición se queda quieta. */ .portada{ position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--tope-alto) + 40px) 0 150px; overflow: hidden; background: var(--verde-noche); color: rgba(255, 255, 255, .8); } /* ---- Las fotografías ---- Se cruzan con opacidad adentro de la misma capa. Van nombradas en --foto desde el HTML, una por destacado. */ .portada-fotos{ position: absolute; inset: 0; overflow: hidden; } .portada-foto{ position: absolute; inset: 0; background-image: var(--foto); background-size: cover; background-position: var(--foco, center); opacity: 0; transition: opacity 1s ease; } .portada-foto.is-activa{ opacity: 1; /* El acercamiento dura más que el turno (RITMO son 7 s en script.js): así el movimiento nunca llega al final ni se ve el salto de vuelta al empezar. */ animation: acercarFoto 13s ease-out forwards; } @keyframes acercarFoto{ from{ transform: scale(1.02); } to{ transform: scale(1.12); } } /* El velo. Cargado a la izquierda, que es donde cae el texto, y más abierto a la derecha para que la fotografía se siga viendo: sin él, un titular blanco sobre una foto clara es ilegible justo en la primera pantalla del portal. */ .portada-velo{ position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4, 28, 21, .95) 0%, rgba(6, 42, 32, .88) 40%, rgba(6, 42, 32, .6) 72%, rgba(6, 42, 32, .45) 100%), linear-gradient(180deg, rgba(4, 28, 21, .5) 0%, transparent 35%); } /* ---- La aurora ---- Tres manchas de verde que se cruzan despacio. Son degradados radiales y no cajas con filter: blur(). El desenfoque de un rectángulo de seiscientos píxeles hay que recalcularlo en cada cuadro de la animación, y en una máquina sin aceleración por hardware —o en un teléfono de gama baja, que es la mitad de las visitas de un portal público— eso se lleva la página entera por delante. Un degradado que termina en transparente ya nace suave: mismo dibujo, y lo único que se mueve es un transform. */ .portada-aurora{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .portada-aurora span{ position: absolute; display: block; border-radius: 50%; will-change: transform; /* Arranca en pausa y la suelta el script cuando la portada está a la vista. Una animación de tres capas del tamaño de la pantalla corriendo mientras alguien lee el pie no se ve —la portada quedó ocho pantallas más arriba— y sigue costando batería y cuadros en cualquier equipo sin aceleración por hardware. */ animation-play-state: paused; } .portada.is-viendo .portada-aurora span{ animation-play-state: running; } .portada-aurora span:nth-child(1){ width: 62vw; height: 62vw; top: -26vw; left: -18vw; background: radial-gradient(circle closest-side, rgba(18, 160, 111, .5), rgba(18, 160, 111, .16) 55%, transparent 78%); animation: auroraA 19s ease-in-out infinite alternate; } .portada-aurora span:nth-child(2){ width: 54vw; height: 54vw; bottom: -28vw; left: 16vw; background: radial-gradient(circle closest-side, rgba(11, 107, 79, .62), rgba(11, 107, 79, .2) 55%, transparent 78%); animation: auroraB 23s ease-in-out infinite alternate; } .portada-aurora span:nth-child(3){ width: 46vw; height: 46vw; top: -16vw; right: -14vw; background: radial-gradient(circle closest-side, rgba(127, 227, 187, .2), rgba(127, 227, 187, .06) 55%, transparent 78%); animation: auroraC 27s ease-in-out infinite alternate; } @keyframes auroraA{ from{ transform: translate3d(0, 0, 0) scale(1); } to{ transform: translate3d(9vw, 7vw, 0) scale(1.16); } } @keyframes auroraB{ from{ transform: translate3d(0, 0, 0) scale(1.08); } to{ transform: translate3d(-11vw, -6vw, 0) scale(.94); } } @keyframes auroraC{ from{ transform: translate3d(0, 0, 0) scale(.96); } to{ transform: translate3d(-7vw, 9vw, 0) scale(1.2); } } .portada-caja{ position: relative; z-index: 2; width: 100%; } /* Los destacados se apilan en la misma celda de la grilla y se cruzan con opacidad. Apilados y no en fila porque así la altura la manda el más largo: con un carrusel que se desplaza de costado, cambiar de destacado movería el resto de la página. */ .portada-pista{ display: grid; } .portada-slide{ grid-area: 1 / 1; max-width: 800px; opacity: 0; visibility: hidden; transition: opacity .5s ease; } .portada-slide.is-activa{ opacity: 1; visibility: visible; } /* La entrada del contenido: sello, titular, bajada y botones suben escalonados cada vez que el destacado toma su turno. Es lo que hace que un cambio se lea como algo que pasa y no como un texto que se reemplazó. */ .portada-slide.is-activa .portada-sello, .portada-slide.is-activa .portada-titulo, .portada-slide.is-activa .portada-texto, .portada-slide.is-activa .portada-botones{ animation: fadeInUp .75s var(--curva-2) backwards; } .portada-slide.is-activa .portada-sello{ animation-delay: .05s; } .portada-slide.is-activa .portada-titulo{ animation-delay: .14s; } .portada-slide.is-activa .portada-texto{ animation-delay: .24s; } .portada-slide.is-activa .portada-botones{ animation-delay: .34s; } /* El sello: una píldora de vidrio sobre la fotografía. */ .portada-sello{ display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .portada-sello::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde-menta); flex: none; } .portada-titulo{ margin-top: 26px; font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; color: #fff; text-wrap: balance; } .portada-titulo em{ color: var(--verde-menta); } .portada-texto{ max-width: 58ch; margin-top: 22px; font-size: 1.12rem; font-weight: 300; color: rgba(255, 255, 255, .88); } .portada-botones{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 38px; } /* ---- Los controles ---- Debajo del titular: las barritas que cuentan el turno del destacado que está a la vista y las dos flechas. */ .portada-barra{ position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; margin-top: 52px; } .portada-puntos{ display: flex; align-items: center; gap: 10px; } /* El punto que se ve son 3 px de alto, pero el botón mide 26: en un teléfono nadie le acierta a una raya de tres píxeles con el pulgar. La raya se dibuja en un ::before y el resto del botón es área de toque transparente. */ /* El botón mide 44 px de alto aunque la raya visible tenga 3: el área de toque es la caja entera y el dibujo va en un ::before centrado. Con la pantalla apagada de detalles, lo que decide si se acierta con el pulgar es el rectángulo invisible, no la raya. */ .portada-punto{ position: relative; width: 58px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; } .portada-punto::before, .portada-punto::after{ content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 3px; margin-top: -1.5px; border-radius: 3px; } .portada-punto::before{ background: rgba(255, 255, 255, .25); } /* La segunda raya es el reloj: se llena en los mismos siete segundos que dura el turno, y se detiene con el puntero encima o con la pestaña al fondo, igual que el carrusel. Es la única forma honesta de decir "esto se va a mover solo dentro de un rato". */ .portada-punto::after{ background: var(--verde-menta); transform: scaleX(0); transform-origin: left; } .portada-punto:hover::before{ background: rgba(255, 255, 255, .5); } .portada-punto.is-activo::after{ animation: llenarPunto var(--ritmo) linear forwards; } .portada-puntos.is-pausa .portada-punto.is-activo::after{ animation-play-state: paused; } /* Sin avance automático —la preferencia de menos movimiento— la barra se queda llena: marca cuál está a la vista y no promete un cambio que no viene. */ .portada-puntos.is-quieto .portada-punto.is-activo::after{ animation: none; transform: scaleX(1); } @keyframes llenarPunto{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } } .portada-punto:focus-visible{ outline-color: var(--verde-menta); } .portada-flechas{ display: flex; align-items: center; gap: 10px; } .portada-flecha{ display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .35s var(--curva), background-color .3s ease, border-color .3s ease; } .portada-flecha:hover{ transform: translateY(-3px); background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); } .portada-flecha:focus-visible{ outline-color: var(--verde-menta); } .portada-flecha svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---- La guía de desplazamiento ---- Una línea vertical con un punto que baja en bucle, pegada al filo inferior. Dice que abajo sigue habiendo página, que es lo que una portada a pantalla completa no deja ver. */ /* Va por encima del borde donde empieza la tarjeta de cifras —que sube ochenta píxeles sobre la portada—: apoyada más abajo, las dos se superponen. */ .portada-guia{ position: absolute; left: 50%; bottom: 100px; z-index: 2; width: 1px; height: 54px; overflow: hidden; background: rgba(255, 255, 255, .2); transform: translateX(-50%); } .portada-guia span{ display: block; width: 100%; height: 18px; background: var(--verde-menta); animation: bajarGuia 2.4s ease-in-out infinite; } @keyframes bajarGuia{ 0%{ transform: translateY(-20px); } 100%{ transform: translateY(54px); } } /* ============================================================ 6. Cifras ============================================================ */ /* Cuatro números en una tarjeta que pisa el borde de la portada. Se cuentan solos la primera vez que entran a la vista; el motor está en script.js. */ .cifras{ position: relative; z-index: 3; margin-top: -80px; } .cifras-caja{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 34px 20px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-2); } .cifra{ position: relative; padding: 6px 24px; text-align: center; } .cifra + .cifra::before{ content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--linea); } .cifra-num{ display: block; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--verde); } .cifra-num small{ font-size: .55em; font-weight: 700; } .cifra-pie{ display: block; margin-top: 6px; font-size: .82rem; font-weight: 500; line-height: 1.45; color: var(--tinta-2); } /* ============================================================ 7. Accesos rápidos y secciones ============================================================ */ .seccion{ padding: clamp(64px, 8vw, 100px) 0; } .seccion.is-tenue{ background: var(--tarjeta); } /* Dos secciones seguidas sobre el mismo fondo no son dos secciones: son una, partida por el constructor. Éste cierra la columna de prosa y abre otra cada vez que aparece un bloque ancho —una rejilla de diputados, un mapa—, así que /diputados/ llegaba a tener tres `.seccion` encadenadas y, entre una y otra, doscientos píxeles de nada. El aire de arriba se va cuando la de antes ya lo puso; se queda donde el fondo cambia, que es el único caso en que las dos franjas se leen como piezas distintas. Va colgado de `.portadilla ~`, o sea sólo en las páginas internas: la portada apila sus siete secciones a propósito y cada una es de verdad una parada distinta. */ .portadilla ~ .seccion + .seccion:not(.is-tenue){ padding-top: 0; } .portadilla ~ .seccion.is-tenue + .seccion:not(.is-tenue){ padding-top: clamp(64px, 8vw, 100px); } /* La cabecera de sección: el título a la izquierda con su bajada, y a la derecha lo que corresponda —un enlace o los filtros—, alineados por abajo. */ .cabeza{ display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; margin-bottom: clamp(32px, 4vw, 48px); } .cabeza-titulo{ max-width: 58ch; } /* El enlace de la derecha se apoya en la base del bloque de título y no en su borde de arriba: alineado con la bajada, se lee como parte de la misma cabecera. */ .cabeza > .enlace{ align-self: flex-end; margin-bottom: 4px; } .titulo{ margin-top: 14px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; } .bajada{ margin-top: 10px; font-size: .98rem; color: var(--tinta-2); max-width: 52ch; } /* ---- Accesos rápidos ---- Los cuatro trámites que la gente viene a hacer. Van antes que las noticias a propósito: quien entra a buscar una ordenanza no debería tener que pasar por lo que publicamos nosotros para encontrarla. */ .atajos{ padding-top: clamp(56px, 7vw, 88px); } .atajos-rejilla{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .atajo{ display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 32px; text-decoration: none; overflow: hidden; position: relative; } .atajo:hover{ transform: translateY(-10px); box-shadow: var(--sombra-3); } /* El ícono en su círculo verde claro, que se llena al pasar por encima. */ .atajo-icono{ display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 4px; color: var(--verde); background: var(--verde-tenue); border-radius: 18px; transition: transform .45s var(--curva), background-color .35s ease, color .35s ease; } .atajo-icono svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .atajo:hover .atajo-icono{ color: #fff; background: var(--verde); transform: rotate(-6deg) scale(1.06); } .atajo-titulo{ font-size: 1.24rem; font-weight: 700; letter-spacing: -.03em; color: var(--tinta); } .atajo-texto{ font-size: .88rem; line-height: 1.5; color: var(--tinta-2); } .atajo-mas{ display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: .85rem; font-weight: 600; color: var(--verde); } .atajo-mas svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--curva); } .atajo:hover .atajo-mas svg{ transform: translateX(6px); } /* ---- Los filtros ---- Píldoras que encienden en verde. Filtran las noticias sin recargar la página; el que está puesto se ve y los demás esperan. */ .filtros{ display: flex; flex-wrap: wrap; gap: 10px; } .filtro{ padding: 11px 22px; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: transform .35s var(--curva), color .3s ease, background-color .3s ease, border-color .3s ease; } .filtro:hover{ transform: translateY(-3px); color: var(--verde); border-color: var(--verde); } .filtro.is-activo{ color: #fff; background: var(--verde); border-color: var(--verde); } /* ============================================================ 8. Noticias ============================================================ */ .noticias-rejilla{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* Al cambiar de filtro, lo que queda vuelve a entrar. Sin esto las tarjetas aparecen y desaparecen de golpe y no se entiende qué pasó. Va sobre la clase del filtro y no sobre .noticia: el mismo filtro ordena las noticias por sección y los diputados por bancada, y la tarjeta es distinta en cada caso. */ .is-entrando{ animation: fadeInUp .45s var(--curva-2) both; } .noticia[hidden], .miembro[hidden]{ display: none; } .noticia-liga{ display: flex; flex-direction: column; height: 100%; text-decoration: none; overflow: hidden; border-radius: var(--radio); } .noticia-foto{ position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--verde-hondo); background-image: var(--foto); background-size: cover; background-position: center; transition: transform .6s var(--curva-2); } .noticia:hover .noticia-foto{ transform: scale(1.05); } /* La estampilla de la sección, en vidrio sobre la fotografía. */ .noticia-marca{ position: absolute; top: 16px; left: 16px; padding: 7px 15px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--verde-hondo); background: rgba(255, 255, 255, .92); border-radius: 999px; box-shadow: var(--sombra-1); } .noticia-cuerpo{ display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px 26px 26px; } .noticia-fecha{ font-size: .8rem; font-weight: 600; color: var(--tinta-2); } .noticia-titulo{ font-size: 1.22rem; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; color: var(--tinta); text-wrap: pretty; transition: color .25s ease; } .noticia:hover .noticia-titulo{ color: var(--verde); } .noticia-texto{ font-size: .9rem; color: var(--tinta-2); } .noticia-mas{ display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: .88rem; font-weight: 600; color: var(--verde); } .noticia-mas svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--curva); } .noticia:hover .noticia-mas svg{ transform: translateX(6px); } /* Cuando un filtro no deja nada. No debería pasar con el contenido de muestra, pero el día que se conecte a la base va a pasar. */ .noticias-vacio{ grid-column: 1 / -1; padding: 48px 20px; text-align: center; color: var(--tinta-2); } /* ============================================================ 9. Sesiones ============================================================ */ /* Tres columnas iguales, y ésa es la regla: tres tarjetas que dicen lo mismo —las tres comisiones, por ejemplo— tienen que medir lo mismo. La primera crecía un 40 % en todas las páginas porque la rejilla nació para la portada, donde el primer bloque es el reproductor de la transmisión; en /comisiones/ eso dejaba a la Comisión Primera con 471 px contra 336 de las otras dos, sin ninguna razón que lo explicara. Las pistas van en minmax(0, …) y los bloques con min-width: 0, y no es adorno: sin eso, una rejilla le da a cada ítem el ancho mínimo de su contenido, y adentro hay un recuadro con aspect-ratio: 16/9 y min-height: 200px —o sea, 355 px de ancho mínimo intrínseco—. Esa cuenta se propagaba a la pista y empujaba la fila hasta 402 px dentro de un teléfono de 288: la página entera se desplazaba de costado. El alto mínimo sigue haciendo su trabajo; lo que se corta es que decida el ancho. */ .sesiones-rejilla{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } /* La excepción, y sólo donde se justifica: la columna del reproductor. Un vídeo en 16/9 necesita ancho para que el recuadro no quede del tamaño de un sello, y la rejilla se lo da únicamente cuando esa tarjeta está presente. Atado al contenido y no a una clase suelta en el HTML: el día que una página nueva use esta rejilla sin transmisión, sus tarjetas nacen iguales sin que nadie tenga que acordarse de nada. Donde :has() no exista, todas quedan iguales —el reproductor pierde su ancho extra pero nada se rompe—, que es la degradación correcta. */ .sesiones-rejilla:has(.vivo){ grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr); } .sesiones-rejilla > *{ min-width: 0; } .bloque{ display: flex; flex-direction: column; padding: 28px; } /* Se parte en dos renglones antes que empujar la página. Es la misma cabecera en cinco secciones, y basta una etiqueta larga —"Artículo 18 de la Ordenanza 003 de 2010" mide 289 px— para que en un teléfono el título y la etiqueta juntos pidan 388 px donde hay 297: sin el salto, lo que sobra se lo lleva la página entera de costado. */ .bloque-cabeza{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; } .bloque-titulo{ font-size: 1.22rem; font-weight: 700; letter-spacing: -.03em; } .bloque-pie{ max-width: 52ch; margin-top: 18px; font-size: .82rem; color: var(--tinta-2); } /* ---- Transmisión ---- */ .vivo-estado{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); background: var(--gris-tenue); border-radius: 999px; white-space: nowrap; } .vivo-estado::before{ content: ''; width: 7px; height: 7px; background: currentColor; border-radius: 50%; } .vivo-estado.is-vivo{ color: #d64545; background: rgba(214, 69, 69, .12); } /* En sesión el punto late. La animación se apaga sola para quien pidió menos movimiento en su sistema: un punto parpadeando es exactamente lo que molesta. */ .vivo-estado.is-vivo::before{ animation: latido 1.6s ease-in-out infinite; } .vivo-marco{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; aspect-ratio: 16 / 9; padding: 24px; text-align: center; overflow: hidden; border-radius: var(--radio-2); background: var(--verde-noche); } /* Un resplandor verde detrás del botón: el recuadro vacío deja de ser un rectángulo negro y se vuelve parte de la misma superficie que la portada. */ .vivo-marco::before{ content: ""; position: absolute; width: 80%; aspect-ratio: 1; background: radial-gradient(circle closest-side, rgba(18, 160, 111, .4), rgba(18, 160, 111, .12) 55%, transparent 80%); } .vivo-marco iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; } .vivo-boton{ position: relative; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; transition: transform .45s var(--curva), background-color .3s ease, border-color .3s ease; } .vivo-boton svg{ width: 24px; height: 24px; fill: rgba(255, 255, 255, .85); } .vivo:hover .vivo-boton{ transform: scale(1.1); background: rgba(255, 255, 255, .14); border-color: var(--verde-menta); } .vivo-nota{ position: relative; max-width: 320px; font-size: .84rem; color: rgba(255, 255, 255, .6); } /* ---- Agenda ---- */ .agenda{ list-style: none; display: flex; flex-direction: column; gap: 6px; } .agenda-item{ display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: var(--radio-3); transition: background-color .3s ease, transform .35s var(--curva); } .agenda-item:hover{ background: var(--verde-tenue); transform: translateX(5px); } /* La fecha en su cuadradito verde: el día grande y el mes debajo. */ .agenda-fecha{ display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 54px; height: 54px; line-height: 1; color: var(--verde); background: var(--verde-tenue); border-radius: var(--radio-3); } .agenda-fecha strong{ font-size: 1.3rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .agenda-fecha small{ margin-top: 2px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .agenda-titulo{ font-size: .98rem; font-weight: 600; letter-spacing: -.02em; } .agenda-texto{ margin-top: 2px; font-size: .82rem; color: var(--tinta-2); } /* ---- Participa ---- */ .participa{ display: flex; flex-direction: column; gap: 4px; } .participa-link{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; font-size: .94rem; font-weight: 500; color: var(--tinta); text-decoration: none; border-radius: var(--radio-3); transition: background-color .3s ease, color .3s ease, padding-left .35s var(--curva); } .participa-link svg{ width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .4; transition: transform .4s var(--curva), opacity .3s ease; } .participa-link:hover{ padding-left: 22px; color: var(--verde); background: var(--verde-tenue); } .participa-link:hover svg{ opacity: 1; transform: translateX(4px); } /* ============================================================ 9 bis. Las sesiones grabadas ============================================================ */ /* El archivo del canal de YouTube. Ninguna de estas tarjetas está escrita en el HTML: las arma `sesiones.js` con lo que devuelve el servidor, así que acá se estila una pieza que todavía no existe cuando la página se pinta por primera vez. Se parece a la tarjeta de una noticia y no lo es. La diferencia es la miniatura: la de una noticia es una fotografía elegida para la tarjeta, y ésta es el cuadro que YouTube sacó del video. Eso trae dos cosas que hay que resolver acá y no en la otra: · la proporción. Un video es 16/9 y la miniatura de un video viejo viene en 4/3, con barras negras arriba y abajo. `cover` sobre un recuadro 16/9 recorta justo esas barras, así que las dos generaciones de miniatura se ven igual de bien. · el triángulo. Una foto no dice qué pasa al tocarla; un video sí tiene que decirlo. */ .videos-rejilla{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .video-liga{ display: flex; flex-direction: column; height: 100%; text-decoration: none; overflow: hidden; border-radius: var(--radio); } .video-foto{ position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--verde-noche); background-image: var(--foto); background-size: cover; background-position: center; transition: transform .6s var(--curva-2); } .video:hover .video-foto{ transform: scale(1.05); } /* El triángulo, en vidrio sobre la miniatura. Más chico que el de la transmisión en vivo —aquel es el centro de su tarjeta y éste es una marca sobre una imagen— y con un velo detrás: una miniatura clara lo dejaría invisible. */ .video-play{ position: relative; display: grid; place-items: center; width: 54px; height: 54px; background: rgba(4, 28, 21, .55); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; backdrop-filter: blur(3px); transition: transform .45s var(--curva), background-color .3s ease, border-color .3s ease; } .video-play svg{ width: 22px; height: 22px; fill: rgba(255, 255, 255, .92); } .video:hover .video-play{ transform: scale(1.12); background: var(--verde); border-color: var(--verde-menta); } /* Qué clase de sesión es, en la misma estampilla que lleva la tarjeta de una noticia. Sale de leer el título en el servidor: el canal no clasifica nada. */ .video-marca{ position: absolute; top: 14px; left: 14px; padding: 6px 13px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--verde-hondo); background: rgba(255, 255, 255, .92); border-radius: 999px; box-shadow: var(--sombra-1); } /* Cuánto dura, abajo a la derecha y en números de ancho fijo, que es donde y como lo escribe cualquier reproductor. Sólo aparece cuando se sabe: sin credencial del canal el servidor no la conoce y el elemento no se dibuja. */ .video-duracion{ position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; background: rgba(4, 28, 21, .78); border-radius: 8px; } /* Una sesión al aire en este momento. Mismo rojo y mismo latido que el cartel de la transmisión, porque es exactamente lo mismo dicho en otro lugar de la página. */ .video-vivo{ position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #d64545; border-radius: 999px; } .video-vivo::before{ content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: latido 1.6s ease-in-out infinite; } .video-cuerpo{ display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; } .video-fecha{ font-size: .8rem; font-weight: 600; color: var(--tinta-2); } /* Dos renglones y punto. Los títulos del canal son largos y desparejos —"Sesión ordinaria No. 12 del periodo…"— y sin el corte una tarjeta mide el doble que la de al lado por una numeración. `-webkit-line-clamp` es lo que entienden todos los navegadores de hoy; el `line-clamp` de al lado es el nombre definitivo de la propiedad. */ .video-titulo{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 1.08rem; font-weight: 700; line-height: 1.34; letter-spacing: -.02em; color: var(--tinta); text-wrap: pretty; transition: color .25s ease; } .video:hover .video-titulo{ color: var(--verde); } .video-texto{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .86rem; color: var(--tinta-2); } .videos-vacio{ grid-column: 1 / -1; padding: 48px 20px; text-align: center; color: var(--tinta-2); } /* El pie del listado: cuántas se ven, el botón que trae más y el enlace al canal. En una línea mientras entren, y en tres renglones centrados cuando no. */ .videos-pie{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 24px; margin-top: clamp(28px, 3.5vw, 40px); } .videos-cuenta{ font-size: .84rem; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; } /* ---- El adelanto de la portada ---- */ /* Tres grabaciones debajo de la transmisión y la agenda, con su propio encabezado chico: es una pieza más de la sección de sesiones y no una sección nueva, así que no lleva título de sección ni el aire de una. */ .videos-adelanto{ margin-top: 24px; } .videos-cabeza{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; } /* ---- El reproductor ---- */ /* Se abre encima de la página en lugar de mandar a YouTube: quien recorre el archivo quiere mirar un rato y seguir buscando, y cada salida a otra pestaña es una vuelta que hay que deshacer. Es un nativo, así que el fondo, el foco atrapado adentro y Escape los pone el navegador. Acá sólo se lo viste. */ /* El ancho lo puede fijar el alto, y hace falta: el recuadro es 16/9, así que 960 px de ancho son 540 de alto y en una ventana de 500 el video se sale por abajo con los controles de YouTube afuera. Los 150vh son ese mismo 16/9 medido al revés —un 16/9 que entra en el 84 % del alto—, y dejan sitio para el título de abajo. */ .visor{ width: min(960px, 92vw, 150vh); padding: 0; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-2); box-shadow: var(--sombra-3); overflow: hidden; } .visor::backdrop{ background: rgba(4, 28, 21, .72); } .visor-marco{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--verde-noche); border-radius: var(--radio-2) var(--radio-2) 0 0; } .visor-marco iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .visor-pie{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 18px 22px 20px; } .visor-titulo{ font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; } .visor-enlace{ flex: none; font-size: .86rem; font-weight: 600; color: var(--verde); text-decoration: none; } .visor-enlace:hover{ text-decoration: underline; } /* Adentro del recuadro y arriba a la derecha. Estuvo un rato afuera, flotando encima del diálogo, que es más limpio… hasta que la ventana es baja: ahí el diálogo arranca pegado al borde de arriba y la cruz queda fuera de la pantalla, o sea que no hay forma de cerrar salvo Escape. Adentro entra siempre, y el fondo oscuro la despega del video. */ .visor-cerrar{ position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; font-family: inherit; font-size: 1rem; line-height: 1; color: #fff; background: rgba(4, 28, 21, .66); border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; cursor: pointer; backdrop-filter: blur(3px); transition: background-color .3s ease, transform .35s var(--curva); } .visor-cerrar:hover{ background: rgba(4, 28, 21, .88); transform: scale(1.08); } /* ============================================================ 9 ter. La galería ============================================================ */ /* Las fotografías de la corporación. Ninguna está escrita en el HTML: las arma `galeria.js` con lo que devuelve el servidor, así que acá se estila una pieza que todavía no existe cuando la página se pinta por primera vez. Es una rejilla de cuadros y no una tira de tarjetas, y la diferencia está en qué se mira: en una noticia se lee el título y la foto acompaña; acá la foto ES el contenido y el título es el pie que la explica. Por eso los cuadros son cuadrados —una rejilla pareja se recorre con la vista de una pasada— y por eso el pie es chico y va debajo, sin competir con la imagen. `auto-fill` con un mínimo y no un número fijo de columnas: una galería crece de a una foto, y con columnas fijas la última fila queda coja cada vez que el total no es múltiplo de tres. Con `auto-fill` la rejilla se acomoda sola a lo que haya y al ancho que tenga. */ .galeria-rejilla{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .galeria-cuadro{ position: relative; margin: 0; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-2); box-shadow: var(--sombra-1); transition: transform .35s var(--curva), box-shadow .35s var(--curva), border-color .3s ease; } .galeria-cuadro:hover{ transform: translateY(-4px); border-color: var(--verde-linea); box-shadow: var(--sombra-2); } /* El botón que abre el visor. Es un botón y no un enlace a propósito —la foto no tiene página propia, así que no hay dirección honesta que poner debajo—, y por eso hay que devolverle a mano todo lo que un