/**
*	ROOT
*	=======================================================================================================
**/
:root {
    --color-navy: #071a2c;
    --color-red: #c91e31;
    --color-white: #ffffff;
    --color-gray-cool: #f4f6f9;
    --font-primary: "Inter", sans-serif;
    --base-size-font: 15px;
    --text-content-size: 1rem;
    --transition: all 0.4s ease;
    --header-height: 92px;
    --navy: #071a2c;
    --red-dark: #a5192a;
    --ink: #122434;
    --muted: #637584;
    --cyan: #3ec7d3;
    --cloud: #f5f7f8;
    --line: #dae2e7;
    --shadow: 0 22px 65px rgba(10, 30, 45, 0.1);
    --recognition-green: #24574d;
    --h1: clamp(50px, 5vw, 60px);
    --h1-int: clamp(42px, 4.2vw, 50px);
    --header-floating-h: 70px;
    --h2: clamp(34px, 3.05vw, 44px);
    --h3: 22px;
    --card: 15px;
    --cap: 13px;
    --label: 11.5px;
}

/**
*	BASE
*	=======================================================================================================
**/
html {
  font-size: var(--base-size-font);
  scrollbar-gutter: stable;
}
body {
  font-family: var(--font-primary);
  color: var(--color-navy);
  background-color: var(--color-white);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
h2 {
  text-wrap: balance;
}
p{
  font-size: var(--text-content-size);
}
img {
  display: block;
  max-width: 100%;
}
section, footer {
    scroll-margin-top: 90px;
    overflow-x: clip;
}
strong {
  font-weight: 800;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- Container --- */
.container {
  margin: 0 auto;
  width: 100%;
  position: relative;
  padding: 0 1.5rem;
  max-width: 1440px;
  z-index: 1;
}

/**
*	UTILIDADES
*	=======================================================================================================
**/
.d-flex {
  display: flex;
}

/* --- Icon (SVG inline) --- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-navy);
  flex-shrink: 0;
}
.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.icon.-circle {
  border-radius: 50%;
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 10px;
  box-sizing: border-box;
}

/**
*	GENERAL
*	=======================================================================================================
**/

/* --- Tagline --- */
.tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--tagline-size);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 10px;
}

/* --- Botones --- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
  min-height: 48px;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 7px;
  font-size: 13.8px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--color-white);
  background-color: var(--color-red);
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.2s;
}
.btn:not(.btn-outline-light):not(.btn-outline-dark):hover {
  background-color: var(--red-dark);
  transform: translateY(-2px);
}
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn__icon svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn:hover .btn__icon {
  transform: translateX(5px);
}
.btn.-w100 {
  width: 100%;
  justify-content: center;
}

/* --- Section intro (tagline + título + texto) --- */
.section-intro__title {
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}
.section-intro__text {
  color: var(--color-text);
  font-size: var(--text-content-size);
}
.section-intro__text p + p {
  margin-top: 0.8rem;
}
.section-header__tagline {
  font-size: 1rem;
}

/* --- Reveal (gsap) --- */
[data-reveal] {
  opacity: 0;
}

@media screen and (min-width: 980px) {
  .section-intro__title,
  .section-header__title {
    margin-bottom: 1.3rem;
  }
}

/**
*	HEADER
*	=======================================================================================================
**/
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 1.6rem 0;
}
.header__wrapper {
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.header__logo {
  position: relative;
  z-index: 2;
  width: 170px;
}
.header__nav {
  display: none;
}
.header__menu {
  align-items: center;
  gap: 2.2rem;
}
.header__menu-link {
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 4px;
}
.header__menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--color-red);
    transition: width 0.35s ease;
}
.header__menu-link:hover::after {
  width: 100%;
}
.header__actions {
  align-items: center;
  gap: 1.5rem;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-white);
}
.lang-switch .lang-globe {
  width: 17px;
  height: 17px;
  opacity: 0.75;
  margin-right: 2px;
  flex-shrink: 0;
}
.lang-switch a {
  color: var(--color-white);
  padding: 4px 2px;
  transition: var(--transition);
}
.lang-switch .lang-alt {
  color: rgba(255, 255, 255, 0.6);
}
.lang-switch .lang-alt:hover,
.lang-switch .lang-alt:focus-visible {
  color: var(--color-white);
}
.lang-switch .lang-on {
  border-bottom: 2px solid var(--color-red);
  cursor: default;
}
.lang-switch .lang-sep {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}
.nav-sidebar .lang-switch {
  margin-bottom: 1.5rem;
  font-size: 14px;
}
.header__actions .lang-switch {
  display: none;
}
@media screen and (min-width: 980px) {
  .header__actions .lang-switch {
    display: flex;
  }
}
.header__btn {
  white-space: nowrap;
  display: none;
  padding: 0.95rem 1.2rem;
}
.header__hamburger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  z-index: 2;
}
.header__hamburger span {
  width: 18px;
  height: 2px;
  background-color: #fff;
}

/* --- Header flotante --- */
.header-floating {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
    padding: 0.8rem 0;
    background-color: var(--color-navy);
    box-shadow: 0 10px 30px rgba(7, 26, 44, 0.15);
    transform: translateY(-100%);
    transition: transform 0.45s ease;
}
.header-floating.is-visible {
  transform: translateY(0);
}
.header-floating__wrapper {
  align-items: center;
  justify-content: space-between;
}
.header-floating__btn {
  white-space: nowrap;
  display: none;
}
.header-floating__btn::before {
  background-color: var(--color-red);
}

/* --- Nav sidebar (mobile) --- */
.nav-sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(7, 26, 44, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 90;
}
.nav-sidebar-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.nav-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 82%;
  max-width: 340px;
  background-color: var(--color-navy);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  padding: 2rem 1.5rem;
  overflow-y: auto;
}
.nav-sidebar.is-open {
  transform: translateX(0);
}
.nav-sidebar__top {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.nav-sidebar__logo {
  width: 110px;
}
.nav-sidebar__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
}
.nav-sidebar__menu {
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.nav-sidebar__link {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 600;
}
.nav-sidebar .btn::before {
  background-color: var(--color-red);
}

@media screen and (max-width: 979px) {
  .header__btn,
  .header-floating__btn {
    display: none !important;
  }
}

@media screen and (min-width: 980px) and (max-width: 1279px) {
  .header__menu {
    gap: 1.3rem;
  }
  .header__nav {
    padding-left: 10px;
  }
  .header__wrapper {
    gap: 20px;
  }
  .header__logo {
    width: 140px;
  }
}

@media screen and (min-width: 980px) {
  .header__nav {
    display: block;
    padding-left: 50px;
  }
  .header__btn {
    display: inline-flex;
  }
  .header__hamburger {
    display: none;
  }
  .header-floating__btn {
    display: inline-flex;
  }
  .header-floating__hamburger {
    display: none;
  }
}

/**
*	FOOTER
*	=======================================================================================================
**/
.footer {
  background-color: var(--color-navy);
  position: relative;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.25rem;
  padding: 3rem 0 2rem;
  align-items: start;
}
.footer__brand,
.footer__grid > .footer__nav:last-child {
  grid-column: 1 / -1;
}
.footer__brand .footer__logo {
  width: 140px;
  margin-bottom: 1rem;
}
.footer__brand p {
  margin: 0;
  max-width: 360px;
  color: #c5d6e0;
  font-size: 0.875rem;
  line-height: 1.65;
}
.footer__nav h4 {
  margin: 0 0 0.875rem;
  color: #7f97a6;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer__nav nav, .footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: #c5d6e0;
    font-size: 0.875rem;
    line-height: 1.55;
    text-wrap: balance;
}
.footer__nav nav a {
  font-weight: 600;
}
.footer__nav a {
  color: #c5d6e0;
  transition: color 0.3s ease;
}
.footer__nav a:hover {
  color: var(--color-white);
}
.footer__legal-links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.footer__contact small {
    color: #7f97a6;
    font-size: 0.75rem;
}
.footer__bottom {
  flex-direction: column;
  gap: 0.75rem;
  padding: 18px 0 22px;
  border-top: 1px solid #ffffff1f;
}
.footer__col {
  flex-direction: column;
  gap: 1rem;
}
.footer__logo {
  width: 115px;
}
.footer__copy,
.footer__credits {
  color: rgba(244, 246, 249, 0.6);
  font-size: 0.85rem;
}
.footer__credits {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer__credits-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.footer__credits-link img {
  width: 26px;
  height: auto;
}
.footer__credits-link:hover {
  opacity: 1;
}
.copyright {
  position: relative;
  z-index: 1;
  background-color: var(--color-navy);
}

@media screen and (min-width: 980px) {
  .footer__grid {
    grid-template-columns: 1.3fr 0.85fr 0.85fr 1.2fr;
    gap: 2.5rem;
    padding: 3.375rem 0 2.125rem;
  }
  .footer__brand,
  .footer__grid > .footer__nav:last-child {
    grid-column: auto;
  }
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .footer__col {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .footer__col.-right {
    align-items: flex-end;
    text-align: right;
  }
}

/**
*	BREADCRUMB
*	=======================================================================================================
**/
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}
.breadcrumb__link {
  transition: var(--transition);
}
.breadcrumb__link:hover {
  color: var(--color-cyan);
}
.breadcrumb__current {
  color: var(--color-white);
  font-weight: 600;
}

/**
*	PAGE BANNER (secciones internas)
*	=======================================================================================================
**/
.page-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy);
  padding: 150px 0 50px;
}
.page-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-banner__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 26, 44, 0.8) 0, rgba(7, 26, 44, 0) 100px),
    linear-gradient(
      90deg,
      rgba(7, 26, 44, 0.95) 0%,
      rgba(7, 26, 44, 0.85) 40%,
      rgba(7, 26, 44, 0.45) 70%,
      rgba(7, 26, 44, 0.3) 100%
    );
}
.page-banner__content {
  position: relative;
  z-index: 2;
}
.page-banner__wrapper {
  max-width: 620px;
}
.page-banner__title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: 1rem;
}
.page-banner__text {
  color: var(--color-gray-cool);
  font-size: 1rem;
  max-width: 480px;
}
.breadcrumb {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.breadcrumb__link,
.breadcrumb__current {  
  font-weight: 500;
}

/* --- Menú activo --- */
.header__menu-link.is-active::after {
  width: 100%;
}

/**
*	ICON SOFT
*	=======================================================================================================
**/
.icon.-soft {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 11px;
  box-sizing: border-box;
  background-color: var(--color-tint-strong);
  color: var(--color-icon);
}
.icon.-soft svg {
  stroke-width: 1.8;
}

/**
*	COMPONENTES COMPARTIDOS (reutilizables en home / nosotros / plataforma)
*	=======================================================================================================
**/

/* --- Sección genérica --- */
.section {
  padding: 3rem 0;
}

/* --- Link con flecha ↗ --- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-white);
  transition: var(--transition);
}
.link-arrow::after {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--arrow-ext-mask) center / contain no-repeat;
  mask: var(--arrow-ext-mask) center / contain no-repeat;
  transition: transform 0.35s ease;
}
.link-arrow:hover {
  color: var(--color-cyan);
}
.link-arrow:hover::after {
  transform: translate(3px, -3px);
}

/* --- Lista con checks --- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.check-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.4;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1em;
  height: 1em;
  background-color: var(--color-cyan);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}

/* --- Intro dividida (título + párrafo) --- */
.section-split {
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.section-split__aside {
  max-width: 460px;
}
.section-split .section-intro__title {
  margin-bottom: 0;
}
.product-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background-color: var(--surface-dark);
}
.product-card__media {
  height: 200px;
  overflow: hidden;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
}
.product-card__body .tagline {
  margin-bottom: 0.6rem;
  color: var(--color-cyan);
}

/* --- Barra de integraciones --- */
.integrations {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  margin-top: 1.2rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background-color: var(--surface-dark);
}
.integrations__logos {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.integrations__logos .swiper-wrapper {
  transition-timing-function: linear;
}
.integrations__logos .swiper-slide {
  width: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 0.4rem 0;
}
.integrations__logos img {
  height: 20px;
  width: auto;
  opacity: 0.85;
}

/**
*	PLATAFORMA
*	=======================================================================================================
**/
.page-banner__title strong {
  font-weight: 700;
  color: var(--color-cyan);
}
.page-banner__subtitle {
  display: block;
  margin-top: 0.4rem;
  font-weight: 300;
}
.page-banner__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2rem;
}
.page-banner--overlay .page-banner__title {
  font-weight: 700;
}
.page-banner__content--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}

@media screen and (min-width: 768px) {
  .product-card__media {
    height: 220px;
  }
}

@media screen and (min-width: 980px) {
  .page-banner--overlay {
    padding-bottom: 3rem;
  }
  .section-split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
  .section-split__aside {
    flex: 0 0 38%;
    max-width: none;
  }
  .product-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .product-card__media {
    height: 100%;
    min-height: 280px;
  }
  .integrations {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
  .integrations__logos {
    flex: 1;
  }
  .integrations__logos .swiper-slide + .swiper-slide {
    border-left: 1px solid var(--surface-border);
  }
}

/* --- Plataforma: dos columnas solo cuando hay ancho suficiente --- */
@media screen and (min-width: 1280px) {
  .page-banner__content--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  }
}

/**
*	COMPONENTES COMPARTIDOS (fondo claro): process-flow, cta-box
*	=======================================================================================================
**/

/* --- Título de sección centrado --- */
.section-heading {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

/* --- Link con flecha → (fondo claro) --- */

/* --- Lista de checks (fondo claro) --- */
.check-list li::before {
  background-color: var(--check-color, var(--color-cyan));
}
.check-list--light {
  --check-color: var(--color-red);
  color: var(--color-navy);
}

/* --- Flujo de pasos (process-flow) --- */
.process-flow {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.5rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-cool-2);
  border-radius: 8px;
}
.process-flow__label {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-navy);
}
.process-flow__steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.process-flow__step {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.process-flow__icon {
  width: 36px;
  height: 36px;
}
.process-flow__title {
  font-size: 0.85rem;
  font-weight: 700;
}
.process-flow__text {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-text);
}
.process-flow__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 14px;
  margin-left: 11px;
  background-color: var(--color-icon);
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
  mask: var(--arrow-mask) center / contain no-repeat;
  transform: rotate(90deg);
}

/* --- Caja de llamada a la acción (cta-box) --- */
.cta-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--color-tint);
  border-radius: 8px;
}
.cta-box__main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.cta-box__title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.cta-box__text {
  font-size: 0.9rem;
  color: var(--color-text);
}
.cta-box .btn {
  flex-shrink: 0;
}

/**
*	OBSERVATORIOS (página)
*	=======================================================================================================
**/
.page-banner__lead {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
  
}

@media screen and (min-width: 768px) {
  .process-flow__steps {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .process-flow__step {
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .process-flow__arrow {
    margin: 1rem 0 0;
    transform: none;
  }
  .cta-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

@media screen and (min-width: 980px) {
  .process-flow {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
  }
  .process-flow__label {
    flex: 0 0 150px;
  }
  .process-flow__steps {
    flex: 1;
  }
  
  
  
  
  
}
.cta-box .icon.-soft {
  background-color: var(--color-white);
}

/**
*	CASOS (página)
*	=======================================================================================================
**/
.tag {
  display: inline-block;
  font-size: 0.75rem;
  background-color: var(--color-gray-cool-2);
  padding: 0.35rem 0.8rem;
  border-radius: 10px;
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media screen and (min-width: 768px) {
  .case-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 980px) {
  .case-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/**
*	COMPONENTES COMPARTIDOS: feature-strip, card-icon, capability
*	=======================================================================================================
**/
.section--tint {
  background-color: var(--color-tint);
}
.split-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.page-banner__tag {
  margin-bottom: 0.4rem;
  
}
.diff-list {
  margin-top: 1.2rem;
}

/* --- Barra de beneficios (fondo claro) --- */
.feature-strip {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-cool-2);
}
.feature-strip__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  padding: 1.5rem 0;
}
.feature-strip__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.feature-strip__icon {
  width: 40px;
  height: 40px;
}
.feature-strip__title {
  font-size: 0.85rem;
  font-weight: 700;
}
.feature-strip__text {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-text);
}

/* --- Tarjeta con ícono --- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.card-icon {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-cool-2);
  border-radius: 6px;
}
.card-icon__icon {
  width: 52px;
  height: 52px;
}
.card-icon__title {
  font-size: 1rem;
  font-weight: 800;
}
.card-icon__text {
  font-size: 0.88rem;
  color: var(--color-text);
}

/* --- Capacidades --- */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.capability {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-cool-2);
  border-radius: 6px;
}
.capability__icon {
  width: 44px;
  height: 44px;
}
.capability__title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}
.capability__text {
  font-size: 0.85rem;
  color: var(--color-text);
}

@media screen and (min-width: 580px) {
  .feature-strip__list,
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
  .capability-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 980px) {
  .split-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
  .split-layout > * {
    flex: 1;
    min-width: 0;
  }
  .feature-strip__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .capability-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/**
*	404 y preguntas frecuentes
*	=======================================================================================================
**/
.error-404 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 8rem 0 5rem;
  overflow: hidden;
  background-color: var(--color-navy);
}
.error-404__media {
  position: absolute;
  inset: 0;
}
.error-404__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 26, 44, 0.97) 0%,
    rgba(7, 26, 44, 0.85) 50%,
    rgba(7, 26, 44, 0.6) 100%
  );
}
.error-404__content {
  position: relative;
}
.error-404__code {
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-red);
}
.error-404__title {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}
.error-404__text {
  max-width: 480px;
  color: var(--color-gray-cool);
}
.error-404__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2rem;
}
.error-404__links {
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.error-404__links a {
  
  transition: var(--transition);
}
.error-404__links a:hover {
  color: var(--color-white);
}

.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq__item {
  border: 1px solid var(--color-gray-cool-2);
  border-radius: 8px;
  background-color: var(--color-white);
}
.faq__item + .faq__item {
  margin-top: 0.8rem;
}
.faq__question {
  position: relative;
  padding: 1rem 3rem 1rem 1.3rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker {
  display: none;
}
.faq__question::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background-color: var(--color-text);
  -webkit-mask: var(--chevron-mask) center / contain no-repeat;
  mask: var(--chevron-mask) center / contain no-repeat;
  transition: transform 0.35s ease;
}
.faq__item[open] .faq__question::after {
  transform: rotate(180deg);
}
.faq__answer {
  padding: 0 1.3rem 1.2rem;
  font-size: 0.92rem;
  color: var(--color-text);
}

/* --- Accesibilidad --- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.7rem 1.2rem;
  clip: auto;
  border-radius: 6px;
  background-color: var(--color-white);
  color: var(--color-navy);
}

/**
*	HOME (referencia Wolke_Sitio_Completo_2026_V6.9.32)
*	=======================================================================================================
**/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 7px;
  border: 1px solid transparent;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.005em;
  transition: background 0.2s,
    border-color 0.2s,
    transform 0.2s;
  cursor: pointer;
}
.btn-red:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
}
.btn-red {
  color: #fff;
  background: var(--color-red);
}
.btn-outline-light {
  border-color: #e8f2f4b0;
  color: #fff;
  background: #102b3a55;
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--navy);
}
.btn-outline-dark {
  border-color: #9daeb9;
  color: var(--navy);
  background: transparent;
}
.btn-outline-dark:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}
.btn svg, .text-link svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.btn > span[aria-hidden="true"],
.text-link > span[aria-hidden="true"],
.case-more > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn:hover > span[aria-hidden="true"],
.text-link:hover > span[aria-hidden="true"],
.case-small:hover .case-more > span[aria-hidden="true"],
.case-feature:hover .case-more > span[aria-hidden="true"] {
  transform: translateX(5px);
}
.text-link[target="_blank"]:hover > span[aria-hidden="true"] {
  transform: translate(3px, -3px);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  /* font-weight: 800; */
}
.eyebrow::before {
  content: "";
  width: 25px;
  height: 3px;
  background: var(--color-red);
  flex: none;
}
.eyebrow.light {
  color: #d7e6f0;
}
.eyebrow.dark {
  color: #456074;
}
.section h2 {
  margin: 15px 0 22px;
  font-size: clamp(38px, 4.25vw, 61px);
  line-height: 1.07;
  letter-spacing: -0.046em;
  font-weight: 800;
}
.section-lead {
  /* font-size: 17.5px; */
  line-height: 1.75;
  color: #4b6070;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.07fr 0.93fr;
  gap: 80px;
}
.intro-grid p {
  margin: 0 0 6px;
}
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(640px + var(--header-height)) !important;
  color: #fff;
  display: flex;
  flex-direction: column;
  background: #2b4f65;
}
.hero .hero__swiper {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__swiper .swiper-slide {
  overflow: hidden;
}
.hero__swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
  transform: scale(1);
  transition: transform 0s 1.2s;
}
.hero__swiper .swiper-slide-active img {
  transform: scale(1.14);
  transition: transform 7s ease-out;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(4, 22, 38, 0.93) 0%,
      rgba(4, 22, 38, 0.78) 30%,
      rgba(4, 22, 38, 0.26) 69%,
      rgba(4, 22, 38, 0.1) 100%
    ),
    linear-gradient(180deg, rgba(3, 17, 28, 0.5), transparent 36%),
    linear-gradient(0deg, rgba(3, 17, 28, 0.5), transparent 36%);;
}
.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(54px + var(--header-height)) 1.5rem 70px 5rem;
}
.hero h1 {
  font-weight: 830;
}
.hero h1 .em {
  color: #fff;
}
.hero-copy {
  font-size: var(--text-content-size);
  color: #e0eaf0;
}
.hero-copy p {
  margin: 0 0 16px;
}
.hero-copy p:last-child {
  margin: 0;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 45px;
}
.challenge {
  background: #fff;
}
.challenge .intro-grid {
  align-items: center;
}
.challenge .intro-grid p {
  max-width: 535px;
}
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 53px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.challenge-col {
  padding: 36px 36px 42px 0;
  position: relative;
}
.challenge-col:not(:first-child) {
  padding-left: 35px;
  border-left: 1px solid var(--line);
}
.challenge-col h3 {
  font-size: 23px;
  letter-spacing: -0.024em;
  line-height: 1.2;
  margin: 17px 0 12px;
}
.challenge-col p {
  margin: 0;
  color: #526778;
  font-size: 15.5px;
  line-height: 1.72;
}
.challenge-statement {
  margin: 38px 0 0;
  font-weight: 750;
  letter-spacing: -0.022em;
}
.solutions {
  background: var(--cloud);
}
.solutions .intro-grid {
  margin-bottom: 44px;
}
.solution-grid {
  display: grid;
}
.solution-card {
  background: #fff;
  border: 1px solid #e5eaed;
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 24px rgba(23, 42, 56, 0.035);
}
.solution-card .card-photo {
  object-position: center;
}
.solution-card:nth-child(1) .card-photo {
  object-position: 55% center;
}
.solution-card:nth-child(2) .card-photo {
  object-position: center;
}
.solution-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-num {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-red);
  font-weight: 800;
}
.solution-card h3 {
  letter-spacing: -0.032em;
}
.solution-card .card-hook {
  color: var(--ink);
}
.solution-card p:not(.card-hook) {
  color: #4f6573;
  margin: 0 0 12px;
}
.solutions-action {
  text-align: center;
  margin-top: 39px;
}
.experience {
  background: #eef2f4;
}
.experience .intro-grid {
  margin-bottom: 43px;
  align-items: center;
}
.case-grid {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: 20px;
  min-height: 580px;
}
.case-feature {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #0e2538;
  min-height: 595px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.case-feature img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: 50% center;
}
.case-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(2, 15, 25, 0.94) 100%
  );
}
.case-feature-body {
  position: relative;
  z-index: 2;
  padding: 42px 42px 42px;
}
.case-feature .eyebrow {
  color: #fff;
}
.case-feature h3 {
  letter-spacing: -0.038em;
  margin: 18px 0 15px;
  max-width: 560px;
}
.case-feature p {
  max-width: 585px;
  color: #e4eff2;
  font-size: 16px;
  margin: 0;
}
.case-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}
.case-small {
  display: grid;
  grid-template-columns: 39% 61%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  min-height: 185px;
}
.case-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-small .info {
  padding: 21px 23px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-small .info span {
  font-size: 10px;
  color: var(--color-red);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.case-small h3 {
  line-height: 1.23;
  letter-spacing: -0.02em;
  margin: 8px 0;
}
.case-small p {
  color: #526a79;
  font-size: 13.2px;
  line-height: 1.45;
  margin: 0;
}
.case-actions {
  text-align: center;
  margin-top: 35px;
}
.contact-cta {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #0c253a url("../images/home/sol-agua.webp") center 50% / cover
    no-repeat;
}
.contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(4, 18, 32, 0.96) 0%,
    rgba(4, 18, 32, 0.87) 52%,
    rgba(4, 18, 32, 0.48) 100%
  );
}
.contact-cta.contact-cta--solid {
  background-position: center 54%;
  padding-block: 75px !important;
}
.contact-cta--solid::before {
  background: rgba(7, 26, 44, .91);
}
.contact-cta--solid .container {
  align-items: center;
  gap: 50px;
}
.contact-cta--solid h2 {
  font-size: clamp(34px, 3.6vw, 53px);
  line-height: 1.09;
  letter-spacing: -0.04em;
  margin: 18px 0;
}
.contact-cta--solid p {
  color: #c5d6e0;
  font-size: 16px;
  max-width: 640px;
}
.contact-cta.contact-cta--solid .container {
  align-items: center;
}
.contact-cta.contact-cta--solid .btn {
  margin: 0;
  align-self: center;
}
.contact-cta .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 52px;
}
.contact-cta h2 {
  font-size: clamp(39px, 4.6vw, 64px);
  letter-spacing: -0.048em;
  line-height: 1.08;
  margin: 18px 0 21px;
}
.contact-cta p {
    font-size: 1rem;
    color: #dce9ee;
    max-width: 680px;
    line-height: 1.67;
    margin: 0;
}
.contact-cta .btn {
  flex: none;
  margin-bottom: 13px;
}
@media (max-width: 1100px) {
  .intro-grid {
    gap: 43px;
  }
  .case-grid {
    grid-template-columns: 1fr 0.88fr;
  }
  .case-small {
    grid-template-columns: 33% 67%;
  }
  .case-small .info {
    padding: 16px;
  }
  .case-small h3 {
    font-size: 17px;
  }
  .case-small p {
    font-size: 12.6px;
  }
}
@media (max-width: 800px) {
  .hero {
    background-position: 64% center;
  }
  .hero::before {
    background: linear-gradient(
        90deg,
        rgba(4, 22, 38, 0.9) 0%,
        rgba(4, 22, 38, 0.62) 75%,
        rgba(4, 22, 38, 0.43) 100%
      ),
      linear-gradient(0deg, rgba(3, 17, 28, 0.52), transparent 45%);
  }
  .hero h1 {
    font-size: clamp(46px, 8vw, 72px);
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
  .section {
    padding-block: 77px;
  }
  .section h2 {
    font-size: clamp(38px, 6.6vw, 53px);
  }
  .challenge-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .challenge-col, .challenge-col:not(:first-child) {
    border-left: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
  }
  .challenge-col:last-child {
    border-bottom: 0;
  }
  .challenge-statement {
    font-size: 19px;
  }
  .solution-grid {
    grid-template-columns: 1fr 1fr;
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
  .case-feature {
    min-height: 470px;
  }
  .case-list {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }
  .case-small {
    display: block;
  }
  .case-small img {
    aspect-ratio: 1.65;
    height: auto;
  }
  .case-small .info {
    padding: 18px;
  }
  .contact-cta .container {
    align-items: flex-start;
    flex-direction: column;
  }
  .contact-cta .btn {
    margin: 0;
  }
}
@media (max-width: 540px) {
  .hero {
    background-position: 67% center;
  }
  .hero h1 {
    margin: 17px 0 25px;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 0.135em;
  }
  .hero-copy {
    max-width: 350px;
    line-height: 1.63;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 310px;
    gap: 10px;
  }
  .section {
    padding-block: 65px;
  }
  .section h2 {
    font-size: 39px;
    letter-spacing: -0.04em;
  }
  .section-lead {
    font-size: 16px;
  }
  .challenge-grid {
    margin-top: 35px;
  }
  .challenge-col h3 {
    font-size: 21px;
    margin: 7px 0;
  }
  .challenge-statement {
    font-size: 18px;
    margin-top: 27px;
  }
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 19px;
  }
  .solution-card .card-photo {
    aspect-ratio: 1.55;
  }
  .solution-card .card-body {
    padding: 23px 23px 29px;
  }
  .case-feature {
    min-height: 450px;
  }
  .case-feature-body {
    padding: 25px;
  }
  .case-feature p {
    font-size: 14px;
  }
  .case-list {
    grid-template-columns: 1fr;
  }
  .case-small {
    display: grid;
    grid-template-columns: 35% 65%;
    min-height: 170px;
  }
  .case-small img {
    height: 100%;
    aspect-ratio: auto;
  }
  .case-small .info {
    padding: 17px;
  }
  .case-small h3 {
    font-size: 17px;
  }
  .case-small p {
    font-size: 12.4px;
  }
  .contact-cta {
    padding-block: 69px;
  }
  .contact-cta h2 {
    font-size: 42px;
  }
  .contact-cta p {
    font-size: 16px;
  }
}
#desafios-publicos .intro-grid {
  margin-bottom: 38px;
  align-items: center;
  gap: 55px;
}
#desafios-publicos .section-lead {
  font-size: 17px;
}
#desafios-publicos .text-link {
  margin-top: auto;
  padding-top: 8px;
}
@media (max-width: 800px) {
  #desafios-publicos .intro-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 540px) {
  #desafios-publicos .section-lead {
    font-size: 16px;
  }
}
.wk-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--color-red);
  --icon-fill: #fff;
  vertical-align: middle;
}
.wk-icon svg {
  display: block;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.wk-icon img {
  display: block;
  width: 29px;
  height: 29px;
  object-fit: contain;
}
.wk-icon.feature-icon {
  border-radius: 12px;
  background: rgba(201, 30, 49, 0.035);
  border: 1px solid rgba(201, 30, 49, 0.1);
}
.challenge-col > .wk-icon {
  margin-bottom: 4px;
}
.solution-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.solution-card .solution-image {
  position: relative;
  isolation: isolate;
}
.solution-card .card-photo {
  width: 100%;
  height: 218px;
  aspect-ratio: auto;
  object-fit: cover;
}
.solution-card:last-child .card-photo {
  object-fit: cover;
}
.solution-card h3 {
  font-size: 26px;
  margin-bottom: 17px;
  line-height: 1.17;
}
.solution-card .card-hook {
  font-weight: 750;
}
.solution-card p:not(.card-hook) {
  font-size: 14.4px;
  line-height: 1.65;
}
.card-link {
  margin-top: auto;
  padding-top: 16px;
}
.wk-icon.solution-icon {
  position: absolute;
  bottom: -20px;
  right: 18px;
  box-shadow: 0 5px 15px #071a2c18;
  background: #fff;
  border: 1px solid #e0e8ed;
  border-radius: 12px;
  width: 48px;
  height: 48px;
}
.section {
  padding-block: 90px;
}
@media (max-width: 1100px) {
  .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .solution-card h3 {
    min-height: 0;
  }
  .solution-card .card-hook {
    min-height: 0;
  }
  .solution-card .card-photo {
    height: 255px;
  }
}
@media (max-width: 700px) {
  .section {
    padding-block: 65px;
  }
  .solution-grid {
    grid-template-columns: 1fr;
  }
  .solution-card .card-photo {
    height: 235px;
  }
  .solution-card .card-body {
    padding: 26px 24px;
  }
}
.recognition-early {
  background: #f4f7f8;
  border-bottom: 1px solid #dce4e9;
}
.recognition-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.recognition-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 0.13em;
}
.recognition-heading h2 {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
  color: #536777;
  margin: 0;
  letter-spacing: 0;
}
.recognition-grid {
  display: grid;
  gap: 0;
  border: 1px solid #d8e2e7;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.recognition-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.recognition-item + .recognition-item {
  border-left: 1px solid #d8e2e7;
}
.recognition-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #506878;
}
.recognition-eyebrow .wk-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--color-red);
}
.recognition-eyebrow .wk-icon svg {
  width: 23px;
  height: 23px;
}
.recognition-identities {
  display: flex;
  align-items: center;
  min-height: 56px;
}
.recognition-identities i {
  width: 1px;
  height: 30px;
  background: #cbd8df;
  display: inline-block;
}
.recognition-item h3 {
  font-weight: 600;
  max-width: 310px;
  color: #40596a;
  letter-spacing: -0.01em;
}
.recognition-item .text-link {
  font-size: 12px;
  line-height: 1.5;
  margin-top: auto;
  padding-block: 8px;
  min-height: 38px;
  gap: 8px;
}
.recognition-member {
  background: #f0f7f4;
}
.recognition-member .wk-icon, .recognition-member .text-link {
  color: var(--recognition-green);
}
@media (max-width: 1100px) {
  .recognition-item {
    padding: 22px 21px;
  }
  .recognition-identities {
    gap: 10px;
  }
  .recognition-item h3 {
    font-size: 14px;
  }
  .recognition-heading h2 {
    font-size: 13px;
  }
}
@media (max-width: 800px) {
  .recognition-early {
    padding: 28px 0 32px;
  }
  .recognition-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
  }
  .recognition-member {
    grid-column: 1/-1;
    border-left: 0 !important;
    border-top: 1px solid #d8e2e7;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
  }
  .recognition-member .recognition-eyebrow {
    grid-column: 1/-1;
  }
  .recognition-member h3 {
    margin: 8px 0 6px;
    align-self: center;
  }
  .recognition-member .text-link {
    grid-column: 2;
    grid-row: 3;
  }
}
@media (max-width: 540px) {
  .recognition-grid {
    grid-template-columns: 1fr;
  }
  .recognition-item {
    padding: 20px 23px 18px;
  }
  .recognition-item + .recognition-item {
    border-left: 0;
    border-top: 1px solid #d8e2e7;
  }
  .recognition-item h3 {
    max-width: none;
    font-size: 15px;
    margin-bottom: 10px;
  }
  .recognition-identities {
    min-height: 42px;
    margin-block: 8px;
    gap: 16px;
  }
  .recognition-member {
    display: flex;
    grid-column: auto;
  }
  .recognition-member .text-link {
    grid-column: auto;
    grid-row: auto;
  }
  .recognition-heading h2 {
    font-size: 13px;
  }
}
.recognition-early .text-link {
  color: var(--red-dark);
}
.recognition-member .text-link {
  color: var(--recognition-green);
}
.solution-card:nth-child(3) .card-photo {
  object-position: 50% 40%;
}
.solution-card:last-child .card-photo {
  object-position: left top !important;
}
.logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
.logo-marquee {
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-wall {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee 40s linear infinite;
}
@keyframes logo-marquee {
  to {
    transform: translateX(-25%);
  }
}
.logo-wall .logo {
  flex: none;
  margin-right: 90px;
}
.logo-wall .logo {
    height: 40px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    opacity: 0.78;
    filter: grayscale(1);
    transition: opacity 0.2s;
}
.logo-wall .logo:hover {
  opacity: 1;
}
.logo-wall .logo-armada, .logo-wall .logo-conaf {
  height: 44px;
}
.logo-wall .logo-anid, .logo-wall .logo-corfo {
  height: 46px;
  max-width: 170px;
}
.logo-wall .logo-bioled {
  height: 58px;
}
.logo-wall .logo-armada {
  height: 52px;
}
.logo-wall .logo-climatech {
  height: 46px;
}
.logo-wall .logo-goldfields {
  height: 56px;
}
.logo-wall .logo-aramark {
  height: 30px;
}
.logo-wall .logo-vogt {
  height: 30px;
}
.logo-wall .logo-unk {
  height: 24px;
}
.logo-wall .logo-lundin {
  height: 24px;
  max-width: 180px;
}
.clients-band {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}
.clients-band .container {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
}
.clients-band .label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5a7080;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .clients-band .container {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .logo-wall .logo {
    margin-right: 56px;
  }
  .logo {
    height: 28px;
    max-width: 120px;
  }
}
.institution-logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
}
.institution-logo-img.logo-armada, .institution-logo-img.logo-conaf {
  height: 52px;
}
strong .pre {
  opacity: 0.72;
  margin-right: 0.32em;
  text-transform: none;
}
strong .unit {
  opacity: 0.72;
  margin-left: 0.22em;
}
.empresa-numbers {
    background: var(--navy);
    color: #fff;
    padding: 30px 0;
}
.empresa-numbers .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.9fr;
  gap: 24px;
}
.empresa-numbers .extreme {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 34px;
  padding-left: 28px;
  border-left: 1px solid #ffffff2a;
}
.empresa-numbers .extreme span {
  grid-column: 1/-1;
  max-width: none;
}
.empresa-numbers strong {
  display: block;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 830;
}
.empresa-numbers span {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #c5d6e0;
  max-width: 240px;
}
@media (max-width: 1100px) {
  .empresa-numbers .container {
    grid-template-columns: repeat(3, 1fr);
  }
  .empresa-numbers .extreme {
    grid-column: 1/-1;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid #ffffff2a;
  }
}
@media (max-width: 540px) {
  .empresa-numbers .container {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
  }
  .empresa-numbers strong {
    font-size: 30px;
    white-space: nowrap;
  }
  .empresa-numbers .extreme {
    column-gap: 22px;
  }
}
strong .pre {
  display: inline !important;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
}
strong .unit {
  display: inline !important;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
}
.case-feature, .case-small {
  position: relative;
}
.case-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.case-link:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 3px;
}
.case-feature, .case-small {
  transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-feature img, .case-small img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-small h3, .case-feature h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.4s ease;
}
.case-small:hover, .case-feature:hover {
  box-shadow: 0 12px 28px #0a22350f;
}
.case-small:hover img, .case-feature:hover img {
  transform: scale(1.025);
}
.case-small:hover h3, .case-feature:hover h3 {
  text-decoration-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .case-feature img, .case-small img {
    transition: none;
  }
  .case-small:hover img, .case-feature:hover img {
    transform: none;
  }
}
.case-more {
  display: inline-flex;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.home-products {
  background: #f5f7f8;
}
.hp-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.hp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s,
    transform 0.2s;
  min-width: 0;
}
.hp-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.hp-img {
    background: #eef2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 7/5;
}
.hp-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  mix-blend-mode: multiply;
}
.hp-card strong {
  display: block;
  padding: 16px 18px 2px;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.hp-card span {
  display: block;
  padding: 0 18px 18px;
  font-size: 13.5px;
  color: #5a7080;
  font-weight: 600;
}
.hp-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.hp-foot p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3b5566;
}
.hp-foot p strong {
  color: var(--navy);
}
.hp-links {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .hp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hp-foot {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .section h2 br {
    display: none;
  }
  .hp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hp-img {
    height: 130px;
  }
  .hp-card strong {
    font-size: 16px;
    padding: 12px 14px 2px;
  }
  .hp-card span {
    padding: 0 14px 14px;
    font-size: 12.5px;
  }
}
.hero h1 {
    font-size: var(--h1) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    margin: 10px 0 25px !important;
    max-width: 715px;
}
.hero-copy {
  line-height: 1.6 !important;
  max-width: 600px;
}
.section h2, .contact-cta h2 {
  font-size: var(--h2) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
  margin: 14px 0 18px !important;
}
.section-lead, .section-lead p, .intro-grid .section-lead, .challenge .intro-grid p, .experience .intro-grid p, .solutions .intro-grid p, .contact-cta p {
  line-height: 1.65 !important;
}
.section-lead p + p {
  margin-top: 12px;
}
.intro-grid {
  align-items: start !important;
}
.intro-grid > .section-lead, .intro-grid > div:last-child:not(:first-child) {
  padding-top: 34px;
}
.challenge-statement {
  font-size: 19px !important;
  line-height: 1.5 !important;
}
.eyebrow {
  font-size: var(--label) !important;
  letter-spacing: 0.16em !important;
}
.section {
  padding-block: 96px !important;
}
.recognition-early {
  padding: 40px 0 44px !important;
}
.challenge-col h3, .solution-card h3, .case-small h3 {
  font-size: var(--h3) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.025em !important;
  font-weight: 750 !important;
}
.case-small h3 {
  font-size: 19px !important;
}
.case-feature h3 {
  font-size: 28px !important;
  line-height: 1.18 !important;
}
.challenge-col p, .solution-card p:not(.card-hook), .case-small p {
  font-size: var(--card) !important;
  line-height: 1.62 !important;
}
.solution-card .card-hook {
  font-size: 16.5px !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
}
.solution-card h3 {
  min-height: 0 !important;
  margin: 10px 0 12px !important;
}
.solution-card .card-body {
  padding: 24px 22px 26px !important;
}
.card-num, .recognition-eyebrow, .recognition-eyebrow span, .case-small .info span {
  font-size: var(--label) !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  font-weight: 800 !important;
}
.recognition-heading h2, .text-link {
  font-size: var(--cap) !important;
  line-height: 1.55 !important;
}
.text-link, .recognition-item .text-link {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.recognition-grid {
  grid-template-columns: 1fr 1fr 0.95fr !important;
}
.recognition-item {
  padding: 28px 30px 26px !important;
}
.recognition-identities {
  gap: 16px !important;
  margin: 12px 0 10px !important;
  flex-wrap: nowrap !important;
}
.recognition-item h3 {
  font-size: 16px !important;
  line-height: 1.45 !important;
  margin: 0 0 16px !important;
}
.contact-cta {
  padding-block: 88px !important;
}
.contact-cta h2 {
    max-width: 690px;
}
.btn {
  font-size: 14px !important;
}
@media (max-width: 1100px) {
  .recognition-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .recognition-member {
    grid-column: 1/-1;
  }
}
@media (max-width: 800px) {
  .section {
    padding-block: 72px !important;
  }
  .intro-grid > .section-lead, .intro-grid > div:last-child:not(:first-child) {
    padding-top: 0;
  }
  .recognition-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 540px) {
  .section {
    padding-block: 56px !important;
  }
  .hero h1 {
    font-size: 42px !important;
    line-height: 1.08 !important;
  }
  .hero-copy {
    font-size: 16px !important;
  }
  .case-feature h3 {
    font-size: 25px !important;
  }
}
.contact-cta .container > span {
  font-size: 13px !important;
}
.experience .case-feature img {
  object-position: 88% 50% !important;
}
section.experience .case-feature img {
  object-position: 52% 40% !important;
}
@media (max-width: 540px) {
  section.experience .case-feature {
    display: block;
    min-height: 0;
  }
  section.experience .case-feature img {
    position: relative;
    display: block;
    height: 230px;
    object-position: 50% 30% !important;
  }
  section.experience .case-feature::after {
    display: none;
  }
  section.experience .case-feature-body {
    padding: 22px 22px 24px;
  }
}
@media (max-width: 540px) {
  :root {
    --h2: 34px;
    --h3: 20px;
  }
}
@media (max-width: 540px) {
  .hero {
    min-height: calc(560px + var(--header-height)) !important;
  }
  .hero-main {
    padding-top: calc(40px + var(--header-height));
  }
}

/**
*	CONTACTO (referencia Wolke_Sitio_Completo_2026_V6.9.32)
*	=======================================================================================================
**/

/* --- Hero de página interna (reutiliza .hero del home con fondo estático) --- */
.hero .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, center 50%);
}
/* Tamaños del hero de internas (template-parts/page-hero.php) */
.hero.hero--sm {
  min-height: calc(440px + var(--header-height)) !important;
}
.hero.hero--sm h1 {
  font-size: clamp(40px, 3.9vw, 50px) !important;
}
.hero.hero--md {
  min-height: calc(600px + var(--header-height)) !important;
}
.hero.hero--md h1 {
  font-size: var(--h1-int) !important;
  max-width: 850px;
}
.hero.hero--md .hero-copy {
  max-width: 650px;
}

/* --- Layout --- */
.contact-section {
  background: var(--cloud);
  padding-top: 0 !important;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 48px;
  align-items: start;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}

/* --- Formulario --- */
.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow);
}
.section .contact-form h2 {
  font-size: 26px !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}
.form-lead {
  margin: 0 0 26px;
  color: #526778;
  font-size: 15px;
  line-height: 1.65;
}
.motivo {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
}
.motivo legend {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  padding: 0;
}
.motivo-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.motivo-opts label {
  position: relative;
  cursor: pointer;
}
.motivo-opts input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.motivo-opts .wpcf7-list-item {
  margin: 0;
}
.motivo-opts .wpcf7-list-item-label {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: #3b5566;
  background: #fff;
  transition: all 0.15s;
}
.motivo-opts input:checked + .wpcf7-list-item-label {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.motivo-opts input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field.full {
  grid-column: 1 / -1;
}
.field label,
fieldset.field legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.field label small,
fieldset.field legend small {
  font-weight: 500;
  color: var(--muted);
}
.field input:not([type="checkbox"]):not([type="file"]),
.field select,
.field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c9d5dd;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}
.field textarea {
  height: 140px;
  min-height: 140px;
  resize: vertical;
}
.field input[type="file"] {
  font-size: 14px;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(201, 30, 49, 0.33);
  outline-offset: 0;
  border-color: var(--color-red);
}
fieldset.field {
  border: 0;
  padding: 0;
  margin: 0;
}
fieldset.field legend {
  padding: 0;
  margin-bottom: 8px;
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 16px;
}
.check-grid .wpcf7-form-control,
.check-grid .wpcf7-form-control-wrap {
  display: contents;
}
.check-grid .wpcf7-list-item {
  margin: 0;
}
.check-grid label,
.consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.check-grid input,
.consent input {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--color-red);
  flex: none;
}
.consent {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.consent .wpcf7-list-item {
  margin: 0;
}
.consent a {
  color: var(--color-red);
  font-weight: 700;
  text-decoration: underline;
}
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.form-actions .hint {
  font-size: 12px;
  color: var(--muted);
}
.form-actions .btn {
  cursor: pointer;
}

/* --- Contact Form 7 --- */
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-not-valid-tip {
  margin-top: 0.3rem;
  font-size: 12px;
  color: var(--color-red);
}
.wpcf7-not-valid {
  border-color: var(--color-red) !important;
}
.wpcf7 form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #eef7f1;
  border: 1px solid #bfe0cb;
  color: #1f5a3a;
  font-size: 14px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: #fff;
  border-color: var(--color-red);
  color: var(--color-red);
}
.wpcf7 form:not(.sent):not(.invalid):not(.failed):not(.spam) .wpcf7-response-output {
  display: none;
}
.wpcf7 form.submitting .wpcf7-submit {
  opacity: 0.6;
  pointer-events: none;
}
.wpcf7-spinner {
  display: none;
}
.screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.hidden-fields-container {
  display: none;
}

/* --- Columna lateral --- */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-card {
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 32px;
}
.section .contact-card h2 {
  font-size: 22px !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  color: #fff;
}
.contact-card > p {
  margin: 0 0 22px;
  color: #c5d6e0;
  font-size: var(--card);
  line-height: 1.6;
}
.contact-list > div {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #ffffff1f;
}
.contact-list .wk-icon {
  color: var(--cyan);
  --icon-fill: var(--navy);
  width: 38px;
  height: 38px;
  flex: none;
}
.contact-list strong {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8fb3c4;
  font-weight: 800;
  margin-bottom: 3px;
}
.contact-list span,
.contact-list a {
  font-size: 15px;
  color: #fff;
  line-height: 1.5;
}
.contact-list a {
  transition: color 0.2s;
}
.contact-list a:hover {
  color: var(--cyan);
}
.contact-note {
  background: #f4f7f8;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px;
}
.contact-note h3 {
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.22;
  font-weight: 750;
}
.contact-note p {
  margin: 0;
  font-size: var(--card);
  line-height: 1.62;
  color: #526778;
}

@media (max-width: 1100px) {
  .contact-layout {
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
  }
  .contact-form {
    padding: 30px;
  }
}
@media (max-width: 800px) {
  .contact-layout {
    grid-template-columns: 1fr;
    margin-top: -20px;
  }
  .check-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field.full {
    grid-column: auto;
  }
  .check-grid {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 24px 20px;
  }
  .contact-card {
    padding: 24px;
  }
  .consent,
  .form-actions {
    grid-column: auto;
  }
}
.contact-form [hidden] {
  display: none !important;
}

/**
*	EMPRESA (referencia Wolke_Sitio_Completo_2026_V6.9.32)
*	=======================================================================================================
**/

/* --- Variantes reutilizables de sección y hero --- */
.section.is-gray {
  background: #eef2f4;
}
.section.is-cloud {
  background: var(--cloud);
}
.section.is-navy {
  background: var(--navy);
  color: #fff;
  position: relative;
}
.section.is-navy h2 {
  color: #fff;
}
.section.is-navy .section-lead {
  color: #c1d5e3;
}
.intro-grid.is-center {
  align-items: center !important;
  margin-bottom: 45px;
}
.intro-grid.is-center h2 {
  margin-bottom: 0 !important;
}

/* --- Logos en fila fija (sin marquee) --- */
.logo-wall--static {
    width: 65%;
    animation: none;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 26px 40px;
}
.logo-wall--static .logo {
  margin-right: 0;
  opacity: 1;
  filter: none;
}

/* --- Quiénes somos --- */
.who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.who .statement {
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -0.03em;
  font-weight: 760;
  color: var(--navy);
  margin: 0;
}
.who .statement em {
  font-style: normal;
  color: var(--color-red);
}
.who-copy p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.7;
  color: #3b5566;
}
.who-copy p:last-child {
  margin: 0;
}
.portfolio {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}
.portfolio-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 20px;
}
.portfolio-head small {
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5a7080;
}
.portfolio-more {
  margin: 16px 0 0;
  font-size: 14px;
  color: #526778;
}
/* Tarjetas de producto del home (.hp-card) en 4 columnas y con flecha */
.hp-grid.hp-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}
.hp-img.is-cover img {
  object-fit: cover;
  padding: 0;
  mix-blend-mode: normal;
}
.hp-img.is-top img {
  object-position: 0 0;
}
.hp-txt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
}
.hp-txt i {
  font-style: normal;
  color: var(--color-red);
  font-weight: 800;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hp-card:hover .hp-txt i {
  transform: translateX(5px);
}

/* --- Pilares --- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
}
.pillars article {
  min-width: 0;
  background: #ffffff0a;
  border: 1px solid #ffffff22;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
}
.pillars .ph {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dfe6eb;
}
.pillars .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pillars .ph.lab img {
  object-position: 50% 72%;
}
.pillars .ph.open {
  position: relative;
}
.pillars .ph.open .open-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pillars .ph.open .open-lines line {
  stroke: var(--cyan);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
}
.pillars .ph.open .open-lines line.up {
  stroke: var(--color-red);
}
.pillars .ph.open .pt {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  border-radius: 999px;
  background: #0b2a40e6;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
  box-shadow: 0 1px 4px #0006;
}
.pillars .ph.open .pt.out {
  transform: none;
  background: var(--color-red);
}
.pillars .ph.open .pt.r {
  transform: translateY(-50%);
}
.pillars .txt {
  padding: 24px 24px 26px;
}
.pillars em {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  color: var(--cyan);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.pillars h3 {
    font-size: var(--h3);
    margin: 0 0 10px;
    color: #fff;
    font-weight: 700;
}
.pillars p {
  margin: 0;
  font-size: var(--card);
  line-height: 1.6;
  color: #c5d6e0;
}

/* --- Modelo --- */
.model {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.model article {
  padding: 28px 26px 30px;
  border-left: 1px solid var(--line);
}
.model article:first-child {
  border-left: 0;
}
.model h3 {
  font-size: 19px;
  margin: 14px 0 8px;
}
.model p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #526778;
}

/* --- Trayectoria --- */
.timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  background: var(--line);
}
.timeline article {
  position: relative;
  padding-top: 32px;
}
.timeline article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-red);
}
.timeline .year {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-red);
  margin-bottom: 8px;
}
.timeline h3 {
    font-size: 18px;
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.2;
}
.timeline p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #526778;
}
.backed {
    margin-top: 50px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 30px;
    gap: 34px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.backed .label {
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5a7080;
  line-height: 1.5;
}
.backed .label a {
  display: inline-flex;
  margin-top: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}

/* --- Presencia: mapa por latitud --- */
.presence {
  position: relative;
  margin-top: 64px;
  padding: 128px 0 118px;
}
.presence .ends {
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  display: flex;
  justify-content: space-between;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5a7080;
  pointer-events: none;
}
.presence .pmap {
  position: relative;
  aspect-ratio: 1000 / 189;
}
.presence .pmap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px #0b2a4014);
}
.presence ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.presence li {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 0;
  height: 100%;
}
.presence li::before,
.timeline article::before {
  box-sizing: border-box;
}
.presence li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: calc(var(--y) - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--color-red);
  box-shadow: 0 0 0 4px #ffffffcc;
  z-index: 2;
}
.presence li::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  background: #9fb2bf;
}
.presence li .lbl {
  position: absolute;
  left: -1px;
  width: 146px;
  padding-left: 12px;
  border-left: 2px solid var(--color-red);
}
.presence li.up::after {
  bottom: calc(100% - var(--y) + 8px);
  top: -18px;
}
.presence li.up .lbl {
  bottom: calc(100% + 18px);
}
.presence li.down::after {
  top: calc(var(--y) + 8px);
  bottom: -18px;
}
.presence li.down .lbl {
  top: calc(100% + 18px);
}
.presence li.right .lbl {
  left: auto;
  right: -1px;
  padding-left: 0;
  padding-right: 12px;
  border-left: 0;
  border-right: 2px solid var(--color-red);
  text-align: right;
}
.presence small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5a7080;
  margin-bottom: 3px;
}
.presence strong {
  display: block;
  font-size: 15.5px;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.25;
}
.presence em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: #526778;
  margin-top: 3px;
  line-height: 1.4;
}

/* --- Equipo --- */
.team-board {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
}
.team-area {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 26px 34px;
}
.team-area.wide {
  grid-column: span 6;
}
.team-area header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.team-area .wk-icon.feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.team-area .wk-icon svg {
  width: 21px;
  height: 21px;
}
.team-area h3 {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #456074;
}
.team-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  gap: 18px;
  flex: 1;
}
.team-people li {
  flex: 0 1 190px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team-people img {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: #e3e8ed;
  margin: 6px 0 20px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #d6e0e6, 0 18px 30px -10px rgba(10, 34, 53, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-people li:hover img {
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #c8d4dc, 0 24px 36px -12px rgba(10, 34, 53, 0.36);
}
.team-people strong {
  display: block;
  font-size: 16.5px;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.3;
}
.team-people span {
  display: block;
  max-width: 200px;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5a7080;
  text-wrap: balance;
}
.team-note {
  margin-top: 22px;
  font-size: 14px;
  color: #526778;
}

/* --- Cierre con tres puertas --- */
.empresa-close {
  position: relative;
  color: #fff;
  padding: 104px 0 96px;
  background-color: var(--navy);
  background-size: cover;
  background-position: center 60%;
}
.empresa-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 26, 44, 0.93), rgba(7, 26, 44, 0.84) 55%, rgba(7, 26, 44, 0.96));
}
.empresa-close .container {
  position: relative;
}
.empresa-close h2 {
  color: #fff;
  margin: 0;
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.empresa-close .section-lead {
  color: #d6e2ea;
}
.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.doors article {
  border: 1px solid #ffffff2e;
  border-radius: 14px;
  padding: 28px 26px;
  background: #ffffff10;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
}
.doors small {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--cyan);
  margin: 14px 0 8px;
}
.doors h3 {
  font-size: 21px;
  margin: 0 0 10px;
  color: #fff;
}
.doors p {
  margin: 0 0 22px;
  font-size: var(--card);
  line-height: 1.6;
  color: #c5d6e0;
}
.doors .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .who {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hp-grid.hp-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pillars,
  .doors {
    grid-template-columns: 1fr;
  }
  .model {
    grid-template-columns: 1fr 1fr;
  }
  .model article:nth-child(3) {
    border-left: 0;
  }
  .model article:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .timeline {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .timeline::before {
    display: none;
  }
  .backed {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .team-board {
    gap: 16px;
  }
  .team-area {
    padding: 20px 18px 28px;
  }
  .team-people {
    gap: 12px;
  }
  .team-people img {
    width: 112px;
    height: 112px;
  }
  .presence {
    height: auto;
    margin-top: 40px;
    padding: 0 0 0 30px;
  }
  .presence::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #d8a35f, #9db4a6 45%, #3ec7d3 70%, #a9c6d8);
  }
  .presence .ends,
  .presence .pmap-svg {
    display: none;
  }
  .presence .pmap {
    aspect-ratio: auto;
  }
  .presence li {
    position: relative;
    left: auto !important;
    width: auto;
    height: auto;
    padding: 0 0 22px;
  }
  .presence li::before {
    left: -31px;
    top: 2px !important;
  }
  .presence li::after {
    display: none;
  }
  .presence li .lbl,
  .presence li.right .lbl {
    position: static;
    width: auto;
    border: 0;
    padding: 0;
    text-align: left;
  }
}
@media (max-width: 900px) {
  .team-area,
  .team-area.wide {
    grid-column: 1 / -1;
  }
}
@media (max-width: 800px) {
  .intro-grid.is-center {
    margin-bottom: 32px;
  }
}
@media (max-width: 540px) {
  .who .statement {
    font-size: 24px;
  }
  .hp-grid.hp-grid--4 {
    gap: 12px;
  }
  .hp-txt i {
    display: none;
  }
  .model,
  .timeline {
    grid-template-columns: 1fr;
  }
  .model article {
    border-left: 0 !important;
    border-top: 1px solid var(--line);
  }
  .model article:first-child {
    border-top: 0;
  }
  .pillars .ph.open .pt {
    font-size: 9.5px;
    padding: 1px 6px;
  }
  .team-board {
    gap: 12px;
    margin-top: 34px;
  }
  .team-area {
    padding: 18px 14px 24px;
    border-radius: 16px;
  }
  .team-area header {
    margin-bottom: 22px;
    padding-bottom: 12px;
  }
  .team-people {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 10px;
  }
  .team-people li {
    flex: 0 0 calc(50% - 5px);
  }
  .team-people img {
    width: 100px;
    height: 100px;
    margin: 4px 0 14px;
  }
  .team-people strong {
    font-size: 15px;
  }
  .team-people span {
    font-size: 12.8px;
  }
  .empresa-close {
    padding: 72px 0;
  }
  .empresa-close h2 {
    font-size: 34px;
  }
}

/* --- Presencia: hovers y entrada --- */
.presence li::before {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.presence li::after {
  transition: background-color 0.3s ease;
}
.presence li .lbl {
  transition: padding 0.35s ease;
}
.presence li .lbl strong {
  transition: color 0.25s ease;
}
.presence li {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .presence li:hover::before {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px #ffffffcc, 0 0 0 10px rgba(201, 30, 49, 0.18);
  }
  .presence li:hover::after {
    background: var(--color-red);
  }
  .presence li:hover .lbl {
    padding-left: 18px;
  }
  .presence li.right:hover .lbl {
    padding-left: 0;
    padding-right: 18px;
  }
  .presence li:hover .lbl strong {
    color: var(--color-red);
  }
  .presence ol:hover li:not(:hover) {
    opacity: 0.4;
  }
}

/* La clase .fx la pone project.js (sin JS o con movimiento reducido todo se ve estático) */
.presence li.up {
  --dy: 10px;
}
.presence li.down {
  --dy: -10px;
}
.presence.fx .pmap-svg {
  animation: pmap-draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) backwards paused;
}
.presence.fx li::before {
  animation: pt-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards paused;
  animation-delay: calc(0.5s + var(--i) * 0.14s);
}
.presence.fx li::after {
  animation: pt-line 0.5s ease backwards paused;
  animation-delay: calc(0.7s + var(--i) * 0.14s);
}
.presence.fx li.up::after {
  transform-origin: bottom;
}
.presence.fx li.down::after {
  transform-origin: top;
}
.presence.fx li .lbl {
  animation: pt-lbl 0.6s ease backwards paused;
  animation-delay: calc(0.85s + var(--i) * 0.14s);
}
.presence.fx .ends {
  animation: pt-lbl 0.8s ease backwards paused;
  --dy: 0px;
}
.presence.fx.is-in .pmap-svg,
.presence.fx.is-in li::before,
.presence.fx.is-in li::after,
.presence.fx.is-in li .lbl,
.presence.fx.is-in .ends {
  animation-play-state: running;
}
@keyframes pmap-draw {
  from {
    clip-path: inset(-40px 100% -40px -40px);
  }
  to {
    clip-path: inset(-40px -40px -40px -40px);
  }
}
@keyframes pt-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes pt-line {
  from {
    transform: scaleY(0);
  }
}
@keyframes pt-lbl {
  from {
    opacity: 0;
    transform: translateY(var(--dy, 10px));
  }
}

/**
*	SOLUCIONES (referencia Wolke_Sitio_Completo_2026_V6.9.32)
*	=======================================================================================================
**/

/* --- Íconos: tamaños y variante sobre fondo oscuro (reutilizables) --- */
.wk-icon.is-lg {
  width: 52px;
  height: 52px;
}
.wk-icon.is-lg svg {
  width: 32px;
  height: 32px;
}
.wk-icon.is-sm {
  width: 39px;
  height: 39px;
  border-radius: 9px;
  background: rgba(201, 30, 49, 0.03);
}
.wk-icon.is-sm svg {
  width: 25px;
  height: 25px;
}
.wk-icon.is-xs {
  width: 30px;
  height: 30px;
}
.wk-icon.is-xs svg {
  width: 24px;
  height: 24px;
}
.wk-icon.on-dark {
  color: var(--cyan);
  --icon-fill: var(--navy);
  background: #3ec7d30a;
  border-color: #3ec7d333;
}

/* --- Subnavegación fija (scrollspy en project.js) --- */
.subnav {
  position: sticky;
  top: var(--header-floating-h);
  z-index: 45;
  background: #ffffffee;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav .container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 10px;
  padding-bottom: 10px;
}
.subnav .container::-webkit-scrollbar {
  display: none;
}
.subnav a {
  flex: none;
  font-size: 13.5px;
  font-weight: 700;
  color: #3b5566;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.subnav a:hover {
  background: #eef2f4;
  color: var(--navy);
}
.subnav a.on {
  background: var(--navy);
  color: #fff;
}

/* --- Dominio: cabecera, núcleo, columnas y cierre --- */
.domain {
  scroll-margin-top: calc(var(--header-floating-h) + 56px);
}
.domain.section {
  padding-block: 87px 74px !important;
}
.domain-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}
.domain-heading .eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}
.domain-tag {
  margin-left: auto;
  font-size: var(--label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5a7080;
  text-align: right;
}
.domain-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 66px;
}
.domain-copy h2 {
  margin-top: 0 !important;
}
.domain-copy .copy-highlight {
  color: var(--ink);
  font-size: 18px;
  font-weight: 730;
  line-height: 1.5;
  border-left: 3px solid var(--color-red);
  padding-left: 18px;
  margin-block: 22px;
}
.domain figure {
  margin: 0;
}

/* Foto principal + foto secundaria apiladas */
.photo-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.photo-stack figure {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #dbe8ee;
  box-shadow: 0 14px 33px #0a223510;
}
.photo-stack img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.photo-stack__main img {
  height: 400px;
}
.photo-stack__float img {
  height: 210px;
}
.photo-stack figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(0deg, #051b2be8, transparent);
}
.photo-stack__main figcaption {
  padding: 35px 25px 22px;
  font-size: 22px;
}
.photo-stack__float figcaption {
  padding: 34px 20px 14px;
  font-size: 15px;
}
.photo-stack figcaption span {
  display: block;
  color: #e2eef3;
  font-weight: 500;
  margin-top: 5px;
  font-size: 12px;
}

/* Figura enmarcada (Relaves) */
.visual-frame {
  padding: 13px 13px 18px;
  background: #f4f7f8;
  border-radius: 12px;
  box-shadow: 0 25px 55px #0005;
  min-width: 0;
}
.visual-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.42;
  object-fit: cover;
  border-radius: 5px;
}
.visual-frame figcaption {
  padding: 13px 9px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.visual-frame figcaption strong {
    font-size: 15px;
}
.visual-frame figcaption span {
  font-size: 11px;
  color: #637887;
}

/* Escenario de datos (pantalla + equipo) */
.data-visual {
  min-width: 0;
}
.data-stage {
  position: relative;
  aspect-ratio: 1.45;
  border-radius: 11px;
  background: radial-gradient(ellipse at 64% 32%, #e0ebf0, transparent 65%), linear-gradient(125deg, #d2e1e9, #eff4f6);
}
.screen-frame {
  position: absolute;
  top: 20px;
  right: 12px;
  width: 82%;
  transform: rotate(1deg);
  background: #132d40;
  border: 7px solid #132d40;
  border-radius: 9px;
  box-shadow: 0 18px 35px #10293e30;
}
.screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.data-device {
  position: absolute;
  bottom: -5px;
  left: -18px;
  width: 51%;
  height: auto;
  filter: drop-shadow(14px 18px 13px #0c2b3739);
}
.data-device-label {
  position: absolute;
  bottom: 11px;
  right: 15px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--navy);
  text-align: right;
}
.data-device-label span {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5c7483;
}
.data-visual figcaption {
  color: #637888;
  font-size: 11px;
  padding: 14px 0 0;
  text-align: right;
}
.data-route {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 17px 14px;
  background: #fff;
  border: 1px solid #dce6ec;
  border-radius: 6px;
}
.data-route span {
    flex: 1;
    font-size: 15px;
    font-weight: 750;
    text-align: center;
    line-height: 1.4;
}
.data-route b {
  color: var(--color-red);
  font-size: 16px;
  font-weight: 600;
}

/* Tres columnas con ícono a la izquierda */
.feature-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 33px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.feature-col {
  position: relative;
  padding-left: 58px;
}
.feature-col + .feature-col {
    border-left: 1px solid var(--line);
    padding-left: 80px;
}
.feature-col .wk-icon {
  position: absolute;
  top: 2px;
  left: 0;
}
.feature-col + .feature-col .wk-icon {
    left: 17px;
}
.feature-col h3 {
  font-size: var(--h3);
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-weight: 750;
  margin: 0 0 12px;
}
.feature-col p {
  margin: 0;
  font-size: var(--card);
  line-height: 1.62;
  color: #4c6372;
}

/* Cierre del dominio */
.domain-outcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.domain-outcome p {
  margin: 0;
  max-width: 900px;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 750;
}
.domain-outcome .text-link {
  white-space: nowrap;
  flex: none;
}
.outcome-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

/* Dominio sobre fondo oscuro */
.section.is-navy.has-rings {
  overflow: hidden;
}
.section.is-navy.has-rings::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 710px;
  height: 710px;
  top: -470px;
  right: -220px;
  border: 1px solid #8cd1dd1a;
  border-radius: 50%;
  box-shadow: 0 0 0 90px #8cd1dd05, 0 0 0 190px #8cd1dd04;
}
.section.is-navy .domain-tag {
  color: #8aafc3;
}
.section.is-navy .domain-copy .section-lead,
.section.is-navy .feature-col p {
  color: #c1d3de;
}
.section.is-navy .feature-col h3 {
  color: #fff;
}
.section.is-navy .feature-cols,
.section.is-navy .feature-col + .feature-col,
.section.is-navy .domain-outcome {
  border-color: #ffffff2b;
}
.section.is-navy .domain-outcome p {
  color: #8cdae0;
}

/* --- Tecnología Wolke: texto destacado y fila de productos --- */
.shared-tech.section {
  padding-block: 83px 56px !important;
}
.shared-tech .intro-grid .btn {
  margin-top: 9px;
}
.section-lead .lead-strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 650;
}
.link-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid #ffffff29;
}
.link-row a {
  display: block;
  font-size: 22px;
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: #fff;
  transition: color 0.2s;
}
.link-row a:hover {
  color: var(--cyan);
}
.link-row .wk-icon {
  margin-right: 9px;
  vertical-align: -6px;
}
.link-row small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #a8c7d8;
  margin-top: 7px;
}

/* --- Experiencia: tarjetas de proyecto (reutilizan .solution-card del home) --- */
.intro-action {
  justify-self: end;
  padding-top: 0 !important;
}
.solution-grid.solution-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.solution-grid--3 .solution-card {
  position: relative;
}

/* --- Cierre de contacto con nota (template-parts/contact-cta.php) --- */
.contact-cta .contact-copy {
  flex: 1;
  min-width: 0;
}
.contact-cta.has-note .container {
  gap: 80px;
  align-items: center;
}
.contact-cta.has-note h2 {
  font-size: clamp(36px, 3.6vw, 52px) !important;
  max-width: 750px;
}
.contact-cta.has-note .contact-copy p {
  max-width: 730px;
  font-size: 15.5px;
  line-height: 1.7;
  margin-top: 14px;
}
.contact-action {
  width: 260px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 17px;
  text-align: center;
}
.contact-action .btn {
  margin: 0 !important;
  width: 100%;
}
.contact-action > span {
  font-size: 12px;
  line-height: 1.6;
  color: #c0d5e0;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .domain-core {
    gap: 40px;
  }
  .photo-stack__main img {
    height: 350px;
  }
  .photo-stack__float img {
    height: 180px;
  }
  .feature-cols {
    gap: 22px;
  }
  .link-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .link-row a {
    font-size: 20px;
  }
  .contact-cta.has-note .container {
    gap: 35px;
  }
}
@media (max-width: 900px) {
  .domain-core {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .domain-core > .domain-copy {
    order: -1;
    max-width: 760px;
  }
  .photo-stack,
  .visual-frame,
  .data-visual {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .photo-stack__main img {
    height: 360px;
  }
  .photo-stack__float img {
    height: 190px;
  }
  .intro-action {
    justify-self: start;
  }
}
@media (max-width: 800px) {
  .domain-heading {
    flex-wrap: wrap;
  }
  .domain-tag {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
  .solution-grid.solution-grid--3 {
    grid-template-columns: 1fr;
  }
  .contact-cta.has-note .container {
    align-items: flex-start;
    flex-direction: column;
  }
  .contact-action {
    width: 100%;
    max-width: 320px;
  }
}
@media (max-width: 700px) {
  .domain.section {
    padding-block: 61px !important;
  }
  .domain-tag {
    display: none;
  }
  .feature-cols {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
    margin-top: 34px;
  }
  .feature-col {
    padding: 23px 0 23px 48px;
  }
  .feature-col + .feature-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .feature-col .wk-icon {
    top: 23px;
  }
  .feature-col:last-child {
    padding-bottom: 0;
  }
  .domain-outcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 26px;
    padding-top: 20px;
  }
}
@media (max-width: 540px) {
  .photo-stack__main img {
    height: 250px;
  }
  .photo-stack__float img {
    height: 150px;
  }
  .photo-stack__main figcaption {
    padding: 30px 18px 18px;
    font-size: 20px;
  }
  .photo-stack__float figcaption {
    padding: 26px 14px 12px;
    font-size: 13px;
  }
  .link-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .domain-heading .eyebrow {
    font-size: 10px !important;
  }
}

/**
*	PRODUCTOS (referencia Wolke_Sitio_Completo_2026_V6.9.32)
*	=======================================================================================================
**/

/* --- Franja de capacidades (reutilizable) --- */
.capability-band {
  background: var(--navy);
  color: #e4eef3;
  padding: 22px 0 19px;
}
.capability-band .container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.capability-band span {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 4px 12px;
  border-right: 1px solid #3f5362;
}
.capability-band span:first-child {
  text-align: left;
  padding-left: 0;
}
.capability-band span:last-child {
  border: 0;
}
@media (min-width: 1101px) {
  .capability-band .container {
    grid-template-columns: var(--band-cols, repeat(6, 1fr));
  }
}

/* --- Tarjeta de producto (vertical; --feature = horizontal y grande) --- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
  transition: box-shadow 0.2s, transform 0.2s;
}
.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.product-card__media {
  position: relative;
  margin: 0;
  height: 196px;
  background: #dfe7ec;
}
.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card__media figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #071a2ccc;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}
.product-card__media figcaption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
}
.product-cat {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-red);
  margin-bottom: 8px;
}
.product-card h3 {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.product-card p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #4c6273;
}
.spec-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 0;
  margin: 0 0 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.spec-list dt {
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 800;
  color: #56697a;
  padding-top: 6px;
  white-space: nowrap;
}
.spec-list dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 650;
  color: var(--navy);
}
.product-card .text-link {
  margin-top: auto;
}
.card-stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.product-card--feature {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border-radius: 18px;
  margin-top: 44px;
  box-shadow: 0 30px 60px -44px rgba(7, 26, 44, 0.4);
}
.product-card--feature:hover {
  transform: none;
  box-shadow: 0 30px 60px -44px rgba(7, 26, 44, 0.4);
}
.product-card--feature .product-card__media {
  height: auto;
  min-height: 430px;
}
.product-card--feature .product-card__media img {
  position: absolute;
  inset: 0;
  object-position: 50% 42%;
}
.product-card--feature .product-card__body {
  padding: 36px 40px 34px;
}
.product-card--feature h3 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 10px;
}
.product-card--feature p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.62;
  color: #3b5566;
  max-width: 560px;
}
.product-card--feature .spec-list {
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  margin-bottom: 18px;
}
.product-card--feature .spec-list dt {
  padding-top: 3px;
}
.product-card--feature .spec-list dd {
  font-size: 14px;
}
.model-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.model-list li {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f7f9fa;
}
.model-list b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.model-list span {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: #4f6171;
  margin-top: 2px;
}
.hp-grid.hp-grid--flush {
  margin-top: 16px;
}
.card-note {
  margin: 24px 0 0;
  font-size: 15px;
  color: #3b5566;
}
.card-note .text-link {
  display: inline-flex;
}

/* --- Tarjeta oscura (sistemas y software) --- */
.dark-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: #ffffff0c;
  border: 1px solid #ffffff22;
  border-radius: 12px;
  color: #fff;
  transition: border-color 0.2s, background 0.2s;
}
.dark-card:hover {
  border-color: #ffffff55;
  background: #ffffff14;
}
.dark-card figure {
  margin: 0;
  height: 170px;
  background: #0e2a40;
  overflow: hidden;
}
.dark-card figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.94;
}
.dark-card figure.is-contain img {
  object-fit: contain;
  padding: 8px 10px;
  opacity: 1;
}
.dark-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.dark-card .product-cat {
  color: var(--cyan);
}
.dark-card h3 {
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}
.dark-card p {
  margin: 0 0 14px;
  font-size: var(--card);
  line-height: 1.6;
  color: #c5d6e0;
}
.dark-card .text-link {
  margin-top: auto;
  color: #fff;
}
.dark-card .text-link span {
  color: var(--cyan);
}

/* --- Tabla de datos (reutilizable) --- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 46px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.data-table th {
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5a7080;
  text-align: left;
  padding: 16px 24px;
  background: #f5f7f8;
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 18px 24px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #3b5566;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table tr:last-child td {
  border-bottom: 0;
}
.data-table td:first-child {
  font-weight: 800;
  color: var(--navy);
  width: 28%;
}
.data-table td:nth-child(2) {
  width: 20%;
  white-space: nowrap;
}
.data-table td:nth-child(2) a {
  font-weight: 800;
  color: var(--color-red);
}
.data-table td:nth-child(2) a:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .capability-band .container {
    grid-template-columns: repeat(6, 1fr);
  }
  .product-card--feature {
    grid-template-columns: 1fr;
  }
  .product-card--feature .product-card__media {
    min-height: 300px;
  }
}
@media (max-width: 800px) {
  .capability-band .container {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 0;
  }
  .capability-band span {
    font-size: 12px;
  }
  .capability-band span:nth-child(3) {
    border: 0;
  }
  .capability-band span:nth-child(4) {
    text-align: left;
    padding-left: 0;
  }
}
@media (max-width: 760px) {
  .data-table thead {
    display: none;
  }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: auto !important;
  }
  .data-table tr {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
  }
  .data-table tr:last-child {
    border-bottom: 0;
  }
  .data-table td {
    padding: 0;
    border: 0;
    white-space: normal !important;
  }
  .data-table td:nth-child(2) {
    margin: 4px 0;
  }
  .model-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .product-card--feature .product-card__body {
    padding: 26px 22px;
  }
  .product-card--feature h3 {
    font-size: 28px;
  }
}

/* Espacio entre la cabecera de sección y la rejilla de tarjetas que le sigue */
.intro-grid + .hp-grid.hp-grid--4 {
    margin-top: 50px;
}

/* ==========================================================================
   Página Tecnología (page-tecnologia.php)
   ========================================================================== */
.tech-page section[id] { scroll-margin-top: calc(var(--header-floating-h) + 56px); }
.tech-page .capability-band p {
  margin-top: 12px;
  font-size: 11.8px;
  line-height: 1.6;
  color: #c5d6e0;
}
.tech-page .small-code {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  font-weight: 800;
}
.tech-page .under-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 22px 0 0;
  max-width: 1060px;
}

/* --- Ilustración con marcadores --- */
.ai { margin: 44px 0 0; }
.ai-stage {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cloud);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(7, 26, 44, 0.35);
}
.ai-stage img { display: block; width: 100%; height: auto; }
.ai-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(-13px, -50%);
  z-index: 2;
}
.ai-pin.l { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -50%); }
.ai-pin i {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--color-white);
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px -6px rgba(7, 26, 44, 0.55);
}
.ai-pin i::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  opacity: 0;
  animation: aiping 2.8s ease-out infinite;
}
@keyframes aiping {
  0% { transform: scale(0.6); opacity: 0.7; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-pin i::after { display: none; }
}
.ai-pin p {
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 780;
  letter-spacing: -0.01em;
  color: var(--navy);
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(7, 26, 44, 0.45);
  backdrop-filter: blur(4px);
}
.ai-legend {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 26px;
  counter-reset: ai;
}
.ai-legend.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-legend li { position: relative; padding-left: 38px; counter-increment: ai; }
.ai-legend li::before {
  content: counter(ai);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--color-white);
  font-weight: 800;
  font-size: 12px;
  line-height: 26px;
  text-align: center;
}
.ai-t { margin: 2px 0 3px; font-size: 14.5px; font-weight: 800; letter-spacing: -0.015em; color: var(--navy); }
.ai-d { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ai-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
#continuidad .ai { margin: 40px 0 26px; }
#seguridad .ai { margin: 38px 0 30px; }
@media (min-width: 1101px) {
  /* Arquitectura: la leyenda va al lado de la ilustración */
  .ai.side { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 0 30px; align-items: start; }
  .ai.side .ai-legend { grid-template-columns: 1fr; margin: 0; gap: 14px; }
  .ai.side .ai-note { grid-column: 1 / -1; }
  .ai.side .ai-pin p { display: none; }
  .ai.side .ai-pin, .ai.side .ai-pin.l { transform: translate(-50%, -50%); }
}
@media (max-width: 1100px) {
  .ai-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-legend.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-pin p { font-size: 11.5px; padding: 4px 9px; }
}
@media (max-width: 760px) {
  .ai-pin p { display: none; }
  .ai-pin, .ai-pin.l { transform: translate(-50%, -50%); }
  .ai-pin i { width: 22px; height: 22px; line-height: 22px; font-size: 11px; }
  .ai-stage { border-radius: 14px; }
}
@media (max-width: 540px) {
  .ai-legend, .ai-legend.n3 { grid-template-columns: 1fr; gap: 12px; }
  .ai-pin i { width: 20px; height: 20px; line-height: 20px; font-size: 10.5px; box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(7, 26, 44, 0.55); }
}

/* --- 02 Adquisición --- */
.tech-page .acquisition { background: var(--cloud); }
.acquisition-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 62px; align-items: stretch; }
.equipment-shot {
  background: var(--color-white);
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  margin: 0;
}
.equipment-shot img { width: 100%; height: 420px; object-fit: contain; margin: 15px auto; filter: drop-shadow(8px 21px 18px rgba(7, 26, 44, .11)); }
.tagline { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.5; }
.equipment-shot figcaption { font-size: 12px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line); }
.signal-list { display: grid; gap: 0; }
.signal-list article { position: relative; padding: 20px 0 20px 55px; border-bottom: 1px solid var(--line); }
.signal-list article:first-child { padding-top: 0; }
.signal-list article:last-child { border: 0; }
.signal-list article.signal-highlight { border-left: 3px solid var(--color-red); padding-left: 55px; }
.signal-list .signal-icon { position: absolute; left: 0; top: 27px; width: 37px; height: 37px; background: none; border: 0; border-radius: 0; }
.signal-list article:first-child .signal-icon { top: 5px; }
.signal-list .signal-highlight .signal-icon { left: 12px; }
.signal-label { font-size: 10.5px; letter-spacing: 0.12em; font-weight: 850; text-transform: uppercase; color: var(--color-red); }
.signal-list h3 { margin: 7px 0 10px; }
.signal-list p { margin: 0; color: var(--muted); }

/* --- Geotecnia --- */
.geotechnical { background: var(--navy); color: var(--color-white); position: relative; }
.geotech-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 72px; align-items: center; }
.geotechnical h2 { color: var(--color-white); margin-top: 21px; margin-bottom: 24px; }
.geotechnical p { color: #c5d6e0; font-size: 16px; line-height: 1.7; max-width: 560px; }
.geotechnical .dark-lead { font-size: 19px; color: var(--color-white); }
.channel-proof { display: flex; gap: 22px; align-items: center; border-block: 1px solid rgba(255, 255, 255, .16); padding: 13px 0 22px; margin: 29px 0; }
.channel-proof > strong { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.08em; color: var(--cyan); }
.channel-proof span { font-size: 16px; line-height: 1.3; display: block; font-weight: 750; max-width: 230px; }
.channel-proof small { display: block; color: #c5d6e0; font-size: 11.5px; margin-top: 9px; }
.geotech-photo { position: relative; border-radius: 11px; overflow: hidden; align-self: stretch; min-height: 635px; margin: 0; }
.geotech-photo img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 52% 59%; }
.geotech-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 45px 25px 23px; background: linear-gradient(transparent, rgba(7, 26, 44, .95)); color: var(--color-white); font-size: 12px; line-height: 1.6; }

/* --- 03 Comunicaciones --- */
.network-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.network-card { border: 1px solid var(--line); border-radius: 11px; padding: 29px 24px 24px; display: flex; flex-direction: column; position: relative; background: var(--color-white); }
.network-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: var(--color-red); }
.network-card .network-icon { border-radius: 12px; background: rgba(201, 30, 49, .04); border: 1px solid rgba(201, 30, 49, .1); }
.network-card h3 { font-size: 26px !important; line-height: 1.18; margin: 19px 0 16px; }
.network-card p { color: var(--muted); margin: 0 0 25px; }
.net-foot { font-size: 12px; line-height: 1.6; padding-top: 16px; border-top: 1px solid var(--line); margin-top: auto; color: var(--muted); }
.network-local { background: var(--cloud); padding: 23px 28px; border-radius: 8px; margin-top: 22px; display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.network-local strong { font-size: 16px; }
.network-local p { font-size: 14.5px; line-height: 1.6; margin: 0; color: var(--muted); }

/* --- 04 Connection Broker --- */
.broker-section { background: var(--navy); color: var(--color-white); position: relative; }
.broker-section h2 { color: var(--color-white); }
.broker-section .section-lead, .broker-section .section-lead p { color: #c5d6e0; }
.bk-fig { margin: 44px 0 40px; }
.bk-fig img { display: block; width: 100%; height: auto; }
.broker-map { display: grid; grid-template-columns: 0.85fr 1.4fr 0.9fr; gap: 30px; align-items: center; margin-top: 54px; margin-bottom: 50px; }
.map-caption { display: block; font-size: 10px; letter-spacing: 0.13em; font-weight: 800; color: #c5d6e0; line-height: 1.5; margin-bottom: 16px; }
.broker-sources > div, .broker-dests > div { border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; padding: 13px 12px; font-size: 12.5px; margin-top: 9px; background: rgba(255, 255, 255, .02); line-height: 1.5; }
.broker-center { border: 1px solid rgba(62, 199, 211, .5); border-radius: 13px; padding: 29px 25px; background: rgba(255, 255, 255, .06); position: relative; text-align: center; box-shadow: 0 18px 45px #00000022; }
.broker-center::before, .broker-center::after { content: ""; height: 1px; position: absolute; top: 50%; width: 30px; background: var(--muted); }
.broker-center::before { right: 100%; }
.broker-center::after { left: 100%; }
.broker-center .map-caption { color: var(--cyan); font-size: 11px; }
.broker-center h3 { font-size: 24px !important; line-height: 1.35; margin: 18px 0; color: var(--color-white); }
.broker-center p { font-size: 13.5px; color: #c5d6e0; line-height: 1.7; margin: 0; }
.center-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.center-pills span { font-size: 11px; border: 1px solid rgba(255, 255, 255, .27); padding: 4px 8px; border-radius: 4px; color: var(--color-white); }
.broker-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 34px; }
.broker-benefits .broker-icon { display: flex; color: var(--cyan); --icon-fill: var(--navy); margin-bottom: 13px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 11px; background: rgba(255, 255, 255, .02); }
.broker-benefits h3 { margin: 14px 0; color: var(--color-white); }
.broker-benefits p { color: #c5d6e0; margin: 0; }
.recovery-line { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 34px; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .02); font-size: 15px; color: #c5d6e0; }
.recovery-line > span { display: inline-flex; align-items: center; gap: 10px; }
.recovery-line strong { color: var(--color-white); font-weight: 800; }
.recovery-line .wk-icon { width: 30px; height: 30px; color: var(--cyan); --icon-fill: var(--navy); flex: none; }
.recovery-line .wk-icon svg { width: 22px; height: 22px; }
@media (min-width: 761px) { .broker-map.bk-html { display: none !important; } }
@media (max-width: 760px) { .bk-fig { display: none !important; } }

/* --- 05 Operación --- */
.management-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.management-list article { position: relative; padding-left: 59px; }
.management-list .management-icon { position: absolute; top: 0; left: 0; width: 38px; height: 38px; background: var(--cloud); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.management-list h3 { font-size: 19px !important; line-height: 1.3; margin: 0 0 8px; }
.management-list p { margin: 0; color: var(--muted); }
.ops-solo { margin-top: 40px; }

/* --- 06 Continuidad --- */
.tech-page .resilience { background: #eef2f4; }
.honest-note { display: grid; grid-template-columns: 230px 1fr; gap: 28px; background: var(--color-white); padding: 25px 29px; border-radius: 8px; margin-top: 35px; border-left: 3px solid var(--color-red); align-items: center; }
.honest-note strong { font-size: 16px; line-height: 1.4; }
.honest-note p { line-height: 1.65; color: var(--muted); margin: 0; }
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 34px; }
.proof-strip strong { display: block; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--navy); font-weight: 830; }
.proof-strip span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.proof-strip small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.proof-strip .pre, .proof-strip .unit { display: inline; font-size: 0.42em; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.proof-strip .pre { margin-right: 6px; }
.proof-strip .unit { margin-left: 6px; }

/* --- 07 Integración --- */
.tech-page .open-integration { background: var(--color-white); border-top: 1px solid var(--line); }
.open-composition { display: grid; grid-template-columns: 1.25fr 0.95fr; gap: 40px; align-items: stretch; margin-top: 52px; }
.open-screens { position: relative; min-height: 560px; }
.open-screen { margin: 0; border-radius: 12px; overflow: hidden; background: var(--color-white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.open-screen img { display: block; width: 100%; height: auto; }
.open-screen figcaption { padding: 10px 14px; color: var(--muted); background: var(--cloud); border-top: 1px solid var(--line); }
.open-screen-main { position: absolute; left: 0; top: 0; width: 84%; }
.open-screen-side { position: absolute; right: 0; bottom: 0; width: 50%; box-shadow: 0 24px 60px rgba(10, 30, 45, 0.22); }
.open-destinos { display: flex; flex-direction: column; gap: 14px; }
.open-destinos article { background: var(--color-white); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.dest-kicker { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--color-red); margin-bottom: 8px; }
.open-destinos h3 { font-size: 20px !important; margin: 0 0 8px; letter-spacing: -0.02em; }
.open-destinos p { margin: 0; line-height: 1.6; color: var(--muted); }
.open-destinos .dest-photo { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding: 0; overflow: hidden; }
.open-destinos .dest-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; min-height: 160px; }
.open-destinos .dest-photo div { padding: 18px 20px 18px 0; }

/* --- 08 Seguridad --- */
.tech-page .security { background: var(--cloud); }
.sec-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--color-white); }
.sec-stage { position: relative; padding: 28px 26px; border-right: 1px solid var(--line); min-width: 0; }
.sec-stage:last-child { border-right: 0; }
.sec-stage:not(:last-child)::after { content: ""; position: absolute; right: -7px; top: 44px; width: 12px; height: 12px; background: var(--color-white); border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: rotate(45deg); z-index: 1; }
.sec-stage > .wk-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 12px; background: rgba(201, 30, 49, .04); border: 1px solid rgba(201, 30, 49, .12); color: var(--color-red); }
.sec-stage > .wk-icon svg { width: 24px; height: 24px; }
.sec-stage .small-code { display: block; margin-bottom: 8px; color: var(--muted); }
.sec-stage h3 { font-size: 20px !important; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 14px; }
.sec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sec-list li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.sec-list li::before { content: ""; position: absolute; left: 3px; top: 0.38em; width: 11px; height: 6px; border-left: 2px solid var(--color-red); border-bottom: 2px solid var(--color-red); transform: rotate(-45deg); }
.sec-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-radius: 14px; background: var(--navy); color: var(--color-white); }
.sec-item { display: flex; gap: 14px; align-items: flex-start; padding: 24px 26px; min-width: 0; }
.sec-item + .sec-item { border-left: 1px solid rgba(255, 255, 255, .13); }
.sec-item > .wk-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--cyan); --icon-fill: var(--navy); border: 1px solid rgba(62, 199, 211, .25); background: rgba(62, 199, 211, .07); }
.sec-item > .wk-icon svg { width: 23px; height: 23px; }
.sec-item strong { display: block; font-size: 16px; letter-spacing: -0.01em; margin: 2px 0 6px; }
.sec-item p { margin: 0; font-size: 14px; line-height: 1.6; color: #c5d6e0; }
.sec-item .text-link { color: var(--color-white); text-decoration: underline; text-underline-offset: 4px; font-weight: 800; }
.sec-item .text-link:hover { color: var(--cyan); }

/* --- Responsivo --- */
@media (max-width: 1100px) {
  .acquisition-grid { gap: 36px; }
  .geotech-grid { gap: 40px; }
  .network-grid { grid-template-columns: repeat(2, 1fr); }
  .broker-map { grid-template-columns: 0.9fr 1.3fr 0.9fr; gap: 18px; }
  .broker-center::before, .broker-center::after { width: 18px; }
  .broker-center { padding: 24px 17px; }
  .broker-center h3 { font-size: 20px !important; }
  .broker-benefits { gap: 22px; }
  .management-list { gap: 22px; }
  .open-composition { grid-template-columns: 1fr; gap: 28px; }
  .open-screens { min-height: 0; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; align-items: start; }
  .open-screen-main, .open-screen-side { position: static; width: auto; }
  .sec-chain { grid-template-columns: 1fr 1fr; }
  .sec-stage:nth-child(2) { border-right: 0; }
  .sec-stage:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .sec-stage::after { display: none; }
}
@media (max-width: 800px) {
  .acquisition-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .equipment-shot { padding: 22px; }
  .equipment-shot img { height: 350px; }
  .geotech-grid { grid-template-columns: 1fr; gap: 35px; }
  .geotech-photo { min-height: 440px; }
  .geotech-photo img { object-position: 50% 65%; }
  .geotechnical h2 { font-size: 40px; }
  .broker-map { grid-template-columns: 1fr; gap: 22px; margin-top: 35px; }
  .broker-center { padding: 29px; }
  .broker-center::before, .broker-center::after { height: 22px; width: 1px; left: 50%; right: auto; top: auto; }
  .broker-center::before { bottom: 100%; }
  .broker-center::after { top: 100%; }
  .broker-sources, .broker-dests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .broker-map .map-caption { grid-column: 1 / -1; margin-bottom: 0; }
  .broker-sources > div, .broker-dests > div { margin-top: 0; display: flex; align-items: center; font-size: 12px; }
  .broker-benefits { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .management-list { grid-template-columns: 1fr; }
  .honest-note { grid-template-columns: 1fr; gap: 12px; padding: 25px; }
  .proof-strip { grid-template-columns: 1fr 1fr; gap: 22px; }
  .proof-strip strong { font-size: 34px; }
  .sec-foot { grid-template-columns: 1fr; }
  .sec-item + .sec-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .13); }
  .network-local { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 540px) {
  .acquisition-grid { grid-template-columns: 1fr; gap: 32px; }
  .equipment-shot img { height: 275px; }
  .signal-list article { padding-left: 46px; }
  .channel-proof > strong { font-size: 44px; }
  .network-grid { grid-template-columns: 1fr; gap: 14px; }
  .network-card { padding: 24px; }
  .broker-sources, .broker-dests { grid-template-columns: 1fr; }
  .broker-benefits { grid-template-columns: 1fr; gap: 27px; }
  .open-screens { grid-template-columns: 1fr; }
  .open-destinos .dest-photo { grid-template-columns: 1fr; }
  .open-destinos .dest-photo div { padding: 18px 20px; }
  .proof-strip strong { font-size: 32px; }
  .sec-chain { grid-template-columns: 1fr; }
  .sec-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .sec-stage:last-child { border-bottom: 0; }
  .desktop-only { display: none; }
}

/* Tecnología: pesos y tamaños de títulos de tarjeta (igual que el resto del sitio) */
.signal-list h3,
.network-card h3,
.broker-benefits h3,
.broker-center h3,
.management-list h3,
.open-destinos h3,
.sec-stage h3 {
  font-weight: 750;
  letter-spacing: -0.025em;
}
.signal-list h3 { font-size: 23px; line-height: 1.2; }
.broker-benefits h3 { font-size: 21px; line-height: 1.2; }
.open-screen figcaption { font-size: 13px; line-height: 1.5; }

/* ==========================================================================
   Página Proyectos (page-proyectos.php)
   ========================================================================== */
.hero-picture-caption {
  position: absolute;
  bottom: 88px;
  right: 28px;
  max-width: 235px;
  text-align: right;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-white);
  z-index: 2;
}
.case-index-shell { position: relative; z-index: 4; margin-top: -54px; }
.case-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 122px;
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 58px #0a22351f;
  overflow: hidden;
}
.case-index a {
  padding: 25px 26px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  align-content: center;
  column-gap: 14px;
  row-gap: 4px;
  text-align: left;
  transition: background 0.2s;
}
.case-index a + a { border-left: 1px solid var(--line); }
.case-index a:hover { background: var(--cloud); }
.case-index .case-nav-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(201, 30, 49, .13);
  border-radius: 11px;
  background: rgba(201, 30, 49, .04);
  align-self: center;
}
.case-index strong { grid-column: 2; font-size: 15px; line-height: 1.3; letter-spacing: -0.02em; }
.case-index small { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.4; }
.cases-intro { padding: 60px 0 51px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.cases-intro h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -0.035em; margin: 0; max-width: 450px; }
.cases-intro p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 570px; }

/* --- Historias --- */
.case-story { padding: 86px 0 83px; scroll-margin-top: calc(var(--header-floating-h) + 24px); }
.case-story .story-kicker { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.story-id { font-size: 11px; letter-spacing: 0.11em; color: var(--muted); text-transform: uppercase; }
.case-story h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -0.035em; margin: 0; font-weight: 800; }
.story-lead { font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 950px; margin: 0; }
.story-header { display: grid; grid-template-columns: 1.07fr 0.93fr; gap: 70px; align-items: end; margin-bottom: 34px; }
.story-main { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: start; }
.story-main > div { min-width: 0; }
.story-figure { margin: 0; min-width: 0; }
.story-photo { width: 100%; height: 345px; object-fit: cover; border-radius: 11px; background: var(--cloud); display: block; }
.story-figure figcaption { display: flex; gap: 9px; align-items: baseline; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.caption-mark { flex: none; width: 12px; height: 2px; background: var(--color-red); transform: translateY(-3px); }
.proof-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 22px; margin-top: 25px; gap: 17px; }
.proof-rail > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.proof-rail strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: var(--navy); }
.proof-rail small { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.proof-rail small br { display: none; }
.proof-rail .pre, .proof-rail .unit { display: inline; font-size: 0.42em; font-weight: 700; letter-spacing: 0; color: var(--muted); margin: 0 4px; }
.story-text { display: flex; flex-direction: column; gap: 20px; }
.story-text section + section { border-top: 1px solid var(--line); padding-top: 18px; }
.story-text h3 { display: flex; align-items: flex-start; gap: 11px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 8px; color: var(--color-red); line-height: 1.4; font-weight: 800; }
.story-text .story-icon { width: 25px; height: 25px; margin-top: -3px; }
.story-text .story-icon svg { width: 22px; height: 22px; }
.story-text p { font-size: 15.2px; line-height: 1.77; margin: 0; color: var(--muted); }
.story-result {
  margin-top: 29px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 22px 27px;
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start;
  gap: 25px;
  background: var(--cloud);
}
.result-label { font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; font-weight: 850; padding-top: 5px; white-space: nowrap; }
.story-result p { font-size: 18px; line-height: 1.52; font-weight: 730; letter-spacing: -0.02em; margin: 0; max-width: 950px; }
.thermal-story { padding-top: 15px; background: var(--color-white); }
.thermal-photo { object-position: 50% 45%; }
.thermal-story .story-icon, .road-story .story-icon { color: var(--cyan); }
.water-story { background: var(--navy); color: var(--color-white); position: relative; overflow: hidden; }
.water-story .story-id { color: #c5d6e0; }
.water-story .story-header { align-items: start; }
.water-story h2 { color: var(--color-white); }
.water-story .story-lead, .water-story .story-text p { color: #c5d6e0; }
.water-story .story-text h3 { color: var(--cyan); }
.water-story .story-icon { color: var(--color-red); }
.water-story .story-text section + section { border-color: rgba(255, 255, 255, .15); }
.water-story .story-photo { height: 358px; object-position: 50% 60%; }
.water-story .story-figure figcaption { color: #c5d6e0; }
.water-story .proof-rail, .water-story .proof-rail > div + div { border-color: rgba(255, 255, 255, .15); }
.water-story .proof-rail strong { color: var(--color-white); font-size: 23px; }
.water-story .proof-rail small { color: #c5d6e0; }
.water-story .story-result { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .06); }
.water-story .story-result p { color: var(--color-white); }
.water-story .result-label { color: #c5d6e0; }
.scope-note { margin: 17px 0 0; font-size: 12px; line-height: 1.6; color: #c5d6e0; max-width: 1020px; }
.road-story { background: var(--color-white); }
.road-story .story-main { grid-template-columns: 1fr 1.07fr; }
.road-story .proof-rail strong { font-size: 23px; }
.mee-story { background: var(--cloud); }
.mee-story .story-main { grid-template-columns: 1fr 1fr; }
.mee-story .story-photo { height: auto; aspect-ratio: 1.6; object-fit: cover; background: var(--cloud); box-shadow: 0 12px 40px #14374b0d; }
.evidence-panel { background: var(--color-white); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: 0 12px 40px #183c4e08; margin-top: 28px; }
.evidence-heading { padding: 23px 28px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.evidence-heading strong { font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; }
.evidence-heading small { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); text-align: right; }
.evidence-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 27px 28px; }
.evidence-metrics > div + div { border-left: 1px solid var(--line); padding-left: 30px; }
.evidence-metrics strong { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -0.03em; color: var(--navy); font-weight: 820; display: block; }
.evidence-metrics small { font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 8px; display: block; max-width: 240px; }
.evidence-note { padding: 14px 28px; background: var(--cloud); font-size: 13px; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--line); margin: 0; }
.delivery-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 23px; }
.delivery-step { position: relative; padding: 13px 10px; background: rgba(255, 255, 255, .61); border: 1px solid var(--line); border-radius: 5px; min-width: 0; }
.delivery-step span { display: block; color: var(--red-dark); font-size: 11px; font-weight: 850; letter-spacing: 0.07em; }
.delivery-step strong { display: block; font-size: 14px; line-height: 1.3; margin-top: 6px; letter-spacing: -0.02em; }
.connect-story { padding: 73px 0 70px; background: var(--color-white); }
.connect-grid { display: grid; grid-template-columns: 1fr 0.95fr; gap: 80px; align-items: center; }
.connect-grid h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -0.035em; margin: 15px 0 24px; font-weight: 800; }
.connect-grid p { font-size: 16px; color: var(--muted); line-height: 1.8; margin: 0; }
.connect-grid .text-link { margin-top: 25px; }

/* --- Desafíos públicos --- */
.public-proof .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.public-proof .proof-card { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; display: flex; flex-direction: column; background: var(--color-white); min-width: 0; position: relative; }
.public-proof .proof-card figure { margin: 0; height: 265px; position: relative; }
.public-proof .proof-card figure > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.public-proof .proof-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 20px 12px; background: linear-gradient(transparent, rgba(7, 26, 44, .85)); color: var(--color-white); font-size: 12px; }
.public-proof figure .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 100%; }
.public-proof figure .pair.trio { grid-template-columns: 1fr 1fr 1fr; }
.public-proof figure .pair img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.public-proof .proof-body { padding: 26px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.public-proof .proof-body h3 { font-size: 26px !important; line-height: 1.18 !important; margin: 10px 0 14px; }
.public-proof .proof-body p { color: var(--muted); margin: 0 0 12px; }
.public-proof .proof-detail { font-size: 14px !important; line-height: 1.7 !important; color: var(--muted); }
.public-proof .tagline { color: var(--muted); }
.award-badge { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 21px; padding-bottom: 12px; }
.award-badge .wk-icon { width: 29px; height: 29px; color: var(--muted); }
.award-badge .wk-icon svg { width: 25px; height: 25px; }
.institution-pair { display: flex; align-items: flex-start; gap: 22px; border-top: 1px solid var(--line); padding: 18px 0 20px; margin-top: auto; margin-bottom: 11px; min-height: 113px; }
.institution-item { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.institution-item + .institution-item { border-left: 1px solid var(--line); padding-left: 24px; }
.institution-item small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.institution-pair .institution-logo-img { height: 46px; }
.institution-pair .institution-logo-img.logo-armada, .institution-pair .institution-logo-img.logo-conaf { height: 58px; }
.public-proof .proof-body .text-link { min-height: 42px; padding-top: 12px; color: var(--red-dark); }
.public-proof .proof-body .proof-award-link { font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 0; min-height: 0; margin-top: 4px; }

/* --- Responsivo --- */
@media (max-width: 1100px) {
  .story-header { gap: 40px; }
  .story-main { gap: 35px; }
  .story-photo { height: 315px; }
  .story-text p { font-size: 14.5px; }
  .case-index a { padding: 23px 18px; }
  .proof-rail > div + div { padding-left: 15px; }
  .proof-rail { gap: 13px; }
  .connect-grid { gap: 45px; }
  .story-result { grid-template-columns: 125px 1fr; gap: 20px; }
}
@media (max-width: 900px) {
  .hero-picture-caption { display: none; }
  .cases-intro { gap: 35px; padding-block: 49px 40px; }
  .story-header { grid-template-columns: 1fr; gap: 18px; margin-bottom: 27px; }
  .story-main, .road-story .story-main, .mee-story .story-main { grid-template-columns: 1fr; gap: 28px; }
  .story-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .story-text section + section { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 21px; }
  .water-story .story-text section + section { border-left-color: rgba(255, 255, 255, .15); }
  .story-photo, .water-story .story-photo { height: 390px; }
  .case-story { padding-block: 65px; }
  .case-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-index a:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .case-index a:nth-child(4) { border-top: 1px solid var(--line); }
  .case-index a { min-height: 91px; }
  .connect-grid { grid-template-columns: 1fr; gap: 20px; }
  .story-result p { font-size: 17px; }
}
@media (max-width: 800px) {
  .public-proof .proof-grid { grid-template-columns: 1fr; }
  .public-proof .proof-body { padding: 24px; }
}
@media (max-width: 700px) {
  .institution-pair { gap: 15px; padding-block: 17px; min-height: 112px; }
  .institution-item + .institution-item { padding-left: 17px; }
  .public-proof .proof-card figure { height: 220px; }
}
@media (max-width: 600px) {
  .case-index-shell { margin-top: -42px; }
  .case-index a { padding: 21px 15px; grid-template-columns: 30px 1fr; column-gap: 9px; min-height: 98px; }
  .case-index .case-nav-icon { width: 30px; height: 30px; }
  .case-index .case-nav-icon svg { width: 18px; height: 18px; }
  .case-index strong { font-size: 14px; }
  .case-index small { font-size: 12px; }
  .cases-intro { display: block; padding-block: 41px 37px; }
  .cases-intro h2 { margin-bottom: 17px; }
  .case-story { padding-block: 49px; }
  .thermal-story { padding-top: 9px; }
  .case-story .story-kicker { gap: 14px; align-items: flex-start; margin-bottom: 24px; }
  .story-id { font-size: 10px; letter-spacing: 0.06em; flex: none; padding-top: 2px; }
  .case-story h2 br { display: none; }
  .story-photo, .water-story .story-photo { height: 260px; }
  .story-text { display: flex; gap: 19px; }
  .story-text section + section { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .water-story .story-text section + section { border-color: rgba(255, 255, 255, .15); }
  .story-text p { font-size: 15px; line-height: 1.76; }
  .proof-rail { grid-template-columns: 1fr; gap: 0; margin-top: 21px; padding-top: 20px; }
  .proof-rail > div { padding: 12px 0; border-left: 0 !important; border-top: 1px solid var(--line); }
  .proof-rail > div:first-child { border-top: 0; padding-top: 0; }
  .water-story .proof-rail > div { border-color: rgba(255, 255, 255, .15); }
  .proof-rail strong, .water-story .proof-rail strong, .road-story .proof-rail strong { font-size: 22px; }
  .story-result { grid-template-columns: 1fr; gap: 10px; padding: 20px; margin-top: 25px; }
  .result-label { white-space: normal; padding: 0; }
  .story-result p { font-size: 17px; line-height: 1.55; }
  .delivery-flow { gap: 5px; }
  .delivery-step { padding: 11px 7px; }
  .delivery-step strong { font-size: 12px; }
  .delivery-step span { font-size: 10px; }
  .evidence-heading { padding: 20px; display: block; }
  .evidence-heading small { display: block; text-align: left; margin-top: 8px; }
  .evidence-metrics { padding: 23px 20px; gap: 15px; grid-template-columns: 1fr; }
  .evidence-metrics > div { display: grid; grid-template-columns: 99px 1fr; align-items: center; gap: 18px; }
  .evidence-metrics > div + div { padding: 17px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .evidence-metrics strong { font-size: 30px; }
  .evidence-metrics small { margin: 0; }
  .evidence-note { padding: 17px 20px; }
  .connect-story { padding-block: 49px; }
  .connect-grid h2 { margin-bottom: 16px; }
}
.cases-lead { position: relative; }

/* Proyectos: ajustes tras revisión */
.cases-intro h2 { font-weight: 800; }
.story-figure .story-photo { position: relative; z-index: 0; }
.story-figure { overflow: visible; }
.story-figure .story-photo-wrap { overflow: hidden; border-radius: 11px; }
.story-figure figcaption { position: relative; z-index: 2; background: transparent; }
.case-story h3, .case-story .story-text h3 { font-size: 12.5px; }
.container.cases-intro { padding-inline: 1.5rem; }
.section.public-proof { background: var(--cloud); }

/* ==========================================================================
   Fichas de producto (page-vigiabox/thermoguard/musux/hydrotube.php)
   ========================================================================== */
.instruments {background: #eef2f4}
.resilience-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.resilience-grid article {border-top: 3px solid var(--muted);padding:27px 0 8px}
.resilience-grid h3 {font-size:23px;line-height:1.2;margin:0 0 14px}
.resilience-grid p {font-size:15px;color: var(--muted);line-height:1.7;margin:0}
@media(max-width:800px) {
.resilience-grid {gap:20px}
.resilience-grid h3 {font-size:20px}
}
@media(max-width:540px) {
.resilience-grid {grid-template-columns:1fr;gap:21px}
.resilience-grid article {padding:24px 0 5px}
.resilience-grid h3 {font-size:23px}
.resilience-grid .serial {margin-bottom:12px}
}
.resilience-grid article>.feature-icon {margin-bottom:16px}
.spec-table {width:100%;border-collapse:collapse;margin-top:38px;font-size:15px}
.spec-table th,
.spec-table td {text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table th {width:30%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color: var(--muted);font-weight:800}
.spec-table td {color:var(--ink)}
.faq-list {display:grid;grid-template-columns:1fr 1fr;gap:28px 44px;margin-top:44px}
.faq-list h3 {font-size:19px;margin:0 0 8px;letter-spacing:-.02em}
.faq-list p {margin:0;font-size:15px;line-height:1.7;color: var(--muted)}
@media(max-width:800px) {
.faq-list {grid-template-columns:1fr}
.spec-table th {width:38%}
}
@media(max-width:540px) {
.spec-table th,
.spec-table td {display:block;width:100%;padding:8px 0}
.spec-table th {border:0;padding-top:16px}
}
.prod-hero {position:relative;isolation:isolate;overflow:hidden;color: var(--color-white);padding:84px 0 76px;background: radial-gradient(62% 95% at 78% 45%,rgba(62, 199, 211, .16) 0%,rgba(62, 199, 211, .05) 46%,transparent 80%),var(--navy)}
.prod-hero::after {content:"";position:absolute;inset:0;z-index:-1;background-image: radial-gradient(rgba(255, 255, 255, .11) 1px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image: linear-gradient(90deg,transparent 35%,var(--navy) 80%);mask-image: linear-gradient(90deg,transparent 35%,var(--navy) 80%)}
.prod-hero .container {display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.prod-hero h1 {color: var(--color-white)!important;margin:16px 0 22px!important;max-width:620px;font-size:56px!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:820!important}
.prod-hero .hero-copy p {
    color: #c5d6e0;
    line-height: 1.65;
    margin: 0 0 14px;
    max-width: 560px;
}.prod-hero .hero-actions {margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.prod-hero .hero-shot {margin:0;position:relative;border-radius:24px;padding:30px 30px 18px;background: radial-gradient(80% 75% at 50% 44%,var(--color-white) 0%,var(--cloud) 58%,var(--cloud) 100%);border: 1px solid rgba(255, 255, 255, .25);box-shadow:0 36px 70px -28px rgba(0,0,0,.7)}
.prod-hero .hero-shot img {position:relative;display:block;width:100%;max-width:420px;max-height:400px;object-fit:contain;margin:0 auto;mix-blend-mode:multiply}
.prod-hero .hero-shot figcaption {position:relative;text-align:center;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color: var(--muted);margin-top:12px}
.models {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:46px}
.models article {background: var(--color-white);border:1px solid var(--line);border-radius:16px;padding:28px 26px 26px;display:flex;flex-direction:column;min-width:0}
.models .fam {font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color: var(--muted)}
.models h3 {font-size:34px!important;letter-spacing:-.04em!important;margin:2px 0 6px!important;color:var(--navy)}
.models .tag {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-red);
    margin: 0 0 12px;
    padding: 0;
}.models p {margin:0 0 18px;font-size:15px;line-height:1.6;color: var(--muted)}
.models ul {list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.models li {font-size:14px;line-height:1.45;color: var(--muted);padding-left:18px;position:relative}
.models li::before {content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--color-red)}
.inside {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;margin-top:34px;background: var(--color-white);border:1px solid var(--line);border-radius:16px;padding:34px 44px}
.inside figure {margin:0;display:flex;justify-content:center}
.inside img {display:block;width:100%;max-width:340px;height:auto}
.inside .fam {font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color: var(--muted)}
.inside h3 {font-size:30px!important;letter-spacing:-.035em!important;margin:4px 0 10px!important;color:var(--navy)}
.inside p {margin:0 0 18px;font-size:15.5px;line-height:1.6;color: var(--muted)}
.inside ul {list-style:none;margin:0;padding:0;display:grid;gap:14px}
.inside li {font-size:14.5px;line-height:1.5;color: var(--muted);padding-left:18px;position:relative}
.inside li::before {content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--color-red)}
.inside li strong {display:block;color:var(--navy);font-size:15px}
@media(max-width:900px) {
.inside {grid-template-columns:1fr;padding:26px 22px;gap:24px}
.inside img {max-width:240px}
}
.field-gallery {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:46px}
.field-gallery figure {margin:0;border-radius:14px;overflow:hidden;background: var(--cloud);position:relative}
.field-gallery img {display:block;width:100%;height:440px;object-fit:cover}
.field-gallery figcaption .ill {display:block;font-weight:500;font-size:11.5px;opacity:.82;margin-top:2px}
.field-gallery figcaption {position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(0deg,rgba(7,26,44,.88),rgba(7,26,44,0));color: var(--color-white);font-size:13px;font-weight:700;line-height:1.4}
.compare-wrap {margin-top:46px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background: var(--color-white)}
.compare-table {width:100%;min-width:760px;border-collapse:collapse}
.compare-table th,
.compare-table td {text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;vertical-align:top}
.compare-table thead th {background:var(--navy);color: var(--color-white);font-size:18px;letter-spacing:-.02em;font-weight:800;border-bottom:0}
.compare-table thead th small {display:block;font-size:12px;font-weight:600;color: #c5d6e0;letter-spacing:0;margin-top:2px}
.compare-table thead th:first-child {background: var(--navy);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color: #c5d6e0;vertical-align:bottom}
.compare-table tbody th {width:20%;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color: var(--muted);background: var(--cloud)}
.compare-table tbody td {color: var(--ink);width:26.6%}
.compare-table tr:last-child th,
.compare-table tr:last-child td {border-bottom:0}
.uses {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:46px}
.uses a {display:flex;gap:14px;align-items:flex-start;padding:20px 20px 18px;border: 1px solid rgba(255, 255, 255, .15);border-radius:12px;background: rgba(255, 255, 255, .05);color: var(--color-white);text-decoration:none;transition:background .2s}
.uses a:hover {background: rgba(255, 255, 255, .09)}
.uses .wk-icon {color:var(--cyan);--icon-fill:var(--navy);flex:none}
.uses strong {display:block;font-size:17px;letter-spacing:-.02em;margin-bottom:4px}
.uses span {display:block;font-size:13.5px;line-height:1.5;color: #c5d6e0}
.uses i {font-style:normal;color:var(--cyan);font-weight:800;margin-left:auto}
@media(max-width:1100px) {
.prod-hero .container {grid-template-columns:1fr}
.prod-hero .hero-shot img {max-width:420px}
.models {grid-template-columns:1fr}
.field-gallery {grid-template-columns:1fr 1fr}
.uses {grid-template-columns:1fr 1fr}
}
@media(max-width:540px) {
.prod-hero h1 {font-size:36px!important}
.prod-hero {padding:56px 0 44px}
.prod-hero .hero-copy p {font-size:16px}
.field-gallery img {height:320px}
.uses {grid-template-columns:1fr}
.models h3 {font-size:30px!important}
}
.resilience-grid h3,
.faq-list h3 {font-size:var(--h3)!important;line-height:1.22!important;letter-spacing:-.025em!important;font-weight:750!important}
.faq-list h3 {font-size:19px!important}
.resilience-grid p,
.faq-list p {font-size:var(--card)!important;line-height:1.62!important}
.spec-table th {font-size:var(--label)!important;letter-spacing:.13em!important;text-transform:uppercase;font-weight:800!important}
.spec-table td {font-size:15px!important}
.vb-cont {display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:46px;align-items:center;margin-top:44px}
.vb-cont figure {margin:0;border-radius:20px;overflow:hidden;background: var(--cloud);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(7,26,44,.35)}
.vb-cont figure img {display:block;width:100%;height:auto}
.vb-cont .resilience-grid {margin-top:0!important;grid-template-columns:1fr!important;gap:0!important}
.vb-cont .resilience-grid article {padding:22px 0!important;border-top:1px solid var(--line)}
.vb-cont .resilience-grid article:last-child {border-bottom:1px solid var(--line)}
@media(max-width:900px) {
.vb-cont {grid-template-columns:1fr;gap:28px}
.vb-cont figure {max-width:560px}
}
.anatomy-shot {background: var(--color-white);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;align-items:center;justify-content:center}
.anatomy-shot img {max-width:420px;width:100%;height:auto}
.ht-anatomy .equipment-shot img {object-fit:contain!important;background: var(--color-white);padding:8px}
.ht-install {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:46px}
.ht-install figure {margin:0;background: var(--color-white);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ht-install .img {height:340px;display:flex;align-items:center;justify-content:center;background: var(--cloud)}
.ht-install img {max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;padding:16px}
.ht-install .img.photo img {width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;padding:0;mix-blend-mode:normal}
.ht-install figcaption {padding:16px 20px 18px;font-size:14px;line-height:1.55;color: var(--muted)}
.ht-install figcaption strong {display:block;color:var(--navy);font-size:16px;margin-bottom:4px}
.ht-steps {list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.ht-steps li {counter-increment:s;background: var(--color-white);border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;font-size:14.5px;line-height:1.55;color: var(--muted)}
.ht-steps li::before {content:"0" counter(s);display:block;font-size:24px;font-weight:830;letter-spacing:-.04em;color:var(--color-red);margin-bottom:8px}
.ht-steps strong {display:block;color:var(--navy);font-size:16px;margin-bottom:4px}
@media(max-width:1100px) {
.ht-install {grid-template-columns:1fr}
.ht-steps {grid-template-columns:1fr}
}
@media(max-width:540px) {
.ht-install .img {height:260px}
}
.gap-table {width:100%;border-collapse:separate;border-spacing:0;margin-top:46px;background: var(--color-white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gap-table th {font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color: var(--muted);text-align:left;padding:16px 24px;background: var(--cloud);border-bottom:1px solid var(--line)}
.gap-table td {padding:20px 24px;font-size:15.5px;line-height:1.5;color: var(--muted);border-bottom:1px solid var(--line);vertical-align:top}
.gap-table tr:last-child td {border-bottom:0}
.gap-table td:first-child {font-weight:800;color:var(--navy)}
.gap-table td:last-child {color:var(--navy);font-weight:700}
.gap-table td:last-child::before {content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--color-red);margin-right:10px;vertical-align:1px}
.rules-wrap {display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;margin-top:46px}
.rules {list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rules li {background: var(--color-white);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.rules .if {display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color: var(--muted);margin-bottom:6px}
.rules .then {display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.rules .then::before {content:"→";color:var(--color-red);font-weight:900}
.tg-figure {margin:0;border-radius:14px;overflow:hidden;background: var(--navy);box-shadow:var(--shadow)}
.tg-figure img {display:block;width:100%;height:auto}
.tg-figure figcaption {padding:12px 18px;font-size:13px;line-height:1.5;color: #c5d6e0;background: var(--navy)}
.tg-screens {display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;margin-top:22px}
.tg-screens figure {margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background: var(--color-white)}
.tg-screens img {display:block;width:100%;height:300px;object-fit:cover}
.tg-screens .tg-ui img {object-position:0 0}
.tg-screens figcaption {padding:12px 16px;font-size:13px;color: var(--muted)}
.tg-screens figcaption strong {color:var(--navy)}
.apps-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:46px}
.apps-grid .proven {display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:5px 9px;border-radius:5px;background: var(--recognition-green);color: var(--color-white)}
.proof-split {display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:46px}
.proof-split figure {margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.proof-split img {display:block;width:100%;height:440px;object-fit:cover;object-position:50% 45%}
.proof-nums {display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background: var(--color-white)}
.proof-nums div {padding:24px 24px 22px;border-bottom:1px solid var(--line)}
.proof-nums div:nth-child(odd) {border-right:1px solid var(--line)}
.proof-nums div:nth-last-child(-n+2) {border-bottom:0}
.proof-nums strong {display:block;font-size:34px;line-height:1;letter-spacing:-.04em;font-weight:830;color:var(--navy);white-space:nowrap}
.proof-nums span {display:block;margin-top:9px;font-size:13.5px;line-height:1.45;color: var(--muted)}
.proof-split .text-link {margin-top:22px}
.steps4 {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:46px;border-top:2px solid var(--navy)}
.steps4 article {padding:24px 24px 6px 0;margin-right:24px;border-right:1px solid var(--line)}
.steps4 article:last-child {border-right:0;margin-right:0}
.steps4 b {display:block;font-size:30px;font-weight:830;letter-spacing:-.04em;color:var(--color-red);line-height:1;margin-bottom:14px}
.steps4 h3 {font-size:19px!important;margin:0 0 8px!important}
.steps4 p {margin:0 0 14px;font-size:14.5px;line-height:1.6;color: var(--muted)}
.steps4 .tag {display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:5px 9px;border-radius:5px;background: var(--cloud);color: var(--muted)}
.steps4 .tag.ok {background: var(--cloud);color: var(--muted)}
.zone-figure {margin:40px 0 0;border-radius:14px;overflow:hidden;position:relative}
.zone-figure img {display:block;width:100%;height:360px;object-fit:cover;object-position:50% 40%}
.zone-figure figcaption {position:absolute;left:0;right:0;bottom:0;padding:40px 28px 20px;background:linear-gradient(0deg,rgba(7,26,44,.9),rgba(7,26,44,0));color: var(--color-white);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;font-weight:700}
.zone-figure figcaption span::before {content:"✓ ";color:var(--cyan)}
@media(max-width:1100px) {
.rules-wrap,
.proof-split {grid-template-columns:1fr;gap:28px}
.apps-grid {grid-template-columns:1fr 1fr}
.tg-screens {grid-template-columns:1fr}
.steps4 {grid-template-columns:1fr 1fr}
.steps4 article:nth-child(2) {border-right:0;margin-right:0}
}
@media(max-width:540px) {
.gap-table thead {display:none}
.gap-table,
.gap-table tbody,
.gap-table tr,
.gap-table td {display:block;width:100%}
.gap-table tr {border-bottom:1px solid var(--line)}
.gap-table td {border:0;padding:6px 18px}
.gap-table td:first-child {padding-top:16px}
.gap-table td:last-child {padding-bottom:16px}
.gap-table td:nth-child(2)::before {content:"Control: ";font-weight:800;color: var(--muted)}
.apps-grid,
.steps4 {grid-template-columns:1fr}
.steps4 article {border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-bottom:20px}
.proof-split img {height:300px}
.proof-nums strong {font-size:28px}
.zone-figure img {height:300px}
.tg-screens img {height:220px}
}
.ai-legend.n6 {grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px) {
.ai-legend.n6 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px) {
.ai-legend.n6 {grid-template-columns:1fr;gap:12px}
}
.photo-trio {display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;margin-top:46px}
.photo-trio figure {margin:0;position:relative;border-radius:12px;overflow:hidden;min-height:300px;background: rgba(255, 255, 255, .06)}
.photo-trio img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-trio figcaption {position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;font-size:13px;font-weight:700;color: var(--color-white);background: linear-gradient(transparent,rgba(7, 26, 44, .8))}
.spec-note {font-size:12px;color:var(--muted);margin-top:16px}
@media(max-width:800px) {
.photo-trio {grid-template-columns:1fr 1fr}
.photo-trio figure:first-child {grid-column:1/-1}
}
@media(max-width:540px) {
.photo-trio {grid-template-columns:1fr}
.photo-trio figure {min-height:220px}
}
.spec-note {font-size:var(--cap)!important;line-height:1.55!important}
.photo-trio figcaption {font-size:var(--cap)!important;line-height:1.5!important}
.ai-legend.n5 {grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px) {
.ai-legend.n5 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px) {
.ai-legend.n5 {grid-template-columns:1fr;gap:12px}
}
.spec-note {color: var(--muted)!important}

/* Fichas: pesos de títulos como en el resto del sitio */
.prod-page h3,
.prod-page h4 {
  font-weight: 750;
  letter-spacing: -0.025em;
}

/* Anclas de Contacto: no quedan tapadas por el header fijo */
#privacidad,
#formulario {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* Hero de VigiaBOX y HydroTube: misma sangría y altura de inicio que el resto de las internas */
.prod-hero {
  padding-top: calc(54px + var(--header-height));
}
.prod-hero .container {
  padding-left: 5rem;
}

/* ThermoGuard: la banda de capacidades va centrada en horizontal y en vertical */
.prod-page--centered .capability-band span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.prod-page--centered .capability-band span:first-child {
  padding-left: 12px;
}

/* Tarjetas de aplicaciones y contextos (ThermoGuard y MUSUX) */
.context-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 46px;
}
.context-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  padding: 24px 20px 22px;
  color: var(--color-white);
}
.context-card h3 {
  font-size: 18px;
  line-height: 1.25;
  margin: 14px 0 9px;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.context-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #c5d6e0;
  margin: 0;
}
.context-card .wk-icon {
  color: var(--cyan);
  --icon-fill: var(--navy);
}
.apps-grid .context-card h3 {
  font-size: 19px;
}
@media (max-width: 1100px) {
  .context-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .context-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .context-grid {
    grid-template-columns: 1fr;
  }
}

/* Preloader */
.preloader {
  --logo-w: clamp(190px, 26.4vmin, 317px);
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-navy);
  color: var(--color-white);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preloader__logo {
  position: relative;
  width: var(--logo-w);
  height: auto;
  overflow: visible;
  transform: translateX(calc(var(--logo-w) * 0.311));
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.preloader__mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: preloaderBlink 2s ease-in-out infinite;
}

.preloader__word {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.5s ease 0.15s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.preloader.is-ready .preloader__logo {
  transform: none;
}

.preloader.is-ready .preloader__mark {
  animation: none;
}

.preloader.is-ready .preloader__word {
  opacity: 1;
  transform: none;
}

.preloader__waves {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: opacity 0.3s ease;
}

.preloader.is-ready .preloader__waves {
  opacity: 0;
}

.preloader__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 12vmin;
  height: 12vmin;
  margin: -6vmin 0 0 -6vmin;
  border: 1px solid var(--color-red);
  border-radius: 50%;
  opacity: 0;
  animation: preloaderWave 6s ease-out infinite;
}

.preloader__wave:nth-of-type(2) { animation-delay: 2s; }
.preloader__wave:nth-of-type(3) { animation-delay: 4s; }

.preloader__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--color-red);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

.preloader__count {
  position: absolute;
  left: clamp(24px, 4vw, 48px);
  bottom: clamp(24px, 4vw, 48px);
  font-size: 32px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.preloader__count i {
  margin-left: 2px;
  font-size: 0.5em;
  font-style: normal;
  color: var(--color-red);
}

.preloader-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10000;
  width: 0;
  height: 0;
  border: 1px solid var(--color-red);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

html:has(.preloader:not(.is-done)) {
  overflow: hidden;
  background: var(--color-navy);
}

@keyframes preloaderBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.95); }
}

@keyframes preloaderWave {
  0% { opacity: 0; width: 12vmin; height: 12vmin; margin: -6vmin 0 0 -6vmin; }
  10% { opacity: 0.55; }
  60% { opacity: 0.2; }
  100% { opacity: 0; width: 100vmin; height: 100vmin; margin: -50vmin 0 0 -50vmin; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__mark,
  .preloader__wave {
    animation: none;
  }

  .preloader__logo,
  .preloader__word {
    transition: none;
  }
}

/* Responsive: el hero alinea su texto con el logo del header */
@media (max-width: 900px) {
  .hero-main,
  .prod-hero .container {
    padding-left: 1.5rem;
  }
}

/* Responsive: cifras de Proyectos y ThermoGuard sin desbordes */
.proof-split > * {
  min-width: 0;
}

@media (max-width: 540px) {
  .evidence-metrics > div {
    grid-template-columns: 118px 1fr;
  }

  .evidence-metrics strong {
    font-size: 26px;
    white-space: nowrap;
  }

  .proof-nums div {
    padding: 18px 16px;
  }

  .proof-nums strong {
    font-size: 24px;
    white-space: normal;
  }
}

/* Responsive: tarjetas de Productos a una columna en móvil */
@media (max-width: 540px) {
  .hp-grid.hp-grid--4:has(.product-card),
  .hp-grid.hp-grid--4:has(.dark-card) {
    grid-template-columns: 1fr;
  }
}

/* Responsive: en el cierre sólido el botón se alinea con el texto */
@media (max-width: 900px) {
  .contact-cta.contact-cta--solid .container {
    align-items: flex-start;
  }

  .contact-cta.contact-cta--solid .btn {
    align-self: flex-start;
  }
}