/* ================================================================= about-sda.css — Página "Acerca de la IASD" (about-sda.php, Figma 28-AboutASD-Church-Desktop, node-id=4508-18060, archivo BdUd1g6K6cuVm4036Z5p6p). Breakpoint estándar 80rem (§12). ================================================================= */ @layer views { .about-sda { overflow: hidden; } /* DIA DS/Heading Sections/H2 — mismo valor literal que .about-iad__section-title (about-iad.css), CLONADO acá a propósito (criterio "un archivo por vista"). Centrado por default (Manual), --left para Historia/Declaraciones/Beliefs, --inverse para texto blanco sobre el fondo teal de Declaraciones. */ .about-sda__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-sda__section-title--left { text-align: left; } .about-sda__section-title--inverse { color: var(--dia-color-text-inverse, #fff); } /* 120/80/48 (desktop/tablet/mobile) — misma convención ya usada en about-iad.css (.about-stats/.about-leadership/.about-departments), TODAS las secciones de esta página la comparten (a diferencia de about-iad.css, que sí tenía valores distintos por sección, acá no hace falta repetir la regla por selector). */ @media (width >= 80rem) { .about-sda section { padding-block: 7.5rem; } } @media (48rem <= width < 80rem) { .about-sda section { padding-block: 5rem; } } @media (width < 48rem) { .about-sda section { padding-block: 3rem; } } /* Historia: padding-bottom 200px en desktop (spec Figma, asimétrico vs. el padding-top 120px genérico que ya cubre el `padding-block` de arriba) — proporcional en tablet/mobile, misma razón (~1.67×) que la convención 120/80/48 ya usada en el resto del sitio (about-iad.css). */ @media (width >= 80rem) { .about-sda .about-sda-intro--history { padding-bottom: 12.5rem; } } @media (48rem <= width < 80rem) { .about-sda .about-sda-intro--history { padding-bottom: 8.3125rem; } } @media (width < 48rem) { .about-sda .about-sda-intro--history { padding-bottom: 5rem; } } /* CTA outline compartido (dia_about_sda_cta() en about-sda.php) — mismo spec Figma "Button Main" (border 1px, 24/17 padding, texto 13px bold uppercase tracking 2px + ícono flecha). */ .about-sda-cta { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 17px 24px; border: 1px solid var(--dia-color-border-strong, #232323); border-radius: 4px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dia-color-text-primary, #121212); text-decoration: none; white-space: nowrap; } .about-sda-cta:hover { background: var(--dia-btn-gray-gradient); box-shadow: var(--dia-btn-gray-shadow); } .about-sda-cta svg { width: 16px; height: 16px; flex-shrink: 0; } .about-sda-cta--inverse { border-color: var(--dia-color-text-inverse, #fff); color: var(--dia-color-text-inverse, #fff); } .about-sda-cta--inverse:hover { background: rgba(255, 255, 255, .12); box-shadow: none; } /* ---- Hero: foto full-bleed + blur/grano/degradado — CLONADO 1:1 de .about-hero (about-iad.css), mismo criterio "un archivo por vista" documentado ahí. ---- */ .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); } /* ---- Historia / Beliefs: texto + imagen, mismo layout en las 2 secciones (Figma "Intro", 4508:18070 y 4508:18124 — el texto va SIEMPRE a la izquierda, sin espejar). ---- */ .about-sda-intro { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: clamp(2rem, 1rem + 5vw, 5rem); max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); } /* SIN `gap` acá — mismo criterio/mismo bug que .about-sda-statements__text (ver ese comentario): spacing 16/24px vía márgenes, no gap+margin sumándose. */ .about-sda-intro__text { flex: 1 1 20rem; max-width: 30.25rem; display: flex; flex-direction: column; align-items: flex-start; } .about-sda-intro__eyebrow { color: var(--dia-color-text-secondary, #767778); margin-bottom: var(--space-s); } /* 32px en desktop (spec Figma, "Container" 4508:18071/18125: gap-[32px] entre título/párrafo/ botón — DISTINTO de los 24px de Statements) — proporcional en mobile, mismo criterio de clamp fluido ya usado en about-iad.css para spacing de texto de esta escala (24px→32px, p.ej. .about-leadership__head/__panel, ahí escalado un peldaño arriba a 32px→48px). */ .about-sda-intro__text .about-sda__section-title { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2rem); } .about-sda-intro__body { font-size: clamp(1rem, .875rem + .5vw, 1.25rem); line-height: 1.6; color: var(--dia-color-text-secondary, #767778); margin-bottom: clamp(1.5rem, 1rem + 2vw, 2rem); } .about-sda-intro__body p:first-child { margin-top: 0; } .about-sda-intro__body p:last-child { margin-bottom: 0; } .about-sda-single-image { flex: 1 1 24rem; max-width: 36.5625rem; /* 585px */ aspect-ratio: 585 / 568; border-radius: 12px; overflow: hidden; } .about-sda-single-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Declaraciones (Block-Comunion): full-bleed teal + blobs difuminados + grano, card flotante con foto placeholder + ícono de play decorativo. ---- */ .about-sda-statements { position: relative; /* La card se asoma por arriba de la sección (margin-top negativo, ver .about-sda-card más abajo) — MISMA técnica que .home-projects__card (home-projects.css): overflow:visible acá, el fondo recorta aparte en su propia capa (.about-sda-statements__bg, overflow:hidden propio), así el overflow de la sección no le corta la card. */ overflow: visible; /* padding-block: NO se declara acá — `.about-sda section` (arriba, 120/80/48) ya la cubre con más especificidad (clase+tag le gana a clase sola); declararla acá era código muerto. */ } .about-sda-statements__row { display: flex; flex-direction: column; align-items: flex-start; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); } .about-sda-statements__bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; background: #2f6470; } /* Foto real (`about_sda_statements_bg`) blureada — oversized (inset -15%) para que el blur no deje un halo transparente en los bordes del recorte, mismo problema/solución que cualquier blur "bleed" (el Figma original tampoco recorta la elipse justo al borde de la sección). */ .about-sda-statements__bg-photo { position: absolute; inset: -15%; background: var(--about-sda-statements-bg) center / cover no-repeat, #2f6470; filter: blur(30px); } /* Tinte teal + grano encima de la foto — mismo criterio que .about-stats__bg (about-iad.css): valores planos en vez de clonar las elipses de color del Figma, visualmente equivalente. */ .about-sda-statements__bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(47, 100, 112, .55) 0%, rgba(31, 66, 73, .65) 100%); mix-blend-mode: multiply; } .about-sda-statements__bg::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .32; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 686' 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='686' fill='black' opacity='0.4' filter='url(%23grain)'/%3E%3C/svg%3E"); background-size: 100% 100%; } /* SIN `gap` acá a propósito — el spacing entre eyebrow/título/body/CTA NO es uniforme (16/24/24, spec del usuario), así que se controla 100% con márgenes en vez de gap+margin sumándose (bug real: con gap:var(--space-l) el margin-bottom del eyebrow se sumaba a los 40px del gap, dejando 56px en vez de los 16px reales). */ .about-sda-statements__text { position: relative; max-width: 36.5625rem; /* 585px */ width: 100%; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; } /* >=64rem: card + texto en fila, mismo `.about-sda-statements__row` centrado — el texto arranca 50px exactos a la derecha de la card (spec del usuario), ya no necesita calcular el borde izquierdo a mano (--about-sda-edge, técnica anterior): al vivir los dos dentro del mismo .container centrado, un simple margin-left alcanza. */ @media (width >= 64rem) { .about-sda-statements__row { flex-direction: row; align-items: flex-start; } /* margin-inline:0 en la card: en fila (no columna), el `auto` de la izq/der del margin base (pensado para centrar en mobile apilado) absorbería TODO el espacio libre como margen automático de flex, empujando el texto lejos en vez de dejarlo a 50px reales. */ .about-sda-card { margin-inline: 0; } .about-sda-statements__text { margin-inline: 0; margin-left: 50px; } } .about-sda-statements__eyebrow { color: var(--dia-color-text-inverse, #fff); margin-bottom: var(--space-s); } .about-sda-statements__text .about-sda__section-title { margin-bottom: var(--space-m); } .about-sda-statements__body { font-size: clamp(1rem, .875rem + .5vw, 1.25rem); line-height: 1.6; color: var(--dia-color-text-inverse, #fff); margin-bottom: var(--space-m); } .about-sda-statements__body p:first-child { margin-top: 0; } .about-sda-statements__body p:last-child { margin-bottom: 0; } /* Card "sobresaliendo" arriba de la sección — flujo normal + margin-top NEGATIVO (spec Figma: 78px por ENCIMA del borde de la sección en desktop), MISMA técnica que .home-projects__card (home-projects.css) en vez de position:absolute (ver comentario del template/de .about-sda-statements arriba). Centrada en mobile, alineada arriba dentro de la fila en >=64rem. OJO — a diferencia de .home-projects (fila centrada verticalmente en una sección de alto fijo), acá la fila arranca DESPUÉS del padding-top de la sección (120/80/48, ver `.about-sda section` arriba); el margin-top tiene que restar TAMBIÉN ese padding, si no la card nunca llega a asomarse por el borde real (bug real: con solo -78px la card se quedaba adentro en desktop, 120px de padding > 78px de offset). 120+78=198px / 80+78=158px. En mobile el "poke" se REDUCE a 32px (no los 78px del Figma desktop, sin spec propia acá): con 78px casi chocaba contra la imagen de Historia arriba (su padding-bottom ahí es 80px, dejaba solo 2px de aire — bug real reportado). 48+32=80px, deja 48px de aire real. */ .about-sda-card { position: relative; flex-shrink: 0; display: block; width: 100%; max-width: 24.625rem; /* 394px */ aspect-ratio: 394 / 575; margin: -5rem auto clamp(2rem, 4vw, 3rem); /* mobile: -(48+32)px */ color: inherit; text-decoration: none; } @media (48rem <= width < 80rem) { .about-sda-card { margin-top: -9.875rem; } /* -(80+78)px */ } @media (width >= 80rem) { .about-sda-card { margin-top: -12.375rem; } /* -(120+78)px */ } .about-sda-card__media { position: relative; height: 100%; border-radius: 12px; overflow: hidden; } .about-sda-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.22, 1, .36, 1); /* mismo timing que .dept-card__img (about-iad.css) */ } .about-sda-card:hover .about-sda-card__media img { transform: scale(1.06); } /* Glass = blur + grano en el tercio inferior — mismo patrón `__glass`/`::after` que .dept-card__glass/.about-stats__image-inner (about-iad.css). Placeholder listo: cuando llegue la foto real el usuario solo reemplaza `about_sda_statements_imagen`, el filtro ya está aplicado acá. */ .about-sda-card__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-sda-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 394 259' 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='394' height='259' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E"); background-size: 100% 100%; } /* CTA circular — MISMO swap/hover que .story-card__cta (home-stories.css, Figma nodo 2367:429), pero con el bg propio de ESTA card ("ButtonCircle", Figma nodo 2329:889 — spec literal confirmada por el usuario contra el Figma, con tinte dorado, distinto del glass neutro de .story-card__cta). Esquina inferior-derecha: ahí vive .story-card__cta también, empujado por margin-inline-start:auto dentro de su footer — acá se replica con inset absoluto directo, 24px = var(--space-m), mismo margen que el resto del sitio usa para esquinas de card. */ .about-sda-card__cta { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; /* recorta el par de íconos del swap, mismo criterio que .story-card__cta */ width: 60px; height: 60px; border-radius: 80px; border: 1px solid rgba(255, 255, 255, .3); background: linear-gradient(153deg, rgba(253, 181, 0, 0) 7.6%, rgba(253, 181, 0, .24) 179.37%); box-shadow: 0 33px 9px 0 rgba(0, 0, 0, .01), 0 21px 8px 0 rgba(0, 0, 0, .1), 0 12px 7px 0 rgba(0, 0, 0, .35), 0 5px 5px 0 rgba(0, 0, 0, .6), 0 1px 3px 0 rgba(0, 0, 0, .69); color: var(--dia-color-text-inverse, #fff); } .about-sda-card__cta svg { width: 34px; height: 34px; } /* Swap de 2 íconos en hover — CLONADO 1:1 de .story-card__cta-icon (mismo timing, misma distancia 140%, ver ese comentario para la explicación completa: es una sola pieza deslizándose fuera + otra entrando, no 2 íconos distintos). */ .about-sda-card__cta-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.4, 0, .2, 1); } .about-sda-card__cta-icon--a { transform: translate(0, 0); } .about-sda-card__cta-icon--b { transform: translate(-140%, 140%); } .about-sda-card:hover .about-sda-card__cta-icon--a { transform: translate(140%, -140%); } .about-sda-card:hover .about-sda-card__cta-icon--b { transform: translate(0, 0); } /* ---- Manual de la Iglesia: texto centrado, truncado con fade-overlay + 1 CTA. ---- */ .about-sda-manual { background: #e6eaf0; text-align: center; /* Ancho real del Figma (nodo "Container" 4508:18115) — fuente única, __head/__body-wrap lo heredan de acá en vez de repetir el valor cada uno (antes __head usaba var(--container), 1200px, sin relación con los 790px reales de __body-wrap). padding-inline se SUMA a este valor (no lo resta) para que el contenido real mida los 790px exactos incluso con el colchón de seguridad en mobile — box-sizing:border-box haría que el padding se comiera esos px si el max-width fuera solo 49.375rem. */ --about-sda-manual-width: calc(49.375rem + 2 * var(--space-m)); /* 790px + padding */ } .about-sda-manual__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-width: var(--about-sda-manual-width); margin-inline: auto; padding-inline: var(--space-m); } .about-sda-manual__eyebrow { color: var(--dia-color-text-secondary, #767778); } .about-sda-manual__body-wrap { position: relative; max-width: var(--about-sda-manual-width); /* ~1.5 párrafos visibles (spec del usuario, la altura natural completa del Figma es mucho mayor) — 9 líneas × 32px (line-height 1.6 sobre los 20px de fuente desktop). */ max-height: 18rem; overflow: hidden; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; padding-inline: var(--space-m); } .about-sda-manual__body { text-align: left; font-size: clamp(1rem, .875rem + .5vw, 1.25rem); line-height: 1.6; color: var(--dia-color-text-primary, #121212); } .about-sda-manual__body p:first-child { margin-top: 0; } .about-sda-manual__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 5rem; background: linear-gradient(180deg, rgba(230, 234, 240, 0) 0%, #e6eaf0 60%); pointer-events: none; } .about-sda-manual .about-sda-cta { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } @media (width < 48rem) { .about-sda-intro { flex-direction: column; align-items: flex-start; } .about-sda-intro__text { max-width: none; } .about-sda-single-image { max-width: none; width: 100%; } } }