/* ================================================================= about-iad.css — Página "About IAD" (about-iad.php, Figma 25-AboutIAD-Presidency-Desktop, node-id=4508-16848 + 4508-17335/4508-17371/4508-17770/4508-17839, archivo BdUd1g6K6cuVm4036Z5p6p). Breakpoint estándar 80rem (§12). ================================================================= */ @layer views { .about-iad { overflow: hidden; } /* DIA DS/Heading Sections/H2 (Noto Serif ExtraCondensed ExtraBold 50/54) — mismo valor literal que .res-card__title-display (home-resources.css), CLONADO acá a propósito (criterio "un archivo por vista" ya establecido para specs compartidas entre vistas distintas). Reusado en las 4 secciones de esta página (Comunidad/Liderazgo/Estructura/Departamentos). */ .about-iad__section-title { margin: 0; font-family: var(--font-serif); font-stretch: 62.5%; /* ExtraCondensed */ font-weight: 800; /* ExtraBold */ font-size: clamp(1.75rem, 1.3rem + 2vw, 3.125rem); /* hasta 50px desktop */ line-height: 1.08; letter-spacing: .4px; color: var(--dia-color-text-primary, #121212); text-align: center; } .about-iad section { padding-block: clamp(3rem, 2rem + 4vw, 7.5rem); } /* ---- Hero: foto full-bleed + blur/grano/degradado (misma combinación que .story-card__glass/ __gradient de home-stories.css, clonada a este tamaño — ver comentario del template). ---- */ .about-hero { position: relative; min-height: 32rem; display: flex; align-items: center; justify-content: center; padding: var(--space-xl) var(--space-m); background: var(--about-hero-bg) center / cover no-repeat, var(--dia-color-text-primary, #121212); isolation: isolate; } .about-hero__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, .75) 65%, rgba(0, 0, 0, .92) 100%); opacity: .3; } .about-hero__glass { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); } .about-hero__glass::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 231' preserveAspectRatio='none'%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 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1440' height='231' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E"); background-size: 100% 100%; } .about-hero__inner { position: relative; z-index: 1; max-width: 36.5rem; text-align: center; } .about-hero__title, .about-hero__desc { color: var(--dia-color-text-inverse, #fff); } /* ---- DIA en cifras: párrafo intro + grid (Comunidad text | Iglesias | Países | imagen | Uniones) ---- */ .about-stats { position: relative; text-align: center; } /* padding-top fijo 80px SOLO en desktop (pedido explícito, distinto del clamp genérico de `.about-iad section` de arriba, que da más de 80px ahí). En mobile/tablet se deja el clamp genérico heredado de `.about-iad section` (no hardcodear acá). Necesita `section.about-stats` + min-width para igualar/superar la especificidad de `.about-iad section` dentro de este breakpoint únicamente. padding-bottom SÍ sigue la convención completa 120/80/48 (desktop/tablet/mobile) ya usada en .project-grid de archive-project.css — misma receta, 3 breakpoints fijos en vez de clamp. */ @media (width >= 80rem) { section.about-stats { padding-top: 5rem; padding-bottom: 7.5rem; } } @media (48rem <= width < 80rem) { section.about-stats { padding-bottom: 5rem; } } @media (width < 48rem) { section.about-stats { padding-bottom: 3rem; } } /* Fondo suave con 3 elipses difuminadas + grano — mismo criterio de "decoración de fondo sutil" que el resto del sitio (drop-shadow/blur), simplificado acá a un radial-gradient plano en vez de clonar 3 elipses SVG: la versión del Figma es tan sutil (opacity .32 mix-blend-lighten) que un degradado equivalente es indistinguible a simple vista y mucho más liviano. */ /* Valores literales del diseñador (Figma), reemplaza la aproximación anterior. */ .about-stats__bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(123.63deg, rgba(184, 199, 194, .15) 0%, rgba(255, 255, 255, .5) 41.14%), linear-gradient(180deg, rgba(255, 255, 255, .2) 44.62%, rgba(182, 189, 187, .06) 100%), #ffffff; box-shadow: inset 0 -26px 250px rgba(182, 189, 187, .25); } .about-stats__intro { max-width: 36.5rem; /* margin-bottom = mismo valor que el padding-top de .about-stats en cada breakpoint (clamp genérico de `.about-iad section` en mobile/tablet, 5rem fijo en desktop más abajo), para que la distancia arriba del párrafo y abajo del párrafo se vea idéntica. */ margin: 0 auto clamp(3rem, 2rem + 4vw, 7.5rem); padding-inline: var(--space-m); font-size: clamp(1rem, .875rem + .5vw, 1.25rem); line-height: 1.6; color: var(--dia-color-text-secondary, #767778); } @media (width >= 80rem) { .about-stats__intro { margin-bottom: 5rem; } } .about-stats__intro p { margin: 0; } /* wpautop envuelve el textarea en

, ver about-iad.php */ /* Grid de 3 columnas × 2 filas vía grid-template-areas — mapeado literal de las coordenadas del Figma (Comunidad/Iglesias/Países en la 1a fila, Imagen ocupando 2 columnas + Uniones en la 2a): con áreas nombradas el orden real del DOM (texto → 3 stats en orden Iglesias/Países/ Uniones → imagen, más simple de mantener/traducir) no tiene que coincidir con el layout visual, a diferencia de depender de la posición en el grid-auto-flow. */ .about-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "community iglesias paises" "image image uniones"; gap: 30px; max-width: var(--container); margin-inline: auto; padding-inline: clamp(var(--space-m), 6vw, 7.5rem); text-align: left; } .about-stats__community { grid-area: community; display: flex; flex-direction: column; align-items: flex-start; } .about-stat--cream { grid-area: iglesias; } .about-stat--blue { grid-area: paises; } .about-stat--green { grid-area: uniones; } .about-stats__image { grid-area: image; } .about-stats__eyebrow { color: var(--dia-color-text-primary, #121212); text-align: left; } .about-stats__title { text-align: left; margin-block: var(--space-s) var(--space-xs); } .about-stats__community-desc { color: var(--dia-color-text-secondary, #767778); line-height: 1.6; } .about-stat { display: flex; flex-direction: column; gap: var(--space-s); justify-content: center; padding: var(--space-l) var(--space-m); border-radius: 12px; } .about-stat svg { width: 32px; height: 32px; } /* El ícono 'building' (Uniones/verde) es nativo a viewBox 16x16 (mismo glifo reusado a 16px en el acordeón de Estructura, ver inc/helpers.php) — acá se fuerza a 32px (2x su tamaño nativo) igual que 'church'/'globe', que SÍ son nativos a 32x32. Al escalar 2x un SVG completo el trazo escala con él, así que este ícono se veía con el doble de grosor real (2.4px vs. 1.2px de los otros dos) aunque los 3 comparten el mismo stroke-width="1.2" en el markup. El stroke-width="1.2" vive en cada , no en el — hay que apuntar directo a los path: la herencia desde el NO pisa el atributo propio del hijo (solo se usa como fallback cuando el hijo no tiene valor especificado, y acá sí lo tiene). */ .about-stat--green svg path { stroke-width: .6; } /* Color del stroke por spec Figma — DISTINTO del color de texto (número/label) de cada card, que sigue heredando el `color` de .about-stat--cream/--blue de abajo. Se pone en el (no en cada ) porque los path usan stroke="currentColor" y heredan `color` del ancestro más cercano que lo declare. */ .about-stat--cream svg { color: #97989a; } .about-stat--blue svg { color: #537397; } .about-stat__number { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.17; letter-spacing: -2px; } .about-stat__label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .about-stat--cream { background: #f5f5f1; border: 1px solid #e5e5e5; color: var(--dia-color-text-primary, #121212); } .about-stat--blue { background: #a7b7ca; color: #1d3652; } .about-stat--green { background: #aecbd1; color: #1f4249; } /* Sombra "glass" sutil de .story-card:hover (home-stories.css), reusada acá como estado NORMAL (no hover). border-radius+overflow:hidden viven en .about-stats__image-inner (abajo), NO acá: §12.2 de la arquitectura — overflow:hidden y box-shadow en el MISMO elemento recortan la propia sombra que debería sobresalir. */ .about-stats__image { /* SIN align-self: se deja el stretch default de grid a propósito — la fila comparte alto con .about-stat--green/Uniones, y así la foto SIEMPRE iguala esa altura (sin importar el ancho de viewport) en vez de quedar desalineada en anchos intermedios. La foto se recorta (object-fit: cover en .about-stats__image img) a lo que sea que mida esa fila — por eso no hace falta un aspect-ratio fijo, la proporción ya es fluida por diseño. */ position: relative; border-radius: 12px; box-shadow: 0 44px 12px 0 rgba(0, 0, 0, 0), 0 28px 11px 0 rgba(0, 0, 0, .02), 0 16px 9px 0 rgba(0, 0, 0, .05), 0 7px 7px 0 rgba(0, 0, 0, .09), 0 2px 4px 0 rgba(0, 0, 0, .1); } .about-stats__image-inner { position: relative; height: 100%; border-radius: inherit; overflow: hidden; } .about-stats__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Blur + grano SOLAMENTE (sin degradado) — pedido explícito, mismo par ::before(blur+mask)/ ::after(grano) que .dept-card__glass. Sin aspect-ratio fijo (removido a pedido, para que la imagen fluya con su proporción natural) — la altura real la da el stretch de grid (fila compartida con .about-stat--green/Uniones), la foto se recorta a lo que mida esa fila en cada ancho; ambos pseudo-elementos siguen anclados al 40% inferior vía `height: 40%` relativo a esa altura. */ .about-stats__image-inner::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); } .about-stats__image-inner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 790 116' preserveAspectRatio='none'%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 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='790' height='116' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E"); background-size: 100% 100%; -webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); } /* Tablet (48-64rem): las 3 stat cards + la foto pasan a 2 columnas de 50% ("2 arriba y 2 abajo": Iglesias/Países arriba, Foto/Uniones abajo — mismo agrupamiento del Figma desktop, donde Foto+Uniones ya comparten la 2a fila) — Comunidad se queda full-width arriba de todo, es texto, no una card. Por debajo de 48rem (mobile real) se apila todo en 1 columna, ver media query siguiente. */ @media (48rem <= width < 64rem) { .about-stats__grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "community community" "iglesias paises" "image uniones"; } } @media (width < 48rem) { .about-stats__grid { grid-template-columns: 1fr; grid-template-areas: "community" "iglesias" "paises" "image" "uniones"; } } /* ---- Liderazgo: tabs (NO sticky, pedido explícito) + equipo + misión/visión/valores ---- */ .about-leadership { background: #ffffff; text-align: center; } /* padding-block propio (pedido explícito, distinto del clamp genérico de `.about-iad section`) — misma convención 120/80/48 (desktop/tablet/mobile) que .about-stats de arriba y .project-grid de archive-project.css. Necesita `section.about-leadership` para igualar la especificidad de `.about-iad section` (clase+etiqueta). */ @media (width >= 80rem) { section.about-leadership { padding-block: 7.5rem; } } @media (48rem <= width < 80rem) { section.about-leadership { padding-block: 5rem; } } @media (width < 48rem) { section.about-leadership { padding-block: 3rem; } } /* padding-bottom (no margin-bottom): mismo clamp que .about-leadership__panel padding-top de abajo (llega a 3rem/48px en desktop, escala a 2rem/32px en mobile) — mismo criterio en ambos lados del bloque de tabs. */ .about-leadership__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); } .about-leadership__eyebrow { color: var(--dia-color-text-secondary, #767778); } .about-leadership__tabs { display: flex; gap: 30px; justify-content: center; border-bottom: 1px solid #e5e5e5; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: var(--container); margin-inline: auto; padding-inline: 0; } .about-leadership__tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-m); padding-block: var(--space-m); background: none; border: none; border-bottom: 2px solid transparent; color: var(--dia-color-text-secondary, #767778); } .about-leadership__tab-row { display: flex; align-items: center; gap: var(--space-s); } .about-leadership__tab-row span { font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .about-leadership__tab svg { width: 24px; height: 24px; flex-shrink: 0; } .about-leadership__tab.is-active { border-color: var(--dia-color-brand-secondary, #3e8391); color: var(--dia-color-brand-secondary, #3e8391); } .about-leadership__panel { max-width: 49.375rem; /* 790px */ margin-inline: auto; padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-inline: var(--space-m); text-align: left; } .about-leadership__desc { font-size: clamp(1rem, .875rem + .5vw, 1.25rem); line-height: 1.6; color: var(--dia-color-text-primary, #121212); } .about-leadership__desc p:first-child { margin-top: 0; } .about-leadership__desc p:last-child { margin-bottom: 0; } .about-team { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); } .about-team__lead { display: flex; align-items: center; gap: var(--space-s); } .about-team__avatar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 64px; overflow: hidden; border: 1px solid #fff; background: linear-gradient(311deg, rgba(45, 84, 128, .70) 14.44%, rgba(75, 137, 152, 0) 61.53%), linear-gradient(49deg, #5A94A0 50%, #83ABB6 69.4%, #A1BBC6 83.46%); color: #fff; text-align: center; font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 20px; /* 100% */ letter-spacing: 1px; text-transform: uppercase; } .about-team__avatar--lg { width: 88px; height: 88px; } .about-team__avatar--sm { width: 56px; height: 56px; } .about-team__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-team__lead-info, .about-team__member-info { display: flex; flex-direction: column; gap: 4px; } .about-team__lead-info { max-width: 286px; } .about-team__name { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.33; letter-spacing: -.5px; color: var(--dia-color-text-primary, #121212); } .about-team__role { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-secondary, #767778); } .about-team__name--sm { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); } .about-team__role--sm { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-secondary, #767778); } .about-team__divider { border: none; border-top: 1px solid #e5e5e5; margin: var(--space-m) 0; } .about-team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 30px; } .about-team__member { display: flex; align-items: flex-start; gap: var(--space-s); } /* Línea gris arriba de la sección de bloques extra (pedido explícito 2026-07-30) — 32px de padding a cada lado de la línea: margin-top (arriba, hasta el team grid) y padding-top (abajo, hasta el primer heading) son iguales a propósito. gap:2rem entre bloques por el mismo criterio de simetría 32/32. */ .about-mission { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e5e5; } .about-mission__heading { margin: 0 0 var(--space-m); font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.33; letter-spacing: -.5px; color: var(--dia-color-text-primary, #121212); } .about-mission__body { font-size: clamp(1rem, .875rem + .5vw, 1.25rem); line-height: 1.6; color: var(--dia-color-text-primary, #121212); } .about-mission__body p:first-child { margin-top: 0; } .about-mission__body p:last-child { margin-bottom: 0; } /* Treasury (2026-07-29): grid de miembros por bloque extra, mismo tamaño/spacing que .about-team__grid/.about-team__member de arriba — reusado, no duplicado. */ .about-mission__members { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 30px; } .about-mission__group + .about-mission__group { border-top: 1px solid #e5e5e5; padding-top: 2rem; } /* 48rem-64rem (tablet): fila de tabs con wrap, solo ícono (sin label, sobra espacio pero no tanto como para el label completo) — <48rem pasa a dropdown, ver más abajo. */ @media (48rem <= width < 64rem) { .about-leadership__tabs { flex-wrap: wrap; } .about-leadership__tab-row span { display: none; } } @media (width < 64rem) { .about-team__grid, .about-mission__members { grid-template-columns: 1fr; } } /* ---- <48rem: la fila de tabs se convierte en un dropdown/select (pedido explícito del usuario 2026-07-29) — MISMOS estilos ya reusados en .department-nav__toggle/__inner (single-department.css/single-department.php), que a su vez clonan .resource-filter-dropdown (filter-bar-resources.php/archive-resource.css). Alpine, no vanilla: este componente YA tenía `x-data`/`office` para las tabs (a diferencia de department-nav.js) — `open`/`labels` se agregaron al MISMO x-data en vez de mezclar 2 mecanismos (ver about-iad.php). */ .about-leadership__toggle { display: none; } @media (width < 48rem) { /* .about-leadership__nav (NO .about-leadership, la sección completa) — ver el comentario grande en about-iad.php sobre el bug real de "el panel aparecía hasta el fondo de la página": el containing block del position:absolute del panel debe ser un wrapper del alto real del toggle, no la sección entera (que incluye el contenido/equipo/misión de abajo). */ .about-leadership__nav { position: relative; /* padding-inline PROPIO del wrapper (no de .about-leadership) — pedido explícito 2026-07-29 ("a todo lo ancho"): con margin-inline en el toggle (intento anterior) el botón no llenaba el ancho completo del wrapper. Al vivir el padding acá (no en .about-leadership, la sección completa), .about-leadership__panel/.about-team/ .about-mission (hermanos AFUERA de este wrapper) no duplican el gutter. */ padding-inline: var(--space-m); } .about-leadership__tabs { display: none; /* el toggle de abajo lo reemplaza; .is-open lo muestra como panel */ } .about-leadership__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); } .about-leadership__toggle-label { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } .about-leadership__toggle-chevron { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(90deg); width: 16px; height: 16px; pointer-events: none; transition: transform .15s ease; } .about-leadership__toggle-chevron svg { width: 100%; height: 100%; } .about-leadership.is-open .about-leadership__toggle-chevron { transform: translateY(-50%) rotate(-90deg); } .about-leadership.is-open .about-leadership__tabs { display: flex; flex-direction: column; position: absolute; top: calc(100% + .5rem); /* var(--space-m), NO 0: el containing block de un position:absolute es el PADDING-BOX del ancestro posicionado (.about-leadership__nav, que ahora tiene padding-inline propio) — 0 quedaría al ras del borde EXTERIOR del padding, más ancho que el toggle real. */ left: var(--space-m); right: var(--space-m); 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); -webkit-backdrop-filter: none; backdrop-filter: none; } .about-leadership.is-open .about-leadership__tab { flex: none; flex-direction: row; 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); } .about-leadership.is-open .about-leadership__tab svg { display: none; } /* solo texto, mismo criterio que .department-nav__link */ /* .about-leadership__tab-row span (NO .about-leadership__tab) es quien REALMENTE trae text-transform:uppercase (regla base, línea ~301) — el text-transform:none de arriba vive en el ) alineados a la baseline del texto, no al centro de su caja. */ .about-accordion__toggle > span { display: flex; align-items: center; justify-content: center; } .about-accordion__toggle svg { width: 16px; height: 16px; display: block; } .about-accordion__head:hover .about-accordion__toggle { border-color: transparent; background: var(--dia-btn-gray-gradient); box-shadow: var(--dia-btn-gray-shadow); } /* grid-template-rows 0fr → 1fr: misma técnica de .event-row__body-wrap (archive-event.css). */ .about-accordion__body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .about-accordion__body-wrap--open { grid-template-rows: 1fr; } /* Cuando se cambia de un ítem a OTRO (no al cerrar el mismo con un 2do click), el que se cierra colapsa sin animación — evita que 2 alturas cambien a la vez (300ms) y desplacen el scroll del usuario lejos del encabezado que acaba de abrir. Ver `toggle()` en about-iad.php: `switching` solo es true en ese caso puntual. */ .about-accordion__body-wrap--instant { transition: none; } .about-accordion__body { min-height: 0; overflow: hidden; } .about-accordion__body > * { padding-bottom: var(--space-l); } /* CSS columns (llena de arriba hacia abajo por columna, como el Figma) en vez de flex-wrap (que llenaba por fila, izquierda a derecha) — reemplaza también la lógica manual de reparto en PHP que tenía el legacy (about-iad.php viejo, $num_col/$inst_por_columna). */ .about-countries { column-count: 4; column-gap: 30px; } .about-countries__item { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: 16px; line-height: 1.5; color: var(--dia-color-text-primary, #121212); break-inside: avoid; margin-bottom: var(--space-m); } /* margin-top compensa el "leading" del texto (line-height 1.5 sobre 16px = 24px de línea, 8px de espacio extra arriba+abajo de las letras reales) — con align-items:flex-start la bandera (sin leading propio, es un ) queda pegada al borde superior de la caja, mientras el texto arranca ~4px más abajo por ese colchón. Sin este ajuste, flex-start deja la bandera visualmente MÁS ARRIBA que el borde superior real de las letras, no alineada con él. */ .about-countries__flag { width: 24px; height: 14px; margin-top: 5px; object-fit: cover; flex-shrink: 0; border-radius: 2px; } @media (width < 64rem) { .about-countries { column-count: 2; } } @media (width < 32rem) { .about-countries { column-count: 1; } } /* padding-bottom: mismo clamp "48px desktop, proporcional abajo" ya usado en .about-leadership__head/__panel y .about-mission de acá arriba. */ .about-unions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m) 30px; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); } .about-unions--institutions { grid-template-columns: repeat(3, 1fr); } .about-unions__acronym { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); } .about-unions__name { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--dia-color-text-primary, #121212); } .about-unions__name--link { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--dia-color-brand-secondary, #3e8391); font-weight: 600; text-decoration: none; } .about-unions__name--link:hover { text-decoration: underline; } .about-unions__name--link svg { width: 16px; height: 16px; } /* display:flex (no inline-flex) + width:fit-content + margin-inline:auto para poder centrarlo como bloque dentro de .about-unions__inner (inline-flex no responde a margin:auto). */ .about-unions__map-cta { display: flex; width: fit-content; align-items: center; gap: var(--space-s); margin-inline: auto; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); padding: 17px 24px; border: 1px solid var(--dia-color-border-strong, #232323); border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); text-decoration: none; } .about-unions__map-cta:hover { background: var(--dia-btn-gray-gradient); box-shadow: var(--dia-btn-gray-shadow); } .about-unions__map-cta svg { width: 16px; height: 16px; } @media (width < 64rem) { .about-unions { grid-template-columns: repeat(2, 1fr); } } @media (width < 40rem) { .about-unions { grid-template-columns: 1fr; } } /* ---- Departamentos: grid de card-department.php ---- */ /* padding-block propio (pedido explícito, distinto del clamp genérico de `.about-iad section`) — misma convención 120/80/48 (desktop/tablet/mobile) que .about-stats/.about-leadership de acá arriba y .project-grid (archive-project.css). Necesita `section.about-departments` para igualar la especificidad de `.about-iad section` (clase+etiqueta). */ @media (width >= 80rem) { section.about-departments { padding-block: 7.5rem; } } @media (48rem <= width < 80rem) { section.about-departments { padding-block: 5rem; } } @media (width < 48rem) { section.about-departments { padding-block: 3rem; } } .about-departments__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; } .about-departments__eyebrow { color: var(--dia-color-text-secondary, #767778); } .about-departments__title { max-width: 36.5rem; margin-inline: auto; } .about-departments__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 30px; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); } @media (width < 64rem) { .about-departments__grid { grid-template-columns: repeat(2, 1fr); } } @media (width < 32rem) { .about-departments__grid { grid-template-columns: 1fr; } } .dept-card { display: block; color: inherit; text-decoration: none; } .dept-card__media { position: relative; display: block; aspect-ratio: 278 / 174; border-radius: 12px; overflow: hidden; } /* Hover-zoom: mismo timing/curva que .project-card__thumb-img (archive-project.css) y el resto de las cards con imagen del sitio (.resource-card__thumb-img, .news-card__bg, etc.). */ .dept-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.22, 1, .36, 1); } .dept-card:hover .dept-card__img { transform: scale(1.06); } /* Glass = blur + grano en el tercio inferior, mismo patrón CLONADO 1:1 de .project-card__glass (archive-project.css) que .story-card__glass (home-stories.css) — ver comentario del card. */ .dept-card__glass { position: absolute; left: 0; right: 0; bottom: 0; height: 53%; pointer-events: none; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); } .dept-card__glass::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 278 92' preserveAspectRatio='none'%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 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='278' height='92' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E"); background-size: 100% 100%; } .dept-card__title { margin: var(--space-s) 0 0; font-family: var(--font-sans); font-weight: 700; font-size: 20px; line-height: 1.6; color: var(--dia-color-text-primary, #121212); } }