/* ============================================================
   LANDING 3 — CSS pixel-perfect del Figma (1920px base)
   Tipografía: Poppins 500 + Inter 400/500/700
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  overflow-x: clip;
  font-family: 'Inter', sans-serif;
  color: #373435;
  background: #fff;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: 'Inter', sans-serif; }

/* ── Variables (copiadas de landing-ai-2.css) ── */
:root {
  --green:   #00e185;
  --blue:    #2563eb;
  --purple:  #7c3aed;
  --wa:      #67c15e;
  --dark:    #272b3a;
  --red:     #ed3237;
  --orange:  #fe9b17;
  --gray:    #747474;
  --light-bg:#f0eeff;
  --max:     1440px;
  --px:      120px;
  --radius:  24px;
}

/* ── SHARED: Header / Botones / Footer (de landing-ai-2.css) ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 96px;
  background: #fff;
  border-bottom: 1px solid #d2d3d5;
}
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo { width: 220px; height: auto; }
.header-right { display: flex; align-items: center; gap: 14px; }
.header-right-1 { display: flex; align-items: center; gap: 24px; }
.arg-flag { display: flex; flex-direction: column; }
.arg-flag span { display: block; width: 34px; height: 7.5px; }
.arg-flag .flag-sky   { background: #00d0ff; }
.arg-flag .flag-white { background: #f0f0f0; }
.flag-label { font-size: 16px; font-weight: 600; color: #4b4b4d; }

/* Botón degradado — idéntico a landing-ai-2.css */
.btn-gradient {
  background: linear-gradient(-12.68deg, #2563eb 14.6%, #7c3aed 85.4%);
  color: #fefefe;
  font-size: 24px;
  font-weight: 700;
  height: 74px;
  padding: 0 44px;
  border-radius: 188px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: opacity .2s;
}
.btn-gradient:hover { opacity: .9; }

.btn-gradient-whatsapp {
  background: linear-gradient(-12.68deg, #67C15E 14.6%, #72E368 85.4%);
  color: #fefefe;
  font-size: 24px;
  font-weight: 700;
  height: 74px;
  padding: 0 44px;
  border-radius: 188px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: opacity .2s;
  border: none;
  cursor: pointer;
}
.btn-gradient-whatsapp:hover { opacity: .9; }

/* Meta badge — idéntico a landing-ai-2.css */
.btn-meta {
  background: linear-gradient(-18.92deg, #3867ae 14.4%, #3983ae 85.6%);
  width: 108px;
  height: 46px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
}
.btn-meta img { width: 66px; height: 26.4px; object-fit: contain; }

.hero-cta { display: flex; align-items: center; gap: 55px; }

/* Bandera mobile — oculta en desktop, visible en mobile via @media */
.hero-flag-mobile { display: none; }

/* Visual mobile hero — oculto en desktop */
.l3-hero-mob-visual { display: none; }


/* ================================================================
   HERO  —  Figma: 1920 × 1336px
   Título: y=242  |  Subtítulo: y=448  |  CTAs: y=621
   Gaps exactos:
     título→subtítulo = 448−(242+192) = 14px
     subtítulo→CTAs   = 621−(448+36)  = 137px
================================================================ */
/* Track: ya no necesita alto extra. Los logos rotan solos (cada 5 s), no
   con el scroll, así que el hero deja de "congelarse" (sin recorrido sticky)
   y el scroll fluye normal. */
.l3-hero-track {
  position: relative;
}

.l3-hero {
  position: relative;
  width: 100%;
  min-height: 760px;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: clip;
}

/* Container interno: dos columnas (texto / orbital) */
.l3-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 90px 0px;
  display: grid;
  /*grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);*/
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: 0px;
}

/* Background image: full cover */
.l3-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  z-index: 0;
}

/* Contenido izquierdo */
.l3-hero-content {
  position: relative;
  z-index: 2;
}

/* Título: Poppins Medium 53px / line-height 64px / #373435 */
.l3-hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 53px;
  line-height: 64px;
  color: #373435;
  margin-bottom: 14px; /* gap 448−(242+192)=14px */
}

/* Subtítulo: Inter Regular 30px / #747474 */
.l3-hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: #747474;
  white-space: nowrap;
  margin-bottom: 45px; /* gap 621−(448+36)=137px */
}

/* CTAs: flex gap=55px */
.l3-hero-ctas {
  display: flex;
  align-items: center;
  gap: 55px;
}

/* ================================================================
   ORBITAL 3D — símbolo Chatealo central + logos de plataformas
   Profundidad (scale / blur / opacity / z-index) la calcula el JS.
================================================================ */
.l3-orbit {
  position: relative;
  width: 100%;
  height: 540px;
  perspective: 1300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -50px;
  margin-TOP: -50px;
}

.l3-orbit-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Símbolo verde central */
.l3-orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 156px;
  height: 132px;
  margin: -66px 0 0 -78px;
  object-fit: contain;
  z-index: 45;
}

/* Cada logo orbitando (posición/escala/blur via JS) */
.l3-orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 120px;
  margin: -60px 0 0 -70px;
  will-change: transform, filter, opacity;
}

/* Logo sin recuadro: se muestra el SVG tal cual, como en el diseño */
.l3-orbit-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l3-orbit-badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.15));
}


/* ================================================================
   PROBLEMA  —  Figma: 1440 × 423px en x=240 de la página
   bg #2563eb, border-radius 37px
   Cols: left=81/521/960, top=86, width=372, gap interno=29px
================================================================ */
.l3-problema-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 52px; /* gap entre hero y problema = 1580−192−1336=52px */
}
.l3-problema {
  background: #0050C3;
  border-radius: 37px;
  position: relative;
  height: 423px;
}

/* Columnas con posición absoluta desde el Figma */
.l3-prob-col {
  position: absolute;
  top: 86px;
  width: 372px;
  display: flex;
  flex-direction: column;
  gap: 29px;
}
.l3-prob-col:nth-child(1) { left: 81px; }
.l3-prob-col:nth-child(2) { left: 521px; }
.l3-prob-col:nth-child(3) { left: 960px; }

.l3-prob-icon { width: 73px; height: 73px; }

/* Título: Poppins Medium 30px blanco */
.l3-prob-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  color: #fff;
}

/* Descripción: Inter Regular 16px blanco, line-height 1.26 */
.l3-prob-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.26;
  color: #fff;
}


/* ================================================================
   ECOSISTEMA  —  Figma: 1920 × 335px
   Botón left=418, gap=118px, título w=699
================================================================ */
.l3-ecosistema {
  width: 100%;
  height: 335px;
  display: flex;
  align-items: center;
}
.l3-eco-inner {
  /* left=418 en 1920px = 418−240=178px desde container left */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 178px;
  display: flex;
  align-items: center;
  gap: 118px;
}

/* Botón WA: #00e185, 267×74px, border-radius 150px */
.l3-eco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 266.885px;
  height: 74px;
  padding: 0 12px;
  border-radius: 149.774px;
  background: #00e185;
  flex-shrink: 0;
  transition: opacity .2s;
}
.l3-eco-btn:hover { opacity: .88; }
.l3-eco-btn span {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20.713px;
  color: #fff;
  text-align: center;
  flex: 1;
}
.l3-eco-btn img { width: 54.59px; height: 54.59px; flex-shrink: 0; }

/* Título: Poppins Medium 52px, gradiente texto, line-height 1.19, w=699px */
.l3-eco-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.05;
  width: 699px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ================================================================
   AUTOMATIZACIÓN  —  Figma: 1920 × 556px, bg #00e185
   Título: left=787 en 1920 = 548px desde container  top=112
   Subtítulo: centrado, top=167
   Cards: left=345 en 1920 = 105px desde container, top=300, gap=116px
================================================================ */
.l3-auto {
  background: linear-gradient(-62.84deg, rgb(37, 99, 235) 3.7%, rgb(124, 58, 237) 94.7%);
  width: 100%;
  height: 556px;
  position: relative;
}
.l3-auto-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

/* Título: left=787−240=547px, top=112px */
.l3-auto-title {
  position: absolute;
  left: 547px;
  top: 92px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 1.19;
  color: #ffffff;
  white-space: nowrap;
}

/* Subtítulo: centrado, top=167px, w=612px */
.l3-auto-subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 164px;
  width: 850px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.38;
  color: #ffffff;
  text-align: center;
}

/* Cards: left=345−240=105px, top=300px, gap=116px */
.l3-auto-cards {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 300px;
  display: flex;
  gap: 116px;
  align-items: center;
  width: max-content;
}

/* Cards SVG del Figma — glow #2563EB 24% opacity, 24px blur */
.l3-auto-card-svg {
  height: 160px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 24px rgba(37, 99, 235, 0.24));
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.l3-auto-card-svg.anim-in {
  opacity: 1;
  transform: translateY(0);
}
.l3-auto-card-svg:nth-child(2) { transition-delay: 0.15s; }
.l3-auto-card-svg:nth-child(3) { transition-delay: 0.30s; }

/* Card base: shadow 0 0 11.25px rgba(37,99,235,0.2) */
.l3-auto-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 11.25px rgba(37, 99, 235, 0.2);
  height: 140px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 18px;
  overflow: hidden;
}
.l3-auto-card:nth-child(1) { width: 297px; }
.l3-auto-card:nth-child(2) { width: 344px; }
.l3-auto-card:nth-child(3) { width: 356px; }

.l3-auto-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.l3-auto-icon svg { width: 34px; height: 34px; }
.l3-auto-icon--blue   { background: #dbeafe; }
.l3-auto-icon--purple { background: #ede9fe; }
.l3-auto-icon--green  { background: #d1fae5; }

.l3-auto-body { text-align: left; }

/* Card título: Inter Bold 16.3px #373435 */
.l3-auto-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16.316px;
  color: #373435;
  margin-bottom: 5px;
}
/* Card desc: Inter Regular 15.3px #96989a */
.l3-auto-card-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15.321px;
  color: #96989a;
  margin-bottom: 12px;
}
/* Badge IA Activa: Inter Bold 16.8px #23c35e */
.l3-ia-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16.794px;
  color: #23c35e;
  background: rgba(35, 195, 94, 0.1);
  border-radius: 50px;
  padding: 4px 16px;
}


/* ================================================================
   CRM-HISTORIAL  —  Figma: 1920 × 1257px
   Imagen: left=0 top=270 w=970 h=812 r=36px
   Chat: left=822 top=310 w=483 h=212
   Texto: left=1052 top=640 w=699
================================================================ */
.l3-crm {
  width: 100%;
  min-height: 100vh;
  height: 980px;
  position: relative;
  overflow: hidden;
  background-color: #FFE600;
}

/* Background image del CRM (rotado 180deg en Figma) */
.l3-crm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: rotate(180deg);
  z-index: 0;
}

/* Wrapper CRM: posición + shadow (separado del clip-path para que la sombra no se corte) */
.l3-crm-img-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /*width: 969.914px;*/
  width: 50%;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 0 22.5px rgba(37, 99, 235, 0.2));
}
/* Imagen CRM: clip-path en el img para que el drop-shadow del wrapper siga el contorno */
.l3-crm-img {
  width: 100%;
  height: auto;
  display: block;
  clip-path: inset(0 round 0 36px 36px 0); /* top-left top-right bottom-right bottom-left */
  transform-origin: left center;
  will-change: transform;
}

/* Chat mensaje: left=822 top=310 w=483 h=212 */
.l3-crm-chat {
  position: absolute;
  left: 822px;
  top: 20%;
  transform: translateY(-20%);
  width: 483.381px;
  height: 212.349px;
  z-index: 3;
  filter: drop-shadow(0 0 24px rgba(37, 99, 235, 0.24));
}
.l3-crm-chat img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.l3-crm-chat-bubble {
  background: #fff;
  border-radius: 20px 20px 4px 20px;
  padding: 24px 28px 18px;
  box-shadow: 0 0 11.25px rgba(37, 99, 235, 0.2);
  flex: 1;
}
.l3-crm-chat-bubble p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 26.663px;
  color: #373435;
  line-height: 1.4;
}
.l3-crm-chat-ts {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20.847px;
  color: #96989a;
  margin-top: 8px;
  text-align: right;
}
.l3-crm-chat-avatar {
  width: 112.836px; height: 112.836px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.l3-crm-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.l3-online {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #00e185;
  border: 2px solid #fff;
}

/* Texto derecho: left=1052 top=640 w=699, gap entre items=38px */
.l3-crm-text {
  position: absolute;
  left: 1052px;
  top: 40%;
  transform: translateY(-50%);
  width: 699px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 38px;
  z-index: 2;
}

/* Título: Poppins Medium 36px gradiente, line-height 1.19 */
.l3-crm-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 1.19;
  color: #2d3277;
}

/* Descripción: Inter Medium 18px negro, line-height 1.33, w=515px */
.l3-crm-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.33;
  color: #000;
  width: 650px;
}
.l3-crm .btn-gradient {
  background: linear-gradient(-12.68deg, #2563eb 14.6%, #7c3aed 85.4%);
  color: #fefefe;
  font-size: 26px;
  font-weight: 700;
  height: 84px;
  padding: 0 44px;
  border-radius: 188px;
  border: 1px solid #FFE600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: opacity .2s;
}
.l3-crm .btn-gradient:hover {
  background: #FFE600;
  color: #2d3277;
  border: 1px solid #2d3277;
}


/* ================================================================
   ANALÍTICA  —  Figma: 1920 × 1263px
   bg: gradient 47.5746deg #fff 33.4% → #f6f5ff 100%
   Dashboard: left=960 top=165 w=1295 h=934 r=29px
   Texto: left=238 top=472 w=699, gap=36px entre items
================================================================ */
.l3-analitica {
  width: 100%;
  position: relative;
  overflow-x: clip;   /* evita scroll horizontal sin cortar verticalmente */
  overflow-y: visible;
  background: linear-gradient(47.5746deg, #ffffff 33.407%, #f6f5ff 100%);
  padding-top: 70px;
  padding-bottom: 70px;
}

/* Dashboard: left=960 top=165 w=1295 h=934 r=29px shadow */
.l3-dashboard-wrap {
  /* flujo normal — la sección crece con la imagen */
  position: relative;
  margin-left: 50%;
  width: 50%;
  height: auto;
  z-index: 1;
  /* drop-shadow en el wrapper sigue el contorno del img clipeado */
  filter: drop-shadow(0 0 22.5px rgba(37, 99, 235, 0.2));
}
.l3-dashboard-wrap img {
  width: 100%;
  height: auto;
  display: block;
  /* clip-path redondea la imagen para que el drop-shadow siga ese contorno */
  clip-path: inset(0 round 29px 0 0 29px); /* top-left top-right bottom-right bottom-left */
}

/* Texto izquierdo: left=238 top=472 w=699, gap=36px */
.l3-ana-text {
  position: absolute;
  left: 238px;
  top: 472px;
  width: 699px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  z-index: 2;
}

/* Título: Poppins Medium 36px gradiente, line-height 1.19 */
.l3-ana-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 1.19;
  white-space: nowrap;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

}
.l3-analitica .btn-gradient {
  background.color: linear-gradient(-12.68deg, #2563eb 14.6%, #7c3aed 85.4%);
}

/* Bullets: h=97px, items en top=0/35/70, gap=13px, bullet=21px, Poppins Medium 18px #272b3a, line-height 1.5 */
.l3-ana-bullets {
  position: relative;
  height: 97px;
  width: 379.107px;
}
.l3-ana-bullet {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 13px;
  height: 27px;
  width: 379.107px;
}
.l3-ana-bullet:nth-child(1) { top: 0; }
.l3-ana-bullet:nth-child(2) { top: 35px; }
.l3-ana-bullet:nth-child(3) { top: 70px; }
.l3-ana-bullet img { width: 16px; height: 13px; flex-shrink: 0; }
.l3-ana-bullet span {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: #272b3a;
  width: 345px;
}


/* ================================================================
   DEMO-UX  —  Figma: 1920 × 697px
   Chat: left=354 top=257 w=493 h=183
   Texto: left=968 top=317 w=699
================================================================ */
.l3-demo {
  width: 100%;
  height: 697px;
  position: relative;
  overflow: hidden;
}

/* ── Slider de chat — una sola card visible a la vez ── */
.l3-demo-slider-wrap {
  position: absolute;
  left: 354px;
  top: 0;
  width: 500px;
  height: 100%;
  overflow: hidden;   /* clips todo lo que está fuera: arriba y abajo */
}

/* Stage: contenedor relativo donde se posicionan las cards */
.l3-demo-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* JS setea top en px — solo translateY cambia para animar */
.l3-demo-wrap {
  position: absolute;
  left: 0;
  right: 0;
}

.l3-demo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* SVG overlay de typewriter */
.l3-demo-wrap svg.tw-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
}
/* Wrapper relativo para superponer SVG overlay */
.l3-demo-wrap {
  position: relative;
  width: 75%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.l3-demo-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
/* SVG overlay: solo texto visible, fondo transparente */
.l3-demo-wrap svg.tw-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
}

/* SVGs inlineados para typewriter */
.l3-demo-slide svg,
.l3-demo-slide[data-inline] { display: block; border-radius: 16px; }
.l3-demo-bubble {
  background: #fff;
  border-radius: 20px 20px 4px 20px;
  padding: 18px 22px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  flex: 1;
}
.l3-demo-bubble p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22.967px;
  color: #373435;
  line-height: 1.4;
}
.l3-demo-ts {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17.958px;
  color: #96989a;
  margin-top: 6px;
  text-align: right;
}
.l3-demo-avatar {
  width: 97.196px; height: 97.196px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.l3-demo-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Texto: left=968 top=317 w=699, Poppins Medium 36px gradiente */
.l3-demo-text {
  position: absolute;
  left: 968px;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 699px;
  height: max-content;
}
.l3-demo-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 1.19;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.l3-demo-text p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #000000;
  margin-top: 6px;
  line-height: 1.39;
}


/* ================================================================
   PASA NIVEL — copiado de landing-ai.css > .cta-whatsapp
================================================================ */
.cta-whatsapp {
  background: #fff;
  padding: 0 var(--px) 60px;
}
.cta-wa-card {
  background: #00E185;
  border-radius: 24px;
  max-width: var(--max);
  height: 244px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
}
.cta-wa-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 890px;
  gap: 30px;
}
.cta-wa-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 30px;
  color: #ffffff;
  line-height: 1.3;
  text-align: end;
}
.btn-white {
  text-decoration: none;
  height: 84px;
  background: #ffffff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 34px;
  padding-right: 18px;
  gap: 34px;
  width: fit-content;
}
.btn-white:hover { filter: brightness(0.95); }
.btn-white-text {
  flex: 1; text-align: center;
  color: #67C15E;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.btn-white-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ════════════════════════════
   FOOTER — copiado literal de landing-ai.css
════════════════════════════ */
.footer {
  background: var(--dark);
  min-height: 375px;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
  height: 375px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-logo  { width: 300px; height: auto; }
.footer-social { height: 36px; width: auto; }


/* ================================================================
   RESPONSIVE — zoom proporcional para monitores menores a 1920px
   zoom escala TODO (posiciones absolutas, tipografías, gaps, imágenes)
   getBoundingClientRect() en JS ya tiene en cuenta el zoom → líneas correctas
================================================================ */

/* 1440px: zoom 0.75 (1440/1920) */
@media (min-width: 1367px) and (max-width: 1440px) {
  html { zoom: 0.75; }
}

/* 1366px: zoom 0.712 (1366/1920) */
@media (min-width: 769px) and (max-width: 1366px) {
  html { zoom: 0.712; }
}

@media (max-width: 768px) {

  /* ── Header mobile — copiado literal de landing-ai.css ── */
  .header         { height: 64px; }
  .header-inner   { justify-content: center; padding: 0 20px; }
  .btn-meta {
    width: 64.8px !important;
    height: 27.6px !important;
  }
  .btn-meta img {
      width: 39.6px !important;
      height: 15.84px !important;
  }
  .header-logo    { width: 180px; }
  .header-right-1   { display: none; }

  .btn-gradient-whatsapp {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 64px;
    padding: 0px;
    width: 100%;
    text-align: center;
  }
  .btn-gradient {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 64px;
    padding: 0px;
    align-items: center;
  }

  /* ── Bandera mobile — visible en mobile, debajo del header ── */
  .hero-flag-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0 0;
    position: relative;
    z-index: 1;
  }

  /* ── HERO mobile — stack: texto arriba, orbital abajo ── */
  .l3-hero-track { height: auto; }
  .l3-hero { position: static; min-height: 0; height: auto; }
  .l3-hero-inner {
    grid-template-columns: 1fr;
    padding: 24px 20px 48px;
    gap: 8px;
  }

  .l3-hero-content  { text-align: center; }
  .l3-hero-title    { font-size: 30px; line-height: 38px; padding: 0 8px; margin-bottom: 14px; text-align: center; }
  .l3-hero-subtitle { font-size: 20px; white-space: normal; margin-bottom: 28px; text-align: center; }

  /* CTAs mobile */
  .l3-hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
  }
  .btn-gradient {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    font-size: 20px;
    height: 64px;
  }

  /* Orbital mobile — más chico */
  /* ── Logos arriba en mobile: cluster estático 1:1 (sin animación ni símbolo) ── */
  .l3-orbit {
    order: -1;                  /* logos por encima del texto */
    height: 165px;
    perspective: none;
    margin: 4px 0 0;
  }
  .l3-orbit-center { display: none; }   /* sin símbolo verde en el cluster mobile */

  .l3-orbit-node {
    width: 76px;
    height: 66px;
    margin: 0;                  /* anula el centrado del desktop */
    transform: none !important; /* anula las transforms del carousel JS */
    filter: none !important;    /* sin blur */
    opacity: 1 !important;      /* todos visibles */
    z-index: 1 !important;
  }
  /* posiciones del cluster (data-i: 0=ML · 1=MP · 2=Shopify · 3=TN · 4=WOO) */
  .l3-orbit-node[data-i="2"] { left: 40%; top: 0;   }  /* Shopify — centro arriba */
  .l3-orbit-node[data-i="3"] { left: 15%; top: 27%; }  /* Tiendanube — izq arriba */
  .l3-orbit-node[data-i="1"] { left: 64%; top: 21%; }  /* Mercado Pago — der arriba */
  .l3-orbit-node[data-i="4"] { left: 0;   top: 57%; }  /* WooCommerce — izq abajo */
  .l3-orbit-node[data-i="0"] { left: 70%; top: 59%; }  /* Mercado Libre — der abajo */

  /* ── PROBLEMA mobile ── */
  .l3-problema-wrap { padding: 24px 16px 0; }
  .l3-problema { height: auto; border-radius: 20px; padding: 45px 35px; display: flex; flex-direction: column; gap: 32px; }
  .l3-prob-col { position: relative; top: auto; left: auto; width: 100%; gap: 16px; }
  .l3-prob-col:nth-child(n) { left: auto; }
  .l3-prob-title { font-size: 22px; }

  /* ── ECOSISTEMA mobile ── */
  .l3-ecosistema { height: auto; padding: 48px 0; }
  .l3-eco-inner  { padding: 0 20px; flex-direction: column-reverse; align-items: center; gap: 24px; }  
  .l3-eco-title  { font-size: 30px; width: auto; text-align: center; }

  /* ── AUTOMATIZACIÓN mobile ── */
  .l3-auto         { height: auto; padding: 48px 0 40px; }
  .l3-auto-inner   { text-align: center; }
  .l3-auto-title   { position: relative; left: auto; top: auto; font-size: 26px; padding: 0 20px; }
  .l3-auto-subtitle{ position: relative; left: auto; transform: none; top: auto; width: auto; font-size: 18px; padding: 12px 40px 0; }
  .l3-auto-cards   { display: flex; position: relative; left: auto; top: auto; flex-direction: column; align-items: center; gap: 36px; padding: 28px 10px 0; transform: none; width: 100%; min-width: 100%; }
  .l3-auto-card-svg { max-height: 120px; width: 100%; max-width: auto; }

  /* ── CRM mobile ── */
  .l3-crm { height: auto; padding: 40px 0 48px; display: flex; flex-direction: column; align-items: center; }
  .l3-crm-bg { display: none; }
  .l3-crm-img-wrap {
    position: relative; left: auto; top: 5%;
    transform: translateY(-5%);
    width: calc(100% - 32px); margin: 0 auto; height: auto;
    filter: drop-shadow(0 0 22.5px rgba(37,99,235,0.20));
  }
  .l3-crm-img { clip-path: inset(0 round 20px); width: 100%; height: auto; }
  .l3-crm-chat { display: none; }
  .l3-crm-text {
    position: relative; left: auto; top: auto;
    width: calc(100% - 80px); margin: 28px auto 0;
    gap: 20px; align-items: center; text-align: center;
  }
  .l3-crm-title { font-size: 30px; text-align: center; }
  .l3-crm-desc  { font-size: 16px; width: 100%; text-align: center; }
  .l3-crm-text .btn-gradient { width: 100%; justify-content: center; }

  /* ── ANALÍTICA mobile ── */
  .l3-analitica {
    padding: 40px 0 48px;
    display: flex; flex-direction: column; align-items: center;
    position: relative; height: auto;
  }
  .l3-dashboard-wrap {
    position: relative; left: auto; top: auto;
    width: 75%; margin: 0 0 0 auto;
    height: auto; border-radius: 20px 0 0 20px; overflow: hidden;
    box-shadow: 0 0 22.5px rgba(37,99,235,0.20);
    filter: none;
  }
  .l3-dashboard-wrap img { width: 100%; height: auto; }
  .l3-ana-text {
    position: relative; left: auto; top: auto;
    width: calc(100% - 80px); margin: 28px auto 0;
    gap: 20px; align-items: flex-start;
  }
  .l3-ana-title { font-size: 30px; white-space: normal; text-align: center; width: 100%; }
  .l3-ana-bullets { position: static; height: auto; display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .l3-ana-bullet { position: static; top: auto; left: auto; width: 100%; height: auto; }
  .l3-ana-bullet:nth-child(1),
  .l3-ana-bullet:nth-child(2),
  .l3-ana-bullet:nth-child(3) { top: auto; }
  .l3-ana-bullet span { font-size: 15px; width: auto; }
  .l3-ana-text .btn-gradient { width: 100%; justify-content: center; font-size: 20px; height: 64px; margin-top: 8px; }

  /* ── DEMO mobile ── */
  .l3-demo {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0px 0px 0px;
    gap: 2px;
  }
  .l3-demo-text {
    position: relative; left: auto; top: auto;
    width: 100%; padding: 0 20px;
    text-align: center;
    order: -1;
    transform: none !important;
  }
  .l3-demo-text p {
    font-size: 18px;
    margin-top: 6px;
    line-height: 1.29;
  }
  .l3-demo-title { font-size: 25px; text-align: center; white-space: normal; }
  .l3-demo-slider-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 84%;
    margin: 0 auto;
    height: 420px;
    overflow: hidden;
  }
  .l3-demo-slider { min-height: 100%; }
  .l3-demo-wrap img { transform: scale(0.8); transform-origin: top center; }

  /* ── PASA NIVEL mobile (cta-whatsapp) ── */
  .cta-whatsapp { padding: 0 16px 48px; }
  .cta-wa-card { height: auto; padding: 40px 28px; }
  .cta-wa-inner { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .cta-wa-title { font-size: 18px; text-align: center; }
  .btn-white {
    font-size: 18px;
    height: 58px;
    padding-left: 34px;
    padding-right: 10px;
    width: auto;
    align-self: center;
    font-weight: 500;
  }
  .btn-white-icon { width: 46px; height: 46px; }

  /* ── FOOTER mobile ── */
  .footer { min-height: unset; padding: 0; }
  .footer-inner { flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 68px 24px; height: auto; }
  .footer-logo  { width: 200px; }
  .footer-social { height: 32px; }
}