/* Corporate palette sampled from Colores.jpg; tonal surfaces inspired by the event banner. */
:root {
  --blue: #1100fe;
  --blue-hover: #01008e;
  --ink: #121b3e;
  --muted: #56617a;
  --line: #d8e0ee;
  --soft: #edf3fc;
  --dark: #000056;
  --mint: #cdff00;
  --brand-sky: #6aa8fd;
  --brand-deep: #01008e;
  --brand-lime: #cdff00;
  --on-dark: #ceddf6;
}
body { background: #f8faff; }
::selection { background: #cdff00; color: #000056; }
.site-header {
  background: #000056;
  color: #fff;
  border-bottom: 1px solid #ffffff21;
}
.nav-wrap { gap: 24px; }
.site-header nav { gap: 24px; }
.site-header nav a:hover,
.site-header nav a[aria-current] { color: var(--brand-lime); }
.site-header nav a[aria-current]:after { background: var(--brand-lime); }
.site-header .nav-cta { background: var(--brand-lime); color: var(--dark); }
.site-header .nav-cta:hover { background: #e1ff75; }
.menu-toggle { color: white; }
.language-switch { display: flex; align-items: center; gap: 5px; font-size: 10px; white-space: nowrap; }
.language-switch a { padding: 7px 3px; color: #b6c7eb; }
.language-switch span { color: #8499c7; }
.language-switch a[aria-current] { color: var(--brand-lime); font-weight: 800; }
.site-header :focus-visible,
.brand-hero :focus-visible,
.brand-intro :focus-visible,
.dark :focus-visible { outline-color: var(--brand-lime); }

.brand-hero,
.brand-intro {
  color: #fff;
  background: radial-gradient(ellipse at 100% 0, #6aa8fd20, transparent 60%),
    linear-gradient(120deg, #000056 15%, #01008e 100%);
}
.brand-hero .hero { padding-top: 60px; padding-bottom: 66px; }
.brand-hero .eyebrow,
.brand-intro .eyebrow { color: var(--brand-lime); }
.brand-hero .lead,
.brand-intro .lead { color: var(--on-dark); }
.brand-hero h1 em { color: #fff; position: relative; isolation: isolate; }
.brand-hero h1 em:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -2%;
  right: -5%;
  bottom: .015em;
  height: .17em;
  background: var(--brand-lime);
}
.brand-hero .live-dot { background: var(--brand-lime); box-shadow: 0 0 0 5px #cdff001b; }
.brand-hero .hero-foot { color: #b6cbed; }
.brand-hero .button,
.brand-intro .button { background: var(--brand-lime); color: var(--dark); }
.brand-hero .button:hover,
.brand-intro .button:hover { background: #e1ff75; }
.brand-hero .text-link,
.brand-intro .text-link { color: #fff; }
.brand-hero .text-link span,
.brand-intro .text-link span { color: var(--brand-lime); }
.brand-hero .hero-visual { border: 1px solid #ffffff36; box-shadow: 0 26px 60px #00002a40; }
.brand-hero .hero-switch button[aria-pressed=true] { background: var(--brand-lime); border-color: var(--brand-lime); color: var(--dark); }
.brand-hero .photo-dot { background: var(--brand-lime); }
.brand-intro h1 span { color: var(--brand-lime); }
.brand-intro .breadcrumb,
.brand-intro figcaption { color: #b6cbed; }
.brand-intro .breadcrumb:hover { color: var(--brand-lime); }
.brand-intro .project-location { color: var(--on-dark); border-color: #ffffff36; }
.brand-intro .page-intro { padding-block: 70px; }
.brand-intro + .no-top { padding-top: 55px; }
.brand-intro + .project-facts { padding-top: 40px; }
.brand-intro .product-image { background: #e7effb; }

.sector-ribbon { background: #e6eefb; border-color: #d0ddf1; }
.sector-ribbon a { color: #000056; }
.sector-ribbon .wrap>span { border-color: #b8cbe8; }
.intro-statement h2 span { color: #01008e; }
.soft { background: #eaf1fc; }
.solution-tile { background: #fff; }
.solution-tile:hover { background: #eef4ff; }
.solution-filters button { background: #e5edfa; color: #263858; }
.solution-filters button.active { background: #01008e; color: white; }
.story-icon { background: #dce8fc; color: #01008e; }
.related-strip { background: #e4edfc; border-left: 3px solid #01008e; }
.project-challenge { background: #eaf1fc; }
.resource-no { color: #4064bb; }
.module-grid article { background: #eaf1fc; border-top-color: #01008e; }
.screen-figure,
.large-screen { background: #e6eefb; }

.dark,
.architecture-section {
  background: radial-gradient(ellipse at 70% 20%, #15299c99, transparent 65%), #000056;
}
.dark p { color: var(--on-dark); }
.dark .eyebrow,
.dark .step-number { color: var(--brand-lime); }
.dark .text-link span { color: var(--brand-lime); }
.dark-bottom>span { color: #b4c8ec; }
.architecture { --signal: #cdff00; }
.sensor-card { background: linear-gradient(120deg, #14276c, #101858); }
.edge-node { background: radial-gradient(ellipse at center, #6aa8fd30, transparent 73%); border-color: #6aa8fd44; }
.arch-label>span { border-color: #cdff0060; }
.arch-note { color: #adbfdf!important; }
.arch-detail p { color: #ceddf6!important; }

.section-demo {
  background: radial-gradient(ellipse at 100% 10%, #6aa8fd25, transparent 60%),
    linear-gradient(135deg, #000056, #01008e);
}
.section-demo .visual-section-head { color: #fff; }
.section-demo .visual-section-head h2 span,
.section-demo .visual-section-head .eyebrow { color: var(--brand-lime); }
.section-demo .visual-section-head p:not(.eyebrow) { color: var(--on-dark); }
.section-demo .visual-section-head>.text-link { color: #fff; }
.section-demo .visual-section-head>.text-link span { color: var(--brand-lime); }
.section-demo .residence-demo { box-shadow: 0 28px 70px #00002a60; }
.cases-home { padding-top: 90px; }
.about-strip { background: #000056; color: #fff; }
.about-photo { display: flex; align-items: center; }
.about-photo img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 1963 / 1487; object-fit: contain; }
.about-copy .eyebrow,
.about-copy h2 span { color: var(--brand-lime); }
.about-copy p:not(.eyebrow) { color: var(--on-dark); }
.about-copy .text-link { color: #fff; }
.about-copy .text-link span { color: var(--brand-lime); }
.ecosystem-section { background: #eaf1fc; }
.cta {
  background: radial-gradient(ellipse at 100% 0, #6aa8fd25, transparent 70%), #01008e;
  border-top: 1px solid #6aa8fd33;
}
.cta .eyebrow { color: var(--brand-lime); }
.cta p:not(.eyebrow) { color: var(--on-dark); }
.cta .button.light { background: var(--brand-lime); color: #000056; }
.cta .button.light:hover { background: #e1ff75; }
footer { background: #000038; }
footer a { color: #c4d3ef; }
footer a:hover { color: var(--brand-lime); }
.footer-place p,
.footer-bottom { color: #b0c1e2; }

@media(max-width:1100px) {
  .nav-wrap { gap: 18px; }
  .site-header nav { gap: 17px; }
}
@media(max-width:860px) {
  .site-header nav { background: #000056; border-color: #ffffff30; box-shadow: 0 15px 28px #00003840; }
  .brand-hero .hero { padding-block: 40px 45px; }
  .brand-intro .page-intro { padding-block: 55px; }
}
@media(max-width:620px) {
  .nav-wrap { gap: 12px; }
  .brand img { width: 110px; }
  .nav-cta { display: none; }
  .menu-toggle { font-size: 11px; padding: 9px 5px; }
  .language-switch { font-size: 11px; }
  .brand-hero .hero { padding-block: 40px 35px; }
  .brand-intro .page-intro { padding-block: 45px; }
  .brand-intro + .no-top { padding-top: 35px; }
  .brand-intro + .project-facts { padding-top: 25px; }
  .cases-home { padding-top: 65px; }
}
/* Homepage: blend the scene into the corporate blue, as in the healthcare reference. */
.brand-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.brand-hero .hero {
  min-height: 660px;
  padding-block: 66px;
}
.brand-hero .hero-copy { position: relative; z-index: 2; }
.brand-hero .hero-visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-hero .hero-visual > img {
  object-position: 55% center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.brand-hero .hero-visual::after {
  background: linear-gradient(0deg, #000056f5, #00005680 21%, #00005608 58%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.brand-hero .photo-top {
  top: 42px;
  left: 31%;
  background: #00005660;
}
.brand-hero .hero-photo-bottom {
  bottom: 52px;
  left: 31%;
  right: max(52px, calc((100vw - 1240px) / 2));
}
.brand-hero .hero-switch { flex-wrap: wrap; }
.brand-hero .hero-switch button {
  flex: 0 0 auto;
  min-height: 40px;
  background: #00005645;
}
.brand-hero .hero-switch button[aria-pressed=true] { background: var(--brand-lime); }
@media (min-width: 1600px) {
  .brand-hero .hero { min-height: 720px; }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .brand-hero .hero h1 { font-size: clamp(44px, 5.75vw, 63px); }
  .brand-hero .hero { min-height: 610px; padding-block: 55px; }
  .brand-hero .hero-photo-bottom { right: 32px; left: 32%; bottom: 42px; }
  .brand-hero .photo-top { left: 32%; font-size: 8px; }
}
@media (max-width: 620px) {
  .brand-hero .hero { min-height: 0; padding-block: 40px 0; gap: 0; }
  .brand-hero .hero-visual {
    position: relative;
    inset: auto;
    width: calc(100% + 40px);
    height: 430px;
    margin: 12px -20px 0;
  }
  .brand-hero .hero-visual > img {
    object-position: 55% center;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000);
    mask-image: linear-gradient(180deg, transparent, #000 26%, #000);
  }
  .brand-hero .hero-visual::after {
    background: linear-gradient(0deg, #000056f5, #00005670 27%, transparent 64%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brand-hero .photo-top { top: 70px; left: 20px; }
  .brand-hero .hero-photo-bottom { bottom: 28px; left: 20px; right: 20px; }
  .brand-hero .hero-photo-bottom > p { font-size: 25px; margin-bottom: 18px; }
  .brand-hero .hero-switch button { min-height: 44px; }
}
/* Section headers share the full-width image fade of the homepage. */
.section-hero {
  --hero-media-width: 60%;
  --hero-fade-end: 36%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section-hero > .wrap {
  position: relative;
  z-index: 1;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding-block: 74px;
  pointer-events: none;
}
.section-hero-copy { width: 54%; max-width: 640px; }
.section-hero-copy h1 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.1; }
.section-hero-copy .lead { max-width: 470px; margin-top: 28px; font-size: 17px; line-height: 1.8; }
.section-hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--hero-media-width);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--hero-fade-end));
  mask-image: linear-gradient(90deg, transparent, #000 var(--hero-fade-end));
}
.section-hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.section-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #000056c9, #00005612 45%);
  pointer-events: none;
}
.section-hero + .section.no-top { padding-top: 55px; }
.section-hero-company { --hero-media-width: 58%; --hero-fade-end: 13%; }
.section-hero-company > .wrap { min-height: 610px; }
.section-hero-company .section-hero-copy { width: 42%; }
.section-hero-company .section-hero-copy h1 { font-size: clamp(46px, 4.6vw, 62px); }
.section-hero-company .section-hero-media { display: flex; align-items: center; }
.section-hero-company .section-hero-media > img { height: auto; object-fit: contain; }
.section-hero-company .section-hero-media::after { background: linear-gradient(0deg, #000056a0, transparent 38%); }
.section-hero-cases .section-hero-media > img { object-position: 50% 35%; }
.section-hero-product { background: radial-gradient(ellipse at 60% 50%, #6aa8fd52, transparent 72%); }
.section-hero-product > img.hero-platform {
  position: absolute;
  right: -4%;
  top: 10%;
  width: 89%;
  height: 82%;
  object-fit: contain;
  transform: perspective(1200px) rotateY(-7deg) rotateZ(2deg);
  filter: drop-shadow(0 18px 28px #00003880);
}
.section-hero-product > img.hero-edge {
  position: absolute;
  left: 13%;
  bottom: 8%;
  width: 24%;
  height: 55%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px #00002aaa);
  z-index: 1;
}
@media (min-width: 621px) and (max-width: 1100px) {
  .section-hero > .wrap { min-height: 500px; padding-block: 60px; }
  .section-hero-copy h1 { font-size: clamp(35px, 4.8vw, 50px); }
  .section-hero-copy .lead { font-size: 15px; max-width: 350px; }
  .section-hero-company > .wrap { min-height: 540px; }
  .section-hero-company .section-hero-copy h1 { font-size: clamp(37px, 4.8vw, 50px); }
  .section-hero-company .section-hero-media { align-items: center; }
}
@media (max-width: 620px) {
  .section-hero { display: flex; flex-direction: column; }
  .section-hero > .wrap { order: 0; min-height: 0; padding-block: 44px 12px; }
  .section-hero-copy, .section-hero-company .section-hero-copy { width: 100%; max-width: none; }
  .section-hero-copy h1 { font-size: clamp(36px, 9.6vw, 52px); }
  .section-hero-copy .lead { font-size: 16px; margin-top: 24px; }
  .section-hero-media {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    height: 310px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%);
    mask-image: linear-gradient(180deg, transparent, #000 24%);
  }
  .section-hero-media::after { background: linear-gradient(0deg, #000056a8, transparent 45%); }
  .section-hero-company > .wrap { min-height: 0; }
  .section-hero-company .section-hero-copy h1 { font-size: 46px; }
  .section-hero-company .section-hero-media { height: auto; aspect-ratio: 1950 / 1477; }
  .section-hero-company .section-hero-media > img { height: auto; }
  .section-hero-company .section-hero-media::after { background: linear-gradient(0deg, #00005660, transparent 25%); }
  .section-hero-product { height: 340px; }
  .section-hero-product > img.hero-platform { right: 0; top: 8%; width: 88%; height: 85%; }
  .section-hero-product > img.hero-edge { left: 4%; bottom: 8%; width: 27%; height: 52%; }
  .section-hero + .section.no-top { padding-top: 40px; }
}
.section-hero-company .section-hero-media > img {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}
/* Blend the office photograph into the adjacent blue without changing its crop. */
.about-photo img {
  -webkit-mask-image: linear-gradient(90deg, #000 80%, #000000f5 90%, #000000b8 96%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 80%, #000000f5 90%, #000000b8 96%, transparent 100%);
}
/* Full-height photographs share the section surface and fade only toward the copy. */
.image-story { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(440px, 38vw, 620px); }
.image-story-inner { position: relative; z-index: 1; }
.image-story-copy { width: 46%; padding-block: 64px; }
.image-story-copy h2 { font-size: clamp(34px, 3.35vw, 46px); line-height: 1.14; }
.image-story-description { max-width: 440px; margin-top: 25px; font-size: 16px; line-height: 1.8; }
.image-story-action { margin-top: 28px; }
.image-story-action .button { min-height: 52px; }
.image-story-media { position: absolute; inset: 0 0 0 auto; width: 60%; overflow: hidden; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%); mask-image: linear-gradient(90deg, transparent, #000 25%); }
.image-story-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.image-story-architecture { min-height: 350px; margin-bottom: 48px; }
.image-story-architecture .image-story-inner { width: 100%; }
.architecture-section:has(.image-story-architecture) { background: #000056; }
.image-story-architecture .image-story-media { width: 54%; }
.image-story-architecture .button { background: var(--brand-lime); color: #000056; }
.image-story-architecture .button:hover { background: #dfff64; }
.image-story-transversal .image-story-copy h2 { font-size: clamp(31px, 3.1vw, 43px); }
.transversal-flow { padding-block: 55px 80px; }
.transversal-flow .tech-flow { margin-top: 0; }
.image-story-platform .image-story-copy { width: 37%; }
.image-story-platform .image-story-description { max-width: 370px; }
.image-story-platform .image-story-media { width: 64%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
.image-story-platform .image-story-media img { object-position: 55% center; }
.image-story-reverse .image-story-copy { margin-left: auto; width: 47%; padding-left: 24px; }
.image-story-reverse .image-story-media { inset: 0 auto 0 0; width: 55%; -webkit-mask-image: linear-gradient(90deg, #000 74%, transparent); mask-image: linear-gradient(90deg, #000 74%, transparent); }
.image-story-edge .image-story-media img { object-position: left center; }
/* Product stories echo the dark photographic header around the light diagram. */
#platform-en-contexto,
#edge-en-contexto {
  color: #fff;
  background: radial-gradient(ellipse at 100% 0, #6aa8fd20, transparent 60%),
    linear-gradient(120deg, #000056 15%, #01008e 100%);
}
:is(#platform-en-contexto, #edge-en-contexto) .image-story-copy h2 { color: #fff; }
:is(#platform-en-contexto, #edge-en-contexto) :is(.eyebrow, h2 span, .text-link span) { color: var(--brand-lime); }
:is(#platform-en-contexto, #edge-en-contexto) .image-story-description { color: var(--on-dark); }
:is(#platform-en-contexto, #edge-en-contexto) .text-link { color: #fff; }
:is(#platform-en-contexto, #edge-en-contexto) :focus-visible { outline-color: var(--brand-lime); }
#platform-en-contexto .image-story-media {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 23%);
  mask-image: linear-gradient(90deg, transparent, #000 23%);
}
:is(#platform-en-contexto, #edge-en-contexto) .image-story-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #000056c9, #00005612 45%);
  pointer-events: none;
}
@media (max-width: 900px) {
  #platform-en-contexto .image-story-media {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%);
    mask-image: linear-gradient(180deg, transparent, #000 24%);
  }
  :is(#platform-en-contexto, #edge-en-contexto) .image-story-media::after {
    background: linear-gradient(0deg, #000056a8, transparent 45%);
  }
}
.section-hero-technology { --hero-fade-end: 23%; }
.section-hero-technology .section-hero-media img { object-position: 66% center; }
/* Keep the home introduction dark and share the light diagram theme with Technology. */
.architecture-home-intro { padding-bottom: 0; }
.architecture-home-intro .image-story-architecture { margin-bottom: 0; }
.architecture-home-diagram { padding-top: 48px; }
/* Pale blue sampled from the supplied swatch, with a readable light diagram. */
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) {
  background: #e6eefb;
  color: #000056;
  border-top: 1px solid #d0ddf1;
}
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .architecture { --signal: #1100fe; color: #000056; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) p { color: #445a78; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) :is(.eyebrow, .ap-demo-link, .data-connector) { color: #1100fe; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) :focus-visible { outline-color: #1100fe; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) :is(.arch-label, .stage-desc, .edge-caption) { color: #445a78; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .arch-label > span { border-color: #1100fe45; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .arch-stage { color: #000056; border-color: #b8cbe2; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .arch-stage[aria-pressed=true] { border-color: #1100fe; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .arch-scenes button { color: #263858; background: #f7faff; border-color: #b8cbe2; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .arch-scenes button:hover { border-color: #1100fe; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .arch-scenes button[aria-pressed=true] { background: #1100fe; border-color: #1100fe; color: #fff; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .sensor-card { background: #fff; border-color: #cbd9eb; box-shadow: 0 8px 24px #17375908; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) :is(.sensor-card div > span, .sensor-card strong small) { color: #445a78; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .sensor-status { background: #16846b; box-shadow: 0 0 0 4px #16846b12; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .edge-node { background: radial-gradient(ellipse at center, #d6e5ff, #f7faff 75%); border-color: #bfd0e7; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .edge-halo { border-color: #527bd455; box-shadow: 0 0 0 20px #527bd40a, 0 0 0 40px #527bd405; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .protocol-chips span { color: #445a78; background: #f7faff; border-color: #cbd9eb; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .flow-track { background: linear-gradient(90deg, #1100fe20, #1100fe8a, #1100fe20); }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .flow-track i { box-shadow: 0 0 10px #1100fe60; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .ap-preview { border-color: #bfd0e7; box-shadow: 0 12px 30px #17375912; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) .arch-detail { border-color: #b8cbe2; }
:is(.section-hero-technology + .architecture-section, .architecture-home-diagram) :is(.arch-detail p, .arch-note) { color: #445a78!important; }
.section-hero-cases { --hero-fade-end: 18%; --hero-media-width: 63%; }
.section-hero-cases .section-hero-copy { width: 43%; }
.section-hero-cases .section-hero-media img { object-position: 62% center; }
/* The solution selector follows the two-column composition supplied by Aritium. */
#soluciones-por-necesidad .explorer { grid-template-columns: 1fr 1.06fr; align-items: start; gap: 72px; }
.explorer-menu .section-head { margin-bottom: 36px; }
.explorer-menu h2 { font-size: clamp(32px, 3.3vw, 46px); }
.explorer-all { margin-top: 32px; }
/* One continuous photo header for every solution and application area. */
.detail-hero-banner { --hero-fade-end: 26%; --hero-media-width: 61%; }
.detail-hero-banner .section-hero-copy { width: 45%; pointer-events: auto; }
.detail-hero-banner .section-hero-copy h1 { font-size: clamp(38px, 4.1vw, 60px); }
.detail-hero-banner .breadcrumb { display: inline-block; margin-bottom: 27px; }
.detail-hero-banner .eyebrow { margin-bottom: 20px; }
.detail-hero-banner .section-hero-copy .lead { margin-top: 24px; }
.detail-hero-action { margin-top: 30px; }
.detail-hero-sector .section-hero-media img { object-position: center; }
.section-hero-platform { --hero-media-width: 64%; --hero-fade-end: 14%; }
.section-hero-platform .section-hero-copy { width: 39%; }
.section-hero-platform .section-hero-copy h1 { font-size: clamp(38px, 3.7vw, 54px); }
.section-hero-platform .section-hero-media img { object-position: 61% center; }
.section-hero-platform .section-hero-media::after { background: linear-gradient(0deg, #00005665, transparent 38%); }
.detail-hero-edge { --hero-fade-end: 23%; }
.detail-hero-edge .section-hero-media img { object-position: 66% center; }
.solution-challenge > .eyebrow { margin-bottom: 25px; }
.challenge-content { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.challenge-content h2 { font-size: clamp(32px, 3.4vw, 46px); }
.challenge-content > .lead { margin: 0; font-size: 18px; line-height: 1.8; padding-top: 2px; }
@media (max-width: 1000px) {
  #soluciones-por-necesidad .explorer, .challenge-content { gap: 40px; }
  .detail-hero-banner .section-hero-copy h1 { font-size: 38px; }
  .detail-hero-banner .section-hero-copy .lead { font-size: 15px; }
}
@media (max-width: 900px) {
  .image-story { flex-direction: column; min-height: 0; }
  .image-story-copy, .image-story-platform .image-story-copy, .image-story-reverse .image-story-copy { width: 100%; padding: 48px 0 0; margin: 0; }
  .image-story-copy h2, .image-story-transversal .image-story-copy h2 { font-size: 34px; }
  .image-story-description, .image-story-platform .image-story-description { max-width: 650px; font-size: 16px; }
  .image-story-media, .image-story-architecture .image-story-media, .image-story-platform .image-story-media, .image-story-reverse .image-story-media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; order: 1; margin-top: 16px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%); mask-image: linear-gradient(180deg, transparent, #000 18%); }
  .image-story-edge .image-story-media { aspect-ratio: 4 / 3; }
  .image-story-edge .image-story-media img { object-position: center; }
  .image-story-architecture .image-story-copy { padding-top: 0; }
}
@media (max-width: 620px) {
  #soluciones-por-necesidad .explorer, .challenge-content { grid-template-columns: 1fr; gap: 32px; }
  .explorer-menu .section-head { margin-bottom: 28px; }
  .explorer-menu .explorer-nav { display: flex; flex-direction: column; gap: 0; }
  .explorer-all { margin-top: 24px; }
  .challenge-content > .lead { font-size: 17px; }
  .detail-hero-banner .section-hero-copy, .section-hero-cases .section-hero-copy { width: 100%; }
  .section-hero-platform .section-hero-copy { width: 100%; }
  .section-hero-platform .section-hero-media { height: auto; aspect-ratio: 3 / 2; }
  .detail-hero-edge .section-hero-media { height: auto; aspect-ratio: 4 / 3; }
  .detail-hero-banner .section-hero-copy h1 { font-size: 40px; }
  .detail-hero-banner .section-hero-copy .lead { font-size: 16px; }
  .detail-hero-banner .section-hero-media { margin-top: 18px; }
  .detail-hero-banner .breadcrumb { margin-bottom: 22px; font-size: 11px; }
  .transversal-flow { padding-block: 40px 55px; }
}

@media (max-width: 620px) {
  .about-photo img {
    -webkit-mask-image: linear-gradient(180deg, #000 72%, #000000dc 85%, #00000070 94%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, #000000dc 85%, #00000070 94%, transparent 100%);
  }
  .about-strip .about-copy { padding-top: 30px; }
}