.iaLayer-flujodigital { padding: var(--ia-space-l, 64px) 0; background: var(--ia-color-page, #ffffff); } .iaLayer-flujodigital .fd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .iaLayer-flujodigital .fd-eyebrow { font-family: var(--ia-font-body, inherit); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ia-color-primary, #EA6144); margin-bottom: 12px; } .iaLayer-flujodigital .fd-title { font-family: var(--ia-font-heading, inherit); font-size: clamp(28px,4vw,40px); font-weight: 700; color: var(--ia-color-text, #1a1a2e); margin: 0 0 12px; } .iaLayer-flujodigital .fd-subtitle { font-family: var(--ia-font-body, inherit); font-size: 16px; line-height: 1.6; color: var(--ia-color-text-soft, #5b5b6b); max-width: 640px; margin: 0 0 40px; } .iaLayer-flujodigital .fd-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } @media (max-width:900px) { .iaLayer-flujodigital .fd-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width:520px) { .iaLayer-flujodigital .fd-grid { grid-template-columns: 1fr; } } .iaLayer-flujodigital .fd-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--fd-card-bg, var(--ia-color-surface, #ffffff)); border: 1px solid var(--ia-color-border, #e7e7ee); display: flex; flex-direction: column; min-height: 220px; transition: var(--ia-interaction-transition, border-color .25s ease, box-shadow .25s ease); } .iaLayer-flujodigital .fd-card:hover { border-color: var(--ia-interaction-border-hover, #EA6144); box-shadow: var(--ia-interaction-shadow-hover, 0 8px 24px rgba(5,6,63,0.10)); } .iaLayer-flujodigital .fd-card-linkoverlay { position: absolute; inset: 0; z-index: 3; } .iaLayer-flujodigital .fd-card-media { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; } .iaLayer-flujodigital .fd-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .iaLayer-flujodigital .fd-card-media .fd-card-icon { position: absolute; bottom: 12px; left: 16px; z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--fd-icon-color, #80BEFF); } .iaLayer-flujodigital .fd-card-media .fd-card-icon svg { width: 100%; height: 100%; } .iaLayer-flujodigital .fd-card-body { position: relative; padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; z-index: 2; } .iaLayer-flujodigital .fd-card-body .fd-card-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--fd-icon-color, #80BEFF); } .iaLayer-flujodigital .fd-card-body .fd-card-icon svg { width: 100%; height: 100%; } .iaLayer-flujodigital .fd-card-title { font-family: var(--ia-font-heading, inherit); font-size: 17px; font-weight: 600; color: var(--ia-color-text, #1a1a2e); margin: 0; } .iaLayer-flujodigital .fd-card-hov { font-family: var(--ia-font-body, inherit); font-size: 13px; line-height: 1.5; color: var(--ia-color-text-soft, #5b5b6b); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; } .iaLayer-flujodigital .fd-card:hover .fd-card-hov { max-height: 100px; opacity: 1; } .iaLayer-flujodigital .fd-card--cta { background: linear-gradient(150deg, var(--fd-cta-start, #EA6144), var(--fd-cta-end, #05063F)); border-color: transparent; } .iaLayer-flujodigital .fd-card--cta .fd-card-icon { color: var(--ia-color-text-inverted, #ffffff); } .iaLayer-flujodigital .fd-card--cta .fd-card-title { color: var(--ia-color-text-inverted, #ffffff); } .iaLayer-flujodigital .fd-card--cta .fd-card-hov { color: var(--ia-color-text-inverted-soft, rgba(255,255,255,0.8)); max-height: 100px; opacity: 1; } .iaLayer-flujodigital .fd-all { text-align: center; margin-top: 40px; } .iaLayer-flujodigital .fd-all-btn.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--ia-radius-button, 8px); border: 2px solid var(--ia-color-primary, #EA6144); color: var(--ia-color-primary, #EA6144); font-weight: 600; text-decoration: none; transition: background .25s ease, color .25s ease; } .iaLayer-flujodigital .fd-all-btn.btn:hover { background: var(--ia-color-primary, #EA6144); color: var(--ia-color-text-inverted, #ffffff); }