:root {
  --sky:    #48AFE3;
  --blue:   #2888C9;
  --bright: #09A4DD;
  --navy:   #2C394D;
  --deep:   #062C43;
  --g1: linear-gradient(135deg, #48AFE3 0%, #2888C9 50%, #062C43 100%);
  --g2: linear-gradient(135deg, #48AFE3, #09A4DD);
  --g3: linear-gradient(135deg, #2888C9, #062C43);
  --g4: linear-gradient(90deg, #48AFE3, #09A4DD, #2888C9);
  --text:     #2C394D;
  --mid:      rgba(44,57,77,.6);
  --light:    rgba(44,57,77,.38);
  --line:     rgba(72,175,227,.18);
  --line-drk: rgba(255,255,255,.12);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Space Grotesk', sans-serif; background: #fff; color: var(--text); overflow-x: hidden; }

/* ─ NAV ─ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 4rem;
  background: rgba(6,44,67,.95);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(72,175,227,.15);
}
.logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-img {
  width: 32px; height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; color: #fff;
}
.nav-links { display: flex; gap: 2.4rem; list-style: none; }
.nav-links a {
  font-family: 'Space Mono', monospace;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.88); text-decoration: none; transition: color .2s;
}
.nav-links a:hover { color: var(--sky); }
.nav-cta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .65rem 1.6rem; background: var(--g2); color: #fff;
  border: none; cursor: pointer; text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center;
  transition: all .2s; box-shadow: none;
}
.nav-cta:hover { box-shadow: none; transform: translateY(-1px); background: #fff; color: var(--deep); }

/* Hamburger — oculto en desktop */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .3rem;
  min-width: 44px; min-height: 44px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.88);
  transition: transform .25s ease, opacity .25s ease;
}
nav:has(#nav-toggle:checked) .nav-hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
nav:has(#nav-toggle:checked) .nav-hamburger span:nth-child(2) { opacity: 0; }
nav:has(#nav-toggle:checked) .nav-hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ─ HERO ─ */
#hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  background: linear-gradient(160deg, #0D4F72 0%, #083857 30%, var(--deep) 65%);
  display: grid; grid-template-columns: 58fr 42fr;
  padding-top: 74px;
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 4rem; position: relative; z-index: 1;
}
.h-kicker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: .8rem;
  animation: up .5s ease .1s both;
}
.h-kicker::before { content: ''; width: 28px; height: 2px; background: var(--g2); }
.hero-h1 {
  font-size: clamp(2.4rem, 3.8vw, 4.4rem);
  font-weight: 700; line-height: 1.08; color: #fff;
  margin-bottom: 1.6rem;
  animation: up .6s ease .2s both;
}
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #ffffff 0%, #48AFE3 55%, #2888C9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: 1.1rem; font-weight: 400; line-height: 1.75;
  color: rgba(255,255,255,.75); max-width: 500px; margin-bottom: 1rem;
  animation: up .6s ease .35s both;
}
.hero-sub2 {
  font-size: 1rem; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,.75); max-width: 500px; margin-bottom: 3rem;
  animation: up .6s ease .42s both;
}
.hero-sectors {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2rem; animation: up .6s ease .48s both;
}
.hero-sector {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.2);
  padding: .3rem .75rem;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hero-btns { display: flex; gap: 1rem; animation: up .6s ease .5s both; }
.btn-main {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .9rem 2.2rem; background: var(--sky); color: #fff;
  border: none; cursor: pointer; text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center;
  box-shadow: none; transition: all .2s;
}
.btn-main:hover { box-shadow: none; transform: translateY(-2px); background: var(--deep); color: #fff; }

/* Variante blanca — máximo contraste sobre fondos oscuros */
.btn-white {
  background: #fff;
  color: var(--deep);
  box-shadow: none;
}
.btn-white:hover { background: var(--deep); color: #fff; box-shadow: none; }
.btn-main.btn-white-g2:hover { background: var(--deep); color: #fff; box-shadow: none; }
.btn-main.btn-hover-white:hover { background: #fff; color: var(--deep); box-shadow: none; }
.btn-out {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .9rem 2.2rem;
  background: rgba(72,175,227,.1);
  color: #fff;
  border: 1px solid rgba(72,175,227,.45);
  cursor: pointer; text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
  transition: all .2s;
}
.btn-out:hover { background: #fff; color: var(--deep); border-color: #fff; box-shadow: none; }

/* Hero derecho — pasos */
.hero-right {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 3rem; position: relative; z-index: 1;
}
.hero-visual {
  position: relative; display: flex; flex-direction: column; gap: 1.2rem;
}
.h-step {
  padding: 1.6rem 2rem;
  display: flex; align-items: flex-start; gap: 1.4rem;
  backdrop-filter: blur(8px);
  transition: all .3s;
  background: rgba(72,175,227,.06);
}
/* Colores distintos por paso */
.h-kicker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin: 0 0 1rem;
}
.h-step:nth-child(2) { border: 1px solid #48AFE3; border-left: 3px solid #48AFE3; }
.h-step:nth-child(4) { border: 1px solid #09A4DD; border-left: 3px solid #09A4DD; }
.h-step:nth-child(6) { border: 1px solid #2888C9; border-left: 3px solid #2888C9; }
.h-step:nth-child(2) .h-step-n { color: #48AFE3; -webkit-text-fill-color: #48AFE3; background: none; }
.h-step:nth-child(4) .h-step-n { color: #09A4DD; -webkit-text-fill-color: #09A4DD; background: none; }
.h-step:nth-child(6) .h-step-n { color: #2888C9; -webkit-text-fill-color: #2888C9; background: none; }
.h-step:hover { background: rgba(72,175,227,.12); }
.h-step-n {
  font-family: 'Space Mono', monospace;
  font-size: 2rem; font-weight: 700; line-height: 1;
  flex-shrink: 0; padding-top: .1rem;
}
.h-step-txt .h-step-label {
  font-size: .85rem; font-weight: 700; color: #fff; margin-bottom: .3rem;
}
.h-step-txt p { font-size: .76rem; font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.55; }
.h-connector {
  width: 1px; height: 1rem; background: rgba(255,255,255,.15);
  margin-left: 2.8rem;
}

/* ─ CINTA ─ */
.cinta {
  background: var(--g2);
  padding: .9rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.cinta-track {
  display: inline-flex; align-items: center;
  animation: marquee 22s linear infinite;
}
.cinta:hover .cinta-track { animation-play-state: paused; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cinta-item {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 0 2.4rem;
  flex-shrink: 0;
}
.cinta-item svg { width: 16px; height: 16px; opacity: .85; flex-shrink: 0; }
.cinta-item span {
  font-family: 'Space Mono', monospace;
  font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.cinta-div { width: 1px; height: 1.2rem; background: rgba(255,255,255,.25); flex-shrink: 0; }

/* ─ CLIENTES STRIP ─ */
.clientes-strip {
  background: #fff;
  padding: 1.2rem 0 1.4rem;
  border-top: 1px solid rgba(44,57,77,.07);
  border-bottom: 1px solid rgba(44,57,77,.07);
  overflow: hidden;
}
.clientes-eyebrow {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mid); opacity: .7;
  margin: 0 0 .8rem;
}
.clientes-track-wrap { overflow: hidden; white-space: nowrap; }
.clientes-track {
  display: inline-flex; align-items: center;
  animation: marquee-cl 34s linear infinite;
}
.clientes-strip:hover .clientes-track { animation-play-state: paused; }
@keyframes marquee-cl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cliente-logo {
  width: 100px; height: 44px;
  object-fit: contain; object-position: center;
  flex-shrink: 0;
  margin: 0 1.8rem;
  filter: grayscale(100%) opacity(.5);
  transition: filter .25s;
}
.clientes-strip:hover .cliente-logo { filter: grayscale(0%) opacity(1); }
/* Copeval(1), UChile(6) — más grandes */
.clientes-track .cliente-logo:nth-child(1),
.clientes-track .cliente-logo:nth-child(15) { width: 150px; height: 64px; } /* Copeval */
.clientes-track .cliente-logo:nth-child(6),
.clientes-track .cliente-logo:nth-child(20) { width: 120px; height: 54px; } /* U. Chile */
/* ANDE(9), FIIAPP(10), Sparkassen(11), BID(12), CORFO(13), Codesser(14) — más grandes */
.clientes-track .cliente-logo:nth-child(9),
.clientes-track .cliente-logo:nth-child(23) { width: 150px; height: 66px; } /* ANDE */
.clientes-track .cliente-logo:nth-child(10),
.clientes-track .cliente-logo:nth-child(24) { width: 140px; height: 52px; } /* FIIAPP */
.clientes-track .cliente-logo:nth-child(11),
.clientes-track .cliente-logo:nth-child(25) { width: 70px; height: 40px; } /* Sparkassen */
.clientes-track .cliente-logo:nth-child(12),
.clientes-track .cliente-logo:nth-child(26) { width: 150px; height: 64px; } /* BID */
.clientes-track .cliente-logo:nth-child(13),
.clientes-track .cliente-logo:nth-child(27) { width: 100px; height: 44px; } /* CORFO */
.clientes-track .cliente-logo:nth-child(14),
.clientes-track .cliente-logo:nth-child(28) { width: 100px; height: 44px; } /* Codesser */

/* ─ SHARED SECTION STYLES ─ */
.section-head { margin-bottom: 1.6rem; }
.s-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .7rem;
  display: flex; align-items: center; gap: .8rem;
}
.s-tag::before { content: ''; width: 20px; height: 2px; background: var(--g2); }
.s-tag--light { color: var(--sky); }
.s-tag--light::before { background: var(--g2); }
.s-title {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 600; line-height: 1.15; color: var(--navy);
}
.s-title strong { font-weight: 700; }
.s-title em {
  font-style: normal;
  background: var(--g2); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.s-title--light { color: #fff; }

/* ─ SITUACIONES ─ */
#situaciones { background: #ffffff; padding: 5rem 4rem; }
.sit-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 1.2rem;
}
.sit-card {
  position: relative; overflow: hidden;
  padding: 1.8rem 2rem 1.6rem;
  background: var(--deep); color: #fff;
  transition: filter .3s ease;
}
.sit-card:nth-child(2) { background: #0a3554; }
.sit-card:nth-child(3) { background: #0d3d5c; }
/* Hover: shimmer acelera + brillo leve */
.sit-card:hover { filter: brightness(1.10); }
.sit-card:hover::before { animation-duration: 1.2s; }

/* ═══ HERO — SUPERFICIE (orbes grandes, lentos, casi imperceptibles) ═══ */
.hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,
    rgba(255,255,255,.22) 0%,
    rgba(72,175,227,.07) 45%,
    transparent 70%);
  border: 1px solid rgba(72,175,227,.12);
}
.hero-orb:nth-child(1) { width: 88px; height: 88px; left: 10%; bottom: 10%; animation: hrise-r 23s linear infinite; animation-delay:  0s;   }
.hero-orb:nth-child(2) { width: 58px; height: 58px; left: 55%; bottom:  4%; animation: hrise-l 29s linear infinite; animation-delay: -11s;  }
.hero-orb:nth-child(3) { width: 72px; height: 72px; left: 79%; bottom: 20%; animation: hrise-r 20s linear infinite; animation-delay:  -6s;  }

@keyframes hrise-r {
  0%   { transform: translate(0,    0);        opacity: 0;  }
  8%   { opacity: .55; }
  90%  { opacity: .4;  }
  100% { transform: translate( 8px, -105vh);   opacity: 0;  }
}
@keyframes hrise-l {
  0%   { transform: translate(0,    0);        opacity: 0;  }
  8%   { opacity: .55; }
  90%  { opacity: .4;  }
  100% { transform: translate(-8px, -105vh);   opacity: 0;  }
}

/* ═══ EFECTO ACUARIO ═══ */

/* Burbujas glaseadas */
.card-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.card-orbs span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,
    rgba(255,255,255,.75) 0%,
    rgba(72,175,227,.20) 45%,
    transparent 72%);
  border: 1px solid rgba(72,175,227,.35);
  box-shadow: inset -1px -1px 3px rgba(72,175,227,.18);
}
.card-orbs span:nth-child(1) { width: 20px; height: 20px; left:  8%; bottom: -22px; animation: bsway-r-burst 33s linear infinite; animation-delay:  3s;   }
.card-orbs span:nth-child(2) { width: 12px; height: 12px; left: 47%; bottom: -22px; animation: bsway-l-burst 33s linear infinite; animation-delay:  5s;   }
.card-orbs span:nth-child(3) { width: 24px; height: 24px; left: 72%; bottom: -22px; animation: bsway-r-burst 33s linear infinite; animation-delay:  4s;   }
.card-orbs span:nth-child(4) { width: 15px; height: 15px; left: 28%; bottom: -22px; animation: bsway-l-burst 33s linear infinite; animation-delay:  6.5s; }

/* Caja 2 — primer lanzamiento a los 14s (3+11), luego cada 48s */
.sit-card:nth-child(2) .card-orbs span:nth-child(1) { animation-delay: 14s;   }
.sit-card:nth-child(2) .card-orbs span:nth-child(2) { animation-delay: 16s;   }
.sit-card:nth-child(2) .card-orbs span:nth-child(3) { animation-delay: 15s;   }
.sit-card:nth-child(2) .card-orbs span:nth-child(4) { animation-delay: 17.5s; }

/* Caja 3 — primer lanzamiento a los 25s (3+22), luego cada 48s */
.sit-card:nth-child(3) .card-orbs span:nth-child(1) { animation-delay: 25s;   }
.sit-card:nth-child(3) .card-orbs span:nth-child(2) { animation-delay: 27s;   }
.sit-card:nth-child(3) .card-orbs span:nth-child(3) { animation-delay: 26s;   }
.sit-card:nth-child(3) .card-orbs span:nth-child(4) { animation-delay: 28.5s; }

/* Burst: movimiento en primer 28% del ciclo de 33s, resto invisible */
@keyframes bsway-r-burst {
  0%    { transform: translate(0,0) scale(1);          opacity: 0; }
  2.8%  { opacity: .9; }
  8.4%  { transform: translate( 12px,  -70px) scale(.95); }
  16.8% { transform: translate( -7px, -140px) scale(.85); }
  24.6% { opacity: .35; }
  28%   { transform: translate(  9px, -240px) scale(.4);  opacity: 0; }
  28.5% { transform: translate(0,0) scale(1);          opacity: 0; }
  100%  { transform: translate(0,0) scale(1);          opacity: 0; }
}
@keyframes bsway-l-burst {
  0%    { transform: translate(0,0) scale(1);          opacity: 0; }
  2.8%  { opacity: .9; }
  8.4%  { transform: translate(-12px,  -70px) scale(.95); }
  16.8% { transform: translate(  7px, -140px) scale(.85); }
  24.6% { opacity: .35; }
  28%   { transform: translate( -9px, -240px) scale(.4);  opacity: 0; }
  28.5% { transform: translate(0,0) scale(1);          opacity: 0; }
  100%  { transform: translate(0,0) scale(1);          opacity: 0; }
}

/* Luz de superficie (borde superior de cada card) */
.sit-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(72,175,227,.55) 30%,
    rgba(180,230,255,.7) 50%,
    rgba(72,175,227,.55) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: surf-shimmer 4s linear infinite;
  z-index: 2;
}
@keyframes surf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* Luz ambiental que deriva lentamente por el fondo */
.sit-card::after {
  content: '';
  position: absolute;
  width: 55%; aspect-ratio: 1;
  top: -20%; left: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72,175,227,.07) 0%, transparent 70%);
  animation: light-drift 10s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
@keyframes light-drift {
  0%   { transform: translate(0,   0); }
  50%  { transform: translate(160%, 40%); }
  100% { transform: translate(80%, 130%); }
}
.sit-bg-n {
  position: absolute; top: -1rem; right: 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 8rem; font-weight: 700; line-height: 1;
  color: rgba(72,175,227,.07); pointer-events: none; user-select: none;
}
.sit-icon {
  width: 38px; height: 38px; margin-bottom: 1rem;
  background: var(--g2); display: flex; align-items: center; justify-content: center;
}
.sit-icon svg { width: 20px; height: 20px; color: #fff; }
.sit-card h3 {
  font-size: 1rem; font-weight: 600; color: #fff;
  margin-bottom: .5rem; line-height: 1.25;
}
.sit-card p {
  font-size: .86rem; font-weight: 300; color: rgba(255,255,255,.75);
  line-height: 1.75;
}

/* ─ SERVICIOS EMPRESAS ─ */
#empresas { background: #F6FBFE; padding: 5rem 4rem; position: relative; }
#empresas .s-tag { color: var(--blue); }
#empresas .s-tag::before { background: var(--blue); }
#empresas .s-title { color: var(--navy); }
.srv-header {
  padding: 0 0 0 2rem;
  margin-bottom: 1.2rem;
  border-left: 4px solid var(--blue);
}
.srv-header p {
  font-size: .95rem; font-weight: 300; color: var(--mid); line-height: 1.6;
}
.srv-cta {
  display: flex; justify-content: center;
  margin-top: 2.8rem; padding-bottom: .4rem;
}
.srv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 0;
}
.srv-card {
  background: #fff; border: none;
  padding: 1.6rem 1.6rem 1.4rem;
  position: relative; overflow: hidden;
}
.srv-card-n {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--sky); margin-bottom: .5rem;
  display: inline-block;
  transition: transform .4s ease, letter-spacing .4s ease;
  transform-origin: left center;
}
.srv-card h3 {
  font-size: .88rem; font-weight: 400; color: var(--navy);
  margin-bottom: .8rem; line-height: 1.3;
}
.srv-card p {
  font-size: .82rem; font-weight: 300; color: var(--mid); line-height: 1.7;
}



/* ── Secuencia de color 01→03 (oscuro sobre fondo claro) ── */
/* 01 — Azul medio */
.srv-card:nth-child(1) { background: #1a6fa8; }
.srv-card:nth-child(1) .srv-card-n { color: var(--sky); }
.srv-card:nth-child(1) h3 { color: rgba(255,255,255,.7); }
.srv-card:nth-child(1) p { color: rgba(255,255,255,.72); }


/* 02 — Azul oscuro */
.srv-card:nth-child(2) { background: #0d4d7a; }
.srv-card:nth-child(2) .srv-card-n { color: var(--sky); }
.srv-card:nth-child(2) h3 { color: rgba(255,255,255,.7); }
.srv-card:nth-child(2) p { color: rgba(255,255,255,.65); }


/* 03 — Deep */
.srv-card:nth-child(3) { background: #062C43; }
.srv-card:nth-child(3) .srv-card-n { color: var(--sky); }
.srv-card:nth-child(3) h3 { color: rgba(255,255,255,.7); }
.srv-card:nth-child(3) p { color: rgba(255,255,255,.6); }


/* ─ SERVICIOS INSTITUCIONES ─ */
#instituciones { background: var(--deep); padding: 5rem 4rem; }
#instituciones .s-tag { color: var(--sky); }
#instituciones .s-title { color: #fff; }
.inst-header {
  padding: 0 0 0 2rem;
  margin-bottom: 1.2rem;
  border-left: 4px solid var(--sky);
}
.inst-header p {
  font-size: .95rem; font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.6;
}
.inst-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.inst-card {
  background: #fff;
  border: none;
  padding: 1.6rem 1.6rem 1.4rem;
  transition: all .25s; position: relative; overflow: hidden;
}
.inst-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--g2); transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}



.inst-card:hover::before { transform: scaleX(1); }
/* Sobre la caja 05 (sky) la línea superior debe ser blanca para que se note.
   La 06 lleva su propia línea (ver más abajo): blanca no contrastaba lo suficiente. */
.inst-card:nth-child(2)::before { background: #fff; }

.inst-card:hover { filter: brightness(1.06); }
.inst-card-n {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--sky); margin-bottom: .5rem;
  display: inline-block;
  transition: transform .4s ease, letter-spacing .4s ease;
  transform-origin: left center;
}
.inst-card h3 {
  font-size: .88rem; font-weight: 400; color: var(--navy);
  margin-bottom: .8rem; line-height: 1.3;
}
.inst-card p {
  font-size: .82rem; font-weight: 300; color: var(--mid); line-height: 1.7;
}

/* Números fantasma */


/* ── Secuencia de color 04→06 (claro sobre fondo oscuro) ── */
/* 04 — Blanco */
.inst-card:nth-child(1) { background: #fff; }
.inst-card:nth-child(1) .inst-card-n { color: var(--sky); }
.inst-card:nth-child(1) h3 { color: var(--navy); }
.inst-card:nth-child(1) p { color: var(--mid); }


/* 05 — Sky */
.inst-card:nth-child(2) { background: #48AFE3; }
.inst-card:nth-child(2) .inst-card-n { color: rgba(255,255,255,.7); }
.inst-card:nth-child(2) h3 { color: #fff; }
.inst-card:nth-child(2) p { color: rgba(255,255,255,.78); }


/* 06 — Blue (v7: fondo un tono más claro y línea de resaltado navy propia) */
.inst-card:nth-child(3) { background: linear-gradient(160deg, #3299E0, #1E80BE); }
.inst-card:nth-child(3)::before { background: linear-gradient(160deg, #0d4d7a, #083857); }
.inst-card:nth-child(3) .inst-card-n { color: rgba(255,255,255,.65); }
.inst-card:nth-child(3) h3 { color: #fff; }
.inst-card:nth-child(3) p { color: rgba(255,255,255,.72); }


/* ─ PLATAFORMA ─ */
#plataforma { background: #F6FBFE; padding: 5rem 4rem; }
#plataforma .s-tag { color: var(--blue); }
#plataforma .s-title { color: var(--navy); }
.plat-intro {
  padding: 0 0 0 2rem;
  margin-bottom: 1.2rem;
  border-left: 4px solid var(--blue);
}
.plat-intro p {
  font-size: .95rem; font-weight: 300; color: var(--mid); line-height: 1.6;
}
.plat-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  background: rgba(72,175,227,.12);
}
.plat-area {
  padding: 1.6rem 1.4rem;
  transition: filter .25s;
  display: flex; flex-direction: column;
}
.plat-area:nth-child(1) { background: linear-gradient(160deg, #48AFE3, #2888C9); }
.plat-area:nth-child(2) { background: linear-gradient(160deg, #2888C9, #1a6fa8); }
.plat-area:nth-child(3) { background: linear-gradient(160deg, #1a6fa8, #0d4d7a); }
.plat-area:nth-child(4) { background: linear-gradient(160deg, #0d4d7a, #083857); }
.plat-area:nth-child(5) { background: linear-gradient(160deg, #083857, #062C43); }
.plat-area:hover { filter: brightness(1.12); }
.plat-icon {
  width: 34px; height: 34px; margin-bottom: .8rem;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.25);
}
.plat-icon svg { width: 20px; height: 20px; color: #fff; }
.plat-area h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.9);
  margin-bottom: .8rem; letter-spacing: .02em; text-transform: uppercase;
}
.plat-area p {
  font-size: .78rem; font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.65;
}
.plat-partner {
  display: inline-flex; align-items: center; gap: .4rem;
  align-self: flex-start; /* no estirar en el flex de columna: el borde inferior sigue al texto, no a la caja */
  margin-top: auto; padding-top: .9rem;
  font-family: 'Space Mono', monospace;
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.plat-partner:hover { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.6); }
.plat-internal {
  display: block; margin-top: auto;
  font-family: 'Space Mono', monospace;
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.25);
}

/* ─ EQUIPO ─ */
#equipo { background: #fff; padding: 5rem 4rem; }
#equipo .s-tag { color: var(--blue); }
#equipo .btn-main { background: var(--sky); color: #fff; }
#equipo .btn-main:hover { background: var(--deep); color: #fff; }
#equipo .s-title { color: var(--navy); }
.eq-territory {
  padding: 0 0 0 2rem;
  margin-bottom: 1.4rem;
  border-left: 4px solid var(--blue);
}
.eq-territory p {
  font-size: .95rem; font-weight: 300; color: var(--mid); line-height: 1.6;
}
.eq-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.eq-card {
  background: linear-gradient(135deg, #2888C9 0%, #062C43 100%);
  border: none; overflow: hidden;
  position: relative;
  border-radius: 0;
  transition: box-shadow .3s ease;
}
.eq-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, #1a6fa8, #2888C9);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
  z-index: 2;
}
.eq-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, #2888C9, #1a6fa8);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s ease;
  z-index: 2;
}
.eq-card:hover::before,
.eq-card:hover::after { transform: scaleX(1); }
.eq-photo {
  aspect-ratio: 4/3;
  background: var(--g2);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.eq-photo-init {
  font-family: 'Space Mono', monospace;
  font-size: 2.4rem; font-weight: 700; color: #fff;
}
.eq-body { padding: 1.1rem 1.4rem 1.4rem; }
.eq-name { font-size: .98rem; font-weight: 700; color: #fff; margin-bottom: .2rem; }
.eq-role {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .54rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky); margin-bottom: .6rem;
}
.eq-bio { font-size: .78rem; font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.6; }
.eq-linkedin {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .75rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sky); text-decoration: none; opacity: .7;
  transition: opacity .2s;
}
.eq-linkedin:hover { opacity: 1; }
.eq-linkedin svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ─ CONTACTO ─ */
#contacto {
  position: relative; overflow: hidden; background: #fff; }
.contact-wrap { display: grid; grid-template-columns: 45fr 55fr; }
.contact-left {
  background: linear-gradient(90deg, #2888C9 0%, #062C43 100%);
  padding: 5rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.contact-left h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 1rem;
}
.contact-left h2 em {
  font-style: normal;
  background: var(--g2); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.contact-left p {
  font-size: .95rem; font-weight: 300; color: rgba(255,255,255,.75);
  line-height: 1.65; max-width: 380px; margin-bottom: 1.6rem;
}
.contact-info { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }
.contact-info a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: 0;
  color: #fff; text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.contact-info a:hover { color: var(--sky); }
.contact-right {
  padding: 5rem 4rem;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
}
.contact-right h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; }
.contact-right .form-lead {
  font-size: .88rem; font-weight: 300; color: var(--mid);
  line-height: 1.65; margin-bottom: 1rem;
}
.form-group { margin-bottom: .55rem; }
.form-group label {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .54rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--light); margin-bottom: .5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  touch-action: manipulation;
  width: 100%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .9rem; color: var(--text);
  border: 1px solid var(--line);
  padding: .75rem 1rem;
  background: #fff; outline: none;
  transition: border-color .2s;
}
.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232C394D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--sky); }
.form-group textarea { height: 72px; resize: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.btn-submit {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: none; outline: none; position: relative; z-index: 1;
  padding: 1rem 2.4rem; background: var(--g2); color: #fff;
  border: none; cursor: pointer; width: 100%; margin-top: .4rem;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: none; transition: all .2s;
}
.btn-submit:hover { box-shadow: none; transform: translateY(-2px); background: var(--deep); color: #fff; }
.form-reply-hint { margin-top: .6rem; font-size: .78rem; color: var(--mid); letter-spacing: .02em; text-align: center; }
.field-error { display: none; font-size: .72rem; color: #e05252; margin-top: .3rem; }
.form-group.has-error input,
.form-group.has-error textarea { border-color: #e05252; }
.form-group.has-error .field-error { display: block; }

/* ─ FOOTER ─ */
footer {
  background: var(--deep);
  padding: 1.6rem 4rem;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid rgba(72,175,227,.12);
}
.footer-brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
}
.footer-brand img { width: 30px; height: 30px; object-fit: contain; }
.footer-brand span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .95rem; font-weight: 700; letter-spacing: .14em; color: #fff;
}
.footer-social {
  display: flex; align-items: center; gap: 1.2rem;
}
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(72,175,227,.25);
  color: rgba(255,255,255,.75);
  transition: color .2s, border-color .2s;
  text-decoration: none;
}
.footer-social a:hover { color: var(--sky); border-color: var(--sky); }
.footer-social svg { width: 16px; height: 16px; }
.footer-copy {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .62rem; font-weight: 700;
  color: rgba(255,255,255,.45);
  text-align: right; letter-spacing: .05em;
}
footer p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .85rem; font-weight: 700;
  color: rgba(255,255,255,.65);
}
footer a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .85rem; font-weight: 700;
  color: rgba(255,255,255,.65); text-decoration: none;
}
footer a:hover { color: var(--sky); }

/* ─ ANIMATIONS ─ */
@keyframes up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rev { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.rev.visible { opacity: 1; transform: translateY(0); }

/* Contact-left: contenido sobre los orbes */
.contact-left h2,
.contact-left > p,
.contact-left .contact-info { position: relative; z-index: 1; }
.contact-right h3,
.contact-right .form-lead,
.contact-right form,
.contact-right #form-msg { position: relative; }

/* Paleta de colores — contacto */
.color-palette {
  display: flex; align-items: center; justify-content: flex-start; gap: .5rem;
  margin-top: 4.5rem; padding-left: 5.07rem;
}
.color-dot {
  width: 11px; height: 11px; border-radius: 50%;
  flex-shrink: 0;
  transition: transform .2s ease;
  box-shadow:
    inset -2px -2px 4px rgba(0,0,0,.35),
    inset 1px 1px 3px rgba(255,255,255,.45),
    0 2px 4px rgba(0,0,0,.3);
}
.color-dot:hover { transform: scale(1.25); }

/* Dots en botones */
.btn-dots { display: inline-flex; align-items: center; gap: 0; margin-top: .4rem; }
.btn-submit .btn-dots { margin-top: 0; }
/* El submit de CF7 se renderiza como <button> (ver form de CF7 #3197) con 3 .btn-dot
   hijos; los colores replican wb_btn_dots() sin estilos inline. */
.btn-submit .btn-dots .btn-dot:nth-child(1) { background: radial-gradient(circle at 35% 30%,#7fd0f0 0%,#48AFE3 45%,#2676a8 100%); }
.btn-submit .btn-dots .btn-dot:nth-child(2) { background: radial-gradient(circle at 35% 30%,#5aaee8 0%,#2888C9 45%,#1a5a8a 100%); }
.btn-submit .btn-dots .btn-dot:nth-child(3) { background: radial-gradient(circle at 35% 30%,#1a5070 0%,#062C43 55%,#020e16 100%); }
/* Estado de carga: botón bloqueado + dots animados como loader. */
.btn-submit:disabled { cursor: wait; }
.btn-submit.is-loading:hover { transform: none; background: var(--g2); }
.btn-submit.is-loading .btn-dots .btn-dot { animation: wb-dot-bounce .9s infinite both ease-in-out; }
.btn-submit.is-loading .btn-dots .btn-dot:nth-child(1) { animation-delay: -.32s; }
.btn-submit.is-loading .btn-dots .btn-dot:nth-child(2) { animation-delay: -.16s; }
@keyframes wb-dot-bounce {
  0%, 80%, 100% { transform: scale(.45); opacity: .45; }
  40%           { transform: scale(1);   opacity: 1; }
}
.btn-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  box-shadow:
    inset -1px -1px 3px rgba(0,0,0,.35),
    inset 1px 1px 2px rgba(255,255,255,.45),
    0 1px 3px rgba(0,0,0,.3);
}

/* Ghost logo figures */
.winnova-ghost {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ghost-contact {
  width: 420px;
  height: 420px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: .08;
  z-index: 2;
}




/* ── Cortes diagonales alternos ── */

/* situaciones → empresas: sin diagonal (colores análogos) */
#situaciones { position: relative; }


/* 3 — instituciones → equipo (↖ izquierda sube) */
#instituciones { position: relative; padding-bottom: 7rem; }

/* Diagonales: z-index base para evitar solapamiento */
#empresas::after, #instituciones::after, #plataforma::after, #equipo::after { z-index: 0; pointer-events: none; }

#empresas::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 80px; pointer-events: none;
  background: #F6FBFE;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
#instituciones::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 80px; pointer-events: none;
  background: #F6FBFE;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* 5 — equipo → plataforma (↗ derecha sube) */
#equipo { position: relative; padding-bottom: 7rem; }
#equipo::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 80px; pointer-events: none;
  background: #F6FBFE;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* 6 — plataforma → contacto (↖ izquierda sube) */
#plataforma { position: relative; padding-bottom: 7rem; }
#plataforma::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 80px; pointer-events: none;
  background: #fff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}


/* ═══ RESPONSIVE ═══ */

/* — TABLET (≤1024px) — */
@media (max-width: 1024px) {
  nav { padding: 1.3rem 2rem; }
  footer { padding: 1.4rem 2rem; }

  #hero { grid-template-columns: 1fr; min-height: 70vh; padding-bottom: 3rem; }
  .hero-right { display: flex; padding: 2rem 2.5rem 3.5rem; max-width: 520px; margin: 0 auto; }
  .hero-left { padding: 5rem 2.5rem 2rem; }

  .sit-grid, .srv-grid, .inst-grid { grid-template-columns: repeat(2, 1fr); }
  .eq-grid { grid-template-columns: repeat(2, 1fr); }
  .eq-card:last-child { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; }
  .plat-grid { grid-template-columns: repeat(3, 1fr); }
  .plat-area:last-child { grid-column: 1 / -1; }

  #situaciones, #empresas, #instituciones,
  #plataforma, #equipo { padding: 4rem 2.5rem; }
  #empresas { padding-bottom: 6rem; }
  #instituciones { padding-bottom: 6rem; }
  #equipo { padding-bottom: 6rem; }

  .contact-wrap { grid-template-columns: 1fr; }
  .contact-left, .contact-right { padding: 4rem 2.5rem; }
  .color-palette { padding-left: 0; justify-content: flex-start; }

  /* Card typography — 2 columnas: escala moderada */
  .sit-card, .srv-card, .inst-card { padding: 2rem 2rem 1.8rem; }
  .sit-card h3, .srv-card h3, .inst-card h3 { font-size: 1.1rem; }
  .sit-card p, .srv-card p, .inst-card p { font-size: .92rem; line-height: 1.7; }
  .srv-card-n, .inst-card-n { font-size: .84rem; }
  .plat-area h3 { font-size: .88rem; }
  .plat-area p { font-size: .84rem; }
  .eq-name { font-size: 1.05rem; }
  .eq-bio { font-size: .85rem; }
  .eq-territory p { font-size: .92rem; }
  .s-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }

  /* Scroll-reveal más permisivo en tablet */
  .rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* — MOBILE (≤768px) — */
@media (max-width: 768px) {
  .hero-right { display: none; }
  nav { padding: 1rem 1.2rem; gap: 1rem; }
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(6,44,67,.97);
    backdrop-filter: blur(24px);
    flex-direction: column; gap: 0;
    padding: .6rem 0;
    border-top: 1px solid rgba(72,175,227,.15);
    z-index: 199;
  }
  nav:has(#nav-toggle:checked) .nav-links { display: flex; }
  .nav-links li { list-style: none; }
  .nav-links li a {
    display: block; padding: .85rem 1.5rem;
    font-size: .72rem; letter-spacing: .12em;
    border-bottom: 1px solid rgba(72,175,227,.07);
  }
  .nav-cta { padding: .55rem 1rem; font-size: .6rem; }

  #hero { padding-top: 60px; }
  .hero-left { padding: 3.5rem 1.5rem 2.5rem; width: 100%; min-width: 0; }
  .hero-h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .hero-sub { font-size: .95rem; }
  .hero-sub2 { font-size: .88rem; }
  .hero-btns { flex-direction: column; gap: .7rem; }
  .btn-main, .btn-out { text-align: center; padding: .85rem 1.5rem; }

  .cinta { padding: .8rem 0; }

  #situaciones, #empresas, #instituciones,
  #plataforma, #equipo { padding: 3rem 1.2rem; }
  #empresas { padding-bottom: 5rem; }
  #instituciones { padding-bottom: 5rem; }
  #equipo { padding-bottom: 5rem; }

  .sit-grid, .srv-grid, .inst-grid, .eq-grid { grid-template-columns: 1fr; max-width: 100%; }
  .sit-card, .srv-card, .inst-card, .eq-card, .plat-area { max-width: 100%; box-sizing: border-box; }
  .plat-grid { grid-template-columns: 1fr; }
  .plat-area:last-child { grid-column: auto; }

  .srv-header, .inst-header { padding: .9rem 1rem; }
  .plat-intro { padding: 0 0 0 1.2rem; }

  .contact-wrap { grid-template-columns: 1fr; }
  .contact-left, .contact-right { padding: 3rem 1.2rem; }
  .color-palette { padding-left: 0; }
  .ghost-contact { width: 260px; height: 260px; }

  .form-row { grid-template-columns: 1fr; gap: .55rem; }

  footer { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.8rem 1.2rem; justify-items: center; }
  .footer-copy { text-align: center; }

  #instituciones::after,
  #empresas::after { height: 44px; }
  #equipo::after { height: 44px; }
  #situaciones { overflow: hidden; }
  #empresas::after, #instituciones::after, #plataforma::after, #equipo::after { z-index: 0; }

  .eq-territory { padding: .75rem 1rem; }

  /* Card typography — 1 columna ancho total: escala fuerte */
  .sit-card, .srv-card, .inst-card { padding: 2.2rem 1.8rem 2rem; }
  .sit-card h3, .srv-card h3, .inst-card h3 { font-size: 1.22rem; line-height: 1.25; }
  .sit-card p, .srv-card p, .inst-card p { font-size: 1rem; line-height: 1.75; }
  .srv-card-n, .inst-card-n { font-size: .88rem; margin-bottom: 1.1rem; }
  .plat-area { padding: 1.8rem 1.6rem; }
  .plat-area h3 { font-size: .94rem; }
  .plat-area p { font-size: .9rem; }
  .eq-body { padding: 1.4rem 1.6rem 1.8rem; }
  .eq-name { font-size: 1.18rem; }
  .eq-role { font-size: .62rem; }
  .eq-bio { font-size: .92rem; }
  .eq-territory p { font-size: .95rem; }
  .s-title { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
  .srv-header p, .inst-header p { font-size: 1rem; }

  /* Scroll-reveal desactivado en mobile — evita secciones invisibles */
  
}

@media (min-width: 1440px) {
  #hero { padding: 7rem 6rem; }
  #situaciones, #empresas, #instituciones, #equipo, #plataforma { padding: 6rem 8rem; }
  #contacto .contact-left, #contacto .contact-right { padding: 6rem 8rem; }
  .nav { padding: 1.3rem 6rem; }
  .cinta { padding: 2.4rem 8rem; }
  .sit-grid, .srv-grid, .inst-grid { gap: 0; }
  .eq-grid { gap: 0; }
  .plat-grid { gap: 0; }
}
@media (max-width: 375px) {
  .hero-h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .nav { padding: 1rem 1.2rem; }
  #situaciones, #empresas, #instituciones, #equipo, #plataforma { padding: 3rem 1.2rem; }
  #contacto .contact-left, #contacto .contact-right { padding: 3rem 1.4rem; }
  .cinta { padding: 2rem 1.2rem; }
  .btn-main { padding: .8rem 1.6rem; font-size: .7rem; }
}


/* ── Stats block ── */
.winnova-stats {
  display: flex; background: var(--g2);
}
.stat-item {
  flex: 1; text-align: center;
  padding: 1.1rem 1.5rem;
}

.stat-num {
  font-family: 'Space Mono', monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  color: #ffffff; display: block; margin-bottom: .3rem;
}
.stat-desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .58rem; font-weight: 400; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
  line-height: 1.5;
}

/* ── Situaciones diferenciador ── */
.sit-diferenciador {
  padding: 0 0 0 2rem;
  margin: 1.2rem 0 2rem;
  border-left: 4px solid var(--blue);
}
.sit-diferenciador p {
  font-size: .95rem; font-weight: 300; color: var(--mid); line-height: 1.6;
}

/* ── Contact mini-steps ── */
.contact-steps {
  display: flex; flex-direction: column; gap: .55rem;
  margin-top: 1.6rem; margin-bottom: 1.8rem;
  padding-left: 1.1rem;
  border-left: 2px solid rgba(72,175,227,.25);
}
.contact-step { display: flex; align-items: center; gap: .75rem; }
.cstep-n {
  font-family: 'Space Mono', monospace;
  font-size: .6rem; font-weight: 700;
  color: var(--sky); opacity: .7; min-width: 1.6rem;
}
.cstep-t {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .82rem; font-weight: 300; color: rgba(255,255,255,.75);
}


.form-hint {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem; color: var(--navy); opacity: .85;
  margin-top: .45rem; letter-spacing: .01em;
}
.form-hint {
  font-size: .75rem;
  color: var(--mid);
  margin: .2rem 0 .8rem;
  line-height: 1.5;
}
.form-privacy {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .6rem; color: var(--mid); opacity: .6;
  margin-top: 1.6rem; line-height: 1.5; text-align: center;
}

/* ── Título de card crece en hover (reemplaza números fantasma) ── */
.srv-card:hover .srv-card-n { transform: scale(1.07); letter-spacing: .02em; }
.inst-card:hover .inst-card-n { transform: scale(1.07); letter-spacing: .02em; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET INTERMEDIO (769px – 900px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-left, .contact-right { padding: 3.5rem 2rem; }
  .eq-grid { grid-template-columns: repeat(2, 1fr); }
  .plat-grid { grid-template-columns: repeat(2, 1fr); }
  .sit-grid, .srv-grid, .inst-grid { grid-template-columns: repeat(2, 1fr); }
  #hero { grid-template-columns: 1fr; }
  .hero-right { display: flex; padding: 2rem 2rem 3rem; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 768px) — ADICIONES Y CORRECCIONES
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Stats bar: apilar verticalmente */
  .winnova-stats { flex-direction: column; }
  .stat-item { padding: .9rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat-item:last-child { border-bottom: none; }
  .stat-num { font-size: 1.15rem; }
  .stat-desc { font-size: .6rem; }

  /* sit-diferenciador en móvil */
  .sit-diferenciador { padding: 0 0 0 1.2rem; margin: 1rem 0 1.5rem; }
  .sit-diferenciador p { font-size: .9rem; }

  /* Section head compacto */
  .section-head { margin-bottom: 1rem; }
  .s-title { line-height: 1.15; }

  /* CTA buttons full width */
  .srv-cta { margin-top: 2rem; }
  .srv-cta .btn-main { width: 100%; text-align: center; }

  /* eq-territory compacto */
  .eq-territory { margin-bottom: 1rem; }

  /* Plataforma intro */
  .plat-intro { padding: 0 0 0 1rem; margin-bottom: 1.5rem; }
  .plat-intro p { font-size: .9rem; }

  /* Contact steps visible y compactos */
  .contact-steps { margin-top: 1.2rem; margin-bottom: 1.2rem; }
  .cstep-n { font-size: 1rem; }
  .cstep-t { font-size: .85rem; }

  /* Contact info */
  .contact-info a { font-size: .9rem; }

  /* inst-header, srv-header */
  .inst-header { margin-bottom: .8rem; }
  .inst-header p, .srv-header p { font-size: .9rem; }

  /* Formulario */
  .form-label { font-size: .8rem; }
  .form-input, .form-select, .form-textarea { font-size: .9rem; }
  .form-textarea { min-height: 100px; }

  /* Footer ajuste */
  .footer-links { flex-direction: column; gap: .4rem; align-items: center; }

  /* Diagonal transitions reducidas */
  #instituciones { padding-bottom: 5rem; }
  #empresas::after { height: 44px; }
  #instituciones::after { height: 44px; }
  #equipo { padding-bottom: 5rem; }
  #equipo::after { height: 44px; }
  #plataforma { padding-bottom: 5rem; }
  #plataforma::after { height: 44px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL PEQUEÑO (≤ 480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .hero-sub { font-size: .88rem; }
  .s-title { font-size: clamp(1.5rem, 6vw, 2rem); }

  .stat-num { font-size: 1rem; }

  .sit-card, .srv-card, .inst-card { padding: 1.8rem 1.4rem 1.6rem; }
  .srv-card-n, .inst-card-n { font-size: .82rem; }

  .eq-body { padding: 1.2rem 1.4rem 1.6rem; }
  .eq-name { font-size: 1rem; }
  .eq-bio { font-size: .85rem; }

  .contact-left, .contact-right { padding: 2.5rem 1rem; }
  .contact-info a { font-size: .85rem; }

  #situaciones, #empresas, #instituciones,
  #plataforma, #equipo { padding: 2.5rem 1rem; }

  .section-head { margin-bottom: .8rem; }

  .btn-main, .btn-out { font-size: .72rem; padding: .8rem 1.4rem; }
}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ESTRECHO (769–900px) REFINEMENTS
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 900px) {
  /* Nav: reduce gaps para que quepan los links */
  nav { padding: 1.1rem 1.5rem; gap: .8rem; }
  .nav-links { gap: .3rem; }
  .nav-links li a { font-size: .6rem; letter-spacing: .08em; }
  .nav-cta { font-size: .58rem; padding: .5rem .9rem; }

  /* Hero left */
  .hero-left { padding: 4.5rem 2rem 2rem; }
  .hero-h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }

  /* Hero steps: más compactos */
  .h-step { padding: 1.1rem 1.3rem; gap: 1rem; }
  .h-step-n { font-size: 1.5rem; }
  .h-step-txt p { font-size: .83rem; line-height: 1.6; }
  .h-kicker { font-size: .54rem; margin-bottom: .7rem; }

  /* Section titles */
  .s-title { font-size: clamp(1.6rem, 3.8vw, 2.2rem); }
  .s-tag { font-size: .72rem; }

  /* Cards */
  .sit-card, .srv-card, .inst-card { padding: 1.8rem 1.5rem 1.6rem; }
  .sit-card h3, .srv-card h3, .inst-card h3 { font-size: 1rem; }
  .sit-card p, .srv-card p, .inst-card p { font-size: .88rem; }

  /* Equipo cards: 2 col */
  .eq-name { font-size: 1rem; }
  .eq-role { font-size: .78rem; }
  .eq-bio { font-size: .82rem; }

  /* Plataforma */
  .plat-area h3 { font-size: .84rem; }
  .plat-area p { font-size: .8rem; }

  /* Contact */
  .contact-left h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
  .contact-left p { font-size: .9rem; }
  .cstep-t { font-size: .8rem; }

  /* Footer */
  footer { padding: 1.4rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ESTÁNDAR (769–1024px) REFINEMENTS
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Cinta en tablet */
  .cinta-item { padding: 0 1.6rem; }

  /* Stats */
  .stat-item { padding: 1rem 1rem; }
  .stat-num { font-size: 1.15rem; }
  .stat-desc { font-size: .55rem; }

  /* Section head */
  .section-head { margin-bottom: 1.2rem; }

  /* Hero left texto */
  .hero-sub { font-size: .92rem; }
  .hero-sub2 { font-size: .85rem; }
  .hero-btns { flex-wrap: wrap; }

  /* sit-diferenciador */
  .sit-diferenciador { padding: 0 0 0 1.5rem; margin: 1rem 0 1.8rem; }
  .sit-diferenciador p { font-size: .9rem; }

  /* Ghost orbs contact */
  .ghost-contact { width: 280px; height: 280px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 768px) COMPLETIONS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Cinta */
  .cinta { padding: .65rem 0; }
  .cinta-item { padding: 0 1.4rem; font-size: .72rem; }
  .cinta-item svg { width: 10px; height: 10px; }

  /* Section head */
  .section-head { margin-bottom: 1rem; }
  .s-tag { font-size: .68rem; gap: .5rem; }
  .s-title { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.15; }

  /* Sit diferenciador */
  .sit-diferenciador { padding: 0 0 0 1.2rem; margin: .8rem 0 1.5rem; border-left-width: 3px; }

  /* srv-header / inst-header intro */
  .srv-header { padding: .8rem .2rem; }
  .inst-header { padding: .8rem .2rem; }
  .srv-header h2, .inst-header h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .srv-header p, .inst-header p { font-size: .88rem; }

  /* Card min-height removed on mobile */
  .sit-card, .srv-card, .inst-card { min-height: 0; }

  /* Ghost orbs contact: hide on very small */
  .ghost-contact { width: 200px; height: 200px; opacity: .6; }
  .hero-orbs { opacity: .5; }

  /* Contact-left h2 */
  .contact-left h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.1; }
  .contact-left > p { font-size: .9rem; max-width: 100%; }

  /* Plataforma */
  .plat-intro p { font-size: .88rem; }
  .plat-area { padding: 1.5rem 1.2rem; }

  /* eq-territory */
  .eq-territory { padding: 1.2rem 1.4rem; }
  .eq-territory p { font-size: .88rem; }

  /* Cinta - overflow safety */
  .cinta-track { display: inline-flex; }

  /* Scroll reveal en móvil: sin animación (mejor rendimiento) */
  

  /* Section BTN CTA en móvil */
  .srv-cta { margin-top: 2rem; }
  .srv-cta .btn-main { width: 100%; text-align: center; }

  /* Footer social centrado */
  .footer-social { justify-content: center; }
  .footer-brand { justify-content: center; }

  /* Form submit button */
  #submit-btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL PEQUEÑO (≤ 480px) COMPLETIONS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Nav extra compact */
  .nav-cta { display: inline-flex; font-size: .55rem; padding: .45rem .8rem; }
  
  /* Hero */
  .hero-left { padding: 3rem 1.2rem 2rem; }
  .hero-h1 { line-height: 1.1; }
  .hero-sub2 { font-size: .85rem; }
  .hero-btns { gap: .6rem; }
  .btn-main, .btn-out { padding: .8rem 1.3rem; font-size: .7rem; }

  /* Stats: tighter */
  .stat-item { padding: .8rem 1rem; }

  /* Sección cards: padding mínimo */
  .sit-card, .srv-card, .inst-card { padding: 1.6rem 1.2rem 1.4rem; }
  .srv-card-n, .inst-card-n { font-size: .78rem; }
  .sit-card h3, .srv-card h3, .inst-card h3 { font-size: .95rem; }
  .sit-card p, .srv-card p, .inst-card p { font-size: .85rem; }

  /* Eq card */
  .eq-name { font-size: .95rem; }
  .eq-body { padding: 1rem 1.2rem 1.4rem; }

  /* Section head */
  .s-title { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .s-tag { font-size: .64rem; }

  /* Contact form */
  .contact-left h2 { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .form-input, .form-select, .form-textarea { font-size: .88rem; }

  /* Footer */
  footer { padding: 1.4rem 1rem; gap: 1rem; }
  .footer-brand span { font-size: .8rem; }
  .footer-copy { font-size: .58rem; }

  /* Cinta items */
  .cinta-item { padding: 0 1rem; font-size: .68rem; }
}

/* ══════════════════════════════════════════════════════════
   TOUCH: quitar hover effects en dispositivos táctiles
   ══════════════════════════════════════════════════════════ */
@media (hover: none) {
  .sit-card:hover, .srv-card:hover, .inst-card:hover { transform: none; box-shadow: none; }
  .eq-card:hover { box-shadow: none; }
  .h-step:hover { background: rgba(72,175,227,.06); }
  .color-dot:hover { transform: none; }
}

/* ── Puente emocional antes de contacto ── */
.contacto-bridge {
  background: #F6FBFE;
  padding: 3rem 4rem 5rem;
  display: flex;
  justify-content: center;
}
.contacto-bridge::before { display: none; }
.contacto-bridge blockquote {
  max-width: 560px;
  padding-left: 1.6rem;
  border-left: 3px solid #48AFE3;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .9rem;
  font-weight: 300;
  color: rgba(44,57,77,.6);
  line-height: 1.75;
  font-style: normal;
}
.contacto-bridge blockquote em {
  font-style: normal;
  color: #2C394D;
  font-weight: 400;
  -webkit-text-fill-color: unset;
  background: none;
}
.contacto-bridge cite {
  display: inline;
  margin-left: .4rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(44,57,77,.45);
  font-style: normal;
}
@media (max-width: 768px) {
  .contacto-bridge { padding: 3rem 1.5rem; }
  .contacto-bridge blockquote { font-size: .95rem; }
}

/* ── RESPONSIVE IMPROVEMENTS ─────────────────────────────── */

/* iOS tap highlight removal */
button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Touch targets: minimum 44px height for interactive elements on mobile */
@media (max-width: 768px) {
  .nav-links li a { min-height: 44px; display: flex; align-items: center; }
  .btn-main, .btn-out { min-height: 44px; }
  .form-group input, .form-group select, .form-group textarea { min-height: 44px; }
  .hamburger-line { /* already in place */ }

  /* eq-grid: 1 col at 768 for readability */
  .eq-grid { grid-template-columns: 1fr; }

  /* Plataforma CTA full-width on mobile */
  .srv-cta .btn-main { display: block; width: 100%; }

  /* Contacto-bridge: tighten padding */
  .contacto-bridge { padding: 2.5rem 1.5rem 3.5rem; }

  /* Ghost: ocultar en móvil — no aporta como marca de agua en pantalla pequeña */
  .ghost-contact { display: none; }

  /* Footer nav stack */
  footer { text-align: center; }

  /* Form textarea shorter on mobile */
  .form-textarea { min-height: 90px; }

  /* Ensure no element overflows horizontally */
  .contact-wrap, .inst-grid, .eq-grid, .plat-grid { max-width: 100%; }
}

@media (max-width: 480px) {
  /* eq-grid: single column on small phones */
  .eq-grid { grid-template-columns: 1fr; }

  /* Contacto-bridge cite inline: smaller on very small screens */
  .contacto-bridge cite { font-size: .65rem; letter-spacing: .1em; }

  /* Plataforma grid 1 col */
  .plat-grid { grid-template-columns: 1fr; }
  .plat-area:last-child { grid-column: auto; }

  /* Stats: single column with dividers */
  .winnova-stats { gap: 0; }
}

/* Tablet portrait (768–1024): show hero-right, fix layout */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Hero 2 columnas en tablet */
  #hero { grid-template-columns: 58fr 42fr; min-height: 100vh; }
  .hero-right { display: flex; padding: 5rem 2rem 4rem; max-width: none; margin: 0; }
  .hero-left { padding: 5rem 2.5rem 4rem; }

  /* Plataforma 2-col on tablet */
  .plat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────
   Contact Form 7 — integración con el diseño Winnova.
   El formulario reproduce las clases .form-row / .form-group
   del diseño original; aquí se neutraliza el markup extra de CF7.
   ───────────────────────────────────────────────────────── */
.contact-right .wpcf7 { position: relative; z-index: 1; }
.contact-right .wpcf7-form-control-wrap { display: block; }
.contact-right .wpcf7 .form-group input,
.contact-right .wpcf7 .form-group textarea { width: 100%; }
/* Oculta el <fieldset> de campos ocultos de CF7 (su borde por defecto
   se veía como una rayita). */
.contact-right .wpcf7 .hidden-fields-container { display: none; }
/* CF7 oculta esto con su propio CSS (que aquí está aislado): región solo para
   lectores de pantalla; sin ocultarla, el texto de respuesta se duplica visible. */
.contact-right .screen-reader-response {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap;
}
/* CF7 envuelve cada campo en un <p> (margen 1em) e inserta un <br> tras el
   label: eso separaba de más las etiquetas. Se neutraliza para recuperar el
   espaciado del diseño (label pegado a su input, gap uniforme entre grupos). */
.contact-right .wpcf7 .form-group > p { margin: 0; padding: 0; }
.contact-right .wpcf7 .form-group br { display: none; }
.contact-right .wpcf7-not-valid-tip {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem; color: #e05252; margin-top: .3rem;
}
.contact-right .wpcf7-not-valid { border-color: #e05252 !important; }
.contact-right .wpcf7-spinner { margin: .6rem auto 0; display: block; }
.contact-right .wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: .85rem 1.1rem !important;
  border: 1px solid transparent !important;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .88rem; font-weight: 500; line-height: 1.5; text-align: center;
}
.contact-right form.sent .wpcf7-response-output {
  background: #d1fae5; border-color: #6ee7b7 !important; color: #065f46;
}
.contact-right form.invalid .wpcf7-response-output,
.contact-right form.unaccepted .wpcf7-response-output,
.contact-right form.payment-required .wpcf7-response-output,
.contact-right form.spam .wpcf7-response-output,
.contact-right form.failed .wpcf7-response-output,
.contact-right form.aborted .wpcf7-response-output {
  background: #fee2e2; border-color: #fca5a5 !important; color: #b91c1c;
}