/* ══════════════════════════════════════════════
   VARIABLES
══════════════════════════════════════════════ */
:root {
  --navy:        #070D1F;
  --navy-mid:    #0D1F4B;
  --blue:        #2979FF;
  --violet:      #6C3CE1;
  --violet-deep: #3A0CA3;
  --cyan:        #00E5FF;
  --light-bg:    #F0F2F5;
  --white:       #ffffff;
  --gray:        #b0bec5;
  --green-wpp:   #25D366;
  --font:        'Montserrat', sans-serif;
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --r-card:      20px;
  --pad:         6rem 2rem;
  --max-w:       1320px;
}

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body   { font-family: var(--font); color: var(--white); background: var(--navy); overflow-x: hidden; line-height: 1.65; }
img    { max-width: 100%; height: auto; display: block; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
strong { font-weight: 700; }

/* ══════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════ */
.t-upper  { text-transform: uppercase; letter-spacing: .1em; }
.t-bold   { font-weight: 900; }
.t-italic { font-style: italic; }

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1rem 0; transition: all .4s var(--ease);
}
.navbar--scrolled {
  background: rgba(7,13,31,.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07); padding: .6rem 0;
}
.navbar__container {
  max-width: var(--max-w); margin: 0 auto; padding: 0 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar__logo img { height: 32px; }
.navbar__menu { display: flex; align-items: center; gap: 2rem; }
.navbar__link {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  color: var(--gray); transition: color .3s; position: relative;
}
.navbar__link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  transition: width .3s var(--ease);
}
.navbar__link:hover        { color: var(--white); }
.navbar__link:hover::after { width: 100%; }
.navbar__cta {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  padding: .55rem 1.5rem; border-radius: 50px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: var(--white); transition: all .3s var(--ease);
  box-shadow: 0 4px 15px rgba(41,121,255,.35);
}
.navbar__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(41,121,255,.45); }
.navbar__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px; z-index: 1001;
}
.navbar__toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px; transition: all .3s var(--ease);
}
.navbar__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle.active span:nth-child(2) { opacity: 0; }
.navbar__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════
   DOTS NAVIGATION
══════════════════════════════════════════════ */
.dots-nav {
  position: fixed; top: 50%; right: 1.5rem; z-index: 900;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .55rem;
  transition: opacity .4s ease;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: 1.5px solid rgba(255,255,255,.5);
  transition: all .3s var(--ease);
  display: block;
}
.dot.active {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(0,229,255,.6);
  transform: scale(1.3);
}

/* ══════════════════════════════════════════════
   SECTION BASE
══════════════════════════════════════════════ */
.sec { position: relative; width: 100%; overflow: hidden; }
.sec__inner {
  max-width: var(--max-w); margin: 0 auto; padding: var(--pad);
}
.sec__inner--split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.sec__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08; margin-bottom: 1.25rem;
}
.sec__title--center { text-align: center; margin-bottom: 3rem; }
.sec__title--dark   { color: var(--navy); }
.sec__desc {
  font-size: .95rem; line-height: 1.8;
  color: rgba(255,255,255,.85);
  border-left: 3px solid var(--cyan); padding-left: 1.25rem;
}

/* ══════════════════════════════════════════════
   SCROLL ANIMATIONS
══════════════════════════════════════════════ */
[data-animate] { opacity: 0; transition: opacity .8s var(--ease), transform .9s var(--ease); }
[data-animate="fade-up"]    { transform: translateY(44px); }
[data-animate="fade-right"] { transform: translateX(-44px); }
[data-animate].is-visible   { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.sec--hero {
  min-height: 100vh;
  background: url('../assets/fondos/fondo-portada.jpg') center / cover no-repeat var(--navy);
  display: grid; grid-template-columns: 1.2fr 1fr;
  align-items: center; padding: 6rem 4% 3rem; gap: 1.5rem;
  position: relative;
}
.hero__phones {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.hero__mockup {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 40px 80px rgba(0,0,0,.55))
    drop-shadow(0 20px 48px rgba(108,60,225,.28));
  animation: hero-mockup-float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-mockup-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hero__content {
  display: flex; flex-direction: column; gap: 1.5rem; z-index: 1;
  max-width: 620px;
}
.hero__logo { height: 88px; width: auto; margin-bottom: .25rem; }
.hero__headline {
  font-size: clamp(1.5rem, 3.5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: .03em;
  font-weight: 900;
  color: var(--white);
}
.hero__headline-bold   { font-weight: 900; }
.hero__headline-italic {
  font-weight: 700; font-style: italic;
  color: var(--white);
}
.hero__sub {
  font-size: clamp(.92rem, 1vw, 1rem);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  border-left: 2px solid rgba(255,255,255,.55);
  padding-left: 1.1rem;
  max-width: 480px;
  margin-top: .5rem;
}

/* ══════════════════════════════════════════════
   QUÉ HACEMOS
══════════════════════════════════════════════ */
.sec--que-hacemos {
  background: url('../assets/fondos/fondo-que_hacemos.jpg') center / cover no-repeat;
}
.sec--que-hacemos::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(5,12,40,.76);
}
.sec--que-hacemos .sec__inner { position: relative; z-index: 1; }
.sec--que-hacemos .sec__inner--split { grid-template-columns: 1fr 2fr; gap: 2.5rem; }
.sec--que-hacemos .sec__title .t-italic { color: var(--cyan); }

/* ── Architecture SVG ── */
.arch { width: 100%; }
.arch-svg {
  width: 100%; height: auto;
  display: block;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.4));
}

/* ══════════════════════════════════════════════
   PROCESO
══════════════════════════════════════════════ */
.sec--proceso {
  background: url('../assets/fondos/fondo-valor.jpg') center / cover no-repeat;
}
.sec--proceso::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,13,31,.84) 0%, rgba(17,11,136,.65) 100%);
}
.sec--proceso .sec__inner { position: relative; z-index: 1; }

.proceso__intro { max-width: 720px; margin: 0 auto 3.5rem; text-align: center; }
.proceso__lead  { font-size: 1.05rem; line-height: 1.8; color: rgba(255,255,255,.92); }

/* Wrap con SVG overlay para S-curve */
.proceso__wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.proceso__connectors {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.proceso__connectors--mobile { display: none; }

/* Grid 3×2 */
.proceso__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 1rem 2rem;
}

.proceso__step {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center;
  padding: 1rem 1.25rem;
  position: relative;
}

/* Círculo con glow morado */
.paso__icon-wrap {
  width: 102px; height: 102px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 30% 30%, #1e2e6e 0%, #0a1334 70%, #050b22 100%);
  border: 1.5px solid rgba(124, 77, 255, 0.75);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 4px rgba(10, 20, 60, 0.55),
    0 0 0 5.5px rgba(124, 77, 255, 0.28),
    0 0 22px rgba(124, 77, 255, 0.35),
    inset 0 0 18px rgba(41, 121, 255, 0.15);
  position: relative; z-index: 2;
}
.paso__icon {
  width: 52px; height: 52px; object-fit: contain;
  filter: brightness(1.1);
}

/* Chevrones » entre pasos fila superior */
.proceso__step:nth-child(2)::before,
.proceso__step:nth-child(3)::before {
  content: '»';
  position: absolute;
  left: -0.25rem;
  top: calc(1rem + 51px);
  transform: translate(-50%, -50%);
  font-size: 2rem; font-weight: 700;
  color: rgba(124, 77, 255, 0.75);
  line-height: 1;
  letter-spacing: -0.15em;
  z-index: 3;
}
/* Chevrones « entre pasos fila inferior (flujo der→izq) */
.proceso__step:nth-child(5)::before,
.proceso__step:nth-child(6)::before {
  content: '«';
  position: absolute;
  left: -0.25rem;
  top: calc(1rem + 51px);
  transform: translate(-50%, -50%);
  font-size: 2rem; font-weight: 700;
  color: rgba(124, 77, 255, 0.75);
  line-height: 1;
  letter-spacing: -0.15em;
  z-index: 3;
}

/* Texto */
.paso__text {
  font-size: .9rem; line-height: 1.6;
  color: rgba(255,255,255,0.92);
  max-width: 230px;
}
.paso__text .t-italic {
  color: var(--white); font-weight: 700; font-style: italic;
}

/* ══════════════════════════════════════════════
   SERVICIOS
══════════════════════════════════════════════ */
.sec--servicios {
  background: url('../assets/fondos/fondo-servicios.jpg') center / cover no-repeat var(--navy);
}
/* Overlay principal: combina base navy profundo + ráfaga violeta radial desde el centro-derecha */
.sec--servicios::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 90% at 80% 50%, rgba(58,12,163,.55) 0%, rgba(13,31,75,.15) 60%, transparent 100%),
    linear-gradient(125deg, rgba(7,13,31,.88) 0%, rgba(17,11,136,.78) 45%, rgba(58,12,163,.80) 100%);
}
/* Glow sutil inferior-izquierdo */
.sec--servicios::after {
  content: ''; position: absolute; left: -10%; bottom: -20%;
  width: 60%; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(108,60,225,.35) 0%, transparent 60%);
  filter: blur(40px);
}
.sec--servicios .sec__inner { position: relative; z-index: 2; }

/* Onda decorativa de puntos (lateral izquierdo) */
.servicios__dots {
  position: absolute; left: 0; top: 0;
  width: 22%; height: 100%;
  z-index: 1; pointer-events: none;
  opacity: .85;
}

/* Título más presencial, matching referencia */
.sec__title--servicios {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  letter-spacing: .18em;
  margin-bottom: 4rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}

.services__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  max-width: 1180px; margin: 0 auto;
}
.service-card {
  position: relative; overflow: hidden;
  padding: 2.4rem 2.2rem;
  border-radius: 22px;
  border: 1px solid rgba(160,180,255,.22);
  background:
    linear-gradient(135deg, rgba(108,60,225,.32) 0%, rgba(41,121,255,.18) 45%, rgba(58,12,163,.34) 100%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 24px 60px -18px rgba(0,0,0,.45);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
/* Brillo diagonal superior tenue dentro de la card */
.service-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 25% 0%, rgba(255,255,255,.10) 0%, transparent 65%);
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,229,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 28px 70px -15px rgba(0,0,0,.55),
    0 0 40px -10px rgba(0,229,255,.3);
}
.service-card__title {
  position: relative;
  font-size: 1.15rem; font-weight: 700; color: var(--cyan);
  margin-bottom: 1rem; line-height: 1.3;
  letter-spacing: .01em;
}
.service-card__body {
  position: relative;
  font-size: .92rem; line-height: 1.75; color: rgba(255,255,255,.92);
  border-left: 2px solid var(--cyan);
  padding-left: 1.15rem;
}
.service-card__body strong { color: #fff; font-weight: 700; }

/* ══════════════════════════════════════════════
   SECTORES
══════════════════════════════════════════════ */
.sec--sectores {
  background: url('../assets/fondos/fondo-sectores.jpg') center / cover no-repeat var(--light-bg);
  color: var(--navy);
}
.sec__inner--sectores { max-width: var(--max-w); margin: 0 auto; padding: var(--pad); }
.sectores__header { text-align: center; margin-bottom: 3rem; }
.sectores__header .sec__title--dark em { color: var(--violet); }

/* Desktop: globe with arc icons */
.sectores__stage {
  display: flex; justify-content: center; align-items: center;
}
.sectores__globe-wrap {
  position: relative; width: 100%; max-width: 880px;
}
.sectores__globe-img {
  width: 100%; display: block;
  filter: drop-shadow(0 8px 32px rgba(108,60,225,.15));
}

/* Arc items (positioned by JS) */
.sector-arc { position: absolute; inset: 0; pointer-events: none; }
.sector-arc__item {
  position: absolute; pointer-events: all;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translate(-50%, -50%);
  cursor: default;
}
.sector-arc__icon-wrap {
  width: 66px; height: 66px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(108,60,225,.35);
  border: 2px solid rgba(255,255,255,.2);
  transition: transform .3s var(--ease);
}
.sector-arc__item:hover .sector-arc__icon-wrap { transform: scale(1.12); }
.sector-arc__icon { width: 36px; height: 36px; object-fit: contain; }
.sector-arc__label {
  font-size: .75rem; font-weight: 600; color: var(--navy);
  text-align: center; max-width: 110px; line-height: 1.3;
  background: rgba(255,255,255,.9); padding: 3px 8px; border-radius: 4px;
  white-space: nowrap;
}

/* Connection lines canvas (drawn by JS) */
.sectores__canvas {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

/* Mobile list (hidden on desktop) */
.sectores__list-mobile { display: none; }

/* ══════════════════════════════════════════════
   POR QUÉ DYNAMO
══════════════════════════════════════════════ */
.sec--porque {
  background: url('../assets/fondos/fondo-por_que.jpg') center / cover no-repeat;
}
.sec--porque::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(7,13,31,.88) 0%, rgba(13,31,75,.78) 42%, rgba(58,12,163,.55) 100%);
}
.sec--porque .sec__inner { position: relative; z-index: 1; }
.sec--porque .sec__inner--split {
  grid-template-columns: .85fr 1.7fr;
  gap: 3.5rem; align-items: center;
}

.porque__left {
  display: flex; flex-direction: column;
  gap: .6rem; position: relative;
}
.porque__title { margin-bottom: .25rem; line-height: 1.05; }

.porque__arrow {
  width: 100%; max-width: 300px;
  margin: .35rem 0 1.25rem;
}
.porque__arrow-svg {
  display: block; width: 100%; height: 18px; overflow: visible;
}

.porque__laptop {
  margin-top: .75rem;
  margin-left: -8%;
}
.porque__laptop-img {
  width: 118%; max-width: 540px;
  filter: drop-shadow(0 25px 55px rgba(0,0,0,.6));
}

/* Cards: 2×3 glassmorphism con icono que sobresale a la izquierda */
.porque__cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem 1.75rem;
  padding-left: 1.75rem;
}
.porque__card {
  position: relative;
  display: flex; align-items: center;
  padding: 1.35rem 1.5rem 1.35rem 4.25rem;
  min-height: 122px;
  background: linear-gradient(135deg, rgba(41,121,255,.22), rgba(108,60,225,.13));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), background .3s;
}
.porque__card:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(41,121,255,.28), rgba(108,60,225,.18));
}
.pq-card__icon-wrap {
  position: absolute;
  left: -28px; top: 50%;
  transform: translateY(-50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #1a0d68, #0a0540);
  border: 3px solid var(--violet);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(108,60,225,.22), 0 10px 24px rgba(0,0,0,.5);
  flex-shrink: 0;
}
.pq-card__icon { width: 40px; height: 40px; object-fit: contain; }
.porque__card p {
  font-size: .92rem; line-height: 1.55;
  color: rgba(255,255,255,.95); margin: 0;
}
.porque__card p strong { color: #fff; font-weight: 700; }

/* ══════════════════════════════════════════════
   VIDEO / DEMO
══════════════════════════════════════════════ */
.sec--video { background: var(--light-bg); color: var(--navy); }
.sec__inner--video {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 4rem; align-items: center;
  max-width: var(--max-w); margin: 0 auto; padding: var(--pad);
}

.video__device { position: relative; display: flex; align-items: center; justify-content: center; }
.video__ipad {
  width: 100%; max-width: 580px;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.22));
  position: relative; z-index: 1;
}
.video__play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; cursor: pointer;
}
.video__play-btn {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(41,121,255,.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(41,121,255,.45);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.video__play-btn:hover { transform: scale(1.1); box-shadow: 0 14px 42px rgba(41,121,255,.55); }
.video__play-btn svg { width: 24px; height: 24px; transform: translateX(3px); }

.video__content { display: flex; flex-direction: column; gap: 1.5rem; }
.video__content .sec__title--dark { color: var(--navy); }
.video__content .sec__title--dark em { color: var(--violet); }
.video__chevron { opacity: .65; }
.video__desc {
  background: linear-gradient(135deg, var(--violet), var(--blue));
  border-radius: var(--r-card); padding: 1.5rem 1.75rem;
  display: flex; flex-direction: column; gap: .875rem;
}
.video__desc p { font-size: .88rem; line-height: 1.8; color: var(--white); }

/* ══════════════════════════════════════════════
   CTA / CONTACTO
══════════════════════════════════════════════ */
.sec--cta {
  background: url('../assets/fondos/fondo-final.jpg') center / cover no-repeat;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.cta__photo-wrap {
  position: absolute; inset: 0 auto 0 0;
  width: 68%; z-index: 1;
  pointer-events: none;
}
.cta__photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  display: block;
}
.cta__content {
  position: relative; z-index: 2;
  margin-left: 52%;
  width: 44%; max-width: 640px;
  padding: 4.5rem 4% 4.5rem 0;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.cta__logo { height: 74px; width: auto; align-self: flex-start; margin-bottom: .25rem; }
.cta__quote {
  font-size: 1rem; line-height: 1.65;
  color: rgba(255,255,255,.95);
  border-left: 2.5px solid rgba(255,255,255,.55);
  padding-left: 1.25rem;
  margin: 0;
}
.cta__quote em { font-style: italic; }
.cta__headline {
  font-size: clamp(1.45rem, 2.15vw, 2.15rem);
  line-height: 1.18; color: var(--white);
  letter-spacing: .08em;
  margin: .5rem 0 .25rem;
}
.cta__headline-bold   { display: block; font-weight: 900; }
.cta__headline-italic { display: block; font-style: italic; font-weight: 400; margin-top: .35rem; letter-spacing: .06em; }

.cta__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.75rem; flex-wrap: wrap;
  margin-top: .75rem;
}
.cta__contacts { display: flex; flex-direction: column; gap: 1rem; }
.cta__contact-item {
  display: flex; align-items: center; gap: 1rem;
  font-size: 1.02rem; font-weight: 500; color: var(--white);
  transition: opacity .3s;
}
.cta__contact-item:hover { opacity: .8; }
.cta__contact-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cta__contact-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.6rem; border-radius: 50px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1.5px solid rgba(255,255,255,.5);
  color: var(--white); font-size: .88rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.cta__btn:hover { background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.15)); transform: translateY(-2px); }

/* ══════════════════════════════════════════════
   WHATSAPP FLOAT
══════════════════════════════════════════════ */
.wpp-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-wpp); color: var(--white);
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: all .3s var(--ease);
}
.wpp-float:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37,211,102,.5); }
.wpp-float svg { width: 28px; height: 28px; }

/* ══════════════════════════════════════════════
   RESPONSIVE ≤ 1100px
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sec--hero { grid-template-columns: 1fr; padding: 7rem 5% 4rem; }
  .hero__content { order: -1; align-items: center; text-align: center; max-width: 100%; }
  .hero__sub { max-width: 100%; border-left: none; padding-left: 0; border-top: 2px solid rgba(255,255,255,.4); padding-top: .9rem; }
  .hero__phones { margin: 2rem auto 0; max-width: 640px; width: 100%; }

  .sec--que-hacemos .sec__inner--split { grid-template-columns: 1fr; }
  .proceso__grid { grid-template-columns: 1fr 1fr; }
  .sec--porque .sec__inner--split { grid-template-columns: 1fr; gap: 2rem; }
  .porque__laptop { display: none; }
  .porque__arrow { max-width: 260px; }
  .sec__inner--video { grid-template-columns: 1fr; }
  .video__content { order: -1; }

  /* CTA: foto al top, contenido sube y se superpone sobre la curva */
  .sec--cta {
    display: block; min-height: auto;
    padding: 0;
  }
  .cta__photo-wrap {
    position: relative; inset: auto;
    width: 100%; height: auto;
    display: block; line-height: 0;
    margin-bottom: 0;
  }
  .cta__photo {
    display: block;
    width: 100%; height: auto;
  }
  .cta__content {
    position: relative; z-index: 2;
    width: 100%; max-width: 720px;
    margin: -26vw auto 0;
    padding: 0 1.5rem 4rem;
  }
}

/* ══════════════════════════════════════════════
   RESPONSIVE ≤ 768px
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --pad: 4.5rem 1.25rem; }

  .navbar__toggle { display: flex; }
  .navbar__menu {
    position: fixed; top: 0; right: -100%; width: 75%; max-width: 320px; height: 100vh;
    flex-direction: column; align-items: flex-start; gap: 1.5rem;
    background: rgba(7,13,31,.98); backdrop-filter: blur(20px);
    padding: 6rem 2rem 2rem; transition: right .4s var(--ease);
  }
  .navbar__menu.active { right: 0; }
  .dots-nav { display: none; }

  .sec--hero { grid-template-columns: 1fr; padding: 6rem 1.25rem 3rem; }
  .hero__content { order: -1; align-items: flex-start; text-align: left; width: 100%; max-width: 100%; }
  .hero__headline { font-size: clamp(1.1rem, 5.5vw, 1.55rem); letter-spacing: 0; line-height: 1.16; }
  .hero__sub { border-top: none; padding-top: 0; border-left: 2px solid rgba(255,255,255,.55); padding-left: 1rem; font-size: .82rem; }
  .sec--hero { padding: 5.5rem 1rem 2.5rem; }
  .hero__phones { max-width: 100%; margin: 1.5rem auto 0; }
  .hero__logo { height: 54px; }

  .sec--que-hacemos .sec__inner--split { gap: 1.5rem; }

  .proceso__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 1.25rem 1rem;
  }
  /* Toggle SVG overlays */
  .proceso__connectors--desktop { display: none; }
  .proceso__connectors--mobile { display: block; }

  /* Zig-zag visual: swap pasos 3 y 4 (manteniendo flow narrativo 1-2-3-4-5-6) */
  .proceso__step:nth-child(1) { order: 1; }
  .proceso__step:nth-child(2) { order: 2; }
  .proceso__step:nth-child(3) { order: 4; }
  .proceso__step:nth-child(4) { order: 3; }
  .proceso__step:nth-child(5) { order: 5; }
  .proceso__step:nth-child(6) { order: 6; }

  /* Círculo más chico */
  .paso__icon-wrap { width: 78px; height: 78px; }
  .paso__icon { width: 40px; height: 40px; }

  /* Chevrones: re-asignar según nueva posición visual */
  .proceso__step:nth-child(2)::before,
  .proceso__step:nth-child(3)::before,
  .proceso__step:nth-child(5)::before,
  .proceso__step:nth-child(6)::before {
    top: calc(1rem + 39px);
    font-size: 1.6rem;
  }
  /* paso 3 visualmente en fila 2 derecha (flujo →← viene desde la derecha) */
  .proceso__step:nth-child(3)::before { content: '«'; }
  /* paso 5 visualmente en fila 3 izquierda: no mostrar chevrón */
  .proceso__step:nth-child(5)::before { display: none; }
  /* paso 6 visualmente en fila 3 derecha: flujo 5→6 rightward */
  .proceso__step:nth-child(6)::before { content: '»'; }

  .services__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .service-card   { padding: 1.75rem 1.5rem; border-radius: 18px; }
  .service-card__title { font-size: 1.05rem; }
  .service-card__body  { font-size: .9rem; }
  .servicios__dots { width: 35%; opacity: .35; }
  .sec__title--servicios { margin-bottom: 2.5rem; letter-spacing: .12em; }

  /* Sectores mobile */
  .sector-arc { display: none; }
  .sectores__list-mobile {
    display: flex; flex-direction: column; gap: 1.25rem;
    position: relative; margin-top: 2rem;
  }
  .sectores__list-mobile::before {
    content: ''; position: absolute; left: 31px; top: 40px; bottom: 40px;
    width: 2px;
    background: linear-gradient(to bottom, var(--blue), var(--violet));
    border-radius: 2px;
  }
  .sector-item {
    display: flex; align-items: center; gap: 1.25rem; position: relative;
  }
  .sector-item__icon-wrap {
    width: 62px; height: 62px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--blue));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(108,60,225,.25); z-index: 1;
  }
  .sector-item__icon { width: 34px; height: 34px; object-fit: contain; }
  .sector-item span { font-size: .93rem; font-weight: 500; color: var(--navy); }

  .sec--porque .sec__inner--split { grid-template-columns: 1fr; }
  .porque__cards {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-left: 1.5rem;
  }
  .porque__card {
    padding: 1.1rem 1.25rem 1.1rem 3.75rem;
    min-height: 100px;
  }
  .pq-card__icon-wrap {
    width: 66px; height: 66px; left: -22px; border-width: 2.5px;
  }
  .pq-card__icon { width: 34px; height: 34px; }
  .porque__card p { font-size: .88rem; line-height: 1.55; }

  .sec__inner--video { grid-template-columns: 1fr; gap: 2rem; }
  .video__content { order: -1; }

  .cta__content { margin: -26vw auto 0; padding: 0 1.25rem 3.5rem; gap: 1rem; }
  .cta__logo { height: 58px; }
  .cta__quote { font-size: .9rem; padding-left: 1rem; }
  .cta__headline { font-size: 1.3rem; letter-spacing: .05em; }
  .cta__actions { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .cta__contact-item { font-size: .95rem; gap: .85rem; }
  .cta__contact-icon { width: 32px; height: 32px; }
  .cta__btn { align-self: stretch; text-align: center; padding: 1rem 1.5rem; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE ≤ 480px
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .proceso__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .proceso__step { flex-direction: row; text-align: left; }
  .proceso__step:nth-child(n) { order: unset; }
  .proceso__connectors--mobile { display: none; }
  .proceso__step::before { display: none; }
  .paso__icon-wrap { flex-shrink: 0; }
  .paso__text { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   SECCIONES POSTER (artifacts Claude Design — canvas 1920×1080)
   Diseño de lienzo fijo escalado al ancho del contenedor.
   Todo el CSS del artifact va scopeado bajo #qh-art / #sec-art
   para no colisionar con el resto del sitio.
═══════════════════════════════════════════════════════════ */

/* El poster trae su propio fondo → neutralizar fondo/overlay de sección */
.sec--que-hacemos { background: #06052e; }
.sec--que-hacemos::before { content: none; }
.sec--sectores { background: #0a0a1e; }

/* Scaffolding: lienzo 1920×1080 escalado a top-left por JS (initArtCanvases) */
.art-stage { position: relative; width: 100%; overflow: hidden; }
.art-stage .art-canvas {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px;
  transform-origin: top left;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ─────────── #qh-art : Qué Hacemos ─────────── */
#qh-art .art-canvas {
  color:#fff; overflow:hidden;
  background: radial-gradient(120% 130% at 20% 4%, #353bb6 0%, #2526a0 26%, #161580 52%, #0d0c5e 78%, #08073f 100%);
}
#qh-art .title{position:absolute;left:90px;top:62px;font-size:58px;font-weight:800;letter-spacing:.06em;line-height:1;white-space:nowrap;}
#qh-art .title .it{font-style:italic;}
#qh-art .lede{position:absolute;left:128px;top:178px;width:300px;font-size:23px;line-height:1.5;color:#E4E4F8;font-weight:400;}
#qh-art .lede::before{content:"";position:absolute;left:-26px;top:4px;width:2px;height:calc(100% - 2px);background:#cfcffb;}
#qh-art .lede::after{content:"";position:absolute;left:-31px;top:calc(100% - 2px);width:11px;height:11px;border-radius:50%;background:#fff;}
#qh-art .dots{position:absolute;left:1681px;top:38px;display:flex;gap:24px;}
#qh-art .dots i{width:12px;height:12px;border-radius:50%;display:block;}
#qh-art .dots i:nth-child(1){background:#3a3a9e;}
#qh-art .dots i:nth-child(2){background:#4a4ab8;}
#qh-art .dots i:nth-child(3){background:#5a5ad2;}
#qh-art .dots i:nth-child(4){background:#6f6ff0;}
#qh-art .dots i:nth-child(5){background:#8f8ffd;}
#qh-art .corner-line{position:absolute;left:61px;top:1040px;width:128px;height:5px;background:#fff;border-radius:3px;}
#qh-art .frame{position:absolute;left:457px;top:196px;width:1327px;height:800px;border:2px solid rgba(180,178,255,.40);border-radius:60px;}
#qh-art .src-panel{position:absolute;left:549px;top:329px;width:402px;height:566px;background:rgba(46,44,168,.40);border:1px solid rgba(150,145,245,.22);border-radius:34px;}
#qh-art .card{position:absolute;left:571px;top:385px;width:357px;height:199px;background:rgba(255,255,255,.04);border:2px solid rgba(186,190,240,.55);border-radius:22px;}
#qh-art .card h3{margin:0;position:absolute;top:18px;left:0;right:0;text-align:center;color:#fff;font-size:25px;font-weight:800;letter-spacing:-.005em;}
#qh-art .pill{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:16px;font-weight:800;line-height:1.2;letter-spacing:.03em;color:#fff;text-transform:uppercase;padding:0 14px;}
#qh-art .pill.green{background:linear-gradient(180deg,#22ae8e,#15876f);box-shadow:0 10px 26px rgba(18,120,100,.42);}
#qh-art .pill.blue{background:linear-gradient(180deg,#3f74e6,#2a55c8);box-shadow:0 10px 26px rgba(30,55,160,.5);}
#qh-art .p-fuentes{left:644px;top:294px;width:219px;height:61px;font-size:16px;}
#qh-art .p-ingesta{left:1034px;top:320px;width:172px;height:66px;font-size:17px;}
#qh-art .p-lake{left:1304px;top:385px;width:157px;height:58px;font-size:17px;}
#qh-art .ico{position:absolute;transform:translate(-50%,-50%);}
#qh-art .disc{border-radius:50%;object-fit:cover;display:block;}
#qh-art .fabnode{width:104px;height:104px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 7px #1FA98C, 0 8px 20px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;}
#qh-art .fabnode img{width:54px;height:54px;display:block;}
#qh-art .nodecircle{width:96px;height:96px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.28);}
#qh-art .nodecircle img{width:58px;height:58px;display:block;}
#qh-art .nlabel{position:absolute;transform:translateX(-50%);text-align:center;font-size:17px;font-weight:700;color:#fff;line-height:1.16;white-space:nowrap;}
#qh-art .badge{position:absolute;transform:translate(-50%,-50%);background:#CD418C;color:#fff;font-size:13px;font-weight:800;line-height:1.12;text-align:center;padding:4px 10px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.3);white-space:nowrap;}
#qh-art .lblrow{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:12px;}
#qh-art .lblrow img{display:block;}
#qh-art .lblrow .txt{font-size:20px;font-weight:800;letter-spacing:.07em;line-height:1.06;text-transform:uppercase;}
#qh-art .lbl-azure .txt{font-size:23px;}
#qh-art .lbl-fabric .txt .sub{color:#7fd0ff;}
#qh-art .lbl-onelake .txt{color:#7cc0ff;font-size:21px;}
#qh-art .lbl-ai .txt{font-size:28px;letter-spacing:.05em;}
#qh-art .dynamo{position:absolute;left:1659px;top:884px;width:206px;height:auto;}
#qh-art .wires{position:absolute;inset:0;width:1920px;height:1080px;pointer-events:none;}

/* ─────────── #sec-art : Sectores ─────────── */
#sec-art .art-canvas { background:#F1F1F4; overflow:hidden; }
#sec-art .bg{position:absolute;inset:0;width:1920px;height:1080px;object-fit:cover;}
#sec-art .title{position:absolute;left:96px;top:104px;line-height:1.04;letter-spacing:.12em;}
#sec-art .title .l1{font-size:54px;font-weight:800;color:#3a1d8f;text-transform:uppercase;}
#sec-art .title .l2{font-size:54px;font-weight:800;font-style:italic;color:#6a2fd0;text-transform:uppercase;}
#sec-art .wires{position:absolute;inset:0;width:1920px;height:1080px;pointer-events:none;}
#sec-art .sec-ico{position:absolute;width:140px;height:140px;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 20px rgba(40,20,120,.32));}
#sec-art .sec-lbl{position:absolute;transform:translateY(-50%);font-size:25px;font-weight:800;color:#2b1a86;line-height:1.18;letter-spacing:.005em;white-space:nowrap;}
#sec-art .sec-lbl.left{text-align:right;transform:translate(-100%,-50%);}
#sec-art .sec-lbl.right{text-align:left;}
#sec-art .corner-line{position:absolute;left:64px;bottom:54px;width:96px;height:5px;background:#2a2ad0;border-radius:3px;}
#sec-art .dots{position:absolute;right:70px;bottom:48px;display:flex;gap:22px;}
#sec-art .dots i{width:13px;height:13px;border-radius:50%;background:#2a2ad0;display:block;}
#sec-art .dots i:nth-child(1){opacity:.35;}
#sec-art .dots i:nth-child(2){opacity:.5;}
#sec-art .dots i:nth-child(3){opacity:.68;}
#sec-art .dots i:nth-child(4){opacity:.84;}

/* ── Toggle poster desktop ⇄ mobile (≤1100px) ── */
.art-stage--mobile { display: none; }
@media (max-width: 1100px) {
  .art-stage--desktop { display: none; }
  .art-stage--mobile  { display: block; }
  /* el screen mobile trae su propio fondo → igualar gutters de sección */
  .sec--que-hacemos { background: #08073f; }
  .sec--sectores    { background: #F1F1F4; }
}

/* ─────────── #sec-mob : Sectores mobile (export Claude Design, flujo responsive) ─────────── */
#sec-mob .screen{width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:#F1F1F4;position:relative;display:flex;flex-direction:column;}
#sec-mob .hero{position:relative;height:52vw;max-height:224px;min-height:180px;overflow:hidden;flex:0 0 auto;}
#sec-mob .hero img{position:absolute;left:50%;top:0;transform:translateX(-50%);width:118%;height:auto;}
#sec-mob .hero .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(241,241,244,0) 52%,#F1F1F4 100%);}
#sec-mob .hero .title{position:absolute;left:7%;top:26px;line-height:1.06;letter-spacing:.06em;}
#sec-mob .title .l1{font-size:clamp(19px,5.6vw,23px);font-weight:800;color:#3a1d8f;text-transform:uppercase;margin:0;}
#sec-mob .title .l2{font-size:clamp(19px,5.6vw,23px);font-weight:800;font-style:italic;color:#6a2fd0;text-transform:uppercase;margin:0;}
#sec-mob .list{flex:1;padding:4px 7% 0;}
#sec-mob .row{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #dcdcea;}
#sec-mob .row:last-child{border-bottom:none;}
#sec-mob .row img{width:54px;height:54px;flex:0 0 auto;display:block;filter:drop-shadow(0 6px 12px rgba(40,20,120,.18));}
#sec-mob .row .lbl{font-size:17px;font-weight:800;color:#2b1a86;line-height:1.2;}
#sec-mob .chrome{display:flex;align-items:center;justify-content:space-between;padding:16px 7% 22px;}
#sec-mob .chrome .bar{width:64px;height:4px;background:#2a2ad0;border-radius:3px;}
#sec-mob .chrome .dots{display:flex;gap:12px;}
#sec-mob .chrome .dots i{width:9px;height:9px;border-radius:50%;background:#2a2ad0;display:block;}
#sec-mob .chrome .dots i:nth-child(1){opacity:.35;}
#sec-mob .chrome .dots i:nth-child(2){opacity:.5;}
#sec-mob .chrome .dots i:nth-child(3){opacity:.68;}
#sec-mob .chrome .dots i:nth-child(4){opacity:.84;}

/* ─────────── #qh-mob : Qué Hacemos mobile (export Claude Design, flujo responsive) ─────────── */
#qh-mob .screen{width:100%;max-width:430px;margin:0 auto;min-height:100vh;color:#fff;background:radial-gradient(130% 120% at 50% 0%, #353bb6 0%, #2526a0 24%, #161580 50%, #0d0c5e 78%, #08073f 100%);display:flex;flex-direction:column;}
#qh-mob .head{padding:32px 26px 0;}
#qh-mob .head h1{margin:0;font-size:30px;font-weight:800;letter-spacing:.04em;line-height:1.04;}
#qh-mob .head h1 .it{font-style:italic;}
#qh-mob .head p{margin:16px 0 0;padding-left:16px;border-left:2px solid #cfcffb;font-size:14.5px;line-height:1.5;color:#E4E4F8;font-weight:400;}
#qh-mob .body{padding:22px 22px 0;flex:1;display:flex;flex-direction:column;}
#qh-mob .card{background:rgba(255,255,255,.045);border:1.5px solid rgba(186,190,240,.4);border-radius:22px;padding:20px 16px;}
#qh-mob .card.col{display:flex;flex-direction:column;align-items:center;}
#qh-mob .pill{display:inline-flex;align-items:center;justify-content:center;text-align:center;border-radius:14px;font-weight:800;line-height:1.18;letter-spacing:.04em;color:#fff;text-transform:uppercase;padding:7px 12px;font-size:11.5px;}
#qh-mob .pill.green{background:linear-gradient(180deg,#22ae8e,#15876f);box-shadow:0 8px 20px rgba(18,120,100,.4);}
#qh-mob .pill.blue{background:linear-gradient(180deg,#3f74e6,#2a55c8);box-shadow:0 8px 20px rgba(30,55,160,.45);}
#qh-mob .btag{display:inline-flex;align-items:center;gap:9px;}
#qh-mob .btag img{display:block;}
#qh-mob .btag span{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.05;}
#qh-mob .node{display:flex;flex-direction:column;align-items:center;gap:7px;}
#qh-mob .node img{display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));}
#qh-mob .node .nl{font-size:13.5px;font-weight:700;color:#fff;text-align:center;line-height:1.16;}
#qh-mob .fab{width:88px;height:88px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 5px #1FA98C,0 6px 16px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;}
#qh-mob .fab img{width:46px;height:46px;filter:none;}
#qh-mob .srcgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 6px;width:100%;}
#qh-mob .srctop{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
#qh-mob .conn{display:flex;justify-content:center;}
#qh-mob .outs{display:flex;justify-content:center;gap:40px;}
#qh-mob .ai{display:flex;justify-content:center;margin:24px 0 4px;}
#qh-mob .ai .btag span{font-size:20px;}
#qh-mob .chrome{display:flex;align-items:center;justify-content:space-between;padding:20px 26px 26px;}
#qh-mob .chrome .bar{width:80px;height:5px;background:#fff;border-radius:3px;}
#qh-mob .chrome .dots{display:flex;gap:14px;}
#qh-mob .chrome .dots i{width:11px;height:11px;border-radius:50%;display:block;}
#qh-mob .chrome .dots i:nth-child(1){background:#3a3a9e;}
#qh-mob .chrome .dots i:nth-child(2){background:#4a4ab8;}
#qh-mob .chrome .dots i:nth-child(3){background:#5a5ad2;}
#qh-mob .chrome .dots i:nth-child(4){background:#6f6ff0;}
#qh-mob .chrome .dots i:nth-child(5){background:#8f8ffd;}
#qh-mob .rings{position:relative;width:330px;height:330px;margin:0 auto;max-width:100%;}
#qh-mob .rings svg{position:absolute;inset:0;}
#qh-mob .lnode{position:absolute;transform:translate(-50%,-50%);text-align:center;}
#qh-mob .lnode img{width:64px;height:64px;display:block;}
#qh-mob .lnode .badge{position:absolute;left:50%;top:100%;transform:translate(-50%,2px);background:#CD418C;color:#fff;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.3);}
#qh-mob .lakelabels{display:flex;justify-content:center;gap:24px;margin-bottom:4px;flex-wrap:wrap;}
#qh-mob .lakelabels .btag span{font-size:12px;}