/* ================================================================= single-department.css — Detalle de Department (single-department.php, Figma 20-Deparments-Desktop node 4508:16570 / variante sin subsecciones 21-Deparments-Variant-Desktop node 4508:16794, archivo BdUd1g6K6cuVm4036Z5p6p). Se apoya en single-news.css (.post-page/.post__col/.post-content.modern-content) y en archive-resource.css (.resource-grid/.resource-card) — ambas encoladas junto con este archivo (ver inc/enqueue.php), mismo criterio de reuso que single-project.php. Breakpoint estándar 80rem (§12). ================================================================= */ @layer views { /* ---- Hero: foto + scrim (gradiente + grano), equipo superpuesto al borde inferior ---- .department-hero__scrim cubre el hero completo con un gradiente oscuro + grano SVG en su ::after (valores literales pedidos por el usuario, ver las reglas más abajo). Sin backdrop-filter/blur en ningún contenedor de las cards de equipo (se probó y se quitó — bug real reportado 2026-07-29, ver comentario de .department-team): solo el panel translúcido propio de cada card. */ .department-hero { position: relative; overflow: hidden; min-height: 458px; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 48px 100px; /* pedido explícito del usuario 2026-07-29 */ } .department-hero__bg { position: absolute; inset: 0; } .department-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .department-hero__scrim { position: absolute; inset: 0; /* Valores literales pedidos por el usuario 2026-07-29 (2do ajuste, reemplaza el cálculo propio a partir del Inspect de Figma) — oscuro arriba (detrás del header/nav), casi transparente abajo: las cards de equipo ya tienen su propio contraste vía backdrop-filter/ box-shadow, no dependen de este scrim para leerse. SIN mask/backdrop-filter propios: el degradado vive completo (0%→100%) para que el título/header sigan con contraste arriba — el blur+grano (glass) es una capa APARTE (::before/::after, abajo) confinada a la parte de ABAJO de la foto, pedido explícito del usuario 2026-07-30 (mismo criterio de capas independientes que .news-main-article__scrim + .news-main-article__glass en news.css). */ background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .4) 35%, rgba(0, 0, 0, .05) 65%, rgba(0, 0, 0, .02) 100%); } /* Glass (blur) confinado a la parte de ABAJO de la foto — pedido explícito 2026-07-30, MISMO patrón que .news-main-article__glass (news.css): el blur+grano viven SOLO donde no está el título (que necesita la foto nítida detrás para no perder contraste con el degradado oscuro de arriba). Bug real (2026-07-30, corregido 1ra ronda con el mask invertido — arriba en vez de abajo): el backdrop-filter NUNCA había existido en esta regla, el hero se veía plano sin ningún glass real. */ .department-hero__scrim::before { content: ''; position: absolute; inset: 0; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%); mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%); } /* Grano del hero (nodo "Noise effect" del Figma trae, además del gradiente de arriba, un efecto Noise propio en la capa — faltaba, reportado 2026-07-29). MISMO tile que .department-team__card::before (ver ese comentario para el porqué de un tile fijo en vez de estirar), acá con `background-repeat:repeat` (el hero es mucho más ancho que un tile). `background-size:330px` (110% del viewBox de 300, NO 300px clavado): con el tile a tamaño 1:1 exacto se veían las COSTURAS entre repeticiones como un patrón de cuadros ("parchado"), pese a `stitchTiles="stitch"` (pensado para evitar justo esto) — reportado y confirmado 2026-07-29 probando a mano en el navegador. Intensidad AJUSTADA 2026-07-29, RESTAURADA 2026-07-30: el `feComponentTransfer`+ `feFuncA type="discrete"` (12 pasos, mitad 0 mitad 1) cuantiza la turbulencia en manchas duras blanco/negro — se ve "moteado", mucho más agresivo que el grano fino y parejo del Figma (su efecto nativo "Noise" es un ruido MONO continuo, no binario). Se quita esa cuantización (deja pasar el alpha CONTINUO de feColorMatrix). Opacidad en 0.14, igual que .news-main-article__glass — confinado, igual que el blur de arriba, a la parte de ABAJO de la foto (mismo mask, invertido respecto al 1er intento que lo confinaba arriba). */ .department-hero__scrim::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='300' height='300' fill='black' filter='url(%23grain)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 330px 330px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%); mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%); } .department-hero__inner { position: relative; z-index: 1; /* Ancho para que quepan las 3 cards de equipo (278px c/u) + 2 gaps de 30px = 894px exactos — NO el ancho de .post__col (790px, pensado para prosa): pedido explícito del usuario 2026-07-29. 60rem (960px), no 894px clavado: con padding-inline (var(--space-m) por lado) restando del max-width, 894px exactos dejaban CERO margen y las cards se envolvían a 2+1 — bug real reportado 2026-07-29, corregido con margen de sobra en vez de un cálculo exacto frágil ante cualquier redondeo. Sin blur propio acá (ver comentario de .department-team más abajo: el blur se quitó de raíz, no solo de este contenedor). `width:100%` — CAUSA RAÍZ real del bug "el ancho de la card cambia según cuántos miembros/qué tan largo es el título" (reportado e investigado a fondo 2026-07-29, confirmado en vivo con DevTools/JS contra newdia.nett.mx): `.department-hero` es `display:flex; flex-direction:column` con `align-items` en su valor inicial (`normal`, que computa como `stretch` para un contenedor flex) — PERO align-items/stretch se IGNORA en el eje cruzado cuando el hijo tiene `margin-inline:auto` (regla real de la spec de Flexbox, no un bug de navegador). Sin stretch, el `width:auto` de este bloque caía a "shrink-to-fit": el ancho terminaba siendo el de su hijo más ancho (la fila `.department-team`, cuyo ancho natural SÍ depende de cuántas cards trae — de ahí el síntoma "cambia según el número de miembros"/"según el ancho del título"). `width:100%` fuerza un ancho definido explícito que ya NO depende de `align-items`/auto-margins — `max-width:60rem` sigue topándolo igual que antes. */ width: 100%; max-width: 60rem; /* 960px */ margin-inline: auto; padding-inline: var(--space-m); text-align: center; box-sizing: border-box; } .department-hero__eyebrow { margin: 0 0 4px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-inverse, #fff); } .department-hero__title { margin: 0 0 32px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); /* hasta 40px, spec Figma */ line-height: 1.25; letter-spacing: -1px; color: var(--dia-color-text-inverse, #fff); } /* ---- Cards de equipo: superpuestas al borde inferior del hero — vidrio esmerilado POR CARD (backdrop-filter en cada `.department-team__card` individual, NO en el contenedor `.department-team` que las agrupa). Corrección 2026-07-29 sobre 2 intentos previos: el 1ro ponía el blur en un ::before del contenedor → se veía como un rectángulo con bordes rectos detrás de TODA la fila (no seguía el border-radius de cada card). El 2do lo quitó de raíz por error, dejando las cards sin ningún efecto de vidrio. La solución real es más simple: backdrop-filter DIRECTO en cada card — su propio `border-radius:12px`/`overflow:hidden` ya recorta el blur exactamente a los límites de esa card, sin ningún rectángulo "suelto" de por medio. Bisel/inset del borde (pedido explícito, 2do intento — el 1ro con "gradient border" de 2 capas de background-image quedó casi invisible: alpha .35 de blanco encima de la foto ya oscurecida por backdrop-filter no alcanza a notarse). Reemplazado por `box-shadow` inset: se pinta ENCIMA del backdrop ya blureado (no depende de mezclarse con lo que hay debajo para "aclarar"), mismo criterio que la sombra "glass" de 5 capas ya usada en .story-card:hover/.res-card--featured — inset, no outset, así que overflow:hidden en esta misma card no la recorta (§12.2 de la arquitectura es sobre sombras OUTSET recortadas por overflow, no aplica acá). Más brillante arriba (donde más pega la luz en el Figma) y a la izquierda, apenas un oscurecido abajo. */ .department-team { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .department-team__card { position: relative; /* ancla el grano de ::before, ver abajo */ display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 278px; /* min-height (no height fijo): pedido explícito del usuario 2026-07-30 — un nombre/puesto largo que envuelve a 2 líneas quedaba recortado/desbordado con el alto clavado. Con min-height + el align-items:stretch por default de .department-team (flex, sin align-items propio) las cards de una MISMA fila siguen creciendo TODAS parejo a la altura de la más alta, no cada una a su propio contenido. */ min-height: 204px; /* spec Figma, pedido explícito 2026-07-29 */ padding: 24px 16px 16px; border-radius: 12px; overflow: hidden; /* recorta el backdrop-filter/grano a los límites redondeados de la card */ background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); /* Sin border propio (pedido explícito 2026-07-29): con el box-shadow inset de abajo ya dibujando el bisel, un border literal sumaba una 2da línea redundante. */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 1px 0 1px rgba(255, 255, 255, .3), inset 0 -1px 1px rgba(0, 0, 0, .2); } /* Grano — misma técnica SVG de .story-card__glass::after/.project__hero-glass::after (feTurbulence + feColorMatrix + feComponentTransfer discreto), pero corregida 2026-07-29 (déjà vu del bug de §12.17/gotchas.md: "un blur/patrón SVG grande se rasteriza en bloques" — ahí era un feGaussianBlur, acá es el MISMO síntoma con feTurbulence): el 1er intento usaba un viewBox pegado exacto a la card (278×204, `preserveAspectRatio="none"` + `background-size: 100% 100%`) — estirar un patrón NO cuadrado a un box pequeño y NO cuadrado deforma la turbulencia de forma no uniforme en x/y (visible como un tejido/moiré diagonal, confirmado por el usuario: se veía "raro" chico, bien al agrandar la card — exactamente el síntoma de pocas celdas de turbulencia haciéndose notorias). Fix: MISMO tile cuadrado de 300×300 que `.department-hero__scrim::after` (sin estirar, sin `preserveAspectRatio="none"`), recortado una sola vez (sin repetir). `background-size:330px` (110% del viewBox, mismo ajuste anti- costura que el scrim del hero — ver ese comentario) en vez de 300px clavado: aunque acá no repite (no hay costura entre tiles que romper), se deja el mismo 110% por consistencia visual de densidad de grano entre el hero y las cards. z-index:-1 (no requiere z-index en la card: backdrop-filter YA crea su propio stacking context) para quedar detrás del avatar/nombre/ puesto (contenido normal, z-index:auto) pero encima del backdrop-filter. Intensidad ajustada 2026-07-29 — mismo motivo/mismo cambio que `.department-hero__scrim::after` (sin cuantización discreta, opacidad tope 0.05 en vez de 0.14): se veía "moteado"/mucho más duro que el grano fino y parejo de la referencia del Figma. */ .department-team__card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' fill='black' filter='url(%23grain)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 330px 330px; } .department-team__avatar { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); overflow: hidden; background: rgba(255, 255, 255, .12); } /* Sin borde cuando es una de las 3 imágenes de respaldo (dia_department_avatar_fallback_url()) — pedido explícito 2026-07-29: el borde tenía sentido para recortar una FOTO real contra el fondo del hero, no aporta nada sobre el degradado plano del fallback. */ .department-team__avatar--fallback { border: none; } .department-team__avatar img { width: 100%; height: 100%; object-fit: cover; } .department-team__name { margin: 16px 0 0; font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 24px; text-align: center; color: var(--dia-color-text-inverse, #fff); } .department-team__position { margin: 4px 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: var(--dia-color-text-inverse, #fff); opacity: .88; } /* En tablet (768–1023px) las 3 cards aprovechan todo el ancho útil del hero, con gutters laterales fluidos y un gap menor para no quedar angostas. La columna única queda reservada para móvil. */ @media (48rem <= width < 64rem) { .department-hero__inner { width: 100%; max-width: none; box-sizing: border-box; padding-inline: clamp(1rem, 4vw, 3rem); } .department-team { flex-wrap: nowrap; gap: clamp(.75rem, 2vw, 1.5rem); } /* max-width:278px — tope del ancho fijo del Figma desktop (spec literal, pedido explícito del usuario 2026-07-29): sin esto, en el extremo ancho de este rango (cerca de 1023px) la fórmula del 1/3 supera los 278px reales de la card de desktop. */ .department-team__card { width: calc((100% - clamp(.75rem, 2vw, 1.5rem) - clamp(.75rem, 2vw, 1.5rem)) / 3); max-width: 278px; } } @media (width < 48rem) { /* `.department-hero__inner{width:100%}` ya vive en la regla BASE (causa raíz real del bug "el ancho de la card cambia según el número de miembros/el título" — ver ese comentario, investigado a fondo 2026-07-29: `margin-inline:auto` ignoraba el `align-items:stretch` de `.department-hero`, shrink-to-fit). `.department-team{width:100%}` acá SÍ hace falta todavía: es hijo de `.department-hero__inner`, no de `.department-hero` — no tiene el mismo problema de auto-margin/stretch (no lleva `margin-inline:auto`), pero tampoco tiene un `width` propio en la regla base (dependía de "block auto-fill", ambiguo) — se deja explícito por las dudas, mismo criterio. `flex-wrap:nowrap`: la regla base trae `flex-wrap:wrap` pensada para desktop/tablet en fila, sin efecto real en columna pero se apaga para que quede inequívoco. */ .department-team { flex-direction: column; align-items: center; width: 100%; flex-wrap: nowrap; } /* 278px fijo (NO 100%/22rem) — pedido explícito del usuario 2026-07-29: en columna la card no necesita llenar el ancho disponible, así que usa el mismo tamaño fijo que desktop en vez de un tope de 352px (22rem) que la dejaba MÁS ANCHA que la propia spec de desktop del Figma. */ .department-team__card { width: 278px; max-width: 100%; } } /* ---- Nav bar sticky (Figma "Navigation bar" 4508:16785) — mismo mecanismo que .project-nav (single-project.css/project-nav.js), clonado a department-nav.js. Solo texto (sin íconos, a diferencia de .project-nav — el Figma de esta vista no trae esos SVG). ---- */ .department-nav { position: sticky; top: 0; z-index: 10; /* mismo criterio que .project-nav: debajo de .site-header__nav (20) a propósito */ background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-inline: clamp(var(--space-m), 8vw, 7.5rem); /* Full-bleed (NO en __inner, que está constreñido a var(--container)) — pedido explícito del usuario 2026-07-29: con el borde en __inner se veía "salida" a los lados, cortada antes de llegar al borde real de la nav. Literal #e5e5e5, mismo motivo que .project-nav__inner. */ border-bottom: 1px solid #e5e5e5; } @media (width >= 80rem) { .department-nav { padding-inline: 0; } } .department-nav__inner { display: flex; justify-content: center; gap: 30px; max-width: var(--container); margin-inline: auto; } .department-nav__link { display: flex; align-items: center; justify-content: center; width: 277px; padding-block: 25px; border-bottom: 2px solid transparent; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 24px; text-transform: uppercase; color: var(--dia-color-text-secondary, #767778); } .department-nav__link.is-active { color: var(--dia-color-brand-secondary, #3e8391); border-bottom-color: var(--dia-color-brand-secondary, #3e8391); } @media (width < 64rem) { .department-nav__inner { flex-wrap: wrap; } .department-nav__link { width: auto; flex: 1 1 auto; padding-inline: 12px; } } /* ---- <48rem: la fila de tabs se convierte en un dropdown/select (pedido explícito del usuario 2026-07-29) — MISMO look que .resource-filter-dropdown/__toggle/__panel/__item (filter-bar-resources.php/archive-resource.css): botón con el label de la sección activa + chevron, panel absoluto con lista vertical de opciones. Clases propias (`.department-nav__`, no reuso directo de `.resource-filter-dropdown`) porque archive-resource.css no se encola en esta vista — mismo criterio ya establecido en el proyecto de duplicar un patrón visual chico en vez de acoplar 2 vistas por una sola clase compartida (ver home-resources.css). Sin Alpine: department-nav.js ya es vanilla y el estado (abierto/cerrado + qué label mostrar) es trivial acá, agregarlo ahí es más simple que mezclar los 2 mecanismos. */ .department-nav__toggle { display: none; } @media (width < 48rem) { /* Pedido explícito del usuario 2026-07-29: sticky de vuelta (se probó sin sticky y se revirtió) — sin la línea gris inferior (era el borde de la fila de tabs, ya no aplica a un botón suelto) y con el mismo margin-top que el margin-bottom ya existente (clamp(1.875rem, 1.5rem + 1vw, 3rem), regla de abajo), para que quede centrado entre el hero y el contenido en vez de pegado arriba. `top`/`z-index`/`background`/`backdrop-filter` ya vienen de la regla base de `.department-nav` (sticky funciona igual como containing block del panel `position:absolute` de abajo que `relative`, no hace falta repetirlos acá). */ .department-nav { position: sticky; border-bottom: none; margin-top: clamp(1.875rem, 1.5rem + 1vw, 3rem); } .department-nav__inner { display: none; /* el toggle de abajo lo reemplaza; JS lo muestra como panel al abrir */ } /* Toggle: valores LITERALES de `.resource-filter-dropdown__toggle` (archive-resource.css, variante base — la que usa Departamento, NO `--main`/el dropdown de Orden, que lleva borde negro y fondo blanco sólido) — pedido explícito 2026-07-29, 1er intento usaba por error los valores de `--main`. */ .department-nav__toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 54px; padding: 15px 44px 15px 24px; border-radius: var(--dia-radius-sm, 4px); border: 1px solid #cacaca; background: transparent; font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 24px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); } .department-nav__toggle-label { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } .department-nav__toggle-chevron { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(90deg); width: 16px; height: 16px; pointer-events: none; transition: transform .15s ease; } .department-nav__toggle-chevron svg { width: 100%; height: 100%; } /* .is-open la agrega department-nav.js (no Alpine, ver comentario de arriba) — mismo criterio visual que .resource-filter-dropdown.is-open .resource-filter-dropdown__panel. */ .department-nav.is-open .department-nav__toggle-chevron { transform: translateY(-50%) rotate(-90deg); } /* Panel: valores LITERALES de `.resource-filter-dropdown__panel`/`__list` (archive-resource.css) — left:0/right:0 calzado al ANCHO DEL BOTÓN (containing block = .department-nav, ver comentario de arriba), NO offsets propios de `var(--space-m)` contra el viewport. */ .department-nav.is-open .department-nav__inner { display: flex; flex-direction: column; position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 10; gap: 0; max-width: none; margin: 0; padding: 8px 0; background: #fff; border: 1px solid #e5e5e5; border-radius: var(--dia-radius-sm, 4px); box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .12); } /* Ítem: valores LITERALES de `.resource-filter-dropdown__item` — normal case (NO mayúsculas, NO bold 700: eso es la fila de tabs de desktop/tablet, el ítem de un dropdown real no lo lleva), 14px/600/20. */ .department-nav.is-open .department-nav__link { position: relative; width: 100%; justify-content: flex-start; gap: 8px; padding: 12px 24px; border-bottom: none; border-radius: 0; font-weight: 600; font-size: 14px; line-height: 20px; text-transform: none; color: var(--dia-color-text-primary, #121212); } .department-nav.is-open .department-nav__link:hover { background: var(--dia-color-border-subtle, #f3f4f6); } /* Activo: mismo fondo/azul/check que `.resource-filter-dropdown__item[aria-current="true"]` (NO el teal de `.department-nav__link.is-active` de desktop/tablet, que es el color de la fila de tabs, no del dropdown). */ .department-nav.is-open .department-nav__link.is-active { background: #fafbfb; color: #2d5480; } .department-nav.is-open .department-nav__link.is-active::after { content: ''; order: -1; width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 4.5L6.5 11L3 7.5' stroke='%232d5480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } } #department-about, #department-projects, #department-resources, #department-events { scroll-margin-top: calc(var(--department-nav-h, 74px) + 24px); } /* .department-page--no-top-gap: mismo criterio que .post-page--no-top-gap (single-project.css) — el margin-bottom de .department-nav ya da la separación con el contenido, duplicar el padding-top propio de .post-page (single-news.css) sumaría un 2do gap. Solo se aplica cuando la nav SÍ se imprime (variante corta sin nav: el padding-top normal de .post-page da la separación con el hero en su lugar). */ .department-page--no-top-gap { padding-top: 0; } .department-nav { margin-bottom: clamp(1.875rem, 1.5rem + 1vw, 3rem); } /* ---- Secciones (Proyectos/Recursos/Eventos): título "Featured section" (24/32, tracking:7, uppercase) + divider — mismo patrón repetido en los 3 (Figma "divider"+título de cada nodo). El espacio de 3rem entre secciones va como `padding-bottom` de la sección ANTERIOR (o de #department-about antes de la 1ra), NO como `padding-top` de la sección con el `id` — pedido explícito 2026-07-29: el `id` del scroll-spy (department-nav.js) vive en el propio `
`, así que un `padding-top` ahí quedaba DENTRO de la caja a la que `scrollIntoView()`+`scroll-margin-top` apunta — el scroll aterrizaba con un hueco vacío de 3rem arriba del divider en vez de justo en el borde superior real de la sección. Con `padding-bottom` en el elemento ANTERIOR el espacio sigue existiendo mismo, pero ya no es parte de la caja del `id` de destino. */ #department-about { padding-bottom: 3rem; } .department-section { padding-bottom: 3rem; } .department-divider { margin: 0 0 3rem; border: none; border-top: 1px solid #e5e5e5; } .department-section__title { margin: 0 0 3rem; font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: 7px; text-transform: uppercase; color: #18181b; } /* ---- Proyectos relacionados: card bespoke (imagen + tag departamento + título + fechas) ---- */ .department-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; } .department-project { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; } .department-project__img { display: block; aspect-ratio: 380 / 238; border-radius: 12px; overflow: hidden; } .department-project__img img { width: 100%; height: 100%; object-fit: cover; } .department-project__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); } .department-project__tag svg { width: 16px; height: 16px; flex-shrink: 0; } .department-project__title { font-family: var(--font-sans); font-weight: 700; font-size: 22px; line-height: 32px; color: var(--dia-color-text-primary, #121212); } .department-project__date { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-secondary, #767778); } /* ---- Recursos relacionados: reusa .resource-grid/.resource-card (archive-resource.css) tal cual, mismo criterio que single-project.php — acá solo se apaga su padding-bottom propio (no hay paginación en esta vista) y se agrega el botón "Ver más recursos". ---- */ .department-resources__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .department-resources__grid:last-child { padding-block-end: 0 !important; } /* Centrado (display:flex + width:fit-content + margin-inline:auto en vez de inline-flex suelto) + hover con el mismo gris/sombra ya establecido para estos botones outline en todo el sitio (--dia-btn-gray-gradient/--dia-btn-gray-shadow, base.css — mismo patrón que .about-sda-cta) — ambos pedidos explícitos del usuario 2026-07-29. Comparte clase con "View more projects" (.department-projects__more) para no duplicar el estilo. */ .department-resources__more, .department-projects__more { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 3rem auto 0; padding: 17px 24px; border: 1px solid var(--dia-color-border-strong, #232323); border-radius: 4px; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 13px; line-height: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); } .department-resources__more:hover, .department-projects__more:hover { background: var(--dia-btn-gray-gradient); box-shadow: var(--dia-btn-gray-shadow); } .department-resources__more svg, .department-projects__more svg { width: 16px; height: 16px; } @media (64rem <= width < 80rem) { .department-resources__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (48rem <= width < 64rem) { .department-resources__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width < 48rem) { .department-resources__grid { grid-template-columns: 1fr; } } /* Próximos eventos: reusa .event-list/.event-row tal cual de archive-event.css (corrección 2026-07-29, ver el comentario grande de single-department.php: la 1ra versión inventaba una card/CTA propia que no correspondía al comportamiento real del archive). El ancho de 995px de `.event-list` en el archive lo da el selector `.event-results #results` (archive-event.css) — ID propio de esa plantilla, no aplica acá, así que se repite el mismo max-width+auto-margin directo sobre `.event-list` para el mismo ancho visual sin depender de ese ID. */ .department-section .event-list { max-width: 62.1875rem; /* 995px, mismo valor que .event-results #results */ margin-inline: auto; } /* El tag "Por {Departamento}" de .event-row (event-tag--dept) es redundante acá — TODOS los eventos de esta sección ya son de este mismo Department, a diferencia del archive de Events (todos los departamentos mezclados), donde ese tag sí aporta información. Pedido explícito del usuario 2026-07-29: ocultarlo solo en este contexto vía CSS, sin bifurcar card-event.php. */ #department-events .event-tag--dept { display: none; } /* #department-about:last-child cubre la variante SIN secciones (Figma "21-Deparments-Variant- Desktop"): sin esto, .post-page/.post__col (single-news.css) no aportan NINGÚN padding-bottom propio (mismo motivo que .post-page--no-top-gap:last-child en single-project.css) y el contenido quedaría pegado directo contra el footer. */ .department-section:last-child, #department-about:last-child { padding-bottom: 5rem; } @media (width < 80rem) { .department-section:last-child, #department-about:last-child { padding-bottom: 3.5rem; } } /* ---- Links largos pegados tal cual en el post (URLs de Zoom/Drive, ej. "Enlace: https://...") — pedido explícito 2026-07-29: se salían del ancho de la columna en vez de wrappear/recortarse. Recorte a 1 sola línea con ellipsis (no wrap): mismo criterio que .resource-card__title (archive-resource.css) para texto largo impredecible. Escenario acá SOLO (#department-about, no single-project.php/single-story.php: esos no tienen este problema reportado todavía). */ #department-about .post-content a { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; } }