@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--brand-blue:#007bff;--ink:#0d1b2a;--dark:#0d1b2a;--accent:#56b8ff;--body:#526171;--light:#f4f6f8;--line:#e4e7eb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;color:var(--ink);background:#fff;font-family:'DM Sans',sans-serif;font-size:1rem;line-height:1.65}a{color:inherit;text-decoration:none}button,summary{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #007bff;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,sans-serif}button{cursor:pointer}.container{width:min(1264px,calc(100% - 96px));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.98);border-bottom:1px solid #e4e7eb}.header-inner{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:12px;line-height:1.2;flex-shrink:0}.brand-symbol{width:40px;height:42px;background:var(--dark);color:var(--accent);border-radius:9px;font-size:30px;font-family:Manrope,sans-serif;font-weight:800;text-align:center;line-height:42px}.brand strong{font-size:21px;letter-spacing:-.6px}.brand strong span{font-weight:500}.brand small{display:block;font-size:12px;letter-spacing:1.4px;margin-top:7px;font-weight:500}.header-inner nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:500}.header-inner nav>a:hover{color:#005fc7}.nav-contact{background:var(--dark);color:#fff;padding:12px 21px;border-radius:5px;display:flex;gap:25px;align-items:center}.header-inner nav>.nav-contact:hover{background:#19334e;color:white}.menu-toggle{display:none}.hero{background:var(--dark);color:#fff;padding:65px 0 60px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}.eyebrow{font-size:12px;letter-spacing:1.8px;line-height:1.6;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:12px}.line{width:28px;height:1px;background:var(--accent)}h1{font-size:clamp(2.8rem,4.6vw,4.2rem);font-weight:500;line-height:1.11;letter-spacing:-2.6px;margin:24px 0}h1 span{color:var(--accent)}.hero-description{color:#c1ccda;max-width:430px;font-size:17px;line-height:1.75}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;border-radius:4px;padding:15px 22px;font-size:15px;font-weight:600;margin-top:30px;background:var(--accent);color:var(--dark)}.button:hover{background:#2690ff}.button span{font-size:21px;line-height:1}.hero-footnote{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:#afbdd0;margin-top:36px}.hero-footnote span+span:before{content:'/';margin-right:15px;color:#8fa6bf}.hero-visual{min-width:0}.image-frame{position:relative;height:525px;border-radius:7px;overflow:hidden;background:#102236;border:1px solid #2a415a}.image-frame img{width:100%;height:100%;object-fit:cover;object-position:65% center;display:block}.image-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,31,.45),transparent 35%,rgba(7,18,31,.9))}.visual-heading{position:absolute;z-index:1;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;gap:15px;font-size:12px;letter-spacing:.9px;color:#e4e7eb}.visual-caption{position:absolute;z-index:1;left:30px;bottom:32px;right:30px;display:flex;align-items:center;gap:16px;font-size:14px;line-height:1.9;color:#d1dbe7}.visual-caption strong{font-weight:500;font-size:16px;color:#fff}.visual-caption>span{width:3px;height:43px;background:var(--accent);flex-shrink:0}.section{padding:92px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:55px;margin-bottom:43px}.eyebrow.dark{color:#005fc7;margin-bottom:17px}h2{font-size:clamp(2rem,3.1vw,2.85rem);letter-spacing:-1.6px;line-height:1.2;font-weight:600}.section-heading>p{max-width:380px;color:var(--body);font-size:16px;line-height:1.8;padding-bottom:4px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}.service-card{border:1px solid var(--line);border-radius:6px;padding:29px 27px 0;background:#fff;min-width:0}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}.card-top svg{width:36px;height:36px;color:#007bff}.card-top>span{font-size:13px;color:#61758a}.service-card h3{font-size:21px;letter-spacing:-.65px;line-height:1.35;margin-bottom:14px}.service-card>p{color:var(--body);font-size:16px;line-height:1.8;min-height:88px}.service-card details{margin-top:25px;border-top:1px solid var(--line)}summary{padding:20px 0;list-style:none;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary span{font-size:23px;font-weight:400}details[open] summary span{transform:rotate(45deg)}.service-detail{padding-bottom:24px;font-size:16px;color:var(--body)}.service-detail p+p{margin-top:12px}.service-detail a{display:block;color:#005fc7;font-size:14px;font-weight:600;margin-top:17px}.about{background:var(--light);border-top:1px solid #e4e7eb;border-bottom:1px solid #e4e7eb}.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px}.about h2 span{color:#005fc7}.about-copy{padding-top:32px;color:var(--body);font-size:17px}.about-copy p+p{margin-top:17px}.text-link{display:inline-flex;align-items:center;gap:35px;border-bottom:1px solid #8bb8e8;padding-bottom:6px;margin-top:25px;font-size:14px;font-weight:600;color:var(--ink)}.projects-empty{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:35px 0;display:flex;align-items:center;gap:50px}.empty-mark{font-size:34px;font-family:Manrope,sans-serif;font-weight:600;letter-spacing:-2px;color:#627b96}.projects-empty h3{font-size:18px;font-weight:500;margin-bottom:5px}.projects-empty p{font-size:16px;color:var(--body)}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.project-card{border:1px solid var(--line);border-radius:6px;overflow:hidden}.project-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.project-body{padding:24px}.project-category{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#005fc7}.project-card h3{font-size:21px;margin:10px 0}.project-card p{font-size:16px;color:var(--body)}.project-card a{display:inline-block;font-size:14px;margin-top:18px;text-decoration:underline}.contact-section{padding:75px 0;background:var(--dark);color:white}.contact-grid{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:110px}.contact-section .eyebrow{margin-bottom:18px}.contact-section h2{font-size:clamp(2rem,3vw,2.7rem);line-height:1.25}.contact-section h2+p{color:#b8c7d9;font-size:16px;margin-top:22px;max-width:495px}.contact-links{display:grid;gap:12px}.contact-links>a{border:1px solid #3b526d;border-radius:4px;padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.contact-links>a:hover{border-color:var(--accent);background:#142d48}.contact-links strong{display:block;font-size:16px}.contact-links small{display:block;color:#bacadc;font-size:14px;overflow-wrap:anywhere}.contact-arrow{font-size:24px;color:var(--accent)}.contact-pending{border-left:2px solid #007bff;padding-left:24px;color:#bed0e4;font-size:16px}footer{padding:32px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-brand .brand-symbol{width:28px;height:30px;font-size:22px;line-height:30px;border-radius:5px}.footer-brand strong{font-size:16px}.footer-inner p,.footer-inner small{font-size:12px;color:var(--body)}.skip-link{position:fixed;top:-100px;left:20px;background:#fff;padding:12px;z-index:100}.skip-link:focus{top:10px}[hidden]{display:none!important}
@media(max-width:1050px){.container{width:calc(100% - 56px)}.header-inner nav{gap:22px}.hero-grid{gap:35px}h1{font-size:3.2rem}.image-frame{height:490px}.hero-footnote{gap:8px}.hero-footnote span+span:before{margin-right:8px}.service-card{padding:24px 21px 0}.service-card h3{font-size:19px}.service-card>p{min-height:116px}.about-grid{gap:45px}.contact-grid{gap:50px}.footer-inner{flex-wrap:wrap}}
@media(max-width:760px){html{scroll-padding-top:5rem}.container{width:calc(100% - 40px)}.header-inner{min-height:76px}.brand strong{font-size:18px}.brand small{font-size:12px;letter-spacing:.4px}.brand-symbol{width:34px;height:37px;line-height:37px;font-size:26px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;background:transparent;border:1px solid var(--line);border-radius:4px;width:43px;height:42px;padding:11px}.menu-toggle span{height:1px;background:var(--ink);width:19px}.header-inner nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:22px;flex-direction:column;align-items:stretch;gap:0}.header-inner nav.is-open{display:flex}.header-inner nav>a{padding:14px}.nav-contact{margin-top:10px;justify-content:space-between}.hero{padding:43px 0 36px}.hero-grid{grid-template-columns:1fr;gap:35px}.eyebrow{font-size:12px;letter-spacing:1px}h1{font-size:clamp(2.7rem,10.8vw,4rem);letter-spacing:-1.8px;line-height:1.12;margin:21px 0}.desktop-break{display:none}.hero-description{font-size:16px}.button{margin-top:23px}.hero-footnote{font-size:12px;margin-top:24px}.image-frame{height:330px}.visual-heading{font-size:12px;left:20px;right:20px}.visual-heading>span:last-child{display:none}.visual-caption{left:23px;bottom:23px}.section{padding:60px 0}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:20px;max-width:none}h2{letter-spacing:-1px;font-size:2rem}.service-grid,.project-grid{grid-template-columns:1fr}.service-card{padding:25px 24px 0}.card-top{margin-bottom:24px}.service-card h3{font-size:22px}.service-card>p{min-height:0}.service-card details{margin-top:20px}.service-card summary{padding:18px 0}.about-grid{grid-template-columns:1fr;gap:10px}.about-copy{padding-top:16px;font-size:16px}.projects-empty{gap:22px;align-items:start}.empty-mark{font-size:26px;white-space:nowrap}.projects-empty h3{font-size:17px}.contact-section{padding:55px 0}.contact-grid{grid-template-columns:1fr;gap:32px}.contact-section h2{font-size:2rem}.footer-inner{flex-direction:column;align-items:flex-start;gap:15px}.footer-inner p{font-size:14px}.footer-inner small{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Identidad oficial JLS: azul, azul oscuro y gris plata. */
.brand-mark{position:relative;display:block;width:58px;height:58px;overflow:hidden;flex-shrink:0;background:#fff;border-radius:3px}
.brand-mark img{display:block;position:static;width:100%;height:100%;max-width:100%;object-fit:contain}
.brand small{font-size:12px;letter-spacing:0;color:#526171}
.site-header{background:#fff}
.button{background:var(--brand-blue);color:#06111f}
.button:hover{background:#2690ff}
.nav-contact{background:var(--dark)}
.about-grid{grid-template-columns:.82fr 1.18fr;align-items:center;gap:80px}
.about-brand{padding:15px;background:#fff;border:1px solid var(--line);border-radius:8px;max-width:360px}
.about-brand img{display:block;width:100%;height:auto}
.about-copy{padding-top:0}
.about-copy h2{margin-bottom:24px}
.about-copy .eyebrow{margin-top:0}
.about-copy h2+p{margin-top:0}
.footer-brand .brand-mark{width:46px;height:48px}
.footer-brand .brand-mark img{display:block;position:static;width:100%;height:100%;max-width:100%;object-fit:contain}
@media(max-width:1050px){.header-inner nav{gap:20px}.about-grid{gap:38px}.brand strong{font-size:19px}.brand small{display:none}}
@media(max-width:760px){.brand-mark{width:45px;height:46px}.brand-mark img{display:block;position:static;width:100%;height:100%;max-width:100%;object-fit:contain}.brand{gap:8px}.brand strong{font-size:17px}.brand small{display:none}.about-grid{grid-template-columns:1fr;gap:30px}.about-brand{width:min(100%,300px);margin:auto}.about-copy{padding-top:0}.header-inner{gap:10px}}


/* Casos de implementación del catálogo. */
.project-case{grid-column:1/-1;border-top:3px solid var(--brand-blue);background:linear-gradient(120deg,#f4f8fe,#fff 60%)}
.project-case .project-body{padding:36px 40px}
.project-case h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.7px;margin:14px 0;line-height:1.3}
.project-case .project-body>p{max-width:850px;line-height:1.8}
.case-details{margin-top:26px;border-top:1px solid var(--line)}
.case-details>summary{color:#005fc7;padding:20px 0;font-size:16px}
.case-content{padding:5px 0 12px}
.case-content h4{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;line-height:1.4;color:var(--ink);margin:30px 0 14px}
.case-content h4:first-child{margin-top:8px}
.case-content>p{max-width:960px;line-height:1.85}
.case-solutions{margin:26px 0 38px;border-top:1px solid var(--line)}
.case-solutions>div{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr);gap:34px;padding:20px 0;border-bottom:1px solid var(--line)}
.case-solutions dt{font-weight:600;color:var(--ink);font-size:16px}
.case-solutions dd{margin:0;color:var(--body);font-size:16px;line-height:1.8}



@media(max-width:760px){.project-case .project-body{padding:25px 22px}.project-category{line-height:1.8}.case-solutions>div{grid-template-columns:1fr;gap:8px;padding:18px 0}.case-content h4{font-size:18px}.case-details>summary{font-size:15px}}

/* Capturas reales del sistema implementado. */
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:30px 0 8px}
.case-screenshot{margin:0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.project-card .screenshot-link{display:block;margin:0;line-height:0;text-decoration:none;border-bottom:1px solid var(--line)}
.project-card .case-screenshot img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#f3f6fb}
.case-screenshot figcaption{padding:20px 22px}
.case-screenshot h4{font:600 18px/1.4 Manrope,sans-serif;margin:0 0 9px;color:var(--ink)}
.case-screenshot p{font-size:16px;line-height:1.7}
.project-card .screenshot-full{margin-top:14px;color:#005fc7;font-size:14px;text-underline-offset:4px}
.screenshot-link:hover img{opacity:.92}
.screenshot-link:focus-visible{outline-offset:-4px}
@media(max-width:760px){.case-gallery{grid-template-columns:1fr;gap:20px;margin-top:25px}.case-screenshot figcaption{padding:18px}.case-screenshot h4{font-size:17px}}

/* Galería de vistas del organizador financiero. */
.case-gallery-overview .case-screenshot:first-child{grid-column:1/-1}
.project-card .case-gallery-overview .screenshot-link{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:#f3f6fb}
.project-card .case-gallery-overview .case-screenshot img{width:100%;height:100%;object-fit:contain}
.project-card .case-gallery-overview .case-screenshot:first-child .screenshot-link{aspect-ratio:auto;height:360px}
@media(max-width:760px){.project-card .case-gallery-overview .case-screenshot:first-child .screenshot-link{height:auto;aspect-ratio:1265/578}}

/* Vista ampliada de capturas dentro del portal. */
.project-card button.screenshot-link{width:100%;padding:0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:inherit;cursor:zoom-in}
.project-card button.screenshot-full{display:inline-block;padding:4px 0;background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;font-family:inherit;cursor:pointer}
.image-preview-open{overflow:hidden;scrollbar-gutter:stable}
.image-preview{width:min(1440px,96vw);max-width:96vw;max-height:94vh;max-height:94dvh;margin:auto;padding:0;border:1px solid #3b526d;border-radius:8px;background:#f3f6fb;color:var(--ink);box-shadow:0 20px 80px #0006;overflow:hidden}
.image-preview::backdrop{background:rgba(5,14,25,.84)}
.image-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 24px;background:var(--dark);color:#fff}
.image-preview-toolbar h2{margin:0;font-size:20px;line-height:1.4;letter-spacing:0;min-width:0}
.image-preview-close{display:inline-flex;align-items:center;gap:15px;flex-shrink:0;padding:9px 15px;min-height:44px;border:1px solid #7f95b0;border-radius:5px;color:#fff;background:transparent;font:500 15px/1.4 'DM Sans',sans-serif}
.image-preview-close:hover{background:#254564}
.image-preview-close span{font-size:24px;line-height:1}
.image-preview-content{max-height:calc(94vh - 82px);max-height:calc(94dvh - 82px);overflow:auto;overscroll-behavior:contain}
.image-preview-content img{display:block;width:100%;height:auto;margin:0 auto}
@media(max-width:760px){.image-preview-toolbar{padding:12px;gap:10px}.image-preview-toolbar h2{font-size:16px}.image-preview-close{padding:8px 10px;gap:9px}.image-preview-content{max-height:calc(94vh - 100px);max-height:calc(94dvh - 100px)}}