/* ================================================================= base.css — tokens + reset + tipografía + layout + componentes globales. Se encola SIEMPRE (inc/enqueue.php). Los componentes específicos y las vistas se cargan condicionalmente. Ver arquitectura §4. El orden de @layer se declara aquí (primer CSS cargado): gana la capa más a la derecha, independiente de la especificidad. CSS v1: plano, sin nesting nativo. @layer sí queda habilitado (§4.3). ================================================================= */ @layer reset, legacy, base, components, views, utilities; /* x-cloak por sí solo no hace nada: Alpine solo quita el atributo al inicializar, hay que ocultar manualmente mientras tanto. Sin esto, los elementos con x-show+x-cloak (ícono de cerrar del menú móvil, submenús) se ven brevemente en su estado equivocado en cada carga de página, antes de que Alpine (cargado con defer) termine de ejecutar. */ [x-cloak] { display: none !important; } /* ---- Design tokens (Custom Properties) ---- */ :root { /* Color en hex/rgba (legible y pegable directo desde Figma). Variantes a mano, sin preprocesador. */ --c-brand: #1a75d1; --c-brand-dark: #14529e; --c-ink: #21242b; --c-muted: #74798a; --c-surface: #ffffff; --c-surface-alt: #f5f6f9; --c-line: #d9dce3; /* Tipografía fluida (clamp, sin media queries) */ --font-sans: "Noto Sans", system-ui, -apple-system, sans-serif; --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); /* Espaciado y formas */ --space-xs: .5rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --radius: 12px; --measure: 65ch; --container: 1200px; /* DIA DS — tokens de marca (extraídos de Figma, nodo Header 2415:3310). Hex tal cual los entrega Figma (§4.1). */ --dia-color-text-primary: #121212; --dia-color-text-secondary: #767778; --dia-color-nav-active: #7d95b0; --dia-color-nav-active-mobile: #a7b7ca; --dia-color-border-strong: #232323; --dia-color-border-subtle: #eff1f3; --dia-color-text-inverse-muted: #cccccc; --dia-color-icon-muted: #71717b; /* DIA DS/Semantic/Brand/Primary y /Text/Inverse (Figma): ya se repetían como literal #2d5480/white en varios lugares (news.css, home-news.css) — se formalizan acá al tocarlos de nuevo en single-news.css, sin retocar los usos previos ya shippeados. */ --dia-color-brand-primary: #2d5480; /* DIA DS/Semantic/Brand/Secondary (Figma, nodo "Navigation bar" 2900:8573, single-project.css .project-nav) — faltaba declararla, se usaba solo vía el fallback de var() (funciona, pero el navegador la reporta como variable indefinida — bug real reportado por el usuario en Edge). */ --dia-color-brand-secondary: #3e8391; --dia-color-text-inverse: #fff; --dia-color-bg-subtle: #fafbfb; --dia-color-bg-page: #fff; --dia-radius-sm: 4px; --dia-radius-md: 6px; --dia-radius-lg: 12px; /* Tipografía editorial. Cargada vía Google Fonts en inc/enqueue.php (dia_enqueue): "Noto Serif" variable con eje wdth=75 (Condensed) — ver comentario ahí sobre por qué no es un nombre de familia separado. Cualquier regla que use --font-serif DEBE llevar font-stretch:75% también, si no el navegador renderiza el ancho normal (100%) por default. */ --font-serif: "Noto Serif", "Georgia", serif; /* Sombra estándar de thumbnail editorial (News/Resource/Event), tal cual el Inspect de Figma. */ --shadow-thumb: 0 356px 100px 0 rgba(0, 0, 0, 0), 0 228px 91px 0 rgba(0, 0, 0, .04), 0 128px 77px 0 rgba(0, 0, 0, .12), 0 57px 57px 0 rgba(0, 0, 0, .2), 0 14px 31px 0 rgba(0, 0, 0, .23); /* "Botón gris" (hover/activo de pills, paginación, "Clear", flechas de nav) — mismo gradiente y sombra copy-pasteados como literal en 7 archivos hasta 2026-07-13 (§12.76 de gotchas.md), consolidados acá. El border-color SÍ varía entre usos (#a7b7ca en filtros/paginación, #cdd6e1 en flechas de nav) y queda literal en cada archivo — solo el gradiente/sombra eran realmente idénticos en todos los casos. */ --dia-btn-gray-gradient: linear-gradient(180deg, #f3f5f9 0%, #eff1f4 100%); --dia-btn-gray-shadow: 0 16px 9px 0 rgba(0, 0, 0, .01), 0 8px 8px 0 rgba(0, 0, 0, .03), 0 2px 4px 0 rgba(0, 0, 0, .1); /* Proporción ÚNICA de imagen editorial (News/Resource/Event): home hero, cards y detalle comparten esta relación de aspecto para que el admin no tenga que dar de alta tamaños distintos por vista. Vertical → ajustar con --img-focal (object-position) en vez de crop. */ --ratio-article: 16 / 9; --ratio-article-compact: 8 / 5; --img-focal: 50% 50%; } @layer reset { *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, figure, ul { margin: 0; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; cursor: pointer; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } @layer base { body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; color: var(--c-ink); background: var(--c-surface); /* Contiene el truco full-bleed `left:50%;width:100vw;margin-left:-50vw` (§12.60/§12.109 de gotchas.md) usado en varios lugares del sitio (.site-header__search-bar acá mismo, mega-menu, .news-header::after, etc.): `100vw` es el ancho del viewport SIN restar la barra de scroll vertical, así que en cualquier página con scroll (la mayoría) el elemento se pasa por el ancho real de esa barra y genera un scroll horizontal nuevo — bug real reportado 2026-07-30 al abrir la caja de búsqueda del header (aparecía scroll horizontal, desaparecía al cerrarla). `.site-header__search-bar` es GLOBAL (vive en
, fuera de cualquier wrapper de página tipo .news-page/.resource-page que ya se cubrieron individualmente en §12.109) — acá en , el wrapper de TODA página, es donde corresponde este overflow-x:hidden según esa misma regla. */ overflow-x: hidden; } h1 { font-size: var(--step-3); line-height: 1.1; } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); } /* ---- Headings reutilizables por ROL, no por nivel semántico (§A.1 del PRD aplicado a CSS): el nivel de heading (h1/h2/h3) lo decide cada plantilla según su propio outline; el ESTILO visual se aplica con estas clases para no acoplar "se ve como titular grande" a "es un h1". ---- */ /* Valores literales del nodo Hero Home (Figma 2813:5914 → Heading 3, Noto Serif Condensed SemiBold). */ .heading-display { font-family: var(--font-serif); font-weight: 600; font-stretch: 75%; /* "Condensed" — eje wdth de la fuente variable, ver token --font-serif */ font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem); /* hasta 34px desktop */ line-height: 1.294; /* 44/34, igual que Figma */ margin: 0; } /* DIA DS/Heading News/H5 News (valor literal del Inspect de Figma): Noto Sans normal, SIN eje wdth — el "SemiCondensed" que sugería el JSX del MCP era impreciso. */ .heading-card { font-weight: 400; font-size: 1.125rem; line-height: 1.3333; /* 24/18 = 133.333%, igual que Figma */ margin: 0; } /* Título + descripción de hero, compartidos entre News/Projects/Resources/Events/Stories (5 archives, ver grep -rl "hero-title" *.php) — centralizado acá para que no se desincronicen entre sí (bug real: resource-hero__title tenía otro font-size/line-height/letter-spacing que los otros dos hasta 2026-07-10). margin-bottom en el título, SIN margin-top en la descripción a propósito: el spacing lo "posee" el elemento de arriba y fluye hacia abajo (evita colapso de márgenes, mismo criterio de .heading-display/.heading-card de acá arriba). Clamp de $font-size estandarizado 2026-07-21 contra .perspective-archive-header__title/__desc (archive-perspective.css) — Perspectives se había quedado con un clamp propio ligeramente distinto (min 2rem/2.4vw vs. 2.25rem/3vw acá) al no reusar esta clase compartida; ahora ambos usan la MISMA fórmula (ver también el comentario de esa clase). $hero-desc pasa de tamaño fijo 20px a un clamp también (antes no encogía nada en tablet/móvil, a diferencia del título). */ .hero-title { margin: 0 0 16px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem); /* hasta 60px desktop */ line-height: 1.167; /* 70/60 */ letter-spacing: -2px; color: var(--dia-color-text-primary, #121212); } .hero-desc { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: clamp(1rem, .875rem + .5vw, 1.25rem); /* 16px → 20px desktop */ line-height: 1.6; /* 160%, mismo ratio que el fixed 32/20 anterior */ color: var(--dia-color-text-primary, #121212); } .label-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-inverse-muted); } .label-section { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 5.12px; /* 0.32em ya resuelto a px por Figma, no 3px */ text-transform: uppercase; margin: 0; } /* DIA DS/Label/Featured section — generalizada 2026-07-13: antes redeclarada literal en home-news__eyebrow/home-resources__eyebrow/home-stories__eyebrow (decisión original de mantener cada view autocontenido), ahora también en related-news__title (single-news.css) — con 4 usos y más previstos, se promueve a rol compartido como .heading-display/.label-section de acá arriba. Color y shrink mobile estandarizados a pedido explícito del usuario: antes home-news usaba el literal #18181b y resources/stories el token (~#121212, casi el mismo negro pero no idéntico) — ahora los 3 usan #18181b. El shrink a 16px en mobile ya lo tenían News y Stories; Resources NO lo tenía (se quedaba en 24px) — se unifica el comportamiento entre los 3 a pedido explícito, aunque antes divergían. */ .label-featured-section { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: 7px; text-transform: uppercase; color: #18181b; } @media (width < 48rem) { .label-featured-section { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 5.12px; } } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); } .grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } @layer components { .btn { display: inline-block; background: var(--c-brand); color: #fff; padding: .6rem 1.2rem; border: 0; border-radius: 8px; text-decoration: none; } .btn:hover { background: var(--c-brand-dark); } .site-header { background: var(--c-surface); border-bottom: 1px solid var(--dia-color-border-subtle); } .site-header .site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); max-width: var(--container); margin-inline: auto; padding-block: var(--space-m); padding-inline: 0; } .site-header .site-header__brand { display: block; flex: 0 0 auto; line-height: 0; } .site-header .site-header__logo { height: 58px; width: auto; } .site-header .site-header__burger { display: none; background: none; border: 0; padding: 0; color: var(--dia-color-text-primary); } .site-header .site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; order: 2; } .site-header .site-header__tools { order: 3; } .site-header .site-header__mobile-search { display: none; } .site-header .menu { display: flex; align-items: center; gap: .125rem; list-style: none; padding: 0; margin: 0; } .site-header .menu a { display: inline-block; padding: .375rem .625rem; border-radius: var(--dia-radius-sm); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--dia-color-text-primary); } .site-header .menu .current-menu-item > a, .site-header .menu .current_page_item > a { color: var(--dia-color-nav-active); } .site-header .menu .menu-item-has-children { position: relative; display: flex; align-items: center; } .site-header .menu .menu-item__toggle { display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: .375rem; margin-left: .25rem; color: var(--dia-color-text-primary); flex: 0 0 auto; } /* Chevron del link "Acerca de" (mega menú, Dia_Nav_Walker) — SOLO desktop, pedido explícito 2026-07-07: criterio INVERSO a .menu-item__toggle de arriba (ese es solo mobile). Oculto acá por default; se muestra en el media query de abajo (>=64rem). display:inline-flex (no inline-block) para que los dos x-show (abierto/cerrado) se centren bien contra el texto sin depender de line-height. */ .site-header .menu .mega-menu__chevron { display: none; margin-left: 4px; vertical-align: middle; } .site-header .menu .mega-menu__chevron span { display: inline-flex; } .site-header .menu .mega-menu__chevron svg { width: 16px; height: 16px; flex-shrink: 0; } .site-header .menu .sub-menu { list-style: none; margin: 0; padding: 0; } /* Desktop: sin el botón "+" (eso es solo el acordeón mobile), el submenu abre con hover/focus-within en vez de click (en desktop touch no aplica: ese tamaño de pantalla siempre usa mouse/teclado; el panel mobile real sigue siendo accordion por click). Hover de los items (Figma 3579:13550, "recursos" en el mock): fondo #E6EAF0 con el mismo border-radius/padding que ya trae .site-header .menu a — reemplaza la línea animada bajo el item que había antes (probado, no era el tratamiento que quería el diseñador). */ /* Antes 80rem: pedido explícito de David (Figma nodes 3814:14659 @1024 / 3805:13916 @1280) — el nav horizontal "aguanta" hasta 1024px en vez de colapsar a hamburguesa en 1280. Todo lo de este bloque (hover de items, submenús, mega menú) ahora arranca en 1024px. El rango nuevo 1024–1279px que esto habilita recibe su propio ajuste de gutter/logo/selector de idioma más abajo (@media (64rem <= width < 80rem)) — >=1280px no cambia en nada (mismo contenido fijo a 1200px de siempre, decisión explícita del usuario de no reabrir ese ajuste ya afinado). */ @media (width >= 64rem) { .site-header .menu .menu-item__toggle { display: none; } .site-header .menu .mega-menu__chevron { display: inline-flex; } .site-header .menu > li > a:hover, .site-header .menu > li > a:focus-visible { background: #e6eaf0; } .site-header .menu .sub-menu { display: flex; flex-direction: column; gap: .125rem; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--c-surface); border: 1px solid var(--dia-color-border-strong); border-radius: var(--dia-radius-sm); padding: .5rem 0; z-index: 20; } .site-header .menu .sub-menu a { display: block; padding: .5rem 1rem; } /* :not(.mega-menu) — pedido explícito 2026-07-07: el mega menú de "Acerca de" ya NO abre con hover (ver Dia_Nav_Walker::start_el()), solo por click (.is-open). Sin este :not(), el panel (dia_about_mega_menu_markup(),
) sigue llevando la clase genérica `sub-menu` además de `sub-menu--mega` — esta regla lo volvía a abrir en CUALQUIER hover del
  • y lo cerraba de nuevo al sacar el mouse, aunque el click ya lo hubiera dejado abierto (bug real reportado: "aparece/desaparece con hover, con click sí se queda"). */ .site-header .menu .menu-item-has-children:not(.mega-menu):hover .sub-menu, .site-header .menu .menu-item-has-children:not(.mega-menu):focus-within .sub-menu { display: flex !important; } /* ---- Mega menú de "Acerca de" (ver Dia_Nav_Walker::start_el() en helpers.php) ---- */ /* El
  • "Acerca de" está pegado al borde derecho del nav -- si el panel se ancla a ESE
  • (position:relative por .menu-item-has-children arriba), un panel tan ancho como el de Figma queda descentrado respecto al header completo. position:static acá hace que el .sub-menu--mega absolutamente posicionado "suba" hasta el próximo ancestro con position (.site-header__inner, línea ~161). */ .site-header .menu .mega-menu { position: static; } /* z-index por encima del panel (.sub-menu--mega, z-index:20 heredado de .sub-menu) — el shift de -22px de arriba puede acercar/solapar el borde superior del panel con el propio link "Acerca de"; sin esto, un click para CERRAR (con el panel ya abierto) podía caer sobre el panel en vez del link, y no togglear (bug real reportado 2026-07-07). position relative es necesario para que z-index surta efecto acá (position:static en el
  • padre no genera contexto de apilamiento). */ .site-header .menu .mega-menu > a { position: relative; z-index: 21; } .site-header .menu .sub-menu--mega { display: none; flex-direction: unset; /* pisa el flex-direction:column de .sub-menu, acá manda grid */ /* El "containing block" de un hijo absolute es la PADDING BOX del ancestro posicionado (.site-header__inner) -- como .site-header__inner ya no tiene padding-inline (el ancho de 1200px se logra con max-width + margin-inline:auto, no con padding, ver línea ~165), left:0 (heredado de .sub-menu) cae justo donde arranca el logo. */ left: 0; /* 101% (no 100%, heredado de .sub-menu) para que se alcance a ver la línea gris (border-bottom) del header por debajo del panel, en vez de quedar tapada. -22px: pedido explícito 2026-07-07, el panel debe quedar 22px más arriba de donde caía con 101% solo. */ top: calc(101% - 22px); /* Figma (nodo 3644:14685): sin borde ni radius -- a diferencia del dropdown angosto genérico (.sub-menu de arriba), el panel ancho no lleva ninguno de los dos. */ border: 0; border-radius: 0; /* Figma (nodo 3644:14685): 3 columnas FIJAS de 380px + 2 gaps de 30px = 75rem de CONTENIDO puro. Ancho fijo (no 1fr): con 1fr las columnas se estiran para llenar el espacio disponible del grid en vez de quedarse en 380px -- es justo la queja de "las columnas muy anchas". `+ 5rem` (el padding-inline de abajo, 2.5rem×2) porque este elemento es border-box (reset global del tema) -- sin sumarlo, el padding le come espacio al grid en vez de agregarse afuera, y la cuenta original (75rem = contenido) deja de cerrar. Bug real reportado 2026-09-13: el `padding: 2rem 2.5rem` de abajo se agregó en un commit posterior (`5678524 "megamenu"`) al que fijó el width en `handoff-megamenu-desktop-2026-07-01.md` (que NO tenía padding), sin ajustar el width para compensar -- la 3ra columna quedaba renderizada por fuera del panel visible, nunca notado porque textos cortos (EN/ES) no llegaban a usar el ancho completo de su columna. Nombres de Department largos en francés sí. */ width: calc(75rem + 5rem); max-width: calc(100vw - 3rem); /* margen de seguridad, evita scroll horizontal cerca del breakpoint de 80rem */ padding: 2rem 2.5rem; gap: 0 1.875rem; /* 30px, igual al Figma -- ver handoff-megamenu-desktop-2026-07-01.md */ box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.12); border-radius: 0 0 12px 12px; } /* display se dispara SOLO por .is-open (clase que Alpine agrega/quita según el estado "sub", togglado por click en Dia_Nav_Walker::start_el() — pedido explícito 2026-07-07, antes abría con hover/mouseenter). Se sacó el ":focus-within" que había acá (pensado para teclado): el propio link "Acerca de" se queda ENFOCADO después de clickearlo (comportamiento normal del navegador, no se des-enfoca solo), así que ":focus-within" quedaba SIEMPRE true después del primer click — forzando el panel abierto para siempre sin importar "sub", un segundo click para CERRAR togglaba Alpine (el chevron sí cambiaba) pero el CSS lo mantenía visible igual. Bug real reportado 2026-07-07. Tabular hasta "Acerca de" con teclado y presionar Enter/Espacio sigue abriéndolo igual (dispara el mismo @click.prevent). */ .site-header .menu .mega-menu.is-open .sub-menu--mega { display: grid !important; grid-template-columns: repeat(3, 380px); } /* min-width:0 es necesario aunque las columnas del grid tengan ancho fijo (380px): por default un grid item no se encoge debajo de su min-content, y con white-space:nowrap en los links el min-content pasa a ser el largo del texto SIN cortar (ej. "Donaciones Planificadas y Servicios Fiduciarios" ~630px) -- sin esto el item se sale de su propia columna en vez de truncarse con ellipsis (bug real, visto en newdia.nett.mx cuando las columnas eran `1fr`). El gap lo bajé a cero manualmente.*/ .site-header .menu .mega-menu__col { display: flex; flex-direction: column; gap: 0; min-width: 0; } /* :has() (ya usado en archive-project.css/home-hero.css) para separar el ÚLTIMO link del grupo de arriba del divisor con el mismo aire que el padding-top de abajo del divisor (antes solo tenía espacio abajo, el link pegaba contra la línea) — pedido explícito 2026-07-30, sin tocar el último grupo real de la columna (no le sigue nada). */ .site-header .menu .mega-menu__group:has(+ .mega-menu__group) { padding-bottom: 1.25rem; } .site-header .menu .mega-menu__group + .mega-menu__group { padding-top: 1.25rem; border-top: 1px solid var(--dia-color-border-subtle); } .site-header .menu .mega-menu__heading { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dia-color-nav-active); } .site-header .menu .mega-menu__list { list-style: none; margin: 0; padding: 0; } /* .site-header .menu a (arriba, fuera de este bloque) trae 13px/700/uppercase/letter- spacing:2px para los links del nav principal -- acá hay que pisar TODO eso explícito, Figma (nodo 3644:14685) pide texto normal de párrafo, no el tratamiento de nav. */ .site-header .menu .mega-menu__list a { display: -webkit-box; width: 100%; /* sin esto, -webkit-box se ajusta a su contenido (como inline-block) y un texto largo en una sola línea se sale de su columna de 380px en vez de envolver — bug real reportado 2026-09-13 con nombres de Department largos en francés ("Ministères de l'Enfance et de l'Adolescence"). */ overflow: hidden; padding: .375rem 0; font-family: var(--font-sans); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; text-transform: none; /* Máximo 2 líneas, se corta con "…" solo si hiciera falta una 3ra (pedido explícito) — antes 1 sola línea (nowrap+ellipsis); un nombre de departamento largo (ej. "Donations Planifiées et Services Fiduciaires") ahora alcanza a leerse completo envuelto en 2 líneas en vez de truncarse de entrada. */ white-space: normal; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; color: inherit; text-decoration: none; } .site-header .menu .mega-menu__list a:hover { color: #767778; /* mismo patrón que .res-card__title / .news-card__title hover */ } } /* ---- Rango intermedio 1024–1279px: nav horizontal ya activo (bloque de arriba, ahora en 64rem) pero sin el ancho fijo de 1200px de siempre (ese sigue solo en >=1280px). Los 2 frames de Figma (nodes 3814:14659 @1024px, 3805:13916 @1280px) dan 2 puntos de una misma curva fluida, no valores sueltos — mismo patrón de "gutter de 2 capas" ya usado en el Hero (arquitectura §12.16, max(floor, (100vw - maxWidth)/2)): - 1024px de viewport → 32px de padding por lado → 960px de contenido (frame @1024). - 1280px de viewport → 64px de padding por lado → 1152px de contenido (frame @1280). Logo: mismo criterio, interpolación lineal 48px (frame @1024) → 58px (frame @1280, YA el tamaño actual de .site-header__logo en >=1280px, sin cambio ahí). El mega menú de "Acerca de" tiene su propio ajuste de spacing/tipografía más abajo en este mismo bloque (Figma node 3858:16304 — valores LITERALES de ese frame, no una interpolación con >=1280px). */ @media (64rem <= width < 80rem) { .site-header .site-header__inner { padding-block: 32px; padding-inline: max(32px, calc((100vw - 1152px) / 2)); } .site-header .site-header__logo--full { width: auto; height: calc(48px + (100vw - 1024px) * 0.0390625); /* (58-48)/(1280-1024) */ } /* Ícono de mundo del selector de idioma: Figma lo saca en AMBOS frames nuevos, pero el usuario decidió no tocar el de >=1280px todavía (decisión explícita) — se oculta SOLO acá. */ .site-header .lang-dropdown__toggle svg:first-child { display: none; } /* Tipografía: token real del sistema de diseño, no un escalado libre — Figma usa "DIA DS/CTA/Button Small" (11px/18/tracking:1) acá en vez de "Button Main" (13px/20/ tracking:2, el de siempre en >=1280px) para los links del nav Y el label del selector de idioma. Confirmado con el usuario tras una primera pasada que lo había descartado por error como "no tocar tipografías". */ .site-header .menu a, .site-header .lang-dropdown__toggle { font-size: 11px; line-height: 18px; letter-spacing: 1px; } /* Chevron más chico + margen más ajustado SOLO en este rango (12px, no los 16px de >=1280px): el nav ya viene justo de espacio acá (ver comentario grande más arriba sobre el gutter fluido) — el chevron nuevo del mega menú (2026-07-07) suma ancho extra al item "Acerca de" que no había antes. Recorta unos px para no forzar un salto de línea. */ .site-header .menu .mega-menu__chevron { margin-left: 2px; } .site-header .menu .mega-menu__chevron svg { width: 12px; height: 12px; } /* Mega menú "Acerca de" — spec propia de este ancho (Figma node 3858:16304), NO la misma de >=1280px (75rem/380px de columna): acá el panel completo mide 880px, columnas de 250px. Medidas del contenedor pasadas literales por el usuario. */ .site-header .menu .sub-menu--mega { width: 880px; /* left:0 (heredado de la regla base de >=1024px) alinea el panel con el borde izquierdo del header (el logo) -- ahí el panel de 1200px prácticamente llena todo el ancho, así que no se nota. Acá, con el panel fijo en 880px y el header más ancho que eso, ese mismo left:0 lo dejaba pegado a la izquierda con un hueco enorme a la derecha (bug real reportado). Centrado real respecto al header en vez de anclado al logo. */ left: 50%; transform: translateX(-50%); padding: 16px; gap: 32px; border-bottom: 1px solid var(--dia-color-border-subtle, #e5e5e5); } .site-header .menu .mega-menu.is-open .sub-menu--mega, .site-header .menu .mega-menu:focus-within .sub-menu--mega { grid-template-columns: repeat(3, 250px); } /* Bajé a 0 el gap porque estaba muy alto. */ .site-header .menu .mega-menu__col { gap: 0; } /* Mismo criterio que el bloque >=1280px de arriba: aire simétrico arriba/abajo del divisor. */ .site-header .menu .mega-menu__group:has(+ .mega-menu__group) { padding-bottom: 0.75rem; } .site-header .menu .mega-menu__group + .mega-menu__group { padding-top: 0.75rem; /* Divider con tinte azul (DIA DS/Primitive/blue/300 al 24% de opacidad), no el gris genérico de --dia-color-border-subtle que usa la versión de >=1280px — Figma explícito. */ border-top-color: rgba(125, 149, 176, .24); } /* Heading-a-lista: Figma trae 12px en la columna de "Qui sommes-nous"/"Services" y 16px en "Départements" — se usa un solo valor (16px) en vez de 2 clases nuevas por columna, la diferencia de 4px no se nota en la práctica. */ .site-header .menu .mega-menu__heading { margin-bottom: 0; font-size: 11px; font-weight: 500; line-height: 18px; letter-spacing: 1px; color: #7d95b0; } /* Links: 14px/22px (vs 16px/24px de >=1280px) — el line-clamp:2 ya es compartido con >=1280px (regla base de arriba), acá solo cambia tamaño/spacing. */ .site-header .menu .mega-menu__list a { /* 5px arriba/abajo = 10px entre 2 links consecutivos (Figma: gap:10 en un flex-column; acá se logra vía padding porque .mega-menu__list sigue siendo un
      normal, no flex). */ padding: 5px 0; font-size: 14px; line-height: 22px; } } .site-header .site-header__tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; } .site-header .icon { width: 16px; height: 16px; color: var(--dia-color-text-primary); } .site-header .lang-dropdown { position: relative; } .site-header .lang-dropdown__toggle { display: flex; align-items: center; gap: .25rem; border: 1px solid var(--dia-color-border-strong); border-radius: var(--dia-radius-sm); background: none; padding: .625rem 1rem; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--dia-color-text-primary); } /* Hover (Figma 3579:13550, "Dropdown" del selector ES): fondo DIA DS/Primitive/gray/300 (#F3F4F6) — el border-strong ya lo trae el estado default de arriba, no cambia. */ .site-header .lang-dropdown__toggle:hover, .site-header .lang-dropdown__toggle:focus-visible { background: #f3f4f6; } /* Figma 3581:14993 (Dropdown Menu abierto): radius/sombra/colores propios de este componente, distintos de los tokens que usa el resto del header (--dia-radius-sm, --dia-color-nav-active etc. son de otros componentes) — literales tal cual el Inspect. */ .site-header .lang-dropdown__menu { display: none; position: absolute; top: calc(100% + .25rem); left: 0; min-width: 100%; list-style: none; margin: 0; padding: 0; background: var(--c-surface); border: 1px solid #f7f8f9; border-radius: 6px; box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .12); z-index: 10; } .site-header .lang-dropdown.is-open .lang-dropdown__menu { display: block; } /* border-radius en las filas (no overflow:hidden en .lang-dropdown__menu, arriba, que recortaría su propio box-shadow — bug real, ver §12.2): el fondo de hover/activo de la primera/última fila igual necesita respetar la esquina redondeada del menú. */ .site-header .lang-dropdown__menu li:first-child a { border-radius: 6px 6px 0 0; } .site-header .lang-dropdown__menu li:last-child a { border-radius: 0 0 6px 6px; } .site-header .lang-dropdown__menu a { display: flex; align-items: center; justify-content: space-between; height: 44px; padding-inline: 1rem; text-decoration: none; color: var(--dia-color-text-primary); font-size: 13px; font-weight: 700; letter-spacing: 2px; } .site-header .lang-dropdown__menu a:hover { background: var(--dia-color-border-subtle); } /* Item activo: fondo #FAFBFB + texto azul de marca (#2D5480 -- DISTINTO del --dia-color-nav-active más claro que usa el nav principal, son dos azules separados en el Inspect) + palomita a la derecha (mismo SVG/color que el Inspect, inline vía data-URI). */ .site-header .lang-dropdown__menu a[aria-current] { background: #fafbfb; color: #2d5480; } .site-header .lang-dropdown__menu a[aria-current]::after { content: ''; width: 16px; height: 16px; flex-shrink: 0; 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; } .site-header .site-header__search { display: flex; align-items: center; justify-content: center; border: 1px solid var(--dia-color-border-strong); border-radius: var(--dia-radius-sm); background: none; padding: .75rem; /* Sin esto, un