/* Tarjetas de aplicaciones: composición compacta y colores por área. */
main .area{margin-top:30px}
main .area-h{margin-bottom:16px;gap:12px}
main .area-h .ic{display:grid;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--c) 11%,white);color:var(--c)}
main .area-h .ic svg{width:19px;height:19px}
main .area-h h2{font-size:18px;font-weight:800;letter-spacing:-.35px}
main .area-h span{font-size:13px;font-weight:600;padding:5px 10px;border-radius:7px;background:#e7edf6;color:#4c6480}
main .area-h hr{border-top-color:#dce5f0}
main .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main a.app{min-height:174px;border:1px solid #d9e3ef;border-radius:16px;padding:23px 22px 19px;background:linear-gradient(145deg,#fff 65%,#f7faff);box-shadow:0 4px 12px #09284a05;gap:20px;overflow:hidden;isolation:isolate}
main a.app:before{display:block;left:20px;right:20px;top:0;bottom:auto;height:3px;width:auto;border-radius:0 0 4px 4px;background:var(--c);opacity:.75}
main a.app:hover,main a.app:focus-visible{border-color:color-mix(in srgb,var(--c) 45%,#dce5ef);transform:translateY(-4px);box-shadow:0 12px 26px #09284a10;background:#fff}
main a.app:focus-visible{outline:3px solid #087fc9;outline-offset:3px}
main a.app .fila{flex-direction:row;align-items:flex-start;gap:14px}
main a.app .ico{width:47px;height:47px;border-radius:13px;background:color-mix(in srgb,var(--c) 12%,white);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 17%,white);box-shadow:0 3px 8px #09284a04}
main a.app .ico svg{width:24px;height:24px;stroke-width:1.7}
main a.app .fila>div:last-child{min-width:0;padding-top:1px}
main a.app .n{font-size:16px;font-weight:800;line-height:1.35;letter-spacing:-.2px;color:#123253;overflow-wrap:anywhere}
main a.app .d{font-size:14px;color:#536c88;line-height:1.55;margin-top:6px}
main a.app .pie{gap:8px;border-top:1px solid #e5ecf5;padding-top:14px;margin-top:auto;align-items:center}
main a.app .tag{font-size:12px;font-weight:600;gap:5px;padding:5px 7px;border-radius:6px;line-height:1.4}
main a.app .tag svg{width:13px;height:13px}
main a.app .tag.pub{background:#eaf6fb;color:#18628c}
main a.app .tag.pub svg{color:#18628c}
main a.app .tag.int{background:#fff5dc;color:#87600f}
main a.app .tag.int svg{color:#87600f}
main a.app .ir{display:block;flex:none;color:#446280;font-size:12px;font-weight:800}
main a.app .ir svg{display:none}
main a.app .ir:before{content:'Abrir'}
main a.app:hover .ir{transform:none;color:var(--c)}
main .area:first-child .app:first-child{background:linear-gradient(145deg,#fff 65%,#f7faff);color:#123253;border-color:#d9e3ef}
main .area:first-child .app:first-child .ico{background:color-mix(in srgb,var(--c) 12%,white);color:var(--c)}
main .area:first-child .app:first-child .d{color:#536c88}
main .area:first-child .app:first-child .pie{border-color:#e5ecf5}
main .area:first-child .app:first-child .tag.pub{color:#18628c}
main .area:first-child .app:first-child .tag.int,main .area:first-child .app:first-child .tag.int svg{color:#87600f}
@media(min-width:1300px){main .grid{grid-template-columns:repeat(4,minmax(0,1fr))}main .grid:has(>.app:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}main .grid:has(>.app:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}main a.app{padding:22px 18px 17px;gap:18px}main a.app .fila{gap:11px}main a.app .ico{width:43px;height:43px;border-radius:12px}main a.app .ico svg{width:22px;height:22px}main a.app .tag{font-size:12px;padding:5px 6px}}
@media(min-width:1600px){main a.app{padding:25px 22px 20px;min-height:179px}main a.app .ico{width:49px;height:49px}main a.app .ico svg{width:25px;height:25px}main a.app .fila{gap:14px}main a.app .tag{font-size:13px}main .grid{gap:18px}}
@media(max-width:560px){main .grid{grid-template-columns:1fr;gap:13px}main a.app{min-height:0;padding:22px 19px 17px;gap:18px}main .area-h h2{font-size:17px}main .area-h{gap:9px}main .area-h span{font-size:12px;padding:5px 7px}main .area-h hr{margin-left:0}main a.app .tag{font-size:12px}main a.app .ir{font-size:13px}}
@media(prefers-reduced-motion:reduce){main a.app:hover,main a.app:focus-visible{transform:none}}

main a.app.app-credipao .fila{flex-direction:column;gap:9px}
main a.app.app-credipao .ico{width:180px;max-width:100%;height:43px;border:0;background:white;border-radius:8px;box-shadow:none;overflow:hidden;display:block}
main a.app.app-credipao .ico img{display:block;width:100%;height:43px;object-fit:cover;object-position:center}
main a.app.app-credipao .n{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
main a.app.app-credipao .d{margin-top:0}
/* Marcas originales de las aplicaciones. */
main .area .grid a.app.app-branded{min-height:218px}
main .area .grid a.app.app-branded .fila{flex-direction:column;gap:11px}
main .area .grid a.app.app-branded .ico{width:120px;max-width:100%;height:54px;display:block;border:0;background:transparent;border-radius:0;box-shadow:none}
main .area .grid a.app.app-branded .ico img{width:100%;height:100%;display:block;object-fit:contain;object-position:left center}
main .area .grid a.app.app-brand-symbol .ico{width:54px;border-radius:12px;overflow:hidden}
main .area .grid a.app.app-branded .n{margin-top:0}
main .area .grid a.app.app-branded .d{margin-top:6px}
@media(max-width:560px){main .area .grid a.app.app-branded{min-height:0}main .area .grid a.app.app-branded .fila{gap:10px}}

@media(min-width:1300px){main .grid:has(>.app:nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1600px){main .grid:has(>.app:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}}