body.has-solution-scene{background:#02060b}.has-solution-scene main{position:relative;z-index:1}.has-solution-scene .site-header{background:linear-gradient(#02060b,#02060bc9);border-color:#89cfee20}.solution-stage{position:fixed;top:100px;bottom:0;left:48%;right:0;z-index:0;pointer-events:none;overflow:hidden}.solution-stage canvas,.solution-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.solution-stage canvas{opacity:0;transition:opacity .5s}.solution-stage.scene-ready canvas{opacity:1}.solution-stage.scene-ready .solution-poster{opacity:0}.scene-caption{position:absolute;bottom:58px;left:13%;right:9%;padding-top:18px;border-top:1px solid #36647b80}.scene-caption>div{display:flex;gap:16px;align-items:center;color:#b5d6e6;font-size:12px;letter-spacing:.04em}.scene-phase-number{color:#77e3f6;font-variant-numeric:tabular-nums}.scene-caption p{font-size:12px;color:#6f8b9b;margin-top:10px}.solution-hero{padding:70px 5% 100px;min-height:calc(100svh - 100px)}.solution-copy{width:46%;max-width:640px}.solution-hero .eyebrow{font-size:12px;letter-spacing:.09em;margin-top:72px;line-height:1.6;color:#88dbe8}.solution-hero h1{font-size:clamp(43px,4.3vw,68px);line-height:1.08;letter-spacing:-.05em;font-weight:450;margin-top:22px;overflow-wrap:normal}.solution-summary{font-size:18px;line-height:1.75;color:#a8bdca;margin-top:28px;max-width:540px}.solution-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:35px}.solution-actions .button{background:#a5f4ff;border-color:#a5f4ff;border-radius:2px}.solution-scroll{font-size:13px;color:#82bace;display:inline-flex;gap:17px;align-items:center;margin-top:54px}.solution-intro{padding:75px 5% 20px;max-width:none}.solution-intro .solution-copy{padding:0 0 35px;border-top:1px solid #47758e4d}.solution-intro h2{font-size:clamp(30px,2.9vw,44px);margin-top:35px;line-height:1.16;font-weight:450}.solution-promise-eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--solution-accent-text,#6fdaee);margin-top:35px;font-weight:600}.solution-promise-label{font-size:15px;color:#a9bfce;margin-top:6px;font-weight:600}.solution-promise-quote{font-size:clamp(26px,2.6vw,38px);line-height:1.22;font-weight:450;color:#eef6fa;margin:18px 0 0;border:0;padding:0}@media(min-width:750px){.solution-promise-eyebrow{color:var(--solution-accent-deep,#0d6272)!important}.solution-promise-label{color:#46586a!important}.solution-promise-quote{color:#0c1524!important}}.solution-intro p{font-size:17px;color:#a9bfce;line-height:1.8;margin-top:24px}.solution-benefits{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:12px}.solution-benefits li{font-size:15px;color:#a9bfce;padding:16px;border:1px solid #1c3547;border-radius:12px;background:#0d1d38;display:flex;gap:14px;transition:transform .2s,box-shadow .2s,border-color .2s}.solution-benefits li:is(:hover,:focus-within){transform:translateY(-3px);border-color:var(--solution-accent,#6fdaee);box-shadow:0 16px 34px -14px var(--solution-accent,#6fdaee)}.solution-benefit-icon{color:var(--solution-accent-text,#6fdaee);flex-shrink:0}.solution-benefit-title{font-weight:600}.solution-benefit-text{display:block;margin-top:2px}.solution-story{padding:0 5%}.scene-chapter{min-height:75svh;display:flex;flex-direction:column;justify-content:center;width:46%;max-width:620px;padding:85px 0}.scene-chapter>span{font-size:13px;color:#6fdaee;letter-spacing:.09em}.scene-chapter h2{font-size:clamp(32px,3.1vw,48px);line-height:1.16;letter-spacing:-.04em;margin-top:28px;font-weight:450}.scene-chapter p{font-size:18px;line-height:1.85;margin-top:28px;color:#aac0ce}.solution-content{position:relative;background:#030a13;padding:70px 0 0;border-top:1px solid #37677c40}.solution-content .inner-content{background:transparent}.solution-related,.solution-sources{max-width:1440px;margin:auto;padding:65px 5%}.solution-related-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.solution-related-heading>h2{font-size:33px;font-weight:450}.related-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px}.related-page-grid>a{padding:28px 0;border-top:1px solid #2e5267;font-size:21px;display:flex;gap:24px;justify-content:space-between;align-items:start}.related-page-grid>a:hover{color:#77e3f6}.related-page-grid span{color:#66cbe0}.solution-sources{padding-top:18px;padding-bottom:60px;display:flex;flex-wrap:wrap;gap:12px 28px}.solution-sources a{font-size:12px;color:#6f95a8;text-decoration:underline;text-underline-offset:4px}.solution-sources a:hover{color:#b2e6f5}.solution-cases{max-width:1440px;margin:auto;padding:65px 5% 20px}.solution-cases-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}.solution-cases-heading h2{font-size:clamp(28px,2.8vw,40px);font-weight:450;line-height:1.2;color:#eef6fa}.solution-cases-heading .text-link{font-size:14px;color:#6fdaee}.solution-cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:34px}.solution-cases-grid>a{display:flex;flex-direction:column;gap:18px;padding:22px;border:1px solid #1c3547;border-radius:12px;background:#0d1d38;transition:transform .2s,box-shadow .2s,border-color .2s}.solution-cases-grid>a:is(:hover,:focus-within){transform:translateY(-3px);border-color:var(--solution-accent,#6fdaee);box-shadow:0 16px 34px -14px var(--solution-accent,#6fdaee)}.solution-cases-grid img{width:56px;height:56px;object-fit:cover;border-radius:6px}.solution-cases-grid p{font-size:12px;letter-spacing:.025em;color:#6fdaee;margin-bottom:6px}.solution-cases-grid h3{font-size:19px;line-height:1.35;font-weight:450;color:#eef6fa;overflow-wrap:break-word}.solution-cases-grid a>div>span{font-size:13px;color:#a9bfce;display:flex;gap:8px;margin-top:14px}.page-founders{max-width:1440px;margin:auto;padding:20px 5% 65px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.page-founders>.eyebrow{grid-column:1/-1;font-size:12px;letter-spacing:.09em;color:#6fdaee;margin-bottom:4px}.page-founders-intro{grid-column:1/-1;font-size:17px;line-height:1.8;color:#a9bfce;max-width:900px;margin:0 0 28px}.founder-card{margin:0;display:flex;flex-direction:column;border:1px solid #1c3547;border-radius:12px;background:#0d1d38;overflow:hidden}.founder-card img{width:100%;aspect-ratio:718/1086;object-fit:cover;display:block}.founder-card figcaption{padding:18px 20px 22px;display:flex;flex-direction:column;gap:4px}.founder-card strong{font-size:18px;font-weight:600;color:#eef6fa}.founder-card span{font-size:14px;color:#a9bfce}.page-timeline{max-width:1440px;margin:auto;padding:20px 5% 65px}.page-timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}.page-timeline-heading>.eyebrow{font-size:12px;letter-spacing:.09em;color:#6fdaee}.timeline-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.timeline-rail::-webkit-scrollbar{display:none}.timeline-track{display:flex;flex-shrink:0;position:relative}.timeline-track::before{content:"";position:absolute;top:33px;left:0;right:0;height:2px;background:#1c3547;z-index:0}.timeline-set{display:flex;gap:20px;flex-shrink:0;position:relative;z-index:1}.timeline-card{margin:0;flex:0 0 340px;min-width:260px;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:54px 22px 22px;border:1px solid #1c3547;border-radius:12px;background:#0d1d38;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s}.timeline-card:hover{transform:translateY(-3px);border-color:#6fdaee;box-shadow:0 16px 34px -14px #6fdaee}.timeline-card>span{font-size:13px;letter-spacing:.06em;color:#6fdaee;font-weight:600}.timeline-marker{position:absolute;top:4px;left:22px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.timeline-dot{position:absolute;top:28px;left:22px;width:11px;height:11px;border-radius:50%;background:#0d1d38;border:2px solid #6fdaee;box-sizing:border-box;z-index:1}.timeline-card--end .timeline-dot{background:#6fdaee}.timeline-card h3{font-size:18px;line-height:1.35;font-weight:450;color:#eef6fa}.timeline-card p{font-size:14px;line-height:1.6;color:#a9bfce}.solution-controls{position:fixed;bottom:18px;right:22px;z-index:40;display:flex;gap:10px}.solution-controls button{font-size:12px;padding:10px 14px;min-height:44px;background:#04121dee;border:1px solid #2e5368;border-radius:3px;color:#b8d5e2}.has-solution-scene #site-footer{position:relative;z-index:1;background:#030a13}.has-solution-scene .contact-section{position:relative;z-index:1}.solution-media{max-width:1280px;margin:0 auto;padding:25px 5% 65px}.solution-media img{max-height:520px;max-width:100%;object-fit:contain;border:1px solid #23475d;border-radius:4px}.solution-media figcaption{font-size:13px;color:#7da0b4;margin-top:16px}.corporate-links{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.corporate-links a{border-bottom:1px solid #25475b;padding:18px 0;color:#a4dae8;font-size:16px}
@media(max-width:1050px){.solution-copy,.scene-chapter{width:48%}.solution-hero h1{font-size:46px}.solution-stage{left:46%}.solution-summary,.scene-chapter p{font-size:16px}.scene-caption{left:8%;right:6%}.scene-chapter h2{font-size:37px}.solution-hero .eyebrow{margin-top:45px}}
@media(max-width:749px){.has-solution-scene .site-header{height:78px}.solution-stage{top:78px;bottom:auto;left:0;width:100%;height:350px}.solution-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#02060b 0%,transparent 20%);pointer-events:none}.scene-caption{bottom:8px;left:6%;right:6%;border:0;z-index:1;padding:0}.scene-caption>div{font-size:11px;line-height:1.4;gap:10px}.scene-caption p{display:none}.solution-hero{padding:372px 6% 70px;min-height:0;background:linear-gradient(0deg,#02060b 0%,#02060be8 47%,transparent 75%)}.solution-copy,.scene-chapter{width:100%;max-width:650px}.solution-hero .eyebrow{margin-top:34px;font-size:12px}.solution-hero h1{font-size:42px;line-height:1.13}.solution-summary{font-size:16px;margin-top:25px}.solution-actions{gap:19px;margin-top:28px}.solution-scroll{margin-top:32px}.solution-intro{padding:50px 6% 0;background:#02060bf0}.solution-intro h2{font-size:32px}.solution-promise-quote{font-size:26px}.solution-intro p{font-size:16px}.solution-story{padding:0 6%}.scene-chapter{min-height:100svh;padding:390px 0 80px;position:relative;justify-content:flex-end}.scene-chapter:before{content:'';position:absolute;inset:320px -6.8% 0;background:linear-gradient(0deg,#02060b 85%,transparent);z-index:-1}.scene-chapter h2{font-size:33px;margin-top:20px}.scene-chapter p{font-size:16px;margin-top:22px}.solution-content{padding-top:30px}.solution-related{padding:45px 6%}.related-page-grid{grid-template-columns:1fr;gap:0}.related-rail-controls{display:none}.related-page-grid>a{font-size:21px;padding:23px 0}.solution-cases{padding:45px 6% 10px}.solution-cases-grid{grid-template-columns:1fr;gap:18px;margin-top:26px}.page-founders{grid-template-columns:1fr;gap:20px;padding:10px 6% 45px}.page-timeline{padding:10px 6% 45px}.timeline-rail-controls{display:none}.timeline-card{flex:0 0 82vw;min-width:0}.solution-sources{padding:15px 6% 45px;gap:18px}.solution-controls{position:absolute;top:96px;right:16px;bottom:auto}.solution-controls button{font-size:11px;padding:8px 11px}.corporate-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.solution-stage canvas{transition:none}.scene-chapter{min-height:65svh}}
.corporate-resources{max-width:1440px;margin:0 auto;padding:0 5%}.resource-section{padding:55px 0;border-bottom:1px solid #244052}.resource-section.policy-no-divider{border-bottom:none;padding-bottom:10px}.resource-section.cases-explorer{border-bottom-color:var(--rd-line)}.solution-story{position:relative}.solution-story::before{content:'';position:absolute;top:0;left:0;right:0;height:140px;background:linear-gradient(#F6F8FB,transparent);pointer-events:none;z-index:2}.solution-story::after{content:'';position:absolute;bottom:0;left:0;right:0;height:140px;background:linear-gradient(transparent,#EAF0F6);pointer-events:none;z-index:2}@media(max-width:749px){.solution-story::before,.solution-story::after{height:80px}}.resource-section>h2{font-size:clamp(27px,3vw,40px);letter-spacing:-.035em;line-height:1.2;font-weight:450;margin-bottom:30px}.resource-section>h3{font-size:22px;margin:24px 0 12px}.resource-section p,.resource-section li{font-size:16px;line-height:1.9;color:#aabfcd;max-width:880px;margin:16px 0}.resource-section blockquote{max-width:880px;font-size:20px;line-height:1.75;border-left:2px solid #70e8fa;padding:8px 0 8px 25px;margin:25px 0;color:#c7e5ef}.resource-section a{overflow-wrap:anywhere}.original-logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:35px;align-items:center}.source-logo{margin:0;display:grid;place-items:center;min-height:145px;background:#eaf1f5;border-radius:3px;padding:25px}.source-logo img{width:auto;max-width:100%;max-height:115px;object-fit:contain}.original-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px 30px}.original-case-card{display:flex;flex-direction:column;border-bottom:1px solid #294556;padding-bottom:25px}.original-case-card .source-image{margin:0 0 24px;aspect-ratio:1.65;background:#0b1f30;display:grid;place-items:center;overflow:hidden;border-radius:4px}.original-case-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.original-case-card:hover img{transform:scale(1.035)}.original-case-card h3{font-size:23px;font-weight:450;line-height:1.3;margin:0 0 22px}.original-case-card>span{font-size:13px;color:#7ac9dd;margin-top:auto}.resource-accordion{border-top:1px solid #29475c;padding:0}.resource-accordion summary{cursor:pointer;font-size:22px;color:#c8e7f2;padding:27px 34px 27px 0;list-style:none;position:relative}.resource-accordion summary:after{content:'+';position:absolute;right:5px;color:#70e8fa}.resource-accordion[open] summary:after{content:'−'}.resource-accordion>div{padding:0 0 30px;max-width:900px}.resource-accordion h3{margin-top:23px;font-size:18px;color:#c6e7f4}.resource-accordion p{margin:10px 0 18px}.contact-region-title{font-size:19px;font-weight:600;color:var(--rd-ink,#0C1524);margin:40px 0 18px;letter-spacing:.01em}.contact-region-title:first-of-type{margin-top:28px}.contact-country-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.contact-card{padding:26px 24px;background:#fff;border:1px solid var(--rd-line,#DCE3EC);border-radius:12px;box-shadow:0 1px 3px #0c15240d;transition:border-color .2s,transform .2s,box-shadow .2s}.contact-card:hover{border-color:var(--rd-blue,#1E5EFF);transform:translateY(-2px);box-shadow:0 4px 14px #0c15241a}.contact-card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.contact-flag{width:28px;height:21px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(12,21,36,.1)}.contact-card-head h3{font-weight:600;font-size:21px;margin:0;color:var(--rd-ink,#0C1524)}.contact-card p{font-size:15px;line-height:1.75;margin:8px 0;color:var(--rd-ink2,#3E4A5C)}.contact-card a{color:var(--rd-blue,#1E5EFF);font-weight:500}.contact-followup-note{margin-top:35px;color:var(--rd-ink2,#3E4A5C);font-size:14px}.resource-photo{margin:28px 0;max-width:880px;border:1px solid #23475d;border-radius:8px;overflow:hidden}.resource-photo img{width:100%;height:auto;display:block}.resource-photo figcaption{padding:14px 18px;font-size:13px;color:#7da0b4}.resource-microcopy{font-size:13px!important;color:#7da0b4!important;margin:10px 0 0!important}.policy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:30px 0 6px}.policy-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid #e3ecf3;border-radius:16px;background:#fbfdff;box-shadow:0 1px 3px rgba(4,12,24,.14);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.policy-card:before{content:'';position:absolute;inset:-16px;border-radius:26px;background:radial-gradient(120% 120% at 50% 0%,rgba(34,211,238,.4),transparent 65%);opacity:0;transition:opacity .3s ease;z-index:-1;filter:blur(18px);pointer-events:none}.policy-card:hover{transform:translateY(-6px);border-color:#22d3ee;box-shadow:0 26px 48px -24px rgba(8,145,178,.5)}.policy-card:hover:before{opacity:1}.policy-card-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#e3f8fc;color:#0e7490;flex:none;transition:background-color .25s,color .25s}.policy-card:hover .policy-card-icon{background:#0e7490;color:#fff}.policy-card h3{font-size:19px;font-weight:450;margin:0;color:#0c1524;line-height:1.3}.policy-card p{font-size:14.5px;line-height:1.7;color:#4a5a6b;margin:0;flex:1}.policy-card-links{display:flex;flex-direction:column;gap:8px;margin-top:4px}.policy-card a{display:inline-flex;align-items:center;gap:8px;color:#0e7490;font-size:14px;font-weight:600;overflow-wrap:anywhere}.policy-card a:hover{color:#0891b2;text-decoration:underline}.policy-flags{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px}.policy-flag{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#0c1524!important;font-size:13px;font-weight:600;transition:transform .2s,color .2s}.policy-flag img{width:46px;height:34px;border-radius:5px;object-fit:cover;border:1px solid #1c3547;box-shadow:0 2px 10px #00000055;transition:box-shadow .25s}.policy-flag:hover{transform:translateY(-5px);color:#1e5eff!important}.policy-flag:hover img{box-shadow:0 0 0 2px #22d3ee,0 6px 16px #00000066} .has-solution-scene :focus-visible{outline:2px solid #8feeff;outline-offset:6px}
@media(max-width:1050px){.original-logo-grid{grid-template-columns:repeat(4,1fr)}.contact-country-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:749px){.corporate-resources{padding:0 6%}.resource-section{padding:40px 0}.original-logo-grid{grid-template-columns:repeat(2,1fr);gap:12px}.source-logo{min-height:110px;padding:20px}.source-logo img{max-height:75px}.original-case-grid,.contact-country-grid{grid-template-columns:1fr;gap:25px}.original-case-card .source-image{aspect-ratio:1.7}.resource-accordion summary{font-size:20px}.resource-section p{font-size:15px}.resource-section>h2{font-size:30px}.policy-grid{grid-template-columns:1fr}.policy-card{padding:22px}.policy-flags{gap:16px}}
.solution-impact{background:#0b1830;padding:54px 5%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;position:relative;z-index:1}
.solution-impact-stat{display:flex;flex-direction:column;gap:6px;border-left:2px solid #4fe0f2;padding-left:22px}
.solution-impact-stat strong{font-family:Sora,sans-serif;font-size:clamp(32px,3.4vw,46px);font-weight:600;color:#fff;letter-spacing:-.02em}
.solution-impact-stat span{font-size:15px;color:#bcd4e2;line-height:1.4}
.solution-impact-stat em{display:block;font-style:normal;font-size:12px;color:#6fb8cf;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.solution-verified{background:#030a13;padding:70px 5%;border-top:1px solid #1c3547;position:relative;z-index:1}
.solution-verified-card{max-width:880px;margin:0 auto;padding:42px;border-radius:18px;background:#0b1830;color:#fff;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}
.solution-verified-label{font-size:12px;font-weight:700;letter-spacing:.12em;color:#77e3f6;text-transform:uppercase}
.solution-verified-headline{font-family:Sora,sans-serif;font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.3}
.solution-verified-quote{font-size:17px;line-height:1.7;color:#cfe3ec;margin:0}
.solution-verified-cite{font-size:13px;color:#e6edf5;font-style:normal}
.solution-verified-cite span{color:#9fbdca;font-weight:400}
.solution-verified-link{margin-top:8px;font-weight:700;color:#77e3f6;align-self:flex-start}
@media(max-width:749px){.solution-impact{padding:36px 6%;gap:26px}.solution-verified{padding:45px 6%}.solution-verified-card{padding:28px}.solution-verified-headline{font-size:22px}}
/* 2 oct 2026, a pedido de Catalina (revisando DataRutas): los "titulitos" de acento (eyebrows,
   insignias, íconos) usaban el color de marca de la página directamente como color de texto --
   se ve bien con el cian genérico del sitio (#6fdaee, claro) pero es ilegible con un acento
   oscuro propio (ej. el índigo #302A89 de DataRutas, o el morado de SitiData) sobre el fondo
   oscuro de estas secciones: texto oscuro sobre fondo oscuro. Mismo problema en SitiData y
   Geomarketing, no solo en DataRutas -- se corrige para todas las páginas de una vez.
   Se separa --solution-accent-text (siempre una versión aclarada del acento, calculada en
   build-interiors.py) del --solution-accent original (que sigue usándose tal cual para bordes,
   fondos "soft" y resplandores de hover, donde el tono oscuro sí se ve bien). Páginas sin acento
   propio no cambian: ambas variables valen el mismo cian de siempre. */
:root{--solution-accent:#6fdaee;--solution-accent-soft:#6fdaee26;--solution-accent-text:#6fdaee;--solution-accent-deep:#0d6272}
.solution-stats,.solution-steps,.solution-comparison,.solution-coverage,.solution-faq,.solution-demo{position:relative;z-index:1;padding:64px 5%}
.solution-section-inner{max-width:1100px;margin:0 auto}
.solution-stats .eyebrow,.solution-steps .eyebrow,.solution-comparison .eyebrow,.solution-coverage .eyebrow,.solution-faq .eyebrow,.solution-demo .eyebrow,.solution-problem .eyebrow{display:block;font-size:12px;letter-spacing:.09em;color:var(--solution-accent-text,var(--solution-accent));margin-bottom:26px;text-align:center}
/* 1 oct 2026, a pedido de Catalina: "El problema" y "Antes y después de X" en una cajita
   redondeada (como una insignia), no como texto suelto. */
.solution-problem .eyebrow,.solution-comparison .eyebrow,.solution-stats .eyebrow,.solution-steps .eyebrow,.solution-coverage .eyebrow,.solution-faq .eyebrow,.solution-demo .eyebrow,.solution-scope .eyebrow{display:table;padding:7px 18px;border-radius:999px;background:var(--solution-accent-soft);margin:0 auto 26px}
.solution-demo{background:#030a13;border-top:1px solid #1c3547}
.solution-demo-video{display:block;width:100%;max-width:920px;margin:0 auto;border-radius:16px;border:1px solid #2e5267;box-shadow:0 20px 50px #0007}
.solution-stats{background:#0b1830}
.solution-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.solution-stat{background:#0d1d38;border:1px solid #1c3547;border-radius:16px;padding:22px 20px;border-left:3px solid var(--solution-accent)}
.solution-stat-icon{display:flex;width:36px;height:36px;border-radius:10px;background:var(--solution-accent-soft);color:var(--solution-accent-text,var(--solution-accent));align-items:center;justify-content:center;margin-bottom:14px}
.solution-stat strong{display:block;font-family:Sora,sans-serif;font-size:clamp(24px,2.4vw,32px);font-weight:600;color:#fff;letter-spacing:-.02em}
.solution-stat-label{display:block;font-size:14px;color:#bcd4e2;line-height:1.4;margin-top:6px}
/* 27 oct 2026, a pedido de Catalina (Partners y Tecnologías): insignias pequeñas de niveles y
   competencias de Google Cloud, replicando cómo se ven en el perfil oficial del partner
   (partners.cloud.google.com/profile) -- rejilla compacta que ajusta cuanto quepa por fila, no
   cifras grandes como ".solution-stats". Fondo claro fijo (no depende de has-solution-scene) para
   que las insignias (que ya traen su propio color) tengan siempre buen contraste. */
.solution-badges{padding:64px 5%;background:#f6f8fb;color:#0c1524;border-top:1px solid #dce3ec}
.solution-badges .eyebrow{display:table;padding:7px 18px;border-radius:999px;background:var(--solution-accent-soft);color:var(--solution-accent-deep,var(--solution-accent));margin:0 auto 18px;font-size:12px;letter-spacing:.09em;text-align:center}
.solution-badges-intro{max-width:720px;margin:0 auto 32px;text-align:center;color:#46586a;line-height:1.7;font-size:16px}
.solution-badges-group-label{font-size:13px;font-weight:600;letter-spacing:.02em;color:#3e4a5c;margin:0 0 14px}
.solution-badges-group-label:not(:first-of-type){margin-top:32px}
.solution-badge-grid{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:0}
.solution-badge{display:flex;flex-direction:column;align-items:center;text-align:center;width:112px;background:#fff;border:1px solid #dce3ec;border-radius:12px;padding:12px 8px 14px;gap:8px}
.solution-badge img{width:72px;height:auto;display:block}
.solution-badge-label{font-size:11px;line-height:1.35;color:#0c1524;font-weight:600}
.solution-badge-level{display:block;font-size:10px;font-weight:500;color:#5b6b7c;margin-top:2px}
.solution-badges .text-link{display:inline-block;margin-top:28px}
@media(max-width:749px){.solution-badges{padding:45px 6%}.solution-badge{width:92px}.solution-badge img{width:58px}}
/* 1 oct 2026, a pedido de Catalina: en el lovable de origen "Cómo funciona" se ve como un
   flujo/línea de tiempo (círculo con número + línea que conecta los pasos), no como cajas en
   dos filas -- y los títulos de cada paso se veían muy pequeños. Afecta también a SitiData,
   que comparte este mismo componente. */
.solution-steps-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px 26px;margin-top:46px}
.solution-step{position:relative;z-index:1;background:none;border:0;padding:0;text-align:center}
.solution-step-badge{position:relative;display:inline-flex;margin-bottom:18px}
.solution-step-icon{display:flex;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--solution-accent),var(--solution-accent-soft));color:#04121c;align-items:center;justify-content:center;box-shadow:0 10px 26px -10px var(--solution-accent)}
.solution-step-icon svg{width:24px;height:24px}
.solution-step-index{position:absolute;top:-6px;right:-10px;display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:#060c18;border:1px solid var(--solution-accent);color:var(--solution-accent-text,var(--solution-accent));font-family:Sora,sans-serif;font-size:11px;font-weight:700;letter-spacing:0}
.solution-step h3{font-size:20px;color:#fff;margin-top:2px;font-weight:600;line-height:1.3}
.solution-step p{font-size:14px;color:#a9bfce;margin-top:8px;line-height:1.6}
@media(min-width:1024px){
.solution-steps-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.solution-steps-grid:before{content:'';position:absolute;left:4%;right:4%;top:28px;height:2px;background:linear-gradient(90deg,var(--solution-accent),var(--solution-accent-soft),var(--solution-accent));opacity:.55;z-index:0}
/* 2 oct 2026, a pedido de Catalina (ServiForms): la grilla estaba fija en 5 columnas y la línea
   conectora cubre todo ese ancho, sin importar cuántos pasos tenga la página en realidad. Con 4
   pasos (en vez de 5) sobraba una columna vacía y la línea se veía "sin cortar" después del
   último paso, dando impresión de continuidad/pasos faltantes. Estas reglas ajustan columnas y
   línea al conteo real de pasos para cualquier página que use "steps" con menos de 5 items. */
.solution-steps-grid:has(>.solution-step:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.solution-steps-grid:has(>.solution-step:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.solution-steps-grid:has(>.solution-step:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.solution-steps-grid:has(>.solution-step:nth-child(6):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
}
.solution-comparison{background:#030a13;border-top:1px solid #1c3547}
.solution-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1100px}
.solution-compare-card{border-radius:18px;padding:30px 28px;border:1px solid #1c3547}
.solution-compare-card--no{background:#0d141c}
.solution-compare-card--yes{background:#0d141c;border-color:var(--solution-accent)}
.solution-compare-card h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:20px}
.solution-compare-card--no h3{color:#8298a6}
.solution-compare-card--yes h3{color:var(--solution-accent-text,var(--solution-accent))}
.solution-compare-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.solution-compare-card li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5}
.solution-compare-card--no li{color:#8298a6}
.solution-compare-card--yes li{color:#e6edf5;font-weight:500}
.solution-compare-mark{flex:none;display:flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;margin-top:1px}
.solution-compare-mark svg{width:13px;height:13px}
.solution-compare-mark--no{background:#3a2530;color:#c76e7e}
.solution-compare-mark--yes{background:var(--solution-accent-soft);color:var(--solution-accent-text,var(--solution-accent))}
/* 6 oct 2026 (MSSP, a pedido de Catalina): variante neutral de esta comparación -- para
   diferenciar dos cosas distintas (p.ej. MSP vs. MSSP), no para contrastar peor/mejor. Mismo
   tono en ambas tarjetas y el mismo marcador (punto) en los dos lados, sin el rojo apagado de
   "--no" ni el acento de "--yes". */
.solution-compare-card--neutral{background:#0d141c}
.solution-compare-card--neutral h3{color:var(--solution-accent-text,var(--solution-accent))}
.solution-compare-card--neutral li{color:#e6edf5}
.solution-compare-mark--neutral{background:var(--solution-accent-soft);color:var(--solution-accent-text,var(--solution-accent))}
.solution-coverage-intro{font-size:15px;color:#a9bfce;margin-bottom:28px;max-width:640px}
.solution-coverage-scroll{overflow-x:auto;border:1px solid #1c3547;border-radius:12px}
.solution-coverage-table{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.solution-coverage-table th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#7da0b4;padding:14px 16px;border-bottom:1px solid #1c3547;background:#0b1830}
.solution-coverage-table td{padding:13px 16px;border-bottom:1px solid #16283790;color:#bcd4e2}
.solution-coverage-row--highlight td{background:var(--solution-accent-soft);color:#fff;font-weight:600}
.solution-coverage-name{font-weight:600;color:#e6edf5;white-space:nowrap}
.solution-coverage-flag{margin-right:8px;border-radius:2px;vertical-align:-2px;object-fit:cover;box-shadow:0 0 0 1px #ffffff26}
.solution-coverage-badge{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--solution-accent-text,var(--solution-accent));background:#12233a;border-radius:20px;padding:2px 8px;vertical-align:middle}
.solution-coverage-footnote{margin-top:18px;font-size:12px;color:#6f95a8}
.solution-faq .solution-section-inner{max-width:760px}
.solution-faq-item{border-top:1px solid #1c3547;padding:4px 0}
.solution-faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;font-size:16px;color:#e6edf5;list-style:none}
.solution-faq-item summary::-webkit-details-marker{display:none}
.solution-faq-toggle{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#12233a;color:var(--solution-accent-text,var(--solution-accent));transition:transform .25s ease}
.solution-faq-item[open] .solution-faq-toggle{transform:rotate(180deg)}
.solution-faq-answer p{font-size:15px;color:#a9bfce;line-height:1.7;padding:0 0 22px;margin:0}
@media(max-width:749px){.solution-stats,.solution-steps,.solution-comparison,.solution-coverage,.solution-faq,.solution-demo{padding:45px 6%}.solution-stats-grid,.solution-steps-grid{gap:20px}.solution-compare-grid{grid-template-columns:1fr;gap:16px}.solution-compare-card{padding:22px 20px}}
/* 1 oct 2026, a pedido de Catalina: fidelidad de estructura con los landings Lovable de origen -- seis secciones nuevas reutilizables (problema/impacto, asistente IA, casos de uso, funcionalidades/diferenciadores, listas de etiquetas, confian en nosotros) mas el resaltado de una palabra clave en el H1. */
.solution-hero-accent{color:var(--solution-accent-text,var(--solution-accent))}
.solution-problem{background:#0b1830;padding:64px 5%;position:relative;z-index:1;text-align:center}
.solution-problem h2{font-size:clamp(26px,2.6vw,36px);font-weight:450;margin:10px auto 0;max-width:760px}
/* 1 oct 2026, a pedido de Catalina: en el lovable no es una lista con viñetas, son tarjetas
   individuales con ícono y una animación sutil de hover, en los tonos de acento de la propia
   página (var(--solution-accent), ya personalizable por página desde interiors.json). */
.solution-problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:34px;text-align:left}
.solution-problem-card{background:#0d1d38;border:1px solid #1c3547;border-radius:16px;padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.solution-problem-card:is(:hover,:focus-within){transform:translateY(-4px);border-color:var(--solution-accent);box-shadow:0 16px 34px -14px var(--solution-accent)}
/* 1 oct 2026, a pedido de Catalina: el tono de acento se ve bien como brillo de hover, pero no
   como color de fondo fijo del ícono -- el ícono en reposo queda en un tono neutro del sitio. */
.solution-problem-icon{display:flex;width:42px;height:42px;border-radius:12px;background:#12233a;color:#bcd4e2;align-items:center;justify-content:center;margin-bottom:16px;transition:box-shadow .25s ease,color .25s ease}
.solution-problem-card:is(:hover,:focus-within) .solution-problem-icon{color:var(--solution-accent-text,var(--solution-accent));box-shadow:0 0 0 6px var(--solution-accent-soft)}
.solution-problem-card p{font-size:15px;color:#bcd4e2;line-height:1.55;margin:0}
.solution-problem-impact{margin-top:48px;text-align:center}
.solution-problem-impact h3{font-size:16px;color:#fff;margin:0 0 20px;font-weight:600}
.solution-problem-stat{margin-top:40px;text-align:center;border-top:1px solid #1c3547;padding-top:34px}
.solution-problem-stat-label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#7da0b4}
.solution-problem-stat strong{display:block;font-family:Sora,sans-serif;font-size:clamp(34px,4vw,54px);color:#fff;font-weight:600;margin-top:8px}
.solution-problem-stat-caption{display:block;font-size:14px;color:#a9bfce;margin-top:6px}
.solution-assistant{padding:64px 5%;background:#030a13;border-top:1px solid #1c3547;position:relative;z-index:1;text-align:center}
.solution-assistant h2{font-size:clamp(24px,2.4vw,32px);font-weight:450}
.solution-assistant-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 36px}
.solution-assistant-tags span{font-size:12px;padding:6px 14px;border-radius:20px;background:var(--solution-accent-soft);color:var(--solution-accent-text,var(--solution-accent))}
.solution-assistant-card{max-width:600px;margin:0 auto;background:#0b1830;border:1px solid #1c3547;border-radius:18px;padding:26px;text-align:left}
.solution-assistant-head{display:flex;align-items:center;gap:8px;font-size:13px;color:#e6edf5;margin-bottom:18px;font-weight:600}
.solution-assistant-dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;flex:none}
.solution-assistant-bubble{font-size:14px;line-height:1.6;padding:14px 16px;border-radius:14px;margin-bottom:12px;max-width:90%}
.solution-assistant-bubble--query{background:var(--solution-accent-soft);color:#e6edf5;margin-left:auto;border-bottom-right-radius:2px}
.solution-assistant-bubble--response{background:#0d1d38;color:#bcd4e2;border-bottom-left-radius:2px}
.solution-assistant-chips{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}
.solution-assistant-chips span{font-size:11px;padding:4px 10px;border-radius:20px;background:#12233a;color:var(--solution-accent-text,var(--solution-accent))}
.solution-usecases{padding:64px 5%;background:#0b1830;position:relative;z-index:1}
.solution-usecases h2{font-size:clamp(26px,2.6vw,36px);font-weight:450;margin-top:10px}
.solution-usecases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:30px}
/* 1 oct 2026, a pedido de Catalina: estas cajas quedaban sin ninguna animación de hover,
   distinto al resto de tarjetas de la página -- mismo tratamiento (realce + sombra de acento). */
.solution-usecase{background:#0d1d38;border:1px solid #1c3547;border-radius:16px;padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.solution-usecase:is(:hover,:focus-within){transform:translateY(-4px);border-color:var(--solution-accent);box-shadow:0 16px 34px -14px var(--solution-accent)}
.solution-usecase-badge{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--solution-accent-text,var(--solution-accent))}
.solution-usecase h3{font-size:19px;color:#fff;margin:10px 0 0;font-weight:600}
.solution-usecase p{font-size:14px;color:#a9bfce;margin-top:8px;line-height:1.6}
.solution-features{padding:64px 5%;position:relative;z-index:1;border-top:1px solid #1c3547}
.solution-features h2{font-size:clamp(24px,2.4vw,32px);font-weight:450;margin-top:10px}
.solution-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:30px}
.solution-feature-card{background:#0b1830;border:1px solid #1c3547;border-radius:16px;padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.solution-feature-card:is(:hover,:focus-within){transform:translateY(-4px);border-color:var(--solution-accent);box-shadow:0 16px 34px -14px var(--solution-accent)}
.solution-feature-card-icon{display:flex;width:38px;height:38px;border-radius:11px;background:#12233a;color:#bcd4e2;align-items:center;justify-content:center;margin-bottom:14px;transition:box-shadow .25s ease,color .25s ease}
.solution-feature-card:is(:hover,:focus-within) .solution-feature-card-icon{color:var(--solution-accent-text,var(--solution-accent));box-shadow:0 0 0 6px var(--solution-accent-soft)}
/* 6 oct 2026 (MSSP / Google Unified Security, a pedido de Catalina): cuando la tarjeta trae el
   logo del producto (en vez del ícono genérico de trazo) se ve más grande y con más aire, igual
   que las tarjetas de soluciones propias del home (.unit-product-logo) -- cada logo mantiene su
   propia proporción (algunos son cuadrados, el de Security Command Center es un wordmark ancho). */
.solution-feature-card.has-logo{padding:30px}
/* 6 oct 2026 (2), a pedido de Catalina: por uso de marca de Google, el logo no debe quedar
   pegado a un borde -- se centra dentro de la cajita (igual mantiene su proporción propia). */
.solution-feature-card-logo{display:block;height:42px;width:auto;max-width:100%;object-fit:contain;margin:0 auto 18px}
/* 6 oct 2026 (3), a pedido de Catalina: el logo de Security Command Center es un lockup de
   ícono + texto ("Security Command Center"), no solo un ícono -- a la misma altura que los
   íconos cuadrados (42px) el texto quedaba casi ilegible. Se sube a 54px solo para este logo. */
.solution-feature-card-logo[src*="security-command-center"]{height:54px}
.solution-feature-card h3{font-size:17px;color:#fff;font-weight:600}
.solution-feature-card p{font-size:14px;color:#a9bfce;margin-top:8px;line-height:1.6}
.solution-taglists{padding:64px 5%;background:#0b1830;position:relative;z-index:1}
.solution-taglists h2{font-size:clamp(24px,2.4vw,32px);font-weight:450}
.solution-taglist-group{margin-top:26px}
.solution-taglist-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7da0b4;margin-bottom:12px;display:block}
/* 14 oct 2026, a pedido de Catalina: clase propia para el párrafo de intro de "taglists" (fondo
   oscuro siempre), para que la regla global de "solution-coverage-intro" (pensada para el
   componente de fondo claro) no lo oscurezca hasta volverlo ilegible. Mismo tono que el resto
   del texto claro sobre fondo oscuro del sitio (p.ej. solution-faq-answer p). */
.solution-taglists-intro{font-size:15px;color:#a9bfce;line-height:1.6;margin:10px 0 26px;max-width:640px}
.solution-tags{display:flex;flex-wrap:wrap;gap:10px}
.solution-tags span{font-size:13px;padding:7px 14px;border-radius:20px;background:#0d1d38;border:1px solid #1c3547;color:#bcd4e2;display:inline-block;transition:transform .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
.solution-tags span:hover{transform:translateY(-2px);border-color:var(--solution-accent);background:var(--solution-accent-soft);color:var(--solution-accent-text,var(--solution-accent))}
.solution-trustedby{padding:46px 5%;text-align:center;border-top:1px solid #1c3547;position:relative;z-index:1}
.solution-trustedby-names{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin-top:18px}
.solution-trustedby-names span{font-family:Sora,sans-serif;font-size:18px;color:#cfe3ec;font-weight:600;opacity:.85}
@media(max-width:749px){.solution-problem,.solution-assistant,.solution-usecases,.solution-features,.solution-taglists{padding:45px 6%}.solution-problem-grid,.solution-usecases-grid,.solution-features-grid{gap:18px}}
/* 1 oct 2026, a pedido de Catalina: las 3 "cajas" (Cargas y georreferencias / Enriqueces con
   contexto / Visualizas y decides) repetían lo que ya dicen los 5 pasos y no seguían el diseño
   Lovable -> se ocultan. No se puede quitar la sección del todo: solution-scene.js mide estos
   mismos elementos (#solution-story y .scene-chapter) para sincronizar la animación 3D del hero
   con el scroll en TODAS las páginas de solución -- quitarlos del HTML apagaría esa animación
   en todo el sitio. Se oculta el texto y se reduce el espacio de scroll que ocupaban. */
@media(max-width:749px){.scene-chapter:before{display:none}}
/* 1 oct 2026, a pedido de Catalina: el color resaltado del H1 debe ser siempre el mismo azul
   del home (no el acento propio de cada producto), para que todos los Hero se vean iguales. */
.solution-hero-accent{color:#6fdaee}
/* 1 oct 2026 (v2), a pedido de Catalina: el primer intento con flex quedaba "terrible" (texto y
   video con alturas muy distintas). design-system.css YA trae, para pantallas >=750px, una
   rejilla de dos columnas en .solution-copy (texto | media) pensada justo para este caso: en vez
   de competir con ese sistema con otro display:flex propio, aquí solo se da forma al video para
   que encaje como segunda columna de esa rejilla -- el balance de alturas lo resuelve la rejilla
   de design-system.css. Aplica a Geomarketing y a SitiData, que comparten esta plantilla. */
.solution-intro-media{min-width:0;position:relative;overflow:hidden;aspect-ratio:1523/704;border-radius:16px;border:1px solid transparent;box-shadow:0 20px 50px #0007;background:#fff;display:flex;align-items:center;justify-content:center}
.solution-intro-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* 6 oct 2026 (4), a pedido de Catalina: el marco de ".solution-intro-media" se pensó para un
   video/captura a pantalla completa (".solution-intro-video" la cubre entera); el badge de
   Cloud Security es chico y de fondo transparente, así que sin estas reglas quedaba pegado a
   la esquina superior izquierda en vez de centrado. Se centra dentro del mismo marco.
   6 oct 2026 (5): el fondo de respaldo se cambió de oscuro (#0b1830) a blanco, porque el logo
   no contrasta sobre fondo oscuro (a pedido de Catalina).
   7 oct 2026 (6): el borde sólido de ".solution-intro-media" (línea visible alrededor del
   GIF/video/logo) se volvió transparente, a pedido de Catalina.
   7 oct 2026 (7), a pedido de Catalina: ".solution-intro-video" usaba un sobre-escalado fijo
   (126.07% + translate) pensado para UN solo video -- con los otros 3 videos (SitiData,
   Geomarketing, Google Maps), cada uno con su propia proporción nativa, ese mismo número
   recortaba cantidades distintas de imagen (entre ~30% y ~35% del alto). Se cambia a
   object-fit:contain: el video se ve completo, sin recortar, centrado dentro del marco
   (puede dejar una franja blanca arriba/abajo si su proporción es más alta que la del marco,
   en vez de perder contenido). El fondo del marco ahora es blanco siempre (antes solo para
   la imagen de logo), para que esa franja se note igual en video e imagen. */
.solution-intro-image{display:block;max-width:55%;max-height:55%;width:auto;height:auto;object-fit:contain}
@media(max-width:749px){.solution-intro-media{margin-top:28px}}
/* 1 oct 2026 (v2), a pedido de Catalina: dentro de las páginas de solución, el brillo de hover y
   el ícono de las cajas de beneficios deben verse en el tono de acento propio del producto
   (var(--solution-accent)), no en el azul genérico que trae design-system.css para esa misma
   sección. Se duplica la clase "has-solution-scene" para subir la especificidad por encima de la
   de design-system.css y ganar sin depender de qué hoja de estilos carga después. */
body.has-solution-scene.has-solution-scene .solution-intro .solution-benefits li:is(:hover,:focus-within){border-color:var(--solution-accent);box-shadow:0 10px 22px -10px var(--solution-accent)}
body.has-solution-scene.has-solution-scene .solution-benefit-icon{color:var(--solution-accent-text,var(--solution-accent))}
/* 1 oct 2026 (v3), a pedido de Catalina: con 6 beneficios (SitiData) design-system.css las
   partía en una rejilla fija de 3 columnas y, con la v2, forzábamos 6 columnas en una sola fila
   -- en ambos casos las tarjetas quedaban demasiado angostas y el texto se desbordaba. Se
   reemplaza por una rejilla flexible (el navegador decide cuántas tarjetas caben por fila según
   su ancho mínimo) y una tipografía/relleno un poco más compactos para que quepan más tarjetas
   por fila sin desbordarse -- con 5 beneficios (Geomarketing) siguen entrando los 5 en una sola
   línea; con 6 (SitiData) ya no se ven apretadas. */
body.has-solution-scene.has-solution-scene .solution-intro .solution-benefits{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
body.has-solution-scene.has-solution-scene .solution-intro .solution-benefits li{padding:16px;gap:10px;font-size:14px;line-height:1.45}
body.has-solution-scene.has-solution-scene .solution-benefit-icon{width:20px;height:20px}
/* 2 oct 2026, a pedido de Catalina (ServiForms): etiquetas en cápsulas redondeadas, del ancho
   de su propio texto, en vez de las cajas blancas grandes (background:#fff;border-radius:16px;
   padding:22px) que design-system.css pone para TODA ".solution-benefits li" en el layout de
   escritorio (>=750px, línea "4. Páginas internas") y en móvil (<750px) -- esas reglas son más
   específicas que las de interiors.css (dark theme, arriba) y ganan primero, así que esta nueva
   regla sube la especificidad (mismo truco de clase repetida) para ganarles a ambas. Solo afecta
   la página que declare "benefitsStyle":"pills"; el resto sigue con las cajas de 30-sep-2026.
   2 oct 2026 (2): además, ".solution-benefits{grid-column:1/-1}" (design-system.css) hace que la
   lista ocupe TODO el ancho de ".solution-copy" (que en escritorio es una grilla de 2 columnas,
   texto | video-demo) -- en ServiForms no hay video, así que esa columna derecha quedaba vacía.
   Se anula el "grid-column" para que, al no haber video, las etiquetas caigan solas en la
   segunda columna, junto al texto, en vez de dejar un hueco en blanco.
   2 oct 2026 (5), a pedido de Catalina: ese ajuste evitó la columna vacía pero creó otro
   problema -- las cápsulas, al ser angostas (ancho de su propio texto), no llenan esa segunda
   columna y sigue sobrando mucho espacio a la derecha. Se revierte a grid-column:1/-1 (como las
   cajas normales de "benefits") para que las cápsulas ocupen el ancho COMPLETO de la sección,
   debajo del texto, y se acomoden en varias líneas usando todo el espacio disponible en vez de
   quedar encajonadas en una columna angosta. */
body.has-solution-scene.has-solution-scene .solution-intro .solution-benefits--pills{grid-column:1/-1;display:flex;flex-wrap:wrap;align-content:flex-start;grid-template-columns:none;gap:10px;margin-top:16px}
body.has-solution-scene.has-solution-scene .solution-intro .solution-benefits--pills li{flex:0 0 auto;display:inline-flex;align-items:center;width:fit-content;max-width:100%;background:var(--rd-blue-soft,#e7eeff);border:1px solid transparent;border-radius:999px;padding:9px 16px 9px 14px;gap:8px;color:var(--rd-ink,#0c1524);font-size:14px;line-height:1.3}
body.has-solution-scene.has-solution-scene .solution-intro .solution-benefits--pills li:hover{border-color:var(--rd-blue,#1e5eff);background:var(--rd-blue-soft,#e7eeff)}
body.has-solution-scene.has-solution-scene .solution-benefits--pills .solution-benefit-icon{width:16px;height:16px;flex:none;color:var(--rd-blue,#1e5eff)}
body.has-solution-scene.has-solution-scene .solution-benefits--pills .solution-benefit-text{display:inline;margin-top:0}
body.has-solution-scene.has-solution-scene .solution-benefits--pills .solution-benefit-title{font-weight:600}
@media(min-width:750px){body.has-solution-scene.has-solution-scene .solution-intro .solution-benefits--pills{margin-top:22px;align-self:start}}
/* 1 oct 2026 (v3), a pedido de Catalina: ocultar solo el texto de las ex-cajas de capítulo
   ("Cargas y georreferencias...") no bastaba -- quedaba un hueco en blanco porque (a)
   visibility:hidden no saca el texto del flujo (su alto seguía reservado) y (b) design-system.css
   le fuerza a .scene-chapter un min-height de hasta 58svh (más de la mitad de la pantalla) en
   reglas más específicas que las de la v1/v2. Ahora el contenido se saca del flujo con
   display:none (solution-scene.js solo necesita la posición de .scene-chapter en sí, nunca de lo
   de adentro) y se sube la especificidad lo suficiente para ganarle a TODAS las reglas de
   design-system.css que tocan .scene-chapter, sin importar el ancho de pantalla. */
body.has-solution-scene.has-solution-scene .scene-chapter,body.has-solution-scene.has-solution-scene .scene-chapter:is(:hover,:focus-within){background:none;border:0;box-shadow:none;transform:none}
body:not(.has-ciber-scene).has-solution-scene.has-solution-scene.has-solution-scene.has-solution-scene .scene-chapter{min-height:0;padding:2px 0}
body:not(.has-ciber-scene) .scene-chapter>span,body:not(.has-ciber-scene) .scene-chapter h2,body:not(.has-ciber-scene) .scene-chapter p{display:none}
/* 1 oct 2026 (v5), a pedido de Catalina: el marcado de cada caja-capítulo trae, además del
   título y el texto, un ícono (.scene-chapter-icon) y un número (.scene-chapter-index) propios --
   design-system.css les vuelve a poner display:grid/display:block con una regla más específica
   que ".scene-chapter>span", así que seguían viéndose solos, flotando sin el título que los
   acompañaba. Se apagan también, con especificidad suficiente para ganarle a esas reglas. */
body:not(.has-ciber-scene).has-solution-scene.has-solution-scene .scene-chapter-icon,body:not(.has-ciber-scene).has-solution-scene.has-solution-scene .scene-chapter-index{display:none}
/* 1 oct 2026 (v4), a pedido de Catalina: aunque .scene-chapter ya quedó invisible y sin alto,
   el CONTENEDOR #solution-story (.solution-story) tiene su propio fondo claro de página completa
   en design-system.css (truco de box-shadow para pintar de borde a borde) más 80px de relleno
   arriba y abajo -- eso es lo que seguía apareciendo como una franja blanca (con el texto, ya
   invisible, "flotando" en blanco sobre blanco) debajo de "Cómo funciona". Se anula también aquí. */
body.has-solution-scene.has-solution-scene .solution-story{background:none;box-shadow:none;padding:0}
/* 1 oct 2026, a pedido de Catalina (revisando Smart1): el párrafo de introducción se sentía
   "muy separado" -- design-system.css fija line-height:1.7 para ese párrafo (regla global de
   legibilidad que también usan .scene-chapter p, .solution-summary y otros, por eso no se toca
   esa regla general). Aquí se apunta solo a .solution-intro p con un interlineado algo más
   compacto; aplica a todas las páginas de solución porque la plantilla es compartida. */
body.has-solution-scene.has-solution-scene .solution-intro p{line-height:1.55}
/* 1 oct 2026, a pedido de Catalina (replicar "tal cual" la landing de DataRutas): varias
   secciones nuevas que ese landing trae y el molde genérico no tenía -- subtítulo entre el h2 y
   las tarjetas de "El problema"/"Capacidades", viñetas sueltas sin descripción dentro de
   "Productos de esta Unidad" (Componentes de la solución), un video propio por unidad (demo de
   la app móvil) y la sección "Alcance de la solución" (qué cubre / qué no cubre, reutilizando el
   estilo ya existente de .solution-compare-card). */
.solution-problem-intro{font-size:16px;color:#a9bfce;line-height:1.7;max-width:640px;margin:14px auto 0}
.solution-features-intro{font-size:16px;color:#a9bfce;line-height:1.7;max-width:680px;margin-top:10px}
.solution-units-intro{font-size:16px;color:#a9bfce;line-height:1.7;max-width:680px;margin:10px 0 24px}
.unit-spec-bullets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 20px}
.unit-spec-bullets .unit-spec-bullet{font-size:15px;color:#a9bfce;padding-left:22px;position:relative}
.unit-spec-bullets .unit-spec-bullet:before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--solution-accent,#6fdaee)}
.unit-product-video{display:block;width:100%;max-width:360px;border-radius:14px;border:1px solid #2e5267;margin:0 0 20px}
.solution-scope{background:#0b1830;border-top:1px solid #1c3547;padding:64px 5%}
.solution-scope .solution-section-inner{text-align:center}
.solution-scope h2{font-size:clamp(26px,2.6vw,36px);font-weight:450;margin:10px auto 0;max-width:720px}
.solution-scope-intro{font-size:16px;color:#a9bfce;line-height:1.7;max-width:640px;margin:14px auto 0}
.solution-scope .solution-compare-grid{margin:36px auto 0;text-align:left}
@media(max-width:749px){.solution-compare-grid{grid-template-columns:1fr}.unit-product-video{max-width:100%}}
/* 2 oct 2026, a pedido de Catalina: animación de aparición al hacer scroll para las "cajas" de
   páginas internas (ver dist/app.js). Solo activa cuando la persona no pidió reducir el
   movimiento -- bajo prefers-reduced-motion:reduce las tarjetas se ven normales desde siempre. */
@media(prefers-reduced-motion:no-preference){
.reveal-on-scroll{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal-on-scroll.is-revealed{opacity:1;transform:none}
}
/* 2 oct 2026, a pedido de Catalina (Logística, "Productos de esta Unidad"): el archivo
   google-maps-platform.webp trae el ícono/texto bastante más chico y liviano dentro de su
   propio lienzo que los demás logos de esta fila (Smart1, ServiRoutes, DataRutas, ServiForms),
   así que a la misma altura CSS (34px/30px, la regla compartida .unit-product-logo) se veía
   visiblemente más pequeño. Se compensa subiendo la altura solo de este logo; los demás no se
   tocan porque su contenido ya ocupa el lienzo de forma pareja. */
body.has-solution-scene.has-solution-scene .unit-product-logo[src*="google-maps-platform"]{height:37px}
@media(min-width:750px){
  body.has-solution-scene.has-solution-scene .unit-product-logo[src*="google-maps-platform"]{height:42px}
}
/* 2 oct 2026 (2), a pedido de Catalina: con el ajuste anterior ya resuelto, DataRutas quedó
   como el logo que se percibe más "pesado"/grande de la fila -- su tipografía es más gruesa y
   ocupa casi todo el alto del lienzo, a diferencia de los demás. No es un error de tamaño del
   archivo (se revisó y el lienzo es igual de parejo que el resto); es una diferencia de diseño
   del logo. Se compensa bajando levemente su altura para equilibrar la fila. Mismo criterio y
   mismo valor (25px) que ya usa este logo en la grilla "Desarrollo propio" del home
   (design-system.css, .rd-unidad-logos img[src*="datarutas"]) -- se iguala con ese precedente
   en vez de inventar un valor nuevo. */
body.has-solution-scene.has-solution-scene .unit-product-logo[src*="datarutas"]{height:22px}
@media(min-width:750px){
  body.has-solution-scene.has-solution-scene .unit-product-logo[src*="datarutas"]{height:25px}
}
/* 2 oct 2026 (3): se extiende el mismo criterio a SitiData (página Dataquality), igualando el
   valor que ya usa en el home (.rd-unidad-logos img[src*="sitidata"], 36px sobre una base de
   34px) para que un mismo logo se vea con el mismo tamaño relativo en todo el sitio. */
body.has-solution-scene.has-solution-scene .unit-product-logo[src*="sitidata"]{height:32px}
@media(min-width:750px){
  body.has-solution-scene.has-solution-scene .unit-product-logo[src*="sitidata"]{height:36px}
}
/* 2 oct 2026 (4), a pedido de Catalina: visualmente, "Productos de esta Unidad" debía verse
   como las tarjetas de "Desarrollo propio" del home (.rd-unidad) -- mismo fondo (--rd-paper en
   vez de blanco puro) y mismo efecto hover (se eleva un poco y el borde se pone azul), aunque
   la tarjeta siga siendo un <details> desplegable (no se quitan las fichas técnicas, solo se
   iguala la apariencia). */
body.has-solution-scene.has-solution-scene .unit-product{background:var(--rd-paper,#f6f8fb);transition:border-color .2s,transform .2s}
body.has-solution-scene.has-solution-scene .unit-product:hover{border-color:var(--rd-blue,#1e5eff);transform:translateY(-2px)}
/* 2 oct 2026 (6), a pedido de Catalina: en TODAS las páginas de producto, el párrafo de
   introducción quedaba pegado justo debajo del título grande (h2), sin aire entre los dos.
   Causa: design-system.css, en el tema claro de escritorio (>=750px), pone
   ".solution-intro p{margin-top:0}" -- misma especificidad que la regla original de
   interiors.css (margin-top:24px) pero cargada después, así que gana y deja el espaciado en
   cero. Se restaura el espacio con una regla más específica (mismo truco de clase repetida). */
@media(min-width:750px){
  body.has-solution-scene.has-solution-scene .solution-intro p{margin-top:24px}
}
/* 2 oct 2026 (7), a pedido de Catalina (ServiRoutes, "PLATAFORMA"): con exactamente 6 tarjetas,
   la rejilla flexible de "Capacidades clave" (auto-fit, mínimo 200px) dejaba 5 en una fila y 1
   sola huérfana en la fila siguiente. Se fuerza una rejilla pareja de 3+3 solo cuando hay
   exactamente 6 tarjetas (nuevo atributo data-count en build-interiors.py); el resto de páginas
   (con 2, 3, 4 o 5 tarjetas) sigue con la rejilla flexible de siempre, sin cambios.
   19 oct 2026: a esta regla le faltaba el `@media(min-width:750px)` que sí tiene su regla
   hermana de data-count="5" (justo abajo). Sin ese límite, las 3 columnas se forzaban también
   en celular, dejando tarjetas de ~98px de ancho y el texto (en "Soluciones para cada decisión
   territorial" y en "Casos de uso", ambas con 6 tarjetas) se desbordaba y quedaba cortado por
   las tarjetas vecinas. Se agrega el mismo media query para que en móvil vuelva a la rejilla
   flexible de 1 columna. */
@media(min-width:750px){
  body.has-solution-scene.has-solution-scene .solution-features-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 6 oct 2026, a pedido de Catalina (MSSP, "Google Unified Security"): con exactamente 5
   tarjetas -- ahora más grandes porque llevan el logo del producto -- se fuerza la misma rejilla
   pareja de 3+2 que ella ya veía, en vez de dejarla a la rejilla flexible (que con el ancho nuevo
   de las tarjetas podía partir en 4+1 según el ancho de pantalla). */
@media(min-width:750px){
  body.has-solution-scene.has-solution-scene .solution-features-grid[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 2 oct 2026 (8), a pedido de Catalina: "fatiga visual" -- de las 7 secciones de la plantilla
   de página de producto, solo 3 (.solution-intro, .solution-story, .solution-content) tenían
   el tema claro que design-system.css aplica al resto del sitio. "Casos de uso" y "Capacidades"
   tienen párrafos largos y se quedaban SIEMPRE oscuras, sin excepción -- eso sí cansaba la
   lectura. Se les da el mismo tratamiento claro (fondo --rd-paper, texto --rd-ink/--rd-ink2,
   tarjetas blancas con borde --rd-line, igual que ya usan .solution-benefits y las tarjetas
   .rd-unidad del home).
   "Cifras" y "Diferenciales" (etiquetas) se dejan DELIBERADAMENTE en su fondo oscuro original
   -- decisión de diseño UX revisada y confirmada con Catalina el 2 oct 2026 tras ver el cambio
   navegado, no solo en capturas: ambas son contenido corto, de un vistazo (números grandes,
   etiquetas de una línea), no sufren la fatiga de leer párrafos sobre fondo oscuro, y sirven
   como "banda de énfasis" que mantiene el ritmo oscuro/claro de la página -- si las cuatro
   secciones pasaran a claro, el Hero oscuro con el modelo 3D quedaría como un bloque aislado y
   el resto del recorrido se sentiría plano, sin pulso. Con esto el recorrido queda: Hero oscuro
   (impacto) -> Intro claro (lectura) -> Cifras oscuro (impacto) -> Casos de uso y Capacidades
   claro (lectura) -> cierre.
   Aplica en escritorio Y en móvil (no solo >=750px, a diferencia de otros ajustes de tema
   claro) porque la fatiga visual en los textos largos ocurre en cualquier tamaño de pantalla.
   Nota de color: estas secciones usaban --solution-accent-text (versión ACLARADA del acento de
   cada página, calculada solo para que sea legible como texto sobre fondo oscuro -- ver
   comentario del 2 oct en build-interiors.py). Sobre fondo claro esa versión aclarada se ve muy
   pálida y pierde contraste, así que aquí se usa --solution-accent directamente (el tono
   original, ya pensado para verse bien como texto sobre blanco). */
body.has-solution-scene.has-solution-scene .solution-usecases,
body.has-solution-scene.has-solution-scene .solution-features{background:var(--rd-paper,#f6f8fb);color:var(--rd-ink,#0c1524);border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-usecases h2,
body.has-solution-scene.has-solution-scene .solution-features h2{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-features-intro{color:var(--rd-ink2,#46586a)}
body.has-solution-scene.has-solution-scene .solution-usecase,
body.has-solution-scene.has-solution-scene .solution-feature-card{background:#fff;border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-usecase h3,
body.has-solution-scene.has-solution-scene .solution-feature-card h3{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-usecase p,
body.has-solution-scene.has-solution-scene .solution-feature-card p{color:var(--rd-ink2,#46586a)}
/* 5 oct 2026, a pedido de Catalina (revisando SitiData contra su página de referencia
   https://sitidata.soluciones.servinformacion.com/): el sitio de referencia alterna fondo
   oscuro/claro sección por sección; esta plantilla (compartida por las páginas de producto
   tipo "datos": SitiData, Geomarketing, DataRutas, Smart1, ServiForms, ServiRoutes, Google
   Maps Platform, CertiTalent, etc.) se quedaba siempre oscura en "Cómo funciona",
   "Comparación" y "Cobertura" -- misma fatiga visual que ya se corrigió el 2 oct 2026 para
   "Casos de uso"/"Capacidades", y mismo criterio: son secciones de lectura larga (pasos
   explicados, tablas, tarjetas de comparación), pasan a claro (mismas variables --rd-paper/
   --rd-ink/--rd-ink2/--rd-line y mismo truco de especificidad -- clase repetida -- que ya
   usan .solution-usecases/.solution-features). "Cifras", "Diferenciales" (etiquetas) y
   "Demo" se dejan oscuros, SIN CAMBIOS: mismo criterio ya confirmado con Catalina el 2 oct
   2026 (contenido corto/de un vistazo que mantiene el pulso oscuro/claro de la página); en
   la propia referencia de SitiData, "Demo" también se queda oscuro. */
body.has-solution-scene.has-solution-scene .solution-steps,
body.has-solution-scene.has-solution-scene .solution-comparison,
body.has-solution-scene.has-solution-scene .solution-coverage,
body.has-solution-scene.has-solution-scene .solution-faq{background:var(--rd-paper,#f6f8fb);color:var(--rd-ink,#0c1524);border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-steps h2,
body.has-solution-scene.has-solution-scene .solution-comparison h2,
body.has-solution-scene.has-solution-scene .solution-coverage h2,
body.has-solution-scene.has-solution-scene .solution-faq h2{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-steps .eyebrow,
body.has-solution-scene.has-solution-scene .solution-comparison .eyebrow,
body.has-solution-scene.has-solution-scene .solution-coverage .eyebrow,
body.has-solution-scene.has-solution-scene .solution-faq .eyebrow{color:var(--solution-accent-deep,#0d6272)}
body.has-solution-scene.has-solution-scene .solution-step h3{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-step p{color:var(--rd-ink2,#46586a)}
body.has-solution-scene.has-solution-scene .solution-compare-card--no{background:#fff;border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-compare-card--yes{background:#fff;border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-compare-card--no h3{color:#6b7a89}
body.has-solution-scene.has-solution-scene .solution-compare-card--no li{color:var(--rd-ink2,#46586a)}
body.has-solution-scene.has-solution-scene .solution-compare-card--yes li{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-compare-card--neutral{background:#fff;border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-compare-card--neutral h3{color:var(--solution-accent-text,var(--solution-accent))}
body.has-solution-scene.has-solution-scene .solution-compare-card--neutral li{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-coverage-intro{color:var(--rd-ink2,#46586a)}
body.has-solution-scene.has-solution-scene .solution-coverage-scroll{border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-coverage-table th{color:var(--rd-ink2,#46586a);border-color:var(--rd-line,#dce3ec);background:#eef1f5}
body.has-solution-scene.has-solution-scene .solution-coverage-table td{color:var(--rd-ink,#0c1524);border-color:#dce3ec90}
body.has-solution-scene.has-solution-scene .solution-coverage-row--highlight td{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-coverage-name{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-coverage-badge{background:#e3e9f0}
body.has-solution-scene.has-solution-scene .solution-coverage-footnote{color:#6b7a89}
body.has-solution-scene.has-solution-scene .solution-faq-item{border-color:var(--rd-line,#dce3ec)}
body.has-solution-scene.has-solution-scene .solution-faq-item summary{color:var(--rd-ink,#0c1524)}
body.has-solution-scene.has-solution-scene .solution-faq-toggle{background:#e3e9f0}
body.has-solution-scene.has-solution-scene .solution-faq-answer p{color:var(--rd-ink2,#46586a)}
body.has-solution-scene.has-solution-scene .solution-feature-card-icon{color:var(--solution-accent,#1e5eff);background:var(--solution-accent-soft,#e7eeff)}
/* 2 oct 2026, a pedido de Catalina: revisando el cambio navegado (no solo en captura), las
   insignias y los "eyebrow" (SOLUCIONES/PLATAFORMA) en texto pequeño se perdían sobre fondo
   claro -- el acento de casi todas las páginas es un tono CLARO pensado para leerse sobre fondo
   oscuro (cian genérico #6fdaee u otro). Para texto pequeño sobre blanco se usa en su lugar
   --solution-accent-deep (misma tonalidad de marca, pero con suficiente contraste -- ver
   _accent_deep en build-interiors.py); el icono de .solution-feature-card-icon no cambia,
   porque va dentro de su propio chip de color y no tiene el mismo problema de contraste. */
body.has-solution-scene.has-solution-scene .solution-usecase-badge{color:var(--solution-accent-deep,#0d6272)}
body.has-solution-scene.has-solution-scene .solution-usecases .eyebrow,
body.has-solution-scene.has-solution-scene .solution-features .eyebrow{color:var(--solution-accent-deep,#0d6272)}
</content>

/* 5 oct 2026 -- Explorador de Casos de Éxito con pestañas (Historias Google Cloud /
   Gestionados por Servinformación), buscador y filtros, replicando el patrón de la
   herramienta de referencia interna (casosdeexitoservinformacion.lovable.app). A
   propósito NO se incluye la pestaña "Productos Propios" (casos aún no publicables)
   ni los campos internos "Responsable comercial" / estado "Publicado"-"Privado" de
   esa herramienta: Catalina confirmó que esos datos no deben salir al sitio público.
   .solution-content en estas páginas usa el tema claro (--rd-mist/--rd-ink, ver
   design-system.css), por eso esta sección usa esos mismos tokens en vez de la
   paleta oscura del resto de interiors.css. */
.cases-explorer>p{max-width:760px}
.cases-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:32px;padding:6px;border-radius:999px;background:var(--rd-mist);border:1px solid var(--rd-line)}
.cases-tab{font-size:15px;font-weight:600;color:var(--rd-ink2);padding:12px 22px;min-height:44px;border:0;border-radius:999px;background:transparent;cursor:pointer;transition:color .2s,background-color .2s,box-shadow .2s;font-family:inherit}
.cases-tab:hover{color:var(--rd-ink)}
.cases-tab.is-active{color:#03202b;background:#6ce4f4;box-shadow:none}
.cases-panel{margin-top:34px}
.cases-panel-intro{max-width:760px;color:var(--rd-ink2)}
.gcloud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.gcloud-card{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--rd-line);border-top:2px solid #f6ad55;border-radius:10px;background:#fff;transition:transform .2s,box-shadow .2s}
.gcloud-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(12,21,36,.35)}
.gcloud-card-top{display:flex;align-items:center;justify-content:space-between;color:var(--rd-blue)}
.gcloud-card-brand{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.07em;color:var(--rd-blue)}
.gcloud-card h3{font-size:21px;font-weight:450;margin:0}
.gcloud-card-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--rd-ink2)}
.cases-toolbar{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cases-search{flex:1 1 240px;min-width:0}
.cases-search input,.cases-filter select{width:100%;min-height:46px;padding:0 16px;border:1px solid var(--rd-line);border-radius:8px;background:#fff;color:var(--rd-ink);font-size:15px;font-family:inherit}
.cases-filter{flex:0 1 190px;min-width:0}
.cases-search input::placeholder{color:var(--rd-ink2)}
.cases-search input:focus,.cases-filter select:focus{outline:2px solid var(--rd-blue);outline-offset:2px}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;margin-top:34px}
.case-card{display:flex;flex-direction:column;border:1px solid var(--rd-line);border-radius:10px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.case-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(12,21,36,.35)}
.case-card:hover h3{color:var(--rd-blue)}
.case-card-image{margin:0;aspect-ratio:1.65;background:var(--rd-mist);overflow:hidden}
.case-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.case-card:hover .case-card-image img{transform:scale(1.035)}
.case-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.case-card-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--rd-blue);margin-bottom:12px}
.case-card h3{font-size:19px;font-weight:450;margin:0 0 6px;line-height:1.3;transition:color .2s}
.case-card-title{font-size:13px;color:var(--rd-ink2);line-height:1.55;margin:0 0 14px}
.case-card-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px}
.case-card-chips li{font-size:12px;color:var(--rd-ink2);padding:5px 11px;border:1px solid var(--rd-line);border-radius:999px}
.case-card-cta{margin-top:auto;font-size:13px;color:var(--rd-blue)}
.cases-empty{margin-top:30px;color:var(--rd-ink2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:1000px){
 .gcloud-grid{grid-template-columns:repeat(2,1fr)}
 .cases-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:749px){
 .cases-tabs{gap:6px}
 .cases-tab{font-size:14px;padding:12px 4px}
 .gcloud-grid,.cases-grid{grid-template-columns:1fr}
 .cases-filter{flex:1 1 100%}
}
/* 7 oct 2026, a pedido de Catalina (páginas de Industrias, "insumos finales"): sección de los
   4 pilares por industria, con el detalle completo del documento maestro (problema, qué
   analizamos, productos enlazados, resultado medible). Fondo claro a propósito, para alternar
   con las secciones oscuras vecinas ("El problema" y la narrativa de scroll) y evitar fatiga
   visual en páginas largas -- mismo criterio y mismas variables (--rd-paper/--rd-ink/--rd-ink2/
   --rd-line) que ya usan "Casos de uso"/"Capacidades" en el resto del sitio.
*/
.solution-pilares{background:var(--rd-paper,#f6f8fb);color:var(--rd-ink,#0c1524);padding:64px 5%;border-top:1px solid var(--rd-line,#dce3ec);border-bottom:1px solid var(--rd-line,#dce3ec)}
.solution-pilares h2{color:var(--rd-ink,#0c1524);font-size:clamp(26px,2.6vw,36px);font-weight:450;margin:10px auto 0;max-width:760px;text-align:center}
.solution-pilares .solution-problem-intro{color:var(--rd-ink2,#46586a);text-align:center}
/* 7 oct 2026, a pedido de Catalina: con "auto-fit" las 4 tarjetas cortas se acomodaban en 3+1,
   dejando la última huérfana en su propia fila (el ancho disponible alcanzaba para 3 columnas de
   280px pero no para 4). Se fijan los saltos de columnas por breakpoint en vez de auto-fit, para
   que la rejilla quede siempre nivelada: 1 columna en móvil, 2 en tablet/escritorio angosto, 4 en
   escritorio ancho -- nunca una fila a medias. */
.solution-pilares-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:40px}
@media(min-width:700px){.solution-pilares-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.solution-pilares-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.solution-pilares .solution-section-inner{max-width:1400px}}
.solution-pilar-card{background:#fff;border:1px solid var(--rd-line,#dce3ec);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px}
.solution-pilar-head{display:flex;flex-direction:column;gap:10px}
.solution-pilar-head .solution-step-badge{align-self:flex-start}
.solution-pilar-category{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--solution-accent-deep,var(--solution-accent));font-weight:700;margin:0}
.solution-pilar-head h3{font-size:19px;font-weight:600;color:var(--rd-ink,#0c1524);margin:0}
.solution-pilar-problem{font-size:15px;line-height:1.7;color:var(--rd-ink2,#46586a);font-weight:600;margin:0}
.solution-pilar-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--rd-ink2,#46586a);margin:10px 0 0;font-weight:700}
.solution-pilares .solution-pilar-list{margin-top:10px;gap:8px}
.solution-pilares .solution-pilar-list li{background:var(--rd-paper,#f6f8fb);border-color:var(--rd-line,#dce3ec);color:var(--rd-ink,#0c1524);padding:12px 14px;font-size:14px}
.solution-pilares .solution-pilar-list .solution-benefit-icon{color:var(--solution-accent-deep,var(--solution-accent))}
.solution-pilar-products{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.solution-pilar-products li{font-size:14px;line-height:1.6;color:var(--rd-ink2,#46586a)}
.solution-pilar-products .text-link{color:var(--solution-accent-deep,var(--solution-accent));font-weight:600}
.solution-pilar-result{margin-top:4px;padding-top:14px;border-top:1px dashed var(--rd-line,#dce3ec)}
.solution-pilar-result p{margin:0;font-size:14px;font-weight:600;color:var(--rd-ink,#0c1524)}
@media(max-width:749px){.solution-pilares{padding:45px 6%}.solution-pilares-grid{gap:18px;margin-top:28px}.solution-pilar-card{padding:22px}}
/* 14 oct 2026, a pedido de Catalina (reorganización de Ciberseguridad): "mapa interactivo" de
   zonas de protección (Google Cloud Security, Fabricantes y Aliados). Mismo fondo claro que
   "solution-pilares" para alternar con las secciones oscuras vecinas; cada zona es un <details>
   nativo (mismo mecanismo que "solution-faq-item") para que la zona se abra/cierre igual en
   escritorio y móvil, sin JavaScript ni dependencia de hover, como pide el documento. Una zona
   sin fabricante aún validado se muestra como tarjeta estática (sin flecha ni interacción). */
.solution-zone-map{background:var(--rd-paper,#f6f8fb);color:var(--rd-ink,#0c1524);padding:64px 5%;border-top:1px solid var(--rd-line,#dce3ec);border-bottom:1px solid var(--rd-line,#dce3ec)}
.solution-zone-map h2{color:var(--rd-ink,#0c1524);font-size:clamp(26px,2.6vw,36px);font-weight:450;margin:10px auto 0;max-width:760px;text-align:center}
.solution-zone-map-intro{color:var(--rd-ink2,#46586a);text-align:center;margin:14px auto 0;max-width:640px}
.solution-zone-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
@media(min-width:700px){.solution-zone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.solution-zone-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.solution-zone-map .solution-section-inner{max-width:1400px}}
.solution-zone-card{background:#fff;border:1px solid var(--rd-line,#dce3ec);border-radius:16px;padding:0}
.solution-zone-card summary{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:24px 26px;cursor:pointer;list-style:none}
.solution-zone-card summary::-webkit-details-marker{display:none}
.solution-zone-card-head{display:flex;flex-direction:column;gap:8px}
.solution-zone-card-head h3{font-size:18px;font-weight:600;color:var(--rd-ink,#0c1524);margin:0}
.solution-zone-card-head p{font-size:14px;line-height:1.6;color:var(--rd-ink2,#46586a);margin:0}
.solution-zone-toggle{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--rd-paper,#f6f8fb);color:var(--solution-accent-deep,var(--solution-accent));transition:transform .25s ease;margin-top:2px}
.solution-zone-card[open] .solution-zone-toggle{transform:rotate(180deg)}
.solution-zone-detail{padding:0 26px 24px;border-top:1px solid var(--rd-line,#dce3ec);margin-top:-2px}
.solution-zone-detail-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--solution-accent-deep,var(--solution-accent));font-weight:700;margin:18px 0 8px}
.solution-zone-detail p+p{margin-top:8px}
.solution-zone-detail p{font-size:14px;line-height:1.6;color:var(--rd-ink,#0c1524);margin:0}
.solution-zone-card--static{padding:24px 26px}
.solution-zone-card--static .solution-zone-card-head{gap:8px}
.solution-zone-pending{font-size:12px;font-style:italic;color:var(--rd-ink2,#46586a);margin:10px 0 0}
@media(max-width:749px){.solution-zone-map{padding:45px 6%}.solution-zone-grid{gap:14px;margin-top:28px}.solution-zone-card summary,.solution-zone-card--static{padding:20px}.solution-zone-detail{padding:0 20px 20px}}
/* 14 oct 2026, a pedido de Catalina: recuperar la franja de transición 3D (imagen fija + texto
   del capítulo) SOLO en las 4 páginas del clúster de Ciberseguridad, que aún no está aprobado y
   necesita apoyos visuales -- el resto del sitio ya está aprobado con esa franja oculta (ver el
   bloque "1 oct 2026" más arriba) y no se toca. build-interiors.py agrega la clase
   "has-ciber-scene" solo a esas 4 páginas; las reglas de arriba que apagaban el texto/alto del
   capítulo ahora se excluyen con ":not(.has-ciber-scene)", así que en estas páginas vuelve a regir
   el diseño original de este mismo archivo (el de más arriba: min-height, ancho, tipografía y
   colores de .scene-chapter), que ya estaba pensado para verse sobre la imagen 3D fija del fondo.
   Solo se restaura aquí el padding horizontal de la franja (el fondo sigue transparente a
   propósito, para que la imagen 3D se seguir viendo detrás) y se ordena en fila el ícono+número. */
body.has-ciber-scene.has-solution-scene .solution-story{padding:0 5%}
body.has-ciber-scene .scene-chapter-icon,
body.has-ciber-scene .scene-chapter-index{display:inline-flex;align-items:center}
body.has-ciber-scene .scene-chapter-icon{margin-right:8px}
/* 14 oct 2026 (v2), a pedido de Catalina: las tarjetas heredadas del sitio anterior dentro de
   .solution-content (ej. "Google Cloud Security: Protección Inteligente para la Nube", con su
   imagen 3D) se veían pálidas/lavadas. Causa real: design-system.css fuerza TODO .solution-content
   a tema claro en todas las páginas de solución (pensado para texto de artículo heredado) -- pero
   esas tarjetas en particular (.solution-feature-copy, .feature-index) ya estaban escritas en el
   mismo design-system.css para fondo OSCURO (colores claros, e img{mix-blend-mode:screen}, que
   solo luce bien sobre oscuro). Independiente de "has-ciber-scene" (desactivada arriba):
   "has-ciber-legacy" revierte el tema claro de .solution-content SOLO en estas 4 páginas.
   Las dos reglas de :is(...) duplican la clase "has-ciber-legacy" a propósito: las reglas
   equivalentes de design-system.css llevan además ":not(.button *)", que sube su especificidad
   a la par de la de aquí -- sin ese duplicado, en el empate gana design-system.css por cargar
   después en el <head> (confirmado en vivo: el texto seguía oscuro sobre claro sin este ajuste). */
body.has-ciber-legacy.has-solution-scene .solution-content{background:#030a13;color:#aac0ce}
body.has-ciber-legacy.has-solution-scene .solution-content .inner-section{border-bottom-color:#1c3547}
body.has-ciber-legacy.has-solution-scene.has-ciber-legacy .solution-content :is(h1,h2,h3,h4,h5,strong,b,th,dt,blockquote){color:#eef6fa}
body.has-ciber-legacy.has-solution-scene.has-ciber-legacy .solution-content :is(p,li,td,dd,span,small,time,figcaption,label,em){color:#aac0ce}
body.has-ciber-legacy.has-solution-scene .solution-content a:not(.button){color:#6fdaee}
body.has-ciber-legacy.has-solution-scene .solution-content a:not(.button) :is(h2,h3,h4,strong){color:#eef6fa}
body.has-ciber-legacy.has-solution-scene.has-ciber-legacy .solution-content .feature-index{color:#7bdbea}
.unit-group-title{font-size:20px;font-weight:600;margin:40px 0 18px;color:var(--rd-ink,#0C1524)}.unit-group-title:first-child{margin-top:0}.unit-products .solution-units-intro{color:var(--rd-ink2,#3E4A5C)}.unit-products .unit-spec-bullets .unit-spec-bullet{color:var(--rd-ink2,#3E4A5C)}body.has-solution-scene.has-benefits-balanced .solution-intro .solution-benefits{grid-template-columns:none;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:960px;margin-left:auto;margin-right:auto}body.has-solution-scene.has-benefits-balanced .solution-intro .solution-benefits li{flex:0 1 210px;width:210px}

/* 19 oct 2026, a pedido de Catalina: el oscurecimiento de "Continúa explorando" de abajo
   (16 oct 2026) solo estaba dentro de @media(min-width:750px). En celular, design-system.css
   también convierte .solution-content en "papel claro" (sección 11, sin media query, por eso
   el texto ya pasa a tinta oscura ahí) pero esta sección nunca recibía su reversión a oscuro:
   quedaba con fondo claro, el enlace sin su propio color (heredaba el azul tenue de .solution-
   content) y, sobre todo, la imagen de cada tarjeta seguía con mix-blend-mode:screen (pensada
   para fondo oscuro) -- contra un fondo claro ese blend casi la borra por completo. Resultado:
   en el celular de Catalina, "Continúa explorando" se veía con fondo claro y las imágenes
   prácticamente invisibles. Se repite aquí, SIN media query, el mismo oscurecimiento (y se
   compensa el padding-top con los 30px propios de .solution-content en móvil en vez de los
   70px de escritorio). Las reglas de carrusel/rejilla de 3 columnas de abajo sí son solo de
   escritorio -- en móvil "Continúa explorando" ya usa su propia rejilla de 1 columna. */
body.has-solution-scene.has-solution-scene .solution-related,
body.has-solution-scene.has-solution-scene .solution-sources{position:relative;z-index:1;background:#030a13;box-shadow:0 0 0 100vmax #030a13;clip-path:inset(0 -100vmax)}
body.has-solution-scene.has-solution-scene .solution-related h2{color:#eef6fa}
body.has-solution-scene.has-solution-scene .related-page-grid>a{color:#eef6fa}
body.has-solution-scene.has-solution-scene .related-page-name{color:#eef6fa}
body.has-solution-scene.has-solution-scene .solution-content .related-page-grid span{color:#66cbe0}
body.has-solution-scene.has-solution-scene .solution-content .related-page-grid a:hover .related-page-name span,
body.has-solution-scene.has-solution-scene .solution-content .related-page-grid a:focus-visible .related-page-name span{background:#a6edf5;color:#04111b}
body.has-solution-scene.has-solution-scene .solution-content .solution-sources a{color:#eef6fa}
body.has-solution-scene.has-solution-scene .solution-content .solution-sources a:hover{color:#b2e6f5}
body.has-solution-scene.has-solution-scene .solution-content>.solution-related:first-child{margin-top:-30px;padding-top:95px}
body.has-solution-scene.has-solution-scene .solution-content>.solution-sources:first-child{margin-top:-30px;padding-top:48px}
/* 16 oct 2026, a pedido de Catalina: en el diseño original "Continúa explorando" se mantenía
   oscuro en toda la página. El cambio de "papel claro" para el contenido de las páginas de
   solución en escritorio (design-system.css, @media(min-width:750px)) convirtió también esta
   sección en tarjetas blancas -- se revierte SOLO esta sección a oscuro, dejando el resto del
   contenido (Productos de esta Unidad, Casos de éxito, etc.) en el fondo claro ya aprobado. */
@media(min-width:750px){
  body.has-solution-scene.has-solution-scene .solution-related{position:relative;z-index:1;background:#030a13;box-shadow:0 0 0 100vmax #030a13;clip-path:inset(0 -100vmax)}
  body.has-solution-scene.has-solution-scene .solution-content .solution-related-heading>h2{color:#eef6fa}
  /* 16 oct 2026, a pedido de Catalina: carrusel cuando "Continúa explorando" trae más de 3
     tarjetas (antes pasaban a una segunda fila), mismo patrón de riel que los Premios del Home. */
  body.has-solution-scene.has-solution-scene .related-page-grid.is-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body.has-solution-scene.has-solution-scene .related-page-grid.is-carousel::-webkit-scrollbar{display:none}
  body.has-solution-scene.has-solution-scene .related-page-grid.is-carousel>a{flex:0 0 calc((100% - 56px)/3);min-width:260px;scroll-snap-align:start}
  body.has-solution-scene.has-solution-scene .solution-related .rail-controls button{width:40px;height:40px;border:1px solid #2e5267;border-radius:50%;color:#eef6fa;background:transparent}
  body.has-solution-scene.has-solution-scene .solution-related .rail-controls button:hover{background:#66cbe0;border-color:#66cbe0;color:#04111b}
  body.has-solution-scene.has-solution-scene .related-page-grid>a{background:transparent;border:0;border-top:1px solid #2e5267;border-radius:0;padding:28px 0;color:#eef6fa}
  body.has-solution-scene.has-solution-scene .related-scene-image{mix-blend-mode:screen;background:transparent;border-radius:0;aspect-ratio:1.8;max-height:215px}
  body.has-solution-scene.has-solution-scene .related-page-name{padding:0;color:#eef6fa}
  body.has-solution-scene.has-solution-scene .solution-content .related-page-grid span{color:#66cbe0}
  body.has-solution-scene.has-solution-scene .solution-content .related-page-grid a:hover .related-page-name span,body.has-solution-scene.has-solution-scene .solution-content .related-page-grid a:focus-visible .related-page-name span{background:#a6edf5;color:#04111b}
  body.has-solution-scene.has-solution-scene .solution-sources{position:relative;z-index:1;background:#030a13;box-shadow:0 0 0 100vmax #030a13;clip-path:inset(0 -100vmax)}
  body.has-solution-scene.has-solution-scene .solution-content .solution-sources a{color:#eef6fa}
  body.has-solution-scene.has-solution-scene .solution-content .solution-sources a:hover{color:#b2e6f5}
  /* 16 oct 2026: al volver .solution-related/.solution-sources a fondo oscuro, quedó un espacio
     claro feo arriba (el padding-top:70px propio de .solution-content, que sigue en el gris claro
     "light paper" de escritorio) cuando esa sección es la primera dentro de .solution-content --
     que es el caso en TODAS las páginas de solución, ya que las "Unidades" (productUnits) se
     renderizan antes de .solution-content, no dentro. Se extiende el fondo oscuro hacia arriba con
     margin-top negativo, compensando con más padding-top para que el título no se mueva de lugar.
  */
  body.has-solution-scene.has-solution-scene .solution-content>.solution-related:first-child,
  body.has-solution-scene.has-solution-scene .solution-content>.solution-sources:first-child{margin-top:-70px;padding-top:135px}
}
/* 20 oct 2026, a pedido de Catalina: solo en "Acuerdo Marco de Precios" (clase propia
   has-chapters-visible, ver build-interiors.py), el título, el texto, el ícono y el número de
   cada .scene-chapter SÍ deben verse -- el resto del sitio los sigue ocultando (son solo el
   ancla de la animación 3D en las demás páginas de producto). !important porque la regla que
   oculta este texto (arriba, "body:not(.has-ciber-scene)...") ya usa varias clases repetidas
   para ganar especificidad. */
/* 20 oct 2026 (2), a pedido de Catalina: en vez de un fondo oscuro con texto claro (que chocaba
   con el estilo de tarjeta clara que design-system.css ya trae para .scene-chapter en escritorio,
   generando un degradado residual que tapaba el ícono y textos poco legibles), se arma aquí una
   tarjeta blanca propia y explícita -- igual de clara en celular y en escritorio, igual que las
   tarjetas de "Beneficios" de esta misma página -- que reemplaza por completo el estilo oscuro
   pensado para cuando este texto estaba oculto. !important porque hay que ganarle tanto a la regla
   que oculta este texto en el resto del sitio (arriba, "body:not(.has-ciber-scene)...") como al
   estilo propio de design-system.css para estos mismos elementos. */
body.has-chapters-visible.has-solution-scene .scene-chapter{display:block!important;min-height:auto!important;width:100%!important;max-width:620px!important;padding:28px 26px!important;margin:16px 0!important;background:#fff!important;border:1px solid #d9e1ea!important;border-radius:16px!important;box-shadow:0 1px 3px #0c15240d!important}
body.has-chapters-visible .scene-chapter:before{display:none!important}
body.has-chapters-visible .scene-chapter>span:not(.scene-chapter-icon),
body.has-chapters-visible .scene-chapter h2,
body.has-chapters-visible .scene-chapter p{display:block!important}
body.has-chapters-visible .scene-chapter>span:not(.scene-chapter-icon){color:#0d6272!important;font-weight:600!important}
body.has-chapters-visible .scene-chapter h2{color:#0c1524!important}
body.has-chapters-visible .scene-chapter p{color:#3e4a5c!important}
body.has-chapters-visible .scene-chapter-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:48px!important;border-radius:12px!important;background:#e7eeff!important;color:#1e5eff!important;margin:0 0 14px!important}
body.has-chapters-visible .scene-chapter-index{display:block!important;margin-top:0!important;font-size:13px!important;font-weight:600!important;letter-spacing:.08em!important;color:#3e4a5c!important}
/* 20 oct 2026 (4), a pedido de Catalina: la última fila de tarjetas se veía "tenue"/con una
   especie de opacidad justo antes de "Continúa explorando". Dos causas, ambas heredadas de
   plantillas pensadas para otro diseño de esta misma sección: (a) .solution-story::before/::after
   son franjas degradadas de 80-140px pensadas para difuminar los bordes de la variante de fondo
   claro (var(--rd-mist)) que esta página no usa -- aquí solo tapaban el borde inferior de las
   tarjetas con un velo; (b) cada .scene-chapter recibe de site-wide JS (app.js) la clase
   "reveal-on-scroll" (aparece con opacity:0 hasta que el observer de scroll agrega
   "is-revealed") -- pensada para que las tarjetas aparezcan una a una al hacer scroll, pero en
   esta página se ven varias a la vez en cuadrícula, así que conviene que estén visibles de
   inmediato en vez de depender de ese efecto. */
body.has-chapters-visible .solution-story:before,
body.has-chapters-visible .solution-story:after{display:none!important}
body.has-chapters-visible .scene-chapter.reveal-on-scroll{opacity:1!important;transform:none!important;transition:none!important}
/* 20 oct 2026 (5), a pedido de Catalina: la imagen de Colombia Compra Eficiente quedaba repetida
   (una copia a la izquierda del texto introductorio y otra en el recuadro de la derecha). Se quitó
   la de la izquierda (ver build-interiors.py: para esta página el logo se reemplaza por una
   cajita que enlaza a IAD, no por una imagen) y aquí se le da estilo de tarjeta clara a esa
   cajita, consistente con el resto de la página. */
body.has-chapters-visible .solution-iad-crosslink{display:flex!important;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 22px;margin-bottom:24px;background:#fff;border:1px solid #d9e1ea;border-radius:14px;box-shadow:0 1px 3px #0c15240d;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;text-decoration:none}
body.has-chapters-visible .solution-iad-crosslink:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px #1e5eff55;border-color:#1e5eff}
body.has-chapters-visible .solution-iad-crosslink-eyebrow{font-size:12px;letter-spacing:.07em;color:#0d6272;font-weight:600}
body.has-chapters-visible .solution-iad-crosslink strong{font-size:17px;line-height:1.35;color:#0c1524;font-weight:600}
body.has-chapters-visible .solution-iad-crosslink-arrow{color:#1e5eff;font-size:15px}
/* 21 oct 2026, a pedido de Catalina (Soluciones Geoespaciales): el eyebrow de "Metodología"
   (.solution-steps .eyebrow) se veía gris claro sobre fondo claro. El override compartido
   (línea con body.has-solution-scene.has-solution-scene .solution-steps .eyebrow) debería ganar
   por especificidad, pero en vivo seguía ilegible -- en vez de investigar más a fondo la causa
   exacta y arriesgar un cambio sitewide, se fuerza un color oscuro con !important SOLO en esta
   página (clase has-geo-steps-contrast, ver build-interiors.py), sin tocar Comparación/Cobertura/
   FAQ/Metodología de ninguna otra página que comparta el mismo componente .solution-steps. */
body.has-geo-steps-contrast.has-geo-steps-contrast .solution-steps .eyebrow{color:#0a4b55!important}
/* 21 oct 2026 (2), a pedido de Catalina: el párrafo de intro de Metodología
   (.solution-steps-intro, "No empezamos por una plataforma...") también se veía claro y pidió
   un tono más oscuro. No tiene regla propia en ningún archivo CSS -- hereda el color de
   .solution-steps, que en teoría ya es oscuro (--rd-ink, #0c1524) sobre el fondo claro de esta
   sección. Para no seguir investigando una causa que no se logra reproducir en el CSS y resolver
   su pedido de una vez, se fuerza un color oscuro explícito con !important, solo en esta página. */
body.has-geo-steps-contrast.has-geo-steps-contrast .solution-steps-intro{color:#0c1524!important}
/* 22 oct 2026 (4), a pedido de Catalina (Google Workspace Gobierno): "Más que licencias" vuelve
   a fondo oscuro en esta página (ver build-interiors.py, "has-steps-dark") -- empate de
   especificidad con el bloque sitewide del 5 oct 2026 (mismo patrón de clase doblada), resuelto
   por orden en el archivo (esta regla va después). Colores iguales a los que ya usan otras
   secciones oscuras del sitio (p.ej. .solution-cases-heading h2, .solution-intro p). */
body.has-steps-dark.has-steps-dark .solution-steps{background:transparent;color:#eef6fa;border-color:transparent}
body.has-steps-dark.has-steps-dark .solution-steps h2{color:#eef6fa}
body.has-steps-dark.has-steps-dark .solution-steps-intro{color:#a9bfce!important}
body.has-steps-dark.has-steps-dark .solution-steps .eyebrow{color:var(--solution-accent-text,var(--solution-accent))}
body.has-steps-dark.has-steps-dark .solution-step h3{color:#fff}
body.has-steps-dark.has-steps-dark .solution-step p{color:#a9bfce}
/* 21 oct 2026, a pedido de Catalina: logo oficial de marca debajo del H1 del hero (campo
   opcional nuevo "heroLogo" en interiors.json). Sin alcance de página propio: el <img> solo
   existe en las páginas que declaren el campo, así que esta regla no afecta a ninguna otra. */
.solution-hero-logo{display:block;height:2.5rem;width:auto;margin:1.4rem 0 .85rem}
/* Google for Education, a pedido de Catalina: la palabra resaltada del H1 pasa a su propia
   línea, para quedar junto al logo de marca que se agrega debajo (ver heroLogo arriba). Clase
   propia (mismo patrón que has-benefits-balanced/has-geo-steps-contrast), sin afectar otras
   páginas que ya usan heroHighlight sin este salto de línea forzado. */
body.has-gfe-hero-logo.has-gfe-hero-logo .solution-hero-accent{display:block}
/* 21 oct 2026, a pedido de Catalina (Responsabilidad Social Empresarial / Saving The Amazon):
   nota pequeña debajo de la frase de contexto y de la rejilla de cifras en "stats" (fecha de
   corte de los datos) -- mismo tratamiento tipográfico que .solution-coverage-footnote, pero con
   su propia clase porque "stats" siempre vive sobre fondo oscuro (nunca claro, a diferencia de
   coverage). Campos opcionales nuevos en build-interiors.py: stats.heading / stats.intro /
   stats.footnote; sin ellos, "stats" se ve exactamente igual que antes. */
.solution-stats-intro{font-size:16px;color:#a9bfce;line-height:1.7;max-width:640px;margin:14px auto 0}
.solution-stats-footnote{margin-top:22px;font-size:12px;color:#6f95a8}
/* 21 oct 2026, a pedido de Catalina (Responsabilidad Social Empresarial / Saving The Amazon):
   franja de cierre reutilizable ("ctaBanner" en interiors.json) -- título + texto corto + un
   botón de acción destacado (mismo trato que el botón del Hero cuando "primaryLinkAsButton" está
   activo: se tiñe con el acento propio de la página) + una nota pequeña opcional debajo. Fondo
   oscuro y tipografía centrada, igual que el resto de franjas de cierre del molde (stats/steps).
   Campo nuevo y opcional: ninguna otra página declara "ctaBanner" hoy. */
.solution-cta{position:relative;z-index:1;padding:70px 5% 80px;background:#0b1830;text-align:center;border-top:1px solid #1c3547}
.solution-cta h2{font-size:clamp(28px,2.8vw,40px);font-weight:450;line-height:1.2;color:#eef6fa;max-width:720px;margin:0 auto}
.solution-cta-text{font-size:17px;color:#a9bfce;line-height:1.8;max-width:620px;margin:18px auto 0}
.solution-cta .button{margin-top:32px;color:#03202b}
.solution-cta-microcopy{font-size:13px;color:#7da0b4;margin:14px auto 0;max-width:620px}
/* 21 oct 2026, a pedido de Catalina (Responsabilidad Social Empresarial / Saving The Amazon):
   nota pequeña bajo el botón del Hero ("heroMicrocopy" en interiors.json), mismo tono apagado que
   el resto de microcopy del sitio. Campo opcional: ninguna otra página lo declara hoy. */
.solution-hero-microcopy{font-size:13px;color:#6f95a8;margin:14px 0 0;max-width:420px}
/* 21 oct 2026, a pedido de Catalina (Responsabilidad Social Empresarial / Saving The Amazon):
   franja de fotografía real ("photoGallery" en interiors.json) -- rejilla flexible (una sola foto
   se centra sin estirarse a todo el ancho; varias fotos se acomodan solas según el espacio, mismo
   criterio que solution-features-grid). Campo opcional, sin efecto en ninguna otra página. */
.solution-photo-gallery{padding:56px 5%;position:relative;z-index:1}
.solution-photo-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* 21 oct 2026, a pedido de Catalina: "las pondria todas en un carrusel en movimiento" -- rejilla
   estática reemplazada por un riel horizontal con scroll-snap y botones prev/next, mismo patrón
   que #related-rail/#timeline-rail ya usado en el resto del sitio (ver dist/app.js para el
   wiring de #photo-prev/#photo-next). 21 oct 2026 (v2), a pedido de Catalina: "proporcional" --
   cada tarjeta tiene un alto fijo (ritmo visual consistente, como una galería editorial) y el
   ANCHO se deriva de la proporción real de cada foto (object-fit:contain, sin recortar ni
   estirar), así que una foto vertical queda angosta y una horizontal queda ancha, cada una fiel
   a su encuadre original. El pie de foto va superpuesto con un degradado sutil en vez de ocupar
   espacio propio, para no desalinear el alto de las tarjetas. */
.solution-photo-grid{display:flex;gap:24px;margin-top:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch}
.solution-photo-grid::-webkit-scrollbar{display:none}
.solution-photo-card{position:relative;margin:0;flex:0 0 auto;height:460px;scroll-snap-align:start;border-radius:16px;overflow:hidden;border:1px solid #1c3547;background:#0d1d38}
.solution-photo-card img{height:100%;width:auto;max-width:min(720px,80vw);display:block;object-fit:contain}
.solution-photo-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 14px;font-size:13px;color:#eef6fa;background:linear-gradient(180deg,transparent,rgba(3,10,19,.92) 68%)}
@media(max-width:749px){.solution-photo-card{height:320px}}
.photo-rail-controls{display:flex;gap:12px;flex-shrink:0}
.photo-rail-controls button{min-width:44px;min-height:44px;width:44px;height:44px;border:1px solid #2e5267;border-radius:50%;color:#eef6fa;background:transparent;font-size:20px;line-height:1;cursor:pointer}
.photo-rail-controls button:hover{background:var(--solution-accent,#66cbe0);border-color:var(--solution-accent,#66cbe0);color:#04111b}
@media(max-width:749px){.photo-rail-controls{display:none}}
/* 21 oct 2026, a pedido de Catalina (Responsabilidad Social Empresarial): título + párrafo de
   contexto opcionales antes del recorrido de capítulos ("storyTitle"/"storyEyebrow"/"storyIntro"
   en interiors.json -- ver build-interiors.py). Campo opcional, sin efecto en ninguna otra página. */
.solution-story-heading{max-width:620px;padding:56px 0 0}
.solution-story-heading h2{font-size:clamp(30px,2.9vw,44px);line-height:1.16;font-weight:450;margin-top:12px}
.solution-story-heading .eyebrow{font-size:12px;letter-spacing:.09em;color:var(--solution-accent-text,#6fdaee)}
.solution-story-intro{font-size:17px;color:#a9bfce;line-height:1.8;margin-top:20px;max-width:620px}
/* 21 oct 2026, a pedido de Catalina (Responsabilidad Social Empresarial): el grupo "Nuestro
   diferencial" (tagLists con "highlight":true) se ve resaltado y en verde desde el primer
   render, no solo al pasar el mouse -- mismo estado visual que ya existía en ":hover", ahora
   también por defecto para ese grupo. */
.solution-tags--accent span{background:var(--solution-accent-soft);border-color:var(--solution-accent);color:var(--solution-accent-text,var(--solution-accent));font-weight:600}
/* 21 oct 2026, a pedido de Catalina (Responsabilidad Social Empresarial / Saving The Amazon),
   clase propia "has-rse-greens" (ver build-interiors.py): (a) ".solution-hero-accent{color:
   #6fdaee}" más arriba fuerza a propósito el mismo azul/cian en TODAS las páginas -- aquí se
   anula para que la palabra resaltada del Hero use el verde propio de esta página; (b) el
   degradé claro de ".solution-story::before/::after" (pensado para páginas de recursos
   corporativos con fondo claro) se apaga, mismo mecanismo que ya existe para
   "has-chapters-visible", dejando la franja "Sobre el proyecto" con el mismo fondo sólido
   oscuro que el resto de las franjas de la página. */
body.has-rse-greens.has-rse-greens .solution-hero-accent{color:var(--solution-accent-text,var(--solution-accent))}
body.has-rse-greens.has-rse-greens .solution-story:before,
body.has-rse-greens.has-rse-greens .solution-story:after{display:none!important}

/* 22 oct 2026, a pedido de Catalina (Por qué Servinformación): centra el título (h2) de la
   franja de cifras solo en esta página -- el resto de páginas con "stats.heading" (Respon-
   sabilidad Social Empresarial) no lo pidió, así que es una clase propia (ver build-interiors.py,
   "has-stats-heading-centered") en vez de un cambio sitewide a .solution-stats h2. */
body.has-stats-heading-centered .solution-stats h2{text-align:center}

/* 26 oct 2026, a pedido de Catalina (Google Cloud Gobierno): el párrafo de introducción de "Credenciales que respaldan nuestra experiencia" (stats.intro) se veía pegado a la grilla de cifras y descuadrado respecto al título ya centrado por has-stats-heading-centered (el párrafo solo estaba centrado como bloque por su max-width/margin:auto, no su texto). Clase propia nueva (has-stats-intro-centered), mismo patrón que has-steps-intro-centered pero para .solution-stats-intro: centra el texto y agrega separación respecto a la grilla. */
body.has-stats-intro-centered.has-stats-intro-centered .solution-stats-intro{text-align:center;margin-bottom:28px}

/* 23 oct 2026, a pedido de Catalina (Google Cloud): centra el título (h2) de "Cómo funciona"
   (steps.heading, "Del diagnóstico a la optimización") solo en esta página -- mismo patrón que
   has-stats-heading-centered, pero para .solution-steps h2, que ninguna otra página había pedido
   centrar todavía. */
body.has-steps-heading-centered.has-steps-heading-centered .solution-steps h2{text-align:center}

/* 23 oct 2026, a pedido de Catalina (Google Cloud): el párrafo de introducción de "Cómo
   funciona" (steps.intro, "Te acompañamos durante todo el ciclo del proyecto:") se veía en un
   gris claro de baja legibilidad sobre el fondo claro de esta sección. Clase propia nueva
   (distinta de has-geo-steps-contrast, que también recolorea el eyebrow -- no pedido aquí),
   fuerza gris oscuro solo en el párrafo de introducción de steps, sin afectar otras páginas. */
body.has-steps-intro-dark.has-steps-intro-dark .solution-steps-intro{color:#0c1524!important}

/* 23 oct 2026, a pedido de Catalina (Gemini Enterprise): centra el párrafo de introducción de
   "Cómo funciona" (steps.intro) -- a diferencia de Google Cloud, que solo pidió centrar el
   título. Clase propia nueva para no afectar esa otra página. */
body.has-steps-intro-centered.has-steps-intro-centered .solution-steps-intro{text-align:center}

/* 22 oct 2026 (2), a pedido de Catalina (Por qué Servinformación): centra la etiqueta, el título
   y las tarjetas de la sección de casos de éxito -- con solo 2 casos la rejilla fija de 3
   columnas dejaba una tercera columna vacía a la derecha, y la etiqueta/título quedaban pegados
   a la izquierda por el "justify-content:space-between" de .solution-cases-heading. Clase propia
   (ver build-interiors.py, "has-cases-centered"); el resto de páginas con "relatedCases" no
   cambian. */
body.has-cases-centered .solution-cases-heading{flex-direction:column;align-items:center;text-align:center}
body.has-cases-centered .solution-cases-heading .eyebrow{text-align:center}
body.has-cases-centered .solution-cases-grid{grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center}

/* 27 oct 2026 (4-5): a pedido de Catalina, el carrusel de "Partners y Tecnologías" (ahora
   unificado en uno solo, id "partners-aliados" -- antes eran dos, "partners-red"/"partners-isv")
   se ve a color, sin el filtro gris-por-defecto que .rd-aliados-set usa en el resto del sitio
   (design-system.css) -- se sobreescribe solo para el id de esta página, sin tocar el carrusel
   del Home, Fabricantes y Aliados ni Nosotros, que mantienen el efecto gris→color al pasar el
   mouse.
*/
#partners-aliados .rd-aliados-set img{filter:none;opacity:1}