html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height-mobile);
}

.engineering-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-navy-950);
  background:
    radial-gradient(circle at 18% 40%, rgb(7 178 224 / 8%), transparent 25rem),
    linear-gradient(145deg, #fff 0%, #f8fcff 58%, #f2f9fd 100%);
}

.engineering-hero__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle, rgb(8 185 232 / 30%) 1.5px, transparent 1.8px) 1.5rem 2.2rem / 1.15rem 1.15rem no-repeat,
    radial-gradient(circle, rgb(8 185 232 / 24%) 1.4px, transparent 1.7px) calc(100% - 2.7rem) 12% / 1rem 1rem no-repeat,
    url("../images/decor/sie-topographic-pattern-mobile.svg") center / cover no-repeat;
  opacity: 0.48;
  pointer-events: none;
}

.engineering-hero__inner {
  display: grid;
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding: clamp(3rem, 10vw, 5rem) var(--space-page) 2rem;
}

.engineering-hero__content {
  position: relative;
  z-index: 2;
  max-width: 47rem;
}

.engineering-hero__eyebrow {
  margin: 0 0 1rem;
  color: #009ed1;
  font-size: clamp(0.88rem, 3.6vw, 1.08rem);
  font-weight: 750;
  letter-spacing: 0.075em;
  line-height: 1.4;
}

.engineering-hero__title {
  margin: 0;
  color: var(--color-navy-950);
  font-size: clamp(2.35rem, 9.3vw, 4.2rem);
  line-height: 1.08;
  text-wrap: balance;
}

.engineering-hero__description {
  max-width: 44rem;
  margin: 1.35rem 0 0;
  color: #233f68;
  font-size: clamp(1.03rem, 4.2vw, 1.28rem);
  line-height: 1.62;
}

.engineering-hero__actions {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.7rem;
}

.engineering-hero__button {
  display: inline-flex;
  min-height: 3.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  border: 0.12rem solid #00a9dc;
  border-radius: 0.55rem;
  color: #007eac;
  background: rgb(255 255 255 / 74%);
  font-size: clamp(1rem, 4vw, 1.18rem);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.engineering-hero__button--primary {
  border-color: #05aedd;
  color: var(--color-white);
  background: linear-gradient(105deg, #02a6d7, #12bee7);
  box-shadow: 0 0.75rem 1.5rem rgb(0 156 207 / 16%);
}

.engineering-hero__button:hover {
  color: var(--color-white);
  background: var(--color-navy-950);
  transform: translateY(-0.1rem);
}

.engineering-hero__button:active { transform: translateY(0); }

.engineering-hero__button:focus-visible {
  outline: 0.2rem solid var(--color-focus);
  outline-offset: 0.2rem;
}

.engineering-hero__visual {
  position: relative;
  width: calc(100% + 2rem);
  min-width: 0;
  margin: 1.5rem -1rem 0;
  aspect-ratio: 1672 / 941;
}

.engineering-hero__visual > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 63.999rem) {
  .engineering-page .engineering-hero [data-ai-agent] {
    display: grid;
    justify-items: end;
    min-height: 3.5rem;
    margin-top: 0.35rem;
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .engineering-page .engineering-hero .ai-agent {
    position: relative;
    right: auto;
    bottom: auto;
  }

  .engineering-page .engineering-hero .ai-agent__trigger {
    width: 3.5rem;
    height: 3.5rem;
  }

  .engineering-page .engineering-hero .ai-agent__icon {
    width: 2.45rem;
    height: 2.45rem;
  }
}

@media (min-width: 48rem) {
  .engineering-hero__background {
    background:
      radial-gradient(circle, rgb(8 185 232 / 28%) 1.5px, transparent 1.8px) 2rem 3rem / 1.2rem 1.2rem no-repeat,
      radial-gradient(circle, rgb(8 185 232 / 22%) 1.4px, transparent 1.7px) calc(100% - 3rem) 15% / 1rem 1rem no-repeat,
      url("../images/decor/sie-topographic-pattern.svg") center / cover no-repeat;
  }

  .engineering-hero__actions {
    grid-template-columns: repeat(2, minmax(0, 17.5rem));
    gap: 1.4rem;
  }

  .engineering-hero__visual { margin-top: 2rem; }
}

@media (min-width: 64rem) {
  html { scroll-padding-top: var(--header-height-desktop); }

  .engineering-hero__inner {
    position: relative;
    min-height: calc(100svh - var(--header-height-desktop));
    grid-template-columns: minmax(31rem, 0.9fr) minmax(37rem, 1.25fr);
    align-items: center;
    padding-block: clamp(3.4rem, 8vh, 6rem) clamp(3rem, 6vh, 4rem);
  }

  .engineering-hero__content {
    z-index: 2;
    align-self: center;
    padding-bottom: 4rem;
  }

  .engineering-hero__title { font-size: clamp(3rem, 4.15vw, 4.25rem); }

  .engineering-hero__visual {
    align-self: end;
    width: min(65vw, 68rem);
    margin: 0 -8rem -1.5rem -8rem;
  }

}

@media (min-width: 64rem) and (max-height: 42rem) {
  .engineering-hero__inner {
    min-height: calc(100svh - var(--header-height-desktop));
    padding-block: 2rem;
  }

  .engineering-hero__content { padding-bottom: 1rem; }
  .engineering-hero__eyebrow { margin-bottom: 0.55rem; }
  .engineering-hero__title { font-size: clamp(2.65rem, 3.6vw, 3.55rem); }
  .engineering-hero__description { margin-top: 0.85rem; font-size: 1.02rem; line-height: 1.48; }
  .engineering-hero__actions { margin-top: 1rem; }
  .engineering-hero__visual { width: min(61vw, 58rem); margin-bottom: -1rem; }
}

@media (max-width: 23.5rem) {
  .engineering-hero__inner { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .engineering-hero__button {
    transition: none;
  }
}

/* Quiénes somos */
.engineering-about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-navy-950);
  background:
    radial-gradient(circle at 92% 12%, rgb(8 185 232 / 7%), transparent 22rem),
    linear-gradient(150deg, #fff 0%, #f9fcff 55%, #f3f9fd 100%);
}

.engineering-about::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("../images/decor/sie-topographic-pattern-mobile.svg") center / cover no-repeat,
    radial-gradient(circle, rgb(8 168 220 / 17%) 1px, transparent 1.25px) 96% 7% / 6.5rem 6.5rem no-repeat,
    radial-gradient(circle, rgb(8 168 220 / 12%) 1px, transparent 1.25px) 3% 94% / 5rem 5rem no-repeat;
  content: "";
  opacity: 0.24;
  pointer-events: none;
}

.engineering-about__inner {
  display: grid;
  width: min(100%, var(--content-max-width));
  gap: 1.75rem;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 4.5rem) var(--space-page) clamp(3.25rem, 8vw, 4.75rem);
}

.engineering-about__header { text-align: left; }

.engineering-about__eyebrow {
  margin: 0 0 0.65rem;
  color: #009ed1;
  font-size: clamp(0.82rem, 3vw, 1rem);
  font-weight: 750;
  letter-spacing: 0.11em;
}

.engineering-about__header h2 {
  margin: 0;
  color: var(--color-navy-950);
  font-size: clamp(2.35rem, 10vw, 4.25rem);
  line-height: 1.06;
  text-wrap: balance;
}

.engineering-about__accent {
  display: block;
  width: 4.5rem;
  height: 0.2rem;
  margin-top: 1rem;
  border-radius: 999px;
  background: var(--color-cyan-500);
}

.engineering-about__header > p:last-child {
  max-width: 47rem;
  margin: 1.25rem 0 0;
  color: #29496f;
  font-size: clamp(1rem, 3.6vw, 1.17rem);
  line-height: 1.62;
}

.engineering-pillars {
  position: relative;
  display: grid;
  gap: 0.75rem;
  margin: 1.65rem 0 0;
  padding: 0;
  list-style: none;
}

.engineering-pillars::before,
.engineering-principles::before {
  position: absolute;
  top: 2.25rem;
  bottom: -2rem;
  left: 2.25rem;
  z-index: -1;
  border-left: 2px dotted rgb(0 158 209 / 48%);
  content: "";
}

.engineering-pillars li {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 4.5rem;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem 0.65rem 0;
  border: 1px solid #d6e8f3;
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 0.55rem 1.4rem rgb(15 62 101 / 7%);
}

.engineering-pillars__icon,
.engineering-principle__icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #039ed5;
  background: #f4fbff;
}

.engineering-pillars__icon {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid #bfe4f3;
  box-shadow: 0 0 0 0.3rem #fff;
}

.engineering-pillars svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.engineering-pillars strong {
  color: #092b50;
  font-size: clamp(0.98rem, 3.8vw, 1.08rem);
  line-height: 1.28;
}

.engineering-principles {
  position: relative;
  display: grid;
  gap: 1rem;
}

.engineering-principles::before {
  top: -2rem;
  bottom: 2.5rem;
}

.engineering-principle {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1.35rem 1.15rem 1.4rem 0;
  border: 1px solid #cfe4f1;
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 0.75rem 1.8rem rgb(15 62 101 / 8%);
}

.engineering-principle__icon {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid #bfe4f3;
  box-shadow: 0 0 0 0.3rem #fff;
}

.engineering-principle__icon svg {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.engineering-principle__label {
  margin: 0.3rem 0 0;
  color: #009ed1;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.engineering-principle h3 {
  margin: 0;
  color: #071e42;
  font-size: clamp(1.55rem, 6vw, 2rem);
  line-height: 1.1;
}

.engineering-principle div > p:last-child {
  margin: 0.8rem 0 0;
  color: #345374;
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (min-width: 48rem) {
  .engineering-about::before { background-image: url("../images/decor/sie-topographic-pattern.svg"); }
  .engineering-principle { grid-template-columns: 5.25rem minmax(0, 1fr); padding: 1.55rem 1.5rem; }
  .engineering-principle__icon { width: 5rem; height: 5rem; }
  .engineering-pillars::before,
  .engineering-principles::before { left: 2.5rem; }
}

@media (min-width: 72rem) {
  .engineering-about__inner {
    grid-template-columns: minmax(31rem, 0.9fr) minmax(37rem, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 5vw, 6rem);
    min-height: min(50rem, calc(100svh - var(--header-height-desktop)));
    padding-block: clamp(3rem, 6vh, 4.75rem);
  }

  .engineering-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 2rem;
  }

  .engineering-pillars::before {
    top: 2.35rem;
    right: -4rem;
    bottom: auto;
    left: 2.35rem;
    border-top: 2px dotted rgb(0 158 209 / 48%);
    border-left: 0;
  }

  .engineering-pillars li {
    min-height: 8.4rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    place-items: start center;
    gap: 0.65rem;
    padding: 0.85rem 0.65rem;
    text-align: center;
  }

  .engineering-pillars__icon { width: 4.7rem; height: 4.7rem; }
  .engineering-pillars strong { font-size: 0.9rem; }
  .engineering-principles { gap: 1.15rem; }
  .engineering-principles::before {
    top: 2.75rem;
    bottom: 2.75rem;
    left: -3rem;
  }
  .engineering-principle { min-height: 14.2rem; }
  .engineering-principle div > p:last-child { font-size: 0.91rem; line-height: 1.5; }
}

@media (min-width: 75rem) {
  .engineering-page .ai-agent--over-content .ai-agent__trigger {
    min-width: 4rem;
    width: 4rem;
    min-height: 4rem;
    height: 4rem;
    padding: 0;
    background: linear-gradient(145deg, var(--color-cyan-500), #007ca7);
  }

  .engineering-page .ai-agent--over-content .ai-agent__text { display: none; }

  .engineering-page .ai-agent--over-content .ai-agent__icon {
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    background: transparent;
  }
}

@media (min-width: 72rem) and (max-height: 42rem) {
  .engineering-about__inner { min-height: 0; padding-block: 2.5rem; }
  .engineering-about__header h2 { font-size: 3.25rem; }
  .engineering-about__header > p:last-child { margin-top: 0.9rem; font-size: 1rem; line-height: 1.5; }
  .engineering-pillars { margin-top: 1.25rem; }
  .engineering-pillars li { min-height: 7.2rem; }
  .engineering-pillars__icon { width: 4rem; height: 4rem; }
  .engineering-pillars svg { width: 2.35rem; height: 2.35rem; }
  .engineering-principle { min-height: 11.6rem; padding-block: 1.15rem; }
  .engineering-principle__icon { width: 4.25rem; height: 4.25rem; }
  .engineering-principle__icon svg { width: 2.6rem; height: 2.6rem; }
  .engineering-principle div > p:last-child { margin-top: 0.55rem; font-size: 0.84rem; line-height: 1.42; }
}

@media (max-width: 23.5rem) {
  .engineering-about__inner { padding-inline: 1rem; }
  .engineering-about__header h2 { font-size: 2.15rem; }
  .engineering-pillars li,
  .engineering-principle { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; }
  .engineering-pillars__icon,
  .engineering-principle__icon { width: 4rem; height: 4rem; }
  .engineering-pillars::before,
  .engineering-principles::before { left: 2rem; }
  .engineering-principle { padding: 1.15rem 0.9rem 1.2rem 0; }
  .engineering-principle div > p:last-child { font-size: 0.9rem; }
}

/* Dirección y equipo */
.engineering-team {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-navy-950);
  background:
    radial-gradient(circle at 8% 16%, rgb(8 185 232 / 6%), transparent 20rem),
    linear-gradient(145deg, #fbfdff 0%, #fff 48%, #f4f9fd 100%);
}

.engineering-team::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("../images/decor/sie-topographic-pattern-mobile.svg") center / cover no-repeat,
    radial-gradient(circle, rgb(8 168 220 / 17%) 1px, transparent 1.25px) 97% 8% / 6rem 6rem no-repeat,
    radial-gradient(circle, rgb(8 168 220 / 12%) 1px, transparent 1.25px) 3% 92% / 5rem 5rem no-repeat;
  content: "";
  opacity: 0.23;
  pointer-events: none;
}

.engineering-team__inner {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 4.5rem) var(--space-page) clamp(0.25rem, 1vw, 0.5rem);
}

.engineering-team__header {
  max-width: 68rem;
  margin-inline: auto;
  text-align: center;
}

.engineering-team__eyebrow {
  margin: 0 0 0.65rem;
  color: #009ed1;
  font-size: clamp(0.82rem, 3vw, 1rem);
  font-weight: 750;
  letter-spacing: 0.11em;
}

.engineering-team__header h2 {
  margin: 0;
  color: var(--color-navy-950);
  font-size: clamp(2.2rem, 8.5vw, 3.75rem);
  line-height: 1.08;
  text-wrap: balance;
}

.engineering-team__header > p:last-child {
  max-width: 50rem;
  margin: 1rem auto 0;
  color: #345374;
  font-size: clamp(1rem, 3.5vw, 1.18rem);
  line-height: 1.55;
}

.engineering-team__layout {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.engineering-team__people,
.engineering-team__side {
  display: grid;
  gap: 1rem;
}

.team-member,
.team-capabilities,
.team-linkedin {
  overflow: hidden;
  border: 1px solid #cfe3ef;
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 0.75rem 1.8rem rgb(15 62 101 / 8%);
}

.team-member {
  container-type: inline-size;
}

.team-member__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f5f9fc;
}

.team-member__photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #f5f9fc;
  transition: transform 250ms ease;
}

.team-member__photo--camilo,
.team-member__photo--mauricio {
  object-position: 50% 40%;
  filter: brightness(1.08) contrast(0.98);
}

.team-member__profile {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: clamp(1.25rem, 4vw, 2rem);
  overflow-y: auto;
  color: #fff;
  background: rgb(0 26 54 / 88%);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 250ms ease, transform 250ms ease;
}

.team-member__profile-title {
  margin: 0 0 1.15rem;
  color: var(--color-cyan-400);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.team-member__profile dl { display: grid; gap: 0.9rem; margin: 0; }
.team-member__profile dl > div { min-height: 2rem; border-bottom: 1px solid rgb(23 201 243 / 30%); }
.team-member__profile dt { color: #fff; font-size: clamp(0.92rem, 2.7vw, 1.05rem); font-weight: 700; line-height: 1.35; }
.team-member__profile dd {
  margin: 0.3rem 0 0;
  color: rgb(232 246 255 / 88%);
  font-size: 0.82rem;
  line-height: 1.45;
}

.team-member__profile dd ul {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding-left: 1.1rem;
}


.team-member__profile-toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 2rem;
  color: #fff;
  background: rgb(0 26 54 / 76%);
  box-shadow: 0 0.4rem 1rem rgb(0 12 28 / 20%);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
}

.team-member__profile-toggle:focus-visible { outline: 0.2rem solid var(--color-focus); outline-offset: 0.15rem; }
.team-member__visual:hover .team-member__profile,
.team-member__visual:focus-within .team-member__profile,
.team-member__visual.is-profile-open .team-member__profile { opacity: 1; pointer-events: auto; transform: none; }
.team-member__visual:hover .team-member__photo,
.team-member__visual:focus-within .team-member__photo,
.team-member__visual.is-profile-open .team-member__photo { transform: scale(1.02); }
.team-member__visual.is-profile-open .team-member__profile-toggle > span:last-child { transform: rotate(45deg); }

.team-member__content {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.55rem;
  padding: 0.8rem 1.15rem;
  border-top: 1px solid #d9e8f1;
}

.team-member h3 {
  display: block;
  margin: 0;
  color: #08264b;
  font-size: min(1.25rem, 4.4cqi);
  font-weight: 750;
  line-height: 1.18;
  white-space: nowrap;
}

.team-member__role {
  margin: 0;
  color: #53718b;
  font-size: clamp(0.88rem, 3.2vw, 0.98rem);
  font-weight: 600;
  line-height: 1.3;
}


.team-member__profile-action,
.team-member__write {
  display: inline-flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #b9d5e7;
  border-radius: 0.65rem;
  color: #0a66a0;
  background: #f1f8fc;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}



.team-member__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.65rem;
  color: #356d8d;
}


.team-member__profile-action {
  min-width: 0;
  border-color: #006399;
  color: #fff;
  background: linear-gradient(110deg, #006399, #003663);
  box-shadow: 0 2px 5px rgb(0 26 54 / 12%);
  white-space: normal;
  text-align: center;
  cursor: pointer;
}
.team-member__profile-action:hover {
  background: linear-gradient(110deg, #007bb8, #004b7c);
  box-shadow: 0 4px 10px rgb(0 54 90 / 20%);
  transform: translateY(-1px);
}
.team-member__profile-action:active { transform: translateY(0); box-shadow: none; }
.team-member__write {
  min-width: 0;
  color: #fff;
  border-color: #063b60;
  background: #063b60;
  box-shadow: 0 2px 5px rgb(0 26 54 / 12%);
  cursor: pointer;
}
.team-member__write:hover {
  background: #005781;
  border-color: #005781;
  box-shadow: 0 4px 10px rgb(0 54 90 / 20%);
  transform: translateY(-1px);
}

.team-member__write:active { transform: translateY(0); box-shadow: none; }
.team-member__write svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.team-member__profile-action:focus-visible,
.team-member__write:focus-visible,
.director-contact :focus-visible { outline: 2px solid #039ed5; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
   .team-member__write, .team-member__profile-action { transition: none; }
   .team-member__write:hover, .team-member__profile-action:hover { transform: none; }
}

.director-contact {
  width: min(36rem, calc(100% - 1.5rem));
  max-width: calc(100% - 1.5rem);
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #bfe4f3;
  border-radius: 1rem;
  color: #08264b;
  background: #fff;
  box-shadow: 0 1.5rem 5rem rgb(0 26 54 / 35%);
  font-family: inherit;
}
.director-contact::backdrop { background: rgb(0 15 35 / 72%); }
.director-contact__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem 0.4rem 1.25rem;
  color: #17c9f3;
  background: #001a36;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.director-contact__close {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.8rem;
  cursor: pointer;
}
.director-contact__body { padding: clamp(1rem, 4vw, 1.75rem); overflow-wrap: anywhere; }
.director-contact__label { margin: 0 0 0.35rem; color: #53718b; }
.director-contact h2 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.7rem); line-height: 1.2; }
.director-contact__role { margin: 0.5rem 0 1rem; color: #53718b; }
.director-contact__form { display: grid; gap: 1rem; }
.director-contact__form[hidden] { display: none; }
.director-contact__form > label { display: grid; gap: 0.4rem; font-size: 0.94rem; font-weight: 600; }
.director-contact input:not([type="checkbox"]),
.director-contact textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.875rem;
  padding: 0.7rem;
  border: 1px solid #82b8d4;
  border-radius: 0.45rem;
  color: #08264b;
  background: #fff;
  font: inherit;
  font-size: 1rem;
}
.director-contact textarea { resize: vertical; }
.director-contact__form > .director-contact__consent {
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  padding-block: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
}
.director-contact__consent input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: #006399; }
.director-contact__consent a { color: #006399; text-underline-offset: 0.15em; }
.director-contact__submit {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  color: #fff;
  background: linear-gradient(110deg, #006399, #003663);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.director-contact__submit:disabled { opacity: 0.7; cursor: wait; }
.director-contact__status:not(:empty) { margin-top: 1rem; line-height: 1.5; }
.director-contact__trap { display: none; }



@media (max-width: 47.999rem) {
  .engineering-hero__visual { display: none; }

  .engineering-hero__inner { padding-bottom: 1rem; }
  .engineering-about__inner { padding-top: 1.5rem; }

  .engineering-page .engineering-hero [data-ai-agent-hide-trigger] {
    min-height: 0;
    margin-top: 0;
  }

  .team-member__photo {
    width: 100%;
    height: 100%;
    margin-inline: auto;
  }

  .team-member__visual {
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .team-member__content { text-align: center; }
}

.team-capabilities,
.team-linkedin { padding: 1.35rem; }

.team-panel__icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 1px solid #bfe4f3;
  border-radius: 50%;
  color: #039ed5;
  background: #f4fbff;
}

.team-panel__icon svg {
  width: 2.65rem;
  height: 2.65rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.team-capabilities > h3,
.team-linkedin h3 {
  margin: 0.85rem 0 0;
  color: #08264b;
  font-size: clamp(1.25rem, 5vw, 1.55rem);
  line-height: 1.18;
}

.team-capabilities__intro {
  margin: 0.7rem 0 0;
  color: #53718b;
  font-size: 0.9rem;
  line-height: 1.5;
}

.team-capabilities ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.team-capabilities li {
  display: grid;
  min-height: 44px;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #dceaf2;
  border-radius: 0.65rem;
  background: #fbfdff;
}

.team-capabilities li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-right: 1px solid #d4e8f2;
  color: #039ed5;
}

.team-capabilities li svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.team-capabilities li strong {
  color: #29496f;
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: normal;
}

.team-linkedin {
  display: grid;
  justify-items: start;
}

.team-linkedin h3 { margin-top: 0; }

.team-linkedin p {
  margin: 0.45rem 0 0;
  color: #496783;
  font-size: 0.94rem;
  line-height: 1.45;
}

.team-linkedin__action {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.65rem 1rem;
  border: 1px solid #a8bfd0;
  border-radius: 0.55rem;
  color: #668096;
  background: #edf3f6;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.engineering-team__experience-band {
  width: 100%;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
  border-block: 1px solid rgb(8 185 232 / 24%);
  background: linear-gradient(90deg, rgb(244 249 253 / 96%), rgb(8 185 232 / 8%), rgb(242 249 253 / 96%));
}

.engineering-team__experience-band-inner {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding: clamp(0.875rem, 1.5vw, 1.125rem) var(--space-page);
  text-align: center;
}

.engineering-team__experience-band p {
  margin: 0;
  color: var(--color-cyan-500);
  font-size: clamp(0.72rem, 2vw, 0.86rem);
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.engineering-team__experience-band strong {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-navy-950);
  font-size: clamp(1.08rem, 2.35vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.engineering-team__experience-band strong span {
  color: var(--color-cyan-500);
}

@media (min-width: 48rem) {
  .engineering-team::before { background-image: url("../images/decor/sie-topographic-pattern.svg"); }
  .engineering-team__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engineering-team__side { grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr); }
}

@media (min-width: 72rem) {
  .engineering-team__layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(20rem, 0.8fr);
    align-items: stretch;
    gap: 1.2rem;
  }

  .engineering-team__people { gap: 1.2rem; }
  .engineering-team__side { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 1.2rem; }
  .team-member { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .team-member__visual { min-height: 24rem; aspect-ratio: auto; }
  .team-member__photo { position: absolute; inset: 0; height: 100%; min-height: 24rem; aspect-ratio: auto; }
  .team-capabilities { display: grid; align-content: start; }
  .team-linkedin { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .team-linkedin__action { grid-column: 1 / -1; }
}

@media (min-width: 72rem) and (max-height: 42rem) {
  .engineering-team__inner { padding: 2.5rem var(--space-page) 0.5rem; }
  .engineering-team__layout { margin-top: 1.6rem; }
  .team-member__visual,
  .team-member__photo { min-height: 20rem; }
  .team-capabilities,
  .team-linkedin { padding: 1rem; }
  .team-capabilities ul { gap: 0.45rem; margin-top: 0.7rem; }
  .team-capabilities li { min-height: 3.25rem; }
}

@media (max-width: 23.5rem) {
  .engineering-team__inner { padding-inline: 1rem; }
  .engineering-team__header h2 { font-size: 2rem; }
  .team-member__content { padding-inline: 1rem; text-align: center; }
  
  .team-capabilities,
  .team-linkedin { padding: 1.1rem; }
  .team-panel__icon { width: 3.6rem; height: 3.6rem; }
  .team-panel__icon svg { width: 2.35rem; height: 2.35rem; }
  .team-capabilities ul { grid-template-columns: 1fr; }
}

@media (hover: hover) and (pointer: fine) {
  .team-member__profile-toggle-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .team-member__photo,
  .team-member__profile { transition: opacity 1ms linear; transform: none !important; }
}

/* Principios */
.engineering-principles-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 40%, rgb(0 125 197 / 10%), transparent 36rem),
    linear-gradient(145deg, #001027, #001a36 52%, #000b1e);
}

.engineering-principles-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("../images/decor/sie-topographic-pattern-mobile.svg") center / cover no-repeat,
    radial-gradient(circle, rgb(23 201 243 / 30%) 1px, transparent 1.3px) 96% 12% / 6rem 7rem no-repeat,
    radial-gradient(circle, rgb(23 201 243 / 22%) 1px, transparent 1.3px) 3% 86% / 5rem 6rem no-repeat;
  content: "";
  opacity: 0.32;
  pointer-events: none;
}

.engineering-principles-section__inner {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 4.5rem) var(--space-page) clamp(3.25rem, 8vw, 4.75rem);
}

.engineering-principles-section__header {
  max-width: 72rem;
  margin-inline: auto;
  text-align: center;
}

.engineering-principles-section__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--color-cyan-400);
  font-size: clamp(0.82rem, 3vw, 1rem);
  font-weight: 750;
  letter-spacing: 0.18em;
}

.engineering-principles-section__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 8.5vw, 4rem);
  line-height: 1.08;
  text-wrap: balance;
}

.engineering-principles-section__header > p:last-child {
  max-width: 54rem;
  margin: 1rem auto 0;
  color: rgb(226 242 255 / 80%);
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  line-height: 1.55;
}

.principles-list {
  display: grid;
  gap: 0.8rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.principles-list li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(23 201 243 / 82%);
  border-radius: 0.8rem;
  background: linear-gradient(145deg, rgb(0 19 45 / 94%), rgb(0 34 68 / 84%));
  box-shadow: 0 0.7rem 1.7rem rgb(0 5 18 / 18%);
}

.principles-list li:not(:last-child)::after {
  position: absolute;
  bottom: -0.82rem;
  left: 3.45rem;
  width: 0.12rem;
  height: 0.82rem;
  background: var(--color-cyan-400);
  box-shadow: 0 0.38rem 0 -0.06rem var(--color-cyan-400);
  content: "";
}

.principles-list__icon {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border: 1px solid var(--color-cyan-400);
  border-radius: 50%;
  color: var(--color-cyan-400);
  background: rgb(0 20 48 / 92%);
  box-shadow: 0 0 1rem rgb(23 201 243 / 8%);
}

.principles-list__icon svg {
  width: 3.35rem;
  height: 3.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.principles-list h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 4.2vw, 1.28rem);
  line-height: 1.2;
  text-wrap: balance;
}

.principles-list p {
  margin: 0.45rem 0 0;
  color: rgb(218 236 250 / 78%);
  font-size: clamp(0.88rem, 3.2vw, 1rem);
  line-height: 1.4;
}

@media (min-width: 48rem) {
  .engineering-principles-section::before { background-image: url("../images/decor/sie-topographic-pattern.svg"); }
  .principles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .principles-list li:not(:last-child)::after { display: none; }
}

@media (min-width: 72rem) {
  .principles-list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.2rem 0;
  }

  .principles-list li {
    grid-column: span 3;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    place-items: start center;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }

  .principles-list li:nth-child(n + 5) { grid-column: span 4; }

  .principles-list li:nth-child(1)::before,
  .principles-list li:nth-child(2)::before,
  .principles-list li:nth-child(3)::before,
  .principles-list li:nth-child(5)::before,
  .principles-list li:nth-child(6)::before {
    position: absolute;
    top: 0.35rem;
    right: 0;
    bottom: 0.35rem;
    border-right: 1px solid rgb(23 201 243 / 62%);
    content: "";
  }

  .principles-list__icon { width: 7rem; height: 7rem; }
  .principles-list__icon svg { width: 4.6rem; height: 4.6rem; }
  .principles-list h3 { min-height: 3rem; margin-top: 0.85rem; font-size: 1.05rem; }
  .principles-list p { max-width: 16rem; font-size: 0.9rem; }
}

@media (min-width: 72rem) and (max-height: 42rem) {
  .engineering-principles-section__inner { padding-block: 2.5rem; }
  .engineering-principles-section__header h2 { font-size: 3.3rem; }
  .engineering-principles-section__header > p:last-child { margin-top: 0.75rem; font-size: 1rem; }
  .principles-list { gap: 1.35rem 0; margin-top: 1.6rem; }
  .principles-list__icon { width: 5.7rem; height: 5.7rem; }
  .principles-list__icon svg { width: 3.7rem; height: 3.7rem; }
  .principles-list h3 { min-height: 2.5rem; margin-top: 0.55rem; font-size: 0.96rem; }
  .principles-list p { margin-top: 0.25rem; font-size: 0.82rem; }
}

@media (max-width: 23.5rem) {
  .engineering-principles-section__inner { padding-inline: 1rem; }
  .engineering-principles-section__header h2 { font-size: 2rem; }
  .principles-list li { grid-template-columns: 4.4rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem; }
  .principles-list__icon { width: 4.4rem; height: 4.4rem; }
  .principles-list__icon svg { width: 2.9rem; height: 2.9rem; }
  .principles-list li:not(:last-child)::after { left: 2.9rem; }
}
.team-member__actions .team-member__write {
  width: 100%;
}

.team-member__actions {
  grid-template-columns: 1fr;
}
