.hero--empresas { background: linear-gradient(135deg, #eef3f7 0%, #ffffff 48%, #edf5f8 100%); }
.hero--institucional { background: linear-gradient(135deg, #edf8fc 0%, #ffffff 52%, #f4f8fb 100%); }
.hero--familias { background: linear-gradient(135deg, #fff4f5 0%, #ffffff 52%, #eef7fb 100%); }
.hero--core { background: linear-gradient(135deg, #f0f5f8 0%, #ffffff 52%, #f8f0f1 100%); }
.hero--content { padding-block: clamp(66px, 7vw, 98px); }
.hero--content .hero-grid { grid-template-columns: 1fr .65fr; }
.hero--content .hero-visual { min-height: 350px; }
.mini-stack { width: min(420px, 100%); display: grid; gap: 12px; transform: rotate(-2deg); }
.mini-layer { padding: 18px 22px; border-radius: 16px; color: var(--py-white); font-weight: 850; box-shadow: var(--py-shadow-sm); }
.mini-layer:nth-child(1) { background: var(--py-navy-950); transform: translateX(0); }
.mini-layer:nth-child(2) { background: var(--py-navy-800); transform: translateX(18px); }
.mini-layer:nth-child(3) { background: var(--py-sky-600); transform: translateX(36px); }
.mini-layer:nth-child(4) { background: var(--py-red-700); transform: translateX(54px); }
.logo-panel { width: min(420px,100%); padding: 44px; border-radius: 38px; background: rgba(255,255,255,.88); border: 1px solid rgba(22,47,78,.08); box-shadow: var(--py-shadow-lg); }
.logo-panel img { width: 72%; margin-inline: auto; filter: drop-shadow(0 16px 20px rgba(15,32,53,.16)); }
.actor-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.actor-chip { padding: 11px 15px; border-radius: 999px; background: var(--py-white); border: 1px solid var(--py-line); color: var(--py-navy-900); font-weight: 750; box-shadow: var(--py-shadow-sm); }
.login-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.login-card { text-align: center; padding: 26px 18px; border-radius: 18px; border: 1px solid var(--py-line); background: var(--py-white); box-shadow: var(--py-shadow-sm); }
.login-card strong { display: block; color: var(--py-navy-900); margin-top: 12px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.blog-card { overflow: hidden; padding: 0; }
.blog-card__cover { min-height: 190px; display: grid; place-items: center; background: var(--py-gradient-soft); border-bottom: 1px solid var(--py-line); }
.blog-card__cover span { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--py-white); color: var(--py-navy-900); font-weight: 900; box-shadow: var(--py-shadow-md); }
.blog-card__body { padding: 24px; display: grid; gap: 12px; }
.category-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.category-chip { padding: 9px 13px; border-radius: 999px; background: var(--py-soft); color: var(--py-navy-700); font-weight: 750; font-size: .86rem; }
.contact-channels { display: grid; gap: 14px; }
.contact-channel { padding: 18px; border-radius: 14px; border: 1px solid var(--py-line); background: var(--py-white); }
.contact-channel strong { color: var(--py-navy-900); display: block; margin-bottom: 4px; }
.style-swatch { height: 88px; border-radius: 16px; padding: 14px; display: flex; align-items: flex-end; color: white; font-weight: 900; }
.component-demo { padding: 26px; border: 1px dashed #b6c2cf; border-radius: 18px; background: #fff; }